/* * themes.css — Seasonal theme overrides * * Applied via data-site-theme attribute on . To change the active * theme at runtime, set document.documentElement.setAttribute('data-site-theme', 'halloween'). * * To override the auto-detected date-based theme, set main.siteTheme in site.json. * * Available themes: halloween, christmas, newyear, independence, veterans, * flag, pride, juneteenth, thanksgiving */ /* ── Halloween (October) ─────────────────────────────────────────── */ [data-site-theme="halloween"] { --accent: #f97316; --accent-bg: rgba(249, 115, 22, 0.08); --accent-border: rgba(249, 115, 22, 0.3); } [data-site-theme="halloween"] .hero-section { background-image: linear-gradient(rgba(13, 8, 4, 0.72), rgba(13, 8, 4, 0.90)), url('../images/halloween-seattle.jpg'); } /* ── Christmas (December) ────────────────────────────────────────── */ [data-site-theme="christmas"] { --accent: #e84040; --accent-bg: rgba(232, 64, 64, 0.08); --accent-border: rgba(232, 64, 64, 0.3); --green: #2d8f4e; } [data-site-theme="christmas"] .hero-section { background-image: linear-gradient(rgba(5, 14, 8, 0.72), rgba(5, 14, 8, 0.90)), url('../images/christmas-seattle.jpg'); } /* ── New Year (Dec 31 – Jan 1) ───────────────────────────────────── */ [data-site-theme="newyear"] { --accent: #f0b429; --accent-bg: rgba(240, 180, 41, 0.08); --accent-border: rgba(240, 180, 41, 0.3); } [data-site-theme="newyear"] .hero-section { background-image: linear-gradient(rgba(10, 8, 2, 0.72), rgba(10, 8, 2, 0.90)), url('../images/newyear-seattle.jpg'); } /* ── Independence Day / July 4th ─────────────────────────────────── */ [data-site-theme="independence"] { --accent: #3b82f6; --accent-bg: rgba(59, 130, 246, 0.08); --accent-border: rgba(59, 130, 246, 0.3); } [data-site-theme="independence"] .hero-section { background-image: linear-gradient(rgba(4, 8, 18, 0.72), rgba(4, 8, 18, 0.90)), url('../images/independence-seattle.jpg'); } /* ── Veterans Day (Nov 11) ───────────────────────────────────────── */ [data-site-theme="veterans"] { --accent: #3b82f6; --accent-bg: rgba(59, 130, 246, 0.08); --accent-border: rgba(59, 130, 246, 0.3); } [data-site-theme="veterans"] .hero-section { background-image: linear-gradient(rgba(4, 8, 18, 0.72), rgba(4, 8, 18, 0.90)), url('../images/independence-seattle.jpg'); } /* ── Flag Day (Jun 14) ───────────────────────────────────────────── */ [data-site-theme="flag"] { --accent: #e94560; --accent-bg: rgba(233, 69, 96, 0.08); --accent-border: rgba(233, 69, 96, 0.3); } [data-site-theme="flag"] .hero-section { background-image: linear-gradient(rgba(10, 14, 23, 0.72), rgba(10, 14, 23, 0.90)), url('../images/flag.jpg'); } /* ── Pride (June) ────────────────────────────────────────────────── */ [data-site-theme="pride"] { --accent: #f97316; --accent-bg: rgba(249, 115, 22, 0.08); --accent-border: rgba(249, 115, 22, 0.3); } [data-site-theme="pride"] .hero-section { background-image: linear-gradient(rgba(10, 14, 23, 0.72), rgba(10, 14, 23, 0.90)), url('../images/pride-seattle.jpg'); } /* ── Juneteenth (Jun 19) ─────────────────────────────────────────── */ [data-site-theme="juneteenth"] { --accent: #22c55e; --accent-bg: rgba(34, 197, 94, 0.08); --accent-border: rgba(34, 197, 94, 0.3); } [data-site-theme="juneteenth"] .hero-section { background-image: linear-gradient(rgba(4, 14, 8, 0.72), rgba(4, 14, 8, 0.90)), url('../images/juneteenth.jpg'); } /* ── Thanksgiving (late November) ────────────────────────────────── */ [data-site-theme="thanksgiving"] { --accent: #ea7c1e; --accent-bg: rgba(234, 124, 30, 0.08); --accent-border: rgba(234, 124, 30, 0.3); } [data-site-theme="thanksgiving"] .hero-section { background-image: linear-gradient(rgba(14, 10, 4, 0.72), rgba(14, 10, 4, 0.90)), url('../images/happy-thanksgiving.jpg'); }