/* ============================================================================
SISTEMA DI DESIGN — "SEGNALETICA"
============================================================================
Riscritto da zero. Il foglio precedente ("Cruscotto") è stato sostituito,
non modificato: questo è un sistema completo, dai token alle ventidue pagine.
----------------------------------------------------------------------------
DA DOVE VIENE LA DIREZIONE
Il mestiere che l'app esercita è l'orientamento: cartelli, mappe di
trasporto, segnavia, numeri civici. Da lì vengono tre regole, e tutto il
resto discende da queste.
1. SI LEGGE IN PIEDI, AL SOLE, CON UNA MANO.
Contrasti alti, corpi grandi, bersagli generosi. Nessun grigio chiaro su
fondo chiaro, nessuna informazione affidata al solo colore.
2. LA STRUTTURA È FATTA DI LINEE, NON DI OMBRE.
Un cartello non ha ombre morbide: ha bordi. Le ombre qui esistono solo
per gli oggetti che galleggiano davvero — navigazione, lettore audio,
avvisi — perché lì dicono una cosa vera.
3. IL COLORE È UN SEGNALE, NON UNA DECORAZIONE.
Un solo rosso, e vuol dire "questa è l'azione". Un solo oro, e vuol dire
"questo te lo sei conquistato". Le famiglie di luoghi hanno un colore
perché serve a distinguerle in una lista di cento voci.
----------------------------------------------------------------------------
IL PROBLEMA CHE HA DETERMINATO IL DISEGNO DELLA LISTA
Il catalogo ha cento luoghi e ZERO fotografie: il campo `immagine` è vuoto
su tutti. La lista precedente lasciava comunque lo spazio della foto e ci
metteva un riquadro grigio con un'icona sbiadita — cento buchi in fila.
Qui lo spazio della foto non viene più promesso. Al suo posto c'è una
tessera piena del colore della famiglia del luogo, e accanto le informazioni
che il catalogo ha già e non mostrava: zona, riconoscimento UNESCO, ingresso
libero o a pagamento, durata della visita. Più bello e più utile, senza
dipendere da fotografie che potrebbero non arrivare mai.
========================================================================== */
:root {
/* --- Carta e superfici ---------------------------------------------------
v64 — DA CARTA CALDA A LUCE FREDDA.
Fino a v63 il fondo era carta (#F2F1EC): caldo, stampato, giusto per un
sistema nato dai cartelli stradali. Ma un'app che si apre accanto a
Instagram e a Maps veniva letta come vecchia prima ancora di essere usata,
e «vecchia» è un giudizio che si dà in mezzo secondo e non si ritira.
Il meccanismo però resta ESATTAMENTE quello di prima, ed è la ragione per
cui questo è un cambio di tavolozza e non di impianto: il fondo è appena
più scuro delle schede, e quella differenza minima (1,06:1) basta a far
staccare una scheda senza ombre. Cambia la temperatura, non la regola.
Perché non il bianco pieno anche sul fondo: con fondo e scheda dello
stesso bianco, quarantacinque regole che oggi separano le superfici con un
filo dovrebbero passare a un'ombra, una per una. Sarebbe la riscrittura
che questo rilascio ha promesso di non fare. */
/* v73 — LA CARTA TORNA CALDA.
v64 aveva portato il fondo al bianco freddo per far brillare i colori
delle famiglie. Funzionava, e faceva un'app pulita: il rendering nuovo
chiede un'altra cosa — una rivista, non un pannello di controllo. Crema
per la pagina, avorio per le superfici, e una fascia più calda per le
sezioni che devono staccarsi.
Le tre misure che contano, rifatte da capo su questi tre fondi, stanno
accanto agli inchiostri qui sotto. */
--pt-paper: #F6F3ED;
--pt-paper-2: #F1ECE3;
--pt-card: #FFFDF9;
/* --- Inchiostro ----------------------------------------------------------
v64 — Contrasti misurati TRE volte, non più due: su bianco (le schede),
sul fondo pagina, e sulla superficie quieta `--pt-paper-2` (le pastiglie
spente, i fondi delle icone, i contatori). Il terzo fondo mancava, e
l'audit nuovo ci ha trovato subito un difetto vero: il contatore delle
sezioni stava a 4,21:1, sotto soglia, da quando esiste.
--pt-ink 18,7:1 · 17,6:1 · 16,0:1
--pt-ink-70 7,7:1 · 7,3:1 · 6,6:1
--pt-ink-55 5,6:1 · 5,3:1 · 4,8:1 <- passa su tutti e tre
`--pt-ink-45` e `--pt-ink-25` NON reggono come testo piccolo su nessuno
dei tre fondi: sono per icone, filetti e stati disattivati. Erano usati
come testo in tre punti — l'audit li ha trovati e sono passati a `-55`. */
--pt-ink: #18202D;
--pt-ink-70: #4A5464;
--pt-ink-55: #5C6675;
--pt-ink-45: #8B93A0;
--pt-ink-25: #C4C7CC;
/* v73 — rimisurati sui tre fondi caldi (avorio · crema · fascia):
--pt-ink 16,1:1 · 15,0:1 · 13,9:1
--pt-ink-70 7,5:1 · 7,0:1 · 6,5:1
--pt-ink-55 5,9:1 · 5,5:1 · 5,1:1 <- passa su tutti e tre
Il grigio del rendering (#667085) è più chiaro e cade a **4,23:1** sulla
fascia calda: sarebbe passato sulle prime due schermate e fallito sulla
terza. Questo è lo stesso grigio, un gradino più scuro. */
/* --- Segnale: l'azione ---------------------------------------------------
Un solo rosso in tutta l'app, e vuol dire "premi qui". v64 lo accende:
4,9:1 su bianco, e 4,9:1 per il bianco sopra — funziona in entrambi i
versi, come prima, con un po' di luce in più.
IL CORALLO CHE NON C'È. La proposta grafica mostrava un #F2542D molto più
acceso. Misurato, regge 3,45:1 con il bianco sopra: sotto la soglia per il
testo normale. Un bottone lo si legge, quindi il bottone prende #CE3A22 —
che a occhio è quasi lo stesso e sta dentro le regole. Il corallo pieno
resta disponibile per ciò che non porta testo piccolo: code di gradienti e
superfici decorative. Un colore che non si può leggere non è più brillante,
è solo più difficile. */
/* v79 — LA TERRACOTTA ACCESSIBILE.
Richiesta di Aldo, con i valori già scelti e una regola sul metodo che è
la parte più importante: «non aggiusterei il problema pagina per pagina,
metterei questi token direttamente nel sistema». È esattamente quello che
succede qui: cambiano i VALORI in questo blocco, non i nomi — rinominare
in `--voce-*` vorrebbe dire toccare migliaia di riferimenti per ottenere
la stessa cosa, e tenere i due nomi insieme sarebbe il debito delle due
testate appena pagato a v77.
IL CAMBIO CHE CONTA È L'ACCENTO: #CE3A22 → #A93F2B. Il rosso di v64 stava
appeso alla soglia (4,53:1 sulla carta, 4,46 sul fondo nuovo — cioè sotto)
e ogni rilascio doveva rimisurarlo. Questo fa **5,52:1**: per la prima
volta l'accento ha margine invece di essere un caso limite.
accento #A93F2B 5,52 sul fondo · 6,02 sulla scheda · bianco sopra 6,12
scuro #8F3424 7,06 · 7,70
grigio #5C6675 5,25 · 5,72
fondo #F6F3ED la crema del prototipo V2
E UN SECONDO ROSSO CHE NON È UN SECONDO ACCENTO. `--pt-sg-visivo`
(#C94A32) è il rosso del prototipo, che come TESTO fa 4,21 e non passa:
vive solo come RIEMPIMENTO di superfici grandi, dove quello che conta è il
bianco sopra (4,66 ✓). C'è una prova che pretende che non compaia mai come
`color:`. */
--pt-sg: #A93F2B;
--pt-sg-dark: #8F3424;
--pt-sg-visivo: #C94A32; /* solo riempimenti grandi: come testo fa 4,21 */
--pt-sg-200: #E4BDB3;
--pt-sg-tint: #FAEDE9;
/* v79 — `soft`: il fondo di un elemento SCELTO, e del blocco citazione.
Il bordo chiaro (1,37:1 sul fondo) è decorazione e non può essere l'unico
segnale di «questo è selezionato»: chi lo distingue è questo fondo più il
colore dell'accento sopra (4,54 ✓).
ATTENZIONE, misurato: su questo fondo passano solo `--pt-ink` (12,15),
`--pt-ink-70` (5,69) e `--pt-sg` (4,54). Il grigio `--pt-ink-55` fa 4,32
e NON ci va — come non ci vanno il verde, l'oro e l'avviso. */
--pt-sg-soft: #F1D9D2;
/* --- Oro: la ricompensa --------------------------------------------------
Solo passaporto, sigilli, UNESCO. Se compare dove non c'è niente da
conquistare, il passaporto smette di essere una ricompensa. L'oro pieno
non regge come testo piccolo (3,9:1): per il testo c'è `--pt-oro-testo`. */
--pt-oro: #A87718;
--pt-oro-testo: #8A6111;
--pt-oro-200: #E8D5A6;
--pt-oro-tint: #FAF2E0;
/* --- Stati ---------------------------------------------------------------
Il pericolo è molto più cupo del segnale: non deve mai somigliare a un
invito. 10,1:1 contro i 5,6:1 dell'azione. */
--pt-ok: #0E7A57;
--pt-ok-tint: #E2F4EC;
--pt-danger: #7E1D14;
--pt-danger-tint:#F7E7E5;
--pt-warn: #8A6111;
--pt-warn-tint: #FAF2E0;
/* --- Scelto: quello che è acceso ----------------------------------------
Fino a v37 tutto ciò che era selezionato — la sezione corrente, le
pastiglie del tempo, le categorie scelte, i numeri delle tappe, «Invita
amici» — era nero pieno. Funzionava, ma il nero pieno su ventinove
superfici fa un'app severa: segnalato così, «il nero mette tristezza».
Questo è il blu della maiolica siciliana, che con la terracotta
dell'azione fa la coppia che si vede sulle ceramiche di Caltagirone. Non
contende il rosso (che vuol dire «premi qui») né il verde (che vuol dire
«fatto»), ed è la tinta con il contrasto più alto fra quelle provate:
8,86:1 su bianco, 7,83:1 sulla carta. Il nero resta dov'è davvero
struttura — il lettore audio, la barra fissa, i toast.
v64 — LO STESSO BLU, ACCESO. Il #0F4C81 era il blu di una maiolica vista
in ombra: giusto sulla carta calda, cupo sul bianco freddo. Il nuovo è la
stessa tinta con la luce sopra, e regge 5,4:1 col bianco sopra.
Quello che NON cambia è il significato, ed è la ragione per cui questo
rilascio è sicuro: il rosso resta «premi qui», il blu resta «questo,
adesso». Le proposte grafiche che facevano blu l'azione invertivano la
regola su ventinove superfici — quello non è un tema, è un'altra app. */
/* v73 — UN ACCENTO SOLO.
Il blu se n'è andato, e non è una tinta cambiata: è una regola cambiata.
Fino a v72 il colore distingueva i due mestieri — rosso «premi qui», blu
«questo, adesso». Da qui li distingue il PESO:
azione → terracotta PIENA, testo bianco
scelto → contorno, tinta chiara, e un segno (spunta o filetto)
Il segno non è un vezzo: senza il colore che separava i due mestieri,
resta lui a dire «questo è acceso» a chi i colori non li distingue. È la
regola di sempre — «il colore da solo non basta» — che diventa
obbligatoria invece che prudente.
Misure: bianco su terracotta 4,94:1 · terracotta su avorio 4,86:1 ·
terracotta scura sulla tinta 6,49:1. */
/* FASE B — «scelto» e «azione» sono LO STESSO rosso per regola (v73, qui
sopra: un accento solo, e i due mestieri li distingue il peso). Fino a
v100 erano quattro valori copiati: identici, ma liberi di divergere il
giorno che qualcuno avesse ritoccato uno dei due. Adesso la regola e'
scritta nel valore. NON e' lo stesso caso di `--pt-warn` qui sopra, che
coincide con l'oro per caso e non per regola: legarli creerebbe una
dipendenza che nessuno ha deciso. */
--pt-scelto: var(--pt-sg);
--pt-scelto-dark: var(--pt-sg-dark);
--pt-scelto-200: var(--pt-sg-200);
--pt-scelto-tint: var(--pt-sg-tint);
/* --- Famiglie di luoghi --------------------------------------------------
Sei colori per tredici categorie: raggruppate, non una tinta a testa.
Tredici colori non sono un codice, sono un arcobaleno — nessuno li impara.
Sei si riconoscono dopo un paio di schermate.
v64 — Le stesse sei famiglie, accese. Sono la fonte di luce principale
dell'app: cento luoghi senza fotografia, e la tessera colorata è tutto
quello che c'è al posto dell'immagine. Portare il fondo al bianco freddo
senza accendere anche queste avrebbe fatto una lista sbiadita.
Ognuna è misurata **con il bianco sopra**, perché è così che vengono
usate — tessera piena, icona e testo bianchi. Tutte sopra 4,5:1:
patrimonio 5,51 · sacro 4,63 · cultura 4,86 · strada 4,59 · natura 4,95 ·
città 5,43. */
--pt-fam-patrimonio: #6C4BE8; /* arabo-normanno, palazzi */
--pt-fam-sacro: #D0348A; /* chiese e oratori */
--pt-fam-cultura: #0E7C93; /* musei, teatri */
--pt-fam-strada: #C25417; /* mercati, gusto, street art */
--pt-fam-natura: #0F8055; /* parchi, natura e mare */
--pt-fam-citta: #1B62E0; /* piazze, memoria civile, dintorni */
--pt-fam: var(--pt-fam-citta); /* ripiego se la categoria è ignota */
/* --- Filetti ------------------------------------------------------------- */
--pt-line: #D7D1C8;
--pt-line-2: #CFC9BE;
/* --- Il buio -------------------------------------------------------------
FASE B — TRE NERI CHE NON AVEVANO UN NOME.
Erano scritti a mano diciotto volte, e ognuno faceva un mestiere suo e
sempre quello:
--pt-targa la lastra scura dei luoghi senza fotografia, la testata
di una scheda, il tema scuro — sette regole, un colore.
--pt-su-targa quello che ci si scrive sopra (11,4:1).
--pt-velo il velo sulle fotografie che fa leggere il testo sopra:
solo i canali, perche' si usa sempre con una trasparenza
diversa — `rgb(var(--pt-velo) / 0.58)`.
--pt-notte l'ombra degli oggetti che stanno sopra una mappa e il
fondo del visore: piu' freddo dell'inchiostro, ed e'
giusto — sta su tessere grigie, non sull'avorio.
Sono diventati gettoni con i loro valori di sempre: nessun pixel si e'
spostato, e da adesso cambiarli e' una riga. */
--pt-targa: #1E242E;
--pt-su-targa: #D7DBE2;
--pt-velo: 11 15 22;
--pt-notte: 17 22 25;
/* --- Ombre --------------------------------------------------------------
v64 — Le ombre restano poche e restano vere, ma da qui in avanti sono
FREDDE: un'ombra grigio-caldo sopra un fondo azzurrino si vede come una
macchia gialla. È lo stesso errore del testo terziario, spostato.
`--pt-shadow-card` è nuova ed è l'unica aggiunta: appena percettibile,
serve a far galleggiare le schede vere — quelle che si toccano e portano
altrove — adesso che il fondo è più chiaro e il filo da solo pesa meno. */
/* v73 — restano fredde, e diventano l'INCHIOSTRO. Il quasi-nero di prima
(13,18,32) era più freddo del testo che stava sopra: sulla crema faceva
un alone grigio-azzurro che non apparteneva a niente. Adesso l'ombra è
esattamente `--pt-ink`, più larga e più bassa di opacità — la stessa
tinta della pagina, solo diluita. Un'ombra non è un colore nuovo: è meno
luce sullo stesso colore. */
--pt-shadow-lift: 0 8px 28px rgba(24, 32, 45, 0.13);
--pt-shadow-pop: 0 2px 6px rgba(24, 32, 45, 0.06), 0 14px 32px rgba(24, 32, 45, 0.10);
--pt-shadow-card: 0 1px 2px rgba(24, 32, 45, 0.04), 0 8px 22px rgba(24, 32, 45, 0.06);
/* --- Raggi ---------------------------------------------------------------
Squadrato è segnaletica, tondo si tocca. La regola si impara in tre
secondi senza che nessuno la spieghi.
v64 li allarga di due o quattro pixel ciascuno. Non è una moda: è la
conseguenza dell'aver tolto il calore al fondo. Un angolo stretto su carta
avorio legge come stampa; lo stesso angolo su bianco freddo legge come
modulo da compilare. */
--pt-r-xs: 8px;
--pt-r-sm: 12px;
--pt-r: 16px;
--pt-r-lg: 20px;
--pt-r-xl: 26px;
--pt-r-pill: 999px;
/* --- Quanto spazio si prende la barra in basso ---------------------------
v69 — la barra non galleggia piu': sta attaccata al fondo. La sua altezza
serve in sette punti (il respiro della pagina, il lettore audio, il
banner, «anche qui intorno», la barra del costruttore, il toast e la barra
stessa), e finora era il numero 84 scritto a mano in quattro di quelli.
Un numero magico ripetuto e' un numero che prima o poi diverge: qui si
dichiara una volta, e chi sta sopra la barra dice `--pt-sopra-nav` invece
di indovinare. */
--pt-nav-h: 68px;
/* v84 — DUE MISURE CHE LE SCRIVE IL BROWSER, non il foglio.
`--pt-strumenti-h` e' l'altezza vera del blocco appiccicato degli
strumenti, `--pt-mappa-top` la distanza fra il bordo alto dello schermo e
il bordo alto della mappa. Dipendono dalla lingua, dalla larghezza e dal
pannello delle categorie aperto o chiuso: `scopri.html` le misura e le
riaggiorna. I valori qui sono quelli di un telefono da 390, e servono a
due cose — che la regola sia completa anche prima che il JavaScript parta,
e che un token usato sia un token dichiarato. */
--pt-strumenti-h: 177px;
--pt-mappa-top: 250px;
/* FASE H — l'altezza del comando appiccicato sopra la barra in basso (il
tour, il luogo, l'evento), per `scroll-padding-bottom`: la scrive
`app.js` (`misuraFondo`) dove quel comando c'è; altrove vale zero. */
--pt-fondo-h: 0px;
--pt-sopra-nav: calc(var(--pt-nav-h) + env(safe-area-inset-bottom) + 10px);
/* v64 — LA FORMA DEI CONTENITORI DELLE ICONE, IN UN POSTO SOLO.
La tessera di un luogo, l'icona di una riga del profilo, il disco di un
sigillo, il numero di una tappa: erano sei regole con quattro raggi
diversi, decisi uno alla volta. Adesso sono tondi, e sono tondi da qui.
Il giorno in cui si vorranno quadrati si cambia questa riga — non sei. */
--pt-r-icona: 50%;
/* v25 — L'ALTEZZA DELL'INTESTAZIONE APPICCICATA.
Chi deve appiccicarsi SOTTO di lei ha bisogno di sapere quanto è alta, e
non può indovinarlo: dipende dal contenuto, dalla lingua e dalla safe-area
del dispositivo. Qui c'è il valore di partenza — quello vero lo misura
`misuraIntestazione()` in app.js e lo riscrive, anche a ogni rotazione.
Senza questa riga il valore esisterebbe solo a JavaScript acceso. */
--pt-header-h: 71px;
/* --- Caratteri -----------------------------------------------------------
Una sola famiglia, Archivo, con la LARGHEZZA come secondo asse: è così che
lavorano i sistemi di segnaletica — non due caratteri diversi, ma lo stesso
disegno in larghezze diverse. Un solo file da scaricare, e in una PWA che
deve funzionare offline conta. */
--pt-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* v73 — I TITOLI PRENDONO LE GRAZIE, E NON COSTANO UN BYTE.
Il rendering nuovo è editoriale: i titoli con le grazie sono metà di
quell'effetto. Ma un secondo carattere da scaricare sarebbe 30-60 KB su
ogni pagina, e v57 ne aveva tolti 761 per usarne 23.
Georgia sta su ogni Mac, ogni Windows e ogni iPhone; su Android non c'è e
cade su Noto Serif, che è disegnata per lo stesso mestiere. Il ripiego non
è un compromesso: è la stessa idea con un altro disegno. */
--pt-font-titolo: Georgia, "Iowan Old Style", "Times New Roman", "Noto Serif", serif;
--pt-wide: 112%;
/* FASE B — LA SCALA E' SCRITTA UNA VOLTA SOLA, QUI.
Fino a v100 questi quattro gettoni erano dichiarati DUE volte: qui con i
valori di prima di v93 (15px/1,55 e compagnia), e novemila righe piu'
sotto con quelli veri. Vinceva la seconda, la prima non faceva niente — e
chi apriva il foglio dall'inizio leggeva un corpo del testo che l'app non
usava. v93 aveva scritto la regola giusta, «si cambiano i token, non le
regole»: l'aveva applicata ridichiarandoli invece che cambiandoli. Qui ci
sono i valori in vigore, e la seconda dichiarazione non c'e' piu'. */
--pt-t-body: 400 16px/1.6 var(--pt-font);
--pt-t-small: 400 14px/1.5 var(--pt-font);
--pt-t-strong: 700 15px/1.35 var(--pt-font);
--pt-t-label: 800 11px/1.2 var(--pt-font);
/* --- Ritmo: scala di quattro --------------------------------------------- */
--pt-1: 4px; --pt-2: 8px; --pt-3: 12px; --pt-4: 16px;
--pt-5: 24px; --pt-6: 32px; --pt-7: 48px; --pt-8: 64px;
/* --- Griglia -------------------------------------------------------------
v75 — LA COLONNA SI ALLARGA, E NASCE UNA SECONDA MISURA.
Fino a v74 tutta l'app viveva dentro 760px anche su uno schermo da 1280:
una colonna sola, uguale per il catalogo e per un modulo. Il prototipo
chiede una rivista, e una rivista su schermo largo usa lo schermo — il
catalogo con 101 luoghi ne mostrava venti in una colonna stretta con
mezzo schermo vuoto ai lati.
Ma «largo» non vale per tutto, e qui sta la sola cosa che aggiungo al
prototipo: **un testo lungo su 1180px non si legge.** Oltre i settanta
caratteri per riga l'occhio perde il capo della riga successiva — è la
misura che la tipografia conosce da cinque secoli, non un'opinione.
Quindi due misure, e ognuna fa un mestiere:
--pt-col 1180px quanto è larga la PAGINA: griglie, file, liste
--pt-lettura 68ch quanto è larga una RIGA DI TESTO: prose, testi
dei luoghi, descrizioni
Dove c'è da guardare si usa la prima, dove c'è da leggere la seconda. */
/* FASE B — 1240 e non 1180: era ridichiarata da v93 a fondo foglio («il
brief chiede 1200–1280 e 1180 stava sotto»). Il valore vero sta qui. */
--pt-col: 1240px;
--pt-lettura: 68ch;
--pt-gutter: 16px;
--pt-align: var(--pt-gutter);
/* --- Movimento: corto ---------------------------------------------------- */
--pt-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
--pt-fast: 140ms;
--pt-med: 240ms;
/* --- Ponte verso Bootstrap ----------------------------------------------
Bootstrap è caricato prima di questo foglio e alcune sue classi sono usate
nei template (dropdown, badge, form-control, alert). Riportarle sui token
qui evita di inseguirle una per una più avanti.
FASE B — IL PONTE NON ERA SUI TOKEN. Il commento qui sopra diceva la cosa
giusta e le righe sotto facevano il contrario: nove colori scritti a
mano, e sei su nove erano ancora quelli della tavolozza fredda di
v64 — un fondo #F6F8FC azzurrino, un inchiostro #0D1220, un filo #E3E9F3
— che v73 aveva tolto dall'app e nessuno aveva tolto da qui.
Misurato prima di cambiarli, dipingendoli di magenta, verde e blu uno per
uno: su 48 fotografie (20 pagine da anonimi e 4 con l'account, telefono e
desktop) NON compare nessuno dei sei. Quindi nessun pixel cambia. Ma il
giorno che un componente di Bootstrap li usasse — un avviso, un menu a
tendina, un campo con l'errore — avrebbe mostrato la tavolozza sbagliata.
Adesso mostra quella giusta.
Le terne `-rgb` restano numeri perche' Bootstrap le usa dentro `rgba()`:
una prova controlla che coincidano col gettone da cui vengono. */
--bs-primary: var(--pt-sg);
--bs-primary-rgb: 169, 63, 43;
--bs-secondary: var(--pt-ink-70);
--bs-secondary-rgb: 74, 84, 100;
--bs-body-font-family: var(--pt-font);
--bs-body-color: var(--pt-ink);
--bs-body-bg: var(--pt-paper);
--bs-border-color: var(--pt-line);
--bs-border-radius: var(--pt-r-sm);
--bs-link-color: var(--pt-sg);
--bs-link-color-rgb: 169, 63, 43;
--bs-link-hover-color: var(--pt-sg-dark);
--bs-emphasis-color: var(--pt-ink);
--bs-secondary-color: var(--pt-ink-70);
}
/* ============================================================================
1. BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font: var(--pt-t-body);
color: var(--pt-ink);
background: var(--pt-paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Spazio per la navigazione fissa più il pulsante della guida. */
padding-bottom: 136px;
}
/* v73 — I TITOLI GRANDI HANNO LE GRAZIE, I TITOLINI NO.
La divisione non è estetica, è funzionale: un titolo con le grazie a 34 px
si legge come una rivista, lo stesso disegno a 15 px in una lista di cento
voci si legge peggio del bastone. Quindi h1 e h2 — che in quest'app sono
sempre titoli di pagina o di sezione — prendono Georgia; h3 e h4, che sono
nomi di luogo dentro le schede, restano Archivo.
Il peso scende da 800 a 400: una grazia in nero pieno è un manifesto, non un
titolo. La larghezza (`font-stretch`) resta solo dove c'è Archivo, che è
l'unico dei due ad averla. */
h1, h2 {
margin: 0;
font-family: var(--pt-font-titolo);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--pt-ink);
text-wrap: balance;
}
h3, h4 {
margin: 0;
font-family: var(--pt-font);
font-stretch: var(--pt-wide);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.14;
color: var(--pt-ink);
text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; }
a { color: var(--pt-sg); text-decoration: none; }
img, svg { max-width: 100%; }
button { font-family: var(--pt-font); }
/* I numeri non devono ballare da una riga all'altra in una lista. */
.pt-section-count, .pt-stat-value, .pt-nav-count, .pt-passport-pct,
.pt-distance-badge, .pt-reviews-score-num, .pt-riprendi-conta,
.pt-lampo-badge-time, .pt-gruppo-count, .pt-passport-count,
.pt-bacheca-giorno, .pt-tempo, .pt-community-copie { font-variant-numeric: tabular-nums; }
/* Messa a fuoco visibile ovunque, sempre: chi naviga da tastiera non deve mai
chiedersi dove si trova. */
:focus-visible {
outline: 3px solid var(--pt-sg);
outline-offset: 2px;
border-radius: var(--pt-r-xs);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.pt-skip {
position: absolute;
left: -9999px;
z-index: 100;
padding: 12px 18px;
background: var(--pt-ink);
color: #fff;
font: var(--pt-t-strong);
border-radius: 0 0 var(--pt-r-sm) 0;
}
.pt-skip:focus { left: 0; top: 0; color: #fff; }
/* Le poche utilità Bootstrap usate nei template. */
.text-muted, .text-secondary { color: var(--pt-ink-55) !important; }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--pt-2); }
.mt-3 { margin-top: var(--pt-3); }
.mt-4 { margin-top: var(--pt-4); }
.py-2 { padding-block: var(--pt-2); }
.d-flex { display: flex; }
/* ============================================================================
2. TESTATA E NAVIGAZIONE
============================================================================
Testata e navigazione stanno nello STESSO contenitore appiccicato in alto.
Erano due elementi posizionati in modo indipendente e allineati con numeri
fissi: poiché l'altezza reale della testata dipende dal contenuto e dalla
safe-area del dispositivo, quei numeri erano sbagliati su metà dei telefoni
e i due blocchi si sovrapponevano. Impilandoli non può più succedere.
La navigazione resta IN BASSO sul telefono — è la fascia che il pollice
raggiunge — e va IN ALTO sul desktop, dove il pollice non esiste.
========================================================================== */
.pt-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--pt-paper);
}
.pt-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pt-3);
padding: 14px var(--pt-gutter) 12px;
border-bottom: 1px solid var(--pt-line);
}
/* v100 — era `.pt-topbar h1`. Il titolo della barra non è più un `
`
(vedi il commento in `base/base.html`): è un `
` con questa classe, e la
regola è la stessa riga per riga perché la resa non doveva cambiare. */
.pt-topbar .pt-topbar-titolo {
/* Le cinque righe che arrivavano dalla regola `h1, h2` e che un `
` non
eredita: senza, il titolo della barra cambierebbe carattere e colore. La
resa deve restare identica al pixel — è una correzione di semantica, non
di grafica. */
font-family: var(--pt-font-titolo);
font-weight: 400;
/* -0.035em e 0.98, non -0.02em e 1.1: da `
` questo titolo prendeva la
scala editoriale (`h1, .pt-testata-titolo`), non la regola `h1, h2`.
Con gli altri valori la barra cresceva di quattro pixel in altezza e di
tre in larghezza su ogni pagina — misurato, non dedotto. */
letter-spacing: -0.035em;
line-height: 0.98;
color: var(--pt-ink);
font-size: 17px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* v73 — il marchio non si taglia. Il titolo della barra si taglia con i
puntini perché su una scheda luogo può essere lungo quanto vuole; il nome
del prodotto no: «Voce…» è la prima cosa che si legge aprendo l'app, e un
nome tagliato è un nome sbagliato. Qui il titolo si stringe intorno al
marchio e il sottotitolo, se non ci sta, sparisce da solo. */
.pt-topbar .pt-topbar-titolo:has(.pt-marchio) {
display: flex;
align-items: baseline;
gap: 8px;
overflow: visible;
text-overflow: clip;
}
.pt-topbar .pt-topbar-titolo:has(.pt-marchio) .pt-marchio { flex: 0 0 auto; }
.pt-marchio-sotto {
min-width: 0;
overflow: hidden;
}
.pt-topbar-right {
display: flex;
align-items: center;
gap: var(--pt-2);
flex: 0 0 auto;
}
.pt-account-btn {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--pt-line-2);
border-radius: 50%;
background: var(--pt-card);
color: var(--pt-ink-70);
font-size: 19px;
cursor: pointer;
transition: border-color var(--pt-fast) var(--pt-ease), color var(--pt-fast) var(--pt-ease);
}
.pt-lang-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 38px;
padding: 0 13px;
border: 1px solid var(--pt-line-2);
border-radius: var(--pt-r-pill);
background: var(--pt-card);
color: var(--pt-ink);
font: var(--pt-t-label);
font-size: 12px;
letter-spacing: 0.06em;
cursor: pointer;
transition: border-color var(--pt-fast) var(--pt-ease);
}
.pt-lang-btn i { font-size: 17px; color: var(--pt-ink-70); }
/* v91 — IL BOTTONE DELLA RICERCA.
Tondo come quello dell'account, perché gli sta accanto e sono la stessa
famiglia: comandi della barra, non azioni della pagina. Nessun colore
pieno — un rosso quassù competerebbe con il comando della pagina, e il
secondo rosso ha già un mestiere da v85.
Sul telefono è un'icona sola: la barra a 390 px è piena (44 di casa, 138 di
titolo, 168 di comandi) e una parola in più la farebbe andare a capo. Da
800 px in su lo spazio in quella riga avanza — misurato, ne restano oltre
ottocento pixel vuoti — e allora il bottone dice anche che cos'è. È lo
stesso bottone: cambia la forma, non il componente. */
.pt-cerca-btn {
display: grid;
place-items: center;
/* 44 e non 38 come il tondo dell'account: quello si allarga con un'area
sensibile invisibile, questo è un collegamento e l'audit mobile misura il
riquadro vero. Misurato: `a.pt-cerca-btn 38×44` fra i bersagli piccoli. */
width: 44px;
height: 44px;
border: 1px solid var(--pt-line-2);
border-radius: 50%;
background: var(--pt-card);
color: var(--pt-ink-70);
font-size: 19px;
text-decoration: none;
transition: border-color var(--pt-fast) var(--pt-ease), color var(--pt-fast) var(--pt-ease);
}
.pt-cerca-btn-parola { display: none; }
/* Sulla pagina della ricerca il bottone dice di esserci già. Il bordo e
l'inchiostro della segnaletica, non il pieno: un tondo rosso pieno quassù
sarebbe il comando più forte della pagina, e il comando della pagina è
un'altra cosa. */
.pt-cerca-btn[aria-current="page"] {
border-color: var(--pt-sg);
color: var(--pt-sg);
}
@media (min-width: 800px) {
.pt-cerca-btn {
grid-auto-flow: column;
gap: 6px;
width: auto;
height: 38px;
padding: 0 14px;
border-radius: var(--pt-r-pill);
font-size: 17px;
}
.pt-cerca-btn-parola {
display: inline;
color: var(--pt-ink);
font: var(--pt-t-label);
font-size: 12px;
letter-spacing: 0.06em;
}
}
/* --- La barra delle sezioni ---------------------------------------------- */
/* --- LA BARRA IN BASSO ------------------------------------------------------
v69 — era una tavoletta che galleggiava a dieci pixel dal fondo, con bordo,
angoli tondi e un'ombra sollevata: sotto le restava una striscia di pagina
che scorreva, e la barra sembrava un oggetto appoggiato sopra l'app invece
di un bordo dell'app. Adesso e' ancorata al fondo e larga quanto lo schermo,
con un filo sopra e niente ombra.
IL FONDO E' OPACO, E NON E' UNA RINUNCIA. La versione col vetro smerigliato
(`backdrop-filter`) e' piu' bella su una pagina bianca e diventa illeggibile
su «Scopri» in mappa, dove sotto la barra scorrono le tessere colorate di
Leaflet: il contrasto di un fondo trasparente vale quanto vale cio' che ci
passa sotto, cioe' non si puo' garantire. Qui l'eleganza la fanno
l'ancoraggio, il respiro e il segno dell'attivo — tutte cose misurabili. */
.pt-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
display: flex;
gap: 0;
padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
background: var(--pt-card);
border: 0;
border-top: 1px solid var(--pt-line);
border-radius: 0;
box-shadow: none;
}
.pt-bottom-nav a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 3px 2px 2px;
border-radius: var(--pt-r-sm);
font: var(--pt-t-label);
font-size: 10.5px;
letter-spacing: 0.02em;
color: var(--pt-ink-55);
text-align: center;
transition: color var(--pt-fast) var(--pt-ease);
}
/* IL SEGNO DELL'ATTIVO STA SULL'ICONA, NON SU TUTTA LA VOCE.
Prima l'intera voce diventava un rettangolo blu pieno: pesava quanto un
comando primario — piu' del rosso-segnale che genera un tour — per dire una
cosa che non e' un'azione ma una posizione («sei qui»). La pastiglia chiara
sotto l'icona lo dice con la stessa chiarezza e un quinto dell'inchiostro,
ed e' il posto dove l'occhio guarda gia'. Misurato: blu su tinta 4,66:1,
sopra il 3:1 che serve a un segno, e l'etichetta blu su bianco 5,43:1. */
.pt-bottom-nav a i {
display: grid;
place-items: center;
/* v70 — con cinque voci su uno schermo da 320 la colonna e' larga 62 px e
una pastiglia da 58 la riempiva da bordo a bordo: due pastiglie vicine
sembravano toccarsi. `min()` la fa stringere insieme alla colonna e la
lascia com'era ovunque ci sia posto. */
width: min(58px, 90%);
height: 30px;
border-radius: var(--pt-r-pill);
font-size: 22px;
line-height: 1;
transition: background-color var(--pt-fast) var(--pt-ease);
}
.pt-bottom-nav a.active { background: none; color: var(--pt-scelto); font-weight: 800; }
.pt-bottom-nav a.active i { background: var(--pt-scelto-tint); }
main { display: block; padding-top: var(--pt-2); }
/* --- Menu a tendina (account e lingua) ------------------------------------ */
.dropdown-menu {
padding: 6px;
border: 1px solid var(--pt-line-2);
border-radius: var(--pt-r);
background: var(--pt-card);
box-shadow: var(--pt-shadow-pop);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 11px;
border-radius: var(--pt-r-sm);
font: var(--pt-t-strong);
font-weight: 600;
color: var(--pt-ink);
}
.dropdown-item i { font-size: 18px; color: var(--pt-ink-55); }
/* v67 — era `--pt-paper`, il fondo della PAGINA, dipinto sopra un menu bianco:
dopo v64 i due colori distano 1,06:1, cioe' il passaggio del dito o del
cursore non si vede. Un evidenziato invisibile e' un evidenziato che non
c'e'. `--pt-paper-2` e' la superficie quieta, che esiste per questo. */
.dropdown-item:focus { background: var(--pt-paper-2); color: var(--pt-ink); }
.dropdown-item-text { padding: 8px 11px; font: var(--pt-t-small); color: var(--pt-ink-55); }
.dropdown-divider { margin: 5px 4px; border-top: 1px solid var(--pt-line); }
.pt-account-email { font-weight: 700; color: var(--pt-ink); word-break: break-all; }
.pt-logout-item { width: 100%; border: 0; background: none; text-align: start; cursor: pointer; }
.pt-lang-menu { min-width: 208px; max-height: 62vh; overflow-y: auto; }
/* v67 — DA `pt-lang-*` A `pt-menu-*`.
Il titolino e la voce di un menu a tendina erano nati per le lingue, e il
menu delle citta' li aveva presi in prestito: `.pt-lang-voce` vestiva
«Palermo» e «Roma». Non si vedeva — le due tendine si somigliano — ma era la
stessa cosa chiamata con il nome di un'altra, e il giorno in cui si ritocca
l'elenco delle lingue cambierebbe anche quello delle citta'.
E' l'errore che v17 aveva gia' nominato: raggruppare per somiglianza di NOME
invece che di RUOLO. Il ruolo qui e' «voce di un menu»: l'etichetta a
sinistra, il segno a destra, e quando e' quella corrente si riempie di blu.
Le lingue tengono solo cio' che e' loro: `.pt-lang-spenta`, per una lingua
che sta arrivando e non si puo' ancora scegliere. */
.pt-menu-titolo {
display: block;
padding: 8px 11px 5px;
font: var(--pt-t-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pt-ink-55);
}
.pt-menu-voce { justify-content: space-between; font-size: 15px; font-weight: 600; }
.pt-menu-voce.active { background: var(--pt-scelto); color: #fff; }
.pt-menu-voce.active i { color: #fff; }
/* Una lingua non ancora accesa è testo, non un comando: niente sfondo al
passaggio, niente cursore a mano, niente collegamento. */
.pt-lang-spenta { color: var(--pt-ink-45); cursor: default; pointer-events: none; }
/* ============================================================================
3. PRIMITIVI
============================================================================
I pezzi che compaiono su tutte e ventidue le pagine. Ogni pagina più avanti
usa questi e aggiunge il minimo indispensabile: se un blocco di pagina
ridefinisce un colore o un raggio, è un errore, non una scelta.
========================================================================== */
/* --- Testata di sezione ---------------------------------------------------
Il conteggio è un dato, quindi è squadrato e in inchiostro pieno: non è un
bottone e non deve sembrarlo. */
/* v77 — IL CONTEGGIO STA ACCANTO AL TITOLO, NON ALL'ALTRO CAPO DELLA PAGINA.
Era `space-between`, che sul telefono lasciava 207 px fra la parola e il suo
numero e su schermo largo — misurato sul passaporto a 1280 — ne lasciava
**mille**. «Chiese e oratori» a sinistra e «1/20» a un metro di distanza non
si leggono insieme: sono due informazioni, e invece sono una sola.
Chi ha davvero diritto al bordo destro e' il collegamento «Vedi tutti», che
e' un'uscita dalla sezione e non un dato. FASE D: l'unico che stava in una
`.pt-section-head` era quello del centro Tour, che adesso ha la testa dei
rail di Scopri (`.pt-sezione-testa`, dove il bordo destro glielo dà lo
`space-between` fra un titolo e un'uscita, non fra un'etichetta e il suo
numero). La regola che glielo dava qui se n'è andata con lui. */
.pt-section-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--pt-3);
margin: var(--pt-6) var(--pt-align) var(--pt-3);
}
.pt-section-head h2,
.pt-section-head h3 { font-size: 20px; letter-spacing: -0.04em; }
/* FASE C — la riga dei risultati diventa un `
` (è il titolo della sezione,
non il nome di una scheda) e prende le grazie di tutti gli `
`: il corpo
resta quello della riga di servizio, lo stesso della testata compatta che le
sta sopra, e la spaziatura è quella delle grazie, non dell'Archivo largo.
Figlio DIRETTO, e non è pignoleria: la pagina degli eventi ha un `
`
dentro una `.pt-section-head.pt-sezione-testa`, un livello più giù, e la
prima stesura di questa regola lo spostava di sei pixel — l'ha visto il
confronto al pixel, su una pagina che questa fase non doveva toccare. */
.pt-section-head > h2 { line-height: 1.2; letter-spacing: -0.01em; }
/* FASE F — IL NUMERINO ACCANTO A UN TITOLO È UN DATO, NON UN'AZIONE.
Era `--pt-scelto` pieno con il testo bianco, cioè il disegno dell'azione, che
nel sistema è uno per schermata: sul passaporto ce n'erano quattordici,
sulla ricerca tre accanto al comando «Cerca». Non era una scelta: il commento
di `.pt-gruppo-count` lo dice — «i dati sono pastiglie squadrate in
inchiostro pieno» — ed è stato scritto quando lo scelto aveva un colore suo;
da v73 lo scelto è il rosso dell'azione, e i numeri sono diventati rossi con
lui. Adesso hanno il fondo quieto della carta calda e l'inchiostro al 70%,
come il conto dentro una linguetta spenta (`.pt-sezione-conta`). La forma
resta quella di prima: squadrata, lo stesso corpo, lo stesso posto. */
.pt-section-count {
flex: 0 0 auto;
padding: 4px 9px;
border-radius: var(--pt-r-xs);
background: var(--pt-paper-2);
color: var(--pt-ink-70);
font: var(--pt-t-label);
font-size: 11px;
letter-spacing: 0.04em;
}
/* v73 — L'OCCHIELLO PRENDE LA TERRACOTTA SCURA, E NON È UN VEZZO.
Misurato dall'audit sulla pagina vera: `--pt-sg` su `--pt-paper-2` — la
fascia calda di «vicino a te» — fa 4,20:1 con un testo da 10,5px in
grassetto, sotto soglia. Sul bianco passava (4,86) e sulla carta appena
(4,53): è il difetto che si vede solo sul terzo fondo, esattamente come il
contatore delle sezioni a v64. La versione scura regge su tutti e tre —
6,80 · 6,35 · 5,88 — e a occhio è lo stesso colore. */
.pt-occhio {
display: block;
font: var(--pt-t-label);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pt-sg-dark);
}
/* --- Pulsanti -------------------------------------------------------------
Uno solo pieno di segnale per schermata. Se ce ne sono due, l'utente si
ferma a decidere quale sia quello giusto. */
.pt-btn, .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 18px;
border: 1px solid transparent;
border-radius: var(--pt-r-sm);
font: var(--pt-t-strong);
font-weight: 800;
cursor: pointer;
transition: background-color var(--pt-fast) var(--pt-ease),
border-color var(--pt-fast) var(--pt-ease),
transform var(--pt-fast) var(--pt-ease);
}
.pt-btn:active, .btn:active { transform: scale(0.985); }
.pt-btn i, .btn i { font-size: 18px; }
.pt-btn-primario, .btn.btn-primary {
background: var(--pt-sg);
border-color: var(--pt-sg);
color: #fff;
}
.pt-btn-ink { background: var(--pt-scelto); border-color: var(--pt-scelto); color: #fff; }
.pt-btn-secondario, .btn.btn-outline-secondary {
background: var(--pt-card);
border-color: var(--pt-line-2);
color: var(--pt-ink);
}
/* Il distruttivo non è mai pieno: un bottone pieno è un invito, e cancellare
non si invita. Contorno cupo, testo cupo, nessuna tentazione. */
.pt-btn-danger {
background: var(--pt-card);
border-color: var(--pt-danger);
color: var(--pt-danger);
}
.pt-btn-blocco { width: 100%; }
/* --- Pastiglie di filtro --------------------------------------------------
Tonde perché si toccano. Attive in inchiostro pieno, non nel colore del
segnale: il segnale è dell'azione, e un filtro non è un'azione. */
/* --- Il costruttore: una categoria alla volta --- v27 ---------------------
Quattordici sezioni aperte insieme facevano 9.364 px e ventidue comandi
nella prima schermata. Le caselle restano nel modulo anche da sezione
chiusa: `` non toglie i figli dal documento, quindi le selezioni si
inviano e il conteggio non cambia. */
.pt-builder-section > summary {
display: flex;
align-items: center;
gap: var(--pt-2);
min-height: 44px;
cursor: pointer;
list-style: none;
}
.pt-builder-section > summary::-webkit-details-marker { display: none; }
.pt-builder-section > summary h4 { flex: 1; margin: 0; }
.pt-builder-section > summary::after {
content: "\ea5f"; /* ti-chevron-down */
content: "\ea5f" / ""; /* FASE H — la stessa icona, senza nome: il lettore di schermo non la legge */
font-family: "tabler-icons";
font-size: 17px;
color: var(--pt-ink-45);
transition: transform var(--pt-fast) var(--pt-ease);
}
.pt-builder-section[open] > summary::after { transform: rotate(180deg); }
.pt-builder-conta {
padding: 2px 9px;
border-radius: var(--pt-r-pill);
background: var(--pt-paper-2);
font: var(--pt-t-small);
font-weight: 800;
color: var(--pt-ink-55);
}
/* ===========================================================================
TOUR LAMPO E COSTRUTTORE — la rifinitura --- v30
Segnalato: «le trovo grossolane, poco accattivanti ed eleganti».
Misurando, tre difetti tipografici e due strutturali, gli stessi in
entrambe le schermate:
1. LA GERARCHIA ERA ROVESCIATA. Gli `h4` delle sezioni non avevano una
dimensione dichiarata e prendevano quella di serie del browser: 21,57 px
contro i 20 del titolo di pagina. Le domande gridavano più del titolo, e
nel costruttore quattordici nomi di categoria erano quattordici manifesti.
2. UN PESO SOLO PER TUTTO. Titolo, sezioni, voci: tutti a 800. Quando tutto
è grassetto, niente è grassetto — e non resta nessun modo di dire che una
cosa conta più di un'altra.
3. LE VOCI GALLEGGIAVANO. Nessun contenitore, nessuna linea: elementi
appoggiati sul fondo pagina, senza una struttura che li tenesse.
4. LE PASTIGLIE DELLE CATEGORIE ANDAVANO A CAPO A LARGHEZZE DIVERSE,
producendo un mosaico frastagliato: una riga con una voce lunga, poi due
corte, poi una lunga. Adesso è la stessa griglia a due colonne di
«Scopri», che è anche una coerenza in più fra due schermate che fanno
cose parenti.
5. LA BARRA FISSA COPRIVA IL CONTENUTO. Su entrambe nascondeva una o due
righe: il corpo non riservava spazio per lei.
La scala: occhiello 10,5/800 spaziato per le sezioni — quello che l'eroe
della home usa già — nome di voce 15/700, titolo di pagina 20/800. Tre
livelli distinguibili invece di uno solo ripetuto.
=========================================================================== */
/* --- L'occhiello di sezione, condiviso dalle due schermate --- */
.pt-lampo-section > h4,
.pt-lampo-personalizza > summary h4,
.pt-builder-section > summary h4 {
font: var(--pt-t-label);
font-stretch: normal;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pt-ink-55);
}
.pt-lampo-section > h4 {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: var(--pt-3);
}
.pt-lampo-section > h4 i { font-size: 14px; color: var(--pt-ink-45); }
/* --- Le sezioni del lampo diventano schede --- */
.pt-lampo-section {
margin: var(--pt-3) var(--pt-align);
padding: var(--pt-4);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
background: var(--pt-card);
}
.pt-lampo-section:first-of-type { margin-top: var(--pt-4); }
/* --- Le pastiglie del tempo: una riga sola, larghezze uguali --- */
.pt-lampo-chips {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--pt-2);
margin-top: 0;
}
/* v98 — sei durate, non piu' quattro. A quattro colonne le ultime due
restavano sole in una seconda riga monca; a tre stanno in due righe
piene, e da 900px in su in una riga sola — che e' la figura giusta,
perche' i tempi sono una SCALA e una scala si legge in fila. */
@media (min-width: 520px) { .pt-lampo-chips { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .pt-lampo-chips { grid-template-columns: repeat(6, 1fr); } }
/* --- Le categorie: la griglia di «Scopri», non un mosaico --- */
.pt-lampo-cats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--pt-2);
margin-top: 0;
}
@media (min-width: 700px) { .pt-lampo-cats { grid-template-columns: repeat(3, 1fr); } }
.pt-lampo-cat > span {
display: flex;
align-items: center;
gap: 7px;
min-height: 46px;
padding: 0 var(--pt-3);
font: var(--pt-t-small);
font-weight: 700;
line-height: 1.25;
}
.pt-lampo-cat > span i { flex: 0 0 auto; font-size: 16px; color: var(--pt-ink-45); }
.pt-lampo-cat input:checked + span i,
.pt-lampo-cat.active > span i { color: currentColor; }
/* --- Il menu di sistema, vestito come gli altri comandi --- */
.pt-lampo-select {
width: 100%;
min-height: 44px;
padding: 0 34px 0 var(--pt-3);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r-sm);
background: var(--pt-card);
color: var(--pt-ink);
font: var(--pt-t-strong);
font-weight: 600;
appearance: none;
-webkit-appearance: none;
/* La freccia disegnata da noi: quella di sistema era l'unico pezzo di
interfaccia del browser in una pagina interamente disegnata. */
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385827a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px;
}
.pt-lampo-select:disabled { opacity: 0.45; }
/* v30 — La parola sopra il menu: dice che cosa si sta scegliendo. Si spegne
insieme al menu quando la riga non è quella selezionata, così le due parti
della stessa scelta restano una cosa sola. */
.pt-lampo-radio-etichetta {
display: block;
margin-bottom: 6px;
font: var(--pt-t-small);
font-weight: 600;
color: var(--pt-ink-55);
}
/* FASE H — la parola resta accesa, si spegne solo il menu. Al 45% faceva 1,93:1
sul bianco — e la si legge proprio quando la riga NON è scelta, per
decidere se sceglierla. Il menu spento è un comando inattivo, esente dalla
soglia; la parola è il nome di un pallino attivo, e non lo è. */
/* Con l'etichetta sopra il menu la riga è alta due piani: il pallino, centrato,
finiva in mezzo al nulla fra i due. Sale accanto alla parola che sceglie. */
.pt-lampo-radio:has(.pt-lampo-radio-etichetta) { align-items: flex-start; }
.pt-lampo-radio:has(.pt-lampo-radio-etichetta) .pt-lampo-radio-dot { margin-top: 1px; }
/* --- FASE D: «Personalizza il giro» ----------------------------------------
La terza sezione del giro lampo è un ``: la stessa scheda delle
altre due, e la riga che la apre è la sua testata — l'occhiello, la frase
che dice che cosa c'è dentro, e la freccia. Chiusa porta a destra il conto
di quello che ci hai scelto, nel tinto dello scelto: una scelta dentro una
sezione chiusa deve restare visibile da fuori. */
.pt-lampo-personalizza > summary {
display: flex;
align-items: center;
gap: var(--pt-3);
min-height: 44px;
cursor: pointer;
list-style: none;
}
.pt-lampo-personalizza > summary::-webkit-details-marker { display: none; }
.pt-lampo-personalizza > summary::after {
content: "\ea5f"; /* ti-chevron-down */
content: "\ea5f" / ""; /* FASE H — la stessa icona, senza nome: il lettore di schermo non la legge */
flex: 0 0 auto;
margin-left: auto;
font-family: "tabler-icons";
font-size: 17px;
color: var(--pt-ink-45);
transition: transform var(--pt-fast) var(--pt-ease);
}
.pt-lampo-personalizza[open] > summary::after { transform: rotate(180deg); }
.pt-lampo-personalizza[open] > summary { margin-bottom: var(--pt-3); }
.pt-lampo-personalizza-testo { display: grid; gap: 5px; min-width: 0; }
.pt-lampo-personalizza > summary h4 { display: flex; align-items: center; gap: 7px; margin: 0; }
.pt-lampo-personalizza > summary h4 i { font-size: 14px; color: var(--pt-ink-45); }
.pt-lampo-personalizza-testo small { font: var(--pt-t-small); color: var(--pt-ink-55); }
.pt-lampo-personalizza-conta {
flex: 0 0 auto;
padding: 3px 9px;
border-radius: var(--pt-r-pill);
background: var(--pt-scelto-tint);
color: var(--pt-scelto);
font: var(--pt-t-small);
font-weight: 700;
white-space: nowrap;
}
/* --- Il costruttore: un elenco, non quattordici manifesti --- */
.pt-builder-section {
margin: 0 var(--pt-align);
border-bottom: 1px solid var(--pt-line);
}
.pt-builder-section:last-of-type { border-bottom: 0; }
.pt-builder-section > summary {
min-height: 52px;
padding: var(--pt-2) 0;
}
.pt-builder-section > summary h4 {
display: flex;
align-items: center;
gap: 9px;
font: var(--pt-t-strong);
font-size: 15px;
font-weight: 700;
font-stretch: normal;
letter-spacing: -0.01em;
text-transform: none;
color: var(--pt-ink);
}
.pt-builder-section > summary h4 i { font-size: 18px; color: var(--pt-ink-45); }
.pt-builder-section[open] > summary h4 i { color: var(--pt-sg); }
/* v99 — QUI C'ERANO 180 PIXEL DI VUOTO IN FONDO A OGNI PAGINA CON LA BARRA,
e una SECONDA regola `.pt-builder-bar` che ne rifaceva il `padding`.
I 180 px servivano a non far restare l'ultima voce dell'elenco sotto la
barra che galleggiava: adesso non galleggia, e lo spazio riservato a
qualcosa che non c'è più sarebbe una schermata mezza vuota da scorrere in
fondo a tre pagine.
La regola doppia era peggio: `padding: var(--pt-3)` qui e
`padding: var(--pt-3) var(--pt-4)` alla sezione 26. Vinceva la seconda, la
prima non faceva niente — e una prova che cercasse «la regola della barra»
trovava questa, cioè quella sbagliata. È successo davvero, scrivendo le
prove di questo rilascio. Adesso la regola è una sola. */
.pt-builder-bar .pt-conta-inline { font: var(--pt-t-small); color: rgb(255 255 255 / 0.7); }
/* --- SCOPRI: due sezioni e le categorie in griglia --- v29 -----------------
Le categorie erano una riga che scorre di lato: misurata su uno schermo da
390 px, larga 2413 px con DUE categorie visibili su quattordici. Per
trovarne una bisognava trascinare alla cieca per sei schermate.
Adesso un pannello che si apre e le mostra tutte, in due colonne. Da chiuso
dice quale filtro e' attivo. */
.pt-sezioni {
display: flex;
gap: var(--pt-2);
margin-bottom: var(--pt-3);
}
.pt-sezione-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
flex: 1;
min-height: 44px;
padding: 0 var(--pt-3);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r-sm);
background: var(--pt-card);
color: var(--pt-ink-55);
font: var(--pt-t-strong);
font-size: 14px;
text-decoration: none;
}
.pt-sezione-btn.active {
border-color: var(--pt-scelto);
background: var(--pt-scelto);
color: #fff;
}
.pt-sezione-btn i { font-size: 17px; }
/* v70 — IL NUMERO SULLA SEZIONE ACCESA.
Era bianco su una velatura bianca al 22% sopra il blu: 3,62:1, sotto la
soglia di 4,5 che serve a un testo. E' la stessa trappola che v64 aveva
trovato altrove — una velatura non e' un colore, e' una promessa che vale
quanto il fondo su cui cade. Qui la pastiglia si riempie e il numero prende
il blu: 5,43:1, ed e' anche piu' leggibile da lontano. */
.pt-sezione-conta {
padding: 1px 7px;
border-radius: var(--pt-r-pill);
background: #fff;
color: var(--pt-scelto);
font-size: 12px;
}
.pt-sezione-btn:not(.active) .pt-sezione-conta {
background: var(--pt-paper-2);
color: var(--pt-ink-55);
}
.pt-cat-pannello { margin-top: var(--pt-2); }
.pt-cat-pannello > summary {
display: flex;
align-items: center;
gap: var(--pt-2);
min-height: 44px;
padding: 0 var(--pt-3);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r-sm);
background: var(--pt-card);
font: var(--pt-t-strong);
font-size: 14px;
cursor: pointer;
list-style: none;
}
.pt-cat-pannello > summary::-webkit-details-marker { display: none; }
.pt-cat-pannello > summary::after {
content: "\ea5f"; /* ti-chevron-down */
content: "\ea5f" / ""; /* FASE H — la stessa icona, senza nome: il lettore di schermo non la legge */
margin-left: auto;
font-family: "tabler-icons";
font-size: 17px;
color: var(--pt-ink-45);
transition: transform var(--pt-fast) var(--pt-ease);
}
.pt-cat-pannello[open] > summary::after { transform: rotate(180deg); }
.pt-cat-pannello-stato { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-cat-griglia {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--pt-2);
margin-top: var(--pt-2);
}
.pt-cat-voce {
display: flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 0 var(--pt-3);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r-sm);
background: var(--pt-card);
color: var(--pt-ink);
font: var(--pt-t-small);
font-weight: 700;
text-decoration: none;
line-height: 1.25;
}
.pt-cat-voce.active { border-color: var(--pt-scelto); background: var(--pt-scelto); color: #fff; }
.pt-cat-voce i { flex: 0 0 auto; font-size: 17px; }
/* Su schermo largo lo spazio c'e': tre colonne invece di due. */
@media (min-width: 700px) { .pt-cat-griglia { grid-template-columns: repeat(3, 1fr); } }
.pt-eventi-elenco { display: grid; gap: var(--pt-3); margin: var(--pt-4) var(--pt-align); }
/* --- Il viaggio di gruppo in un tocco --- v28 ------------------------------
Prima l'invito era un modulo di 627 px dentro una sezione chiusa a 1132 px
dall'alto: quattro pastiglie e un numero da decidere prima che succedesse
qualcosa. Adesso e' un invito con un comando, e le impostazioni stanno
dietro una riga che si apre — dove servono, cioe' dopo. */
.pt-gruppo-invito {
margin: var(--pt-4) var(--pt-align);
padding: var(--pt-4);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
background: var(--pt-card);
}
.pt-gruppo-invito-testa {
display: flex;
align-items: flex-start;
gap: var(--pt-3);
margin-bottom: var(--pt-4);
}
.pt-gruppo-invito-testa > i { font-size: 22px; color: var(--pt-sg); flex: 0 0 auto; }
.pt-gruppo-invito-testa strong { display: block; font: var(--pt-t-strong); font-size: 16px; }
.pt-gruppo-invito-testa small { display: block; margin-top: 2px; font: var(--pt-t-small); color: var(--pt-ink-55); }
/* Le impostazioni: una riga che si apre, non un modulo aperto. */
.pt-gruppo-invito .pt-gruppo-attiva {
margin: var(--pt-4) 0 0;
padding: var(--pt-3) 0 0;
border: 0;
border-top: 1px solid var(--pt-line);
border-radius: 0;
background: none;
}
.pt-gruppo-invito .pt-gruppo-attiva-head {
min-height: 44px;
font: var(--pt-t-small);
color: var(--pt-ink-55);
}
.pt-gruppo-invito .pt-gruppo-attiva-head strong { font-weight: 700; }
/* --- «Sei stato invitato»: la decisione prima del resto --- v28 --- */
.pt-gruppo-join-occhio { display: block; margin-bottom: var(--pt-1); color: var(--pt-sg); }
/* --- I ponti dalla scheda di un luogo --- v27 --- */
.pt-poi-ponti { display: grid; gap: var(--pt-2); margin-bottom: var(--pt-3); }
.pt-poi-collegati { display: grid; gap: var(--pt-2); margin: 0 var(--pt-align) var(--pt-4); }
.pt-preferiti-tour { width: calc(100% - var(--pt-gutter) * 2); margin: var(--pt-4) var(--pt-align) var(--pt-2); }
/* --- TU: le cose della persona --- v26 -------------------------------------
Quattro righe, la stessa forma delle schede di navigazione dei tour: sono la
stessa cosa — un elenco di posti dove andare — e non c'e' ragione perche' si
vedano diverse. Il numero accanto al nome e' quello che invita a entrare:
una riga che dice "12 luoghi" e' un invito, una che non dice niente e' un
indirizzo. */
.pt-tu-elenco { display: grid; gap: var(--pt-3); margin: var(--pt-4) var(--pt-align); }
/* v77 — Il contenitore delle schede dei giri salvati. Sul telefono non fa
niente: le schede hanno già i loro margini e stanno in colonna. Esiste
perché su schermo largo ci sia qualcosa da mettere in due colonne che non
contenga anche il comando «crea un tour» e la porta della ricerca. */
.pt-tour-lista { display: grid; }
.pt-tu-riga {
display: flex;
align-items: center;
gap: var(--pt-3);
padding: var(--pt-4);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
background: var(--pt-card);
color: var(--pt-ink);
text-decoration: none;
}
.pt-tu-riga > div:nth-child(2) { flex: 1; min-width: 0; }
.pt-tu-riga h3 { margin: 0; font: var(--pt-t-strong); font-size: 16px; }
.pt-tu-riga p { margin: 2px 0 0; font: var(--pt-t-small); color: var(--pt-ink-55); }
.pt-tu-riga > .ti-chevron-right { color: var(--pt-ink-45); font-size: 18px; }
/* Da anonimo le stesse quattro righe restano, spente: dicono che cosa si
guadagna, il che e' piu' onesto e piu' convincente di una frase. */
.pt-tu-riga.is-spenta { opacity: 0.55; }
.pt-tu-accedi { width: calc(100% - var(--pt-gutter) * 2); margin: var(--pt-5) var(--pt-align); }
.pt-tu-account {
margin: var(--pt-6) var(--pt-align) var(--pt-4);
padding-top: var(--pt-4);
border-top: 1px solid var(--pt-line);
}
.pt-tu-email {
display: flex; align-items: center; gap: var(--pt-2);
margin: 0 0 var(--pt-3);
font: var(--pt-t-small); color: var(--pt-ink-55);
}
/* --- SCOPRI: due viste della stessa cosa --- v26 ---------------------------
Elenco e mappa non sono due sezioni: sono due modi di guardare lo stesso
contenuto. L'interruttore sta accanto alla ricerca, dentro il blocco che si
appiccica, cosi' resta a portata mentre si scorre — e porta con se' filtro e
ricerca, perche' cambiare vista non deve far ricominciare da capo chi aveva
gia' ristretto il campo. */
.pt-scopri-riga {
display: flex;
align-items: center;
gap: var(--pt-2);
}
.pt-scopri-riga .pt-search { flex: 1; min-width: 0; margin: 0; }
/* v65 — L'INTERRUTTORE DI VISTA NON C'È PIÙ.
Le sue due voci sono diventate due delle tre pastiglie di `.pt-tre-viste`
(sezione 27): elenco e mappa non erano un *modo* di guardare la stessa cosa
accanto a una scelta di *che cosa* guardare — erano due posti dove andare,
come gli eventi. Tenerli in due controlli diversi obbligava a capire la
differenza prima di poter usare la pagina.
Le regole se ne vanno con lui invece di restare orfane: una classe senza
markup non dà errore, si limita a occupare il foglio finché qualcuno la
ricopia credendo che serva ancora. */
/* Gli eventi in cima all'elenco: una striscia, non una sezione. */
.pt-section-head-mini { margin-bottom: var(--pt-1); }
.pt-eventi-striscia { display: grid; gap: var(--pt-2); margin-bottom: var(--pt-5); }
/* --- Gli strumenti dell'elenco, sempre a portata --- v25 -------------------
Ricerca e filtri erano gia' subito sopra le schede, ma su una pagina che
comincia con l'eroe "subito sopra" voleva dire 708 px dall'alto: per usarli
bisognava scorrere una schermata intera, e per riusarli tornare su. Su un
elenco di centouno luoghi e' l'unico modo di arrivare a quel che si cerca.
`top` e' l'altezza reale dell'intestazione, che e' anch'essa appiccicata:
senza, il blocco si fermerebbe SOTTO di lei e resterebbe invisibile. Lo
z-index sta sotto quello dell'intestazione (30) e sopra le schede.
FASE C — IL MARGINE LATERALE STA NEL CONTENITORE, NON NEI FIGLI.
La fascia è a tutta larghezza di proposito: quando si appiccica, il fondo
carta deve coprire l'elenco che le scorre sotto da bordo a bordo. Ma il
margine laterale non l'aveva nessuno — né la fascia né i suoi tre figli — e
i comandi arrivavano al bordo dello schermo. Misurato a 390: le tre
pastiglie, la ricerca e il pannello delle categorie da x=0 a x=390, contro il
titolo della pagina a 16; su desktop a 20 contro 36. Su Scopri, sulla mappa
e sul catalogo: dieci comandi, e nessun'altra pagina dell'app ne ha uno
(lo dice `S08` della baseline, che guarda tutte e venti).
Il padding e non il margine: così il fondo resta largo quanto lo schermo e
il contenuto comincia dove comincia il resto della pagina. */
.pt-lista-strumenti {
position: sticky;
top: var(--pt-header-h);
z-index: 20;
padding: var(--pt-2) var(--pt-align);
background: var(--pt-paper);
}
.pt-chip-row-wrap { position: relative; }
.pt-chip-row {
display: flex;
gap: var(--pt-2);
padding: var(--pt-1) var(--pt-align) var(--pt-2);
overflow-x: auto;
scrollbar-width: none;
}
.pt-chip-row::-webkit-scrollbar { display: none; }
/* v30 — La fila di scelte rapide scorre di lato, ma l'ultima voce visibile
veniva tagliata netta dal bordo: sembrava un errore di impaginazione, non
un invito a scorrere. La sfumatura dice che sotto continua. Sparisce da
sola quando si arriva in fondo alla fila. */
/* v66 — DA CLASSE DI QUELLA FILA A COMPORTAMENTO DI QUALUNQUE FILA.
La sfumatura si chiedeva con `.pt-chip-row-sfuma`, cioè con il nome del
componente che l'aveva inventata. La fila delle categorie della home (v65)
scorre allo stesso modo e il taglio netto sul bordo c'era di nuovo, identico:
ho ripetuto in un posto nuovo un difetto che v30 aveva già corretto in un
altro. Adesso si chiede con `data-sfuma`, che descrive quello che fa e non
dove è nato, e la logica sta in `app.js` invece che dentro un template. */
[data-sfuma] {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
[data-sfuma]:not([data-scorre="si"]) {
-webkit-mask-image: none;
mask-image: none;
}
.pt-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
border: 1px solid var(--pt-line-2);
border-radius: var(--pt-r-pill);
background: var(--pt-card);
color: var(--pt-ink-70);
font: var(--pt-t-strong);
font-size: 13.5px;
white-space: nowrap;
transition: all var(--pt-fast) var(--pt-ease);
}
.pt-chip i { font-size: 16px; }
.pt-chip.active { background: var(--pt-scelto); border-color: var(--pt-scelto); color: #fff; }
.pt-chip-spento { color: var(--pt-ink-55); border-style: dashed; cursor: default; } /* v64 — era -45: 3,58:1 */
/* --- Etichette passive: squadrate, sono targhette ------------------------- */
.pt-badge-cat, .badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
border-radius: var(--pt-r-xs);
background: var(--pt-paper-2);
color: var(--pt-ink-70);
font: var(--pt-t-label);
letter-spacing: 0.11em;
text-transform: uppercase;
}
.pt-badge-unesco {
background: var(--pt-oro-tint);
border: 1px solid var(--pt-oro-200);
color: var(--pt-oro-testo);
}
.pt-badge-libero { background: var(--pt-ok-tint); color: var(--pt-ok); }
/* --- Dati in riga ---------------------------------------------------------
Zona, durata, ingresso. Sempre con icona: il colore da solo non è
un'informazione per chi non lo distingue. */
.pt-fatti {
display: flex;
flex-wrap: wrap;
gap: 4px 13px;
font: var(--pt-t-label);
font-size: 11px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--pt-ink-55);
}
.pt-fatti > span { display: inline-flex; align-items: center; gap: 5px; }
.pt-fatti i { font-size: 14px; }
.pt-fatti .is-oro { color: var(--pt-oro-testo); }
.pt-fatti .is-ok { color: var(--pt-ok); }
/* --- Schede e righe -------------------------------------------------------
Contenitore bianco con un filo di bordo, niente ombra: la scheda sta sulla
carta, non sopra di essa. */
.pt-card, .pt-itin-card, .pt-tour-card, .pt-evento-card, .pt-community-card,
.pt-bacheca-card, .pt-gruppo-card, .pt-proposta-card, .pt-map-card {
display: block;
margin: 0 var(--pt-align) var(--pt-2);
padding: var(--pt-4);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
background: var(--pt-card);
color: var(--pt-ink);
transition: border-color var(--pt-fast) var(--pt-ease);
}
/* Riga con freccia: una destinazione, non un contenuto. */
.pt-altro-riga {
display: flex;
align-items: center;
gap: var(--pt-3);
margin: 0 var(--pt-align) var(--pt-2);
padding: 14px var(--pt-4);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
background: var(--pt-card);
color: var(--pt-ink);
font: var(--pt-t-strong);
transition: border-color var(--pt-fast) var(--pt-ease);
}
.pt-altro-riga > i:first-child { flex: 0 0 auto; font-size: 20px; color: var(--pt-ink-70); }
.pt-altro-riga span { flex: 1; min-width: 0; }
.pt-altro-riga small { display: block; font: var(--pt-t-small); font-size: 12.5px; color: var(--pt-ink-55); }
.pt-altro-riga .ti-chevron-right { margin-left: auto; flex: 0 0 auto; font-size: 18px; color: var(--pt-ink-45); }
/* --- Campi ---------------------------------------------------------------- */
.pt-search { margin: 0 var(--pt-align) var(--pt-2); }
/* v32 — `.pt-campo > input` entra in questo elenco perché i moduli di allauth
li costruisce allauth: i suoi campi arrivano senza la classe, e ricordarsi
di aggiungerla a ognuno è esattamente il genere di promessa che non regge un
aggiornamento della libreria. Dentro un campo, un controllo si veste da solo. */
.pt-search input, .form-control, .pt-campo-input, .pt-propose-input, .pt-propose-textarea,
.pt-campo > input:not([type="checkbox"]):not([type="radio"]),
.pt-campo > select, .pt-campo > textarea,
.pt-publish-input, .pt-publish-textarea, .pt-review-textarea, .pt-uscita-input,
/* v30 — `select.pt-lampo-select` stava anche qui, e questa riga viene dopo:
la scorciatoia `background:` azzerava la freccia disegnata più su, e il menu
restava l'unico comando della pagina senza segno che si apre. Il componente
si veste già da solo, non ha bisogno di essere anche in questo elenco. */
.pt-endpoint-field select, input[type="datetime-local"] {
width: 100%;
padding: 13px 15px;
border: 1px solid var(--pt-line-2);
border-radius: var(--pt-r-sm);
background: var(--pt-card);
color: var(--pt-ink);
font: var(--pt-t-body);
transition: border-color var(--pt-fast) var(--pt-ease), box-shadow var(--pt-fast) var(--pt-ease);
}
.pt-search input::placeholder, .form-control::placeholder, .pt-campo-input::placeholder,
.pt-propose-input::placeholder, .pt-propose-textarea::placeholder { color: var(--pt-ink-45); }
.pt-search input:focus, .form-control:focus, .pt-campo-input:focus, .pt-propose-input:focus,
.pt-propose-textarea:focus, .pt-publish-input:focus, .pt-publish-textarea:focus,
.pt-review-textarea:focus, .pt-uscita-input:focus {
border-color: var(--pt-ink);
outline: none;
box-shadow: 0 0 0 3px var(--pt-sg-200);
}
.pt-propose-label, .pt-publish-label, .pt-uscita-label, .pt-review-form-label,
.form-label, .pt-etichetta {
display: block;
margin-bottom: 6px;
font: var(--pt-t-label);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--pt-ink-55);
}
.pt-propose-hint, .pt-publish-nota, .pt-review-form-sub, .pt-nota,
.pt-propose-vicini-nota, .pt-tour-salva-nota, .pt-tour-avvia-nota,
.pt-uscita-programma-sub, .pt-gruppo-privacy, .pt-accesso-nota {
font: var(--pt-t-small);
font-size: 12.5px;
color: var(--pt-ink-55);
}
/* --- Azioni in riga (vicino a te, preferiti) ------------------------------ */
.pt-action-row {
display: flex;
flex-wrap: wrap;
gap: var(--pt-2);
padding: var(--pt-1) var(--pt-align) var(--pt-3);
}
.pt-action-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 14px;
border: 1px solid var(--pt-line-2);
border-radius: var(--pt-r-pill);
background: var(--pt-card);
color: var(--pt-ink-70);
font: var(--pt-t-strong);
font-size: 13.5px;
cursor: pointer;
transition: all var(--pt-fast) var(--pt-ease);
}
.pt-action-btn i { font-size: 16px; }
.pt-action-btn.active { background: var(--pt-scelto); border-color: var(--pt-scelto); color: #fff; }
.pt-action-btn.loading { opacity: 0.55; pointer-events: none; }
/* --- Avvisi --------------------------------------------------------------- */
.pt-flash-wrap { display: grid; gap: var(--pt-2); margin: var(--pt-3) var(--pt-align) 0; }
.pt-flash, .alert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px 15px;
border: 1px solid var(--pt-line-2);
border-radius: var(--pt-r-sm);
background: var(--pt-card);
font: var(--pt-t-small);
color: var(--pt-ink);
}
.pt-flash i, .alert i { flex: 0 0 auto; font-size: 18px; }
.pt-flash.is-ok { border-color: var(--pt-ok); background: var(--pt-ok-tint); color: var(--pt-ok); }
.pt-flash.is-warn { border-color: var(--pt-oro-200); background: var(--pt-warn-tint); color: var(--pt-warn); }
.pt-flash.is-danger, .alert-danger {
border-color: var(--pt-danger); background: var(--pt-danger-tint); color: var(--pt-danger);
}
/* --- Toast ---------------------------------------------------------------- */
#pt-toast {
position: fixed;
left: 50%;
/* Sopra la barra, e con la stessa misura di tutto il resto: era 98, cioe' un
numero suo che non seguiva nessuno. */
bottom: calc(var(--pt-sopra-nav) + var(--pt-3));
z-index: 60;
max-width: calc(100vw - 40px);
padding: 12px 18px;
border-radius: var(--pt-r-pill);
background: var(--pt-ink);
color: #fff;
font: var(--pt-t-strong);
text-align: center;
box-shadow: var(--pt-shadow-lift);
opacity: 0;
pointer-events: none;
transform: translate(-50%, 14px);
transition: opacity var(--pt-med) var(--pt-ease), transform var(--pt-med) var(--pt-ease);
}
#pt-toast.pt-toast-visible { opacity: 1; transform: translate(-50%, 0); }
#pt-toast.pt-toast-warning { background: var(--pt-danger); }
#pt-toast.pt-toast-badge { background: var(--pt-oro); color: #fff; font-weight: 800; }
/* --- Stato vuoto ---------------------------------------------------------- */
.pt-vuoto, .pt-edit-vuoto, .pt-passport-empty, .pt-reviews-empty, .pt-bacheca-vuota {
margin: var(--pt-4) var(--pt-align);
padding: var(--pt-6) var(--pt-4);
border: 1px dashed var(--pt-line-2);
border-radius: var(--pt-r);
text-align: center;
color: var(--pt-ink-55);
font: var(--pt-t-small);
}
.pt-vuoto i { display: block; margin-bottom: 10px; font-size: 30px; color: var(--pt-ink-25); }
/* ============================================================================
4. SCHEDA LUOGO
============================================================================
Il pezzo più importante dell'app: compare in lista cento volte di fila, su
esplora, preferiti e guida.
La tessera colorata NON è un ripiego per la fotografia mancante: è la
fotografia che non arriverà. Il campo `immagine` è vuoto su tutti i luoghi
del catalogo, quindi promettere quello spazio e riempirlo di grigio era il
difetto più visibile della lista. Un colore pieno con l'icona della famiglia
è leggibile a distanza, si riconosce scorrendo, e dice qualcosa di vero.
========================================================================== */
.pt-list { display: grid; gap: var(--pt-2); }
.pt-poi-card {
display: flex;
align-items: flex-start;
gap: var(--pt-3);
margin: 0 var(--pt-align);
padding: var(--pt-3);
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
background: var(--pt-card);
color: var(--pt-ink);
transition: border-color var(--pt-fast) var(--pt-ease);
}
.pt-poi-tessera {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: var(--pt-r-icona);
background: var(--pt-fam);
background-size: cover;
background-position: center;
color: #fff;
font-size: 25px;
}
.pt-poi-info { flex: 1; min-width: 0; }
.pt-poi-riga1 {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 5px;
}
/* Il nome della categoria prende il colore della famiglia: è l'unico posto in
cui il colore porta l'informazione anche in forma di testo, così chi non
distingue le tinte non perde niente. */
.pt-poi-cat {
font: var(--pt-t-label);
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--pt-fam);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pt-poi-riga1 .pt-badge-unesco { flex: 0 0 auto; padding: 2px 6px; font-size: 9.5px; }
.pt-poi-riga1 .pt-fav-star { margin-left: auto; flex: 0 0 auto; }
.pt-poi-card h3 {
font-size: 17px;
font-stretch: var(--pt-wide);
letter-spacing: -0.033em;
line-height: 1.15;
}
.pt-poi-breve {
margin-top: 4px;
font: var(--pt-t-small);
font-size: 13px;
color: var(--pt-ink-70);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pt-poi-card .pt-fatti { margin-top: 9px; }
/* --- Le sei famiglie -----------------------------------------------------
Tredici categorie, sei colori. Tredici tinte non sono un codice, sono un
arcobaleno: nessuno le impara. Il raggruppamento si legge dopo due
schermate — patrimonio, sacro, cultura, strada, natura, città. */
[data-cat="arabo_normanno"], [data-cat="palazzi"],
[data-cat="roma_antica"] { --pt-fam: var(--pt-fam-patrimonio); }
[data-cat="chiese_oratori"] { --pt-fam: var(--pt-fam-sacro); }
[data-cat="musei"], [data-cat="teatri"] { --pt-fam: var(--pt-fam-cultura); }
[data-cat="mercati"], [data-cat="gusto"],
[data-cat="street_art"] { --pt-fam: var(--pt-fam-strada); }
[data-cat="parchi_giardini"], [data-cat="natura_mare"] { --pt-fam: var(--pt-fam-natura); }
[data-cat="piazze_monumenti"], [data-cat="memoria_civile"],
[data-cat="dintorni"] { --pt-fam: var(--pt-fam-citta); }
/* --- Il cuore dei preferiti ---------------------------------------------- */
.pt-fav-star {
/* v66 — IL BERSAGLIO ERA 19 px, E NESSUNO LO SAPEVA.
Il cuore disegnato resta di 19 px; quello che cambia e' la SCATOLA che
riceve il dito, che adesso e' 44 come pretende il sistema di design da
sempre. Il riempimento non si vede: serve solo a fare superficie.
Perche' non l'aveva trovato nessuno: `tools/audit_mobile.py` misura
`a[href], button, summary, [role=button], select, input` — e la stella,
per chi ha fatto l'accesso, e' un `