/* ============================================================ BERUNDA — Shared chrome (LOCKED): announcement bar, sticky nav, cart emblem, footer band. One source of truth for every page. Prefix `bn-`. Homepage uses the .bn-nav--hero transparent variant. Mobile toggle + drawer styles live in website-nav.css (shared). Values are verbatim from the locked spec (CLAUDE.md / home.css). ============================================================ */ /* ---- Sticky behaviour: a Shopify section can't stick from inside its own short wrapper, so the WRAPPER that holds the nav is made sticky. The announcement bar is a separate section/wrapper, so it scrolls away. ---- */ .shopify-section:has(> .bn-nav) { position: sticky; top: 0; z-index: 60; } /* Retracted, the wrapper is an invisible 74px band across the top of the viewport — it would swallow taps meant for the content beneath it. */ .shopify-section:has(> .bn-nav.retracted) { pointer-events: none; } /* ============================================================ Brand scrollbars (whole site) The track is transparent so it merges into whatever background sits behind it — the scroll gutter "disappears". Only a slim, semi-opaque GOLD thumb (a brand accent) is visible, so the scrollbar reads as part of the brand on every page. Applies to the page itself AND every inner scroll area (cart drawer, quick-view modal, brew guide, etc.). Firefox: inherited scrollbar-color/width on cascades everywhere. ============================================================ */ html { scrollbar-width: thin; scrollbar-color: rgba(198, 135, 27, 0.62) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(198, 135, 27, 0.62); border-radius: 999px; border: 2px solid transparent; /* slims the thumb + keeps a transparent gutter */ background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(198, 135, 27, 0.85); background-clip: padding-box; } /* ============================================================ Announcement bar ============================================================ */ .bn-announce { background: #00091d; border-bottom: 1px solid rgba(198, 135, 27, 0.18); padding: 11px 16px 10px; } .bn-announce-row { max-width: 1320px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 92px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .bn-announce-side { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.24em; font-size: 9px; color: var(--ivory-400); } .bn-announce-side.left { text-align: left; } .bn-announce-side.right { text-align: right; } .bn-announce-center { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 10px; color: var(--gold-300); text-align: center; white-space: nowrap; } /* ============================================================ Navigation ============================================================ */ .bn-nav { /* Inner pages: opaque on load. (--hero variant overrides for homepage.) */ background: #1c0408; border-bottom: 1px solid rgba(198, 135, 27, 0.14); transition: background-color 0.45s var(--ease-standard), border-bottom-color 0.45s var(--ease-standard), backdrop-filter 0.45s var(--ease-standard), transform 0.4s var(--ease-standard); } /* Reading downward retracts the bar; the slightest scroll up returns it. The transform sits on the bar itself, never on the sticky wrapper — the mobile drawer is a `position: fixed` sibling inside that wrapper, and a transformed ancestor would trap it in the 74px header box. */ .bn-nav.retracted { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .bn-nav { transition: none; } } /* Scrolled: translucent crimson veil + blur (all pages). */ .bn-nav.scrolled { background: rgba(28, 4, 8, 0.72); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-bottom-color: rgba(198, 135, 27, 0.14); } /* Homepage variant: transparent over the velvet hero, NO gold hairline at top. */ .bn-nav--hero { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; } .bn-nav--hero.scrolled { background: rgba(28, 4, 8, 0.72); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-bottom-color: rgba(198, 135, 27, 0.14); } /* Hover wins over .scrolled on the homepage: fully opaque + hairline. */ .bn-nav--hero:hover { background: #1c0408; -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-bottom-color: rgba(198, 135, 27, 0.14); } .bn-nav-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 92px); height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; /* anchor for the absolute mobile toggle */ } .bn-nav-group { display: flex; gap: clamp(22px, 2.6vw, 42px); align-items: center; } .bn-nav-group.right { justify-content: flex-end; } .bn-nav-link { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; color: var(--ivory-400); text-decoration: none; position: relative; padding-bottom: 4px; white-space: nowrap; transition: color var(--dur-slow) var(--ease-standard); } .bn-nav-link[aria-current="page"] { color: var(--gold-300); } .bn-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold-400); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-standard); } .bn-nav-link[aria-current="page"]::after { transform: scaleX(1); } .bn-nav-link:hover { color: var(--gold-300); } .bn-nav-link:hover::after { transform: scaleX(1); } /* ---- Home as a house icon (2026-08) ---- The left group carries three items (Home · Collection · Estate). It used to be pulled outward and tightened to clear the wordmark; dropping "The" from every label shortened it enough that it now shares the same gap as the right group, so every item in the bar is spaced identically. */ .bn-nav-group.left { gap: clamp(22px, 2.6vw, 42px); } .nav-home { display: inline-flex; align-items: center; padding-bottom: 0; } /* it is a glyph, not a word — the sliding underline would sit under nothing */ .nav-home::after { display: none !important; } /* the glyph stays 19px; an invisible expander brings the hit area to 44px */ .nav-home::before { content: ""; position: absolute; inset: -13px; } .nav-home-glyph { width: 19px; height: 19px; display: block; } .nav-home[aria-current="page"] { color: var(--gold-300); } .bn-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.42em; font-size: 24px; color: var(--gold-400); text-decoration: none; padding-left: 0.42em; white-space: nowrap; } /* ---- Cart emblem ---- */ .bn-cart { /* no extra margin — the group gap alone spaces it, so the cart sits on the same rhythm as every link in the bar */ margin-left: 0; width: 40px; height: 40px; border: 1px solid rgba(198, 135, 27, 0.30); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ivory-400); text-decoration: none; position: relative; background: none; cursor: pointer; transition: color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .bn-cart-glyph { width: 22px; height: 22px; display: block; } .bn-cart:hover { color: var(--gold-300); border-color: rgba(198, 135, 27, 0.6); transform: translateY(-1px); } /* live cart count bubble */ .bn-cart-count { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--regal-gold); color: #1e1206; font-family: var(--font-display); font-size: 9px; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none; } .bn-cart-count[hidden] { display: none; } @media (max-width: 680px) { .bn-nav-group { display: none; } .bn-nav-inner { grid-template-columns: 1fr; justify-items: center; } /* Announcement: stack the two side messages (the 2-part bar) centered; the center slot is empty in this layout, so hide it rather than show a gap. */ .bn-announce-row { grid-template-columns: 1fr; padding: 0 14px; row-gap: 3px; } .bn-announce-side { display: block; } .bn-announce-side.left, .bn-announce-side.right { text-align: center; } .bn-announce-center { display: none; } } /* ============================================================ Shopify policy pages (/policies/*) — Shopify renders these with its own .shopify-policy__* markup inside the theme layout; restyle the stock white page as brand parchment with Cinzel/Cormorant. ============================================================ */ body:has(.shopify-policy__container) { background: var(--parchment); } .shopify-policy__container { max-width: 760px; margin: 0 auto; padding: 72px 24px 110px; } .shopify-policy__title { text-align: center; padding-bottom: 34px; margin-bottom: 44px; border-bottom: 1px solid rgba(147, 98, 18, 0.28); } .shopify-policy__title h1 { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-900); margin: 0; } .shopify-policy__body { font-family: var(--font-body); font-size: 18px; line-height: 1.72; color: var(--ink-700); } .shopify-policy__body h2, .shopify-policy__body h3 { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-900); margin: 2.3em 0 0.7em; } .shopify-policy__body h4 { font-family: var(--font-body); font-size: 19px; font-weight: 700; font-style: italic; color: var(--ink-900); margin: 1.6em 0 0.5em; } .shopify-policy__body p { margin: 0 0 1.1em; } .shopify-policy__body ul, .shopify-policy__body ol { margin: 0 0 1.3em; padding-left: 1.4em; } .shopify-policy__body li { margin: 0 0 0.55em; } .shopify-policy__body li::marker { color: var(--gold-600); } .shopify-policy__body em { color: var(--ink-500); } .shopify-policy__body strong { color: var(--ink-900); } .shopify-policy__body a { color: var(--gold-700); text-decoration: underline; text-underline-offset: 3px; } .shopify-policy__body a:hover { color: var(--gold-600); }