/* ========================================================================== components.css — ALL reusable visual styling: header/nav, footer, hero base, contact form, and the cross-page card primitives. Page-*.css should only do layout/placement. Depends on tokens.css + base.css. Frozen state classes (JS + CSS + component-reference agree byte-for-byte): .has-js .has-hero (on /) .site-header.is-scrolled .site-header.is-nav-open .reveal.is-visible .stepper__node.is-active .stepper__panel.is-active Frozen hooks: [data-stepper] [data-step="i"] [data-panel="i"] ========================================================================== */ /* ========================================================================= SITE HEADER + NAV Header is position:fixed. Transparent (white text) over a dark hero on pages flagged .has-hero; solid white + dark text everywhere else and once scrolled. ========================================================================= */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 200; background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); padding-block: var(--space-3); } /* Non-hero pages have no full-bleed hero under the fixed header, so offset the content by the header height. Hero pages let the hero sit under it. */ body:not(.has-hero) #main { padding-top: var(--header-h); } /* The header is a solid white bar on every page at every scroll position (matches the original site). Hero pages still flag .has-hero — it drives the #main offset above and lets the hero's own padding-top clear the fixed bar. */ /* Brand / logo */ .brand { display: inline-flex; align-items: center; margin-right: auto; /* pushes nav + cta to the right */ line-height: 0; } .brand img, .brand .custom-logo { height: 40px; width: auto; max-width: 220px; object-fit: contain; } /* Primary nav (horizontal) */ .primary-nav { display: flex; align-items: center; } .nav-menu { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .nav-menu li { margin: 0; } .nav-menu a { display: inline-block; padding: 6px 2px; color: var(--ink); font-weight: var(--fw-medium); position: relative; transition: color var(--dur) var(--ease); } .nav-menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--brand); transition: right var(--dur) var(--ease); } .nav-menu a:hover, .nav-menu .current-menu-item > a, .nav-menu .current_page_item > a { color: var(--brand); } .nav-menu a:hover::after, .nav-menu .current-menu-item > a::after, .nav-menu .current_page_item > a::after { right: 0; } /* Header CTA pill */ .nav-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.7em 1.35em; border-radius: var(--radius-pill); background: var(--brand); color: #fff; font-weight: var(--fw-semibold); line-height: 1; border: 2px solid var(--brand); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .nav-cta:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; transform: translateY(-2px); } /* Hamburger toggle (hidden until mobile) */ .nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background var(--dur) var(--ease); } .nav-toggle__bar { position: relative; } .nav-toggle__bar::before { position: absolute; top: -7px; } .nav-toggle__bar::after { position: absolute; top: 7px; } /* Open (X) animation */ .site-header.is-nav-open .nav-toggle__bar { background: transparent; } .site-header.is-nav-open .nav-toggle__bar::before { top: 0; transform: rotate(45deg); background: var(--ink); } .site-header.is-nav-open .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); background: var(--ink); } /* Mobile layout ----------------------------------------------------------- */ /* The open menu is an absolute full-width dropdown below the bar, so it never perturbs the header-bar flex layout. .nav-menu is the