/* ============================================================ Mobile menu fix — Sapiens Laboratories Única fuente de verdad visual: .navbar.w-nav.sl-menu-open El JS (js/mobile-menu-fix.js) solo agrega/quita esa clase. Reemplaza al widget w-nav de Webflow y a las interacciones IX2 NAVBAR_OPEN/CLOSE en mobile (≤991px). No toca desktop. ============================================================ */ /* Backdrop transparente: atrapa el tap fuera del panel y bloquea la página mientras el menú está abierto. Vive en , debajo de .master-navigation (z-index 999). Sin cambio visual. */ .sl-menu-backdrop { position: fixed; inset: 0; z-index: 998; background: transparent; display: none; } .sl-menu-backdrop.is-active { display: block; } /* Bloqueo de scroll del documento con el menú abierto. El panel conserva su scroll interno (.nav-menu overflow:auto). */ html.sl-menu-lock, html.sl-menu-lock body { overflow: hidden; } /* ============================================================ Dropdown desktop (Menu / Company): alinear el panel con la card del navbar y desplegarlo hacia abajo, como en producción. El tema lo dejaba position:fixed de orilla a orilla y sin animación (css/evermind-template.css → .dropdown-list.w--open). ============================================================ */ @media screen and (min-width: 992px) { /* Containing block determinista: los paneles del dropdown usan position:fixed, cuyo ancla depende de si algún ancestro tiene transform. Las interacciones IX2 a veces dejan un transform en .navbar (panel = card del navbar, como producción) y a veces no (panel = viewport, de orilla a orilla). Este transform fijo hace que el panel se ancle SIEMPRE a la card del navbar. */ .navbar.w-nav { transform: translate3d(0, 0, 0); } .navbar .dropdown-list.w--open { /* geometría del tema (left:0/right:0/width:100%) ahora resuelve contra la card del navbar; solo añadimos el remate visual */ border-bottom-left-radius: var(--_🔘-radius---radius--large); border-bottom-right-radius: var(--_🔘-radius---radius--large); overflow: hidden; /* despliegue hacia abajo: cortina que revela de arriba a abajo */ animation: sl-dropdown-down 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes sl-dropdown-down { from { clip-path: inset(0 0 100% 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } } } @media screen and (max-width: 991px) { /* --- Panel del menú ------------------------------------------- El menú queda EN FLUJO dentro de .nav-wrap (flex-wrap) para que el navbar crezca y su fondo glass (.nav-bg, absolute inset 0) envuelva barra + menú como una sola card — el mismo look que producía el hotfix anterior, pero derivado de una única clase. Cerrado: display:none + visibility + pointer-events = imposible que quede texto flotante o contenido invisible interactivo. */ .navbar.w-nav .nav-wrap { flex-wrap: wrap; } .navbar.w-nav .nav-menu { display: none; order: 99; /* fila propia, debajo de logo y botones */ width: 100%; position: static; visibility: hidden; pointer-events: none; } .navbar.w-nav.sl-menu-open .nav-menu { display: block; visibility: visible; pointer-events: auto; /* keyframes (no transition): corren al pasar de display:none a block y, con fill both, mantienen opacity 1 por encima del opacity:0 inline que IX2 deja aplicado en mobile. */ animation: sl-menu-in 0.25s ease both; } @keyframes sl-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* --- Icono del botón: ☰ cerrado / ✕ abierto ------------------- Sustituye el swap por display que hacían las interacciones IX2 a-141/a-142 (que quedaban desincronizadas al interrumpir). */ .navbar.w-nav .menu-button-inner.open { display: flex; } .navbar.w-nav .menu-button-inner.close { display: none; } .navbar.w-nav.sl-menu-open .menu-button-inner.open { display: none; } .navbar.w-nav.sl-menu-open .menu-button-inner.close { display: flex; } }