/* ========================================================================== WasteDesk — Brand token layer AVISTA OIL Corporate Design -------------------------------------------------------------------------- SOURCE OF TRUTH: AVISTA OIL Corporate Brand Book, November 2018 p.34 "Farbwelt" · p.36 "Typografie" · p.30 "Visualität" Every colour below is an OFFICIAL AVISTA value transcribed from the brand book, converted RGB → hex. Nothing here is inferred or eyeballed. THIS FILE IS THE ONLY PLACE A COLOUR MAY BE DEFINED. `scripts/brand/color-guard.js` enforces that. See §12. INSTALL 1. Save as assets/css/_brand-tokens.css 2. Link FIRST in templates/parts/head.html — before bootstrap5.min.css: 3. Migrate literals to var(--wd-*). Run `npm run brand:guard` to see progress. ========================================================================== */ :root { /* ====================================================================== 1. PRIMÄRFARBEN — the two colours derived directly from the logo Brand book p.35: "Die Grundlage jeder Gestaltung sind die Primärfarben. Ihr Einsatz dominiert das Erscheinungsbild von AVISTA OIL." ====================================================================== */ /* AVISTA OIL Blau — RGB 40|106|183 · CMYK 100|50|0|0 */ --wd-blau: #286ab7; --wd-blau-rgb: 40, 106, 183; /* AVISTA OIL Grau — RGB 165|165|165 · CMYK 0|0|0|50 A PRIMARY colour, not a filler neutral. Grey carries brand weight here. */ --wd-grau: #a5a5a5; --wd-grau-rgb: 165, 165, 165; /* White is a primary design element in its own right — brand book p.35: "Weiß ist charakteristisch für die Gestaltung und wird deshalb großflächig eingesetzt." Do not fill space just because it is empty. */ --wd-white: #ffffff; /* --- Official primary tints (brand book specifies 80/60/40/20 %) ------ */ --wd-blau-80: #5388c5; --wd-blau-60: #7ea6d4; --wd-blau-40: #a9c3e2; --wd-blau-20: #d4e1f1; /* Channel triplets for the tints, so alpha forms (overlays) can be expressed without re-inlining the hex. */ --wd-blau-80-rgb: 83, 136, 197; --wd-blau-60-rgb: 126, 166, 212; --wd-blau-40-rgb: 169, 195, 226; --wd-blau-20-rgb: 212, 225, 241; --wd-primary-hover-rgb: 31, 86, 143; --wd-grau-80: #b7b7b7; --wd-grau-60: #c9c9c9; --wd-grau-40: #dbdbdb; --wd-grau-20: #ededed; /* ====================================================================== 2. SEKUNDÄRFARBEN — the sanctioned supporting palette Brand book p.35: "farblich aufeinander abgestimmte Töne, die für die Gestaltung eingesetzt werden dürfen." Permitted, not dominant. ====================================================================== */ --wd-dunkelblau: #0a346a; /* RGB 10|52|106 · CMYK 100|55|0|55 */ --wd-orange: #e2b224; /* RGB 226|178|36 · CMYK 0|40|100|0 */ --wd-braun: #613905; /* RGB 97|57|5 · CMYK 25|70|100|15 */ --wd-rot: #9a1c27; /* RGB 154|28|39 · CMYK 20|90|100|15 */ --wd-dunkelrot: #5d0027; /* RGB 93|0|39 · CMYK 10|100|40|65 */ --wd-hellgruen: #a0a72c; /* RGB 160|167|44 · CMYK 40|20|100|15 */ --wd-gruen: #25724a; /* RGB 37|114|74 · CMYK 100|30|85|20 */ --wd-dunkelgruen: #02392b; /* RGB 2|57|43 · CMYK 100|30|70|70 */ --wd-blaugruen: #346e78; /* RGB 52|110|120 · CMYK 82|0|28|52 */ --wd-dunkelblau-rgb: 10, 52, 106; --wd-orange-rgb: 226, 178, 36; --wd-rot-rgb: 154, 28, 39; --wd-gruen-rgb: 37, 114, 74; --wd-blaugruen-rgb: 52, 110, 120; /* ====================================================================== 3. ROLE ALIASES — what the UI actually references Components use these, never the German names above. Renaming a brand colour then means editing one line, not hunting through components. ====================================================================== */ --wd-primary: var(--wd-blau); --wd-primary-rgb: var(--wd-blau-rgb); --wd-primary-hover: #1f568f; /* Blau darkened 20 % for hover/active */ --wd-primary-subtle: var(--wd-blau-20); --wd-primary-dark: var(--wd-dunkelblau); /* sidebar, dark chrome */ --wd-accent: var(--wd-orange); /* CTAs, highlights — sparingly */ --wd-accent-rgb: var(--wd-orange-rgb); --wd-success: var(--wd-gruen); --wd-success-rgb: var(--wd-gruen-rgb); --wd-warning: var(--wd-orange); --wd-warning-rgb: var(--wd-orange-rgb); --wd-danger: var(--wd-rot); --wd-danger-rgb: var(--wd-rot-rgb); --wd-info: var(--wd-blaugruen); --wd-info-rgb: var(--wd-blaugruen-rgb); /* Subtle backgrounds — derived by alpha, never by inventing a new hex. This is the mechanism that killed the Vuexy purple: its tints were alpha forms of a colour with no relationship to the brand. */ --wd-primary-alpha-08: rgba(var(--wd-primary-rgb), 0.08); --wd-primary-alpha-12: rgba(var(--wd-primary-rgb), 0.12); --wd-primary-alpha-24: rgba(var(--wd-primary-rgb), 0.24); --wd-success-alpha-12: rgba(var(--wd-success-rgb), 0.12); --wd-warning-alpha-12: rgba(var(--wd-warning-rgb), 0.12); --wd-danger-alpha-12: rgba(var(--wd-danger-rgb), 0.12); --wd-info-alpha-12: rgba(var(--wd-info-rgb), 0.12); /* ====================================================================== 4. NEUTRAL RAMP Pure neutrals anchored on the official Grau. Note 350/300/200/100 ARE the brand book's 80/60/40/20 % Grau tints exactly — the ramp extends the official palette rather than replacing it. ====================================================================== */ --wd-neutral-900: #1a1a1a; /* 17.40:1 on white */ --wd-neutral-800: #333333; /* 12.63:1 */ --wd-neutral-700: #4d4d4d; /* 8.45:1 */ --wd-neutral-600: #666666; /* 5.74:1 */ --wd-neutral-550: #6e6e6e; /* 5.10:1 — lightest grey usable for body text */ --wd-neutral-500: #808080; /* 3.95:1 — large text ≥18.66px only */ --wd-neutral-400: #a5a5a5; /* 2.46:1 — = official Grau. DECORATIVE ONLY */ --wd-neutral-350: #b7b7b7; /* = Grau 80 % */ --wd-neutral-300: #c9c9c9; /* = Grau 60 % */ --wd-neutral-200: #dbdbdb; /* = Grau 40 % */ --wd-neutral-100: #ededed; /* = Grau 20 % */ --wd-neutral-50: #f7f7f7; --wd-black: #000000; /* ====================================================================== 5. SURFACE & TEXT — every value verified against WCAG 2.1 AA ====================================================================== */ --wd-bg-body: var(--wd-neutral-50); --wd-bg-surface: var(--wd-white); --wd-bg-sidebar: var(--wd-white); --wd-bg-sidebar-active: var(--wd-primary-alpha-08); --wd-bg-header: var(--wd-white); --wd-text-primary: var(--wd-neutral-800); /* 12.63:1 on white */ --wd-text-secondary: var(--wd-neutral-600); /* 5.74:1 */ --wd-text-muted: var(--wd-neutral-550); /* 5.10:1 */ --wd-text-link: var(--wd-primary); /* 5.48:1 */ --wd-text-link-hover: var(--wd-primary-hover); /* "on-" tokens: the ONLY safe foreground for each filled surface. Orange is the trap — white on Orange is 1.98:1 and fails badly. */ --wd-text-on-primary: var(--wd-white); /* 5.48:1 on Blau */ --wd-text-on-accent: var(--wd-neutral-900); /* 8.81:1 on Orange — NOT white */ --wd-text-on-success: var(--wd-white); /* 5.86:1 on Grün */ --wd-text-on-danger: var(--wd-white); /* 8.17:1 on Rot */ --wd-text-on-info: var(--wd-white); /* 5.76:1 on Blaugrün */ --wd-text-on-dark: var(--wd-white); /* 12.26:1 on Dunkelblau */ --wd-border: var(--wd-neutral-200); --wd-border-strong: var(--wd-neutral-300); --wd-border-focus: var(--wd-primary); /* ====================================================================== 6. TYPOGRAPHY — brand book p.36 House font is NEUE HELVETICA®: "verkörpert Seriosität, Vertrauen und Tradition." p.42 mandates Arial wherever the licensed face cannot be guaranteed — "da sie auf allen Computern verfügbar ist". A browser is exactly that case, so the web stack is Helvetica Neue → Helvetica → Arial, all system-resident. CONSEQUENCE: Montserrat and the Google Fonts CDN link are dropped. That removes a render-blocking third-party request and a GDPR exposure, and it is what the brand book actually requires. ====================================================================== */ --wd-font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; --wd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Neue Helvetica weights, mapped to the numeric scale: 35 Thin=100 · 45 Light=300 · 55 Roman=400 · 65 Medium=500 75 Bold=700 · 85 Heavy=800 · 95 Black=900 */ --wd-font-weight-light: 300; --wd-font-weight-normal: 400; --wd-font-weight-medium: 500; --wd-font-weight-bold: 700; --wd-font-size-xs: 0.75rem; --wd-font-size-sm: 0.875rem; --wd-font-size-base: 1rem; --wd-font-size-lg: 1.125rem; --wd-line-height: 1.5; /* Page titles follow the brand book's display style: Light weight, open tracking, sentence case. Body copy and table headers do NOT. */ --wd-heading-weight: var(--wd-font-weight-light); --wd-heading-tracking: 0.01em; /* ====================================================================== 7. SHAPE — grounded in the brand book's two geometric devices The logo is three interlocking SQUARES (p.14: collection · refining · distribution). The recurring motif is the CIRCLE (p.30: "dient der Kreis als wiederkehrendes Element"), symbolising the closed loop. Rule: containers are square-ish, status objects are fully round. ====================================================================== */ --wd-radius-sm: 0.125rem; /* badges, chips */ --wd-radius: 0.25rem; /* buttons, inputs, cards */ --wd-radius-lg: 0.375rem; /* modals, drawers */ --wd-radius-circle: 50%; /* avatars, status dots, spinners, donut charts — the Kreis motif */ --wd-border-width: 1px; /* ====================================================================== 8. ELEVATION — tinted with Dunkelblau, never neutral black ====================================================================== */ --wd-shadow-sm: 0 1px 2px rgba(var(--wd-dunkelblau-rgb), 0.06); --wd-shadow: 0 2px 8px rgba(var(--wd-dunkelblau-rgb), 0.1); --wd-shadow-lg: 0 8px 24px rgba(var(--wd-dunkelblau-rgb), 0.14); --wd-shadow-focus: 0 0 0 3px var(--wd-primary-alpha-24); /* ====================================================================== 9. LAYOUT — consolidates tokens previously duplicated across files ====================================================================== */ --wd-filter-drawer-width: 320px; --wd-sidebar-width: 260px; --wd-header-height: 62px; /* ====================================================================== 10. DATA VISUALISATION Official secondaries, ordered for maximum adjacent-pair separation and greyscale distinguishability. Replaces both the random rainbow the donuts currently render and the unsanctioned palette in assets/js/settings/chart-colors.js. ====================================================================== */ --wd-chart-1: var(--wd-blau); /* #286AB7 */ --wd-chart-2: var(--wd-orange); /* #E2B224 */ --wd-chart-3: var(--wd-gruen); /* #25724A */ --wd-chart-4: var(--wd-rot); /* #9A1C27 */ --wd-chart-5: var(--wd-blaugruen); /* #346E78 */ --wd-chart-6: var(--wd-dunkelblau); /* #0A346A */ --wd-chart-7: var(--wd-hellgruen); /* #A0A72C */ --wd-chart-8: var(--wd-braun); /* #613905 */ --wd-chart-9: var(--wd-dunkelrot); /* #5D0027 */ --wd-chart-10: var(--wd-grau); /* #A5A5A5 */ } /* ========================================================================== 11. BOOTSTRAP 5 BRIDGE -------------------------------------------------------------------------- assets/css/bootstrap5.css:33 ships stock #0d6efd and was never rebranded, so every component driven by var(--bs-primary) currently renders Bootstrap blue. Remapping here rebrands all of them without editing the vendor file. DO NOT edit bootstrap5.css or bootstrap5.min.css. ⚠️ Selector specificity, not source order, is what makes this work. Bootstrap 5.3.8 declares the same custom properties on the identical selector `:root, [data-bs-theme=light]` (bootstrap5.css:8-9). This file is linked FIRST — deliberately, so --wd-* exists before anything reads it — which means an equal-specificity bridge would LOSE the cascade to the vendor sheet and --bs-primary would stay #0d6efd. Repeating :root raises specificity to (0,2,0) and settles it regardless of load order. Do not "simplify" these selectors back to a single :root. ========================================================================== */ :root:root, [data-bs-theme='light'][data-bs-theme='light'] { --bs-primary: var(--wd-primary); --bs-primary-rgb: var(--wd-primary-rgb); --bs-secondary: var(--wd-neutral-600); /* not -400: white text sits on this */ --bs-secondary-rgb: 102, 102, 102; --bs-success: var(--wd-success); --bs-success-rgb: var(--wd-success-rgb); --bs-info: var(--wd-info); --bs-info-rgb: var(--wd-info-rgb); --bs-warning: var(--wd-warning); --bs-warning-rgb: var(--wd-warning-rgb); --bs-danger: var(--wd-danger); --bs-danger-rgb: var(--wd-danger-rgb); --bs-light: var(--wd-neutral-100); --bs-dark: var(--wd-primary-dark); --bs-body-bg: var(--wd-bg-body); --bs-body-color: var(--wd-text-primary); --bs-border-color: var(--wd-border); --bs-border-radius: var(--wd-radius); --bs-border-radius-sm: var(--wd-radius-sm); --bs-border-radius-lg: var(--wd-radius-lg); --bs-link-color: var(--wd-text-link); --bs-link-color-rgb: var(--wd-primary-rgb); --bs-link-hover-color: var(--wd-text-link-hover); --bs-font-sans-serif: var(--wd-font-sans); --bs-body-font-family: var(--wd-font-sans); --bs-font-monospace: var(--wd-font-mono); --bs-body-line-height: var(--wd-line-height); --bs-focus-ring-color: var(--wd-primary-alpha-24); } /* ========================================================================== 12. MINIMAL OVERRIDES Only what the bridge cannot reach. If this section grows, the fix belongs in the token layer instead. ========================================================================== */ html body { font-family: var(--wd-font-sans); color: var(--wd-text-primary); } /* Warning/accent buttons MUST take dark text. White on AVISTA Orange is 1.98:1 — a serious accessibility failure. */ .btn-warning, .btn-accent, .badge.bg-warning { --bs-btn-color: var(--wd-text-on-accent); --bs-btn-hover-color: var(--wd-text-on-accent); color: var(--wd-text-on-accent); } .btn-accent { --bs-btn-bg: var(--wd-accent); --bs-btn-border-color: var(--wd-accent); --bs-btn-hover-bg: #c99a15; --bs-btn-hover-border-color: #c99a15; --bs-btn-focus-shadow-rgb: var(--wd-accent-rgb); } /* Visible focus on every interactive element. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--wd-border-focus); outline-offset: 2px; box-shadow: var(--wd-shadow-focus); } /* The Kreis motif — circular by default for status objects. */ .avatar, .status-dot, .spinner-border, .spinner-grow { border-radius: var(--wd-radius-circle); } /* Honour reduced motion. The boot-loader truck in base.html:51-77 animates unconditionally today. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 13. RULES — enforced by scripts/brand/color-guard.js -------------------------------------------------------------------------- 1. No hex literal, rgb() or hsl() may appear outside this file. Use var(--wd-*). The guard fails the build otherwise. 2. BANNED FOREVER — the Vuexy purple family. Zero tolerance, no threshold. The literals are enumerated once, in the BANNED table of scripts/brand/color-guard.js, and deliberately nowhere else — so that a repo-wide grep for them returns only the guard. They are template-kit residue: never an AVISTA colour, never a WasteDesk colour. 3. BANNED — superseded WasteDesk/Bootstrap colours: #049eff #029eff #0d6efd #0a6cf5 #0078c6 (old blues) #ea5455 #28c76f #ff9f43 #00cfe8 (old semantics) #7c848f #16364d #0069b3 #ed9f2d #e1b713 #c10601 #1d70b8 (pre-brandbook inferred palette) 4. Need a colour that is not here? It does not exist. Either an official AVISTA colour covers it, or the design is wrong. Escalate — do not add a hex literal. 5. Adding a token requires a brand book page reference in the comment. ========================================================================== */