/* ============================================================================ WST: Next-Gen JetMenu mobile menu — faithful restore of the original full-screen Elevato menu. INFRA-1840 · 2026-06-17 (v2, rebuilt to match) Why: jet-menu 2.4.0 -> 3.0.1.1 swapped the mobile menu engine. Next-Gen renders a small light dropdown panel instead of the original full-screen dark overlay. This skin restyles the Next-Gen mobile menu to match the original design (dark overlay, white UPPERCASE Montserrat items, cyan gradient divider, large phone, social row). Scope: everything is inside @media (max-width:1024px). The tablet/mobile JetMenu widget (a76027b, hidden-desktop) has dropdown-breakpoint=lg (<1025px) since INFRA-1901 2026-09-29, so it is the TOGGLE/overlay at every width it is visible - as legacy was, which showed MENU at 900px. (Before that it used the Next-Gen default breakpoint 768 and rendered an inline tablet nav at 769-1024px, and this block was capped at 768px.) Also scoped to .jet-mega-menu--dropdown-open so the closed state is never touched. The desktop widget is styled by wst-nextgen-desktop-menu.css. Fully reversible. Target spec was measured from the frozen original at https://elevato-old.jlb.webservice.team : item label 24px / 400 / 1.2px tracking / uppercase / #fff / Montserrat overlay near-black (original rgba(0,0,0,.87)) divider 6px linear-gradient(90deg,#0FE2FA,#1A9AE4) phone 36px / 400 / uppercase / #fff "GET SOCIAL"24px / 400 / uppercase / #fff ============================================================================ */ @media (max-width:1024px){ /* ---- full-screen dark overlay panel ---- */ .jet-mega-menu--dropdown-open .jet-mega-menu-container{ position:fixed !important; inset:0 !important; width:100vw !important; height:100dvh !important; max-width:none !important; max-height:none !important; margin:0 !important; transform:none !important; background:#08090c !important; /* near-black, matches original overlay */ padding:18px 32px 56px !important; overflow-y:auto !important; z-index:99990 !important; display:block !important; box-shadow:none !important; border:0 !important; } /* thin centered phone bar at the very top (injected by the companion JS) */ .jlb-mm-topbar{ width:100% !important; text-align:center !important; margin:0 0 20px !important; } .jlb-mm-topbar a{ color:#fff !important; font-family:Montserrat,sans-serif !important; font-size:12px !important; font-weight:400 !important; letter-spacing:1.2px !important; text-decoration:none !important; } /* logo at top-left of the overlay (injected by the companion JS) */ .jlb-mm-logo{ display:block !important; width:142px !important; height:34px !important; margin:0 0 34px -2px !important; background-position:left center !important; background-size:contain !important; background-repeat:no-repeat !important; } /* ---- closed toggle: the original "MENU" box, not Next-Gen's small hamburger ---- (INFRA-1901: legacy .jet-mobile-menu__toggle measured on prod at 900px: 48x35, 4px solid #fff top + bottom bars, "MENU" 13.8px/400 #fff, 0 2px pad) */ .jet-mega-menu:not(.jet-mega-menu--dropdown-open) > .jet-mega-menu-toggle{ width:48px !important; height:35px !important; box-sizing:border-box !important; border-top:4px solid #fff !important; border-bottom:4px solid #fff !important; padding:0 2px !important; background:transparent !important; display:flex !important; align-items:center !important; justify-content:center !important; } .jet-mega-menu:not(.jet-mega-menu--dropdown-open) > .jet-mega-menu-toggle .jet-mega-menu-toggle-icon{ display:none !important; } .jet-mega-menu:not(.jet-mega-menu--dropdown-open) > .jet-mega-menu-toggle::before{ content:"MENU"; color:#fff; font-family:Montserrat, sans-serif; font-size:13.8px; font-weight:400; line-height:20.7px; letter-spacing:normal; } /* ---- close (X) — keep above the overlay so it can always be tapped ---- */ .jet-mega-menu-toggle{ color:#fff !important; } .jet-mega-menu--dropdown-open .jet-mega-menu-toggle{ position:fixed !important; top:24px !important; right:22px !important; z-index:100001 !important; background:transparent !important; } .jet-mega-menu--dropdown-open .jet-mega-menu-toggle-icon, .jet-mega-menu--dropdown-open .jet-mega-menu-toggle-icon *{ color:#fff !important; font-size:26px !important; } /* ---- item list ---- */ .jet-mega-menu--dropdown-open .jet-mega-menu-list{ display:flex !important; flex-direction:column !important; align-items:stretch !important; width:100% !important; gap:0 !important; } .jet-mega-menu--dropdown-open .jet-mega-menu-list > .jet-mega-menu-item{ width:100% !important; border:0 !important; /* original has no separators */ background:transparent !important; box-shadow:none !important; } .jet-mega-menu--dropdown-open .jet-mega-menu-item__inner{ padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; } /* top-level links: white UPPERCASE Montserrat, 24px */ .jet-mega-menu--dropdown-open .jet-mega-menu-item__link--top-level{ color:#fff !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; font-family:Montserrat, sans-serif !important; font-size:24px !important; font-weight:400 !important; letter-spacing:1.2px !important; text-transform:uppercase !important; padding:20px 0 !important; width:100% !important; justify-content:flex-start !important; gap:0 !important; line-height:1.2 !important; } .jet-mega-menu--dropdown-open .jet-mega-menu-item__link--top-level:hover, .jet-mega-menu--dropdown-open .jet-mega-menu-item__link--top-level:focus{ color:#0FE2FA !important; } .jet-mega-menu--dropdown-open .jet-mega-menu-item__label{ color:inherit !important; } /* parent-item chevron points RIGHT (like the original), rotates down when open */ .jet-mega-menu--dropdown-open .jet-mega-menu-item__dropdown{ color:#fff !important; margin-left:auto !important; } .jet-mega-menu--dropdown-open .jet-mega-menu-item__dropdown .fa-angle-down{ display:inline-block; transform:rotate(-90deg) !important; transition:transform .25s ease; } .jet-mega-menu--dropdown-open .jet-mega-menu-item--active > .jet-mega-menu-item__inner .jet-mega-menu-item__dropdown .fa-angle-down, .jet-mega-menu--dropdown-open .jet-mega-menu-item--opened > .jet-mega-menu-item__inner .jet-mega-menu-item__dropdown .fa-angle-down{ transform:rotate(0deg) !important; } /* sub-items (e.g. About -> Meet the Team) */ .jet-mega-menu--dropdown-open .jet-mega-menu-sub-menu .jet-mega-menu-item__link{ font-size:16px !important; color:#cfd3d6 !important; text-transform:uppercase !important; letter-spacing:1px !important; padding:12px 0 12px 18px !important; font-weight:400 !important; } .jet-mega-menu--dropdown-open .jet-mega-menu-sub-menu .jet-mega-menu-item__link:hover{ color:#0FE2FA !important; } /* ---- phone + social footer (injected by the companion JS) ---- */ .jlb-mm-extra{ width:100%; margin-top:34px; padding-top:30px; border-top:6px solid transparent; border-image:linear-gradient(90deg,#0FE2FA 0%,#1A9AE4 100%) 1; /* cyan->blue gradient bar */ } .jlb-mm-extra .jlb-phone{ display:block; color:#fff; font-family:Montserrat,sans-serif; font-size:36px; font-weight:400; letter-spacing:1.2px; text-decoration:none; line-height:1.25; margin-bottom:22px; } .jlb-mm-extra .jlb-social-label{ color:#fff; font-family:Montserrat,sans-serif; font-size:24px; font-weight:400; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:18px; } .jlb-mm-extra .elementor-social-icons-wrapper{ display:flex !important; gap:22px !important; } .jlb-mm-extra .elementor-social-icon{ background:transparent !important; color:#fff !important; font-size:22px !important; width:auto !important; height:auto !important; padding:0 !important; } .jlb-mm-extra .elementor-social-icon i{ color:#fff !important; } .jlb-mm-extra .elementor-social-icon:hover i{ color:#0FE2FA !important; } /* lock background page scroll while the menu is open */ html:has(.jet-mega-menu--dropdown-open){ overflow:hidden !important; } }