/* ========================================================================== RADAR.casa — TOKEN UNICI, il blocco canonico (livello 0.2 della piramide) Scritto il 2/9/2026, squadra S1 · TOKEN. Perché esiste: il disegno di Claude Design (_disegno/token.css) e questo tema dicevano cose diverse, e chi apriva una pagina nuova sceglieva a caso quale copiare. Qui sotto sta la RISPOSTA UNICA: ogni token che il tema usa davvero, con un nome parlante `--radar-*` che è ALIAS del nome storico (`--fondo`, `--testo`…) definito più sotto in questo stesso file — quel nome storico non si tocca, e niente nel resto del tema cambia comportamento. Un token nuovo, d'ora in poi, si scrive `--radar-qualcosa` e si cerca qui. REGOLA DI ARBITRAGGIO: quando il disegno e questo file divergono, VINCE QUESTO FILE — è il tema vero, misurato sul reso. Le divergenze sanate, i contrasti misurati e le cinque regole non negoziabili sono in: NeXeN Wiki/03 Progetti/radar.casa/Documenti/TOKEN-UNICI.md ========================================================================== */ :root { /* — Interfaccia: il 95% della superficie, desaturata. Alias di righe 233-238 più sotto = DISEGNO-ESTRATTO.md §1 "vince il tema". */ --radar-fondo: var(--fondo); /* #FCFAF7 · testo sopra ~15:1 → AAA (DESIGN.md:44) */ --radar-superficie: var(--superficie); /* #FFFFFF · card, pannelli, popup */ --radar-superficie-alt: var(--superficie-alt); /* #F6F2EC · fasce, hover */ --radar-testo: var(--testo); /* #1F1B18 */ --radar-testo-secondario: var(--testo-2); /* #6B625C · ~5,6:1 su fondo → AA (DESIGN.md:45) */ --radar-bordo: var(--bordo); /* #EBE5DE */ /* — Marchio e azione: due ruoli, mai lo stesso colore. Alias di righe 244-248. */ --radar-marchio: var(--marchio); /* #B5452E terracotta — logo, accenti. MAI il pulsante */ --radar-marchio-chiaro: var(--marchio-chiaro); /* #E07A5F · su fondo scuro */ --radar-azione: var(--azione); /* #1E5B4A verde bosco — SOLO il pulsante primario */ --radar-azione-hover: var(--azione-hover); /* #17493B */ --radar-azione-testo: var(--azione-testo); /* #FFFFFF · testo/icona sopra --radar-azione */ /* — Semantici, uno per stato. ⚠ --radar-verificato e --radar-attenzione NON sono i valori di DESIGN.md §3: sono i valori corretti dopo la misura sul reso (righe 251-263 più sotto). Vedi TOKEN-UNICI.md. */ --radar-verificato: var(--verificato); /* #25674A */ --radar-verificato-velo: var(--verificato-velo); /* #E9F2ED · fondo del badge */ --radar-attenzione: var(--attenzione); /* #8C5F00 · MAI #B37A00 (3,68:1) né #916300 (DESIGN.md, superato il 27/8) */ --radar-errore: var(--errore); /* #A93226 · mai come decorazione */ /* — I sei pin, Okabe-Ito. SOLO superfici piene: 5 su 6 non arrivano a 4,5:1 come colore del testo (DESIGN.md §3). Alias di righe 273-278. */ --radar-pin-affitto: var(--pin-affitto); /* #0072B2 */ --radar-pin-vendita: var(--pin-vendita); /* #D55E00 */ --radar-pin-vacanza: var(--pin-vacanza); /* #56B4E9 */ --radar-pin-terreni: var(--pin-terreni); /* #009E73 */ --radar-pin-servizi: var(--pin-servizi); /* #E69F00 */ --radar-pin-lavoro: var(--pin-lavoro); /* #CC79A7 */ /* — Tipografia: due caratteri, cinque corpi. Alias di righe 310-316. */ --radar-font: var(--font); /* Public Sans — testo */ --radar-font-titolo: var(--font-titolo); /* Instrument Serif — solo i titoli */ --radar-corpo-1: var(--t-1); /* 2.5rem */ --radar-corpo-2: var(--t-2); /* 1.75rem */ --radar-corpo-3: var(--t-3); /* 1.25rem */ --radar-corpo-4: var(--t-4); /* 1rem — corpo, mai sotto i 16px (DESIGN.md §4) */ --radar-corpo-5: var(--t-5); /* .875rem */ /* — Raggi, ombre, elevazioni. Alias di righe 281-287. --raggio combacia già col disegno (11px): la divergenza "tema=10px" citata l'8/8 era già risolta prima di questo giro. */ --radar-raggio: var(--raggio); /* 11px · pulsanti, campi */ --radar-raggio-grande: var(--raggio-grande); /* 18px · pannelli, card */ /* Due raggi usati da tempo in radar.css ma mai nominati: qui solo il nome, nessuna riga esistente è stata toccata. */ --radar-raggio-pillola: 999px; /* pillole/badge — righe 621,646,684,1515,2189 di questo file */ --radar-raggio-tondo: 50%; /* avatar, pin, punti — righe 963,1401,1604 */ --radar-ombra: var(--ombra); /* due falde — il disegno ne aveva una sola, vince il tema */ --radar-elevazione-1: var(--elev-1); --radar-elevazione-2: var(--elev-2); --radar-elevazione-3: var(--elev-3); /* hover delle schede */ --radar-elevazione-4: var(--elev-4); /* il mock della scheda */ /* — Spaziatura e larghezze. Alias di righe 288-299. */ --radar-passo: var(--passo); /* 1rem — unità di spaziatura, tutto il tema è multiplo di questo */ /* Bersaglio minimo di tocco: mai usato come var finora, ma già il criterio citato nei commenti di questo file ("oltre i 44") sulle altezze reali (3rem/48px, 3.25rem/52px). Solo il nome, nessuna regola cambia. */ --radar-tocco-minimo: 44px; /* ⚠ 120rem = 1920px, decisione di Gabriele del 28/8/2026 (righe 288-297 più sotto): NON più 72rem/1152px come riportato in DISEGNO-ESTRATTO.md §1, scritto il 9/8 — prima di quella decisione. Quel documento è indietro di venti giorni su questo solo valore. */ --radar-colonna: var(--colonna); /* 120rem = 1920px, scala con min(100% - 2rem, …) */ } /* ========================================================================== RADAR.casa — i caratteri Solo dichiarazioni @font-face. I token restano in radar.css: qui c'è come il carattere arriva al browser, lì c'è chi lo usa. PERCHÉ QUESTO FILE ESISTE Fino al 15/8/2026 radar.css chiedeva `--font: "Radar"` e `--font-titolo: "Radar Serif"`: due nomi che non erano dichiarati da nessuna parte. Il browser li scartava e rendeva tutto in Segoe UI, cioè nel carattere di sistema di Windows. Il sito non aveva un carattere. QUALI, E PERCHÉ QUESTI DUE Non è una scelta di gusto: sono i due che il disegno di Claude Design nomina — `_disegno/token.css` → `--sans` e `--serif`. Public Sans per tutto, Instrument Serif per i titoli e per la parola in corsivo che ogni titolo del disegno porta dentro (12 su 13 stanno dentro un h1/h2). Public Sans è variabile sull'asse `wght`: un file solo copre 300–900, ed è l'«un solo variable font» di DECISIONI.md §Grafica. DA DOVE VENGONO — e niente Google Fonts a runtime (DESIGN.md §4: dominio terzo, GDPR già sanzionato in Europa, ritardo sul percorso critico). Scaricati una volta il 15/8/2026 da github.com/google/fonts, ramo `main`: ofl/publicsans/PublicSans[wght].ttf 103.316 B v2.001 ofl/instrumentserif/InstrumentSerif-Regular.ttf 70.012 B v1.000 ofl/instrumentserif/InstrumentSerif-Italic.ttf 71.592 B v1.000 Tutti e due SIL Open Font License 1.1, senza Reserved Font Name: il testo integrale è in assets/font/OFL-PublicSans.txt e OFL-InstrumentSerif.txt, ed è anche dentro i woff2 (name ID 13/14). Ridistribuire il sottoinsieme è permesso; venderlo da solo no. COME SI RIGENERANO (fonttools 4.63.0 — `pyftsubset` porta anche woff2) U='U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD' ← il latino di Google N='0,1,2,3,4,5,6,13,14,16,17' ← 13/14 = la licenza pyftsubset PublicSans[wght].ttf --flavor=woff2 --unicodes=$U \ --layout-features+=tnum --name-IDs=$N --notdef-outline pyftsubset InstrumentSerif-*.ttf --flavor=woff2 --unicodes=$U \ --name-IDs=$N --notdef-outline --no-hinting `--layout-features+=tnum` non è un dettaglio: senza, `pyftsubset` butta via la feature delle cifre tabulari e il `font-variant-numeric: tabular-nums` di radar.css smette di fare qualcosa senza dirlo — cioè proprio la riga che DESIGN.md §4 chiama «il dettaglio che quasi nessuno mette», quella che incolonna i prezzi. `--no-hinting` solo sul serif: è un carattere da titolo, sotto i 25 px non ci va mai, e le istruzioni di ttfautohint pesavano 6,2 KB su 20,8. Public Sans invece tiene lo hinting, che gli costa 104 byte in tutto. QUANTO PESANO (ttf a monte → woff2 sottoinsieme, glifi prima → dopo) public-sans-var.woff2 103.316 → 25.328 B 648 → 277 glifi instrument-serif.woff2 70.012 → 14.584 B 377 → 219 glifi instrument-serif-corsivo.woff2 71.592 → 15.336 B 377 → 219 glifi ───────── totale 55.248 B, tre richieste IL RIPIEGO È CALCOLATO, NON COPIATO Le quattro metriche di ogni `@font-face` di ripiego qui sotto vengono da `fontTools`, non da un blog. `size-adjust` è il rapporto fra le larghezze medie di avanzamento dei due caratteri, pesate sulla frequenza VERA dei caratteri nei testi del prodotto (26.528 caratteri di `_disegno/_markup.html` e `testi.md`; lo spazio da solo è il 20,6%). Le altre tre sono le metriche `sTypoAscender/Descender/LineGap` del carattere vero diviso `size-adjust`, perché `size-adjust` scala anche loro: entrambi i file hanno il bit 7 di `fsSelection`, quindi il browser usa le typo e non le win. Public Sans asc .950 desc .225 gap 0 su 2000 upm Instrument Serif asc .990 desc .310 gap 0 su 1000 upm È la tecnica che su GK Home Store ha portato il CLS da 0,128 a 0,015: con `font-display: swap` il testo si vede subito nel carattere di sistema, e quando arriva il woff2 non si sposta niente perché la riga era già alta e larga uguale. ========================================================================== */ /* ========================================================================== I caratteri veri ========================================================================== */ /* Public Sans — variabile sull'asse wght. Dichiarato 300–900 anche se il file arriva fino a 100: sotto il 300 un carattere da corpo diventa illeggibile, e l'intervallo dichiarato fa da fermo. Il disegno usa 400/500/600/700, il tema arriva a 800. */ @font-face { font-family: "Public Sans"; src: url("../font/public-sans-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Serif — non è variabile, esiste solo in 400. ⚠ `font-weight: 400 700` è voluto: radar.css mette `font-weight: 700` su h1/h2/h3 e il serif ci finisce sotto (h1, .marchio, .smarrito__codice, .modulo__legenda). Dichiarando l'intervallo, il browser serve queste sagome invece di ingrassarle da sé: un finto grassetto su un serif da titolo si vede subito, ed è sbagliato anche rispetto al disegno, che i titoli li scrive `font:400 clamp(25.7px,2.57vw,37.6px)/1 var(--serif)`. La riga giusta resta comunque `h1 { font-weight: 400 }` in radar.css. */ @font-face { font-family: "Instrument Serif"; src: url("../font/instrument-serif.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Il corsivo vero, e non l'inclinazione finta che farebbe il browser. Serve davvero: nel disegno la parola in corsivo dentro il titolo è un gesto ricorrente — «un annuncio che *esiste*, e risponde» — 12 volte su 13 dentro un h1 o un h2, quindi in Instrument Serif. Un serif da titolo inclinato a forza non somiglia al suo corsivo: quello vero ha altre lettere, non le stesse storte. 15 KB, e non è precaricato. */ @font-face { font-family: "Instrument Serif"; src: url("../font/instrument-serif-corsivo.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== I ripieghi con le metriche corrette Non scaricano niente: `local()` prende un carattere che è già sulla macchina e lo deforma quel tanto che basta a occupare lo stesso spazio del carattere vero. Servono solo nei millisecondi fra il primo disegno della pagina e l'arrivo del woff2 — ed è lì che nasce il CLS. Ognuno ha il suo blocco perché ognuno ha i suoi numeri: applicare quelli di Segoe UI ad Arial rimetterebbe dentro l'errore che si sta togliendo. ========================================================================== */ /* Windows — il caso più frequente. Segoe UI è più stretto di Public Sans dello 0,4%: 0,42420 em contro 0,44246 em di larghezza media pesata. */ @font-face { font-family: "Public Sans ripiego Segoe"; src: local("Segoe UI"), local("SegoeUI"); size-adjust: 104.30%; ascent-override: 91.08%; descent-override: 21.57%; line-gap-override: 0%; } /* macOS, Linux e chiunque non abbia Segoe UI. Misurato su Arial (0,42845 em); Helvetica e Helvetica Neue hanno per progetto le stesse larghezze di avanzamento sul latino di base, quindi valgono gli stessi numeri. */ @font-face { font-family: "Public Sans ripiego Arial"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 103.27%; ascent-override: 91.99%; descent-override: 21.79%; line-gap-override: 0%; } /* Instrument Serif è molto più stretto di qualunque serif di sistema: 0,32329 em contro 0,42480 di Georgia. Senza `size-adjust` un titolo di due righe ne occuperebbe tre finché il woff2 non arriva — che è esattamente il salto che si sta evitando. */ @font-face { font-family: "Instrument Serif ripiego Georgia"; src: local("Georgia"); size-adjust: 76.10%; ascent-override: 130.08%; descent-override: 40.73%; line-gap-override: 0%; } @font-face { font-family: "Instrument Serif ripiego Georgia"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; size-adjust: 79.35%; ascent-override: 124.77%; descent-override: 39.07%; line-gap-override: 0%; } @font-face { font-family: "Instrument Serif ripiego Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 82.46%; ascent-override: 120.06%; descent-override: 37.59%; line-gap-override: 0%; } @font-face { font-family: "Instrument Serif ripiego Times"; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); font-style: italic; size-adjust: 87.20%; ascent-override: 113.54%; descent-override: 35.55%; line-gap-override: 0%; } /* ========================================================================== FUSO QUI IL 27/8/2026 — turno squadra C, fogli di stile `caratteri.css` non si accoda piu' da solo: il tema serviva 4 fogli globali su ogni pagina (caratteri, radar, ossatura, marchio) dove lo standard (TECNICA.md §5) ne vuole uno. `ossatura.css` e `marchio.css` restano fogli A PARTE (non qui dentro): li accoda ancora `functions.php` con le loro richieste separate, perche' fonderli avrebbe spostato `marchio.css` PRIMA di `ossatura.css` nella cascata invece che dopo -- e `ossatura.css` r."L'ossatura dopo radar" e `marchio.css` stesso dicono che quell'ordine e' voluto: l'ossatura vince sui token di `radar.css`, e `.marchio` deve vincere su regole sue che stanno in `ossatura.css`. Scambiarli e' il tipo di difetto silenzioso che ha gia' rotto la mappa una volta (`inc/mappa.php` r.1150 circa, il canvas alto 0px del 16/8). FONTE VIVA DI QUESTA SEZIONE: era `assets/css/caratteri.css`, che adesso e' uno stub -- vedi quel file per il perche'. Chi cambia i `@font-face` o i ripieghi cambia QUI, non li' (li' non ha piu' effetto). ========================================================================== */ /* ========================================================================== RADAR.casa — i token e la base Un solo foglio di stile. Ogni valore qui dentro viene da DESIGN.md: se un colore non è in quel documento, non entra in questo file. ========================================================================== */ :root { /* --- Interfaccia: il 95% della superficie, desaturata --------------- Il prodotto È una mappa. Un'interfaccia colorata sopra una mappa colorata è rumore, e sulla mappa il rumore vuol dire che l'utente non trova la casa. Il colore saturo è una risorsa scarsa e si spende in due soli posti: i pin e il pulsante primario. */ --fondo: #FCFAF7; /* avorio caldo */ --superficie: #FFFFFF; --superficie-alt: #F6F2EC; /* La tinta delle sezioni a fascia (→ `cerca.css`, «LE FASCE DI COLORE»). ⚠ Si chiama `--tinta-fascia` e NON `--fascia`: quel nome è già preso da `ossatura.css` (è la scorciatoia dei margini di sezione, `var(--fascia-y) var(--fascia-x)`). Scritto qui come `--fascia`, il fondo diventava una misura di padding e la fascia restava trasparente — senza un errore: il bordo si vedeva, il colore no. Misurato il 7/9 con `getComputedStyle`, non guardando la pagina. Stesso valore di `--superficie-alt` ma token a sé: dentro una fascia i pezzi che usavano `--superficie-alt` salgono a `--superficie`, e un token che rimandasse a un token riscritto sotto di sé girerebbe a vuoto. */ --tinta-fascia: #F6F2EC; /* Un gradino sopra la fascia, per i pezzi che ci stanno dentro (il cerchio dei passi, il riquadro dei partner). ⚠ Non è sempre `--superficie`: in scuro `--superficie` (#211B18) e la fascia (#1E1814) distano **un punto** su ogni canale — misurato, e sullo schermo vuol dire che il cerchio non c'è. In scuro il gradino è `--superficie-alt`, che sopra quella fascia si vede davvero. */ --tinta-fascia-sopra: #FFFFFF; --testo: #1F1B18; /* ~15:1 sul fondo → AAA */ --testo-2: #6B625C; /* ~5,6:1 → AA */ --bordo: #EBE5DE; /* --- Marchio e azione ---------------------------------------------- Il colore del marchio non è mai il colore del pulsante: l'occhio deve imparare che il verde significa «qui si fa qualcosa», senza confondere identità e azione. */ --marchio: #B5452E; /* terracotta */ --marchio-chiaro: #E07A5F; /* su fondo scuro */ --azione: #1E5B4A; /* verde bosco — solo il pulsante primario */ --azione-hover: #17493B; --azione-testo: #FFFFFF; /* --- Semantici: ognuno una cosa sola -------------------------------- ⚠ `--attenzione` NON è il #B37A00 di DESIGN.md: quel valore su bianco fa 3,68:1 e ne servono 4,5. Misurato il 7/8/2026, ed è la verifica che DESIGN.md stesso chiedeva («contrasti calcolati, non misurati»). #8C5F00 tiene la stessa tinta e passa su tutti e tre i fondi chiari (5,37 · 5,60 · 5,02, misurati il 27/8/2026 sui fondi allineati al disegno). Serve ai badge «prezzo fuori mercato», che sono antifrode: se non si leggono non servono a niente. */ /* 🚨 Era #2E7D5B fino al 15/8/2026, e su questo velo faceva 4,38:1 — sotto AA, e non è testo grande: il badge «identità verificata» è 600 18px. Il valore del disegno (_disegno/token.css) fa 5,90 e vince, contro la regola generale che dice che vince il tema — perché qui il tema aveva misurato il verde contro il fondo, non contro il velo su cui il badge sta davvero. 👉 Il contrasto si misura sulla COPPIA che si usa, non sul colore. */ --verificato: #25674A; /* solo dove c'è stata una verifica vera */ --verificato-velo: #E9F2ED; /* il fondo del badge: senza, il verde non ha su cosa stare */ --attenzione: #8C5F00; --errore: #A93226; /* mai come decorazione */ /* --- I sei pin: palette Okabe-Ito ---------------------------------- Progettata per protanopia, deuteranopia e tritanopia. Ogni pin ha anche una forma diversa: su un prodotto che è una mappa non è accessibilità, è funzionalità (WCAG 1.4.1). */ --pin-affitto: #0072B2; --pin-vendita: #D55E00; --pin-vacanza: #56B4E9; --pin-terreni: #009E73; --pin-servizi: #E69F00; --pin-lavoro: #CC79A7; /* --- Misure --------------------------------------------------------- */ --raggio: 11px; --raggio-grande: 18px; --ombra: 0 1px 2px rgba(31, 27, 24, .06), 0 8px 24px rgba(31, 27, 24, .06); --elev-1: 0 4px 18px rgba(31, 27, 24, .1); --elev-2: 0 6px 20px rgba(31, 27, 24, .09); --elev-3: 0 14px 34px rgba(31, 27, 24, .12); --elev-4: 0 24px 60px rgba(31, 27, 24, .13); /* 🚨 Decisione di Gabriele, 28/8/2026: «le larghezze si allineano a 1920, con la possibilità di scalare per i display più piccoli». Non 1152, non 1500: 120rem = 1920px, e sotto scala con `min(100% - 2rem, var(--colonna))` qui sotto in `.contenitore` — niente salti, la stessa formula di prima. Fino al 27/8/2026 qui c'era `72rem` (1152): era la misura della testata E del corpo di sole tre pagine (elenco, scheda singola, 404); altrove il corpo si scostava fino a 1500 o scendeva a 896, e la testata restava sempre a 1152 → casella 8.6, misurato da `ui-qa-expert` il 28/8. Questo token è l'unico impianto: lo eredita anche `--colonna-larga` (`ossatura.css`), che non ha più un numero suo. */ --colonna: 120rem; --passo: 1rem; /* --- Tipografia: cinque livelli, non nove --------------------------- */ /* 🚨 Fino al 15/8/2026 qui c'era "Radar" e "Radar Serif", che non esistono: nessun @font-face in tutto il tema, nessun woff2 in assets/, e il sito rendeva tutto in Segoe UI. Era meta' della distanza fra il disegno e quello che si vedeva, e nessuno l'aveva notato per sette turni. I due caratteri sono quelli che il disegno usa davvero (letti dentro il suo bundle), self-hosted come vuole DECISIONI §Grafica. I ripieghi "... ripiego ..." sono facce locali con size-adjust calcolato: servono a non far ballare la pagina mentre il carattere vero arriva → caratteri.css */ --font: "Public Sans", "Public Sans ripiego Segoe", "Public Sans ripiego Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-titolo: "Instrument Serif", "Instrument Serif ripiego Georgia", "Instrument Serif ripiego Times", Georgia, "Times New Roman", serif; --t-1: 2.5rem; --t-2: 1.75rem; --t-3: 1.25rem; --t-4: 1rem; /* corpo: mai sotto i 16 px */ --t-5: .875rem; } /* ========================================================================== IL TEMA A TRE STATI — `color-scheme` + `light-dark()` Nato il 16/8/2026, turno 7. Prima di oggi lo scuro viveva in QUATTRO blocchi `@media (prefers-color-scheme: dark)` sparsi in tre file: qui, in `ossatura.css` r.123, in `scheda.css` r.80, e uno non-token qui sotto sulle icone MapLibre. Quattro copie della stessa regola divergono al primo ritocco, e la copia sbagliata è quella che qualcuno leggerà (commit `159e9cb`). Adesso la coppia chiaro/scuro di ogni token sta su **una riga sola**, e i tre stati sono tre righe di `color-scheme`: automatico :root → color-scheme: light dark chiaro :root[data-theme="light"] → color-scheme: light scuro :root[data-theme="dark"] → color-scheme: dark `data-theme` lo scrive `header.php` prima del primo paint e poi `assets/js/tema.js`. **Senza JavaScript nessuno lo scrive, e va bene così**: resta `color-scheme: light dark`, cioè il sito segue il sistema — lo stesso comportamento di prima, gratis. 🚨 PERCHÉ TUTTO STA DENTRO UN `@supports` E NON IN DUE RIGHE Il ripiego per doppia dichiarazione — `--fondo: #FAF7F2;` seguito da `--fondo: light-dark(#FAF7F2,#171310);` — **non funziona**, ed è misurato il 16/8/2026 su Chrome, non stimato. Una custom property accetta quasi qualunque sequenza di token: una funzione che il browser non conosce non rende invalida la dichiarazione, la fa **vincere**. Poi `background: var(--fondo)` diventa «invalid at computed-value time» e il colore non torna al chiaro: **sparisce**. La prova, con una funzione inventata al posto di `light-dark()`: color: var(--a) → rgb(1,2,3), cioè ereditato dal padre, non #B5452E background: var(--b) → rgba(0,0,0,0), cioè trasparente `@supports (color: light-dark(#000,#fff))` invece è un cancello vero: provato con la stessa funzione inventata, il blocco non entra. Quindi un browser senza `light-dark()` non legge niente di qui sotto e **resta col `:root` chiaro**, che è intatto e completo. È lo stesso ripiego che chiedeva il brief — il valore chiaro — solo dietro al cancello che regge davvero. ========================================================================== */ @supports (color: light-dark(#000, #fff)) { /* I tre stati. `color-scheme` cambia anche come il browser disegna caselle, selettori, barre di scorrimento e la tinta di `accent-color`: è un guadagno — le caselle del modulo da 42 campi finalmente si scuriscono — ma sta qui dentro apposta, perché in un browser senza `light-dark()` scurirebbe i controlli lasciando i token chiari. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Le 21 coppie di questo foglio. A sinistra il chiaro, a destra lo scuro: fondo bruno molto scuro, non nero e non blu, per tenere il registro caldo. */ :root { --fondo: light-dark(#FCFAF7, #171310); --superficie: light-dark(#FFFFFF, #211B18); --superficie-alt: light-dark(#F6F2EC, #2B231E); --tinta-fascia: light-dark(#F6F2EC, #1E1814); --tinta-fascia-sopra: light-dark(#FFFFFF, #2B231E); --testo: light-dark(#1F1B18, #F4EFE9); --testo-2: light-dark(#6B625C, #B2A69C); --bordo: light-dark(#EBE5DE, #3B312B); --marchio: light-dark(#B5452E, #E07A5F); /* Lo scuro era #3E8F76: 4,34 su --superficie, sotto AA. #35997A fa 5,27 su --fondo, 4,85 su --superficie, 4,40 su --superficie-alt. Il contrasto si misura sulla coppia che si usa davvero, e i fondi scuri sono tre: --azione passa AA su due, non sul terzo — ma l'unico testo che la usa stretto, .professionista__apri, sta su --superficie e misura 4,85, sopra soglia. */ --azione: light-dark(#1E5B4A, #35997A); --azione-hover: light-dark(#17493B, #42AC8B); --azione-testo: light-dark(#FFFFFF, #10140F); --verificato: light-dark(#25674A, #5BB68F); --verificato-velo: light-dark(#E9F2ED, #1C2A24); /* Lo scuro fa 5,75 · 5,30 · 4,80 sui tre fondi scuri. */ --attenzione: light-dark(#8C5F00, #C08400); --errore: light-dark(#A93226, #E4695C); /* 🚨 I sei pin in variante chiara: fino al 15/8/2026 in scuro il tema lasciava i colori del chiaro, cioè la mappa — che QUI è il prodotto — perdeva leggibilità proprio dove il fondo è scuro. Vengono da _disegno/token.css, che era la sola fonte ad averli. */ --pin-affitto: light-dark(#0072B2, #4DA3D9); --pin-vendita: light-dark(#D55E00, #F07A26); --pin-vacanza: light-dark(#56B4E9, #7FC7F0); --pin-terreni: light-dark(#009E73, #2BBB92); --pin-servizi: light-dark(#E69F00, #EFB43A); --pin-lavoro: light-dark(#CC79A7, #DE95BE); /* ⚠ Un'ombra NON è un colore, e `light-dark()` prende solo colori. La coppia si mette sul **colore dentro** l'ombra, una per falda. */ --ombra: 0 1px 2px light-dark(rgba(31, 27, 24, .06), rgba(0, 0, 0, .4)), 0 8px 24px light-dark(rgba(31, 27, 24, .06), rgba(0, 0, 0, .35)); } } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* 🚨 Il fondo e il testo stanno su `html`, non solo su `body`, e dal 16/8/2026 è obbligatorio: con `color-scheme` il browser dà a `html` i SUOI colori di tela — in scuro, testo bianco. Finché `body` era l'unico a dipingere, la tela si tingeva per propagazione e si vedeva giusto, ma `html` restava una coppia «bianco su bianco»: il cancello visivo l'ha misurata **1:1** e l'ha bocciata. Dipingerlo qui costa due righe, rende la coppia vera (16,16:1 in scuro) e in più tinge il rimbalzo dello scorrimento sul telefono, che prima restava bianco. `body` le tiene lo stesso: non si eredita un fondo, si dipinge. */ html { -webkit-text-size-adjust: 100%; background: var(--fondo); color: var(--testo); } body { margin: 0; background: var(--fondo); color: var(--testo); font-family: var(--font); font-size: var(--t-4); line-height: 1.6; /* DESIGN.md: mai sotto 1,5 */ text-rendering: optimizeLegibility; } /* Il layout deve reggere la spaziatura imposta dall'utente (WCAG 1.4.12): letter-spacing .12em e word-spacing .16em senza perdere contenuto. */ p, li, dd { max-width: 68ch; } p { margin: 0 0 calc(var(--passo) * 2) 0; } /* spazio dopo il paragrafo: 2× */ h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--passo) 0; font-weight: 700; } /* `font-weight: 400` non e' un dettaglio: Instrument Serif dichiara `font-weight: 400 700` proprio per non farsi ingrassare a finto-grassetto, e il disegno i titoli li scrive a 400 (`_disegno/token.css` §titoli). */ h1 { font-size: var(--t-1); font-family: var(--font-titolo); font-weight: 400; letter-spacing: -.02em; } h2 { font-size: var(--t-2); } h3 { font-size: var(--t-3); } a { color: var(--marchio); text-underline-offset: .2em; } a:hover { color: var(--azione); } :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--azione); outline-offset: 2px; border-radius: 4px; } img, svg, video { max-width: 100%; height: auto; } /* Il dettaglio che quasi nessuno mette: cifre a larghezza fissa. In elenco i prezzi si incolonnano e l'occhio li confronta invece di rileggerli — e su un portale immobiliare il confronto fra prezzi È l'azione principale. */ /* ⚠ 26/8/2026: dentro c'era `.vani`, che **nessun template stampa piu'** — la riga « Vani 4 » e' sparita dalla scheda il 17/8 perche' diceva due volte la stessa cosa di «Locali», in una lingua che chi legge non parla. E mancava `.bagni`, che `single-immobile.php` stampa eccome: una cifra che si doveva incolonnare e non si incolonnava. 📌 Trovato dal cancello finale, cercando la famiglia del difetto: quello che il markup dichiara e il foglio non veste, e viceversa. */ .prezzo, .superficie, .bagni, .data, .distanza { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ========================================================================== Impianto ========================================================================== */ .contenitore { width: min(100% - 2rem, var(--colonna)); margin-inline: auto; } .salta-al-contenuto { position: absolute; left: -9999px; top: 0; background: var(--azione); color: var(--azione-testo); padding: .75rem 1.25rem; z-index: 100; } .salta-al-contenuto:focus { left: 0; } .testata { background: var(--superficie); border-bottom: 1px solid var(--bordo); padding: var(--passo) 0; } .testata__riga { display: flex; align-items: center; justify-content: space-between; gap: var(--passo); flex-wrap: wrap; } /* IL MARCHIO — **RADAR.casa**, ed è quello del disegno. Ordine di Gabriele, 17/8/2026, guardando le schermate del turno 7: *«il marchio deve essere quello della demo, con il radar che gira»*. Il disegno lo scrive così — `_disegno/token.css` §IL MARCHIO, letto dal nodo `data-logo` di `_render.html`: `font: 700 17.8px/1 var(--sans)`, `letter-spacing: -.01em`, «RADAR» nella tinta del testo e «.casa» nella tinta del marchio. 🚨 **Fino al 17/8 qui c'era altro, e non era il disegno**: Instrument Serif a 20px, `text-transform: uppercase`, `letter-spacing: +.02em` e **una tinta sola** per tutte e due le metà, distinte dal solo peso. Nessuno di quei quattro salti aveva un numero dietro — l'ha segnalato `ui-qa-expert` al cancello visivo, e aveva ragione: *«RADAR.CASA in una tinta sola legge come una parola piatta»*. Del vecchio marchio resta **solo** la ragione che era misurata, ed è quella del colore, qui sotto. 👉 Il minuscolo torna anche nell'HTML: sotto c'era già `radar.casa` minuscolo per i lettori di schermo, e adesso quello che si vede coincide con quello che si sente. Una `text-transform` in meno è una cosa in meno che può divergere. */ .marchio { font-family: var(--font); font-size: 17.8px; /* il disegno, verbatim: non arrotondato a 18 */ font-weight: 700; line-height: 1; letter-spacing: -.01em; /* negativa, come il disegno: in minuscolo le lettere respirano */ color: var(--testo); text-decoration: none; } /* **RADAR.CASA**, tutto in capitali — e questa è una decisione di Gabriele, non il disegno. Il disegno scrive `>RADAR.casa`: prima metà in capitali, seconda no. Gabriele, 17/8/2026, guardando il reso: *«vorrei che anche la scritta Casa fosse in maiuscolo»*. 👉 **Si scrive che è una scelta sua e non un allineamento al disegno**, perché fra sei mesi la differenza fra «il disegno dice così» e «Gabriele ha deciso così» è l'unica cosa che conta per sapere se si può cambiare. Il marchio resta bicolore, che è il pezzo di disegno che porta l'identità: le capitali cambiano la forma, non la struttura. ⚠ Le capitali le fa il CSS e non l'HTML, e questo **non** cambia: sotto resta `radar.casa` tutto minuscolo, perché *un marchio scritto MAIUSCOLO nel markup viene compitato lettera per lettera da parecchi lettori di schermo* — la ragione l'aveva già scritta il turno 6 in `header.php`. Chi guarda legge RADAR.CASA, chi ascolta sente «radar punto casa». ⚠ E la spaziatura: il `-.01em` del disegno è tarato sul **minuscolo misto**. In capitali le lettere si avvicinano — è la stessa cosa che il turno 6 aveva trovato su Instrument Serif — quindi qui la spaziatura torna positiva. Misurata sul reso a 1440: a `-.01em` il marchio in capitali sta in **151,5px**, a `+.02em` in **156,9px**. Cinque pixel e mezzo di respiro su dieci lettere. 📌 E i due numeri che erano scritti qui prima — «141» e «148» — **li avevo messi prima di misurarli**, ed erano sbagliati tutti e due. È la terza volta in questo file che accade, dopo il «3,0:1 e passa» del 15/8: **un numero in un commento vale zero finché non lo si calcola**, e non fa eccezione chi la regola la fa rispettare agli altri. */ .marchio { text-transform: uppercase; letter-spacing: .02em; } /* La coda **si stacca col colore**, come nel disegno, e non più col peso. 🚨 E qui sta la sola cosa del vecchio marchio che si tiene, perché era misurata: il disegno mette `.casa` in `--marchio-chiaro` **#E07A5F**, che sul nostro fondo chiaro fa **2,76:1** — sotto i 4,5 di un testo e sotto i 3 di un componente grafico. Il disegno non l'aveva visto perché **il suo marchio sta sopra una foto, dentro una pillola**, non su un avorio pieno. 👉 La via d'uscita non è cambiare colore: è **usare la coppia giusta dello stesso colore**. #B5452E e #E07A5F non sono due tinte diverse, sono il *membro chiaro* e il *membro scuro* della stessa terracotta — e quella coppia nel tema ha già un nome: `--marchio`, che vale `light-dark(#B5452E, #E07A5F)`. Quindi `.casa` prende `--marchio`, e il risultato è che **in tema scuro esce esattamente il valore del disegno** (#E07A5F, che là fa 6,3:1) e in tema chiaro esce il membro che su avorio si legge (#B5452E, **5,1:1**). Il marchio è bicolore come lo vuole il disegno, in tutti e due i temi, e in nessuno dei due c'è un numero sotto soglia. 📌 Nota per chi guarda i due file: nel **piede** `ossatura.css` §4 tiene `.marchio__coda { color: var(--marchio-chiaro) }`, e non è un'incoerenza — là il fondo è inchiostro e quella tinta fa **6,34:1**. Il contrasto si misura sulla coppia che si usa, e le coppie sono due. */ .marchio__coda { color: var(--marchio); } /* 🚨 8/9/2026 — LA STRISCIA VUOTA SOPRA IL PIEDE. Gabriele: «sopra il footer della home c'è una striscia vuota che non ha senso, credo che sia un refuso». Aveva ragione ed era misurabile: questo `margin-top: calc(var(--passo) * 4)` valeva **64 px** di fondo pagina incastrati fra la sezione a tinta (che finisce con i suoi 63 px di padding) e il piede nero. Tre fasce di colore diverso una sull'altra, e quella in mezzo non conteneva niente. ⚠ Il margine ha smesso di servire quando il piede ha preso un fondo suo (l'inchiostro di `ossatura.css`): con un piede dello stesso colore della pagina serviva a staccarlo, con un piede nero è solo un buco. Lo stacco ce l'ha già il colore, e il respiro il `padding` interno. ⚠ Anche `background` e `border-top` qui sono superati (li rifa `ossatura.css` §5, che vince per ordine): restano perché questa regola serve alle pagine che non caricano `ossatura.css`, e toglierli lascerebbe quelle pagine con un piede senza fondo. */ .pieDiPagina { background: var(--superficie-alt); border-top: 1px solid var(--bordo); padding: calc(var(--passo) * 2) 0; color: var(--testo-2); font-size: var(--t-5); } /* ========================================================================== Comandi ========================================================================== */ .pulsante { display: inline-flex; align-items: center; gap: .5rem; background: var(--azione); color: var(--azione-testo); border: none; border-radius: 999px; padding: .75rem 1.5rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; /* 🚨 8/9/2026 — il pulsante risponde al gesto. Un sollevamento di due pixel al passaggio e un affondo alla pressione: 160 ms, **solo `transform`**, un livello composto che vive quanto il gesto e poi sparisce — nessun lavoro continuo, nessun ridisegno. Consigliato da Codex (8/9) come il dettaglio con la resa più alta per il costo più basso; la curva è la sua, e la pressione torna a zero perché un pulsante che resta sollevato mentre lo premi non sembra premuto. */ transition: background .18s ease, transform .16s cubic-bezier(.2, .8, .2, 1); } .pulsante:hover { transform: translateY(-2px); } .pulsante:active { transform: translateY(0) scale(.985); } @media (prefers-reduced-motion: reduce) { .pulsante { transition: background .18s ease; } .pulsante:hover, .pulsante:active { transform: none; } } .pulsante:hover { background: var(--azione-hover); color: var(--azione-testo); } .pulsante--quieto { background: transparent; color: var(--testo); border: 1px solid var(--bordo); } .pulsante--quieto:hover { background: var(--superficie-alt); color: var(--testo); } /* Le pillole delle categorie: il comando principale della mappa. Sul telefono restano visibili in alto anche col foglio dei risultati aperto → MAPPA.md §7 */ .pillola { display: inline-flex; align-items: center; gap: .4rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 999px; padding: .4rem .9rem; font-size: var(--t-5); cursor: pointer; } .pillola[aria-pressed="true"] { border-color: currentColor; font-weight: 600; } /* 🚨 **Qui c'erano sei righe che coloravano il TESTO con la tinta del pin**, e violavano una regola di questo progetto scritta e misurata: DESIGN.md §3 — «Okabe-Ito è una palette per superfici piene, non per il testo. Misurato l'8/8/2026 su fondo chiaro: **5 tinte su 6 non arrivano a 4,5:1**. Sono nate per essere distinguibili fra loro da chi non vede i colori, non per essere leggibili su bianco.» Il nome della categoria dentro la pillola stava proprio così: `#E69F00` su bianco per «Servizi», `#56B4E9` per «Case Vacanza». Il colore va sul **quadretto pieno** (`.pillola__segno`, più in basso, con `--tinta`), che è una superficie e non un testo, e l'etichetta resta del colore del testo. Trovato il 9/8/2026 confrontando il tema con il disegno di Claude Design, che questa cosa la fa giusta. ⚠ Non l'aveva vista nessuno dei tre collaudi precedenti, perché guardavano la pagina d'attesa e le schede, non la mappa. 📌 E una delle sei righe non ha mai fatto niente: diceva `.pillola--vacanza` mentre lo slug del termine è `case-vacanza`. Un difetto che colpiva cinque categorie su sei, e la sesta si salvava per un refuso. */ /* ========================================================================== Fiducia — la fiducia si costruisce a centimetri, non a striscioni ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-5); font-weight: 600; border-radius: 999px; padding: .2rem .7rem; border: 1px solid currentColor; background: transparent; cursor: pointer; } .badge--verificato { color: var(--verificato); } .badge--attenzione { color: var(--attenzione); } /* Il peso visivo cresce col livello: un badge che non significa niente insegna a ignorare anche quelli veri. */ .badge[data-livello="3"] { border-width: 2px; } /* La nota si apre IN PAGINA, non in un pop-up. */ .badge__nota[hidden] { display: none; } .badge__nota { margin-top: .5rem; padding: .75rem 1rem; background: var(--superficie-alt); border-left: 3px solid var(--verificato); border-radius: 0 var(--raggio) var(--raggio) 0; font-size: var(--t-5); color: var(--testo-2); } /* ========================================================================== Schede ========================================================================== */ .scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-grande); box-shadow: var(--ombra); padding: calc(var(--passo) * 1.5); } .griglia { display: grid; gap: calc(var(--passo) * 1.5); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } /* ========================================================================== Pagina non trovata ========================================================================== */ .smarrito { text-align: center; padding: clamp(3rem, 12vh, 7rem) 0; } .smarrito p { margin-inline: auto; } .smarrito__codice { font-family: var(--font-titolo); font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--marchio); margin: 0 0 var(--passo); letter-spacing: -.04em; } .smarrito__azioni { display: flex; gap: var(--passo); justify-content: center; flex-wrap: wrap; margin-top: calc(var(--passo) * 2); } /* ========================================================================== Chi non vuole animazioni non le riceve ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== LE DUE SCHEDE — annuncio e azienda Serve a `single-immobile.php`, `single-professionista.php` e `inc/fiducia.php`. Nessun esadecimale qui sotto: i colori sono quelli dichiarati in cima, e chiaro e scuro sono già coperti da quelle variabili. ========================================================================== */ /* --- Impianto ------------------------------------------------------------ Una colonna sul telefono, due dai ~60rem. La seconda colonna è il pannello della fiducia, e resta appiccicata in alto mentre si scorrono foto e descrizione: DESIGN.md §7 chiede i segnali «nel punto della decisione», e il punto della decisione si sposta insieme all'occhio. `minmax(0, 1fr)` e non `1fr`: senza il minimo a zero una foto larga o una parola lunga sfondano la colonna invece di rientrare. */ .annuncio__corpo, .azienda__corpo { display: grid; gap: calc(var(--passo) * 2); grid-template-columns: minmax(0, 1fr); margin-top: calc(var(--passo) * 2); } @media (min-width: 60rem) { .annuncio__corpo, .azienda__corpo { grid-template-columns: minmax(0, 1fr) 21rem; } } .annuncio__principale, .azienda__principale { min-width: 0; } /* --- La testa della scheda ----------------------------------------------- */ .annuncio__categorie, .azienda__mestieri { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--passo); max-width: none; /* è una fila di pillole, non un paragrafo da 68ch */ } .annuncio__luogo { color: var(--testo-2); margin: 0 0 var(--passo); } /* Il prezzo è il numero che l'utente confronta: gli si dà la dimensione del titolo e le cifre tabellari, così in elenco e in scheda ha la stessa forma. */ .annuncio__prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; font-size: var(--t-2); font-weight: 700; margin: 0 0 .5rem; max-width: none; } .annuncio__prezzo-nota { font-size: var(--t-4); font-weight: 400; color: var(--testo-2); } .annuncio__spese { color: var(--testo-2); font-size: var(--t-5); margin: 0 0 var(--passo); } /* La zona servita: è quello che il professionista ha comprato (MAPPA.md §3), quindi ha una cornice sua e non è una riga in mezzo alle altre. */ .azienda__area { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 var(--passo); padding: .75rem 1rem; background: var(--superficie-alt); border-radius: var(--raggio); max-width: none; } .azienda__area-etichetta { font-size: var(--t-5); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-2); } .azienda__area-valore { font-weight: 600; } /* --- Le foto ------------------------------------------------------------- Griglia semplice: la prima a tutta larghezza, le altre in fila. Nessun carosello — un carosello vuole JavaScript, nasconde le foto dietro un gesto e su un annuncio le foto sono il contenuto, non un vezzo. */ .galleria { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin-bottom: calc(var(--passo) * 2); } .galleria img { width: 100%; height: auto; border-radius: var(--raggio); background: var(--superficie-alt); /* il posto della foto si vede prima della foto */ } .galleria__prima { grid-column: 1 / -1; aspect-ratio: 3 / 2; object-fit: cover; } .galleria__foto { aspect-ratio: 4 / 3; object-fit: cover; } /* --- I numeri ------------------------------------------------------------ `auto-fit` e non un numero fisso di colonne: con `letter-spacing: .12em` imposto dall'utente (WCAG 1.4.12) le voci si allargano e la griglia perde una colonna invece di tagliare il testo. */ .dati { display: grid; gap: var(--passo); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0 0 calc(var(--passo) * 2); padding: var(--passo); background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-grande); } .dato dt { font-size: var(--t-5); color: var(--testo-2); margin-bottom: .15rem; } .dato__valore { margin: 0; font-weight: 600; max-width: none; } /* Le cifre a larghezza fissa anche qui: superfici, vani, anni e partite IVA si incolonnano fra una scheda e l'altra → DESIGN.md §4. */ .dato__valore, .cin__codice, .fiducia__conto { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- Elenchi di termini --------------------------------------------------- */ /* --- Le pillole di categoria in testa alla scheda ------------------------ ⚠ **I colori dei pin non si possono usare come colore del TESTO.** Misurato sul banco il 8/8/2026, su fondo bianco: affitto #0072B2 5,19:1 ok terreni #009E73 ~3,0:1 no vendita #D55E00 ~3,9:1 no servizi #E69F00 ~2,3:1 no vacanza #56B4E9 2,31:1 no lavoro #CC79A7 ~3,1:1 no Cinque su sei sotto il 4,5:1, e non è un difetto della palette: Okabe-Ito è progettata per **superfici piene** — un pin sulla mappa, dove il colore è riempimento e non inchiostro. DESIGN.md §3 infatti la assegna ai pin, non al testo. Usarla per le lettere è nostro, ed è sbagliato. Quindi il colore torna a fare quello per cui è stato scelto: una pastiglia piena accanto a un testo che resta a contrasto pieno. Si guadagna anche la seconda metà di DESIGN.md §3 — «ogni pin ha anche una forma o un'icona» — perché la pastiglia è lo stesso oggetto che si vede sulla mappa, e il colore smette di essere l'unico portatore di informazione (WCAG 1.4.1): la parola «Case Vacanza» c'è comunque. */ .annuncio__categorie .pillola { color: var(--testo); text-decoration: none; gap: .45rem; } .annuncio__categorie .pillola:hover { background: var(--superficie-alt); } .annuncio__categorie .pillola::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--tinta, var(--testo-2)); flex: none; } /* Lo slug del termine è `case-vacanza`, la variabile del pin `--pin-vacanza`: la corrispondenza sta qui e non nel template, dove sarebbe una seconda tabella da tenere allineata a mano — e soprattutto non in un attributo `style`, che una CSP con `style-src` severa bloccherebbe (TECNICA.md §8). */ .annuncio__categorie .pillola--affitto { --tinta: var(--pin-affitto); } .annuncio__categorie .pillola--vendita { --tinta: var(--pin-vendita); } .annuncio__categorie .pillola--case-vacanza { --tinta: var(--pin-vacanza); } .annuncio__categorie .pillola--terreni { --tinta: var(--pin-terreni); } .annuncio__categorie .pillola--servizi { --tinta: var(--pin-servizi); } .annuncio__categorie .pillola--lavoro { --tinta: var(--pin-lavoro); } .termini { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 calc(var(--passo) * 2); padding: 0; } .termini li { max-width: none; } .termini .pillola { text-decoration: none; color: var(--testo); } .termini .pillola:hover { background: var(--superficie-alt); } /* ========================================================================== IL PANNELLO DELLA FIDUCIA «La fiducia si costruisce a centimetri, non a striscioni» → DESIGN.md §7. ========================================================================== */ .fiducia { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-grande); box-shadow: var(--ombra); padding: calc(var(--passo) * 1.25); align-self: start; } @media (min-width: 60rem) { .fiducia { position: sticky; top: var(--passo); } } .fiducia__titolo { font-size: var(--t-5); text-transform: uppercase; letter-spacing: .06em; color: var(--testo-2); margin-bottom: .75rem; } .fiducia__fatti { list-style: none; margin: var(--passo) 0; padding: 0; font-size: var(--t-5); color: var(--testo-2); } .fiducia__fatti li { margin-bottom: .25rem; max-width: none; } .fiducia__conto { font-weight: 600; color: var(--testo); } /* Il pulsante primario a tutta larghezza del pannello: è l'unica azione, e l'unico posto della pagina dove si spende il verde → DESIGN.md §1. */ .fiducia__azione { display: flex; justify-content: center; width: 100%; margin: var(--passo) 0 .75rem; text-align: center; } .fiducia__nota, .fiducia__telefono { font-size: var(--t-5); margin: 0 0 .5rem; max-width: none; } .fiducia__nota { color: var(--testo-2); } .fiducia__telefono a { font-weight: 600; font-variant-numeric: tabular-nums; } /* L'avviso sulla caparra: attaccato al pulsante, non in fondo alla pagina. Difesa 8 di DESIGN.md §5, quella che para la truffa più diffusa. Colore `--attenzione`, che è il colore delle anomalie: qui non c'è un errore, c'è una cosa da non fare. `--errore` sarebbe una bugia — nessuno ha sbagliato niente — e i semantici valgono solo se ognuno dice una cosa sola. */ .fiducia__caparra { margin: .75rem 0 0; padding: .75rem; background: var(--superficie-alt); border-left: 3px solid var(--attenzione); border-radius: 0 var(--raggio) var(--raggio) 0; font-size: var(--t-5); color: var(--testo); max-width: none; } .fiducia__caparra strong { color: var(--attenzione); } /* ========================================================================== IL BADGE DI VERIFICA ========================================================================== */ .fiducia__badge { margin-bottom: var(--passo); } /* `` di suo è un `list-item` e si porta dietro il triangolino del browser. Lo si toglie da tutte e due le parti — la proprietà standard e il pseudo-elemento di WebKit — e la freccia la si ridisegna sotto, dove si può allineare al testo. */ .fiducia__badge > summary { list-style: none; } .fiducia__badge > summary::-webkit-details-marker { display: none; } /* ⚠ IL PESO CRESCE COL LIVELLO, MA NON CON IL COLORE E NON CON IL FONDO. DESIGN.md §5 vuole che il peso visivo cresca da 1 a 3; DESIGN.md §1 dice che il colore saturo si spende in due soli posti, i pin e il pulsante primario. Le due regole si toccano proprio qui: un badge di livello 3 riempito di verde starebbe a due centimetri dal pulsante verde, e l'occhio smetterebbe di sapere quale dei due si preme. ⚠ E il fondo tenue, che sarebbe la via di mezzo ovvia, NON si può usare: misurato sul banco il 8/8/2026, `--verificato` su `--superficie-alt` fa **4,29:1** contro i 4,5 richiesti — il beige caldo alza troppo il fondo. Sulla superficie bianca del pannello lo stesso verde fa 5,00:1 e passa. È la stessa trappola che in DESIGN.md §3 aveva già bocciato `#B37A00`: un colore va misurato sul fondo su cui finisce davvero, non in astratto. Restano tre leve che non toccano né la tinta né il contrasto: lo spessore del bordo, il corpo del testo, e un alone che sta FUORI dal bordo (il `box-shadow` non entra sotto al testo, quindi non cambia niente al rapporto). Il segno di spunta accompagna sempre la parola: il colore da solo non porta mai l'informazione (WCAG 1.4.1). */ .badge[data-livello="2"] { border-width: 2px; } .badge[data-livello="3"] { border-width: 2px; font-size: var(--t-4); padding: .35rem .9rem; box-shadow: 0 0 0 .3em var(--superficie-alt); } /* La spunta, disegnata con due bordi: nessun file di icone, nessun carattere che un lettore di schermo possa provare a leggere. */ .badge__segno { width: .4em; height: .7em; border: solid currentColor; border-width: 0 .16em .16em 0; transform: rotate(45deg); margin-top: -.2em; flex: none; } /* La freccia dice che c'è qualcosa da aprire. Anche questa disegnata, e anche questa muta: sta in un `::after`, quindi non entra nel testo del badge. */ .fiducia__badge > summary::after { content: ""; width: .4em; height: .4em; border: solid currentColor; border-width: 0 .12em .12em 0; transform: rotate(45deg) translate(-.15em, -.15em); transition: transform .18s ease; flex: none; } .fiducia__badge[open] > summary::after { transform: rotate(-135deg) translate(-.05em, -.05em); } /* La nota apre IN PAGINA, non in un pop-up → DESIGN.md §5. */ .fiducia__badge > .badge__nota { margin-top: .5rem; } .badge__nota p { margin: 0 0 .4rem; max-width: none; } .badge__nota p:last-child { margin-bottom: 0; } .badge__nota strong { color: var(--testo); } /* ⚠ In stampa un `
` chiuso porta via con sé il suo contenuto, e questa è la pagina che qualcuno stampa per portarsela alla visita — cioè proprio l'occasione in cui vuole avere sotto gli occhi cosa è stato verificato e il CIN. Si riapre tutto: la prima riga basta ai browser vecchi, la seconda serve a quelli nuovi, che il contenuto chiuso lo nascondono con `content-visibility` su `::details-content` e non guardano più il `display` del figlio. */ @media print { .fiducia__badge > .badge__nota { display: block; } .fiducia__badge::details-content { content-visibility: visible; block-size: auto; } .fiducia__badge > summary::after { display: none; } } /* ========================================================================== CIN E CIR — obbligo di legge → TECNICA.md §7 ========================================================================== */ .cin { margin: 0 0 calc(var(--passo) * 2); padding: var(--passo); background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-grande); } .cin__titolo { font-weight: 700; margin: 0 0 .5rem; max-width: none; } .cin__codici { display: flex; flex-wrap: wrap; gap: var(--passo) calc(var(--passo) * 2); margin: 0; } .cin__voce dt { font-size: var(--t-5); color: var(--testo-2); } .cin__codice { margin: 0; font-weight: 600; letter-spacing: .04em; /* è un codice da ricopiare, non una parola da leggere */ max-width: none; } /* Il CIN che manca e il CIN malfatto si vedono: un avviso che non si legge non avvisa nessuno, ed è la ragione per cui `--attenzione` in DESIGN.md è stato corretto da #B37A00 a un valore che passa il 4,5:1. */ .cin--manca { border-color: var(--attenzione); border-left-width: 4px; } .cin--manca .cin__titolo, .cin__anomalia { color: var(--attenzione); } .cin__anomalia { font-size: var(--t-5); margin: .5rem 0 0; max-width: none; } /* ========================================================================== Recensioni → DESIGN.md §6 ========================================================================== */ .recensioni { margin-top: calc(var(--passo) * 2); } .recensioni__vuoto { padding: var(--passo); background: var(--superficie-alt); border-radius: var(--raggio); color: var(--testo-2); } /* ========================================================================== LA MAPPA Serve a `templates/mappa.php` e ad `assets/js/mappa.js`. Il principio che decide tutto questo blocco è DESIGN.md §1: **la mappa è il contenuto, l'interfaccia è la cornice**. Qui dentro non si spende colore saturo da nessuna parte se non nei pin — nemmeno sui comandi di MapLibre, che di serie arrivano con un blu che non è nostro. ========================================================================== */ /* --- `hidden` deve nascondere davvero ----------------------------------- ⚠ L'attributo `hidden` funziona grazie a **una riga del foglio di stile del browser** — `[hidden] { display: none }` — e qualunque regola d'autore che dichiari un `display` la batte per semplice precedenza. `.pulsante` è `inline-flex`, quindi un pulsante con `hidden` **resta a schermo**. Preso sul banco l'8/8/2026, guardando la pagina invece che il codice: il pulsante «Aggiorna», che esiste solo per chi non ha JavaScript, si vedeva anche col JavaScript acceso — e cioè offriva di fare a mano una cosa che era già successa da sola. Vale per tutti gli elementi che questa pagina accende e spegne (il pulsante di ricerca, le righe delle categorie spente, gli avvisi), quindi si chiude la classe di errore in una riga invece di rincorrerla selettore per selettore. */ [hidden] { display: none !important; } /* --- Il testo che sta solo per chi legge con le orecchie ----------------- Non `display:none` e non `visibility:hidden`: quelli lo tolgono anche ai lettori di schermo, che è il contrario dello scopo. */ .solo-per-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- La pagina diventa un'applicazione ----------------------------------- Su questa pagina sola il documento non scorre: scorre la lista, e la mappa riempie quello che resta. MAPPA.md §7 la vuole «a tutto schermo» sul telefono, e §8 la vuole come hero e non come settima sezione. `100dvh` e non `100vh`: su iOS la barra degli indirizzi entra ed esce, e con `vh` il fondo della mappa finisce sotto di essa — cioè proprio dove sta il foglio dei risultati. */ body.mappa-attiva { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } body.mappa-attiva > .testata { flex: none; } /* `#contenuto` è `.contenitore`, cioè largo al massimo `var(--colonna)` (120rem = 1920, dal 28/8/2026) e centrato. Qui deve essere largo quanto lo schermo: un id e una classe battono una classe, quindi non serve `!important`. */ body.mappa-attiva #contenuto.contenitore { display: flex; flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; } /* ⚠ Il piede sparisce, e con lui i suoi collegamenti. È voluto — una mappa a tutto schermo non ha un sotto — ma lascia un debito: privacy e cookie vanno messi nella riga di attribuzione della mappa (`radar_mappa_attribuzione()`) il giorno in cui quelle pagine esistono. */ body.mappa-attiva .pieDiPagina { display: none; } /* ⚠ `min-width: 0` non è di scorta. `.mappa` è un elemento flessibile dentro `#contenuto`, e un elemento flessibile di suo vale `min-width: auto`: si rifiuta di stringersi sotto la larghezza minima del proprio contenuto. A 375 px la fila delle pillole ne chiede 789, e il risultato misurato sul banco l'8/8/2026 era **tutta la pagina larga 755 px in una finestra da 375**, con la barra di scorrimento orizzontale sotto la mappa — sul telefono, cioè dove arriva il traffico. Con lo zero la fila scorre per conto suo, che è quello che le si è chiesto scrivendo `overflow-x: auto`. */ .mappa { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; } /* --- Le pillole: il comando principale ----------------------------------- MAPPA.md §7: «sempre visibili in alto, anche col foglio dei risultati aperto: sono il comando principale e non devono mai finire sotto qualcosa». Stanno fuori dal contenitore della mappa e prima di lui nel flusso: così non c'è nessuno `z-index` da difendere — non possono finire sotto perché non sono nello stesso strato. */ .mappa__comandi { flex: none; background: var(--superficie); border-bottom: 1px solid var(--bordo); } /* Sei pillole non stanno in 375 px. Scorrono in orizzontale — che è il modo in cui ogni applicazione di ricerca risolve questa stessa riga — e non vanno a capo: due righe di pillole si mangerebbero un ottavo della mappa su un telefono, e la mappa è il prodotto. */ .pillole { display: flex; gap: .5rem; align-items: center; padding: .6rem var(--passo); overflow-x: auto; scrollbar-width: none; } .pillole::-webkit-scrollbar { display: none; } .pillole .pillola { position: relative; flex: none; user-select: none; /* ⚠ Il testo torna a contrasto pieno. Le regole di cima danno alla pillola il colore del pin come colore del **testo**, e cinque colori su sei di Okabe-Ito stanno sotto il 4,5:1 su bianco (misurato il 8/8/2026, la tabella sta più su in questo file). Il colore lo porta la pastiglia. */ color: var(--testo); } /* ⚠ **Non `opacity: 0`.** Era la prima scrittura, e Chrome toglieva le sei caselle dall'albero di accessibilità: un elemento a opacità zero per lui è invisibile, e invisibile vuol dire ignorato: verificato sul banco l'8/8/2026, nell'albero non c'era nessuna casella di controllo. Sarebbero state sei pillole che si vedono, si premono col mouse e **non esistono** per un lettore di schermo — cioè il comando principale della pagina, sparito, proprio per chi la lista l'ha scritta apposta. La tecnica giusta è quella di `.solo-per-lettori`: si ritaglia, non si sbiadisce. */ .pillola__casella { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; } .pillole .pillola:has(.pillola__casella:checked) { border-color: var(--tinta, var(--testo-2)); box-shadow: inset 0 0 0 1px var(--tinta, var(--testo-2)); font-weight: 600; } /* La casella è invisibile, quindi il contorno di messa a fuoco va portato sulla pillola: senza, chi naviga col tabulatore non sa dove si trova. */ .pillole .pillola:has(.pillola__casella:focus-visible) { outline: 3px solid var(--azione); outline-offset: 2px; } /* --- La forma del pin, dentro la pillola --------------------------------- DESIGN.md §3 e WCAG 1.4.1: il colore non può essere l'unico portatore di informazione. La pastiglia della pillola ha **la stessa forma** del pin che si vede sulla mappa, così l'occhio impara l'abbinamento una volta e poi riconosce i punti senza rileggere la legenda. Le forme sono quelle di `data/pin.php`. */ .pillola__segno { width: .75em; height: .75em; flex: none; background: var(--tinta, var(--testo-2)); } .pillola[data-forma="cerchio"] .pillola__segno { border-radius: 50%; } .pillola[data-forma="quadrato"] .pillola__segno { border-radius: 2px; } .pillola[data-forma="rombo"] .pillola__segno { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .pillola[data-forma="triangolo"] .pillola__segno { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .pillola[data-forma="esagono"] .pillola__segno { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } .pillola[data-forma="goccia"] .pillola__segno { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); } /* Lo slug del termine è `case-vacanza`, la variabile del pin `--pin-vacanza`: la corrispondenza sta qui, come già per le pillole della scheda. */ .pillola--affitto { --tinta: var(--pin-affitto); } .pillola--vendita { --tinta: var(--pin-vendita); } .pillola--case-vacanza { --tinta: var(--pin-vacanza); } .pillola--terreni { --tinta: var(--pin-terreni); } .pillola--servizi { --tinta: var(--pin-servizi); } .pillola--lavoro { --tinta: var(--pin-lavoro); } .pillola__conto { color: var(--testo-2); font-weight: 400; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Esiste solo per chi non ha JavaScript: `mappa.js` lo nasconde all'avvio, perché da lì in poi il filtro è istantaneo e un pulsante che non aggiorna niente serve solo a far dubitare di aver premuto bene. */ .pillole__invia { flex: none; padding: .4rem 1rem; font-size: var(--t-5); } /* --- Il corpo: lista e tela ---------------------------------------------- */ .mappa__corpo { position: relative; display: flex; flex: 1 1 auto; min-height: 0; } .mappa__tela { position: relative; flex: 1 1 auto; min-width: 0; background: var(--superficie-alt); } .mappa__gl { position: absolute; inset: 0; } /* «Cerca in quest'area»: al centro in alto, dove l'occhio è già mentre trascina. Nasce nascosto e compare solo quando lo schermo è uscito da quello che si è già chiesto → MAPPA.md §2. */ .mappa__ricerca { position: absolute; top: .75rem; left: 50%; z-index: 3; transform: translateX(-50%); box-shadow: var(--ombra); white-space: nowrap; } .mappa__ricerca[hidden] { display: none; } /* La velina di stato — due nodi da 5/9/2026 (MAPPA-COME-MAPS.md G4, Prometeo rilievo 5): un solo `.mappa__stato` portava insieme il troncamento (si chiude da sé) e il guasto (resta), e chi scriveva per ultimo cancellava l'altro. `.mappa__stato-pila` posiziona il gruppo una volta sola; i due `.mappa__stato` dentro si impilano col `gap`, così anche il caso raro in cui sono visibili insieme non li sovrappone. */ .mappa__stato-pila { position: absolute; top: 3.75rem; left: 50%; z-index: 3; display: flex; flex-direction: column; gap: .5rem; align-items: center; max-width: min(28rem, calc(100% - 2rem)); transform: translateX(-50%); } .mappa__stato { margin: 0; padding: .5rem .9rem; background: var(--superficie); border: 1px solid var(--bordo); border-left: 3px solid var(--attenzione); border-radius: var(--raggio); box-shadow: var(--ombra); font-size: var(--t-5); } /* Il troncamento si tocca per chiuderlo prima dei 6 secondi (mappa.js); il guasto resta finché una ricerca non riesce, e non si chiude a un tocco che non farebbe niente. */ .mappa__stato--avviso { cursor: pointer; } .mappa__stato--guasto { border-left-color: var(--errore); } .mappa__stato:empty, .mappa__stato[hidden] { display: none; } /* --- Il foglio dei risultati --------------------------------------------- Sul telefono è un foglio che si tira su, con tre posizioni: chiuso, metà, pieno → MAPPA.md §7. Sul largo diventa una colonna a sinistra e la maniglia non serve più. */ .foglio { display: flex; flex-direction: column; min-height: 0; background: var(--superficie); } .foglio__testa { flex: none; padding: .5rem var(--passo) .6rem; background: var(--superficie); border-bottom: 1px solid var(--bordo); } .foglio__maniglia { display: block; width: 100%; padding: .35rem 0 .5rem; background: none; border: none; cursor: grab; } .foglio__presa { display: block; width: 2.5rem; height: 4px; margin: 0 auto; border-radius: 999px; background: var(--bordo); } .foglio__riepilogo { margin: 0; font-size: var(--t-4); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .foglio__taglio, .foglio__vuoto, .foglio__guasto { margin: 0; padding: .75rem var(--passo); max-width: none; font-size: var(--t-5); color: var(--testo-2); } .foglio__guasto { color: var(--errore); } .foglio__taglio[hidden], .foglio__vuoto[hidden] { display: none; } .risultati { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; /* scorrendo la lista non si trascina quello che c'è sotto */ list-style: none; } .risultato { max-width: none; border-bottom: 1px solid var(--bordo); } .risultato[hidden] { display: none; } .risultato__collegamento { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; padding: .75rem var(--passo); color: var(--testo); text-decoration: none; } .risultato:hover { background: var(--superficie-alt); } /* La riga scelta si vede con una barra piena a sinistra e non con un fondo colorato: la barra non tocca il contrasto del testo, un fondo saturo sì. */ .risultato--scelto { background: var(--superficie-alt); box-shadow: inset 3px 0 0 var(--azione); } .risultato__titolo { font-weight: 600; } .risultato__prezzo { grid-column: 2; grid-row: 1; font-weight: 700; white-space: nowrap; } .risultato__coda { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .25rem; } .risultato__categoria { padding: .1rem .55rem; font-size: var(--t-5); color: var(--testo); background: var(--superficie-alt); border-color: transparent; } .risultato__categoria::before { content: ""; width: .6em; height: .6em; flex: none; border-radius: 50%; background: var(--tinta, var(--testo-2)); } .risultato__badge { padding: .1rem .55rem; font-size: var(--t-5); } /* --- Telefono: il foglio galleggia sulla mappa ---------------------------- */ @media (max-width: 59.999rem) { .foglio { position: absolute; inset: auto 0 0 0; z-index: 4; border-top: 1px solid var(--bordo); border-radius: var(--raggio-grande) var(--raggio-grande) 0 0; box-shadow: var(--ombra); transition: height .22s ease; } /* Le tre posizioni. Anche da «pieno» il foglio arriva al massimo in cima al corpo della mappa, **non** in cima allo schermo: sopra ci sono le pillole, e quelle non si coprono mai. */ .foglio[data-stato="chiuso"] { height: 4.25rem; } .foglio[data-stato="meta"] { height: 45%; } .foglio[data-stato="pieno"] { height: 100%; } .foglio[data-stato="chiuso"] .risultati, .foglio[data-stato="chiuso"] .foglio__taglio, .foglio[data-stato="chiuso"] .foglio__vuoto { display: none; } .mappa__ricerca { top: .5rem; } } /* --- Largo: la lista è una colonna, e sta prima --------------------------- A sinistra e non a destra perché è anche l'ordine di lettura del documento: chi arriva col tabulatore incontra i risultati prima della tela, che da tastiera non dice niente. Nessun `order:` nel CSS, quindi lettura e vista restano la stessa sequenza (WCAG 1.3.2). */ @media (min-width: 60rem) { .foglio { flex: 0 0 24rem; border-right: 1px solid var(--bordo); } .foglio__maniglia { display: none; } .foglio__testa { padding-top: .9rem; } /* * P210, 5/9/2026 — LA LINGUETTA NASCONDE LA COLONNA (MAPPA-COME-MAPS.md * §7.6 H3). `display: none` e non `width: 0`: la colonna deve smettere * di contare per il layout flex di `.mappa__corpo`, non solo di * vedersi — è quello che dà alla tela i «≥ 350px di mondo nuovo» che il * criterio misura. */ .foglio[data-colonna="nascosta"] { display: none; } } /* ========================================================================== IL PANNELLO DI SELEZIONE, COME MAPS P210, 5/9/2026, MAPPA-COME-MAPS.md §7.2/§7.6 — al posto del fumetto MapLibre di prima (`maplibregl.Popup`, tolto insieme al codice che lo creava). Le posizioni per larghezza (in testa alla colonna, galleggiante, dentro il foglio a 390) stanno in `mappa.css`: qui solo l'aspetto, con i token del sito — niente colore saturo fuori dai pin e da `.pulsante`. ========================================================================== */ .pannello-scheda { position: relative; display: flex; flex-direction: column; flex: none; background: var(--superficie); border-bottom: 1px solid var(--bordo); } .pannello-scheda__chiudi { position: absolute; top: .5rem; right: .5rem; z-index: 1; padding: .3rem .55rem; font-size: 1.25rem; line-height: 1; color: var(--testo-2); background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); } .pannello-scheda__chiudi:hover { background: var(--superficie-alt); } .pannello-scheda__indietro { flex: none; align-self: start; margin: .5rem 0 0 .5rem; padding: .3rem .6rem; font-size: var(--t-5); font-weight: 600; color: var(--testo); background: var(--superficie-alt); border: 1px solid var(--bordo); border-radius: var(--raggio); } .pannello-scheda__indietro:hover { background: var(--bordo); } .pannello-scheda__corpo { display: grid; gap: .4rem; padding: .85rem; overflow-y: auto; } .pannello-scheda__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--raggio); background: var(--superficie-alt); } .pannello-scheda__testa { display: grid; gap: .3rem; justify-items: start; } .pannello-scheda__titolo { margin: 0; max-width: none; font-weight: 700; color: var(--testo); } /* * P210-v2, 5/9/2026 — pillola categoria + mestiere · comune SULLA STESSA * RIGA (rilievo del coordinatore: prima erano due righe separate, e non * si leggeva come una scheda di Maps — lì categoria e sottotitolo stanno * appaiati). */ .pannello-scheda__info-riga { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .pannello-scheda__categoria { padding: .1rem .55rem; font-size: var(--t-5); color: var(--testo); } .pannello-scheda__info-testo { font-size: var(--t-5); color: var(--testo-2); } .pannello-scheda__extra { display: flex; flex-wrap: wrap; gap: .4rem; } /* ========================================================================== LE AZIONI, COME MAPS — bottoni tondi con icona SVG e la parola sotto. P210-v2, 5/9/2026: prima erano pillole `.pulsante` piene, il coordinatore ha chiesto la stessa forma di Google Maps — un cerchio da 44px (--tocco), l'icona dentro, il nome in 11px sotto. Colore saturo SOLO su «Indicazioni» (--azione): è l'unica azione primaria della fila. ========================================================================== */ .pannello-scheda__azioni-blocco { display: grid; gap: .4rem; } .pannello-scheda__icone-riga { display: flex; gap: .75rem; } .pannello-scheda__icona-voce { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 4.5rem; color: var(--testo); text-decoration: none; text-align: center; } .pannello-scheda__icona-cerchio { display: flex; align-items: center; justify-content: center; width: var(--tocco, 44px); height: var(--tocco, 44px); color: var(--testo); background: var(--superficie); border: 1px solid var(--bordo); border-radius: 50%; box-shadow: var(--ombra); } .pannello-scheda__icona-voce:hover .pannello-scheda__icona-cerchio { background: var(--superficie-alt); } .pannello-scheda__icona-cerchio--primario { color: var(--azione-testo); background: var(--azione); border-color: var(--azione); } .pannello-scheda__icona-voce:hover .pannello-scheda__icona-cerchio--primario { background: var(--azione-hover); } .pannello-scheda__icona-testo { max-width: 100%; overflow: hidden; font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } /* La nota, sotto la riga delle icone — non più accanto a un bottone preciso: con tre bottoni tondi non ce n'è più uno «accanto» ovvio. */ .pannello-scheda__nota-inline, .pannello-scheda__nota { margin: 0; max-width: none; font-size: 11px; color: var(--testo-2); } /* ========================================================================== «TUTTE LE INFORMAZIONI» — una sezione che si apre/chiude (disclosure), non un bottone pieno: P210-v2. `aria-expanded` sul bottone, `aria-controls` verso la regione — niente colore saturo, è un'informazione in più, non un'azione. ========================================================================== */ .pannello-scheda__disclosure { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--tocco, 44px); padding: 0 .2rem; font: inherit; font-weight: 600; color: var(--testo); background: none; border: none; border-top: 1px solid var(--bordo); cursor: pointer; } .pannello-scheda__disclosure-segno { width: .55em; height: .55em; border-right: 2px solid var(--testo-2); border-bottom: 2px solid var(--testo-2); transform: rotate(45deg); transition: transform .15s ease; } .pannello-scheda__disclosure[aria-expanded="true"] .pannello-scheda__disclosure-segno { transform: rotate(-135deg); } .pannello-scheda__dettagli { padding-bottom: .25rem; } .pannello-scheda__dettagli[hidden] { display: none; } .pannello-scheda__dettagli-lista { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; max-width: none; padding-top: .25rem; font-size: var(--t-5); } .pannello-scheda__dettagli-lista dt { color: var(--testo-2); } .pannello-scheda__dettagli-lista dd { margin: 0; color: var(--testo); } .pannello-scheda__dettagli-lista dd a { color: var(--azione); } /* ========================================================================== I COMANDI DI MAPLIBRE, RIVESTITI Arrivano bianchi, quadrati e con un blu che non è nostro. DESIGN.md §1: il colore saturo si spende nei pin e nel pulsante primario, non nei bottoni dello zoom. ⚠ CORRETTO IL 5/9/2026 (MAPPA-COME-MAPS.md G4): il commento diceva «il foglio del vendor è accodato prima di questo, quindi basta la stessa specificità» — **falso, misurato sul banco**: `document.styleSheets` rende `radar.css` (2°) PRIMA di `maplibre-gl.css` (5°), quindi a parità di specificità (0,2,0 su entrambi) il vendor vinceva sempre, non il contrario — `.maplibregl-ctrl-group{border-radius:4px}` del vendor sovrascriveva `var(--raggio)` qui sotto, e i 29×29px dei bottoni non diventavano mai 44 sotto i 60rem. Lo stesso problema, la stessa soluzione già in uso in questo file (`.mappa .mappa__gl`, sopra) e in `mappa.css` §1/§12: un antenato in più (0,3,0) vince **in qualunque ordine** escano i fogli, la specificità non l'ordine di carico. */ /* ATTENZIONE - RADAR-4, 7/9/2026, chiuso dal cancello indipendente. Le sette regole qui sotto erano circoscritte a `.mappa`, cioe' alla PAGINA della mappa. Dal 6/9 c'e' una seconda carta, in home (`.mappa-home`), e li' i comandi restavano quelli del venditore: in tema scuro il fondo del bottone resta bianco mentre il glifo viene invertito da `--mlb-icona` (bianco su bianco, **1,5:1** misurato dal cancello). L'antenato ora e' `:is(.mappa, .mappa-home)`: stessa specificita' (0,3,0), che e' quello che serve a battere il foglio del vendor accodato dopo, e una carta sola da vestire invece di due. Il glifo (`--mlb-icona`, piu' sotto) non era circoscritto a niente: e' per questo che si invertiva anche dove il fondo non cambiava. */ :is(.mappa, .mappa-home) .maplibregl-ctrl-group { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); } :is(.mappa, .mappa-home) .maplibregl-ctrl-group button + button { border-top: 1px solid var(--bordo); } :is(.mappa, .mappa-home) .maplibregl-ctrl-group button:hover { background: var(--superficie-alt); } /* Il bersaglio, sotto i 60rem — 5/9/2026, MAPPA-COME-MAPS.md G4. Il vendor dà 29×29px a ogni bottone (zoom, «La mia posizione»): sotto WCAG 2.5.8 e sotto i 44px che questo tema usa ovunque altrove (`--tocco`). Sopra i 60rem un mouse non ha bisogno del bersaglio del pollice, e resta 29px. L'icona non scala (resta centrata dal vendor): più spazio intorno, non un'icona più grande. */ @media (max-width: 59.999rem) { :is(.mappa, .mappa-home) .maplibregl-ctrl-group button { width: 44px; height: 44px; } } /* 🚨 7/9/2026 — L'ATTRIBUZIONE: UNA RIGA IN FONDO, NON UN PANNELLO. Gabriele: «riduci lo spazio dedicato al contributo a OSM, magari mettilo con sfondo trasparente ma leggibile sul fondo della mappa». Il vendor le dà un riquadro bianco opaco che a schermo stretto arrivava a coprire il 12% della carta. Qui il riquadro sparisce: resta il testo, piccolo, in fondo, leggibile **per contrasto** e non perché ha un pannello sotto — un velo sfumato dal basso lo tiene su qualunque carta, chiara o scura. ⚠ L'attribuzione non si nasconde e non si accorcia: è un obbligo di licenza (ODbL di OpenStreetMap). Si fa pesare meno, non si fa sparire. */ :is(.mappa, .mappa-home) .maplibregl-ctrl-attrib { font-size: var(--t-5); color: var(--testo); background: transparent; border-radius: 0; padding: 2px 8px; text-shadow: 0 1px 2px var(--fondo), 0 0 6px var(--fondo), 0 0 12px var(--fondo); } /* La striscia che tiene su il testo: sfuma dal bordo basso e non ha un bordo proprio, così non sembra un pannello. `pointer-events: none` perché sotto ci sono i grappoli, e questa è solo una velatura. */ :is(.mappa, .mappa-home) .maplibregl-ctrl-bottom-right::before, :is(.mappa, .mappa-home) .maplibregl-ctrl-bottom-left::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.25rem; background: linear-gradient(to top, color-mix(in srgb, var(--fondo) 78%, transparent), transparent); pointer-events: none; z-index: -1; } :is(.mappa, .mappa-home) .maplibregl-ctrl-attrib a { color: var(--testo-2); } /* Le icone dello zoom sono SVG in `background-image` con il nero dentro: in tema scuro sparirebbero sul fondo scuro del pulsante. Si invertono, che è l'unico modo di ritingerle senza rifare i file del vendor. 🚨 QUI `light-dark()` NON ARRIVA, ed è misurato: CSS.supports('color','light-dark(none, invert(1))') → false `light-dark()` è definita come `light-dark(, )`: un filtro non è un colore. Quindi questa è **la sola media query di tema rimasta in tutto il tema**, e regge **un valore solo**. Le tre righe ricalcano una per una le tre di `color-scheme` §tema, così i due interruttori si leggono insieme: la media query non guarda il tema risolto ma il SISTEMA, per questo serve il `:not([data-theme="light"])` — senza, chi ha scelto «chiaro» con il sistema in scuro si ritroverebbe le icone invertite. La scala invece è tutta colore, e passa da `light-dark()`. I suoi valori chiari sono quelli che il vendor si dà da sé (`maplibre-gl.css`: #333 su bianco al 75%), riscritti qui perché la coppia stia in un posto solo: la riga sotto è l'unica che disegna la scala, in tutti e tre gli stati. */ :root { --mlb-icona: none; } :root[data-theme="dark"] { --mlb-icona: invert(1) hue-rotate(180deg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mlb-icona: invert(1) hue-rotate(180deg); } } .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: var(--mlb-icona); } /* 5/9/2026, cancello S-RIMISURA: la scala era rimasta del venditore in tutti e due i temi (bordo nero, bianco al 75%), perché senza l'antenato `.mappa` il foglio del vendor, accodato DOPO questo, vinceva. Stessi token dei comandi qui sopra: la coppia chiaro/scuro sta già dentro. */ :is(.mappa, .mappa-home) .maplibregl-ctrl-scale { color: var(--testo-2); background: var(--superficie); border-color: var(--bordo); font-family: inherit; } /* ========================================================================== LA PAGINA D'ATTESA — `templates/attesa.php` Sezione a sé: **niente qui dentro serve al resto del sito**, e niente qui dentro deve essere riusato altrove. È il sondaggio di PIANO.md §3, una pagina pre-lancio con la grafica di Gabriele. ⚠ La grafica è **blu notte e oro**, e DESIGN.md §2 decide famiglia calda-terrosa perché il blu «lo usa oltre il 50% delle agenzie». Non è un errore da correggere: è la grafica che Gabriele ha chiesto per questa pagina, e i suoi colori restano confinati qui. Il modulo, che è la parte che converte, usa i token normali del sito. Il problema vero di questa pagina è che **il testo è disegnato dentro l'immagine** e a 375 px non si legge. Misurato sulla grafica: la riga più piccola del messaggio principale ha una maiuscola alta 26 px su 1280 di larghezza, cioè un corpo effettivo di ~36 px, che a 375 px di viewport scende a ~10,5 px. Sotto 760 px si serve il **ritaglio** (radar + casa, dove il testo disegnato non c'è) e il messaggio ricompare come testo HTML vero; sopra 760 px torna la grafica intera e il testo HTML sparisce. **Mai due volte insieme.** La soglia è ripetuta in `inc/attesa.php` (RADAR_ATTESA_SOGLIA) e nel `media` delle ``. ========================================================================== */ :root { /* I quattro colori della grafica d'attesa, campionati dal file di Gabriele (`stiamoarrivando.jpg`) e non inventati: mediana del fondo, mediana del testo oro, mediana del legno sul bordo basso del ritaglio. ⚠ Non entrano nel resto del sito: fuori da questa pagina la palette è quella calda-terrosa di DESIGN.md §3. */ --attesa-notte: #011935; /* blu notte del fondo */ --attesa-legno: #402C25; /* il tavolo, sul bordo basso del ritaglio */ --attesa-oro: #EFB341; /* 9,39:1 sul blu notte → AA anche da piccolo */ --attesa-chiaro: #FFFFFF; /* 17,62:1 sul blu notte. Letterale e non `--superficie`: la fascia blu non cambia in tema scuro, la grafica è quella che è. */ } .attesa-pagina { /* Così il rimbalzo elastico in cima non lampeggia avorio sopra la grafica. */ background: var(--attesa-notte); } .attesa { overflow-x: hidden; } /* --- La fascia della grafica ---------------------------------------------- */ .attesa__scena { background: var(--attesa-notte); } .attesa__grafica { /* Un `

` che contiene solo l'immagine: il nome accessibile del titolo è l'`alt`, che riporta il testo esatto disegnato dentro la grafica. Va ripulito dal serif e dai margini che il tema dà agli h1. */ max-width: 1280px; /* la larghezza nativa del file: oltre non si sgrana */ margin: 0 auto; font: inherit; letter-spacing: normal; } .attesa__grafica img { display: block; width: 100%; height: auto; /* Dichiarato qui e non solo negli attributi perché il rapporto cambia con la sorgente: senza questo, al cambio di `` la pagina salta. */ aspect-ratio: 625 / 505; /* ⚠ Rete di sicurezza per la rotazione del telefono. A pagina appena caricata `` e media query concordano sempre, ed è il caso vero. Ma se lo schermo attraversa la soglia (verticale → orizzontale) il CSS cambia rapporto subito mentre il browser tiene ancora la sorgente di prima: per quell'istante l'immagine sarebbe **stirata**. Con `cover` ritaglia invece di deformare, e quando la sorgente giusta arriva i due rapporti coincidono e questa riga non fa più niente. Misurato: senza, a 759 px dopo un ridimensionamento da 1440 il box è 1,059 e la sorgente 1,501. */ object-fit: cover; object-position: center; } /* --- Il messaggio come testo vero, solo dove serve ------------------------ */ .attesa__voce { /* Il ritaglio finisce sul legno del tavolo: senza questa sfumatura fra il bordo basso dell'immagine e il blu si vedrebbe una cucitura. */ background: linear-gradient(to bottom, var(--attesa-legno) 0, var(--attesa-notte) 2.5rem); /* Stretto apposta: su un telefono ogni pixel qui è un pixel tolto al campo dell'email, che è l'unica ragione per cui la pagina esiste. */ padding: 1.25rem 1.25rem 1.25rem; text-align: center; color: var(--attesa-chiaro); } .attesa__claim { max-width: none; margin: 0 0 .5rem; font-size: clamp(1.75rem, 8vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; color: var(--attesa-chiaro); } .attesa__sotto { /* 34ch e non 26: a 375 px la frase passa da tre righe a due, e sono 25 px che vanno al campo. Il corpo non si tocca. */ max-width: 34ch; margin: 0 auto; /* A 375 px fa 16,5 px: sotto i 16 non si scende, ed è tutto il punto di questa pagina → il testo dentro l'immagine lì valeva 10,5 px. */ font-size: clamp(1.0625rem, 4.4vw, 1.1875rem); line-height: 1.45; color: var(--attesa-chiaro); } .attesa__oro { color: var(--attesa-oro); font-weight: 700; } /* --- La fascia del modulo: qui si torna ai token del sito ----------------- */ .attesa__banco { background: var(--fondo); padding: 1rem 1rem calc(var(--passo) * 3); } .attesa__colonna { width: min(100%, 30rem); margin-inline: auto; } /* La riga sotto la grafica: due paragrafi, non uno. Il primo dice cosa apre e quando, il secondo cosa ricevi — ed è quello che fa premere il pulsante, perché risponde da solo alla domanda «e adesso questi mi tempestano». Scala minore sul secondo: è la rassicurazione, non l'annuncio. */ .attesa__ora { max-width: none; margin: 0 0 .5rem; font-size: var(--t-3); line-height: 1.45; text-align: center; color: var(--testo); /* 16,00:1 sul fondo */ } .attesa__ora--nota { margin-bottom: 1rem; font-size: var(--t-4); line-height: 1.5; } .attesa__esito { max-width: none; margin: 0 0 1.5rem; padding: .875rem 1rem; background: var(--superficie); border: 1px solid var(--bordo); border-left: 4px solid var(--testo-2); border-radius: var(--raggio); /* Il testo è sempre `--testo` (17,10:1) e il colore non porta mai il significato da solo: la differenza sta nelle parole → WCAG 1.4.1. La tinta sta solo sul filetto, che è decorazione. */ color: var(--testo); } .attesa__esito--bene { border-left-color: var(--verificato); } .attesa__esito--male { border-left-color: var(--errore); } .attesa__esito code { font-size: .9em; } /* --- Il modulo: un campo solo -------------------------------------------- */ .attesa__form { margin: 0; } .attesa__campo { max-width: none; margin: 0 0 1.25rem; } .attesa__etichetta { display: block; margin-bottom: .375rem; font-weight: 600; color: var(--testo); } .attesa__casella { display: block; width: 100%; min-height: 3rem; /* 48 px: area di tocco oltre i 44 */ padding: .75rem 1rem; font: inherit; font-size: 1.0625rem; /* 17 px: sotto i 16 iOS ingrandisce da solo */ color: var(--testo); background: var(--superficie); /* ⚠ Non `--bordo`: contro `--superficie` fa **1,30:1** e per il contorno di un campo ne servono 3 (WCAG 1.4.11). `--testo-2` fa 5,95:1. Misurato. */ border: 2px solid var(--testo-2); border-radius: var(--raggio); } .attesa__casella::placeholder { color: var(--testo-2); opacity: 1; } .attesa__consenso { display: flex; align-items: flex-start; gap: .75rem; max-width: none; margin: 0 0 .5rem; font-size: var(--t-5); line-height: 1.5; color: var(--testo); } /* Il segno «obbligatoria». Sta FUORI dalla `