/* ============================================================ PITWALL — base.css Tokens (from Apex DS) · light/dark themes · series theming · preloader · nav · HUD · scroll line + puck · hero · buttons ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300..800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); @font-face { font-family: 'Panchang'; src: url('../fonts/Panchang-Extralight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Panchang'; src: url('../fonts/Panchang-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Panchang'; src: url('../fonts/Panchang-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Panchang'; src: url('../fonts/Panchang-Extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Panchang Variable'; src: url('../fonts/Panchang-Variable.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { /* Carbon ramp (Apex DS) */ --carbon-950: #0A0B0D; --carbon-900: #121419; --carbon-850: #181B21; --carbon-800: #1F232B; --carbon-700: #2C313B; --carbon-600: #3E4551; --carbon-500: #5A626F; --carbon-400: #828B99; --carbon-300: #AEB6C1; --carbon-200: #D4D9DF; --carbon-150: #E4E8EC; --carbon-100: #EEF1F3; --carbon-050: #F6F8F9; --white: #FFFFFF; --red-500: #F5331D; --red-600: #D62718; --red-400: #FF5440; --go-500: #00C16A; --caution-500: #FFB020; --info-500: #2D7DF6; --purple-sector: #B14CF0; /* Series brand colors */ --c-f1: #E10600; --c-f2: #00A0DE; --c-wec: #2B59FF; --font-display: 'Panchang', 'Hanken Grotesk', system-ui, sans-serif; --font-display-var: 'Panchang Variable', 'Panchang', sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --ls-wider: 0.12em; --ls-widest: 0.22em; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); --pad-x: clamp(20px, 5vw, 72px); } /* ---------- Theme: dark (default) ---------- */ :root, [data-theme="dark"] { --bg-page: var(--carbon-950); --bg-subtle: var(--carbon-900); --surface-card: var(--carbon-850); --surface-raised: var(--carbon-800); --text-strong: var(--white); --text-body: var(--carbon-200); --text-muted: var(--carbon-400); --text-faint: var(--carbon-500); --border-hairline: var(--carbon-800); --border-default: var(--carbon-700); --border-strong: var(--carbon-600); --accent: var(--red-500); --line-track: rgba(255,255,255,0.10); --ghost-ink: rgba(255,255,255,0.045); --scrim: rgba(10,11,13,0.78); color-scheme: dark; } [data-theme="light"] { --bg-page: var(--carbon-050); --bg-subtle: var(--carbon-100); --surface-card: var(--white); --surface-raised: var(--white); --text-strong: var(--carbon-950); --text-body: var(--carbon-800); --text-muted: var(--carbon-500); --text-faint: var(--carbon-400); --border-hairline: var(--carbon-150); --border-default: var(--carbon-200); --border-strong: var(--carbon-300); --accent: var(--red-500); --line-track: rgba(10,11,13,0.10); --ghost-ink: rgba(10,11,13,0.05); --scrim: rgba(246,248,249,0.80); color-scheme: light; } /* ---------- Series theming (set on ) ---------- */ :root, [data-series="apex"] { --series: var(--red-500); --series-ink: #fff; --series-soft: rgba(245,51,29,0.14); --series-name: 'PIT LANE'; } [data-series="f1"] { --series: var(--c-f1); --series-ink:#fff; --series-soft: rgba(225,6,0,0.14); } [data-series="f2"] { --series: var(--c-f2); --series-ink:#001018; --series-soft: rgba(0,160,222,0.14); } [data-series="wec"] { --series: var(--c-wec); --series-ink:#fff; --series-soft: rgba(43,89,255,0.16); } [data-theme="light"][data-series="f2"] { --series: #0083C4; --series-ink:#fff; } [data-theme="light"][data-series="wec"] { --series: #1D43D8; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; } body { font-family: var(--font-body); background: color-mix(in oklab, var(--bg-page) 94%, var(--series)); color: var(--text-body); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color 0.7s ease, color 0.4s ease; } ::selection { background: var(--series); color: var(--series-ink); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img, svg { display: block; } .mono { font-family: var(--font-mono); letter-spacing: var(--ls-wider); text-transform: uppercase; } .kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--series); display: inline-flex; align-items: center; gap: 12px; transition: color 0.5s ease; } .kicker::before { content: ''; width: 34px; height: 3px; background: var(--series); transition: background 0.5s ease; } h1, h2, h3 { color: var(--text-strong); transition: color 0.4s ease; } /* ============================================================ PRELOADER — five start lights ============================================================ */ #loader { position: fixed; inset: 0; z-index: 200; background: var(--carbon-950); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; transition: opacity 0.5s ease, visibility 0.5s; } #loader.out { opacity: 0; visibility: hidden; } .start-lights { display: flex; gap: clamp(10px, 2vw, 22px); } .start-light { width: clamp(34px, 5vw, 56px); height: clamp(34px, 5vw, 56px); border-radius: 50%; background: #1F232B; border: 1px solid #2C313B; transition: background 0.12s, box-shadow 0.12s; } .start-light.on { background: var(--c-f1); box-shadow: 0 0 28px rgba(225,6,0,0.8), 0 0 64px rgba(225,6,0,0.4); } #loader .mono { font-size: 12px; color: var(--carbon-400); } /* ============================================================ NAV ============================================================ */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-x); background: var(--scrim); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-hairline); transition: background-color 0.7s ease, border-color 0.5s ease, transform 0.4s var(--ease-out); } #nav.hidden { transform: translateY(-110%); } .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.015em; color: var(--text-strong); display: flex; align-items: baseline; } .wordmark .dot { color: var(--series); transition: color 0.5s ease; } .nav-links { display: flex; gap: 6px; } .nav-link { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); padding: 8px 12px; position: relative; transition: color 0.2s; } .nav-link::after { content: ''; position: absolute; left: 12px; right: 100%; bottom: 4px; height: 2px; background: var(--series); transition: right 0.3s var(--ease-out); } .nav-link:hover { color: var(--text-strong); } .nav-link:hover::after { right: 12px; } .nav-link.active { color: var(--series); } .nav-right { display: flex; align-items: center; gap: 14px; } #theme-toggle { width: 64px; height: 30px; border-radius: 4px; border: 1px solid var(--border-default); position: relative; font-family: var(--font-mono); font-size: 10px; font-weight: 700; overflow: hidden; transition: border-color 0.3s; } #theme-toggle:hover { border-color: var(--series); } #theme-toggle .tt-knob { position: absolute; top: 2px; left: 2px; width: 28px; height: 24px; border-radius: 3px; background: var(--text-strong); color: var(--bg-page); display: grid; place-items: center; transition: transform 0.35s var(--ease-snap), background 0.4s, color 0.4s; } [data-theme="light"] #theme-toggle .tt-knob { transform: translateX(30px); } #theme-toggle .tt-rail { position: absolute; inset: 0; display: flex; } #theme-toggle .tt-rail span { flex: 1; display: grid; place-items: center; color: var(--text-faint); } .btn { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 4px; position: relative; overflow: hidden; border: 1px solid var(--border-strong); color: var(--text-strong); transition: color 0.25s, border-color 0.25s, transform 0.1s; will-change: transform; } .btn:active { transform: translateY(1px); } .btn .btn-fill { position: absolute; inset: 0; z-index: -1; background: var(--series); transform: translateY(101%); transition: transform 0.3s var(--ease-out); } .btn:hover { color: var(--series-ink); border-color: var(--series); } .btn:hover .btn-fill { transform: translateY(0); } .btn.primary { background: var(--series); border-color: var(--series); color: var(--series-ink); transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.25s, transform 0.1s; } .btn.primary:hover { box-shadow: 0 6px 28px -4px var(--series); } .btn.primary .btn-fill { background: var(--text-strong); } .btn.primary:hover { color: var(--bg-page); } .btn-sm { padding: 9px 14px; font-size: 11px; } /* ============================================================ HUD (bottom-left telemetry readout) ============================================================ */ #hud { position: fixed; left: var(--pad-x); bottom: 18px; z-index: 90; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); display: flex; gap: 18px; align-items: center; pointer-events: none; transition: opacity 0.4s; } #hud b { color: var(--text-strong); font-weight: 700; font-variant-numeric: tabular-nums; } #hud .hud-series { color: var(--series); font-weight: 700; transition: color 0.5s ease; } #hud .hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--series); animation: hud-pulse 1.6s infinite; transition: background 0.5s ease; } @keyframes hud-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } /* ============================================================ SCROLL LINE + PUCK ============================================================ */ #line-layer { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; pointer-events: none; } #puck-layer { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; pointer-events: none; } #line-svg { position: absolute; top: 0; left: 0; overflow: visible; } #track-path { fill: none; stroke: var(--line-track); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; transition: stroke 0.5s ease; } #draw-path { fill: none; stroke: var(--series); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--series) 70%, transparent)); transition: stroke 0.5s ease; } #puck { position: absolute; top: 0; left: 0; width: 0; height: 0; will-change: transform; } .puck-car { position: absolute; top: 0; left: 0; width: 88px; height: 41px; margin: -20.5px 0 0 -44px; color: var(--series); filter: drop-shadow(0 0 12px color-mix(in oklab, var(--series) 65%, transparent)) drop-shadow(0 5px 12px rgba(0,0,0,0.35)); transition: color 0.5s ease; will-change: transform; } .puck-car svg { width: 100%; height: 100%; display: none; } .car-body { position: absolute; inset: 0; transform-origin: 50% 50%; } .puck-car[data-car="f1"] .car-f1 { display: block; } .puck-car[data-car="f2"] .car-f2 { display: block; } .puck-car[data-car="wec"] .car-wec { display: block; } #puck.pop .puck-car svg { animation: car-pop 0.5s var(--ease-snap); transform-origin: 50% 50%; } @keyframes car-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } /* ============================================================ PIT-STOP CAR SWAP — series-accurate crews F1: 3/wheel + 2 jacks + 2 stabilisers · F2: 1 gunner/wheel + 2 jacks WEC: refuel first (no tyre work), then 2 tyre mechanics ============================================================ */ .pit-box { position: absolute; top: 50%; left: 50%; width: 156px; height: 96px; margin: -48px 0 0 -78px; border: 2px dashed var(--series); border-radius: 8px; opacity: 0; transition: border-color 0.5s ease; } #puck.pitting .pit-box { animation: pit-box var(--pit-dur, 2300ms) ease both; } @keyframes pit-box { 0% { opacity: 0; transform: scale(1.4); } 9%, 88% { opacity: 0.85; transform: scale(1); } 100% { opacity: 0; transform: scale(0.94); } } /* car up on jacks (toward camera), drop near the end */ #puck.pitting .car-body { animation: pit-lift var(--pit-dur, 2300ms) ease-in-out both; } @keyframes pit-lift { 0% { scale: 1; } 10%, 84% { scale: 1.08; } 91%, 100% { scale: 1; } } /* ---- crew primitives ---- */ .pit-crew { position: absolute; inset: 0; display: none; } #puck.pitting[data-crew="f1"] .crew-f1 { display: block; } #puck.pitting[data-crew="f2"] .crew-f2 { display: block; } #puck.pitting[data-crew="wec"] .crew-wec { display: block; } .mech { position: absolute; z-index: 3; width: 13px; height: 8px; border-radius: 4px; background: #15181D; box-shadow: inset 0 0 0 1.5px var(--series); opacity: 0; } .mech::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%); background: #E8EAED; } .tyre { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: #101216; box-shadow: inset 0 0 0 2px #353C46; } .tyre.t-new { box-shadow: inset 0 0 0 2px var(--series); } .wcrew { position: absolute; width: 0; height: 0; } .wcrew .mech, .wcrew .grp { --dy: calc(var(--dir, -1) * 22px); } .wcrew .m-gun { left: -16px; top: -4px; } .grp { position: absolute; left: 0; top: 0; opacity: 0; } .grp .tyre { left: -4.5px; top: -4.5px; } .grp .m-hand { left: 6px; top: -4px; opacity: 1; } .marshal { box-shadow: inset 0 0 0 1.5px var(--red-500); } /* generic in/out (offsets via --dx/--dy) */ @keyframes crew-in { from { opacity: 0; translate: var(--dx, 0px) var(--dy, 0px); } to { opacity: 1; translate: 0px 0px; } } @keyframes crew-out { to { opacity: 0; translate: var(--dx, 0px) var(--dy, 0px); } } /* old tyre appears at the hub, is wheeled away */ @keyframes tyre-off { 0% { opacity: 0; translate: 0px 0px; } 25% { opacity: 1; } 100% { opacity: 1; translate: calc(var(--dir, -1) * -6px) calc(var(--dir, -1) * 20px); } } /* new tyre wheeled in to the hub */ @keyframes tyre-on { 0% { opacity: 0; translate: calc(var(--dir, -1) * 8px) calc(var(--dir, -1) * 26px); } 25% { opacity: 1; } 100% { opacity: 1; translate: 0px 0px; } } @keyframes fade-away { to { opacity: 0; } } @keyframes gun-fire { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--series); } 30%, 70% { box-shadow: inset 0 0 0 1.5px var(--series), 0 0 11px 3px #FFFFFF; } } /* ---- F1: ~2.3s stop ---- */ #puck.pitting[data-crew="f1"] .crew-f1 .m-gun { animation: crew-in 0.24s var(--ease-out) both, gun-fire 0.2s 0.45s, gun-fire 0.2s 1.5s, crew-out 0.26s 1.95s forwards; } #puck.pitting[data-crew="f1"] .crew-f1 .jack, #puck.pitting[data-crew="f1"] .crew-f1 .stab { animation: crew-in 0.24s var(--ease-out) both, crew-out 0.26s 2s forwards; } #puck.pitting[data-crew="f1"] .crew-f1 .grp-off { animation: tyre-off 0.45s 0.6s var(--ease-out) both, fade-away 0.25s 1.9s forwards; } #puck.pitting[data-crew="f1"] .crew-f1 .grp-on { animation: tyre-on 0.45s 1.05s var(--ease-out) both, fade-away 0.25s 1.9s forwards; } /* ---- F2: ~2.8s stop, gunner works alone ---- */ #puck.pitting[data-crew="f2"] .crew-f2 .m-gun { animation: crew-in 0.26s var(--ease-out) both, gun-fire 0.22s 0.5s, gun-fire 0.22s 1.95s, crew-out 0.28s 2.4s forwards; } #puck.pitting[data-crew="f2"] .crew-f2 .jack { animation: crew-in 0.26s var(--ease-out) both, crew-out 0.28s 2.45s forwards; } #puck.pitting[data-crew="f2"] .crew-f2 .grp-off { animation: tyre-off 0.55s 0.7s var(--ease-out) both, fade-away 0.25s 2.35s forwards; } #puck.pitting[data-crew="f2"] .crew-f2 .grp-on { animation: tyre-on 0.55s 1.35s var(--ease-out) both, fade-away 0.25s 2.35s forwards; } /* ---- WEC: ~3.8s — refuel phase, then 2 tyre mechanics ---- */ .hose { position: absolute; left: 84px; top: 9px; width: 26px; height: 3px; border-radius: 2px; background: var(--caution-500); transform-origin: right center; transform: rotate(14deg) scaleX(0); opacity: 0; } #puck.pitting[data-crew="wec"] .crew-wec .hose { animation: hose-fuel 1.5s 0.25s both; } @keyframes hose-fuel { 0% { opacity: 0; transform: rotate(14deg) scaleX(0); } 12% { opacity: 1; transform: rotate(14deg) scaleX(1); } 20%, 80% { opacity: 1; } 30%, 60% { opacity: 0.55; } 100% { opacity: 0; transform: rotate(14deg) scaleX(0); } } #puck.pitting[data-crew="wec"] .crew-wec .fueler, #puck.pitting[data-crew="wec"] .crew-wec .deadman { animation: crew-in 0.28s var(--ease-out) both, crew-out 0.3s 1.8s forwards; } #puck.pitting[data-crew="wec"] .crew-wec .marshal { animation: crew-in 0.28s var(--ease-out) both, crew-out 0.3s 3.4s forwards; } /* two tyre mechanics enter after fuelling, work rear → front */ #puck.pitting[data-crew="wec"] .crew-wec .twm { animation: crew-in 0.28s 1.55s var(--ease-out) both, twm-walk 1s 2.25s ease-in-out forwards, gun-fire 0.22s 1.95s, gun-fire 0.22s 3.05s, crew-out 0.3s 3.45s forwards; } @keyframes twm-walk { from { translate: 0px 0px; } to { translate: 50px 0px; } } /* tyres swap as the mechanic reaches each axle */ .wt { opacity: 0; } #puck.pitting[data-crew="wec"] .crew-wec .wt-rt, #puck.pitting[data-crew="wec"] .crew-wec .wt-rb { animation: wt-swap 0.9s 1.75s both; } #puck.pitting[data-crew="wec"] .crew-wec .wt-ft, #puck.pitting[data-crew="wec"] .crew-wec .wt-fb { animation: wt-swap 0.9s 2.85s both; } @keyframes wt-swap { 0% { opacity: 0; box-shadow: inset 0 0 0 2px #353C46; } 20%, 45% { opacity: 1; box-shadow: inset 0 0 0 2px #353C46; } 55%, 80% { opacity: 1; box-shadow: inset 0 0 0 2px var(--series); } 100% { opacity: 0; } } .puck-ring { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%,-50%); border-radius: 50%; border: 2px solid var(--series); animation: ring-pulse 1.8s var(--ease-out) infinite; transition: border-color 0.5s ease; } @keyframes ring-pulse { 0% { width: 56px; height: 56px; opacity: 0.8; } 100% { width: 120px; height: 120px; opacity: 0; } } #puck .puck-vel { position: absolute; top: 50%; left: 50%; width: 70px; height: 3px; background: linear-gradient(90deg, transparent, var(--series)); transform-origin: right center; transform: translate(-100%, -50%) translateX(-34px) scaleX(0); border-radius: 2px; } /* ============================================================ GENERIC SECTION SCAFFOLD ============================================================ */ main { position: relative; z-index: 2; } .sec { position: relative; padding: clamp(96px, 14vh, 160px) var(--pad-x); } .sec-inner { max-width: 1280px; margin: 0 auto; position: relative; } .ghost-num { position: absolute; top: 0; right: -0.05em; font-family: var(--font-display); font-weight: 800; font-size: clamp(160px, 28vw, 420px); line-height: 0.8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ghost-ink); user-select: none; pointer-events: none; white-space: nowrap; } .sec-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 7vw, 104px); line-height: 1.02; letter-spacing: -0.02em; margin: 22px 0 26px; max-width: 14ch; text-wrap: balance; } .sec-title .tw { display: inline-block; overflow: hidden; vertical-align: bottom; } .sec-title .tw > span { display: inline-block; transform: translateY(110%); } .sec-lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; max-width: 56ch; color: var(--text-body); text-wrap: pretty; } .sec-lede strong { color: var(--text-strong); font-weight: 600; } .sec-lede code, .inline-code { font-family: var(--font-mono); font-size: 0.85em; background: var(--series-soft); color: var(--series); padding: 2px 7px; border-radius: 3px; transition: color 0.5s, background 0.5s; } /* fade/slide reveal primitive (JS-driven) */ [data-reveal] { opacity: 0; } /* ============================================================ HERO ============================================================ */ #hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 140px; overflow: clip; } #hero .sec-inner { width: 100%; } .hero-h1 { font-family: var(--font-display-var); font-weight: 800; font-size: clamp(52px, 10.5vw, 168px); line-height: 0.94; letter-spacing: -0.025em; text-transform: uppercase; margin: 28px 0 34px; color: var(--text-strong); } .hero-h1 .hl { display: block; white-space: nowrap; } .hero-h1 .ch { display: inline-block; font-variation-settings: 'wght' 800; transition: font-variation-settings 0.45s var(--ease-out), color 0.3s, transform 0.45s var(--ease-out); will-change: transform; } .hero-h1 .ch:hover { font-variation-settings: 'wght' 200; color: var(--series); transform: translateY(-0.06em); transition-duration: 0.12s; } .hero-h1 .hl-accent .ch { color: var(--series); transition: color 0.5s ease, font-variation-settings 0.45s var(--ease-out), transform 0.45s var(--ease-out); } .hero-h1 .hl-accent .ch:hover { color: var(--text-strong); } .hero-sub { display: flex; gap: clamp(24px, 4vw, 64px); align-items: flex-start; flex-wrap: wrap; } .hero-sub .sec-lede { flex: 1 1 420px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; } .hero-stats { display: flex; gap: clamp(28px, 5vw, 80px); margin-top: clamp(40px, 6vh, 72px); padding-top: 28px; border-top: 1px solid var(--border-hairline); } .hstat .hstat-v { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 48px); color: var(--text-strong); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; } .hstat .hstat-v em { font-style: normal; color: var(--series); transition: color 0.5s ease; } .hstat .hstat-l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-faint); margin-top: 6px; } /* hero grid backdrop */ .hero-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line-track) 1px, transparent 1px), linear-gradient(90deg, var(--line-track) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 0%, transparent 75%); opacity: 0.5; } /* ---------- Marquee ---------- */ .marquee { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); overflow: hidden; padding: 13px 0; background: color-mix(in oklab, var(--bg-page) 80%, transparent); } .marquee-track { display: flex; gap: 0; width: max-content; will-change: transform; } .marquee-chunk { display: flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .marquee-chunk .sep { color: var(--series); transition: color 0.5s ease; } /* ---------- Checker strip ---------- */ .checker { height: 14px; background: repeating-conic-gradient(var(--text-strong) 0% 25%, transparent 0% 50%) 0 0 / 14px 14px; opacity: 0.9; } /* ---------- Scrolldown hint ---------- */ .scroll-hint { position: absolute; right: var(--pad-x); bottom: 70px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 10px; writing-mode: vertical-rl; } .scroll-hint::after { content: ''; width: 1px; height: 48px; background: var(--series); animation: hint-drop 1.6s var(--ease-out) infinite; } @keyframes hint-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .nav-links { display: none; } #hud { display: none; } .puck-car { scale: 0.75; } .ghost-num { font-size: clamp(120px, 30vw, 200px); opacity: 0.7; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } [data-reveal] { opacity: 1; } }