/* =========================================================================== MODALITA' SCURA - restyling 2026 COSA C'ERA PRIMA. Settantanove righe di !important tarate sui selettori del template vecchio: #contenitore, #testo, #destra, #box-abbonati, #box-copertine, .centrale-mobile. Su una pagina 2026 quella roba colpiva poco e di traverso - anneriva il body e rendeva bianchi tutti gli , col risultato che la testata restava bianca e i link di navigazione sparivano perche' erano bianchi su bianco. COME FUNZIONA ADESSO. Il foglio 2026 passa dai token 265 volte: --accent 86, --text-secondary 55, --border-color 53, --text-primary 41. Ridichiarare il :root qui sotto gira da solo la quasi totalita' della pagina, senza un solo !important: questo foglio viene caricato DOPO restyling-2026.css, quindi a parita' di specificita' vince per posizione. Resta un elenco corto di cose che il :root non puo' raggiungere - i fondi chiari scritti a mano dentro le regole - ed e' la seconda meta' del file. IL NERO E' NERO PIENO. Su schermo OLED il pixel nero e' spento: #000000 vero, non il grigio scurissimo che di solito si usa. I grigi esistono solo per aree piccole, filetti e testo. LE SOGLIE. Ogni colore qui sotto e' stato misurato in rapporto di contrasto sul nero, non scelto a occhio. La soglia di riferimento e' 4,5:1 (WCAG AA per il testo normale); dove si legge un numero nel commento, quello e' il valore calcolato. =========================================================================== */ :root { /* IL FONDO. Nero pieno. --bg-card e' nero anch'esso: le schede si staccano col filetto, non con un fondo piu' chiaro, che e' il modo giusto di separare le scatole quando il fondo e' nero vero. */ --bg-main: #000000; --bg-card: #000000; /* Le due aree piccole dove un grigio ci sta: il sorvolo e i fondi tenui delle pastiglie e dei campi. */ --bg-hover: #161616; --bg-tenue: #121212; /* IL TESTO. Non bianco pieno: #ededed fa 16:1 sul nero, piu' che sufficiente, e sulle pagine lunghe di questo sito - che sono lunghe - affatica meno del bianco a 18,7:1. */ --text-primary: #ededed; /* 7,9:1. Il #444 del chiaro qui sarebbe 1,9:1, cioe' invisibile. */ --text-secondary: #a8a8a8; --border-color: #333333; /* IL ROSSO. Resta il rosso del marchio dove fa da FONDO - la barra in alto, i bottoni - perche' il bianco sopra ci fa 6,91:1 e non ha nessun motivo di cambiare. Cambia solo dove fa da testo: #B80000 sul nero fa 3,04:1 e sotto 4,5 non si legge. #E8564A fa 5,23:1 ed e' ancora della stessa famiglia, non un rosa. */ --accent-testo: #E8564A; /* Le barre e i bottoni pieni che in chiaro sono neri col testo bianco. Qui non possono essere ne' neri (sparirebbero nel fondo) ne' chiari (il testo bianco sopra sparirebbe): un grigio scuro, area piccola. */ --superficie-forte: #2a2a2a; /* Le due fasce scure - video e rivista cartacea. In chiaro erano #232323 per staccarsi dal bianco; qui si staccano dal nero di pochissimo, giusto per restare leggibili come fasce. */ --fondo-scuro: #101010; /* --------------------------------------------------------------- LA TAVOLOZZA DELLE CATEGORIE. Diciotto tinte scelte per il fondo bianco: profonde e sature. Sul nero quattordici su diciotto stavano fra 1,6:1 e 3,6:1, cioe' illeggibili. Qui sono schiarite tenendo tinta e saturazione, alzando la sola luminosita' fino a superare 5:1 - il valore di partenza e quello di arrivo sono scritti accanto a ciascuna. Le quattro che gia' andavano bene non sono toccate e non compaiono qui: --cat-news, --cat-lavoro, --cat-turismo, --cat-cinema. --------------------------------------------------------------- */ --cat-focus: #118d7b; /* era #0d6d5f 3,4:1 -> 5,1:1 */ --cat-interviste: #c26100; /* era #663300 2,0:1 -> 5,0:1 */ --cat-attualita: #597fb0; /* era #3d5a80 3,0:1 -> 5,1:1 */ --cat-mostre: #48849c; /* era #264653 2,1:1 -> 5,1:1 */ --cat-editoria: #df329c; /* era #5f0f40 1,6:1 -> 5,1:1 */ --cat-mercato: #767b9e; /* era #4a4e69 2,6:1 -> 5,1:1 */ --cat-artigianato: #a9714c; /* era #7f5539 3,3:1 -> 5,2:1 */ --cat-viaggi: #588961; /* era #3a5a40 2,7:1 -> 5,2:1 */ --cat-opinioni: #9b64ca; /* era #5d2e86 2,2:1 -> 5,1:1 */ --cat-opere: #748726; /* era #5c6b1e 3,6:1 -> 5,2:1 */ --cat-arte-antica: #9e7b00; /* era #7a5f00 3,5:1 -> 5,3:1 */ --cat-ottonovecento: #7d72c7; /* era #4b3f9e 2,5:1 -> 5,1:1 */ --cat-contemporanea: #e03788; /* era #a3195b 2,8:1 -> 5,1:1 */ --cat-libri: #528b28; /* era #3f6b1f 3,3:1 -> 5,1:1 */ } /* body porta il fondo scritto a mano in due regole del foglio 2026 (nudo e .has-skin): il token da solo non le raggiunge. */ body, body.has-skin { background: var(--bg-main); color: var(--text-primary); } /* --------------------------------------------------------------------------- LE SUPERFICI CHIARE SCRITTE A MANO Nel foglio 2026 ci sono 43 fondi scritti direttamente dentro le regole. Una ventina sono chiari e vanno girati; gli altri sono scuri per disegno - il footer #141414, il nero sotto le immagini delle tessere, la sfumatura sull'articolo in evidenza, la lightbox, il pannello di login - e restano come sono. Si girano qui per selettore e non trasformandoli in token nel foglio chiaro: cosi' la modalita' chiara, che funziona, non viene toccata affatto. --------------------------------------------------------------------------- */ .main-header, .news-nav, .news-nav .submenu, .header-search, .quaderni-widget, .newsletter-sidebar-box, .search-exhibitions-widget, .art-autore, .art-newsletter, .chi-autore, .chi-ritratto-vuoto, .pub-contatti, .con-segnaposto, .white-popup, .promo-overlay { background: var(--bg-main); border-color: var(--border-color); } /* I riquadri che in chiaro si staccavano per via del fondo grigino: sul nero il fondo non puo' staccarli, quindi li stacca il filetto. */ .quaderni-widget, .newsletter-sidebar-box, .search-exhibitions-widget, .art-autore, .art-newsletter, .chi-autore, .pub-contatti { border: 1px solid var(--border-color); } /* LA RETE SUI CONTROLLI DI MODULO. Sta prima delle regole mirate ed e' volutamente a specificita' bassa (0,1,1): qualunque regola scritta con una classe o un id la batte, quindi i campi bianchi voluti - quelli dentro #login-form, che vale (1,1,1) - restano bianchi. Serve a prendere i campi di cui NESSUNO ha dichiarato il fondo, che non si trovano leggendo il foglio perche' nel foglio non ci sono: un