/* ============================================================================================= * 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. * ============================================================================================= */ :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. COLORI SEMANTICI — l'esito di un'operazione * * 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. * ------------------------------------------------------------------------------------------- */ --stato-ok: #2E7D5B; /* Transazione confermata, KYC verificato, integrità OK */ --stato-attesa: #C8861A; /* In attesa, KYC pendente, grant in scadenza, indexer indietro */ --stato-errore: #B23A48; /* Errore, wallet bloccato, accesso negato, vincolo */ --stato-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. */ --stato-ok-fondo: #E6F2EC; --stato-attesa-fondo: #FBF1DF; --stato-errore-fondo: #F9E9EB; --stato-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. */ --stato-ok-testo: #1F5E42; --stato-attesa-testo: #8F5D06; --stato-errore-testo: #8E2733; --stato-info-testo: #2A5285; /* Bordi degli stessi stati. */ --stato-ok-bordo: #B8DCC9; --stato-attesa-bordo: #EDD5A6; --stato-errore-bordo: #E7BCC2; --stato-info-bordo: #BFD5EC; /* ------------------------------------------------------------------------------------------- * 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. * ------------------------------------------------------------------------------------------- */ --colore-fondo: var(--jura-avorio); --colore-fondo-alt: var(--jura-avorio-alt); --colore-superficie: var(--ui-bianco); --colore-superficie-alt: var(--ui-superficie); --colore-superficie-scura: var(--jura-grafite); --colore-testo: var(--ui-ink); --colore-testo-tenue: var(--jura-pietra); --colore-testo-forte: var(--jura-blu-notte); --colore-testo-inverso: var(--jura-avorio); --colore-bordo: var(--jura-hairline); --colore-bordo-ui: var(--ui-linea); /* 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. */ --colore-bordo-campo: #8A9099; --colore-primario: var(--jura-blu-notte); --colore-accento: var(--jura-oro); /* 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: #1F6FD6; /* 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(31, 111, 214, 0.18); /* ------------------------------------------------------------------------------------------- * 5. TIPOGRAFIA * * Tre famiglie, tre lavori distinti: * · Spectral (serif) per i titoli — voce editoriale e istituzionale, non «prodotto tech». * · 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. * * DEBITO DICHIARATO (T-158): i tre font NON sono ancora ospitati nel repository, e la * Content Security Policy vieta i CDN di terze parti — giustamente. Finché i file non sono in * `public/font/`, valgono le catene di ripiego qui sotto, che sono scelte apposta perché * l'aspetto degradi con dignità: Georgia al posto di Spectral tiene la voce serif, il sans di * sistema al posto di Inter è quasi indistinguibile a corpo testo. * ------------------------------------------------------------------------------------------- */ --font-titolo: Spectral, Georgia, 'Times New Roman', 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; } }