/* css/header.css Site header chrome: a header that blends with the page instead of sitting as a solid white block, and gains a solid/blurred background once the page is scrolled ("solidifies on scroll"). On the homepage, the header overlays the hero banner so it visually blends into the hero instead of sitting as a separate bar above it. The header is always position: fixed (every page, not just the homepage) rather than sticky — sticky elements still reserve their box in normal document flow, so hiding one on scroll (see .header-hidden, toggled on mobile in js/app.js) would leave a blank gap where it used to sit. Each page adds matching top padding to its first section to compensate for the header no longer occupying flow space. Uses plain CSS classes (not Tailwind's dark: utilities) because dark mode on this site is toggled by adding .dark to , not via prefers-color-scheme — see css/dark-mode.css for the full rationale. */ .site-header { position: fixed; top: 0; inset-inline: 0; z-index: 40; background-color: rgba(249, 250, 251, 0.7); /* gray-50 glass, matches body bg */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .site-header.is-scrolled { background-color: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); border-bottom-color: #f3f4f6; } /* Mobile: slide the header out of view when scrolling down, back in when scrolling up or near the top — see initHeaderScroll() in js/app.js. Left untouched on desktop, where the header always stays visible. */ .site-header.header-hidden { transform: translateY(-100%); } /* Homepage: overlay the hero instead of sitting inline above it */ .site-header--hero { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header--hero.is-scrolled { background-color: rgba(15, 23, 42, 0.75); /* neutral-900 glass, reads well over any content */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); border-bottom-color: rgba(255, 255, 255, 0.08); } /* Nav link coloring driven by header state rather than inline per-link classes */ .nav-link { color: #4b5563; /* gray-600 */ transition: color 0.2s ease; } .nav-link:hover { color: #1E5631; } .nav-link.is-active { color: #1E5631; border-bottom: 2px solid #1E5631; padding-bottom: 4px; } .menu-icon-btn { color: #374151; } /* Homepage, before scroll: light text over the dark hero gradient */ .site-header--hero:not(.is-scrolled) .nav-link { color: rgba(255, 255, 255, 0.85); } .site-header--hero:not(.is-scrolled) .nav-link:hover { color: #fff; } .site-header--hero:not(.is-scrolled) .nav-link.is-active { color: #C5A880; border-color: #C5A880; } .site-header--hero:not(.is-scrolled) .menu-icon-btn { color: #fff; } .site-header--hero:not(.is-scrolled) .theme-toggle-btn { color: rgba(255, 255, 255, 0.85); } .site-header--hero:not(.is-scrolled) .logo-fallback-brand { color: #fff; } .site-header--hero:not(.is-scrolled) .logo-fallback-sub { color: #C5A880; } html.dark .site-header:not(.site-header--hero) { background-color: rgba(15, 23, 42, 0.7); } html.dark .site-header:not(.site-header--hero).is-scrolled { background-color: rgba(15, 23, 42, 0.92); border-bottom-color: #334155; } html.dark .nav-link { color: #94a3b8; } html.dark .nav-link:hover { color: #C5A880; } html.dark .nav-link.is-active { color: #C5A880; border-color: #C5A880; } html.dark .menu-icon-btn { color: #cbd5e1; }