/* ───────────────────────────────────────────────────────────────────────────── Gestionale — Il Circolo, Diano Marina Stessa palette dell'area pubblica, ma densita' diversa: qui si lavora otto ore al giorno e serve vedere piu' roba per schermo, non respirare. NON aggiungere librerie UI senza valutarne il peso: in WASM il bundle e' unico e si scarica tutto o niente. Radzen, per dare un ordine di grandezza, costa 559 KB brotli di DLL piu' 168 KB gzip di CSS/JS. Vedi docs/ARCHITETTURA.md 9. ───────────────────────────────────────────────────────────────────────────── */ /* ── Inter, servito da qui ──────────────────────────────────────────────────── I file stanno in wwwroot/fonts e li serve questo sito. MAI da Google Fonts: e' una terza parte che riceve l'IP di ogni visitatore, ed e' gia' stata sanzionata in UE. Inter e' sotto licenza SIL Open Font, quindi ospitarlo in proprio e' esplicitamente consentito. DUE PESI E NON TRE, come impone DESIGN.md §2: ogni peso e' un file che qualcuno scarica. Regular 109 KB + Bold 112 KB = 221 KB. Il Medium (500), che nel kit e' il peso dominante, costerebbe altri 112 KB: se un giorno lo si vuole, e' una decisione da prendere guardando quel numero. font-display: swap — il testo compare subito col carattere di sistema e scambia quando Inter e' pronto. Meglio leggere subito in Segoe UI che fissare un rettangolo vuoto. ───────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --nero: #070400; --pallina: #D4E24E; /* il giallo-verde della pallina: l'azione, dal 19 ottobre 2026 */ --sabbia: #DCCAAA; --grigio: #ACABAA; --testo: #706F6D; --bianco: #FFFFFF; --terra: #C86B4A; --sfondo: #FBFAF8; --bordo: #E5E1DA; /* LE TRE TINTE DEGLI STATI DELLA GRIGLIA, in un posto solo (27 ottobre 2026). Stavano scritte a mano in dieci punti di questo foglio — la griglia della Settimana, i nastri, le pastiglie delle ore, i riquadri verdi, il tabellone — e il giorno che una cambiava le altre restavano indietro. --libero e --libero-bordo sono gli stessi due del sito (pubblico.css); lo spento è qui un po' più scuro di --non-prenot del sito (#FAFAF9), perché nel gestionale deve staccarsi dal bianco della tabella, e per questo ha un nome suo. Nessun colore nuovo: sono quelli che c'erano. */ --libero: #EFF7EA; --libero-bordo: #7BB661; --spento: #F4F2EF; /* Barra in basso: altezza e distanza dai bordi. Le usano in tre — la barra, il margine inferiore del contenuto e la posizione del foglio "Altro". Un posto solo, o si disallineano. */ --barra-h: 62px; --barra-margine: 16px; /* La barra in alto (.riga-alta). Le intestazioni ferme del tabellone del Calendario si appoggiano sotto di lei: un numero solo, o il giorno che una cambia l'altra finisce sotto la barra. */ --riga-alta-h: 52px; /* LA LARGHEZZA DELLA COLONNA, che è anche quella della barra. La leggono in tre: .barra-basso, il foglio "Altro" su schermo largo e .colonna-centrata della pagina Circolo — così la colonna e la pillola in basso hanno gli stessi bordi. ⚠️ IN PX, E NON IN REM: qui la radice è 15px, quindi 40rem farebbe 600 e la colonna resterebbe 20px più stretta della barra da ciascun lato. Era scritta a mano in due punti (640px e 320px): il giorno che se ne cambiava uno, i bordi si separavano. */ --larghezza-colonna: 640px; /* I DUE RAGGI di DESIGN.md §3, e vanno dichiarati tutti e due. --raggio mancava: undici punti del foglio scrivevano var(--raggio, 10px) e campavano di fallback. Non si vedeva niente perché il fallback c'era — ma il primo border-radius: var(--raggio) scritto senza, come si fa normalmente, sarebbe diventato una dichiarazione invalida, cioè raggio ZERO, senza un errore di build e senza che nessuno colleghi la cosa. */ --raggio: 10px; --pillola: 999px; /* LE DUE ALTEZZE DEI BERSAGLI, e finalmente scritte in un posto solo. Erano a mano in dieci punti, e la prossima classe le avrebbe indovinate. È l'idea che si prende dal kit MDI — una scala DICHIARATA — non i suoi numeri: là i gradini sono 52/44/32, qui restano i 48/44 che il gestionale già usa e che sono conformi. Il terzo gradino del kit, 32px, qui non può esistere: sta 12px sotto il minimo di DESIGN.md §4. */ --h-azione: 48px; /* .pulsante e i suoi fratelli: l'azione della schermata */ --h-comando: 44px; /* i comandi in linea, ed è il pavimento del §4 */ /* I CAMPI DA COMPILARE, portati a 48 l'8 settembre 2026 su richiesta del committente: e' la proposta del kit MDI, dove il campo e' il gradino alto perche' ci si scrive dentro e ci si torna a correggere. ⚠️ NON e' --h-azione riusata, anche se il numero coincide: se un giorno l'azione principale cambiasse altezza, i campi non devono seguirla. Due ragioni diverse, due token diversi. ⚠️ E non vale per tutto cio' che si tocca: chi sta IN RIGA con dei comandi da 44 resta a 44, altrimenti e' l'unico piu' alto e la riga si sfalsa. Vedi .testo-caratteristica e .scelta-data. */ --h-campo: 48px; /* UNA sola ombra in tutto il gestionale (DESIGN.md §3). Serve alla barra fluttuante e al foglio "Altro": senza, non si capisce che stanno sopra. */ --ombra: 0 2px 12px rgb(7 4 0 / 18%); } /* ── IL RESET, che prima ci prestava Bootstrap ──────────────────────────────── Bootstrap era linkato in index.html e non veniva usato: zero classi sue nei .razor, cercate una per una. Restava per il suo Reboot — il box-sizing, i margini azzerati, le tabelle che collassano i bordi — cioe' 160 KB di foglio scaricati e interpretati a ogni primo caricamento, piu' 4,2 MB di cartella pubblicata, per le trenta righe qui sotto. ⚠️ NON e' solo peso. Un sistema di stili scritto a mano che poggia su Reboot si trova sotto i piedi decisioni che non ha preso e che non vede: il giorno che una regola nostra sparisce, sotto non c'e' il vuoto — c'e' Bootstrap, che disegna qualcosa di plausibile e sbagliato. Meglio poco e nostro. Chi legge questo file cercando «da dove viene questo margine» adesso trova risposta qui dentro, e non in un minificato di terze parti. ───────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* I margini di default del browser sono decisioni di trent'anni fa: si azzerano e li rimette chi sa di che spaziatura ha bisogno. */ h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; } ul, ol { padding: 0; list-style: none; } /* Gli elenchi che vogliono i pallini se li chiedono: qui dentro quasi nessuno li vuole, e toglierli caso per caso era la ragione di meta' dei list-style: none. */ .elenco-puntato { padding-left: 1.25rem; list-style: disc; } fieldset { padding: 0; border: 0; } legend { padding: 0; } table { border-collapse: collapse; border-spacing: 0; } caption { text-align: left; } th { text-align: left; font-weight: 700; } /* max-width e non width: un'immagine piu' larga del suo posto non lo sfonda, ed e' il modo piu' rapido per far comparire lo scorrimento orizzontale che il §4 vieta. display: block toglie la riga fantasma sotto le immagini in linea. */ img, svg, video { max-width: 100%; display: block; } .riga-caratteristica img, .icona-scelta img, .voce-basso img, .caratteristica img, button img { display: inline-block; } /* I controlli non ereditano niente per conto loro: il browser gli mette addosso la scorciatoia `font`, che azzera famiglia, corpo, interlinea E font-variant-numeric. Qui glieli si ridà una volta sola, invece che venti volte piu' sotto. */ button, input, select, textarea, optgroup { font: inherit; font-variant-numeric: inherit; margin: 0; color: inherit; } button { background: none; border: none; } /* Il tocco non aspetta 300ms per vedere se e' un doppio tocco. */ button, [role="button"], input, label, select { touch-action: manipulation; } [hidden] { display: none !important; } html, body { margin: 0; /* Inter e' il carattere del kit: disegnato per le interfacce e, cosa che qui conta piu' dell'estetica, con le CIFRE A LARGHEZZA FISSA — in una griglia di prezzi e orari le colonne non ballano piu' da una riga all'altra. I .woff2 vanno in wwwroot/fonts e si servono da li': MAI da Google Fonts. */ font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; /* ⚠️ 1.5 SCRITTO QUI, ed e' DESIGN.md §2. Finora lo dava il Reboot di Bootstrap e nessuno lo sapeva: staccandolo l'interlinea di tutto il gestionale e' tornata a `normal` — cioe' a quello che decide il carattere, circa 1.21 su Inter — e ogni blocco di testo si e' stretto di tre pixel per riga. Un numero preso in prestito da una libreria che non si usa e' un numero che nessuno ha scelto. */ line-height: 1.5; color: var(--testo); background: var(--sfondo); } /* I titoli respirano meno del corpo: §2 dice 1.2. Prima lo diceva Reboot con un 1.2 suo, quindi il risultato non cambia — cambia che adesso e' scritto. */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; } /* Le cifre incolonnate ovunque compaiano numeri in tabella. */ table, .prezzo-slot, .cella-ora { font-variant-numeric: tabular-nums; } /* ⚠️ E ANCHE DENTRO I CONTROLLI, che NON lo ereditano: il browser dà a