/* Brand Guide v1.3 — Design-Tokens fuer beide Welten. Der Tag-zu-Nacht-Bogen laeuft ueber data-world am ; alle Flaechen haengen an diesen Custom Properties und blenden per Transition um. */ @font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-latin.woff2") format("woff2"); } @font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bebas-neue-latin.woff2") format("woff2"); } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/oswald-var-latin.woff2") format("woff2"); } @font-face { font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/yellowtail-latin.woff2") format("woff2"); } /* Metrik-Fallback gegen Layout-Sprung der grossen Anton-Zeilen */ @font-face { font-family: "Anton-fallback"; src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Arial"); size-adjust: 82%; ascent-override: 130%; descent-override: 34%; } :root { /* Day "The Sign" */ --day-paper: #f7f1e2; --day-page: #e7e4dd; --day-red: #e5402a; --day-red-dark: #c8331e; --day-blue: #2e73c8; --day-sky: #3e8fde; --day-midnight: #1d3a5f; --day-ink: #1d2a3a; --day-warmgray: #7a7468; --day-infogray: #6a7282; /* Night "The Casino" */ --night-black: #0e0e10; --night-anthracite: #17171b; --night-champagne: #f3eedf; --night-muted: #b9b4a5; --night-dim: #8f8b7e; --night-neon: #35e0d0; /* Gold, der Faden durch beide Welten */ --gold: #e7b948; --gold-deep: #c9a23e; --bulb: #fbefb6; --bulb-gold: #f2c84b; --chip-white: #fbf8f0; --gold-grad: linear-gradient(180deg, #fbefb6, #e7b948 55%, #c9a23e); --font-anton: "Anton", "Anton-fallback", sans-serif; --font-bebas: "Bebas Neue", sans-serif; --font-oswald: "Oswald", system-ui, sans-serif; --font-script: "Yellowtail", cursive; } /* Welt-Zustand: Day ist Default, dusk/night kippen die Flaechen um. */ body { --bg: var(--day-page); --surface: var(--day-paper); --ink: var(--day-ink); --ink-muted: var(--day-warmgray); --headline: var(--day-red); --title: var(--day-midnight); --eyebrow: var(--day-blue); --script-color: var(--day-sky); --rule: rgba(201, 162, 62, 0.45); } body[data-world="dusk"] { --bg: #14243c; --surface: #1d3a5f; --ink: var(--night-champagne); --ink-muted: #b7c3d6; --headline: var(--bulb); --title: var(--night-champagne); --eyebrow: var(--bulb-gold); --script-color: var(--day-sky); --rule: rgba(231, 185, 72, 0.4); } body[data-world="night"] { --bg: var(--night-black); --surface: var(--night-anthracite); --ink: var(--night-champagne); --ink-muted: var(--night-muted); --headline: var(--gold); --title: var(--night-champagne); --eyebrow: var(--gold); --script-color: var(--night-neon); --rule: rgba(231, 185, 72, 0.4); }