.fl-node-u8y6v904pd2x > .fl-row-content-wrap { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; } .fl-node-u8y6v904pd2x > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } @media ( max-width: 768px ) { .fl-node-u8y6v904pd2x.fl-row > .fl-row-content-wrap { padding-right:0px; padding-left:0px; } } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-8fir6oek5xgq { width: 100%; } /* ========================================================================= v5 Header — static structure + responsive system + components. Theming comes entirely from --v5-* custom properties defined per node in includes/frontend.css.php. This file never hardcodes a themed color; it only uses var(--v5-*, fallback). One breakpoint system, fluid clamp() sizing, a single z-index scale, zero !important on layout, and JS-assisted overflow collapse so the nav never gets cut off at any width. Breakpoints: mobile <=767 | tablet 768-1023 | desktop >=1024 ========================================================================= */ .v5-header-root { /* z-index scale — single source of truth */ --v5-z-header: 1000; --v5-z-overlay: 1100; --v5-z-dropdown: 1200; --v5-z-drawer: 1250; --v5-z-modal: 1300; --v5-header-min-h: clamp(60px, 8vw, 84px); --v5-pad-x: clamp(16px, 3vw, 40px); --v5-gap: clamp(10px, 2vw, 28px); position: relative; font-family: inherit; } .v5-header-root *, .v5-header-root *::before, .v5-header-root *::after { box-sizing: border-box; } .v5-header-root .transition { transition: all .25s ease; } /* Let the header span the full width of its Beaver Builder row (override the row's fixed max-width / padding so the chrome is edge-to-edge). */ header > .fl-row:has(.v5-header-root) > .fl-row-content-wrap > .fl-row-content { width: 100%; min-width: 100%; max-width: 100%; padding: 0; margin: 0; } /* ---- Header shell ------------------------------------------------------- */ .v5-header { position: relative; /* anchor for the full-width megamenu dropdown */ background: var(--v5-bg, #fff); box-shadow: 0 2px 10px rgba(0, 0, 0, .07); width: 100%; } .v5-header-root.v5-header--sticky .v5-header { position: sticky; top: 0; /* z-index: var(--v5-z-header); */ } /* Pin the WHOLE theme-builder header part — location bar included. The rule above can only travel within .v5-header-root (its parent), whose height ends right below the main header, so after ~a location-bar's worth of scroll the location bar departs and the header follows it off-screen. This element's parent is .fl-page (full page height), so sticky here holds for the entire scroll. Beaver Builder's own data-sticky handling only runs at >= medium widths, and its fixed-position class loads later so it still wins there. Literal z-index: the --v5-z-* props live on .v5-header-root, a descendant, and aren't visible here. */ header.fl-builder-content[data-type="header"]:has(.v5-header-root.v5-header--sticky) { position: sticky; top: 0; z-index: 1000; } .v5-header-inner { display: flex; align-items: center; gap: var(--v5-gap); min-height: var(--v5-header-min-h); padding-inline: var(--v5-pad-x); width: 100%; justify-content: space-between; } .v5-header-brand-cluster { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 16px); flex: 0 0 auto; min-width: 0; } /* ---- Logo --------------------------------------------------------------- */ .v5-header-logo { display: flex; align-items: center; line-height: 0; } .v5-header-logo a { display: inline-flex; align-items: center; } .v5-header-logo img, .v5-header-logo > a > * { max-width: 220px; max-height: 48px; width: auto; height: auto; margin-right: 0; object-fit: contain; } .v5-header-logo--center { margin-inline: auto; } .v5-header-logo--right { margin-left: auto; } /* ---- Primary navigation ------------------------------------------------- */ .v5-header-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; } .v5-header-desktop-menu { width: 100%; display: flex; justify-content: flex-end; } .v5-header-menu { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(2px, 0.25vw, 10px); margin: 0; padding: 0; list-style: none; } .v5-header-menu li { position: relative; } .v5-header-menu a { display: inline-flex; align-items: center; color: var(--v5-text, #333); text-decoration: none !important; white-space: nowrap; padding: clamp(6px, 1vw, 12px) clamp(8px, 1vw, 16px); font-size: clamp(13px, 1.2vw, 16px); line-height: 1.2; border-radius: 6px; transition: color .2s ease, background-color .2s ease; } .v5-header-menu a:hover, .v5-header-menu .current-menu-item > a { color: var(--v5-hover, #0a64c2); } /* Submenus (hover dropdown on desktop) — "curtain drop" open/close. The panel is clipped to nothing (bottom inset 100%) and unrolls downward on open while its items drift down in sync, so the menu reads as sliding out from behind the header instead of just fading in. Side/bottom insets go negative when open so the box-shadow isn't clipped; only the bottom edge animates. pointer-events is gated so the panel can't catch hovers while it is retracting (visibility interpolates as visible mid-transition). */ .v5-header-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); z-index: var(--v5-z-dropdown); opacity: 0; visibility: hidden; clip-path: inset(0 -40px 100% -40px); pointer-events: none; transition: opacity .3s ease-in, clip-path .3s ease-in, visibility .3s; } .v5-header-menu .sub-menu > li { transform: translateY(-14px); transition: transform .3s ease-in; } .v5-header-menu li:hover > .sub-menu, .v5-header-menu li.submenu-show > .sub-menu { opacity: 1; visibility: visible; clip-path: inset(0 -40px -40px -40px); pointer-events: auto; } .v5-header-menu li:hover > .sub-menu > li, .v5-header-menu li.submenu-show > .sub-menu > li { transform: translateY(0); } .v5-header-menu .sub-menu a { display: block; padding: 8px 18px; white-space: nowrap; border-radius: var(--border-radius); } /* Right-align submenus that would overflow the viewport's right edge */ .v5-header-menu > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; } /* The vehicle megamenu trigger replaces its native WP submenu with the megamenu's own submenu rail — hide the native dropdown so it doesn't flash under the megamenu. (JS tags the trigger
  • with .megamenu-trigger.) */ .v5-header-menu li.megamenu-trigger > .sub-menu { display: none; } /* ---- Actions cluster ---------------------------------------------------- */ .v5-header-actions { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); flex: 0 1 auto; min-width: 0; margin-left: auto; } /* ---- Header button (Style B) ------------------------------------------- */ .v5-header-button { display: inline-flex; align-items: center; background: var(--v5-btn-bg, #0a64c2); color: var(--v5-btn-text, #fff); padding: 10px 18px; border-radius: var(--border-radius); font-weight: 600; text-decoration: none; white-space: nowrap; transition: filter .2s ease; } .v5-header-button:hover { filter: brightness(.94); } /* ---- Language switcher -------------------------------------------------- */ .v5-header-language { display: inline-flex; align-items: center; } /* In the location bar a wide gtranslate flag strip used to wrap onto its own row. min-width:0 lets the item shrink instead of forcing a wrap, and the flags stay on one line and scroll horizontally if there are too many. */ .v5-locbar .v5-header-language { min-width: 0; max-width: 100%; flex: 0 1 auto; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .v5-locbar .v5-header-language::-webkit-scrollbar { height: 0; } .v5-locbar .v5-header-language > * { white-space: nowrap; } /* ---- Mobile quick icons ------------------------------------------------- */ /* Gap matches the actions-cluster gap so the search toggle + these icons are evenly spaced as one cohesive row. */ .v5-header-mobile-icons { display: none; align-items: center; gap: clamp(8px, 1.4vw, 18px); } /* Shared icon-button styling for the compact search toggle + mobile quick icons, so all three read as one consistent set (size, glyph size, color, hover). */ .v5-header-mobile-icon, .v5-header-search-toggle, .v5-header-search-close { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--v5-text, #333); font-size: 18px; text-decoration: none; background: transparent; border: 0; border-radius: var(--border-radius); cursor: pointer; transition: color .2s ease; } .v5-header-mobile-icon:hover, .v5-header-search-toggle:hover { color: var(--v5-hover, #0a64c2); } /* ---- Hamburger ---------------------------------------------------------- */ .v5-header-hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; flex: 0 0 auto; } .v5-header-hamburger-box { position: relative; width: 26px; height: 18px; display: inline-block; } .v5-header-hamburger-inner, .v5-header-hamburger-inner::before, .v5-header-hamburger-inner::after { position: absolute; left: 0; width: 26px; height: 2px; background: var(--v5-text, #333); border-radius: 2px; transition: transform .25s ease, top .25s ease, opacity .2s ease; } .v5-header-hamburger-inner { top: 50%; margin-top: -1px; } .v5-header-hamburger-inner::before { content: ""; top: -8px; } .v5-header-hamburger-inner::after { content: ""; top: 8px; } .v5-header-hamburger[aria-expanded="true"] .v5-header-hamburger-inner { background: transparent; } .v5-header-hamburger[aria-expanded="true"] .v5-header-hamburger-inner::before { top: 0; transform: rotate(45deg); } .v5-header-hamburger[aria-expanded="true"] .v5-header-hamburger-inner::after { top: 0; transform: rotate(-45deg); } /* ---- Search ------------------------------------------------------------- */ .v5-header-search { position: relative; display: flex; align-items: center; flex: 0 1 auto; min-width: 0; } /* Inline search placed on the LEFT (between the logo and the menu). The slot holds the search element; the menu then left-aligns next to it instead of hugging the actions cluster on the far right. */ .v5-header-search-slot { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; } .v5-header-search-slot--left { margin-right: clamp(10px, 1.6vw, 22px); } @media (max-width: 767px) { .v5-header-search-slot--left { margin-right: 0; } } .v5-header-search-wrap { position: relative; display: flex; align-items: center; width: clamp(180px, 22vw, 340px); max-width: 100%; } .v5-header-search-input { width: 100%; height: 42px; padding: 0 44px 0 16px; border: 1px solid transparent; border-radius: var(--border-radius); background: var(--v5-search-bg, #f0f0f5); color: var(--v5-search-text, #333); font-size: 14px; outline: none; } .v5-header-search-input::placeholder { color: color-mix(in srgb, var(--v5-search-text, #333) 60%, transparent); } .space-v3-search-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: var(--border-radius); background: var(--v5-search-btn-bg, #0a64c2); cursor: pointer; } .space-v3-search-btn::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: var(--v5-search-btn-icon, #fff); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Resting (non-compact) search field mirrors the active AI modal it becomes: white field, primary-color border, and a sparkle icon on the left — so the search looks the same before and after it opens. (When the engine grafts its modal in, the modal covers this field, so there's no double border.) The wrap is pinned to the input height so the absolutely-positioned icon can't float above the field (empty suggestion dropdowns can otherwise inflate it). */ .v5-header-search:not(.v5-header-search--compact) .v5-header-search-wrap { position: relative; height: 44px; overflow: visible; } /* Border lives on the INPUT, not the wrap: a global rule strips the wrap's border with !important on SRP pages. And on those pages a second global rule (body:has(.srp-v5-wrapper) input.space-v3-search[type=search]) sets `border:none` + `min-height:48px` and out-ranks us on specificity, so the input border/height must be forced with !important to survive there. */ .v5-header-search:not(.v5-header-search--compact) .v5-header-search-input { height: 44px !important; min-height: 44px !important; width: 100%; background: #fff; border: 2px solid var(--primary-button-color, var(--v5-search-btn-bg, #0a64c2)) !important; border-radius: 7px !important; padding: 0 16px 0 42px !important; } /* Sparkle drawn as a masked pseudo-element pinned to the input's vertical center, so it stays inside the field regardless of any sibling dropdown heights. */ .v5-header-search:not(.v5-header-search--compact) .v5-header-search-wrap::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; z-index: 1; background: var(--primary-button-color, var(--v5-search-btn-bg, #0a64c2)); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Our own sparkle div + submit button stay hidden; the pseudo-element above and the engine's grafted modal provide the icon/UI. */ .v5-header-search:not(.v5-header-search--compact) .search-v5-icon, .v5-header-search:not(.v5-header-search--compact) .space-v3-search-btn { display: none !important; } /* Compact search: icon that expands the field on demand. Shares the icon-button look defined with the mobile quick icons above; only adds the visibility control (hidden until compact mode) + positioning here. */ .v5-header-search-toggle, .v5-header-search-close { display: none; width: 42px; height: 42px; font-size: 18px; position: relative; } .v5-header-search--compact .v5-header-search-toggle { display: inline-flex; } /* Compact mode: the toggle opens the shared AI search modal, which IS the search UI. Our wrapper is just an invisible, correctly-positioned trigger container — it has NO box of its own (no bg/border/shadow), and our own input + controls are hidden, so the only thing that ever shows is the engine's modal. This avoids the "two boxes" clutter during the entrance/exit. */ .v5-header-search--compact .v5-header-search-wrap { position: absolute; right: 0; top: calc(100% + 6px); width: min(92vw, 520px); padding: 0; background: transparent; box-shadow: none; border-radius: 0; opacity: 0; visibility: hidden; z-index: var(--v5-z-dropdown); } .v5-header-search--compact.is-open .v5-header-search-wrap { opacity: 1; visibility: visible; } /* Hide our own field/controls in compact mode — the input is only a focus target that triggers the engine; the engine's modal provides the visible input + close. */ .v5-header-search--compact .v5-header-search-input, .v5-header-search--compact .space-v3-search-btn, .v5-header-search--compact .search-v5-icon, .v5-header-search--compact .v5-header-search-close { opacity: 0 !important; pointer-events: none; } /* The invisible proxy input still LAYS OUT. Inside the right-anchored wrap it can extend a few px past the viewport edge — and focusing it then scrolls the document sideways to reveal it, shifting everything behind the modal. Pin it inside the wrap; its geometry is irrelevant to its focus-trigger job. !important because engine sheets (global.css srp-v5 blocks) restyle input.space-v3-search with higher-specificity selectors. */ .v5-header-root .v5-header-search--compact .v5-header-search-input { position: absolute !important; left: 0 !important; right: auto !important; top: 0 !important; width: 42px !important; min-width: 0 !important; height: 42px !important; padding: 0 !important; } .v5-header-root .space-search-modal { transition: none; } /* Compact search: the engine animates its modal open (min-width growth on the panel, border-radius on the header, etc.), which is the partial red frame that flashes. Kill EVERY transition/animation on the modal AND all its children, and keep the whole thing hidden until it's fully expanded — so it just appears, all at once, fully formed, with nothing drawing mid-open. */ .v5-header-search--compact .space-search-modal, .v5-header-search--compact .space-search-modal * { transition: none !important; animation: none !important; } .v5-header-search--compact .space-search-modal.active:not(.space-search-modal-expanded) { opacity: 0 !important; pointer-events: none !important; } /* When the compact search is closed, fully remove the wrapper (and the engine's grafted modal inside it) from layout so no remnant can escape. */ .v5-header-search--compact:not(.is-open) > *:not(.v5-header-search-toggle) { display: none !important; } /* The shared AI search panel `.space-search-modal` is pinned by global.css to `left:-2px !important` with `min-width:500px` (>=768px), so on a right-side search it runs off the right edge. Anchor it (and the legacy suggestion lists) to the right so it grows leftward and stays on-screen. The lingering-after-close case is handled in js/frontend.js (dismissEngineModal), since the engine may keep the panel as a body-level node these header-scoped rules can't reach. */ .v5-header-actions .space-search-modal, .v5-header-search--compact .space-search-modal, .v5-locbar-search .space-search-modal { left: auto !important; right: -2px !important; } .v5-header-actions .space-v4-suggestions, .v5-header-actions .space-v3-suggestions, .v5-header-search--compact .space-v4-suggestions, .v5-header-search--compact .space-v3-suggestions, .v5-locbar-search .space-v4-suggestions, .v5-locbar-search .space-v3-suggestions { left: auto !important; right: 0 !important; } /* …but when the location-bar search is LEFT-aligned (far left), the modal must grow to the RIGHT instead, or it runs off the LEFT edge. Left-anchor it. */ .v5-locbar-search--left .space-search-modal { left: -2px !important; right: auto !important; } .v5-locbar-search--left .space-v4-suggestions, .v5-locbar-search--left .space-v3-suggestions { left: 0 !important; right: auto !important; } .v5-header-search--compact:not(.is-open) .space-search-modal, .v5-header-search--compact:not(.is-open) .space-v4-suggestions, .v5-header-search--compact:not(.is-open) .space-v3-suggestions { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ---- Off-canvas drawer + overlay --------------------------------------- */ .v5-header-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: var(--v5-z-overlay); } body.show-offcanvas-menu .v5-header-overlay { opacity: 1; visibility: visible; } .v5-offcanvas { position: fixed; top: 0; left: 0; height: 100%; height: 100dvh; width: min(85vw, 380px); z-index: var(--v5-z-drawer); transform: translateX(-100%); transition: transform .3s ease; pointer-events: none; } body.show-offcanvas-menu .v5-offcanvas { transform: translateX(0); pointer-events: auto; } .v5-offcanvas-panel { height: 100%; background: #fff; box-shadow: 4px 0 30px rgba(0, 0, 0, .2); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 22px 40px; } .v5-offcanvas-menu a { text-decoration: none !important; } button.v5-offcanvas-close { position: absolute !important; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; background: transparent !important; font-size: 22px; cursor: pointer; color: #333 !important; border: none !important; } .v5-offcanvas-menu { margin-top: 24px; } button.v5-header-hamburger.space-header-v3-hamburger { background: transparent !important; border: none !important; } .v5-header-actions a:hover { text-decoration: none !important; } button.v5-header-search-toggle:hover, button.v5-header-search-toggle:active, button.v5-header-search-toggle:focus { color: var(--hover-color); border: none; background:transparent; } .v5-offcanvas-menu-list, .v5-offcanvas-menu-list .sub-menu { list-style: none; margin: 0; padding: 0; } .v5-offcanvas-menu-list a { display: block; padding: 12px 6px; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .06); } .v5-offcanvas-menu-list .sub-menu a { padding-left: 22px; font-size: .95em; opacity: .9; } /* Accordion mode: collapse submenus behind a toggle (JS sets max-height) */ .v5-offcanvas[data-submenu-style="accordion"] .v5-offcanvas-menu-list .sub-menu { overflow: hidden; max-height: 0; transition: max-height .3s ease; } .v5-offcanvas-submenu-toggle { float: right; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease; cursor: pointer; } .v5-offcanvas-menu-list .menu-item-has-children.active > a .v5-offcanvas-submenu-toggle { transform: rotate(180deg); } /* ---- Reviews badge (compact pill) -------------------------------------- */ .v5-reviews-badge { display: none; /* revealed via .v5-reviews-badge--loaded once Google data loads */ align-items: center; gap: 8px; padding: 8px 14px; background: #202124; border-radius: var(--border-radius); text-decoration: none !important; line-height: 1; white-space: nowrap; flex: 0 0 auto; transition: background-color .2s ease, transform .2s ease; } .v5-reviews-badge--loaded { display: inline-flex; } /* On tight rows the main-header badge is the first thing to drop (it's supplementary) so nothing gets clipped. It still shows in the location bar. */ @media (max-width: 1099px) { .v5-header-actions .v5-reviews-badge { display: none; } .v5-header-inner { padding-left: 0; padding-right: 0; } } .v5-reviews-badge:hover { background: #2d2e30; transform: translateY(-1px); } .v5-reviews-badge-logo { display: inline-flex; align-items: center; } .v5-reviews-badge-rating { color: #fff; font-size: 16px; font-weight: 700; } .v5-reviews-badge-stars { position: relative; display: inline-block; font-size: 15px; letter-spacing: 1px; } .v5-reviews-badge-stars-bg { color: #5f6368; } .v5-reviews-badge-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #fbbc04; } .v5-reviews-badge-count { color: #9aa0a6; font-size: 14px; font-weight: 500; } .v5-reviews-badge-verified { display: inline-flex; align-items: center; } /* ---- Transparent mode --------------------------------------------------- The Transparent style (module Style select, the site-wide `transparent_header` theme mod, or the `?transparent-nav=true` preview override) renders the header as an overlay on top of the first page row. Two cooperating classes on .v5-header-root (added in frontend.php, toggled by js/frontend.js): .v5-header--transparent-capable always present while the Transparent style is in use; carries the scroll-DOWN (to solid) transitions .v5-header--transparent-mode present at the top of the page; removed after scrolling past data-scroll-threshold Removing --transparent-mode lets every rule below stop matching, so the header falls back to its configured Style A colors. JS strips BOTH classes in SRP/VDP v5 contexts (body.srp-v5 / body.vdp-v5), which also releases the fixed-wrapper rule below back to the default sticky behavior. */ /* Take the BB themer header wrapper out of layout flow so the first page row (typically a hero) starts at top: 0 and the header overlays it. IMPORTANT: position: fixed, NOT a `height: 0` collapse — renderSRP (space-functions.php) measures header.fl-builder-content.getBoundingClientRect() .bottom and gates the "show SRP" branch on a truthy value; a zero-height wrapper breaks SRP/VDP rendering. The wrapper also ships a white mobile background + box-shadow from global.css that would band above the transparent header — force both off; the shadow returns on the inner .v5-header once scrolled. !important so this wins over the sticky wrapper rule above and any global-sheet positioning. */ header.fl-builder-content[data-type="header"]:has(.v5-header-root.v5-header--transparent-capable) { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; /* mirrors the sticky wrapper rule */ background: transparent !important; box-shadow: none !important; } /* Scroll-DOWN transition (transparent-mode being REMOVED, destination = the configured solid appearance). easeInOutCubic ramps the colors in gently instead of rocketing them in. Lives on -capable so it's the active transition whenever the destination is the solid state. */ .v5-header--transparent-capable .v5-header, .v5-header--transparent-capable .v5-header-menu > li > a, .v5-header--transparent-capable .v5-vnav-menus-parent-nav-link, .v5-header--transparent-capable .v5-header-language a, .v5-header--transparent-capable .v5-header-mobile-icon, .v5-header--transparent-capable .v5-header-search-toggle, .v5-header--transparent-capable .v5-header-search-input, .v5-header--transparent-capable .v5-header-search-wrap::before, .v5-header--transparent-capable .search-v5-icon path, .v5-header--transparent-capable .v5-header-logo img, .v5-header--transparent-capable .v5-header-logo svg path { transition: background-color 1s cubic-bezier(0.65, 0, 0.35, 1), color 1s cubic-bezier(0.65, 0, 0.35, 1), border-color 1s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 1s cubic-bezier(0.65, 0, 0.35, 1), fill 1s cubic-bezier(0.65, 0, 0.35, 1), filter 1s cubic-bezier(0.65, 0, 0.35, 1), -webkit-filter 1s cubic-bezier(0.65, 0, 0.35, 1), opacity 1s cubic-bezier(0.65, 0, 0.35, 1); } /* Hamburger bars keep their own transform/top/opacity speeds (the open/close X morph) and only add the color crossfade on background. */ .v5-header--transparent-capable .v5-header-hamburger-inner, .v5-header--transparent-capable .v5-header-hamburger-inner::before, .v5-header--transparent-capable .v5-header-hamburger-inner::after { transition: transform .25s ease, top .25s ease, opacity .2s ease, background-color 1s cubic-bezier(0.65, 0, 0.35, 1); } /* Pin the logo's base filter to invert(0%) instead of the implicit `none` — some browsers don't interpolate between `none` and `invert(100%)`, which kills the crossfade in both directions. */ .v5-header--transparent-capable .v5-header-logo img { -webkit-filter: invert(0%); filter: invert(0%); } /* Scroll-UP transition (transparent-mode being ADDED, destination = the transparent appearance). easeOutExpo tucks the solid colors away with a decisive motion. */ .v5-header--transparent-capable.v5-header--transparent-mode .v5-header, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-menu > li > a, .v5-header--transparent-capable.v5-header--transparent-mode .v5-vnav-menus-parent-nav-link, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-language a, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-mobile-icon, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-search-toggle, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-search-input, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-search-wrap::before, .v5-header--transparent-capable.v5-header--transparent-mode .search-v5-icon path, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-logo img, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-logo svg path { transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1), fill 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), -webkit-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-hamburger-inner, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-hamburger-inner::before, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-hamburger-inner::after { transition: transform .25s ease, top .25s ease, opacity .2s ease, background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1); } /* On-load (transparent) state — active while --transparent-mode is present. */ .v5-header--transparent-capable.v5-header--transparent-mode .v5-header { background: transparent; box-shadow: none; } /* Recolor ONLY the chrome that sits directly on the hero. Dropdown panels render on their own opaque backgrounds with dark text, so their links are deliberately excluded (white-on-white otherwise): .sub-menu (standard WP nav dropdowns — top-level links only via `> li > a`) .v5-vnav-subnav-wrap (vertical nav flyout) .v5-megamenu (vehicle megamenu) .v5-offcanvas (slide-in drawer) */ .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-menu > li > a, .v5-header--transparent-capable.v5-header--transparent-mode .v5-vnav-menus-parent-nav-link, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-language a, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-mobile-icon, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-search-toggle { color: var(--v5-transparent-text, #fff); } .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-menu > li > a:hover, .v5-header--transparent-capable.v5-header--transparent-mode .v5-vnav-menus-parent-nav-link:hover, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-mobile-icon:hover, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-search-toggle:hover { color: var(--v5-transparent-text, #fff); opacity: 0.75; } .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-hamburger-inner, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-hamburger-inner::before, .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-hamburger-inner::after { background: var(--v5-transparent-text, #fff); } /* Search resting field — outline style so it reads on imagery: transparent fill, text-colored border/text/placeholder, recolored sparkle. !important because the input carries the legacy `space-v3-search` hook class, which global sheets restyle with high-specificity / !important rules. The border stays 2px (only recolored) so nothing shifts mid-animation. */ .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-search-input { background: transparent !important; color: var(--v5-transparent-text, #fff) !important; border-color: var(--v5-transparent-text, #fff) !important; } .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-search-input::placeholder { color: var(--v5-transparent-text, #fff) !important; opacity: 0.85; } /* Sparkle icon: the masked ::before on the resting field + the legacy inline SVG variant global.css paints with the dealer primary color. */ .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-search-wrap::before { background: var(--v5-transparent-text, #fff); } .v5-header--transparent-capable.v5-header--transparent-mode .search-v5-icon path { fill: var(--v5-transparent-text, #fff) !important; } /* Invert raster logos in transparent mode so dark artwork reads on imagery. Caveat: this also inverts already-light logos to dark — supply a light logo if the default logo is white/cream. (Inline SVG logos are recolored per-node in includes/frontend.css.php, where the Logo Color override can be checked.) */ .v5-header--transparent-capable.v5-header--transparent-mode .v5-header-logo img { -webkit-filter: invert(100%); filter: invert(100%); } /* Location bar — collapses while transparent-mode is on (top of page) and reveals once the user scrolls. The 240px cap is well over the bar's height so content isn't clipped mid-transition; raise if a site has a taller bar. Colors crossfade in lockstep with the header: even though the bar is hidden via max-height: 0 in transparent-mode, the brief slice visible during the expand/collapse animation has to read cohesively with the rest of the header. overflow: hidden only while collapsed — when revealed, the locations dropdown needs to escape the bar. Per-direction transitions match the header: reveal = easeInOutCubic 1s, collapse = easeOutExpo 0.8s. */ .v5-header--transparent-capable .v5-locbar { max-height: 240px; transition: max-height 1s cubic-bezier(0.65, 0, 0.35, 1), padding 1s cubic-bezier(0.65, 0, 0.35, 1), background-color 1s cubic-bezier(0.65, 0, 0.35, 1), color 1s cubic-bezier(0.65, 0, 0.35, 1), border-color 1s cubic-bezier(0.65, 0, 0.35, 1); } .v5-header--transparent-capable .v5-locbar a, .v5-header--transparent-capable .v5-locbar-name-label { transition: color 1s cubic-bezier(0.65, 0, 0.35, 1); } .v5-header--transparent-capable.v5-header--transparent-mode .v5-locbar { max-height: 0; /* max-height can't shrink the box below its own padding — zero the vertical padding too or a padding-tall sliver of the bar stays visible at the top. */ padding-top: 0; padding-bottom: 0; overflow: hidden; background: transparent; color: var(--v5-transparent-text, #fff); border-color: transparent; transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), padding 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .v5-header--transparent-capable.v5-header--transparent-mode .v5-locbar a, .v5-header--transparent-capable.v5-header--transparent-mode .v5-locbar-name-label { color: var(--v5-transparent-text, #fff); transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================================================= Overflow collapse + responsive behavior The nav is shown on desktop. JS adds .v5-header--collapsed to the root when the nav can't fit (any width). Below the tablet breakpoint we also collapse via CSS so it works even before JS runs. ========================================================================= */ .v5-header--collapsed .v5-header-nav { display: none; } .v5-header--collapsed .v5-header-hamburger, .v5-header--style-b .v5-header-hamburger { display: inline-flex; } @media (max-width: 1023px) { .v5-header-nav { display: none; } .v5-header-mobile-icons { display: flex; } } /* Hamburger only on tablet (768–1023). On mobile the dealer's own mobile toolbar menu icon handles navigation, so the header hamburger stays hidden. */ @media (min-width: 768px) and (max-width: 1023px) { .v5-header-hamburger { display: inline-flex; } } @media (min-width:768px) { .v5-locbar-dropdown { position: fixed; top: 36px !important; left: 0 !important; right: 0 !important; } } @media (max-width: 767px) { /* On mobile, setupCompactSearch() forces every search into compact mode on load — but that JS runs after first paint, so until it does the full resting field paints and then visibly collapses to the icon (the "search bar flashes then minimizes" flicker). Pre-empt it: at mobile widths render the compact icon from the first paint whether or not JS has added the class yet — show the toggle and drop the resting field from layout. Once JS adds .v5-header-search--compact these :not() rules stop matching and the real compact rules take over seamlessly. */ .v5-header-search .v5-header-search-toggle { display: inline-flex; } .v5-header-search:not(.v5-header-search--compact):not(.is-open) > *:not(.v5-header-search-toggle) { display: none !important; } .v5-header-button { display: none; } /* Hidden on mobile regardless of Style B / collapsed state. */ .v5-header-hamburger { display: none !important; } /* Optically align the icon row with the flush-left logo. The glyphs are centered inside 42px touch targets, so the rightmost icon sits ~10px further from the edge than the logo does on the left, making the row look lopsided. Pull the icon row toward the edge so both sides read as equal. */ .v5-header-mobile-icons { margin-right: -10px; } /* On mobile, hover only ever appears as sticky tap-hover, which lingers after taps and competes with the tap registering. Pin the search toggle and quick icons to their resting styles — covers the shared icon hover color above and the theme's button:hover / a:hover states. */ .v5-header-mobile-icon:hover, button.v5-header-search-toggle:hover { color: var(--v5-text, #333); background: transparent; border: 0; text-decoration: none; } .v5-header.space-header-v3 { padding-bottom: 0 !important; padding-top: 0 !important; } .v5-header-actions { margin-left: 0; right: 8px; position: relative; } .v5-header-logo img, .v5-header-logo > a > * { padding: 8px; } } /* When scrolling is locked for the drawer */ body.noscroll { overflow: hidden; } /* ---- Page-level modals: hidden until JS activates them ------------------ Full styling + show/hide behavior is wired alongside the modal scripts. These are JS-activated overlays, so a hidden baseline is correct. */ .v5-header-root .virtual-showroom-modal, .v5-header-root .compare-vehicles, .v5-header-root .srp-pricing-overlay-container, .v5-header-root #cookieConsentModal { display: none; } .v5-header-root .virtual-showroom-modal.show, .v5-header-root .compare-vehicles.show, .v5-header-root .srp-pricing-overlay-container.show, .v5-header-root #cookieConsentModal.show { display: block; } /* The compare modal is opened by the shared SRP engine via a BODY class (body.show-compare), not .show on the container. srp-v5.css's own `.show-compare .compare-vehicles { display:block }` ties our hidden baseline on specificity and loses on load order, so activate that contract here. */ body.show-compare .v5-header-root .compare-vehicles { display: block; } body:has(.srp-v5-wrapper) .v5-header-root .global-search-mob:after, body:has(.srp-v5-wrapper) .v5-header-root .space-builder-page-search-wrap:after { display: none !important; } body:has(.srp-v5-wrapper) .v5-header-root .space-builder-page-search-wrap, body:has(.srp-v5-wrapper) .v5-header-root .global-search-mob { border: none !important; } .space-search-modal-input { background-color:transparent !important; } /* ========================================================================= Location bar (top bar) — pure v5-locbar-* namespace. Dropdown opens on hover (desktop) or .is-open (JS, tap/click). ========================================================================= */ .v5-locbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 8px var(--v5-pad-x); background: var(--v5-loc-bg, #fff); color: var(--v5-loc-text, #333); font-size: 14px; border-bottom: 1px solid var(--v5-loc-border, rgba(0, 0, 0, .08)); } .v5-locbar a { color: var(--v5-loc-link, #1a73e8); text-decoration: none; } .v5-locbar a:hover { color: var(--v5-loc-link-hover, #1558b0); } .v5-locbar-col { display: flex; align-items: center; } /* Only the left column gets the auto margin so EVERYTHING after it (search, CTAs, badges, flags) clusters together on the right. A second auto margin on the right column would split the free space and strand the search in the middle. */ .v5-locbar-col-left { position: relative; margin-right: auto; } /* Location name/dropdown on the right: drop the left auto-margin and push the name column rightward so it joins the CTA/badge/flag cluster. */ .v5-locbar--name-right .v5-locbar-col-left { margin-right: 0; margin-left: auto; } /* Its dropdown must then open from the right edge so it doesn't overflow. */ .v5-locbar--name-right .v5-locbar-dropdown { left: auto; right: 0; } .v5-locbar-name { position: relative; } .v5-locbar-name-label { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; cursor: pointer; color: var(--v5-loc-text, #333); background: none; border: 0; padding: 0; } .v5-locbar-name-label::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; margin-top: -3px; } .v5-locbar-location-address span:first-child { display: block; } .v5-locbar-location-address span:nth-child(2):after { content: ', '; } .v5-locbar-name-label--nohover::after { display: none; } .v5-locbar-close { display: none; background: none !important; border: none !important; cursor: pointer; } /* Dropdown — hidden, revealed on hover (desktop) or .is-open (JS / tap) */ .v5-locbar-dropdown { position: absolute; top: 100%; left: 0; z-index: var(--v5-z-dropdown); display: flex; flex-wrap: wrap; gap: 32px; width: max-content; max-width: min(92vw, 900px); max-height: min(70vh, 560px); overflow-y: auto; padding: 16px; background: #fff; color: #333; font-size: 14px; line-height: 1.45; border-radius: var(--border-radius); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } button.v5-locbar-name-label:hover { background-color: transparent; color: inherit; border: none; } .v5-locbar-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Hover-reveal only on real pointer devices. On touch, a tap leaves a sticky :hover that would keep the panel open after the close button strips .is-open (so the dropdown would never close). Touch relies solely on the JS toggle. */ @media (hover: hover) { .v5-locbar-name:hover .v5-locbar-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } } .v5-locbar-location { display: flex; flex-direction: column; gap: 10px; min-width: 240px; max-width: 300px; flex: 1 1 240px; font-size: 14px; line-height: 1.45; } .v5-locbar-location-hours-wrapper a { color: var(--primary-color); font-weight: 700; } .v5-locbar-location-name { font-weight: 700; font-size: 15px; } .v5-locbar-location-address { display: block; color: inherit; font-size: 12px; font-weight: 600; line-height: 16px; } .v5-locbar-location-address a { color: var(--primary-color); } .v5-locbar-location-address span::after { content: " "; } .v5-locbar-location-link { font-weight: 600; } .v5-locbar-location-call { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .v5-locbar-location-callus { color: #6b6b6b; font-size: 13px; } .v5-locbar-location-callus-link { font-weight: 600; } .v5-locbar-location-hours-wrapper { display: flex; flex-direction: column; gap: 8px; } .v5-locbar-location-hours-wrap { font-size: 13px; } .v5-locbar-location-title { font-weight: 600; } .v5-locbar-location-hours-val { color: #555; } .v5-locbar-location-phone-link { color: var(--v5-loc-link, #1a73e8); } .v5-locbar-location-cta-wrap { margin-top: 2px; } .v5-locbar a.v5-locbar-location-cta-primary { line-height: 48px; display: block; margin-top: 8px; text-align: center; padding: 0; border-radius: var(--border-radius); background-color: var(--primary-button-color); color: var(--primary-button-text-color); } .v5-locbar a.v5-locbar-location-cta-primary:hover, .v5-locbar a.v5-locbar-location-cta-primary:focus, .v5-locbar a.v5-locbar-location-cta-primary:active, .v5-locbar a.v5-locbar-cta:hover, .v5-locbar a.v5-locbar-cta:focus, .v5-locbar a.v5-locbar-cta:active { color: var(--primary-button-text-color); background-color: var(--hover-color); text-decoration: none !important; } .v5-locbar a.v5-locbar-cta { display: inline-block; padding: 0 16px; border-radius: var(--border-radius); background-color: var(--primary-button-color); color: var(--primary-button-text-color); line-height: 36px; } .v5-optional-badge img { max-height: 40px; width: auto; } .v5-optional-badge { display: inline-flex; align-items: center; gap: 8px; } /* Search placed inside the location bar. Sizes to content so compact mode shows just the icon (no empty gap); full mode uses a comfortable fluid width. */ .v5-locbar-search { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; } .v5-locbar-search .v5-header-search-wrap { width: clamp(200px, 28vw, 380px); max-width: 100%; } /* Far-left alignment: order:-1 pulls the search to the very start of the bar (above the logo). The location name keeps its own auto-margin, so the layout becomes: [search][name] … [CTAs/badges/flags]. */ .v5-locbar-search--left { order: -1; } /* The reviews badge + translate flags shouldn't wrap onto their own rows when space is tight, so hide them in the location bar on tablet AND mobile (<1024). The off-canvas language switcher (.v5-offcanvas .v5-header-language) is unaffected, so translation stays available in the mobile menu. */ @media (max-width: 1023px) { .v5-locbar-reviews, .v5-locbar .v5-header-language { display: none; } } @media (max-width: 767px) { .v5-locbar { font-size: 13px; gap: 20px; } .v5-locbar-name.is-open button.v5-locbar-close { display: inline-flex; position: fixed !important; top: 66px; right: 10px; font-size: 18px; color: black !important; z-index: 9999; padding: 12px; } /* Fixed full-width panel anchored just below the header. Override the base top:100% — with position:fixed that resolves against the viewport and pushes the panel entirely off-screen below the fold. */ .v5-locbar-dropdown { position: fixed; top: var(--v5-header-height, 56px); left: 8px !important; right: 8px !important; bottom: auto; width: auto; max-width: none; max-height: calc(100vh - var(--v5-header-height, 56px) - 16px); top: 62px; } .v5-locbar { justify-content: space-between; } .v5-locbar--name-right .v5-locbar-col-left { margin-right: 0; margin-left: 0; } button.v5-locbar-name-label { font-size: 14px !important; } } /* ========================================================================= Vehicle megamenu (full-width dropdown under the header). ========================================================================= */ /* Full-width dropdown. position:fixed because the JS sets `top` from the header's viewport rect (getBoundingClientRect().bottom). */ .v5-megamenu { position: fixed; left: 0; right: 0; z-index: var(--v5-z-dropdown); background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .16); border-top: 1px solid rgba(0, 0, 0, .06); max-height: min(78vh, 660px); overflow-y: auto; opacity: 0; visibility: hidden; /* Curtain drop: panel unrolls downward (clip) while the content block slides down its full height in sync, so the megamenu emerges from behind the header (bottom inset -80px keeps the shadow unclipped). */ clip-path: inset(0 0 100% 0); pointer-events: none; transition: opacity .3s ease-in, clip-path .3s ease-in, visibility .3s; } .v5-megamenu.show { opacity: 1; visibility: visible; clip-path: inset(0 0 -80px 0); pointer-events: auto; } .v5-megamenu-content { transform: translateY(-100%); transition: transform .3s ease-in; } .v5-megamenu.show .v5-megamenu-content { transform: translateY(0); } .v5-megamenu-content, .v5-megamenu-makes { width: 100%; } /* main-content lays out the optional submenu rail beside the vehicles section */ .v5-megamenu-main-content { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 48px); max-width: 1320px; margin: 0 auto; padding: clamp(18px, 2.4vw, 36px) var(--v5-pad-x); } .v5-megamenu-vehicles-section { flex: 1 1 auto; min-width: 0; } /* Submenu rail (the menu item's own children, e.g. "New Nissan Vehicles") */ .v5-megamenu-submenu { flex: 0 0 clamp(180px, 16vw, 240px); } .v5-megamenu-submenu-items { display: flex; flex-direction: column; gap: 8px; } .v5-megamenu-submenu-item { color: var(--v5-text, #333); transition: all .25s ease-in-out; text-decoration: none !important; font-weight: 600; } .v5-megamenu-submenu-item:hover { color: var(--v5-hover, #0a64c2); text-decoration: none !important; } /* Columns layout (multi-OEM): one column per make */ .v5-megamenu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(16px, 1.8vw, 32px); } .v5-megamenu-make-header { margin-bottom: 8px; } .v5-megamenu-make-title { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--v5-text, #333); display: inline-block; padding-bottom: 6px; border-bottom: 2px solid var(--v5-btn-bg, #0a64c2); } .v5-megamenu-make-title:hover { color: var(--v5-hover, #0a64c2); } /* Models — vertical within a make column; a responsive grid when horizontal */ .v5-megamenu-models { display: flex; flex-direction: column; gap: 2px; } .v5-megamenu-models.models-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px clamp(16px, 2vw, 36px); } a.v5-megamenu-model { display: none; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 8px; color: var(--v5-text, #333); text-decoration: none !important } a.v5-megamenu-model:has(.v5-megamenu-model-text) { display: flex; } .v5-megamenu-model:hover { background: transparent; color: var(--v5-hover, #0a64c2); } .v5-megamenu-model-content, .v5-megamenu-model-text { display: flex; align-items: center; gap: 10px; min-width: 0; } .v5-megamenu-model img.vehicle-jellybean { width: 58px; height: 38px; object-fit: contain; flex: 0 0 auto; } .v5-megamenu-model-name { white-space: nowrap; } .v5-megamenu .vehicle-count { color: #888; font-size: 12px; } /* Footer CTA */ .v5-megamenu-footer { text-align: center; padding: 0 var(--v5-pad-x) clamp(18px, 2vw, 30px); } .v5-megamenu-view-all { display: inline-block; padding: 11px 24px; border-radius: 8px; background: var(--v5-btn-bg, #0a64c2); color: var(--v5-btn-text, #fff); text-decoration: none; font-weight: 600; } .v5-megamenu-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px; color: #777; } .v5-megamenu-error { padding: 40px; text-align: center; color: #777; } .v5-megamenu-spinner { width: 22px; height: 22px; border: 3px solid rgba(0, 0, 0, .15); border-top-color: var(--v5-btn-bg, #0a64c2); border-radius: 50%; animation: v5-spin .8s linear infinite; } @keyframes v5-spin { to { transform: rotate(360deg); } } /* Stack the submenu rail above the vehicles on narrower desktops */ @media (max-width: 1100px) { .v5-megamenu-main-content { flex-direction: column; gap: 18px; } .v5-megamenu-submenu { flex-basis: auto; } } /* ========================================================================= Vertical nav (rail + flyout). Keeps v5-vnav-* hooks. ========================================================================= */ .v5-vnav-container { position: relative; width: 100%; } .v5-vnav-menus-parent-nav-wrap { display: flex; flex-wrap: wrap; gap: clamp(4px, 0.8vw, 14px); margin: 0; padding: 0; list-style: none; justify-content: flex-end; } .v5-vnav-menus-parent-nav-link { display: inline-flex; align-items: center; padding: 10px 14px; color: var(--v5-text, #333); text-decoration: none; white-space: nowrap; border-radius: var(--border-radius); } .v5-vnav-menus-parent-nav-link:hover { color: var(--v5-hover, #0a64c2); } /* Flyout panel — always rendered (flex) so it can curtain-drop open/closed; hidden state is opacity/visibility/clip instead of display:none. Bonus: the JS offset math (_getSubnavOffset) can now measure real column widths on the very first hover, since hidden elements still have layout. */ .v5-vnav-subnav-wrap { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--v5-z-dropdown); display: flex; gap: 24px; padding: 24px var(--v5-pad-x); background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .16); max-height: min(74vh, 600px); overflow-y: auto; opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); pointer-events: none; transition: opacity .3s ease-in, clip-path .3s ease-in, visibility .3s; } .v5-vnav-subnav-wrap > * { transform: translateY(-24px); transition: transform .3s ease-in; } .v5-vnav-subnav-wrap.active { opacity: 1; visibility: visible; clip-path: inset(0 0 -80px 0); pointer-events: auto; } .v5-vnav-subnav-wrap.active > * { transform: translateY(0); } .v5-vnav-subnav-hours-col { flex: 0 0 220px; border-right: 1px solid rgba(0, 0, 0, .08); padding-right: 20px; } .v5-vnav-subnav-items-col { display: flex; flex-direction: column; gap: 6px; } .v5-vnav-subnav-items-col.hide { display: none; } .v5-vnav-subnav-item-link { color: var(--v5-text, #333); text-decoration: none; padding: 4px 0; } .v5-vnav-subnav-item-link:hover { color: var(--v5-hover, #0a64c2); } /* Curtain animations collapse to instant show/hide for reduced-motion users. */ @media (prefers-reduced-motion: reduce) { .v5-header-menu .sub-menu, .v5-header-menu .sub-menu > li, .v5-megamenu, .v5-megamenu-content, .v5-vnav-subnav-wrap, .v5-vnav-subnav-wrap > * { transition-duration: 0s; } } /* ========================================================================= Page-level modals — visible-state styling. The hidden baseline (display:none / .show -> display:block) for #cookieConsentModal, .compare-vehicles, .virtual-showroom-modal and .srp-pricing-overlay-container is defined earlier under "Page-level modals". This block styles the inner pieces, centering, overlays and scroll behavior. Ported from the legacy v3 header (includes/frontend.css.php) + the canonical SRP/VDP overlay styling, modernized: no fixed widths that overflow (min()/max-width), scrollable bodies get max-height + overflow:auto, the z-index scale on .v5-header-root is reused, and PHP-interpolated colors are mapped onto --v5-* custom props with sensible fallbacks. ========================================================================= */ /* ---- Return UX (inline "welcome back" strip) --------------------------- */ #user-return { visibility: hidden; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .5s ease, visibility .5s; } #user-return.show { visibility: visible; max-height: 700px; opacity: 1; } #user-return-condition { text-transform: capitalize; } span#user-return-vin { margin-right: 32px; } span#user-return-down { margin-left: 16px; } /* ---- Cookie consent modal ---------------------------------------------- */ #cookieConsentModal { position: fixed; bottom: 24px; left: 24px; width: min(375px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); overflow: auto; padding: 16px; background: #fff; color: #272727; font-family: inherit; user-select: none; border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); z-index: var(--v5-z-modal, 1300); } #cookieConsentModal .modal-header { font-size: 14px; font-weight: 600; line-height: 24px; margin: 4px 0; color: #272727; } #cookieConsentModal .modal-content, #cookieConsentModal .consent-description { font-size: 12px; line-height: 16px; font-weight: 500; color: #68666a; letter-spacing: .15px; margin-bottom: 8px; } #cookieConsentModal .modal-content a, #cookieConsentModal .consent-description a { color: var(--v5-btn-bg, #0a64c2); text-decoration: underline; } /* Only one state is visible at a time; build on the hidden baseline. */ .cookie-modal-state { display: none; } .cookie-modal-state.show { display: block; } /* State-1 footer is a single row; state-2 footer stacks the back/accept actions. */ #cookieConsentModal .modal-footer { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } #cookieConsentModal .state-1 .modal-footer { justify-content: space-between; } #cookieConsentModal .modal-footer button { background: transparent; border: 0; font-size: 12px; font-weight: 700; line-height: 16px; padding: 10px 12px; cursor: pointer; transition: color .2s ease; } /* State-1 actions */ #cookieConsentModal .modal-footer button#btnRejectSettings { color: #a4a4a8; } #cookieConsentModal .modal-footer button#btnRejectSettings:hover { color: #68666a; } #cookieConsentModal .modal-footer button#btnSettings, #cookieConsentModal .modal-footer button#consentBtnBack { color: #a4a4a8; } #cookieConsentModal .modal-footer button#btnSettings:hover, #cookieConsentModal .modal-footer button#consentBtnBack:hover { color: #68666a; } #cookieConsentModal .modal-footer button#btnAcceptSettings { color: var(--v5-btn-bg, #0a64c2); } #cookieConsentModal .modal-footer button#btnAcceptSettings:hover { filter: brightness(.85); } /* Generic save/cancel actions */ #cookieConsentModal .modal-footer button.cookie-consent-btn.consent-cancel { color: #a4a4a8; } #cookieConsentModal .modal-footer button.cookie-consent-btn.consent-cancel:hover { color: #68666a; } #cookieConsentModal .modal-footer button.cookie-consent-btn.consent-save { color: var(--v5-btn-bg, #0a64c2); } #cookieConsentModal .modal-footer button.cookie-consent-btn.consent-save:hover { filter: brightness(.85); } /* Consent toggles (state-2) */ #cookieConsentModal label.consent-label { display: flex; align-items: center; color: #272727; font-size: 12px; font-weight: 600; padding-left: 8px; margin-top: 8px; } #cookieConsentModal label.consent-label[for="unclassifiedCookies"] { display: none; } #cookieConsentModal .consent-toggle { position: relative; display: inline-block; width: 27px; height: 14px; margin-right: 12px; flex: 0 0 auto; } #cookieConsentModal .consent-toggle input.consent-input { position: absolute; opacity: 0; width: 0; height: 0; } #cookieConsentModal .consent-slider { position: absolute; inset: 0; background: #ccc; border-radius: 34px; cursor: pointer; transition: background-color .3s ease; } #cookieConsentModal .consent-slider::before { content: ""; position: absolute; left: 1px; bottom: 1px; width: 12px; height: 12px; background: #fff; border-radius: 50%; transition: transform .3s ease; } #cookieConsentModal input:checked + .consent-slider { background: var(--v5-btn-bg, #0a64c2); } #cookieConsentModal input:checked + .consent-slider::before { transform: translateX(13px); } /* Essential cookies stay on but are not interactive */ #cookieConsentModal input#essentialCookies:checked + .consent-slider { background: var(--v5-btn-bg, #0a64c2); opacity: .45; pointer-events: none; } #cookie-consent-close { position: absolute; top: 0; right: 0; width: 32px; padding: 8px; text-align: center; line-height: 18px; cursor: pointer; } @media (max-width: 767px) { #cookieConsentModal { left: 8px; right: 8px; bottom: 8px; width: auto; } } /* ---- Virtual showroom modal -------------------------------------------- */ .v5-header-root .virtual-showroom-modal.show { position: fixed; inset: 0; z-index: var(--v5-z-modal, 1300); display: flex; align-items: center; justify-content: center; padding: 16px; } .v5-header-root .virtual-showroom-bg { position: absolute; inset: 0; background: rgba(51, 51, 51, .8); } .v5-header-root #virtual-showroom { position: relative; width: min(800px, 100%); height: min(600px, calc(100vh - 120px)); margin: auto; background: #fff; border-radius: var(--border-radius); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); } .v5-header-root #virtual-showroom .virtual-showroom-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--border-radius); } .v5-header-root .virtual-showroom-close { position: absolute; top: -16px; right: -16px; width: 40px; height: 40px; cursor: pointer; z-index: 1; } .v5-header-root .virtual-showroom-close::after { content: "\f00d"; font-family: "Font Awesome 7 Pro"; display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 20px; color: #fff; background: var(--v5-btn-bg, #0a64c2); border-radius: var(--border-radius); transition: filter .2s ease; } .v5-header-root .virtual-showroom-close:hover::after { filter: brightness(.9); } @media (max-width: 767px) { .v5-header-root .virtual-showroom-close { top: 8px; right: 8px; } } /* ---- Compare vehicles modal -------------------------------------------- */ /* Container show/hide handled by the baseline (.compare-vehicles.show OR body.show-compare — the latter is what the srp-v5 engine actually toggles). */ .v5-header-root .compare-vehicles { color: #272727; } .v5-header-root .compare-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); cursor: pointer; z-index: var(--v5-z-overlay, 1100); } .v5-header-root .compare-vehicles-wrap { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); width: min(900px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); background: #fff; border-radius: var(--border-radius); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); overflow: auto; z-index: var(--v5-z-modal, 1300); } .v5-header-root .compare-vehicles-wrap::-webkit-scrollbar { display: none; } .v5-header-root .compare-vehicles-header { position: sticky; top: 0; z-index: 1; display: flex; height: 48px; background: #fff; border-bottom: 1px solid #eaecee; box-shadow: 0 0 24px rgba(51, 51, 51, .08); } .v5-header-root .compare-vehicles-header-text { flex: 1 1 auto; } .v5-header-root .compare-vehicles-header-text::after { content: "Compare Vehicles"; font-size: 12px; font-weight: 600; line-height: 48px; padding: 0 16px; user-select: none; } .v5-header-root .compare-close { flex: 0 0 48px; width: 48px; line-height: 48px; text-align: center; cursor: pointer; background: #fff; transition: background-color .2s ease, color .2s ease; } .v5-header-root .compare-close::after { content: "\f00d"; font-family: "Font Awesome 7 Pro"; } .v5-header-root .compare-close:hover { background: #272727; color: #fff; } .v5-header-root .compare-vehicles-main { display: flex; flex-wrap: wrap; padding-bottom: 16px; } @media (max-width: 767px) { .v5-header-root .compare-vehicles-wrap { top: 8px; max-height: calc(100vh - 16px); } } /* ---- SRP pricing overlay ----------------------------------------------- */ /* Generic dimmer used by the SRP filter overlay state. */ .v5-header-root .srp-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; z-index: var(--v5-z-overlay, 1100); transition: opacity .25s ease, visibility .25s; } .v5-header-root .srp-overlay.show, body.srp-filter-overlay .v5-header-root .srp-overlay { opacity: 1; visibility: visible; } /* Pricing breakdown overlay. Container show/hide handled by the baseline. */ .v5-header-root .srp-pricing-overlay-container { position: relative; } .v5-header-root .srp-pricing-overlay-wrapper { position: fixed; inset: 0; z-index: var(--v5-z-modal, 1300); } .v5-header-root .srp-pricing-overlay-wrapper:has(.srp-pricing-overlay-content:empty) { display: none; } .v5-header-root .srp-pricing-overlay { position: fixed; inset: 0; /* background: rgba(0, 0, 0, .6); */ cursor: pointer; } .v5-header-root .srp-pricing-overlay-content-wrap { position: absolute; inset: 0; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: auto !important; width: 100%; height: min(700px, calc(100vh - 48px)); background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); border-radius: var(--border-radius); overflow: hidden; max-height: 100%; } /* .v5-header-root .srp-pricing-overlay-content-wrap::before { content: "Price Breakdown"; display: block; background: #333; color: #fff; font-size: 14px; line-height: 24px; padding: 8px 16px; } */ .v5-header-root .srp-pricing-overlay-close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; /* srp-v5.css styles this class as the old full-width "Done" pill (gray background, 48px line-height, side padding, gray :hover) — and its ".srp-v5 .fl-page …" selector out-specifies this scoped rule while the SRP is open. Force the corner-icon geometry over it. */ line-height: 40px !important; padding: 0 !important; background: none !important; text-align: center; color: #333; cursor: pointer; z-index: 2; } .v5-header-root .srp-pricing-overlay-close i { font-size: 16px; transition: font-size .2s ease; } .v5-header-root .srp-pricing-overlay-close:hover i { font-size: 20px; } .v5-header-root .srp-pricing-overlay-tabs { display: flex; background: #fff; color: #333; font-size: 12px; line-height: 14px; text-transform: uppercase; } .v5-header-root .srp-pricing-overlay-tab { flex: 1 1 0; text-align: center; padding: 12px 0; cursor: pointer; user-select: none; } .v5-header-root .srp-pricing-overlay-tab.active { border-bottom: 1px solid #333; font-weight: 700; } .v5-header-root #srp-pricing-overlay-content { max-height: calc(100% - 92px); overflow: auto; color: #333; padding: 12px 16px 16px; } .v5-header-root .srp-pricing-overlay-wrapper[data-monthly="1"] .v4-pricing-row.v4-pricing-terms { display: none; } .v5-header-root .srp-pricing-overlay-cta-wrap { position: absolute; left: 0; bottom: 0; width: 100%; background: #fff; padding: 8px; text-align: center; z-index: 1; } .v5-header-root .srp-pricing-overlay-cta-wrap a.srp-pricing-overlay-cta { display: block; margin: 0 auto; padding: 0; border-radius: var(--border-radius); background: var(--v5-btn-bg, #0a64c2); color: var(--v5-btn-text, #fff); font-size: 14px; text-decoration: none; } .v5-header-root .srp-pricing-overlay-cta-wrap a.srp-pricing-overlay-cta:hover { filter: brightness(.94); } .fl-node-tkown0azlb1e { --v5-bg: #000000; --v5-text: #ffffff; --v5-hover: #f7f7f7; --v5-transparent-text: #ffffff; --v5-btn-bg: #1C69D3; --v5-btn-text: #ffffff; --v5-search-btn-bg: #1C69D3; --v5-search-btn-icon: #ffffff; --v5-search-bg: #F0F0F5; --v5-search-text: #333333; --v5-loc-bg: #000000; --v5-loc-text: #ffffff; --v5-loc-border: rgb(74, 74, 74); --v5-loc-link: #1C69D3; --v5-loc-link-hover: #191919; --v5-logo-w: 190px; --v5-logo-h: 48px; --v5-logo-offset: 0px; } @media (max-width: 1023px) { .fl-node-tkown0azlb1e { } } @media (max-width: 767px) { .fl-node-tkown0azlb1e { } } .fl-node-tkown0azlb1e .v5-header--transparent-mode .v5-header-logo svg path { fill: var(--v5-transparent-text, #fff); } /* Start Global Nodes CSS */ /* End Global Nodes CSS */ /* Start Layout CSS */ /* End Layout CSS */ /* Sticky */ .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky { position: fixed; width: 100%; z-index: 100; } /* Sticky - fix flyout menu */ .fl-theme-builder-flyout-menu-push-left .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky { left: auto !important; transition: left 0.2s !important; } .fl-theme-builder-flyout-menu-push-right .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky { right: auto !important; transition: right 0.2s !important; } .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky .fl-menu .fl-menu-mobile-opacity { height: 100vh; width: 100vw; } .fl-builder-content[data-type="header"]:not([data-overlay="1"]).fl-theme-builder-header-sticky .fl-menu-mobile-flyout { top: 0px; } .fl-theme-builder-flyout-menu-active body { margin-left: 0px !important; margin-right: 0px !important; } .fl-theme-builder-has-flyout-menu, .fl-theme-builder-has-flyout-menu body { overflow-x: hidden; } .fl-theme-builder-flyout-menu-push-right { right: 0px; transition: right 0.2s ease-in-out; } .fl-theme-builder-flyout-menu-push-left { left: 0px; transition: left 0.2s ease-in-out; } .fl-theme-builder-flyout-menu-active .fl-theme-builder-flyout-menu-push-right { position: relative; right: 250px; } .fl-theme-builder-flyout-menu-active .fl-theme-builder-flyout-menu-push-left { position: relative; left: 250px; } .fl-theme-builder-flyout-menu-active .fl-builder-content[data-type="header"] .fl-menu-disable-transition { transition: none; } /* Shrink */ .fl-builder-content[data-shrink="1"] .fl-row-content-wrap, .fl-builder-content[data-shrink="1"] .fl-col-content, .fl-builder-content[data-shrink="1"] .fl-module-content, .fl-builder-content[data-shrink="1"] img { -webkit-transition: all 0.4s ease-in-out, background-position 1ms; -moz-transition: all 0.4s ease-in-out, background-position 1ms; transition: all 0.4s ease-in-out, background-position 1ms; } .fl-builder-content[data-shrink="1"] img { width: auto; } .fl-builder-content[data-shrink="1"] img.fl-photo-img { width: auto; height: auto; } .fl-builder-content[data-type="header"].fl-theme-builder-header-shrink .fl-row-content-wrap { margin-bottom: 0; margin-top: 0; } .fl-theme-builder-header-shrink-row-bottom.fl-row-content-wrap { padding-bottom: 5px; } .fl-theme-builder-header-shrink-row-top.fl-row-content-wrap { padding-top: 5px; } .fl-builder-content[data-type="header"].fl-theme-builder-header-shrink .fl-col-content { margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-top: 0; } .fl-theme-builder-header-shrink-module-bottom.fl-module-content, .fl-theme-builder-header-shrink-module-bottom.fl-module:where(.fl-module:not(:has(> .fl-module-content))) { margin-bottom: 5px; } .fl-theme-builder-header-shrink-module-top.fl-module-content, .fl-theme-builder-header-shrink-module-bottom.fl-module:where(.fl-module:not(:has(> .fl-module-content))) { margin-top: 5px; } .fl-builder-content[data-type="header"].fl-theme-builder-header-shrink img { -webkit-transition: all 0.4s ease-in-out, background-position 1ms; -moz-transition: all 0.4s ease-in-out, background-position 1ms; transition: all 0.4s ease-in-out, background-position 1ms; } /* Overlay */ .fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-sticky):not(.fl-builder-content-editing) { position: absolute; width: 100%; z-index: 100; } .fl-builder-edit body:not(.single-fl-theme-layout) .fl-builder-content[data-overlay="1"] { display: none; } body:not(.single-fl-theme-layout) .fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled):not([data-overlay-bg="default"]) .fl-row-content-wrap, body:not(.single-fl-theme-layout) .fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled):not([data-overlay-bg="default"]) .fl-col-content, body:not(.single-fl-theme-layout) .fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled):not([data-overlay-bg="default"]) .fl-module-box { background: transparent; }