/* ============================================================ "What if this arcade company had the internet in 1988?" Global retro skin: pixel fonts, CGA/EGA neon, chunky bevels, notched pixel-panel borders, scanlines. Loaded last in on purpose so it wins the cascade over Bootstrap and the existing component CSS without having to touch any markup. ============================================================ */ :root { --retro-bg: #0a0014; --retro-bg2: #150a2e; --retro-panel: #1a0e33; --retro-magenta: #ff2f92; --retro-cyan: #29f1ff; --retro-amber: #ffd400; --retro-green: #39ff6a; --retro-ink: #eafcff; --retro-grad: linear-gradient(90deg, var(--retro-magenta), var(--retro-cyan)); --font-display: 'Press Start 2P', 'Courier New', monospace; --font-body: 'VT323', 'Courier New', monospace; } /* ---- Bootstrap variable takeover: dark = the arcade cabinet ---- */ :root:not([data-bs-theme="light"]), [data-bs-theme="dark"] { --bs-body-bg: var(--retro-bg); --bs-body-color: var(--retro-ink); --bs-emphasis-color: #ffffff; --bs-secondary-color: #9fb4c9; --bs-secondary-bg: var(--retro-panel); --bs-tertiary-bg: var(--retro-bg2); --bs-border-color: var(--retro-cyan); --bs-border-color-translucent: rgba(41, 241, 255, .35); --bs-primary: var(--retro-magenta); --bs-primary-rgb: 255, 47, 146; --bs-link-color: var(--retro-cyan); --bs-link-hover-color: var(--retro-amber); --bs-link-color-rgb: 41, 241, 255; } /* ---- Light mode: CGA-light, still on-theme, still legible ---- */ [data-bs-theme="light"] { --bs-body-bg: #f4ecff; --bs-body-color: #1a0e33; --bs-emphasis-color: #0a0014; --bs-secondary-color: #4b3b70; --bs-secondary-bg: #e4d4ff; --bs-tertiary-bg: #ede0ff; --bs-border-color: #7a1fa2; --bs-border-color-translucent: rgba(122, 31, 162, .35); --bs-primary: #c2168a; --bs-primary-rgb: 194, 22, 138; --bs-link-color: #7a1fa2; --bs-link-hover-color: #c2168a; } /* ---- Type ---- */ body { font-family: var(--font-body); font-size: 1.25rem; /* VT323 has a small x-height; compensate */ line-height: 1.5; letter-spacing: .02em; } h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .badge { font-family: var(--font-display); } h1 { font-size: 1.7rem; line-height: 1.5; } h2 { font-size: 1.05rem; line-height: 1.6; } h3 { font-size: .9rem; line-height: 1.6; } h5 { font-size: .8rem; line-height: 1.7; } h1, h2, .navbar-brand span { text-transform: uppercase; letter-spacing: .04em; } [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2 { text-shadow: 0 0 6px var(--retro-magenta), 0 0 14px rgba(255, 47, 146, .5); } /* Demoscene "chrome logo" fill on the big heading only */ [data-bs-theme="dark"] h1 { background: linear-gradient(180deg, #ffffff 0%, #ffd9ee 30%, var(--retro-magenta) 55%, #7a1fa2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 18px rgba(255, 47, 146, .55), 0 2px 0 rgba(0,0,0,.6); } /* blinking cursor after every page's main heading — 80s terminal habit */ [data-bs-theme="dark"] h1::after { content: '_'; color: var(--retro-cyan); animation: retroBlink 1s steps(1) infinite; } @keyframes retroBlink { 50% { opacity: 0; } } /* ---- Background: scanlines + a scattering of stars, dark mode only ---- */ [data-bs-theme="dark"] body { background: repeating-linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.35) 3px), radial-gradient(1px 1px at 10% 20%, #fff 100%, transparent), radial-gradient(1px 1px at 80% 65%, #fff 100%, transparent), radial-gradient(1px 1px at 40% 85%, #fff 100%, transparent), radial-gradient(1px 1px at 65% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 25% 55%, #fff 100%, transparent), var(--retro-bg); background-size: auto, 220px 220px, 260px 260px, 300px 300px, 240px 240px, 280px 280px, auto; background-attachment: fixed; } ::selection { background: var(--retro-magenta); color: #04030a; } [data-bs-theme="dark"] ::-webkit-scrollbar { width: 14px; height: 14px; } [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--retro-bg); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--retro-magenta); border: 2px solid var(--retro-cyan); } /* ---- Notched pixel-panel: cards, alerts, cookie boxes ---- */ .pixel-panel, .hib-team-card, .hib-devlog-entry, .game-card, .alert, .cb-box, .cm-box { border-radius: 0 !important; clip-path: polygon( 0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px) ); } [data-bs-theme="dark"] .pixel-panel, [data-bs-theme="dark"] .hib-team-card, [data-bs-theme="dark"] .hib-devlog-entry, [data-bs-theme="dark"] .game-card, [data-bs-theme="dark"] .alert, [data-bs-theme="dark"] .cb-box, [data-bs-theme="dark"] .cm-box { background: var(--retro-panel) !important; border: 3px solid var(--retro-cyan) !important; box-shadow: 6px 6px 0 rgba(0, 0, 0, .6) !important; color: var(--retro-ink) !important; } [data-bs-theme="dark"] .alert strong { color: var(--retro-amber); } /* ---- Buttons: chunky, offset drop-shadow, press-to-flatten ---- */ .btn { border-radius: 0 !important; border-width: 3px !important; text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; padding: .6rem 1rem; transition: transform .05s ease, box-shadow .05s ease; } [data-bs-theme="dark"] .btn { box-shadow: 4px 4px 0 rgba(0, 0, 0, .7) !important; } [data-bs-theme="dark"] .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 rgba(0, 0, 0, .7) !important; } [data-bs-theme="dark"] .hib-btn-primary, [data-bs-theme="dark"] .btn-primary { background: var(--retro-magenta) !important; border-color: var(--retro-cyan) !important; color: #04030a !important; } [data-bs-theme="dark"] .hib-btn-primary:hover, [data-bs-theme="dark"] .btn-primary:hover { background: var(--retro-cyan) !important; color: #04030a !important; } [data-bs-theme="dark"] .btn-outline-secondary, [data-bs-theme="dark"] .btn-outline-light { border-color: var(--retro-cyan) !important; color: var(--retro-cyan) !important; background: transparent !important; } [data-bs-theme="dark"] .btn-outline-secondary:hover, [data-bs-theme="dark"] .btn-outline-light:hover { background: var(--retro-cyan) !important; color: #04030a !important; } [data-bs-theme="dark"] .btn-secondary { background: var(--retro-amber) !important; border-color: var(--retro-magenta) !important; color: #04030a !important; } [data-bs-theme="dark"] .btn-secondary:hover { background: var(--retro-magenta) !important; color: #04030a !important; } [data-bs-theme="dark"] .btn-link { color: var(--retro-cyan) !important; text-decoration: none; } [data-bs-theme="dark"] .btn-link:hover { color: var(--retro-amber) !important; } /* ---- Badges / pills: square, pixel-bordered ---- */ .badge { border-radius: 0 !important; font-size: .55rem !important; letter-spacing: .04em; } [data-bs-theme="dark"] .badge { border: 2px solid rgba(0, 0, 0, .5); } /* ---- Header: arcade marquee ---- */ .hib-header { border-bottom: 4px solid transparent !important; border-image: var(--retro-grad) 1; } [data-bs-theme="dark"] .hib-header { background: linear-gradient(180deg, rgba(10, 0, 20, .94), rgba(10, 0, 20, .88)) !important; } .hib-header .navbar-brand span { font-family: var(--font-display); font-size: .8rem; } .hib-header .nav-link { font-family: var(--font-display); font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; } [data-bs-theme="dark"] .hib-header .nav-link.active { background: var(--retro-grad) !important; color: #04030a !important; } /* ---- Footer ---- */ footer { border-top: 4px solid transparent !important; border-image: var(--retro-grad) 1; } footer small { font-family: var(--font-body); font-size: 1rem; } /* ---- Devlog: month badge + narrative panels ---- */ .hib-devlog-month { border-radius: 0 !important; font-family: var(--font-display) !important; font-size: .55rem !important; } [data-bs-theme="dark"] .hib-devlog-month { background: var(--retro-bg2) !important; color: var(--retro-cyan) !important; border: 2px solid var(--retro-cyan) !important; } /* ---- About: team avatars ---- */ .hib-avatar { border-radius: 0 !important; font-family: var(--font-display); font-size: 1.1rem; } [data-bs-theme="dark"] .hib-avatar { background: var(--retro-grad) !important; border: 3px solid var(--retro-cyan); box-shadow: 3px 3px 0 rgba(0, 0, 0, .6); } /* ---- Games list: covers, status ribbons, tags ---- */ .game-cover { border-radius: 0 !important; } [data-bs-theme="dark"] .game-cover::after { background: repeating-linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.25) 3px), linear-gradient(180deg, rgba(255, 47, 146, .18), rgba(41, 241, 255, .18)) !important; mix-blend-mode: normal !important; } .game-status, .game-tags .badge { border-radius: 0 !important; } /* ============================================================ Amiga demoscene touch: a sine-wave scrolltext, plain dark strip. Disabled under prefers-reduced-motion. ============================================================ */ .hib-scroller { overflow: hidden; height: 2.5rem; display: flex; align-items: center; } [data-bs-theme="dark"] .hib-scroller { background: var(--retro-bg2); border-bottom: 2px solid var(--retro-cyan); } .hib-scroller-track { display: flex; white-space: nowrap; width: max-content; } @media (prefers-reduced-motion: no-preference) { .hib-scroller-track { animation: hibScrollX 45s linear infinite; } } @keyframes hibScrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hib-scroller-copy { font-family: var(--font-display); font-size: .8rem; } [data-bs-theme="dark"] .hib-scroller-copy { color: var(--retro-cyan); text-shadow: 0 0 6px rgba(41, 241, 255, .6); } .hib-scroller-copy span { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .hib-scroller-copy span { animation: hibSineBob 1.2s ease-in-out infinite; } } @keyframes hibSineBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }