/* ========================================================================== IECC-SL Custom Styles Overrides and animations not covered by Tailwind utility classes. ========================================================================== */ /* -------------------------------------------------------------------------- Progressive Enhancement Without JS, the mobile nav is visible so users can still navigate. When JS loads, it adds `js-enabled` to and the hamburger toggle controls visibility via the `hidden` class. -------------------------------------------------------------------------- */ /* No JS: show mobile nav by default on small screens */ @media (max-width: 767px) { #mobile-nav { display: block; } /* Hide hamburger button when JS is unavailable (nav is always visible) */ #nav-toggle { display: none; } .js-enabled #nav-toggle { display: block; } } /* When JS is available, hide mobile nav by default (JS toggles it) */ .js-enabled #mobile-nav { display: none !important; } /* When JS toggles the menu open, it removes the `hidden` class */ .js-enabled #mobile-nav:not(.hidden) { display: block !important; } /* -------------------------------------------------------------------------- Focus Styles — Keyboard Navigation Visible focus ring for all interactive elements when using keyboard. -------------------------------------------------------------------------- */ *:focus-visible { outline: 2px solid #4ABBE0; outline-offset: 2px; border-radius: 2px; } /* Remove outline for mouse/touch users */ *:focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- WhatsApp floating button pulse animation -------------------------------------------------------------------------- */ .whatsapp-pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.5); } 70% { box-shadow: 0 0 0 15px rgba(72, 187, 120, 0); } 100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); } } /* -------------------------------------------------------------------------- Hero section overlay -------------------------------------------------------------------------- */ .hero-overlay { position: relative; } .hero-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(74, 187, 224, 0.7); z-index: 1; } .hero-overlay > * { position: relative; z-index: 2; } /* -------------------------------------------------------------------------- Honeypot field — invisible to real users, traps bots -------------------------------------------------------------------------- */ .form-hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; opacity: 0; pointer-events: none; }