/* * uniek.css — uNiek Design System foundation * -------------------------------------------------------------------- * Source of truth: /opt/projects/design/css/uniek.css * Live at: https://unieksolutions.nl/design/css/uniek.css * Docs: /opt/projects/design/DESIGN_SYSTEM.md * * Layout: * 1. Tokens (:root) ← override these per tenant at runtime * 2. Reset * 3. Typography * 4. Layout utilities * 5. Components * 5.1 Header + a11y-bar * 5.2 Buttons * 5.3 Badges * 5.4 Cards + card grid * 5.5 Tabs * 5.6 Forms * 5.7 Toasts (error + info) * 5.8 Tables (non-Tabulator) * 6. Responsive helpers (screenCtx-driven) * 7. FOUC mitigation (.theme-loading) * * Dark mode is the default. Light mode is opt-in via * + /design/css/uniek-light.css * * All themable values are CSS custom properties. JS overrides them * at runtime via root.style.setProperty('--brand-primary', '#...'). */ /* ===================================================================== 1. TOKENS — change here, applied everywhere ===================================================================== */ :root { /* Brand palette — uNiek defaults; tenant can override at runtime */ --brand-primary: #AACA38; --brand-primary-strong: #8BA22D; --brand-primary-soft: rgba(170, 202, 56, 0.18); --brand-secondary: #F8AC2E; --brand-secondary-strong: #C88720; --brand-secondary-soft: rgba(248, 172, 46, 0.18); /* Surfaces (dark default) */ --brand-bg: #1C1C2E; --brand-bg-elevated: #232338; --brand-surface: #2A2A3E; --brand-surface-alt: #34344C; --brand-border: #3A3A5C; --brand-border-strong:#4A4A70; /* Text */ --brand-text: #F0EDE8; --brand-text-strong: #FFFFFF; --brand-text-muted: #9090A8; --brand-text-faint: #6A6A85; --brand-text-on-primary: #1C1C2E; /* readable on primary fills */ /* Semantic */ --brand-danger: #E05555; --brand-danger-strong: #C44040; --brand-danger-soft: rgba(224, 85, 85, 0.18); --brand-success: #4ECDC4; --brand-success-soft: rgba(78, 205, 196, 0.18); --brand-warning: #F8AC2E; --brand-warning-soft: rgba(248, 172, 46, 0.18); --brand-info: #7DD3F0; --brand-info-soft: rgba(125, 211, 240, 0.18); /* Typography */ --brand-font: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --brand-font-mono: 'Fira Code', 'Consolas', 'Liberation Mono', monospace; --brand-font-dyslexic: 'OpenDyslexic', var(--brand-font); /* a11y-bar font-size multiplier (set by JS: 0.8 / 0.9 / 1.0 / 1.15 / 1.3 / 1.5) */ --fs: 1; /* Text scale (rem-based; html font-size = 16px * var(--fs)) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* Line heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Radii */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 9999px; /* Shadows (tuned for dark background) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 2px 6px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55); /* Motion */ --transition-fast: 120ms ease; --transition: 180ms ease; --transition-slow: 320ms ease; /* Layout */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl:1600px; /* Z-index scale */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-toast: 500; --z-modal: 800; --z-chat: 900; --z-overlay: 1000; /* Header */ --header-height: 56px; --header-height-mobile: 96px; /* burger-open row 2 included */ } /* ===================================================================== 2. RESET ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: calc(16px * var(--fs)); -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--brand-font); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--brand-text); background: var(--brand-bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; display: block; } a { color: var(--brand-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--brand-primary-strong); text-decoration: underline; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } hr { border: 0; border-top: 1px solid var(--brand-border); margin: var(--space-6) 0; } /* OpenDyslexic font override — toggled by a11y-bar adding `.dyslexic` on */ body.dyslexic, body.dyslexic * { font-family: var(--brand-font-dyslexic) !important; letter-spacing: 0.05em; word-spacing: 0.1em; line-height: 1.8; } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===================================================================== 3. TYPOGRAPHY ===================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: var(--leading-tight); color: var(--brand-text-strong); } h1 { font-size: var(--text-3xl); margin-bottom: var(--space-4); } h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); } h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); } h4 { font-size: var(--text-lg); margin-bottom: var(--space-2); } h5 { font-size: var(--text-base);margin-bottom: var(--space-2); } h6 { font-size: var(--text-sm); margin-bottom: var(--space-2); } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } small, .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-muted { color: var(--brand-text-muted); } .text-faint { color: var(--brand-text-faint); } .text-strong { color: var(--brand-text-strong); } .text-primary { color: var(--brand-primary); } .text-danger { color: var(--brand-danger); } .text-success { color: var(--brand-success); } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } code, kbd, samp, pre { font-family: var(--brand-font-mono); font-size: 0.95em; } code { background: var(--brand-primary-soft); color: var(--brand-primary); padding: 2px 6px; border-radius: var(--radius-sm); } pre { background: var(--brand-surface); padding: var(--space-4); border-radius: var(--radius); overflow-x: auto; } /* ===================================================================== 4. LAYOUT UTILITIES ===================================================================== */ .uniek-container { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--space-4); } .uniek-container-sm { max-width: var(--container-sm); } .uniek-container-md { max-width: var(--container-md); } .uniek-container-xl { max-width: var(--container-xl); } .uniek-container-2xl{ max-width: var(--container-2xl); } @media (min-width: 768px) { .uniek-container { padding: 0 var(--space-6); } } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .grid { display: grid; gap: var(--space-4); } .grid-1 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .mt-1{margin-top:var(--space-1);} .mt-2{margin-top:var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);} .mt-6{margin-top:var(--space-6);} .mt-8{margin-top:var(--space-8);} .mb-1{margin-bottom:var(--space-1);} .mb-2{margin-bottom:var(--space-2);} .mb-3{margin-bottom:var(--space-3);} .mb-4{margin-bottom:var(--space-4);} .mb-6{margin-bottom:var(--space-6);} .mb-8{margin-bottom:var(--space-8);} .p-2{padding:var(--space-2);} .p-3{padding:var(--space-3);} .p-4{padding:var(--space-4);} .p-6{padding:var(--space-6);} .hidden { display: none !important; } @media (max-width: 639px) { .hide-mobile { display: none !important; } } @media (min-width: 640px) { .hide-desktop { display: none !important; } } /* ===================================================================== 5. COMPONENTS ===================================================================== */ /* ----- 5.1 Universal header + a11y-bar -------------------------------- */ /* DS-005, DS-006: universal header rendered/wired by uniek-core.js */ /* Layout: [logo · org · user] | [app-center] | [a11y-right] */ /* Mobile: [logo] [account|nav|ux icons] → 3 slide-down panels */ .uniek-header { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); height: var(--header-height); background: var(--brand-bg-elevated); border-bottom: 1px solid var(--brand-border); position: sticky; top: 0; z-index: var(--z-header); color: var(--brand-text); } .uniek-header__left, .uniek-header__center, .uniek-header__right { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .uniek-header__left { flex-shrink: 0; gap: var(--space-3); } .uniek-header__center { flex: 1; justify-content: center; } .uniek-header__right { flex-shrink: 0; justify-content: flex-end; gap: var(--space-2); } /* Logo */ .uniek-header__logo { height: 32px; width: auto; flex-shrink: 0; display: block; } .uniek-header__logo--default { height: 28px; width: 28px; opacity: 0.85; } /* Org name */ .uniek-header__org { font-weight: 600; color: var(--brand-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* User name (+ optional role) */ .uniek-header__user { color: var(--brand-text-muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .uniek-header__role { color: var(--brand-text-faint); font-size: var(--text-xs); font-weight: 400; } /* Proposal link */ .uniek-header__proposal { background: var(--brand-secondary); color: var(--brand-text-on-primary); padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; } .uniek-header__proposal:hover { background: var(--brand-secondary-strong); text-decoration: none; } /* a11y-bar — group of small icon buttons in __right */ .uniek-a11y-bar { display: flex; align-items: center; gap: 4px; } .uniek-a11y-btn { background: transparent; color: var(--brand-text); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; font-size: var(--text-sm); line-height: 1; min-width: 32px; min-height: 32px; transition: background var(--transition-fast), border-color var(--transition-fast); font-family: var(--brand-font); } .uniek-a11y-btn:hover { background: var(--brand-surface); border-color: var(--brand-border); } .uniek-a11y-btn[aria-pressed="true"] { background: var(--brand-primary-soft); color: var(--brand-primary); border-color: var(--brand-primary); } /* Mobile icon bar (hidden on desktop) */ .uniek-header__mobile-bar { display: none; } /* Mobile panels (hidden on desktop) */ .uniek-panel { display: none; } /* ── Mobile: 3-icon bar + 3 slide-down panels ─────────────────────────── */ @media (max-width: 639px) { .uniek-header { flex-wrap: wrap; height: auto; padding: var(--space-2) var(--space-3); gap: var(--space-2); } /* Left takes remaining space */ .uniek-header__left { flex: 1; } /* Center + right hidden until opened as panel */ .uniek-header__center, .uniek-header__right { display: none; } /* Mobile icon bar: account | nav | ux */ .uniek-header__mobile-bar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .uniek-mobile-btn { background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--brand-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 6px; transition: background var(--transition-fast), border-color var(--transition-fast); } .uniek-mobile-btn:hover, .uniek-mobile-btn[aria-pressed="true"] { background: var(--brand-surface); border-color: var(--brand-border); } .uniek-mobile-btn[aria-pressed="true"] { color: var(--brand-primary); } /* Open panels: full-width row below header */ .uniek-header__center.uniek-panel--open, .uniek-header__right.uniek-panel--open { display: flex; flex-basis: 100%; order: 10; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--brand-border); } .uniek-header__right.uniek-panel--open { justify-content: flex-end; } /* Account panel */ .uniek-panel--account.uniek-panel--open { display: flex; flex-direction: column; flex-basis: 100%; order: 10; gap: var(--space-1); padding: var(--space-2) 0; border-top: 1px solid var(--brand-border); } .uniek-panel__org { font-weight: 600; color: var(--brand-text-strong); font-size: var(--text-sm); } .uniek-panel__user { color: var(--brand-text-muted); font-size: var(--text-sm); } .uniek-panel__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); } [data-touch="1"] .uniek-a11y-btn, [data-touch="1"] .uniek-mobile-btn { min-width: 44px; min-height: 44px; } } /* ----- 5.2 Buttons --------------------------------------------------- */ .uniek-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--brand-primary); color: var(--brand-text-on-primary); border: 1px solid transparent; border-radius: var(--radius); padding: var(--space-2) var(--space-4); font-family: var(--brand-font); font-size: var(--text-base); font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); min-height: 40px; } .uniek-btn:hover { background: var(--brand-primary-strong); } .uniek-btn:active { transform: translateY(1px); } .uniek-btn:disabled, .uniek-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } .uniek-btn--secondary { background: var(--brand-surface); color: var(--brand-text); border-color: var(--brand-border); } .uniek-btn--secondary:hover { background: var(--brand-surface-alt); border-color: var(--brand-border-strong); } .uniek-btn--ghost { background: transparent; color: var(--brand-text); border-color: var(--brand-border); } .uniek-btn--ghost:hover { background: var(--brand-surface); } .uniek-btn--danger { background: var(--brand-danger); color: #FFFFFF; } .uniek-btn--danger:hover { background: var(--brand-danger-strong); } .uniek-btn--sm { padding: 4px 10px; font-size: var(--text-sm); min-height: 32px; } .uniek-btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-lg); min-height: 48px; } .uniek-btn--block { width: 100%; } [data-touch="1"] .uniek-btn { min-height: 48px; min-width: 48px; } /* ----- 5.3 Badges ---------------------------------------------------- */ .uniek-badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1.4; background: var(--brand-surface-alt); color: var(--brand-text); } .uniek-badge--success { background: var(--brand-primary-soft); color: var(--brand-primary); } .uniek-badge--warning { background: var(--brand-secondary-soft); color: var(--brand-secondary); } .uniek-badge--danger { background: var(--brand-danger-soft); color: var(--brand-danger); } .uniek-badge--info { background: var(--brand-info-soft); color: var(--brand-info); } .uniek-code { display: inline-block; background: var(--brand-primary-soft); color: var(--brand-primary); font-family: var(--brand-font-mono); font-size: var(--text-xs); padding: 2px 7px; border-radius: var(--radius-sm); word-break: break-all; } /* ----- 5.4 Cards + responsive card grid ------------------------------ */ .uniek-card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition-fast), border-color var(--transition-fast); color: var(--brand-text); } .uniek-card--clickable { cursor: pointer; text-decoration: none; display: block; } .uniek-card--clickable:hover { box-shadow: var(--shadow-md); border-color: var(--brand-primary); transform: translateY(-2px); text-decoration: none; } .uniek-card__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .uniek-card__icon { font-size: var(--text-2xl); line-height: 1; } .uniek-card__title { font-weight: 700; color: var(--brand-text-strong); margin: 0; flex: 1; } .uniek-card__body { color: var(--brand-text); } .uniek-card__meta { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--brand-border); font-size: var(--text-sm); color: var(--brand-text-muted); } /* Auto-fill card grid — fills available width at every breakpoint */ .uniek-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); } /* Dashboard count-cards (smaller, denser) */ .uniek-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .uniek-dashboard-cards .uniek-card { text-align: center; padding: var(--space-4); } .uniek-dashboard-cards .uniek-card__count { display: block; font-size: var(--text-3xl); font-weight: 700; color: var(--brand-primary); line-height: 1; margin: var(--space-2) 0; } .uniek-dashboard-cards .uniek-card__label { display: block; color: var(--brand-text-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; } /* ----- 5.5 Tabs ------------------------------------------------------ */ .uniek-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--brand-border); margin-bottom: var(--space-4); overflow-x: auto; scrollbar-width: thin; } .uniek-tab-btn { background: transparent; color: var(--brand-text-muted); border: 0; border-bottom: 2px solid transparent; padding: var(--space-3) var(--space-4); font-family: var(--brand-font); font-size: var(--text-base); font-weight: 600; cursor: pointer; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); } .uniek-tab-btn:hover { color: var(--brand-text); } .uniek-tab-btn.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); } .uniek-tab-panel { display: none; } .uniek-tab-panel.is-active { display: block; } /* ----- 5.6 Forms ----------------------------------------------------- */ .uniek-field { margin-bottom: var(--space-4); } .uniek-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--brand-text); margin-bottom: var(--space-1); } .uniek-input, .uniek-select, .uniek-textarea { width: 100%; background: var(--brand-bg-elevated); color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-family: var(--brand-font); font-size: var(--text-base); line-height: 1.4; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .uniek-textarea { min-height: 96px; resize: vertical; } .uniek-input:focus, .uniek-select:focus, .uniek-textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); } .uniek-input:disabled { opacity: 0.55; cursor: not-allowed; } .uniek-input--error { border-color: var(--brand-danger); } .uniek-input--error:focus { box-shadow: 0 0 0 3px var(--brand-danger-soft); } .uniek-field__error { display: block; margin-top: var(--space-1); color: var(--brand-danger); font-size: var(--text-sm); } .uniek-field__hint { display: block; margin-top: var(--space-1); color: var(--brand-text-muted); font-size: var(--text-sm); } /* ----- 5.7 Toasts (errors, confirmations) ---------------------------- */ .uniek-toast-container { position: fixed; bottom: var(--space-4); right: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast); max-width: calc(100vw - var(--space-8)); } .uniek-toast { background: var(--brand-surface); border: 1px solid var(--brand-border); border-left: 4px solid var(--brand-info); border-radius: var(--radius); padding: var(--space-3) var(--space-4); color: var(--brand-text); box-shadow: var(--shadow-md); min-width: 260px; max-width: 420px; animation: uniek-toast-in 200ms ease; } .uniek-toast--error { border-left-color: var(--brand-danger); } .uniek-toast--success { border-left-color: var(--brand-primary); } .uniek-toast--warning { border-left-color: var(--brand-warning); } .uniek-toast--info { border-left-color: var(--brand-info); } .uniek-toast__title { font-weight: 600; color: var(--brand-text-strong); margin-bottom: 2px; } .uniek-toast__body { font-size: var(--text-sm); } .uniek-toast__code { display: block; margin-top: var(--space-1); font-family: var(--brand-font-mono); font-size: var(--text-xs); color: var(--brand-text-muted); } .uniek-toast__close { float: right; background: none; border: 0; color: var(--brand-text-muted); cursor: pointer; font-size: var(--text-lg); line-height: 1; margin-left: var(--space-2); } @keyframes uniek-toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ----- 5.8 Plain HTML tables (when not using Tabulator) -------------- */ .uniek-table { width: 100%; border-collapse: collapse; background: var(--brand-surface); border-radius: var(--radius); overflow: hidden; } .uniek-table th, .uniek-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--brand-border); } .uniek-table th { background: var(--brand-surface-alt); color: var(--brand-text-strong); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; } .uniek-table tr:last-child td { border-bottom: 0; } .uniek-table tbody tr:hover td { background: var(--brand-bg-elevated); } /* ===================================================================== 6. RESPONSIVE HELPERS (driven by uniek-core.js screenCtx) ===================================================================== */ /* These selectors light up after uniek-core.js sets data-* on . */ [data-factor="phone"] .desktop-only { display: none; } [data-factor="tablet"] .phone-only { display: none; } [data-factor="desktop"] .phone-only, [data-factor="desktop"] .tablet-only, [data-factor="wide"] .phone-only, [data-factor="wide"] .tablet-only { display: none; } [data-touch="0"] .touch-only { display: none; } [data-touch="1"] .mouse-only { display: none; } /* ===================================================================== 7. FOUC MITIGATION ===================================================================== */ /* uniek-core.js adds .theme-loading to on load; removes it after applyTenantTheme() resolves. Prevents flash of uNiek green before the tenant brand applies. */ body.theme-loading { opacity: 0; transition: opacity var(--transition-slow); } body.theme-loaded { opacity: 1; } /* Skip-link for keyboard users (a11y) */ .uniek-skip-link { position: absolute; top: -100px; left: var(--space-2); background: var(--brand-primary); color: var(--brand-text-on-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius); font-weight: 600; z-index: var(--z-overlay); transition: top var(--transition); } .uniek-skip-link:focus { top: var(--space-2); }