/* ========================================================================== Relistix — Seasonal Color Themes Apply by setting data-theme="" on . Default (no attribute) = original blue/navy theme in styles.css. ========================================================================== */ /* -------------------------------------------------------------------------- Theme: winter — Icy steel-blue primary, frost-silver accent, arctic dark -------------------------------------------------------------------------- */ [data-theme="winter"] { --primary: #2563eb; /* blue-600 */ --primary-dark: #1d4ed8; /* blue-700 */ --accent: #7dd3fc; /* sky-300 (bright frost) */ --dark: #0f2545; /* lighter arctic midnight */ --dark-lighter: #1e4976; --light: #f0f7ff; /* ice blue tint */ --white: #ffffff; --text: #1e3a5f; --text-muted: #64748b; --text-light: #93c5fd; /* blue-300 */ --shadow-sm: 0 1px 3px rgba(37, 99, 235, 0.10); --shadow-md: 0 4px 12px rgba(37, 99, 235, 0.14); --shadow-lg: 0 8px 30px rgba(37, 99, 235, 0.20); } [data-theme="winter"] .hero { background: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 50%, #0c4a6e 100%); } [data-theme="winter"] .hero__glow--1 { background: #38bdf8; opacity: 0.35; } [data-theme="winter"] .hero__glow--2 { background: #7dd3fc; opacity: 0.25; } [data-theme="winter"] .hero__eyebrow { background: rgba(56, 189, 248, 0.22); border-color: rgba(147, 197, 253, 0.55); color: #ffffff; } /* -------------------------------------------------------------------------- Theme: spring — Fresh green primary, blossom-pink accent, soft-light bg -------------------------------------------------------------------------- */ [data-theme="spring"] { --primary: #16a34a; /* green-600 */ --primary-dark: #15803d; /* green-700 */ --accent: #6366f1; /* indigo-500 blue-violet */ --dark: #064e3b; /* lighter green-night */ --dark-lighter: #047857; --light: #f0fdf4; /* green-50 */ --white: #ffffff; --text: #14532d; --text-muted: #6b7280; --text-light: #86efac; /* green-300 */ --shadow-sm: 0 1px 3px rgba(22, 163, 74, 0.10); --shadow-md: 0 4px 12px rgba(22, 163, 74, 0.14); --shadow-lg: 0 8px 30px rgba(22, 163, 74, 0.18); } [data-theme="spring"] .hero { background: linear-gradient(135deg, #064e3b 0%, #10b981 50%, #065f46 100%); } [data-theme="spring"] .hero__glow--1 { background: #34d399; opacity: 0.30; } [data-theme="spring"] .hero__glow--2 { background: #6366f1; opacity: 0.22; } [data-theme="spring"] .hero__eyebrow { background: rgba(52, 211, 153, 0.22); border-color: rgba(134, 239, 172, 0.55); color: #ffffff; } /* -------------------------------------------------------------------------- Theme: summer — Vivid amber-orange primary, sky-cyan accent, deep-navy bg -------------------------------------------------------------------------- */ [data-theme="summer"] { --primary: #ea580c; /* orange-600 */ --primary-dark: #c2410c; /* orange-700 */ --accent: #22d3ee; /* cyan-400 */ --dark: #7c2d12; /* lighter warm dark */ --dark-lighter: #c2410c; --light: #fff7ed; /* orange-50 */ --white: #ffffff; --text: #431407; --text-muted: #78716c; --text-light: #fdba74; /* orange-300 */ --shadow-sm: 0 1px 3px rgba(234, 88, 12, 0.10); --shadow-md: 0 4px 12px rgba(234, 88, 12, 0.15); --shadow-lg: 0 8px 30px rgba(234, 88, 12, 0.20); } [data-theme="summer"] .hero { background: linear-gradient(135deg, #9a3412 0%, #f97316 50%, #ea580c 100%); } [data-theme="summer"] .hero__glow--1 { background: #f97316; opacity: 0.30; } [data-theme="summer"] .hero__glow--2 { background: #22d3ee; opacity: 0.20; } [data-theme="summer"] .hero__eyebrow { background: rgba(249, 115, 22, 0.22); border-color: rgba(253, 186, 116, 0.55); color: #ffffff; } /* -------------------------------------------------------------------------- Theme: autumn — Warm sienna primary, golden-yellow accent, bark-dark bg -------------------------------------------------------------------------- */ [data-theme="autumn"] { --primary: #b45309; /* amber-700 */ --primary-dark: #92400e; /* amber-800 */ --accent: #facc15; /* yellow-400 */ --dark: #451a03; /* lighter bark */ --dark-lighter: #92400e; --light: #fffbeb; /* amber-50 */ --white: #ffffff; --text: #451a03; --text-muted: #92400e; --text-light: #fcd34d; /* amber-300 */ --shadow-sm: 0 1px 3px rgba(180, 83, 9, 0.10); --shadow-md: 0 4px 12px rgba(180, 83, 9, 0.14); --shadow-lg: 0 8px 30px rgba(180, 83, 9, 0.18); } [data-theme="autumn"] .hero { background: linear-gradient(135deg, #78350f 0%, #d97706 50%, #92400e 100%); } [data-theme="autumn"] .hero__glow--1 { background: #f59e0b; opacity: 0.30; } [data-theme="autumn"] .hero__glow--2 { background: #facc15; opacity: 0.20; } [data-theme="autumn"] .hero__eyebrow { background: rgba(245, 158, 11, 0.22); border-color: rgba(252, 211, 77, 0.55); color: #ffffff; } /* ========================================================================== Theme Switcher Widget ========================================================================== */ .theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .theme-switcher__toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--primary, #0066ff); color: #fff; border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30); transition: transform 0.2s ease, background 0.2s ease; } .theme-switcher__toggle:hover { transform: scale(1.1); } .theme-switcher__panel { display: none; flex-direction: column; gap: 4px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 12px; padding: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); min-width: 160px; } .theme-switcher__panel.is-open { display: flex; } .theme-switcher__label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #9ca3af; margin-bottom: 4px; padding: 0 4px; } .theme-switcher__btn { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; color: #374151; transition: background 0.15s ease, border-color 0.15s ease; text-align: left; white-space: nowrap; } .theme-switcher__btn:hover { background: #f3f4f6; } .theme-switcher__btn.is-active { border-color: rgba(0, 0, 0, 0.20); background: #f3f4f6; font-weight: 600; } .theme-switcher__swatch { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(0, 0, 0, 0.08); } /* Swatch gradients — primary → accent per theme */ .theme-switcher__swatch--default { background: linear-gradient(135deg, #0066ff 50%, #fec503 50%); } .theme-switcher__swatch--winter { background: linear-gradient(135deg, #2563eb 50%, #7dd3fc 50%); } .theme-switcher__swatch--spring { background: linear-gradient(135deg, #16a34a 50%, #6366f1 50%); } .theme-switcher__swatch--summer { background: linear-gradient(135deg, #ea580c 50%, #22d3ee 50%); } .theme-switcher__swatch--autumn { background: linear-gradient(135deg, #b45309 50%, #facc15 50%); }