/* ========================================================== DER ASSISTENZDIENST — Design System ========================================================== Architecture ──────────── Classless CSS — styling hooks are data attributes & semantic HTML. No .class selectors anywhere. Styles target elements, roles, aria attributes, and data-* attributes directly. Layers (cascade order, lowest → highest specificity): 1. reset — box model, list/link/button normalization 2. base — tokens, typography, buttons, forms, tables, badges, skip link, avatars (shared by all views) 3. app — mobile shell (Assistent & Klient apps, ≤ 430 px) 4. desktop — desktop shell (Planer app, sidebar + main) CSS Features Used ───────────────── oklch() perceptual color space for uniform lightness color-mix(in oklch) derived surface tints from semantic colors light-dark() single-token dual-mode (respects color-scheme) CSS Nesting (&) native nesting throughout @property typed custom properties (--hue, --bar-h) @layer explicit cascade ordering @starting-style entry animations on badges, cards, sections… @keyframes shared reusable animations (fade-up, pop-in…) @view-transition styled cross-page slide+fade transitions view-transition-name pinned header / bottom-nav across pages @container component-level responsive layouts @supports Display P3 wide-gamut enhancement scrollbar-* thin scrollbars with custom color range media queries (width <= 1024px) syntax font-size-adjust consistent x-height across font stacks logical properties inline-size, block-size, margin-block-start… dvh dynamic viewport on mobile Data Attributes (Styling Hooks) ─────────────────────────────── data-app="mobile|desktop" root layout mode data-status="ok|warn|err|info" status badge color data-border="ok|warn|err" left-border accent on cards data-variant="primary|danger|ghost" button/link variants data-size="lg" large full-width button data-initials circular avatar (content via textContent) data-layout="master-detail|calendar-panel|table-panel| kpi|charts|2col|card-grid" layout patterns data-overflow horizontal scroll wrapper for tables data-match marks matching compare-grid values data-other empty/placeholder calendar cells data-open sidebar open state (toggled via JS) data-backup backup-assistant chip style Color Tokens — light-dark(LIGHT, DARK) ─────────────────────────────────────── --bg page background --surface recessed surface (e.g. table headers, tabs bg) --surface-raised elevated surface (cards, panels, inputs) --text primary text --text-muted secondary/label text --border default border --border-strong emphasized border (hover states) --primary brand blue + derived --primary-surface --ok success green + derived --ok-surface --warn warning amber + derived --warn-surface --err error red + derived --err-surface --sidebar-bg dark sidebar background --sidebar-text sidebar text (light on dark) Layout Tokens ───────────── --radius .5rem border radius --nav-h 3.5rem mobile bottom nav height --sidebar-w 14rem desktop sidebar width --header-h 3.25rem top bar height --speed 150ms ease transition timing ========================================================== */ :root { color-scheme: light dark; } @layer reset, base, app, desktop; @view-transition { navigation: auto; } /* ─── View Transition Styling ───────────────────────────── Overrides the default crossfade with an iOS-like slide+fade. Old page slides out to the left while fading; new page slides in from the right. Duration 250 ms, ease-out. Header and bottom nav are pinned (view-transition-name) so they persist across navigations without flashing. */ ::view-transition-old(root) { animation: 250ms ease-out both vt-slide-out; } ::view-transition-new(root) { animation: 250ms ease-out both vt-slide-in; } @keyframes vt-slide-out { to { opacity: 0; transform: translateX(-8%); } } @keyframes vt-slide-in { from { opacity: 0; transform: translateX(8%); } } /* Pinned chrome — these elements stay in place during cross-page transitions instead of crossfading. */ ::view-transition-group(app-header), ::view-transition-group(bottom-nav) { animation-duration: 0s; } /* ─── Shared Keyframes ──────────────────────────────────── Reusable animations referenced from Layers app & desktop. All subject to the prefers-reduced-motion guard below. */ @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } } @keyframes pop-in { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } @keyframes slide-up-number { from { opacity: 0; transform: translateY(8px); } } @keyframes fade-in { from { opacity: 0; } } @keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* ─── Typed Custom Properties ─────────────────────────────── */ @property --hue { syntax: ""; inherits: true; initial-value: 250; } @property --bar-h { syntax: ""; inherits: false; initial-value: 0%; } /* ========================================================== LAYER: reset Box model, element normalization, scrollbar defaults. ========================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: oklch(60% 0 0 / .35) transparent; scrollbar-gutter: stable; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; } img, svg { display: block; max-inline-size: 100%; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; } } /* ========================================================== LAYER: base Design tokens, typography, shared components. Everything here is available to both mobile and desktop. ========================================================== */ @layer base { /* ── Color Tokens ─────────────────────────────────────── */ :root { /* Primitives — oklch(Lightness% Chroma Hue) */ --bg: light-dark(oklch(100% 0 0), oklch(7% .015 270)); --surface: light-dark(oklch(96% .005 270), oklch(12% .015 270)); --surface-raised: light-dark(oklch(100% 0 0), oklch(14% .012 270)); --text: light-dark(oklch(8% 0 0), oklch(93% .005 270)); --text-muted: light-dark(oklch(30% .01 270), oklch(78% .01 270)); --border: light-dark(oklch(82% .005 270), oklch(25% .01 270)); --border-strong: light-dark(oklch(70% .01 270), oklch(45% .01 270)); /* Semantic colors — each has a tinted surface via color-mix */ --primary: light-dark(oklch(35% .16 260), oklch(72% .12 250)); --primary-surface:light-dark( color-mix(in oklch, oklch(35% .16 260) 8%, oklch(100% 0 0)), color-mix(in oklch, oklch(72% .12 250) 12%, oklch(7% .015 270)) ); --ok: light-dark(oklch(32% .12 155), oklch(74% .17 155)); --ok-surface: light-dark( color-mix(in oklch, oklch(32% .12 155) 6%, white), color-mix(in oklch, oklch(74% .17 155) 12%, oklch(7% .015 270)) ); --warn: light-dark(oklch(35% .12 75), oklch(84% .16 90)); --warn-surface: light-dark( color-mix(in oklch, oklch(35% .12 75) 8%, white), color-mix(in oklch, oklch(84% .16 90) 10%, oklch(7% .015 270)) ); --err: light-dark(oklch(32% .16 25), oklch(78% .12 20)); --err-surface: light-dark( color-mix(in oklch, oklch(32% .16 25) 6%, white), color-mix(in oklch, oklch(78% .12 20) 10%, oklch(7% .015 270)) ); /* Layout */ --radius: .5rem; --nav-h: 3.5rem; --sidebar-w: 14rem; --header-h: 3.25rem; --speed: 150ms ease; /* Sidebar (dark bg, light text) */ --sidebar-bg: light-dark(oklch(14% .02 270), oklch(7% .015 270)); --sidebar-text: light-dark(oklch(85% .005 270), oklch(72% .01 270)); } /* ── Display P3 Wide-Gamut Override ───────────────────── */ @supports (color: color(display-p3 0 0 0)) { :root { --primary: light-dark(color(display-p3 .08 .18 .58), color(display-p3 .42 .67 1)); --ok: light-dark(color(display-p3 .05 .30 .12), color(display-p3 .29 .87 .50)); --warn: light-dark(color(display-p3 .38 .22 .02), color(display-p3 .98 .80 .08)); --err: light-dark(color(display-p3 .42 .06 .06), color(display-p3 .99 .65 .65)); } } /* ── Accessibility: High Contrast ─────────────────────── */ @media (prefers-contrast: more) { :root { --bg: light-dark(#fff, #000); --surface: light-dark(#fff, #000); --surface-raised: light-dark(#fff, #000); --text: light-dark(#000, #fff); --text-muted: light-dark(oklch(8% 0 0), oklch(92% 0 0)); --border: light-dark(#000, #fff); } input, select, textarea, button { border-width: 2px !important; } } /* ── Accessibility: Reduced Motion ────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ── Typography ───────────────────────────────────────── */ body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 400; font-size-adjust: 0.5; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; } h2 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } h3 { font-size: .95rem; font-weight: 700; } p { max-inline-size: 60ch; } small { font-size: .8rem; color: var(--text-muted); } strong { font-weight: 700; } /* SVG icon sizing — Lucide icons inside nav spans and buttons */ span[aria-hidden] > svg { width: 1em; height: 1em; } button > svg { width: 1em; height: 1em; } :focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; transition: outline-offset 150ms ease-out, outline-color 150ms ease-out; } :focus-visible:not(:active) { outline-offset: 2px; } a:hover { color: var(--primary); } /* ── Buttons ──────────────────────────────────────────── */ /* Base: