/* ============================================================ BYC 2026 - shared chrome (nav dropdown + site footer). Loads on EVERY 2026 page after the page stylesheet, which provides the tokens (:root) and the .nav/.brand/.btn atoms. Markup comes from byc/parts-2026.php. ============================================================ */ /* ---------- cross-document page transition (View Transitions API) ---------- Native cross-fade between 2026 pages: no JS, no click interception, no navigation delay (unlike the old fade script we retired). Both the leaving and arriving page opt in through this sheet, which loads on every 2026 page; navigating to/from an old-design page (no opt-in) just loads instantly, and browsers without View Transitions support navigate instantly too. */ @view-transition { navigation: auto } ::view-transition-old(root), ::view-transition-new(root){ animation-duration: .22s; animation-timing-function: ease } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation: none !important } } /* ---------- stable scrollbar gutter (no page-to-page jump) ---------- Without this, a vertical scrollbar appears only on pages tall enough to scroll. The scrollbar eats ~15px of width, so every centred element (the nav most visibly) jumps ~7.5px sideways between a page that scrolls and one that doesn't. Reserve the gutter on EVERY page so nothing shifts. `overflow-y:scroll` is the universal fallback (always reserves the track); modern browsers upgrade to `scrollbar-gutter:stable`, which reserves the space WITHOUT painting a track on pages that don't scroll. Bonus: it also stops the page lurching sideways when the lightbox / mobile drawer locks scroll (they set overflow:hidden, but the gutter stays reserved). */ html{overflow-y:scroll} @supports (scrollbar-gutter:stable){ html{overflow-y:auto;scrollbar-gutter:stable} } /* ---------- sticky-safe horizontal overflow ---------- Astra's frontend CSS sets `body{overflow-x:hidden}`. Per the CSS spec, a non-`visible` overflow on one axis forces the OTHER axis to compute as `auto`, so the body becomes a scroll container - which silently breaks `position:sticky` for every descendant (the product / indicator buy dock scrolls away with the page instead of pinning). Undo it on the body and move the horizontal clip up to , which IS the document scroller, so sticky still pins to the viewport. */ body.byc-2026{overflow-x:visible} html{overflow-x:hidden} /* ---------- nav: active link + Guides dropdown ---------- */ /* CLASS-COLLISION GUARD. `.nav-links` is also the class WordPress core + Astra use for pagination (the_posts_pagination() / .ast-pagination). On shop / product / archive / Woo pages Astra's pagination sheet loads and its rule `.ast-pagination a,.nav-links a{color:rgba(255,255,255,.6)}` bleeds onto OUR nav links, making them brighter than the intended muted grey - they read as heavier and the cluster looks shifted. Pages without pagination CSS (the plain landing/indicators/etc. pages) don't load that rule, so the nav looked inconsistent page-to-page. Pin our nav-link colours here with a higher specificity (header.nav ...) than the leaked `.nav-links a`, so they render identically on every page no matter what other CSS is present. */ header.nav .nav-links a{color:var(--text-muted)} header.nav .nav-links a:hover, header.nav .nav-links a.active{color:var(--text)} /* ---------- nav cart icon (right-hand action cluster) ---------- Literal px only (runs on shop/product/cart pages without --space-*). */ .nav-actions{display:flex;align-items:center;gap:16px} .nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;color:var(--text-muted);transition:color .18s ease} .nav-cart:hover{color:var(--text)} .nav-cart svg{width:22px;height:22px} .nav-cart-count{position:absolute;top:0;right:-2px;min-width:16px;height:16px;padding:0 4px; box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center; background:var(--accent);color:#fff;border-radius:9px; font-family:var(--mono);font-size:11px;font-weight:600;line-height:1; box-shadow:0 0 0 2px rgba(10,10,11,.72)} .nav-cart-count.is-empty{display:none} /* CTA armor: cart/checkout-only plugin styles (Woo/payment gateways) override the page-css .btn-primary colors - the chrome owns this element everywhere. The drawer CTA lives OUTSIDE header.nav, so it's armored explicitly too. */ header.nav .btn-primary,.nav-drawer-cta{background:#fff !important;color:#000 !important; border-color:#fff !important} header.nav .btn-primary:hover,.nav-drawer-cta:hover{background:var(--accent) !important; border-color:var(--accent) !important;color:#fff !important} /* nav CTA box metrics: pin to the canonical .btn (byc.css = --space-5 / --space-2 = 20px / 8px). The shop + product page sheets hardcode 22px / 9px, which makes the "Explore Templates" button ~4px wider on those pages; since it's pinned to the right of a space-between bar, that extra width nudges the centred link cluster sideways. Keep the CTA identical on every page. (Box metrics only - colour is armored above; the full-width .nav-drawer-cta keeps its own padding.) */ header.nav .nav-cta{gap:8px;padding:0 20px} .nav-drop{position:relative;display:flex;align-items:center} .nav-drop-btn{ font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--text-muted);background:none;border:0;padding:0;cursor:pointer; display:inline-flex;align-items:center;gap:7px;line-height:1;transition:.16s} .nav-drop-btn svg{width:9px;height:6px;display:block;transition:.16s} .nav-drop:hover .nav-drop-btn, .nav-drop:focus-within .nav-drop-btn, .nav-drop.active .nav-drop-btn{color:var(--text)} .nav-drop:hover .nav-drop-btn svg, .nav-drop:focus-within .nav-drop-btn svg{transform:rotate(180deg)} .nav-drop-menu{ position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px; opacity:0;visibility:hidden;transition:.16s ease;z-index:60;min-width:210px} .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible} .nav-drop-menu>a{ display:block;white-space:nowrap;padding:11px 16px; font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--text-muted);background:var(--surface); border:1px solid var(--line);border-top:0;transition:.14s} .nav-drop-menu>a:first-child{border-top:1px solid var(--line)} .nav-drop-menu>a:hover{color:var(--text);background:var(--surface-2)} /* ---------- mobile nav: hamburger + slide-in drawer ---------- Below 860px the desktop .nav-links are hidden (page css); the burger opens an off-canvas drawer. Color tokens + literal px only (no --space-* here - this runs on pages that don't carry that scale yet). */ .nav-burger{display:none} @media(max-width:860px){ /* desktop CTA would truncate in the bar at this width - it moves into the drawer */ header.nav .nav-cta{display:none} .nav-burger{display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;margin-right:-9px;padding:0; background:none;border:0;cursor:pointer;color:var(--text)} .nav-burger-box{position:relative;width:22px;height:14px} .nav-burger-line, .nav-burger-line::before, .nav-burger-line::after{position:absolute;left:0;width:22px;height:1.5px; background:currentColor;border-radius:2px} .nav-burger-line{top:50%;margin-top:-.75px} .nav-burger-line::before,.nav-burger-line::after{content:"";display:block} .nav-burger-line::before{top:-6px} .nav-burger-line::after{top:6px} } /* scrim: dims the page behind the drawer; click closes (data-byc-menu-close) */ .nav-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.62); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease} .nav-scrim.open{opacity:1;visibility:visible} .nav-drawer{position:fixed;top:0;right:0;z-index:80;height:100%;height:100dvh; width:min(86vw,360px);background:var(--bg-soft);border-left:1px solid var(--line); display:flex;flex-direction:column;padding:16px 22px 26px;overflow-y:auto; transform:translateX(100%);visibility:hidden; transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s} .nav-drawer.open{transform:none;visibility:visible} .nav-drawer-head{display:flex;align-items:center;justify-content:space-between; height:48px;padding-bottom:12px;border-bottom:1px solid var(--line)} .nav-drawer-title{font-family:var(--mono);font-size:12px;letter-spacing:.24em; text-transform:uppercase;color:var(--text-faint)} .nav-drawer-close{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;margin-right:-8px;padding:0;background:none;border:0; cursor:pointer;color:var(--text-muted);transition:color .15s ease} .nav-drawer-close:hover{color:var(--text)} .nav-drawer-close svg{width:18px;height:18px;display:block} .nav-drawer-links{display:flex;flex-direction:column;gap:1px;padding:10px 0 4px} .nav-drawer-links>a, .nav-drawer-group>a{display:block;font-family:var(--mono);letter-spacing:.06em; text-transform:uppercase;color:var(--text-muted);transition:color .14s ease} .nav-drawer-links>a{font-size:14px;padding:13px 2px} .nav-drawer-links>a:hover, .nav-drawer-links>a:focus-visible, .nav-drawer-links>a.active{color:var(--text)} /* Guides sub-group: small label + indented proper-name links */ .nav-drawer-group{display:flex;flex-direction:column;gap:1px;margin:8px 0; padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .nav-drawer-label{font-family:var(--mono);font-size:12px;letter-spacing:.22em; text-transform:uppercase;color:var(--text-faint);padding:0 2px 4px} .nav-drawer-group>a{font-size:13px;letter-spacing:.02em;text-transform:none; padding:11px 2px 11px 14px} .nav-drawer-group>a:hover, .nav-drawer-group>a:focus-visible{color:var(--text)} .nav-drawer-group.active>a{color:var(--text)} .nav-drawer-cta{margin-top:auto;width:100%;justify-content:center; font-size:13px;padding:16px 20px} /* body scroll lock while the drawer is open */ body.nav-open{overflow:hidden} @media(prefers-reduced-motion:reduce){ .nav-scrim,.nav-drawer{transition:none} } /* ---------- page masthead: ONE header for every 2026 page ---------- Anatomy: .eyebrow (dot + mono label) -> .h-display (full size, optional muted 2nd line) -> optional .lead, closed by a hairline (chosen variant B). The atoms (.eyebrow/.h-display/.lead) come from each page's own css; this owns only the band rhythm + the rule. Color tokens + literal px only. Every page uses the full --maxw container, left-aligned (content pages too). .bordered = own hairline; the shop omits it (its filterbar carries one). */ .masthead{padding:72px 0 36px} .masthead.bordered{border-bottom:1px solid var(--line);margin-bottom:36px} .masthead .eyebrow{margin-bottom:20px} .masthead .h-display{margin:0} .masthead .lead{margin-top:22px} .masthead .lead + .lead{margin-top:14px} .masthead .mast-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap} @media(max-width:720px){ .masthead{padding:44px 0 26px} .masthead.bordered{margin-bottom:28px} } /* ---------- footer ---------- */ .foot26{border-top:1px solid var(--line);margin-top:96px;padding:56px 0 0; position:relative;z-index:40} .f26-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px} .f26-brand .brand{font-size:15px} .f26-brand .brand svg{width:26px;height:26px} .f26-brand p{font-family:var(--sans);color:var(--text-muted);font-size:13.5px; line-height:1.7;letter-spacing:0;margin:32px 0 0;max-width:300px} /* social icons (color tokens + literal spacing: shared chrome, runs on pages that don't yet carry the --space-* scale) */ .f26-social{display:flex;gap:10px;margin-top:22px} .f26-social a{width:36px;height:36px;border:1px solid var(--line);display:grid;place-items:center; color:var(--text-muted);transition:.16s ease} .f26-social a:hover{color:var(--accent);border-color:rgba(242,32,46,.4);background:rgba(242,32,46,.05)} .f26-social svg{width:17px;height:17px;fill:currentColor} .f26-h{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase; color:var(--text-faint);margin-bottom:18px} .f26-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px} .f26-col a{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em; color:var(--text-muted);transition:.14s} .f26-col a:hover{color:var(--text)} .f26-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; border-top:1px solid var(--line);margin-top:48px;padding:22px 0 26px; font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-faint)} @media(max-width:880px){ .f26-grid{grid-template-columns:1fr 1fr;gap:36px 24px} .f26-brand{grid-column:1/-1} .foot26{margin-top:64px} } /* pulse keyframes (standing rule: every 2026 stylesheet ships them) */ @keyframes bycPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)} 50%{box-shadow:0 0 0 8px rgba(242,32,46,.07)}}