/* ---------- BASE ---------- */ html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} } /* ---------- NAV ---------- */ header{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:32px 48px; mix-blend-mode:difference; transition:background-color .35s ease, backdrop-filter .35s ease, padding .35s ease; } header.scrolled{ background-color:rgba(254,255,249,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); mix-blend-mode:normal; border-bottom:1px solid rgba(25,25,25,0.06); } header svg{height:45px; width:auto; fill:var(--porcelain);} header.scrolled svg{fill:var(--carbon);} /* Homepage only: keep the logo a plain, fixed white over the photo hero, before scrolling. Once the white/frosted scrolled navbar appears, it still switches to dark via header.scrolled svg above, same as every other page — only the un-scrolled state gets the homepage-specific treatment here. Other pages keep the existing behavior untouched: header's own mix-blend-mode:difference makes the logo/nav/lang-switch auto-invert against whatever's behind the transparent header. A child element can't opt out of an ancestor's mix-blend-mode with its own CSS — the parent+children are composited as one group and blended against the backdrop as a unit — so the only way to exempt the logo is to remove the blend mode from the shared header ancestor itself (below) and re-apply it directly to just the two elements that still need the adaptive contrast (.nav-lang-wrap, .mobile-nav-toggle), both of which are logo siblings, not ancestors, so this doesn't touch the logo at all. body.home is the same homepage-scoping class already used elsewhere in this file (e.g. the scroll fade-in section). */ body.home header{mix-blend-mode:normal;} body.home .nav-lang-wrap, body.home .mobile-nav-toggle{mix-blend-mode:difference;} /* .nav-lang-wrap/.mobile-nav-toggle's own mix-blend-mode above is set independently of header's — resetting header.scrolled back to "normal" does nothing to these two, since each element's blend mode only governs how THAT element (and its own descendants) blends against its backdrop. Without this, the nav links inside .nav-lang-wrap keep auto-inverting via difference even once scrolled, despite the header itself correctly computing "normal" at that point. Only needed once scrolled — the un-scrolled homepage state still wants the difference blend above, to auto-invert against the full-bleed hero photo before any scrolling. */ body.home header.scrolled .nav-lang-wrap, body.home header.scrolled .mobile-nav-toggle{mix-blend-mode:normal;} nav{display:flex; gap:36px;} nav ul{ display:flex; gap:36px; list-style:none; margin:0; padding:0; } nav ul li{ list-style:none; margin:0; padding:0; } nav a{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--porcelain); font-weight:500; position:relative; padding-bottom:2px; } nav a.current{opacity:1; color:var(--ash);} nav a:not(.current){opacity:.7; transition:opacity .3s ease;} nav a:not(.current):hover{opacity:1;} header.scrolled nav a{color:var(--carbon);} header.scrolled nav a.current{color:var(--onyx);} /* Wraps