/* * Header bundle: fixed navigation with a centred logo. * * On the front page the header floats over the hero in light-on-dark, and * turns into a translucent cream bar once the page scrolls. Everywhere else it * starts solid. Both states are driven by classes set in header.js. */ /* * The height of the solid header, published so the page layer can clear it * without re-deriving it. * * It is the logo box plus 0.75rem of padding either side. The logo is sized by * width alone against fixed 1492x679 artwork, so these follow the three logo * widths at the foot of this file — 100.4px, 109.5px, 118.6px — each rounded up * to the next half rem. Change a logo width and this is the one other place * that has to change with it. */ :root { --ps-header-height: 6.5rem; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-block: 2rem; background: transparent; pointer-events: none; transition: background-color 0.3s ease-out, padding 0.3s ease-out, box-shadow 0.3s ease-out; } /* * The WordPress admin bar, when there is one. * * Core bumps down by the bar's height, which moves everything in normal * flow — but not this header, because a fixed element is positioned against the * viewport and never sees that margin. The header is therefore the only thing * that has to be told, and the page content below it needs no change at all. * * Both signals are core's own: the .admin-bar body class, and the * --wp-admin--admin-bar--height custom property that admin-bar.css sets on * (32px, 46px under 783px). Logged out neither exists, and the last * fallback keeps the header at the top of the viewport. * * --ps-admin-bar-offset is header.js tracking the bar down the page in the one * case this cannot express: under 601px core makes the bar absolute and lets it * scroll away, so a static offset would either prop a gap open under a bar that * has gone or let the bar paint over the logo while it is still there. Where * the bar is fixed the script publishes its plain height, so this reads the * same either way — and with JS off the middle fallback still gets every * fixed-bar viewport right. */ .admin-bar .site-header { top: var(--ps-admin-bar-offset, var(--wp-admin--admin-bar--height, 0px)); } /* * Under 601px, put core's bar back where core meant to put it. * * There it is position:absolute with top:0, which core writes expecting the * initial containing block. This theme gives body position:relative (the glow * leaks are absolutely positioned against it), so body becomes the containing * block instead — and body starts at the very margin core added to to * make room for the bar. The bar therefore lands one full bar-height *down the * page*, floating over the header instead of sitting above it. * * Cancelling that margin is exactly the correction, and the two are the same * number by construction: core sets the html margin and the bar height from one * value, so this reads it back rather than restating 46px. */ @media screen and (max-width: 600px) { .admin-bar #wpadminbar { top: calc( var(--wp-admin--admin-bar--height, 0px) * -1 ); } } .site-header__inner { pointer-events: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } /* Scrolled, and every non-front page. */ .site-header.is-solid, body:not(.has-transparent-header) .site-header { padding-block: 0.75rem; background: rgba(245, 240, 232, 0.8); backdrop-filter: blur(20px); box-shadow: 0 1px 3px 0 rgba(45, 27, 16, 0.02); } /* --- Navigation --------------------------------------------------------- */ .site-nav { display: none; min-width: 0; } .site-nav__list { display: flex; align-items: center; gap: 1.5rem; margin: 0; list-style: none; } .site-nav--right .site-nav__list { justify-content: flex-end; } .site-nav a { position: relative; display: inline-block; padding-bottom: 0.5rem; white-space: nowrap; font-family: var(--wp--preset--font-family--sans); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(26, 42, 30, 0.5); transition: color 0.3s; } .site-nav a:hover { color: var(--wp--preset--color--brand-wood); } /* Light-on-dark while the header floats over the hero. */ .has-transparent-header .site-header:not(.is-solid) .site-nav a { color: rgba(255, 255, 255, 0.7); } .has-transparent-header .site-header:not(.is-solid) .site-nav a:hover { color: #fff; } .site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: var(--wp--preset--color--brand-gold); } .site-nav .current-menu-item > a::after, .site-nav .current_page_item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--wp--preset--color--brand-gold); } /* --- Brand -------------------------------------------------------------- */ .site-header__brand { grid-column: 2; justify-self: center; padding-inline: 1rem; } .site-header__logo { /* w-[168px] md:w-[188px] xl:w-[208px] */ width: 168px; height: auto; object-fit: contain; transition: transform 0.5s; } .site-header__brand:hover .site-header__logo { transform: scale(1.05); } /* Two logo files: the light one only while floating over the hero. */ .site-header__logo--light { display: none; } .has-transparent-header .site-header:not(.is-solid) .site-header__logo--light { display: block; } .has-transparent-header .site-header:not(.is-solid) .site-header__logo--dark { display: none; } /* --- Right cluster ------------------------------------------------------ */ .site-header__actions { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; min-width: 0; } .site-header__cta { display: none; margin-left: 1.5rem; padding: 0.75rem 1.5rem; transform: translateY(-4px); border-radius: 999px; white-space: nowrap; font-family: var(--wp--preset--font-family--sans); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; background: var(--wp--preset--color--brand-wood-deep); color: var(--wp--preset--color--brand-cream); transition: background-color 0.3s, color 0.3s; } .site-header__cta:hover { background: var(--wp--preset--color--brand-gold); color: var(--wp--preset--color--brand-wood-deep); } .has-transparent-header .site-header:not(.is-solid) .site-header__cta { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; } .has-transparent-header .site-header:not(.is-solid) .site-header__cta:hover { background: #fff; color: var(--wp--preset--color--brand-wood); } /* --- Mobile toggle + panel ---------------------------------------------- */ .menu-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; background: none; border: 0; cursor: pointer; color: var(--wp--preset--color--brand-wood); transition: color 0.3s; } .has-transparent-header .site-header:not(.is-solid) .menu-toggle { color: #fff; } .menu-toggle svg { width: 1.25rem; height: 1.25rem; } .menu-toggle__close { display: none; } .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; } .menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; } .mobile-panel { position: absolute; top: 100%; left: 0; right: 0; height: 100vh; padding: 2rem 1.5rem; pointer-events: auto; background: var(--wp--preset--color--brand-cream); border-top: 1px solid rgba(26, 42, 30, 0.1); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .mobile-panel[hidden] { display: none; } .mobile-panel__list { display: flex; flex-direction: column; gap: 1.5rem; margin: 0 0 1.5rem; list-style: none; } .mobile-panel__list a { font-family: var(--wp--preset--font-family--serif); font-size: 1.5rem; color: var(--wp--preset--color--brand-wood); } .mobile-panel__list .current-menu-item > a, .mobile-panel__list .current_page_item > a { color: var(--wp--preset--color--brand-olive); } .mobile-panel__cta { display: inline-flex; width: 100%; justify-content: center; padding: 1rem 2rem; border-radius: 999px; background: var(--wp--preset--color--brand-wood); color: var(--wp--preset--color--brand-cream); font-size: 1.125rem; font-weight: 500; transition: background-color 0.3s; } .mobile-panel__cta:hover { background: var(--wp--preset--color--brand-olive); } /* --- Breakpoint --------------------------------------------------------- */ @media (min-width: 768px) { :root { --ps-header-height: 7rem; } .site-header__logo { width: 188px; } } @media (min-width: 1280px) { :root { --ps-header-height: 7.5rem; } .site-header__logo { width: 208px; } } @media (min-width: 1024px) { .site-nav { display: flex; } .site-header__cta { display: inline-block; } .menu-toggle, .mobile-panel { display: none; } }