/* ============================================================ THE HUMAN ELEMENT — SHARED CHROME Nav, footer, buttons, section headers, CTA band, page header. Used by every page. ============================================================ */ /* Progressive-enhancement fade-in for images: only applies once the js-fade-images class (set by the inline script in ) is present, so a JS failure leaves images at their normal opacity instead of hiding them. */ html.js-fade-images img { opacity: 0; background-color: var(--he-grey-light); transition: opacity 0.4s ease; } html.js-fade-images img.is-loaded { opacity: 1; background-color: transparent; } /* .hero__sculpture already has its own entrance animation (heFadeUp, in tokens.css) that fades and slides it up in sync with the rest of the hero. Layering the generic fade-in on top made it play twice and look jerky, so let the existing animation own opacity for this element. */ html.js-fade-images img.hero__sculpture { opacity: 1; background-color: transparent; transition: none; } .site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px clamp(20px, 5vw, 40px); border-bottom: 1.5px solid var(--he-ink); position: sticky; top: 0; z-index: 20; background: var(--he-white); } .site-nav__logo { height: 40px; width: auto; } /* margin-left:auto pulls the links off the logo and over to the right, so they sit as a group beside the language switch rather than centred. */ .site-nav__links { display: flex; flex-wrap: wrap; margin-left: auto; gap: clamp(18px, 2.4vw, 32px); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; } .site-nav__links a { text-decoration: none; color: var(--he-ink); padding: 8px 0; transition: color var(--dur-base) var(--ease-standard); } .site-nav__links a:hover { color: var(--he-orange); } .site-nav__links a.is-current { color: var(--he-orange); } .site-nav__lang { display: inline-flex; border: 1.5px solid var(--he-ink); overflow: hidden; font-size: 11px; font-weight: 600; } .site-nav__lang a { padding: 5px 12px; cursor: pointer; text-decoration: none; color: var(--he-ink); } .site-nav__lang a.is-active { background: var(--he-ink); color: var(--he-white); } .site-nav__lang a.is-active:hover { color: var(--he-white); } /* Mobile nav toggle — pure CSS "checkbox hack": the checkbox is invisible, its