/* Operetta Mortis — Prequel · Agathe Design System * * Source: /Users/michaelkainz/Desktop/games/assets/design/styles.css * Eingebunden: 2026-05-27 als Fundament für CODE_BRIEF (Decoder-Re-Build, * Archiv-Umbau, Manuskript-Tab). * Author of tokens: Agathe Agricola · The Digioneer · 1. Juni 2026 * * ── Ästhetik ────────────────────────────────────────────────────────── * „Wiener Archiv trifft forensisches Terminal" * • Papier-Welt (Buch + Archiv): --paper, Stockflecken, Stempel * • Terminal-Welt (Decoder): --term, --cyan, Scanlines * • Roter Stempel (--stamp): ENTZIFFERT, Seitennummern, IDs * * ── Hinweis zur Schriften ───────────────────────────────────────────── * Cinzel, Cormorant Garamond, Special Elite und JetBrains Mono sind * bereits über Google Fonts im von index.html geladen. * Hier setzen wir nur die CSS-Variablen, die Komponenten konsumieren. */ :root { /* Paper / warm ground */ --paper: #ede4d0; --paper-2: #e3d8c0; --paper-3: #d6c8ab; --ink: #1a1410; --ink-2: #3a2f24; --ink-3: #6b5a46; --ink-4: #9a876d; /* Digital overlay */ --term: #0d0c0a; --term-2: #1a1712; --cyan: #34d3c1; --cyan-dim: #1a8074; --cyan-glow: rgba(52, 211, 193, 0.18); /* Accent: red-lead / archive stamp */ --stamp: #a63d2a; --stamp-2: #c25138; --seal: #6b2418; /* Typo — bewusst NICHT mit `var(--ff-*)` aus bestehenden Tokens * überschrieben. Bestehende Foundation/Brand-Klassen behalten ihre * eigenen Schriften-Token; diese hier gelten nur, wenn explizit * im neuen Decoder / Archiv / Manuskript referenziert. */ --ff-display: 'Cinzel', 'Trajan Pro', serif; --ff-serif: 'Cormorant Garamond', 'EB Garamond', Garamond, serif; --ff-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; --ff-type: 'Special Elite', 'Courier Prime', 'Courier New', monospace; /* Grain / texture */ --noise: url("data:image/svg+xml;utf8,"); } /* ── Utility backgrounds ───────────────────────────────────────────── */ .ag-bg-paper { background: radial-gradient(ellipse at 30% 20%, rgba(255, 250, 230, 0.4), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(107, 36, 24, 0.08), transparent 50%), var(--paper); background-blend-mode: multiply; position: relative; } .ag-bg-paper::after { content: ''; position: absolute; inset: 0; background-image: var(--noise); opacity: 0.5; pointer-events: none; mix-blend-mode: multiply; } .ag-bg-term { background: var(--term); background-image: linear-gradient(rgba(52,211,193,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(52,211,193,0.03) 1px, transparent 1px); background-size: 24px 24px; position: relative; } .ag-bg-term::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px); pointer-events: none; } /* ── Type helpers ──────────────────────────────────────────────────── */ .ag-font-display { font-family: var(--ff-display); letter-spacing: 0.08em; } .ag-font-serif { font-family: var(--ff-serif); } .ag-font-mono { font-family: var(--ff-mono); } .ag-font-type { font-family: var(--ff-type); } /* ── Reusable components ───────────────────────────────────────────── */ .ag-stamp { display: inline-block; border: 2px solid var(--stamp); color: var(--stamp); padding: 4px 10px; font-family: var(--ff-type); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; transform: rotate(-3deg); opacity: 0.85; } .ag-stamp-round { width: 78px; height: 78px; border: 2px solid var(--stamp); border-radius: 50%; color: var(--stamp); display: flex; align-items: center; justify-content: center; font-family: var(--ff-type); font-size: 9px; letter-spacing: 0.15em; text-align: center; line-height: 1.2; transform: rotate(-8deg); opacity: 0.75; text-transform: uppercase; } .ag-kicker { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3); } .ag-kicker-term { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cyan); } /* Hide scrollbars inside artboards */ .ag-no-scrollbar::-webkit-scrollbar { display: none; } .ag-no-scrollbar { scrollbar-width: none; } /* * ── ENTWICKLUNGS-NOTIZ ──────────────────────────────────────────────── * Alle Klassennamen sind mit `ag-` (Agathe) präfixt, um Kollisionen mit * dem bestehenden Brand-System zu vermeiden (`.stamp`, `.kicker` etc. * existieren potenziell schon im alten Cremegrund-/Holzschnitt-Layer). * Wenn das neue System die alten Klassen ablöst, wird der Präfix in * einer späteren Phase wieder entfernt. */