/* ═══════════════════════════════════════════════════════════════════ SEASONAL THEMES — CSS Token Overrides Applied via data-season attribute on Each theme overrides sidebar, accents, and card styles ═══════════════════════════════════════════════════════════════════ */ /* ── RAMADAN — Soft navy/purple sidebar, golden accents ── */ [data-season="ramadan"] { --sb-bg: #1A1A3E; --sb-hover: rgba(255,215,0,0.08); --sb-active-bg: rgba(255,215,0,0.14); --sb-active-border: #F0B429; --g500: #7C6ADB; --g600: #5B4CC4; --g700: #4338A0; --au500: #F0B429; --au600: #D4921C; } [data-season="ramadan"] .sidebar { background: linear-gradient(180deg, #1A1A3E 0%, #141236 100%); } [data-season="ramadan"] .topbar { border-bottom-color: rgba(124,106,219,0.15); } [data-season="ramadan"] .season-banner { display: flex; background: linear-gradient(135deg, #1A1A3E, #2D2563); color: #F9D071; border: 1px solid rgba(249,208,113,0.2); } /* ── EID AL-FITR — Green + gold ── */ [data-season="eid-fitr"] { --sb-bg: #0C3B1F; --sb-hover: rgba(249,208,113,0.1); --sb-active-bg: rgba(249,208,113,0.16); --sb-active-border: #F9D071; --g500: #22A05A; --g600: #1E7A44; --au500: #F0B429; } [data-season="eid-fitr"] .sidebar { background: linear-gradient(180deg, #0C3B1F 0%, #082A16 100%); } [data-season="eid-fitr"] .season-banner { display: flex; background: linear-gradient(135deg, #0C3B1F, #164D2E); color: #F9D071; border: 1px solid rgba(249,208,113,0.2); } /* ── EID AL-ADHA — Emerald + gold ── */ [data-season="eid-adha"] { --sb-bg: #064E2B; --sb-hover: rgba(249,208,113,0.1); --sb-active-bg: rgba(249,208,113,0.16); --sb-active-border: #F9D071; --g500: #059669; --g600: #047857; --au500: #F0B429; } [data-season="eid-adha"] .sidebar { background: linear-gradient(180deg, #064E2B 0%, #043A20 100%); } [data-season="eid-adha"] .season-banner { display: flex; background: linear-gradient(135deg, #064E2B, #047857); color: #F9D071; border: 1px solid rgba(249,208,113,0.2); } /* ── NATIONAL DAY — Saudi green (#006C35) + white ── */ [data-season="national-day"] { --sb-bg: #003D1E; --sb-hover: rgba(255,255,255,0.1); --sb-active-bg: rgba(255,255,255,0.16); --sb-active-border: #FFFFFF; --g500: #006C35; --g600: #005A2C; --g700: #004D25; } [data-season="national-day"] .sidebar { background: linear-gradient(180deg, #003D1E 0%, #002A14 100%); } [data-season="national-day"] .topbar { border-bottom: 2px solid #006C35; } [data-season="national-day"] .season-banner { display: flex; background: linear-gradient(135deg, #006C35, #004D25); color: #FFFFFF; border: 1px solid rgba(0,108,53,0.3); } /* ── FOUNDING DAY — Purple + gold ── */ [data-season="founding-day"] { --sb-bg: #2D1650; --sb-hover: rgba(249,208,113,0.1); --sb-active-bg: rgba(198,156,46,0.16); --sb-active-border: #C69C2E; --g500: #7C3AED; --g600: #6D28D9; --g700: #5B21B6; --au500: #C69C2E; --au600: #A68425; } [data-season="founding-day"] .sidebar { background: linear-gradient(180deg, #2D1650 0%, #1E0F38 100%); } [data-season="founding-day"] .season-banner { display: flex; background: linear-gradient(135deg, #2D1650, #4C1D95); color: #C69C2E; border: 1px solid rgba(198,156,46,0.2); } /* ── Season Banner (shared base — hidden by default) ── */ .season-banner { display: none; align-items: center; gap: 12px; padding: 12px 20px; border-radius: var(--r-md); margin-bottom: 16px; font-family: 'Tajawal', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.6; } .season-banner .season-icon { font-size: 28px; flex-shrink: 0; } .season-banner .season-text { flex: 1; } .season-banner .season-dismiss { background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 16px; padding: 4px; } .season-banner .season-dismiss:hover { opacity: 1; } /* ── Dark mode overrides for themes ── */ [data-theme="dark"][data-season="ramadan"] { --sb-bg: #0F0F2A; } [data-theme="dark"][data-season="national-day"] { --sb-bg: #001A0D; } [data-theme="dark"][data-season="founding-day"] { --sb-bg: #1A0B38; }