/* ============================================================ HOLIDAY THEMES Seasonal, opt-in accents applied site-wide. site.js sets only when the visitor has enabled holiday themes in /settings AND the theme is in season (see the HOLIDAY_THEMES registry in site.js). Without that attribute none of these rules apply, so the default look is untouched. To add a theme: register it in site.js, then add one small block at the bottom that declares this theme's palette via two custom properties. The shared rules below do the rest: --accent-solid / -dark / -light the flat fallback hue, used everywhere the site reads its rationed accent token (links, borders, selection, tool-local CSS, the game) with no edits. --accent-gradient a gradient applied to the few marquee accents (hero emphasis, tool-card CTA, read-more). ============================================================ */ /* ── Shared: any active theme wires its palette into the site ──── The site rations color to one accent (the --green family, which the --blue aliases also point at). Repointing those tokens flips every accent to the theme's flat hue site-wide. */ :root[data-theme] { --green: var(--accent-solid); --green-dark: var(--accent-solid-dark); --green-light: var(--accent-solid-light); --blue: var(--green); --blue-dark: var(--green-dark); --blue-light: var(--green-light); } /* The prominent shared accents take the gradient. Where the accent is type, the gradient is clipped to the text; where it is a rule, it is applied via border-image (only sides with width render, so each underline stays a single line). */ :root[data-theme] .hero h1 em, :root[data-theme] .tool-card-cta, :root[data-theme] .read-more:hover { background-image: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } :root[data-theme] .tool-card-cta, :root[data-theme] .read-more:hover { border-image: var(--accent-gradient) 1; } /* ── GAY PRIDE (June) ──────────────────────────────────────────── */ :root[data-theme="pride"] { --accent-solid: #8b1f8f; --accent-solid-dark: #5a045f; --accent-solid-light: #f3e7f4; --accent-gradient: linear-gradient( 90deg, #e40303 0%, #ff8c00 20%, #f5c518 40%, #008026 60%, #004dff 80%, #750787 100% ); } /* ── BISEXUAL PRIDE (Sep 23) ───────────────────────────────────── */ /* Bi flag: magenta, purple, royal blue. */ :root[data-theme="bisexual"] { --accent-solid: #9b4f96; --accent-solid-dark: #6d3669; --accent-solid-light: #f3e9f1; --accent-gradient: linear-gradient( 90deg, #d60270 0%, #9b4f96 50%, #0038a8 100% ); } /* ── JUNETEENTH (Jun 19) ───────────────────────────────────────── */ /* Black is the flat accent across the site; the marquee gradient is the flag's red, green, and gold (no black). Falls on a single day, so it overrides the month-long Pride theme on June 19. */ :root[data-theme="juneteenth"] { --accent-solid: #1a1a1a; --accent-solid-dark: #000000; --accent-solid-light: #eceae4; --accent-gradient: linear-gradient( 90deg, #e31b23 0%, #009639 50%, #ffd200 100% ); } /* ── CHRISTMAS (Dec 25) ────────────────────────────────────────── */ /* Crisp two-tone red and green (hard stop avoids a muddy middle). */ :root[data-theme="christmas"] { --accent-solid: #1a7f3c; --accent-solid-dark: #115a2a; --accent-solid-light: #e7f3eb; --accent-gradient: linear-gradient( 90deg, #c8102e 0%, #c8102e 48%, #1a7f3c 52%, #1a7f3c 100% ); } /* ── HANUKKAH (per-year date ranges) ───────────────────────────── */ /* Blue and white. Pure white reads as nothing on the cream page, so the "white" band is an icy near-white blue that stays legible. */ :root[data-theme="hanukkah"] { --accent-solid: #0038b8; --accent-solid-dark: #002a8c; --accent-solid-light: #e6ecfa; --accent-gradient: linear-gradient( 90deg, #0038b8 0%, #0038b8 32%, #bcd4ff 50%, #0038b8 68%, #0038b8 100% ); }