/* ========================================================================== RADAR.casa — MAPPA-NUOVA, pezzo 0 di 8: la lingua visiva Scritto il 13/9/2026, squadra RADAR-MAPPA-LINGUA. COS'È QUESTO FILE Non è la mappa: è il vocabolario che i pezzi 1-8 (segnaposto, barra nell'eroe, barra sulla mappa, pannello dei risultati, filtri...) useranno tutti allo stesso modo, per non ridisegnare colori/icone/raggi/ombre quattro volte diverse — è già successo (*«minestrone estetico»*, 3/9/2026). Forma dalla guida (`_disegno/guida-mappa/Radar-Casa-Fix-Icone.html`, meta.ai, 13/9/2026): pastiglia di categoria, cartolina del risultato, segnaposto tondo pieno, pannello galleggiante, tasto rotondo dei filtri. Colori dal tema: `radar.css` (`--pin-*`, palette Okabe-Ito, righe 376-385 chiaro / 503-512 scuro) — ⛔ NON i colori della guida (blu/nero/verde acqua/verde/viola/arancione): sono condivisi con le pastiglie del modulo e la legenda, e cambiarli solo qui darebbe alla stessa categoria due colori in due pagine (regola di Gabriele del 12/9, MAPPA-NUOVA.md §6). QUESTO FILE **ESTENDE** `radar.css`, NON LO SOSTITUISCE Ogni colore/raggio/ombra/font qui sotto è un `var(--radar-*)` o un `var(--pin-*)` letto da `radar.css` — zero valori ricopiati a mano. Non è caricato in nessuna pagina del sito: esiste, si prova su `_prove/mappa-lingua/campione.html`, lo aggancia il pezzo 1. IL TEMA SCURO Si aggancia a `data-tema-eff` (scritto da `assets/js/tema.js` sulla radice), stessa convenzione già in uso in `cerca.css`/`home-categorie.css`: blocco chiaro di default, `:root[data-tema-eff="scuro"] …` per il resto. ⛔ Nessun meccanismo nuovo, nessun secondo `prefers-color-scheme`. ⛔ NESSUNA CLASSE TAILWIND. ⛔ NIENTE LEAFLET/CARTO: le tessere restano `radar.pmtiles`, qui non c'è nessuna dipendenza di libreria mappa — solo i pezzi «intorno» alla mappa (pastiglie, cartoline, pannello, tasto). ========================================================================== */ /* ========================================================================== 1 · LE SEI CATEGORIE — colore, icona, nome ========================================================================== */ /* IL CONTRASTO DELL'ICONA, MISURATO — non a occhio (formula WCAG 2.x, luminanza relativa), soglia **3:1** (WCAG 1.4.11, oggetti grafici — non 4,5:1: qui l'icona non è testo). 🚨 LA CORREZIONE DI GABRIELE, 13/9/2026 — sostituisce il punto 5 del §8 di MAPPA-NUOVA.md (quel paragrafo proponeva un bordo scuro sul cerchio; qui si cambia il colore dell'icona, non il colore del pin): categoria fondo chiaro icona bianca fondo scuro icona bianca Affitto #0072B2 5,19:1 ✅ #4DA3D9 2,78:1 ⛔ Vendita #D55E00 3,87:1 ✅ #F07A26 2,79:1 ⛔ Case Vacanza #56B4E9 2,31:1 ⛔ #7FC7F0 1,85:1 ⛔ Terreni #009E73 3,42:1 ✅ #2BBB92 2,43:1 ⛔ Servizi #E69F00 2,25:1 ⛔ #EFB43A 1,87:1 ⛔ Lavoro #CC79A7 3,06:1 ✅ #DE95BE 2,30:1 ⛔ 👉 **Il tema chiaro** ha due fondi (Case Vacanza, Servizi) sotto soglia con l'icona bianca: lì l'icona diventa scura. Gli altri quattro restano bianchi. Questo è il caso che il brief descriveva. 🚨 **E qui il "non-zero accanto allo zero" è la colonna "fondo scuro":** nel tema scuro i sei fondi sono le varianti pastello (`colore_scuro` in `radar-core/data/pin.php`), pensate per restare leggibili sul fondo scuro della pagina — e un'icona bianca sopra un fondo già chiaro **fallisce su TUTTE E SEI**, non solo sulle stesse due del chiaro (1,85–2,78:1, tutte sotto 3:1: la riga "Affitto, fondo scuro, icona bianca, 2,78:1 ⛔" è proprio l'esempio negativo scritto apposta, come chiede il brief). Se questo file avesse semplicemente invertito la regola del chiaro (bianca su 4, scura su 2) anche in scuro, quattro icone su sei sarebbero uscite sotto soglia senza che nessun metro lo segnalasse prima del rilascio. 👉 **Il tema scuro usa l'icona scura su tutte e sei le categorie.** Con l'inchiostro (`--inchiostro` di `ossatura.css`, #17110E — non se ne importa il file, si ripete qui il valore per non creare una dipendenza di caricamento fra due fogli indipendenti) il contrasto va da 6,69:1 a 10,09:1 su tutti e sei i fondi scuri: ampiamente sopra soglia, misurato sotto in tabella. categoria fondo scuro icona inchiostro Affitto #4DA3D9 6,73:1 ✅ Vendita #F07A26 6,69:1 ✅ Case Vacanza #7FC7F0 10,09:1 ✅ Terreni #2BBB92 7,68:1 ✅ Servizi #EFB43A 10,03:1 ✅ Lavoro #DE95BE 8,15:1 ✅ La sagoma per categoria (già decisa, `_disegno/token.css` §LE SEI FORME, WCAG 1.4.1) resta comunque la vera rete di sicurezza: qui il pin è tondo per tutti — è la scelta del brief — quindi l'icona interna e il nome sono gli unici due canali che restano per chi non distingue i sei colori. */ :root { /* Le due tinte dell'icona: non ridichiarate da --radar-testo o --inchiostro (che seguono `light-dark()`/`color-scheme`, non `data-tema-eff` — vedi intestazione del file). Valori propri, fissi. */ --mn-icona-chiara: #FFFFFF; --mn-icona-scura: #17110E; /* = --inchiostro, ossatura.css:162 */ } /* --- Affitto -------------------------------------------------------------- */ [data-categoria="affitto"] { --mn-colore: var(--pin-affitto); /* #0072B2 chiaro · #4DA3D9 scuro */ --mn-icona: var(--mn-icona-chiara); /* 5,19:1 sul fondo chiaro */ --mn-nome: "Affitto"; } /* --- Vendita ---------------------------------------------------------------*/ [data-categoria="vendita"] { --mn-colore: var(--pin-vendita); /* #D55E00 chiaro · #F07A26 scuro */ --mn-icona: var(--mn-icona-chiara); /* 3,87:1 sul fondo chiaro */ --mn-nome: "Vendita"; } /* --- Case Vacanza — icona scura anche in chiaro: 2,31:1 con la bianca ----- */ [data-categoria="case-vacanza"] { --mn-colore: var(--pin-vacanza); /* #56B4E9 chiaro · #7FC7F0 scuro */ --mn-icona: var(--mn-icona-scura); /* 8,10:1 — la bianca cadeva a 2,31:1 */ --mn-nome: "Case vacanza"; } /* --- Terreni --------------------------------------------------------------*/ [data-categoria="terreni"] { --mn-colore: var(--pin-terreni); /* #009E73 chiaro · #2BBB92 scuro */ --mn-icona: var(--mn-icona-chiara); /* 3,42:1 sul fondo chiaro */ --mn-nome: "Terreni"; } /* --- Servizi — icona scura anche in chiaro: 2,25:1 con la bianca ---------- */ [data-categoria="servizi"] { --mn-colore: var(--pin-servizi); /* #E69F00 chiaro · #EFB43A scuro */ --mn-icona: var(--mn-icona-scura); /* 8,30:1 — la bianca cadeva a 2,25:1 */ --mn-nome: "Servizi"; } /* --- Lavoro -----------------------------------------------------------------*/ [data-categoria="lavoro"] { --mn-colore: var(--pin-lavoro); /* #CC79A7 chiaro · #DE95BE scuro */ --mn-icona: var(--mn-icona-chiara); /* 3,06:1 sul fondo chiaro, appena sopra soglia */ --mn-nome: "Lavoro"; } /* Tema scuro: l'icona bianca cade su TUTTE E SEI (1,85–2,78:1, vedi tabella sopra) — qui vince sempre l'inchiostro, non solo sulle due del chiaro. */ :root[data-tema-eff="scuro"] [data-categoria] { --mn-icona: var(--mn-icona-scura); } /* ========================================================================== 2 · TOKEN DI FORMA — nuovi, ambientati a `mn-`, non toccano `radar.css` ========================================================================== */ .mn-lingua { /* Il pannello galleggiante vuole angoli più arrotondati di --radar-raggio-grande (18px): 24px, misurato sulla guida (guida-1440-01-iniziale.png). Token nuovo, non un valore che sostituisce quello condiviso. */ --mn-raggio-pannello: 24px; --mn-raggio-cartolina: var(--radar-raggio-grande); /* 18px, già condiviso */ --mn-vetro: color-mix(in srgb, var(--radar-superficie) 88%, transparent); } /* ========================================================================== 3 · IL SEGNAPOSTO — tondo pieno, icona bianca (o scura) dentro Dalla guida si prende la forma (cerchio pieno + icona), non la libreria (Leaflet): questo è solo il disegno del pin, il motore che lo posiziona sulla mappa resta quello che c'è (pezzo 1, `mappa.js`). ========================================================================== */ /* 🔴 UNA GRANDEZZA SOLA, misurata sul bersaglio di tocco — corretto il 13/9/2026 dopo il giro del coordinatore: qui c'erano tre taglie (26/34/44px) senza un motivo che si vedesse, ed erano anche uno sbalzo (Gabriele non li vuole). Il default è `--radar-tocco-minimo` (44px, lo stesso «cerchio da 44px stile Google Maps» già citato in `radar.css` riga ~1916 per un altro pin) — sotto quella misura il segnaposto è cliccabile ma non è toccabile col dito. L'UNICO stato che ingrandisce è `--selezionato` (52px): un solo stato, con un nome che dice cos'è — non «grande»/«piccolo» senza motivo. Va mostrato nella pagina campione **con l'etichetta**, mai mescolato in silenzio fra segnaposto normali (§4 di `campione.html`). */ .mn-segnaposto { --mn-diametro: var(--radar-tocco-minimo); /* 44px */ display: inline-flex; align-items: center; justify-content: center; width: var(--mn-diametro); height: var(--mn-diametro); border-radius: var(--radar-raggio-tondo); /* 50% */ background: var(--mn-colore); color: var(--mn-icona); border: 2px solid var(--radar-superficie); /* anello per staccarsi dalla tessera */ box-shadow: var(--radar-ombra); flex: 0 0 auto; } /* Unico stato di ingrandimento: selezionato (o sotto il puntatore) — mai più di uno alla volta, mai silenzioso. */ .mn-segnaposto--selezionato { --mn-diametro: calc(var(--radar-tocco-minimo) + 8px); /* 52px */ } .mn-segnaposto .mn-icona { width: 50%; height: 50%; } /* ========================================================================== 4 · LA PASTIGLIA DI CATEGORIA — punto colorato + icona + nome Stato attivo e non attivo. ⚠ Il verde --radar-azione NON compare qui: è riservato al solo pulsante primario (DESIGN.md §3). ========================================================================== */ .mn-pastiglia { display: inline-flex; align-items: center; gap: calc(var(--radar-passo) * .5); height: var(--radar-tocco-minimo); /* 44px, bersaglio minimo di tocco */ padding: 0 calc(var(--radar-passo) * .9); border-radius: var(--radar-raggio-pillola); /* 999px */ border: 1px solid var(--radar-bordo); background: var(--radar-superficie); color: var(--radar-testo-secondario); font: 600 var(--radar-corpo-5) / 1 var(--radar-font); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .mn-pastiglia__punto { width: 10px; height: 10px; border-radius: var(--radar-raggio-tondo); background: var(--mn-colore); flex: 0 0 auto; } .mn-pastiglia .mn-icona { width: 16px; height: 16px; color: var(--mn-colore); } .mn-pastiglia__nome { white-space: nowrap; } /* Stato attivo: fondo tinto (16%) del colore della categoria, bordo pieno, testo nel colore della categoria — mai il verde azione. */ .mn-pastiglia[aria-pressed="true"] { background: color-mix(in srgb, var(--mn-colore) 16%, var(--radar-superficie)); border-color: var(--mn-colore); color: var(--radar-testo); } .mn-pastiglia[aria-pressed="true"] .mn-pastiglia__nome { color: var(--radar-testo); } .mn-pastiglia:hover { border-color: var(--mn-colore, var(--radar-bordo)); } .mn-pastiglia:focus-visible { outline: 2px solid var(--mn-colore, var(--radar-testo)); outline-offset: 2px; } /* La riga di pastiglie: scorre su una riga sola su schermo stretto — è esattamente il difetto della guida da NON portare («Lavoro» tagliato fuori a 1440px, guida-1440-12-chip-scroll-lavoro.png): qui la riga scorre SEMPRE, dichiarato, non scoperto scrollando per caso. */ .mn-pastiglie { display: flex; gap: calc(var(--radar-passo) * .5); overflow-x: auto; scrollbar-width: thin; padding-block: 2px; /* spazio per l'anello di :focus-visible */ } /* ========================================================================== 5 · LA CARTOLINA DEL RISULTATO Dall'immagine di Gabriele (MAPPA-NUOVA.md §0): icona tonda colorata a sinistra, titolo in grassetto, riga grigia «indirizzo · tipo», prezzo con l'unità. ========================================================================== */ .mn-cartolina { display: flex; gap: var(--radar-passo); align-items: flex-start; padding: calc(var(--radar-passo) * .9); border-radius: var(--mn-raggio-cartolina, var(--radar-raggio-grande)); background: var(--radar-superficie); border: 1px solid var(--radar-bordo); text-decoration: none; color: inherit; } .mn-cartolina:hover, .mn-cartolina:focus-visible { border-color: var(--mn-colore); box-shadow: var(--radar-ombra); } .mn-cartolina:focus-visible { outline: 2px solid var(--mn-colore); outline-offset: 2px; } .mn-cartolina__icona { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radar-raggio-tondo); background: var(--mn-colore); color: var(--mn-icona); flex: 0 0 auto; } .mn-cartolina__icona .mn-icona { width: 20px; height: 20px; } /* MAPPA NUOVA, PEZZO 4 (13/9/2026) — la cartolina di un COMUNE aggregato (`radar_mappa_lista_comuni()`, quando la mappa è zoomata abbastanza indietro da contare comuni invece di schede): non è una delle sei categorie, quindi non ha un `--mn-colore` da leggere — senza questa variante l'icona sarebbe invisibile (fondo e colore che leggono una custom property assente). Tinta neutra, la stessa che il tema usa per il testo secondario. */ .mn-cartolina__icona--neutra { background: var(--radar-testo-secondario); color: var(--radar-fondo, #FFFFFF); } .mn-cartolina__corpo { min-width: 0; flex: 1 1 auto; } /* 🔴 Corretto il 13/9/2026: il titolo troncava a UNA riga con «…» — nel pannello dei risultati (largo, non le tre colonne della griglia) un titolo tagliato a metà nasconde il dato più importante della cartolina. 👉 Fino a DUE righe (`-webkit-line-clamp`, supporto ampio, non solo Chrome/Safari da anni). ⛔ NIENTE `min-height` sulle due righe. C'era, per «non far ballare le cartoline», e apriva una RIGA VUOTA sotto ogni titolo corto: nella cartolina di «Bilocale in centro, Cosenza» si vedeva un buco fra il titolo e «Cosenza · Appartamento» (cattura del 13/9, rivista dal coordinatore). E non serviva a niente: - in un elenco verticale le cartoline hanno altezze fisse una volta disegnate — più alte o più basse, ma NON ballano scorrendo: ballerebbe solo un contenuto che cambia sotto gli occhi, e qui non cambia; - in una griglia a colonne l'allineamento lo fa già la griglia: le celle di una stessa riga si allungano da sole all'altezza della più alta (`align-items: stretch`, il valore di partenza). Un buco visibile in cambio di un difetto che non esiste è uno scambio in perdita — e Gabriele gli spazi vuoti non li vuole. */ .mn-cartolina__titolo { margin: 0 0 2px 0; font: 700 var(--radar-corpo-4) / 1.3 var(--radar-font); color: var(--radar-testo); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .mn-cartolina__riga { margin: 0 0 6px 0; font: 400 var(--radar-corpo-5) / 1.3 var(--radar-font); color: var(--radar-testo-secondario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mn-cartolina__prezzo { margin: 0; font: 700 var(--radar-corpo-4) / 1 var(--radar-font); color: var(--radar-testo); } .mn-cartolina__unita { font-weight: 400; color: var(--radar-testo-secondario); } /* Categorie senza prezzo (Servizi, Lavoro): «Si contatta», stesso trattamento tipografico del prezzo — non un badge diverso, la cartolina resta la stessa forma per tutte e sei le categorie. */ .mn-cartolina__prezzo--assente { color: var(--radar-testo-secondario); font-weight: 600; } /* ========================================================================== 6 · IL PANNELLO GALLEGGIANTE Angoli molto arrotondati, fondo chiaro (vetro), ombra. Il pannello scorre al suo interno, non la pagina (§0 dell'immagine di Gabriele). ========================================================================== */ .mn-pannello { --mn-larghezza: 27.5rem; /* ~440px, sotto i ~500px dell'immagine per lasciare margine alla mappa a 1440 */ width: min(100% - 2rem, var(--mn-larghezza)); max-height: min(100% - 2rem, 44rem); display: flex; flex-direction: column; border-radius: var(--mn-raggio-pannello, 24px); background: var(--mn-vetro, var(--radar-superficie)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--radar-elevazione-3, var(--radar-ombra)); border: 1px solid var(--radar-bordo); overflow: hidden; } .mn-pannello__testa { padding: calc(var(--radar-passo) * 1.1) calc(var(--radar-passo) * 1.1) calc(var(--radar-passo) * .75); border-bottom: 1px solid var(--radar-bordo); flex: 0 0 auto; } .mn-pannello__etichetta { margin: 0 0 4px 0; font: 600 var(--radar-corpo-5) / 1 var(--radar-font); letter-spacing: .06em; text-transform: uppercase; color: var(--radar-testo-secondario); } .mn-pannello__titolo { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--radar-passo); font: 700 var(--radar-corpo-3) / 1.2 var(--radar-font); color: var(--radar-testo); } .mn-pannello__contatore { display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 2em; padding: 0 .4em; border-radius: var(--radar-raggio-pillola); background: var(--radar-superficie-alt); color: var(--radar-testo); font: 700 var(--radar-corpo-5) / 1 var(--radar-font); flex: 0 0 auto; } .mn-pannello__corpo { flex: 1 1 auto; overflow-y: auto; padding: calc(var(--radar-passo) * .75) calc(var(--radar-passo) * 1.1); display: flex; flex-direction: column; gap: calc(var(--radar-passo) * .6); } .mn-pannello__piede { flex: 0 0 auto; padding: calc(var(--radar-passo) * .6) calc(var(--radar-passo) * 1.1); border-top: 1px solid var(--radar-bordo); display: flex; align-items: center; justify-content: space-between; gap: var(--radar-passo); font: 400 var(--radar-corpo-5) / 1.3 var(--radar-font); color: var(--radar-testo-secondario); } /* «Come ordiniamo i risultati» — obbligo di legge (art. 22 c. 4-bis Cod. Cons.), MAPPA-NUOVA.md §0/§4: dentro il pannello, vicino al contatore, sempre a un clic — non solo nella striscia crediti. Il pezzo che lo collega davvero è il 4 (elenco); qui c'è solo la forma del link. */ .mn-pannello__piede a { color: var(--radar-testo-secondario); text-decoration: underline; text-underline-offset: 2px; } .mn-pannello__piede a:hover, .mn-pannello__piede a:focus-visible { color: var(--radar-testo); } /* ========================================================================== 7 · IL TASTO ROTONDO — quello dei filtri, nero nella guida Qui non è #000 della guida ma l'inchiostro del tema (--radar-testo), stessa idea, stesso peso visivo, senza importare un colore fuori paletta. 🔴 Corretto il 13/9/2026: un tasto rotondo senza icona dentro è un quadrato bianco vuoto (il segno di un'icona NON caricata, non un cerchio muto) — perché `.mn-icona` da sola non disegna niente, è solo la cornice: senza un modificatore `.mn-icona--xxx` che porti la `mask-image`, `background-color: currentColor` riempie l'intero riquadro invece di ritagliare una forma. 👉 **Ogni `.mn-tasto-rotondo` porta SEMPRE un'icona con nome**, mai un `` vuoto o con un disegno proprio scritto a mano nella pagina che lo usa: uso → icona Filtri (della guida) → `.mn-icona--cursori` (§8, qui sotto) Cambia tema → NON fa parte di questa lingua: è un'utilità della sola pagina campione (§ in fondo a `campione.html`), con la sua icona propria e SENZA la classe `.mn-icona` (che è riservata alle icone mascherate di questo foglio) — così un domani, se un pezzo vero avesse bisogno di un tasto «Cambia tema», gli si scriverebbe un'icona `.mn-icona--tema` qui, non si riuserebbe quella della pagina di prova. ========================================================================== */ .mn-tasto-rotondo { display: inline-flex; align-items: center; justify-content: center; width: var(--radar-tocco-minimo); /* 44px */ height: var(--radar-tocco-minimo); border-radius: var(--radar-raggio-tondo); background: var(--radar-testo); color: var(--radar-fondo); border: none; box-shadow: var(--radar-ombra); cursor: pointer; } .mn-tasto-rotondo .mn-icona { width: 20px; height: 20px; } .mn-tasto-rotondo:hover { background: var(--radar-testo-secondario); } .mn-tasto-rotondo:focus-visible { outline: 2px solid var(--radar-testo); outline-offset: 3px; } /* Variante piena (badge di conteggio dei filtri attivi) — riusa la pastiglia di conteggio del pannello, non un terzo disegno di badge. */ .mn-tasto-rotondo__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radar-raggio-pillola); background: var(--mn-colore, var(--radar-marchio)); color: #FFFFFF; font: 700 .7rem/18px var(--radar-font); text-align: center; border: 2px solid var(--radar-fondo); } /* ========================================================================== 8 · LE ICONE — sei delle categorie più «cursori» del tasto rotondo (§7), un solo posto `mask-image` + `background-color: var(--mn-icona)`: il colore è nel CSS, non nell'SVG — un unico simbolo serve al pin, alla pastiglia e alla cartolina, e cambia tinta da solo con la categoria e col tema. `mask-mode: alpha` è esplicito apposta: senza, alcuni browser userebbero la luminanza della sorgente e un tratto nero diventerebbe «trasparente» invece che «opaco» — misurato, non supposto (la differenza fra i due modi è esattamente il tipo di errore silenzioso che questo file vuole evitare). Forma ridisegnata nello stile della guida (linea, 24×24, tratto arrotondato) — non è un'estrazione byte per byte dal bundle React compilato (minificato, senza nomi di classe leggibili): stessa famiglia visiva (chiave, cartellino, ombrellone, germoglio, chiave inglese, valigetta), tratto ridisegnato qui. ========================================================================== */ .mn-icona { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-mode: alpha; mask-mode: alpha; flex: 0 0 auto; } /* Affitto — chiave */ .mn-icona--chiave { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M10.3%2012.7%2019%204%22/%3E%3Cpath%20d%3D%22M15.5%207.5%2018%2010%22/%3E%3Cpath%20d%3D%22M12.7%2010.3%2014.5%2012%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M10.3%2012.7%2019%204%22/%3E%3Cpath%20d%3D%22M15.5%207.5%2018%2010%22/%3E%3Cpath%20d%3D%22M12.7%2010.3%2014.5%2012%22/%3E%3C/svg%3E"); } /* Vendita — cartellino del prezzo */ .mn-icona--cartellino { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5V5a1%201%200%200%201%201-1h5.5a1%201%200%200%201%20.7.3l9.3%209.3a1%201%200%200%201%200%201.4l-6.5%206.5a1%201%200%200%201-1.4%200L3.3%2012.2a1%201%200%200%201-.3-.7z%22/%3E%3Ccircle%20cx%3D%227.7%22%20cy%3D%227.7%22%20r%3D%221.4%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5V5a1%201%200%200%201%201-1h5.5a1%201%200%200%201%20.7.3l9.3%209.3a1%201%200%200%201%200%201.4l-6.5%206.5a1%201%200%200%201-1.4%200L3.3%2012.2a1%201%200%200%201-.3-.7z%22/%3E%3Ccircle%20cx%3D%227.7%22%20cy%3D%227.7%22%20r%3D%221.4%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3C/svg%3E"); } /* Case Vacanza — ombrellone */ .mn-icona--ombrellone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v2.2%22/%3E%3Cpath%20d%3D%22M3%2012.5a9%209%200%200%201%2018%200z%22/%3E%3Cpath%20d%3D%22M12%2012.5V20a2%202%200%200%201-3.6%201.2%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v2.2%22/%3E%3Cpath%20d%3D%22M3%2012.5a9%209%200%200%201%2018%200z%22/%3E%3Cpath%20d%3D%22M12%2012.5V20a2%202%200%200%201-3.6%201.2%22/%3E%3C/svg%3E"); } /* Terreni — germoglio */ .mn-icona--germoglio { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021v-9.5%22/%3E%3Cpath%20d%3D%22M7%2020.5h10%22/%3E%3Cpath%20d%3D%22M12%2011.5C12%207%209%204.5%204.5%204.5c0%204.5%203%207%207.5%207z%22/%3E%3Cpath%20d%3D%22M12%2011.5c0-3.6%202.4-6%206-6%200%203.6-2.4%206-6%206z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021v-9.5%22/%3E%3Cpath%20d%3D%22M7%2020.5h10%22/%3E%3Cpath%20d%3D%22M12%2011.5C12%207%209%204.5%204.5%204.5c0%204.5%203%207%207.5%207z%22/%3E%3Cpath%20d%3D%22M12%2011.5c0-3.6%202.4-6%206-6%200%203.6-2.4%206-6%206z%22/%3E%3C/svg%3E"); } /* Servizi — chiave inglese */ .mn-icona--chiave-inglese { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%201%200-5.66%205.66L4%2017l3%203%205.04-5.04a4%204%200%200%200%205.66-5.66l-2.12%202.12-2.83-2.83z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%201%200-5.66%205.66L4%2017l3%203%205.04-5.04a4%204%200%200%200%205.66-5.66l-2.12%202.12-2.83-2.83z%22/%3E%3C/svg%3E"); } /* Lavoro — valigetta */ .mn-icona--valigetta { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227.5%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8.5%207.5v-2a1.5%201.5%200%200%201%201.5-1.5h4a1.5%201.5%200%200%201%201.5%201.5v2%22/%3E%3Cpath%20d%3D%22M3%2013.5h18%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227.5%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8.5%207.5v-2a1.5%201.5%200%200%201%201.5-1.5h4a1.5%201.5%200%200%201%201.5%201.5v2%22/%3E%3Cpath%20d%3D%22M3%2013.5h18%22/%3E%3C/svg%3E"); } /* Filtri — cursori (tre linee coi pomelli), l'icona del tasto rotondo della guida. Non è una delle sei categorie: è la settima, del componente §7. */ .mn-icona--cursori { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%226%22%20x2%3D%2220%22%20y2%3D%226%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%226%22%20r%3D%222%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%2212%22%20x2%3D%2220%22%20y2%3D%2212%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2212%22%20r%3D%222%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%2218%22%20x2%3D%2220%22%20y2%3D%2218%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2218%22%20r%3D%222%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%226%22%20x2%3D%2220%22%20y2%3D%226%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%226%22%20r%3D%222%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%2212%22%20x2%3D%2220%22%20y2%3D%2212%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2212%22%20r%3D%222%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%2218%22%20x2%3D%2220%22%20y2%3D%2218%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2218%22%20r%3D%222%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3C/svg%3E"); } /* La coppia categoria→icona (affitto→chiave, vendita→cartellino, case-vacanza→ombrellone, terreni→germoglio, servizi→chiave-inglese, lavoro→valigetta) si scrive nel markup con le due classi insieme (`class="mn-icona mn-icona--chiave"` dentro `[data-categoria="affitto"]`): il CSS non può scegliere UNA fra sei `mask-image` solo dall'attributo dell'antenato senza ripetere le sei immagini una seconda volta — pezzo di markup che i pezzi 1-8 replicano, non un limite di questo foglio. La pagina campione (`_prove/mappa-lingua/campione.html`) mostra la coppia già scritta, categoria per categoria. */ /* Lente — non è una delle sei categorie, è la settima icona d'uso generale (come «cursori» sopra): il campo di ricerca §9, qui sotto. Aggiunta il 13/9/2026, pezzo 2 (barra nell'eroe della home): mancava nel pezzo 0. */ .mn-icona--lente { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22/%3E%3C/svg%3E"); } /* ========================================================================== 9 · LA PASTIGLIA COME CASELLA VERA — aggiunto il 13/9/2026, pezzo 2 (barra nell'eroe della home). `.mn-pastiglia` (§4) è pensata per un bottone con `aria-pressed`: qui la riusiamo com'è — stessa forma, stesso colore, ZERO regole di §4 toccate — sopra un `` torna a essere il figlio diretto che `mappa.css` già posiziona a `grid-column:1`, 4,5rem×4,5rem — zero valori ripetuti qui. */ .mn-cartolina-popup__foto-riquadro { display: contents; } /* Su una foto di 72px la pillola e il cuore non ci stanno leggibili: restano SPENTI qui (non costruiti in un modo diverso) — la categoria resta comunque leggibile nella pillola piccola della riga sotto (`.pannello-scheda__categoria`, invariata), il cuore no: è un limite dichiarato di questo giro, non un difetto silenzioso — vedi la consegna del pezzo 1. */ .mn-cartolina-popup__etichetta, .mn-cartolina-popup__cuore { display: none; } } /* * IL TASTO VERDE — «Contatta», l'UNICO primario della cartolina. * * 🔴 Decisione (chiesta esplicitamente dal brief): SÌ, «Contatta» è il * pulsante primario — non «Indicazioni». Fino a P210-v2 (5/9/2026) il verde * stava su «Indicazioni» («l'unica azione primaria della fila», commento in * `radar.css`): su una mappa senza cartolina-vetrina aveva senso, era * l'unico invito a fare qualcosa. Con «Contatta» in scena i due non possono * restare verdi insieme (`--radar-azione` è «il SOLO pulsante primario», * mappa-nuova.css intestazione) — e fra i due è «Contatta» che converte un * visitatore in un contatto vero: è la riga che l'intero pannello «Chi * pubblica» esiste per raccogliere (`inc/fiducia.php`), «Indicazioni» è * corredo. Si demota qui, SOLO dentro `.mn-lingua`: la mappa senza questa * classe (se mai esistesse un punto che la richiama senza il resto del * pezzo 1) non cambia. */ .pannello-scheda.mn-lingua .pannello-scheda__icona-cerchio--primario { color: var(--radar-testo); background: var(--radar-superficie); border-color: var(--radar-bordo); } .pannello-scheda.mn-lingua .pannello-scheda__icona-voce:hover .pannello-scheda__icona-cerchio--primario { background: var(--radar-superficie-alt); } .mn-cartolina-popup__contatta { display: flex; align-items: center; justify-content: center; min-height: var(--radar-tocco-minimo); padding: 0 calc(var(--radar-passo) * 1.2); margin-bottom: calc(var(--radar-passo) * .5); border-radius: var(--radar-raggio-pillola); background: var(--radar-azione); color: var(--radar-azione-testo); font: 700 var(--radar-corpo-4) / 1 var(--radar-font); text-decoration: none; text-align: center; } .mn-cartolina-popup__contatta:hover, .mn-cartolina-popup__contatta:focus-visible { background: var(--radar-azione-hover); } .mn-cartolina-popup__contatta:focus-visible { outline: 2px solid var(--radar-testo); outline-offset: 2px; } /* «Come ordiniamo i risultati» dentro la cartolina — obbligo di legge a un clic anche sul singolo risultato (MAPPA-NUOVA.md §4/§8 punto 3), non solo nella striscia crediti in fondo alla mappa. Stessa `.pannello-scheda__ nota-inline` (radar.css) per la taglia del testo; qui solo il trattamento da link. */ .mn-cartolina-popup__ordiniamo { display: inline-block; color: var(--radar-testo-secondario); text-decoration: underline; text-underline-offset: 2px; } .mn-cartolina-popup__ordiniamo:hover, .mn-cartolina-popup__ordiniamo:focus-visible { color: var(--radar-testo); } /* ========================================================================== 12 · «TUTTI» — LO STATO ACCESO È DERIVATO, NON UN VALORE PROPRIO Aggiunto il 13/9/2026, pezzo 2, correzione 2 del coordinatore. La pastiglia «Tutti» (guida: prima della fila, nessun `data-categoria`, nessun `cat[]`) non ha un `checked` tutto suo: è «accesa» quando nessuna pastiglia-categoria della stessa riga lo è — «tutte le categorie» è già quello che la mappa mostra senza `cat[]` (MAPPA-NUOVA.md §5, il percorso verificato). `:not(:has(...))` lo scrive in puro CSS: nessun valore nuovo, nessuno script che tenga due stati sincronizzati — il browser rivaluta da solo a ogni casella spuntata o tolta, CON o SENZA JavaScript. ⛔ Non usa `--mn-colore` (che qui non esiste: «Tutti» non è una categoria, `var()` senza fallback su una custom property assente invaliderebbe l'intera dichiarazione) — la tinta è quella neutra del testo, non quella di un pin. ========================================================================== */ .mn-pastiglie:not(:has(.mn-pastiglia__casella:checked)) > [data-radar-tutte] { background: color-mix(in srgb, var(--radar-testo) 12%, var(--radar-superficie)); border-color: var(--radar-testo); color: var(--radar-testo); font-weight: 700; } /* ========================================================================== 13 · IL RESPIRO DOPO L'ULTIMA PASTIGLIA Aggiunto il 13/9/2026, pezzo 2, correzione del coordinatore sulla cattura `piega-375x635-chiaro.png`: la riga scorrevole può sfondare fino al bordo vero dello schermo (il pezzo che la usa decide se farla sfondare: → `cerca.css` per l'eroe della home) — ma quando si scorre fino in fondo l'ultima pastiglia non deve restare incollata a quel bordo. Il respiro è nel COMPONENTE, non nella pagina che lo sfonda: chi lo riusa (il pezzo 3, su `/mappa/`) lo eredita senza doverlo riscrivere. ========================================================================== */ .mn-pastiglie { padding-right: calc(var(--radar-passo) * 1.25); } /* ========================================================================== 14 · LA SCHEDA DELL'ANNUNCIO — pezzo 1 (struttura), 13/9/2026 Squadra RADAR-SCHEDA-P1. Componenti che mancavano alla lingua e che `single-immobile.php` usa per la struttura nuova (SCHEDA-NUOVA.md §8): la carta generica, la carta del titolo con le tessere-icona, la carta del prezzo, «Chi pubblica»/«Perché fidarti», e lo stato senza foto. ⚠ SOLO AGGIUNTE — sezioni 1-13 sopra non toccate, per lo stesso motivo scritto nella testata del file (due squadre, un foglio solo, adesso). Le icone nuove (§14.7) sono generiche — misura/struttura/documento/spunta — e non seguono la coppia 1:1 con le sei categorie di §8: qui non c'è una categoria da colorare, sono etichette di un dato (superficie, contratto…), quindi il colore resta neutro (`--radar-testo`/`--radar-testo-secondario`), mai `--mn-colore`. ========================================================================== */ /* --- 14.1 · La carta generica -------------------------------------------- Base di ogni riquadro bianco della scheda (titolo, prezzo, chi pubblica, perché fidarti): stessi token della cartolina (§5), un solo posto per "cos'è una carta" su questa pagina. */ .mn-carta { padding: calc(var(--radar-passo) * 1.1); border-radius: var(--radar-raggio-grande); background: var(--radar-superficie); border: 1px solid var(--radar-bordo); box-shadow: var(--radar-ombra); } .mn-carta + .mn-carta { margin-top: calc(var(--radar-passo) * .9); } /* --- 14.2 · La carta del titolo ------------------------------------------- Sotto la galleria: categoria, titolo, luogo, la garanzia detta piano, le tessere. Sostituisce la fascia scura «notte» che stava PRIMA della foto (⛔ vietata dal brief) — qui è una carta come le altre, sulla superficie normale della pagina. */ .mn-carta-titolo { margin-bottom: calc(var(--radar-passo) * 1.2); } .mn-carta-titolo h1 { margin: .5rem 0 .35rem; font-family: var(--font-titolo); font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-weight: 400; line-height: 1.04; letter-spacing: -.02em; color: var(--radar-testo); } /* La garanzia, detta piano — 🔴 dopo il titolo, mai prima (SCHEDA-NUOVA.md §8 punto 2). Stesso trattamento tipografico di una nota secondaria, non di un'etichetta di reparto: niente maiuscolo spaziato, niente colore d'allarme. */ .mn-occhiello-piano { margin: 0 0 calc(var(--radar-passo) * .9); font: 500 .8125rem/1.3 var(--radar-font); color: var(--radar-testo-secondario); } /* --- 14.3 · Le tessere ------------------------------------------------------- Sostituiscono, solo nella resa, i pannelli piatti di `.annuncio .dati` (annuncio.css §7): stesso `
`, stessa logica dati. 🚨 13/9/2026 — SENZA ICONA, E NON È UN PASSO INDIETRO. La prima resa aveva un'icona per tessera scelta per FAMIGLIA di campo (misura, struttura, documento: tre forme per venti campi diversi), e sulla cattura vera si è visto il difetto: bagni, piano, anno, tipologia, locali, riscaldamento, arredamento, stato — OTTO tessere diverse con la STESSA casetta. Un'icona uguale su otto tessere non distingue niente: è decorazione che finge di essere informazione, e sembra un errore («perché hanno tutte la stessa icona?») più di quanto aiuti. La guida ne disegna quattro, tutte diverse — ma lì sono quattro campi fissi (superficie, zona, accesso, pendenza) uguali su ogni terreno. Qui i campi sono fino a venti e cambiano per tipo di bene (`Radar_Campi::per_bene()`): disegnare venti icone sotto la pressione di questo giro avrebbe voluto dire indovinarne la metà. Fra un'icona ripetuta (bugia) e nessuna icona (onesto), qui vince l'onesto — resta una griglia, tessera, etichetta, valore, senza il terzo canale. Il grafo per campo, se un giorno serve davvero, è un giro suo. */ .mn-tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: 0; } /* `
…
…
` è markup valido (WHATWG, contenuto di `
`: un `
` può avvolgere UNA coppia dt/dd, e dt/dd restano SUOI figli diretti). */ .mn-tessera { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border-radius: var(--radar-raggio); background: var(--radar-superficie-alt); } .mn-tessera dt { margin: 0; font-size: var(--radar-corpo-5); color: var(--radar-testo-secondario); } .mn-tessera dd { margin: 0; font: 700 var(--radar-corpo-4)/1.2 var(--radar-font); color: var(--radar-testo); } /* --- 14.4 · La carta del prezzo -------------------------------------------- ⚠ Resta attaccata mentre si scorre: lo fa già `.fiducia` (radar.css, `position:sticky` da 60rem) sull'involucro `