/* New work lives here, kept separate from main.css for isolated, single-file deploys. */ /* * Mobile menu: full-page flyout override for UberMenu. * UberMenu's own default mobile behavior expands the nav in normal document flow with a * fixed max-height (500px), which is what causes gaps (short menus) and layout shifting / * overlap (tall mega-menus overflow past the box). This takes the nav out of flow entirely * and gives it its own scroll region instead. * Open/close state is UberMenu's own: it just removes/adds `.ubermenu-responsive-collapse` * on the nav - we only react to that class, we don't reimplement the toggle. * * Selector uses the #ubermenu-main-2-main_menu ID (not just classes) because of a pre-existing * inline `nav#ubermenu-main-2-main_menu { max-height: calc(100vh - 116px) !important; overflow: * scroll !important; }` rule (from the previous team's custom CSS, active at max-width:600px) * that otherwise wins on specificity over any class-only !important override, regardless of * source order. */ @media screen and (max-width: 1024px) { /* * `top` + `bottom:0` + `height:auto` is supposed to stretch this to fill the viewport * below the header - and does, reliably, in every desktop-resized/DevTools test this was * built against. Real mobile Safari is a different rendering engine with its own history * of `position:fixed` sizing quirks that desktop-engine device emulation can't reproduce, * and is exactly where this collapsed to a sliver only as tall as its own content * instead of stretching. Driving the height explicitly via `calc()` instead of leaning on * that implicit stretch removes the ambiguity outright. * * Tried `100dvh` here first, but that's what left the last item (Request A Quote) cut * off with no way to scroll to it - `dvh` has a real history of not recalculating * reliably for `position:fixed` elements specifically on some Safari versions. `100svh` * ("small" viewport height - the conservative size assuming every toolbar is fully * expanded) trades a little unused space when a toolbar happens to be hidden for content * never being unreachable. (Support-wise `svh`/`lvh`/`dvh` all shipped together, so * anything new enough to read one understands the others too.) * * `top` is `var(--ezdock-header-height, 70px)`, set by custom.js from * .ubermenu-responsive-toggle's real on-screen position (getBoundingClientRect) every * time the menu opens. A static number here was tried and genuinely can't work: the * site's promo banner (.notification-popup) is dismissible via a 30-day cookie, so the * header is a real, verified ~65px taller for a visitor who hasn't closed it than for one * who has (confirmed directly against the live site: toggle bottom sits at 128px with the * banner showing, ~74px without) - any single hardcoded value is only ever correct for * one of those two states. `height` reuses the same variable so the two can't drift out * of sync with each other. */ #ubermenu-main-2-main_menu.ubermenu-responsive:not(.ubermenu-responsive-collapse) { position: fixed !important; top: var(--ezdock-header-height, 70px); left: 0; right: 0; bottom: 0; width: 100% !important; max-height: none !important; height: calc(100vh - var(--ezdock-header-height, 70px)) !important; height: calc(100svh - var(--ezdock-header-height, 70px)) !important; overflow-y: auto !important; /* * wp-admin's Additional CSS field (Customizer - database-stored, invisible to any * file search, see the .ab-sticky-btn comment further down for how that surfaced) has * its own `nav#ubermenu-main-2-main_menu { max-height: calc(100vh - 116px) !important; * overflow: scroll !important; }` at max-width:600px. Our selector's specificity * (1 ID + 2 classes) already beats theirs (1 ID + 1 type) for every property we both * set, EXCEPT overflow-x - their `overflow` shorthand sets it too, and since we never * declared it ourselves there was nothing to out-specificity, so it won by default. * Closing that gap explicitly rather than leaving an unwanted horizontal scrollbar on * the flyout to chance. */ overflow-x: hidden !important; -webkit-overflow-scrolling: touch; visibility: visible !important; /* * 99998 lost to a third-party chat widget and the "Become a Dealer" tab (the tab's * actual CSS also turned out to live in that same Additional CSS field) - this site's * z-index values elsewhere already go as high as 99999999999999999 (main.css), * and third-party chat widgets commonly inject their own near-the-max value at * runtime, invisible to anything in our own stylesheets. 2147483647 is the actual * ceiling (max 32-bit signed int) browsers accept for z-index, so nothing legitimate * can out-rank it - a full-screen menu takeover should always win anyway. */ z-index: 2147483647 !important; background: #fff; padding-bottom: 40px; } /* * Setting max-height:none above (rather than letting it animate) means the browser * never fires transitionend on this element, so UberMenu's own cleanup - which waits * for that event to remove `.ubermenu-in-transition` - never runs. That class is stuck * on permanently as a result, and its `overflow:hidden !important` (applied to both the * nav and this inner .ubermenu-nav) needs an explicit override here on the child too. */ #ubermenu-main-2-main_menu.ubermenu-responsive:not(.ubermenu-responsive-collapse) .ubermenu-nav { min-height: 100%; overflow: visible !important; } /* * Swap the hamburger icon for a close (X) once UberMenu marks the toggle open, by * overriding :before's own content rather than hiding it and adding a separate ::after - * that way it inherits :before's existing font-size/positioning/etc automatically instead * of needing every property re-declared by hand (and inevitably missing one, as happened * with font-size the first time around). */ .ubermenu-responsive-toggle.ubermenu-responsive-toggle-open .fa-bars:before { content: "\f00d"; } /* * Lock the page underneath while the flyout is open, and lift .body-wrapper's * `overflow: clip` (main.css - added to fix an unrelated overflow bug, see the comment * above where the div opens in header.php) which otherwise clips our fixed-position * flyout down to a squashed height. Both react directly to the nav's own open state * (UberMenu removes .ubermenu-responsive-collapse itself) via :has(), so this doesn't * depend on any of our own JS running. * * `overflow: hidden` alone only blocks the scrollbar/wheel - it's well known not to stop * touch-driven scrolling (rubber-band/overscroll) on mobile Safari, which is exactly * what "the page still scrolls when the menu is open" was. `position: fixed` on both * html and body actually removes them from the scrolling process entirely, which is the * only thing that reliably stops it there. It also does the "always at the top when * open" part for free: a position:fixed body renders its content starting from ITS OWN * top edge (the true top of the page), regardless of whatever `window.scrollY` was when * it got locked - and since the real scroll position is never actually changed, only * visually overridden, un-fixing it on close naturally puts the page back exactly where * it was, with no need to read/restore `window.scrollY` in JS at all. */ html:has(#ubermenu-main-2-main_menu.ubermenu-responsive:not(.ubermenu-responsive-collapse)) { overflow: hidden; } body:has(#ubermenu-main-2-main_menu.ubermenu-responsive:not(.ubermenu-responsive-collapse)) { position: fixed; top: 0; left: 0; width: 100%; overflow: hidden; } body:has(#ubermenu-main-2-main_menu.ubermenu-responsive:not(.ubermenu-responsive-collapse)) .body-wrapper { overflow: visible !important; } /* * Raising our own z-index was never going to reliably win against these - .ab-sticky-btn * (the rotated "Become a Dealer" tab) and the Tidio chat widget (#tidio-chat) aren't in * our own stylesheets at all (the dealer tab's actual CSS lives in wp-admin's Additional * CSS field, database-stored - invisible to any file search, which is why it took this * long to find), and Tidio in particular renders its actual button inside a shadow DOM * behind a `position:fixed;width:100%;height:100%;z-index:999999999 !important` host, set * inline - defensively built to always stay on top, not something a bigger number on our * own element reliably beats. A full-screen menu takeover should hide distracting floating * UI anyway - simplest fix is to hide both outright while open, `display:none` doesn't * care about shadow DOM or stacking contexts at all, sidestepping the question entirely. */ /* * Same story for Klaviyo's "JOIN OUR CREW" teaser popup - also position:fixed, also * floats over everything by design. Its class includes a generated suffix * (`kl-teaser-UHjaDi`) that could easily be different on another render/campaign, so * matching the stable `kl-teaser-` prefix via an attribute selector is more robust than * hardcoding the exact class. */ body:has(#ubermenu-main-2-main_menu.ubermenu-responsive:not(.ubermenu-responsive-collapse)) .ab-sticky-btn, body:has(#ubermenu-main-2-main_menu.ubermenu-responsive:not(.ubermenu-responsive-collapse)) #tidio-chat, body:has(#ubermenu-main-2-main_menu.ubermenu-responsive:not(.ubermenu-responsive-collapse)) [class*="kl-teaser-"] { display: none !important; } /* The header already has a persistent search box - hide UberMenu's own duplicate one */ .ubermenu-item:has(> .ubermenu-content-block .ubermenu-search) { display: none !important; } /* * ...except below 500px, where main.css hides the header's own search entirely * (`.headsrch { display: none }`, assets/css/main.css) to make room for the logo and * menu toggle. Below that width this duplicate becomes the only search box left on the * page, so un-hide it rather than leaving mobile with no way to search at all. */ @media screen and (max-width: 500px) { .ubermenu-item:has(> .ubermenu-content-block .ubermenu-search) { display: block !important; } } /* * UberMenu's own CSS never rotates the chevron on open (checked ubermenu.css directly - * the :after arrow is a static character, no .ubermenu-active variant exists). Add it * ourselves, reacting to the same .ubermenu-active class UberMenu already toggles. (The * transition itself lives with the rest of the badge styling further down.) */ #ubermenu-main-2-main_menu .ubermenu-active > .ubermenu-target::after { transform: rotate(180deg); } /* * Same stuck-.ubermenu-in-transition bug as the top-level nav, hitting submenu panels * this time. ubermenu.js's closeSubmenu() waits for a transitionend event on `> ul` * to know when it's safe to remove .ubermenu-in-transition - but this mega-menu's * submenu is a `
`, not a `