/* BDR responsive - phone, tablet, and the sticky header. Loads after bdr-aurora-accents.css. Delete this file and its enqueue to revert. 2026-09-03. */ /* ============================================================ the actual bug */ /* The header sits in its own Elementor section, and that section carries overflow:hidden. The drawer is already positioned and layered correctly - position:absolute, z-index:50, top:74px - but the section is only 98px tall, so the drawer is CLIPPED, not hidden behind anything. Tapping Menu therefore appears to do nothing. This one line is the fix. */ body.bdr-site-redesign .bdr-native-section:has(.bdr-site-header){ overflow: visible !important; } /* ====================================================== the sticky header */ /* Sticky has to go on

, the only ancestor whose own parent () is taller than it. Every wrapper between that and .bdr-site-header is exactly header-height, so a sticky rule on any of them has zero travel and simply scrolls away with the page. The main nav sticks. The secondary utility bar above it does not: the header pins at top:-38px on desktop, which is the utility bar's exact height, so that row scrolls off the top and the nav pill lands with its normal 18px of air above it. No JS, nothing to keep in sync with a scroll listener. */ body.bdr-site-redesign > header.elementor-location-header{ position: sticky !important; top: 0; z-index: 300; } @media (min-width: 1024px){ body.bdr-site-redesign > header.elementor-location-header{ top: -38px; } /* keep that 38px honest - a wrapped utility bar would leave a sliver behind */ body.bdr-site-redesign .bdr-utility-bar, body.bdr-site-redesign .bdr-utility-bar > div{ white-space: nowrap; } /* The drawer and the desktop nav are the SAME element, .bdr-nav-links. Below 1024 bdr-responsive.js fills it with a cloned Get My Quote and a tail of utility links - and if the window is then dragged wide, that injected block is still sitting in what is now the horizontal desktop nav, which reads as a second little menu wedged inside the main one. The injection is harmless as long as it only shows at drawer widths, so hide it here rather than tearing it down on every resize. */ body.bdr-site-redesign .bdr-nav-links .bdr-header-quote, body.bdr-site-redesign .bdr-drawer-tail{ display: none !important; } } /* ================================================= the bar's own surface */ /* The pill was a 7% white tint over nothing at all: on the dark bands the page behind it supplied the colour, and over a white band the page's own headings and logos read straight through it. Same tint, but now over an opaque base of its own - identical on dark, legible on light. */ body.bdr-site-redesign .bdr-main-nav{ background-color: rgba(18,21,27,.94) !important; background-image: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) !important; border-color: rgba(255,255,255,.14) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; box-shadow: 0 10px 30px rgba(6,8,12,.34) !important; } /* Only the pill travels. bdr-site.css paints the header strip itself, and the surface pass paints the header band an inline background on top of that - both invisible while the header sat still at the top of a dark hero, but the moment it sticks that slab rides down the page around the pill. Strip the whole stack back to transparent. The doubled class is deliberate: bdr-site.css uses body.bdr-site-redesign:has(.bdr-v19-frame--home) .elementor-location-header, which out-specifies the single-class form. The inline paint cannot be beaten from a stylesheet at all - floatBar() in bdr-responsive.js removes it. */ body.bdr-site-redesign.bdr-site-redesign > header.elementor-location-header, body.bdr-site-redesign.bdr-site-redesign > header.elementor-location-header > .bdr-v19-page, body.bdr-site-redesign.bdr-site-redesign > header.elementor-location-header .bdr-native-section:has(.bdr-site-header), body.bdr-site-redesign.bdr-site-redesign .bdr-site-header{ background-color: transparent !important; background-image: none !important; } /* ...which leaves the top of the page bare, and is white on most templates. So the band the header used to carry is painted here instead, on an absolutely positioned strip anchored to the top of the DOCUMENT. It sits exactly where the header sits at rest and scrolls away with the page, so the colour stays at the top and only the pill travels. #14171D is the same colour the header carried, and the same colour uses on the homepage, so it is seamless with the hero on every template. The heights are the header's own: 96px with the utility bar hidden, 146px with it showing. If the header's height changes, change these two. */ /* The strip is absolutely positioned, so it needs a containing block. Without one it resolves to the INITIAL containing block, which starts at the top of the document -- above the 32px (46px on phones) that the WordPress admin bar adds as a margin on . The band then sits that far too high and leaves a white strip between its bottom edge and whatever follows the header, on every template whose body is white. Anchoring it to puts it back under the header at any admin-bar height, and needs no admin-bar special case. Only five absolutely positioned elements on the page resolve to the ICB today and all five are off-screen accessibility helpers, so this changes nothing else. */ body.bdr-site-redesign{ position: relative; } body.bdr-site-redesign::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 116px; background: #14171D; z-index: 0; pointer-events: none; } @media (min-width: 768px){ body.bdr-site-redesign::before{ height: 146px; } } /* BDR-HOME-TOP-BAND-2026-09-09 The band above is a flat #14171D slab, and its comment says that is safe because '#14171D is ... the same colour uses on the homepage, so it is seamless with the hero'. That stopped being true when the homepage body gained the 40px grid and the hero gained its vignette: the slab covers both for exactly the header's height, which is the flat strip behind the menu and the hard line under it. Every other template still wants the flat fill, so this is homepage-only. Transparent lets the body grid through; the gradient is the top slice of the hero's vignette, sharing --bdr-vg-span with it, so the two meet exactly. The band's height and --bdr-vg-lift are the same two numbers (96 / 146) by construction - if the header's height changes, both must change together. */ body.bdr-site-redesign.home::before{ background-color: transparent !important; background-image: radial-gradient(at 52% 40%, rgba(0,0,0,0) 0%, rgba(11,11,13,.08) 52%, rgba(11,11,13,.58) 100%) !important; background-repeat: no-repeat !important; background-size: 100% var(--bdr-vg-span) !important; background-position: 0 0 !important; } @media (max-width: 1023px){ body.bdr-site-redesign .bdr-main-nav{ gap: 8px; } body.bdr-site-redesign .bdr-nav-actions{ gap: 6px !important; } /* The markup puts the hamburger first. Read order is logo, call, menu. */ body.bdr-site-redesign .bdr-nav-actions > a[href^="tel:"]{ order: 1; } body.bdr-site-redesign .bdr-nav-actions .bdr-header-quote{ order: 2; } body.bdr-site-redesign .bdr-menu-toggle{ order: 3; } /* BDR-WQ-0042/0043: double the 22px glyph and provide a larger tap target. Solid CSS bars retain the close icon without SVG-mask repainting. */ body.bdr-site-redesign .bdr-menu-toggle{ display: flex !important; position: relative; align-items: center; justify-content: center; flex: 0 0 64px; width: 64px !important; min-width: 64px; max-width: 64px; height: 64px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; font-size: 0 !important; color: #FFFFFF !important; touch-action: manipulation; cursor: pointer; } body.bdr-site-redesign .bdr-menu-toggle::before, body.bdr-site-redesign .bdr-menu-toggle::after{ content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 44px; height: 4px; border-radius: 2px; background: #FFFFFF; -webkit-mask: none !important; mask: none !important; pointer-events: none; transform: translate(-50%, -50%); } body.bdr-site-redesign .bdr-menu-toggle::before{ box-shadow: 0 -12px 0 #FFFFFF, 0 12px 0 #FFFFFF; } body.bdr-site-redesign .bdr-menu-toggle::after{ opacity: 0; } body.bdr-site-redesign .bdr-menu-toggle[aria-expanded="true"]::before{ box-shadow: none; transform: translate(-50%, -50%) rotate(45deg); } body.bdr-site-redesign .bdr-menu-toggle[aria-expanded="true"]::after{ opacity: 1; transform: translate(-50%, -50%) rotate(-45deg); } body.bdr-site-redesign .bdr-menu-toggle:focus-visible{ outline: 2px solid #00AEEF !important; outline-offset: 2px; } /* -------------------------------------------------------- the phone button */ /* bdr-site.css hides the tel: link below 768 with .bdr-v19-frame .bdr-nav-actions > a[href^="tel:"] {display:none!important}, so the override has to out-specify that selector, not just repeat it. */ body.bdr-site-redesign .bdr-nav-phone-button, body.bdr-site-redesign .bdr-v19-frame .bdr-nav-actions > a.bdr-nav-phone-button[href^="tel:"]{ display: inline-flex !important; flex: none; align-items: center; justify-content: center; } /* ------------------------------------------------------------- the drawer */ body.bdr-site-redesign .bdr-nav-links{ top: calc(100% + 8px) !important; padding: 8px !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 16px !important; background: rgba(18,21,26,.98) !important; box-shadow: 0 24px 60px rgba(0,0,0,.62) !important; z-index: 210 !important; } body.bdr-site-redesign .bdr-nav-item > a, body.bdr-site-redesign .bdr-nav-item > button{ min-height: 52px !important; padding: 0 12px !important; border-radius: 10px; font-size: 16px !important; font-weight: 550 !important; } body.bdr-site-redesign .bdr-nav-panel a{ display: flex; align-items: center; min-height: 44px; font-size: 15px !important; } body.bdr-site-redesign .bdr-nav-panel-kicker{ font-size: 11.5px !important; } /* ------------------------------------------------- Garrick, and its credit */ body.bdr-site-redesign .bdr-garrick-card, body.bdr-site-redesign .bdr-garrick-card-wrap, body.bdr-site-redesign .bdr-garrick-card-surface{ display: block !important; } body.bdr-site-redesign .bdr-garrick-card-surface{ min-height: 0 !important; } body.bdr-site-redesign .bdr-garrick-hero{ min-height: 0 !important; padding: 0 !important; } body.bdr-site-redesign .bdr-garrick-card-shadow{ display: none !important; } /* ---------------------------------------------- the state art is desktop only */ /* Only the big map in a state page's hero. This has to stay scoped to the hero: the same element also draws the little state icons in States we serve, and an unscoped rule blanked all six of those tiles on every narrow screen. */ body.bdr-site-redesign .bdr-service-hero-stack state-map{ display: none !important; } /* The map sits in a fixed-height well authored inline on each page. Hiding the map left the well behind, and that empty box is the hole under the hero's button on tablets. This used to match the well by height:380px, so the twelve pages authored at 200, 210, 390 or 400 kept their hole. Match the well by what it holds instead of how tall it happens to be. */ body.bdr-site-redesign .bdr-service-hero-stack div:has(> state-map){ display: none !important; } body.bdr-site-redesign .bdr-service-hero-stack div[style*="grid-template-columns:1.15fr"]{ grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } /* -------------------------------------------- nothing scrolls sideways */ body.bdr-site-redesign{ overflow-x: hidden; } body.bdr-site-redesign :has(> .bdr-carousel-track){ overflow: hidden !important; } body.bdr-site-redesign .bdr-carousel-track{ gap: 34px !important; } body.bdr-site-redesign .bdr-breadcrumbs, body.bdr-site-redesign .bdr-article-breadcrumbs{ flex-wrap: wrap; row-gap: 4px; } /* ------------------------------------------------------------ tap targets */ body.bdr-site-redesign .bdr-related-link-card a, body.bdr-site-redesign .elementor-post__read-more, body.bdr-site-redesign .bdr-blog-topic-link{ min-height: 44px; display: inline-flex; align-items: center; } } /* ============================================================ phone only */ @media (max-width: 767px){ body.bdr-site-redesign .bdr-nav-logo img{ width: 140px !important; height: auto !important; } body.bdr-site-redesign .bdr-nav-phone-button, body.bdr-site-redesign .bdr-v19-frame .bdr-nav-actions > a.bdr-nav-phone-button[href^="tel:"]{ display: inline-flex !important; width: 44px !important; height: 44px !important; padding: 0 !important; gap: 0 !important; border: 1px solid #FFB020 !important; border-radius: 11px !important; background: rgba(255, 176, 32,.14) !important; box-sizing: border-box; } body.bdr-site-redesign .bdr-nav-phone-button span{ display: none !important; } /* The icon now ships with stroke="#FFB020" on the tag, so the one-blue sweep -- which is scoped to svg[stroke="#00A5E2"] -- no longer claims it. These rules stay because the attribute alone loses to that sweep's !important on any element it does still match, and because the phone button is a CTA whose colour should be stated in one place per breakpoint. */ body.bdr-site-redesign .bdr-v19-frame .bdr-nav-phone-button svg, body.bdr-site-redesign .bdr-v19-frame .bdr-nav-phone-button svg[stroke], body.bdr-site-redesign .bdr-v19-frame .bdr-nav-phone-button svg [stroke]{ stroke: #FFB020 !important; color: #FFB020 !important; } body.bdr-site-redesign .bdr-v19-frame .bdr-nav-phone-button svg{ width: 25px !important; height: 25px !important; } body.bdr-site-redesign .bdr-nav-actions .bdr-header-quote{ display: none !important; } body.bdr-site-redesign .bdr-nav-links .bdr-header-quote{ display: flex !important; align-items: center; justify-content: center; min-height: 50px; margin: 4px 4px 8px; border-radius: 11px !important; font-size: 16px !important; text-align: center; } } /* ============================================================ tablet only */ @media (min-width: 768px) and (max-width: 1023px){ body.bdr-site-redesign .bdr-nav-logo img{ width: 164px !important; height: auto !important; } body.bdr-site-redesign .bdr-nav-phone-button, body.bdr-site-redesign .bdr-v19-frame .bdr-nav-actions > a.bdr-nav-phone-button[href^="tel:"]{ display: inline-flex !important; height: 46px !important; padding: 0 16px !important; gap: 9px !important; border: 1px solid rgba(255, 176, 32,.85) !important; border-radius: 11px !important; background: rgba(255, 176, 32,.16) !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: 600 !important; white-space: nowrap; } body.bdr-site-redesign .bdr-v19-frame .bdr-nav-phone-button svg, body.bdr-site-redesign .bdr-v19-frame .bdr-nav-phone-button svg[stroke], body.bdr-site-redesign .bdr-v19-frame .bdr-nav-phone-button svg [stroke]{ stroke: #FFB020 !important; color: #FFB020 !important; } body.bdr-site-redesign .bdr-nav-actions .bdr-header-quote{ display: flex !important; align-items: center; justify-content: center; height: 46px !important; padding: 0 20px !important; box-shadow: 0 6px 18px rgba(0, 165, 226,.34); } body.bdr-site-redesign .bdr-nav-links .bdr-header-quote{ display: none !important; } body.bdr-site-redesign .bdr-nav-links{ left: auto !important; right: 0 !important; width: 360px !important; } body.bdr-site-redesign .bdr-v19-frame div[style*="grid-template-columns:repeat(3,1fr)"], body.bdr-site-redesign .bdr-v19-frame div[style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ============================================ type sizes and label weights These came out of bdr-pills.js, which injected them as a