/* ============================================================================ SITE THEME — one palette for every public page. ---------------------------------------------------------------------------- The site had grown two looks: the older storefront pages (products, studios, the front pages) were built dark, while Cast & Crew was built light. Nothing switched between them, so which look you got depended on which page you happened to be on. This file is the single source of colour for the public site. Every other public stylesheet is expected to reference these tokens rather than hard-code a hex value, so one admin setting can flip the whole site. The theme is chosen in the admin (General settings -> Site appearance) and stamped on by the layouts. "auto" follows the visitor's own OS preference. Rules for anyone editing this: - Define every token in :root. A token that only exists inside a [data-theme] block is invisible in the other theme, which is how you get dark text on a dark background. - The brand magenta shifts between themes on purpose: #c401cb is a deliberate brand colour on white, but it drops to roughly 3:1 against a dark ground, so the dark theme uses a lighter tint of the same hue. ========================================================================== */ :root { /* Surfaces */ --site-bg: #ffffff; /* page ground */ --site-bg-alt: #f6f6f6; /* alternating band / subtle section */ --site-bg-sunken: #f5f5f5; /* inset areas, wells */ --site-surface: #ffffff; /* cards, panels, dropdowns */ --site-surface-2: #fafafa; /* nested card */ --site-overlay: rgba(0, 0, 0, .5); /* Text */ --site-ink: #1a1a1a; /* body copy */ --site-ink-strong: #000000; /* headings */ --site-ink-invert: #ffffff; /* text ON a brand/solid fill */ --site-muted: #6d6d6d; /* secondary copy */ --site-muted-2: #767676; /* tertiary, placeholders — 4.54:1 on white */ --site-faint: #b0b0b0; /* disabled, hairline labels */ /* Lines */ --site-border: #d1d1d1; --site-border-soft: #e7e7e7; --site-border-strong: #b0b0b0; /* Brand — magenta is the constant; the ramp adapts */ --site-brand: #c401cb; --site-brand-strong: #830188; --site-brand-soft: #faeffb; /* tinted background behind brand content */ --site-brand-contrast:#ffffff; /* text on a brand fill */ --site-accent: #964bc8; /* Status */ --site-success: #1a7f45; --site-success-soft: #e8f6ee; --site-danger: #b42318; --site-danger-soft: #fdecec; --site-warning: #96590a; --site-warning-soft: #fcf2e0; /* Elevation */ --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06); --site-shadow: 0 8px 24px rgba(0, 0, 0, .10); --site-shadow-lg: 0 18px 44px rgba(0, 0, 0, .14); color-scheme: light; } /* Explicit dark, chosen by the admin. */ :root[data-theme="dark"] { --site-bg: #121016; --site-bg-alt: #17141c; --site-bg-sunken: #0e0c12; --site-surface: #1a1720; --site-surface-2: #221d2a; --site-overlay: rgba(0, 0, 0, .65); --site-ink: #ece7ef; --site-ink-strong: #ffffff; --site-ink-invert: #ffffff; --site-muted: #a79fae; --site-muted-2: #8d8595; --site-faint: #6d6675; --site-border: #332c3b; --site-border-soft: #272130; --site-border-strong: #443b4e; --site-brand: #e05ce6; --site-brand-strong: #c401cb; --site-brand-soft: #2b1730; --site-brand-contrast:#ffffff; --site-accent: #b47fe0; --site-success: #6fcf97; --site-success-soft: #16281d; --site-danger: #ff6b6a; --site-danger-soft: #2a1616; --site-warning: #e8b765; --site-warning-soft: #2a2113; --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --site-shadow: 0 8px 24px rgba(0, 0, 0, .55); --site-shadow-lg: 0 18px 44px rgba(0, 0, 0, .6); color-scheme: dark; } /* "Auto" — follow the visitor's OS, but never override an explicit choice. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --site-bg: #121016; --site-bg-alt: #17141c; --site-bg-sunken: #0e0c12; --site-surface: #1a1720; --site-surface-2: #221d2a; --site-overlay: rgba(0, 0, 0, .65); --site-ink: #ece7ef; --site-ink-strong: #ffffff; --site-ink-invert: #ffffff; --site-muted: #a79fae; --site-muted-2: #8d8595; --site-faint: #6d6675; --site-border: #332c3b; --site-border-soft: #272130; --site-border-strong: #443b4e; --site-brand: #e05ce6; --site-brand-strong: #c401cb; --site-brand-soft: #2b1730; --site-brand-contrast:#ffffff; --site-accent: #b47fe0; --site-success: #6fcf97; --site-success-soft: #16281d; --site-danger: #ff6b6a; --site-danger-soft: #2a1616; --site-warning: #e8b765; --site-warning-soft: #2a2113; --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --site-shadow: 0 8px 24px rgba(0, 0, 0, .55); --site-shadow-lg: 0 18px 44px rgba(0, 0, 0, .6); color-scheme: dark; } } /* The ground. Every public bundle now reads these tokens, so this can apply to the page itself rather than only the themed islands it was scoped to while the storefront was still hard-coded. */ html[data-theme] body { background-color: var(--site-bg); color: var(--site-ink); }