/* ========================================================================= Meldekopf — Theme "ASB" Arbeiter-Samariter-Bund Deutschland e. V., Corporate Design 2023 Quelle: ./ASB Design System/colors_and_type.css und README.md ------------------------------------------------------------------------- Ebene 1 der Token-Architektur. Setzt ausschliesslich --brand-*. Wird VOR _base.css geladen. Ein zweites Theme (DRK, JUH, Feuerwehr, neutral) muss exakt dieselbe Tokenliste setzen und sonst nichts. Fehlt ein Token, bricht das Layout. ========================================================================= */ /* ------------------------------------------------------------------------- Schriften: BEIDE self-hosted. Zwei Gruende, beide zwingend: 1. Datenschutz. Ein Aufruf an fonts.googleapis.com uebertraegt die IP der Einsatzkraft an Google. Die oeffentliche Check-in-Seite wird ohne Einwilligung aufgerufen, das ist fuer eine Hilfsorganisation nicht tragbar (siehe Epic E12). 2. WeasyPrint. Im PDF-Rendering ist @import auf ein CDN unzuverlaessig. Der Abschlussbericht braucht die Fonts lokal. Pfade sind relativ zu static/css/tokens/, also zwei Ebenen hoch. Quelle der TTF-Dateien: "ASB Design System/fonts/", Konvertierung nach woff2 in TICK-002, statische Schnitte in TICK-035. STATISCHE SCHNITTE, keine variable Schrift. WeasyPrint 69 verwirft den Bereich "font-weight: 100 900" als ungueltigen Wert und rendert Fett und Kursiv danach synthetisch: verschmierte Konturen statt der gezeichneten Schnitte. Gemessen am erzeugten PDF, die Schriftbeschreibung wies fuer Regular und Bold dieselbe Strichstaerke aus. Ein Bericht, der so nach aussen geht, ist nicht mehr im CI. Ausserdem laedt der Browser nur die Schnitte, die eine Seite wirklich braucht, statt zweimal 800 kB. ------------------------------------------------------------------------- */ @font-face { font-family: 'Noto Sans'; src: url('../../fonts/NotoSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans'; src: url('../../fonts/NotoSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Serif'; src: url('../../fonts/NotoSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Serif'; src: url('../../fonts/NotoSerif-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Kursiv nur in Serif und nur in einer Staerke: gebraucht wird sie ausschliesslich fuer den Satz, mit dem ein leerer Berichtsabschnitt begruendet wird. Weitere Schnitte kommen dazu, wenn sie gebraucht werden. */ @font-face { font-family: 'Noto Serif'; src: url('../../fonts/NotoSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } :root { /* --- Markenidentitaet ------------------------------------------------ */ --brand-name: 'ASB'; /* ABSOLUT, nicht relativ. Ein url() innerhalb einer CSS-Variablen wird gegen die Adresse des DOKUMENTS aufgeloest und nicht gegen die der Datei, in der die Variable steht. Relativ zeigte der Pfad je nach Seitentiefe woandershin: unter /einsaetze/1/bericht/versandprotokoll/ landete er bei /logos/... und lieferte 404, das Logo fehlte in der ganzen Oberflaeche. Gemessen im Browser, gefunden in TICK-036. Die Schriftpfade oben bleiben relativ: ein direktes url() in einem Stylesheet wird gegen das Stylesheet aufgeloest und ist damit richtig. */ --brand-logo: url('/static/logos/asb-logo-kurz.svg'); --brand-claim: 'Wir helfen hier und jetzt.'; /* --- Kernfarben ------------------------------------------------------ */ --brand-accent: #E30613; /* ASB-Rot */ --brand-accent-dark: #C60511; /* Hover, -8 % */ --brand-accent-darker: #A9040E; /* Active, -16 % */ --brand-stage: #FFEE00; /* ASB-Gelb, Markenbuehne */ --brand-dark: #2D2D46; /* ASB-Anthrazit */ /* --- Text ------------------------------------------------------------ */ --brand-fg: #2D2D46; /* 13.3:1 auf Weiss */ --brand-fg-muted: #5E5E72; /* 6.3:1 auf Weiss */ --brand-fg-subtle: #8A8A99; /* 3.4:1 — nur fuer Nichttext, siehe unten */ --brand-fg-on-accent: #FFFFFF; /* 4.9:1 auf ASB-Rot */ --brand-fg-on-stage: #2D2D46; /* 11.1:1 auf ASB-Gelb */ /* --- Flaechen und Linien --------------------------------------------- */ --brand-bg-soft: #FAFAF7; /* warmes Off-White */ --brand-rule: rgba(45, 45, 70, 0.15); --brand-rule-strong: rgba(45, 45, 70, 0.35); /* --- Typografie ------------------------------------------------------ */ --brand-font-sans: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; --brand-font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif; --brand-ls-headline: 0.1em; /* die ASB-Signatur: +10 pt Laufweite */ } /* ========================================================================= Kontrastnotizen — gepruefte Werte, nicht raten ------------------------------------------------------------------------- Anthrazit auf Weiss 13.33:1 AAA Standardtext Anthrazit auf Gelb 11.10:1 AAA Text auf der Markenbuehne fg-muted auf Weiss 6.33:1 AA Sekundaertext ASB-Rot auf Weiss 4.88:1 AA Linktext, knapp ueber der Grenze Weiss auf ASB-Rot 4.88:1 AA Primaerbutton, knapp ueber der Grenze ASB-Rot auf Gelb 4.06:1 -- NUR ab 24 px oder 19 px fett (3:1). Gilt fuer den Claim, nicht fuer UI. ASB-Gelb auf Weiss 1.20:1 -- Niemals Text. Nur Flaeche. fg-subtle auf Weiss 3.40:1 -- Kein Text. Nur Icons und Trenner. Konsequenz fuer die App: - Gelb ist Flaeche, nie Schrift. - Rot auf Gelb nur im Claim und im Berichtskopf, nie in Bedienelementen. - Primaerbutton hat 4.88:1. Das reicht fuer AA, aber nicht mit Graufilter bei Sonne. Deshalb bekommt jeder Primaerbutton zusaetzlich ein Icon und mindestens 64 px Hoehe, damit er nicht nur ueber Farbe erkennbar ist. ========================================================================= */