/* ============================================================ pz.slapstick.be — Design Tokens KaboomNet Slapstick Design System Das Fundament: Schriftdeklarationen und Custom Properties. Sonst nichts — keine Selektoren, die Elemente treffen. Diese Datei laedt JEDE Seite der Site als erstes, auch die generierten. Deshalb stehen die @font-face-Blocks hier und nicht in base.css: die Schriften gelten ueberall, der Reset der Startseite nicht. Aendern von Werten hier wirkt site-weit. Neue Farben gehoeren als Token hierher, nicht als Hex ins Stylesheet. Ladereihenfolge: index.html tokens → base → chrome → main server.html tokens → chrome → eigenes Inline-CSS mods.html tokens → chrome → eigenes Inline-CSS ============================================================ */ /* ============================================================ Schriften — self-hosted, kein CDN VT323 Peter Hull, 2011 — SIL Open Font License 1.1 Bangers Project Authors, 2010 — SIL Open Font License 1.1 Lizenztexte liegen als OFL-VT323.txt und OFL-Bangers.txt neben den Dateien. Beide deklarieren KEINEN Reserved Font Name, Weitergabe und Aenderung sind damit unbeschraenkt. Warum nicht ueber fonts.googleapis.com: der CDN-Weg uebertraegt die IP jedes Besuchers an einen Drittanbieter — auf einer oeffentlichen EU-Domain ein reales Risiko — und kostet zwei zusaetzliche Verbindungsaufbauten, von denen einer das Rendern blockiert. Die Pfade sind relativ zu DIESER Datei, nicht zum Dokument. Dadurch gelten sie unveraendert, egal in welcher Verzeichnistiefe die einbindende HTML-Datei liegt. Je Schrift zwei Schnitte: latin deckt Deutsch vollstaendig ab, latin-ext faengt die osteuropaeischen Zeichen in Mod-Namen und Autorennamen ab. Der Browser laedt nur, was die Seite tatsaechlich braucht. ============================================================ */ @font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/vt323-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/vt323-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bangers-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bangers-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Flaechen: drei Ebenen, keine ad-hoc Dunkelwerte ---- */ --bg-deepest: #0A0A0A; /* Seitenhintergrund */ --bg-board: #111111; /* Primaere Flaechen, Header */ --bg-elevated: #1A1A1A; /* Karten, Panels, Modals */ /* --- Akzente ------------------------------------------- */ --accent-orange: #C9761B; /* Primaeraktion, Links, Fokus */ --accent-gold: #CAAD4D; /* Sekundaer, Badges, Zahlen */ --terminal-green: #8FA85A; /* Status OK, Erfolg */ /* --- Linien und Text ----------------------------------- */ --border: #2B2D2C; --text: #e8e8e4; --muted: #9a9a94; /* 6.4:1 auf bg-deepest — AA erfuellt */ /* --- Transparente Ableitungen -------------------------- Fuer Hover-Flaechen. Nie den Hintergrund ueber bg-elevated aufhellen — stattdessen den Akzent mit geringer Deckkraft darueberlegen. */ --accent-orange-08: rgba(201, 118, 27, 0.08); --accent-orange-16: rgba(201, 118, 27, 0.16); --accent-orange-40: rgba(201, 118, 27, 0.40); /* --- Typografie ---------------------------------------- Umstieg auf self-hosted Fonts: die @font-face-Blocks in base.css eintragen und den in den HTML-Dateien entfernen. Die Stacks hier bleiben unveraendert. */ --font-mono: 'VT323', ui-monospace, 'Cascadia Mono', Consolas, monospace; --font-display: 'Bangers', var(--font-mono); /* Fluid Type Scale — skaliert mit dem Viewport. VT323 laeuft optisch klein, daher der hoehere Grundwert. */ --step--1: clamp(0.94rem, 0.90rem + 0.20vw, 1.06rem); --step-0: clamp(1.13rem, 1.06rem + 0.32vw, 1.31rem); --step-1: clamp(1.35rem, 1.24rem + 0.53vw, 1.69rem); --step-2: clamp(1.62rem, 1.44rem + 0.88vw, 2.19rem); --step-3: clamp(1.94rem, 1.66rem + 1.39vw, 2.81rem); --step-4: clamp(2.33rem, 1.90rem + 2.14vw, 3.63rem); --step-5: clamp(2.80rem, 2.15rem + 3.24vw, 4.69rem); /* --- Abstaende: 8pt-Raster ----------------------------- */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; /* --- Layout -------------------------------------------- */ --wrap: 1180px; /* Maximale Inhaltsbreite */ --header-height: 56px; /* Schmal. Wert wird von main.css und scroll-margin-top geteilt */ --tap: 44px; /* Minimales Touch-Target (WCAG) */ /* --- Motion -------------------------------------------- Nichts ueber 300ms ohne Grund. */ --t-fast: 120ms; --t-base: 180ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- Elevation ---------------------------------------- Slapstick kennt keine weichen Schatten. Tiefe entsteht durch harte Kante und Versatz. */ --shadow-hard: 0 2px 0 0 var(--bg-deepest); }