/** * Header nav typography and the scrolled state. * * The header template itself belongs to another build. Everything here is * type, colour and the scrolled background only, kept in its own file so it * can be deleted in one move if the header takes these over. */ /* ---- The reference header is `fixed top-0 z-50` on every page, so page content starts at the very top of the document and the header rides over it. Both pages already carry enough top padding to clear it: the homepage hero fills the viewport behind it, and the menu page opens on 128px. The `body.home` selector is repeated because bn-home.css pins the header to `relative` on the front page, and that rule is one element more specific than this one. ---- */ header.elementor-location-header, body.home header.elementor-location-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; } /* ---- With the header out of the flow, the homepage hero no longer needs to be pulled up underneath it. ---- */ body.home [data-testid="home-hero"] { margin-top: 0; } /* ---- No background at rest, so the hero image reads straight through the header, fading to cream at 85% behind a blur once the page moves. The class is put on by assets/js/bn-header-scroll.js. ---- */ header.elementor-location-header { background-color: rgba(247, 245, 240, 0); transition: background-color .5s, box-shadow .5s, backdrop-filter .5s; } body.bn-scrolled header.elementor-location-header { background-color: rgba(247, 245, 240, .85); backdrop-filter: blur(24px); box-shadow: 0 1px 0 rgba(44, 59, 46, .08); } /* ---- Nav items. The reference sets them at 13px on 0.18em in the sans face, uppercase, moss going to forest on hover and for the current page. Elementor writes the widget's own typography as `.elementor-91 .elementor-element.elementor-element-a49f690 .elementor-nav-menu .elementor-item`, five classes deep, so `.elementor-item` is named twice below to clear it. The tidier fix is to set this on the nav widget itself in the header template, which would let this whole block go. ---- */ header.elementor-location-header .elementor-widget.elementor-widget-nav-menu .elementor-nav-menu .elementor-item.elementor-item { font-family: var(--font-sans), sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--color-moss); background-color: transparent; transition: color .3s; } header.elementor-location-header .elementor-widget.elementor-widget-nav-menu .elementor-nav-menu .elementor-item.elementor-item:hover, header.elementor-location-header .elementor-widget.elementor-widget-nav-menu .elementor-nav-menu .elementor-item.elementor-item:focus, header.elementor-location-header .elementor-widget.elementor-widget-nav-menu .elementor-nav-menu .elementor-item.elementor-item-active, header.elementor-location-header .elementor-widget.elementor-widget-nav-menu .elementor-nav-menu .elementor-item.highlighted { color: var(--color-forest); background-color: transparent; } /* ---- Shop Now. The reference is 13px on 0.15em in a forest pill, 24px of side padding on a 40px box, cream label, sage on hover. ---- */ header.elementor-location-header .elementor-button { padding: 10px 24px; border-radius: 9999px; background-color: var(--color-forest); color: var(--color-cream); font-family: var(--font-sans), sans-serif; font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: .15em; text-transform: uppercase; transition: background-color .3s; } header.elementor-location-header .elementor-button:hover, header.elementor-location-header .elementor-button:focus { background-color: var(--color-sage); color: var(--color-cream); }