/* ========================================================================== Existlist design tokens. Source: design/eli/Concepts/asset pack concepts NOT FINAL.png and the token table in design/eli/SITEMAP.md. Every colour, radius, shadow, glow, space and type size a page uses comes from here. A page never writes a hex value. Mode theming: swaps the --mode-* tokens, so every primary button, glow, underline, pill and ring follows the mode the player is in. Pages style against --mode-*, never against --history-* or --reruns-* directly, unless the element IS a mode (the mode switch, a mode pill naming the other mode). Dark only. Eli's system has no light theme; the old theme toggle is gone. ========================================================================== */ :root { color-scheme: dark; /* ---- neutrals (shared) ---------------------------------------------- */ --text: #F8F6EE; /* primary text */ --text-2: #A1A1AA; /* secondary text */ --text-muted: #6B7280; /* muted text, placeholders, disabled */ --page: #111216; /* page background */ --page-deep: #0B0B0E; /* behind the page: header, sticky bars */ --surface: #1A1B1F; /* card background */ --surface-2: #202127; /* a card inside a card, inputs */ --border: #27282E; --hover: #3A3B43; /* ---- History: orange / copper -------------------------------------- */ --history-primary: #FF8A3D; --history-accent: #D9772E; --history-highlight: #F4C77A; --history-bg: #1E1208; --history-card: #2A1B0E; --history-ink: #1A0E04; /* text on a History fill */ --history-gradient: linear-gradient(135deg, #F4C77A 0%, #FFA94D 38%, #FF8A3D 100%); /* ---- Reruns: blue / purple ----------------------------------------- */ --reruns-primary: #3B82F6; --reruns-accent: #8B5CF6; --reruns-highlight: #C084FC; --reruns-bg: #0B0F1F; --reruns-card: #16122A; --reruns-ink: #FFFFFF; --reruns-gradient: linear-gradient(100deg, #8B5CF6 0%, #6D6AF7 45%, #3B82F6 100%); /* ---- the brand (wordmark, primary CTA on mode-less pages) ----------- */ --brand-gradient: linear-gradient(180deg, #FFB347 0%, #FF8A3D 55%, #F26B1D 100%); --brand-cream: #F8F6EE; /* ---- result tags and score bands ------------------------------------ */ --gold: #F4C77A; /* FIRST DISCOVERY text and icon */ --gold-strong: #F5B53D; --gold-bg: #2A2008; --gold-line: #7A5A1C; --green: #22C55E; /* MVP, APPROVED, good scores */ --green-soft: #4ADE80; --green-bg: #0C2616; --green-line: #1F6B3A; --red: #EF4444; /* COST YOU, low scores */ --red-soft: #F87171; --red-bg: #2A0E0E; --red-line: #7F1D1D; --amber: #F59E0B; /* middling scores */ --amber-bg: #2A1C06; --amber-line: #7C5210; --silver: #CBD5E1; /* 2nd place crown */ --bronze: #F08A4B; /* 3rd place crown */ /* Score bands, one place. ui.band(score) in public/app/ui.js returns the same names: great 90+, good 75-89, mid 60-74, low under 60. */ --band-great: var(--gold-strong); --band-good: var(--green); --band-mid: var(--amber); --band-low: var(--red); /* Seat colours for the five crew cards on the reveal (left bar + role label). */ --seat-1: #8B5CF6; --seat-2: #F5B53D; --seat-3: #22C55E; --seat-4: #3B82F6; --seat-5: #EF4444; --seat-6: #F472B6; /* ---- type ----------------------------------------------------------- */ --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-label: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif; /* The wordmark and big shouty headlines. Eli's wordmark is heavy condensed caps; Inter has no condensed cut, so Barlow Condensed stands in until his vector lands. */ --font-display: "Barlow Condensed", "Inter", ui-sans-serif, system-ui, sans-serif; /* The reveal's crew names are set in a serif. */ --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-micro: 11px; /* eyebrows, micro caps */ --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: clamp(38px, 7vw, 56px); /* page titles: "Global", "The archive" */ --fs-hero: clamp(44px, 10.5vw, 96px);/* landing hero */ --fs-score: clamp(88px, 22vw, 132px); /* the reveal number */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.55; --track-micro: .22em; /* REAL PEOPLE. REAL SCENARIOS. */ --track-caps: .08em; /* nav, pills */ /* ---- space (4px grid) ---------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --gutter: 16px; /* phone side gutter */ --content: 1120px; /* widest content column */ --content-narrow: 640px; /* board, reveal, forms */ --header-h: 64px; /* ---- radii ---------------------------------------------------------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* ---- shadows and glows --------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px -14px rgba(0,0,0,.85); --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.9); --glow-gold: 0 0 0 1px var(--gold-line), 0 0 24px -6px rgba(245,181,61,.45); --glow-green: 0 0 0 1px var(--green-line), 0 0 28px -6px rgba(34,197,94,.5); --glow-red: 0 0 0 1px var(--red-line), 0 0 24px -8px rgba(239,68,68,.4); /* ---- motion --------------------------------------------------------- */ --ease-out: cubic-bezier(.2,.8,.2,1); --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms; /* ---- the mode tokens: History by default ----------------------------- */ --mode-primary: var(--history-primary); --mode-accent: var(--history-accent); --mode-highlight: var(--history-highlight); --mode-bg: var(--history-bg); --mode-card: var(--history-card); --mode-ink: var(--history-ink); --mode-gradient: var(--history-gradient); --mode-rgb: 255,138,61; /* for rgba() glows */ --mode-glow: 0 0 0 1px rgba(var(--mode-rgb),.55), 0 0 26px -6px rgba(var(--mode-rgb),.55); --mode-tint: rgba(var(--mode-rgb),.10); --mode-line: rgba(var(--mode-rgb),.45); /* ---- legacy aliases --------------------------------------------------- The pre-Eli stylesheets (public/app/legacy.css, shell.css, motion.css, local.css) speak these names. Mapping them here re-skins everything that has not been rebuilt yet. Delete an alias only when nothing reads it. */ --bg: var(--page); --card: var(--surface); --sunk: var(--surface-2); --fg: var(--text); --dim: var(--text-2); --line: var(--border); --line-2: var(--hover); --accent: var(--mode-primary); --accent-soft: var(--mode-tint); --good: var(--green-soft); --bad: var(--red-soft); --gold-soft: var(--gold-bg); --shadow: var(--shadow-1); --mono: var(--font-label); --sans: var(--font-ui); } body[data-mode="reruns"] { --mode-primary: var(--reruns-primary); --mode-accent: var(--reruns-accent); --mode-highlight: var(--reruns-highlight); --mode-bg: var(--reruns-bg); --mode-card: var(--reruns-card); --mode-ink: var(--reruns-ink); --mode-gradient: var(--reruns-gradient); --mode-rgb: 139,92,246; } /* Custom properties that reference --mode-rgb must be recomputed on the element where --mode-rgb changes, or they keep History's value. */ body[data-mode] { --mode-glow: 0 0 0 1px rgba(var(--mode-rgb),.55), 0 0 26px -6px rgba(var(--mode-rgb),.55); --mode-tint: rgba(var(--mode-rgb),.10); --mode-line: rgba(var(--mode-rgb),.45); --accent: var(--mode-primary); --accent-soft: var(--mode-tint); } /* A subtree can take the other mode without flipping the page: a Reruns card on the History landing, a Reruns row in the archive. */ [data-tone="history"] { --mode-primary: var(--history-primary); --mode-accent: var(--history-accent); --mode-highlight: var(--history-highlight); --mode-bg: var(--history-bg); --mode-card: var(--history-card); --mode-ink: var(--history-ink); --mode-gradient: var(--history-gradient); --mode-rgb: 255,138,61; --mode-glow: 0 0 0 1px rgba(255,138,61,.55), 0 0 26px -6px rgba(255,138,61,.55); --mode-tint: rgba(255,138,61,.10); --mode-line: rgba(255,138,61,.45); --accent: var(--mode-primary); --accent-soft: var(--mode-tint); } [data-tone="reruns"] { --mode-primary: var(--reruns-primary); --mode-accent: var(--reruns-accent); --mode-highlight: var(--reruns-highlight); --mode-bg: var(--reruns-bg); --mode-card: var(--reruns-card); --mode-ink: var(--reruns-ink); --mode-gradient: var(--reruns-gradient); --mode-rgb: 139,92,246; --mode-glow: 0 0 0 1px rgba(139,92,246,.6), 0 0 26px -6px rgba(139,92,246,.6); --mode-tint: rgba(139,92,246,.12); --mode-line: rgba(139,92,246,.5); --accent: var(--mode-primary); --accent-soft: var(--mode-tint); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; } }