/* ============================================================ NEXOTECH - SEASONAL THEMES ENGINE (V15.0 BULLETPROOF) ============================================================ */ /* ============================================================ 1. SPIDER & WEB (Anchored directly to Logo, Single Seamless SVG) ============================================================ */ .hw-spider-web-wrap { position: fixed; top: 0; left: 0; width: 140px; height: 140px; pointer-events: none; z-index: 9990; opacity: 0.85; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); } html.light-mode .hw-spider-web-wrap { opacity: 0.65; filter: drop-shadow(0 2px 5px rgba(234, 88, 12, 0.25)); } /* Spider hanging directly from the NexoTech Logo Badge */ .hw-spider-hanging { width: 44px; height: 120px; z-index: 1000; pointer-events: auto; cursor: pointer; transform-origin: top center; animation: hwSpiderNaturalSway 6s ease-in-out infinite; } .hw-spider-hanging.hw-spider-on-logo { position: absolute; top: 100%; left: 12px; margin-top: -2px; } .hw-spider-hanging.hw-spider-fixed-top { position: fixed; top: 0; left: 80px; } .hw-spider-svg { width: 44px !important; height: 120px !important; display: block !important; overflow: visible !important; } .hw-silk-thread { stroke: #ea580c !important; stroke-width: 1.8 !important; filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.6)); } html.light-mode .hw-silk-thread { stroke: #c2410c !important; filter: drop-shadow(0 0 2px rgba(194, 65, 12, 0.4)); } /* Spider Unit */ .hw-spider-unit { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.75)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } html.light-mode .hw-spider-unit { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); } /* Ambient Micro-Twitch of Spider Legs */ .hw-spider-hanging:not(.is-interacting) .hw-leg-l1, .hw-spider-hanging:not(.is-interacting) .hw-leg-r2 { animation: hwLegTwitchA 3.5s ease-in-out infinite; transform-origin: 22px 82px; } .hw-spider-hanging:not(.is-interacting) .hw-leg-l3, .hw-spider-hanging:not(.is-interacting) .hw-leg-r4 { animation: hwLegTwitchB 4.2s ease-in-out infinite; transform-origin: 22px 88px; } @keyframes hwLegTwitchA { 0%, 82%, 100% { transform: rotate(0deg); } 86% { transform: rotate(-5deg); } 90% { transform: rotate(3deg); } 94% { transform: rotate(-2deg); } } @keyframes hwLegTwitchB { 0%, 75%, 100% { transform: rotate(0deg); } 79% { transform: rotate(6deg); } 83% { transform: rotate(-4deg); } 87% { transform: rotate(2deg); } } /* Spider Glowing Eyes Natural Blink */ .hw-spider-eye { animation: hwSpiderEyeBlink 5s infinite; } @keyframes hwSpiderEyeBlink { 0%, 94%, 98%, 100% { opacity: 1; transform: scaleY(1); } 96% { opacity: 0; transform: scaleY(0.1); } } /* Natural Wind Sway */ @keyframes hwSpiderNaturalSway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } } /* ============================================================ SPIDER IN-THREAD ACROBATICS (NO JUMPING TOWARDS USER) ============================================================ */ /* 1. Bungee Drop & Damped Harmonic Bounce (Seamless full-unit stretch from silk anchor) */ .hw-spider-hanging.act-bungee { animation: hwSpiderBungeeAll 1.8s cubic-bezier(0.28, 0.84, 0.42, 1) forwards !important; transform-origin: top center !important; } @keyframes hwSpiderBungeeAll { 0% { transform: scaleY(1) scaleX(1); } 25% { transform: scaleY(1.32) scaleX(0.93); } 45% { transform: scaleY(0.88) scaleX(1.06); } 65% { transform: scaleY(1.10) scaleX(0.97); } 80% { transform: scaleY(0.97) scaleX(1.01); } 100% { transform: scaleY(1) scaleX(1); } } /* 2. Curiosity & Inspection: Natural pendulum inspection anchored to silk */ .hw-spider-hanging.act-inspect { animation: hwSpiderInspectSwing 1.8s ease-in-out forwards !important; transform-origin: top center !important; } @keyframes hwSpiderInspectSwing { 0%, 100% { transform: rotate(0deg); } 22% { transform: rotate(-16deg) scaleY(1.04); } 48% { transform: rotate(14deg) scaleY(0.98); } 72% { transform: rotate(-7deg); } 88% { transform: rotate(3deg); } } /* 3. Alert & Web Vibration: High-frequency web vibration */ .hw-spider-hanging.act-web-shake { animation: hwSpiderWebResonance 1.4s ease-in-out forwards !important; transform-origin: top center !important; } @keyframes hwSpiderWebResonance { 0%, 100% { transform: rotate(0deg) translate3d(0, 0, 0); } 15% { transform: rotate(2.5deg) translate3d(-1px, 2px, 0); } 30% { transform: rotate(-2deg) translate3d(1px, -1px, 0); } 45% { transform: rotate(2deg) translate3d(-2px, 1px, 0); } 60% { transform: rotate(-1deg) translate3d(1px, 0, 0); } 75% { transform: rotate(1deg) translate3d(-1px, 1px, 0); } 90% { transform: rotate(-0.5deg); } } /* 4. Natural Wind Swing */ .hw-spider-hanging.act-swing { animation: hwSpiderWideSwing 2s ease-in-out forwards !important; transform-origin: top center !important; } @keyframes hwSpiderWideSwing { 0%, 100% { transform: rotate(0deg); } 22% { transform: rotate(-20deg); } 48% { transform: rotate(16deg); } 72% { transform: rotate(-9deg); } 88% { transform: rotate(4deg); } } /* ============================================================ 2. CELESTIAL BODY: HALLOWEEN SUN & HARVEST MOON ============================================================ */ .hw-celestial-body { position: absolute; top: 35px; right: 40px; width: 82px; height: 82px; pointer-events: none; z-index: 5; } /* Halloween Spooky Autumn Sun (Active in Light Mode) */ .hw-halloween-sun { display: none; position: relative; width: 100%; height: 100%; } html.light-mode .hw-halloween-sun, body.light-mode .hw-halloween-sun { display: block; } .hw-sun-rays { position: absolute; top: -12px; left: -12px; width: 106px; height: 106px; animation: hwSunRaysSpin 45s linear infinite; filter: drop-shadow(0 0 10px rgba(234, 88, 12, 0.5)); } @keyframes hwSunRaysSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hw-sun-core { position: absolute; top: 6px; left: 6px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fef08a 0%, #facc15 40%, #f97316 75%, #ea580c 100%); box-shadow: 0 0 28px rgba(249, 115, 22, 0.65), 0 0 55px rgba(234, 88, 12, 0.35); animation: hwSunPulse 4s ease-in-out infinite alternate; } @keyframes hwSunPulse { 0% { transform: scale(1); box-shadow: 0 0 24px rgba(249, 115, 22, 0.55); } 100% { transform: scale(1.05); box-shadow: 0 0 40px rgba(249, 115, 22, 0.8), 0 0 70px rgba(234, 88, 12, 0.45); } } /* Harvest Moon (Active in Dark Mode) */ .hw-harvest-moon { display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fef08a 0%, #facc15 50%, #eab308 85%, #ca8a04 100%); box-shadow: 0 0 35px rgba(250, 204, 21, 0.6), 0 0 75px rgba(234, 88, 12, 0.3); animation: hwMoonGlow 6s ease-in-out infinite alternate; } html.light-mode .hw-harvest-moon, body.light-mode .hw-harvest-moon { display: none; } .hw-moon-crater { position: absolute; border-radius: 50%; background: rgba(161, 98, 7, 0.18); } .hw-crater-1 { top: 16px; left: 20px; width: 14px; height: 14px; } .hw-crater-2 { top: 38px; left: 44px; width: 18px; height: 18px; } .hw-crater-3 { top: 48px; left: 24px; width: 10px; height: 10px; } @keyframes hwMoonGlow { 0% { transform: scale(1); box-shadow: 0 0 25px rgba(250, 204, 21, 0.5); } 100% { transform: scale(1.04); box-shadow: 0 0 48px rgba(250, 204, 21, 0.75), 0 0 85px rgba(234, 88, 12, 0.35); } } /* ============================================================ 3. AMBIENT BATS (100% Solid Pitch-Black Silhouettes, Fully Opaque) ============================================================ */ .hw-ambient-bats-layer { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; pointer-events: none !important; overflow: hidden !important; z-index: 9989 !important; } .hw-ambient-bat { position: absolute !important; left: -250px !important; top: -250px !important; pointer-events: auto !important; cursor: pointer !important; width: 56px !important; height: 35px !important; opacity: 1 !important; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.85)) !important; will-change: transform, opacity !important; } .hw-ambient-bat svg, .hw-chase-bat-item svg { width: 100% !important; height: 100% !important; fill: #000000 !important; opacity: 1 !important; display: block !important; } .hw-ambient-bat svg path, .hw-ambient-bat svg circle:not(.hw-bat-eye), .hw-ambient-bat svg polygon { fill: #000000 !important; opacity: 1 !important; } .hw-ambient-bat .hw-bat-eye, .hw-chase-bat-item .hw-bat-eye { fill: #f97316 !important; opacity: 1 !important; filter: drop-shadow(0 0 2px #ea580c) !important; } .hw-ambient-bat .bat-wing-left, .hw-chase-bat-item .bat-wing-left, .hw-chase-bat-item .wing-l { transform-box: fill-box !important; transform-origin: 100% 50% !important; animation: hwBatFlapLeft 0.18s ease-in-out infinite alternate !important; } .hw-ambient-bat .bat-wing-right, .hw-chase-bat-item .bat-wing-right, .hw-chase-bat-item .wing-r { transform-box: fill-box !important; transform-origin: 0% 50% !important; animation: hwBatFlapRight 0.18s ease-in-out infinite alternate !important; } @keyframes hwBatFlapLeft { 0% { transform: rotate(-26deg); } 100% { transform: rotate(26deg); } } @keyframes hwBatFlapRight { 0% { transform: rotate(26deg); } 100% { transform: rotate(-26deg); } } /* Localized Bat Panic Spook (Flinches right on the spot where touched) */ .hw-ambient-bat.is-spooked, .hw-chase-bat-item.is-spooked { animation-play-state: paused !important; } .hw-ambient-bat.is-spooked svg, .hw-chase-bat-item.is-spooked svg { animation: hwBatPanicInPlace 1.4s ease-out forwards !important; } .hw-ambient-bat.is-spooked .bat-wing-left, .hw-ambient-bat.is-spooked .bat-wing-right, .hw-chase-bat-item.is-spooked .bat-wing-left, .hw-chase-bat-item.is-spooked .bat-wing-right { animation: hwBatPanicFlap 0.06s ease-in-out infinite alternate !important; } @keyframes hwBatPanicFlap { 0% { transform: rotate(-38deg) scaleY(1.25); } 100% { transform: rotate(38deg) scaleY(0.75); } } @keyframes hwBatPanicInPlace { 0% { transform: scale(1) translate(0, 0) rotate(0deg); } 10% { transform: scale(1.3) translate(0, -18px) rotate(-18deg); } 22% { transform: scale(1.25) translate(-16px, -24px) rotate(22deg); } 35% { transform: scale(1.2) translate(16px, -28px) rotate(-16deg); } 50% { transform: scale(1.15) translate(-10px, -15px) rotate(14deg); } 70% { transform: scale(1.1) translate(8px, -8px) rotate(-8deg); } 88% { transform: scale(1.04) translate(-3px, -2px) rotate(4deg); } 100% { transform: scale(1) translate(0, 0) rotate(0deg); } } /* 6 Ambient Trajectories across the whole screen - Dispersed immediately with negative delays */ .hw-ambient-bat-1 { top: 8% !important; left: 0 !important; animation: hwBatSwoop1 24s -6s ease-in-out infinite !important; } .hw-ambient-bat-2 { top: 22% !important; left: 0 !important; animation: hwBatSwoop2 28s -14s ease-in-out infinite !important; } .hw-ambient-bat-3 { top: 44% !important; left: 0 !important; animation: hwBatSwoop3 22s -9s ease-in-out infinite !important; } .hw-ambient-bat-4 { top: 62% !important; left: 0 !important; animation: hwBatSwoop4 26s -19s ease-in-out infinite !important; } .hw-ambient-bat-5 { top: 76% !important; left: 0 !important; animation: hwBatSwoop5 30s -8s ease-in-out infinite !important; } .hw-ambient-bat-6 { top: 88% !important; left: 0 !important; animation: hwBatSwoop6 20s -15s ease-in-out infinite !important; } @keyframes hwBatSwoop1 { 0% { transform: translate3d(-100px, 30px, 0) scale(1.1) rotate(14deg); opacity: 0; } 2% { opacity: 1; } 25% { transform: translate3d(26vw, -25px, 0) scale(1.25) rotate(-8deg); opacity: 1; } 50% { transform: translate3d(52vw, 40px, 0) scale(1.3) rotate(12deg); opacity: 1; } 75% { transform: translate3d(78vw, -15px, 0) scale(1.2) rotate(-10deg); opacity: 1; } 98% { opacity: 1; } 100% { transform: translate3d(calc(100vw + 100px), 35px, 0) scale(1.1) rotate(14deg); opacity: 0; } } @keyframes hwBatSwoop2 { 0% { transform: translate3d(calc(100vw + 100px), -10px, 0) scaleX(-1) scale(1.2) rotate(-12deg); opacity: 0; } 2% { opacity: 1; } 28% { transform: translate3d(72vw, 45px, 0) scaleX(-1) scale(1.3) rotate(10deg); opacity: 1; } 54% { transform: translate3d(45vw, -30px, 0) scaleX(-1) scale(1.35) rotate(-14deg); opacity: 1; } 80% { transform: translate3d(20vw, 35px, 0) scaleX(-1) scale(1.2) rotate(8deg); opacity: 1; } 98% { opacity: 1; } 100% { transform: translate3d(-100px, 10px, 0) scaleX(-1) scale(1.1) rotate(-10deg); opacity: 0; } } @keyframes hwBatSwoop3 { 0% { transform: translate3d(-100px, -20px, 0) scale(1.05) rotate(8deg); opacity: 0; } 2% { opacity: 1; } 30% { transform: translate3d(32vw, 55px, 0) scale(1.2) rotate(16deg); opacity: 1; } 60% { transform: translate3d(64vw, -30px, 0) scale(1.3) rotate(-12deg); opacity: 1; } 85% { transform: translate3d(88vw, 20px, 0) scale(1.15) rotate(6deg); opacity: 1; } 98% { opacity: 1; } 100% { transform: translate3d(calc(100vw + 100px), -10px, 0) scale(1.05) rotate(10deg); opacity: 0; } } @keyframes hwBatSwoop4 { 0% { transform: translate3d(calc(100vw + 100px), 40px, 0) scaleX(-1) scale(1.15) rotate(-10deg); opacity: 0; } 2% { opacity: 1; } 25% { transform: translate3d(78vw, -25px, 0) scaleX(-1) scale(1.25) rotate(-15deg); opacity: 1; } 50% { transform: translate3d(50vw, 50px, 0) scaleX(-1) scale(1.3) rotate(12deg); opacity: 1; } 75% { transform: translate3d(24vw, -15px, 0) scaleX(-1) scale(1.2) rotate(-8deg); opacity: 1; } 98% { opacity: 1; } 100% { transform: translate3d(-100px, 35px, 0) scaleX(-1) scale(1.15) rotate(-10deg); opacity: 0; } } @keyframes hwBatSwoop5 { 0% { transform: translate3d(-100px, 15px, 0) scale(1.1) rotate(12deg); opacity: 0; } 2% { opacity: 1; } 28% { transform: translate3d(28vw, 40px, 0) scale(1.25) rotate(18deg); opacity: 1; } 58% { transform: translate3d(60vw, -20px, 0) scale(1.25) rotate(-14deg); opacity: 1; } 82% { transform: translate3d(84vw, 25px, 0) scale(1.15) rotate(10deg); opacity: 1; } 98% { opacity: 1; } 100% { transform: translate3d(calc(100vw + 100px), -10px, 0) scale(1.1) rotate(12deg); opacity: 0; } } @keyframes hwBatSwoop6 { 0% { transform: translate3d(calc(100vw + 100px), -20px, 0) scaleX(-1) scale(1.1) rotate(-8deg); opacity: 0; } 2% { opacity: 1; } 30% { transform: translate3d(70vw, 35px, 0) scaleX(-1) scale(1.25) rotate(14deg); opacity: 1; } 60% { transform: translate3d(38vw, -15px, 0) scaleX(-1) scale(1.3) rotate(-12deg); opacity: 1; } 85% { transform: translate3d(15vw, 20px, 0) scaleX(-1) scale(1.15) rotate(8deg); opacity: 1; } 98% { opacity: 1; } 100% { transform: translate3d(-100px, -15px, 0) scaleX(-1) scale(1.1) rotate(-8deg); opacity: 0; } } /* ============================================================ 4. WITCH HAT ON AI ASSISTANT BUTTON ============================================================ */ .chat-widget { position: fixed !important; bottom: 28px !important; right: 28px !important; z-index: 9999 !important; overflow: visible !important; } .chat-fab, #chatFab { position: relative !important; overflow: visible !important; z-index: 10000 !important; } .hw-jarvis-hat { position: absolute !important; top: -24px !important; left: -12px !important; width: 44px !important; height: 44px !important; pointer-events: none !important; z-index: 10001 !important; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75)) !important; transform: rotate(-18deg) !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .chat-fab:hover .hw-jarvis-hat, #chatFab:hover .hw-jarvis-hat { transform: rotate(-26deg) scale(1.15) translateY(-3px) !important; } /* ============================================================ 5. HIGH-TECH DRONE VS BATS CHOREOGRAPHY (drone.php only) ============================================================ */ .hw-drone-chase-container { position: absolute !important; top: 60px !important; left: 0 !important; width: 100% !important; height: 190px !important; overflow: visible !important; pointer-events: none !important; z-index: 10 !important; margin: 0 !important; } .hw-chase-actor-wrap { position: absolute !important; top: 15px !important; left: 0 !important; width: 280px !important; height: 80px !important; animation: hwDroneFlightMaster 38s linear infinite !important; will-change: transform, opacity !important; } .hw-chase-bats-group { position: absolute !important; left: 0px !important; top: 8px !important; width: 150px !important; height: 60px !important; animation: hwBatsChoreography 38s linear infinite !important; } .hw-chase-bat-item { position: absolute !important; pointer-events: auto !important; cursor: pointer !important; width: 44px !important; height: 28px !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.85)) !important; } .hw-chase-bat-item:nth-child(1) { top: 0px; left: 0px; transform: scale(1.2); } .hw-chase-bat-item:nth-child(2) { top: 24px; left: 45px; transform: scale(1.05); } .hw-chase-bat-item:nth-child(3) { top: 8px; left: 90px; transform: scale(0.95); } .hw-chase-drone { position: absolute !important; left: 180px !important; top: 0px !important; width: 78px !important; height: 48px !important; animation: hwDroneChoreography 38s linear infinite !important; } .hw-chase-drone .propeller { transform-origin: center; animation: hwPropSpin 0.06s linear infinite; } .hw-chase-drone .hw-drone-nav-led { animation: hwBlinkNav 0.5s infinite alternate; } .hw-chase-drone .hw-drone-strobe-led { animation: hwStrobe 0.8s infinite alternate; } @keyframes hwPropSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes hwBlinkNav { 0% { opacity: 0.3; } 100% { opacity: 1; filter: drop-shadow(0 0 6px #22c55e); } } @keyframes hwStrobe { 0% { opacity: 0.2; } 100% { opacity: 1; filter: drop-shadow(0 0 8px #f97316); } } @keyframes hwDroneFlightMaster { /* PHASE 1: Left -> Right (Bats chase Drone) */ 0% { transform: translate3d(-300px, 0px, 0); opacity: 0; } 1.5% { opacity: 1; } 11% { transform: translate3d(calc(45vw - 140px), 15px, 0); } 22% { transform: translate3d(calc(100vw - 200px), -10px, 0); opacity: 1; } 25% { transform: translate3d(calc(100vw + 280px), 0px, 0); opacity: 0; } /* PHASE 2: 15-SECOND OFFSCREEN WAIT */ 26%, 62% { transform: translate3d(calc(100vw + 280px), 75px, 0); opacity: 0; } /* PHASE 3: Right -> Left at LOWER ALTITUDE (+75px) (Drone chases Bats) */ 64% { transform: translate3d(calc(100vw + 260px), 75px, 0); opacity: 0; } 66% { transform: translate3d(calc(100vw - 120px), 70px, 0); opacity: 1; } 78% { transform: translate3d(calc(52vw - 140px), 85px, 0); } 91% { transform: translate3d(-180px, 68px, 0); opacity: 1; } 94% { transform: translate3d(-360px, 75px, 0); opacity: 0; } 100% { transform: translate3d(-360px, 0px, 0); opacity: 0; } } @keyframes hwBatsChoreography { 0%, 25% { transform: scaleX(1) translateY(0); } 26%, 63% { transform: scaleX(-1) translateY(0); } 64%, 93% { transform: scaleX(-1) translateY(0); } 94%, 100% { transform: scaleX(1) translateY(0); } } @keyframes hwDroneChoreography { 0%, 22% { transform: scaleX(1) translateY(0) rotate(3deg); } 24%, 63% { transform: scaleX(-1) translateY(0) rotate(0deg); } 64% { transform: scaleX(-1) translateY(0) rotate(-6deg); } 72% { transform: scaleX(-1) translateY(14px) rotate(12deg); } 82% { transform: scaleX(-1) translateY(-10px) rotate(-8deg); } 92% { transform: scaleX(-1) translateY(6px) rotate(5deg); } 94%, 100% { transform: scaleX(1) translateY(0) rotate(0deg); } } /* ============================================================ 6. HANGING PERCHED BAT ON LETTER "V" (STRICT SIZING CONSTRAINTS) ============================================================ */ .hw-hanging-letter-wrap { position: relative !important; display: inline-block !important; vertical-align: baseline !important; width: auto !important; } .hw-perched-bat { position: absolute !important; left: 50% !important; top: 70% !important; transform: translateX(-50%) !important; width: 22px !important; height: 32px !important; max-width: 24px !important; max-height: 34px !important; z-index: 35 !important; pointer-events: auto !important; cursor: pointer !important; transform-origin: top center !important; animation: hwHangingBatSway 4s ease-in-out infinite alternate !important; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65)) !important; } .hw-perched-bat svg { width: 22px !important; height: 32px !important; max-width: 22px !important; max-height: 32px !important; display: block !important; } .hw-perched-bat:hover { animation-play-state: paused !important; transform: translateX(-50%) scale(1.18) rotate(8deg) !important; } .hw-perched-bat.hw-perched-startled { animation: hwHangingBatStartled 0.8s ease-in-out forwards !important; } @keyframes hwHangingBatSway { 0% { transform: translateX(-50%) rotate(-6deg); } 50% { transform: translateX(-50%) rotate(0deg); } 100% { transform: translateX(-50%) rotate(6deg); } } @keyframes hwHangingBatStartled { 0% { transform: translateX(-50%) rotate(0deg) scale(1); } 20% { transform: translateX(-50%) rotate(-16deg) scale(1.22); } 40% { transform: translateX(-50%) rotate(18deg) scale(1.25); } 60% { transform: translateX(-50%) rotate(-8deg) scale(1.15); } 80% { transform: translateX(-50%) rotate(4deg) scale(1.05); } 100% { transform: translateX(-50%) rotate(0deg) scale(1); } } /* ============================================================ /* ============================================================ 7. GOTHIC GRAVEYARD FOOTER (REMOVED / DISABLED) ============================================================ */ .hw-footer-graveyard, .hw-graveyard-svg { display: none !important; } 8. HALLOWEEN COHESIVE THEME OVERRIDES (Dark & Light degradé) ============================================================ */ [data-seasonal="halloween"]:not(.light-mode), body[data-seasonal="halloween"]:not(.light-mode) { background-color: #05040a !important; background-image: radial-gradient(circle at 80% 12%, rgba(28, 16, 44, 0.45) 0%, rgba(10, 7, 18, 0.95) 45%, #05040a 100%) !important; background-attachment: fixed !important; } html.light-mode[data-seasonal="halloween"], body.light-mode[data-seasonal="halloween"], .light-mode[data-seasonal="halloween"] { background-color: #ffedd5 !important; background-image: linear-gradient(180deg, #fff7ed 0%, #ffedd5 40%, #fed7aa 80%, #fcd34d 100%) !important; background-attachment: fixed !important; color: #1c1917 !important; } [data-seasonal="halloween"] footer, /* Halloween Dark Mode Footer */ html[data-seasonal="halloween"]:not(.light-mode) footer, body[data-seasonal="halloween"]:not(.light-mode) footer { background: #05040a !important; border-top: 1px solid rgba(249, 115, 22, 0.2) !important; padding: 60px 0 20px !important; box-shadow: none !important; } html[data-seasonal="halloween"]:not(.light-mode) footer p, html[data-seasonal="halloween"]:not(.light-mode) footer h4, html[data-seasonal="halloween"]:not(.light-mode) footer a, html[data-seasonal="halloween"]:not(.light-mode) footer li { color: #f4f4f5 !important; } html[data-seasonal="halloween"]:not(.light-mode) footer a:hover { color: #f97316 !important; } html[data-seasonal="halloween"]:not(.light-mode) footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Halloween Light Mode Footer - Seamless warm match with light theme */ html.light-mode[data-seasonal="halloween"] footer, body.light-mode[data-seasonal="halloween"] footer, .light-mode[data-seasonal="halloween"] footer { background: #fff7ed !important; border-top: 1px solid #fed7aa !important; padding: 60px 0 20px !important; box-shadow: none !important; color: #1c1917 !important; } html.light-mode[data-seasonal="halloween"] footer p, html.light-mode[data-seasonal="halloween"] footer h4, html.light-mode[data-seasonal="halloween"] footer a, html.light-mode[data-seasonal="halloween"] footer li, .light-mode[data-seasonal="halloween"] footer p, .light-mode[data-seasonal="halloween"] footer h4, .light-mode[data-seasonal="halloween"] footer a, .light-mode[data-seasonal="halloween"] footer li { color: #1c1917 !important; } html.light-mode[data-seasonal="halloween"] footer .footer-logo .text-white, body.light-mode[data-seasonal="halloween"] footer .footer-logo .text-white, .light-mode[data-seasonal="halloween"] footer .footer-logo .text-white { color: #1c1917 !important; } html.light-mode[data-seasonal="halloween"] footer a:hover, body.light-mode[data-seasonal="halloween"] footer a:hover, .light-mode[data-seasonal="halloween"] footer a:hover { color: #ea580c !important; } html.light-mode[data-seasonal="halloween"] footer .footer-bottom, body.light-mode[data-seasonal="halloween"] footer .footer-bottom, .light-mode[data-seasonal="halloween"] footer .footer-bottom { border-top: 1px solid #fed7aa !important; } html.light-mode[data-seasonal="halloween"] footer .footer-bottom p, body.light-mode[data-seasonal="halloween"] footer .footer-bottom p, .light-mode[data-seasonal="halloween"] footer .footer-bottom p { color: #78716c !important; } html.light-mode[data-seasonal="halloween"] footer .footer-social-link, body.light-mode[data-seasonal="halloween"] footer .footer-social-link, .light-mode[data-seasonal="halloween"] footer .footer-social-link { color: #78716c !important; } /* Primary Buttons */ [data-seasonal="halloween"] .bg-nexo-primary, [data-seasonal="halloween"] button.bg-nexo-primary, [data-seasonal="halloween"] #btn-submit, [data-seasonal="halloween"] .btn-primary, [data-seasonal="halloween"] .bg-blue-600, [data-seasonal="halloween"] .bg-nexo-accent { background-color: #ea580c !important; background-image: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important; color: #ffffff !important; } [data-seasonal="halloween"] .bg-nexo-primary:hover, [data-seasonal="halloween"] #btn-submit:hover, [data-seasonal="halloween"] .btn-primary:hover, [data-seasonal="halloween"] .bg-blue-600:hover, [data-seasonal="halloween"] .bg-nexo-accent:hover { background-color: #c2410c !important; background-image: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important; box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5) !important; } [data-seasonal="halloween"] .text-nexo-accent, [data-seasonal="halloween"] .text-nexo-primary, [data-seasonal="halloween"] .text-sky-400, [data-seasonal="halloween"] .text-blue-500, [data-seasonal="halloween"] .text-accent { color: #f97316 !important; } /* ============================================================ 9. PORTAL AUTH THEME OVERRIDES (2FA, Forgot, Reset, Force) ============================================================ */ [data-seasonal="halloween"] .kali-border { border: 1px solid rgba(249, 115, 22, 0.45) !important; box-shadow: 0 0 25px rgba(249, 115, 22, 0.22) !important; } [data-seasonal="halloween"] .kali-input:focus { border-color: #f97316 !important; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.35) !important; } [data-seasonal="halloween"] .w-16.h-16.rounded-full { background-color: rgba(249, 115, 22, 0.15) !important; border-color: rgba(249, 115, 22, 0.45) !important; color: #f97316 !important; filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.45)) !important; } [data-seasonal="halloween"] .tab-btn.active { background: rgba(249, 115, 22, 0.18) !important; border-color: rgba(249, 115, 22, 0.7) !important; color: #f97316 !important; box-shadow: 0 0 10px rgba(249, 115, 22, 0.25) !important; } [data-seasonal="halloween"] .otp-input-app:focus, [data-seasonal="halloween"] .otp-input-email:focus { border-color: #f97316 !important; box-shadow: 0 0 14px rgba(249, 115, 22, 0.55) !important; } [data-seasonal="halloween"] svg polygon[points*="50 5"] { stroke: #f97316 !important; fill: rgba(249, 115, 22, 0.12) !important; } [data-seasonal="halloween"] svg polyline[points*="25 50"] { stroke: #f97316 !important; }