/* * Designsystem "Schwarz & Praezision" - Werner Management. * * DIE einzige Stelle, an der Farben, Schriftfamilien und Masse definiert * werden. Genutzt von der Agenturseite, von jeder generierten Creator-Seite * UND vom Config-Tool (das sich diese Datei ueber config-tool/tokens.css.php * von der Hauptdomain holt). * * Design anpassen: docs/05-design-anpassen.md * * Die Leitidee: Das Management ist schwarzweiss, die Farbe gehoert den * Creatorn. Deshalb ist die gesamte Skala unten neutral - der einzige farbige * Wert im System ist --accent, und den waehlt jeder Creator fuer seine eigene * Seite selbst. Er wird auf Creator-Seiten durch die generierte theme.css * ueberschrieben, die IMMER als letztes Stylesheet geladen wird. * * WICHTIG fuer abgeleitete Werte: Alles, was sich auf --accent bezieht, muss * mit color-mix() zur Laufzeit gerechnet werden (siehe --accent-ghost). Ein * fest eingetragener Hex-Wert wuerde der Creator-Ueberschreibung NICHT folgen. */ :root { /* --- Farbschema -------------------------------------------------------- Ohne diese Zeile rendert der Browser saemtliche NATIVEN Bedienelemente im Hellmodus: der Knopf des Datei-Feldes wird hellgrau mit englischer Beschriftung, Scrollbalken und Autofill-Hintergrund bleiben hell, und der Standard-Placeholder kommt in einem Grau, das auf --wm-600 nur 3.59:1 erreicht (WCAG 1.4.3 verlangt 4.5:1). Eine Zeile, vier Probleme. */ color-scheme: dark; /* --- Graustufen ------------------------------------------------------- Bewusst minimal kuehl gestimmt (Blau eine Spur ueber Rot), nicht neutral grau: Die Flaechen sollen technisch-architektonisch wirken. Und weil auf ihnen die frei gewaehlten Akzentfarben der Creator liegen, muss der Grund farblich zurueckhaltend genug sein, dass jede Farbe darauf klingt. Die Kontrastwerte sind gegen #000 gerechnet, nicht geschaetzt. */ --wm-black: #000000; /* Seitengrund */ --wm-900: #070708; /* abgesetzte Sektion */ --wm-800: #0D0E0F; /* Flaeche, angeschnittene Wortmarke im Hero */ --wm-700: #141517; /* erhoeht, Hover */ --wm-600: #1D1F21; /* Eingabefeld */ --wm-line: #26282B; /* Haarlinie */ --wm-line-hi: #3A3D41; /* betonte Linie, Hover-Rahmen */ --wm-500: #6E7276; /* 4.3:1 - NUR dekorativ/deaktiviert, nie Text */ --wm-400: #9DA1A6; /* 8.1:1 - Marginalien, Meta */ --wm-200: #D6D8DA; /* 14.7:1 - Lead */ --wm-white: #F7F8F9; /* 19.75:1 - Haupttext */ --wm-pure: #FFFFFF; /* 21:1 - Emphase, aktiver Zustand */ /* --- Akzent ----------------------------------------------------------- Standard ist ein neutrales Fast-Weiss: Eine Creator-Seite ohne eigene Farbwahl bleibt monochrom und markenkonform. Farbe entsteht erst durch eine bewusste Entscheidung des Creators. */ --accent: #F0F1F2; /* Zweite Akzentfarbe. Der Rueckfall ist die ERSTE Farbe, nicht ein eigener Wert: Alles, was mit zwei Farben rechnet (Verlaeufe auf Schaltflaechen, zweifarbige Icons, Rahmen), wird damit ohne weitere Fallunterscheidung einfarbig, solange der Creator keine zweite Farbe gewaehlt hat. Die generierte theme.css setzt sie nur dann, wenn es sie gibt (Theme::css). */ --accent-2: var(--accent); --on-accent-2: var(--on-accent); /* Semantische Farbe fuer Fehlerzustaende - bewusst getrennt vom Akzent, den jeder Creator frei waehlt. Ein Fehler darf nicht in dessen Farbe erscheinen. */ --wm-danger: #E06C7D; /* Dasselbe fuer "in Ordnung" und "wartet" - der Status im Editor (veroeffentlicht / in Pruefung). */ --wm-success: #4ADE80; --wm-warning: #F5B14C; --accent-ghost: color-mix(in srgb, var(--accent) 12%, transparent); --on-accent: var(--wm-black); /* Text auf einer Akzentflaeche */ /* --- Schrift ---------------------------------------------------------- Die @font-face-Bloecke stehen in fonts.css. Hier stehen nur die Namen - damit sie ueber den bestehenden Token-Proxy auch auf der Config-Subdomain ankommen, selbst wenn dort die Binaerdateien einmal fehlen sollten. Dann faellt es sauber auf system-ui zurueck. */ --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Schriftgroessen -------------------------------------------------- Laufweite ist groessenabhaengig, nie ein Wert fuer alle Groessen: Grosse Displayzeilen brauchen negatives Tracking, kleine Versalien positives. Genau das greift die Kompaktheit der Wortmarke auf. */ --t-hero: clamp(2.5rem, 7.2vw, 6.25rem); --t-h1: clamp(2.25rem, 5.5vw, 4.25rem); --t-h2: clamp(1.75rem, 3.6vw, 2.75rem); --t-h3: clamp(1.125rem, 1.6vw, 1.375rem); --t-lead: clamp(1.0625rem, 1.5vw, 1.3125rem); --t-body: 1rem; --t-small: 0.875rem; --t-meta: 0.75rem; --tr-hero: -0.045em; --tr-h1: -0.035em; --tr-h2: -0.03em; --tr-h3: -0.02em; --tr-meta: 0.14em; /* --- Abstaende -------------------------------------------------------- In rem, damit das Layout mit der Textgroesse des Nutzers mitwaechst. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --section-y: clamp(4rem, 8.5vw, 7.5rem); --gutter: clamp(1.25rem, 5vw, 3rem); /* --- Breiten ---------------------------------------------------------- --maxw steuert ausschliesslich .wrap und gilt fuer die Creator-Linkpages. Die Agenturseite bringt ihre eigene Breite in site.css mit - wuerde man --maxw dafuer aufweiten, wuerden alle Linkpages mitwachsen. */ --maxw: 640px; --maxw-site: 1180px; --maxw-prose: 66ch; /* --- Formen ----------------------------------------------------------- Kein Pill-Radius: Der Vollkreis wuerde die Schaerfe des "w" verwaessern. --r-cut ist die Signatur der Marke - drei weiche Ecken, eine scharfe, genau die Dualitaet der Wortmarke. Sie wird sparsam eingesetzt, nicht auf jeden Block gestempelt. */ /* Begrenzung von Eingabefeldern. BEWUSST nicht --wm-line: das erreicht gegen die Feldfuellung nur 1.12:1, gegen den Seitengrund 1.42:1 - das Feld haette damit keine wahrnehmbare Kante im Sinne von WCAG 1.4.11 (3:1). --wm-500 erreicht 3.41:1 gegen die Fuellung und 4.33:1 gegen Schwarz. Genau dafuer ist der Wert gedacht: dekorativ tragend, nie Text. */ --field-line: var(--wm-500); --r-field: 10px; --r-card: 18px; --r-lg: 24px; --r-cut: 18px 18px 18px 0; /* --- Bewegung --------------------------------------------------------- Die Kurve stammt aus der Formanalyse: praezise anlaufen, weich ausklingen - der Uebergang von der Diagonale in den Bogen. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 160ms; --dur-2: 260ms; --dur-3: 420ms; /* --- Rueckwaertskompatible Aliasse ------------------------------------ Aeltere Regeln in base.css und form.css sprechen diese Namen an. Sie bleiben bestehen, damit nichts stillschweigend bricht. */ --bg: var(--wm-black); --surface: var(--wm-800); --fg: var(--wm-white); --fg-muted: var(--wm-400); --border: var(--wm-line); --radius: var(--r-field); --space: var(--s-4); } /* * Mehr Kontrast angefordert: Haarlinien werden zu klar sichtbaren Rahmen, * Nebentext rueckt naeher an Weiss. */ @media (prefers-contrast: more) { :root { --wm-line: #4A4E52; --wm-line-hi: #6E7276; --wm-400: #C2C6C9; --wm-200: #ECEDEE; /* Muss eigens angehoben werden: --wm-line liegt hier bei 1.97:1 gegen die Feldfuellung, verfehlt 1.4.11 also auch im Hochkontrastmodus. 4.04:1. */ --field-line: #7A7E82; } }