/** * Watson theme — Light / Dark modes + brand-token buttons * ------------------------------------------------------------------ * PLATFORM PATTERN (fleet). Every Watson-themed client inherits this via * fleet-sync. It does two things: * * 1. Two coherent colour modes (LIGHT + DARK) derived from the SAME brand * config. Only the mode-dependent axes flip (surface / ink / borders); * the brand accents (primary, accent) are identical in both modes and are * always read from the pushed brand tokens — never hardcoded per client. * * 2. A brand-token recolour of WordPress core buttons. WP's global-styles * emits `:root :where(.wp-element-button,.wp-block-button__link){ * background-color:#32373c}` (grey) and nothing in the theme overrode it, * so every core button rendered WP-default grey. These rules beat that * `:root :where()` rule (specificity 0,1,0) with `:root .class` * (specificity 0,2,0) and colour buttons from the brand palette. * * Mode selection: PHP puts `data-theme="light|dark"` on (see * inc/color-modes.php). When the site is configured "auto" no attribute is set * and the OS preference decides. An optional end-user toggle (config-gated) * flips `data-theme` at runtime and persists the choice. * * Brand tokens consumed (set by the per-site config pipeline, never here): * --wp--preset--color--primary brand primary * --wp--preset--color--accent brand accent * --wp--preset--color--secondary brand secondary * * No client's colours appear in this file. They used to: #662483 and #6BB869 * sat here as the fallbacks, so any site that did not declare a brand silently * adopted another client's purple and green. */ /* ================================================================ 1. MODE TOKENS Constants that are identical in both modes stay on :root. Surface / ink / border flip per mode. ================================================================ */ :root { /* Brand accents — mode-independent. Buttons + toggles read these. */ --wm-primary: var(--wp--preset--color--primary, var(--bouw-primary, var(--bouw-brand-unset))); --wm-accent: var(--wp--preset--color--accent, var(--bouw-accent, var(--bouw-brand-unset))); --wm-secondary: var(--wp--preset--color--secondary, var(--bouw-secondary, var(--bouw-brand-unset))); /* Readable ink to place ON the light-ish accent (green needs dark text). */ --wm-on-accent: #16151a; /* Readable ink to place ON the primary (purple needs light text). */ --wm-on-primary: #ffffff; /* * Brand "paper" — a mode-INDEPENDENT light band colour used by the * section-inversion mechanism (`.is-inverted-band`) to flip a dark scene to a * light band (and to hold the light ink of that band). Read from a pushed * brand token; the fallback is a NEUTRAL paper (never a client's warm value — * Watson's #f3f0ea arrives via its own config/clients/watson.css). */ --wm-paper: var(--wp--preset--color--paper, var(--bouw-paper, #f5f4f7)); --wm-paper-ink: var(--bouw-paper-ink, #16151a); } /* * Neutral dark surface used for DARK mode. Watson's own pushed surface is * #16151A which equals this neutral floor, so no per-client value is needed; * a client may still override --wm-dark-surface via its own stylesheet/config. */ :root { --wm-dark-surface: #16151a; --wm-dark-surface-alt: #201e26; --wm-dark-card: #232028; --wm-dark-ink: #f5f4f7; --wm-dark-ink-soft: #b6b2bd; --wm-dark-hairline: rgba(255, 255, 255, 0.12); --wm-light-surface: #ffffff; --wm-light-surface-alt: #f5f4f7; --wm-light-card: #ffffff; --wm-light-ink: #1b1a1f; --wm-light-ink-soft: #55535e; --wm-light-hairline: rgba(20, 18, 28, 0.12); } /* ---- Apply a mode: remap the theme's surface/ink vars + the base elements. These are grouped in a macro-like block reused for each selector. ---- */ /* LIGHT */ :root[data-theme="light"] { --bouw-bg-color: var(--wm-light-surface); --bouw-surface: var(--wm-light-surface); --bouw-base: var(--wm-light-surface); --bouw-text-color: var(--wm-light-ink); --bouw-ink: var(--wm-light-ink); --bouw-contrast: var(--wm-light-ink); --surface-body: var(--wm-light-surface); --surface-card: var(--wm-light-card); --surface-section-alt: var(--wm-light-surface-alt); --ink-primary: var(--wm-light-ink); --ink-secondary: var(--wm-light-ink-soft); --ink-muted: var(--wm-light-ink-soft); --wm-hairline: var(--wm-light-hairline); color-scheme: light; } :root[data-theme="light"] body { background-color: var(--wm-light-surface); color: var(--wm-light-ink); } /* DARK — explicit choice */ :root[data-theme="dark"] { --bouw-bg-color: var(--wm-dark-surface); --bouw-surface: var(--wm-dark-surface); --bouw-base: var(--wm-dark-surface); --bouw-text-color: var(--wm-dark-ink); --bouw-ink: var(--wm-dark-ink); --bouw-contrast: var(--wm-dark-ink); --surface-body: var(--wm-dark-surface); --surface-card: var(--wm-dark-card); --surface-section-alt: var(--wm-dark-surface-alt); --ink-primary: var(--wm-dark-ink); --ink-secondary: var(--wm-dark-ink-soft); --ink-muted: var(--wm-dark-ink-soft); --wm-hairline: var(--wm-dark-hairline); color-scheme: dark; } :root[data-theme="dark"] body { background-color: var(--wm-dark-surface); color: var(--wm-dark-ink); } /* AUTO — no data-theme attribute: follow the OS preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bouw-bg-color: var(--wm-dark-surface); --bouw-surface: var(--wm-dark-surface); --bouw-base: var(--wm-dark-surface); --bouw-text-color: var(--wm-dark-ink); --bouw-ink: var(--wm-dark-ink); --bouw-contrast: var(--wm-dark-ink); --surface-body: var(--wm-dark-surface); --surface-card: var(--wm-dark-card); --surface-section-alt: var(--wm-dark-surface-alt); --ink-primary: var(--wm-dark-ink); --ink-secondary: var(--wm-dark-ink-soft); --ink-muted: var(--wm-dark-ink-soft); --wm-hairline: var(--wm-dark-hairline); color-scheme: dark; } :root:not([data-theme="light"]):not([data-theme="dark"]) body { background-color: var(--wm-dark-surface); color: var(--wm-dark-ink); } } @media (prefers-color-scheme: light) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bouw-bg-color: var(--wm-light-surface); --bouw-surface: var(--wm-light-surface); --bouw-base: var(--wm-light-surface); --bouw-text-color: var(--wm-light-ink); --bouw-ink: var(--wm-light-ink); --bouw-contrast: var(--wm-light-ink); --surface-body: var(--wm-light-surface); --surface-card: var(--wm-light-card); --surface-section-alt: var(--wm-light-surface-alt); --ink-primary: var(--wm-light-ink); --ink-secondary: var(--wm-light-ink-soft); --ink-muted: var(--wm-light-ink-soft); --wm-hairline: var(--wm-light-hairline); color-scheme: light; } } /* ------------------------------------------------------------------ * SPECIFICITY RULE FOR THIS FILE — the mood layer does not out-rank clients. * ------------------------------------------------------------------ * Component selectors here are written WITHOUT a `:root ` prefix, on purpose. * * On 2026-08-17 this file carried * `:root .wp-block-button.cta-button > .wp-block-button__link` (0,4,0) * and the ExtraProper client stylesheet carried * `.wp-site-blocks .cta-button > .wp-block-button__link` (0,3,0) * so the platform default won and flipped that site's header CTA — same brand * colours, wrong decision. The first fix was a per-client `:root` prefix, i.e. * an arms race that the client loses again as soon as someone forgets. * * The mood layer is a platform DEFAULT; a client stylesheet is the more * specific truth about one site, and it loads after this file. Keep mood * selectors low-specificity and order decides — client wins, always, without * anyone having to type the right number of classes. * * (Cascade layers were tried first and measured worse: wrapping this file in * `@layer` drops it below ALL unlayered CSS, including WordPress core's own * `:root :where(.wp-element-button)` button default. On watson.preview that * turned the green CTA into WP's grey-blue #32373c. Layers only work if the * whole platform is layered — a bigger refactor, not this fix.) * * tests/brand-tokens-test.php enforces the no-`:root`-prefix rule. * ------------------------------------------------------------------ */ /* ================================================================ 2. BRAND-TOKEN BUTTONS (fix WP's #32373c grey) Selector specificity `:root .class` = (0,2,0) beats the global-styles `:root :where(...)` = (0,1,0). Preset colour classes get an explicit !important so an author's chosen colour always wins. ================================================================ */ /* Default / fill button → brand primary (purple), light text. The BOX (pill shape) is set here too, not just the colour. WP core buttons normally inherit padding/radius/display from wp-block-library's global styles; a theme that renders core preset-class buttons (has-*-background-color + wp-element-button) inside a pattern/CTA — where those global styles may not be in play — would otherwise paint bare coloured text. These box rules are brand-neutral (all token-driven) and idempotent with the core defaults. */ .wp-block-button__link, .wp-element-button { display: inline-block; padding: var(--bouw-space-md, 0.75rem) var(--bouw-space-xl, 1.5rem); border: 2px solid transparent; border-radius: var(--radius-md, var(--bouw-radius-md, 4px)); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; background-color: var(--wm-primary); color: var(--wm-on-primary); border-color: transparent; transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .wp-block-button__link:hover, .wp-block-button__link:focus-visible, .wp-element-button:hover, .wp-element-button:focus-visible { filter: brightness(1.08); } /* Author-chosen preset backgrounds keep working and stay legible. */ .wp-block-button__link.has-primary-background-color { background-color: var(--wm-primary) !important; color: var(--wm-on-primary) !important; } .wp-block-button__link.has-accent-background-color, .wp-block-button__link.has-secondary-background-color { background-color: var(--wm-accent) !important; color: var(--wm-on-accent) !important; } /* Outline / ghost style → transparent with brand primary border + text. */ .wp-block-button.is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline { background-color: transparent; color: var(--wm-primary); border: 2px solid var(--wm-primary); } :root[data-theme="dark"] .wp-block-button.is-style-outline > .wp-block-button__link, :root[data-theme="dark"] .wp-block-button__link.is-style-outline { /* lift the label so it reads on charcoal */ color: var(--wm-accent); border-color: var(--wm-accent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .wp-block-button.is-style-outline > .wp-block-button__link, :root:not([data-theme="light"]):not([data-theme="dark"]) .wp-block-button__link.is-style-outline { color: var(--wm-accent); border-color: var(--wm-accent); } } .wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-button__link.is-style-outline:hover { background-color: var(--wm-primary); color: var(--wm-on-primary); border-color: var(--wm-primary); } /* ---- The "band around a grey pill" pattern ---- parts/header.html ships a .cta-button whose WRAPPER carried an accent background while the inner link stayed grey. Collapse the wrapper band and colour the link itself as the accent CTA. */ .wp-block-button.cta-button { background-color: transparent !important; padding: 0 !important; border-radius: 0 !important; } .wp-block-button.cta-button > .wp-block-button__link { background-color: var(--wm-accent); color: var(--wm-on-accent); border-radius: 999px; font-weight: 700; } /* Legacy .bouw-btn helpers already read brand tokens; nudge the ghost variant so it stays legible when the surface flips. */ :root[data-theme="dark"] .bouw-btn--ghost { color: var(--wm-dark-ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .bouw-btn--ghost { color: var(--wm-dark-ink); } } /* ================================================================ 3. OPTIONAL END-USER TOGGLE (config-gated; markup added in PHP) ================================================================ */ .bouw-theme-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--wm-hairline, rgba(127, 127, 127, 0.3)); border-radius: 999px; background: var(--surface-card, var(--bouw-surface, #232028)); color: var(--ink-primary, var(--bouw-text-color, inherit)); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); transition: transform 0.15s ease, filter 0.15s ease; } .bouw-theme-toggle:hover { transform: translateY(-1px); filter: brightness(1.05); } .bouw-theme-toggle:focus-visible { outline: 2px solid var(--wm-primary); outline-offset: 2px; } .bouw-theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Show the sun in dark mode (click → go light), the moon in light mode. */ .bouw-theme-toggle .wm-icon-sun { display: none; } .bouw-theme-toggle .wm-icon-moon { display: block; } :root[data-theme="dark"] .bouw-theme-toggle .wm-icon-sun, :root:not([data-theme="light"]) .bouw-theme-toggle .wm-icon-sun { display: block; } :root[data-theme="dark"] .bouw-theme-toggle .wm-icon-moon, :root:not([data-theme="light"]) .bouw-theme-toggle .wm-icon-moon { display: none; } @media (prefers-reduced-motion: reduce) { .bouw-theme-toggle, .wp-block-button__link, .wp-element-button { transition: none; } } /* ================================================================ 4. SECTION INVERSION — `.is-inverted-band` PLATFORM PATTERN. A section whose canvas is the OPPOSITE of the page canvas: a light "paper" band on a dark site, a dark band on a light site. Token-only — it re-scopes the surface/ink token contract for its OWN subtree, so every token-driven block placed inside renders correctly with zero per-section CSS. Reversible by mode. The canonical class is `.is-inverted-band` (emitted by patterns / the FSE adapter). `.is-style-inverted-band` is the same rule for the editor block style (register_block_style prefixes `is-style-`). Both are covered. Cascade: these rules match the BAND element itself and set the tokens ON it, so they win over the inherited :root[data-theme] values for the band's subtree regardless of the :root rule's specificity (different element). ================================================================ */ /* Default (dark site + auto-dark canvas): invert to a LIGHT paper band. */ .is-inverted-band, .is-style-inverted-band { --surface-body: var(--wm-paper); --surface-card: var(--wm-light-card); --surface-section-alt: var(--wm-light-surface-alt); --ink-primary: var(--wm-paper-ink); --ink-secondary: var(--wm-light-ink-soft); --ink-muted: var(--wm-light-ink-soft); --bouw-base: var(--wm-paper); --bouw-surface: var(--wm-paper); --bouw-bg-color: var(--wm-paper); --bouw-contrast: var(--wm-paper-ink); --bouw-text-color: var(--wm-paper-ink); --bouw-ink: var(--wm-paper-ink); --wm-hairline: var(--wm-light-hairline); background-color: var(--surface-body); color: var(--ink-primary); } /* Light site (explicit): invert the OTHER way — a dark band on paper. */ :root[data-theme="light"] .is-inverted-band, :root[data-theme="light"] .is-style-inverted-band { --surface-body: var(--wm-dark-surface); --surface-card: var(--wm-dark-card); --surface-section-alt: var(--wm-dark-surface-alt); --ink-primary: var(--wm-dark-ink); --ink-secondary: var(--wm-dark-ink-soft); --ink-muted: var(--wm-dark-ink-soft); --bouw-base: var(--wm-dark-surface); --bouw-surface: var(--wm-dark-surface); --bouw-bg-color: var(--wm-dark-surface); --bouw-contrast: var(--wm-dark-ink); --bouw-text-color: var(--wm-dark-ink); --bouw-ink: var(--wm-dark-ink); --wm-hairline: var(--wm-dark-hairline); } /* Light site (auto, OS = light): same reverse inversion. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) .is-inverted-band, :root:not([data-theme="dark"]):not([data-theme="light"]) .is-style-inverted-band { --surface-body: var(--wm-dark-surface); --surface-card: var(--wm-dark-card); --surface-section-alt: var(--wm-dark-surface-alt); --ink-primary: var(--wm-dark-ink); --ink-secondary: var(--wm-dark-ink-soft); --ink-muted: var(--wm-dark-ink-soft); --bouw-base: var(--wm-dark-surface); --bouw-surface: var(--wm-dark-surface); --bouw-bg-color: var(--wm-dark-surface); --bouw-contrast: var(--wm-dark-ink); --bouw-text-color: var(--wm-dark-ink); --bouw-ink: var(--wm-dark-ink); --wm-hairline: var(--wm-dark-hairline); } } /* ================================================================ 5. EYEBROW MICRO-LABEL — `.is-style-eyebrow` PLATFORM PATTERN. The small tracked uppercase label above a heading. Display face (brand `--font-heading`, e.g. Raleway/Playfair) + caps tracking. Token-driven; no brand values baked in. ================================================================ */ .is-style-eyebrow { font-family: var(--font-heading, var(--bouw-brand-unset-font)); font-weight: var(--font-heading-weight, 700); text-transform: uppercase; letter-spacing: var(--tracking-caps, 0.12em); line-height: 1.2; font-size: var(--text-sm, 0.875rem); color: var(--ink-muted, var(--ink-secondary, currentColor)); margin-bottom: 0.5rem; } /* ================================================================ 6. BRAND-PRIMARY BAND — `.is-style-brand-band` PLATFORM PATTERN. A section whose canvas is the brand PRIMARY colour with inverse ink — distinct from `.is-inverted-band` (a NEUTRAL dark/light flip). Token-only re-scope: every token-driven block inside renders correctly with no per-section CSS. Mode-independent (primary is the same in both modes). Canonical class `.is-brand-band` (patterns / FSE adapter) + `.is-style-brand-band` (editor block style — register_block_style prefixes `is-style-`). Both covered. ================================================================ */ .is-brand-band, .is-style-brand-band { --surface-body: var(--color-primary); --surface-card: var(--color-primary); --surface-section-alt: var(--color-primary-dark, var(--color-primary)); --ink-primary: var(--ink-inverse, #fff); --ink-secondary: var(--ink-inverse-muted, rgba(255, 255, 255, 0.85)); --ink-muted: var(--ink-inverse-muted, rgba(255, 255, 255, 0.85)); --bouw-base: var(--color-primary); --bouw-surface: var(--color-primary); --bouw-bg-color: var(--color-primary); --bouw-contrast: var(--ink-inverse, #fff); --bouw-text-color: var(--ink-inverse, #fff); --bouw-ink: var(--ink-inverse, #fff); --wm-hairline: var(--border-inverse, rgba(255, 255, 255, 0.14)); background-color: var(--surface-body); color: var(--ink-primary); } /* ================================================================ 7. SOFT BAND — `.is-style-soft-band` PLATFORM PATTERN. A calm section on the alternate/soft surface (`--surface-section-alt`, e.g. a crème band). Surface-only re-scope; ink stays the page ink (dark on a light alt band). Reversible by mode because --surface-section-alt is itself mode-aware. Canonical `.is-soft-band` + editor `.is-style-soft-band`. ================================================================ */ .is-soft-band, .is-style-soft-band { --surface-body: var(--surface-section-alt); --surface-card: var(--surface-section-alt); --bouw-base: var(--surface-section-alt); --bouw-surface: var(--surface-section-alt); --bouw-bg-color: var(--surface-section-alt); background-color: var(--surface-body); color: var(--ink-primary); } /* ================================================================ 8. ACCENT PULL-QUOTE — `.is-style-accent-quote` PLATFORM PATTERN. A pull-quote with an accent LEFT border (thickness from `--quote-border`, default 4px; colour `--color-accent`) + italic. Token-only, no brand values baked in. Applied to core/quote (a
). Canonical `.is-accent-quote` + editor `.is-style-accent-quote`. ================================================================ */ .is-accent-quote, .is-style-accent-quote { border-left: var(--quote-border, 4px) solid var(--color-accent); padding-left: 1.25rem; font-style: italic; }