/* ══════════════════════════════════════════════════════════════════════ LA PELLE FUMETTO — fascia bambini (6-9) ══════════════════════════════════════════════════════════════════════ Non e' un tema di colori: e' un'altra forma. Fondo bianco, pennellate DIPINTE che entrano dai bordi, contorni neri spessi, ombre dure senza sfocatura, e nuvolette che portano il testo inglese. Tutto sotto html[data-age="kids"]: nessuna di queste regole tocca le altre due fasce. Riferimento: scratchpad/art/tre-eta.html, colonna "Fumetto". PERCHE' LE PENNELLATE SONO IMMAGINI e non CSS: un tratto dipinto ha il bordo sfrangiato, la grana delle setole e gli schizzi alle estremita'. Un `border-radius` con un gradiente da' una banana colorata, che e' esattamente cio' che fa sembrare "finto" un fondo per bambini. */ html[data-age="kids"] { --cm-ink: #10202f; /* il nero dei contorni: navy quasi nero, non #000 */ /* L'inchiostro SU CARTA non gira col tema. Nuvolette, cartelli del tabellone e strisce stanno sopra un'illustrazione, e un'illustrazione non ha una versione notturna: quelle superfici restano bianche sempre, quindi il loro testo dev'essere sempre scuro. Con `--cm-ink` (che di notte diventa chiaro) la frase del saluto misurava 1,17:1 su bianco. */ --cm-ink-carta: #10202f; --cm-shadow: 5px 6px 0 var(--cm-ink); --cm-shadow-s: 3px 4px 0 var(--cm-ink); } /* Di notte il contorno da fumetto si schiarisce: nero su fondo scuro sparisce, e con lui la forma ritagliata che e' tutta questa pelle. */ html[data-theme="dark"] { --cm-ink: #e8eef6; --cm-shadow: 5px 6px 0 #05090f; --cm-shadow-s: 3px 4px 0 #05090f; --cm-radius: 18px; } /* ─── Il fondo dipinto ────────────────────────────────────────────────── Quattro tratti ancorati agli angoli della schermata, ruotati, che SBORDANO: e' il bordo tagliato a dare l'impressione che la pagina sia piu' grande di quello che si vede. Sono decorativi e non devono mai intercettare un tocco. */ html[data-age="kids"] .screen.active > .content { position: relative; } html[data-age="kids"] .cm-brushes { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } html[data-age="kids"] .cm-brushes img { /* Da .9 a .55 il 2026-08-29. Le pennellate stanno DIETRO al testo, e a piena forza decidevano loro il contrasto: misurato, i titoli di sezione che capitavano sopra il tratto verde-acqua scendevano a 4,26:1 e il conteggio delle pagine del vocabolario a 1,62:1 — la stessa scritta era leggibile o no a seconda di dove finiva. A .55 restano il fondo dipinto della pelle e smettono di competere con le parole. */ position: absolute; width: auto; opacity: .55; } /* Le posizioni sono scritte a mano, non generate: quattro tratti messi bene battono otto messi a caso, e il fondo di una schermata per bambini si guarda mille volte. */ html[data-age="kids"] .cm-b1 { top: 2%; left: -30%; height: 22vh; transform: rotate(-22deg); } html[data-age="kids"] .cm-b2 { top: 34%; right: -34%; height: 26vh; transform: rotate(18deg); } html[data-age="kids"] .cm-b3 { bottom: 4%; left: -26%; height: 24vh; transform: rotate(-6deg); } html[data-age="kids"] .cm-b4 { bottom: 14%; right: -30%; height: 22vh; transform: rotate(-16deg); } html[data-age="kids"] .content > *:not(.cm-brushes) { position: relative; z-index: 1; } /* LO STESSO VALE PER LE SCHERMATE `bh-scope`, che non usano `.content` ma `.bh-header` / `.bh-ribbon` / `.bh-body`. Senza questa riga le pennellate (fixed, z-index 0) restavano SOPRA il contenuto di quelle schermate: un elemento posizionato dipinge sopra il fondo e il testo di uno non posizionato, quindi la card del Daily Review si vedeva azzurra invece che bianca e l'etichetta «Phrasal verb» misurava 4,36:1 invece dei 5,0 che il suo token garantisce su carta. MISURATO con audit-contrast.mjs, e sistemato sollevando il contenuto invece che scurendo l'etichetta: scurire il testo avrebbe curato quella parola e lasciato il difetto a tutte le altre, che cambiano contrasto a seconda di dove passa il tratto dipinto. */ html[data-age="kids"] .bh-header, html[data-age="kids"] .bh-ribbon, html[data-age="kids"] .bh-body > * { position: relative; z-index: 1; } /* ─── Card a contorno ─────────────────────────────────────────────────── */ html[data-age="kids"] .bh-card, html[data-age="kids"] .module-card, html[data-age="kids"] .hub, /* `.mg-item` NON e' piu' qui: nel sottomenu dei bambini la voce e' un CERCHIO con il nome sotto, e il contorno nero con l'ombra dura sta sul cerchio, non attorno alla tessera. Una scheda squadrata attorno a un disco sarebbe due contorni concentrici. Vedi il blocco «Il sottomenu dei bambini» piu' sotto; le altre due fasce continuano a leggere la regola di menu.css. */ html[data-age="kids"] .kp-card, html[data-age="kids"] .league-tier, html[data-age="kids"] .settings-row { /* `#fff` scritto a mano restava bianco anche di notte, mentre il testo diventava chiaro: «Parole» era 1,10:1 su bianco, cioe' invisibile. `--bh-paper` la notte vale #1b2638 (vedi age-bands.css). */ background: var(--bh-paper); border: 3px solid var(--cm-ink); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); } /* ─── Bottoni ───────────────────────────────────────────────────────── L'ombra dura si SCHIACCIA alla pressione: il bottone scende di due pixel e l'ombra si accorcia. E' il gesto che fa sembrare un pulsante un oggetto invece di un rettangolo colorato. */ html[data-age="kids"] .btn, html[data-age="kids"] .btn-primary, html[data-age="kids"] .kp-go, html[data-age="kids"] .kp-opt, html[data-age="kids"] .theme-btn { border: 3px solid var(--cm-ink); border-radius: 999px; box-shadow: var(--cm-shadow-s); font-weight: 800; transition: transform .06s, box-shadow .06s; } html[data-age="kids"] .btn:active, html[data-age="kids"] .btn-primary:active, html[data-age="kids"] .kp-go:active, html[data-age="kids"] .kp-opt:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--cm-ink); } /* ─── Nuvolette ─────────────────────────────────────────────────────── Nella scenetta il testo inglese sta QUI, non in un riquadro sotto: la nuvoletta e' l'esercizio, e un bambino la legge come legge un fumetto. */ .cm-bubble { position: relative; display: inline-block; max-width: 82%; background: #fff; color: var(--cm-ink-carta, #10202f); border: 3px solid var(--cm-ink-carta, #10202f); border-radius: 16px; padding: 11px 15px; font-weight: 700; line-height: 1.35; box-shadow: 3px 4px 0 var(--cm-ink-carta, #10202f); } .cm-bubble::after, .cm-bubble::before { content: ""; position: absolute; bottom: -17px; width: 0; height: 0; border: 9px solid transparent; } .cm-bubble::before { border-top-color: var(--cm-ink, #10202f); bottom: -21px; } .cm-bubble::after { border-top-color: #fff; } /* La codina si posiziona con --coda, in percentuale della nuvoletta: deve puntare a CHI PARLA, non a un angolo fisso. Con un valore fisso la nuvoletta di Pip indicava il vuoto a destra del banco. */ .cm-bubble::before, .cm-bubble::after { left: var(--coda, 50%); margin-left: -9px; } .cm-bubble--left::before, .cm-bubble--left::after { left: var(--coda, 26%); } .cm-bubble--right::before, .cm-bubble--right::after { left: var(--coda, 74%); } /* ─── Intestazione Junior ─────────────────────────────────────────────── */ html[data-age="kids"] .home-header, html[data-age="kids"] .page-header { /* I token --barra-* (style.css): la barra si INVERTE rispetto alla pagina — chiara -> navy, scura -> chiara — deciso con Ciro il 2026-08-30. Prima qui c'era `--bh-paper` fisso, che di giorno lasciava una barra bianca su pagina bianca e il problema l'aveva gia' pagato di notte. */ background: var(--barra-fondo) !important; border-bottom: 3px solid var(--cm-ink); color: var(--barra-testo) !important; } html[data-age="kids"] .page-header h1, html[data-age="kids"] .home-header * { color: var(--barra-testo) !important; } /* I due gettoni gialli sono superfici a colore FISSO: la spazzata qui sopra («tutto quello che sta nell'intestazione») di notte li ridipingeva di chiaro sul giallo — «Junior» misurava 1,34:1. */ /* I due bottoni tondi sono una superficie FISSA (bianca in ogni tema), come i gettoni gialli qui sotto: la spazzata «tutto --barra-testo» di notte dipingeva l'icona di chiaro su bianco — un bottone invisibile che pero' si preme. Superficie fissa, icona fissa. */ html[data-age="kids"] .home-header .home-settings-btn, html[data-age="kids"] .home-header .home-settings-btn svg { background: #fff !important; color: var(--cm-ink-carta) !important; /* anche lo stroke, E CON !important: senza, la regola scura generica ([data-theme="dark"] .home-settings-btn svg { stroke: --barra-fondo !important }) vinceva sulla proprieta' e l'icona tornava chiara sul gettone bianco — terza vita dello stesso bottone, trovata da Ciro di notte. Un !important contro un !important si vince solo con la specificita' E l'importanza insieme. */ stroke: var(--cm-ink-carta) !important; } html[data-age="kids"] .home-header .home-settings-btn svg { background: none !important; } /* Sul telefono l'intestazione si stringe attorno al nastro (che NON si rimpicciolisce: 76px sono la misura chiesta da Ciro). Il min-height di 130px del tema adulto lasciava aria vuota sopra e sotto, e a 390x844 ogni pixel dell'intestazione spinge la CTA del Sentiero verso la piega. */ html[data-age="kids"] .home-header { min-height: 0 !important; padding: 8px 16px 10px !important; } html[data-age="kids"] .home-header .cm-junior, html[data-age="kids"] .home-header .cm-score { color: var(--cm-ink-carta) !important; } /* IL BOTTONE «INDIETRO» ERA BIANCO SU BIANCO. La regola generale lo colora di `--bh-cream` perche' nel tema adulto l'intestazione e' navy; qui l'intestazione e' bianca e nella fascia bambini `--bh-cream` VALE bianco, quindi la freccia spariva: misurato 1,02:1, cioe' un pulsante invisibile che pero' si preme. La riga sopra non lo prendeva perche' seleziona `h1` e i figli della sola `home-header`. Qui diventa quello che deve essere nella pelle fumetto: contorno nero, fondo chiaro, freccia d'inchiostro. */ html[data-age="kids"] .page-header .btn-secondary { /* Inverso della barra: bottone chiaro con freccia navy sulla barra navy, bottone navy con freccia chiara sulla barra chiara. */ background: var(--barra-testo) !important; border: 2.5px solid var(--cm-ink) !important; color: var(--barra-fondo) !important; box-shadow: 2px 2px 0 var(--cm-ink) !important; } html[data-age="kids"] .page-header .btn-secondary:hover { background: var(--barra-testo) !important; border-color: var(--cm-ink) !important; } .cm-score { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 11px; background: #ffc72c; color: var(--cm-ink-carta, #10202f); border: 3px solid var(--cm-ink-carta, #10202f); border-radius: 999px; font-weight: 800; font-size: .9rem; } /* ─── Barra in basso a quattro voci ───────────────────────────────────── */ html[data-age="kids"] #bottom-nav { background: #fff !important; border-top: 3px solid var(--cm-ink) !important; } html[data-age="kids"] .nav-item { color: var(--cm-ink) !important; font-weight: 800; } html[data-age="kids"] .nav-item.active { color: #e4002b !important; } html[data-age="kids"] .nav-item svg { stroke-width: 2.6; } /* ─── Il Sentiero ───────────────────────────────────────────────────── Il tabellone NON e' piu' una griglia: e' una mappa illustrata, e il suo stile sta tutto in kids-path.css + kids-path-map.js. Qui resta solo cio' che la pelle fumetto aggiunge: il contorno nero attorno alla mappa. Le regole che c'erano prima (caselle quadrate, sei per riga, il riquadro bianco) sono state tolte con la griglia — una regola che punta a un contenitore che non esiste piu' non da' errore, resta li' e confonde chi legge. */ html[data-age="kids"] .kp-map { border: 3px solid var(--cm-ink); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow: hidden; } html[data-age="kids"] .kp-qui { filter: none; } /* ─── La home dei bambini ────────────────────────────────────────────── LA HOME E' UN CONTENITORE, NON UN GIOCO. La prima versione nascondeva TUTTO tranne la scenetta, e il risultato misurato era: zero hub visibili e una sola porta in tutta la pagina — 37 voci di menu irraggiungibili per un bambino. Era una regressione, non una scelta di stile. Adesso sparisce solo cio' che e' scritto per un adulto, elencato qui una voce alla volta, e il MENU RESTA. La scenetta prende il posto del banner dei luoghi iconici: e' un ingresso fra gli altri, non la pagina. Si nasconde e non si cancella: la home adulta deve tornare intera se la fascia cambia dalle impostazioni. */ #kids-home { display: none; } html[data-age="kids"] #kids-home { display: block; } html[data-age="kids"] #home-hero, /* il banner dei monumenti: lo sostituisce la scenetta */ html[data-age="kids"] #exam-plan-promo, /* piano d'esame con l'AI: la chat e' chiusa ai bambini */ html[data-age="kids"] #sec-picks, html[data-age="kids"] .picks-grid, /* "parola del giorno": nessuna voce sotto il B2 */ html[data-age="kids"] #readiness-home-card, /* quanto sei pronto per il DELE/Cambridge */ html[data-age="kids"] #error-profile-home-card, html[data-age="kids"] #recipe-home-card, /* la ricetta del giorno */ html[data-age="kids"] .placement-cta, html[data-age="kids"] #sec-level, /* La riga di pillole resta via: sei bottoni CEFR in mezzo alla home sono un'interfaccia da adulti. Il livello pero' si cambia — dalla tessera "Level" in cima, che apre il selettore (chiesto da Ciro il 2026-08-30: qui non era modificabile affatto, ed era l'unica fascia in cui il livello restava bloccato per sempre). */ html[data-age="kids"] #level-pills, html[data-age="kids"] #sec-exams, html[data-age="kids"] #exam-hero-card, /* "Starters -> IELTS -> TKT" e' un discorso da adulti */ html[data-age="kids"] #pro-banner-home { /* il paywall a un bambino non si mostra */ display: none !important; } html[data-age="kids"] #sec-menu { font-size: 1rem; } /* Il gettone delle stelle sta accanto a "CASELLA n DI 66", dove significa qualcosa. Prima era in una riga sua col marchio, e il marchio e' salito nella barra. */ .kh-strip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .kh-title { font-family: var(--bh-font-display, inherit); font-size: 1.72rem; line-height: 1.12; font-weight: 800; color: var(--cm-ink, #10202f); margin: 0 0 16px; } /* Qui stavano `.kh-scene`, `.kh-scene-img`, `.kh-bubble` e la sua `.is-speaking`: erano la scenetta del mercato, tolta dalla home quando il saluto del giorno ha preso il suo posto (regola «la home e' il manifesto: niente che si possa finire»). Nessun file le nominava piu'. Il feedback della lettura ora vive su `.kh-saluto-bolla`, piu' in basso: tenere qui una classe morta con lo stesso mestiere avrebbe fatto credere, alla prossima lettura del foglio, che il saluto usasse questa. */ .kh-cta { width: 100%; padding: 15px; font-size: 1.02rem; background: #e4002b; color: #fff; margin-bottom: 18px; } /* La striscia del tabellone: sei caselle attorno a quella corrente. Tutto il tabellone sta nel Sentiero; qui serve solo sapere a che punto si e'. */ .kh-strip { display: block; width: 100%; text-align: left; cursor: pointer; background: #fff; border: 3px solid var(--cm-ink-carta, #10202f); border-radius: 18px; box-shadow: 5px 6px 0 var(--cm-ink-carta, #10202f); padding: 12px 14px 14px; font-family: inherit; color: var(--cm-ink-carta, #10202f); } .kh-strip-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-ink-carta, #10202f); } .kh-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; } .kh-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 11px; font-weight: 800; font-size: .92rem; border: 3px solid var(--cm-ink, #10202f); box-shadow: 2px 3px 0 var(--cm-ink, #10202f); } .kh-cell.is-done { background: #17a398; color: #fff; } .kh-cell.is-done:nth-child(3n) { background: #ffc72c; color: #10202f; } .kh-cell.is-next { background: #e4002b; color: #fff; } /* #68778a faceva 3,9:1 sul bianco velato delle pennellate (misurato): una riga secondaria si spegne col COLORE, ma sopra la soglia. */ .kh-cell.is-locked { background: #fff; color: #4c5b6e; border-color: #b6c2ce; box-shadow: none; } /* ─── La striscia dei giochi ─────────────────────────────────────────── Sta SOTTO il pulsante grande del Sentiero, larga quanto la pagina: cosi' si legge come la seconda cosa da fare e non come un'alternativa alla prima. Deciso con Ciro il 2026-08-30 fra tessera / pulsante / striscia. Fondo FISSO e quindi inchiostro FISSO (`--cm-ink-carta`, che non gira col tema): e' la regola pagata sulle card della giornata, dove un fondo bianco scritto a mano sotto un testo che seguiva il tema dava sei scritte a 1,09:1 di notte. Se un giorno questa striscia prendesse `--bh-paper`, allora il testo dovra' passare a `--cm-ink`. Le due cose si muovono insieme, sempre. */ .kh-giochi { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 18px; padding: 11px 13px; text-align: left; cursor: pointer; font-family: inherit; background: #ffd93d; color: var(--cm-ink-carta, #10202f); border: 3px solid var(--cm-ink-carta, #10202f); border-radius: 18px; box-shadow: 5px 6px 0 var(--cm-ink-carta, #10202f); } /* Le facce si sovrappongono come un mazzo di carte: tre ritratti in fila occupavano meta' della striscia e spingevano fuori il sottotitolo. */ .kh-giochi-facce { display: flex; flex: 0 0 auto; } .kh-giochi-faccia { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top center; background: #fff; border: 2.5px solid var(--cm-ink-carta, #10202f); } .kh-giochi-faccia + .kh-giochi-faccia { margin-left: -14px; } .kh-giochi-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .kh-giochi-t { font-size: 1.02rem; font-weight: 800; line-height: 1.15; } .kh-giochi-s { font-size: .78rem; font-weight: 600; line-height: 1.25; } .kh-giochi-freccia { flex: 0 0 auto; font-size: 1.3rem; font-weight: 800; } /* IL MARCHIO STA IN CIMA, dove lo cerca chiunque. La prima versione nascondeva il nastro BritMaster e metteva "BritMaster Junior" sotto le tre tessere: il risultato era una barra alta e VUOTA con due bottoncini a destra, e il marchio in mezzo alla pagina. Ciro l'ha chiesto guardando il telefono, ed era la domanda giusta: una barra che non contiene niente non serve a niente. Ora il nastro c'e' (piu' piccolo) con accanto il gettone "Junior", e la barra e' alta quanto basta. Via resta solo la striscia navy di Londra — ora e meteo non sono roba da bambini. */ html[data-age="kids"] #london-strip { display: none !important; } html[data-age="kids"] .home-header { border-bottom: none !important; position: relative; padding-top: 8px !important; padding-bottom: 8px !important; min-height: 104px !important; } /* IL NASTRO STA IN MEZZO E SI VEDE. Storia in due tappe, e la seconda l'ho sbagliata io. Prima era nascosto e il marchio finiva sotto le tessere: barra alta e vuota. Poi l'ho rimesso nel flusso, a sinistra, a 42px — e a quel punto era li' ma minuscolo, «sembra un'app anonima» (Ciro, 2026-08-30). Il marchio e' il marchio: sta al CENTRO della barra e si vede. E' alto quanto basta a giustificare la barra, non 115px come nel tema adulto, e si porta dietro il gettone Junior dentro `.cm-marchio` — vedi `applyJuniorBadge()`, che li mette in un contenitore proprio per questo. */ html[data-age="kids"] .cm-marchio { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } html[data-age="kids"] .header-ribbon-img { position: static !important; transform: none !important; height: 66px !important; width: auto !important; max-width: 300px !important; filter: none !important; } /* Su un telefono stretto il gruppo centrato (nastro + gettone in fila) e' piu' largo dello spazio fra i due bottoni tondi, e il gettone ci finiva SOPRA. Si impila invece di rimpicciolire il nastro: e' il nastro la cosa che deve vedersi. */ @media (max-width: 560px) { /* Sul telefono i due bottoni tondi ESCONO DAL FLUSSO e vanno in alto a destra: restando in fila obbligavano il nastro a stare dentro lo spazio avanzato, cioe' a rimpicciolirsi fino a sparire. Cosi' invece il nastro ha tutta la larghezza e i bottoni stanno dove uno li cerca comunque. */ html[data-age="kids"] .home-header { display: block !important; text-align: center; /* 164 -> 150: a 390x844 ogni pixel qui spinge la CTA del Sentiero sotto la piega. Il nastro resta 76px (misura chiesta da Ciro): si toglie ARIA, non marchio. */ min-height: 150px !important; padding-left: 12px !important; padding-right: 12px !important; } html[data-age="kids"] .home-header > div { position: absolute; right: 12px; top: 8px; margin-left: 0 !important; } /* Il nastro passa SOTTO i due bottoni, non accanto: affiancati, o si sovrappongono o il nastro deve rimpicciolirsi per far loro posto — ed e' esattamente il rimpicciolimento che Ciro ha ripreso due volte. Il nome dell'app viene prima di un bottone di aggiornamento. */ html[data-age="kids"] .cm-marchio { position: static; transform: none; flex-direction: column; gap: 4px; /* 42 -> 32: il nastro e' un arco, e ai lati — dove stanno i bottoni tondi — il suo bordo alto scende; 32px bastano a non toccarli. */ margin: 0 auto; padding-top: 32px; } html[data-age="kids"] .header-ribbon-img { height: 76px !important; max-width: 94% !important; } } .cm-junior { display: inline-flex; align-items: center; margin-left: 9px; padding: 3px 11px; border-radius: 999px; background: #ffc72c; color: var(--cm-ink-carta, #10202f); border: 2.5px solid var(--cm-ink-carta, #10202f); font-weight: 800; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; } /* Il bottone impostazioni prende il contorno del fumetto come tutto il resto. */ html[data-age="kids"] .home-settings-btn { border: 2.5px solid var(--cm-ink) !important; background: #fff !important; color: var(--cm-ink) !important; box-shadow: 2px 3px 0 var(--cm-ink); } /* I premi si riconoscono senza leggere: fondo oro anche da bloccati. Erano indistinguibili dalle prove, e un premio che non si vede arrivare non tira. */ html[data-age="kids"] .kp-sq.kp-premio.is-locked { background: #fff6dc; border-color: #d8a400; color: #8a6500; box-shadow: 2px 3px 0 #d8a400; } /* Il personaggio sulla voce di menu. Sborda in alto: sta dentro il riquadro ma esce dal bordo, che e' il gesto da fumetto — un adesivo appiccicato, non un'illustrazione incorniciata. */ html[data-age="kids"] .hub { min-height: 104px; overflow: visible; } /* Il personaggio sulla voce di menu. LA LARGHEZZA E' FISSA, NON L'ALTEZZA, e il testo ha un corridoio largo uguale. Prima era `height: 118%`: l'altezza era uguale per tutti ma la LARGHEZZA dipendeva dalle proporzioni del file, quindi i due personaggi quadrati (Ted e Rocky, 800x800) sbordavano sul testo e quelli verticali no. Misurato: la faccia copriva il titolo su 4 tessere su 7, fino a 835 px2 su "Scoprire la Gran Bretagna". Con la larghezza fissa e il corridoio della stessa misura, non puo' piu' succedere qualunque immagine arrivi domani. */ .hub-face { position: absolute; right: 10px; bottom: 0; width: var(--faccia, 68px); height: auto; max-height: 104%; object-fit: contain; object-position: bottom right; pointer-events: none; filter: drop-shadow(2px 3px 0 rgba(16,32,47,.18)); } html[data-age="kids"] .hub-body { padding-right: calc(var(--faccia, 68px) + 16px); } html[data-age="kids"] .hub::before { width: 7px; border-radius: 14px 0 0 14px; } /* ─── Il sottomenu dei bambini: CERCHI, non righe ────────────────────── «Menu circolari con il disegno della sezione e la scritta sotto, piu' colorato e piu' user friendly» (Ciro, 2026-08-30). Vale per la fascia BAMBINI e basta: i ragazzi tengono le righe, che a dodici anni si leggono meglio di una griglia di dischi e reggono i sottotitoli. Riaprirle a `junior` un giorno e' aggiungere un selettore a queste regole. Nessun markup nuovo: `renderMenuGroup` disegna sempre icona + testo + freccia, e qui cambiano solo direzione, forma e cosa si vede. Cosi' il giorno in cui la fascia si cambia dalle impostazioni la lista adulta torna intera da sola — e' la stessa regola del «si nasconde, non si cancella». IL SOTTOTITOLO SPARISCE. A sette anni non si legge «130+ verbs A1→C2» sotto un'icona: si guarda il disegno e si tocca. Sparisce anche la freccia, che in una griglia di cerchi non indica piu' niente. L'INCHIOSTRO SUL DISCO E' BIANCO, E IL DISCO E' SCURITO PER REGGERLO. Misurato sui sette colori dei gruppi (menu-map.js), bianco su tinta piena: parole 5,88 · grammatica 14,76 · abilita 6,02 · conversare 6,90 · esami 3,25 · britannia 16,45 · strumenti 5,47. L'oro degli Esami e' lo stesso 3,25:1 gia' scritto su `.hub-count` in menu.css: passerebbe la soglia dei 3:1 delle icone, ma sarebbe l'unico dei sette a stare sul filo. Mescolando il colore del gruppo con un quarto d'inchiostro il peggiore sale a 4,85:1 — cioe' tutti e sette reggerebbero anche se domani dentro al cerchio ci finisse del TESTO — e le sei tinte gia' scure non cambiano visibilmente (la piu' chiara guadagna mezzo punto). Il colore del gruppo si riconosce lo stesso: e' il suo, appena piu' cupo. Il disco NON gira col tema (il colore arriva dal dato, non da un token), quindi il bianco sopra e' giusto di giorno e di notte; il contorno invece e' `--cm-ink`, che di notte si schiarisce come ogni altro contorno di questa pelle. */ html[data-age="kids"] .mg-list { grid-template-columns: repeat(3, 1fr); gap: 22px 10px; /* Le etichette hanno lunghezze diverse: senza questo i cerchi di una riga si allineano al centro di celle alte quanto la voce piu' lunga e la fila di dischi diventa ondulata. */ align-items: start; } html[data-age="kids"] .mg-item { flex-direction: column; align-items: center; gap: 9px; padding: 2px 0; text-align: center; /* La tessera non c'e' piu': il contorno e l'ombra stanno sul cerchio. */ background: none; border: 0; box-shadow: none; } html[data-age="kids"] .mg-icon { /* In colonna `flex: 0 0 40px` di menu.css fisserebbe l'ALTEZZA e lascerebbe la larghezza al contenuto: il disco uscirebbe ovale. */ flex: 0 0 auto; width: 78px; height: 78px; border-radius: 50%; background: color-mix(in srgb, var(--hub-current, var(--bh-navy)) 75%, #10202f); color: #fff; border: 3px solid var(--cm-ink); box-shadow: var(--cm-shadow-s); transition: transform .06s, box-shadow .06s; } /* `!important` perche' due icone di menu-map.js portano larghezza e altezza in uno stile INLINE (il mirino del Placement Test e' 22px scritto nel markup), e uno stile inline batte qualunque foglio: senza, in mezzo ai dischi ne resterebbero un paio con il disegno grande la meta'. E' la stessa trappola delle scritte colorate inline dal JavaScript. */ html[data-age="kids"] .mg-icon svg { width: 40px !important; height: 40px !important; } /* Il disco col DISEGNO (`cerchio` in menu-map.js): l'immagine riempie il cerchio intero e il ritaglio lo fa l'overflow del disco, che tiene per se' contorno d'inchiostro e ombra. Il fondo del gruppo resta sotto come ripiego mentre l'immagine carica: un disco vuoto per mezzo secondo e' il difetto che si nota. I disegni hanno gia' il loro fondo pastello, quindi niente velature e niente testo sopra — la scritta sta sotto, sul fondo pagina, ed e' gia' misurata dall'audit del contrasto. */ html[data-age="kids"] .mg-icon--img { overflow: hidden; } html[data-age="kids"] .mg-icon--img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Il tocco SCHIACCIA il disco, come ogni altro oggetto di questa pelle: e' il gesto che lo fa sembrare un bottone vero e non un cerchio dipinto. */ html[data-age="kids"] .mg-item:active .mg-icon { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--cm-ink); } html[data-age="kids"] .mg-text { flex: 0 0 auto; width: 100%; align-items: center; } /* Corpo pieno e tinta piena. Il nome sotto il cerchio e' l'unica scritta rimasta: spegnerlo con l'opacita' lo farebbe dipendere dalla pennellata che gli capita sotto — regola gia' pagata in tutta l'app. */ html[data-age="kids"] .mg-title { font-size: .92rem; font-weight: 800; line-height: 1.22; color: var(--bh-text); } html[data-age="kids"] .mg-desc, html[data-age="kids"] .mg-chev { display: none; } /* ─── Le card della giornata adulta non stanno nella home dei bambini ─── Deciso con Ciro il 2026-08-30, guardando la pagina: «"your 7 days study plan" e' troppo serio», «daily review e daily challenge li puoi togliere dalla pagina bambini». Sono quattro superfici che dicono la STESSA cosa del Sentiero — «ecco cosa fai oggi» — con il vocabolario di un adulto che si prepara a un esame: #daily-card-home «Today's Adventure!», tre compiti e +XP: e' la sessione quotidiana degli adulti. Per un bambino la sessione quotidiana E' la casella del giorno, e due «oggi fai questo» in una pagina sola non sono il doppio dell'invito: sono un bivio. #weekly-plan-home-card il piano di sette giorni. #daily-review-home-card il ripasso SRS. Non sparisce: e' entrato NELLA giornata del Sentiero come prima prova («Ti ricordi?»), che e' il posto dove un bambino lo incontra invece di doverlo scegliere. #dc-home-card la sfida quotidiana. Le due che restano (#resume-session-home-card, #recommended-home-card) sono quasi sempre vuote e non annunciano una giornata concorrente: la prima riprende una sessione interrotta, la seconda suggerisce dove sei debole. Prendono il contorno nero come tutto il resto. Si NASCONDE e non si cancella: la home adulta deve tornare intera se la fascia cambia dalle impostazioni. */ html[data-age="kids"] #daily-card-home, html[data-age="kids"] #weekly-plan-home-card, html[data-age="kids"] #daily-review-home-card, html[data-age="kids"] #dc-home-card { display: none !important; } html[data-age="kids"] #resume-session-home-card > *, html[data-age="kids"] #recommended-home-card > * { border: 3px solid var(--cm-ink) !important; border-radius: var(--cm-radius) !important; box-shadow: var(--cm-shadow) !important; } /* Le tre tessere in cima (serie, XP, livello) prendono il contorno nero e basta. NON si tocca il fondo: il colore lo porta un `background-image` (gradiente), non un `background-color`, quindi annullarlo le lascia BIANCHE CON IL TESTO BIANCO — cioe' invisibili. Errore fatto e visto in uno screenshot; e' il motivo per cui una regola che spegne un fondo va sempre guardata a schermo. */ html[data-age="kids"] .stat-card { border: 3px solid var(--cm-ink) !important; border-radius: 14px !important; box-shadow: var(--cm-shadow-s) !important; /* Compatte (16px -> 9px): a 390x844 le tre tessere erano alte 114px e spingevano la CTA del Sentiero sotto la piega — sono un contorno, non il piatto. Misurato prima/dopo in /tmp/piega-*.png. */ padding: 9px 10px !important; } html[data-age="kids"] .stats-row { margin-bottom: 14px; } /* La tessera del livello e' un pulsante anche qui, e la freccina che lo dice dev'essere spessa quanto tutto il resto del fumetto: a 2px spariva contro i contorni da 3px. */ html[data-age="kids"] .stat-card--btn::after { width: 7px; height: 7px; border-width: 3px; } /* Il selettore del livello, in fumetto: contorno nero e ombra dura come ogni altra superficie della pelle. */ html[data-age="kids"] .level-opt { border: 3px solid var(--cm-ink) !important; border-radius: var(--cm-radius) !important; box-shadow: var(--cm-shadow-s) !important; } html[data-age="kids"] .level-opt.is-locked { border-style: dashed !important; box-shadow: none !important; } /* ─── Il saluto del giorno ───────────────────────────────────────────── E' un FUMETTO, e in un fumetto la nuvoletta sta nella sua striscia sopra la vignetta, con la codina che punta a chi parla. Ci sono voluti due tentativi sbagliati per arrivarci, ed e' bene che restino scritti perche' erano tutti e due "ragionevoli". (1) Nuvoletta SOPRA il disegno, in un angolo. Funziona solo se il testo e' minuscolo: la scheda e' alta ~200px su un telefono, e una frase di 43 caratteri a corpo leggibile (16px) ne occupa 90 su due o tre righe. Misurato: a corpo 16px, in 13 scene su 30 NON ESISTE un angolo libero — la nuvoletta copre per forza il personaggio o cio' di cui parla. Rimpicciolire il carattere per farcela e' esattamente la leva sbagliata in un'app per bambini ("non scritto talmente piccolo che ci vuole il microscopio" — Ciro, 2026-08-29). (2) Nuvoletta senza codina. Allora non e' un fumetto: e' un cartello, e non si capisce chi parla. Che era la seconda meta' della stessa osservazione di Ciro. La risposta e' quella che questo progetto ha gia' dato per le scenette del mercato: si allarga la TELA invece di rimpicciolire la scena, cosi' il disegno resta grande e intero. Li' la banda e' dipinta dentro l'illustrazione; qui e' una striscia di carta in CSS, perche' l'altezza deve seguire il testo (due righe o tre) e perche' non tocca i 30 file. */ .kh-saluto { position: relative; margin-bottom: 12px; border: 3px solid var(--cm-ink, #10202f); border-radius: 20px; box-shadow: 5px 6px 0 var(--cm-ink, #10202f); overflow: hidden; background: #fffdf6; } .kh-saluto-img { display: block; width: 100%; height: auto; } /* Sul telefono la vignetta ha un TETTO morbido: a 390px era alta 219px e spingeva la CTA del Sentiero sotto la piega. Il ritaglio avviene dal CIELO (`object-position: bottom`): i personaggi stanno in basso, e tagliare i piedi a Pip per guadagnare pixel sarebbe il verso sbagliato. Guardata scena per scena dopo il taglio, non solo misurata. */ @media (max-width: 560px) { .kh-saluto-img { max-height: 182px; object-fit: cover; object-position: bottom; } .kh-saluto-testo { padding: 10px 13px 11px; } /* Il primo schermo del telefono e' un budget: l'aria fra intestazione e tessere si paga in CTA sotto la piega. */ html[data-age="kids"] #home-screen .content { padding-top: 10px; } } /* La striscia della nuvoletta. Non copre niente: sta sopra la vignetta. */ .kh-saluto-testo { display: flex; flex-direction: column; gap: 7px; padding: 13px 15px 15px; } /* La nuvoletta sta dalla parte del PERSONAGGIO, non dalla parte opposta: ora che non copre piu' il disegno, starle vicino e' cio' che rende ovvio chi parla. Il lato viene da `lato` nel saluto, che e' il dato con cui l'illustrazione e' stata generata. */ .kh-lato--sx { align-items: flex-start; } .kh-lato--dx { align-items: flex-end; text-align: right; } .kh-saluto-riga { display: flex; align-items: flex-end; gap: 9px; } /* Il bottone IT sta dalla parte OPPOSTA al personaggio, cosi' la nuvoletta puo' arrivare fino al bordo dalla sua parte e la codina raggiungerlo. Col bottone dalla stessa parte, la nuvoletta partiva 45px piu' in la' e la codina restava indietro: sulla volpe di Trafalgar Square finiva in mezzo alla piazza, contro il fermo di sicurezza del 12%. */ .kh-lato--dx .kh-saluto-riga { flex-direction: row-reverse; } /* IL TESTO SI DEVE LEGGERE: corpo pieno, come il testo di un libro per bambini. La casella resta piccola con `fit-content` — cioe' larga quanto la frase — mai rimpicciolendo il carattere. */ .kh-saluto-bolla { font-size: 1.02rem; line-height: 1.3; padding: 11px 15px; max-width: 100%; width: fit-content; /* La nuvoletta e' un