/*! * Seasonal decorations — seasonal.css * Christmas and Halloween animations for banners, headers, footers and product tiles. * Plain CSS + SVG. No dependencies. Pair with seasonal.js. * * Everything is namespaced: classes start .sd-, custom properties --sd-, keyframes sd-. * See README.md for markup, placement and options. */ /* --------------------------------------------------------------------- Palette. Override these on :root (or on any ancestor) to re-colour. Some multi-colour sets (bulb, flag, bauble colours) live in seasonal.js in arrays at the top of each builder — see README "Colours". --------------------------------------------------------------------- */ :root { --sd-wire: #ded3bd; /* christmas light cable */ --sd-amber: #f2a71b; /* tree star */ --sd-green: #2e8b52; /* tree tiers */ --sd-green-dark: #24734a; --sd-orange: #f2801a; /* pumpkin flesh, bat eyes */ --sd-orange-dark: #c85f10; --sd-glow: #ffd24a; /* pumpkin candle glow */ --sd-slime: #7ee081; /* spider eyes */ } /* --------------------------------------------------------------------- Base strip. Transparent: draws the decoration only, never a background. --------------------------------------------------------------------- */ .sd-deco { position: relative; display: block; width: 100%; overflow: hidden; pointer-events: none; /* never blocks clicks on what is behind it */ user-select: none; } .sd-deco svg { display: block; width: 100%; height: 100%; } /* --------------------------------------------------------------------- Placement helpers. The parent needs position: relative (or similar). --------------------------------------------------------------------- */ /* hang below the parent's bottom edge, over whatever comes next (nav → hero) */ .sd-deco.sd-hang { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; } /* sit on the parent's top / bottom edge, inside it */ .sd-deco.sd-top { position: absolute; left: 0; right: 0; top: 0; z-index: 1; } .sd-deco.sd-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; } /* stand on top of the parent, above its top edge (footer caps: trees, graveyard) */ .sd-deco.sd-above { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; } /* fill the parent entirely, behind its content (give the content z-index: 2) */ .sd-deco.sd-fill { position: absolute; inset: 0; height: auto; z-index: 0; } /* Paused while off-screen (seasonal.js toggles this with IntersectionObserver). */ .sd-paused, .sd-paused * { animation-play-state: paused !important; } /* --------------------------------------------------------------------- Product tile effects:
inside the image box. The box needs position: relative; the product needs position: relative; z-index: 2 so it sits between layers. --------------------------------------------------------------------- */ .sd-tile-fx { position: absolute; inset: 0; pointer-events: none; } .sd-tl { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .sd-tl.sd-back { z-index: 1; } /* behind the product */ .sd-tl.sd-front { z-index: 3; } /* in front of the product */ /* --------------------------------------------------------------------- Page-wide settling snow (created by SeasonalDeco.snow.start()). --------------------------------------------------------------------- */ .sd-snow-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9000; } /* ===================================================================== The decorations ===================================================================== */ .sd-lights { height: 82px; } .sd-lights .wire { fill: none; stroke: var(--sd-wire); stroke-width: 2.4; stroke-linecap: round; } .sd-lights .cap { fill: #35494e; } .sd-lights .collar{ fill: #223035; } .sd-lights .bulb { fill: currentColor; animation: sd-bulb-flash 1.6s infinite ease-in-out; } .sd-lights .shine { fill: #fff; opacity: .5; } @keyframes sd-bulb-flash { 0%, 42% { opacity: 1; filter: drop-shadow(0 0 7px currentColor); } 62%, 100% { opacity: .28; filter: none; } } .sd-bunting { height: 96px; } .sd-bunting .cord { fill: none; stroke: #e9dfc8; stroke-width: 2.2; stroke-linecap: round; } .sd-bunting .knot { fill: #e9dfc8; } .sd-bunting .flag { transform-box: fill-box; transform-origin: 50% 0; animation: sd-flag-sway 3.2s ease-in-out infinite alternate; } @keyframes sd-flag-sway { from { transform: rotate(-4.5deg); } to { transform: rotate(4.5deg); } } .sd-trees { height: 190px; } .sd-trees .trunk { fill: #6b4a2f; } .sd-trees .tier { fill: var(--sd-green); } .sd-trees .tier.b { fill: var(--sd-green-dark); } .sd-trees .snowcap{ fill: #fff; opacity: .85; } .sd-trees .ground { fill: #fff; opacity: .9; } .sd-trees .orn { fill: currentColor; animation: sd-orn-twinkle 2.4s ease-in-out infinite; } .sd-trees .star { fill: var(--sd-amber); transform-box: fill-box; transform-origin: 50% 50%; animation: sd-star-pulse 2.8s ease-in-out infinite; } @keyframes sd-orn-twinkle { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px currentColor); } 50% { opacity: .35; filter: none; } } @keyframes sd-star-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px var(--sd-amber)); } 50% { transform: scale(1.18); filter: drop-shadow(0 0 10px var(--sd-amber)); } } .sd-snow { --sd-flake: #fff; height: 150px; } .sd-snow .flake { position: absolute; top: -12px; animation: sd-snow-fall linear infinite; } .sd-snow .flake i { display: block; border-radius: 50%; background: var(--sd-flake); animation: sd-snow-drift ease-in-out infinite alternate; } @keyframes sd-snow-fall { to { transform: translateY(var(--sd-fall, 170px)); } } @keyframes sd-snow-drift { from { transform: translateX(-10px); } to { transform: translateX(10px); } } .sd-baubles { height: 120px; } .sd-baubles .branch { fill: none; stroke: #2f5d43; stroke-width: 3; stroke-linecap: round; } .sd-baubles .swing { transform-box: fill-box; transform-origin: 50% 0; animation: sd-bauble-swing 3.6s ease-in-out infinite alternate; } .sd-baubles .thread { stroke: #b9a98a; stroke-width: 1.2; } .sd-baubles .ball { fill: currentColor; } .sd-baubles .crown { fill: #c9a227; } .sd-baubles .gleam { fill: #fff; opacity: .45; } @keyframes sd-bauble-swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } } .sd-bats { height: 150px; } .sd-bats .fly { animation: sd-bat-fly linear infinite; } .sd-bats .bob { animation: sd-bat-bob ease-in-out infinite alternate; } .sd-bats .body { fill: #120d1c; } .sd-bats .wing { fill: #1b1327; transform-box: fill-box; } .sd-bats .wing.l { transform-origin: 100% 40%; animation: sd-flap-l .34s ease-in-out infinite alternate; } .sd-bats .wing.r { transform-origin: 0% 40%; animation: sd-flap-r .34s ease-in-out infinite alternate; } .sd-bats .eye { fill: var(--sd-orange); } @keyframes sd-bat-fly { from { transform: translateX(var(--sd-x0)); } to { transform: translateX(var(--sd-x1)); } } @keyframes sd-bat-bob { from { transform: translateY(-8px); } to { transform: translateY(8px); } } @keyframes sd-flap-l { from { transform: rotate(-20deg); } to { transform: rotate(24deg); } } @keyframes sd-flap-r { from { transform: rotate(20deg); } to { transform: rotate(-24deg); } } .sd-pumpkins { height: 170px; } .sd-pumpkins .ground { fill: #000; opacity: .22; } .sd-pumpkins .flesh { fill: var(--sd-orange); } .sd-pumpkins .rib { fill: var(--sd-orange-dark); opacity: .55; } .sd-pumpkins .stem { fill: #4e6b32; } .sd-pumpkins .face { fill: var(--sd-glow); animation: sd-candle 2.1s ease-in-out infinite; } .sd-pumpkins .halo { fill: var(--sd-glow); opacity: .38; transform-box: fill-box; transform-origin: 50% 50%; animation: sd-halo-flicker 2.1s ease-in-out infinite; } @keyframes sd-candle { 0%,100% { opacity: 1; filter: drop-shadow(0 0 6px var(--sd-glow)); } 18% { opacity: .72; filter: drop-shadow(0 0 3px var(--sd-glow)); } 34% { opacity: 1; filter: drop-shadow(0 0 9px var(--sd-glow)); } 55% { opacity: .62; filter: drop-shadow(0 0 2px var(--sd-glow)); } 72% { opacity: .95; filter: drop-shadow(0 0 7px var(--sd-glow)); } } @keyframes sd-halo-flicker { 0%,100% { opacity: .5; transform: scale(1); } 18% { opacity: .28; transform: scale(.94); } 55% { opacity: .2; transform: scale(.9); } 72% { opacity: .45; transform: scale(1.03); } } .sd-hbunting { height: 100px; } .sd-hbunting .cord { fill: none; stroke: #6b5a48; stroke-width: 2.2; stroke-linecap: round; } .sd-hbunting .knot { fill: #6b5a48; } .sd-hbunting .flag { transform-box: fill-box; transform-origin: 50% 0; animation: sd-flag-sway 3.6s ease-in-out infinite alternate; } .sd-hbunting .motif { fill: #fff; opacity: .82; } .sd-spiders { --sd-web: #6f6a85; height: 190px; } .sd-spiders .web { fill: none; stroke: var(--sd-web); stroke-width: 1; opacity: .55; } .sd-spiders .thread { stroke: var(--sd-web); stroke-width: 1; opacity: .6; } .sd-spiders .dangle { animation: sd-drop ease-in-out infinite alternate; } .sd-spiders .sbody { fill: #150f1f; } .sd-spiders .seye { fill: var(--sd-slime); } .sd-spiders .leg { fill: none; stroke: #150f1f; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; animation: sd-twitch 1.5s ease-in-out infinite alternate; } @keyframes sd-drop { from { transform: translateY(-9px); } to { transform: translateY(9px); } } @keyframes sd-twitch { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } } .sd-ghosts { height: 170px; } .sd-ghosts .fly { animation: sd-bat-fly linear infinite; } .sd-ghosts .bob { animation: sd-ghost-bob ease-in-out infinite alternate; } .sd-ghosts .sheet { fill: #eaf2f6; animation: sd-ghost-fade ease-in-out infinite alternate; } .sd-ghosts .gface { fill: #2a2440; } @keyframes sd-ghost-bob { from { transform: translateY(-11px); } to { transform: translateY(11px); } } @keyframes sd-ghost-fade { from { opacity: .38; } to { opacity: .88; } } @media (prefers-reduced-motion: reduce) { .sd-deco * { animation: none !important; } .sd-lights .bulb { filter: drop-shadow(0 0 5px currentColor); } } .sd-graveyard { height: 210px; } .sd-graveyard .gy-moon { fill: #f3ecd7; } /* --gy-clear is set by gyUpdateLight() in seasonal.js to how clear the moon currently is (0 = fully covered, 1 = no cloud in front of it at all) — a continuous percentage, not a boolean, so the brighten/shine tracks how much cloud is actually over the moon rather than snapping between states. It's set on both the effect's own host and its parent element, so a ground photo placed alongside this effect (see README) can inherit it too — e.g. `filter: brightness(calc(1 + .35 * var(--gy-clear, 0)))`. */ /* the moon's own shine — grows and brightens continuously with --gy-clear, inherited from the host element gyUpdateLight() sets it on */ .sd-graveyard .gy-halo { opacity: calc(.28 + .52 * var(--gy-clear, 0)); transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + .45 * var(--gy-clear, 0))); transition: opacity .6s ease, transform .6s ease; } .sd-graveyard .gy-crater { fill: #ddd4ba; opacity: .55; } .sd-graveyard .gy-cloud { fill: #241f28; opacity: .82; animation: sd-gy-drift linear infinite; } /* A single soft pulse per cycle, capped well under half opacity, on a long 22s cycle — gentle enough not to read as strobing (WCAG avoids anything near 3 flashes/second; this is one gentle brighten-dim roughly every 22s). */ .sd-graveyard .gy-flash { fill: #cddcff; opacity: 0; animation: sd-gy-flash 22s linear infinite; } @keyframes sd-gy-drift { from { transform: translateX(var(--sd-x0)); } to { transform: translateX(var(--sd-x1)); } } @keyframes sd-gy-flash { 0%, 93% { opacity: 0; } 95% { opacity: .22; } 97% { opacity: 0; } 100% { opacity: 0; } } .sd-candles { height: 170px; } .sd-candles .cd-ledge { fill: #17121f; } .sd-candles .cd-wax { fill: #ece2cf; } .sd-candles .cd-drip { fill: #d9cdb4; } .sd-candles .cd-wick { stroke: #4a4036; stroke-width: 1.4; } .sd-candles .cd-halo { fill: #ffc247; opacity: .5; animation: sd-cd-breathe 2.6s ease-in-out infinite; } .sd-candles .cd-flame { fill: #ffb028; transform-box: fill-box; transform-origin: 50% 100%; animation: sd-cd-flick .3s ease-in-out infinite alternate; } .sd-candles .cd-core { fill: #fff3c4; transform-box: fill-box; transform-origin: 50% 100%; animation: sd-cd-flick .3s ease-in-out infinite alternate; } @keyframes sd-cd-flick { from { transform: scale(1, 1) translateX(-.5px); } to { transform: scale(.88, 1.14) translateX(.5px); } } @keyframes sd-cd-breathe { 0%,100% { opacity: .6; } 40% { opacity: .3; } 70% { opacity: .52; } } .sd-fog { --sd-fog: 214,222,232; height: 150px; } .sd-fog .fogband { position: absolute; left: -30%; width: 160%; filter: blur(11px); background: linear-gradient(90deg, rgba(var(--sd-fog),0), rgba(var(--sd-fog),.55) 28%, rgba(var(--sd-fog),.55) 72%, rgba(var(--sd-fog),0)); animation-name: sd-fog-roll; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes sd-fog-roll { from { transform: translateX(-13%); } to { transform: translateX(13%); } } .sd-brew { --sd-brew: 126,224,129; height: 160px; } .sd-brew .pool { position: absolute; left: -8%; bottom: -46px; width: 116%; height: 120px; background: radial-gradient(ellipse 52% 100% at 50% 100%, rgba(var(--sd-brew),.85), rgba(var(--sd-brew),0) 70%); animation: sd-brew-pulse 3.4s ease-in-out infinite alternate; } .sd-brew .bub { position: absolute; bottom: 4px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), rgba(var(--sd-brew),.9) 60%); box-shadow: 0 0 8px rgba(var(--sd-brew),.55); animation: sd-brew-rise linear infinite; } @keyframes sd-brew-rise { 0% { transform: translateY(0) scale(.55); opacity: 0; } 14% { opacity: .95; } 72% { opacity: .8; } 100% { transform: translateY(-118px) scale(1.2); opacity: 0; } } @keyframes sd-brew-pulse { from { opacity: .6; } to { opacity: 1; } } .sd-eyes { height: 150px; } .sd-eyes .pair { position: absolute; animation: sd-eyes-peer ease-in-out infinite; } .sd-eyes .pair span { position: absolute; border-radius: 50%; background: var(--sd-eye, #ffc247); box-shadow: 0 0 11px var(--sd-eye, #ffc247); transform-origin: center; animation: sd-eyes-blink ease-in-out infinite; } @keyframes sd-eyes-peer { 0%,6% { opacity: 0; } 18%,66% { opacity: 1; } 80%,100% { opacity: 0; } } @keyframes sd-eyes-blink { 0%,38% { transform: scaleY(1); } 41% { transform: scaleY(.08); } 44%,72% { transform: scaleY(1); } 75% { transform: scaleY(.08); } 78%,100% { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .sd-graveyard .gy-cloud, .sd-graveyard .gy-flash, .sd-candles .cd-flame, .sd-candles .cd-core, .sd-candles .cd-halo, .sd-fog .fogband, .sd-brew .pool, .sd-brew .bub, .sd-eyes .pair, .sd-eyes .pair span { animation: none !important; } .sd-brew .bub { opacity: .7; } } .sd-tbatline { position:absolute; left:0; width:100%; animation:sd-tcross linear infinite; } .sd-tbat .bd { fill:var(--sd-bat, #1a1520); } .sd-tbat .wg { fill:var(--sd-bat-wing, #241d2e); transform-box:fill-box; } .sd-tbat .wg.l { transform-origin:100% 40%; animation:sd-flap-l .3s ease-in-out infinite alternate; } .sd-tbat .wg.r { transform-origin:0% 40%; animation:sd-flap-r .3s ease-in-out infinite alternate; } @keyframes sd-tcross { from{transform:translateX(-28%)} to{transform:translateX(118%)} } .sd-tmist { position:absolute; left:-25%; bottom:-14px; width:150%; height:72px; background:radial-gradient(ellipse 55% 100% at 50% 100%, rgba(var(--sd-mist, 201,211,222),1) 0%, rgba(var(--sd-mist, 201,211,222),0) 70%); opacity:.85; animation:sd-tdrift 17s ease-in-out infinite alternate; } .sd-tmist.b { bottom:-22px; height:92px; opacity:.5; animation-duration:23s; animation-direction:alternate-reverse; } @keyframes sd-tdrift { from{transform:translateX(-7%)} to{transform:translateX(7%)} } @media (prefers-reduced-motion: reduce) { .sd-tbatline, .sd-tbat .wg, .sd-tmist { animation:none !important; } }