/* ═══════════════════════════════════════════════════════════════════════ Passo 34 — Le tre fasce d'eta' ═══════════════════════════════════════════════════════════════════════ Una sola app, tre pelli. La fascia scelta nel profilo diventa `data-age` sull'elemento , e da qui in giu' e' solo un blocco di variabili diverso — lo stesso meccanismo del tema scuro, che in questa app funziona gia' da mesi. TRE REGOLE CHE VALGONO PER SEMPRE. (1) La fascia ADULTI non compare in questo file. E' l'aspetto storico di BritMaster e resta definito in `british-heritage.css`, intatto: chi usa l'app oggi non deve vedere cambiare un pixel. Aggiungere qui un blocco `[data-age="adult"]` significherebbe avere due posti dove vive la stessa verita', e prima o poi divergono. (2) Qui dentro si ridefiniscono TOKEN, non componenti. Se una schermata ha bisogno di una forma diversa e non solo di un colore diverso, la regola va scritta accanto al componente e agganciata a `html[data-age="kids"]`, non ammucchiata qui. (3) La fascia cambia l'ASPETTO. Cosa e' raggiungibile lo decide `AGE_BANDS[banda].screensClosed` in `entitlements.js`, che genera sia il rifiuto in `navigateTo` sia la regola che nasconde le porte. Sono due cose separate di proposito: un genitore puo' volere l'aspetto da ragazzi con le superfici ancora chiuse, o il contrario. ═══════════════════════════════════════════════════════════════════════ */ /* ─── BAMBINI — fumetto: bianco, contorni spessi, ombre dure ──────────── */ html[data-age="kids"] { --bh-cream: #ffffff; /* il fondo non e' piu' carta: e' pagina bianca */ --bh-paper: #ffffff; --bh-navy: #012169; /* blu bandiera, non il navy quasi nero */ --bh-navy-soft: #123a8f; --bh-red: #e4002b; /* Il rosso delle SCRITTE, e non e' lo stesso mestiere del rosso dei fondi. Questo blocco dichiarava solo `--bh-red`, quindi `--bh-red-testo` ricadeva sul `var(--bh-red)` della radice: il rosso della bandiera come testo. Sulla carta bianca di questa pelle regge (4,75:1), ma sulla superficie SECONDARIA — `--bh-paper-2`, che questo blocco non ridefinisce e vale #f9f5ec — scende a 4,45, cioe' sotto la soglia. Misurato il 2026-08-31 sull'etichetta «La regola» della grammatica lampo, che sta esattamente li' (`node scripts/audit-contrast.mjs`, stato `flash`). E' la stessa correzione che la pelle RAGAZZI aveva gia' avuto per la stessa ragione, con lo stesso valore: un token di testo si tara sulla superficie PEGGIORE, non su quella dove capita di guardarlo per primo. #d40028 fa 5,48 sul bianco e 5,09 sulla secondaria. Il rosso dei FONDI non si tocca: quello e' la bandiera. */ --bh-red-testo: #d40028; --bh-red-deep: #8d0018; --bh-gold: #ffc72c; --bh-border: #1d2733; /* il bordo e' un contorno da fumetto */ --bh-text: #1d2733; --bh-text-muted: #55606f; /* #5c6b7c dava 4,22:1 su bianco: sotto soglia */ --bh-radius-sm: 10px; --bh-radius: 16px; --bh-radius-lg: 22px; /* Ombre DURE, senza sfocatura: e' quello che fa leggere una superficie come ritagliata e incollata, invece che come una card di sistema. */ --bh-shadow-sm: 2px 3px 0 #1d2733; --bh-shadow: 4px 5px 0 #1d2733; --bh-shadow-lg: 6px 7px 0 #1d2733; } /* Il carattere tondo si applica al corpo e ai titoli, non ai numeri tabellari: le cifre di Fredoka non sono a larghezza fissa e in una colonna di punteggi ballerebbero. */ html[data-age="kids"] body, html[data-age="kids"] button, html[data-age="kids"] input, html[data-age="kids"] select, html[data-age="kids"] textarea { font-family: "Fredoka", "Manrope", system-ui, sans-serif; font-weight: 600; } html[data-age="kids"] h1, html[data-age="kids"] h2, html[data-age="kids"] h3, html[data-age="kids"] .bh-h1, html[data-age="kids"] .bh-h2, html[data-age="kids"] .bh-h3, html[data-age="kids"] .section-title { font-family: "Fredoka", "Manrope", system-ui, sans-serif; font-weight: 700; letter-spacing: 0; } html[data-age="kids"] [style*="tabular-nums"], html[data-age="kids"] .stat-value { font-variant-numeric: tabular-nums; } /* ─── RAGAZZI — squadra: fondo chiaro caldo, accenti netti ────────────── */ html[data-age="junior"] { --bh-cream: #f4f1ea; --bh-paper: #ffffff; --bh-navy: #0f1b33; --bh-navy-soft: #23345c; --bh-red: #e4002b; --bh-red-deep: #a30d25; /* Il rosso delle SCRITTE, tarato sulla superficie PEGGIORE di questa pelle. Il rosso della bandiera come testo dava 4,30:1 sul fondo #f4f1ea e 4,45:1 sulle card: sotto 4,5 tutti e due (misurato con audit-contrast.mjs sulla riga di direzione del traduttore). #d40028 fa 4,86 e 5,04 e resta lo stesso rosso a vederlo. Il rosso dei FONDI non si tocca: quello e' la bandiera. */ --bh-red-testo: #d40028; --bh-gold: #ffc72c; --bh-border: #d8d2c6; --bh-text: #0f1b33; --bh-text-muted: #57637a; /* margine sulla soglia, non pareggio */ --bh-radius-sm: 6px; --bh-radius: 12px; --bh-radius-lg: 18px; } /* ─── LE DUE PELLI DI NOTTE ─────────────────────────────────────────── MISURATO il 2026-08-29 con `node scripts/audit-contrast.mjs`: nel tema scuro la fascia bambini e quella ragazzi avevano **51 punti di testo sotto 3:1**, cioe' illeggibili, contro i 31 del tema chiaro. Non era un colore sfortunato: era che i blocchi qui sopra ridefiniscono i token `--bh-*` con valori CHIARI e senza variante scura, mentre i token di `style.css` (`--text`, `--card`) il tema scuro lo seguono. Risultato: testo chiaro su superfici chiare. Il caso limite misurato era «Memory» in rgb(241,245,249) su rgb(255,255,255) — 1,1:1, cioe' invisibile. E' un difetto di SPECIFICITA', non di gusto: `html[data-age="junior"]` (0,1,1) batte `[data-theme="dark"]` (0,1,0), quindi il tema scuro perdeva sempre. Qui si vince con `html[data-age][data-theme]` (0,2,1), e si ridefiniscono SOLO le superfici e i testi: rosso, oro, raggi e ombre restano quelli della fascia, perche' sono l'identita' della pelle e di notte non cambiano. Il muted e' piu' CHIARO di quello del tema scuro generale (#94a3b8): su `--bh-paper` scuro quello dava 4,1:1, sotto la soglia di 4,5. */ html[data-age="kids"][data-theme="dark"], html[data-age="junior"][data-theme="dark"] { --bh-cream: #0f172a; --bh-paper: #1b2638; --bh-paper-2: #273548; --bh-border: #3d4b60; --bh-text: #f1f5f9; --bh-text-muted: #aab7c7; --bh-navy: #2b4f8f; --bh-navy-soft: #3a63a8; /* L'oro #b8860b su un fondo notturno da' 1,03:1: e' il colore del conteggio «N voci» sotto ogni gruppo del menu. */ --bh-gold: #e8be55; /* IL ROSSO DELLE SCRITTE VA RIDICHIARATO ANCHE QUI, e non e' una ripetizione inutile: e' la stessa trappola di SPECIFICITA' spiegata sopra. Il blocco `html[data-age="junior"]` (0,1,1) batte `[data-theme="dark"]` (0,1,0), quindi da quando quel blocco dichiara `--bh-red-testo` per il giorno, di notte il rosso scuro vincerebbe sul rosso chiaro del tema — 2,27:1 su `--bh-paper-2`, cioe' illeggibile. Qui siamo a (0,2,1) e vince la notte: #ff6b7a fa 4,52-6,49 sulle tre superfici notturne di queste due pelli. */ --bh-red-testo: #ff6b7a; } /* Nella pelle fumetto il contorno e l'ombra sono NERI di mestiere: di notte un contorno nero su un fondo scuro sparisce, e con lui sparisce la forma ritagliata che e' tutta la pelle. Diventano chiari. */ html[data-age="kids"][data-theme="dark"] { --bh-border: #e8eef6; --bh-shadow-sm: 2px 3px 0 #0a0f18; --bh-shadow: 4px 5px 0 #0a0f18; } /* Nessuna regola di visibilita' in questo file: le superfici chiuse sono generate da `applyAgeBandVisibility()` a partire dalla lista in entitlements.js, perche' una lista di id ricopiata in un foglio di stile invecchia in silenzio. */