/* ============================================ FLATERO — Sesongtemaer (Sesongmotor v3) Applied by js/season-theme.js via data-season="" on . HARD RULES (owner-approved, SESONG-OG-STEMPLING-PLAN.md §A): - The main CTA color variable is NEVER touched — it is the conversion engine. This file defines and uses only --season-*. - Season color appears ONLY on: topbar background tint, eyebrow/badge accents, section divider accents, footer top-border. Never body text, never headings, never form controls. - All 12 palettes are hand-picked and WCAG-AA-verified in backend/tests/seasonCalendar.test.js (accentText on accentSoft >= 4.5:1). - v3: blackfriday removed. Effects run on ALL pages, full height in the empty side gutters, dimmed + top-band-only over the content column — animations must NEVER obscure text (owner rule). ============================================ */ /* ---------- Per-kind palette variables ---------- */ html[data-season="spring"] { --season-accent:#477e57; --season-soft:#e7f3ea; --season-text:#1f4d33; } html[data-season="summer"] { --season-accent:#a16207; --season-soft:#fef3c7; --season-text:#713f12; } html[data-season="autumn"] { --season-accent:#c2410c; --season-soft:#ffedd5; --season-text:#7c2d12; } html[data-season="winter"] { --season-accent:#0369a1; --season-soft:#e0f2fe; --season-text:#075985; } html[data-season="easter"] { --season-accent:#be185d; --season-soft:#fce7f3; --season-text:#831843; } html[data-season="may17"] { --season-accent:#ba0c2f; --season-soft:#fdecec; --season-text:#7f1d1d; } html[data-season="sankthans"] { --season-accent:#b45309; --season-soft:#fef3c7; --season-text:#78350f; } html[data-season="halloween"] { --season-accent:#9a3412; --season-soft:#fed7aa; --season-text:#431407; } html[data-season="advent"] { --season-accent:#4338ca; --season-soft:#e0e7ff; --season-text:#312e81; } html[data-season="christmas"] { --season-accent:#166534; --season-soft:#dcfce7; --season-text:#14532d; } html[data-season="newyear"] { --season-accent:#92400e; --season-soft:#fef9c3; --season-text:#713f12; } html[data-season="valentine"] { --season-accent:#e11d48; --season-soft:#ffe4e6; --season-text:#881337; } /* ---------- Application (only when a season is active) ---------- */ /* 1. Topbar: subtle background tint toward the season accent. color-mix keeps the dark navy dominant (readability of white text preserved); browsers without color-mix simply keep the base color. */ html[data-season] .topbar { background: color-mix(in srgb, var(--ink-900) 84%, var(--season-accent) 16%); } /* 2. Eyebrow/badge accents: the small dash before eyebrows + the mono "num" chip pick up the season color. Text stays AA (dark 800/900-level values on white/soft backgrounds). Ink (dark) sections keep their own white-on-dark styling — explicitly restored below. */ html[data-season] .eyebrow::before { background: var(--season-accent); } html[data-season] .eyebrow .num { color: var(--season-text); } html[data-season] .section--ink .eyebrow::before { background: rgba(255, 255, 255, 0.3); } html[data-season] .section--ink .eyebrow .num { color: rgba(255, 255, 255, 0.8); } /* 3. Section divider accents: the thin rule blends slightly toward the accent — a whisper, not a stripe. */ html[data-season] hr.rule { background: color-mix(in srgb, var(--line) 65%, var(--season-accent) 35%); } /* 4. Footer: a slim season-colored top border above the dark footer. */ html[data-season] .footer { border-top: 3px solid var(--season-accent); } /* ---------- Hero mood emoji (injected by season-theme.js) ---------- */ .season-emoji { display: inline-block; margin-right: 2px; font-size: 14px; line-height: 1; letter-spacing: 0; transform: translateY(1px); } /* ---------- Effects canvas (v3) ---------- Fixed, FULL viewport. The engine (season-theme.js) does the zoning: full-strength particles only in the empty side gutters outside the content column; over the content column they are dimmed and fade out entirely below the hero band — text is never obscured. z-index 5 sits above section backgrounds but below the sticky topbar/header (z-50), modals and popups. Never intercepts input. */ #flatero-season-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } /* Reduced motion: effects are never started by JS, but belt-and-braces — hide the canvas entirely if it somehow exists. */ @media (prefers-reduced-motion: reduce) { #flatero-season-fx { display: none; } }