/* ============================================================ DRAIVE — TOKEN Sorgente unica di verita' del design system. Autorita': DESIGN.md, che a sua volta ha estratto i valori contando le occorrenze sui fogli del progetto. Dove questo file e' in disaccordo con un foglio di modulo, ha ragione questo file. Si carica PRIMA di draive.core.css. Non contiene regole: solo valori. Nessun selettore oltre :root — se serve una regola, va in draive.core.css. --- Decisione sul primario (2026-08-07) ------------------------- L'azione principale e' NERA, non blu. Il documento diceva #125ef2, ma il codice diceva un'altra cosa da tempo (sfondo #111 in 38 punti, #000 in 15, contro 9 di #125ef2) e il blocco "KTUI button system" in coda a draive.core.css lo aveva gia' imposto con !important su tutti i .btn. Qui la realta' diventa la regola: il nero e' l'azione, il blu e' l'accento (link, voce di menu attiva, marchio). Vedi DESIGN.md §Colori. ============================================================ */ :root { /* ========================================================== 1 — AZIONE E ACCENTO ========================================================== */ /* L'azione. Nero zinc-950: e' il valore che il blocco KTUI usa gia' su tutti i .btn primari. Prima c'erano cinque neri quasi uguali in circolazione (#000, #09090b, #111, #111111, #1d1d20): da qui in avanti ognuno ha un mestiere e un nome. */ --action: #09090b; /* riempimento del bottone principale */ --action-hover: #1d1d20; --on-action: #ffffff; /* L'accento. Non e' un'azione: e' cio' che segnala dove sei e dove puoi andare. Marchio, link, voce di menu attiva. */ --accent: #125ef2; --accent-soft: #5d78ff; /* barre di avanzamento, accenti non-azione */ --on-accent: #ffffff; /* Il nero pieno resta un colore del sistema, distinto dall'azione: e' il fondo della colonna di navigazione e delle superfici video, dove impedisce che il caricamento sia un buco bianco. */ --black: #000000; --white: #ffffff; /* ========================================================== 2 — INCHIOSTRO La gerarchia del testo si fa con peso e colore, non con la scala: le misure stanno quasi tutte fra 11 e 16px. ========================================================== */ --ink: #111827; /* titoli e valori che contano */ --ink-body: #3f4254; /* testo corrente */ --ink-muted: #6b7280; /* etichette, metadati, unita' di misura */ --ink-muted-soft: #8a90a2; --ink-faint: #9ca3af; /* segnaposto, testo disabilitato */ /* ========================================================== 3 — SUPERFICI Il fondo e' bianco, non tinto. Niente canvas crema, niente gradienti. Cio' che deve staccare usa grigi appena azzurrati. ========================================================== */ --canvas: #ffffff; /* fondo di schede e portlet */ --surface-soft: #f9fafc; /* righe alternate, riquadri passivi */ --surface-alt: #f3f4f6; /* intestazioni di tabella */ --surface-tint: #f6f7fb; --surface-track: #eef0f4; /* pista delle barre di avanzamento */ --hairline: #eef0f6; /* un solo grigio per TUTTE le separazioni */ /* Grigi di servizio: bordi che devono farsi vedere (a differenza del filo), elementi disabilitati, icone spente. Sono in DESIGN.md ma non erano mai diventati variabili: showroom usava --grey-line con un fallback scritto a mano, cioe' il fallback faceva tutto il lavoro perche' la variabile non esisteva. */ --grey-line: #e4e6ef; /* bordo visibile: bottone secondario, riquadri */ --grey-soft: #d5d9e2; --grey-mid: #c3c8d4; /* bordo al passaggio del mouse, dato mancante */ --grey-icon: #b5b5c3; /* icone spente */ /* ========================================================== 4 — SEMANTICI E RAMPE DEI BADGE Verde, giallo e rosso significano la stessa cosa in tutti i moduli. Gli stati configurati dall'amministratore prendono il colore dalla banca dati: queste rampe servono agli stati calcolati (soglie, completezza, avvisi). ========================================================== */ --success: #34bfa3; --success-strong: #1a9c52; --warning: #ffb822; --warning-strong: #d99a00; --danger: #ff2d55; --danger-strong: #fd397a; /* Rampe dei badge: fondo chiaro + testo scuro, una terna per significato — fondo, fondo tenue (riquadri ampi), bordo. E' la forma con cui tutto il progetto disegna gli stati. */ --success-bg: #e3f4e9; --success-bg-soft: #f2fbf8; /* riquadri ampi, fondo appena tinto */ --success-bg-tint: #d9f0e8; /* bordo della terna verde */ --success-text: #1a7f45; --warning-bg: #fff4d6; --warning-bg-strong: #f3e2ac; /* bordo della terna ambra */ --warning-text: #8a6100; --warning-text-deep: #7a5400; --danger-bg: #ffe3ec; --danger-bg-soft: #fff5f8; --danger-bg-tint: #f6c9d8; /* bordo della terna rossa */ --danger-text: #b0134e; --danger-alt: #d61f66; /* rosso al passaggio del mouse */ --info-bg: #e8ecff; --info-bg-soft: #c3ccff; /* bordo del riquadro informativo */ --info-text: #4a5fd0; /* soglie di giacenza: gli stessi tagli che generano i tag Stock120 e Stock180, qui come colori del semaforo in lista */ --giacenza-ok: #1a9c52; --giacenza-warn: #d99a00; --giacenza-bad: #ff2d55; /* --- Blocchi di planning (2026-08-07) ------------------------------ I calendari — officina e auto di cortesia — disegnano gli stati come RIEMPIMENTI con testo bianco sopra, non come badge chiari. E' una forma diversa dalle rampe qui sopra e ha bisogno di valori propri: un fondo che regge il bianco a 4.5:1. Non sono tinte nuove: sono i colori di testo delle rampe semantiche, riusati come fondo. Il modulo aveva sette stati in una palette tutta sua (verde #2db36c, ambra #e6a817, rosso #e74c3c, viola #8e44ad) e sei di quei sette non arrivavano a 4.5:1 col bianco — l'ambra stava a 2.10:1. Qui il significato resta identico e il testo si legge. */ --event-success: #1a7f45; /* pianificata, in corso 5.04:1 */ --event-warning: #8a6100; /* anticipata, da validare 5.54:1 */ --event-danger: #b0134e; /* in ritardo, rifiutata 6.89:1 */ --event-pending: #4a5fd0; /* in attesa 5.47:1 */ --event-neutral: #6b7280; /* conclusa, inattiva 4.83:1 */ /* Anello interno che distingue "gratuita in attesa di validazione" dagli altri blocchi ambra. Chiaro, non scuro: deve staccare dal riempimento su cui sta (4.30:1), che e' il confronto che conta per un anello interno. Contro il bianco della griglia non stacca, ma non deve: a separare il blocco dalla griglia ci pensa gia' il riempimento, e quello stato porta anche un badge con del testo — il secondo segnale non cromatico che chiede DESIGN.md. */ --event-warning-ring: var(--warning-bg-strong); /* --- Tipi dell'Agenda commerciale (28/09/2026) --------------------- Il TIPO si legge dal colore, lo STATO dalla forma (barrato se esitato, rosso se scaduto): per questo qui non ci sono tinte di stato. Terne testo / fondo / bordo, come le rampe semantiche; i testi sono quelli dei blocchi di planning qui sopra, gia' a 4.5:1 sul loro fondo. Il viola dei preventivi e' il #7c3aed della Bacheca, scurito per il contrasto. */ --agenda-appuntamento: var(--accent); --agenda-appuntamento-bg: var(--info-bg); --agenda-appuntamento-bd: var(--info-bg-soft); --agenda-test_drive: var(--event-success); --agenda-test_drive-bg: var(--success-bg); --agenda-test_drive-bd: var(--success-bg-tint); --agenda-chiamata: var(--event-warning); --agenda-chiamata-bg: var(--warning-bg); --agenda-chiamata-bd: var(--warning-bg-strong); --agenda-preventivi: #6d28d9; --agenda-preventivi-bg: #f1eafe; --agenda-preventivi-bd: #ddd0fb; --agenda-promemoria: #4b5563; --agenda-promemoria-bg: var(--surface-alt); --agenda-promemoria-bd: var(--grey-line); /* ========================================================== 5 — TIPOGRAFIA Carattere unico. Un gestionale non ha titoli da campagna, quindi niente serif e niente display. La scala usa i mezzi punti (11.5, 12.5) perche' con corpi cosi' piccoli un salto intero e' troppo. ========================================================== */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; /* --- DIMENSIONE DEL TESTO DELLA PIATTAFORMA (2026-09-07) -------- Un fattore unico che moltiplica OGNI font-size del progetto: i fogli non scrivono piu' `font-size: 13px` ma `font-size: calc(13px * var(--dv-fs,1))`. Vale per i token qui sotto, per le globali di draive.core.css, per i fogli di modulo e per plugins.bundle.css — 1.692 dichiarazioni in 55 file. PERCHE' UN FATTORE E NON UNA SCALA NUOVA. Le misure vanno da 10.5 a 26px e la loro gerarchia e' gia' decisa: moltiplicarle tutte per lo stesso numero la conserva, riscriverle a mano tre volte no — e alla prima misura nuova le tre scale divergono. PERCHE' NON SI TOCCA `html { font-size }`, che sarebbe la leva ovvia: il rem qui non misura solo il testo. Bootstrap e Metronic scrivono in rem anche padding, altezze e distacchi, quindi spostare la base rimpicciolirebbe il layout — sarebbe lo zoom del browser, che l'utente ha gia'. Qui si muove solo il testo. IL VALORE NON SI SCRIVE QUI. Lo porta l'attributo data-dv-fs sul , stampato da includes/header.php dalla preferenza dell'utente (uiTextSize) — v. le tre regole in fondo al file. Questo 1 e' il default per chi non ha scelto niente. LA FALLBACK `,1` NELLE 1.692 CHIAMATE NON E' DECORATIVA: gli asset vanno online un file alla volta, e finche' questo foglio e' quello vecchio i moduli gia' aggiornati devono comportarsi come prima invece di perdere il font-size. */ --dv-fs: 1; /* Il numero di una scheda dato e' l'unica cosa che sta sopra al titolo di pagina: su un cruscotto e' il motivo per cui la pagina esiste. Passo aggiunto alla scala il 2026-08-07 e registrato in DESIGN.md — non e' una deriva, e' uno step nuovo e dichiarato. */ --fs-kpi: 26px; --fw-kpi: 700; --lh-kpi: 1.15; --fs-page-title: 22px; --fw-page-title: 700; --lh-page-title: 1.3; --fs-section-title: 18px; --fw-section-title: 600; --lh-section-title: 1.35; --fs-card-title: 16px; --fw-card-title: 600; --lh-card-title: 1.4; --fs-subtitle: 15px; --fw-subtitle: 600; --lh-subtitle: 1.4; --fs-lead: 14px; --fw-lead: 500; --lh-lead: 1.45; --fs-body: 13px; --fw-body: 400; --lh-body: 1.5; --fs-table: 12.5px; --lh-table: 1.45; --fs-meta: 12px; --fw-meta: 500; --lh-meta: 1.4; --fs-caption: 11.5px; --fw-caption: 500; --lh-caption: 1.4; --fs-badge: 11px; --fw-badge: 600; --lh-badge: 1.2; --fs-micro: 10.5px; --fw-micro: 600; --lh-micro: 1.2; /* icona di stato vuoto — passo gia' documentato in DESIGN.md */ --fs-icon-empty: 30px; /* pesi, per non riscriverli a mano */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ========================================================== 6 — FORME Gerarchia dei raggi. E' l'asse gia' piu' coerente del progetto: 10px compare 109 volte, 8px 80 volte. Va rispettata, non reinventata. ========================================================== */ --radius-xs: 4px; /* barre, tacche, elementi minuti */ --radius-sm: 6px; --radius-md: 8px; /* elementi dentro una scheda */ /* 10px e' il raggio della casa (109 occorrenze) ed e' anche il --radius di ReUI (0.625rem). Da qui in avanti lo condividono schede, campi e bottoni: un solo raggio per tutto cio' che si tocca. Prima i campi stavano a 14px e i bottoni a 6px. */ --radius-card: 10px; /* schede, portlet, riquadri di nota */ --radius-control:10px; /* campi di form */ /* BOTTONI A 7px — 07/09/2026, scelta di Daniele sul modale «Nuova auto» delle auto di cortesia, preso come riferimento per tutta la piattaforma. Si scosta dai 10px condivisi qui sopra apposta: un bottone e' piccolo (32px di altezza) e a 10px il raggio gli mangia quasi un terzo del fianco, mentre su una scheda alta 200px gli stessi 10px si leggono appena. Chi ha scritto `border-radius: var(--radius-btn)` su qualcosa che bottone non e' — contenitori di gruppi, riquadri di nota accanto a una barra di pulsanti — ha dichiarato «voglio lo stesso raggio dei bottoni» e SEGUE questo valore: e' il motivo per cui il token e' uno solo invece di essere scritto a mano nel blocco DRAIVE BUTTONS. */ --radius-btn: 7px; /* bottoni */ --radius-lg: 12px; --radius-modal: 16px; /* superfici in sovrimpressione: su una superficie grande 16px legge come 10px su una scheda. E' la resa gia' in uso sui modali, non un valore nuovo. */ --radius-aside: 18px; /* colonna di navigazione */ --radius-pill: 999px; /* badge e pillole di stato */ --radius-circle: 50%; /* ========================================================== 7 — SPAZI Scala a passi corti: la pagina deve contenere molto. Otto valori, nient'altro. Prima ne erano in uso 261 di distinti. ========================================================== */ --space-xxs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 10px; --space-base:12px; --space-lg: 14px; --space-xl: 18px; --space-xxl: 24px; /* ========================================================== 8 — OMBRE Ne esiste una sola, cosi' leggera da leggersi come un bordo. Le altre due sono anelli di focus, non ombre. ========================================================== */ --shadow-card: 0 1px 2px rgba(16,24,40,.04); --ring-focus: 0 0 0 3px rgba(17,24,39,.08); /* L'anello d'errore e' piu' largo e piu' saturo di quello di focus: 4px contro 3, opacita' .18 contro .08. Deve farsi vedere anche quando il campo NON ha il fuoco, che e' il caso in cui l'utente torna sul modulo e deve capire dove ha sbagliato. Non 6px come nel riferimento: in un modulo a due colonne gli aloni di due campi affiancati arrivano a toccarsi, e nella colonna filtri sborda. */ --ring-error: 0 0 0 4px rgba(255,45,85,.18); /* ========================================================== 9 — MOTO Le uniche transizioni del sistema. Mai "all": si dichiarano le proprieta' che cambiano davvero. ========================================================== */ --motion-base: 150ms cubic-bezier(0.4, 0, 0.2, 1); --motion-bar: 350ms ease; /* ========================================================== 10 — GEOMETRIA DEI CONTROLLI ========================================================== */ /* Bottone — geometria misurata sui componenti ReUI renderizzati (reui.io/components/button, 2026-08-07): predefinito 32px di altezza, 10px di padding orizzontale, raggio 10px, testo 14px peso 500, gap 6px. Prima: 34px, 12px, raggio 6px, testo 13px. */ --btn-h-sm: 28px; --btn-px-sm: 8px; --btn-fs-sm: 13px; --btn-h-md: 32px; --btn-px-md: 10px; --btn-fs-md: 14px; --btn-h-lg: 40px; --btn-px-lg: 16px; --btn-fs-lg: 14px; --btn-gap: 6px; --btn-icon: 16px; /* Icona nelle taglie: ReUI scala il glifo con il testo, non lo tiene fisso. sm 14, md 16, lg 16 — misurati insieme ai valori sopra. Prima erano scritti a mano dentro draive.core.css. */ --btn-icon-sm: 14px; --btn-icon-lg: 16px; /* Anello di focus dei bottoni. Non e' --ring-focus (rgba .08): su un fondo nero zinc-950 un anello all'8% non si vede, e il focus da tastiera e' l'unico indicatore che resta dopo aver tolto le ombre del tema. Questo sta al 16% ed e' visibile sia sul nero sia sul bianco. 3px come il ring-[3px] di ReUI. */ --btn-ring: 0 0 0 3px rgba(9, 9, 11, .16); /* Disabilitato: ReUI usa opacity-50 + pointer-events-none. */ --btn-disabled-opacity: .5; /* Barra di scorrimento — consumati dal blocco "DRAIVE SCROLLBAR" in coda a draive.core.css, che e' l'unico posto in cui si disegna una barra. La corsia e' 10px ma il pollice ne occupa 6: i 2px per lato sono un bordo trasparente ritagliato in padding-box, cosi' il pollice non tocca il bordo del contenitore e la superficie sensibile al puntatore resta comunque di 10px. Il colore e' un grigio della famiglia dei bordi: la barra e' un indicatore, non un elemento di interfaccia. */ --scrollbar-size: 10px; --scrollbar-inset: 2px; --scrollbar-thumb: #c7cbd6; --scrollbar-thumb-hover: var(--ink-faint); /* campo di form: i token --draive-* restano i nomi canonici perche' il blocco autorevole "DRAIVE FIELDS" in draive.core.css li consuma per nome. Non rinominarli senza toccare quel blocco. */ /* Superficie del campo — rivista il 2026-08-07 sul linguaggio ReUI. Prima era un riempimento grigio senza bordo (#f2f2f2) e l'hover si sentiva schiarendo il fondo. Adesso il campo e' bianco con un bordo di 1px, come nei componenti ReUI: il bordo dice dov'e' il campo e lascia che sia il contenuto a fare il colore. L'animazione della label non e' toccata: il meccanismo flottante legge solo questi token, non li ridefinisce. */ --draive-field-bg: #ffffff; --draive-field-bg-hover: #ffffff; /* l'hover ora si sente sul bordo */ --draive-field-bg-focus: #ffffff; --draive-field-border: var(--grey-line); --draive-field-border-hover: var(--grey-mid); --draive-border-focus: #111111; --draive-border-error: #ff2d55; --draive-ring-focus: var(--ring-focus); --draive-ring-error: var(--ring-error); --draive-radius: var(--radius-control); /* 47px, non 56: valore scelto dall'utente il 2026-08-07. Il campo alto 47 con padding 22/15/7 lascia 18px al testo — abbastanza per il valore sotto la label flottata, e una riga piu' compatta in un modulo a due colonne. E' la sorgente: 22 punti la consumano. */ --draive-control-height: 47px; --draive-control-height-sm: 34px; /* pager e toolbar */ --draive-placeholder: #8b8f9c; --draive-label-color: #7a7a7a; /* label a riposo, centrata nel campo */ --draive-label-float: #666666; /* label flottata in alto */ --draive-label-focus: #111111; --draive-transition: var(--motion-base); /* checkbox e radio — misure della ricetta ReUI (.cn-checkbox). Le REGOLE stanno tutte nel blocco DRAIVE CHECKS di draive.core.css: qui ci sono solo i tre valori che quel blocco legge per nome. 16px e' "size-4", non una scelta locale: era 20 e faceva del checkbox l'unico controllo del prodotto piu' grande del suo riferimento. Il nero e' --action, lo stesso dei bottoni primari (era --ink, #111827, di mezzo grado piu' blu: due neri diversi nella stessa riga di form). */ --draive-check-size: 16px; --draive-check-radius: var(--radius-xs); /* 4px = rounded-[4px] */ --draive-check-checked: var(--action); /* bg-primary */ /* colonna di navigazione -------------------------------------------------------------- Dal 2026-08-08 la colonna e' due colonne: una RAIL di icone delle macro-aree, sempre visibile, e un PANNELLO con le voci dell'area scelta, che e' l'unica parte che si chiude. La larghezza totale resta la somma delle due, cioe' esattamente i 280px di prima: nessuna pagina si sposta per via del refactoring, e --aside-w-collapsed non e' piu' un valore a se' ma la rail. */ /* 43 e non 64 (2026-08-09): la rail e' larga esattamente quanto la linguetta di macro-area che la riempie, e la linguetta non deve essere piu' larga di quanto serve a reggere la sua icona — 20px di icona con 11,5 di respiro per parte. Ci si e' arrivati in due passi chiesti a vista: prima 48 (icona piu' 14 per parte, sulla griglia da 8), poi altri 5px tolti dal lato destro. A 43 l'emblema NON puo' piu' restare un riquadro da 40 — gli avanzerebbero 1,5px per parte — quindi segue la rail come la linguetta: e' un marchio senza sfondo, la sua scatola non si vede. Il bersaglio del puntatore e' 43x40: sotto i 44px raccomandati dalle linee guida, ma l'altezza era gia' 40 da sempre e la scelta di recuperare larghezza e' esplicita. I 21px risparmiati rispetto ai 64 iniziali li prende il contenuto, a colonna aperta e chiusa. */ /* A COLONNA APERTA la rail e' 38: la card nera accanto regge il peso visivo, quindi la linguetta puo' stringersi. A colonna CHIUSA resta 43 (vedi blocco 6 di draive.sidebar.css), perche' li' la rail e' l'unica cosa a schermo e 38 la farebbero sembrare un residuo. L'anteprima al passaggio del mouse tiene il valore da chiusa: cosi' il rientro del contenuto non si sposta per una sfiorata di mouse. */ --aside-rail-w: 38px; /* icone macro-area, non si chiude mai */ --aside-panel-w: 216px; /* voci dell'area selezionata */ --aside-w: calc(var(--aside-rail-w) + var(--aside-panel-w)); --aside-w-collapsed: var(--aside-rail-w); --aside-bg: var(--black); --aside-radius: var(--radius-aside); --aside-inset: 5px; /* stacco della colonna dal bordo finestra */ --aside-item-h: 36px; --aside-item-radius: var(--radius-md); /* La maniglia di collapse: area di presa generosa (28x48) attorno a una linea di 2x16 che si vede appena. Si tocca facile, non si nota. --aside-grip-inset e' quanto la linea sta staccata dal bordo della card: 2px dentro la fessura di --aside-inset, cosi' non tocca ne' la colonna nera ne' il contenuto. */ --aside-grip-hit-w: 28px; --aside-grip-hit-h: 48px; --aside-grip-pad: 8px; /* dalla sinistra dell'area di presa alla linea */ /* Dal bordo della card alla linea. 5px la mettono al CENTRO della fessura fra la colonna nera e la colonna filtri delle liste, che e' larga esattamente 12px e lo resta anche a colonna chiusa perche' ogni pezzo della catena segue --aside-w: bordo card = --aside-inset + --aside-w campo filtri = --aside-w + 10 (rientro .kt-wrapper) + 5 (padding di #kt_content .kt-container) + 2 (padding di #kt_inbox_aside) cioe' 12px di stacco costante, centro a +6, e una linea di 2px va posata a +5. Sulle pagine senza colonna filtri la linea cade sul bordo del contenuto, che e' comunque chiaro. */ --aside-grip-inset: 5px; /* Meta' dello sbandamento delle punte quando la linea si piega: 8·sin(40°) = 5,14px di crescita da un lato sola, quindi spostando di 2,5px in senso contrario la freccia resta centrata nella fessura esattamente come la linea da ferma. */ --aside-grip-swing: 2.5px; /* 260ms e' il punto in cui il movimento si legge come un movimento e non come un salto, restando sotto la soglia dell'attesa. La curva e' la stessa di --motion-base: e' piu' lento, non diverso. */ --aside-motion: 260ms cubic-bezier(.4, 0, .2, 1); /* --- Rampa della colonna scura (2026-08-07) ------------------------ Il pannello della navigazione e' l'unica superficie scura del prodotto e aveva una palette tutta sua, scritta a mano: sei grigi di testo (#e6e8ec, #d0d5dd, #c8cdd5, #a9b0b8, #a1a5b7, #8a8f98) e sei superfici (#0f1115, #111114, #171a21, #191c23, #1f2430, #222633), dove i livelli che servono sono tre per parte. Qui diventano tre e tre. */ --nav-text: #e6e8ec; /* voce attiva, testo che conta */ --nav-text-muted: #a9b0b8; /* voci a riposo */ --nav-text-faint: #8a8f98; /* intestazioni di sezione, ADMIN/OFFICINA */ --nav-surface: #171a21; /* voce attiva, riquadri in rilievo */ --nav-surface-soft: #111114; /* riquadri passivi, fondo del selettore */ --nav-surface-raised: #222633; /* hover su un riquadro gia' in rilievo */ --nav-line: rgba(255,255,255,.06); /* separazioni sul fondo scuro */ --nav-line-soft: rgba(255,255,255,.02); /* --- Aggiunte del refactoring sidebar (2026-08-08) ---------------- Tre valori che prima erano scritti a mano dentro le regole. --nav-hover e' volutamente piu' leggero di --nav-surface: sono due stati diversi (sto passando sopra / sono qui) e con lo stesso grigio non si distinguono. */ --nav-hover: rgba(255,255,255,.045); --nav-line-strong: rgba(255,255,255,.14); /* bordo del tooltip */ --nav-focus: #6ea8ff; /* anello di focus da tastiera sul nero */ /* La maniglia di collapse e' l'unico pezzo della navigazione che NON sta sul nero: vive nella fessura fra la card e il contenuto chiaro, quindi i suoi due grigi sono scuri, non chiari come tutti gli altri qui. */ --nav-grip: rgba(17,18,20,.28); --nav-grip-strong: rgba(17,18,20,.60); /* iniziali quando l'utente non ha una foto: la coppia verde del badge Metronic (kt-badge--unified-success) resa esplicita */ --nav-avatar-bg: #1d3a30; --nav-avatar-text: #7fe3bd; /* --- La rail sul fondo chiaro (2026-08-09) ------------------------- La card nera e' diventata il SOLO pannello: la rail delle macro-aree sta direttamente sul fondo pagina (#F6F7FB), quindi i suoi colori vengono dall'inchiostro chiaro, non dalla rampa scura qui sopra. La macro-area selezionata usa la coppia dell'azione — il quadrato nero e' lo stesso nero dei bottoni primari, non un quarto nero. */ --rail-icon: var(--ink-muted); /* macro-area a riposo */ --rail-icon-strong: var(--ink); /* sotto il mouse */ --rail-hover: rgba(17, 24, 39, .06); --rail-on-bg: var(--action); /* macro-area selezionata */ --rail-on-icon: var(--on-action); /* --- Colonna filtri delle liste (2026-08-10) ----------------------- La colonna esiste identica in nove moduli (showroom, cruscotto, recensioni, report officina, utenti, aziende, opt, academy, supporto) e fino a ieri ognuno la misurava per conto suo: la larghezza arrivava da inbox.css (275px) ma lo stato "peek" ne dichiarava 300, e il rientro del contenuto era 2px a sinistra e 16 a destra. Da qui in poi i due numeri hanno una sorgente sola. --filter-gutter e' il rientro del contenuto dai bordi della colonna, UGUALE sui due lati. Non sta sulla card ma sui suoi figli: la card ha padding orizzontale zero, cosi' la barra di scorrimento si disegna sul suo bordo e non 16px dentro il pannello (era il modello dello showroom, ora e' di tutti). */ --filter-col-w: 275px; --filter-gutter: 16px; /* 2026-08-11 — il rientro ha smesso di essere uguale sui due lati: a SINISTRA campi, tab e pane Salvati/Storia stanno a 5px dal bordo della colonna (scelta a vista); a destra resta il token pieno. Consumatori: .kt-inbox__nav (draive.core.css), .showroom-filter-tabs e i pane saved/history (showroom custom.modulo.css). */ --filter-gutter-left: 5px; /* I PULSANTI AZIONE del pannello (Cancella filtri, Salva ricerca, Applica) non seguono il rientro dei campi: si allineano al bottone "Filtro" della testata, che sta 2px dentro il bordo della colonna. E' la verticale che il pannello aveva da sempre — chi guarda la pagina legge quella riga, non la scatola dei campi. */ --filter-btn-gutter: 2px; /* ========================================================== 11 — COMPAT Token legacy ancora consumati da fogli non ancora rivisti. Restano al loro VALORE ORIGINALE: cambiarlo qui muoverebbe pagine che non stiamo guardando. Si migrano quando il modulo che li usa arriva al suo turno, e allora spariscono da qui. --primary-500/600 blu Metronic, diverso dall'accento DRAIVE. 9 usi in draive.core.css (schede perizia), 1 in admin/brand. -> usare --accent --radius 12px, nome troppo generico. 2 usi. -> usare --radius-lg Nota su --radius-lg: nel vecchio :root valeva 16px, qui vale 12px come vuole la scala di DESIGN.md. I 6 punti che si aspettavano 16px sono stati portati a mano su --radius-modal (stesso valore, quindi nessuno di loro cambia aspetto) invece di lasciarli scivolare a 12px senza accorgersene: 2 modali in draive.core.css, dove 16px e' la resa voluta, e 4 schede in admin/brand, che tornano a --radius-card quando quel modulo arriva al suo turno. ========================================================== */ --primary-500: #3699ff; --primary-600: #187de4; --radius: 12px; /* Alias di transizione: i moduli non ancora migrati usano questi nomi. Puntano ai canonici, quindi non c'e' divergenza possibile. */ --color-black: var(--black); --color-white: var(--white); --text-muted: var(--ink-muted); --border-soft: var(--hairline); --primary-draive: var(--accent); --primary-soft: var(--accent-soft); --primary: var(--accent); } /* ============================================================ DIMENSIONE DEL TESTO — i tre valori L'unico posto del progetto dove si decide quanto e' "piccolo" e quanto e' "grande". Il selettore e' sempre la radice: la qualifica con l'attributo serve a battere il `--dv-fs: 1` di :root (0,2,0 contro 0,1,0), cosi' l'ordine di caricamento non conta. MEDIO E' DRAIVE COM'E' OGGI: 1, esatto, non "circa". Chi non ha mai scelto vede quello che vedeva prima, al pixel. PICCOLO e' la densita' di Tcar, un passo sotto: 0.92 toglie circa un pixel al testo corrente (13 -> 11.96) e mezzo alle tabelle (12.5 -> 11.5). GRANDE e' lo stesso passo dall'altra parte, come chiesto: 1.08. Per cambiare la distanza fra i tre passi si toccano questi due numeri e basta: tutto il resto e' moltiplicazione. ============================================================ */ :root[data-dv-fs="s"] { --dv-fs: 0.92; } :root[data-dv-fs="m"] { --dv-fs: 1; } :root[data-dv-fs="l"] { --dv-fs: 1.08; } /* ============================================================ BREAKPOINT Le media query non leggono le variabili CSS: questi valori si scrivono a mano, ma sono QUESTI e non altri. Il progetto ne aveva 50 di distinti, con --max-width:1023px e min-width:1024px che si sovrapponevano allo stesso pixel. 576px telefono 768px sotto: gli elenchi diventano schede e le colonne laterali passano sopra il contenuto 1024px tavoletta / portatile piccolo. Il confine si scrive sempre come (max-width: 1024px) oppure (min-width: 1025px): mai 1023, mai min-width 1024. 1400px schermo largo Attenzione alla fascia 768-1024px: alcune regole di piattaforma in draive.core.css impongono li' max-height e overflow alle colonne laterali con selettori che usano l'id. Vanno neutralizzate con un selettore che includa a sua volta l'id, altrimenti si ottiene uno scorrimento dentro lo scorrimento. ============================================================ */ /* ============================================================ VALORI STORICI (spostati da custom.css il 23/10/2026) Disegni SVG condivisi (freccia dei select, calendario, ✕ di select2), la rampa grigia Metronic e i valori di form legacy ancora consumati da qualche foglio. Stavano in testa a custom.css: i valori vivono qui, le regole in draive.core.css. Chi li usa ancora li sostituisca con i token qui sopra quando passa di li'. ============================================================ */ :root { /* ============================================================ LA FRECCIA DEI SELECT — dichiarata UNA volta, usata da tutti ------------------------------------------------------------ Nel progetto esistono tre famiglie di select (nativi, select2, bootstrap-select) piu' l'aggancio .draive-chevron per i controlli fuori scala: quattro punti che devono mostrare LA STESSA freccia. Fino al 2026-08-08 l'SVG era ricopiato in tutti e quattro, e bastava aggiornarne tre per averne una diversa dalle altre. Adesso il disegno sta qui e la' si scrive var(--draive-chevron). Il viewBox e' RITAGLIATO intorno alla polyline (4.75 7.75 14.5 8.5 = il tracciato piu' meta' spessore per lato) e non 0 0 24 24. La differenza conta per due motivi: 1. la scatola coincide col disegno, quindi background-size ne detta l'altezza reale. Con il viewBox intero la polyline occupava 8.5/24 del lato: una scatola da 12px dava un segno alto 4.25px, contro i 6.74px della ✕ di select2 — due segni visibilmente spaiati nello stesso campo; 2. `background-position: right 15px center` allinea il DISEGNO a 15px dal bordo, non una scatola con l'aria intorno. 12 x 7 tiene l'altezza pari alla ✕ (7 contro 6.74, scarto invisibile) e resta su numeri interi, che non sfumano il tratto. IL COLORE — #8b8f9c, scelto il 2026-08-08. Sta in mezzo fra il filo del bordo (#e4e6ef, che a 1.25:1 rendeva la freccia quasi invisibile) e il grigio delle label (#7a7a7a): 3.23:1 su bianco, quindi passa la soglia di 3:1 che WCAG chiede agli elementi non testuali. E' scritto a mano dentro il data URI e non come var(), perche' var() non si interpola dentro una url(). L'unica alternativa sarebbe disegnare l'icona con mask-image e colorarla con background-color, ma sui