constraint Without this, top-level

elements inside

that don't have a specific bbm-* primitive class (e.g. bare

) span the full window width. Constrain

globally so every page has a predictable 1240px content rail, regardless of which sections it uses. ============================================================ */ body.bbm > main { max-width: 1240px; margin: 0 auto; width: 100%; } /* Bare sections (no bbm-* class) get default padding so they don't collapse against the edges on wide viewports */ body.bbm main > section:not([class*="bbm-"]), body.bbm main > div:not([class*="bbm-"]):not(.shop-wrap):not(.guide-hero):not(.about-hero) { padding: var(--s6) var(--s4); } @media (max-width: 768px) { body.bbm main > section:not([class*="bbm-"]), body.bbm main > div:not([class*="bbm-"]):not(.shop-wrap):not(.guide-hero):not(.about-hero) { padding: var(--s5) var(--s3); } } /* ============================================================ .bbm-nav — single top nav, replaces the legacy field-manual nav. One row: brand left, links right, theme toggle far right. No status indicators, no hamburger gymnastics — sized to feel calm like a service-business site (pondmetric model). ============================================================ */ body.bbm .bbm-nav { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } body.bbm .bbm-nav__inner { max-width: 1240px; margin: 0 auto; padding: 14px var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } body.bbm .bbm-nav__brand { display: inline-flex; align-items: center; gap: var(--s1); font-family: var(--serif); font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; font-weight: 400; } body.bbm .bbm-nav__brand:hover { color: var(--accent); } /* Concept C wordmark lockup: "BBM." compact mark + full name */ body.bbm .bbm-nav__mark { font-family: var(--serif); font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.04em; color: var(--ink); } body.bbm .bbm-nav__dot { color: var(--accent); } body.bbm .bbm-nav__wm { font-family: var(--serif); font-weight: 400; font-size: var(--text-sm); color: var(--ink-2); letter-spacing: -0.01em; } body.bbm .bbm-nav__brand:hover .bbm-nav__mark { color: var(--accent); } @media (max-width: 480px) { body.bbm .bbm-nav__wm { display: none; } /* tiny screens: just "BBM." */ } body.bbm .bbm-nav__links { display: flex; align-items: center; gap: var(--s4); font-family: var(--sans); font-size: var(--text-sm); } body.bbm .bbm-nav__links a { color: var(--ink-2); text-decoration: none; letter-spacing: -0.005em; } body.bbm .bbm-nav__links a:hover { color: var(--ink); } body.bbm .bbm-nav__links a[aria-current="page"] { color: var(--ink); } body.bbm .bbm-nav__cta { background: var(--ink); color: var(--on-ink); padding: 8px 16px; border-radius: 4px; font-size: var(--text-sm); font-weight: 500; letter-spacing: -0.005em; } body.bbm .bbm-nav__cta:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Theme toggle inside the nav: smaller than the smoke-test header version */ body.bbm .bbm-nav .bbm-theme-toggle button { padding: 4px 10px; font-size: 12px; } /* Nav cart button — persistent link to /cart with a live item-count badge. Static on shop.html; injected on every other page by /js/nav-cart-badge.js. */ body.bbm .bbm-nav__links a.shop-cart-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 14px; color: var(--ink-2); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: lowercase; transition: color 150ms ease, border-color 150ms ease; } body.bbm .bbm-nav__links a.shop-cart-btn:hover { color: var(--accent); border-color: var(--accent); } body.bbm .shop-cart-btn svg { width: 16px; height: 16px; } body.bbm .cart-badge { display: none; min-width: 18px; height: 18px; padding: 0 5px; background: var(--accent); color: var(--on-accent); border-radius: 2px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0; align-items: center; justify-content: center; } /* ───── Mobile hamburger menu ───── Injected into .bbm-nav by /js/bbm-nav.js (no per-page markup). The page links only collapse behind the hamburger once JS has built the menu and set body.has-mobile-nav — otherwise the links stay visible so nav never breaks. */ body.bbm .bbm-nav__toggle { display: none; /* desktop: hidden; shown ≤480px once the menu exists */ flex-direction: column; align-items: flex-start; /* left-align so the taper reads as stepped */ justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 0 0 8px; /* left pad centers the 24px-wide bar group in the button */ background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; } /* Tapered/stepped bars — flat ends, echoing the bold geometry of the logo mark. */ body.bbm .bbm-nav__toggle span { display: block; width: 24px; height: 3px; border-radius: 0; background: var(--ink); transition: transform 200ms ease, opacity 200ms ease, width 200ms ease; } body.bbm .bbm-nav__toggle span:nth-child(2) { width: 19px; } body.bbm .bbm-nav__toggle span:nth-child(3) { width: 14px; } /* Open state: equalize widths so the X is symmetric; offset matches gap(5)+height(3). */ body.bbm .bbm-nav__toggle[aria-expanded="true"] span:nth-child(1) { width: 24px; transform: translateY(8px) rotate(45deg); } body.bbm .bbm-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } body.bbm .bbm-nav__toggle[aria-expanded="true"] span:nth-child(3) { width: 24px; transform: translateY(-8px) rotate(-45deg); } body.bbm .bbm-nav__mobile { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: var(--s3); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); z-index: 60; /* above the nav bar (z-index:50) */ } body.bbm .bbm-nav__mobile.open { display: flex; } body.bbm .bbm-nav__mobile a { display: block; padding: 14px 6px; color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: var(--text-lg); border-bottom: 1px solid var(--line); } body.bbm .bbm-nav__mobile a:hover { color: var(--accent); } body.bbm .bbm-nav__mobile .bbm-theme-toggle { display: flex; gap: 6px; margin-top: var(--s3); } /* Mobile — links collapse to a thinner row, hide some less-critical items via container-query-like media */ @media (max-width: 768px) { body.bbm .bbm-nav__inner { gap: var(--s2); padding: 12px var(--s3); } body.bbm .bbm-nav__links { gap: var(--s2); font-size: var(--text-xs); flex-wrap: wrap; justify-content: flex-end; } body.bbm .bbm-nav__cta { padding: 6px 12px; font-size: var(--text-xs); } } @media (max-width: 480px) { body.bbm .bbm-nav__links { gap: var(--s2); } body.bbm .bbm-nav__inner { justify-content: space-between; } /* Show the hamburger and collapse the inline page-links + theme toggle into it — but ONLY when JS has built the menu (fail-safe: no JS ⇒ links stay visible). */ body.bbm.has-mobile-nav .bbm-nav__toggle { display: inline-flex; } body.bbm.has-mobile-nav .bbm-nav__links > a:not(.shop-cart-btn), body.bbm.has-mobile-nav .bbm-nav__links > .bbm-theme-toggle { display: none; } } /* ============================================================ Hide legacy field-manual DOM on body.bbm pages. This is a defensive layer — even if some pages still have the legacy .nav/.mobile-menu/.toast/.popup-* markup left over from the field-manual era, hide it so the new .bbm-nav is the only visible navigation surface. Phase 2c Step 2 actually removes the markup from every page; these rules are the safety net. ============================================================ */ body.bbm > .page-shell > nav.nav, body.bbm > .page-shell > .mobile-menu, body.bbm > .page-shell > .admin-access, body.bbm > .page-shell > .toast, body.bbm > .page-shell > .popup-overlay, body.bbm > .page-shell > .popup-modal, body.bbm > nav.nav, body.bbm > .mobile-menu, body.bbm > .toast, body.bbm > .popup-overlay, body.bbm > .popup-modal { display: none !important; } /* ============================================================ Scroll polish — progress bar + fade-up reveals + sticky CTA Powered by /js/bbm-scroll-fx.js. Everything respects prefers-reduced-motion via the JS (it just marks elements revealed immediately) and via the @media block below. ============================================================ */ /* Top-of-viewport scroll progress indicator */ body.bbm .bbm-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 1000; pointer-events: none; will-change: transform; transition: transform 80ms linear; } /* Fade-up reveal pattern — elements get .bbm-reveal then JS toggles .bbm-revealed when they enter the viewport. */ body.bbm .bbm-reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms cubic-bezier(.4, 0, .2, 1), transform 520ms cubic-bezier(.4, 0, .2, 1); will-change: opacity, transform; } body.bbm .bbm-reveal.bbm-revealed { opacity: 1; transform: translateY(0); } /* Sticky mobile add-to-cart bar (product pages only). Hidden on desktop — appears at <=768px when the hero scrolls past. */ body.bbm .sticky-buy { position: fixed; bottom: 0; left: 0; right: 0; display: none; align-items: center; gap: var(--s3); padding: 12px var(--s3) max(14px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-top: 1px solid var(--line); z-index: 90; transform: translateY(110%); transition: transform 320ms cubic-bezier(.4, 0, .2, 1); } body.bbm .sticky-buy.is-visible { transform: translateY(0); } body.bbm .sticky-buy__product { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-2); letter-spacing: 0.02em; line-height: 1.3; } body.bbm .sticky-buy__product strong { display: block; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: var(--text-base); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bbm .sticky-buy__product .price { color: var(--accent); font-weight: 500; } body.bbm .sticky-buy__cta { flex-shrink: 0; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 18px; font-family: var(--sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; transition: transform 120ms ease; } body.bbm .sticky-buy__cta:active { transform: scale(0.97); } @media (max-width: 768px) { body.bbm .sticky-buy { display: flex; } } /* Honor accessibility preference — skip all motion */ @media (prefers-reduced-motion: reduce) { body.bbm .bbm-scroll-progress { transition: none; } body.bbm .bbm-reveal, body.bbm .bbm-reveal.bbm-revealed { opacity: 1 !important; transform: none !important; transition: none !important; } body.bbm .sticky-buy { transition: none; } } /* ============================================================ Classic-logo watermark — OG mark (BBM-logo-large.png) ghosted behind the home hero. The PNG's alpha channel is used as a CSS mask, then filled with `background-color: var(--ink)`, so the silhouette auto-themes (cream in classic/dark, dark in light) and never fights the page. ~5% opacity so it never competes with content. ============================================================ */ body.bbm .bbm-hero { position: relative; overflow: hidden; } body.bbm .bbm-hero::before { content: ''; position: absolute; top: -8%; right: -6%; width: 540px; height: 540px; background-color: var(--ink); -webkit-mask: url('/images/BBM-logo-large.png') no-repeat center / contain; mask: url('/images/BBM-logo-large.png') no-repeat center / contain; opacity: 0.06; pointer-events: none; z-index: 0; } /* Lift hero content above the watermark so headline/lede/buttons stay crisp. */ body.bbm .bbm-hero > * { position: relative; z-index: 1; } @media (max-width: 768px) { body.bbm .bbm-hero::before { width: 360px; height: 360px; top: auto; bottom: -10%; right: -25%; opacity: 0.05; } } @media (prefers-contrast: more) { body.bbm .bbm-hero::before { display: none; } } /* ── Social-proof + guarantee block (js/bbm-trust.js) ── */ body.bbm .bbm-trust { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, transparent); } body.bbm .bbm-trust__proof { font-size: 14px; color: var(--ink); font-weight: 500; } body.bbm .bbm-trust__proof strong { color: var(--accent); } body.bbm .bbm-trust__sep { color: var(--ink-3, #888); } body.bbm .bbm-trust__guarantee { margin: 10px 0 0; font-size: 12px; color: var(--ink-3, #888); } /* ── Sales-focus mode: strip nav/footer escape hatches on tripwire/landing pages ── */ body.bbm-sales .bbm-nav__links, body.bbm-sales .bbm-footer__nav, body.bbm-sales .bbm-footer__links { display: none !important; } body.bbm-sales .bbm-nav { pointer-events: none; } body.bbm-sales .bbm-nav__brand { pointer-events: auto; }

…