/* ═══════════════════════════════════════════ now-streaming — design tokens Palette: midnight-rose (_shared/tokens/palettes.json, ground: dark) Typography: playfair-outfit-pinyon (_shared/tokens/typography.json) Easings: expo-out · breath · stage · drift · silk · snap (_shared/tokens/easings.json) Mirrors _shared/css/tokens-base.css. The 15 palette tokens are midnight-rose verbatim; the glow and glass tokens are derived from that palette the way scripts/gen-template-tokens.mts derives them for a dark ground (so they happen to equal the base file's fallbacks, and are restated on purpose, not inherited by accident). Everything below the derived block is template-level and is built ONLY from palette values: an rgba() of a palette colour or a var() of one. Nothing is invented. The look in one line: a cinema screen at night. A blue-black ground, a lit pool in the middle, a wine-violet haze on one edge and an amber glow on the other (the reference's two edge glows, in our hues), and gilt light over it. Never a red ground: BRAND.md asks for midnight + amber, "not black + red". ═══════════════════════════════════════════ */ :root { color-scheme: dark; /* ───── Palette: midnight-rose, verbatim ───── */ --void: #050511; --bg-primary: #0c1222; --bg-elevated: #101830; --accent-warm: #e8a87c; --accent-warm-bright: #f2c4a0; --accent-warm-deep: #c48a60; --accent-rose: #d4a0a0; --accent-soft: #e8c4c4; --accent-celestial: #f0b4c8; --text-primary: #faf0e6; --text-secondary: #d8cfc4; --wine: #4a1942; --sage: #7ec8a0; --ember: #e06050; --spark: #f2c4a0; /* ───── Derived from the palette (dark ground) ───── */ --accent-warm-glow: rgba(232, 168, 124, 0.45); /* accent-warm */ --accent-warm-glow-soft: rgba(232, 168, 124, 0.15); --glass: rgba(12, 18, 34, 0.55); /* bg-primary; no backdrop-filter on a budget phone */ --glass-border: rgba(232, 168, 124, 0.12); --glass-border-hover: rgba(232, 168, 124, 0.35); --bloom: rgba(232, 168, 124, 0.15); /* ───── The screen: the film's ground ───── */ --screen-bg: radial-gradient(120% 78% at 50% 36%, var(--bg-elevated) 0%, var(--bg-primary) 48%, var(--void) 100%); --edge-wine: rgba(74, 25, 66, 0.55); /* wine: the violet edge haze (main.css replaces aurora-blob-1's gradient with it) */ --edge-amber: rgba(196, 138, 96, 0.22); /* accent-warm-deep: the low glow, bottom left (replaces aurora-blob-2's) */ --edge-rose: rgba(212, 160, 160, 0.10); /* accent-rose: a far, faint blush (replaces aurora-blob-3's) */ --scrim: rgba(5, 5, 17, 0.72); /* void, behind a card on the dark */ --scrim-deep: rgba(5, 5, 17, 0.88); --beam: rgba(242, 196, 160, 0.07); /* accent-warm-bright: the projector beam through the dust */ /* ───── Light: halo, flash, the title in lights ───── */ --halo: rgba(242, 196, 160, 0.22); /* accent-warm-bright */ --halo-far: rgba(232, 168, 124, 0.08); --light-core: rgba(250, 240, 230, 0.95); /* text-primary, the white-hot centre */ --flash-core: rgba(250, 240, 230, 0.95); --flash-mid: rgba(232, 168, 124, 0.45); --title-shadow: 0 0 26px rgba(232, 168, 124, 0.55), 0 0 2px rgba(250, 240, 230, 0.9); --title-shadow-settled: 0 0 34px rgba(232, 168, 124, 0.7), 0 0 80px rgba(196, 138, 96, 0.3), 0 0 2px rgba(250, 240, 230, 1); --title-shadow-flare: 0 0 44px rgba(250, 240, 230, 1), 0 0 120px rgba(232, 168, 124, 0.7), 0 0 2px rgba(250, 240, 230, 1); /* ───── Gilt: hairlines, plaques, the lettering gradient ───── */ --gilt-line: rgba(232, 168, 124, 0.28); --gilt-line-strong: rgba(242, 196, 160, 0.6); --gilt-gradient: linear-gradient(100deg, var(--accent-warm-deep) 0%, var(--accent-warm-bright) 42%, var(--text-primary) 52%, var(--accent-warm) 100%); --plaque-fill: linear-gradient(180deg, rgba(16, 24, 48, 0.62), rgba(5, 5, 17, 0.6)); --plaque-inset: inset 0 1px 0 rgba(242, 196, 160, 0.18), 0 10px 30px rgba(5, 5, 17, 0.45); /* ───── The monogram: two ribbon-folded initials and the join between them ───── */ --mono-lit: linear-gradient(165deg, var(--text-primary) 0%, var(--accent-warm-bright) 36%, var(--accent-warm) 70%, var(--accent-warm-deep) 100%); --mono-side: var(--accent-warm-deep); /* the shaded face of each fold (extruded text-shadow, 3 px steps) */ --mono-join: linear-gradient(180deg, var(--accent-warm-bright), var(--accent-celestial) 60%, var(--accent-rose)); --mono-flare: 0 0 18px rgba(250, 240, 230, 0.95), 0 0 60px rgba(242, 196, 160, 0.8), 0 0 140px rgba(232, 168, 124, 0.55); /* ───── The ribbons of light (premiere): the palette's hues, centre out ───── Order across the burst: hot core (2 strips, 0.3 s) → amber → gold → cream → rose → celestial pink, one cool mint thread in nine, and the last strip left standing is celestial. No strip is ever a saturated red. */ --ribbon-hot: var(--ember); --ribbon-amber: var(--accent-warm); --ribbon-gold: var(--accent-warm-bright); --ribbon-cream: var(--text-primary); --ribbon-rose: var(--accent-rose); --ribbon-pink: var(--accent-celestial); --ribbon-mint: var(--sage); --ribbon-haze: rgba(74, 25, 66, 0.5); /* wine, the far violet under the burst */ --ribbon-soft-edge: 22%; /* gradient feather each side: softness without filter: blur() */ /* ───── The ghost drop-in (picker, poster row, episode rows, ident) ───── Two echoes trail the real element: offset up, translucent, converging onto it over --ghost-ms. Transform and opacity only. */ --ghost-offset-1: -9px; --ghost-offset-2: -18px; --ghost-alpha-1: 0.34; --ghost-alpha-2: 0.16; --ghost-ms: 600ms; --ghost-stagger: 120ms; /* ───── Profile tiles, posters, episode rows ───── */ --tile-radius: 14px; --tile-ring: 1px solid var(--gilt-line); --tile-ring-lit: 1px solid var(--gilt-line-strong); --tile-shadow: 0 14px 34px rgba(5, 5, 17, 0.6), 0 0 26px rgba(232, 168, 124, 0.12); --poster-radius: 6px; /* a poster has near-square corners; a tile is rounder */ --poster-frame: 1px solid var(--gilt-line-strong); --poster-shadow: 0 18px 40px rgba(5, 5, 17, 0.65), 0 0 28px rgba(232, 168, 124, 0.14); --poster-title-scrim: linear-gradient(0deg, rgba(5, 5, 17, 0.88) 0%, rgba(5, 5, 17, 0.5) 42%, rgba(5, 5, 17, 0) 100%); --row-fill: rgba(16, 24, 48, 0.72); /* bg-elevated */ --row-line: rgba(232, 168, 124, 0.16); --row-next-ring: rgba(242, 196, 160, 0.55); /* the breathing ring on the next episode to open */ /* ───── Browse hero and the full-screen playback ───── */ --hero-scrim-top: linear-gradient(180deg, rgba(5, 5, 17, 0.7) 0%, rgba(5, 5, 17, 0) 100%); --hero-scrim-bottom: linear-gradient(0deg, rgba(5, 5, 17, 0.92) 0%, rgba(5, 5, 17, 0.55) 45%, rgba(5, 5, 17, 0) 100%); --sub-band: linear-gradient(0deg, rgba(5, 5, 17, 0.82) 0, rgba(5, 5, 17, 0.82) 236px, rgba(5, 5, 17, 0) 276px); /* void, behind the subtitles only: text-primary on it is 11.27:1 over a pure-white photo */ --block-backing: linear-gradient(180deg, rgba(5, 5, 17, 0) 0, rgba(5, 5, 17, 0.82) 40px, rgba(5, 5, 17, 0.82) calc(100% - 40px), rgba(5, 5, 17, 0) 100%); /* void, behind the browse text block, sized block + 40px each way: 6.23:1 for accent-warm, the weakest text on it, over white */ --plate-dim: rgba(5, 5, 17, 0.58); /* the darkened ghost plate behind a photo that does not fill the frame */ --sub-ink: var(--text-primary); /* subtitles: Outfit 500, white-cream, with an outline of void */ --sub-outline: 0 0 2px var(--void), 0 1px 3px var(--void), 0 0 10px rgba(5, 5, 17, 0.85); --tag-ink: var(--text-secondary); /* the quiet "S3 · E2" slate */ --progress-track: rgba(250, 240, 230, 0.18); /* a hairline with no thumb: decoration, not a scrubber */ --progress-fill: var(--accent-warm-bright); /* ───── The marquee (the show title's bulbs) ───── */ --bulb-off: rgba(242, 196, 160, 0.16); --bulb-on: var(--accent-warm-bright); --bulb-glow: 0 0 8px 2px rgba(242, 196, 160, 0.6); /* ───── The director's note: a sheet on the dimmed frame ───── */ --note-fill: rgba(12, 18, 34, 0.82); /* bg-primary, dense enough to read over any photo */ --note-edge: rgba(232, 168, 124, 0.2); --note-ink: var(--accent-warm-bright); /* Pinyon, gold on midnight (never on a light surface) */ --note-ink-glow: rgba(242, 196, 160, 0.3); /* ───── Credits ───── */ --credit-role: var(--text-secondary); /* Outfit caps */ --credit-name: var(--text-primary); /* Playfair 600 */ --credit-star: var(--gilt-gradient); /* the one starring line, gilt */ /* ───── Controls (every one is real; decoration never borrows these) ───── */ --btn-fill: linear-gradient(135deg, var(--accent-warm-bright), var(--accent-warm) 50%, var(--accent-warm-deep)); --btn-ink: var(--void); /* 9.96:1 on accent-warm, 6.90:1 on accent-warm-deep */ --btn-shadow: 0 10px 34px rgba(232, 168, 124, 0.35), inset 0 1px 0 rgba(250, 240, 230, 0.5); --btn-ghost-border: rgba(242, 196, 160, 0.5); --btn-ghost-fill: rgba(12, 18, 34, 0.5); --focus-ring: var(--accent-warm-bright); --decor-ink: rgba(216, 207, 196, 0.62); /* text-secondary, dimmed: chrome that is only decoration (wordmark, avatar chip, season tag) */ /* ───── Typography: playfair-outfit-pinyon ───── */ --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Outfit', 'Segoe UI', sans-serif; --font-script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive; /* ───── Easings ───── */ --ease-silk: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1); /* declared for the contract; unused (nothing here overshoots) */ --ease-breath: cubic-bezier(0.45, 0, 0.55, 1); --ease-snap: cubic-bezier(0.5, 0, 0.5, 1); --ease-drift: cubic-bezier(0.4, 0, 0.6, 1); --ease-stage: cubic-bezier(0.83, 0, 0.17, 1); } /* ReveelHero palettes (0-255 triples, set in JS; listed here so they stay in step): RIBBON (lightDissolve, premiere): [250,240,230] [242,196,160] [232,168,124] [196,138,96] [240,180,200] [212,160,160] + [224,96,80] ember for the hot core LIGHT (nameAssemble, show title): [250,240,230] [242,196,160] [232,168,124] [196,138,96] BURST (goldBurst, renewed): LIGHT + [224,96,80] ember + [240,180,200] celestial BOKEH (bokehField, credits rest): [232,168,124] [242,196,160] [216,207,196] [196,138,96] [240,180,200] */