/* ================================================================ Gen B theme — overrides for genb.shuttlestats.{dev,app}. Served from cdn.shuttlestats.{dev,app}/genb/theme.css. Loaded by index.html's boot script via: Selectors use `html[data-tenant="genb"]` to outrank the inline default's `:root` via specificity (0,1,1) > (0,1,0). The boot script sets `data-tenant="genb"` synchronously before paint. ── Design language ──────────────────────────────────────────── Brand palette read straight off the logo artwork: • signature orange #F36E0B oklch(0.689 0.186 47.6) — the pop • deep orange #E56310 oklch(0.653 0.180 45.4) — text fill • marigold / amber #F49818 oklch(0.757 0.163 66.4) — warning/highlight • ink black #111 — wordmark + outlines • warm white #FCFBF8 — surfaces References the customer named: • Nike (nike.com/basketball) — RESTRAINT. Lots of white, near-black ink type, a single confident accent. So: clean bright surfaces, ink-black primary CTA, orange reserved as the energy accent (ring, rank-1, charts, links, active states) — never wallpaper. • Discord (discord.com) — ENERGY. Vivid, playful, colourful. So: a saturated orange-led chart/accent spread, and a dark mode that leans into vibrancy on a warm near-black. Logo constraint (binding): the wordmark + shuttlecock outlines are BLACK on transparency, so the mark only reads on a LIGHT surface. GenB therefore carries a *bright header band in BOTH modes* — the symmetric inverse of TBC's dark band — so the logo always reads. A `logo-dark.png` (ivory wordmark) ships alongside for the hero / wrap-up surfaces once ClubLogo is taught to pick it under `.dark`. Only GenB-specific token values appear here; everything not listed falls through to the default editorial theme baked into the bundle. ================================================================ */ /* Title face — Anton (condensed athletic poster) echoes the logo's bold sport wordmark. SCOPED to large page titles only (text-2xl/3xl/4xl/5xl) so it never hits the small chrome/breadcrumb h1 labels (text-base) or dynamic name titles (SessionHeader is text-xl) — the over-broad raw-h1 version was caught by ui-polish review. Anton ships a single weight, so force 400 (kills faux-bold from the h1's font-bold) and add slight tracking since it runs tight. Body + sub-headings stay Inter. @import must precede all rules. */ @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap'); html[data-tenant="genb"] h1.text-2xl, html[data-tenant="genb"] h1.text-3xl, html[data-tenant="genb"] h1.text-4xl, html[data-tenant="genb"] h1.text-5xl { font-family: 'Anton', 'Inter Variable', 'Inter', system-ui, sans-serif; font-weight: 400; letter-spacing: 0.012em; } html[data-tenant="genb"] { /* ── Surfaces — bright, Nike-clean (cleaner/whiter than the warm editorial default ivory). ──────────────────────────────── */ --background: oklch(0.978 0.004 75); /* #FAF9F7 bright warm white */ --card: oklch(0.997 0.002 75); /* near-pure white card */ --foreground: oklch(0.190 0.004 60); /* #141312 ink */ --card-foreground: oklch(0.190 0.004 60); --muted: oklch(0.948 0.006 75); --muted-foreground: oklch(0.505 0.012 65); /* warm grey */ --accent: oklch(0.945 0.038 56); /* warm orange-tint surface — brand presence */ --accent-foreground: oklch(0.360 0.095 48); /* burnt-orange ink */ --secondary: oklch(0.946 0.010 70); --secondary-foreground: oklch(0.400 0.110 48); /* burnt orange */ --border: oklch(0.892 0.010 70); --input: oklch(0.905 0.012 70); /* ── Chrome / brand — ink primary (Nike-confident CTA), vivid orange as the everywhere-accent. ───────────────────────── */ --primary: oklch(0.205 0.004 60); /* ink CTA */ --primary-foreground: oklch(0.990 0.003 75); --ring: oklch(0.689 0.186 47.6); /* ORANGE focus glow */ --nav: oklch(0.996 0.002 75); /* bright header band — logo reads */ --nav-foreground: oklch(0.190 0.004 60); --brand: oklch(0.689 0.186 47.6); /* signature GenB orange */ /* Game-format pair — a COOL pair so the orange brand stays the single warm signal. singles indigo-blue vs doubles teal. */ --singles: oklch(0.480 0.150 255); /* electric indigo-blue */ --doubles: oklch(0.600 0.110 185); /* teal-green — widened from singles for chip legibility */ /* State semantics. */ --destructive: oklch(0.555 0.190 25); /* red */ --success: oklch(0.535 0.118 150); /* green — darkened so white text hits AA */ --warning: oklch(0.757 0.163 66); /* marigold = logo amber */ --info: oklch(0.520 0.150 252); /* blue */ --credit: oklch(0.520 0.180 300); /* violet — kept off-orange */ /* Tier ladder — bronze/gold pulled warm to harmonise with orange; platinum/diamond cool; legendary amethyst. */ --tier-bronze: oklch(0.560 0.120 55); --tier-silver: oklch(0.720 0.012 75); --tier-gold: oklch(0.730 0.140 70); --tier-platinum: oklch(0.780 0.022 230); --tier-diamond: oklch(0.650 0.090 220); --tier-legendary: oklch(0.500 0.150 300); --tier-dot-text-bronze: oklch(0.990 0.003 75); --tier-dot-text-silver: oklch(0.190 0.004 60); --tier-dot-text-gold: oklch(0.190 0.004 60); --tier-dot-text-platinum: oklch(0.190 0.004 60); --tier-dot-text-diamond: oklch(0.990 0.003 75); --tier-dot-text-legendary: oklch(0.990 0.003 75); /* Chart palette — orange-led, vivid spread (Discord energy). */ --chart-1: oklch(0.689 0.186 47.6); /* orange */ --chart-2: oklch(0.520 0.150 252); /* blue */ --chart-3: oklch(0.580 0.095 195); /* teal */ --chart-4: oklch(0.520 0.180 300); /* violet */ --chart-5: oklch(0.560 0.120 150); /* green */ --chart-6: oklch(0.620 0.190 10); /* pink-red */ --chart-7: oklch(0.757 0.163 66); /* marigold */ --chart-8: oklch(0.470 0.130 270); /* indigo */ --chart-9: oklch(0.605 0.105 165); /* emerald */ --chart-10: oklch(0.555 0.150 358); /* rose — pulled off orange to avoid chart-1 merge */ /* ── Intent tokens ─────────────────────────────────────────── */ --kind-training: oklch(0.520 0.150 252); /* blue — pairs with info */ --state-confirmed: var(--success); --state-pending-payment: oklch(0.720 0.120 82); /* mustard — split from warning/brand */ --state-claim-pending: var(--warning); --rank-first: var(--brand); /* orange podium top */ --rank-runner-up: oklch(0.772 0.012 75); /* warm silver */ --rank-third: oklch(0.560 0.120 55); /* bronze */ --medal-gold: oklch(0.760 0.150 75); --medal-silver: oklch(0.780 0.020 250); --medal-bronze: oklch(0.620 0.120 55); --env-dev: oklch(0.757 0.163 66); /* amber */ --env-sandbox: oklch(0.555 0.190 25); /* red */ --skill-int-plus: oklch(0.757 0.163 66); /* amber */ --achievement-dedication: var(--info); --achievement-battle: var(--destructive); --achievement-flock: var(--success); --achievement-moments: var(--warning); --achievement-legendary: oklch(0.500 0.150 300); /* ── Surface utility tokens ────────────────────────────────── */ --venue-pin-bg: oklch(0.689 0.186 47.6); /* ORANGE map pin — brand pop */ --venue-pin-outline: oklch(0.996 0.002 75); /* Logo badge: the genb mark is dark-detailed (black wordmark) on transparency, so it needs a LIGHT tile — not the orange pin colour. Soft warm tint reads as a branded chip with a visible edge. */ --logo-badge-bg: oklch(0.940 0.040 62); --qr-fg: oklch(0.190 0.004 60); /* ink — keep dark for scans */ --qr-bg: oklch(1.000 0.000 0); --scrim: oklch(0.150 0.010 50); /* warm dark backdrop */ --on-color: oklch(0.990 0.003 75); /* Monogram palette — inherits the default's carefully-tuned warm 10-slot set (harmonises with the orange brand; no override). */ /* ── Stripe Elements hex fallbacks (light) ─────────────────── */ --stripe-color-primary: #1B1A18; /* matches ink primary */ --stripe-color-background: #FFFFFF; --stripe-color-text: #141312; --stripe-color-text-muted: #6B655C; --stripe-color-destructive: #C0392B; --stripe-color-border: #E6DFD4; } /* ── Dark — warm near-black, Discord-leaning vibrancy. Header band stays BRIGHT (logo constraint) as GenB's signature. ──────── */ html[data-tenant="genb"].dark { --background: oklch(0.150 0.004 255); /* near-black, faintly cool — Nike-stark */ --card: oklch(0.198 0.004 255); /* neutral elevated */ --foreground: oklch(0.968 0.003 250); /* crisp cool white (was warm ivory) */ --card-foreground: oklch(0.968 0.003 250); --muted: oklch(0.232 0.005 255); --muted-foreground: oklch(0.672 0.007 255); --accent: oklch(0.262 0.006 255); /* neutral subtle surface — no warm tint */ --accent-foreground: oklch(0.900 0.005 250); --secondary: oklch(0.238 0.006 255); --secondary-foreground: oklch(0.880 0.010 250); --border: oklch(0.292 0.006 255); --input: oklch(0.292 0.006 255); /* Primary flips to off-white CTA on dark (proven, accessible "lit chip" recipe); orange stays the accent via --ring/--brand. */ --primary: oklch(0.968 0.003 250); /* crisp cool white CTA */ --primary-foreground: oklch(0.150 0.004 255); --ring: oklch(0.730 0.175 52); /* bright orange ring — the accent pop */ --nav: oklch(0.952 0.004 250); /* crisp COOL light band (was warm cream) — Nike-stark, logo's black wordmark still reads */ --nav-foreground: oklch(0.180 0.005 255); --brand: oklch(0.745 0.170 53); /* orange, brightened for dark */ --singles: oklch(0.660 0.150 255); /* brighter blue for dark legibility */ --doubles: oklch(0.690 0.110 185); /* brighter teal-green — widened from singles */ --destructive: oklch(0.650 0.185 25); --success: oklch(0.660 0.140 150); --warning: oklch(0.790 0.150 68); --info: oklch(0.660 0.150 252); --credit: oklch(0.660 0.165 300); --tier-bronze: oklch(0.640 0.130 55); --tier-silver: oklch(0.780 0.012 75); --tier-gold: oklch(0.800 0.140 72); --tier-platinum: oklch(0.820 0.025 230); --tier-diamond: oklch(0.750 0.110 220); --tier-legendary: oklch(0.640 0.165 300); --tier-dot-text-bronze: oklch(0.176 0.012 55); --tier-dot-text-silver: oklch(0.176 0.012 55); --tier-dot-text-gold: oklch(0.176 0.012 55); --tier-dot-text-platinum: oklch(0.176 0.012 55); --tier-dot-text-diamond: oklch(0.176 0.012 55); --tier-dot-text-legendary: oklch(0.990 0.003 75); --chart-1: oklch(0.745 0.170 53); /* orange */ --chart-2: oklch(0.660 0.150 252); /* blue */ --chart-3: oklch(0.680 0.095 195); /* teal */ --chart-4: oklch(0.660 0.165 300); /* violet */ --chart-5: oklch(0.660 0.140 150); /* green */ --chart-6: oklch(0.680 0.180 12); /* pink-red */ --chart-7: oklch(0.790 0.150 68); /* marigold */ --chart-8: oklch(0.620 0.140 270); /* indigo */ --chart-9: oklch(0.700 0.105 165); /* emerald */ --chart-10: oklch(0.670 0.150 358); /* rose — pulled off orange to avoid chart-1 merge */ --kind-training: oklch(0.660 0.150 252); --state-pending-payment: oklch(0.760 0.120 82); /* mustard — split from warning/brand */ --rank-runner-up: oklch(0.660 0.012 75); --rank-third: oklch(0.640 0.130 55); --medal-gold: oklch(0.820 0.150 75); --medal-silver: oklch(0.800 0.020 250); --medal-bronze: oklch(0.680 0.130 55); --env-dev: oklch(0.790 0.150 68); --env-sandbox: oklch(0.650 0.185 25); --skill-int-plus: oklch(0.790 0.150 68); --achievement-legendary: oklch(0.640 0.165 300); --venue-pin-bg: oklch(0.745 0.170 53); /* orange pin */ --venue-pin-outline: oklch(0.985 0.004 75); --logo-badge-bg: oklch(0.935 0.042 62); /* light branded badge — dark logo reads */ --surface-translucent: color-mix(in oklab, var(--nav) 78%, transparent); --stripe-color-primary: #F2F4F7; --stripe-color-background: #191A1D; --stripe-color-text: #F2F4F7; --stripe-color-text-muted: #9BA0A8; --stripe-color-destructive: #E0654F; --stripe-color-border: #2E3034; }