/** * Header als Milchglas über dem Titelbild * * Alle Regeln hängen unter body.wf-glas.wf-glas-hero. inc/header-glas.php * setzt wf-glas, wenn das Modul aktiv ist (WF_GLAS_LIVE oder Vorschau-Schalter * ?wf_glas=1), und wf-glas-hero, wenn die Seite mit einem Titelbild beginnt. * * Zustände am html-Element * wf-glas-js JavaScript läuft (gesetzt im head). * wf-glas-top Die Seite steht ganz oben. Nur dann ist der Header Glas. * * Aufbau * 1. Variablen * 2. Titelbild reicht unter den Header * 3. Header als Glas * 4. Megamenü-Panel als Glas * 5. Reduzierte Bewegung * * Rückfälle * Ohne JavaScript, ohne :has() oder ohne das Modul bleibt alles wie bisher: * weißer Header, Abstandhalter unter dem Header. * Ohne backdrop-filter ist der Header oben fast deckend weiß. * * !important steht nur an drei Stellen, jeweils kommentiert: Der Header hat * seine weiße Fläche über eine Farbklasse des Blocks, die selbst !important * setzt, und das Titelbild hat Mindesthöhe und Innenabstand als Inline-Stil. */ /* ------------------------------------------------------------------ 1. Variablen ------------------------------------------------------------------ */ body.wf-glas.wf-glas-hero { --wf-glas-weiss: rgba(255, 255, 255, 0.7); /* Header oben */ --wf-glas-filter: blur(16px) saturate(1.5); --wf-glas-offen: rgba(255, 255, 255, 0.96); /* Panel und Header bei offenem Panel. So deckend, dass auch ohne gezeichneten Weichzeichner nichts Scharfes hinter den Links durchscheint */ --wf-glas-offen-filter: blur(22px) saturate(1.4); --wf-glas-ohne-filter: rgba(255, 255, 255, 0.92); /* Rückfall ohne backdrop-filter */ --wf-glas-linie: rgba(255, 255, 255, 0.55); /* feine helle Linie an der Unterkante */ --wf-glas-dauer: 0.25s; } /* Alles Weitere nur in Browsern mit :has(). Ohne bleibt der heutige Zustand. */ @supports selector(:has(*)) { /* ------------------------------------------------------------------ 2. Titelbild reicht unter den Header Der Abstandhalter des Themes entfällt. Dafür bekommt das Titelbild oben die Header-Höhe als zusätzlichen Innenabstand und wird um dieselbe Höhe größer. Überschrift und Schaltflächen bleiben so an ihrer Stelle, der Rest der Seite auch. Die Header-Höhe steht in --wf-glas-h, gesetzt direkt hinter dem Header und danach von assets/js/header-glas.js gepflegt. ------------------------------------------------------------------ */ html.wf-glas-js body.wf-glas.wf-glas-hero:has(main > .wp-block-post-content:first-child > :is(.wp-block-cover.alignfull, .hero-section):first-child) .header-spacer { display: none; } html.wf-glas-js body.wf-glas.wf-glas-hero main > .wp-block-post-content:first-child > :is(.wp-block-cover.alignfull, .hero-section):first-child { /* !important, weil der Block seinen Innenabstand als Inline-Stil tragen kann */ padding-top: calc(var(--wf-glas-hero-pad, 1em) + var(--wf-glas-h, 0px)) !important; } html.wf-glas-js body.wf-glas.wf-glas-hero.wf-glas-hero-min main > .wp-block-post-content:first-child > :is(.wp-block-cover.alignfull, .hero-section):first-child { /* !important, weil der Block seine Mindesthöhe als Inline-Stil trägt */ min-height: calc(var(--wf-glas-hero-min) + var(--wf-glas-h, 0px)) !important; } /* ------------------------------------------------------------------ 3. Header als Glas Das Glas liegt auf einem Pseudo-Element und nicht auf dem Header selbst. Ein Element mit backdrop-filter schirmt seine Nachfahren von der Seite dahinter ab, das Megamenü-Panel könnte sie dann nicht mehr weichzeichnen. ::after ist vom Megamenü belegt (Abdunkelung), deshalb ::before. Das transform des Headers bleibt unberührt, es ist der Bezugsrahmen für das Panel und das Mobil-Overlay. ------------------------------------------------------------------ */ body.wf-glas.wf-glas-hero .site-header { transition: transform 0.3s ease, background-color var(--wf-glas-dauer) ease; } body.wf-glas.wf-glas-hero .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; box-sizing: border-box; border-bottom: 1px solid var(--wf-glas-linie); background-color: var(--wf-glas-ohne-filter); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--wf-glas-dauer) ease, visibility 0s linear var(--wf-glas-dauer), background-color var(--wf-glas-dauer) ease; } /* Oben: Die weiße Fläche des Headers weicht, die Glasebene erscheint. */ html.wf-glas-top body.wf-glas.wf-glas-hero .site-header { /* !important, weil die Farbklasse des Blocks (has-background-background-color) Weiß mit !important setzt */ background-color: transparent !important; } html.wf-glas-top body.wf-glas.wf-glas-hero .site-header::before { opacity: 1; visibility: visible; transition-delay: 0s; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body.wf-glas.wf-glas-hero .site-header::before { background-color: var(--wf-glas-weiss); -webkit-backdrop-filter: var(--wf-glas-filter); backdrop-filter: var(--wf-glas-filter); } } /* ------------------------------------------------------------------ 4. Megamenü-Panel als Glas Oben ist das offene Panel ebenfalls Glas, aber fast deckend, damit die Linkliste über jedem Foto ruhig und lesbar bleibt, auch wenn ein Browser den Weichzeichner nicht zeichnet. Der Header zieht auf dieselbe Deckkraft, beide bilden eine Fläche. Gescrollt gilt wieder megamenu.css. ------------------------------------------------------------------ */ @media (min-width: 769px) { @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body.wf-glas.wf-glas-hero .site-header .nur-desktop .wp-block-navigation__container > .wp-block-navigation-submenu > .wf-mm-panel { transition: opacity var(--wf-mm-fast, 0.22s) ease, transform var(--wf-mm-slow, 0.3s) var(--wf-mm-ease, ease), background-color var(--wf-glas-dauer) ease; } html.wf-glas-top body.wf-glas.wf-glas-hero .site-header .nur-desktop .wp-block-navigation__container > .wp-block-navigation-submenu > .wf-mm-panel { background-color: var(--wf-glas-offen); -webkit-backdrop-filter: var(--wf-glas-offen-filter); backdrop-filter: var(--wf-glas-offen-filter); } /* Die Linkzeilen erben im Core die Fläche des Panels und lägen sonst als zweite, deckendere Schicht darüber */ body.wf-glas.wf-glas-hero .site-header .nur-desktop .wp-block-navigation__container > .wp-block-navigation-submenu > .wf-mm-panel > .wp-block-navigation-item { background-color: transparent; } /* Ohne html.wf-glas-top: Gescrollt ist die Glasebene unsichtbar, sie trägt die Werte trotzdem schon. Beim Wechsel zwischen oben und gescrollt ändert sich so nur ihre Sichtbarkeit und nicht zugleich die Farbe (siehe die Regeln zum Schalten weiter unten). */ body.wf-glas.wf-glas-hero .site-header:has(.nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"])::before { background-color: var(--wf-glas-offen); -webkit-backdrop-filter: var(--wf-glas-offen-filter); backdrop-filter: var(--wf-glas-offen-filter); } } /* Wechsel zwischen oben und gescrollt bei offenem Panel: Die Glasebene wird geschaltet statt überblendet. Die Abdunkelung des Megamenüs springt bei diesem Wechsel sofort hinter das Glas oder unter den Header. Während einer Überblendung läge sie über der weißen Fläche, das Glas wäre noch durchsichtig, und der Header blitzte grau auf. Zurück nach oben steht das Glas deshalb sofort. Beim Wegscrollen bleibt es stehen, bis die weiße Fläche darunter deckt. Die Farbe überblendet weiter wie in Abschnitt 3, sie wechselt nur noch beim Öffnen und Schließen des Panels. Ohne offenes Panel gilt Abschnitt 3. */ body.wf-glas.wf-glas-hero .site-header:has(.nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"])::before { transition: opacity 0s linear var(--wf-glas-dauer), visibility 0s linear var(--wf-glas-dauer), background-color var(--wf-glas-dauer) ease; } html.wf-glas-top body.wf-glas.wf-glas-hero .site-header:has(.nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"])::before { transition: opacity 0s, visibility 0s, background-color var(--wf-glas-dauer) ease; } /* Die Abdunkelung des Megamenüs beginnt sonst erst unter dem Header. Oben reicht sie bis an den Seitenanfang und liegt hinter dem Glas, damit Header und Panel denselben Hintergrund sehen und keine Kante zwischen beiden entsteht. */ html.wf-glas-top body.wf-glas.wf-glas-hero .site-header::after { top: 0; z-index: -2; } } /* ------------------------------------------------------------------ 5. Reduzierte Bewegung ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { body.wf-glas.wf-glas-hero { --wf-glas-dauer: 0.01s; } } }