/* ============================================================ DJ WIZ HOFFA — V1 DESIGN TOKENS tokens.css?v=4 — load FIRST, before site.css. Palette law: black + crimson only in UI chrome. Gold exists ONLY inside photographed merch/flyer content, never as chrome. --crimson-hot is reserved for hover states and glow effects. ============================================================ */ :root { /* ---------- Color ---------- */ --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) */ --crimson: #9E1B32; /* brand red — surfaces, bars, accents */ --crimson-hot: #C42B42; /* HOVER + GLOW ONLY */ --crimson-deep: #6E1223; /* pressed / active */ --haze: rgba(158, 27, 50, 0.14); /* crimson haze wash */ --line: rgba(242, 239, 228, 0.12); /* hairline borders */ --line-strong: rgba(242, 239, 228, 0.22); /* frame borders */ --line-crimson: rgba(158, 27, 50, 0.45); /* crimson hairline */ --crimson-text: #D14A63; /* 4.59:1 on black — crimson TEXT + links (passes AA normal) */ --crimson-line: #C4324E; /* 3.69:1 on black — large text, icon strokes, tracks (passes AA large) */ /* CONTRAST LAW: crimson (2.4:1) and crimson-hot (3.4:1) on black FAIL AA for body text — they are FILL/accent only, never copy. Crimson COPY uses the lighter --crimson-text (4.59:1); crimson strokes and large-text accents use --crimson-line (3.69:1). Text on crimson surfaces is always --ivory (6.8:1, passes). */ /* ELEVATION LADDER IS AT ITS CEILING — do not raise these values. --smoke is the binding constraint: it measures 4.96:1 on --bg-2, 4.81:1 on --panel and 4.60:1 on --panel-2 today. Raising the ladder the way it is tempting to (e.g. --panel-2 to #212128) drops --smoke to 4.12:1 and breaks AA on every eyebrow, stat label and meta line on all seven pages. 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: "Anton", "Arial Narrow", Impact, sans-serif; /* display titles */ --font-logo: "Bebas Neue", "Anton", Impact, 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) */ --fs-hero: clamp(3rem, 14vw, 10.5rem); /* one per page, hero statements */ --fs-display: clamp(2.6rem, 8vw, 6.25rem); /* big chapter titles */ --fs-title: clamp(2rem, 4.5vw, 3.6rem); /* 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(2.6rem, 6vw, 4.75rem); /* Bebas 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-crimson: 0 0 0 1px color-mix(in srgb, var(--crimson-hot) 25%, transparent), 0 0 28px color-mix(in srgb, var(--crimson-hot) 30%, transparent); --glow-crimson-soft: 0 0 60px color-mix(in srgb, var(--crimson) 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 */ 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 */