/* ===================================================================== Ad Agentur — Mobile App Navigation Ported from the approved interactive mockup. - Shows only at <= 1024px (tablet/phone). Desktop is untouched. - Uses transform/opacity/height only for animation (compositor-friendly). - Respects safe-area insets and prefers-reduced-motion. Icons: Font Awesome 4.7 (fas/fa-) + theme "Happy Icons" (hm hm-) — authors pick icons in the WP menu CSS-class field (see guide). ===================================================================== */ :root{ /* Brand core */ --aa-blue:#265E9A; --aa-blue-ink:#0C447C; --aa-blue-sub:#C2DCF6; --aa-blue-tint:#EEF4FA; /* Semantic accents — deliberately narrow: green = "live / available right now" (status dot only) star = rating gold (trust line only) */ --aa-green:#8ec047; --aa-star:#E8A93C; --aa-ink:#33434C; --aa-muted:#5F5E5A; --aa-line:#ECEBE7; --aa-bg:#F7F7F7; --aa-white:#fff; /* Bar/button theming — all overridable per-site from Appearance -> Mobile Nav -> Branding/Buttons; these are just the shipped defaults. */ --aa-bar-bg:#fff; --aa-pill-text:#fff; --aa-hover-bg:#e8e8e5; --aa-radius-tile:16px; --aa-radius-pill:50px; --aa-btn-size:44px; --aa-ease:cubic-bezier(.16,1,.3,1); --aa-bar-h:84px; --aa-safe-b:env(safe-area-inset-bottom,0px); } /* Hide entire component on desktop */ @media (min-width:1025px){ #aa-mnav-root{ display:none !important; } } /* The fixed .aa-bar sits on top of normal document flow, so without this the last ~84px of every page (footer content, last section) renders underneath it. Reserve that space at the same breakpoint the bar itself appears at. */ @media (max-width:1024px){ body{ padding-bottom:calc(var(--aa-bar-h) + var(--aa-safe-b)); } } /* Borlabs Cookie's persistent "reopen consent settings" icon (shown after a choice is made, not just during the dialog) defaults to bottom:0;left:0 — a 72x72px hit area that lands almost exactly on top of our 44px menu button underneath it. This isn't a stacking-order problem (unlike the consent-blocking overlay handled above): the two occupy the same physical corner, so no z-index value fixes it, only moving one of them does. Floating it just above our bar (same corner, so it stays recognisable) rather than hiding it — a persistent way to reopen cookie settings is generally expected to stay reachable. .brlbs-cmpnt-widget.brlbs-bottom-0 (two classes) is needed to outrank Borlabs' own single-class .brlbs-bottom-0 utility, which loads after this stylesheet. */ @media (max-width:1024px){ .brlbs-cmpnt-widget.brlbs-bottom-0{ bottom:calc(var(--aa-bar-h) + var(--aa-safe-b) + 8px) !important; } } /* That repositioned spot sits right where our sheet's bottom edge lands when open — and Borlabs' widget (z-index 999998) is still above our sheet (999991), so it would float on top of the open sheet's content. While the sheet is open it should sit behind it instead, same as any other page content would. A CSS :has()-based override here (matching the pattern above) reliably failed to take effect even with !important against a single non-important Borlabs rule — behaviour that shouldn't happen on plain cascade rules, so something about how/when Borlabs applies this specific style resists a static CSS override. Handled in JS instead (see openNav()/closeNav()), which sets this only exactly when needed and can be verified immediately rather than relying on cascade timing. */ /* Root wrapper is fixed and does not affect page layout (no CLS) */ /* Inherits the theme's own body font by default -- matches whatever site this is installed on with zero configuration. A per-site override (if one is set in Appearance -> Mobile Nav -> Branding -> Typography) is printed as a later, equal-specificity #aa-mnav-root rule and wins. */ #aa-mnav-root{ font-family:inherit; } #aa-mnav-root *{ box-sizing:border-box; } /* ---- RESET BOUNDARY ---- Themes (Kadence) and page builders (Elementor) ship blanket `button {}` / `a {}` rules that bleed into this component (e.g. a blue button background making the back-chevron invisible). Neutralise every interactive element here, then rebuild only what we style below. CRITICAL: the reset must carry ZERO specificity so every component class wins. `#aa-mnav-root :where(button, a)` still resolves to specificity (1,0,0) — the `#aa-mnav-root` ID sits outside the :where() — which still outranks single-class component rules like `.aa-morph` (0,1,0) and flattens them to display:inline/position:static. Wrapping `#aa-mnav-root` itself in :where() too drops the whole selector to (0,0,0) so component classes win. */ :where(#aa-mnav-root) :where(button, a){ all:unset; box-sizing:border-box; -webkit-tap-highlight-color:transparent; cursor:pointer; font-family:inherit; } :where(#aa-mnav-root) :where(button){ background:transparent; } /* all:unset resolves `appearance` to its initial value (auto), not none — it does NOT strip native OS widget chrome. Kadence explicitly ships `button{ appearance:button }` (specificity 0,0,1), which beats the zero-specificity :where() reset above, so iOS Safari kept rendering every