/** * Project shell (Zieldesign Konfiguration 2026-10-20): shared design tokens. * Colours, radii, type and geometry follow the binding mockup * Zieldesign-Konfiguration-2026-10-20.html exactly (dark). One dark glass theme * (Till 01.11.2026): there is no light variant any more. Every shell stylesheet * (header, map toolbar/edge, config panel/inspector, sun bar) uses ONLY these variables. * color-scheme is set on the shell containers only, so module widgets outside the * shell keep their own form-control look. */ :root { /* geometry contract (see docs/project-shell.md), mockup: header top 14, sides 16, header 64 high (Layout v2.1: icon above name), zones below at 90, left panel 340, inspector 360, collapsed left panel (rail) 56 */ --ees-gap: 16px; --ees-header-top: 14px; --ees-header-h: 64px; --ees-top: calc(var(--ees-header-top) + var(--ees-header-h) + 12px); /* first row below the header */ --ees-left-w: 340px; --ees-right-w: 360px; --ees-rail-w: 56px; --ees-radius: 14px; /* toolbar, popover */ --ees-radius-sm: 8px; /* buttons, fields */ --ees-radius-md: 12px; /* cards, legend, map nav */ --ees-radius-lg: 16px; /* header, sun bar */ --ees-radius-panel: 20px; /* left panel, inspector */ --ees-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* dark (mockup --bg/--glass/--bd/--t*) */ --ees-bg: #0a0a0f; --ees-surface: rgba(17, 19, 25, 0.94); --ees-surface-2: rgba(255, 255, 255, 0.04); --ees-surface-3: rgba(255, 255, 255, 0.08); --ees-field: rgba(0, 0, 0, 0.28); /* input fields (mockup .val) */ --ees-menu-bg: #14161c; /* native select options */ --ees-border: rgba(255, 255, 255, 0.10); --ees-border-strong: rgba(255, 255, 255, 0.16); --ees-text: #ffffff; --ees-text-2: rgba(255, 255, 255, 0.88); --ees-text-dim: rgba(255, 255, 255, 0.76); /* AA over the glass (was 0.52) */ --ees-text-faint: rgba(255, 255, 255, 0.56); /* decoration / disabled only, >= 3:1 */ --ees-accent: #3FA14D; --ees-accent-strong: #30d158; --ees-accent-soft: rgba(63, 161, 77, 0.18); --ees-accent-text: #ffffff; --ees-warn: #ff9f0a; --ees-warn-soft: rgba(255, 159, 10, 0.10); /* reset button (mockup .rst) */ --ees-danger: #ff453a; --ees-recalc: #ffd60a; /* header "Elektroplanung neu berechnen" (yellow) */ --ees-info: #0a84ff; /* progress colours, always yellow -> blue -> green (Nera's summon ring) */ --ees-step-1: #EECB00; --ees-step-2: #0069B3; --ees-step-3: #3FA14D; --ees-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); --ees-float-shadow: 0 8px 28px rgba(0, 0, 0, 0.32); /* floating capsules (sun bar, flash) */ --ees-backdrop: blur(32px) saturate(180%); /* 3D tour: the card glass and the end frame (ee-shell-sunbar.css) */ --ees-backdrop-tour: blur(24px) saturate(1.6); --ees-backdrop-tour-end: blur(14px); /* Glass (2.25.713, Till 20.10.2026 "Richtung Glas-Design wie bei den Widgets, damit es einheitlich ist"): the module widgets' look (ee-widget-styles.css .ee-widget: 165deg white sheen, 1px white border, soft shadow stack with inset highlights, blur + saturate) over a tint that keeps text readable on ANY map below (satellite, street map, snow). The tint is the only extra: tests/js/ee-shell-glass-contrast.test.cjs checks WCAG AA (4.5:1) for --ees-text, --ees-text-2 and --ees-text-dim against the worst backdrop. Every floating zone (header, left panel, inspector, toolbar, popovers, map edge, sun bar, legend, map labels, dialogs) uses these and nothing else. */ --ees-glass-tint: rgba(16, 18, 24, 0.78); --ees-glass-sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0.06) 100%); --ees-glass-bg: var(--ees-glass-sheen), linear-gradient(var(--ees-glass-tint), var(--ees-glass-tint)); --ees-glass-border: rgba(255, 255, 255, 0.12); --ees-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.10); --ees-glass-solid: rgba(17, 19, 25, 0.96); /* no backdrop-filter / reduced transparency */ /* Guided tour (ee-shell-sunbar.css .ees-tour-*): dark glass in BOTH schemes, the cards float over the 3D scene and keep white text on a dark tint by design. */ --ees-tour-glass: rgba(20, 22, 26, 0.55); --ees-tour-glass-strong: rgba(20, 22, 26, 0.70); --ees-tour-border: rgba(255, 255, 255, 0.16); --ees-tour-text: #ffffff; /* tour cards, end screen and video export (ee-shell-sunbar.css stays tokens-only) */ --ees-tour-glass-58: rgba(20, 22, 26, .58); --ees-tour-glass-80: rgba(20, 22, 26, .8); --ees-tour-shade-25: rgba(0, 0, 0, .25); --ees-tour-shade-35: rgba(0, 0, 0, .35); --ees-tour-shade-40: rgba(0, 0, 0, .4); --ees-tour-shade-45: rgba(0, 0, 0, .45); --ees-tour-veil-66: rgba(12, 14, 18, .66); --ees-tour-white-06: rgba(255, 255, 255, .06); --ees-tour-white-08: rgba(255, 255, 255, .08); --ees-tour-white-10: rgba(255, 255, 255, .10); --ees-tour-white-14: rgba(255, 255, 255, .14); --ees-tour-white-16: rgba(255, 255, 255, .16); --ees-tour-white-18: rgba(255, 255, 255, .18); --ees-tour-white-22: rgba(255, 255, 255, .22); --ees-tour-white-85: rgba(255, 255, 255, .85); --ees-tour-white-86: rgba(255, 255, 255, .86); --ees-tour-text-2: rgba(255, 255, 255, 0.85); --ees-tour-text-dim: rgba(255, 255, 255, 0.60); --ees-tour-line: rgba(255, 255, 255, 0.10); --ees-tour-line-strong: rgba(255, 255, 255, 0.28); --ees-tour-hl: rgba(255, 255, 255, 0.12); --ees-tour-leader: rgba(255, 255, 255, 0.55); --ees-tour-leader-dot: rgba(255, 255, 255, 0.80); --ees-tour-logo-bg: rgba(255, 255, 255, 0.94); --ees-tour-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); /* Tooltips of the shell (E44, Till 24.10.2026: dark text on the see-through capsule tooltip over the aerial photo was unreadable). Fully opaque dark chip with white text in BOTH themes (no light override): never takes colour from the map below. tests/js/ee-e44-tooltip-header-nav.dom.cjs checks alpha 1 and WCAG AA (>= 4.5:1). */ --ees-tip-bg: #1c1c1e; --ees-tip-text: #ffffff; --ees-tip-border: rgba(255, 255, 255, 0.10); --ees-tip-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); --ees-tip-radius: 6px; /* panel heights: height follows the content. Layout v2.1 (Layoutsystem K1): the bottom row (sun bar, map capsule, legend) lives only in the free map zone F, so the side panels may run down to the bottom gap (no --ees-bottom-reserve any more). */ /* One bar design (Till 26.10.2026 "die leiste unten sollte das gleiche design haben also gleich hoch gleiche abstaende"): sun bar, map capsule and the top toolbar share height, inner padding, button and icon size, pill radius and shadow. Change them here only. */ --ees-bar-h: 52px; --ees-bar-pad: 6px; /* inner edge, left/right */ --ees-bar-btn: 40px; /* round icon buttons */ --ees-bar-icon: 19px; --ees-bar-radius: calc(var(--ees-bar-h) / 2); /* capsule */ --ees-bar-shadow: var(--ees-glass-shadow), var(--ees-float-shadow); --ees-sunbar-h: var(--ees-bar-h); /* Header pills (Till 26.10.2026 "Kopfleiste als einzelne Pillen"): same capsule, glass, border, shadow and round 40 px buttons as the bars below; only the height is its own token, because the module segments carry icon + label stacked. --ees-header-h (the slot the panels start under) stays, the pills sit flush at its top edge. */ --ees-head-h: 56px; --ees-head-radius: calc(var(--ees-head-h) / 2); --ees-head-btn: var(--ees-bar-btn); --ees-head-pad: calc((var(--ees-head-h) - var(--ees-head-btn)) / 2 - 1px); /* round buttons centred, minus the 1px border */ --ees-head-seg-h: calc(var(--ees-head-h) - 8px); /* segment = pill minus 3px inset + border */ --ees-head-ring: 26px; /* icon well, the same for all 7 phases */ --ees-head-label: 11px; --ees-seg-active-bg: rgba(255, 255, 255, 0.16); --ees-seg-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.10); --ees-toolbar-h: 60px; --ees-side-top: var(--ees-top); --ees-panel-max-h: calc(100vh - var(--ees-side-top) - var(--ees-gap)); /* map capsule E2 (ee-shell-map.css): Ebenen, Kartenstil, Legende | 3D | - + | Kompass */ --ees-capsule-w: calc(7 * var(--ees-bar-btn) + 3px + 2 * var(--ees-bar-pad) + 2px); /* 7 buttons, 3 separators, padding, border */ /* free map zone F = viewport without header, left panel/rail and inspector. Every floating element (toolbar, sun bar, capsule, popovers, legend, hints) is placed only through these two edges; body classes set by the panels switch them (see body rules below). */ --ees-f-left: calc(var(--ees-left-w) + 2 * var(--ees-gap)); --ees-f-right: var(--ees-gap); /* sun bar (mockup .sunic .knob .track) */ --ees-sun: #ffd60a; --ees-knob: #ffffff; --ees-sky-night: #1e293b; --ees-sky-dusk: #f59e0b; --ees-sky-day: #fde68a; /* origin badges K/P/F/B/M (mockup .oK .oP .oF .oB .oM), S = system default */ --ees-badge-k: rgba(90, 200, 250, 0.18); --ees-badge-k-fg: #8fdcff; --ees-badge-p: rgba(255, 255, 255, 0.12); --ees-badge-p-fg: #e6e6e6; --ees-badge-f: rgba(255, 159, 10, 0.20); --ees-badge-f-fg: #ffc266; --ees-badge-b: rgba(167, 139, 250, 0.20); --ees-badge-b-fg: #c9b8ff; --ees-badge-m: rgba(48, 209, 88, 0.18); --ees-badge-m-fg: #8ef0a8; --ees-badge-s: rgba(255, 255, 255, 0.08); --ees-badge-s-fg: rgba(255, 255, 255, 0.70); } .ees-header, .ees-left, .ees-inspector, .ees-toolbar-wrap, .ees-mapedge, .ees-sunbar, .ees-variant-menu, .ees-dialog-backdrop, #layerLegendContainer { color-scheme: dark; } /* no backdrop-filter (old browsers) or "reduce transparency" (macOS/iOS setting): the same glass, opaque, so text never sits on a busy map */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --ees-glass-tint: var(--ees-glass-solid); } } @media (prefers-reduced-transparency: reduce) { :root { --ees-glass-tint: var(--ees-glass-solid); --ees-backdrop: none; --ees-backdrop-tour: none; --ees-backdrop-tour-end: none; } } /* Free zone F follows the panels: collapsed left panel (rail, body.ees-left-rail, set by project-shell-map.js) and the open inspector (body.ees-inspector-open). The toolbar no longer needs its own row: it is centred in F and drops its labels when F is too narrow. */ body.ees-left-rail { --ees-f-left: calc(var(--ees-rail-w) + 2 * var(--ees-gap)); } body.ees-inspector-open { --ees-f-right: calc(var(--ees-right-w) + 2 * var(--ees-gap)); } /* small laptop (1024 px, 1280 @125 %): all bars step down together by 2 px per button, so the sun bar next to the open inspector keeps its minimum width (ee-shell-map-capsule.dom.cjs) */ @media (max-width: 1100px) { :root { --ees-bar-btn: 38px; --ees-bar-h: 50px; --ees-head-h: 54px; } } @media (max-width: 767px) { :root { --ees-gap: 8px; --ees-header-top: 8px; --ees-header-h: 96px; /* two rows of pills: project + KPIs + actions, module segments (scrollable) */ --ees-head-h: 44px; --ees-head-btn: 36px; --ees-left-w: 100vw; --ees-right-w: 100vw; --ees-f-left: var(--ees-gap); } /* phone: panels are sheets over the map, F is the whole width */ body.ees-left-rail, body.ees-inspector-open { --ees-f-left: var(--ees-gap); --ees-f-right: var(--ees-gap); } }