/* ============================================================ Stellar Solutions — seasonal themes Applied via [data-theme="..."] on (see js/theme.js). Every color here is a straight override of the design tokens already defined in css/style.css's :root — nothing else needs to change, since buttons, gradients, hero blobs, borders etc. all already read from these same custom properties. ============================================================ */ [data-theme="christmas"]{ --accent: #c0392b; --accent-2: #1b7a43; --accent-3: #f1c40f; --accent-rgb: 192,57,43; --accent-2-rgb: 27,122,67; --gradient-1: linear-gradient(135deg, #c0392b 0%, #1b7a43 60%, #f1c40f 100%); --gradient-2: linear-gradient(135deg, #f1c40f 0%, #c0392b 55%, #1b7a43 100%); } [data-theme="halloween"]{ --accent: #e8752c; --accent-2: #6c3483; --accent-3: #7cb518; --accent-rgb: 232,117,44; --accent-2-rgb: 108,52,131; --gradient-1: linear-gradient(135deg, #e8752c 0%, #6c3483 55%, #111111 100%); --gradient-2: linear-gradient(135deg, #6c3483 0%, #e8752c 55%, #7cb518 100%); } [data-theme="easter"]{ --accent: #f7b6d2; --accent-2: #b39ddb; --accent-3: #a8e6b0; --accent-rgb: 247,182,210; --accent-2-rgb: 179,157,219; --gradient-1: linear-gradient(135deg, #f7b6d2 0%, #b39ddb 55%, #a8e6b0 100%); --gradient-2: linear-gradient(135deg, #a8e6b0 0%, #f7b6d2 55%, #b39ddb 100%); } [data-theme="valentine"]{ --accent: #e0245e; --accent-2: #ff6f91; --accent-3: #d4af37; --accent-rgb: 224,36,94; --accent-2-rgb: 255,111,145; --gradient-1: linear-gradient(135deg, #e0245e 0%, #ff6f91 55%, #d4af37 100%); --gradient-2: linear-gradient(135deg, #d4af37 0%, #e0245e 55%, #ff6f91 100%); } /* ---------- Themed hero background (behind the existing blobs) ---------- .hero-bg (index.html) already holds the .blob-1/2/3 divs — this adds one more layer via ::before, which paints first/behind them since it's generated as the element's first child, no z-index juggling needed. Pure CSS gradients only (no image assets, no inline SVG) so every theme gets a distinct atmosphere without adding any new files. */ [data-theme] .hero-bg::before{ content: ""; position: absolute; inset: 0; pointer-events: none; } [data-theme="christmas"] .hero-bg::before{ background: radial-gradient(120px 120px at 85% 10%, rgba(241,196,15,0.35), rgba(241,196,15,0.08) 60%, transparent 72%), radial-gradient(circle at 12% 85%, rgba(27,122,67,0.28), transparent 55%), repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px); } [data-theme="halloween"] .hero-bg::before{ background: radial-gradient(100px 100px at 88% 12%, rgba(255,241,199,0.4), rgba(255,241,199,0.1) 55%, transparent 68%), radial-gradient(circle at 8% 90%, rgba(124,181,24,0.22), transparent 55%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,0,0,0.55), transparent 70%); } [data-theme="easter"] .hero-bg::before{ background: radial-gradient(circle at 15% 15%, rgba(168,230,176,0.3), transparent 50%), radial-gradient(circle at 85% 25%, rgba(247,182,210,0.32), transparent 50%), radial-gradient(circle at 50% 90%, rgba(179,157,219,0.24), transparent 55%); } [data-theme="valentine"] .hero-bg::before{ background: radial-gradient(140px 140px at 80% 15%, rgba(255,111,145,0.32), transparent 65%), radial-gradient(90px 90px at 20% 30%, rgba(224,36,94,0.28), transparent 65%), radial-gradient(circle at 50% 95%, rgba(212,175,55,0.18), transparent 60%); } /* ---------- Decorative falling particles (js/theme.js spawns these) ---------- */ #themeParticleLayer{ position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; } .theme-particle{ position: absolute; top: -10%; line-height: 1; animation-name: themeParticleFall; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform, opacity; } @keyframes themeParticleFall{ 0%{ transform: translate(0, -10vh) rotate(0deg); opacity: 0; } 8%{ opacity: 1; } 92%{ opacity: 1; } 100%{ transform: translate(24px, 112vh) rotate(340deg); opacity: 0; } } @media (prefers-reduced-motion: reduce){ .theme-particle{ animation: none; display: none; } }