/* Theme Name: STRYKE Base Theme URI: https://www.strykemarketing.de Description: Basis-Theme von STRYKE Marketing — Hello-Elementor-Child mit Design-System, Theme-Cockpit und Branchen-Blueprints. Voll editierbar in Elementor Pro. Author: STRYKE Marketing Author URI: https://www.strykemarketing.de Template: hello-elementor Version: 1.12.0 Requires at least: 6.1 Tested up to: 6.9 Requires PHP: 8.0 Update URI: https://updates.strykehub.com/stryke-base License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: stryke-base Tags: elementor, child-theme, business, blocks */ /* ========================================================================== 1. Design-Tokens — Rückfallwerte ACHTUNG: Die Werte hier sind nur das Sicherheitsnetz. Im Betrieb erzeugt inc/class-design-system.php diesen Block aus den Cockpit-Einstellungen und hängt ihn NACH dieser Datei ein — dort gesetzte Werte gewinnen also. Was hier steht, greift, wenn das Inline-CSS nicht durchkommt (aggressives Caching-Plugin, CSS-Datei isoliert geladen). Die Werte entsprechen deshalb exakt Settings::defaults(); laufen sie auseinander, springt die Seite beim Laden sichtbar um. NIE gegen einen Hex-Wert stylen, immer gegen die Variable — der Kunde ändert die Farben im Cockpit, und ein fester Wert bricht dann aus dem Schema aus. ========================================================================== */ :root { /* Markenfarben — Flächen, Rahmen, Grafik */ --stryke-primary: #189ba7; /* Cyan */ --stryke-accent: #ea6b00; /* Orange */ --stryke-success: #22c55e; /* Grün */ --stryke-highlight: #eab308; /* Gold */ --stryke-dark: #0a0c10; --stryke-light: #b0d4e8; /* Dieselben Farben als RGB-Tripel für Transparenzen: background: rgb(var(--stryke-primary-rgb) / 12%); */ --stryke-primary-rgb: 24 155 167; --stryke-accent-rgb: 234 107 0; --stryke-success-rgb: 34 197 94; --stryke-highlight-rgb: 234 179 8; --stryke-dark-rgb: 10 12 16; --stryke-light-rgb: 176 212 232; /* Typografie — abgeschrieben aus Fonts::available(), nicht geschätzt. Inter liegt als .woff2 im Theme; Monospace ist die Systemschrift, weil das Theme keine eigene Monospace ausliefert und ein Name, den niemand laden kann, nur eine Schrift behauptet, die nirgends ankommt. */ --stryke-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --stryke-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --stryke-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; /* Layout */ --stryke-content-width: 1200px; --stryke-radius: 8px; /* Abstufungen — bewusst wenige, damit Sektionen einen gemeinsamen Rhythmus haben statt beliebiger Werte pro Baustein. */ --stryke-space-xs: 0.5rem; --stryke-space-sm: 1rem; --stryke-space-md: 2rem; --stryke-space-lg: 4rem; --stryke-space-xl: 6rem; } /* Rollen-Variablen je Modus. Nur diese drehen sich zwischen hell und dunkel — die Markenfarben bleiben gleich. Das Attribut setzt DesignSystem::add_theme_attribute() am -Element. `*-ink` ist die kontrastgeprüfte Variante einer Markenfarbe für TEXT auf der jeweiligen Fläche. Die Primärfarbe erreicht auf Weiß nur rund 3,4:1 und ist damit für Fließtext zu schwach — als Fläche hinter weißer Schrift dagegen einwandfrei. Deshalb zwei Variablen statt einer. Im Betrieb rechnet PHP die Werte aus den Kundenfarben aus; hier stehen sie für die Vorgabefarben. Die Werte unten sind ABGESCHRIEBEN von DesignSystem::build_css() mit Settings::defaults() — nicht von Hand gewählt. Wer an der Ableitung in role_declarations() etwas ändert, muss sie hier nachziehen, sonst springt die Seite beim Laden sichtbar um. Nachrechnen: wp eval 'echo ( new \StrykeBase\DesignSystem() )->build_css();' Bei den VORGABEFARBEN ist `--stryke-on-primary` Weiß, und das geht nur, weil die Fläche darunter nicht die rohe Markenfarbe ist: `--stryke-primary-fill` dunkelt sie so weit ab, dass Weiß sicher 4,5:1 erreicht. Cyan selbst trüge Weiß nur mit 3,3:1 — und Schwarz zwar mit 5,9:1, sähe darauf aber aus wie ein Warnschild. Deshalb wandert die Fläche, nicht die Schrift. BEI KUNDENFARBEN KANN SIE SCHWARZ SEIN, und darauf darf sich niemand festlegen: Eine helle Marke (Creme, Sand) wird nicht abgedunkelt — sie würde dabei unkenntlich —, dort ist dunkle Schrift richtig. `on-primary` wird deshalb aus der fertigen Fläche nach Leuchtdichte gewählt, nicht gesetzt. Die Fläche wird gegen ZWEI Dinge gerechnet: gegen die Schrift darauf (4,5:1) und gegen die Seite darunter (3:1, WCAG 1.4.11). Die zweite Prüfung fehlte bis 1.11.0 — eine fast weiße Marke blieb dann unverändert und verschwand auf einer weißen Seite. Steht in DesignSystem::surface(). FÜR TEXT AUF DER MARKE also immer das Paar `--stryke-primary-fill` + `--stryke-on-primary` nehmen, nie `--stryke-primary` + Weiß. */ /* Jede Rollenfarbe steht zusätzlich als RGB-Tripel da. Das ist kein Beiwerk: Nur damit lässt sich eine halbdurchsichtige Fläche bauen, die sich MIT DEM MODUS dreht — `rgb(var(--stryke-bg-rgb) / 40%)`. Der Schleier über einem Hero-Foto muss im Dunkelmodus abdunkeln und im Hellmodus aufhellen, damit die Textfarbe darauf trägt. Wer stattdessen zu einer Markenfarbe greift (`--stryke-dark-rgb`), bekommt in einem der beiden Modi unlesbaren Text. */ :root, [data-theme="light"] { color-scheme: light; accent-color: #137c86; --stryke-bg: #ffffff; --stryke-bg-rgb: 255 255 255; --stryke-bg-alt: #ebebeb; --stryke-bg-alt-rgb: 235 235 235; --stryke-text: #0a0c10; --stryke-text-rgb: 10 12 16; --stryke-text-muted: #606164; --stryke-text-muted-rgb: 96 97 100; --stryke-border: #d1d1d1; --stryke-border-rgb: 209 209 209; --stryke-primary-ink: #137c86; --stryke-primary-ink-rgb: 19 124 134; --stryke-accent-ink: #bb5600; --stryke-accent-ink-rgb: 187 86 0; --stryke-primary-fill: #137c86; --stryke-primary-fill-rgb: 19 124 134; --stryke-accent-fill: #bb5600; --stryke-accent-fill-rgb: 187 86 0; --stryke-on-primary: #f7fafc; --stryke-on-primary-rgb: 247 250 252; --stryke-on-accent: #f7fafc; --stryke-on-accent-rgb: 247 250 252; } [data-theme="dark"] { color-scheme: dark; accent-color: #137c86; --stryke-bg: #0a0c10; --stryke-bg-rgb: 10 12 16; --stryke-bg-alt: #1e1f23; --stryke-bg-alt-rgb: 30 31 35; --stryke-text: #f7fafc; --stryke-text-rgb: 247 250 252; --stryke-text-muted: #a4a7a9; --stryke-text-muted-rgb: 164 167 169; --stryke-border: #36383b; --stryke-border-rgb: 54 56 59; --stryke-primary-ink: #189ba7; --stryke-primary-ink-rgb: 24 155 167; --stryke-accent-ink: #ea6b00; --stryke-accent-ink-rgb: 234 107 0; --stryke-primary-fill: #137c86; --stryke-primary-fill-rgb: 19 124 134; --stryke-accent-fill: #bb5600; --stryke-accent-fill-rgb: 187 86 0; --stryke-on-primary: #f7fafc; --stryke-on-primary-rgb: 247 250 252; --stryke-on-accent: #f7fafc; --stryke-on-accent-rgb: 247 250 252; } /* ========================================================================== 2. Grundformatierung Bewusst schlank. Hello Elementor liefert den Reset, Elementor Pro das Layout. Was hier steht, ist das Sicherheitsnetz: eine Seite OHNE Elementor Pro muss lesbar bleiben statt weiß zu werden. ========================================================================== */ body { background-color: var(--stryke-bg); color: var(--stryke-text); font-family: var(--stryke-font-body); /* Text darf beim Zoomen umbrechen und mitwachsen — feste px-Größen am Body übersteuern die Schriftgröße des Browsers und sind ein Barrierefreiheits-Fehler. */ font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--stryke-font-heading); color: var(--stryke-text); line-height: 1.2; /* Lange zusammengesetzte Wörter (Öffnungszeiten, Dienstleistungen …) sprengen sonst auf Mobilgeräten das Layout. */ overflow-wrap: break-word; } a { color: var(--stryke-primary-ink); } a:hover, a:focus { color: var(--stryke-accent-ink); } code, pre, kbd { font-family: var(--stryke-font-mono); } hr { border: 0; border-top: 1px solid var(--stryke-border); } /* Bilder skalieren mit, statt den Container zu sprengen. */ img, svg, video { max-width: 100%; height: auto; } /* ========================================================================== 3. Barrierefreiheit ========================================================================== */ /* Der Fokus MUSS sichtbar sein. Wer ihn ausblendet, sperrt Tastaturnutzer aus. :focus-visible zeigt ihn nur bei Tastaturbedienung, nicht bei Mausklick. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--stryke-accent); outline-offset: 2px; border-radius: 2px; } /* Sprunglink zum Inhalt. Markup UND Grundverhalten liefert Hello Elementor bereits (header.php + .screen-reader-text). Hier wird nur die sichtbare Form an die Marke angepasst — der Parent zeigt ihn in Grau auf Hellgrau. Kein eigener Sprunglink und keine eigene Screenreader-Klasse: beides gäbe es dann doppelt. */ .skip-link.screen-reader-text:focus { background-color: var(--stryke-primary); color: var(--stryke-on-primary); border-radius: 0 0 var(--stryke-radius) 0; font-family: var(--stryke-font-body); font-weight: 500; } /* Bewegung reduzieren, wenn das System danach fragt. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 4. Layout-Hilfen ========================================================================== */ /* Inhaltsbreite für Bereiche außerhalb von Elementor (Archive, Suche, 404). */ .stryke-container { width: 100%; max-width: var(--stryke-content-width); margin-inline: auto; padding-inline: var(--stryke-space-sm); } /* Abgesetzte Fläche, z. B. für wechselnde Sektionen. */ .stryke-surface-alt { background-color: var(--stryke-bg-alt); } /* Mobile first: erst ab Tablet mehr Luft an den Rändern. Die Breakpoints entsprechen den Standardwerten von Elementor, damit Theme und Editor nicht an verschiedenen Stellen umbrechen. */ @media (min-width: 768px) { .stryke-container { padding-inline: var(--stryke-space-md); } }