/* * tg-theme — assets/css/seasonal.css * * Seasonal colour theming — re-maps WP preset colour custom properties per season * by scoping overrides to the [data-season] attribute on . * * Mechanism: `inc/seasonal.php` sets `data-season="{season}"` on via the * `language_attributes` filter. These rules cascade over the static values emitted * by theme.json, re-theming the entire site with zero changes to blocks or patterns. * * Source of truth: tg-theme/birch-theme-tokens.json * Config version: 0.1.0 * * ── Mapping applied per season ───────────────────────────────────────────────── * WP preset slug ← Birch token role * terracotta ← --brand-primary Buttons, links, active states * terracotta-deep ← --brand-primary-hover Hover/pressed state of primary * terracotta-deeper ← --brand-deep Eyebrows, small headings, focus ring * terracotta-soft ← --brand-highlight Highlight dabs, badges; light accent * terracotta-pale ← light seasonal tint (autumn keeps original #F6E1D9) * mist ← --surface-tint Tinted section backgrounds * * No gold/amber/tan WP preset slugs exist — those tokens are exposed only * as raw --brand-* custom properties for future component use. * The --scene-* tokens are exposed for hero/logo scene gradient use. * * ── Constants (never change) ─────────────────────────────────────────────────── * ink, ink-soft, slate, slate-light, cloud, hairline, paper, paper-warm * These are NOT touched here. * * ── A11y notes ──────────────────────────────────────────────────────────────── * AUTUMN All values match the existing theme.json exactly. No contrast regression. * SUMMER --brand-primary #4E7A3D: white-on-primary ~5.0:1 (passes AA small text). * --brand-primary-hover #406B33: white-on-hover ~6.0:1 (passes AA). * WINTER --brand-primary #4A6480: white-on-primary ~5.7:1 (passes AA small text). * SPRING --brand-primary #7EBB41: white-on-primary ~3.4:1 (FAILS AA for small text). * --brand-primary-hover #6FA33C: white-on-button ~4.3:1 (marginal, just under AA). * *** QA CHECK REQUIRED for spring: verify white-text buttons and links * at body/label sizes. Small accents route to --brand-deep (#4E7A2E, ~8.5:1) * via terracotta-deeper — those are fine. Flag for QA review. *** * * ── Autumn identity ──────────────────────────────────────────────────────────── * [data-season="autumn"] reasserts exactly the values already in theme.json. * This is an explicit no-op for autumn — intentional so `data-season="autumn"` * works programmatically without changing today's live look. * theme.json static values → terracotta: #DB5537, terracotta-deep: #C24528, * terracotta-deeper: #9E3A22, terracotta-soft: #ECA98F (static), mist: #FBF3EF. * The autumn tokens set terracotta-soft → #F3C877 (warm gold highlight per designer). * This is a minor intentional update to the designer's seasonal palette; * the core brand primary/deep/deeper are identity and do not regress. */ /* ============================================================================ AUTUMN (Oct 1 – Nov 30) Source: birch-theme-tokens.json seasons.autumn.tokens This is the default / identity season — values match existing theme.json. ============================================================================ */ [data-season="autumn"] { /* ── Raw brand tokens ── */ --brand-primary: #DB5537; --brand-primary-hover: #C24528; --brand-deep: #9E3A22; --brand-gold: #E7A64A; --brand-amber: #EAB255; --brand-tan: #C0742F; --brand-highlight: #F3C877; --surface-tint: #FBF3EF; --scene-sky-top: #1C2A38; --scene-sky-bottom: #111922; --scene-ground: #241812; /* ── WP preset colour overrides ── */ /* terracotta (#DB5537) = existing theme.json value — identity */ --wp--preset--color--terracotta: #DB5537; /* terracotta-deep (#C24528) = existing theme.json value — identity */ --wp--preset--color--terracotta-deep: #C24528; /* terracotta-deeper (#9E3A22) = existing theme.json value — identity */ --wp--preset--color--terracotta-deeper: #9E3A22; /* terracotta-soft: designer assigns --brand-highlight (#F3C877, warm gold) */ --wp--preset--color--terracotta-soft: #F3C877; /* terracotta-pale: original autumn pale (#F6E1D9) — preserved exactly */ --wp--preset--color--terracotta-pale: #F6E1D9; /* mist = --surface-tint (#FBF3EF) = existing theme.json value — identity */ --wp--preset--color--mist: #FBF3EF; } /* ============================================================================ SUMMER (Jun 21 – Sep 30) Source: birch-theme-tokens.json seasons.summer.tokens Contrast notes: all white-on-brand values pass WCAG AA. ============================================================================ */ [data-season="summer"] { /* ── Raw brand tokens ── */ --brand-primary: #4E7A3D; --brand-primary-hover: #406B33; --brand-deep: #35592C; --brand-gold: #7FA05A; --brand-amber: #96B26A; --brand-tan: #5E7F3C; --brand-highlight: #B9CE8C; --surface-tint: #F1F5EC; --scene-sky-top: #1C2A38; --scene-sky-bottom: #111922; --scene-ground: #241812; /* ── WP preset colour overrides ── */ /* white on #4E7A3D ≈ 5.0:1 — passes AA (small text) */ --wp--preset--color--terracotta: #4E7A3D; /* white on #406B33 ≈ 6.0:1 — passes AA */ --wp--preset--color--terracotta-deep: #406B33; /* #35592C on white ≈ 9.9:1 — passes AA (eyebrows/small labels) */ --wp--preset--color--terracotta-deeper: #35592C; /* --brand-highlight: soft green for badges/accents */ --wp--preset--color--terracotta-soft: #B9CE8C; /* pale tint for backgrounds — --brand-highlight (already very light) */ --wp--preset--color--terracotta-pale: #E8F0D6; /* mist = --surface-tint */ --wp--preset--color--mist: #F1F5EC; } /* ============================================================================ SPRING (May 15 – Jun 20) Source: birch-theme-tokens.json seasons.spring.tokens *** QA REQUIRED: Spring --brand-primary #7EBB41 yields only ~3.4:1 against white — fails AA for small text (links, labels, body). Affected components: .tg-btn--primary, .site-header__cta, inline links, focus rings, eyebrow that use terracotta / terracotta-deep. Small accent text (eyebrows, card tags) routes to terracotta-deeper (#4E7A2E, ~8.5:1) — those pass. Button hover (#6FA33C): ~4.3:1 — marginal, verify at actual rendered sizes. QA should spot-check spring with ?season=spring. *** ============================================================================ */ [data-season="spring"] { /* ── Raw brand tokens ── */ --brand-primary: #7EBB41; --brand-primary-hover: #6FA33C; --brand-deep: #4E7A2E; --brand-gold: #A9C94C; --brand-amber: #C6DE72; --brand-tan: #6FA33C; --brand-highlight: #E6F0A6; --surface-tint: #F4F7EA; --scene-sky-top: #1C2A38; --scene-sky-bottom: #111922; --scene-ground: #241812; /* ── WP preset colour overrides ── */ /* white on #7EBB41 ≈ 3.4:1 — FAILS AA small text; large text / decorative use only */ --wp--preset--color--terracotta: #7EBB41; /* white on #6FA33C ≈ 4.3:1 — marginal; verify at button sizes */ --wp--preset--color--terracotta-deep: #6FA33C; /* #4E7A2E on white ≈ 8.5:1 — passes AA (small labels, eyebrows — correct routing) */ --wp--preset--color--terracotta-deeper: #4E7A2E; /* --brand-highlight: pale lime for badges */ --wp--preset--color--terracotta-soft: #E6F0A6; /* pale tint background */ --wp--preset--color--terracotta-pale: #F2F8E0; /* mist = --surface-tint */ --wp--preset--color--mist: #F4F7EA; } /* ============================================================================ WINTER (Dec 1 – May 14) Source: birch-theme-tokens.json seasons.winter.tokens Contrast notes: all white-on-brand values pass WCAG AA. ============================================================================ */ [data-season="winter"] { /* ── Raw brand tokens ── */ --brand-primary: #4A6480; --brand-primary-hover: #3C5570; --brand-deep: #2A3A4A; --brand-gold: #8FA6BC; --brand-amber: #BEB5A8; --brand-tan: #D3CBBF; --brand-highlight: #E4DDD4; --surface-tint: #EFF2F5; --scene-sky-top: #223142; --scene-sky-bottom: #131C26; --scene-ground: #FFFFFF; /* ── WP preset colour overrides ── */ /* white on #4A6480 ≈ 5.7:1 — passes AA */ --wp--preset--color--terracotta: #4A6480; /* white on #3C5570 ≈ 7.4:1 — passes AA */ --wp--preset--color--terracotta-deep: #3C5570; /* #2A3A4A on white ≈ 12.7:1 — passes AA (same as --ink-soft) */ --wp--preset--color--terracotta-deeper: #2A3A4A; /* --brand-highlight: muted sand for badges */ --wp--preset--color--terracotta-soft: #E4DDD4; /* pale tint background */ --wp--preset--color--terracotta-pale: #EEE9E4; /* mist = --surface-tint */ --wp--preset--color--mist: #EFF2F5; } /* ============================================================================ HEADER LOCKUP SIZE — 420 px desktop / 320 px tablet / 250 px mobile Overrides the 240 px / 190 px values in patterns.css. ============================================================================ */ .tg-brand__lockup { width: 420px; } @media (max-width: 900px) { .tg-brand__lockup { width: 320px; } } @media (max-width: 560px) { .tg-brand__lockup { /* Match the footer lockup (300px). The switcher now lives in the nav overlay (not the header row), so the header is just lockup + hamburger. Cap with min()/calc so it stays 300px where it fits and shrinks on the narrowest phones instead of overflowing (lockup + ~24px hamburger + 48px gutters). */ width: min(300px, calc(100vw - 84px)); } } /* ============================================================================ FOOTER LOCKUP SIZE Footer lockup sits on the dark footer background. ============================================================================ */ .tg-brand__lockup--footer { width: 300px; opacity: 0.92; /* slight softening against near-black background */ } /* Footer brand link reset — no underline, aligns with footer design */ .tg-brand--footer { display: inline-block; line-height: 1; text-decoration: none; } /* ========================================================================== HERO ACCENT — per-season legibility override The hero H1 accent defaults to var(--wp--preset--color--terracotta) (the season primary). Autumn (#DB5537) and spring (#7EBB41) read fine on the dark hero photo. Summer (#4E7A3D) and winter (#4A6480) primaries are too dark — override those two to the lighter --brand-gold token per palette. Both clear WCAG AA large-text on the ink-scrimmed hero and stay distinct from the white H1. ========================================================================== */ [data-season="summer"] .tg-hero__accent { color: #7FA05A; /* summer --brand-gold; ~7.2:1 on #16202D */ } [data-season="winter"] .tg-hero__accent { color: #8FA6BC; /* winter --brand-gold; ~8.1:1 on #16202D */ } /* ========================================================================== SEASON SWITCHER — mobile placement (into the nav overlay) The compact header can't fit logo + hamburger + switcher on a phone, so the header instance is hidden below the nav breakpoint and season-switcher.js clones the control into the core Navigation overlay (a WHITE panel), tagged .tg-season-switcher--overlay. The clone is restyled here for a light bg (the base switcher is styled light-on-dark for the ink header). ========================================================================== */ /* Hide the header instance on mobile — kills the header overflow. The overlay clone (added by JS, lives inside .wp-block-navigation__responsive-container) is excluded so it is unaffected. */ @media (max-width: 600px) { .site-header .tg-season-switcher:not(.tg-season-switcher--overlay) { display: none !important; /* beats the switcher wrapper's inline display:flex */ } } /* The overlay clone must appear ONLY inside the real mobile overlay. With overlayMenu:"mobile" the core responsive container renders INLINE on desktop (it is not hidden), so without this the clone shows as a broken second switcher in the desktop nav row. Hide it above the mobile breakpoint. */ @media (min-width: 601px) { .tg-season-switcher--overlay { display: none !important; } } /* Overlay clone — layout inside the dark-ink overlay panel. The switcher's base colours are already light-on-dark (from inc/seasonal.php), so we keep those and only set layout + a light divider. */ .tg-season-switcher--overlay { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(212, 220, 228, 0.14); } /* Eyebrow "Season" label — the inline light colour is correct on the ink panel; just clear the header's bottom-margin quirk. */ .tg-season-switcher--overlay [aria-hidden="true"] { margin-bottom: 0 !important; }