/* Seasonal themes, shared by every page. The server's calendar (/api/config → season.theme) puts season- on ; season.js adds the drifting flair (leaves, snow, petals, sun motes). Each theme re-tints the whole light palette — page ground, panels, ink, lines, accent, glow — so the site reads as the season, not just its buttons. Layout and components stay put. No class (config unavailable) leaves the year-round purple. index.html layers its own hero-backdrop washes on top of --bg. Dark mode (the labs, FAQ, Discover honor prefers-color-scheme) keeps its dark ground and takes only the season's accent. */ /* ---- palettes (light) ---- */ html.season-fall { --bg: #f9f2e8; --panel: #fffaf3; --ink: #2b1a10; --muted: #7d6553; --line: #ebdfd0; --line-strong: #9c8466; --accent: #c2540a; --accent-600: #a34305; --accent-soft: #fbe7d5; --accent-2: #d9a441; /* gradient partner: amber */ --accent-glow: rgba(194,84,10,.30); --accent-rgb: 194,84,10; --accent-400: #e07a1f; --good: #5f8a2e; --good-soft: #eef4e3; --shadow-sm: 0 1px 2px rgba(60,30,10,.07), 0 1px 3px rgba(60,30,10,.09); --shadow-md: 0 8px 24px rgba(60,30,10,.10); } html.season-winter { --bg: #f1f5fb; --panel: #ffffff; --ink: #0f1b30; --muted: #5f6f8d; --line: #dde5f1; --line-strong: #7d8db0; --accent: #2563eb; --accent-600: #1d4ed8; --accent-soft: #e6eefe; --accent-2: #22b8cf; /* gradient partner: ice */ --accent-glow: rgba(37,99,235,.30); --accent-rgb: 37,99,235; --accent-400: #60a5fa; --shadow-sm: 0 1px 2px rgba(15,27,48,.07), 0 1px 3px rgba(15,27,48,.09); --shadow-md: 0 8px 24px rgba(15,27,48,.10); } html.season-spring { --bg: #f3faf3; --panel: #ffffff; --ink: #14261a; --muted: #5e7a66; --line: #dbeadf; --line-strong: #6f8e79; --accent: #0f7a3a; --accent-600: #0f7a3a; --accent-soft: #e4f6ea; --accent-2: #e0609a; /* gradient partner: blossom */ --accent-glow: rgba(21,148,71,.30); --accent-rgb: 21,148,71; --accent-400: #4ade80; --shadow-sm: 0 1px 2px rgba(20,38,26,.07), 0 1px 3px rgba(20,38,26,.09); --shadow-md: 0 8px 24px rgba(20,38,26,.10); } html.season-summer { --bg: #f2fafb; --panel: #ffffff; --ink: #0e2430; --muted: #55737f; --line: #d7eaee; --line-strong: #698f98; --accent: #0a7682; --accent-600: #0a7682; --accent-soft: #e0f4f6; --accent-2: #f2a93b; /* gradient partner: sun */ --accent-glow: rgba(14,143,156,.30); --accent-rgb: 14,143,156; --accent-400: #2dd4bf; --shadow-sm: 0 1px 2px rgba(14,36,48,.07), 0 1px 3px rgba(14,36,48,.09); --shadow-md: 0 8px 24px rgba(14,36,48,.10); } /* Dark mode: keep the dark ground; take the season's accent only. */ @media (prefers-color-scheme: dark) { html.season-fall, html.season-winter, html.season-spring, html.season-summer { --bg: #0e1018; --panel: #161a26; --ink: #eef1f8; --muted: #9aa2bd; --line: #232838; --line-strong: #313850; --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.4); } /* Dark panels: the 600 shade used for links (#a34305 on #161a26 = 2.8:1) fails AA — links take the base accent instead. */ html.season-fall { --accent-soft: #3a2415; --good-soft: #1f2a16; --accent-600: var(--accent); } html.season-winter { --accent-soft: #172346; --accent-600: var(--accent); } html.season-spring { --accent-soft: #14301f; --accent-600: var(--accent); } html.season-summer { --accent-soft: #10303a; --accent-600: var(--accent); } } /* ---- brand gradients other pages still hard-code (index.html is tokenized) ---- */ /* The gradient's END must itself pass 3:1 on the page ground — --accent-2 is a glow/badge tint (fall #d9a441 measured 2.0:1 on the headline, 2026-09-12). */ html[class*="season-"] h1 .grad, html[class*="season-"] .wordmark .dot { background: linear-gradient(90deg, var(--accent), var(--accent-600)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[class*="season-"] header { background: color-mix(in srgb, var(--panel) 80%, transparent); } /* ---- flair layer (season.js) ---- Fixed, non-interactive, confined to the upper part of the viewport and faded out toward the bottom. A SINGLE short pass on arrival (season.js removes the layer afterwards) — never a looping animation. */ .season-flair { position: fixed; inset: 0 0 auto 0; height: 62vh; pointer-events: none; z-index: 5; overflow: hidden; /* the hero copy sits above it (z-index 6): leaves never cross the headline */ -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); } @media (max-width: 720px) { .season-flair { display: none; } } /* phones: the headline owns the top of the screen */ @media (min-width: 900px) { .season-flair { left: 50%; } } /* desktop: the image column only — never over the headline */ .season-flair svg { position: absolute; top: -8vh; width: var(--sz, 22px); height: var(--sz, 22px); left: var(--x, 50%); opacity: 0; will-change: transform, opacity; animation: season-drift var(--dur, 8s) ease-out var(--delay, 0s) 1 forwards; } .season-flair.snow svg { animation-name: season-snow; } .season-flair.summer svg { animation-name: season-float; } @keyframes season-drift { /* leaves & petals: tumble down with a sway */ 0% { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; } 8% { opacity: var(--op, .7); } 50% { transform: translate3d(var(--sway, 40px), 34vh, 0) rotate(var(--spin, 200deg)); } 92% { opacity: var(--op, .7); } 100% { transform: translate3d(calc(var(--sway, 40px) * -.6), 72vh, 0) rotate(calc(var(--spin, 200deg) * 2)); opacity: 0; } } @keyframes season-snow { /* snow: slow, gentle wobble, no spin */ 0% { transform: translate3d(0,0,0); opacity: 0; } 10% { opacity: var(--op, .8); } 50% { transform: translate3d(var(--sway, 20px), 36vh, 0); } 90% { opacity: var(--op, .8); } 100% { transform: translate3d(calc(var(--sway, 20px) * -1), 72vh, 0); opacity: 0; } } @keyframes season-float { /* summer motes: rise and fade like warm air */ 0% { transform: translate3d(0, 60vh, 0) scale(.6); opacity: 0; } 15% { opacity: var(--op, .5); } 85% { opacity: var(--op, .5); } 100% { transform: translate3d(var(--sway, 30px), 0, 0) scale(1.1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .season-flair { display: none; } } @media (max-width: 640px) { .season-flair { height: 44vh; } .season-flair svg { width: calc(var(--sz, 22px) * .75); height: calc(var(--sz, 22px) * .75); } }