/* * JoNa | Software – Homepage Capability Strip (WS-5B) * --------------------------------------------------------------- * Darstellung der kompakten Capability-Leiste direkt unter dem Hero: * drei gleichwertige Kernfähigkeiten (Entwickeln · Verbinden · * Automatisieren). Seit WS-5B-Polish als integriertes, horizontales * Surface-Band (L1 `bg-muted`), keine schwebende Rounded-Box – der * Strip ist die Naht/Überleitung zwischen Hero und Seite. * * Inhalt: scripts/content/home-capability-strip.html (versioniertes * Block-Markup, per Marker-Append + Fingerprint-Upgrade durch * bootstrap.sh provisioniert). Diese Datei liefert ausschließlich das Styling. * * Verantwortung: * - design-system.css = Tokens (--jona-*), Referenz. * - home-capability-strip.css = Strip-Styling (diese Datei). * - Gutenberg = Group + ein atomarer wp:html-Block * (dokumentierte Analogie zur * Hero-Visual-Ausnahme, vgl. WS-4). * * Design-Richtung (WS-5B-Polish + WS-5B-Polish-2, Delta §5.2/§10): * - Band statt Box: volle Breite, `bg-muted`-Surface, feine Hairline * oben/unten (Sektionswechsel = Flächenwechsel, keine Kartenoptik). * - Grüne Badge-Icons (Kreis-Tint + Icon in `--jona-color-accent-strong`), * Titel auf `font-size-lg` -> in 1 Sekunde lesbar. * - WS-5B-Polish-2 (Referenz-North-Star): Icon-Motive auf die * Referenzsprache gehoben (Code `` · Kette · Zahnrad), Badge 40 px, * Desktop-Zeilen mit mehr Luft (72 px) – breiter integrierter * Übergang, keine isolierte kleine Box. * - Abstand zum Hero bewusst kompakt (Überleitung), darunter der volle * Section-Gap (112/72/56 px). * * Struktur (verifiziert): * .wp-block-group.jona-capability-strip * └─ (wp:html) * └─ .jona-capability-strip__bar (Band, Grid 3 Spalten) * ├─ a.jona-capability-strip__item (href="/leistungen/") * │ ├─ span.jona-capability-strip__icon-badge * │ │ └─ svg (aria-hidden, grün) * │ └─ div.jona-capability-strip__body * │ ├─ h2.jona-capability-strip__title * │ └─ span.jona-capability-strip__text * ├─ ... Verbinden ... * └─ ... Automatisieren ... * * Breakpoints FEST geschrieben (kein var() in @media – vgl. WS-4-Fix): * --jona-breakpoint-sm = 690px -> Mobile max-width: 689px * --jona-breakpoint-md = 1000px -> Desktop min-width: 1000px * * Version: 0.9.0 (WS-5B-Polish-2: Referenz-Icons Code/Kette/Zahnrad, * Badge 40 px, großzügigere Desktop-Zeilen) */ /* ------------------------------------------------------------------ * Sektion: Abstand zum Hero bewusst kompakt (Überleitung), nach unten * der volle Section-Gap (WS-5A, 4.1): Desktop 112 px, Tablet 72 px, * Mobile 56 px – der Strip trägt die Naht, nicht die Leere. */ .jona-capability-strip { padding-block: var(--jona-space-5) var(--jona-space-section-gap-lg); } @media (min-width: 690px) and (max-width: 999px) { .jona-capability-strip { padding-block: var(--jona-space-5) var(--jona-space-section-gap-md); } } @media (max-width: 689px) { .jona-capability-strip { padding-block: var(--jona-space-4) var(--jona-space-section-gap-sm); } } /* ------------------------------------------------------------------ * Band selbst: durchgehende Surface (L1 `bg-muted`) auf voller * Containerbreite mit feiner Hairline oben/unten. Kein runder Rand, * kein Schatten, keine Karten-/Box-Optik – ein Teil des Seitenflusses. */ .jona-capability-strip__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background-color: var(--jona-color-bg-muted); border-block: var(--jona-border-width) solid var(--jona-color-border); } /* ------------------------------------------------------------------ * Items: gleichwertige Bereiche, feine Divider dazwischen. * Spezifität muss die generische Link-Regel aus design-system.css * (`.entry-content a` => Linkfarbe + Unterstreichung) überschreiben. * Hover = dezenter Surface-Wechsel (L1 -> L0) innerhalb des Bands. */ .jona-capability-strip__bar .jona-capability-strip__item { display: flex; align-items: center; gap: var(--jona-space-3); padding: var(--jona-space-5) var(--jona-space-6); min-height: 72px; text-decoration: none; color: inherit; background-color: transparent; transition: background-color var(--jona-transition-fast); } .jona-capability-strip__item + .jona-capability-strip__item { border-inline-start: var(--jona-border-width) solid var(--jona-color-border); } .jona-capability-strip__item:hover, .jona-capability-strip__item:focus-visible { background-color: var(--jona-color-surface); } /* ------------------------------------------------------------------ * Icon: grünes Badge (Kreis-Tint + Icon in accent-strong). * Dekorativ (aria-hidden im Markup) – die Information steht als Text. */ .jona-capability-strip__icon-badge { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--jona-radius-full); background-color: var(--jona-color-accent-tint); } .jona-capability-strip__icon-badge svg { width: 24px; height: 24px; color: var(--jona-color-accent-strong); } /* ------------------------------------------------------------------ * Text-Inhalte: kurze Überschrift (H2, deutlicher) + eine Zeile Text. * Titel auf `font-size-lg` – der Strip ist in 1 Sekunde lesbar. */ .jona-capability-strip__body { display: flex; flex-direction: column; gap: var(--jona-space-1); min-width: 0; } .jona-capability-strip__title { margin: 0; font-size: var(--jona-font-size-lg); font-weight: var(--jona-font-weight-semibold); line-height: var(--jona-line-height-tight); color: var(--jona-color-ink); overflow-wrap: normal; hyphens: auto; } .jona-capability-strip__text { font-size: var(--jona-font-size-sm); line-height: 1.45; color: var(--jona-color-text-secondary); overflow-wrap: normal; hyphens: auto; } /* ------------------------------------------------------------------ * Tablet (690–999 px): 3 Schmalspalten – seitliche Luft reduzieren und * Typo eine Stufe leiser, damit Titel/Text nicht gequetscht umbrechen. * Muss NACH den Basisregeln stehen (gleiche Spezifität, Datei-Reihenfolge). */ @media (min-width: 690px) and (max-width: 999px) { .jona-capability-strip__bar .jona-capability-strip__item { padding-inline: var(--jona-space-4); padding-block: var(--jona-space-4); } .jona-capability-strip__title { font-size: var(--jona-font-size-base); } .jona-capability-strip__text { font-size: var(--jona-font-size-xs); } } /* ------------------------------------------------------------------ * Mobile (<690 px): NICHT drei Elemente quetschen – 1 Spalte, volle * Breite; Divider werden horizontal; kompakt und gut lesbar bleiben. */ @media (max-width: 689px) { .jona-capability-strip__bar { grid-template-columns: minmax(0, 1fr); } .jona-capability-strip__bar .jona-capability-strip__item { border-inline-start: none; padding-inline: var(--jona-space-4); padding-block: var(--jona-space-4); } .jona-capability-strip__item + .jona-capability-strip__item { border-block-start: var(--jona-border-width) solid var(--jona-color-border); } } /* ------------------------------------------------------------------ * Accessibility & Reduced Motion * - Der globale :focus-visible-Ring aus design-system.css greift. * - Globales prefers-reduced-motion (design-system.css) setzt * Transitionen auf Minimum; hier keine Animation als Information. */ @media (prefers-reduced-motion: reduce) { .jona-capability-strip *, .jona-capability-strip *::before, .jona-capability-strip *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }