/* ═══════════════════════════════════════════════════════════════════════ COPIA di sito/css/temi.css del 28/09/2026 (consegna 83405) QUESTA E' UNA COPIA, E NON DOVREBBE ESISTERE. I colori di RegiaPro si scrivono in UN POSTO SOLO, e quel posto e' il file del sito. Perche' allora c'e'. La console gira su un'altra macchina e non puo' leggere la cartella del sito. Senza questa copia, la pagina del gratis resterebbe senza colori: non «brutta», proprio senza -- una variabile che manca non ricade su niente, sparisce, e con lei sparisce quello che coloriva. E' gia' successo su questo sito. COME SI TIENE ALLINEATA. Quando il sito cambia i colori, questa copia va rifatta: si rilancia la consegna 83405 (che la riprende dal sito) e si guarda che la data qui sopra sia cambiata. Il giorno in cui Nginx servira' /invia-statici/temi.css direttamente dalla cartella del sito, questa copia si cancella e il problema non esiste piu'. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ REGIAPRO — I COLORI E LE MISURE DEL SITO, TUTTI IN UN POSTO SOLO --------------------------------------------------------------------------- QUESTO È L'UNICO FILE DEL SITO IN CUI È SCRITTO UN COLORE. In `sito.css` non c'è nemmeno un colore a mano: ci sono solo richiami alle variabili qui sotto (si riconoscono perché sono scritte così: var(--nome)). --------------------------------------------------------------------------- LA TAVOLOZZA: «BRACE E RAME» — scelta da Giovanni il 30 agosto 2026 --------------------------------------------------------------------------- Prima c'era il verde del design system «Fresh Cloud», nato per il CRM. Adesso c'è il rame: caldo, dorato, da matrimonio. La richiesta era «colori più caldi e dorati in stile matrimonio», guardando ourstoria. NON È LA TAVOLOZZA DI OURSTORIA. Il loro registro è stato guardato e capito — crema calda, nero-bruno, oro champagne — e poi si è scelto il nostro: più spostato verso il rame e la terracotta, meno «oro da invito» e più «luce delle sei di sera». Copiare i valori esatti di un concorrente è una cattiva idea anche quando è legale: il sito deve somigliare al prodotto di Giovanni, non al loro. TRE REGOLE CHE NON SI POSSONO ROMPERE, E PERCHÉ 1. OGNI VARIABILE ESISTE IN TUTTI E TRE I BLOCCHI. Una variabile che manca in un tema non ricade su niente: sparisce, e con lei sparisce quello che colorava. Nel codice sembra tutto giusto. È già successo su questo sito: una variabile mancante ha fatto sparire un bordo intero. Sono 21 variabili di colore, e ci sono tutte e tre le volte. 2. IL CONTRASTO È MISURATO, NON GIUDICATO A OCCHIO. I numeri qui sotto fra parentesi sono misurati (WCAG 2.1). Il minimo di legge è 4.5 per il testo normale, 3.0 per i bordi e la decorazione. Tutti passano, in tutti e due i temi. Quattro accostamenti che PRIMA erano sotto la soglia adesso la passano — fra cui l'arancione, che era a 3.29. 3. I SEMAFORI RESTANO SEMAFORI. Verde = fatto, arancione = da guardare, rosso = attenzione. Il rame è il colore DEL MARCHIO, non quello dei semafori. L'arancione e il rosso sono stati solo scuriti quanto basta a passare la soglia: il significato non è cambiato. ⚠ UNA CONSEGUENZA DA SAPERE. Con il rame come colore del marchio, la tinta del modulo Bot (rame chiaro) e quella del modulo Social (arancione) si somigliano molto più di prima: col verde si distinguevano a 107, adesso a 24. Non si confondono, ma se un giorno danno fastidio si rimedia dando al Bot una tinta sua — è una riga in css/sito.css, non un lavoro. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── colore (tema chiaro) ── */ --accent:#8f6126; /* testo: sul fondo pagina 5.17:1 */ --accent-soft:#f4ede3; /* accento sopra: 4.77:1 */ --accent-bright:#b97f21; /* SOLO decorazione: mai testo sopra */ --accent-bright-soft:#f8f4ec; --ground:#f6f1ea; /* sfondo pagina */ --surface:#fffcf8; /* riquadri, schede */ --surface-2:#f1e9df; /* aree incassate, passaggio del mouse */ --sunken:#f1e9df; --ink:#4b423b; /* testo principale, 8.73:1 */ --ink-strong:#2b2320; /* titoli, 13.70:1 */ --ink-2:#5e544c; /* testo secondario */ --ink-3:#70675d; /* didascalie, 5.42:1 sul riquadro */ --line:#e0d5c8; /* bordi */ --line-soft:#ece3d7; --link:#784f1e; --link-soft:#f4ede3; --ok:#0e7038; --ok-bg:#dfeae2; --warn:#a84d08; --warn-bg:#f6e7d9; --bad:#b3261e; --bad-bg:#f7e3e0; --idle:#5e544c; --idle-bg:#eee8e0; --info:#1257c9; --info-bg:#e5eaf7; --logo-gradient:linear-gradient(135deg,#784f1e,#996f29); --su-accento:#ffffff; /* sopra al pieno: 7.14:1 */ /* ── tipografia ── */ --font-sans:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --font-display:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* ── geometria ── */ --r-s:10px; --r-m:14px; --r-l:18px; --r-x:26px; --r-gg:999px; --shadow-sm:0 1px 3px 0 rgba(43,35,32,.08),0 1px 2px -1px rgba(43,35,32,.08); --shadow:0 1px 3px 0 rgba(43,35,32,.08),0 10px 24px -8px rgba(43,35,32,.14); --shadow-lg:0 24px 48px -16px rgba(43,35,32,.22); --tr:.18s cubic-bezier(.4,0,.2,1); color-scheme:light; /* ═══ AGGIUNTE PER IL SITO DI PRESENTAZIONE ═══ Un sito di presentazione ha bisogno di tre cose in più rispetto a un programma, e stanno qui invece che sparse nel foglio di stile. Sono tutte DERIVATE dai colori qui sopra. */ /* la fascia in cima alla pagina, dove sta il titolo grande */ --sfondo-vetrina:linear-gradient(180deg, color-mix(in srgb,var(--accent) 9%,var(--ground)) 0%, var(--ground) 62%); /* il velo dietro la barra di navigazione appiccicata in alto */ --velo-barra:color-mix(in srgb,var(--ground) 86%,transparent); /* i segnaposto: quello che ancora non esiste e non va inventato */ --segnaposto-bordo:var(--warn); --segnaposto-sfondo:var(--warn-bg); --segnaposto-testo:var(--warn); /* le misure del sito */ /* blocco 75593: MARCA_75593_PERCORSO_COMPATTO -- era 1120. «Tutto il sito mi sembra stretto sul portatile, fallo almeno 1450 pixel largo» (Giovanni, 11 settembre 2026). Le colonne di testo NON si allargano: quelle stanno a --larghezza-testo, qui sotto, perche' una riga di 150 lettere non si legge. Si allargano le griglie. */ --larghezza:1450px; /* La colonna di lettura. Il «ch» è la larghezza dello zero, e nello Albert Sans lo zero è molto più largo della lettera media: dentro 66ch ci stavano 87 lettere per riga, non 66. Contate in pagina. 56ch sono circa 73 lettere: si legge senza perdere la riga. */ --larghezza-testo:56ch; --passo:clamp(56px,7vw,104px); /* aria sopra e sotto ogni sezione */ } /* Tema scuro AUTOMATICO: si accende se il Mac (o il telefono) è impostato scuro e la persona non ha scelto niente a mano sul sito. */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --accent:#edc487; /* testo: sul fondo pagina 9.01:1 */ --accent-soft:#2d2415; /* accento sopra: 7.47:1 */ --accent-bright:#f7deab; /* SOLO decorazione: mai testo sopra */ --accent-bright-soft:#2d2415; --ground:#17120e; /* sfondo pagina */ --surface:#221a14; /* riquadri, schede */ --surface-2:#2c231a; /* aree incassate, passaggio del mouse */ --sunken:#2c231a; --ink:#efe9e2; /* testo principale, 15.43:1 */ --ink-strong:#faf6f1; /* titoli, 17.28:1 */ --ink-2:#ada396; /* testo secondario */ --ink-3:#948a7e; /* didascalie, 5.05:1 sul riquadro */ --line:#3b3022; /* bordi */ --line-soft:#2f261b; --link:#edc487; --link-soft:#2d2415; --ok:#5cc98a; --ok-bg:#25392c; --warn:#ffab5e; --warn-bg:#4a3520; --bad:#ff8e86; --bad-bg:#472c28; --idle:#ada396; --idle-bg:#332b23; --info:#8fb6ff; --info-bg:#2b3446; --logo-gradient:linear-gradient(135deg,#edc487,#f7deab); --su-accento:#17120e; /* sopra al pieno: 9.01:1 */ --shadow-sm:0 1px 3px 0 rgba(0,0,0,.4); --shadow:0 1px 3px 0 rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.55); --shadow-lg:0 24px 48px -16px rgba(0,0,0,.7); color-scheme:dark; }} /* Tema scuro SCELTO A MANO con il pulsante in alto a destra. Ripete gli stessi valori del blocco qui sopra: serve perché la scelta a mano deve vincere anche quando il computer è impostato chiaro. */ :root[data-theme="dark"]{ --accent:#edc487; /* testo: sul fondo pagina 9.01:1 */ --accent-soft:#2d2415; /* accento sopra: 7.47:1 */ --accent-bright:#f7deab; /* SOLO decorazione: mai testo sopra */ --accent-bright-soft:#2d2415; --ground:#17120e; /* sfondo pagina */ --surface:#221a14; /* riquadri, schede */ --surface-2:#2c231a; /* aree incassate, passaggio del mouse */ --sunken:#2c231a; --ink:#efe9e2; /* testo principale, 15.43:1 */ --ink-strong:#faf6f1; /* titoli, 17.28:1 */ --ink-2:#ada396; /* testo secondario */ --ink-3:#948a7e; /* didascalie, 5.05:1 sul riquadro */ --line:#3b3022; /* bordi */ --line-soft:#2f261b; --link:#edc487; --link-soft:#2d2415; --ok:#5cc98a; --ok-bg:#25392c; --warn:#ffab5e; --warn-bg:#4a3520; --bad:#ff8e86; --bad-bg:#472c28; --idle:#ada396; --idle-bg:#332b23; --info:#8fb6ff; --info-bg:#2b3446; --logo-gradient:linear-gradient(135deg,#edc487,#f7deab); --su-accento:#17120e; /* sopra al pieno: 9.01:1 */ --shadow-sm:0 1px 3px 0 rgba(0,0,0,.4); --shadow:0 1px 3px 0 rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.55); --shadow-lg:0 24px 48px -16px rgba(0,0,0,.7); color-scheme:dark; } /* ═══════════════════════════════════════════════════════════════════════════ SEGNO_FOTO_LATERALI_E_INGRANDITORE I COLORI DEL TELO SU CUI SI APRONO LE SCHERMATE INGRANDITE. ATTENZIONE, è l'unico gruppo che NON cambia fra tema chiaro e tema scuro, ed è voluto: il telo dietro la foto ingrandita è scuro in tutti e due i temi (serve a far sparire la pagina intorno), quindi quello che ci sta sopra — la crocetta e la didascalia — deve restare chiaro anche quando il sito è in tema chiaro. Essendo scritte qui sul :root e non ripetute nei due blocchi scuri, valgono uguali dappertutto. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --velo-ingranditore:rgba(23,18,14,.88); /* il telo dietro la foto */ --velo-crocetta:rgba(23,18,14,.72); /* il tondo della crocetta */ --velo-crocetta-forte:rgba(23,18,14,.95); /* la crocetta sotto il mouse */ --su-velo:#ffffff; /* crocetta e didascalia sul telo */ --su-velo-bordo:rgba(255,255,255,.35); /* il filo intorno alla crocetta */ --ombra-testo-velo:0 1px 3px rgba(0,0,0,.6); } /* ═══════════════════════════════════════════════════════════════════════════ SEGNO_4511 — IL CARATTERE DEL SITO --------------------------------------------------------------------------- Fin qui il sito CHIEDEVA Albert Sans (vedi --font-sans qui sopra) ma non ce l'aveva: nella cartella del sito non c'era nessun file di carattere. Il browser scivolava sul nome successivo della lista e scriveva col carattere di sistema. Nessun errore, nessun segnale: solo lettere diverse da quelle del gestionale, che invece Albert Sans ce l'ha davvero dentro. Adesso ce l'ha anche il sito: i quattro file stanno in sito/font/ e sono gli STESSI del gestionale, copiati da frontend/static/fonts/. NON SI SCARICA NIENTE DA INTERNET. La scelta scritta in COME-SI-MODIFICA.md -- «il sito deve funzionare aprendo i file, anche senza rete» -- vale ancora: qui non c'e' nessuna riga che vada a chiedere qualcosa a Google. I file sono dentro casa. Ed e' anche il motivo per cui il gestionale li tiene dentro. Gli indirizzi qui sotto (../font/...) partono da QUESTO foglio, non dalla pagina: percio' valgono uguali per le pagine italiane (css/temi.css) e per quelle inglesi (../css/temi.css), che usano lo stesso foglio. «swap» vuol dire: mentre il carattere arriva, scrivi col carattere di sistema e poi cambia. Meglio del contrario -- un attimo di pagina bianca. Licenza: SIL Open Font License 1.1, il foglio della licenza viaggia insieme ai file in sito/font/LICENZA.txt. ═══════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 800;font-display:swap; src:url('font/albert-sans-var-latin.woff2') /* MARCA_85401_IL_GRATIS_FUNZIONA_DAVVERO: il carattere sta accanto */ 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:'Albert Sans';font-style:normal;font-weight:400 800;font-display:swap; src:url('font/albert-sans-var-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:'Albert Sans';font-style:italic;font-weight:400 800;font-display:swap; src:url('font/albert-sans-var-italic-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:'Albert Sans';font-style:italic;font-weight:400 800;font-display:swap; src:url('font/albert-sans-var-italic-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} /* SEGNO_4511_FINE */ /* ═══════════════════════════════════════════════════════════════════════════ SEGNO_4513 — LE QUATTRO VARIABILI CHE IL SITO NON AVEVA --------------------------------------------------------------------------- Il gestionale (frontend/static/css/modern-theme.css) usa quattro colori che qui non c'erano. I valori sono copiati da li' tali e quali: non sono colori nuovi, sono gli stessi colori con il loro nome. --accent-ink il rame scuro: e' il colore del pulsante principale quando ci passi sopra col mouse. Nel gestionale scurisce; sul sito, finche' questo colore non esisteva, schiariva. --accent-2 la fine della sfumatura del marchio (l'inizio e' #784f1e, ed e' gia' dentro --logo-gradient qui sopra). --line-strong il grigio dei bordi CHE DEVONO VEDERSI -- i campi da riempire, i pulsanti secondari. E' diverso da --line, che e' decorativo e quasi invisibile. Sul riquadro fa 3.83:1, sul fondo pagina 3.49:1: sopra la soglia di 3.0 che la legge chiede ai bordi. --on-accent il testo sopra al pieno rame. Sul sito esiste gia' con un altro nome, --su-accento: qui i due nomi diventano lo stesso colore, cosi' un pezzo scritto per il gestionale funziona anche qui senza tradurre niente. PERCHE' TUTTI E TRE I BLOCCHI E NON SOLO IL PRIMO. E' la regola 1 scritta in cima a questo foglio: una variabile che manca in un tema non ricade su niente, sparisce, e con lei sparisce quello che colorava. Nel codice sembra tutto giusto. Su questo sito e' gia' costato un bordo intero. ═══════════════════════════════════════════════════════════════════════════ */ /* tema chiaro */ :root{ --accent-ink:#6c4519; --accent-2:#996f29; --line-strong:#8a7f72; --on-accent:var(--su-accento); } /* tema scuro AUTOMATICO (il computer e' impostato scuro, e sul sito nessuno ha scelto a mano) */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --accent-ink:#eecfa0; --accent-2:#f7deab; --line-strong:#7d7266; --on-accent:var(--su-accento); }} /* tema scuro SCELTO A MANO col pulsante in alto a destra: deve vincere anche quando il computer e' impostato chiaro */ :root[data-theme="dark"]{ --accent-ink:#eecfa0; --accent-2:#f7deab; --line-strong:#7d7266; --on-accent:var(--su-accento); } /* SEGNO_4513_FINE */ /* MARCA_80903_COLORE_DEI_CORSI:inizio (D345, D354: «verde petrolio» si') ─────── Il colore dei corsi, delle dirette e dei webinar: un verde petrolio, diverso dal rame del marchio e dal blu di Gallery. --corsi e' il testo e il bordo, --corsi-velo lo sfondo. Nei tre blocchi, per la regola 1 di questo foglio. Contrasti misurati (WCAG 2.1): chiaro #1f6660 su #e1eeeb 5,64:1, sulle schede #fffcf8 6,56:1; scuro #86cfc4 su #16302c 7,86:1, sulle schede #221a14 9,57:1. */ :root{ --corsi:#1f6660; --corsi-velo:#e1eeeb; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --corsi:#86cfc4; --corsi-velo:#16302c; }} :root[data-theme="dark"]{ --corsi:#86cfc4; --corsi-velo:#16302c; } /* MARCA_80903_COLORE_DEI_CORSI:fine */ /* MARCA_79341_PULSANTI_PIENI:inizio (D297, 22/9/2026) ───────────────────── I pulsanti principali diventano PIENI: un colore solo, niente sfumatura rame-oro (era il dettaglio che faceva piu' "vecchio", ricerca D296). --pieno e' il rame del marchio; --pieno-sotto e' il colore sotto il mouse. Anche --logo-gradient diventa pieno: lo usano il segno del marchio, i tondi e i bollini, cosi' tutto il sito parla lo stesso colore. Contrasti: bianco sul rame 5,38:1; sotto il mouse 6,87:1. Nel tema scuro testo scuro sull'oro 11,38:1 e 12,85:1. */ :root{ --pieno:#8f6126; --pieno-sotto:#7a5220; --logo-gradient:var(--pieno); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --pieno:#edc487; --pieno-sotto:#f3d29c; --logo-gradient:var(--pieno); }} :root[data-theme="dark"]{ --pieno:#edc487; --pieno-sotto:#f3d29c; --logo-gradient:var(--pieno); } /* MARCA_79341_PULSANTI_PIENI:fine */