/* ══════════════════════════════════════════════════════════════════════ LA PELLE SQUADRA — fascia ragazzi (10-13) ══════════════════════════════════════════════════════════════════════ Non e' un tema di colori: e' un'altra forma. Fondo crema, la GEOMETRIA che entra tagliata dai bordi a opacita' piena, una card missione con l'illustrazione grande, quattro tile 2x2, barra scura, gettone della serie. Un ragazzo che apre l'app deve vedere un'altra app, non quella degli adulti con altri colori. Tutto sotto html[data-age="junior"]: nessuna di queste regole tocca le altre due fasce. Riferimento: docs/tre-pelli-design.md §2 e docs/ragazzi-plan.md §4-§5. TRE COSE CHE VALGONO PER TUTTO IL FILE. (1) LA GEOMETRIA STA DIETRO, E NELLE FASCE ESTERNE. E' satura e a opacita' piena — l'opacita' in questo progetto non si usa per spegnere niente — quindi una riga di testo che le finisse sopra misurerebbe 2:1. Il fondo e' a z-index 0 e il contenuto a 1 (come le pennellate dei bambini in comic.css, dove la lezione e' gia' stata pagata con dieci difetti di contrasto), e le forme sono ancorate agli ANGOLI, dove stanno l'intestazione e la barra in basso, che hanno un fondo proprio. (2) OGNI TOKEN `--sq-*` HA LA SUA VARIANTE NOTTURNA. E' un difetto di SPECIFICITA' gia' pagato due volte: `html[data-age="junior"]` (0,1,1) batte `[data-theme="dark"]` (0,1,0), quindi un token dichiarato solo di giorno vince anche di notte. Il blocco notturno sta in fondo al file e ridichiara TUTTO. (3) SI NASCONDE, NON SI CANCELLA. La fascia si cambia dalle impostazioni e la home adulta deve tornare intera: qui dentro non c'e' nessuna regola che tolga un nodo dal DOM, solo `display: none` sotto `html[data-age="junior"]`. */ html[data-age="junior"] { /* Le due tinte del mondo. Le scrive `applySquadraBackdrop()` sul come `--sq-a1-base` / `--sq-a2-base` leggendole da `MONDI`; qui si derivano i colori che si usano davvero, cosi' il tema scuro puo' ridefinirli senza che il JS ne sappia niente (un colore scritto inline dal JS batterebbe qualunque foglio, tema compreso — regola della casa). I ripieghi servono al primo istante, prima che il JS giri. */ --sq-a1: var(--sq-a1-base, #1f6f5c); --sq-a2: var(--sq-a2-base, #ffc72c); --sq-ink: #0f1b33; /* l'inchiostro della pelle: il navy della fascia */ --sq-su-oro: #14213d; /* testo SOPRA l'oro: bianco su oro fa 1,6:1 */ /* L'OCCHIELLO DELLA CARD MISSIONE NON E' UNA TINTA DEL MONDO, ed e' una correzione fatta guardando. La prima stesura lo scriveva in `--sq-a2`, cioe' nella seconda tinta del mondo: sul mondo di default (oro) si leggeva benissimo, ma le tinte sono undici e due di loro sono SCURE — il navy di «Castello di Hollybeck» e il verde bosco. Navy su una velatura navy e' invisibile, e non l'avrebbe detto nessun audit: la card mostra UN mondo alla volta, e l'audit naviga col mondo di default. La velatura e' scura in tutti e tre i temi (e' un gradiente sopra un'illustrazione, e un'illustrazione non ha una versione notturna), quindi il testo che ci sta sopra e' FISSO: stessa regola di `--cm-ink-carta` nella pelle fumetto, al contrario. */ --sq-occhiello: #ffc72c; /* LE TINTE DELLA GEOMETRIA NON SONO LE TINTE DEL MONDO, e la differenza e' stata MISURATA, non temuta. `#sq-geo` e' `position: fixed`: le sue forme stanno negli angoli della FINESTRA, e scorrendo la pagina ogni riga di testo ci passa sopra prima o poi — «le forme stanno nelle fasce esterne» protegge il primo schermo, non il quinto. Con le tinte piene bastava un mondo scuro perche' una riga navy finisse su una forma navy: «Cosa vuoi fare», 1:1, misurato sulla home di Castello di Hollybeck, il cui secondo accento E' l'inchiostro della pelle. Non era un difetto del castello: era un difetto che il castello rendeva visibile, e con undici mondi ce ne sono sei che potevano farlo. Si mescolano quindi al 40% col FONDO PAGINA (`--bh-cream`, che vale crema di giorno e notte scura di notte: la stessa espressione segue il tema da sola). Il caso peggiore — inchiostro puro sotto testo d'inchiostro — passa da 1:1 a 5,9:1. Il testo NON si tocca: si schiarisce il fondo, che e' decorazione, non si spegne una riga con l'opacita'. */ --sq-geo-1: color-mix(in srgb, var(--sq-a1) 40%, var(--bh-cream)); --sq-geo-2: color-mix(in srgb, var(--sq-a2) 40%, var(--bh-cream)); --sq-geo-ink: color-mix(in srgb, var(--sq-ink) 40%, var(--bh-cream)); --sq-ombra: 0 10px 26px rgba(15, 27, 51, .13); --sq-ombra-s: 0 4px 12px rgba(15, 27, 51, .10); --sq-radius: 16px; --sq-radius-lg: 22px; } /* ─── 1. La geometria di bordo ───────────────────────────────────────── Un SVG a piena schermata DIETRO il contenuto: archi spessi, triangoli pieni, uno spicchio; ancorati agli angoli e tagliati dal bordo. Quattro composizioni, scelte dall'INDICE della sezione e mai a caso, cosi' l'occhio impara la forma come impara il colore (e' la stessa regola della geometria degli hub). Il disegno lo fa `applySquadraBackdrop()`. */ html[data-age="junior"] .sq-geo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } html[data-age="junior"] .sq-geo svg { width: 100%; height: 100%; display: block; } /* Il contenuto sta SOPRA — MA SOLO DOVE LA GEOMETRIA C'E' DAVVERO. `data-sq-geo` lo mette `applySquadraBackdrop()` insieme a `#sq-geo`, dalla stessa lista di sezioni: cosi' queste regole vivono esattamente dove servono e non c'e' nessun id di schermata ricopiato in un foglio di stile (un id ricopiato invecchia in silenzio — e' il motivo per cui `age-bands.css` non ne contiene nessuno). PERCHE' NON SEMPRE. Senza il sollevamento la geometria dipinge sopra il testo di ogni elemento non posizionato: e' il difetto che comic.css ha gia' pagato con le pennellate, e va curato. Ma `position: relative` su OGNI figlio di `.content` cambia l'ordine di disegno anche su settanta schermate dove non c'e' nessuna geometria da scavalcare, e cambiare l'ordine di disegno di un'app intera per niente e' il genere di regola larga che poi si paga da un'altra parte. La cura si applica dove il male c'e'. */ html[data-age="junior"][data-sq-geo] .screen.active > .content { position: relative; } html[data-age="junior"][data-sq-geo] .content > * { position: relative; z-index: 1; } html[data-age="junior"][data-sq-geo] .bh-header, html[data-age="junior"][data-sq-geo] .bh-ribbon, html[data-age="junior"][data-sq-geo] .bh-body > * { position: relative; z-index: 1; } html[data-age="junior"][data-sq-geo] .page-header { position: relative; z-index: 2; } /* ─── 2. La testata: nastro grande, gettone della serie ──────────────── Una barra alta va bene SE contiene il marchio — era il vuoto il problema, non l'altezza (lezione (a-ter) della pelle fumetto, pagata con tre tentativi). IL NASTRO STA IN MEZZO, IL GETTONE SOTTO — e non accanto. Primo tentativo, guardato e scartato: il gettone nel flusso con `margin-left:auto`. Il nastro e' `position:absolute` e centrato, quindi non occupa spazio nel flusso, e il gettone gli finiva SOPRA — «SERIE 12» stampato in mezzo alla parola BRITMASTER. E' esattamente la trappola che la pelle fumetto aveva gia' risolto mettendo nastro e gettone dentro UN contenitore: due fratelli sciolti, di cui uno assoluto, non si evitano. Qui il contenitore non serve, perche' il gettone puo' stare su una riga sua: la barra e' alta abbastanza, e una barra alta va bene SE contiene il marchio. */ html[data-age="junior"] .home-header { display: block; text-align: center; position: relative; min-height: 132px; padding: 10px 16px 12px; } html[data-age="junior"] .header-ribbon-img { top: 10px; height: 62px; max-width: 340px; } /* I due bottoni tondi escono dal flusso e vanno in alto a destra: in fila obbligherebbero il nastro a stare nello spazio avanzato, cioe' a rimpicciolirsi — ed e' il rimpicciolimento che Ciro ha ripreso due volte sulla pelle dei bambini. */ html[data-age="junior"] .home-header > div { position: absolute; right: 12px; top: 12px; margin-left: 0 !important; } /* «SERIE 12». Lo monta `applySquadraHeader()` — nome NUOVO, perche' `applyJuniorBadge()` si chiama «junior» ma lavora per i BAMBINI: e' il gettone della pelle fumetto, e chi legge il nome e ci mette il gettone della serie dei ragazzi lo mette nella pelle sbagliata. */ html[data-age="junior"] .sq-serie { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; /* ORO FISSO, non la seconda tinta del mondo — stessa correzione dell'occhiello e per la stessa ragione: undici mondi, e due di loro hanno una tinta scura. Un gettone navy con la scritta navy su una barra navy non si vede, e la barra mostra UN mondo alla volta, quindi nessun audit che navighi col mondo di default lo troverebbe mai. */ background: var(--sq-occhiello); color: var(--sq-su-oro); font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; z-index: 2; } /* ─── 3. La card missione ────────────────────────────────────────────── L'illustrazione del MONDO, non una fotografia britannica: `tre-pelli` §2 diceva «usa le foto gia' sul disco», ma sul disco ci sono i 23 luoghi e le feste della Gran Bretagna, e una card missione di Isola Fossile con Stonehenge sotto e' un'incongruenza che un dodicenne nota prima di noi. Le 23 fotografie vere restano dove hanno senso: la striscia di Londra e il gruppo «Scoprire la Gran Bretagna». */ html[data-age="junior"] .sq-hero { position: relative; display: block; width: 100%; border: 0; padding: 0; margin: 0 0 16px; border-radius: var(--sq-radius-lg); overflow: hidden; background: var(--sq-ink); box-shadow: var(--sq-ombra); text-align: left; cursor: pointer; aspect-ratio: 16 / 10; } @media (min-width: 700px) { html[data-age="junior"] .sq-hero { aspect-ratio: 21 / 9; } } html[data-age="junior"] .sq-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* IL RIPIEGO DICHIARATO. Finche' l'illustrazione di un mondo non esiste su disco, la card mostra un campo nelle due tinte del mondo con il suo nome: e' un segnaposto SCELTO, non un'immagine mancante — un riquadro vuoto o un'icona rotta si legge come un guasto, e un guasto in home e' peggio di una card semplice. */ html[data-age="junior"] .sq-hero-tinta { position: absolute; inset: 0; background: radial-gradient(120% 90% at 82% 12%, var(--sq-a2) 0%, transparent 58%), linear-gradient(150deg, var(--sq-a1) 0%, var(--sq-ink) 88%); } /* La velatura che regge il testo. E' un GRADIENTE pieno e non una trasparenza sul testo: una riga spenta con l'opacita' prende il contrasto da cio' che le sta sotto, e sotto c'e' un'illustrazione diversa per ogni mondo. Il testo e' bianco pieno, sempre. */ html[data-age="junior"] .sq-hero-velo { position: absolute; inset: 0; /* Le tappe sono state alzate dopo aver MISURATO: l'occhiello in oro #ffc72c sull'illustrazione faceva 4,07:1 contro i 4,5 richiesti, perche' a quell'altezza la velatura valeva .42 e sotto passava il sottobosco chiaro. Si scurisce la FOTO, non si schiarisce il testo — e' la stessa decisione presa da Ciro per il banner della home il 2026-08-29: li' la foto e' il contenuto, e un pannello dietro le righe la coprirebbe peggio. */ background: linear-gradient(to top, rgba(8, 14, 28, .95) 0%, rgba(8, 14, 28, .88) 40%, rgba(8, 14, 28, .66) 70%, rgba(8, 14, 28, .22) 100%); } html[data-age="junior"] .sq-hero-testo { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 18px; } html[data-age="junior"] .sq-occhiello { display: block; font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--sq-occhiello); margin-bottom: 7px; } html[data-age="junior"] .sq-hero-titolo { display: block; color: #ffffff; font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: 1.42rem; line-height: 1.16; margin-bottom: 5px; text-wrap: balance; } html[data-age="junior"] .sq-hero-mondo { display: block; color: #e7ecf5; font-size: .86rem; font-weight: 600; letter-spacing: .01em; margin-bottom: 13px; } html[data-age="junior"] .sq-hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--bh-red); color: #ffffff; font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: .92rem; } /* Il bottone della MISSIONE copre tutta la card: la card non e' piu' un `