/* ══════════════════════════════════════════════════════════════════ Xerion seasonal themes. A second theming axis alongside light/dark: [data-season] on re-tints the site's accent variables, adds a slim ribbon across the very top, and (for a few seasons) gentle falling particles. Every season works in both light and dark mode. ══════════════════════════════════════════════════════════════════ */ /* ── Spring 🌸 ── */ [data-season="spring"] { --blue: #16a34a; --blue-dark: #15803d; --blue-faint: #ecfdf3; --season-ribbon: linear-gradient(90deg, #4ade80, #f9a8d4, #4ade80); } [data-theme="dark"][data-season="spring"] { --blue: #4ade80; --blue-dark: #86efac; --blue-faint: rgba(74, 222, 128, 0.16); } /* ── Summer ☀️ ── */ [data-season="summer"] { --blue: #0891b2; --blue-dark: #0e7490; --blue-faint: #ecfeff; --season-ribbon: linear-gradient(90deg, #fbbf24, #22d3ee, #fbbf24); } [data-theme="dark"][data-season="summer"] { --blue: #22d3ee; --blue-dark: #67e8f9; --blue-faint: rgba(34, 211, 238, 0.16); } /* ── Fall 🍂 ── */ [data-season="fall"] { --blue: #d97706; --blue-dark: #b45309; --blue-faint: #fff7ed; --season-ribbon: linear-gradient(90deg, #f59e0b, #b91c1c, #f59e0b); } [data-theme="dark"][data-season="fall"] { --blue: #fbbf24; --blue-dark: #fcd34d; --blue-faint: rgba(251, 191, 36, 0.16); } /* ── Halloween 🎃 ── */ [data-season="halloween"] { --blue: #ea580c; --blue-dark: #c2410c; --blue-faint: #fff7ed; --season-ribbon: linear-gradient(90deg, #ea580c, #7c3aed, #ea580c); } [data-theme="dark"][data-season="halloween"] { --blue: #fb923c; --blue-dark: #fdba74; --blue-faint: rgba(251, 146, 60, 0.18); } /* ── Winter ❄️ ── */ [data-season="winter"] { --blue: #0284c7; --blue-dark: #0369a1; --blue-faint: #f0f9ff; --season-ribbon: linear-gradient(90deg, #38bdf8, #e0f2fe, #38bdf8); } [data-theme="dark"][data-season="winter"] { --blue: #38bdf8; --blue-dark: #7dd3fc; --blue-faint: rgba(56, 189, 248, 0.16); } /* ── Winter / Christmas 🎄 ── */ [data-season="christmas"] { --blue: #dc2626; --blue-dark: #b91c1c; --blue-faint: #fef2f2; --season-ribbon: repeating-linear-gradient(115deg, #dc2626 0 14px, #ffffff 14px 22px, #15803d 22px 36px, #ffffff 36px 44px); } [data-theme="dark"][data-season="christmas"] { --blue: #f87171; --blue-dark: #fca5a5; --blue-faint: rgba(248, 113, 113, 0.16); } /* ── Valentine's Day 💘 ── */ [data-season="valentines"] { --blue: #e11d48; --blue-dark: #be123c; --blue-faint: #fff1f2; --season-ribbon: linear-gradient(90deg, #fb7185, #e11d48, #fb7185); } [data-theme="dark"][data-season="valentines"] { --blue: #fb7185; --blue-dark: #fda4af; --blue-faint: rgba(251, 113, 133, 0.16); } /* ── Easter 🐣 ── */ [data-season="easter"] { --blue: #9333ea; --blue-dark: #7e22ce; --blue-faint: #faf5ff; --season-ribbon: linear-gradient(90deg, #fbcfe8, #fde68a, #bbf7d0, #c7d2fe); } [data-theme="dark"][data-season="easter"] { --blue: #c084fc; --blue-dark: #d8b4fe; --blue-faint: rgba(192, 132, 252, 0.16); } /* ── The ribbon: a slim seasonal stripe across the very top ── */ html[data-season]:not([data-season="default"]) body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--season-ribbon); z-index: 1200; pointer-events: none; } /* ── Picker button (header) and floating button (public pages) ── */ .season-fab { position: fixed; bottom: 18px; right: 18px; z-index: 950; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border, #e3e7f0); background: var(--card, #ffffff); font-size: 1.25rem; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14); line-height: 1; } .season-menu { position: absolute; z-index: 1000; min-width: 210px; background: var(--card, #ffffff); color: var(--ink, #111623); border: 1px solid var(--border, #e3e7f0); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16); padding: 6px; } .season-menu[hidden] { display: none !important; } .season-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; padding: 9px 12px; border-radius: 8px; font-family: inherit; font-size: 0.88rem; color: var(--ink, #111623); cursor: pointer; text-align: left; } .season-menu button:hover { background: var(--blue-faint, #eef4ff); } .season-menu button .tick { margin-left: auto; color: var(--blue, #1a56db); font-weight: 700; } /* ── Falling particles (a few seasons only) ── */ #seasonFlakes { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .season-flake { position: absolute; top: -6vh; opacity: 0.5; animation: seasonFall linear infinite; will-change: transform; user-select: none; } @keyframes seasonFall { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 100% { transform: translateY(112vh) translateX(var(--sway, 30px)) rotate(300deg); } } @media (prefers-reduced-motion: reduce) { #seasonFlakes { display: none !important; } }