/* ═══════════════════════════════════════════════════════════════════════ {{BRAND}} · ATELIER — the premium skin for the whole ad system. One idea: this is a screening room. The ads are ivory, gold and ice — they are the light source. The interface is the dark theatre around them: an ink-blue night canvas (Nocturne), two temperatures of ambient light (Frost high-left · Champagne low-right — the brand's DAY/NIGHT duality), fine film grain, and Fraunces as the display voice. Loaded LAST in every page's , after the page's inline styles, so equal-specificity rules here win the cascade. Token selectors are prefixed with `html` for two reasons: 1. specificity — html:root (0,1,1) outranks the pages' :root (0,1,0), and html:root[data-theme] / html:root:not(...) (0,2,1) outrank the pages' (0,2,0) blocks. 2. EXPORT SAFETY — the Builder serialises every stylesheet into an SVG foreignObject when exporting ad PNGs. Inside that SVG there is no element, so nothing in this file can restyle an exported ad. Dark is the default. data-theme="light" (gv_theme key) = Daylight. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · TOKENS · Atelier Noir (default) ─────────────────────────────── */ html:root, html:root[data-theme="dark"] { --ink: #EFEDE8; /* Bone */ --ink-2: #C6C4BE; --mute: #8B8D94; --faint: #565962; --line: #232936; /* Seam */ --line-2:#1A1F29; --paper: #12151D; /* Onyx */ --wash: #0B0D12; /* Nocturne */ --sink: #080A0E; /* Undertow */ --gold: #C7A45B; /* Champagne · locked brand gold */ --frost: #A9C6DC; /* ambience only · never interactive */ --win: #57A47E; --win-bg:#12281D; --ok: #C9A94E; --ok-bg: #2A2416; --bad: #D97A66; --bad-bg:#2A1815; color-scheme: dark; } @media (prefers-color-scheme: dark) { html:root:not([data-theme="light"]) { --ink:#EFEDE8; --ink-2:#C6C4BE; --mute:#8B8D94; --faint:#565962; --line:#232936; --line-2:#1A1F29; --paper:#12151D; --wash:#0B0D12; --sink:#080A0E; --gold:#C7A45B; --frost:#A9C6DC; --win:#57A47E; --win-bg:#12281D; --ok:#C9A94E; --ok-bg:#2A2416; --bad:#D97A66; --bad-bg:#2A1815; color-scheme: dark; } } /* ── 1b · TOKENS · Daylight (data-theme="light") ─────────────────────── */ html:root[data-theme="light"] { --ink: #14130F; --ink-2: #3D3A35; --mute: #8A8378; --faint: #B5AEA3; --line: #E7E2D9; --line-2:#F0EDE6; --paper: #FFFFFF; --wash: #F7F5F0; --sink: #F1EEE7; --gold: #C7A45B; --frost: #7FA5BF; --win: #1F6B4A; --win-bg:#E8F2EC; --ok: #8A6D1F; --ok-bg: #FBF4E2; --bad: #A33A2E; --bad-bg:#FBECE9; color-scheme: light; } /* ── 2 · ARTBOARD / EXPORT GUARD ───────────────────────────────────────── The Builder's #ad artboard IS the ad · a fixed ivory 1080×1350 static. It must render identically in both themes and in the SVG export dump. Pinning the custom properties ON #ad locks the whole subtree, in the live page and inside the serialised export (this rule rides along). This also fixes a pre-existing bug: dark-OS users previously exported ads with warm-dark token values leaking through the pages' own prefers-color-scheme block. */ #ad { --ink:#14130F; --ink-2:#3D3A35; --mute:#8A8378; --faint:#B5AEA3; --line:#E8E4DC; --line-2:#F1EEE8; --paper:#FFFFFF; --wash:#FAF8F4; --sink:#F4F1EB; --gold:#C7A45B; --win:#1F6B4A; --win-bg:#E8F2EC; --ok:#8A6D1F; --ok-bg:#FBF4E2; --bad:#A33A2E; --bad-bg:#FBECE9; color:#14130F; color-scheme: light; } /* ── 3 · ATMOSPHERE · the signature ────────────────────────────────────── A fixed two-temperature light field behind everything: Frost breathes high-left, Champagne blooms low-right. Transform-only drift, 110s — felt, never watched. Film grain above everything at 4%. */ html { background: var(--wash); } body { background: transparent; position: relative; } body::before { content:""; position: fixed; inset:-20%; z-index:-1; pointer-events:none; background: radial-gradient(42% 38% at 18% 8%, color-mix(in srgb, var(--frost) 13%, transparent) 0%, transparent 70%), radial-gradient(46% 42% at 86% 92%, color-mix(in srgb, var(--gold) 10%, transparent) 0%, transparent 72%), radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--paper) 55%, transparent) 0%, transparent 100%); will-change: transform; } @media (prefers-reduced-motion: no-preference) { body::before { animation: atelierDrift 110s ease-in-out infinite alternate; } } @keyframes atelierDrift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d( 1.5%, 1.5%, 0) scale(1.06); } } body::after { content:""; position: fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } html:root[data-theme="light"] body::after { opacity:.028; } /* retune the existing shine.js hero blobs to the two-temperature system · shine injects its