/* ===================================================================== seasonal.css — modular seasonal theming layer --------------------------------------------------------------------- Nothing in this file renders unless a data-season attribute is present on . That attribute is set in js/custom.js (auto by month, with a manual override), so this file is safe to leave linked all year round. Each season is a self-contained block scoped under html[data-season="…"]. To add a future season (e.g. candy-cane for December): 1. Copy the PRIDE palette block, rename the scope + recolour the vars. 2. Add any season-specific extras (copy the Tier blocks as needed). 3. Map its month in js/custom.js → seasonForDate(). To disable everything immediately: set OVERRIDE = '' in js/custom.js. ===================================================================== */ /* ───────────────────────────────────────────────────────────────────── PRIDE · June · Progress Pride palette ───────────────────────────────────────────────────────────────────── */ html[data-season="pride"] { --season-stripe-1: #e40303; /* red */ --season-stripe-2: #ff8c00; /* orange */ --season-stripe-3: #ffed00; /* yellow */ --season-stripe-4: #008026; /* green */ --season-stripe-5: #004dff; /* blue */ --season-stripe-6: #750787; /* violet */ /* Single solid accent — ::selection cannot take a gradient. */ --season-selection: #750787; /* Reusable left-to-right rainbow. */ --season-rainbow: linear-gradient( 90deg, var(--season-stripe-1) 0%, var(--season-stripe-2) 20%, var(--season-stripe-3) 40%, var(--season-stripe-4) 60%, var(--season-stripe-5) 80%, var(--season-stripe-6) 100% ); } /* ===================================================================== The rules below are season-agnostic: they consume the --season-* variables, so every season block above gets them for free. ===================================================================== */ /* ── Tier 1A · top hairline ────────────────────────────────────────── A 3px flag ribbon pinned to the very top edge of every page. */ html[data-season] body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; pointer-events: none; background: var(--season-rainbow); } /* ── Tier 1B · text selection ──────────────────────────────────────── ::selection only accepts a solid colour (gradients aren't supported), so the usual brand-red highlight becomes a season hue for the month. */ html[data-season] ::selection { background: var(--season-selection); color: #fff; } html[data-season] ::-moz-selection { background: var(--season-selection); color: #fff; } /* ───────────────────────────────────────────────────────────────────── PRIDE-only extras (selectors specific to this season's content hooks) ───────────────────────────────────────────────────────────────────── */ /* Registered so the feathered reveal (Tier 1C) can interpolate a % stop. Unsupported browsers ignore the registration and skip the animation. */ @property --reveal { syntax: ""; inherits: false; initial-value: 0%; } /* ── Tier 1C · hero subtitle "permanent selection" highlight ────────── The final subtitle line of each homepage hero slide gets a rainbow highlight sized like a text selection — echoing the brand-red ::selection a visitor would see if they highlighted the line. The highlight lives on a ::before layer rather than the

background, so it can reveal on its own without touching the letters. Porto's animated-letters plugin empties the

, then injects the letter spans after a delay; gating the reveal on .initialized + the element being non-empty keeps the band hidden until the letters exist, so the feathered sweep travels in *with* the text instead of popping in thin and jumping wide beforehand. */ html[data-season="pride"] .owl-carousel-light p[data-plugin-animated-letters] { position: relative; isolation: isolate; /* contain ::before so z-index:-1 stays local */ width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; opacity: 1 !important; /* override Porto's .opacity-7 */ padding: 0.08em 0.34em; border-radius: 0.18em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } html[data-season="pride"] .owl-carousel-light p[data-plugin-animated-letters]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.18em; /* Subtle dark wash keeps white text legible across the yellow stripe. */ background-image: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .18)), var(--season-rainbow); /* Feathered left→right reveal: a soft-edged mask whose front (--reveal) sweeps across the band on the same axis as the letters' staggered fade. --reveal anchors the *transparent* (leading) stop and the opaque stop trails 14% behind it, so at --reveal:0% the whole feather sits off the left edge and the band is fully hidden — no stray sliver of the first colour. The 14% is the width of the soft edge; widen it for a gentler feather. --reveal is a registered @property (above) so it can interpolate; where @property is unsupported the band simply appears un-animated. Nudge the 1.3s if a longer slide outruns it. */ --reveal: 0%; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--reveal) - 14%), transparent var(--reveal)); mask-image: linear-gradient(90deg, #000 calc(var(--reveal) - 14%), transparent var(--reveal)); transition: --reveal 1.3s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Reveal only once the plugin has injected the letters. */ html[data-season="pride"] .owl-carousel-light p[data-plugin-animated-letters].initialized:not(:empty)::before { --reveal: 114%; } @media (prefers-reduced-motion: reduce) { html[data-season="pride"] .owl-carousel-light p[data-plugin-animated-letters]::before { transition: none; } }