/* ========================================================================== AE Creative — Header / navigation / mobile menu component Everything needed to render the site header on ANY page: the fixed bar, desktop nav links, the burger button, and the full-screen mobile menu. Pairs with assets/partials/header.html and assets/js/navigation.js. Behavior (scroll-shrink, open/close, active states) lives in JS — this file only defines appearance/states via classes JS toggles (.is-scrolled, .is-open). See COMPONENTS.md for the full contract. ========================================================================== */ /* ---- Bar ---- */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .35s var(--ease),border-color .35s var(--ease), backdrop-filter .35s var(--ease),box-shadow .35s var(--ease); background:transparent;backdrop-filter:none;border-bottom:1px solid transparent; box-shadow:0 0 0 rgba(0,0,0,0); } .site-header.is-scrolled{ background:var(--header-bg-scrolled);backdrop-filter:blur(16px);border-bottom:1px solid var(--line); box-shadow:0 12px 30px -12px rgba(0,0,0,.5); } .site-header__inner{ max-width:var(--container);margin:0 auto;padding:16px clamp(18px,4vw,40px); display:flex;align-items:center;justify-content:space-between;gap:20px; } .brand{display:flex;align-items:center;gap:12px} .brand__mark{height:38px;width:auto} .brand__name{font-family:var(--ff-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--header-text)} /* ---- Desktop nav ---- */ .desk-nav{display:flex;align-items:center;gap:30px;position:relative} .nav-link{position:relative;z-index:1;font-size:14.5px;color:var(--header-text-muted);font-weight:400;transition:color .2s var(--ease)} .nav-link:hover,.nav-link:focus-visible,.nav-link.is-nav-active{color:var(--header-text);font-weight:600} /* ---- Sliding nav indicator ---- Single floating pill, created/positioned by assets/js/nav-indicator.js (desktop-only — see the 900px breakpoint in responsive.css that hides .desk-nav entirely below it, which makes this inert on mobile without needing its own duplicate breakpoint logic). Position/size are set as inline styles by the JS; only appearance + the transform/opacity transition live here. Kept in header.css rather than a separate file since it's exclusively a desktop-nav concern, already header.css's documented scope. */ .nav-indicator{ position:absolute;top:0;left:0;z-index:0; border-radius:99px; background:var(--grad); box-shadow:0 6px 20px rgba(107,95,255,.35); opacity:0; pointer-events:none; transform:translate(0,0) scale(1,1); transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .2s var(--ease); will-change:transform; } .nav-indicator::before{ content:""; position:absolute;inset:1px; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%); pointer-events:none; } .header-actions{display:flex;align-items:center;gap:14px} .burger{ display:none;width:44px;height:44px;border-radius:12px; border:1px solid var(--header-control-border);background:var(--header-control-bg); color:var(--header-control-text);font-size:20px;cursor:pointer; } /* ---- Theme toggle ---- One button, two inline SVGs stacked in the same slot — CSS visibility (not JS) decides which shows, driven purely by the [data-theme] attribute JS sets on . Sun = "tap to switch to light", shown in dark mode; moon = "tap to switch to dark", shown in light mode. Same markup/component in the desktop header and the mobile menu (see assets/partials/header.html) — assets/js/theme.js attaches one click handler to every [data-theme-toggle] on the page. */ .theme-toggle{ display:flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:12px;flex:none; border:1px solid var(--header-control-border);background:var(--header-control-bg); color:var(--header-control-text);cursor:pointer; transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease); } .theme-toggle:hover,.theme-toggle:focus-visible{transform:translateY(-2px)} .theme-toggle__icon{width:19px;height:19px} /* Specificity bumped to two classes (`.theme-toggle .theme-toggle__icon--moon`, not just `.theme-toggle__icon--moon`) so this reliably beats icons.css's `.icon{display:block}` — that file loads AFTER header.css in every page's , and a single-class selector there would otherwise win the tie on source order alone, leaving both icons visible at once. */ .theme-toggle .theme-toggle__icon--moon{display:none} :root[data-theme="light"] .theme-toggle .theme-toggle__icon--sun{display:none} :root[data-theme="light"] .theme-toggle .theme-toggle__icon--moon{display:block} .mobile-menu__theme-toggle{width:44px;height:44px} .mobile-menu__theme-toggle .theme-toggle__icon{width:20px;height:20px} /* ---- Mobile menu (full-screen overlay) ---- */ .mobile-menu{ position:fixed;inset:0;z-index:120;background:var(--mobile-menu-bg); backdrop-filter:blur(16px);opacity:0;pointer-events:none; transition:opacity .35s var(--ease);display:flex;flex-direction:column; } .mobile-menu.is-open{opacity:1;pointer-events:auto} .mobile-menu__top{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,4vw,40px)} .mobile-menu__brand{display:flex;align-items:center;gap:12px} .mobile-menu__brand img{height:34px} .mobile-menu__brand span{font-family:var(--ff-display);font-weight:700;color:var(--header-text)} .mobile-menu__top-actions{display:flex;align-items:center;gap:10px} .mobile-menu__close{ width:44px;height:44px;border-radius:12px;border:1px solid var(--header-control-border); background:var(--header-control-bg);color:var(--header-control-text);font-size:22px;cursor:pointer; } .mobile-nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 clamp(24px,6vw,48px)} .mobile-nav__link{ font-family:var(--ff-display);font-weight:600;font-size:34px;color:var(--header-text); padding:10px 0;border-bottom:1px solid var(--line); } .mobile-menu__cta-wrap{padding:0 clamp(24px,6vw,48px) 40px} .mobile-menu__cta{ display:block;text-align:center;padding:16px;border-radius:14px; background:var(--grad);color:#fff;font-weight:600;font-size:16px; } /* ---- Light-mode exception: header over a photo/video hero ---- Pages whose top section is `.hero` (photo or video, always-dark overlay — see layout.css) need the un-scrolled, transparent header to keep its white text even in light mode, since it's still sitting on a backdrop that's forced dark regardless of theme. Once `.is-scrolled` kicks in (solid themed background), the normal light-mode tokens take over. Pages using `.page-hero` instead (solid var(--bg), themed) are unaffected — they get light-mode header text immediately, matching their own themed background. */ :root[data-theme="light"] .page:has(.hero) .site-header:not(.is-scrolled){ --header-text:#fff; --header-text-muted:rgba(255,255,255,.75); --header-control-bg:rgba(255,255,255,.08); --header-control-border:rgba(255,255,255,.22); --header-control-text:#fff; }