/* ============================================ Seasonal Theme System Triggered by data-season attribute on ============================================ */ /* Spring Theme */ [data-season="spring"] { --season-active: var(--season-spring-primary); --season-active-bg: var(--season-spring-bg); --season-hero-gradient: var(--season-spring-gradient); } /* Summer Theme */ [data-season="summer"] { --season-active: var(--season-summer-primary); --season-active-bg: var(--season-summer-bg); --season-hero-gradient: var(--season-summer-gradient); } /* Fall Theme */ [data-season="fall"] { --season-active: var(--season-fall-primary); --season-active-bg: var(--season-fall-bg); --season-hero-gradient: var(--season-fall-gradient); } /* Winter Theme */ [data-season="winter"] { --season-active: var(--season-winter-primary); --season-active-bg: var(--season-winter-bg); --season-hero-gradient: var(--season-winter-gradient); } /* Season Selector Pills */ .season-selector { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.15); border-radius: var(--radius-xl); padding: 4px; } .nav--scrolled .season-selector { background: var(--color-gray-100); } .season-pill { padding: 8px 16px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: rgba(255, 255, 255, 0.7); border-radius: var(--radius-xl); cursor: pointer; transition: all var(--transition-normal); border: none; background: none; white-space: nowrap; } .nav--scrolled .season-pill { color: var(--color-gray-500); } .season-pill:hover { color: var(--color-white); } .nav--scrolled .season-pill:hover { color: var(--color-primary); } .season-pill.active { background: var(--color-white); color: var(--season-active, var(--color-accent)); box-shadow: var(--shadow-sm); } .nav--scrolled .season-pill.active { background: var(--color-white); color: var(--season-active, var(--color-accent)); }