/* ============================================================================ ARCADE NOIR — the shared design system for games.amit.marketing One stylesheet. Each game re-tints the entire site with a single --hue. ========================================================================== */ @font-face{font-family:Geist;src:url(/assets/fonts/geist.woff2) format('woff2');font-weight:100 900;font-display:swap;font-style:normal} @font-face{font-family:'Geist Mono';src:url(/assets/fonts/geist-mono.woff2) format('woff2');font-weight:100 900;font-display:swap;font-style:normal} :root{ --hue:255; --good:oklch(0.75 0.165 55); /* CVD-safe orange — never paired with hue alone */ --info:oklch(0.65 0.175 250); /* CVD-safe blue */ --danger:oklch(0.63 0.20 25); --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:28px; --r-pill:999px; --edge:inset 0 1px 0 rgb(255 255 255 / .07); --sh-1:0 1px 2px rgb(0 0 0 / .45); --sh-2:0 4px 14px rgb(0 0 0 / .38), 0 1px 3px rgb(0 0 0 / .5); --sh-3:0 14px 44px rgb(0 0 0 / .48), 0 2px 8px rgb(0 0 0 / .5); --glow:0 0 28px color-mix(in oklch, var(--accent), transparent 74%); --ease-out:cubic-bezier(.16,1,.3,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); --t-fast:120ms; --t-base:220ms; --t-slow:500ms; --wrap:1120px; --sans:Geist,'Geist Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace; color-scheme:dark; } /* Hue-derived tokens are declared on because that is where the per-game --hue lives. Declaring them on :root would bake the root hue into every page. */ body{ --bg:oklch(0.135 0.014 var(--hue)); --bg-deep:oklch(0.10 0.012 var(--hue)); --surface:oklch(0.175 0.016 var(--hue)); --surface-2:oklch(0.215 0.019 var(--hue)); --line:oklch(0.29 0.015 var(--hue)); --text:oklch(0.96 0.006 var(--hue)); --muted:oklch(0.66 0.014 var(--hue)); --accent:oklch(0.74 0.175 var(--hue)); --accent-hi:color-mix(in oklch, var(--accent), white 16%); --accent-dim:color-mix(in oklch, var(--accent), var(--bg) 72%); --glow:0 0 28px color-mix(in oklch, var(--accent), transparent 74%); } /* per-game hues */ [data-game=starlock]{--hue:85} [data-game=outrank]{--hue:255} [data-game=summit]{--hue:158} *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--sans);background:var(--bg);color:var(--text); font-size:17px;line-height:1.6;min-height:100svh; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } /* the studio signature: an accent spotlight behind everything + fine film grain */ body::before{ content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1000px 620px at 50% -12%, color-mix(in oklch,var(--accent),transparent 84%), transparent 70%), radial-gradient(700px 480px at 88% 8%, color-mix(in oklch,var(--info),transparent 92%), transparent 70%), linear-gradient(var(--bg-deep), var(--bg) 40%); } body::after{ content:'';position:fixed;inset:0;z-index:9999;pointer-events:none; opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } img,svg{display:block;max-width:100%} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-hi)} /* --------------------------------------------------------------------------- DESIGNED FOCUS (spec §3.6) This is not a nicety on a games site. Every playfield here is driven from the keyboard, and three of the eight (Starlock, Summit, Outrank) are played entirely by tabbing between real