/** * Nordplast — Site Header * * Sticky, transparent-over-hero by default, switches to a solid white * background once scrolled (class .is-scrolled, added by js/header.js) * or immediately on pages with no hero (class .no-hero on , set * per-template — see BRICKS-HEADER-FOOTER.md). */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 100; height: 80px; display: flex; align-items: center; background-color: transparent; transition: background-color var(--transition-medium), box-shadow var(--transition-medium); } .site-header.is-scrolled, .no-hero .site-header { background-color: var(--color-white); box-shadow: 0 1px 0 var(--color-border); } .site-header__inner { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } @media (min-width: 1024px) { .site-header__inner { padding-inline: var(--space-4); } } .site-header__logo { display: flex; align-items: center; } .site-header__logo img { height: 32px; width: auto; } /* ---- Desktop nav --------------------------------------------------- */ .site-nav { display: none; } @media (min-width: 1024px) { .site-nav { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0; padding: 0; } .site-nav a { color: var(--color-white); font-weight: var(--font-weight-medium); position: relative; transition: color var(--transition-medium); } .site-header.is-scrolled .site-nav a, .no-hero .site-nav a { color: var(--color-text); } .site-nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background-color: currentColor; transition: width var(--transition-fast); } .site-nav a:hover::after, .site-nav a:focus-visible::after { width: 100%; } } /* ---- Actions: language switcher, CTA, mobile toggle ----------------- */ .site-header__actions { display: flex; align-items: center; gap: var(--space-3); } .lang-switcher { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); } .lang-switcher__link { color: var(--color-white); opacity: 0.7; padding: var(--space-1); transition: opacity var(--transition-fast), color var(--transition-medium); } .site-header.is-scrolled .lang-switcher__link, .no-hero .lang-switcher__link { color: var(--color-text); } .lang-switcher__link:hover, .lang-switcher__link:focus-visible, .lang-switcher__link[aria-current="true"] { opacity: 1; } .lang-switcher__divider { opacity: 0.4; color: var(--color-white); } .site-header.is-scrolled .lang-switcher__divider, .no-hero .lang-switcher__divider { color: var(--color-text); } /* CTA button in the header keeps .btn--primary as-is (Primary Button component) — no header-specific override needed. */ /* Mobile nav toggle (hamburger) */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; color: var(--color-white); cursor: pointer; } .site-header.is-scrolled .nav-toggle, .no-hero .nav-toggle { color: var(--color-text); } @media (min-width: 1024px) { .nav-toggle { display: none; } } .nav-toggle__icon { position: relative; width: 24px; height: 2px; background-color: currentColor; display: block; transition: background-color var(--transition-fast); } .nav-toggle__icon::before, .nav-toggle__icon::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background-color: currentColor; transition: transform var(--transition-fast), top var(--transition-fast); } .nav-toggle__icon::before { top: -8px; } .nav-toggle__icon::after { top: 8px; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon { background-color: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 0; transform: rotate(-45deg); } /* ---- Mobile off-canvas menu ------------------------------------------ */ .mobile-nav__backdrop { position: fixed; inset: 0; z-index: 98; background-color: rgba(26, 29, 33, 0.5); opacity: 0; pointer-events: none; transition: opacity var(--transition-medium); } .mobile-nav__backdrop.is-open { opacity: 1; pointer-events: auto; } .mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99; width: min(85vw, 360px); background-color: var(--color-white); transform: translateX(100%); transition: transform var(--transition-medium); overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; } .mobile-nav.is-open { transform: translateX(0); } .mobile-nav__header { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); } .mobile-nav__close { width: 44px; height: 44px; background: none; border: none; color: var(--color-text); cursor: pointer; } .mobile-nav__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; } .mobile-nav__link { display: block; padding: var(--space-2) 0; font-size: 1.25rem; font-weight: var(--font-weight-medium); color: var(--color-text); border-bottom: 1px solid var(--color-border); } .mobile-nav__footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } @media (min-width: 1024px) { .mobile-nav, .mobile-nav__backdrop { display: none; } }