/* ============================================================================================= * JURA Club — Token di marca / Brand design tokens * ============================================================================================= * IT: Fonte unica dei valori visivi dell'applicazione. Ogni colore, dimensione, raggio e ombra * usati altrove nel foglio di stile devono passare da qui. Un valore letterale scritto * dentro un componente è un difetto: rende impossibile cambiare il tema in un punto solo e * produce, col tempo, tre grigi leggermente diversi che nessuno ha deciso. * * I valori derivano da `04_Brand_Identity/JURA_Club_Brand_Guide` e dalle * `05_Design_FE/JURA_Club_Linee_Guida_Grafiche_FE_v1.0` §4 e §5. Non sono stati reinventati: * dove il nome del token differisce da quello del documento, la corrispondenza è annotata. * * EN: Single source of truth for the visual values of the application. No literal colour or size * may appear outside this file. * * NOTA SU UNA DIVERGENZA NOTA (T-157) * `frontend/portal/index.html` — il Portale di Verifica pubblica, che per D-043 non si * riscrive — usa valori suoi, vicini ma non identici (`--ok:#2e7d59` contro Success * `#2E7D5B`, `--warn:#c9860a` contro Warning `#C8861A`). Sono scarti impercettibili a occhio * e reali in un confronto di file. Non li ho allineati qui perché toccare il portale * esulava dal perimetro concordato: la divergenza è registrata in TASKS.md come T-157 invece * di essere lasciata a chi la troverà fra sei mesi senza sapere quale dei due sia giusto. * ============================================================================================= */ /* ============================================================================================= * 0. CARATTERI OSPITATI (T-158 · Decisione B del piano di redesign) * ============================================================================================= * IT: I caratteri sono serviti dalla NOSTRA origine, sotto `/font/`. Non è una preferenza: * `server/server.mjs` dichiara `font-src 'self'`, quindi un `@import` da Google Fonts * verrebbe rifiutato dal browser SENZA che nulla cada — la pagina resterebbe in piedi * mostrando il ripiego di sistema, che è precisamente la modalità di guasto silenziosa che * il progetto evita. Ospitarli tiene la CSP a `'self'` e toglie un terzo osservatore dal * percorso di ogni visita. * * PERCHÉ QUI E NON IN UN SESTO FOGLIO. `tokens.css` è l'unico CSS linkato da ENTRAMBE le * sedi che compongono una pagina (`viste/layout/base.eta` e `viste/parti/documento-inizio.eta`), * ed è sempre il primo. Un file nuovo andrebbe aggiunto in due punti, e chi ne dimenticasse * uno otterrebbe un ramo del portale senza caratteri — un difetto che non fallisce, si vede * e basta. Inoltre la risorsa sta dove sta la dichiarazione che la consuma: `--font-testo` e * `--font-mono` sono venti righe più sotto. * * PROVENIENZA E LICENZE. Blocchi generati dal CSS servito da Google Fonts, non scritti a * mano: `unicode-range` e pesi sono quelli veri della distribuzione. Tutte e tre le famiglie * sono OFL, e il testo della licenza è affiancato ai file in `public/font/`. * * SOTTOINSIEMI. Solo `latin` e `latin-ext`: il portale è IT/EN. Cirillico, greco e * vietnamita sono stati scartati di proposito (avrebbero pesato senza servire). Se un giorno * si aggiunge una lingua che li richiede, i file vanno riscaricati — e questo commento è il * posto dove scoprirlo. * * PESI. Inter e Montserrat sono VARIABILI su `400 700`, un file per sottoinsieme: coprono in * un colpo i quattro pesi che i fogli usano davvero (`--peso-normale` 400, `--peso-medio` 500, * `--peso-forte` 600, `--peso-massimo` 700). IBM Plex Mono non è variabile: si ospitano i due * pesi effettivamente citati, 400 e 600. Nessun corsivo: `font-style: italic` non compare in * nessuno dei sette fogli, e un file scaricato che nessuno usa è peso puro. * * MONTSERRAT SOSTITUISCE SPECTRAL PER I TITOLI (T-158, deciso da Claudio il 2026-09-13). * `--font-titolo` valeva `Spectral, Georgia, serif`: Spectral non è mai stato ospitato (la * domanda sulla sorgente dell'artefatto, Decisione A del piano di redesign, non era mai * arrivata), quindi ogni titolo rendeva nel ripiego Georgia — un serif con grazie marcate che, * a occhio non tecnico, si legge come un corsivo. Nessuna dichiarazione CSS ha mai impostato * `font-style: italic` sui titoli: l'aspetto "corsivo" segnalato era il ripiego, non un difetto * di stile. Montserrat (sans-serif, geometrico, OFL) chiude la domanda in sospeso: è ospitato * come Inter, con lo stesso schema variabile 400-700 e gli stessi due sottoinsiemi. Spectral * resta un'opzione futura se una Decisione A la riporta in gioco, ma non è più il valore * dichiarato di `--font-titolo`. * ============================================================================================= */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/font/montserrat-400_700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/font/montserrat-400_700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/font/inter-400_700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/font/inter-400_700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/font/ibmplexmono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/font/ibmplexmono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/font/ibmplexmono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/font/ibmplexmono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------------------------------------------- * 1. PALETTE PRIMARIA — l'argomento di fiducia * * Non è una scelta estetica. Blu Notte è il codice cromatico del diritto e delle istituzioni; * l'Oro evoca il sigillo notarile e la ceralacca, cioè ciò che è certificato; l'Avorio richiama * la pergamena e rende le superfici chiare meno fredde di un bianco puro. Insieme raccontano * la promessa del prodotto: un documento autorevole, certificato da un sigillo, garantito da * un'istituzione affidabile. * ------------------------------------------------------------------------------------------- */ --jura-blu-notte: #0A1F44; /* Fondi scuri, barra superiore, titoli, testo forte */ --jura-grafite: #14203A; /* Superficie scura, pannelli su fondo blu */ --jura-oro: #C6A35C; /* Sigillo, dettagli, azione primaria — ACCENTO, non superficie */ --jura-avorio: #F7F4EC; /* Fondo chiaro dell'applicazione */ --jura-avorio-alt: #EFE9DA; /* Fondi alternati, intestazioni di tabella */ --jura-pietra: #5B6B86; /* Testo secondario, etichette, metadati */ --jura-hairline: #DED4BC; /* Bordi sottili e separatori su avorio */ /* Gradazioni derivate. Servono per stati di passaggio (sorvolo, righe alternate, bordi attivi) * e sono calcolate dai colori sopra, non scelte a occhio. */ --jura-blu-notte-chiaro: #16305F; --jura-blu-notte-scuro: #071531; --jura-oro-chiaro: #D9C08A; --jura-oro-tenue: #EFE3C9; --jura-avorio-rigato: #E7DFCB; /* seconda banda della fascia dei dati dimostrativi */ --jura-oro-scuro: #A98844; /* ------------------------------------------------------------------------------------------- * 2. NEUTRI DI INTERFACCIA * * L'avorio è caldo e giusto per le superfici editoriali, ma stanca su grandi quantità di dati: * tabelle dense, moduli, schede fitte. Per quelle si usa una scala neutra fredda. * ------------------------------------------------------------------------------------------- */ --ui-ink: #1F2733; /* Testo primario su fondo chiaro */ --ui-grigio: #6B7280; /* Testo secondario, icone */ --ui-linea: #C9CDD4; /* Bordi di campi e tabelle */ --ui-superficie: #F4F5F7; /* Fondi di pannello, righe di intestazione */ --ui-superficie-scura: #E9EBEF;/* Passaggio chiaro dello scheletro di caricamento */ --ui-bianco: #FFFFFF; /* Schede, campi, superfici primarie */ /* ------------------------------------------------------------------------------------------- * 3. PALETTE DEGLI STATI, TEMA CHIARO — l'esito di un'operazione, su avorio * * Quattro stati, pensati per il contesto on-chain. Regola non negoziabile (Linee Guida §4.3 e * §10): il colore NON veicola mai da solo un significato. Ogni pill, ogni banner, ogni riga di * tabella porta sempre anche il testo. Chi non distingue il verde dal rosso deve poter leggere * lo stesso identico contenuto. * * ⛔ QUESTO BLOCCO È DIVENTATO UNA PALETTE, E PRIMA ERA UN RUOLO (2026-09-11, `D-258`). * Fino al 2026-09-10 i nomi erano `--stato-…` e i componenti li citavano direttamente: erano * insieme il primitivo e il ruolo. Finché il tema era uno solo la differenza non si vedeva; * al primo tema alternativo diventa la ragione per cui una rimappatura non si può fare in un * posto solo. I nomi sono ora nello spazio `--jura-…`, che è quello che la prova «nessun * rinvio ai primitivi fuori da `tokens.css`» già sorveglia; i ruoli `--stato-…` vivono in §4 * e da lì puntano al tema in vigore. * * ⚠ I VALORI NON SONO CAMBIATI DI UN BYTE, ed è voluto: questa è la palette a registro del * marchio, e la prova «`tokens.css` definisce i colori della palette a registro» la legge qui. * È anche il tema chiaro pronto per il giorno in cui servirà: nessuno di questi valori è stato * buttato, sono stati messi dove un tema si tiene. * ------------------------------------------------------------------------------------------- */ --jura-ok: #2E7D5B; /* Transazione confermata, KYC verificato, integrità OK */ --jura-attesa: #C8861A; /* In attesa, KYC pendente, grant in scadenza, indexer indietro */ --jura-errore: #B23A48; /* Errore, wallet bloccato, accesso negato, vincolo */ --jura-info: #3B6FB0; /* Richiesta di firma (SIWE), nota neutra, accesso tracciato */ /* Fondi tenui degli stessi stati, per pill e banner. Ricavati per miscelazione col bianco: * mantengono la tinta e reggono il contrasto del testo scuro sopra. */ --jura-ok-fondo: #E6F2EC; --jura-attesa-fondo: #FBF1DF; --jura-errore-fondo: #F9E9EB; --jura-info-fondo: #E8F0F9; /* Colori di TESTO degli stati — distinti dai colori di segnale qui sopra. * * PERCHÉ SONO DUE COSE DIVERSE, e prima erano una sola. Un colore che funziona come segnale — * un pallino, un filetto, una spia — ha bisogno di 3:1 contro il fondo. Lo stesso colore usato * come TESTO su un fondo tenue ne ha bisogno di 4.5:1, e non ce la fa: la revisione * indipendente ha misurato la pill «in attesa» a 2.72:1 e la fascia dei dati dimostrativi a * 2.51:1 — cioè l'unico avviso che per progetto non si può chiudere era quello che si leggeva * peggio. Separare i due ruoli costa quattro variabili e chiude l'intera famiglia di difetti. */ --jura-ok-testo: #1F5E42; --jura-attesa-testo: #8F5D06; --jura-errore-testo: #8E2733; --jura-info-testo: #2A5285; /* Bordi degli stessi stati. */ --jura-ok-bordo: #B8DCC9; --jura-attesa-bordo: #EDD5A6; --jura-errore-bordo: #E7BCC2; --jura-info-bordo: #BFD5EC; /* ------------------------------------------------------------------------------------------- * 3-bis. TEMA SCURO — i valori LETTI a schermo dalla reference il 2026-09-11 * * IT: Questa è la pelle nuova del portale, e ogni riga porta accanto **come è stata presa**. * Sorgente: l'artefatto «Jura Exchange Design System», che Claudio ha indicato il * 2026-09-10 come must della grafica. Trascrizione completa e misura di copertura in * `05_Design_FE/DS_CATALOGO_2026-09-07.md`; il catalogo rifatto con questi soli valori è * `05_Design_FE/TEMA_JURA_LETTO_2026-09-11.html`. * * ⛔ SONO VALORI LETTI, NON MISURATI, E LA DIFFERENZA NON DEVE ANDARE PERDUTA. Rimisurato il * 2026-09-11 con la sessione attiva nel browser: l'origine del frame risponde `not found` * sul percorso nudo; il percorso firmato che l'`iframe` porta reindirizza al visualizzatore * anche da autenticati; l'endpoint che il visualizzatore chiama rende `404` alla seconda * chiamata, perché il token è a uso singolo. Il contenuto è servito in un frame di altra * origine con indirizzi usa-e-getta e **non è raggiungibile come testo da nessuna origine**. * La lettura visiva non è una scorciatoia: è l'unica via che la reference consente. * *Un esadecimale senza la sua provenienza accanto è indistinguibile da uno misurato*: è per * questo che la marca sta su ogni riga e non una volta in testa. * * ⛔ PERCHÉ NELLO SPAZIO `--jura-…` E NON IN UNO NUOVO. Perché la prova «nessun rinvio ai * primitivi fuori da `tokens.css`» cerca `var(--jura-…)` e `var(--ui-…)`: una famiglia nuova * chiamata `--tema-…` sarebbe stata citabile da un componente **senza che nulla protestasse**, * e il presidio avrebbe smesso di coprirla in silenzio. È la stessa lezione di `D-257` un * piano più giù — *un perimetro dichiarato per forma del nome copre solo i nomi di quella * forma*, e chi ne conia una nuova esce dal presidio senza accorgersene. * * ⚠ CIÒ CHE UNA LETTURA NON CATTURA NON È QUI, ed è la decisione di Claudio del 2026-09-11: * le opacità e i colori compositi (i fondi di stato sembrano il colore al 12-15% sopra il * canvas — qui sono scritti i colori RISULTANTI, non la coppia), la velatura in cima al * canvas, e gli stati al passaggio del mouse e al fuoco. Restano **assenti** finché una * schermata li richiede: un token scelto senza vederlo all'opera è una decisione non provata. * Conseguenza dichiarata: i fondi di stato non si ricalcolano da soli su una superficie * diversa dal canvas. * ------------------------------------------------------------------------------------------- */ --jura-scuro-fondo: #05070A; /* letto a schermo 2026-09-11 — approssimato · canvas */ --jura-scuro-superficie: #0B1117; /* letto a schermo 2026-09-11 — approssimato · corpo delle card */ --jura-scuro-superficie-alta: #0E151C; /* letto a schermo 2026-09-11 — approssimato · card dentro card */ --jura-scuro-campo: #10171F; /* letto a schermo 2026-09-11 — approssimato · fondo dei campi */ --jura-scuro-bordo: #1C2530; /* letto a schermo 2026-09-11 — approssimato · 1px, sempre */ --jura-scuro-bordo-tenue: #151C25; /* letto a schermo 2026-09-11 — approssimato · divisori interni */ --jura-scuro-testo: #E8EDF2; /* letto a schermo 2026-09-11 — approssimato · titoli e valori */ --jura-scuro-testo-secondario: #A8B4C2; /* letto a schermo 2026-09-11 — approssimato · didascalie */ --jura-scuro-testo-tenue: #6E7C8C; /* letto a schermo 2026-09-11 — approssimato · etichette spente */ --jura-scuro-accento: #2490EF; /* letto a schermo 2026-09-11 — approssimato · pieno del Primary */ --jura-scuro-accento-testo: #4DA3FF; /* letto a schermo 2026-09-11 — approssimato · sovratitoli e link */ --jura-scuro-teal: #4FD1D9; /* letto a schermo 2026-09-11 — approssimato · «aspetta te» */ --jura-scuro-binario: #2A3038; /* letto a schermo 2026-09-11 — approssimato · traccia della barra */ --jura-scuro-scheletro: #1B222B; /* letto a schermo 2026-09-11 — approssimato · segnaposto in caricamento */ /* I quattro stati su fondo scuro. ⚠ L'AMBRA COPRE IL RUOLO CHE NEL MARCHIO HA L'ORO: nella * reference l'oro non compare come colore a sé, e dove il marchio lo userebbe l'interfaccia usa * l'ambra dell'attesa. Se siano due cose o una è una decisione di marca e non una lettura — * resta aperta, e né questo file né il catalogo trascritto la prendono. */ --jura-scuro-ok: #2ECC8F; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-ok-fondo: #07160F; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-ok-bordo: #1E4A35; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-attesa: #D8A23A; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-attesa-fondo: #16110A; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-attesa-bordo: #4A3A1A; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-errore: #E4574C; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-errore-fondo: #170B0B; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-errore-bordo: #4E211F; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-info: #6BB7F5; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-info-fondo: #10243A; /* letto a schermo 2026-09-11 — approssimato */ --jura-scuro-info-bordo: #1E4468; /* letto a schermo 2026-09-11 — approssimato */ /* ------------------------------------------------------------------------------------------- * 4. RUOLI SEMANTICI — il livello che i componenti devono usare * * I componenti NON citano mai `--jura-blu-notte`. Citano `--colore-testo` o `--colore-fondo`. * Così cambiare tema significa rimappare questo blocco, senza toccare una riga di componente. * È lo stesso principio dei token semantici delle Linee Guida §13.4. * * ⛔ IL 2026-09-11 QUESTO BLOCCO È STATO RIMAPPATO SUL TEMA SCURO, ed è la prima volta che la * promessa scritta qui sopra viene riscossa. Non è stata toccata una riga di componente: le * 258 citazioni `--colore-…` e le 62 `--stato-…` nei cinque fogli sono rimaste identiche, e * il portale cambia pelle perché cambia questo blocco. *Una regola che non è mai stata usata * non è una regola provata* — fino a oggi «rimappare in un posto solo» era un'affermazione. * * ⚠ IL TEMA CHIARO NON È STATO BUTTATO: vive in §1, §2 e §3 come palette, e tornarci significa * riscrivere le righe di questo blocco, non recuperare valori da un commit. * ------------------------------------------------------------------------------------------- */ --colore-fondo: var(--jura-scuro-fondo); --colore-fondo-alt: var(--jura-scuro-superficie); --colore-superficie: var(--jura-scuro-superficie); --colore-superficie-alt: var(--jura-scuro-superficie-alta); --colore-superficie-scura: var(--jura-scuro-campo); /* I RUOLI DEGLI STATI — nati qui il 2026-09-11, e prima non esistevano. * * I componenti citano questi nomi da sempre; fino a ieri erano dichiarati in §3 con un valore * letterale, cioè erano contemporaneamente il primitivo e il ruolo. Ora sono ruoli veri: §3 * tiene la palette chiara, §3-bis quella scura, e queste sedici righe dicono **quale delle due * è in vigore**. Nessun componente se ne è accorto, ed è esattamente il punto. */ --stato-ok: var(--jura-scuro-ok); --stato-attesa: var(--jura-scuro-attesa); --stato-errore: var(--jura-scuro-errore); --stato-info: var(--jura-scuro-info); --stato-ok-fondo: var(--jura-scuro-ok-fondo); --stato-attesa-fondo: var(--jura-scuro-attesa-fondo); --stato-errore-fondo: var(--jura-scuro-errore-fondo); --stato-info-fondo: var(--jura-scuro-info-fondo); /* ⚠ SU FONDO SCURO IL SEGNALE E IL TESTO COINCIDONO, e sul chiaro erano distinti apposta. * Sul tema chiaro il colore di segnale non reggeva il 4.5:1 come testo sopra il proprio fondo * tenue, e la separazione costava quattro variabili. Sul tema scuro il fondo dello stato è * quasi nero e il colore del segnale ci sta sopra con largo margine: distinguere i due ruoli * qui produrrebbe due valori uguali con nomi diversi, cioè una differenza che nessuno può * verificare. I due ruoli RESTANO separati nei nomi — perché al ritorno del tema chiaro * tornano a divergere — e oggi puntano allo stesso primitivo, il che è un fatto dichiarato e * non una svista. */ --stato-ok-testo: var(--jura-scuro-ok); --stato-attesa-testo: var(--jura-scuro-attesa); --stato-errore-testo: var(--jura-scuro-errore); --stato-info-testo: var(--jura-scuro-info); --stato-ok-bordo: var(--jura-scuro-ok-bordo); --stato-attesa-bordo: var(--jura-scuro-attesa-bordo); --stato-errore-bordo: var(--jura-scuro-errore-bordo); --stato-info-bordo: var(--jura-scuro-info-bordo); /* IL FONDO SCURO, che non è la superficie scura e non è il colore primario. * * Introdotti il 2026-09-07 (Ondata 0). Prima non esistevano, e per questo `.topbar`, `.piede`, * `.barra-sito` e `.piede-sito` citavano `--jura-blu-notte` direttamente: sei righe che questo * file vieta a parole da sempre e che nessun controllo vedeva. Il primitivo era lo stesso di * `--colore-primario`, ma i due ruoli divergono al primo tema alternativo — il fondo di una * barra segue il tema, il colore di un'azione no. * * `--colore-fondo-inverso` è il fondo che si accoppia a `--colore-testo-inverso`: dove c'è * l'uno, il testo sopra è l'altro. `--colore-fondo-scuro` è il suo passaggio più profondo, e * serve solo alla chiusura del gradiente dell'eroe. */ --colore-fondo-inverso: var(--jura-scuro-superficie-alta); --colore-fondo-scuro: var(--jura-scuro-fondo); /* La seconda banda della fascia dei dati dimostrativi, e il passaggio chiaro dello scheletro di * caricamento. Due usi soli, entrambi decorativi, entrambi con un nome invece di un primitivo. */ --colore-fondo-rigato: var(--jura-scuro-superficie-alta); --colore-scheletro-lampo: var(--jura-scuro-scheletro); --colore-testo: var(--jura-scuro-testo-secondario); --colore-testo-tenue: var(--jura-scuro-testo-tenue); --colore-testo-forte: var(--jura-scuro-testo); --colore-testo-inverso: var(--jura-scuro-testo); /* IL TESTO SOPRA L'ACCENTO — ed è il ruolo che era più facile sbagliare. * * Oggi vale lo stesso primitivo di `--colore-testo-forte`, e la tentazione era di riusare * quello. Sarebbe stato un difetto a scoppio ritardato: in un tema scuro `--colore-testo-forte` * diventa chiaro, mentre l'Oro resta Oro — e il testo del bottone d'accento, del passo corrente * e del salto al contenuto diventerebbe illeggibile. Il testo su una superficie che NON segue il * tema è un ruolo a sé, e costa una variabile. */ /* ⚠ SUL TEMA SCURO VALE IL BIANCO, ed è ciò che la reference mostra sul pieno azzurro. * Misurato il 2026-09-11: bianco su `--jura-scuro-accento` rende **3,30:1**, sotto il 4.5:1 che * WCAG 1.4.3 chiede al testo normale. Col grigio chiaro del tema renderebbe 2,82:1, cioè * peggio. ⛔ È un DEBITO MISURATO della reference, non una svista di questa rimappatura: il * rimedio è scurire l'azzurro del pieno, che è una decisione sulla sorgente. Dichiarato in * `D-258` e non silenziato scegliendo un colore che la reference non ha. */ --colore-testo-su-accento: var(--ui-bianco); --colore-bordo: var(--jura-scuro-bordo-tenue); --colore-bordo-ui: var(--jura-scuro-bordo); /* IL BORDO IN STAMPA, e perché è un ruolo suo invece del riuso di uno esistente. * * Su carta le ombre spariscono e i fondi tenui non si vedono: il contorno di una scheda deve * reggere da solo, e `--colore-bordo-ui` (#C9CDD4) è troppo chiaro per farlo. La regola di * stampa citava `--ui-grigio` direttamente. * * ⛔ L'INVENTARIO DELL'ONDATA 0 AVEVA PROPOSTO `--colore-testo-tenue`, e sarebbe stato un * cambio di colore mascherato da rinomina: `--ui-grigio` è #6B7280, `--colore-testo-tenue` * risolve alla Pietra #5B6B86. Due grigi vicini, diversi, e nessuno se ne sarebbe accorto a * occhio. L'ha trovato il confronto dei valori risolti (`test/lib/colori_risolti.mjs`) alla * prima corsa. *Un ruolo semantico si sceglie sul valore che deve produrre, non sull'assonanza * del nome.* */ /* ⚠ LA STAMPA RESTA SU CARTA BIANCA, e questo ruolo con lei. Il tema scuro non attraversa il * foglio stampato: una regola `@media print` che ereditasse il bordo del tema renderebbe un * contorno quasi nero su bianco, cioè il difetto opposto a quello per cui questo ruolo esiste. * È l'unico `--colore-…` che NON segue la rimappatura, ed è dichiarato. */ --colore-bordo-stampa: var(--ui-grigio); /* Bordo dei COMPONENTI INTERATTIVI — campi, aree di caricamento, passi della procedura. * WCAG 1.4.11 chiede 3:1 per il contorno di un elemento d'interfaccia, e `--ui-linea` sta a * 1.58:1 contro il bianco: i campi non si distinguevano dal fondo. Resta separato dal bordo * delle tabelle, che non è un elemento interattivo e a 3:1 diventerebbe pesante. */ /* ⛔ QUESTO RUOLO DIVERGE DALLA REFERENCE DI PROPOSITO, ed è l'unico che lo fa. * Il bordo della reference misura **1,23:1** contro il fondo dei campi: bellissimo e sotto il * 3:1 che WCAG 1.4.11 chiede al contorno di un elemento d'interfaccia — cioè i campi non si * distinguerebbero dal fondo, che è esattamente il difetto per cui questo ruolo fu separato dal * bordo delle tabelle sul tema chiaro. Il valore qui sotto è scelto sulla MISURA e non letto: * **3,13:1** sul fondo dei campi, verificato il 2026-09-11. * ⚠ Non è un valore di tema travestito da lettura, ed è per questo che è un letterale con il * suo numero accanto invece di un `--jura-scuro-…`: chi lo legge deve vedere subito che non * viene dalla reference. Stessa natura del `#8A9099` che occupava questa riga sul chiaro. */ --colore-bordo-campo: #5A6675; /* ⛔ L'ACCENTO NON È PIÙ L'ORO, ED È LA SOLA SCELTA DI MERITO DI QUESTA RIMAPPATURA. * Nella reference l'azione con effetto giuridico è un azzurro pieno, uno solo per schermata, e * l'oro non compare come colore a sé: il ruolo che il marchio darebbe all'oro lo copre l'ambra * dell'attesa. Qui si segue la reference, perché è ciò che Claudio ha indicato come must della * grafica — ma se oro e ambra debbano restare due cose o diventarne una è una decisione di * MARCA, non una lettura, e nessuno l'ha ancora presa. L'Oro resta a registro in §1. */ --colore-primario: var(--jura-scuro-accento); --colore-accento: var(--jura-scuro-accento); /* Gli stati di passaggio delle due azioni. Erano scritti nei componenti come primitivi * (`--jura-blu-notte-chiaro` al sorvolo del bottone primario, `--jura-oro-chiaro` a quello del * bottone d'accento, `--jura-oro-scuro` sui bordi e sul testo dorato su fondo chiaro): tre nomi * di COLORE dove servivano tre nomi di RUOLO. */ /* ⚠ E QUI SI VEDE IL BUCO DELLA LETTURA, invece di essere coperto. Il colore del sorvolo e * quello del fuoco NON sono leggibili da una schermata ferma: la reference li ha, io no. Queste * tre righe puntano quindi all'accento stesso e al teal — cioè oggi il sorvolo **non cambia * colore**, e chi guarda se ne accorge. Un surrogato plausibile sarebbe stato peggio: avrebbe * prodotto un tema che sembra completo e non lo è. Sede della decisione: `D-258`. */ --colore-primario-sorvolo: var(--jura-scuro-accento-testo); --colore-accento-chiaro: var(--jura-scuro-accento-testo); --colore-accento-scuro: var(--jura-scuro-teal); /* Il focus da tastiera è un colore a sé, e non è né il primario né l'accento: deve restare * visibile anche sopra un elemento già colorato di accento (Linee Guida §10). * Contrasto misurato: 4,88:1 sul bianco, 4,44:1 sull'avorio, 3,33:1 sul Blu Notte — tutti sopra * il 3:1 che WCAG 1.4.11 chiede al contorno di un elemento d'interfaccia. */ --colore-focus: var(--jura-scuro-accento-testo); /* La versione tenue serve all'alone attorno a un campo attivo: è un RINFORZO del bordo, non il * segnale di fuoco — quello resta l'anello di `base.css`, che non dipende da questo colore. */ --colore-focus-tenue: rgba(77, 163, 255, 0.18); /* ------------------------------------------------------------------------------------------- * 5. TIPOGRAFIA * * Tre famiglie, tre lavori distinti: * · Montserrat (sans, geometrico) per i titoli — voce istituzionale ma non un serif editoriale; * sostituisce Spectral (mai ospitato) per decisione di Claudio del 2026-09-13 (vedi §0 sopra). * · Inter (sans) per l'interfaccia — leggibile a corpo piccolo e in tabella. * · IBM Plex Mono per i dati tecnici — hash, indirizzi, ID, importi. La convenzione dei * wireframe (§1.1) impone il monospazio su ogni valore verificabile on-chain: è un segnale * di natura del dato, non una decorazione. * * T-158 CHIUSO: le tre famiglie sono ora ospitate in `public/font/` (§0 sopra), con licenza OFL * affiancata a ciascuna. Le catene di ripiego restano comunque, non per il debito (saldato) ma * per la dignità della degradazione in caso di rete lenta o `font-display: swap` in corso: il * sans di sistema al posto di Montserrat/Inter resta quasi indistinguibile a corpo testo. * ------------------------------------------------------------------------------------------- */ --font-titolo: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-testo: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Scala tipografica. I passi non sono arbitrari: rapporto ~1.2 (terza minore), che tiene * insieme densità informativa e gerarchia leggibile. */ --testo-xs: 0.75rem; /* 12px — metadati, note a piè di scheda */ --testo-sm: 0.8125rem; /* 13px — etichette, celle di tabella dense */ --testo-md: 0.9375rem; /* 15px — corpo dell'interfaccia */ --testo-lg: 1.0625rem; /* 17px — corpo editoriale, introduzioni */ --testo-xl: 1.375rem; /* 22px — titoli di sezione */ --testo-2xl: 1.75rem; /* 28px — titoli di pagina */ --testo-3xl: 2.5rem; /* 40px — titolo dell'area pubblica */ --peso-normale: 400; --peso-medio: 500; --peso-forte: 600; --peso-massimo: 700; --interlinea-stretta: 1.25; --interlinea: 1.55; --interlinea-larga: 1.7; /* ------------------------------------------------------------------------------------------- * 6. SPAZIATURA — scala a passo 4px * * Una scala chiusa serve a impedire i «numeri magici». Se serve uno spazio che non è nella * scala, quasi sempre il problema è la struttura, non lo spazio. * ------------------------------------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ /* ------------------------------------------------------------------------------------------- * 7. RAGGI, BORDI, OMBRE * * Raggi contenuti: un raggio grande comunica «applicazione di consumo», che è esattamente il * tono da evitare. Ombre leggerissime, per lo stesso motivo — la profondità serve a separare * i piani, non a fare effetto. * ------------------------------------------------------------------------------------------- */ --raggio-sm: 3px; --raggio: 5px; --raggio-lg: 8px; --raggio-pill: 999px; --ombra-sm: 0 1px 2px rgba(10, 31, 68, 0.06); --ombra: 0 2px 6px rgba(10, 31, 68, 0.08); --ombra-lg: 0 8px 24px rgba(10, 31, 68, 0.12); /* ------------------------------------------------------------------------------------------- * 8. STRUTTURA * ------------------------------------------------------------------------------------------- */ --larghezza-contenuto: 1180px; /* Contenitore massimo delle aree applicative */ --larghezza-editoriale: 760px; /* Colonna di lettura: ~75 caratteri per riga */ --larghezza-sidebar: 248px; --altezza-topbar: 60px; /* Soglia oltre la quale la barra laterale è persistente. Sotto, collassa in menù * (Wireframe §8: «la sidebar collassa in menù sotto 1024px»). */ --soglia-sidebar: 1024px; /* ------------------------------------------------------------------------------------------- * 9. MOVIMENTO E PROFONDITÀ INTERATTIVA * * IT: Introdotti il 2026-08-09 (T-188). Prima esisteva un solo token, `--transizione`, che * fondeva durata e curva in una stringa unica: non se ne poteva cambiare una senza toccare * l'altra, e infatti nessuno le cambiava — le durate vere erano scritte a mano in cinque * punti fra `sito.css` e `componenti.css`, esattamente ciò che questo file vieta. * * REGISTRO DECISO COL COMMITTENTE: sobrio e funzionale. Il movimento qui dentro non * racconta niente e non intrattiene nessuno: dice dove sei, che cosa è cliccabile e che * qualcosa ha risposto. Su una schermata di arbitrato o di conferma d'incasso un'animazione * compiaciuta si legge come leggerezza, ed è il tono esatto da non avere. * * Le tre durate coprono tre lavori distinti, e la scala si ferma qui apposta: un quarto * valore inviterebbe a sceglierlo a sentimento. * ------------------------------------------------------------------------------------------- */ --durata-svelta: 120ms; /* Risposta a un gesto: sorvolo, pressione, fuoco. */ --durata: 180ms; /* Cambio di stato visibile: apertura, evidenziazione, elevazione. */ --durata-lenta: 320ms; /* Ingressi e comparse. Nell'applicazione non si usa. */ /* La curva è una sola, e va d'accordo con la sobrietà: parte decisa e si posa. Un rimbalzo o * un'accelerazione marcata sarebbero espressivi, cioè fuori registro. */ --curva: cubic-bezier(0.22, 0.61, 0.36, 1); /* Scarto verticale della pressione. Piccolo per scelta: deve sentirsi, non vedersi. */ --pressione: 1px; /* Anello di fuoco. Erano due numeri letterali in `base.css`: qui diventano governabili, e la * regola «nessun valore di stile fuori da questo file» torna vera anche per il fuoco. */ --focus-spessore: 3px; --focus-scarto: 2px; /* IT: CONSERVATO PER COMPATIBILITÀ, e non è un doppione da ripulire: le regole che lo usano * vogliono «la transizione normale» senza scegliere nulla, ed è giusto che possano. Ora è * composto dai due token sopra invece di essere un valore a sé. */ --transizione: var(--durata) var(--curva); } /* --------------------------------------------------------------------------------------------- * 9. RISPETTO DELLE PREFERENZE DI SISTEMA * * Chi ha chiesto meno animazioni le ottiene. Non è un vezzo di accessibilità: per una parte * degli utenti il movimento provoca disturbo reale. * --------------------------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* IT: `reduce` non è «più lento»: è «niente». Si azzerano TUTTE le durate alla radice, così una * regola scritta domani con `var(--durata-svelta)` è già coperta senza che nessuno debba * ricordarsi di aggiungerla al blocco. È la differenza fra spegnere gli effetti e spegnere * la sorgente degli effetti — e la seconda non si dimentica. * Anche `--pressione` va a zero: uno scarto di un pixel è movimento quanto il resto. */ :root { --durata-svelta: 0ms; --durata: 0ms; --durata-lenta: 0ms; --pressione: 0px; --transizione: 0ms; } }