/* * Public mobile navigation — matches the waitlist site (golfbusinessnetwork.co.uk). * * Everything is scoped to .lu-header--public (inc/header-context.php), so the * member area keeps BuddyBoss's stock mobile panel. Both the mobile header and * the slide-out panel are children of #masthead, so the one scope covers both. * * Values are taken from the waitlist theme's own stylesheet, not eyeballed: * 44px round button, 28x2px bars, #032E1C overlay, #B5EB79 bars, Anton links at * clamp(2rem, 8vw, 3.5rem), 0.3s fades. Logo 162x45 at 16px inset, button 44px * at 16px inset, header 80px tall. * * Colours are written as var(--token, #hex) because the deployed * lu-design-system.css has run behind the local one before — the fallbacks mean * this file renders correctly even if the tokens aren't there yet. */ /* ─── Mobile header ───────────────────────────────────────────────────────── */ /* * The negative margins cancel #masthead's `padding: 0 10px`, so the bar runs * edge to edge and its own 16px padding is the only inset — matching the * waitlist's 16px. Without this the header starts 10px in and every inset * inherits the error. */ .lu-header--public .bb-mobile-header-wrapper { margin-left: -10px; margin-right: -10px; background: transparent; box-shadow: none; border-bottom: none; } .lu-header--public .bb-mobile-header { height: 80px; padding: 0 16px; background: transparent; } /* * BuddyBoss prints burger → logo → aside. The waitlist runs logo → burger, and * the logo is left-aligned rather than centred, so the order is flipped here * instead of in the template — it keeps this a pure CSS change. */ .lu-header--public .bb-mobile-header .mobile-logo-wrapper { order: 1; } .lu-header--public .bb-mobile-header .bb-left-panel-icon-wrap { order: 2; } .lu-header--public .bb-mobile-header .header-aside { order: 3; } /* * Left-aligns the logo. Needs `body.` and BOTH of the wrapper's classes to * clear theme.min.css's `body:not(.logged-in) .bb-mobile-header .flex-1`, which * centres it at (0,3,1) — the `body` element selector is what a plain * three-class rule here can't match. This is (0,4,1). */ body.lu-header--public .bb-mobile-header .flex-1.mobile-logo-wrapper { justify-content: flex-start; padding-left: 0; padding-right: 0; } /* * Zeroing the padding rather than hiding the aside: when logged out it holds * only whitespace, so `:empty` does NOT match it, and its 15px padding-right is * what keeps the burger 15px short of the edge. Logged-in users get real icons * in here, so it must stay in the layout either way. */ .lu-header--public .bb-mobile-header .header-aside { padding: 0; } .lu-header--public .bb-mobile-header .mobile-logo-wrapper .site-title a { width: 162px; height: 45px; margin: 0; background-position: left center; } /* ─── Open button ─────────────────────────────────────────────────────────── */ .lu-header--public .bb-mobile-header .bb-left-panel-mobile { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; /* BuddyBoss adds margin-left: 10px, which offsets the right inset. */ padding: 0; border-radius: var(--lu-radius-full, 9999px); background: var(--lu-color-deep-forest, #032E1C); } /* * The three bars are drawn from the icon element rather than its glyph: is * the middle bar, its two pseudo-elements are the outer ones. `content: ''` is * load-bearing — bb-icon-bars puts its glyph in ::before, and without this the * icon character sits on top of the drawn bars. */ .lu-header--public .bb-mobile-header .bb-left-panel-mobile i { position: relative; width: 28px; height: 2px; font-size: 0; background: var(--lu-color-birdie-lime, #B5EB79); } .lu-header--public .bb-mobile-header .bb-left-panel-mobile i::before, .lu-header--public .bb-mobile-header .bb-left-panel-mobile i::after { content: ''; position: absolute; left: 0; width: 28px; height: 2px; background: var(--lu-color-birdie-lime, #B5EB79); } .lu-header--public .bb-mobile-header .bb-left-panel-mobile i::before { top: -7px; } .lu-header--public .bb-mobile-header .bb-left-panel-mobile i::after { top: 7px; } /* ─── Panel overlay ───────────────────────────────────────────────────────── */ /* * Stock BuddyBoss slides a 375px white drawer in from the left by animating * `left`. The waitlist fades a full-screen overlay in place, so the offsets are * overridden outright and the open/closed state is carried on opacity — * BuddyBoss's own left/transform values are never relied on. */ .lu-header--public .bb-mobile-panel-wrapper { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: none !important; background: var(--lu-color-deep-forest, #032E1C) !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .lu-header--public .bb-mobile-panel-wrapper:not(.closed) { opacity: 1; visibility: visible; } .lu-header--public .bb-mobile-panel-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lu-space-6, 24px); height: 100%; padding: 0; background: transparent; overflow-y: auto; } /* ─── Panel header (logo + close) ─────────────────────────────────────────── */ /* * Pulled out of the flow so the menu centres on the viewport rather than on the * space left under the header — that is what puts the links at true centre on * the waitlist. * * Scoped through .bb-mobile-panel-wrapper to clear theme.min.css's * `.bb-mobile-panel-wrapper .bb-mobile-panel-header`, which sets * `margin: 0 -20px 20px`. With the box positioned left:0/right:0, those negative * side margins push it 20px past both edges — a 415px header in a 375px window. */ .lu-header--public .bb-mobile-panel-wrapper .bb-mobile-panel-header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 80px; margin: 0; padding: 0 16px; background: transparent; border-bottom: none; } .lu-header--public .bb-mobile-panel-header .logo-wrap a { display: block; width: 162px; height: 45px; background-image: url('../images/lug-logo-light.svg'); background-repeat: no-repeat; background-position: left center; background-size: contain; overflow: hidden; text-indent: -9999px; white-space: nowrap; } .lu-header--public .bb-mobile-panel-header .bb-close-panel { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--lu-radius-full, 9999px); background: var(--lu-color-deep-forest, #032E1C); color: var(--lu-color-birdie-lime, #B5EB79); } .lu-header--public .bb-mobile-panel-header .bb-close-panel i { font-size: 24px; color: var(--lu-color-birdie-lime, #B5EB79); } /* ─── Menu ────────────────────────────────────────────────────────────────── */ /* * theme.min.css sets `.bb-mobile-panel-inner .main-navigation` to * `display:flex; flex:1 1 0%; min-height:100%` — a ROW. That put the menu and * the CTA side by side as flex siblings, each stretched to the full 812px, which * is what squashed the panel. Column direction and min-height:0 undo both halves. */ .lu-header--public .bb-mobile-panel-inner .main-navigation { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 1 auto; min-height: 0; width: 100%; } /* * `min-height: 0` also has to be repeated here: theme.min.css pins the list to * `min-height:100%` twice over (.bb-mobile-panel-inner .side-panel-menu and * .buddypanel-menu), which stretches it full-height so the items stack at the * top instead of centring. * * Full width, not shrink-to-fit: the anchors are display:block and centre their * own text, and letting the list shrink collapses it to zero width. */ .lu-header--public .bb-mobile-panel-inner .side-panel-menu { display: flex; flex-direction: column; min-height: 0; width: 100%; margin: 0; padding: 0; list-style: none; text-align: center; background: transparent; } .lu-header--public .bb-mobile-panel-inner .side-panel-menu li { width: 100%; margin: 0; padding: 0; border: none; background: transparent; text-align: center; } /* * No row gap on purpose: the waitlist's `gap: var(--space-5)` references a token * its theme never defines, so the declaration is dropped and the rhythm comes * entirely from line-height 1.6. Matching the rendered result, not the source. */ .lu-header--public .bb-mobile-panel-inner .side-panel-menu li a { display: block; padding: 0; border: none; background: transparent; font-family: var(--lu-font-display, 'Anton'), sans-serif; font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 400; line-height: 1.6; text-transform: uppercase; text-decoration: none; color: var(--lu-color-white, #fff); transition: color 0.2s ease; } .lu-header--public .bb-mobile-panel-inner .side-panel-menu li a:hover, .lu-header--public .bb-mobile-panel-inner .side-panel-menu li a:focus { color: var(--lu-color-electric-turf, #1FCB60); } /* BuddyBoss reserves space for a per-item icon; the waitlist has none. */ .lu-header--public .bb-mobile-panel-inner .side-panel-menu li a i, .lu-header--public .bb-mobile-panel-inner .side-panel-menu li a .bb-menu-icon { display: none; } /* ─── CTA ─────────────────────────────────────────────────────────────────── */ /* * Mirrors the waitlist's .button--primary: the pill is on the inner , not * the anchor, with the arrow as a separate masked circle. */ /* * The CTA block is appended inside the panel's