/* ═══════════════════════════════════════════════════════════════════════════ BISHOP SYSTEMS SEASON KIT One stylesheet, one script, the whole year. Pairs with season.js. season.js stamps `data-season=""` and `data-season-q="q1".."q4"` on from the VISITOR'S clock. Every rule below hangs off those, so a site installed once dresses and undresses itself through all four quarters with no redeploy and nothing for anyone to remember to switch off. INSTALL (once per site, then never again) 1. In , BEFORE the site's own stylesheets: Blocking, not deferred — a deferred script runs after first paint and every load flashes the base palette before flipping. External, not inline — a site sending `script-src 'self'` with no nonce drops an inline script SILENTLY, which works locally and dies in production. 2. Link this stylesheet LAST, after the site's own CSS. 3. Optional ornaments, inside the hero:

...

Add `season-drift--night` on a DARK hero. Add `season-mark--right` to move the figure to the other corner. Both are `display: none` outside a season, so the markup is inert and costs one unmatched selector. 4. Optional: `class="season-glow"` on ONE element, usually the primary CTA, for a warm seasonal rim. WHAT IT DOES NOT DO, ON PURPOSE It never repaints the client's brand. Buttons, links, accent and text colour stay theirs. A customer who learned that green means "book now" in September must not have to relearn it in October, and a body shop is not improved by its logo turning purple. This is an atmosphere layer over the site plus two opt-in ornaments, not a reskin of it. WHY THE ORNAMENTS ARE REAL ELEMENTS AND NOT `::before`/`::after` Because a hero that already uses its own pseudo-elements for a scrim, a grain overlay or a diagonal stripe is the norm, not the exception, and silently losing to one is a bad failure mode to debug at 11pm. WHY THE ATMOSPHERE LAYER IS NOT ENOUGH ON ITS OWN The fog is a `body::before` at z-index 0. That reads on a site whose sections are transparent over the body, and is INVISIBLE on the more common case — opaque cards on an opaque page — where it paints and is immediately covered. Raising it above the content was tried on prscares.com and rejected: a full-viewport scrim dims the nav and the pricing cards. Hence the scoped ornaments, placed in the one surface people actually look at. ═══════════════════════════════════════════════════════════════════════════ */ /* Defaults. Each season overrides --sn-a and --sn-b below; a client whose brand fights one of them can override either on their own :root without forking this file. --sn-intensity scales the whole atmosphere: drop it to 0.5 on a very light site if the fog reads as a smudge rather than as light. */ [data-season] { --sn-a: #8B5CF6; --sn-b: #F59E0B; --sn-intensity: 1; } /* ── The atmosphere ──────────────────────────────────────────────────────── One fixed layer painted behind everything: the season's colour blooming from the bottom corners, its warm accent from above, like light from just out of frame. `position: fixed` + `pointer-events: none` are what make this safe to drop onto a site nobody has read. It cannot shift a single element's layout, cannot trap a click, and cannot break a sticky header. One composited layer; it costs nothing to scroll. */ :root[data-season] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 70% at 6% 106%, color-mix(in oklch, var(--sn-a) calc(15% * var(--sn-intensity)), transparent), transparent 62%), radial-gradient(112% 62% at 97% 102%, color-mix(in oklch, var(--sn-a) calc(11% * var(--sn-intensity)), transparent), transparent 58%), radial-gradient(92% 44% at 50% -10%, color-mix(in oklch, var(--sn-b) calc(9% * var(--sn-intensity)), transparent), transparent 60%); } /* ── Ornament scaffolding ────────────────────────────────────────────────── `season-stage` gives the hero a positioning context and clips the ornaments to it. Only applied in season, so it cannot change layout the rest of the year — which matters, because `overflow: hidden` on a hero that relies on something overflowing would be a real regression in March. */ [data-season] .season-stage { position: relative; overflow: hidden; } .season-drift, .season-mark { display: none; } [data-season] .season-drift { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .62; background-repeat: no-repeat; /* SIZING is fluid, not fixed px. At a fixed 84px the lead figure was a third the width of a 360px phone and a speck on a 2560px monitor. The clamps hold it between "still legible" and "still decoration" at both ends. Three sizes rather than three copies of one, because the size difference is what reads as distance instead of as a row of stickers. */ background-size: clamp(44px, 5.2vw, 96px) auto, clamp(28px, 3.2vw, 58px) auto, clamp(18px, 2.1vw, 38px) auto; /* PLACEMENT is the whole top-right band, and nothing else. Two rules, both learned by shipping the wrong thing first: Vertically, everything stays above ~17%. A figure at 24-34% flies straight through hero headings and form labels — seen on Carvvy, El Paso Roofing and NuGen, where the old third position at 31% crossed the headline. Horizontally, nothing left of ~58%. Effectively every hero in the book puts its headline, its lede and its CTA in the left column, so the left half is never free. The right half is sky, photograph or empty — which is where things that fly belong anyway. */ background-position: 61% 7%, 80% 15%, 93% 5%; } /* For a hero whose form, card or art sits on the RIGHT, mirror the band to the left. Same vertical constraint; only the axis flips. */ [data-season] .season-drift--mirror { background-position: 39% 7%, 20% 15%, 7% 5%; } /* Full-width spread, for a hero with a centred headline and nothing in either upper corner. Still entirely inside the top band. */ [data-season] .season-drift--wide { background-position: 8% 6%, 50% 13%, 91% 5%; } [data-season] .season-mark { display: block; position: absolute; /* Bottom LEFT by default. Bottom right is the obvious choice and it is wrong: a GHL chat bubble docks there on almost every site in the book, and a tall hero form reaches it on the rest. Two people building this independently both started right and both ended up left. Left is not free either — it is where the CTA row lands — so the figure is lifted clear of it rather than tucked into the corner. See `bottom` below. */ left: clamp(12px, 3vw, 44px); /* Lifted above the CTA/trust row that sits in this corner on most heroes. A figure at 10px from the bottom sat behind Tipsy Tiger's stats panel and under Nanea's scroll cue; at ~9% up it clears both and still reads as resting on the floor of the hero rather than floating in it. */ bottom: clamp(18px, 9%, 96px); z-index: 1; /* Fluid, like the drift. Slightly larger than the lead drift figure because this is the focal ornament, not atmosphere. */ width: clamp(52px, 7vw, 108px); aspect-ratio: 1; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; } /* Opt in to the right corner only after checking that corner on the real page: no chat bubble, no form, nothing the hero's own art puts there. */ [data-season] .season-mark--right { left: auto; right: clamp(12px, 3vw, 44px); } /* ── Optional rim on ONE element ─────────────────────────────────────────── Opt-in per element on purpose: applied to every button it is a costume, applied to one it is a highlight. */ [data-season] .season-glow { box-shadow: 0 0 0 1px color-mix(in oklch, var(--sn-b) 40%, transparent), 0 0 28px -6px color-mix(in oklch, var(--sn-b) 55%, transparent); } /* ── Phones ──────────────────────────────────────────────────────────────── Two things change below 640px and both are measured, not assumed. The MARK comes off. A phone hero is a headline and a full-width button, and the button owns the bottom of it — a corner figure at 52px overlaps the CTA no matter which corner it picks. Verified against a 390px hero with a stacked full-width button: it collides. The season still reads from the drift, which lives in the top band where nothing else does. The DRIFT spreads to full width. A stacked hero has no left copy column and no right-hand art, so the reason for hugging the right edge is gone; keeping the desktop positions clusters all three figures into one corner. */ @media (max-width: 640px) { [data-season] .season-mark { display: none; } [data-season] .season-drift, [data-season] .season-drift--mirror, [data-season] .season-drift--wide { background-position: 12% 6%, 52% 13%, 88% 5%; } } /* ── Contrast ────────────────────────────────────────────────────────────── A silhouette only works against a background it contrasts with, and a hero is rarely one thing: PRS is navy until a daylight beach video loads, Paintball is a dark copy column beside a sunlit aerial, Smart Tire is black beside a bright photograph. Picking one variant and hoping was wrong on three sites out of nine, and the failure is total — the figure is simply not there. So every figure carries a rim in the opposite direction to its own fill. Dark figures get a light halo, pale figures get a dark edge. It costs one filter, it is the same on every season, and it removes the question. */ [data-season] .season-drift { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .5)); } [data-season] .season-drift--night { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); } /* The mark keeps its candle glow, with the same rim underneath it. Declared here rather than in the base rule so the animation below has one thing to override instead of two. */ [data-season] .season-mark { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .3)) drop-shadow(0 0 18px color-mix(in oklch, var(--sn-b) 45%, transparent)); } /* ── Motion ──────────────────────────────────────────────────────────────── Transform and filter only, so everything stays on the compositor. Opt-in twice: the ornament has to be on the page, and the visitor must not have asked for less motion. */ @media (prefers-reduced-motion: no-preference) { [data-season] .season-drift { animation: sn-drift 24s ease-in-out infinite alternate; } [data-season] .season-mark { animation: sn-flicker 5.5s ease-in-out infinite; } [data-season] .season-glow { animation: sn-rim 4.5s ease-in-out infinite; } @keyframes sn-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(2.6%, -1.8%, 0); } } /* Uneven stops on purpose: a candle gutters, it does not pulse on a metronome, and a symmetric ease reads as a notification badge. */ /* Each stop restates the white rim as well as the glow. A keyframe replaces the whole `filter` value, so listing only the glow here would switch the contrast rim off for the entire animation — which is to say, always. */ @keyframes sn-flicker { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .3)) drop-shadow(0 0 18px color-mix(in oklch, var(--sn-b) 45%, transparent)); } 41% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .3)) drop-shadow(0 0 27px color-mix(in oklch, var(--sn-b) 66%, transparent)); } 63% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .3)) drop-shadow(0 0 15px color-mix(in oklch, var(--sn-b) 38%, transparent)); } } @keyframes sn-rim { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in oklch, var(--sn-b) 40%, transparent), 0 0 28px -6px color-mix(in oklch, var(--sn-b) 55%, transparent); } 48% { box-shadow: 0 0 0 1px color-mix(in oklch, var(--sn-b) 52%, transparent), 0 0 38px -4px color-mix(in oklch, var(--sn-b) 68%, transparent); } } } /* Print gets none of it. A quoted estimate or an invoice printed from the site should not arrive with a seasonal wash across it. */ @media print { :root[data-season] body::before, [data-season] .season-drift, [data-season] .season-mark { display: none; } [data-season] .season-glow { box-shadow: none; animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ PER-SEASON PALETTE + ART Two custom properties and two images per season. Adding a season means adding one block here and one row to the WINDOWS table in season.js. ═══════════════════════════════════════════════════════════════════════════ */ /* New Year · Dec 27 - Jan 6 */ [data-season="newyear"] { --sn-a: #3B4FD8; --sn-b: #E9C46A; } [data-season="newyear"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="newyear"] .season-mark { background-image: url("data:image/svg+xml,"); } /* Deep winter · Jan 7 - Jan 31 */ [data-season="winter"] { --sn-a: #6E96C4; --sn-b: #DCE9F5; } [data-season="winter"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="winter"] .season-mark { background-image: url("data:image/svg+xml,"); } /* Valentine's · Feb 1 - Feb 14 */ [data-season="valentines"] { --sn-a: #D64A6E; --sn-b: #F2A0B5; } [data-season="valentines"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="valentines"] .season-mark { background-image: url("data:image/svg+xml,"); } /* Late winter · Feb 15 - Feb 29 */ [data-season="latewinter"] { --sn-a: #6E96C4; --sn-b: #DCE9F5; } [data-season="latewinter"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="latewinter"] .season-mark { background-image: url("data:image/svg+xml,"); } /* Spring · Mar 1 - May 31 */ [data-season="spring"] { --sn-a: #58A65C; --sn-b: #F2A7C3; } [data-season="spring"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="spring"] .season-mark { background-image: url("data:image/svg+xml,"); } /* Summer · Jun 1 - Aug 20 */ [data-season="summer"] { --sn-a: #2FA8C9; --sn-b: #F5B83D; } [data-season="summer"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="summer"] .season-mark { background-image: url("data:image/svg+xml,"); } /* Late summer / back to school · Aug 21 - Sep 24 */ [data-season="harvest"] { --sn-a: #C77A2B; --sn-b: #E0A93C; } [data-season="harvest"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="harvest"] .season-mark { background-image: url("data:image/svg+xml,"); } /* Halloween · Sep 25 - Oct 31 */ [data-season="halloween"] { --sn-a: #8B5CF6; --sn-b: #F59E0B; } [data-season="halloween"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="halloween"] .season-mark { background-image: url("data:image/svg+xml,"); } [data-season="halloween"] .season-drift { opacity: .5; } /* Dark hero: the silhouette has to flip or it vanishes into the night. */ [data-season="halloween"] .season-drift--night { opacity: .34; background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } /* Thanksgiving · Nov 1 - Nov 30 */ [data-season="thanksgiving"] { --sn-a: #A8562B; --sn-b: #D99B3C; } [data-season="thanksgiving"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="thanksgiving"] .season-mark { background-image: url("data:image/svg+xml,"); } /* Christmas · Dec 1 - Dec 26 */ [data-season="christmas"] { --sn-a: #1E6E3C; --sn-b: #C6303A; } [data-season="christmas"] .season-drift { background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); } [data-season="christmas"] .season-mark { background-image: url("data:image/svg+xml,"); }