/* ========================================================================== socialthink.ch — Design-Token Alle Farb-, Schrift- und Abstandswerte stehen ausschliesslich hier. Varianten lassen sich so testen, ohne andere Dateien anzufassen. ========================================================================== */ :root { /* ---- Markenfarben ------------------------------------------------------ --c-magenta ist der exakte Bestandston der alten Seite (Logo + Theme). --c-petrol ist die neue Sekundaerfarbe. --c-slate und --c-pflaume sind daraus abgeleitete Bindeglieder: Slate ist entsaettigtes Petrol, Pflaume liegt farblich zwischen Magenta und Petrol. Die *-deep Varianten sind fuer Text und Hover auf hellem Grund gedacht: reines #ff007b erreicht als Text auf Weiss die AA-Schwelle nicht. */ --c-magenta: #ff007b; --c-magenta-deep: #c2005e; --c-petrol: #00707a; --c-petrol-deep: #004e56; --c-slate: #3e5257; --c-slate-deep: #2b3a3e; --c-pflaume: #7a3f6b; --c-pflaume-deep: #6b3560; /* ---- Neutrale ---------------------------------------------------------- */ --c-ink: #1a1d1f; --c-ink-soft: #5a5f63; --c-paper: #fbfaf8; --c-paper-alt: #f2efea; --c-line: #dcd6cd; /* ---- Semantische Rollen (hell) ----------------------------------------- */ --bg: var(--c-paper); --bg-alt: var(--c-paper-alt); --fg: var(--c-ink); --fg-soft: var(--c-ink-soft); --rule: var(--c-line); --on-area: #ffffff; /* Bereichsfarbe. Wird pro Seite ueber eine Klasse am ueberschrieben, im WordPress-Theme spaeter aus einem ACF-Farbfeld gespeist. */ --area: var(--c-magenta); --area-deep: var(--c-magenta-deep); /* ---- Schrift ------------------------------------------------------------ Entschieden: Variante A aus typografie.html. Inter fuer Logo, Navigation, Labels und Metadaten, Libertinus Serif fuer Lead, Fliesstext und Publikationstitel. Source Serif 4 stand hier, solange der Entscheid offen war. Sie ist jetzt aus dem Stack genommen: sie wandert nicht ins Theme, und eine Rueckfallebene, deren Datei dort fehlt, waere eine Luege im Code. Faellt Libertinus aus, greift Georgia. */ --ff-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --ff-serif: "Libertinus Serif", Georgia, "Times New Roman", serif; /* Libertinus hat eine kleine x-Hoehe und braucht darum mehr Groesse und mehr Durchschuss als eine uebliche Web-Serif. */ --fs-body: clamp(1.15rem, 1.05rem + 0.42vw, 1.3125rem); /* 18.4 – 21 px */ --fs-lead: clamp(1.35rem, 1.15rem + 0.85vw, 1.75rem); --fs-h1: clamp(2rem, 1.6rem + 1.9vw, 3rem); --fs-h2: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem); --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); --fs-meta: 0.8125rem; --fs-nav: 0.875rem; --lh-body: 1.65; --lh-tight: 1.15; /* ---- Abstaende (4-px-Raster) ------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* ---- Layout ------------------------------------------------------------ */ --w-page: 74rem; --w-text: 32em; /* em-basiert: bleibt bei jedem Schriftgrad ~64 Zeichen */ /* Einzug der Inhaltsspalte gegenueber Titel und Ueberschriften. Traegt das versetzte Raster der Unterseiten. */ --einzug: clamp(0rem, 6vw, 5.5rem); /* ---- Bewegung ---------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur: 420ms; --dur-slow: 680ms; } /* ---- Bereichsfarben ------------------------------------------------------ --area Flaechenfarbe im Ruhezustand --area-deep Text und Hover auf hellem Grund, kippt im Dunkelmodus --area-open Flaeche des aufgeklappten Koerpers. Bewusst fest und in beiden Farbschemata dunkel: darauf steht weisser Text in normaler Groesse, und #ff007b erreicht dafuer nur 3.8:1 statt 4.5:1. */ .area-beratung { --area: var(--c-magenta); --area-deep: var(--c-magenta-deep); --area-open: #a80052; } .area-sozialforschung { --area: var(--c-petrol); --area-deep: var(--c-petrol-deep); --area-open: #004e56; } .area-about { --area: var(--c-slate); --area-deep: var(--c-slate-deep); --area-open: #2b3a3e; } .area-gedanken { --area: var(--c-pflaume); --area-deep: var(--c-pflaume-deep); --area-open: #4d2747; } /* ---- Dunkelmodus --------------------------------------------------------- Nur die semantischen Rollen kippen, die Markenfarben bleiben identisch. Magenta und Petrol werden auf dunklem Grund leicht aufgehellt, damit sie nicht zulaufen. */ @media (prefers-color-scheme: dark) { :root { --bg: #16191b; --bg-alt: #1f2427; --fg: #ece8e2; --fg-soft: #a1a6a9; --rule: #343a3d; --c-magenta-deep: #ff3d99; --c-petrol-deep: #35a3ad; --c-slate-deep: #8fa5aa; } /* Die Flaechenfarben werden leicht angehoben: Petrol und vor allem das entsaettigte Slate laufen sonst gegen den fast schwarzen Grund zu. --area-open bleibt unveraendert dunkel, es traegt weissen Text. */ .area-beratung { --area: #ff007b; --area-deep: #ff3d99; } .area-sozialforschung { --area: #0b8792; --area-deep: #35a3ad; } .area-about { --area: #5f7a80; --area-deep: #8fa5aa; } .area-gedanken { --area: #9d5c8c; --area-deep: #c286b4; } }