/* ============================================================================= QUEERING ANCs — THEME LAYER (tokens) Capital Stonewall Democrats · civic program brand ----------------------------------------------------------------------------- This is the ONLY file you edit to rebrand. The engine (app.js) and structure (styles.css) never reference a brand directly — they read these tokens. Everything is ADDITIVE: the original token names (--paper, --ink, --accent, --cobalt, --pink, --yellow, --trans-blue, --trans-pink, --line, --shadow-pop, --r, --font-display, --font-ui, …) are preserved with their original values. New roles, scales and primitives are layered on top. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap'); :root{ color-scheme: light; /* --------------------------------------------------------------------------- 1 · TYPEFACES Bricolage Grotesque for display + numerals, Inter for UI/body. No serifs. --------------------------------------------------------------------------- */ --font-display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-num:"Inter",ui-monospace,monospace; /* Weights — referenced by name so the whole system shifts coherently */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-display:600; /* default display weight */ --fw-display-heavy:700; /* --------------------------------------------------------------------------- 2 · RAW PALETTE (named ink pigments — never used directly for meaning, wired to roles below so any surface can be re-themed in one place) --------------------------------------------------------------------------- */ --paper:#F7F5EF; /* warm off-white — the brand ground on every device */ --surface:#FFFFFF; /* clean card / panel */ --ink:#121016; /* near-black, faint violet cast */ --ink-2:#2A2730; /* secondary text */ --muted:#56535F; /* tertiary / captions — AA on paper & surface */ --line:#DAD6CB; /* hairline on paper */ --line-strong:#C9C4B6; /* control borders */ --cobalt:#2238FF; /* primary brand */ --pink:#FF2E7E; /* secondary brand — queer energy */ --yellow:#FFD23D; /* highlight / spotlight */ --trans-blue:#5BCEFA; /* pride accent */ --trans-pink:#F5A9B8; /* pride accent */ --ok:#1E6B45; /* success ink */ --bad:#A12B22; /* error ink */ --warn:#8A5A07; /* caution ink (AA on paper) */ /* --------------------------------------------------------------------------- 3 · COLOR ROLES (use these in components, not the raw pigments) --------------------------------------------------------------------------- */ /* Surfaces */ --bg:var(--paper); --surface-1:var(--surface); /* default card */ --surface-2:#FFFDF7; /* faint warm panel — section wells */ --surface-sunken:#EFECE2; /* recessed track / input ghosts */ --surface-ink:#141019; /* inverted panel for high-contrast moments */ --surface-ink-2:#211C2B; /* raised element on the dark panel */ /* Text */ --text:var(--ink); --text-2:var(--ink-2); --text-muted:var(--muted); --on-accent:#FFFFFF; /* text on cobalt */ --on-secondary:#FFFFFF; /* text on pink — large/bold sizes only */ --on-highlight:var(--ink); /* text on yellow — ink only */ --on-dark:#F4F1EA; /* text on the inverted panel */ --on-dark-muted:#A9A4B4; /* muted text on the inverted panel */ /* Lines & borders */ --hairline:var(--line); --border:var(--line-strong); --border-ink:var(--ink); /* the structural 2px keyline (the "stamp") */ --bw-hair:1px; --bw:1.5px; --bw-ink:2px; /* Brand action roles */ --accent:#2238FF; /* = cobalt — primary action / identity */ --accent-soft:#E7EAFF; /* cobalt tint background */ --accent-strong:#1A2BD6; /* pressed / hover-dark cobalt */ --secondary:var(--pink); --secondary-soft:#FFE4EE; --secondary-strong:#C4145A; /* v1.1: was #E01865 (~4.0:1, failed); #C4145A is 5.8:1 on white (Audit #2 M-2) */ --highlight:var(--yellow); --highlight-soft:#FFF3C9; /* Semantic roles (ink + soft background pairs, all AA) */ --ok-soft:#E2F0E8; --ok-strong:#15543595; --bad-soft:#F7E5E3; --warn-soft:#FBEFD2; --info:var(--accent); --info-soft:var(--accent-soft); /* Pride spectrum — discrete, designed bands (never a smooth rainbow). The spectrum-rule device and seal ring read these in order. */ --spectrum-1:var(--cobalt); --spectrum-2:var(--trans-blue); --spectrum-3:var(--yellow); --spectrum-4:var(--pink); --spectrum-5:var(--trans-pink); /* --------------------------------------------------------------------------- 4 · TYPE SCALE (clamp() display sizes flow mobile→desktop) --------------------------------------------------------------------------- */ --fs-eyebrow:12px; --lh-eyebrow:1.2; --ls-eyebrow:.16em; --fs-caption:13px; --fs-small:14.5px; --fs-body:16px; --lh-body:1.6; --fs-body-lg:19px; --lh-body-lg:1.5; --fs-lead:18px; --lh-lead:1.55; --fs-d1:clamp(34px,6.4vw,52px); --lh-d1:1.02; --ls-d1:-.025em; --fs-d2:clamp(27px,4.6vw,38px); --lh-d2:1.05; --ls-d2:-.02em; --fs-d3:clamp(22px,3.4vw,27px); --lh-d3:1.12; --ls-d3:-.015em; --fs-d4:clamp(19px,2.4vw,22px); --lh-d4:1.18; --ls-d4:-.01em; --fs-mega:clamp(56px,11vw,104px); --lh-mega:.9; --ls-mega:-.035em; /* hero / score */ /* --------------------------------------------------------------------------- 5 · SPACING (4px base — use the scale, not magic numbers) --------------------------------------------------------------------------- */ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px; --space-11:88px; --space-12:128px; /* --------------------------------------------------------------------------- 6 · RADII --------------------------------------------------------------------------- */ --r-xs:4px; --r-sm:7px; --r:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px; /* --------------------------------------------------------------------------- 7 · SHADOWS (hard "print stamp" offsets are the brand signature; soft elevation only for floating portal cards) --------------------------------------------------------------------------- */ --shadow-pop:4px 6px 0 var(--ink); /* original — keep */ --shadow-pop-sm:2px 3px 0 var(--ink); --shadow-pop-lg:7px 10px 0 var(--ink); --shadow-pop-accent:4px 6px 0 var(--accent); --shadow-pop-pink:4px 6px 0 var(--secondary); --shadow-soft:0 1px 2px rgba(18,16,22,.06), 0 6px 18px rgba(18,16,22,.05); --shadow-soft-lg:0 8px 34px rgba(18,16,22,.12); /* --------------------------------------------------------------------------- 8 · MOTION (paired with prefers-reduced-motion in styles.css) --------------------------------------------------------------------------- */ --dur-fast:.14s; --dur:.35s; --dur-slow:.9s; --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); /* --------------------------------------------------------------------------- 9 · FOCUS (visible, consistent keyboard ring across every control) --------------------------------------------------------------------------- */ --focus-color:var(--accent); --focus-ring:3px solid var(--focus-color); --focus-offset:2px; /* --------------------------------------------------------------------------- 9b · CANDIDATE DASHBOARD (theme-able progress portal roles) --------------------------------------------------------------------------- */ --tracker-fill:var(--accent); /* progress fill while gathering */ --tracker-goal:var(--ok); /* fill once challenge-proof (50+) */ --milestone:var(--ink-2); /* milestone stems / ticks */ --levelup:var(--yellow); /* the celebratory level-up pop */ /* --------------------------------------------------------------------------- 10 · LAYOUT (reading column + wider shells for portal/landing) --------------------------------------------------------------------------- */ --maxw:720px; /* original reading column */ --maxw-wide:1040px; /* landing / portal grids */ --maxw-prose:62ch; /* Breakpoints — for reference (CSS can't read vars in @media; mirrored in the media queries throughout styles.css): --bp-sm: 560px (single-column collapse) --bp-md: 760px (portal grid → 1 col, nav stacks) --bp-lg: 1040px (max content width) */ } /* Brand hook kept intact — the engine swaps data-brand, never raw values. */ [data-brand="csd"]{ --accent:#2238FF; --accent-soft:#E7EAFF; --paper:#F7F5EF; } /* No dark-mode override by design: warm light "paper" brand on every device. */ /* ============================================================================= 11 · DESIGN SYSTEM v1.1 — pride spectrum + seat-map status tokens The six pride-flag spokes (shared by .spark--pride, the .headshot ring, accents) and the empty-seat map status palette. Civic colors stay config-driven elsewhere. ========================================================================== */ :root{ --pride-1:#E40303; /* red */ --pride-2:#FF8C00; /* orange */ --pride-3:#FFED00; /* yellow */ --pride-4:#008026; /* green */ --pride-5:#004DFF; /* blue */ --pride-6:#750787; /* purple */ /* Status colors from the brand palette only (SEAT_MAP_SPEC refinements) — no green, no gray-purple. Color always pairs with a pattern + a word label + the synced list; color is never the sole signal. */ --seat-empty:#ECEAE3; /* no data — paper tint */ --seat-nocand:#FF2E7E; /* no one ran in 2024 — the opportunity (pink, draws the eye) */ --seat-unopposed:#2238FF; /* ran unopposed (cobalt) */ --seat-contested:#BEB8AE; /* contested — recedes (muted paper-ink) */ --seat-line:#D9D5CC; /* boundaries */ --seat-nocand-soft:#FFE6F0; /* light pink pair for no-candidate pills/legend (QA2) */ /* QA2 (AUDIT §B) — status/border tint tokens (were bespoke hexes drifting across CSS) */ --ok-border:#BFE0CC; --info-border:#C9D0FF; --warn-border:#EBD79A; --bad-border:#E6C4C0; --secondary-border:#FBC4D8; --secondary-hover:#FFD6E6; --accent-tint:#EAF0FF; --neutral-rule:#777; }