/* ===================================================================== MTV cinema.css — "THE SCREENING ROOM" theme for the mid-funnel (2026-07-04). Extends the landing's warm-tungsten dark system to /create, /pricing, /account, /404 and the legal pages so the walk from marquee to checkout happens in one room. HOW IT WORKS - Loads AFTER variables.css/base.css/mtv.css (+ per-page sheets) and remaps the shared design tokens under a `body.cinema` scope. All mid-funnel components are token-driven, so the remap does ~90% of the work; the rest is targeted component overrides below. - Deliberately NOT loaded by pSEO pages (they share variables.css/ mtv.css and stay paper-light — the editorial lobby) or /onboarding (self-contained .onb-* token system, recovery-only surface). - Injected overlays (.mtv-modal: auth + buy) get their light tokens re-pinned — same convention as the landing: a light checkout sheet over a dark theater. Do not dark-theme the buy modal casually; it is the money surface. CONTRAST RULES - `--primary` maps to deep bronze so every legacy `background: var(--primary); color:#fff` button stays legible by default (white on #8F5A1D ≈ 5.6:1). Money CTAs are then explicitly upgraded to bright tungsten + dark ink, matching the landing. ===================================================================== */ body.cinema { /* Palette (--ink*, --paper*, --tungsten*, --on-tungsten, --line*) and the grain/vignette atmosphere come from screening-room-core.css — shared with the landing so the room can't fork. This block only remaps the mid-funnel design tokens onto that palette. */ /* ---- Token remap: surfaces ---- */ --bg: var(--ink); --bg-subtle: var(--ink-2); --bg-secondary: var(--ink-3); --card: var(--ink-2); --card-tonal: var(--ink-3); --card-hover: var(--ink-3); /* ---- Token remap: lines ---- */ --border: rgba(242, 236, 223, 0.16); --border-subtle: var(--line-soft); --hairline: rgba(242, 236, 223, 0.10); /* ---- Token remap: type ---- */ --text: var(--paper); --text-muted: var(--paper-dim); --text-dimmed: var(--paper-faint); /* topbar.js/auth-modal inject inline `color: var(--text-muted|primary)` */ --text-primary: var(--paper); /* ---- Token remap: action colors ---- */ --primary: #8F5A1D; /* deep bronze — safe under hardcoded #fff text */ --primary-hover: #A96B26; --primary-rgb: 233, 161, 59; /* tint washes go warm amber */ --accent: var(--tungsten); /* ---- Token remap: tonal palette (violet family becomes tungsten) ---- */ --tone-violet: var(--tungsten); --tone-violet-50: rgba(233, 161, 59, 0.10); --tone-violet-100: rgba(233, 161, 59, 0.22); --tone-violet-700: var(--tungsten-hi); --tone-sky: #5fcdfc; --tone-emerald: #34d399; --tone-emerald-50: rgba(52, 211, 153, 0.10); --tone-emerald-100: rgba(52, 211, 153, 0.20); --tone-emerald-700: #6ee7b7; --tone-amber: var(--tungsten); --tone-amber-50: rgba(233, 161, 59, 0.10); --tone-amber-100: rgba(233, 161, 59, 0.22); --tone-amber-700: var(--tungsten-hi); --tone-rose: #fb7185; --tone-rose-50: rgba(251, 113, 133, 0.10); --tone-rose-100: rgba(251, 113, 133, 0.20); --tone-rose-700: #fda4af; /* ---- Token remap: shadows (deeper, warm-tinted glows) ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.30); --shadow-tonal-violet: 0 6px 20px rgba(233, 161, 59, 0.22); --shadow-tonal-violet-lg: 0 8px 24px rgba(233, 161, 59, 0.34); /* ---- Token remap: typography (landing's trio) ---- */ --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Instrument Serif', Georgia, serif; background: var(--ink); color: var(--paper); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --------------------------------------------------------------------- Brand mark: marquee bulb, not the light theme's blue-violet chip. --------------------------------------------------------------------- */ body.cinema .mtv-brand-mark { background: linear-gradient(135deg, var(--tungsten-hi) 0%, var(--tungsten) 100%); color: var(--on-tungsten); box-shadow: 0 0 14px rgba(233, 161, 59, 0.35); } /* --------------------------------------------------------------------- Headlines: projector serif, like the landing hero. Weight resets to 400 because Instrument Serif ships one weight — 800 would render as smeared faux-bold. --------------------------------------------------------------------- */ body.cinema .c2-title, body.cinema .c2-auth-title, body.cinema .pricing-head h1, body.cinema .nf-h1 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; } body.cinema .c2-title em, body.cinema .c2-auth-title em, body.cinema .pricing-head h1 em, body.cinema .nf-h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; } /* --------------------------------------------------------------------- Money CTAs: marquee tungsten with dark ink text — the landing's one action color. Everything not listed here falls back to bronze via the --primary remap and stays legible with its hardcoded #fff text. --------------------------------------------------------------------- */ body.cinema .c2-generate, body.cinema .c2-auth-submit, body.cinema .c2-toolbtn.primary, body.cinema .c2-pack-ladder-cta, body.cinema .c2-order-cta, body.cinema .c2-delivered-download, body.cinema .c2-recut-more, body.cinema .c2-proof-gallery-unlock, body.cinema .plan-card button, body.cinema .credits-slider-buy, body.cinema .interval-toggle button[aria-pressed="true"], body.cinema .nf-form button, body.cinema .nf-cta a { background: var(--tungsten); color: var(--on-tungsten); } body.cinema .c2-generate:hover:not(:disabled), body.cinema .c2-auth-submit:hover:not(:disabled), body.cinema .c2-toolbtn.primary:hover, body.cinema .c2-pack-ladder-cta:hover, body.cinema .c2-order-cta:hover, body.cinema .c2-delivered-download:hover, body.cinema .c2-recut-more:hover, body.cinema .plan-card button:hover:not(:disabled), body.cinema .credits-slider-buy:hover:not(:disabled), body.cinema .nf-form button:hover, body.cinema .nf-cta a:hover { background: var(--tungsten-hi); color: var(--on-tungsten); } /* Kit card eyebrow/price read against the warm dark card, not the light violet. */ body.cinema .c2-kit-card-eyebrow, body.cinema .c2-order-lead, body.cinema .c2-kit-counters-badge { color: var(--tungsten-hi); } body.cinema .c2-generate kbd { background: rgba(22, 16, 5, 0.14); color: var(--on-tungsten); } body.cinema .plan-card.featured button { background: var(--tungsten); box-shadow: 0 8px 24px rgba(233, 161, 59, 0.32); } /* --------------------------------------------------------------------- /create specifics --------------------------------------------------------------------- */ /* Idle-stage placeholder gradients: cool violet dusk → warm projector dusk */ body.cinema .c2-stage-bg-text { background: radial-gradient(circle at 30% 40%, rgba(233, 161, 59, 0.45), transparent 60%), linear-gradient(135deg, #15120E 0%, #6b4423 60%, #ff9a8b 100%); } /* Frame chrome title + example tags already dark-friendly; leave alone. */ /* --------------------------------------------------------------------- /pricing specifics (inline