/* ============================================================ NAV — fix am oberen Rand, schrumpft beim Scrollen ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: var(--nav-py) var(--nav-px); transition: padding var(--dur-slow) var(--ease); } /* Hintergrund der Leiste: hinter Logo und Menü-Button deckendes Weiß, darunter ein kurzer Verlauf ins Nichts. Beides mit leichtem Backdrop-Blur, damit der durchlaufende Inhalt an der Kante weich wird. Ganz oben ist die Ebene ausgeblendet — dort liegt noch der große Hero-Verlauf (siehe hero.css). */ .nav::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(100% + var(--nav-fade)); /* Nicht ganz deckend, damit der Blur dahinter sichtbar wird. */ background: var(--nav-veil); /* Die Maske blendet Weiß UND Blur gemeinsam aus — sonst hätte der Blur unten eine harte Kante. */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--nav-fade)), transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--nav-fade)), transparent 100%); opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); } .nav__inner { position: relative; /* über dem Verlauf */ z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav__brand { display: flex; align-items: center; } .nav__logo-wp { height: var(--nav-logo-h); transition: height var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); } .nav__divider { width: 1px; height: var(--nav-divider-h); margin-inline: 32px; background: var(--line); transition: height var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); } .nav__logo-talents { width: var(--nav-talents-w); transition: width var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); } /* ---------- Gescrollter Zustand ---------- Die Klasse sitzt auf , damit auch der Hero-Verlauf darauf reagieren kann. */ .is-scrolled .nav { --nav-py: var(--nav-py-sm); --nav-logo-h: var(--nav-logo-h-sm); --nav-talents-w: var(--nav-talents-w-sm); --nav-divider-h: var(--nav-divider-h-sm); } .is-scrolled .nav::before { opacity: 1; } /* ---------- Über farbigen Sektionen ---------- Läuft die Leiste über eine Sektion mit [data-nav-theme="brand"], dreht sie ins Gegenteil: der Schleier nimmt das talents-Rot auf, Logos und Menü-Button werden weiß. nav.js setzt dafür data-nav-theme auf . */ [data-nav-theme="brand"] .nav::before { background: var(--nav-veil-brand); } [data-nav-theme="brand"] .nav .logo { background-color: var(--white); } [data-nav-theme="brand"] .nav__divider { background: rgba(255, 255, 255, 0.4); } [data-nav-theme="brand"] .nav__burger { background: var(--white); } [data-nav-theme="brand"] .nav__burger:hover { background: var(--surface-soft); } [data-nav-theme="brand"] .nav__burger span { background: var(--brand); } /* ---------- Menü-Button ---------- Die Striche sind untereinander rechtsbündig; die Gruppe selbst sitzt mittig im Kreis. Der Innenabstand ist deshalb aus Kreis- und Strichbreite gerechnet — ein fester Wert würde nur bei einer Größe aufgehen und die Striche sonst aus der Mitte schieben. Andere Größen setzen nur --burger-size. */ .nav__burger { --burger-size: 52px; --burger-bar: 24px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; flex: none; width: var(--burger-size); height: var(--burger-size); padding-inline: calc((var(--burger-size) - var(--burger-bar)) / 2); border-radius: var(--radius-pill); background: var(--brand); transition: background-color var(--dur-slow) var(--ease); } .nav__burger:hover { background: var(--brand-dark); } .nav__burger span { display: block; height: 2px; width: var(--burger-bar); border-radius: var(--radius-pill); background: var(--white); transition: width var(--dur) var(--ease), background-color var(--dur-slow) var(--ease); } .nav__burger span:nth-child(2) { width: 16px; } .nav__burger:hover span:nth-child(2) { width: var(--burger-bar); }