/** * Design tokens — Moosetape (2021) palette (§3) + type + spacing. * * --accent is the one token that shifts per-release (§3 adaptive colour). * Everything else stays constant. In later phases JS will overwrite * --accent on during the cassette-selection transition. */ :root { /* ── Palette (locked, §3) ──────────────────────────────────────────── */ --bg: #000000; /* primary background */ --shadow: #2f0101; /* deep shadow — section depth, overlays */ --surface: #310303; /* dark surface — cards, panels on black */ --accent-mid: #a90607; /* mid accent — borders, secondary highlights */ --accent: #d00408; /* primary accent — CTAs, hover, LED, active */ --text: #d3c7ad; /* warm off-white — all body copy */ --text-dim: rgba(211, 199, 173, 0.55); --text-faint: rgba(211, 199, 173, 0.28); --hairline: rgba(211, 199, 173, 0.14); /* ── Type (§4) ─────────────────────────────────────────────────────── */ /* Display: heavy/italic/angular — Planet Kosmos or Google fallback. Body/UI: monospace for the tape-deck hardware feel. */ --font-display: "Russo One", "Arial Black", sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace; --fs-hero: clamp(3.5rem, 12vw, 11rem); --fs-h2: clamp(2rem, 5vw, 4rem); --fs-h3: 1.25rem; --fs-body: 1rem; --fs-small: 0.8125rem; --fs-micro: 0.6875rem; /* ── Spacing ───────────────────────────────────────────────────────── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; --section-pad-x: clamp(1.5rem, 5vw, 6rem); /* ── Cassette cube dimensions (Phase 2) ──────────────────────────────── A cassette is one 6-faced CSS cube. Front/back = the wide artwork faces; the two spines = the thin edges; top/bottom cap it. All three dimensions must be shared by the cube, so height is common to spine and front (unlike the two separate values used in Phase 1). */ --cass-w: 300px; /* front/back width — the wide artwork face */ --cass-h: 210px; /* shared height */ --cass-d: 36px; /* depth = spine width — the thin edge */ --desc-w: 260px; /* rack slide-out description width */ /* Motion */ --flip-dur: 0.7s; /* rack spine→front flip + description slide */ --deck-spin-speed: 0.35; /* deg per frame, deck auto-rotation (JS reads) */ /* ── Misc ──────────────────────────────────────────────────────────── */ --maxw: 1600px; --ease: cubic-bezier(0.22, 1, 0.36, 1); }