/*! @crucible/design-system 0.1.0 (e95a491) — built 2026-05-26T04:32:08.542Z */ /* ─── Site header ───────────────────────────────────────────────────────────── Sticky chrome at the top of every page. Mirrors SiteHeader.tsx's previous Tailwind-utility implementation. Container width matches Container.tsx's "wide" preset (P3-10). Desktop nav appears at md (≥768px); mobile shows the ghost quote CTA + hamburger trigger. .admin-bar override at the bottom of this file accommodates the WP admin bar when logged in. No effect on Next — its never gets .admin-bar. */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .site-header__inner { margin-inline: auto; width: 100%; max-width: var(--container-wide); padding-inline: 1rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 640px) { .site-header__inner { padding-inline: 2rem; } } @media (min-width: 1024px) { .site-header__inner { padding-inline: 3rem; } } .site-header__brand { display: inline-flex; text-decoration: none; } .site-header__nav { display: none; } @media (min-width: 768px) { .site-header__nav { display: flex; align-items: center; gap: 2rem; } } .site-header__link { font-size: var(--text-body-sm); font-weight: 500; color: var(--color-text-secondary); text-decoration: none; transition: color 100ms ease; } .site-header__link:hover { color: var(--color-text-primary); } .site-header__mobile { display: flex; align-items: center; gap: 0.75rem; } @media (min-width: 768px) { .site-header__mobile { display: none; } } /* WP admin bar offset. Tipping point is 783px per WP core. */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }