/* * Halloween theme — "Spooky Night" * ------------------------------------------------------------------ * A quiet, ambient Halloween treatment, built like Summer / Autumn: every rule * is namespaced under `.halloween-fx`, the fixed overlay HalloweenTheme.tsx * mounts on the public marketing pages (not the app). This keeps the whole * effect scoped even though `data-theme="halloween"` is on site-wide. * * What's here: a glowing moon + drifting cloud, twinkling stars, flapping bats * gliding across, rising ghosts, an occasional abseiling spider, low purple fog * and corner cobwebs. No PNG assets — inline SVG + CSS. (Replaces the old * falling-PNG / clickable-sprite Halloween theme.) */ .halloween-fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; /* Palette — moonlit purple night with pumpkin-orange warmth */ --hw-night: #1a1030; --hw-purple: #3a2b5e; --hw-orange: #ef7215; --hw-pumpkin: #ff7518; --hw-moon: #fdf6c9; --hw-ghost: #e2dcf5; } /* ── Halloween atmosphere: a big soft colour wash in the top-right corner (warm near the moon, fading through purple) to set a spooky mood on the otherwise-white page. Static — no motion. ───────────────────────────── */ .halloween-atmosphere { position: absolute; top: -220px; right: -220px; width: 900px; height: 720px; pointer-events: none; background: radial-gradient(closest-side at 74% 40%, rgba(255, 150, 60, 0.22) 0%, rgba(255, 150, 60, 0) 68%), radial-gradient(closest-side at 66% 46%, rgba(126, 79, 178, 0.20) 0%, rgba(126, 79, 178, 0) 78%); filter: blur(4px); } /* ── Crescent moon (top-right), sitting below the site header/banner ─────── */ /* Soft, gradual glow halo (a bit bigger than the disc, fading out slowly) */ .halloween-moon { position: absolute; top: 20px; right: -110px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient( circle at center, rgba(255, 196, 112, 0.5) 0%, rgba(255, 176, 96, 0.3) 32%, rgba(255, 168, 92, 0.14) 54%, rgba(255, 168, 92, 0) 76% ); filter: blur(8px); } /* the crescent disc itself (SVG), static — no pulsing */ .halloween-moon-core { position: absolute; top: 118px; right: 18px; width: 132px; height: 132px; filter: drop-shadow(0 0 24px rgba(255, 184, 92, 0.6)); } .halloween-moon-core svg { width: 100%; height: 100%; display: block; } @media (max-width: 640px) { .halloween-moon { width: 300px; height: 300px; top: 40px; right: -100px; } .halloween-moon-core { width: 108px; height: 108px; top: 104px; right: 12px; } .halloween-atmosphere { width: 620px; height: 520px; } } /* ── Cobwebs in the two top corners ──────────────────────────────── */ .halloween-web { position: absolute; top: 0; width: 118px; height: 118px; opacity: 0.5; } .halloween-web svg { width: 100%; height: 100%; display: block; } .halloween-web--left { left: 0; } .halloween-web--right { right: 0; transform: scaleX(-1); } @media (max-width: 640px) { .halloween-web { width: 84px; height: 84px; } } /* ── Twinkling stars ─────────────────────────────────────────────── */ .halloween-star { position: absolute; top: var(--top, 20%); left: var(--left, 50%); width: var(--size, 3px); height: var(--size, 3px); border-radius: 50%; background: #fffdf0; box-shadow: 0 0 6px rgba(255, 253, 240, 0.9); opacity: 0.2; animation: hw-twinkle var(--dur, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); } /* ── Flapping bats gliding across (signature motion) ─────────────── */ .halloween-bat { position: absolute; top: var(--top, 20%); left: 0; width: var(--size, 40px); height: calc(var(--size, 40px) * 0.58); opacity: 0; will-change: transform, opacity; animation: hw-bat-cross var(--dur, 20s) linear infinite; animation-delay: var(--delay, 0s); } .halloween-bat--rtl { animation-name: hw-bat-cross-rtl; } /* the wave layer bobs the bat up and down as it crosses */ .halloween-bat__wave { width: 100%; height: 100%; animation: hw-bat-wave calc(var(--dur, 20s) / 7) ease-in-out infinite; } /* the flap layer squashes the wings vertically = wing beat */ .halloween-bat__flap { width: 100%; height: 100%; transform-origin: 50% 45%; animation: hw-bat-flap var(--flap, 0.4s) ease-in-out infinite; } .halloween-bat svg { width: 100%; height: 100%; display: block; } /* bats flying right→left face the other way */ .halloween-bat--rtl svg { transform: scaleX(-1); } /* ── Rising, fading ghosts ───────────────────────────────────────── */ .halloween-ghost { position: absolute; bottom: -14vh; left: var(--left, 50%); width: var(--size, 44px); height: calc(var(--size, 44px) * 1.4); opacity: 0; will-change: transform, opacity; animation: hw-ghost-rise var(--dur, 20s) ease-in-out infinite; animation-delay: var(--delay, 0s); } /* gentle squash-stretch bob so the ghost feels weightless */ .halloween-ghost__inner { width: 100%; height: 100%; animation: hw-ghost-bob 3.4s ease-in-out infinite; } .halloween-ghost svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 10px rgba(226, 220, 245, 0.5)); } /* ── Occasional spider abseiling on a silk thread ────────────────── */ .halloween-spider { position: absolute; top: 0; left: var(--left, 50%); width: var(--size, 40px); will-change: transform; animation: hw-spider-drop var(--dur, 26s) ease-in-out infinite; animation-delay: var(--delay, 0s); } /* the silk thread runs from the top of the page to the spider */ .halloween-spider__thread { position: absolute; top: -100vh; left: 50%; width: 1px; height: 100vh; background: rgba(226, 220, 245, 0.4); } .halloween-spider__body { width: 100%; transform-origin: 50% -100vh; animation: hw-spider-sway 4.5s ease-in-out infinite; } .halloween-spider__body svg { width: 100%; height: auto; display: block; } /* ── Low purple fog (thicker + more intense) ─────────────────────── */ .halloween-fog { position: absolute; left: -10%; right: -10%; bottom: 0; height: 226px; pointer-events: none; } .halloween-fog__band { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; filter: blur(26px); will-change: transform; } .halloween-fog__band--a { background: radial-gradient(62% 95% at 28% 100%, rgba(120, 78, 185, 0.75) 0%, rgba(120, 78, 185, 0) 72%), radial-gradient(58% 88% at 74% 100%, rgba(92, 56, 150, 0.7) 0%, rgba(92, 56, 150, 0) 72%); opacity: 0.92; animation: hw-fog-a 28s ease-in-out infinite; } .halloween-fog__band--b { background: radial-gradient(60% 92% at 52% 100%, rgba(158, 110, 214, 0.62) 0%, rgba(158, 110, 214, 0) 74%), radial-gradient(46% 80% at 90% 100%, rgba(108, 66, 168, 0.55) 0%, rgba(108, 66, 168, 0) 74%); opacity: 0.8; animation: hw-fog-b 36s ease-in-out infinite; } /* a denser base line so the fog reads solid where it meets the page edge */ .halloween-fog::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to top, rgba(102, 62, 158, 0.5) 0%, rgba(102, 62, 158, 0) 100%); filter: blur(10px); } /* ── Bubbles rising out of the fog ───────────────────────────────── */ .halloween-bubble { position: absolute; left: var(--left, 50%); bottom: 8px; width: var(--size, 14px); height: var(--size, 14px); border-radius: 50%; background: var(--bcolor, rgba(150, 110, 200, 0.32)); box-shadow: inset -1px -1px 3px rgba(60, 30, 90, 0.22), inset 2px 2px 4px rgba(255, 255, 255, 0.28); opacity: 0; will-change: transform, opacity; animation: hw-bubble-rise var(--dur, 8s) ease-in infinite; animation-delay: var(--delay, 0s); } /* ── Skeleton hand clawing up out of the fog (bottom-left) ────────── */ .halloween-skeleton-hand { position: absolute; left: 4%; bottom: -6px; width: 128px; z-index: 2; transform-origin: 50% 100%; animation: hw-hand-rise 7s ease-in-out infinite; filter: drop-shadow(0 -2px 6px rgba(60, 30, 90, 0.4)); } .halloween-skeleton-hand svg { width: 100%; height: auto; display: block; } @media (max-width: 640px) { .halloween-skeleton-hand { width: 92px; left: 2%; } } /* ── Keyframes ──────────────────────────────────────────────────── */ @keyframes hw-bubble-rise { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 14% { opacity: 0.7; } 80% { opacity: 0.6; } 100% { transform: translate(var(--drift, 0px), calc(var(--rise, 20vh) * -1)) scale(1); opacity: 0; } } /* hand slowly emerges and sinks back, with a faint claw-clench sway */ @keyframes hw-hand-rise { 0%, 100% { transform: translateY(14px) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(2deg); } } @keyframes hw-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.85); } 50% { opacity: 0.95; transform: scale(1.15); } } /* bat crosses the full width; opacity fades in/out at the edges */ @keyframes hw-bat-cross { 0% { transform: translateX(-14vw); opacity: 0; } 6% { opacity: var(--op, 0.8); } 94% { opacity: var(--op, 0.8); } 100% { transform: translateX(114vw); opacity: 0; } } @keyframes hw-bat-cross-rtl { 0% { transform: translateX(114vw); opacity: 0; } 6% { opacity: var(--op, 0.8); } 94% { opacity: var(--op, 0.8); } 100% { transform: translateX(-14vw); opacity: 0; } } @keyframes hw-bat-wave { 0%, 100% { transform: translateY(calc(var(--amp, 6) * -0.5vh)); } 50% { transform: translateY(calc(var(--amp, 6) * 0.5vh)); } } @keyframes hw-bat-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.62); } } @keyframes hw-ghost-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: var(--op, 0.35); } 30% { transform: translate(calc(var(--drift, 3) * 1vw), -30vh); } 55% { transform: translate(calc(var(--drift, 3) * -1vw), -58vh); } 80% { transform: translate(calc(var(--drift, 3) * 1vw), -86vh); opacity: var(--op, 0.35); } 100% { transform: translate(0, -112vh); opacity: 0; } } @keyframes hw-ghost-bob { 0%, 100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.05) scaleX(0.97); } } /* spider spends most of the long cycle parked above the viewport, drops in briefly, dangles, then retracts → it reads as an occasional visitor */ @keyframes hw-spider-drop { 0% { transform: translateY(-60vh); } 10% { transform: translateY(var(--drop, 30vh)); } 24% { transform: translateY(calc(var(--drop, 30vh) - 3vh)); } 38% { transform: translateY(var(--drop, 30vh)); } 52% { transform: translateY(-60vh); } 100% { transform: translateY(-60vh); } } @keyframes hw-spider-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @keyframes hw-fog-a { 0%, 100% { transform: translateX(-6%); } 50% { transform: translateX(6%); } } @keyframes hw-fog-b { 0%, 100% { transform: translateX(7%); } 50% { transform: translateX(-7%); } } /* ── Page accents (rendered inline by pages, gated on the active theme) ── These sit INSIDE page content (hero cat), not the .halloween-fx overlay. */ /* Witch hat on the cat's head. Percentages map to the cat illustration box. Rendered at full opacity (no opacity entrance animation — that could stick faint if the tab loads throttled in the background). */ .halloween-cat-hat { position: absolute; top: 20%; left: 21%; width: 30%; z-index: 21; pointer-events: none; transform: rotate(10deg); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.22)); } /* Carved jack-o'-lantern on the ground next to the cat, with a flickering glow. */ .halloween-cat-pumpkin { position: absolute; top: 62%; left: -3%; width: 30%; z-index: 14; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 14px rgba(255, 170, 60, 0.55)); animation: hw-jack-flicker 2.6s ease-in-out infinite; } /* candle flicker: nudge the warm glow strength up and down */ @keyframes hw-jack-flicker { 0%, 100% { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 12px rgba(255, 170, 60, 0.45)); } 45% { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 20px rgba(255, 190, 80, 0.75)); } 70% { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 14px rgba(255, 170, 60, 0.5)); } } /* Small bat tucked onto a card's top-right corner (kept for reuse) */ .halloween-card-bat { position: absolute; top: -13px; right: -8px; width: 46px; height: 29px; z-index: 5; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14)); animation: hw-card-bat-flap 0.5s ease-in-out infinite; } @keyframes hw-card-bat-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.72); } } @media (max-width: 640px) { .halloween-card-bat { width: 38px; height: 24px; } } /* ── Visitor toggle: turn the effects off (low-end machines) ─────── */ .halloween-toggle { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(26, 16, 48, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(226, 220, 245, 0.18); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); font-family: inherit; font-size: 12px; font-weight: 600; color: #f0e9ff; cursor: pointer; opacity: 0.75; transition: opacity 0.2s ease, transform 0.2s ease; } .halloween-toggle:hover { opacity: 1; transform: translateY(-1px); } .halloween-toggle__icon { font-size: 14px; line-height: 1; } @media (max-width: 640px) { .halloween-toggle { left: 10px; bottom: 10px; padding: 7px; } .halloween-toggle__label { display: none; } } /* ── Respect reduced-motion: keep the look, drop the movement ───── */ @media (prefers-reduced-motion: reduce) { .halloween-fx *, .halloween-moon, .halloween-moon-core, .halloween-cat-hat, .halloween-cat-pumpkin, .halloween-skeleton-hand, .halloween-card-bat { animation: none !important; } /* keep a few bats visible, just static and parked mid-screen; hide spiders and the rising bubbles */ .halloween-bat { opacity: var(--op, 0.5); left: auto; right: 30vw; } .halloween-spider { display: none; } .halloween-bubble { display: none; } .halloween-ghost { opacity: var(--op, 0.3); bottom: auto; top: 40vh; } }