/* ============================================================================ STIG ROCK, DESIGN TOKENS ---------------------------------------------------------------------------- Quelle: BRAND-GUIDE.md (Business Edition Vol. 01, 2026) und stigrock-design/assets/css/stigrock-brand.css Verbindliche Vorgaben der Marke, die hier abgebildet sind: · Genau drei Markenfarben: Carbon Black, Classic White, Business Grey · Kupfer ist der EINZIGE Akzent und nie eine Flaechenfarbe · Eine einzige Schrift: Montserrat (400 / 600 / 700) · Kein Border-Radius, keine Schatten, keine Verlaeufe · Muted-Text auf Hell nutzt Taupe, nicht Business Grey (Kontrast) Farben werden ausschliesslich hier definiert. Weder base.css noch die Folien enthalten feste Farbwerte. ========================================================================== */ :root { /* ---- Markenfarben (offiziell) ---------------------------------------- */ --carbon-black: #0A0A0A; --classic-white: #FAF7F2; --business-grey: #A6A4A9; /* ---- Erweiterung aus dem Layout des Brand Guide ----------------------- */ --copper: #B8956F; --copper-deep: #8B5A4A; --ink: #2C2419; --taupe: #6B5D4F; /* ---- Schrift ---------------------------------------------------------- */ /* Montserrat fuer Latein und Kyrillisch; fuer Arabisch/Urdu, Hebraeisch, Griechisch, Hindi, Bengalisch, Tamil und Thai springen passende Webschriften ein, fuer Chinesisch die Systemschrift. */ --font: "Montserrat", "Manrope", "Noto Kufi Arabic", "Heebo", "Poppins", "Hind Siliguri", "Hind Madurai", "Prompt", system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Yu Gothic", "Meiryo", "Hiragino Sans", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK JP", "Noto Sans CJK KR", sans-serif; /* ---- Buehne ----------------------------------------------------------- */ --stage-w: 1920px; /* 922: als Laenge (px). Ohne Einheit wurde jede Regel mit var(--stage-w) ungueltig, sobald js/stage.js den Wert nicht gesetzt hatte */ --stage-h: 1080; --pad-x: 88px; /* Seitenrand, auf allen 40 Folien gleich */ /* ---- Typo-Skala (bezogen auf die 1920er Buehne) ----------------------- Genau VIER Schriftgroessen fuer Text, damit die Praesentation ruhig und einheitlich wirkt und auf dem Beamer aus der letzten Reihe lesbar bleibt: 1 Headline 64px 2 Zwischentitel 34px (Kartentitel, Tabellenkopf, kleine Zahlen) 3 Lesetext 22px (jeder Fliesstext, Listen, Tabellenzellen) 4 Label 16px (Eyebrow, Kennzeichen, Fussnote, Achsen) Dazu zwei Display-Groessen nur fuer Kennzahlen und Titelfolien. */ /* Fassung 917: alle Stufen eine bis zwei Groessen groesser (Beamer, letzte Reihe). Vorher 64 / 34 / 22 / 16, Kennzahlen 96 / 56. */ --fs-1: 72px; --fs-2: 38px; --fs-3: 26px; --fs-4: 19px; --fs-stat: 110px; --fs-stat-sm: 64px; /* Fassung 919: GROESSE ALLER UEBERSCHRIFTEN an einer Stelle. 1 = Originalgroesse (H1 72 px, grosse Titel 104 px), 0.8 = 20 % kleiner. Wirkt auf jede H1 (--fs-h1), die grossen Titel (--fs-h1-xl) und die Folien mit eigener Titelgroesse (1, 3, 59). */ --h1-scale: 0.8; --fs-h1-xl: calc(104px * var(--h1-scale)); /* Alte Namen, zeigen auf die vier Groessen */ --fs-eyebrow: var(--fs-4); --fs-h1: calc(var(--fs-1) * var(--h1-scale)); --fs-lead: var(--fs-3); --fs-body: var(--fs-3); --fs-small: var(--fs-3); --fs-micro: var(--fs-4); /* Brand Guide S. 04: Headline = Bold, Subheadline = SemiBold, Body & Quotes = Regular. Andere Schnitte werden nicht verwendet. */ --w-regular: 400; --w-medium: 400; /* CI 924: Medium gibt es im Brand Guide nicht, faellt auf Regular */ --w-semi: 600; --w-bold: 700; --track-label: 0.18em; /* Vorgabe Brand Guide */ --track-wide: 0.28em; --track-h1: 0.005em; --lh-tight: 1.10; --lh-body: 1.5; /* ---- Form ------------------------------------------------------------- */ --radius: 0px; /* Brand Guide: alle Flaechen exakt rechteckig */ --hairline: 1px; /* ---- Timing ----------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.33, 0, 0.15, 1); --t-fast: 200ms; --t-mid: 420ms; --t-slow: 720ms; --t-slide: 560ms; } /* ============================================================================ DARK, Hauptvariante fuer die Praesentation ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: var(--carbon-black); /* #0A0A0A */ --bg-deep: #050505; /* Rand, Letterbox */ --bg-soft: #0D0C0B; --surface: #0F0E0D; /* Panel, wie .dark .sr-panel */ --surface-2: #141312; --surface-3: #1A1817; --line: #232120; --line-soft: #1A1817; --line-strong: #2A2724; --text: var(--classic-white); --text-muted: var(--business-grey); --text-dim: rgba(250, 247, 242, 0.44); --text-faint: rgba(250, 247, 242, 0.26); --accent: var(--copper); --accent-deep: var(--copper-deep); --accent-soft: rgba(184, 149, 111, 0.10); --accent-line: rgba(184, 149, 111, 0.38); --on-accent: var(--carbon-black); --positive: #5F7C4F; --negative: #8B3A3A; --logo: url("../assets/brand/stigrock-wordmark-white.svg"); --facet-stroke: rgba(184, 149, 111, 0.55); --facet-opacity: 0.055; --media-veil: 0.30; /* Deckkraft von Hintergrundvideos */ --media-scrim: linear-gradient(90deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.62) 46%, rgba(10, 10, 10, 0.24) 100%); --plate: rgba(250, 247, 242, 0.95); /* helle Platte fuer dunkle Fremdlogos */ --veil: rgba(10, 10, 10, 0.55); /* Lesbarkeitsflaeche ueber Video */ --veil-strong: rgba(10, 10, 10, 0.80); --frame-veil-a: rgba(10, 10, 10, 0.86); --frame-veil-b: rgba(10, 10, 10, 0); } /* ============================================================================ LIGHT ========================================================================== */ :root[data-theme="light"], [data-theme="light"] { /* auch fuer einzelne Seiten im PDF-Export */ color-scheme: light; --bg: var(--classic-white); /* #FAF7F2 */ --bg-deep: #EFE9E0; --bg-soft: #FDFCFA; --surface: #FFFFFF; --surface-2: #FDFCFA; --surface-3: #F6F1E9; --line: #E2DCD2; --line-soft: #EDE8E0; --line-strong: #CFC7BC; --text: var(--ink); --text-muted: var(--taupe); --text-dim: rgba(44, 36, 25, 0.52); --text-faint: rgba(44, 36, 25, 0.32); /* Fassung 917: auf hellen Folien derselbe Beige-/Kupferton wie auf den dunklen, kein Braun (Vorgabe: ueberall der gleiche Ton) */ --accent: var(--copper); --accent-deep: var(--copper); --accent-soft: rgba(184, 149, 111, 0.17); --accent-line: rgba(184, 149, 111, 0.45); --on-accent: var(--carbon-black); --positive: #4E6741; --negative: #8B3A3A; --logo: url("../assets/brand/stigrock-wordmark-black.svg"); --facet-stroke: rgba(184, 149, 111, 0.55); --facet-opacity: 0.05; --media-veil: 0.16; --media-scrim: linear-gradient(90deg, rgba(250, 247, 242, 0.92) 0%, rgba(250, 247, 242, 0.70) 46%, rgba(250, 247, 242, 0.28) 100%); /* Die Platte traegt immer HELLE Flaechen: Fremdlogos mit dunkler Schrift und das GIA-Zertifikat sind auf Weiss angelegt. Sie darf im Hellmodus deshalb nicht invertieren. */ --plate: #FFFFFF; --veil: rgba(250, 247, 242, 0.72); --veil-strong: rgba(250, 247, 242, 0.93); --frame-veil-a: rgba(250, 247, 242, 0.88); --frame-veil-b: rgba(250, 247, 242, 0); }