/* FANATIK Design Tokens — single source of truth. Loaded before all section CSS in cascade. Per brand-guidelines.md palette + voice law. v2.11.9 — webfonts hydrated. The 6 OFL-licensed WOFF2 binaries below now live in /fonts/ (run fonts/download.sh to refresh). @font-face declarations here bind Inter v4.0 (4 weights) + JetBrains Mono v2.304 (2 weights) with font-display: swap so first paint never blocks on the font load. Closes the P0 Chief-of-Typography finding that EVERY word on the page was rendering in system fallback because no @font-face existed to bind the preloaded URLs to family names. */ @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --black: #000000; --off-black: #0A0A0A; --lime: #D3FE4C; --white: #FFFFFF; --gold: #E6B84D; --slate: #2A2D32; --mute: rgba(255, 255, 255, 0.55); /* --mute-deep is DECORATION-ONLY (separators, em-dashes, decorative chrome, borders). At 2.5:1 on off-black it FAILS WCAG 1.4.3 as text — never use it for meaningful visible copy; use --mute (6.25:1) for body/labels instead. */ --mute-deep: rgba(255, 255, 255, 0.30); --rule: rgba(255, 255, 255, 0.10); /* BRAND: "No red" rule (brand-guidelines.md palette is locked, no red). Wrong-answer states no longer use a red hue — they use a neutral mute treatment plus a non-colour "✗" glyph (WCAG 1.4.1). This token is kept only as a neutral fallback alias of --mute so any latent reference cannot reintroduce an off-palette red; nothing should render #FF8080. */ --red: var(--mute); } /* Global page foundation — fixes T1 white-bg regression. FANATIK is black-dominant; lime + white are accents. Without these rules, body bleeds white wherever sections don't fully cover the viewport. */ html, body { background: var(--off-black); color: var(--white); margin: 0; padding: 0; min-height: 100vh; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Hard guarantee against asset-load palette inversion. When images fail (assets/ empty), backgrounds stay black. Excludes SVG (transparent assets like the FANATIK lime wordmark must remain transparent against the hero photo behind them). */ img:not([src$=".svg"]):not([src*=".svg?"]) { background: var(--off-black); } /* BUG-002 · Global anchor color reset. Without this, any anchor not explicitly styled by a section inherits the browser default rgb(0, 0, 238) link blue — visible on `.hero-chyron__badge` and `.site-header__brand`. The brand palette has no blue. Every anchor inherits parent color and the section-specific rules continue to apply their own colour overrides; this is the safety net. */ a { color: inherit; text-decoration: none; } a:hover, a:focus { color: inherit; } /* BUG-060 · Skip-link focus ring uses brand lime, not browser blue. The `.skip-link:focus-visible` rule in index.html sets the visual chrome of the skip-link itself but does NOT set an outline — so focus falls through to user-agent default blue. Override here so the focus marker is on-brand. */ .skip-link:focus, .skip-link:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; } /* v2.11.9 — DELETED four !important override blocks (was lines 70-148): the 2026-05-14 "fanatik.live consistency" pass forced Inter 400 onto every JBM eyebrow / chyron / footer chrome / app-tour rail / step-index element, silently undoing V2.11.6's picker luxury claim (JBM 700 / 18px / 0.06em) and contradicting brand-guidelines.md doctrine ("JBM 700 for eyebrows + UI chrome + micrographics"). CEO directive 2026-05-21: REVERT — brand canon wins. Each component's own CSS (chyron.css, sections-tail.css, app-tour.css, hero.css, quiz.css) already declares its brand-canonical font; once the override is gone, those rules win and JBM returns for chrome. Pre-existing dead selectors in the deleted block were already orphan: - .pitchside-test__eyebrow → pitchside section removed V2.11.1 - .cabinet__eyebrow → cabinet section pruned V2.11.0 - .chyron-row__room/__lang/__status → picker simplified V2.11.2 - .the-quiz__eyebrow → removed V2.11.9 (this wave) Caught by Chief of Typography audit 2026-05-20. */ /* ============================================================ FW2 fix #5 (CDO D1 — highest impact "feels cheap" fix) ------------------------------------------------------------ Film grain overlay applied via body::after. Inline SVG fractal noise pattern, fixed-positioned over the entire viewport, very low opacity, mix-blend-mode: overlay so it kisses the content without darkening or shifting hue. z-index: 9999 keeps it above sections but below modal/sheet overlays (chyron uses ~z 60-70, this never gets in the way of interaction since pointer-events are disabled). The inline SVG is ~300 bytes — no extra HTTP request, no asset to load. prefers-reduced-motion: reduce keeps the grain present (it adds tactile depth, not motion) but trims to opacity 0.02 to be conservative for vestibular sensitivity. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { body::after { opacity: 0.02; } } /* Forced-colors / high-contrast: hide the grain entirely so system palette reads true. */ @media (forced-colors: active) { body::after { display: none; } } @media print { body::after { display: none; } }