/* I token: l'UNICO file che puo' scrivere un colore letterale (invariante 11 → FE4). Tema a tre stati come da playbook 10: chiaro, scuro, e "come il sistema" — perche' un tema a due stati non sa rispettare `prefers-color-scheme` senza inventarsi una scelta che l'utente non ha fatto. */ /* ═══ LA TAVOLOZZA «NATURALE & ARTIGIANALE», 2026-10-23 ════════════════════════════ * * Quattro colori decisi dalla proprieta': * * Sabbia Dorata #E5C384 grano, crosta del pane, prodotti da forno * Verde Salvia #8A9A86 natura, salute, assenza di allergeni * Marrone Cacao #4A3728 i testi, genuinita' e stabilita' * Panna #F7F4EF lo sfondo, lettura riposante * * ⚠️ TRE SU QUATTRO SONO QUI ESATTI. Il quarto no, e il perche' e' misurato. * * **Cacao e panna stanno dove sono stati messi**: `--inchiostro` e `--sfondo`. Il * cacao sulla panna fa 10,25:1, piu' che abbondante. * * **La sabbia e' `--grano`**, cioe' una SUPERFICIE: la fascia che da' ritmo alla * pagina. Non puo' essere testo — sulla panna fa 1,53:1, che vuol dire invisibile. * * ⚠️ **Il verde salvia non puo' essere il colore del marchio come arriva.** Sulla * panna fa **2,72:1**: le linee guida chiedono 4,5 per il testo, e i collegamenti di * questo sito sono del colore del marchio. Un visitatore con la vista ridotta — su un * sito per celiaci, dove i collegamenti portano a «questo lo posso mangiare?» — non li * distinguerebbe dal testo intorno. * * Non l'ho scartato: l'ho **portato dove passa**. Stessa tonalita' esatta (108°), piu' * saturo e piu' scuro, cioe' la salvia d'ombra invece della salvia al sole: * * --marchio #4c6845 5,67 sulla panna 6,23 col bianco sopra * --marchio-forte #3a4f35 8,15 sulla panna * * Il salvia originale resta esatto dov'e' decorazione e non informazione: e' * `--illo-verde-chiaro`, dentro le illustrazioni, dove il contrasto non si applica * perche' sono `aria-hidden`. * * ⚠️ E un refuso, detto perche' non si perda: la proprieta' ha scritto «Panna / Bianco * Sporco (#FAFAFAF / #F7F4EF)». Il primo ha **sette** cifre esadecimali e non e' un * colore. Ho usato il secondo, che e' la panna ed e' ben formato, e per `--superficie` * — la scheda che si stacca dal fondo — ne ho derivato una un filo piu' calda. * * Tutte e ventidue le coppie di `InvariantiStaticiTest` passano in chiaro e in scuro: * non e' un'opinione sul risultato, e' la condizione perche' la build sia verde. * ════════════════════════════════════════════════════════════════════════════════ */ :root { --sfondo: #f7f4ef; /* La scheda che si stacca dal fondo, e la fascia di sabbia che da' ritmo alla pagina. Nessuno dei due dice mai se un locale e' sicuro: quella e' semantica, e sta su `--conferma` e `--attenzione`. */ --superficie: #f1ece2; --grano: #e5c384; --inchiostro: #4a3728; /* ⚠️ Il secondario e' sceso da #6b5848 a questo per UNA coppia: sulla fascia di sabbia faceva 4,00:1 e ne servono 4,5. La sabbia e' molto piu' satura del grano che c'era prima (#ede3d1), quindi il testo tenue sopra ha meno spazio. */ --inchiostro-tenue: #5f4c3c; --bordo: #ddd4c6; /* Il contorno di un CAMPO, che non e' il contorno di una scheda. ⚠️ Misurato il 2026-10-14: `--bordo` su `--sfondo` fa **1,30:1**. Per un bordo fra due zone di pagina va benissimo — e' una riga, non un'informazione — ma un campo di testo ha lo stesso fondo della pagina, quindi quel bordo e' l'UNICA cosa che dice dove si scrive. Le linee guida chiedono 3:1 per i contorni dei componenti, e 1,30 vuol dire che chi ha un visus ridotto il campo non lo vede. Questo fa 3,38:1 sul fondo e 3,10:1 su una scheda: passa in tutti e due i posti, perche' un modulo puo' stare dentro una scheda. */ --bordo-campo: #8a7a66; /* La salvia portata dove passa il contrasto: stessa tonalita', piu' scura e piu' satura. Vedi la nota in testa al file. E' il colore del sito, non una semantica. */ --marchio: #4c6845; --marchio-forte: #3a4f35; --su-marchio: #ffffff; /* La semantica del colore e' riservata: questi tre non si usano per decorare. ⚠️ `--conferma` E' STATO PER MESI LO STESSO ESADECIMALE DI `--marchio`, #2f6f4f. La regola qui sopra era rispettata alla lettera — nessuno decorava con `--conferma` — e violata nella sostanza: decorava `--marchio`, che conteneva lo stesso colore, 45 volte contro 3. Il badge pieno che dice «cucina dedicata» e «senza glutine» aveva il riempimento del pulsante «Vedi scheda». Su un sito che ha appena tolto dalle parole «verificato», «sicuri» e «certificato», il colore continuava a dire «approvato da noi» di una cosa che dichiara il locale. Il valore non e' scelto a occhio, e la regola e' stata **rimisurata** con la tavolozza del 2026-10-23. I due verdi del marchio — `--marchio` e `--marchio-forte`, che sono apposta lo stesso colore in due pesi — adesso distano 34,7 in RGB. Questo dista 79,7 dal primo e 56,6 dal secondo: **piu' di quanto i due pesi del marchio distino fra loro**, che e' la soglia minima perche' due colori leggano come due cose e non come due sfumature della stessa. ⚠️ Col marchio diventato una salvia desaturata la separazione e' CRESCIUTA, non diminuita: un verde saturo di conferma accanto a un verde spento di marchio si distingue meglio di quanto facesse accanto al verde spiga di prima. ⚠️ Resta un compromesso, ed e' scritto qui perche' non si dimentichi: finche' il MARCHIO e' verde, il verde continua a essere il colore del sito prima che un segnale, e due verdi su una pagina sono comunque due verdi. La separazione vera vuole il marchio fuori dal verde — e' una decisione della proprieta', proposta il 2026-10-19, non una cosa che si fa in un commit di manutenzione. */ --pericolo: #9b2226; --attenzione: #8a5a00; --conferma: #0a5c1a; /* Il testo sopra `--conferma` usato come fondo. Prima era `--su-marchio`: finche' i due colori erano identici funzionava per caso, e separarli senza questo avrebbe lasciato il badge con un testo scelto per un altro fondo. */ --su-conferma: #ffffff; /* ⚠️ I due colori della mappa **non cambiano col tema**, e per questo stanno fuori dai blocchi scuri qui sotto. Le piastrelle di OpenStreetMap sono chiare sempre, anche quando il sito e' scuro: disegnarci sopra con i colori del tema scuro vuol dire mettere un verde chiaro pensato per il nero su una cartina bianca. Trovato il 2026-10-06 guardando la pagina di un comune in tema scuro. */ /* ---- I colori delle ILLUSTRAZIONI (committente, 2026-10-21) ---------------- Le illustrazioni arrivate col file delle due testate usano sei colori che non erano nostri. Stanno qui perche' l'invariante 11 non ammette un colore scritto fuori da questo file, nemmeno dentro un SVG. ⚠️ Due categorie, e si comportano in modo diverso in tema scuro: Il PIATTO e' il cerchio di fondo dell'illustrazione, ed e' una superficie: segue il tema, perche' una macchia color panna su una pagina nera e' un buco di luce. Nelle tre card il piatto e' `--grano`, che un token ce l'ha gia'. Gli OGGETTI — il terracotta del barattolo, l'ocra del sacchetto, la sabbia, il verde chiaro — **non cambiano**. Un barattolo di terracotta e' di terracotta anche di notte: un oggetto illustrato che inverte col tema non sembra adattato, sembra sbagliato. Detto al committente il 2026-10-21, in attesa che confermi. Non entrano nei controlli sul contrasto, e non e' una dimenticanza: le illustrazioni sono decorative e `aria-hidden`, non portano informazione. Quella la portano i numeri scritti accanto. */ --illo-piatto: #fbf8f1; --illo-terracotta: #c9744a; --illo-sabbia: #dccaa6; --illo-ocra: #e2b25c; --illo-ocra-scuro: #d79a55; /* ⚠️ Il 2026-10-23 questo diventa la SALVIA ESATTA della proprieta', #8A9A86, dov'era un verde menta scelto da me. E' l'unico posto del sito dove quel colore sta come e' arrivato: qui il contrasto non si applica — le illustrazioni sono decorative e `aria-hidden` — quindi non c'e' niente che costringa a scurirlo, come invece succede al marchio. Detto al committente, perche' sono due puntini dentro un'illustrazione sua. */ --illo-verde-chiaro: #8a9a86; --mappa-punto: #1f5c3d; /* verde scuro: leggibile su una cartina chiara */ --mappa-punto-bordo: #ffffff; --raggio: 10px; --misura: 68ch; /* larghezza di lettura: oltre, il testo si perde */ --misura-larga: 74rem; /* per una griglia di schede: non e' prosa, non si legge in riga */ } :root[data-tema="scuro"], :root:not([data-tema="chiaro"]) { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { color-scheme: dark; /* ⚠️ Il tema scuro NON e' la tavolozza invertita: e' la stessa tavolozza di notte. Il fondo e' cacao portato quasi al nero, non il grigio-blu di prima — un sito caldo che al buio diventa freddo sembra due siti. Il marchio e' la salvia vera (#8A9A86) schiarita quanto basta a leggersi sul cacao scuro, quindi di notte il colore della proprieta' si vede piu' da vicino che di giorno. */ --sfondo: #17120e; --superficie: #211a14; --grano: #30241a; --inchiostro: #f1ebe2; --inchiostro-tenue: #c0b3a4; --bordo: #3a2f25; --bordo-campo: #8a7a66; --marchio: #a8c49f; --marchio-forte: #c6dcbe; --su-marchio: #17120e; --pericolo: #f28d90; --attenzione: #e0b25e; /* Stesso ragionamento del chiaro: rimisurato: i due verdi chiari del marchio distano 49,4, questo dista 75,5 e 114,6. Contrasto 10,66 sul fondo scuro. */ --conferma: #86d95f; --su-conferma: #17120e; /* Solo il piatto segue il tema: gli oggetti restano quelli. */ --illo-piatto: #1f1813; } } :root[data-tema="scuro"] { color-scheme: dark; /* ⚠️ Il tema scuro NON e' la tavolozza invertita: e' la stessa tavolozza di notte. Il fondo e' cacao portato quasi al nero, non il grigio-blu di prima — un sito caldo che al buio diventa freddo sembra due siti. Il marchio e' la salvia vera (#8A9A86) schiarita quanto basta a leggersi sul cacao scuro, quindi di notte il colore della proprieta' si vede piu' da vicino che di giorno. */ --sfondo: #17120e; --superficie: #211a14; --grano: #30241a; --inchiostro: #f1ebe2; --inchiostro-tenue: #c0b3a4; --bordo: #3a2f25; --bordo-campo: #8a7a66; --marchio: #a8c49f; --marchio-forte: #c6dcbe; --su-marchio: #17120e; --pericolo: #f28d90; --attenzione: #e0b25e; /* Stesso ragionamento del chiaro: rimisurato: i due verdi chiari del marchio distano 49,4, questo dista 75,5 e 114,6. Contrasto 10,66 sul fondo scuro. */ --conferma: #86d95f; --su-conferma: #17120e; /* Solo il piatto segue il tema: gli oggetti restano quelli. */ --illo-piatto: #1f1813; } /* ===================================================================== la stampa * * ⚠️ La cosa che si corregge per prima non e' l'impaginazione: e' il **colore**. * * Il sito ha un tema scuro, e li' `--inchiostro` vale `#f1ebe2`. I browser non * stampano i fondi ma stampano il testo con il colore che ha: chi stampa da uno * schermo scuro otteneva testo quasi bianco su carta bianca, cioe' un foglio vuoto. * Nessun test poteva vederlo e nessuno se ne accorge finche' non prova. * * I valori stanno qui e non accanto alle regole di stampa perche' questo e' il file * che **definisce** i colori: altrove sarebbero letterali, e l'invariante 11 li * vieta. La carta e' un terzo tema, come il chiaro e lo scuro. * * `--marchio` diventa nero: su una stampante in bianco e nero un verde medio esce * come un grigio slavato, e il verde del marchio lo porta il logo, non il testo. */ @media print { /* ⚠️ I nomi veri degli attributi sono `data-tema="scuro"` e `data-tema="chiaro"`, in italiano come tutto il resto. Fino al 2026-10-14 qui c'era scritto `data-theme="dark"`: due selettori che **non corrispondevano a niente**. Non si vedeva, perche' il `:root` davanti basta da solo — tranne nell'unico caso per cui quei due erano stati scritti. Chi ha forzato il tema scuro ha una regola piu' specifica (`:root[data-tema="scuro"]`, 0-1-1) che batte il `:root` di qui (0-0-1), e la media query non aggiunge specificita': la pagina sarebbe uscita dalla stampante **nera**. Trovato dal controllo sul contrasto, che cercava il blocco scuro e non lo trovava col nome sbagliato. */ :root, :root[data-tema="scuro"], :root[data-tema="chiaro"] { --sfondo: #fff; --superficie: #fff; --inchiostro: #000; --inchiostro-tenue: #333; --bordo: #999; --bordo-campo: #000; --marchio: #000; --marchio-forte: #000; --su-marchio: #fff; --grano: #fff; } }