/* ================================================================ Seasonal theming (DS-015) ---------------------------------------------------------------- Set the active season in the admin (Website settings → Seasonal theme); the layout writes it to . Each season retints the accent tokens (primary, its hover shade, gold) and the hero/breadcrumb fade (--hv2-veil, an RGB triplet). The navy/cream base is otherwise left untouched. ================================================================ */ :root[data-season="ramadan"] { --hv2-primary: #1E6A5A; --hv2-primary-dark: #185A4C; --hv2-gold: #E3B54A; --hv2-veil: 14, 52, 44; } :root[data-season="christmas"] { --hv2-primary: #1E7A46; --hv2-primary-dark: #18633A; --hv2-gold: #E0B24A; --hv2-veil: 92, 22, 24; /* deep Christmas red — greens the accents, reds the hero/breadcrumb fade */ } :root[data-season="summer"] { --hv2-primary: #C25A2C; --hv2-primary-dark: #A84A22; --hv2-gold: #EFC14E; --hv2-veil: 46, 34, 26; } :root[data-season="festive"] { --hv2-primary: #9C3A2C; --hv2-primary-dark: #812F23; --hv2-gold: #D8A63F; --hv2-veil: 48, 20, 20; } :root[data-season="winter"] { --hv2-primary: #355C7D; --hv2-primary-dark: #2A4A66; --hv2-gold: #B9BFC8; --hv2-veil: 20, 34, 56; } /* ---- Decorations (rendered by layout/season-decor.blade.php) ---- */ .season-decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; /* over the page, under the sticky nav + modals */ } /* Gentle falling snow — spawned by season-decor.js */ .season-particle { position: absolute; top: -24px; border-radius: 50%; background: #ffffff; opacity: 0; will-change: transform, opacity; animation-name: season-fall; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes season-fall { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: var(--p-opacity, .5); } 92% { opacity: var(--p-opacity, .5); } 100% { transform: translate(var(--p-drift, 24px), 104vh); opacity: 0; } } /* Hanging ornament — positioning wrapper (fixed) + inner sway element, so mobile centering (transform on the wrapper) never fights the sway. */ .season-hang { position: fixed; top: 0; right: 30px; z-index: 1001; pointer-events: none; } .season-hang__swing { display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: season-sway 4.5s ease-in-out infinite; } .season-hang__string { width: 2px; height: 28px; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .05)); } .season-hang__item { display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28)); } @keyframes season-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } /* Santa hat perched on the logo (Christmas only). The is rendered inside .hv2-nav__brand by the navbar component. */ :root[data-season="christmas"] .hv2-nav__brand { position: relative; overflow: visible; } .season-santa { position: absolute; top: -17px; left: 7px; width: 40px; height: auto; z-index: 3; transform: rotate(15deg); transform-origin: bottom left; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); } /* On scroll the logo swaps to the smaller, narrower dark mark (main-logo.svg); always-solid nav pages show it too — shrink + nudge the hat to match. */ .hv2-nav--scrolled .season-santa, .nav-solid #hv2-navbar .season-santa { width: 33px; top: -14px; left: 5px; } /* Mobile: hang the ornament from the centre (clear of the logo + burger) instead of hiding it. */ @media (max-width: 991px) { .season-hang { right: auto; left: 50%; transform: translateX(-50%); } .season-hang__item { transform: scale(.72); transform-origin: top center; } .season-santa { width: 32px; top: -11px; left: 8px; } .hv2-nav--scrolled .season-santa, .nav-solid #hv2-navbar .season-santa { width: 27px; top: -11px; left: 5px; } } /* Respect reduced-motion: hold still, no falling snow. */ @media (prefers-reduced-motion: reduce) { .season-hang__swing { animation: none; } .season-particle { display: none; } }