/* bkCAMUR Home — navigation. * * Linked LAST in every page's , after whatever that page inlines, so * this file wins on equal specificity. The nav markup and styles were * duplicated across a dozen pages and had drifted apart; anything nav-related * now belongs here and here only. */ /* ---------------------------------------------------------------- header -- */ header { position: sticky; top: 0; z-index: 200; background: rgba(251, 247, 239, 0.86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } header.scrolled { background: rgba(251, 247, 239, 0.95); border-bottom-color: var(--line); box-shadow: 0 8px 26px rgba(43, 27, 18, 0.07); } nav { padding: 17px 40px; gap: 18px; } .logo { font-size: 24px; } .logo-mark { width: 34px; height: 34px; } /* ------------------------------------------------------- desktop nav bar -- */ @media (min-width: 1280px) { .nav-links { gap: 26px; margin: 0 26px; align-items: center; } .nav-links > li > a { position: relative; display: inline-block; padding: 7px 0; font-size: 11px; letter-spacing: 0.13em; color: var(--espresso); opacity: 0.82; transition: opacity 0.22s ease, color 0.22s ease; } .nav-links > li > a:hover { opacity: 1; color: var(--terracotta); } /* Underline grows from the left on hover, and stays put on the current page. */ .nav-links > li > a::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--terracotta); transform: scaleX(0); transform-origin: right center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-links > li > a:hover::before, .nav-links > li.current > a::before { transform: scaleX(1); transform-origin: left center; } .nav-links > li.current > a { opacity: 1; color: var(--terracotta); } .nav-cta { background: var(--espresso); padding: 12px 24px; font-size: 10px; letter-spacing: 0.18em; border-radius: 2px; transition: background 0.25s ease, transform 0.25s ease; } .nav-cta:hover { background: var(--terracotta); transform: translateY(-1px); } /* Dropdown panel */ .nav-shop-panel { top: calc(100% + 2px); min-width: 244px; padding: 8px 0; background: var(--warm-white); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 20px 46px rgba(43, 27, 18, 0.16); } .nav-shop-panel a { padding: 11px 20px; font-size: 10.5px; letter-spacing: 0.1em; opacity: 0.85; transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .nav-shop-panel a:hover { background: var(--cream); color: var(--terracotta); opacity: 1; } .nav-shop-panel li.current > a { color: var(--terracotta); opacity: 1; } } /* ---------------------------------------------------------- mobile drawer -- */ @media (max-width: 1279px) { nav { padding: 15px 22px; } /* A light scrim with a blur, not a 50% blackout - the old one read as the screen brightness dropping. It is also clickable now: tapping outside used to do nothing because the overlay had pointer-events:none. */ .nav-overlay { /* Must sit BELOW the header.
is sticky with z-index:200, so it opens a stacking context and the drawer's z-index:300 is scoped inside it - an overlay at 250 paints over the whole header subtree, drawer included. That was invisible while the overlay had pointer-events:none; the moment it became clickable it swallowed every tap. */ z-index: 150; background: rgba(32, 20, 9, 0.2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .nav-overlay.open { pointer-events: auto; } .nav-links { padding: 26px 0 36px; background: var(--warm-white); box-shadow: -20px 0 56px rgba(32, 20, 9, 0.2); width: min(340px, 86vw); } /* Drawer header: gives the panel a title and room clear of the toggle. */ .nav-links::before { content: 'Menu'; display: block; padding: 0 24px 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-family: 'Cormorant Garamond', serif; font-size: 21px; letter-spacing: 0.02em; color: var(--espresso); } .nav-links > li { border-bottom: 1px solid rgba(228, 217, 198, 0.6); } .nav-links > li:last-of-type { border-bottom: 0; } .nav-links > li > a { display: block; padding: 15px 24px; font-size: 12px; letter-spacing: 0.12em; color: var(--espresso); transition: background 0.2s ease, color 0.2s ease; } .nav-links > li > a:active { background: var(--cream); } .nav-links > li.current > a { color: var(--terracotta); } /* "Shop" reads as a group label with the three categories nested under it. */ .nav-shop > a { font-size: 10px !important; letter-spacing: 0.2em !important; color: var(--taupe-grey) !important; padding-bottom: 6px !important; } .nav-shop-panel { padding: 0 0 10px; } .nav-shop-panel a { display: block; padding: 12px 24px 12px 36px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: none; font-family: 'Cormorant Garamond', serif; font-weight: 500; color: var(--espresso); text-decoration: none; opacity: 1; } .nav-shop-panel a:active { background: var(--cream); } .nav-shop-panel li.current > a { color: var(--terracotta); } .nav-mobile-cta { padding: 22px 24px 0; border-bottom: 0 !important; } .nav-mobile-cta a { display: block; text-align: center; } .menu-toggle { z-index: 310; } }