/* Theme Name: Hafen Author: hafenstudios Author URI: https://hafenstudios.com/ Description: Hafen is a block theme for content-led websites. It supports full site editing and includes block patterns for landing pages, posts, timelines and statistics, a magazine-style blog layout, 38 style variations that change colors, typography, shapes and density, a self-hosted variable font, custom colors and logo support, a sticky header with a skip link, and editor styles that match the front end. Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 7.4 Version: 1.1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: hafen Tags: blog, news, portfolio, one-column, grid-layout, block-styles, wide-blocks, full-site-editing, full-width-template, template-editing, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, style-variations, block-patterns */ /* ========================================================= HAFEN — Front-end + Editor supplemental styles. Das Meiste kommt aus theme.json. Hier nur, was theme.json (noch) nicht ausdrücken kann: Sticky-Header-Politur, Answer-Block-Styles, Reveal-Enhancement, Skip-Link. ========================================================= */ /* ---------- Grundlinie: box-sizing (Learning aus dem ersten Live-Einsatz: ohne border-box laufen Spalten mit Padding auf Mobilgeräten über) ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Defensiv gegen Fixbreiten aus Alt-Inhalten (typisch nach einem Umzug von einem Classic-Theme: .logo-container img{width:400px}). Ein solcher Overflow sprengte auf zwei Kundenseiten den Header samt Hamburger. clip statt hidden – hidden würde position:sticky im Header abschalten. */ html, body { overflow-x: clip; } /* Embed-Airbag (Praxis-Befund 48, flirtuniversity.de): Core deckelt nur Bilder auf 100%, nicht iframe/embed/object/video. Alt-Inhalte mit fixen Embed-Breiten (560px-YouTube-Boxen) spannen sonst mobile Grids auf und der Überstand fällt dem overflow-clip oben zum Opfer. */ .wp-block-post-content :is(iframe, embed, object, video) { max-width: 100%; } /* Vertikaler Rhythmus im Fließtext (Exzellenzrunde 1.0.0): Überschriften binden an den FOLGENDEN Absatz, nicht an den vorigen. Der uniforme blockGap kommt aus einer :where()-Regel ohne Spezifität, diese zwei Zeilen gewinnen sicher, und weil style.css auch Editor-Style ist, stimmt der Editor automatisch mit. */ .wp-block-post-content > :is(h2, h3, h4):not(:first-child) { margin-top: 2.75rem; } .wp-block-post-content > :is(h2, h3, h4) + * { margin-top: 0.75rem; } h1, h2, h3 { text-wrap: balance; } /* Grundlinie fuer native Controls: hell ist der Standard, die 8 dunklen Looks setzen per styles.css ihrer Variation color-scheme: dark. */ :where(body) { color-scheme: light; } /* Link- und Auswahl-Politur (Exzellenzrunde 1.0.0) */ a { text-underline-offset: 0.15em; } ::selection { background: var(--wp--preset--color--brand-light); } /* Formulare (Exzellenzrunde 1.0.0): Kommentarformular und Suche waren die letzten ungestylten Flaechen. Rahmen bewusst muted statt border, dieselbe WCAG-1.4.11-Logik wie beim Menue-Button weiter unten. */ :root { accent-color: var(--wp--preset--color--brand-dark); } .comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea, .wp-block-search__input { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--wp--preset--color--muted); border-radius: var(--wp--custom--radius--small, 12px); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font: inherit; } .comment-form input:focus, .comment-form textarea:focus, .wp-block-search__input:focus { border-color: var(--wp--preset--color--brand-dark); } /* Taktile Rueckmeldung beim Klick */ .wp-element-button:active { transform: translateY(1px); } /* Outline-Button-Hover: die :hover-Angabe einer Block-Style-Variation wird vom theme.json-Sanitizer verworfen, deshalb liegt der Hover hier. */ .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--brand-light); color: var(--wp--preset--color--brand-dark); } /* Deep-Verlauf: Vollton-Rueckfall fuer Browser ohne color-mix, sonst stuende weisser CTA-Text auf weissem Grund. */ .has-deep-gradient-background { background-color: var(--wp--preset--color--deep); } /* Header-CTA auf sehr schmalen Viewports ausblenden, der Menue-Button reicht. */ @media (max-width: 480px) { .hafen-header .hafen-header-cta { display: none; } } /* ---------- Skip-Link (a11y) ---------- */ .hafen-skip-link { position: absolute; left: -9999px; top: 12px; z-index: 300; background: var(--wp--preset--color--brand-dark); color: var(--wp--preset--color--base); padding: 11px 18px; border-radius: var(--wp--custom--radius--small, 12px); font-weight: 700; text-decoration: none; } .hafen-skip-link:focus { left: 12px; } /* ---------- Sichtbarer Tastaturfokus ---------- Der Browser-Default verschwindet auf farbigen Flächen. Zwei Ringe (Farbe + heller Absatz) sitzen auf hellem wie dunklem Grund. :is() statt :where(), damit die Regel Spezifität hat und nicht von der erstbesten Block-Regel ausgehebelt wird — ein Fokusring, den Core-CSS überschreiben kann, ist keine Grundlinie. */ :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--brand-dark); outline-offset: 2px; box-shadow: 0 0 0 4px var(--wp--preset--color--base); } /* ---------- Sticky header ---------- */ .hafen-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease; } /* Der Weichzeichner nur dort, wo :has() den Notausgang unten kennt. Ohne :has()-Unterstützung bleibt der Header ungefiltert — dann ist er auch nie Containing Block und das Mobilmenü kann gar nicht klemmen. Die Fläche ist zu 80 % deckend, der Verlust ist rein kosmetisch. */ @supports selector(:has(*)) { .hafen-header { -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); } } .hafen-header.is-scrolled { border-bottom-color: var(--wp--preset--color--border); box-shadow: var(--wp--preset--shadow--card); } .hafen-header { padding-block: 0.85rem; } /* Der Kopf klebt am Core-Wrapper, nicht an sich selbst: Core rendert jeden Template-Part in
, und der ist im Standard genau so hoch wie .hafen-header. position:sticky kann ein Element nie aus seinem Containing Block schieben, also scrollte der Kopf bis 1.0.0 schlicht mit. Deshalb klebt der Wrapper, aber nur, wenn er nichts als den Theme-Kopf enthält (:only-child): Websites mit eigenem Kopfaufbau (Förderleiste, Navigationsband) behalten ihr Verhalten. Eingeloggt sitzt die Admin-Leiste fest oben; darunter kleben. Unter 600 px scrollt die Leiste mit (Core setzt sie absolut), dann top:0. */ .wp-site-blocks > header.wp-block-template-part:has(> .hafen-header:only-child) { position: sticky; top: 0; z-index: 60; } .admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .hafen-header:only-child) { top: var(--wp-admin--admin-bar--height, 32px); } @media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .hafen-header:only-child) { top: 0; } } /* ---------- Sprungziele nicht unter dem Kopfbereich parken ---------- Ohne scroll-padding-top landet jeder Ankersprung hinter dem klebenden Header, auch der Skip-Link, also ausgerechnet die erste Handlung von Tastatur- und Screenreader-Nutzenden. Die Höhe ist je Website verschieden, weil sie am hochgeladenen Logo hängt (gemessen: Theme-Standard mit 56px-Logo rund 84px, eine Website mit 156x52-Logo rund 80px). Deshalb misst hafen.js den Header und schreibt den Ist-Wert nach --hafen-header-h; die Zahl hier ist nur der Rückfall ohne JavaScript. Ist der Header nicht klebend (per eigenem CSS auf position:static gesetzt, eine Theme-Option dafür gibt es nicht), setzt hafen.js die Variable auf 0 und die Regel ist wirkungslos. --hafen-scroll-offset (seit 0.9.1, auf :root setzen) ersetzt den Wert komplett. Bis 1.0.0 lag er zusätzlich als scroll-margin-top auf jedem [id]-Ziel im Inhalt, beides addierte sich zu rund 190 px. Eingeloggt kommt die Admin-Leiste dazu (Core setzt die Variable nur dann, sonst 0). style.css ist auch Editor-Style: im Editor-iframe gibt es keinen klebenden Kopf, dort bleibt der Wert aus. */ html:not(.block-editor-iframe__html) { scroll-padding-top: var(--hafen-scroll-offset, calc(var(--hafen-header-h, 84px) + var(--wp-admin--admin-bar--height, 0px) + 1rem)); } .hafen-header .hafen-brand { gap: 0.6rem; } .hafen-header .wp-block-site-title { margin: 0; } .hafen-header .wp-block-site-title a { font-weight: 900; letter-spacing: -.03em; text-decoration: none; color: var(--wp--preset--color--contrast); } /* ---------- Footer (neutral, per CSS gestylt) ---------- */ .hafen-footer { background: var(--wp--preset--color--deep); color: #b9c7cf; padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); } .hafen-footer .hafen-brand { gap: 0.6rem; margin-bottom: 0.9rem; } .hafen-footer .wp-block-site-title { margin: 0; } .hafen-footer .wp-block-site-title a { color: #fff; font-weight: 900; letter-spacing: -.03em; text-decoration: none; } .hafen-footer .wp-block-site-tagline { color: #8ea3ad; font-size: 0.95rem; margin: 0 0 1.5rem; max-width: 340px; } /* Kontrast: #7c9099 hielt 4,5:1 nur gegen sehr dunkle Fußzeilen (gegen den Preset-Standard #061620 sind es 5,52:1). Sobald jemand die Farbe "Deep" umfärbt, kippt der Wert: bei #223528 auf 3,92:1, also unter die Grenze von WCAG 1.4.3. #93a5ac hält denselben Blaugrau-Ton (Farbwinkel 197° statt 199°) und liegt gegen #223528 bei 5,11:1, gegen #061620 bei 7,19:1, gegen alle mitgelieferten Variationen bei 6,85:1 oder besser. Nachrechnen: launch-paket/theme-aenderungen/kontrast-nachrechnen.php */ .hafen-footer .hafen-footer-copy { margin: 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); color: #93a5ac; font-size: 0.85rem; } /* Der Credit ist sichtbar. Er stand bis 0.4.0 auf display:none — das Markup war da, der Absatz nicht, und wer ihn zeigen wollte, suchte lange. Wer ihn nicht will, löscht den Absatz unter Design > Editor > Fußbereich. Farben werden geerbt statt festgelegt, damit der Credit auch in einem hellen oder umgefärbten Fußbereich lesbar bleibt. */ .hafen-footer .hafen-footer-credit { margin: 0.4rem 0 0; color: inherit; opacity: .75; font-size: 0.8rem; } .hafen-footer .hafen-footer-credit a { color: inherit; text-decoration: underline; } .hafen-footer .hafen-footer-credit a:hover { opacity: 1; } .hafen-footer a { color: #cfe0e6; } .hafen-footer a:hover { color: #fff; } /* ---------- Mobile-Menü ---------- KRITISCH (zwei Kundenseiten): Ein backdrop-filter macht das Element zum Containing Block für position:fixed-Nachfahren. Das Core-Overlay (position:fixed; inset:0) richtete sich dadurch an der ~72px hohen Headerbox aus statt am Viewport — Menü unbenutzbar, Inhalt schien durch. Solange das Overlay offen ist, fällt der Filter deshalb weg und der Header verlässt seinen eigenen Stacking-Context. Die Hintergrundfarbe des Overlays selbst setzt der Navigation-Block (overlayBackgroundColor/overlayTextColor in parts/header.html) — ohne sie erbt Core "transparent". ---------- */ .hafen-header:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 100000; } .wp-site-blocks > header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) { z-index: 100000; } /* Gurt dazu (Praxis-Befund 9b/49): Ohne eigene Overlay-Farbe malt Core das offene Menü fest WEISS mit schwarzem Text (spezifischere Core-Regel als jede simple Fallback-Zeile). Auf dunklen Stilvarianten wie Nachtfahrt blitzt dann ein weißes Menü auf. Der Selektor spiegelt Cores Form, damit die Theme-Farben genau dort gewinnen, wo Cores Weiß-Default gilt, und nirgendwo sonst: Navigationen mit eigener Hintergrund- oder Overlay-Farbe (auch per Header-Part-Attribut) bleiben unberührt, ebenso Cores background-color:inherit für eingefärbte Navigationen. */ .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay) { background-color: var(--wp--preset--color--base, #fff); } .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.has-text-color):not(.disable-default-overlay) { color: var(--wp--preset--color--contrast, #000); } /* ---------- Menüsystem (1.1.0) ---------- Jede der acht bekannten Live-Installationen hatte das Overlay per eigenem CSS nachgebaut. Das hier ist der gemeinsame Nenner, gegen das Core-CSS von WP 7.1 nachgerechnet: kein !important, Spezifität so niedrig wie möglich (:where), damit Site-CSS mit einer Klasse mehr weiter gewinnt. Nur die Kinder-Liste braucht Cores (0,5,0). */ /* 1. Bruchkante 782 px statt Cores 600 px, nur im Kopf. Menüs mit fünf Punkten laufen sonst zwischen 600 und rund 1000 px über. Core zeigt ab 600 px das Desktop-Menü (0,3,0) und versteckt den Knopf (0,2,0), hier je eine Klasse mehr. overlayMenu "always" (hidden-by-default/always-shown) und "never" bleiben unberührt. */ @media (max-width: 781px) { .hafen-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .hafen-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } /* 2. Menüknopf als beschriftete Pille, wo immer Core ihn zeigt (auch bei overlayMenu "always"). Kein display hier, sonst stünde er ab 782 px wieder da. Rand brand-dark auf base: mindestens 5:1 in allen Looks (WCAG 1.4.11 verlangt 3:1). Label über --hafen-menu-label (functions.php). */ .hafen-header .wp-block-navigation__responsive-container-open { align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.35rem 0.8rem; border: 1.5px solid var(--wp--preset--color--brand-dark); border-radius: var(--wp--custom--radius--pill, 999px); background: var(--wp--preset--color--base); color: var(--wp--preset--color--brand-dark); transition: background-color .2s ease; } .hafen-header .wp-block-navigation__responsive-container-open:hover { background: color-mix(in srgb, var(--wp--preset--color--brand-dark) 10%, var(--wp--preset--color--base)); } /* Label nur neben dem Icon: bei "Icon anzeigen: aus" schreibt Core selbst ein Text-Label in den Knopf, sonst stünde dort "Menu Menu". */ .hafen-header .wp-block-navigation__responsive-container-open:has(svg)::after { content: var(--hafen-menu-label, "Menu"); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; } .hafen-header .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; } /* 3. Offenes Overlay: Zeilen über die volle Breite mit Haarlinie, große Labels, Kinder eingerückt an einer Linie, Schließen als 44-px-Kreis. Farben kommen vom Block (overlayBackgroundColor/overlayTextColor) oder aus dem Rückfall oben; alle Linien aus currentColor, damit sie auf jedem Look und auch bei fremden Overlay-Farben stimmen. Core liest --navigation-layout-justification-setting für align-items; "stretch" zieht die Zeilen auf volle Breite, auch bei rechts ausgerichteter Navigation (die ul setzt den Wert selbst, darum zweimal). */ .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { --navigation-layout-justification-setting: stretch; } .wp-block-navigation__responsive-container.is-menu-open { gap: 0; } .wp-block-navigation__responsive-container.is-menu-open :where(.wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item) { border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); } /* Tippziel über min-height, nicht über padding: Cores padding:0 im Overlay hat (0,4,0). */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; min-height: 52px; } .wp-block-navigation__responsive-container.is-menu-open :where(.wp-block-navigation__container > .wp-block-navigation-item) > .wp-block-navigation-item__content { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; } /* Elternpunkt ohne eigenes Ziel als Eyebrow. Core rendert ihn im Hover-Modus als ohne href, im Klick-Modus ("Untermenüs per Klick") als