/* ===================================================================== BP 05 — MEGABAR Best Placed Kit v4.0 (carried over from Foundation Kit v3.0) Desktop mega menu plus off-canvas mobile swap. Fluent Snippet name: BP 05 Megabar Type: CSS, front-end, load AFTER BP 00, BP 01, BP 02 Status: ACTIVATE IT. DO NOT EDIT THIS FILE. Every value it uses is declared in BP 00 Tokens or in section 1 below. Paste it verbatim on every site. --------------------------------------------------------------------- PROVENANCE TMS Protection designed and proved it. RB Central ported it and is the first site where it ran in anger, verified at 1400 / 1100 / 1024 / 500. Coastal is the third, which is what promoted it out of client snippets and into the kit. Three RB snippets became this one file: RB Header the bars and the desktop mega RB Off-Canvas the swap, the panel, rows, submenus, CTA RB Menu Icons the glyph mechanism (section 14; the per-site map stays in the client snippet) WHAT CHANGED IN THE PORT 1. rb-* renamed bp-megabar-*. 2. Every hard-coded indigo rgba() derived from --brand-primary with color-mix, so the file ships neutral. 3. The icon grid goes back on BP 02. RB hand-rolled it because BP 02 was not installed there by decision; that decision cost them a rebuilt auto-fit grid and is not repeated. 4. The top bar is NOT here. It is trivially different per site and belongs in the client snippet. --------------------------------------------------------------------- THE TWO THINGS THAT WILL CATCH YOU OUT 1. THE OFF-CANVAS RENDERS ELEMENTOR'S *MAIN* MENU, NOT ITS DROPDOWN. Because the Nav Menu's Breakpoint is None, it never collapses to the inline accordion by itself, so SmartMenus drives the submenus — and SmartMenus opens them as DESKTOP FLYOUTS: position:absolute with inline negative margins like margin-left:-223px. In a narrow panel they fly off the side of the screen and the submenu looks like it simply does not open. Section 10 fixes it by overriding POSITIONING ONLY. It never touches `display`, because SmartMenus owns open and close by toggling display and overriding that breaks the toggle entirely. A stylesheet !important beats SmartMenus' inline non-important styles, so the open list drops back into normal flow. 2. THE SWAP IS DELIBERATELY BELT AND BRACES. Set it in BOTH places: tick Hide on Tablet + Mobile on the mega, Hide on Desktop + Laptop on the burger, AND leave section 8 in place. They agree, so it is harmless, and it means the header still behaves when an import loses one of the two. Imports lose settings routinely. Do not "tidy" this to one mechanism. --------------------------------------------------------------------- ELEMENTOR SETTINGS THIS FILE ASSUMES Mega Menu widget Breakpoint: NONE class: bp-megabar-nav Any other Breakpoint draws Elementor's own toggle, which opens a stacked dropdown instead of your off-canvas. Off-Canvas widget Width 100vw, Height 100vh on tablet + mobile, Prevent Scroll: Yes (Elementor then handles the body lock via body.e-off-canvas__no-scroll), entrance/exit fadeIn. Nav Menu (in drawer) Breakpoint: None, Layout vertical, class: bp-megabar-drawer-nav The burger an ICON widget, not a button. Its Link field takes a DYNAMIC TAG: the wrench icon > Off-Canvas > pick the widget by name. This is the bit no documentation ever recorded and it does NOT survive a JSON import — the tag stores the off-canvas element id, which is regenerated on import. Re-point it by hand. The close control same dynamic tag with Action: Close. Panel and column widths, and font sizes, stay in the Elementor panel so the editor preview is honest. This file styles and reserves space. --------------------------------------------------------------------- USED-CSS SAFELIST — all of it. The drawer is in the DOM but hidden at load, which is invisible to LiteSpeed UCSS and FlyingPress RUCSS. bp-megabar-bar bp-megabar-nav bp-megabar-panel bp-megabar-main bp-megabar-heading bp-megabar-grid bp-megabar-card bp-megabar-card-title bp-megabar-card-text bp-megabar-card-btn bp-megabar-burger bp-megabar-drawer bp-megabar-drawer-nav bp-megabar-drawer-cta bp-megabar-drawer-label bp-btn-accent bp-btn-accent--onlight e-n-menu-content e-n-menu-title e-active e-current e-off-canvas e-off-canvas__overlay e-off-canvas__main e-off-canvas__content e-off-canvas__no-scroll sub-menu sub-arrow elementor-item-active current-menu-item current-menu-ancestor [aria-expanded] If a panel opens unstyled, that is used CSS. Every time. ===================================================================== --------------------------------------------------------------------- v4 NOTE, October 2026. ONE CHANGE FROM v3. The variables in section 1 are now declared on `body`, not `:root`. BP 00 Tokens v4 reads the brand colours from Elementor's globals, which live on . Section 1 derives its hairlines and shadows from --brand-primary, so it has to sit where --brand-primary can be seen. Left on :root, every derived value resolves to nothing and the panels lose their borders and shadow. Section 18 at the very end is also new. It is two fixes that every site using this file needed and that were living in a client snippet (Coastal Header Fixes): the burger staying visible on desktop, and the panel icons sitting off centre in their tiles. */ /* ===================================================================== 1. HEADER-OWNED VALUES --------------------------------------------------------------------- Derived from BP 00 so the file ships neutral, but overridable per site if a client needs something the tokens cannot express. ===================================================================== */ body { /* Bar height. Set it to your logo height plus padding. It reserves the bar so nothing shifts while the logo and webfont load, which is where header CLS usually comes from. */ --bp-megabar-height: 90px; --bp-megabar-height-mobile: 78px; /* Hairlines and shadows, derived from the brand ink rather than hard-coded. color-mix keeps them in the brand hue on every site. */ --bp-megabar-hairline: color-mix(in srgb, var(--brand-primary) 10%, transparent); --bp-megabar-hairline-soft: color-mix(in srgb, var(--brand-primary) 7%, transparent); --bp-megabar-hairline-strong: color-mix(in srgb, var(--brand-primary) 35%, transparent); --bp-megabar-tile-border: color-mix(in srgb, var(--brand-primary) 10%, transparent); --bp-megabar-card-border: color-mix(in srgb, var(--brand-primary) 14%, transparent); --bp-megabar-btn-border: color-mix(in srgb, var(--brand-primary) 12%, transparent); --bp-megabar-scrollbar: color-mix(in srgb, var(--brand-primary) 25%, transparent); /* Drawer eyebrow. Its own token rather than --fs-xs, because that is the floor for text a customer has to READ and this is chrome. */ --bp-megabar-label-size: .72rem; --bp-megabar-panel-shadow: 0 18px 50px color-mix(in srgb, var(--brand-primary-deep, var(--brand-primary)) 16%, transparent), 0 4px 12px color-mix(in srgb, var(--brand-primary-deep, var(--brand-primary)) 6%, transparent); /* Active drawer row. A touch deeper than --brand-surface-alt so the current page reads without needing the accent. */ --bp-megabar-row-active: color-mix(in srgb, var(--brand-primary) 6%, var(--brand-surface)); /* Panel icon colour at rest. Defaults to the decorative accent, which is the token that exists precisely for marks that carry no text. If your brand's decorative tone is too pale to read at icon size on a white tile, override this with a deeper step of the same hue rather than reaching for the text accent — on RB the brand pale blue measured 1.75:1 and simply vanished; the same hue at 4.62:1 reads as clearly blue. */ --bp-megabar-icon: var(--brand-decor); /* Tile size, and the glyph inside it. Keep the glyph comfortably smaller than the tile — same ratio as a favicon in a browser tab. 48/26 is about 54%, which reads as a mark in a frame rather than a mark straining against one. */ --bp-megabar-tile: 48px; --bp-megabar-glyph: 26px; /* Panel scroll ceiling on desktop */ --bp-megabar-panel-max: min(72vh, 580px); } /* ===================================================================== 2. HOST BAR --------------------------------------------------------------------- Add bp-megabar-bar ALONGSIDE your own bar class, e.g. class="coastal-header bp-megabar-bar". Two classes on one container, so the dependency is explicit rather than assumed. Your class owns colour, padding and height. This one owns only the things the mega menu needs to be true of its host. ===================================================================== */ .bp-megabar-bar { /* Reserves the bar so nothing shifts while the logo and webfont load, which is where header CLS usually comes from. */ min-height: var(--bp-megabar-height); } @media (max-width: 767px) { .bp-megabar-bar { min-height: var(--bp-megabar-height-mobile); } } .elementor-element.bp-megabar-bar, .elementor-element.bp-megabar-bar > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } /* Content-width children, so space-between has room to work. Load-bearing: .e-con sets width: var(--width) and --width is 100% on full-width containers, so children take the whole row and any justify-content has nothing to distribute. */ .bp-megabar-bar > .e-con-inner > .elementor-element { width: auto !important; flex: 0 0 auto !important; } .bp-megabar-bar .elementor-widget-theme-site-logo img { border-radius: 0 !important; } /* ===================================================================== 3. NAV — the Mega Menu widget's own titles ===================================================================== */ .bp-megabar-nav .e-n-menu-title-text { font-family: var(--brand-font-heading); font-weight: var(--brand-weight-heading); text-transform: uppercase; letter-spacing: .4px; color: var(--brand-primary); transition: color .2s ease; } /* Elementor sets aria-expanded on the item, which is the reliable open state. .e-active is set too, but aria-expanded is what TMS proved out. */ .bp-megabar-nav .e-n-menu-item > .e-n-menu-title:hover .e-n-menu-title-text, .bp-megabar-nav .e-n-menu-item[aria-expanded="true"] > .e-n-menu-title .e-n-menu-title-text { color: var(--brand-accent-solid); } .bp-megabar-nav .e-n-menu-dropdown-icon svg { transition: transform .2s ease; } .bp-megabar-nav .e-n-menu-item[aria-expanded="true"] .e-n-menu-dropdown-icon svg { color: var(--brand-accent-solid); fill: var(--brand-accent-solid); } /* Open-state underline */ .bp-megabar-nav .e-n-menu-title { position: relative; } .bp-megabar-nav .e-n-menu-item[aria-expanded="true"] > .e-n-menu-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--brand-accent-solid); border-radius: 2px; } /* Kill the widget's own white dropdown wrapper so the panel fills it. Note: Elementor's Content Width control on the panel reverts to widget width whenever the host container is boxed, which is why the panel is pinned in CSS here instead of in the panel settings. */ .bp-megabar-nav .e-n-menu-content, .bp-megabar-nav .e-n-menu-content > .e-con { background: transparent !important; box-shadow: none !important; padding: 0 !important; } @media (min-width: 768px) { .bp-megabar-nav .e-n-menu-content { margin-top: 0 !important; } } /* ===================================================================== 4. DROPDOWN PANEL ===================================================================== */ .bp-megabar-panel { position: relative; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.75rem, 3vw, 2.75rem) !important; border-radius: 16px; background: radial-gradient(120% 140% at 92% 82%, color-mix(in srgb, var(--brand-primary) 5%, transparent) 0%, transparent 58%), linear-gradient(135deg, var(--brand-surface-soft) 0%, var(--brand-surface-alt) 55%, color-mix(in srgb, var(--brand-primary) 8%, var(--brand-surface)) 100%); box-shadow: var(--bp-megabar-panel-shadow); } /* Panel top rule. A short decorative bar in the top-left corner, deliberately echoing the rule under .bp-megabar-heading so the panel and its headings read as one system rather than two ideas. Decorative only, so it uses --brand-decor. If your kit has --brand-gradient defined, that is a legitimate swap here. */ .bp-megabar-panel::before { content: ""; position: absolute; top: 0; left: 20px; width: 64px; height: 4px; background: var(--brand-decor); border-radius: 0 0 3px 3px; pointer-events: none; } .bp-megabar-main { min-width: 0; /* lets the grid shrink instead of overflowing */ } /* Panel heading with a short accent rule under it */ .bp-megabar-heading { text-transform: uppercase; letter-spacing: .4px; color: var(--brand-primary); margin: 0 0 .25rem 0 !important; padding-bottom: .55rem; position: relative; } .bp-megabar-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--brand-accent-bar-len, 46px); height: 3px; background: var(--brand-accent-solid); border-radius: 2px; } /* --- the icon grid --- PUT BP 02 CLASSES ON THIS CONTAINER: bpg-grid bpg-grid--auto-280 bpg-grid--gap-s auto-fit reflows on its own, so there are no breakpoint classes to remember or get wrong. The rule below is only a fallback for a site that somehow has no BP 02; if you find yourself relying on it, install BP 02 instead. */ .bp-megabar-grid:not(.bpg-grid) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; /* --gap-s is not a token; BP 01/02 expose gap-s as a CLASS */ width: 100%; } /* Desktop-only scroll containment. A tall panel on a short laptop screen would otherwise run off the bottom with no way to reach the last item. overscroll-behavior stops the scroll leaking to the page at the ends. Scoped above the swap point, because below it the drawer takes over. */ @media (min-width: 1025px) { .bp-megabar-panel { max-height: var(--bp-megabar-panel-max); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--bp-megabar-scrollbar) transparent; } .bp-megabar-panel::-webkit-scrollbar { width: 8px; } .bp-megabar-panel::-webkit-scrollbar-thumb { background: var(--bp-megabar-scrollbar); border-radius: 4px; } .bp-megabar-panel::-webkit-scrollbar-track { background: transparent; } } /* ===================================================================== 5. PANEL ITEMS — Elementor Icon Box widgets --------------------------------------------------------------------- Panel-scoped rather than keyed to the item class, so it still works if the class is dropped on a JSON import. That happens, and on TMS it cost an afternoon. Icon and tile sizes are fixed here to reserve space. Title and description font sizes are left to the Elementor settings. ===================================================================== */ .bp-megabar-panel .elementor-widget-icon-box { margin: 0 !important; } .bp-megabar-panel .elementor-icon-box-wrapper { display: flex !important; align-items: flex-start; text-align: left; gap: 14px; padding: 8px 10px; border-radius: 12px; transition: background .2s ease, transform .2s ease; } .bp-megabar-panel .elementor-icon-box-icon { margin: 0 !important; flex: 0 0 auto; width: var(--bp-megabar-tile); height: var(--bp-megabar-tile); border-radius: 11px; overflow: hidden; /* a glyph that outgrows its tile gets clipped rather than silently spilling over the text */ display: flex; align-items: center; justify-content: center; background: var(--brand-surface); border: 1px solid var(--bp-megabar-tile-border); transition: border-color .2s ease, background .2s ease; } /* Sizing the glyph. THREE selectors, because Elementor renders icons three different ways and only one of them responds to width/height: uploaded SVG — width/height work uploaded image — width/height work Font Awesome — a FONT GLYPH. width/height do nothing to it; only font-size does. The case is the one that bites. Elementor's default icon size is 50px, so a Font Awesome icon lands 50px inside a 48px tile, overflows it, and reads as "the icons are not centred". They are centred — they are simply bigger than the box holding them. Elementor also writes width and height onto the itself, so those have to go back to auto or the font-size cannot take effect. */ .bp-megabar-panel .elementor-icon-box-icon img, .bp-megabar-panel .elementor-icon-box-icon svg { width: var(--bp-megabar-glyph) !important; height: var(--bp-megabar-glyph) !important; object-fit: contain; } .bp-megabar-panel .elementor-icon-box-icon .elementor-icon, .bp-megabar-panel .elementor-icon-box-icon i { font-size: var(--bp-megabar-glyph) !important; line-height: 1 !important; } /* Optical centring, which is a separate problem from box centring. Centring the centres its EM BOX, and a font glyph does not fill its em box — it sits on the baseline with ascender space above and descender space below. So a perfectly centred box still reads as a glyph sitting low and left, which is exactly what "the icons are not centred in the squares" looks like. Making every level a centring grid, each filling its parent, means the glyph itself is the thing being centred rather than the box around it. */ /* THE INSET PATTERN. Use this for any glyph-in-a-shape on the site. `place-items: center` alone does NOT work here, and it is worth understanding why before you simplify it away. A centred grid item is sized to its CONTENT, not stretched to the track. So `width: 100%` on a child resolves to 100% of the shrink-wrapped parent — which is the glyph's own 14px, not the tile's 46px. Measured on the live phone icon: tile 30px, every layer inside it 14px, and the glyph pinned to the top edge. Making each layer `position: absolute; inset: 0` forces it to fill the tile exactly, and grid-centring at every level then puts the glyph dead centre regardless of what intrinsic size Elementor gave it. */ .bp-megabar-panel .elementor-icon-box-icon { position: relative !important; display: block !important; padding: 0 !important; overflow: hidden !important; } .bp-megabar-panel .elementor-icon-box-icon > *, .bp-megabar-panel .elementor-icon-box-icon .elementor-icon, .bp-megabar-panel .elementor-icon-box-icon i, .bp-megabar-panel .elementor-icon-box-icon svg { position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; width: auto !important; height: auto !important; margin: 0 !important; } .bp-megabar-panel .elementor-icon-box-icon i::before { display: block !important; line-height: 1 !important; } .bp-megabar-panel .elementor-icon-box-icon svg { padding: calc((var(--bp-megabar-tile) - var(--bp-megabar-glyph)) / 2) !important; } .bp-megabar-panel .elementor-icon-box-content { display: flex; flex-direction: column; } .bp-megabar-panel .elementor-icon-box-title { margin: 0 0 2px 0 !important; color: var(--brand-primary); } .bp-megabar-panel .elementor-icon-box-title a { color: inherit !important; } .bp-megabar-panel .elementor-icon-box-description { margin: 0 !important; color: var(--brand-ink-muted); } /* Hover — accent tint, accent tile, accent title, slight lift */ .bp-megabar-panel .elementor-icon-box-wrapper:hover { background: var(--brand-tint); transform: translateY(-1px); } .bp-megabar-panel .elementor-icon-box-wrapper:hover .elementor-icon-box-icon { /* The accent, matching the title and the tint. NOT --brand-decor: on a two-tone palette those are different hues and the tile would disagree with the title beside it. */ border-color: var(--brand-accent-solid); background: var(--brand-surface); } .bp-megabar-panel .elementor-icon-box-wrapper:hover .elementor-icon-box-title, .bp-megabar-panel .elementor-icon-box-wrapper:hover .elementor-icon-box-title a { color: var(--brand-accent-solid) !important; } /* Icon colour, driven through `color` and `stroke` and NOT `fill`. The two icon styles behave differently: line-art SVGs fill="none" stroke="currentColor" — `color` drives them, and forcing a fill floods the closed paths solid solid SVGs paths inherit fill from currentColor — `color` too So setting `color` covers both and `fill` is deliberately left alone. RB's earlier version forced fill on every path, which meant a second rule in the icons snippet had to undo it. Both halves of that fight are gone: this is the only place panel icons get their colour. A raster PNG wrapped in an SVG will not recolour at all. Check the source before committing to an icon set — TMS shipped nine icons that cannot recolour and the hover state has never worked. */ .bp-megabar-panel .elementor-icon-box-icon svg { color: var(--bp-megabar-icon); stroke: var(--bp-megabar-icon); transition: color .2s ease, stroke .2s ease; } .bp-megabar-panel .elementor-icon-box-wrapper:hover .elementor-icon-box-icon svg { color: var(--brand-accent-solid); stroke: var(--brand-accent-solid); } /* ===================================================================== 6. SIDE CARD — the promo rail on the right of a panel ===================================================================== */ .bp-megabar-card { align-self: flex-start; /* only as tall as its content */ padding: clamp(1.25rem, 2vw, 1.75rem) !important; border-radius: 14px; background: radial-gradient(circle at 92% 82%, color-mix(in srgb, var(--brand-primary) 5%, transparent), transparent 29%), linear-gradient(135deg, var(--brand-surface), var(--brand-surface-alt)); border: 1px solid var(--bp-megabar-card-border); /* Decorative bar carrying no text, so the decorative tone is right here even though the button inside uses the text accent. */ border-left: 6px solid var(--brand-decor); box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-primary) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--brand-primary) 4%, transparent); } .bp-megabar-card-title { text-transform: uppercase; letter-spacing: .4px; color: var(--brand-primary); margin: 0 0 .4rem 0 !important; } .bp-megabar-card-text { color: var(--brand-ink); } .bp-megabar-card-btn { align-self: flex-start; } /* ===================================================================== 7. ACCENT BUTTON — two variants, and the surface decides --------------------------------------------------------------------- This is BP 00's two-tone accent rule made concrete: .bp-btn-accent the dark-surface tone. ON DARK. .bp-btn-accent--onlight the light-surface tone. ON WHITE. Getting them the wrong way round is the one reliable way to break a palette. If a button looks washed out, this is why: on RB the bright amber with white text measured 2.0:1. ===================================================================== */ .bp-btn-accent .elementor-button, a.bp-btn-accent { background: var(--brand-accent) !important; color: var(--brand-accent-ink) !important; border: 1px solid var(--bp-megabar-btn-border) !important; border-radius: var(--brand-radius); font-weight: 600; /* Two layers. The accent glow AND a neutral grounding shadow, which has no brand token and stays literal — without it the button reads as floating rather than seated. */ box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-accent) 28%, transparent), 0 1px 2px rgba(0, 0, 0, .08); transition: background .2s ease, box-shadow .2s ease, transform .2s ease; /* Stops the button stretching full width inside a column-direction container, which is Elementor's default. */ width: fit-content; max-width: 100%; } .bp-btn-accent .elementor-button:hover, a.bp-btn-accent:hover { background: var(--brand-accent-hover) !important; color: var(--brand-accent-ink) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-accent) 34%, transparent), 0 2px 4px rgba(0, 0, 0, .10); transform: translateY(-1px); } .bp-btn-accent--onlight .elementor-button, a.bp-btn-accent--onlight { background: var(--brand-accent-solid) !important; color: var(--brand-accent-solid-ink, #fff) !important; box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-accent-solid) 26%, transparent); } .bp-btn-accent--onlight .elementor-button:hover, a.bp-btn-accent--onlight:hover { background: var(--brand-accent-solid-hover) !important; color: var(--brand-accent-solid-ink, #fff) !important; } /* ===================================================================== 8. THE SWAP --------------------------------------------------------------------- Above 1024 the mega shows, the burger is hidden 1024 & below the mega is hidden, the drawer takes over 1024 is Elementor's tablet breakpoint in the kit, which is iPad portrait. Native Elementor Pro throughout: no plugin, nothing loads late, no JavaScript to write. Set this in Elementor TOO. See "belt and braces" in the preamble. ===================================================================== */ @media (min-width: 1025px) { .bp-megabar-burger { display: none !important; } } @media (max-width: 1024px) { .bp-megabar-nav { display: none !important; } /* If someone sets a Breakpoint on the Mega Menu widget by mistake, its own hamburger would appear alongside the burger. */ .bp-megabar-nav .e-n-menu-toggle { display: none !important; } } /* ===================================================================== 9. DRAWER SHELL --------------------------------------------------------------------- Width, height, animation and the scroll lock are all set in the Off-Canvas widget, not here. Elementor writes them as --e-off-canvas-* on the element and a snippet override would only fight it. The proven build is 100vw by 100vh with a fade — a full-screen overlay rather than a slide-in drawer. On a phone that is the better call: nothing peeks through to tap by accident, and the rows get full width. ===================================================================== */ .bp-megabar-drawer { background: var(--brand-surface); overscroll-behavior: contain; /* stop inner scroll leaking to the page */ } /* Small eyebrow at the top of the panel. Doubles as the close action on the proven build, which works fine — it styles whatever sits there. */ .bp-megabar-drawer-label, .bp-megabar-drawer-label .elementor-heading-title, .bp-megabar-drawer-label .elementor-heading-title a { margin: 0 !important; padding: 16px 18px; font-family: var(--brand-font-heading); font-size: var(--bp-megabar-label-size); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-ink-muted); text-decoration: none; } .bp-megabar-drawer-label { border-bottom: 1px solid var(--bp-megabar-hairline); } /* ===================================================================== 10. DRAWER SUBMENUS — open inline, not as a flyout --------------------------------------------------------------------- See trap 1 in the preamble. This overrides SmartMenus' POSITIONING only. Do not add display rules here — SmartMenus owns the toggle. Every selector is scoped to .bp-megabar-drawer-nav so none of it can reach the desktop mega. ===================================================================== */ .bp-megabar-drawer-nav .sub-menu { position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; box-shadow: none !important; border: 0 !important; background: transparent !important; } /* Elementor's dark dropdown highlight has no place on a light panel */ .bp-megabar-drawer-nav .elementor-nav-menu--dropdown li { background: transparent !important; } /* ===================================================================== 11. DRAWER ROWS --------------------------------------------------------------------- display:flex is forced because the glyph in section 14 is a ::before that has to lay out as a flex child. Without it the icon lands on top of the label. Colour logic: rows stay in the primary ink, hover fills a soft tint with a faint left bar, the current page gets a deeper tint and a solid bar. The accent is reserved for the CTA so it means one thing on the panel. ===================================================================== */ .bp-megabar-drawer-nav a.elementor-item { display: flex !important; align-items: center; gap: 12px; font-family: var(--brand-font); color: var(--brand-primary) !important; font-size: 1.02rem; font-weight: 500; letter-spacing: .2px; padding: 15px 18px !important; border-bottom: 1px solid var(--bp-megabar-hairline); border-left: 3px solid transparent; transition: color .15s ease, background .15s ease, border-color .15s ease; } .bp-megabar-drawer-nav a.elementor-item:hover { background: var(--brand-surface-alt) !important; border-left-color: var(--bp-megabar-hairline-strong); } .bp-megabar-drawer-nav a.elementor-item.elementor-item-active, .bp-megabar-drawer-nav li.current-menu-item > a.elementor-item, .bp-megabar-drawer-nav li.current-menu-ancestor > a.elementor-item { background: var(--bp-megabar-row-active) !important; border-left-color: var(--brand-primary); color: var(--brand-primary) !important; } /* --- sub rows --- */ .bp-megabar-drawer-nav a.elementor-sub-item { display: flex !important; align-items: center; gap: 12px; padding: 13px 18px 13px 42px !important; font-size: .96rem; font-weight: 400; color: var(--brand-primary) !important; border-bottom: 1px solid var(--bp-megabar-hairline-soft); border-left: 3px solid transparent; transition: color .15s ease, background .15s ease, border-color .15s ease; } .bp-megabar-drawer-nav a.elementor-sub-item:hover { background: var(--brand-surface-alt) !important; border-left-color: var(--bp-megabar-hairline-strong); } .bp-megabar-drawer-nav a.elementor-sub-item.elementor-item-active, .bp-megabar-drawer-nav li.current-menu-item > a.elementor-sub-item { background: var(--bp-megabar-row-active) !important; border-left-color: var(--brand-primary); } /* ===================================================================== 12. EXPAND ARROW --------------------------------------------------------------------- SmartMenus renders .sub-arrow. Push it right, keep it in the ink, flip it when its row is open. ===================================================================== */ .bp-megabar-drawer-nav a.elementor-item .sub-arrow, .bp-megabar-drawer-nav a.elementor-sub-item .sub-arrow { margin-left: auto; transition: transform .2s ease; } .bp-megabar-drawer-nav .sub-arrow, .bp-megabar-drawer-nav .sub-arrow i, .bp-megabar-drawer-nav .sub-arrow svg, .bp-megabar-drawer-nav .elementor-menu-toggle { color: var(--brand-primary) !important; fill: var(--brand-primary) !important; } .bp-megabar-drawer-nav a[aria-expanded="true"] .sub-arrow { transform: rotate(180deg); } /* ===================================================================== 13. DRAWER CTA --------------------------------------------------------------------- The light-surface accent tone, because the panel is light. The dark-surface tone here would be unreadable. ===================================================================== */ .bp-megabar-drawer-cta { /* width:auto is LOAD-BEARING. Elementor full-width containers carry width:100%, so margins do not inset them — they push the box past the panel edge instead. Measured on the live RB header: the container ran from 28px to 1913px inside a 1905px panel, and the button inside it reached 1903px. That is the CTA touching the viewport edge. Letting the width be auto makes the margins work. */ width: auto !important; max-width: 100%; margin: 16px 18px; } .bp-megabar-drawer-cta .elementor-button { width: 100%; background: var(--brand-accent-solid) !important; color: var(--brand-accent-solid-ink, #fff) !important; border: 1px solid rgba(255, 255, 255, .12) !important; /* literal: an inner highlight on the button, not a surface colour */ border-radius: var(--brand-radius); font-weight: 600; box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-accent-solid) 26%, transparent); transition: background .2s ease, box-shadow .2s ease; } .bp-megabar-drawer-cta .elementor-button:hover { background: var(--brand-accent-solid-hover) !important; } /* Contact details under the button */ .bp-megabar-drawer-cta a[href^="tel"], .bp-megabar-drawer-cta a[href^="mailto"] { color: var(--brand-ink); text-decoration: none; font-size: .95rem; } /* nowrap is load-bearing: without it a phone number breaks mid-digits on a narrow panel, which is unreadable and unclickable. */ .bp-megabar-drawer-cta a[href^="tel"] { font-weight: 600; white-space: nowrap; } .bp-megabar-drawer-cta a[href^="tel"]:hover, .bp-megabar-drawer-cta a[href^="mailto"]:hover { color: var(--brand-accent-solid); } /* ===================================================================== 14. MENU ICON MECHANISM --------------------------------------------------------------------- A line glyph on each drawer row, drawn with a CSS mask so it takes the row's own text colour. No plugin, no icon font, nothing loading late. THIS IS THE MECHANISM ONLY. The per-site map — which class points at which SVG — lives in the client snippet, because it is per-site by definition. A row with no mi-* class simply has no glyph. WHY THIS IS LOCKED DOWN SO HARD The icon lives on .elementor-item::before — the SAME pseudo-element Elementor uses for its menu pointer effect. That base rule does two things which have to be undone on every state: 1. position: absolute The masked box pins to the anchor's top-left and lands UNDER the label, so the icon appears behind the text. Forced back into flow with position:relative + inset:auto + flex:0 0 22px. 2. opacity: 0 at rest, flipped to 1 on :hover and on .elementor-item-active The icon would only appear on hover or on the current page. opacity, visibility and transform are pinned so it shows always. All !important, so no theme, Elementor or SmartMenus rule can pull it back. This was worked out the hard way on TMS. Do not tidy it. INERT WITHOUT THE MAP. --mi is deliberately not defined here. Until a client snippet supplies it the mask resolves to nothing and the row shows a 22px indent with no glyph. That is the intended shipped state. IF A ROW HAS A GAP BUT NO GLYPH That is the SVG path being wrong, not the CSS. The ::before box still reserves its 22px whether or not the mask resolves, so a broken path looks like a neat indent with nothing in it. Open the file URL in a browser tab. If it 404s, fix the path in the client map. ===================================================================== */ .bp-megabar-drawer-nav li[class*="mi-"] > a.elementor-item::before, .bp-megabar-drawer-nav li[class*="mi-"] > a.elementor-sub-item::before { content: ""; /* defeat Elementor's absolutely positioned pointer ::before */ position: relative !important; inset: auto !important; flex: 0 0 22px !important; width: 22px !important; height: 22px !important; margin: 0 !important; /* pin it visible in every state */ opacity: 1 !important; visibility: visible !important; transform: none !important; /* the glyph: a mask filled with the row's own colour */ background-color: currentColor; -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat; transition: background-color .15s ease; } /* Sub rows: a slightly smaller box so the hierarchy reads */ .bp-megabar-drawer-nav li[class*="mi-"] > a.elementor-sub-item::before { flex-basis: 20px !important; width: 20px !important; height: 20px !important; } /* ===================================================================== 15. BURGER ===================================================================== */ .bp-megabar-burger { cursor: pointer; color: var(--brand-primary); transition: color .18s ease, transform .18s ease; } .bp-megabar-burger:hover, .bp-megabar-burger:focus-visible { color: var(--brand-accent-solid); } .bp-megabar-burger svg, .bp-megabar-burger i { fill: currentColor; color: currentColor; } /* Same inset pattern as the panel tiles. See the note in section 5. */ .bp-megabar-burger { position: relative !important; display: grid !important; place-items: center !important; } .bp-megabar-burger .elementor-icon, .bp-megabar-burger i { display: grid !important; place-items: center !important; line-height: 1 !important; width: auto !important; height: auto !important; margin: 0 !important; } /* ===================================================================== 16. MOBILE MEGA FALLBACK --------------------------------------------------------------------- Only reached if the mega is left visible below the swap point, which it is not in the standard build. Kept because it costs nothing and covers a panel reused elsewhere. ===================================================================== */ @media (max-width: 767px) { .bp-megabar-panel { flex-direction: column !important; padding: .5rem .25rem !important; border-radius: 0; box-shadow: none; background: var(--brand-surface); gap: 0 !important; margin-top: 0 !important; } .bp-megabar-panel::before { display: none; } .bp-megabar-panel .bp-megabar-heading { margin-bottom: .5rem !important; } .bp-megabar-grid:not(.bpg-grid) { grid-template-columns: 1fr; gap: 0; } .bp-megabar-panel .elementor-icon-box-wrapper { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 14px !important; padding: 12px 8px !important; border-bottom: 1px solid var(--bp-megabar-hairline); border-radius: 0 !important; } .bp-megabar-panel .elementor-icon-box-icon { --bp-megabar-tile: 44px; --bp-megabar-glyph: 22px; } .bp-megabar-card { width: 100% !important; margin-top: 1rem; } .bp-megabar-nav .e-n-menu-item[aria-expanded="true"] > .e-n-menu-title::after { display: none; } } /* ===================================================================== 17. ACCESSIBILITY ===================================================================== */ .bp-megabar-bar a:focus-visible, .bp-megabar-nav .e-n-menu-title:focus-visible, .bp-megabar-burger:focus-visible, .bp-megabar-drawer-nav a:focus-visible, .bp-megabar-panel .elementor-icon-box-wrapper:focus-within { outline: 3px solid var(--brand-accent-solid); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .bp-megabar-panel .elementor-icon-box-wrapper, .bp-megabar-drawer-nav a.elementor-item, .bp-megabar-drawer-nav a.elementor-sub-item, .bp-megabar-drawer-nav .sub-arrow, .bp-megabar-burger, .bp-btn-accent .elementor-button, a.bp-btn-accent, .bp-megabar-nav .e-n-menu-title-text { transition: none !important; } .bp-megabar-panel .elementor-icon-box-wrapper:hover, .bp-btn-accent .elementor-button:hover, a.bp-btn-accent:hover { transform: none !important; } } /* End of BP 05 Megabar */ /* ===================================================================== 18. v4: TWO FIXES PROMOTED FROM THE COASTAL CLIENT SNIPPET --------------------------------------------------------------------- a) A later section gives the burger `display: grid !important`, after the desktop hide in the swap section, so the burger came back on desktop. This rule is later and more specific, so it wins. b) Elementor wraps the icon in .elementor-icon-wrapper, which section 6 did not account for, so glyphs sat top-left of their tile. ===================================================================== */ @media (min-width: 1025px) { .bp-megabar-burger, .bp-megabar-burger.elementor-hidden-desktop, .bp-megabar-burger.elementor-hidden-laptop { display: none !important; } } .bp-megabar-panel .elementor-icon-box-icon .elementor-icon-wrapper { position: absolute !important; inset: 0 !important; display: block !important; width: auto !important; height: auto !important; } .bp-megabar-panel .elementor-icon-box-icon i, .bp-megabar-panel .elementor-icon-box-icon svg { position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: var(--bp-megabar-glyph, 22px) !important; line-height: 1 !important; } .bp-megabar-panel .elementor-icon-box-icon svg { width: var(--bp-megabar-glyph, 22px) !important; height: var(--bp-megabar-glyph, 22px) !important; }