/* ===================================================================== themes.css — Editorial theme layer Stefan Gerhard Coaching The site's look. base.css + the seven other stylesheets still hold the original "classic" palette untouched; this file overrides them into the near-black Dark Editorial theme, which every page opts into with data-theme="editorial" on . Nothing here runs unless that attribute is present, so classic remains a complete, working fallback: remove the attribute (or this file's ) and the site returns to the original design. Accent : Ochre (Sky kept as a one-block toggle — see "ACCENT" below) Headline: Inter (no separate display face) WHY THIS IS MORE THAN A TOKEN SWAP The base palette overloads tokens: --c-white is used both as light SURFACES (body, .section--light, cards, form fields, the inline step-card backgrounds) AND as light TEXT on dark areas; --c-primary-dark backs dark surfaces AND colours most headings; --c-slate is body text. A plain inversion would leave a light/dark checkerboard, black-on-dark headings, and washed-out body copy. So below, after the token values, scoped overrides push every content surface dark and every text token light. All of it is colour / background / border only — no layout, spacing, sizing, or markup changes. ===================================================================== */ [data-theme="editorial"] { --c-primary-dark: #0b0b0c; /* page bg, nav, footer, dark sections */ --c-navy-mid: #15151a; /* raised surfaces (cards, j-step) */ --c-offwhite: #16161a; /* .section--offwhite / page-hero fills */ --c-white: #f2f0ec; /* the light INK: text on dark + light button */ --c-slate: #a8a49c; /* body text on dark — 6.9:1 on #0b0b0c */ --c-border: #2a2a30; --c-border-input: #3a3a42; --overlay-hero: rgba(11, 11, 12, 0.72); --overlay-card: rgba(11, 11, 12, 0.72); /* ================================================================ ACCENT — ACTIVE: Ochre. To switch to Sky, comment these four lines and uncomment the Sky set directly below. Nothing else needs to change: the CTA/badge/icon ink and the input focus-glow both read from --c-cta-ink and --c-accent-glow. ================================================================ */ --c-blue-accent: #d9a441; /* links, eyebrows, nums — 8.75:1 on page */ --c-blue-mid: #d9a441; /* CTA / badge / icon background */ --c-cta-ink: #0b0b0c; /* ink ON the CTA (ochre is bright → dark) */ --c-accent-glow: rgba(217, 164, 65, 0.30); /* ----- Sky alternative (inactive) — swap with the four lines above ----- --c-blue-accent: #6fb3d9; (accent — 8.55:1 on page) --c-blue-mid: #2f6f96; (CTA background, one step darker) --c-cta-ink: #f2f0ec; (light ink on the darker sky button — 4.8:1) --c-accent-glow: rgba(111, 179, 217, 0.28); ----------------------------------------------------------------------- */ } /* --- Surfaces: force every "light" surface dark ----------------------- These used --c-white (now #f2f0ec, light), so push them to the page or a raised dark surface instead. */ [data-theme="editorial"] body { background: var(--c-primary-dark); } [data-theme="editorial"] .section--light { background: var(--c-primary-dark); } [data-theme="editorial"] .price-card, [data-theme="editorial"] .cred, [data-theme="editorial"] .entry { background: var(--c-navy-mid); } /* Step cards carry an inline style="background: var(--c-white)" in the HTML (off-limits to edit), so !important is required to beat it. Only one in the file. */ [data-theme="editorial"] .step { background: var(--c-navy-mid) !important; } /* Form fields: dark field, light typed text, visible border + accent glow */ [data-theme="editorial"] .form__input, [data-theme="editorial"] .form__select, [data-theme="editorial"] .form__textarea { background: var(--c-primary-dark); border-color: var(--c-border-input); color: var(--c-white); } [data-theme="editorial"] .form__input:focus, [data-theme="editorial"] .form__select:focus, [data-theme="editorial"] .form__textarea:focus { box-shadow: 0 0 0 3px var(--c-accent-glow); } /* --- Text: flip the dark-ink text tokens to the light ink ------------- Everything below explicitly set color:var(--c-primary-dark) (#0b0b0c), invisible on the now-dark surfaces. */ [data-theme="editorial"] h1, [data-theme="editorial"] h2, [data-theme="editorial"] h3, [data-theme="editorial"] h4 { color: var(--c-white); } [data-theme="editorial"] .step__title, [data-theme="editorial"] .price-card__name, [data-theme="editorial"] .price-card__price, [data-theme="editorial"] .price-card__sessions, [data-theme="editorial"] .cred__label, [data-theme="editorial"] .entry__title, [data-theme="editorial"] .journey-how__k, [data-theme="editorial"] .form__label, [data-theme="editorial"] .legal__content h2, [data-theme="editorial"] .legal__content h3, [data-theme="editorial"] .legal__content strong { color: var(--c-white); } [data-theme="editorial"] .email-box__address:hover { color: var(--c-white); } [data-theme="editorial"] .btn--outline { color: var(--c-white); } /* --- CTA / badge / icon ink — reads the accent's --c-cta-ink ---------- */ [data-theme="editorial"] .btn--primary, [data-theme="editorial"] .price-card__badge, [data-theme="editorial"] .email-box__icon { color: var(--c-cta-ink); } /* --- Hardcoded literals that fight theming (scoped overrides) ---------- */ /* base.css:219 .section--dark { color: rgba(255,255,255,.82) } — warm it */ [data-theme="editorial"] .section--dark { color: rgba(242, 240, 236, 0.82); } /* cards.css:45-48 audience-card overlay gradient hardcodes navy — retint to near-black so the photo captions still read. */ [data-theme="editorial"] .audience-card__bg::after { background: linear-gradient( to top, rgba(11, 11, 12, 0.88) 0%, rgba(11, 11, 12, 0.62) 50%, rgba(11, 11, 12, 0.30) 78%, rgba(11, 11, 12, 0.08) 100% ); }