/* ============================================================================ we-mobile-nav.css — the mobile hamburger + drop-down nav drawer. WHY THIS EXISTS. Every nav stylesheet in this theme carries the same line: @media(max-width:880px){.nav-actions .nav-link,.nav-actions .dd{display:none}} …in 26 files. Below 880px that leaves the bar as [logo] ......... [Book a demo] and NO way to reach Mist, Tour, or any of the 21 teardowns. This file plus we-mobile-nav.js restore navigation at that width. WHY IT IS GLOBAL RATHER THAN PER-SECTION. The nav markup is duplicated verbatim in 27 sections/*/index.liquid and its CSS in 26 assets/*.css. Adding a button to each would be 53 edits that must then stay in sync forever. Both files are instead linked ONCE from layouts/theme.liquid , and the JS inserts the button into whichever `.nav-inner` the page happens to render. Every nav shares the same chassis geometry — `.nav-inner{height:68px}` and the 880px hide rule are byte-identical in fp-landing, fc-landing, cr-landing, fw-world, fw-world-2, we-teaser-nav and all 21 teardown sheets — so one implementation fits all of them. LOADED FROM , so it is present at first paint and cannot flash. The section stylesheets load later from inside , which means THEY win any specificity tie. Every selector here is either a unique `.we-mnav-*` class (no possible conflict) or deliberately over-specified — `.nav .nav-inner` (0,2,0) to beat `.nav-inner` (0,1,0), `.nav .nav-inner > .btn-cta` (0,3,0) to beat `.nav .btn-cta` (0,2,0). No `!important` is needed anywhere. TOKENS ARE RE-DECLARED, NOT INHERITED. The nav's colour tokens are declared ON `.nav` (deliberately — see the nav block in fp-landing.css, gotcha 9), so the panel, which is a child of , cannot see them. The four values below are copied from that block verbatim; if the nav is ever re-tinted, re-copy. ============================================================================ */ .we-mnav-btn, .we-mnav-panel, .we-mnav-backdrop{ --mn-bg:#05070a; --mn-ink:#f7f8fa; --mn-line:rgba(255,255,255,.1); --mn-brand:#42b1ff; --mn-label:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif; --mn-sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; } /* ---------------------------------------------------------------- the button Hidden above the breakpoint so desktop is untouched. `display:none` there rather than visibility, because it must not occupy a flex slot in .nav-inner. The -.6deg rotation + blur-free hard offset shadow are the house analog signature, matched to `.nav .btn-cta` so the two read as a pair. */ .we-mnav-btn{display:none} @media(max-width:880px){ .we-mnav-btn{ display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;width:40px;height:40px;padding:0; border:1px solid var(--mn-line);border-radius:4px; background:rgba(255,255,255,.04);color:var(--mn-ink);cursor:pointer; box-shadow:2px 2px 0 rgba(0,0,0,.5); transform:rotate(-.6deg); transition:background .18s ease,border-color .18s ease,box-shadow .18s ease} .we-mnav-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)} .we-mnav-btn:active{box-shadow:1px 1px 0 rgba(0,0,0,.5)} /* a visible focus ring matters more here than anywhere else in the theme: this is the only control that opens navigation on a phone. */ .we-mnav-btn:focus-visible{outline:2px solid var(--mn-brand);outline-offset:2px} /* three bars -> X. width/height are fixed so the bars cannot inherit a host page's line-height (the same trap the nav CTA hit — see fp-landing.css). */ .we-mnav-bars{position:relative;display:block;width:18px;height:12px} .we-mnav-bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px; background:currentColor; transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .18s ease} .we-mnav-bars i:nth-child(1){top:0} .we-mnav-bars i:nth-child(2){top:5px} .we-mnav-bars i:nth-child(3){top:10px} .we-mnav-btn[aria-expanded="true"] .we-mnav-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)} .we-mnav-btn[aria-expanded="true"] .we-mnav-bars i:nth-child(2){opacity:0} .we-mnav-btn[aria-expanded="true"] .we-mnav-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* ---------------------------------------------------------- the bar itself The links are already hidden by each section sheet; hiding their CONTAINER too removes the empty flex item, which otherwise eats one `gap` of the very tight small-phone budget. Nothing queries it by visibility (we-teaser.js uses querySelectorAll, which is unaffected). `space-between` would spread burger / logo / CTA evenly across the bar, so the row switches to flex-start with the CTA pushed right by auto margin — that keeps [burger][logo] .......... [Book a demo]. The burger is inserted before `.brand` by the JS, so DOM order alone puts it on the left; nothing here reorders visually (no flex `order`), which keeps tab order == reading order. */ .nav .nav-inner > .nav-actions{display:none} .nav .nav-inner{justify-content:flex-start;gap:12px} .nav .nav-inner > .btn-cta{margin-left:auto} } /* Small-phone budget. At 360px the row must fit burger + logo + CTA + padding inside 360 - 48 = 312px; measured 38 + 140 + 108 + 20 (two 10px gaps) = 306. The CTA is deliberately kept in the bar rather than moved into the drawer — it is the page's primary conversion action, so it stays reachable without a tap, and it is why the drawer no longer repeats it. */ @media(max-width:560px){ .we-mnav-btn{width:38px;height:38px} .nav .nav-inner{gap:10px} .nav .nav-inner .brand img{max-width:140px} .nav .nav-inner > .btn-cta{padding:8px 12px;font-size:.78rem} } /* -------------------------------------------------------------- the backdrop No backdrop-filter: this theme had a Safari main-thread scrolling problem (see the SAFARI SCROLL FIX in layouts/theme.liquid) and a blurred full-screen layer is exactly the kind of surface that caused it. A flat dim is enough. */ .we-mnav-backdrop{ position:fixed;inset:0;z-index:80; background:rgba(3,5,8,.58); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s ease,visibility .3s} .we-mnav-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto} /* ----------------------------------------------------------------- the panel Slides down from behind the fixed bar. The bar is z-index 100 and its torn strip paints inside it, so a panel at z-index 90 passes UNDER both — which is why the top padding clears 68px of .nav-inner plus the tear (24px rag at ≥640px reaches ~79.6px from the top; 86px clears it with air to spare). `visibility` — not `hidden`/`display` — does the hiding: it keeps the slide transition, and it also takes the links out of the tab order and the a11y tree while closed, so no focus trap and no aria-hidden bookkeeping. */ .we-mnav-panel{ position:fixed;top:0;left:0;right:0;z-index:90; padding:86px 0 26px; max-height:100vh;max-height:100dvh; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; font-family:var(--mn-sans);color:var(--mn-ink); background-color:var(--mn-bg); background-image:linear-gradient(rgba(5,7,10,.42),rgba(5,7,10,.62)),var(--we-paper-dark); background-size:cover;background-position:center; border-bottom:1px solid var(--mn-line); box-shadow:0 26px 44px -26px rgba(0,0,0,.8); transform:translateY(-100%);visibility:hidden; transition:transform .34s cubic-bezier(.2,.7,.2,1),visibility .34s} .we-mnav-panel.is-open{transform:translateY(0);visibility:visible} /* Never let the drawer appear on desktop — if the viewport is widened while it is open the JS closes it, but this is the belt-and-braces that guarantees it can never paint at a width where the real nav is showing. */ @media(min-width:881px){ .we-mnav-panel,.we-mnav-backdrop{display:none} } @media(prefers-reduced-motion:reduce){ .we-mnav-panel,.we-mnav-backdrop,.we-mnav-bars i{transition:none} } .we-mnav-inner{max-width:1120px;margin:0 auto;padding:0 24px} /* top-level links — generous 52px rows, comfortably past the 44px touch min */ .we-mnav-link{ display:flex;align-items:center;min-height:52px; padding:6px 2px; color:var(--mn-ink);font-size:1.06rem;font-weight:550;letter-spacing:-.01em; text-decoration:none; border-bottom:1px solid var(--mn-line)} .we-mnav-link:hover{color:#fff} .we-mnav-link[aria-current="page"]{color:var(--mn-brand)} /* the Intelligence group, shown expanded rather than as a nested disclosure: one less tap, and the panel scrolls anyway. */ .we-mnav-group{padding:20px 0 4px} .we-mnav-glabel{ font-family:"FLBold","Arial Black",sans-serif;font-size:.72rem; letter-spacing:.02em;text-transform:uppercase;color:var(--mn-brand); transform:rotate(-.6deg);display:inline-block;margin-bottom:8px} .we-mnav-item{ display:flex;gap:12px;align-items:flex-start; padding:11px 2px;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.06)} .we-mnav-item:last-child{border-bottom:0} .we-mnav-item .ic{ flex:0 0 26px;height:26px;border-radius:7px;display:grid;place-items:center; background:linear-gradient(150deg,#123a63,#0a1a2e); border:1px solid rgba(66,177,255,.28);color:var(--mn-brand); font-family:var(--mn-label);font-size:.62rem;font-weight:700;margin-top:2px} .we-mnav-item .tx{min-width:0} .we-mnav-item .tt{display:block;color:var(--mn-ink);font-size:.92rem;font-weight:560;line-height:1.3} .we-mnav-item .ds{display:block;color:rgba(247,248,250,.62);font-size:.76rem;line-height:1.35;margin-top:3px} .we-mnav-item.now{background:color-mix(in srgb,var(--mn-brand) 10%,transparent)} .we-mnav-item.now .tt{color:var(--mn-brand)} /* (No `.we-mnav-cta` rule any more — the drawer does not repeat "Book a demo", which stays pinned in the bar at every width. See the small-phone note above.) */ /* Scroll lock. `overflow:hidden` on is set while the drawer is open; the panel carries overscroll-behavior:contain so its own scrolling does not chain to the page behind it. */ html.we-mnav-open,html.we-mnav-open body{overflow:hidden}