3defacto Frontend-System / Styleguide
data-site

Navigation

Band, Header, Flyout, Mobile-Drawer und Footer mit Bereichswechsel. Alle vier Sites aus src/data/sites.json. Partials in src/templates/partials/.

Band und Header je Site

Gleiches Logo überall. Die Kennzeichnung sitzt im Band mit ausgeschriebenem Namen: dunkle Stufe der Bereichsfarbe (-ink) mit weißer Schrift, Anthrazit für die Dachmarke. Das Logo bleibt sauber 3defacto. Rechts im Band zwei Servicelinks und ein kleiner Rückweg zur Gruppe als reiner Link; der vollständige Wechsel sitzt im Footer und im Mobile-Menü. Die Sprachumschaltung steht nicht im Band, sondern als letztes Element der Hauptnavigation: ein Haarstrich, dahinter nur die Zielsprache. Das Flyout ist nach dem Benchmark RLS gehalten: zweizonig über den Tonwert, links eine Klartextliste ohne Beschreibungen, rechts Kontaktspalte mit Motiv und Textlinks. Der Einstieg ist der erste Listeneintrag; trägt das erste Kind dieselbe Adresse wie der Menüpunkt, liefert es die Beschriftung, sonst steht dort „Übersicht". Zwei Spalten erst ab acht Einträgen. Beim Scrollen fällt das Band weg, der Header wird kompakt, eine 3px-Linie in Bereichsfarbe bleibt und das Kürzel (EDS, IPS, WAM) erscheint am Logo als Sekundärform. Aktiver Navigationspunkt mit Linie in Bereichsfarbe. Flyouts öffnen nur per Klick oder Tastatur, nie per Hover; ein anderer Menüpunkt wechselt direkt, Escape und Klick außerhalb schließen.

Engineering Design Services

Mobile Drawer

Unter 64rem. Enthält Bereichsname ausgeschrieben, Hauptnavigation als Akkordeon, CTA, Sprache und den vollständigen Bereichswechsel. Fokusfalle, Escape schließt, Scroll-Lock. Hier statisch dargestellt (Beispiel EDS).

Footer mit Bereichswechsel

Der vollständige Wechsel zwischen Dachmarke und Geschäftsbereichen sitzt im Footer. Jede Kachel trägt ihren Farbbalken (--division-bright), die aktuelle Site ist markiert. Auf Anthrazit ist Schrift nur in Weiß oder Silber zulässig, Bereichsfarbe erscheint nur als Balken.