/* Unfallmeldungen DE -- design tokens * * The single place where the German edition's colour, shape and elevation are * decided. Everything else in css/ refers to these; a literal hex in a * component file is a bug waiting to become a fourteenth shade of red. * * Enqueued first, as "umde-tokens", so nothing can depend on load order: * custom properties resolve at use time, not at parse time. * * Operators can override the accent pair from Options -> Design. That prints a * second :root block inline in , after this file, and only for the fields * that are non-empty -- see umde_design_css() in inc/design.php. */ :root { /* --- Brand: schwarz, rot, gold ------------------------------------------ * The identity of the German edition is a 3px tricolour keyline under the * brand band, and gold used sparingly as the "live / current" marker. Red * stays the signal colour it always was; gold never carries meaning on its * own, so a colour-blind reader loses nothing. */ --umde-black: #12181f; --umde-red: #e3000f; --umde-red-hover: #b8000c; --umde-red-deep: #8f0009; /* The rail and the drawer put red on slate, where the signal red goes muddy. * This is the same red opened up until it reads on a dark ground. */ --umde-red-on-dark: #ff5a44; /* Two golds, because one cannot do both jobs. --umde-gold is for dark * surfaces (the keyline, markers on the nav band) where it reads as gold. * On white it drops to roughly 1.6:1, so anything sitting on a light * surface uses --umde-gold-ink (4.0:1) instead. Neither is ever used for * body text. */ --umde-gold: #f6c500; --umde-gold-ink: #b8860b; /* --- Ink and surfaces --------------------------------------------------- */ --umde-ink: #202123; --umde-ink-soft: #333333; --umde-ink-muted: #696969; --umde-surface: #ffffff; --umde-surface-sunken: #f4f6f9; --umde-surface-raised: #eef1f5; --umde-hairline: #dde3ea; --umde-hairline-soft: #e2e7ee; /* --- The dark navigation slate ------------------------------------------ * Four steps, in the order they stack: nav band, brand band on mobile, * drawer, muted rule inside the drawer. */ --umde-slate-900: #12181f; --umde-slate-800: #16202b; --umde-slate-700: #1b2530; --umde-slate-600: #2c333b; --umde-slate-400: #485563; /* --- Platform colours, never themed ------------------------------------- * These belong to YouTube, WhatsApp and Telegram. They are tokens so a * search for "#25d366" lands here and stops, not so they can be changed. */ --umde-youtube: #ff0000; --umde-youtube-hover: #e60000; --umde-whatsapp: #25d366; --umde-whatsapp-hover: #1fbb59; --umde-telegram: #229ed9; --umde-telegram-hover: #1c87ba; /* --- Shape -------------------------------------------------------------- * The theme had eight radii between 2px and 14px, assigned by whoever * wrote the block that day. Four steps cover every case; the largest is * reserved for cards and media so they stay distinguishable from controls. */ --umde-radius-xs: 4px; --umde-radius: 8px; --umde-radius-lg: 14px; --umde-radius-pill: 999px; /* Not a surface. This is the corner on 3px burger bars and a 4x20px tick * beside a heading -- rounding those to a real radius turns a line into a * lozenge, so they get their own step and stay out of the ramp above. */ --umde-radius-mark: 2px; /* --- Elevation ---------------------------------------------------------- * One step, because one step is all this theme actually has. The resting * card shadow is the only value that repeats; every other box-shadow here * is a one-off glow tied to its own button's brand colour, and a three-step * ramp would have been a ramp nothing climbed. */ --umde-shadow-card: 0 1px 3px rgba(0, 0, 0, .05); /* --- The keyline -------------------------------------------------------- * Equal thirds, so it reads as a flag at a glance and as a hairline rule * the rest of the time. Painted as a background layer rather than a border * or an extra element, so switching it on and off cannot move the header by * a single pixel. */ --umde-keyline-height: 3px; --umde-keyline: linear-gradient(90deg, var(--umde-black) 0 33.333%, var(--umde-red) 33.333% 66.666%, var(--umde-gold) 66.666% 100%); /* --- Layout ------------------------------------------------------------- * The page's content column. The listing templates already centre their * containers on 1240px; the header bands did not, so they ran to the * viewport edge while the cards below them stopped short, and the nav read * as a row that had been cut off. This is that width, named once, so the * bands and the content agree. Band backgrounds stay full-bleed -- it is * only their contents that come inward. */ --umde-column: 1240px; /* --- Motion ------------------------------------------------------------- * One duration, one curve. Anything slower than this on a news list feels * like the page is still loading. */ --umde-ease: cubic-bezier(.2, .6, .3, 1); --umde-fast: .14s; }