/* ============================================================================ TEMA — è l'unico file da toccare per cambiare l'aspetto dell'applicazione. È organizzato su due livelli, e la distinzione è il motivo per cui la manutenzione resta semplice: 1. PALETTE i colori del marchio, presi dal sito comeaserramenti.it. 2. RUOLI come quei colori vengono usati nell'interfaccia. I componenti (componenti.css) usano SOLO i ruoli, mai i colori del marchio. Cambiare la palette qui sotto ridipinge tutta l'applicazione senza aprire nessun altro file. ============================================================================ */ /* ─────────────── Carattere ─────────────── Inter (licenza SIL OFL, file in wwwroot/fonts) viene servito dall'applicazione: così ogni cliente, su Windows, Mac, tablet o telefono, vede lo stesso carattere e non un ripiego di sistema. Font variabile: un solo file per tutti i pesi. I due sottoinsiemi (latino e latino esteso) si scaricano solo se la pagina li usa. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); 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: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); 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: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2-variations"); 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: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-italic.woff2") format("woff2-variations"); 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 del marchio ─────────────── */ --marchio-scuro: #2b2b2b; /* antracite della barra di navigazione */ --marchio-scuro-2: #3a3a3a; /* sfondo delle voci al passaggio */ --marchio-scuro-3: #333333; /* testo principale */ --marchio-accento: #0e9498; /* verde petrolio del marchio */ --marchio-accento-chiaro: #17a9ad; /* la tinta più chiara della copertina */ --marchio-accento-scuro: #0b767a; /* la stessa tinta, abbassata */ --marchio-accento-cupo: #095c5f; /* per gli stati premuti */ --marchio-accento-tenue: #e4f4f5; /* fondo chiarissimo della stessa tinta */ --marchio-grigio: #cfd4db; /* grigio dei riempimenti */ --marchio-bianco: #ffffff; /* Per cambiare completamente veste basta riscrivere queste righe: nessun altro file contiene colori. Esempio, tornando a un accento blu: --marchio-accento: #0084ff; --marchio-accento-scuro: #0069cc; --marchio-accento-tenue: #e8f3ff; */ /* ─────────────── 2. Ruoli nell'interfaccia ─────────────── */ /* Azione: ciò su cui si clicca. Il verde del marchio è brillante: sopra ci sta bene un fondo chiaro, non il testo bianco (3,7:1, sotto la soglia AA). Perciò l'accento decorativo e il fondo dei pulsanti sono due ruoli distinti — «pieno» è la tinta abbassata, che col bianco arriva a 5,4:1. */ --primario: var(--marchio-accento); /* bordi, grafici, messa a fuoco */ --primario-chiaro: var(--marchio-accento-chiaro); /* solo sopra la colonna scura */ --primario-pieno: var(--marchio-accento-scuro); /* fondi che portano testo bianco */ --primario-premuto: var(--marchio-accento-cupo); /* lo stesso, mentre si preme */ --primario-tenue: var(--marchio-accento-tenue); /* Navigazione: la colonna scura di sinistra */ --scuro: var(--marchio-scuro); --scuro-2: var(--marchio-scuro-2); --scuro-3: var(--marchio-scuro-3); /* Testi dentro la colonna scura: hanno bisogno di ruoli propri perché vivono su fondo scuro, dove i colori di cui sopra non si leggono. */ --menu-testo: #e8eaed; --menu-testo-tenue: #9aa1a8; --menu-testo-vivo: var(--marchio-bianco); --menu-separatore: rgba(255, 255, 255, .08); /* Superfici e testi */ --sfondo: #f4f6f9; --superficie: var(--marchio-bianco); --superficie-2: #fafbfc; --testo: var(--marchio-scuro-3); --testo-tenue: #6b7280; --bordo: #e2e6ec; --bordo-forte: var(--marchio-grigio); /* Testo che finisce sopra una tinta piena (pulsanti, voce di menu attiva) */ --su-tinta: var(--marchio-bianco); /* Il velo che oscura la pagina dietro una finestra o il menu su telefono */ --velo: rgba(17, 24, 39, .45); /* Stati semantici: un colore per significato, non per gusto. Per ciascuno tre tinte — piena (testo e icone), tenue (fondo) e bordo. */ --ok: #14713a; --ok-tenue: #e7f6ec; --ok-bordo: #bfe3cb; --attesa: #b45309; --attesa-tenue: #fdf3e3; --attesa-bordo: #f0dcbb; --errore: #b91c1c; --errore-tenue: #fdecec; --errore-bordo: #f0c8c8; --allerta: #a16207; --allerta-tenue: #fdf6e3; --allerta-bordo: #f0e2b5; --neutro: #4b5563; --neutro-tenue: #f1f3f6; --neutro-bordo: #dfe3e9; /* «Informativo» parla con la voce del marchio: è la stessa tinta dell'azione. */ --info: var(--primario-pieno); --info-tenue: var(--marchio-accento-tenue); --info-bordo: #b9dedf; /* ─────────────── 3. Misure e caratteri ─────────────── */ --raggio: 10px; --raggio-piccolo: 6px; --ombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1); --ombra-media: 0 4px 12px rgba(16, 24, 40, .08); --larghezza-menu: 244px; --altezza-barra: 58px; --spazio: 16px; --carattere: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --carattere-numeri: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; --testo-base: 14px; --testo-piccolo: .8rem; --testo-minuto: .74rem; }