/* ========================================================================== SCIOPEROMETRO — design tokens Direzione "Il cruscotto", congelata il 2026-08-24. Dopo questo file nessun colore e nessuna dimensione nasce altrove: se un valore non e' qui, non si usa. Terzo sito-dato dopo costodelpieno.it e balneabile.it. Leve mosse rispetto ai gemelli (vedi .design-log.json): - dominante: un QUADRANTE (lancetta verde->ambra->rosso), non una cifra (costo) ne' una linea del tempo (balneabile) - griglia: cruscotto con barra dei filtri laterale, tela chiara quasi bianca + pannelli bianchi staccati con ombra (nessuno dei due gemelli) - contenitore: 1380px (costo 1180, balneabile 960) - carta: chiaro quasi bianco freddo (i gemelli sono carta calda e azzurro-ciano) - registro: Titillium Web (il font del marchio) + Spline Sans Mono - spigoli: raggio 10px, pannelli sollevati (i gemelli sono a spigolo vivo) La scala semantica codifica il LIVELLO DI DISAGIO di una giornata, derivato dal campo ufficiale "Rilevanza" del feed del Ministero. Nessun colore e' decorativo: verde = si viaggia, rosso = sciopero generale nazionale. ========================================================================== */ :root { /* --- TIPOGRAFIA --------------------------------------------------------- Titillium Web: carattere del marchio, disegnato in Italia (Accademia di Urbino). Spline Sans Mono solo per orari, date e conteggi. */ --font-text: 'Titillium Web', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-num: 'Spline Sans Mono', 'SFMono-Regular', Consolas, monospace; /* scala propria: 12 / 14 / 16 / 20 / 26 / 42 (i gemelli hanno altre scale) */ --t-xs: 0.75rem; /* 12 - didascalie, note */ --t-sm: 0.875rem; /* 14 - tabelle, corpo minore */ --t-md: 1rem; /* 16 - corpo */ --t-lg: 1.25rem; /* 20 - sottotitoli */ --t-xl: 1.625rem; /* 26 - titoli sezione */ --t-2xl: 2.625rem; /* 42 - il verdetto del cruscotto */ --lh-tight: 1.12; --lh-num: 1; --lh-body: 1.6; --measure: 66ch; /* --- SCALA SEMANTICA: LIVELLO DI DISAGIO -------------------------------- Cinque gradini, dal verde (si viaggia) al rosso profondo (sciopero generale). Ancorata al campo "Rilevanza" del Ministero, non a un giudizio estetico. Regola daltonismo: il livello ha SEMPRE anche un'etichetta di testo e un peso tipografico, il colore non e' mai l'unico segnale. 0 nessuno nessuno sciopero dei trasporti quel giorno 1 locale una sola azienda / una citta' (Rilevanza Locale/Prov.) 2 regionale tutta una regione (Regionale/Interregionale/Territ.) 3 nazionale un intero settore in tutta Italia (Nazionale) 4 generale piu' settori insieme, nazionale (Generale/Plurisett.) */ --lvl-0: #15803d; --lvl-0-bg: #eaf4ed; --lvl-0-ink: #14532d; --lvl-1: #22c55e; --lvl-1-bg: #e7f8ee; --lvl-1-ink: #166534; --lvl-2: #f59e0b; --lvl-2-bg: #fdf2dd; --lvl-2-ink: #92400e; --lvl-3: #ef4444; --lvl-3-bg: #fdeaea; --lvl-3-ink: #b91c1c; --lvl-4: #b91c1c; --lvl-4-bg: #fbe3e3; --lvl-4-ink: #7f1d1d; /* i tre colori del quadrante (marchio) */ --dial-green: #22c55e; --dial-amber: #f59e0b; --dial-red: #ef4444; /* --- NEUTRI FREDDI (ardesia) — mai #000, mai #fff --------------------- */ --n-950: #0b1220; --n-900: #0f172a; /* inchiostro del marchio */ --n-800: #1e293b; --n-700: #334155; --n-600: #475569; --n-550: #556274; /* passa AA sul pannello per testo piccolo */ --n-500: #64748b; --n-400: #94a3b8; --n-300: #cbd5e1; --n-200: #e2e8f0; --n-100: #eef2f6; --n-050: #f5f7f9; /* --- ACCENTO — uno solo, solo per link e stato attivo ----------------- Indaco: interattivo, e volutamente FUORI dalla scala verde/ambra/rosso perche' quei tre colori qui vogliono dire un'altra cosa (il disagio). */ --accent: #4338ca; --accent-hover: #312e81; --focus: #f59e0b; /* --- RUOLI ------------------------------------------------------------- */ --paper: #f6f8fb; /* tela cruscotto, chiaro quasi bianco: i pannelli bianchi emergono con ombra+bordo */ --panel: #ffffff; /* pannello bianco pieno, staccato dalla tela */ --panel-raised: #ffffff; --panel-sunken: #e8edf4; --ink: var(--n-900); --ink-soft: var(--n-700); --ink-faint: var(--n-550); --rule: var(--n-300); --rule-soft: var(--n-200); /* --- GRIGLIA 4px ------------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --row-h: 40px; --cell-pad: var(--s2) var(--s3); --wrap: 1380px; --measure-px: 720px; --border: 1px solid var(--rule); --border-soft: 1px solid var(--rule-soft); --radius: 10px; /* pannelli da cruscotto, non documento a spigolo */ --radius-sm: 6px; /* ombre ricalibrate per la tela chiara: piu' marcate, cosi' i pannelli bianchi restano staccati anche su fondo quasi bianco */ --elev: 0 1px 2px rgba(15,23,42,.08), 0 8px 24px -8px rgba(15,23,42,.16); --elev-lift: 0 2px 6px rgba(15,23,42,.10), 0 18px 40px -12px rgba(15,23,42,.22); } /* --- DARK MODE: ricalibrata, non invertita ------------------------------- La scala del disagio va rischiarata: su fondo scuro i verdi/rossi scuri collassano. I rapporti tra i gradini restano gli stessi. */ @media (prefers-color-scheme: dark) { :root { --lvl-0: #4ade80; --lvl-0-bg: #12271b; --lvl-0-ink: #86efac; --lvl-1: #4ade80; --lvl-1-bg: #12271b; --lvl-1-ink: #86efac; --lvl-2: #fbbf24; --lvl-2-bg: #33270d; --lvl-2-ink: #fcd34d; --lvl-3: #f87171; --lvl-3-bg: #341717; --lvl-3-ink: #fca5a5; --lvl-4: #fb7185; --lvl-4-bg: #3a161c; --lvl-4-ink: #fda4af; --paper: #0b1220; --panel: #111a2e; --panel-raised: #16223b; --panel-sunken: #0d1626; --ink: #e8edf4; --ink-soft: #c2cddd; --ink-faint: #93a2b8; --rule: #2b3a54; --rule-soft: #1d2942; --accent: #a5b4fc; --accent-hover: #c7d2fe; --focus: #fbbf24; --elev: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -6px rgba(0,0,0,.5); --elev-lift: 0 2px 6px rgba(0,0,0,.5), 0 16px 32px -8px rgba(0,0,0,.6); } }