:root { /* === BRAND ROLES (settable via JS applyBranding) ============== * * 6 ruoli funzionali della palette brand. Vengono sovrascritti * runtime da `applyBranding()` in deskcontrol-portal.js leggendo * `tenant.brand_mc.palette` o `tenant.brand_dc.palette` dal DB. * I default sotto sono i colori storici Re-control / MapControl, * usati quando il tenant non ha ancora settato la palette. * ============================================================== */ --brand-interactive-bg: #f8fafc; /* 1. sfondi card/righe selezionate/banner neutri */ --brand-text-secondary: #475569; /* 2. label form, metadati, testo aiuto */ --brand-text-primary: #0f172a; /* 3. body text (alt nero) */ --brand-border: #e2e8f0; /* 4. bordi card/tabelle/form/separatori */ --brand-base: #890103; /* 5. brand base: hero, heading, pulsanti scuri */ --brand-deep-bg: #1e293b; /* 6. footer e sezioni iperscure */ /* Derivate brand (auto da brand-base) */ --brand-base-light: color-mix(in srgb, var(--brand-base) 85%, white); --brand-base-dark: color-mix(in srgb, var(--brand-base) 80%, black); --brand-base-soft: color-mix(in srgb, var(--brand-base) 12%, white); /* === Aliases backward-compat (mappano CSS vars storiche a 6 ruoli) === * * I file CSS legacy che usano --primary, --bg, --text-main, --border * continuano a funzionare e diventano automaticamente brand-aware. */ --primary: var(--brand-base); --primary-light: var(--brand-base-light); --bg: var(--brand-interactive-bg); --surface: #ffffff; /* fisso bianco card surface */ --surface-alt: var(--brand-interactive-bg); --sidebar-bg: #ffffff; --border: var(--brand-border); --border-strong: color-mix(in srgb, var(--brand-border) 75%, black); --text-main: var(--brand-text-primary); --text-secondary: var(--brand-text-secondary); --text-muted: color-mix(in srgb, var(--brand-text-secondary) 60%, white); /* === Semantic (interactive ora brand-aware) === */ /* --interactive ridefinito 2026-05-03: alias di --brand-base, cosi' link, * pulsanti CTA, tab attivi e accent UI seguono la palette del portale. */ --interactive: var(--brand-base); --interactive-light: #dbeafe; --success: #16a34a; --danger: #dc2626; /* === Geometric === */ --header-height: 56px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* ============================================================== * * REDESIGN OTTANIO V2 — token system (introdotto 2026-05-03) * Riferimento: docs/redesign/DeskControl Perizie - Handoff Sviluppo.md * Approccio: token grigi neutri fissi + token brand come alias del * sistema brand JSONB esistente (--brand-base / --brand-deep-bg). * Coesistono con i token legacy senza sovrascriverli. * ============================================================== */ /* Grigi neutri (palette ottanio v2) */ --ott-50: #F4F6F9; /* sfondi tenui, hover su bianco */ --ott-100: #E8EDF1; /* badge tenui, divisori marcati */ --ott-200: #E4E9EF; /* bordi standard di tutti i componenti (FONDAMENTALE) */ --ott-300: #CBD5E0; /* bordi marcati, track switch off */ --ott-500: #64748B; /* testo secondario, label, icone neutre */ --ott-700: #0F2A33; /* testo titoli minori */ /* Brand (alias dinamici sul sistema brand JSONB) */ --ott-base: var(--brand-base); /* CTA, attivo, link, dato chiave */ --ott-deep: var(--brand-deep-bg); /* header app, tooltip, overlay scuri */ --ott-soft: color-mix(in srgb, var(--brand-base) 85%, white 15%); /* hover primario */ /* Accenti societari (fissi, condivisi MC + DC) */ --ott-red: #890103; /* logo ReControl + azioni distruttive */ --ott-green: #1ABA84; /* esito positivo / pin start */ --ott-warn: #C7891B; /* attenzione / in revisione */ --ott-error: #DC2626; /* errore di input (no brand red) */ /* Semantic alias */ --ink: var(--brand-text-primary); /* testo principale */ --paper: #FFFFFF; /* superfici card */ --bg-app: var(--ott-50); /* sfondo pagina */ /* Spaziatura scala 4 (riferibile come var nel CSS) */ --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-22: 22px; --sp-24: 24px; /* Radius redesign (coesistono con --radius-sm/md/lg/xl/full) */ --rd-r-5: 5px; /* badge/icone */ --rd-r-6: 6px; /* toggle/coord */ --rd-r-7: 7px; /* input/button */ --rd-r-8: 8px; /* card piccole */ --rd-r-9: 9px; --rd-r-12: 12px; /* card grandi/modal */ --rd-r-14: 14px; /* frame */ --rd-r-pill: 999px; /* Shadow redesign (piu' tenui dei legacy --shadow-sm/md/lg) */ --rd-shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --rd-shadow-md: 0 4px 14px -4px rgba(15,23,42,0.10), 0 2px 4px -2px rgba(15,23,42,0.05); --rd-shadow-lg: 0 18px 42px -18px rgba(15,23,42,0.18), 0 8px 16px -8px rgba(15,23,42,0.08); /* Focus ring brand-aware ottanio v2 */ --rd-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ott-base) 18%, transparent); /* Tipografia — scala font-size redesign */ --fs-10-5: 10.5px; --fs-11: 11px; --fs-11-5: 11.5px; --fs-12: 12px; --fs-12-5: 12.5px; --fs-13: 13px; --fs-13-5: 13.5px; --fs-14: 14px; --fs-15: 15px; --fs-17: 17px; --fs-22: 22px; /* Famiglie font (centralizzate) */ --ff-display: 'Archivo', 'Inter', system-ui, sans-serif; /* titoli */ --ff-body: 'Inter', system-ui, -apple-system, sans-serif; /* body */ --ff-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* Letter-spacing CAPS */ --ls-caps-tight: 0.08em; /* titoli sezione */ --ls-caps-wide: 0.1em; /* label form */ /* Transizioni standardizzate */ --t-fast: 100ms; /* hover/color background */ --t-base: 150ms; /* chevron rotation, switch */ --t-panel: 200ms; /* apertura pannelli */ --t-active: 80ms; /* active transform */ } /* Form controls: checkbox/radio/range/progress brand-aware globalmente. * Override puntuali (es. perizie-editor --pe-accent, viewer-multi --ott-base) * vincono per specificita'/cascade. Aggiunto 2026-05-03. */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--brand-base); } /* Mapbox toolbar custom buttons: SVG inline brand-aware via currentColor. * I bottoni standard Mapbox (zoom +/-, compass) usano background-image e * NON sono toccati. Aggiunto 2026-05-03. */ button.mapboxgl-ctrl-icon svg { color: var(--brand-base); } * { box-sizing: border-box; } html { width: 100%; height: 100%; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.5; background: var(--bg); color: var(--text-main); overflow: hidden; width: 100%; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }