/* ================================================================= MEGA MENU Header + Mega Menu dropdown as ONE animated frost card. Loaded by inc/enqueue.php. JS: assets/js/megamenu.js. ================================================================= */ /* --------------------------------------------------------------- SETUP (Elementor) Header container add the class mega-header (keep .header too), and REMOVE the old shrink rules from its Custom CSS — they live here now. Dropdown panels remove .gradient-frost (and any background / radius) from the container inside each .e-n-menu-content: the card is painted by the header now, the panel is transparent. HOW IT WORKS The header gets a ::before layer painted with --gradient-frost that starts at the top of the header and extends DOWN by --mm-panel, the height of whichever dropdown is open (measured by megamenu.js). So: - header and dropdown share one continuous gradient card; - switching Expertise -> Our team just changes --mm-panel, and the height transition makes the card grow/shrink to the new content (Elementor cross-fades the text on top, as it already did); - closing sets it to 0 and fades the layer out. Elementor hides inactive panels with display:none, and CSS animations restart whenever an element is re-shown — so the staggered fade-up on the panel's widgets replays on EVERY open, 1 -> 2 -> back to 1 included. --mm-i (per-widget order) is set by the script. Shrink-on-scroll is latched while a panel is open: the script marks the header data-mm-lock="full" or "shrunk" at the moment it opens, and the shrink styles only follow the sticky class when there is no lock. Nothing moves under an open menu, so the dropdown can't drift off-centre mid-hover. The gradient layer sits above the header's own background, so the scrolled blue/blur is covered while open. Dials (set on .mega-header, e.g. in its Custom CSS): --mm-height header height (100px) --mm-height-shrunk scrolled header height (75px) --mm-logo-shrunk scrolled logo height (36px) --mm-radius card's bottom corners (24px) --mm-inset card inset from the viewport sides (0px) --mm-speed grow/shrink duration (0.45s) --mm-stagger per-item delay (30ms) data-mm-grace="160" ms the card stays open while the cursor crosses the gap between two titles --------------------------------------------------------------- */ /* ---- Header: every width ---------------------------------------- Fixed height, shrink-on-scroll with the translucent blue + blur, and the smaller logo. These apply on mobile too (where the mega menu is replaced by the hamburger). Override the sizes per breakpoint in the header's Custom CSS, e.g. @media (max-width: 767px) { .mega-header { --mm-height: 72px; --mm-height-shrunk: 60px; } } */ .mega-header { --mm-panel: 0px; height: var(--mm-height, 100px); width: 100vw !important; border-bottom: 2px solid transparent; transition: height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } .mega-header .site-logo svg { transition: height 0.3s ease; } /* scrolled: shrink + translucent blue, unless latched "full" by an open panel */ .mega-header.elementor-sticky--effects:not([data-mm-lock="full"]) { height: var(--mm-height-shrunk, 75px); background-color: rgb(from var(--ipg-powder) r g b / 0.5); border-bottom-color: var(--ipg-cobalt); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mega-header.elementor-sticky--effects:not([data-mm-lock="full"]) .site-logo svg { height: var(--mm-logo-shrunk, 36px) !important; } /* while a panel is open the card owns the look: no border under the header, whatever the normal/scrolled states set (incl. Elementor) */ .mega-header.mm-open { border-bottom-color: transparent !important; } /* ---- Mega menu card: desktop only --------------------------------- Below 768px the menu is Elementor's hamburger, so none of this runs. */ @media (min-width: 768px) { /* the shared card: header + open panel. NOTE: Elementor styles every container's ::before as a background overlay that COPIES the container's border, radius and box onto the pseudo — which put the header's 2px bottom border along the bottom of the card. Hence the .e-con specificity bump and the explicit border/width/bottom resets below. */ .e-con.mega-header::before { content: ""; position: absolute; top: 0; bottom: auto; left: var(--mm-inset, 0px); right: var(--mm-inset, 0px); width: auto; height: calc(100% + var(--mm-panel)); border: 0 !important; border-radius: 0 0 var(--mm-radius, 24px) var(--mm-radius, 24px); background: var(--gradient-frost); opacity: 0; pointer-events: none; z-index: -1; /* above the header's background, below its content */ transition: height var(--mm-speed, 0.45s) cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .e-con.mega-header.mm-open::before { opacity: 1; } /* panels are transparent — the card behind them is the background */ .mega-header .e-n-menu-content > .e-con { background: transparent; } /* Elementor's own panel fade: quick, so it reads as one motion with the card */ .mega-header .e-n-menu { --n-menu-open-animation-duration: 220ms; } /* staggered fade-up of everything in the open panel; replays on every open */ .mega-header .e-n-menu-content > .e-con.e-active .elementor-widget { animation: mm-item-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(90ms + var(--mm-i, 0) * var(--mm-stagger, 30ms)); } } @keyframes mm-item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mega-header, .mega-header .site-logo svg, .e-con.mega-header::before { transition: opacity 0.2s ease !important; } .mega-header .e-n-menu-content > .e-con.e-active .elementor-widget { animation: none; } }