/* ============================================================================ theme.css - UNICO posto dove vivono colori, font e misure. Per applicare i colori aziendali: cambiare i 4 valori nel blocco MARCHIO. Tutto il resto (grigi, stati, ombre) si adatta da soli. #ANCHOR: tema ========================================================================= */ :root { /* ---- MARCHIO VRS GROUP ------------------------------------------------- Estratti dal logo (web/assets/logo.webp): cyan #00AEEF, grigio scuro #58595B, grigio chiaro #A7A9AC. I grigi del logo sono anche la scala neutra di tutta l'app, cosi' l'insieme e' riconoscibilmente VRS. */ /* Il cyan puro del logo (#00AEEF) resta nel logo. Nell'interfaccia il blu e' una LAGUNA: stessa tonalita' (cosi' i quattro passi restano distinti fra loro, indaco e verde compresi) ma piu' profonda e piu' satura - il cyan da schermo era piatto, questo ha corpo. 3,6:1 su bianco come riempimento (il cyan faceva 2,5), e il tono scuro per il testo. 30a sessione. */ /* FAMIGLIA VRS (D2, 23/09): l'accento dell'interfaccia e' la laguna scurita di css/vrs-famiglia.css, la stessa del Planning. La laguna piena #0D96CF resta solo come colore di DATO (passo "controllata", "previsto"): la tavolozza dei quattro passi e' validata per i daltonici e non si tocca. */ --laguna: #0D96CF; --marchio: var(--vrs-accent); /* bottoni, focus, pillole accese */ --marchio-scuro: var(--vrs-accent-hover); /* testo e hover: 6,6:1 su bianco */ --marchio-tenue: var(--vrs-accent-soft); /* riempimenti leggeri, righe selezionate */ --su-marchio: var(--vrs-on-accent); /* cio' che sta SOPRA l'accento pieno */ --accento: #00A37A; /* completato: verde che sta bene accanto al cyan */ --accento-scuro: #007A5C; /* dove serve testo bianco sul verde (avvisi) */ /* ---------------------------------------------------------------------- */ /* Fondi e inchiostri (30a sessione, restyling premium). Il fondo non e' piu' un grigio freddo da pannello di controllo ma una PORCELLANA calda, e l'inchiostro e' una grafite neutra profonda: e' l'accostamento della carta di pregio - avorio, nero, un solo colore vivo (il cyan del marchio) che cosi' brilla di piu' perche' non ha intorno altri toni freddi. I grigi intermedi seguono la stessa temperatura. Rapporti rimisurati: inchiostro 17,8:1 su bianco, testo tenue 5,4:1 su bianco e 4,8:1 sul fondo. */ /* D2: i neutri sono quelli di famiglia (vrs-famiglia.css), freddi come nel Planning. I nomi restano: cambiano solo i valori a cui puntano. */ --fondo: var(--vrs-bg); --superficie: var(--vrs-surface); --superficie-2:var(--vrs-surface-2); --superficie-3:var(--vrs-surface-3); --bordo: var(--vrs-border); --bordo-forte:var(--vrs-border-strong); --inchiostro: var(--vrs-text); --inchiostro-2:var(--vrs-text-2); --tenue: var(--vrs-muted); /* 5,2:1 sul fondo: AA ovunque */ --tenue-2: var(--vrs-muted); /* testo micro (id, localita', totali) */ --velo-modale: var(--vrs-overlay); /* VIS-10: al buio resta scuro */ --su-allerta: #FFFFFF; /* testo sopra l'ambra pieno (banner, avvisi) */ /* Il filo a bassa opacita': e' il bordo di tutta l'interfaccia premium - si vede il salto di superficie, non una linea disegnata. */ --bordo-lieve: color-mix(in srgb, var(--bordo) 62%, transparent); color-scheme: light; /* Stati della catena mappatura, nell'ordine dei quattro passi: stampata -> controllata -> completa rapportino -> ricambi e scadenze. Verificati col validatore della skill dataviz su superficie #FFFFFF: tutti in banda L, coppie adiacenti separate anche in protanopia/deuteranopia (peggior coppia 13,5 su una soglia di 8). Il primo passo era un grigio neutro ("solo stampata non deve chiamare l'occhio"): dalla 28a sessione e' un oro, perche' un segmento grigio su una capsula grigia non si vedeva e il committente vuole QUATTRO colori. Caldo, e' l'unico caldo fra i passi; l'arancio dell'allerta sta sul bordo della capsula, non dentro, quindi non si confondono. */ --st-stampata: #B8860B; /* oro: contrasto 3,3:1 su bianco, come segmento basta */ --st-controllata:var(--laguna); --st-corretta: #A0307E; /* magenta: L .50 C .17 contrasto 6,5:1 su bianco. Era var(--accento), cioe' lo STESSO verde con cui tutta l'app dice "mappatura completa": nei grafici il verde sembrava allora il terzo passo invece del completamento intero. Il verde ha adesso un solo significato, questo passo ha il suo. */ --st-ricambi: #5B67D6; /* indaco: L .56 C .17 contrasto 4,8:1 su bianco */ --st-vuoto: #E4E5E8; /* MAPPATURA COMPLETA = una spunta sola (tutti e quattro i passi fatti), ed e' una grandezza, non un'identita': una tinta sola, il verde del marchio. `--pr-*` e' la rampa sequenziale "a che punto siamo" dello stesso verde, da 0 spunte a completa: un tono solo a cinque chiari, cosi' non insegna un secondo alfabeto di colori accanto ai quattro passi. */ --completa: var(--accento); --completa-testo: var(--accento-scuro); /* "a posto" scritto: sul chiaro serve il verde profondo */ --pr-0: var(--st-vuoto); --pr-1: color-mix(in srgb, var(--completa) 26%, var(--st-vuoto)); --pr-2: color-mix(in srgb, var(--completa) 50%, var(--st-vuoto)); --pr-3: color-mix(in srgb, var(--completa) 74%, var(--st-vuoto)); --pr-4: var(--completa); /* ANZIANITA' DELL'ARRETRATO (grafico "Da quanto sono scadute"): i bin sono ORDINATI (1 mese -> oltre 6), quindi la rampa e' sequenziale di un tono solo, l'ambra dell'arretrato. Validata col gemello Python: chiarezza monotona, gradi vicini separati in CVD (peggiore 6,9 chiaro / 9,3 scuro). Il grado piu' chiaro ha poco contrasto sulla superficie: in cambio il grafico ha legenda, numeri scritti e tabella, come chiede la skill. */ --ar-1: color-mix(in srgb, var(--allerta) 30%, var(--st-vuoto)); --ar-2: color-mix(in srgb, var(--allerta) 53%, var(--st-vuoto)); --ar-3: color-mix(in srgb, var(--allerta) 76%, var(--st-vuoto)); --ar-4: var(--allerta); /* Classi temporali dell'anno nei grafici (vista Statistiche). Set validato col validatore dataviz: tutte le coppie adiacenti restano separate anche in protanopia/deuteranopia (peggior coppia 13,6). "previsto" e "stima" sono la stessa tinta a due chiari, perche' sono la stessa cosa a due gradi di certezza; "da rinnovare" prende il rosso della scadenza contratto (NON l'ambra dell'arretrato: sono due cose diverse); il pre-tracciamento e' il neutro, come nella griglia. */ --cl-previsto: var(--laguna); --cl-stima: #085F87; /* la laguna a un grado piu' scuro: stessa cosa, meno certa */ --cl-rinnovo: var(--scadenza); --cl-pretrac: #8B8D91; /* il grigio che era di `stampata`: pre-tracciamento resta neutro */ --allerta: #C2600B; /* AMBRA = lavoro nostro in ritardo (mese passato e mappatura non completa). Solo questo. */ --allerta-tenue: #FDF3E6; /* ROSSO = il contratto. Non e' lavoro in ritardo, e' una scadenza commerciale: prima si divideva l'ambra con "in ritardo" e a schermo le due cose sembravano la stessa. Contrasto su bianco 5,4:1 (testo compreso). */ --scadenza: #C0392B; --scadenza-tenue: #FCEDEB; --orfana: #8B5CF6; /* spunta su mese non piu' previsto in Access */ /* SEGNALI - il rilievo dell'interfaccia. Non introducono colori: sono color-mix di token che esistono gia'. L'alone e' cio' che fa leggere una cosa come "accesa" senza aggiungere un bordo in piu'. */ /* D2 / VIS-03: superfici piatte. L'alone e' solo l'anello di 1px, senza la luce diffusa; il velo radiale, il vetro e il riflesso non ci sono piu' (i token restano, vuoti, perche' li usano ancora molte regole). */ --alone-marchio: 0 0 0 1px color-mix(in srgb, var(--marchio) 40%, transparent); --alone-completa: 0 0 0 1px color-mix(in srgb, var(--completa) 40%, transparent); --velo: none; --filo: linear-gradient(90deg, var(--marchio-scuro), var(--marchio) 45%, var(--completa)); --vetro: var(--superficie); --lucido: transparent; --punti: color-mix(in srgb, var(--bordo-forte) 55%, transparent); /* Tipografia (css/fonti.css, file in web/assets/fonti/, nessuna CDN): tre voci sole per tutta l'app e per i documenti che genera. --f-display Newsreader, serif editoriale: titoli, cifre eroe, copertine --f-ui Inter: prosa e comandi --f-dato JetBrains Mono: ogni dato, id, ora, conteggio I fallback sono i font di sistema di prima: se il woff2 non arriva l'app resta leggibile e uguale a se stessa. */ /* D2 / VIS-02: i titoli dell'interfaccia sono in Inter 600 come nel Planning. Newsreader resta solo nei documenti stampati (--f-serif: schede e registro, che nel foglio usano gia' il loro --serif). */ --f-serif: "Newsreader Variable", "Constantia", "Cambria", "Georgia", serif; --f-display: var(--f-ui); --f-ui: "Inter Variable", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; --f-dato:"JetBrains Mono Variable", "Cascadia Mono", "Cascadia Code", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; /* Inter: cifre a larghezza fissa dove serve le chiede .dato; qui si accende solo la "a" a un piano e il "l" con la coda, la voce piu' calma del font */ --f-ui-feat: var(--vrs-font-feat); /* La mano dei titoli: Inter 600 con il tracking di famiglia. */ --p-display: 600; --tr-display: -.02em; /* VIS-08: la scala e' quella di famiglia, in rem, con il pavimento a 11 px. I --t-* restano come alias (10,5 -> 11 e 11,5 -> 12 px). */ --t-micro: .6875rem; /* 11 px: il pavimento */ --t-mini: .75rem; /* 12 */ --t-base: .8125rem; /* 13 */ --t-med: .9375rem; /* 15 */ --t-grande:1.25rem; /* 20 */ --t-titolo:2rem; /* 32 */ /* Misure della griglia: il passo del mese e' il modulo di tutto il layout */ --passo-mese: 44px; /* modulo del layout: la capsula ci sta con 4 segmenti */ --h-riga: 32px; --col-min: 280px; /* larghezza minima della colonna nome; oltre cresce lei */ --col-tot: 78px; --rientro: 12px; /* aria ai lati delle carte cliente nella vista Anno */ --r-carta: 10px; /* raggio delle carte cliente e delle schede del mese */ /* VIS-14: raggi di famiglia 4 - 6 - 10 - 14. Un oggetto piccolo dentro uno grande scende di un grado, cosi' le curve restano concentriche. "tonda" solo per chip, pallini e avatar. */ --r-0: 4px; --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-tonda: 999px; /* Ombre: le due di famiglia (contatto e galleggiante). */ --ombra-1: var(--vrs-shadow-1); --ombra-2: var(--vrs-shadow-1); --ombra-3: var(--vrs-shadow-pop); /* VIS-13: movimento di famiglia. `--rapido` e `--medio` sono durata+curva da usare DOPO il nome di una proprieta'; mai da soli (sarebbe `all`). `--transizione` e' l'elenco esplicito per i comandi. */ --molla: var(--vrs-ease); --rapido: var(--vrs-t-fast) var(--vrs-ease); --medio: var(--vrs-t-slow) var(--vrs-ease); --transizione: color var(--rapido), background-color var(--rapido), border-color var(--rapido), box-shadow var(--rapido), opacity var(--rapido), transform var(--rapido); /* ---- MATERIA (30a sessione) ------------------------------------------- Tre materiali soli, e ogni comando dell'app e dei generatori e' fatto di uno di questi. E' quello che fa leggere l'insieme come un oggetto di pregio invece che come un modulo web: INCHIOSTRO il bottone primario, la posizione attiva dei comandi segmentati, il cursore del mese: un pieno scuro tinto del fondo della laguna (--marchio-notte) con un filo di luce sul bordo alto e un'ombra corta. In tema scuro si inverte in AVORIO con testo inchiostro. Il cyan smette di fare da bottone e torna a fare solo il SEGNALE (stati, fuoco, pillole accese). VETRO pillole, campi e carte: la superficie sfumata di un soffio verso il basso, filo a bassa opacita', ombra di contatto. SATIN il riflesso sui riempimenti (capsule, barre, pista): un velo bianco che si spegne prima di meta' altezza. Da' volume a una barra senza aggiungere un colore. Le PISTE (il vuoto di una barra, il fondo di un campo, il vassoio di un comando segmentato) sono un incavo: tinta dell'inchiostro a bassa opacita' con un'ombra interna corta. */ /* D2 / VIS-03 (23/09): la materia e' PIATTA, come nel Planning. Il bottone primario e' l'accento pieno, senza gradiente ne' filo di luce; vetro, satin, filo di platino e lampo restano come nomi ma sono vuoti. `--vetro-fondo` e `--satin` restano IMMAGINI (gradienti a tinta unita) perche' finiscono in elenchi di `background-image` (la freccina di select.pill). */ --btn-fondo: var(--vrs-accent); --btn-fondo-hover: var(--vrs-accent-hover); --btn-testo: var(--vrs-on-accent); --btn-accento: var(--vrs-on-accent); /* cifre e icone SOPRA il bottone pieno */ --btn-lucido: 0 0 0 0 transparent; --btn-ombra: var(--vrs-shadow-1); --vetro-fondo: linear-gradient(var(--superficie), var(--superficie)); --satin: linear-gradient(transparent, transparent); --pista-fondo: color-mix(in srgb, var(--inchiostro) 6%, transparent); --pista-incavo: 0 0 0 0 transparent; --filo-platino: none; --lampo: transparent; } /* CAMBIO TEMA IN DISSOLVENZA: giraTema() nel tracker e setTheme() nei generatori passano da document.startViewTransition, e la vecchia pagina sfuma nella nuova invece di scattare. Dove l'API non c'e' si scatta come prima. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.9,.28,1); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Tema scuro: automatico da sistema, forzabile con data-tema sul */ @media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { /* D2: neutri, accento, ombre e bottone arrivano scuri da vrs-famiglia.css; qui restano solo i colori di stato e di dato rischiarati per il buio. */ --su-allerta: #1A1205; /* il bianco sull'ambra scura fa 2,5:1: qui va l'inchiostro */ color-scheme: dark; --laguna: #2FB3EA; --accento: #22C39A; --completa-testo: var(--accento); --st-stampata: #E2B83C; /* oro rischiarato per il fondo scuro */ --st-corretta: #CC5FA8; /* magenta rischiarato per il fondo scuro: 4,9:1 */ --st-ricambi: #7B85EA; /* rischiarato per il fondo scuro: 5,4:1 */ --cl-stima: #15759D; --st-vuoto: #24262A; --allerta: #E0913C; --allerta-tenue: #2A1F12; --scadenza: #F2705F; --scadenza-tenue:#2C1614; --punti: color-mix(in srgb, var(--bordo-forte) 70%, transparent); --pista-fondo: rgba(255,255,255,.07); } } :root[data-tema="scuro"] { /* D2: neutri, accento, ombre e bottone arrivano scuri da vrs-famiglia.css; qui restano solo i colori di stato e di dato rischiarati per il buio. */ --su-allerta: #1A1205; /* il bianco sull'ambra scura fa 2,5:1: qui va l'inchiostro */ color-scheme: dark; --laguna: #2FB3EA; --accento: #22C39A; --completa-testo: var(--accento); --st-stampata: #E2B83C; /* oro rischiarato per il fondo scuro */ --st-corretta: #CC5FA8; /* magenta rischiarato per il fondo scuro: 4,9:1 */ --st-ricambi: #7B85EA; /* rischiarato per il fondo scuro: 5,4:1 */ --cl-stima: #15759D; --st-vuoto: #24262A; --allerta: #E0913C; --allerta-tenue: #2A1F12; --scadenza: #F2705F; --scadenza-tenue:#2C1614; --punti: color-mix(in srgb, var(--bordo-forte) 70%, transparent); --pista-fondo: rgba(255,255,255,.07); } /* Il file di famiglia (vrs-famiglia.css, identico al Planning) conosce solo `data-theme`; la scelta esplicita di CronoService e' `data-tema`. Qui le primitive seguono anche quella: "scuro" forzato su un sistema chiaro, e "chiaro" forzato su un sistema scuro. Stessi valori del file di famiglia. */ :root[data-tema="scuro"] { --vrs-bg: #0d0f12; --vrs-surface: #15181c; --vrs-surface-2: #1b1f24; --vrs-surface-3: #22272d; --vrs-border: #2b3036; --vrs-border-strong: #3b4148; --vrs-text: #ecedee; --vrs-text-2: #bfc3c9; --vrs-muted: #a7adb5; --vrs-accent: #3fb6ec; --vrs-accent-hover: #6cc8f2; --vrs-accent-soft: #0a2b3b; --vrs-on-accent: #04202e; --vrs-overlay: rgb(0 0 0 / 0.6); --vrs-shadow-1: 0 1px 2px rgb(0 0 0 / 0.5); --vrs-shadow-pop: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 32px rgb(0 0 0 / 0.45); } @media (prefers-color-scheme: dark) { :root[data-tema="chiaro"] { --vrs-bg: #f4f4f3; --vrs-surface: #ffffff; --vrs-surface-2: #f9f9f8; --vrs-surface-3: #eeeeec; --vrs-border: #e2e3e5; --vrs-border-strong: #c9ccd1; --vrs-text: #14171c; --vrs-text-2: #474c54; --vrs-muted: #62676f; --vrs-accent: #0b6fa0; --vrs-accent-hover: #085f87; --vrs-accent-soft: #e4f2f9; --vrs-on-accent: #ffffff; --vrs-overlay: rgb(15 20 32 / 0.45); --vrs-shadow-1: 0 1px 2px rgb(15 20 32 / 0.06); --vrs-shadow-pop: 0 1px 2px rgb(15 20 32 / 0.06), 0 12px 32px rgb(15 20 32 / 0.12); } } /* ---- LA TENDINA APERTA ---------------------------------------------------- Le