/* ========================================================================== seasons.css — four skins, selected by [data-season] on . Every value here is a custom property so the whole site re-skins at once. The blurred "bokeh" look is built from stacked radial-gradients; nothing here is an image file. ========================================================================== */ /* ---------------------------------------------------------------- WINTER -- */ html[data-season="winter"] { --season-bg-flat:#dde3ef; --season-theme: #26456b; /* mirrored in THEME_COLOR in js/season.js */ --season-plaque-shadow: rgba(40,60,95,.35); --season-wash: radial-gradient(52% 40% at 22% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 68%), radial-gradient(46% 36% at 78% 20%, rgba(214,224,242,.95), rgba(214,224,242,0) 70%), radial-gradient(58% 44% at 62% 66%, rgba(190,203,228,.85), rgba(190,203,228,0) 72%), radial-gradient(48% 40% at 18% 78%, rgba(232,238,249,.95), rgba(232,238,249,0) 70%), linear-gradient(168deg, #eef1f7 0%, #d3dbec 55%, #f4f6fa 100%); } /* ---------------------------------------------------------------- SPRING -- */ html[data-season="spring"] { --season-bg-flat:#e2e9c8; --season-theme: #4f6a3a; --season-plaque-shadow: rgba(70,88,45,.32); --season-wash: radial-gradient(50% 38% at 26% 24%, rgba(238,244,206,.95), rgba(238,244,206,0) 68%), radial-gradient(44% 34% at 74% 22%, rgba(206,222,158,.9), rgba(206,222,158,0) 70%), radial-gradient(56% 44% at 58% 68%, rgba(190,209,148,.85), rgba(190,209,148,0) 72%), radial-gradient(46% 38% at 16% 80%, rgba(233,240,205,.95), rgba(233,240,205,0) 70%), linear-gradient(168deg, #f0f4dc 0%, #ccd9a4 55%, #eef3dd 100%); } /* ---------------------------------------------------------------- SUMMER -- */ html[data-season="summer"] { --season-bg-flat:#bfe1f6; --season-theme: #1f5f8b; --season-plaque-shadow: rgba(25,70,105,.32); --season-wash: radial-gradient(52% 40% at 24% 22%, rgba(240,250,255,.95), rgba(240,250,255,0) 68%), radial-gradient(46% 36% at 76% 26%, rgba(160,214,244,.9), rgba(160,214,244,0) 70%), radial-gradient(58% 46% at 60% 70%, rgba(133,197,236,.85), rgba(133,197,236,0) 72%), radial-gradient(44% 36% at 14% 76%, rgba(214,238,252,.95), rgba(214,238,252,0) 70%), linear-gradient(168deg, #cfeafb 0%, #8fc9ea 52%, #e6f5fd 100%); } /* ------------------------------------------------------------------ FALL -- */ html[data-season="fall"] { --season-bg-flat:#dfa25c; --season-theme: #8a4a1e; --season-plaque-shadow: rgba(96,52,20,.35); --season-wash: radial-gradient(50% 38% at 26% 26%, rgba(233,167,98,.95), rgba(233,167,98,0) 68%), radial-gradient(46% 36% at 76% 20%, rgba(196,112,58,.9), rgba(196,112,58,0) 70%), radial-gradient(58% 46% at 58% 66%, rgba(226,151,72,.9), rgba(226,151,72,0) 72%), radial-gradient(48% 40% at 16% 82%, rgba(242,196,116,.95), rgba(242,196,116,0) 70%), linear-gradient(168deg, #d98b45 0%, #c9722f 46%, #eeb463 100%); } /* Fall is the one skin dark enough to need lighter body copy in places. */ html[data-season="fall"] .card { background: rgba(255,250,240,.78); } html[data-season="fall"] .sitefoot { color: #67381a; } /* -------------------------------------------------------------------------- Slow drift on the wash so the background is never quite static. Disabled automatically by the reduced-motion rule in site.css. -------------------------------------------------------------------------- */ #backdrop { background-size: 140% 140%, 130% 130%, 150% 150%, 135% 135%, 100% 100%; background-position: 20% 25%, 78% 20%, 60% 68%, 16% 80%, 0 0; animation: drift 48s ease-in-out infinite alternate; } @keyframes drift { from { background-position: 20% 25%, 78% 20%, 60% 68%, 16% 80%, 0 0; } to { background-position: 30% 18%, 68% 30%, 52% 60%, 26% 72%, 0 0; } } /* -------------------------------------------------------------------------- js/season.js rewrites from --season-theme, so the browser chrome shifts with the skin. Ease the top bar to match. -------------------------------------------------------------------------- */ .topbar { transition: background 900ms var(--ease); } /* -------------------------------------------------------------------------- Cross-fade helper. season.js adds .is-swapping for one frame so the backdrop repaint reads as a dissolve rather than a snap. -------------------------------------------------------------------------- */ html.is-swapping #backdrop { transition: background 900ms var(--ease); }