/* ============================================================ VIMUSEMENT — DESIGN TOKENS · THE ONLY FILE WITH RAW COLOUR ----------------------------------------------------------- Every other stylesheet references var(--…) only. To retheme the whole site, edit the hex values in the :root block below (and the two dark-mode blocks at the bottom) — nothing else. Palette "Crimson" · structural rigour from DESIGN.md: - alternating full-bleed tiles (colour change = the divider) - one shadow, reserved for imagery resting on a surface - tight display tracking, 17px body, weight ladder 300/400/600/700 - 8px spacing base Single source of truth. Every page links this first. Fonts are loaded here too (one @import), not per-page — change the family or weight subset once, below, and every page picks it up. Keep the weight list in sync with what --font-display / --font-body / --font-mono actually use in this file. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Hanken+Grotesk:wght@300;400;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Noto+Serif+Tamil:wght@500;600;700&family=Noto+Sans+Tamil:wght@400;500;600;700&display=swap'); :root{ /* ---- Neutrals (warm, red undertone) ---- */ --c-paper: #FBF3F1; /* default page ground */ --c-parchment: #F3E7E3; /* the "break" tile — one step off paper */ --c-surface: #FFFFFF; /* raised utility cards */ --c-ink: #23161A; /* headings & body on light — near-black, red-warm */ --c-ink-soft: #574650; --c-ink-mute: #74636C; /* captions, fine print — 4.5:1+ on both paper and parchment, meets WCAG AA */ --c-line: #EBDAD3; /* hairline — a soft ring, not a hard rule */ /* ---- Brand — ONE interactive colour ---- */ --c-primary: #C2213A; /* crimson — every "click me": buttons, links, focus */ --c-primary-ink: #B01E35; /* crimson as text on white (contrast-safe) */ --c-on-primary: #FFFFFF; /* ---- Accents — identity only, never "interactive" (warm reds) ---- */ --c-gold: #D9703C; /* terracotta — lights / food */ --c-rose: #D6335A; /* bright rose — games / kids */ --c-teal: #9B2F4A; /* deep wine — movies / the cause */ /* ---- Dark tiles ---- */ --c-tile-dark: #2A121B; --c-tile-void: #1A0B10; /* darkest — marquee, true void strips */ --c-on-dark: #FBEEEA; --c-on-dark-soft: #DBB9BE; --c-primary-on-dark: #FF7A88; /* lifted crimson for dark tiles */ /* ---- Tile system (referenced by .tile--a / --b / --c) ---- */ --tile-a-bg: var(--c-surface); --tile-a-fg: var(--c-ink); --tile-b-bg: var(--c-parchment); --tile-b-fg: var(--c-ink); --tile-c-bg: var(--c-tile-dark); --tile-c-fg: var(--c-on-dark); /* ---- Hero — light & open ---- */ --hero-bg: linear-gradient(185deg, var(--c-paper) 30%, var(--c-parchment)); --accent-text: linear-gradient(100deg, var(--c-gold), var(--c-rose) 50%, var(--c-primary)); /* ---- Type — a classic high-contrast display serif over a clean grotesk body: the recognisable "upscale editorial / hospitality" pairing, set against a quiet, tightly-tracked sans for reading. ---- */ --font-display: "Playfair Display", "Georgia", serif; --font-display-italic: "Playfair Display", "Georgia", serif; /* use with font-style:italic — the accent voice */ --font-body: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* size ladder — body at 17px, display sizes step down at breakpoints */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1.0625rem; /* 17 — the brand reading pace */ --fs-md: clamp(1.18rem, 1.1rem + 0.6vw, 1.4rem); /* lead / tagline */ --fs-lg: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); /* tile subhead */ --fs-xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); /* section head — 34→40 */ --fs-2xl: clamp(2.2rem, 1.5rem + 3.2vw, 3rem); --fs-3xl: clamp(2.4rem, 1.2rem + 6vw, 4.4rem); /* hero — 28→34→40→56 */ --lh-tight: 1.08; --lh-snug: 1.2; --lh-body: 1.47; /* editorial leading — do not tighten */ --lh-dense-link: 1.9; /* footer link stacks breathe */ --track-display: -0.01em; /* serif carries its own rhythm — don't crowd it */ --track-tight: -0.015em; --track-label: 0.22em; --weight-light: 300; --weight-reg: 400; --weight-semi: 600; --weight-bold: 700; /* ---- Space — 8px base ---- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1.0625rem; /* 17 */ --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 5rem; --section-y: clamp(4rem, 2.4rem + 7vw, 6.5rem); /* generous air between sections — editorial, not cramped */ --gutter: clamp(20px, 3vw, 32px); --maxw: 1120px; --maxw-text: 900px; --measure: 62ch; /* ---- Shape — one grammar per role ---- */ --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 18px; --r-pill: 9999px; /* ---- Elevation — reserved for imagery, and hover-lift feedback. Never decorative on a static element; always soft, never harsh. ---- */ --shadow-image: 0 5px 30px rgba(20, 12, 30, .20); --shadow-lift: 0 2px 10px rgba(20, 12, 30, .07); /* resting */ --shadow-lift-hover: 0 14px 34px -8px rgba(20, 12, 30, .22); /* on hover — deepens, doesn't just appear */ /* ---- Glass (frosted panels — see docs/design-glassmorphism.md) ---- */ /* over imagery / dark tiles: */ --glass-bg: rgba(255,255,255,.14); --glass-bg-strong: rgba(255,255,255,.26); --glass-border: rgba(255,255,255,.4); --glass-blur: blur(10px) saturate(160%); --glass-shadow: 0 8px 30px -10px rgba(10,7,20,.45); --glass-ink: #fff; /* content panels on the page ground (need readable text): */ --glass-panel-bg: color-mix(in srgb, var(--c-surface) 82%, transparent); --glass-panel-border: var(--c-line); --glass-panel-blur: blur(12px) saturate(120%); --glass-panel-shadow: none; /* Apple rigour: shadow is for imagery only */ /* soft ambient wash so frosted panels have something to blur over */ --mesh-1: color-mix(in srgb, var(--c-gold) 42%, transparent); --mesh-2: color-mix(in srgb, var(--c-primary) 38%, transparent); --mesh-3: color-mix(in srgb, var(--c-teal) 34%, transparent); --mesh-opacity: .12; /* ambient wash only — Apple rigour: no loud decoration */ /* ---- Translucent overlays on dark surfaces (one place to tune) ---- */ --tint-on-dark-1: rgba(255,255,255,.05); /* faint fill (cards on dark tiles) */ --tint-on-dark-2: rgba(255,255,255,.10); /* inputs, panels */ --tint-on-dark-3: rgba(255,255,255,.18); /* stronger fill */ --line-on-dark-1: rgba(255,255,255,.14); /* hairline on dark */ --line-on-dark-2: rgba(255,255,255,.22); --line-on-dark-3: rgba(255,255,255,.35); --ink-on-tint: #2a1418; /* dark text sitting on an accent fill */ /* ---- STAGE screen (projector — always its own dark world) ---- */ --stage-bg: #170a10; --stage-bg-2: #3a1220; --stage-ink: #fbeeea; --stage-dim: #d8a9b0; --stage-a1: #e0714e; /* reel gradient start */ --stage-a2: #f0577a; /* reel gradient middle */ --stage-a3: #c85a86; /* reel gradient end / "won" */ /* ---- VENUE MAP plan (light) ---- */ --vm-grass: #ecefe6; --vm-grass-dot: #d8e0cf; --vm-edge: #e0ccc6; --vm-build: #f1e4de; --vm-build-edge: #d6bcb2; --vm-path: #f0e6e0; --vm-zone: #ffffff; --vm-zone-edge: #e0ccc6; --vm-zone-ink: #3a2b2f; --vm-active: var(--c-primary); --vm-note: #9a8f7e; /* ---- Motion ---- dur-1..4 are for UI feedback — snappy, functional. dur-5 is the "editorial" tier: image reveals, card lifts, anything meant to feel unhurried and deliberate rather than merely responsive. */ --dur-1: .24s; --dur-2: .42s; --dur-3: .5s; --dur-4: .8s; --dur-5: .9s; --ease-out: cubic-bezier(.22,.68,.32,1); --ease-spring: cubic-bezier(.34,1.4,.44,1); --press: scale(.96); color-scheme: light dark; } /* ---- Dark = twilight version of the same palette ---- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --c-paper: #1A1013; --c-parchment: #221318; --c-surface: #271820; --c-ink: #FBEEEA; --c-ink-soft: #E0C4C8; --c-ink-mute: #A98E94; --c-line: #3D2830; --c-primary-ink:#FF7A88; --c-gold: #E88A54; --c-rose: #F0577A; --c-teal: #D06A82; --c-tile-dark: #1E0F14; --c-tile-void: #150A0E; --tile-a-bg: #201217; --tile-a-fg: var(--c-on-dark); --tile-b-bg: #26141A; --tile-b-fg: var(--c-on-dark); --tile-c-bg: #1A0C11; --tile-c-fg: var(--c-on-dark); --shadow-image: 0 5px 34px rgba(0,0,0,.55); --shadow-lift: 0 2px 10px rgba(0,0,0,.24); --shadow-lift-hover: 0 14px 34px -8px rgba(0,0,0,.5); --glass-bg: rgba(255,255,255,.1); --glass-bg-strong: rgba(255,255,255,.18); --glass-border: rgba(255,255,255,.28); --glass-panel-bg: color-mix(in srgb, var(--c-surface) 80%, transparent); --glass-panel-border: var(--c-line); --glass-panel-shadow: none; --mesh-opacity: .14; /* venue-map plan — dark */ --vm-grass:#221419; --vm-grass-dot:#2c1a20; --vm-edge:#3d2830; --vm-build:#2a1a20; --vm-build-edge:#472f38; --vm-path:#2c1a22; --vm-zone:#271820; --vm-zone-edge:#4a3540; --vm-zone-ink:#e9dce0; --vm-note:#8b8098; } } :root[data-theme="dark"]{ --c-paper:#1A1013; --c-parchment:#221318; --c-surface:#271820; --c-ink:#FBEEEA; --c-ink-soft:#E0C4C8; --c-ink-mute:#A98E94; --c-line:#3D2830; --c-primary-ink:#FF7A88; --c-gold:#E88A54; --c-rose:#F0577A; --c-teal:#D06A82; --c-tile-dark:#1E0F14; --c-tile-void:#150A0E; --tile-a-bg:#201217; --tile-a-fg:var(--c-on-dark); --tile-b-bg:#26141A; --tile-b-fg:var(--c-on-dark); --tile-c-bg:#1A0C11; --tile-c-fg:var(--c-on-dark); --shadow-image: 0 5px 34px rgba(0,0,0,.55); --shadow-lift: 0 2px 10px rgba(0,0,0,.24); --shadow-lift-hover: 0 14px 34px -8px rgba(0,0,0,.5); --glass-bg:rgba(255,255,255,.1);--glass-bg-strong:rgba(255,255,255,.18);--glass-border:rgba(255,255,255,.28); --glass-panel-bg:color-mix(in srgb, var(--c-surface) 80%, transparent); --glass-panel-border:var(--c-line); --glass-panel-shadow:none; --mesh-opacity:.14; --vm-grass:#221419; --vm-grass-dot:#2c1a20; --vm-edge:#3d2830; --vm-build:#2a1a20; --vm-build-edge:#472f38; --vm-path:#2c1a22; --vm-zone:#271820; --vm-zone-edge:#4a3540; --vm-zone-ink:#e9dce0; --vm-note:#8b8098; } /* ============================================================ 2026 YEAR THEME — "Doomsday" Palette-only reskin inspired by the Avengers: Doomsday teaser art (Doctor Doom emerald + gothic near-black + a warm regal gold glow). Scoped to [data-year-theme="doomsday"] on (set as a plain static attribute per page — no JS, no flash) so it's a one-year overlay, not a rewrite of the base palette above: next year, drop the attribute (or swap in a new theme block) and the site is back to "Crimson" with zero other edits. Only hex values are touched here, same rule as the rest of this file — gradients/mesh/glass tokens elsewhere already reference these via var(), so they pick the new palette up automatically. ============================================================ */ :root[data-year-theme="doomsday"]{ --c-paper: #F1F3EE; --c-parchment: #E6E9DF; --c-surface: #FFFFFF; --c-ink: #12180F; --c-ink-soft: #3E463A; --c-ink-mute: #63705F; --c-line: #DCE0D2; --c-primary: #1F6B45; /* Doom emerald — every "click me" */ --c-primary-ink: #1B5D3B; --c-on-primary: #F5FBF3; --c-gold: #C9962E; /* regal amber — the throne-glow accent */ --c-rose: #7A2333; /* deep wine, in place of bright rose */ --c-teal: #35544A; /* gunmetal green, in place of wine-teal */ --c-tile-dark: #0E1712; --c-tile-void: #070B08; --c-on-dark: #EAF2E6; --c-on-dark-soft: #B9C7B2; --c-primary-on-dark: #4FD98C; /* venue map plan (light) */ --vm-grass: #E9EEE3; --vm-grass-dot: #D5DECB; --vm-edge: #CFD8C4; --vm-build: #E3E8DA; --vm-build-edge: #B9C6AC; --vm-path: #E7ECDF; --vm-zone: #FFFFFF; --vm-zone-edge: #CFD8C4; --vm-zone-ink: #253022; --vm-note: #8B9481; /* the live-draw stage screen is always its own dark world, regardless of light/dark mode — reskin it too so the gold crimson reel doesn't clash with an otherwise green site */ --stage-bg: #0A130E; --stage-bg-2: #172B1E; --stage-ink: #EAF2E6; --stage-dim: #9DB39A; --stage-a1: #C9962E; --stage-a2: #2FA872; --stage-a3: #1B5D3B; /* a bold, flowing display face instead of the usual editorial serif — real lowercase letterforms (an earlier pass here used Cinzel, which is inscriptional-capitals-only and just read as shouted all-caps at any weight). Body copy stays on Hanken Grotesk; a whole page set in a display face is a readability risk this theme doesn't need to take. */ --font-display: "Cormorant Garamond", "Playfair Display", serif; --font-display-italic: "Cormorant Garamond", "Playfair Display", serif; /* has a real italic cut, unlike Cinzel */ } @media (prefers-color-scheme: dark){ :root[data-year-theme="doomsday"]:not([data-theme="light"]){ --c-paper: #0E1310; --c-parchment: #141C16; --c-surface: #182019; --c-ink: #EAF2E6; --c-ink-soft: #C7D4C2; --c-ink-mute: #8FA089; --c-line: #2B372C; --c-primary-ink:#4FD98C; --c-gold: #DDAE4C; --c-rose: #A0455A; --c-teal: #5C7A6E; --c-tile-dark: #0C1310; --c-tile-void: #07100B; --tile-a-bg: #151D17; --tile-a-fg: var(--c-on-dark); --tile-b-bg: #1A2419; --tile-b-fg: var(--c-on-dark); --tile-c-bg: #0C1310; --tile-c-fg: var(--c-on-dark); --vm-grass:#141C16; --vm-grass-dot:#1C271E; --vm-edge:#2B372C; --vm-build:#1A2419; --vm-build-edge:#33452F; --vm-path:#1C2620; --vm-zone:#182019; --vm-zone-edge:#33452F; --vm-zone-ink:#DCE6D6; --vm-note:#7C8B76; } } :root[data-year-theme="doomsday"][data-theme="dark"]{ --c-paper: #0E1310; --c-parchment: #141C16; --c-surface: #182019; --c-ink: #EAF2E6; --c-ink-soft: #C7D4C2; --c-ink-mute: #8FA089; --c-line: #2B372C; --c-primary-ink:#4FD98C; --c-gold: #DDAE4C; --c-rose: #A0455A; --c-teal: #5C7A6E; --c-tile-dark: #0C1310; --c-tile-void: #07100B; --tile-a-bg: #151D17; --tile-a-fg: var(--c-on-dark); --tile-b-bg: #1A2419; --tile-b-fg: var(--c-on-dark); --tile-c-bg: #0C1310; --tile-c-fg: var(--c-on-dark); --vm-grass:#141C16; --vm-grass-dot:#1C271E; --vm-edge:#2B372C; --vm-build:#1A2419; --vm-build-edge:#33452F; --vm-path:#1C2620; --vm-zone:#182019; --vm-zone-edge:#33452F; --vm-zone-ink:#DCE6D6; --vm-note:#7C8B76; } /* ---- Tamil — Playfair Display / Hanken Grotesk have zero Tamil glyph coverage, so the toggle (modules/lang.js) swaps to a Tamil-capable pairing instead. --font-mono is untouched: ticket IDs, amounts and timers stay Latin/numeral regardless of language. Noto Serif/Sans Tamil draw noticeably larger than the Latin faces at the same nominal size (taller x-height, heavier default weight), so left alone every heading/label reads oversized and the two languages feel like different type scales. Scaling the root font-size down for Tamil brings it back in visual balance with the English pass — a standard technique for scripts that run bigger than Latin at parity (same idea as `:lang(ja){font-size:92%}`) — and since every spacing token in this file is also rem-based, padding/gaps shrink by the same proportion, so rhythm stays consistent rather than text shrinking while the boxes around it stay full-size. A touch more line-height keeps Tamil's taller glyphs and vowel marks from feeling cramped. ---- */ :root[data-lang="ta"]{ --font-display: "Noto Serif Tamil", "Noto Sans Tamil", serif; --font-display-italic: "Noto Serif Tamil", "Noto Sans Tamil", serif; /* Tamil has no italic style — reuse upright */ --font-body: "Noto Sans Tamil", system-ui, -apple-system, sans-serif; font-size: 91%; --lh-body: 1.56; --lh-tight: 1.22; --lh-snug: 1.32; }