/* ============================================================ 518 Official — V1 DESIGN TOKENS tokens.css?v=1 — load FIRST, before site.css. Palette law: black + VOLTAGE COBALT in UI chrome. Cobalt is the brand's electricity — buttons, ticks, underlines, glow. DROP AMBER exists ONLY on apparel/commerce surfaces (drop flags, price slabs, merch CTAs) — never as page chrome. The old gold rule is dead: no gold anywhere in RIZZ chrome. --rizz-hot is reserved for hover states and glow effects. ============================================================ */ :root { /* ---------- Color · neutrals (UNCHANGED — the elevation/AA engineering below depends on these exact values) ---------- */ --bg: #0A0A0A; /* near black — page ground */ --bg-2: #0E0E10; /* alt band / footer ground */ --panel: #121214; /* dark card panel */ --panel-2: #17171A; /* raised panel / hover */ --flyer-ground: #101013; /* archival frame ground — .flyer-card, .next-slot, form fills. Sits between --bg-2 and --panel on purpose: the frame must read DARKER than the card it holds. */ --ivory: #F2EFE4; /* primary text */ --ivory-80: rgba(242, 239, 228, 0.82); /* secondary text */ --ivory-60: rgba(242, 239, 228, 0.60); /* tertiary text */ --smoke: #7D8285; /* labels, meta (AA on --bg at >=15px) */ /* ---------- Color · VOLTAGE COBALT (brand chrome) ---------- */ --rizz: #2B4BE0; /* brand cobalt — surfaces, bars, accents */ --rizz-hot: #3D5DF0; /* HOVER + GLOW ONLY */ --rizz-deep: #1E34A8; /* pressed / active */ --rizz-haze: rgba(43, 75, 224, 0.14); /* cobalt haze wash */ --rizz-text: #7D96FF; /* 7.24:1 on black — cobalt TEXT + links (passes AA normal) */ --rizz-line: #4661DE; /* 3.79:1 on black — large text, icon strokes, tracks (passes AA large) */ --line-rizz: rgba(43, 75, 224, 0.48); /* cobalt hairline */ /* ---------- Color · DROP AMBER (apparel/commerce ONLY) ---------- */ --drop: #E89B2E; /* amber fill — drop flags, price slabs, merch CTAs. 8.63:1 vs black BOTH ways: text ON amber surfaces is --bg (near-black), never ivory. */ --drop-text: #E8A83C; /* 9.52:1 on black — amber TEXT on dark grounds */ /* ---------- Color · lines ---------- */ --line: rgba(242, 239, 228, 0.12); /* hairline borders */ --line-strong: rgba(242, 239, 228, 0.22); /* frame borders */ /* CONTRAST LAW (measured 2026-08-16, WCAG relative luminance, on #0A0A0A): --rizz 3.00:1 FILL/accent only — passes AA-large as a stroke but is NOT body copy; ivory on --rizz = 5.73:1 (passes). --rizz-hot 3.79:1 hover/glow only; ivory on --rizz-hot = 4.54:1 (passes). --rizz-deep pressed fill; ivory on --rizz-deep = 8.64:1 (passes). --rizz-text 7.24:1 the ONLY cobalt for copy + links at any size. --rizz-line 3.79:1 strokes, underlines, ticks, large-text accents. --drop 8.63:1 amber fill; text on amber is --bg (8.63:1), NOT ivory (ivory on --drop = 1.99:1 — FAILS, never do it). --drop-text 9.52:1 amber copy on dark grounds (commerce only). Neutrals re-verified same run: ivory on --bg 17.20:1; smoke on --bg 5.09:1. */ /* ELEVATION LADDER IS AT ITS CEILING — do not raise these values. --smoke is the binding constraint: re-measured for RIZZ (same neutrals), it holds 4.96:1 on --bg-2, 4.81:1 on --panel and 4.60:1 on --panel-2. Raising the ladder the way it is tempting to (e.g. --panel-2 to #212128) drops --smoke to ~4.1:1 and breaks AA on every eyebrow, stat label and meta line on every page. Section depth is therefore delivered as a GRADIENT at the band's top edge (site.css .sect--band), not as a flat value step — a transition reads as depth where a 4/255 value step does not, and it spends no contrast headroom. */ /* ---------- Type ---------- */ --font-display: "Archivo Black", "Arial Black", Impact, sans-serif; /* display titles */ --font-logo: "Space Grotesk", "Archivo", "Helvetica Neue", sans-serif; /* wordmark + numerals */ --font-label: "Barlow Condensed", "Arial Narrow", sans-serif; /* labels, nav, buttons */ --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif; /* body copy */ /* Type scale (mobile-first, fluid). Archivo Black runs FAR wider than the condensed display face this scale was born under — hero/display/stat ceilings are tuned DOWN so poster lines still fit the 360px floor and the 1280px max without wrapping. */ --fs-hero: clamp(2rem, 5vw, 3.75rem); /* one per page. LOWERED 2026-08-18: the old 9rem ceiling had the headline covering the hero film, and the film is the point of the page. Type serves the footage here. */ --fs-display: clamp(2rem, 5vw, 3.75rem); /* big chapter titles */ --fs-title: clamp(1.6rem, 3.2vw, 2.5rem); /* section titles (h2) */ --fs-h3: clamp(1.35rem, 2.4vw, 1.8rem); --fs-h4: 1.125rem; --fs-lead: clamp(1.0625rem, 1.4vw, 1.3rem); --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.9375rem; /* 15px */ --fs-micro: 0.8125rem; /* 13px — labels only, letterspaced */ --fs-stat: clamp(2rem, 4.2vw, 3.25rem); /* Space Grotesk stat numerals */ --lh-body: 1.65; --lh-tight: 1.02; --ls-label: 0.14em; --ls-eyebrow: 0.22em; /* ---------- Space ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sect-pad: clamp(4.5rem, 9vw, 8rem); /* vertical section rhythm */ --gutter: clamp(1.25rem, 4.5vw, 2.5rem); /* page side gutter */ /* ---------- Layout ---------- */ --w-max: 1280px; /* default content width */ --w-wide: 1440px; /* header, full galleries */ --w-narrow: 820px; /* long-form copy blocks */ --w-copy: 68ch; /* single-column prose measure */ --header-h: 4.75rem; /* 76px desktop; 64px under 768 (set in site.css) */ /* ---------- Z-layers ---------- */ --z-bg: -1; /* backdrop media */ --z-base: 0; --z-raise: 2; /* card hover, foreground cutouts */ --z-content: 10; /* content above backdrop media */ --z-sticky: 200; /* in-page sticky elements */ --z-menu: 700; /* mobile overlay menu (BELOW header so toggle stays clickable) */ --z-header: 800; /* fixed site header */ --z-skip: 1000;/* skip link */ /* ---------- Radii (tight, editorial — no pill cards) ---------- */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* ---------- Shadow + glow ---------- */ --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.5); --shadow-2: 0 14px 44px rgba(0, 0, 0, 0.55); --glow-rizz: 0 0 0 1px color-mix(in srgb, var(--rizz-hot) 25%, transparent), 0 0 28px color-mix(in srgb, var(--rizz-hot) 30%, transparent); --glow-rizz-soft: 0 0 60px color-mix(in srgb, var(--rizz) 22%, transparent); /* ---------- Motion ---------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1); --dur-1: 0.18s; /* micro (hover) */ --dur-2: 0.35s; /* UI state */ --dur-3: 0.6s; /* media / reveal */ /* ---------- TRANSFORM ALIASES (temporary) ---------- The inherited page CSS still speaks the old token dialect. Every old name maps 1:1 onto the RIZZ family so pages keep working mid-transform. New CSS must use the --rizz/--drop names; delete this block once the last page sheet stops referencing old names. */ --crimson: var(--rizz); --crimson-hot: var(--rizz-hot); --crimson-deep: var(--rizz-deep); --haze: var(--rizz-haze); --crimson-text: var(--rizz-text); --crimson-line: var(--rizz-line); --line-crimson: var(--line-rizz); --glow-crimson: var(--glow-rizz); --glow-crimson-soft: var(--glow-rizz-soft); color-scheme: dark; } /* Breakpoints (reference — custom props can't drive media queries): 360 small-phone floor (design must hold here) 768 tablet / 2-col 980 desktop nav switch (hamburger below, inline nav above) 1280 max content width */