/* ========================================================================== Site Header Transparent over hero, solidifies on scroll (js/main.js toggles .is-scrolled) ========================================================================== */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); height: var(--header-height); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .site-header.is-scrolled { background: rgba(246, 244, 240, 0.92); backdrop-filter: blur(8px); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } .site-header__inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-header__brand { display: flex; align-items: center; gap: var(--space-2); } .site-header__logo { height: 40px; width: auto; } .site-nav { display: flex; align-items: center; gap: var(--space-4); } .site-nav__list { display: flex; align-items: center; gap: var(--space-3); } .site-nav__link { position: relative; font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text); padding-block: var(--space-1); transition: color var(--duration-fast) var(--ease-out); } .site-header:not(.is-scrolled) .site-nav__link { color: var(--color-white); } .site-nav__link::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 0; height: 2px; background: var(--color-gold); transition: width var(--duration-fast) var(--ease-out); } .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { width: 100%; } .site-nav__cta { padding: 0.65rem 1.5rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--color-gold); color: var(--color-graphite); border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out); } .site-nav__cta:hover { background: var(--color-gold-dim); } .site-header__menu-toggle { display: none; position: relative; width: 32px; height: 32px; align-items: center; justify-content: center; font-size: var(--text-lg); line-height: 1; transition: color var(--duration-fast) var(--ease-out); } /* Icon color must be driven explicitly — it does NOT inherit a usable color from .site-header (which sets none) or (dark graphite, invisible on the transparent/dark hero). */ .site-header:not(.is-scrolled) .site-header__menu-toggle { color: var(--color-white); } .site-header.is-scrolled .site-header__menu-toggle { color: var(--color-maroon); } @media (max-width: 860px) { .site-nav { position: static; } /* Collapsed by default: present in the DOM (for a11y + smooth close), driven to 0 height rather than display:none/visibility:hidden so the open/close is a guaranteed, animatable state change — no stacking or visibility-timing ambiguity to fight with. */ .site-nav__list { position: fixed; inset-inline: 0; inset-block-start: var(--header-height); z-index: var(--z-header); flex-direction: column; align-items: stretch; gap: 0; background: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-md); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } .site-nav__list.is-open { max-height: calc(100vh - var(--header-height)); overflow-y: auto; opacity: 1; pointer-events: auto; } .site-nav__list li { width: 100%; } .site-nav__link { display: block; padding: var(--space-2) var(--container-pad); color: var(--color-text) !important; /* solid panel bg — always dark text, regardless of header scroll state */ border-bottom: 1px solid var(--color-border); } .site-nav__link::after { display: none; } /* underline hover doesn't suit a full-width row */ .site-header__menu-toggle { display: inline-flex; } }