/* Theme Name: Utat Viaggi Description: Tema custom del nuovo utat.it — design system v5 approvato (bozze S2), Sidea X blu/oro/sabbia, leggibilità over-60. Version: 1.0.0 Author: Caldana / Utat Text Domain: utat */ /* ============================================================ NUOVO UTAT.IT — design system v3 (bozze S2, revisione 2026-07-31) Brand Sidea X: blu #193C6C · oro #ECAE2D (contagocce) · grigio #EFEFEF (solo fondo) Font: Zalando Sans Expanded (titoli) + Inter (testo) v3 = v2 (raggi 3-4px, hairline, niente ombre a riposo, maiuscoletto solo su etichette) + scala immagini più grande: hero quasi a tutto schermo, caroselli, galleria a mosaico sul tour, itinerario con foto per giorno, tipografia display. Regole senior invariate: corpo ≥18px, contrasto AAA, tap target ≥48px ============================================================ */ :root { --blu: #193C6C; --blu-scuro: #10294D; --blu-tinta: #F2F5FA; /* tinta freddissima per selezioni/fondi attivi */ --oro: #ECAE2D; --oro-scuro: #8A6512; /* per testo oro su bianco. Non #B8860B: a 12.8px gli occhielli non sono "large text", serve AA pieno (4.5:1) e #B8860B si ferma a 3.25:1 (2.89 su sabbia). Questo e' lo stesso oro gia' usato da .stato-ultimi: 5.32:1 su bianco, 4.72:1 su sabbia. */ --sabbia: #F6F1E7; /* TERZO COLORE (v4, da validare con Dario): sabbia calda per i fondi alternati — scalda il bianco, sposa blu e oro (Turisanda #f0edea e Boscolo usano neutri caldi identici) */ --sabbia-bordo: #E8DFCC; /* bordi/righe su fondo sabbia */ --stella-spenta: #CFC4AB; /* il binario delle stelle non accese (badge recensioni): sabbia-bordo non si vedeva ne' su bianco (1.27:1) ne' su sabbia (1.05:1) e il voto sembrava tronco. Due passi piu' scuro: si percepisce su tutt'e due i fondi senza fare concorrenza alle stelle piene. */ --grigio: #EFEFEF; /* fondo alternato sezioni (da brand manual) */ --testo: #23303F; /* #49525F e non #5A6675: il vecchio grigio si fermava a 5,85:1 su bianco e 5,19:1 su sabbia, cioe' AA — ma il brief di questo sito chiede AAA (7:1) e il pubblico e' per il 59% over-60. Questo arriva a 7,01:1 su bianco e 7,00:1 su sabbia, i due fondi su cui compare. Resta un grigio: contro --testo (#23303F) la gerarchia si legge ancora. */ --testo-soft: #49525F; /* La misura di lettura, in caratteri e non in rem: una colonna da 46rem a 17px fa 82 caratteri per riga, ben oltre i 75 oltre i quali l'occhio sbaglia il ritorno a capo. In "ch" la misura resta giusta anche se il corpo del testo cambia. 62 e' verificato a pagina aperta, non dedotto: "ch" e' la larghezza dello zero, che in Inter e' piu' largo della media dei caratteri, quindi il numero non si legge come "62 caratteri". Contando le righe vere, 62ch danno 71-73 caratteri per riga sui paragrafi lunghi — dentro i 75. Chi lo abbassa a occhio manda gli occhielli e le introduzioni sotto i 45, che e' l'altro limite. Se si cambia il carattere del sito, si rimisura. */ --misura-lettura: 62ch; --bianco: #FFFFFF; --hairline: #E4E8EE; /* il "collante": bordi sottili al posto delle ombre */ --verde: #1E7B45; --rosso: #B3382C; --ombra-hover: 0 18px 40px rgba(16, 41, 77, .12); --raggio: 4px; /* card e pannelli: appena arrotondati */ /* Qui stavano i token del velo degli hero (--velo-hero-alto, --velo-hero, --tinta-velo): tolti il 27/08/2026 insieme al velo, v. il capitolo "Hero". */ --raggio-s: 3px; /* bottoni, input, chip */ --misura: 76rem; --transizione-foto: transform .7s cubic-bezier(.25,.1,.25,1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Lo scorrimento morbido e' un'animazione come le altre, e per chi soffre di disturbi vestibolari una pagina che scivola da sola non e' un vezzo: e' nausea. Mancava l'alternativa ferma, e valeva per ogni ancora del sito. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 1.0625rem; /* 17px — ridotto da 18 su richiesta (v5); non scendere oltre: 59% del pubblico è over-60 */ line-height: 1.65; color: var(--testo); background: var(--bianco); -webkit-font-smoothing: antialiased; } h1, h2, h3, .font-titolo { font-family: 'Zalando Sans Expanded', 'Inter', sans-serif; color: var(--blu); line-height: 1.12; font-weight: 600; letter-spacing: 0; /* mai spaziatura sui titoli (census riferimenti) */ } h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); } h2 { font-size: clamp(1.7rem, 3.1vw, 2.45rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); } h4 { font-size: 1.1rem; color: var(--blu); font-weight: 600; } .display { font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: 700; line-height: 1.05; } p + p { margin-top: .95em; } /* height:auto non e' un dettaglio: le foto dentro i testi migrati arrivano con width e height scritti negli attributi (width="600" height="400") mentre il file servito e' la miniatura 300x200. Con la sola max-width la larghezza scendeva a 358px su un telefono e l'altezza restava 400: le foto dei giorni erano stirate in verticale del 66% (misurato: rapporto 1,50 nel file, 0,90 a schermo). Su desktop la colonna e' larga 600px e il difetto non si vedeva. Chi ha un'altezza sua nel foglio (logo, card, slider) vince per specificita'. */ img { max-width: 100%; height: auto; display: block; } a { color: var(--blu); } .prose a { text-decoration: underline; text-underline-offset: 3px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, label:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; border-radius: 2px; } /* La casella data e' l'unica che restava senza anello arrivandoci col tabulatore (misurato sul modulo reclami: 1 passaggio su 32). Il motivo e' che il fuoco non finisce sulla casella ma su un suo pezzo interno — giorno, mese, anno — e :focus-visible sulla casella non scatta. :focus-within lo vede, perche' guarda anche dentro. ⚠ La verifica col codice (elemento.focus()) diceva che l'anello c'era: e' il tabulatore vero che scopre il buco. Le due cose non sono la stessa. */ input[type="date"]:focus-within, input[type="date"]:focus { outline: 3px solid var(--oro); outline-offset: 2px; border-radius: 2px; } .contenitore { max-width: var(--misura); margin: 0 auto; padding: 0 1.5rem; } /* v5: ritmo ancora più compatto (Turisanda sta a 32-50px) e fondi alternati CALDI, non bianchi */ .sezione { padding: 4rem 0; } .sezione-grigia, .sezione-sabbia { background: var(--sabbia); } .sezione-grigia .pannello, .sezione-sabbia .pannello, .sezione-grigia .card-tour, .sezione-sabbia .card-tour { border-color: var(--sabbia-bordo); } .sezione-blu-chiara { background: var(--blu-tinta); } @media (max-width: 760px) { .sezione { padding: 2.75rem 0; } } /* le ancore interne non devono finire sotto la testata sticky */ /* .programma-acc details: i pin della mappa puntano al singolo giorno, e senza margine il menu ancore appiccicato in alto coprirebbe il giorno appena aperto. */ /* 9,5rem e non 8,5: sulla pagina di un tour le barre appiccicate sono DUE (testata + barra delle sezioni) e a tavoletta arrivano a 145px, mentre il margine ne teneva 136 — le prime righe di "Partenze", "Mappa", "Programma" e "Cosa comprende" finivano sotto la barra (misurato il 20/08/2026). */ section[id], div[id^="tutte"], #programma, .programma-acc details { scroll-margin-top: 9.5rem; } /* Da 1180px in su sul catalogo e sulla destinazione si aggiunge la barra dei filtri appiccicata (117px): la pila arriva a 210 e 9,5rem non bastano piu'. */ @media (min-width: 1180px) { section[id], div[id^="tutte"], #programma, .programma-acc details { scroll-margin-top: 14rem; } } /* Occhiello: l'UNICO posto (coi bottoni) dove vive il maiuscoletto spaziato */ .occhiello { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-scuro); margin-bottom: .9rem; } /* max-width era 46em, cioe' 46 volte il corpo del testo — non 46 caratteri: faceva 87 caratteri per riga. In "ch" la misura e' quella che si voleva. */ .sottotitolo { color: var(--testo-soft); font-size: 1.08rem; max-width: var(--misura-lettura); line-height: 1.6; } /* Le introduzioni di pagina che passano dal contenuto (.sottotitolo.prose): un titolo scritto li' in bacheca usciva con le misure degli ARTICOLI — su Recensioni un h2 da 25,6px (quarta misura di h2 del sito), su Reclami un h4 che faceva da paragrafo. Qui dentro un titolo e' una riga d'apertura: stessa misura del testo, solo piu' scura e pesata. */ .sottotitolo.prose h2, .sottotitolo.prose h3, .sottotitolo.prose h4, .sottotitolo.prose h5 { font-size: inherit; font-family: inherit; line-height: inherit; font-weight: 600; color: var(--testo); margin: 0 0 .4rem; } /* Testa di sezione: centrata, stretta (alla Boscolo) */ .testa-sezione { margin-bottom: 2.1rem; } .sezione .contenitore > .testa-sezione:not(.sinistra) { text-align: center; } .sezione .contenitore > .testa-sezione:not(.sinistra) .sottotitolo { margin-left: auto; margin-right: auto; } .testa-sezione .rigo-oro { width: 3rem; height: 2px; background: var(--oro); margin: 1.1rem auto 0; } .testa-sezione.sinistra .rigo-oro { margin-left: 0; } /* Ingresso morbido allo scroll (rispetta prefers-reduced-motion) */ .appare { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .appare.visibile { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .appare { opacity: 1; transform: none; transition: none; } } /* ---------- Barra bozza (solo per la review, sparirà) ---------- */ .barra-bozza { background: #1B2431; color: #C7D0DC; font-size: .85rem; font-weight: 500; text-align: center; padding: .5rem 1rem; } .barra-bozza a { color: var(--oro); } /* ---------- Header ---------- */ .testata { background: var(--bianco); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 50; } .testata-riga { display: flex; align-items: center; gap: 2rem; min-height: 5.75rem; } /* flex-shrink: 0 — senza, sotto i 430px il flex schiacciava il logo a larghezza ZERO (misurato) e la testata restava col solo numero di telefono. */ .logo { flex-shrink: 0; } .logo img { height: 46px; width: auto; } .tel-nel-menu { display: none; } .nav-principale { display: flex; gap: .5rem; flex: 1; justify-content: center; flex-wrap: wrap; } .nav-principale a { text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--testo); padding: .85rem 1.05rem; border-bottom: 2px solid transparent; } .nav-principale a:hover { color: var(--blu); } .nav-principale a[aria-current="page"] { color: var(--blu); font-weight: 600; border-bottom-color: var(--oro); } /* La ricerca in testata, in due vesti (stessa meta: la pagina con ?s= vuoto): - .cerca-nel-menu vive DENTRO la nav e si vede solo nel pannello del panino (sotto i 1180px), come voce fra le voci. Da nona voce in riga andava a capo da sola: le otto voci piu' il telefono riempiono gia' la riga (misurato 20/08/2026 — a 1440 e 1920 la testata cresceva a 114-119px con "Cerca" centrato su una seconda riga). - .cerca-testata sta accanto al telefono, solo da 1180 in su: li' non puo' mandare a capo niente. */ .nav-principale .cerca-nel-menu { display: inline-flex; align-items: center; gap: .45rem; } .cerca-nel-menu .ico, .cerca-testata .ico { width: 1.05em; height: 1.05em; flex-shrink: 0; } .cerca-testata { display: none; } @media (min-width: 1180px) { .nav-principale .cerca-nel-menu { display: none; } .cerca-testata { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--testo); padding: .6rem .5rem; min-height: 48px; /* bersaglio pieno, come il telefono */ } .cerca-testata:hover { color: var(--blu); } } /* ---------- Voce con tendina (menu su due livelli, senza JS) ---------- */ .voce-gruppo { position: relative; display: flex; align-items: center; } .voce-gruppo > .voce-gruppo-testo { font-weight: 500; font-size: 1rem; color: var(--testo); padding: .85rem .35rem .85rem 1.05rem; cursor: default; border-bottom: 2px solid transparent; } .voce-gruppo > .ico-tendina { width: .9em; height: .9em; color: var(--testo-soft); margin-right: .55rem; flex-shrink: 0; } .voce-gruppo.gruppo-attivo > .voce-gruppo-testo, .voce-gruppo.gruppo-attivo > .ico-tendina { color: var(--blu); } .voce-gruppo .sotto-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 70; min-width: 17rem; padding: .4rem 0; background: #fff; border: 1px solid var(--hairline); border-radius: var(--raggio-s); box-shadow: 0 14px 30px rgba(13, 28, 54, .12); } .voce-gruppo:hover .sotto-menu, .voce-gruppo:focus-within .sotto-menu { display: block; } .voce-gruppo .sotto-menu a { display: block; padding: .7rem 1.1rem; border-bottom: 0; white-space: nowrap; } .voce-gruppo .sotto-menu a:hover { background: var(--grigio); } .voce-gruppo .sotto-menu a[aria-current="page"] { border-bottom: 0; background: var(--grigio); } .testata-contatto { display: flex; align-items: center; gap: 1.2rem; } .tel-testata { text-decoration: none; font-weight: 700; color: var(--blu); font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; white-space: nowrap; /* 48px pieni: il telefono in testata misurava 47, un pixel sotto la soglia dei bersagli per un pubblico over-60. */ padding: .6rem .2rem; min-height: 48px; } .tel-testata small { display: block; font-weight: 400; color: var(--testo-soft); font-size: .78rem; line-height: 1.2; letter-spacing: .02em; } .tel-testata svg { flex-shrink: 0; } /* 1080px e non 900: con 8 voci sotto quella soglia il menu non ci sta in una riga nemmeno stretto (misurato: ne servono 698, a 1000px ne restano 576). */ @media (max-width: 1179px) { .nav-principale { display: none; } .testata-riga { justify-content: space-between; } } /* ---------- Icone a filo (inline SVG, stroke currentColor) ---------- */ .ico { width: 1.15em; height: 1.15em; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; } .ico-g { width: 2.6rem; height: 2.6rem; stroke-width: 1.4; } /* ---------- Bottoni: squadrati (3px), uppercase, spaziati ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .85rem 2.2rem; border-radius: var(--raggio-s); border: 2px solid transparent; font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .btn-oro { background: var(--oro); border-color: var(--oro); color: var(--blu-scuro); } .btn-oro:hover { background: #DDA01F; border-color: #DDA01F; } .btn-blu { background: var(--blu); border-color: var(--blu); color: var(--bianco); } .btn-blu:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); } .btn-contorno { background: transparent; color: var(--blu); border-color: var(--blu); } .btn-contorno:hover { background: var(--blu); color: var(--bianco); } .btn-grande { font-size: 1rem; padding: 1rem 2.8rem; } .btn-mini { min-height: 2.7rem; padding: .5rem 1.1rem; } /* .btn-solo: un bottone che sta per conto suo, senza altri bottoni di fianco. Sotto i 560px va a tutta larghezza e perde i 2,2rem laterali — quel padding serve a dare forma a un bottone che si misura da sé, ma su uno schermo stretto toglie 70px alle parole e ogni etichetta italiana un po' lunga finisce su due righe, che si legge come una cosa rotta. */ @media (max-width: 560px) { .btn-solo { width: 100%; padding-left: 1rem; padding-right: 1rem; } } /* Riquadro d'invito al contatto: sostituisce la CTA sui viaggi senza date in vendita. Riquadro e non bottone di proposito — un bottone oro accanto a "Date non disponibili" prometterebbe un preventivo che non si può fare. Regole del brief: raggio 4px, bordo 1px al posto dell'ombra, altezza sopra i 48px di area cliccabile, oro come accento. */ .riquadro-contatti { display: inline-flex; align-items: center; gap: .8rem; min-height: 3.25rem; padding: .95rem 1.6rem; background: var(--sabbia); border: 1px solid var(--sabbia-bordo); border-left: 3px solid var(--oro); border-radius: var(--raggio); color: var(--blu); text-decoration: none; font-weight: 700; font-size: 1.05rem; transition: background .2s ease, border-color .2s ease; } .riquadro-contatti:hover { background: var(--bianco); border-color: var(--oro); } .riquadro-contatti .ico { flex-shrink: 0; } /* Link con freccia (alternativa quieta al bottone) */ .link-freccia { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--blu); text-decoration: none; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--oro); padding-bottom: .25rem; } .link-freccia:hover { color: var(--oro-scuro); } /* ---------- Hero ---------- */ .hero { position: relative; color: var(--bianco); display: flex; align-items: center; min-height: 38rem; background-size: cover; background-position: center; } /* NIENTE VELO SUGLI HERO (27/08/2026, Vlad: «togli la sfumatura all'inizio delle pagine, a sto punto va bene la scritta bianca, fa schifo la sfumatura»). Qui c'erano due velature nere: una su tutto l'hero (.18 -> .12 -> .28) e una fascia piu' profonda appesa al blocco di testo (0 -> .48 in 7rem). Sono state TOLTE, non abbassate: la fotografia arriva in pagina com'e', e il testo si regge sulle sue ombre. QUANTO COSTA, detto in chiaro, perche' non e' una questione di gusto e chi rimette mano qui deve saperlo. Metro: scripts/velo_hero_0826.mjs, 64 misure su 16 pagine con hero, a 390 e a 1440. Col velo: 0 misure sotto il 4,5:1 di legge. Senza: 59 su 64 sotto (60 a 390px), e non di poco — Mauritius, Tunisia, Giordania, Oman ed Emirati hanno il cielo o un muro bianco proprio dove passa il titolo, e li' il bianco su bianco misura 1,00:1: la scritta NON SI VEDE. Provato anche a caricare le ombre (fino a .95 di nero sullo strato stretto): non cambia niente, perche' non c'e' ombra che salvi il bianco sul bianco. La home e' quella che se la cava meglio a occhio — il titolo e' enorme e la Muraglia e' scura a meta' altezza — ed e' la pagina che Vlad aveva davanti quando l'ha chiesto; ma anche li' il punto peggiore misura 1,61:1, e il sottotitolo passa sul muro di pietra chiara. Se un domani si vuole tornare leggibili senza rimettere una sfumatura, la strada non e' un velo piu' furbo: e' togliere il testo dalla fotografia (titolo nella fascia bianca sotto, come fa il vecchio sito con le mete). */ .hero .contenitore { position: relative; z-index: 1; } /* Occhiello sopra una fotografia: bianco, col filetto d'oro sopra. Il colore sta in UNA regola sola — qui c'era anche `.hero .occhiello { color: oro }`, piu' specifica, che vinceva in silenzio: la classe nel markup diceva bianco e la pagina restava oro (visto misurando, non rileggendo il diff). */ .occhiello-foto, .hero .occhiello, .fascia-emozione .occhiello { color: var(--bianco); } .hero .rigo-oro, .fascia-emozione .rigo-oro { width: 2.2rem; height: 3px; background: var(--oro); border-radius: 2px; margin: 0 0 .75rem; } .fascia-emozione .rigo-oro { margin-left: auto; margin-right: auto; } /* NIENTE OMBRA SULLE SCRITTE, IN TUTTO IL SITO (02/09/2026, Razvan: "togli solo l'ombra da tutte le scritte; se su una foto la scritta non si legge, cambieremo a mano l'immagine"). Qui riguarda titolo, sottotitolo e occhiello dell'hero; tolta nello stesso giro anche a briciole sull'hero, fascia emozione, velo dei gesti della mappa e didascalia dei Momenti del tour. Il testo e' bianco pieno e basta. ⚠️ LA REGOLA D'ORA IN POI E' SULLA FOTOGRAFIA, NON SUL CSS. Se un titolo non si legge non si rimette l'ombra: si cambia l'immagine con una che sia scura dove passa il testo. Chi carica una foto di hero se ne assume la verifica — prima bastava guardare che fosse bella. COSA COSTA, e va saputo da chi rimette mano qui, perche' non e' gusto ma una misura. Gli hero non hanno piu' nemmeno il velo (tolto il 27/08, v. il commento su .hero): da oggi il bianco poggia sulla fotografia NUDA. Metro: scripts/velo_hero_0826.mjs, 64 misure su 16 pagine, a 390 e a 1440. Senza velo ma CON queste tre ombre, 59 misure su 64 stavano gia' sotto il 4,5:1 di legge; le ombre erano l'unica cosa rimasta a tenere il bordo delle lettere. Senza, resta il colore della fotografia: dove il titolo passa su cielo o su un muro chiaro — Mauritius, Tunisia, Giordania, Oman, Emirati — il bianco su bianco misura 1,00:1, cioe' la scritta NON SI VEDE. Sulle pagine guardate quando e' stato chiesto (home, Cina, Washington) la foto e' scura dove passa il testo e il problema non si vede: e' un caso, non la regola. Per rimettere l'ombra bastano le tre righe qui sotto, una per selettore: .hero h1 text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 6px rgba(0,0,0,.55), 0 2px 28px rgba(0,0,0,.5); .hero .sottotitolo text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 5px rgba(0,0,0,.65), 0 1px 20px rgba(0,0,0,.5); .hero .occhiello text-shadow: 0 1px 1px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.8), 0 0 14px rgba(0,0,0,.6); La strada per essere leggibili SENZA ne' velo ne' ombra e' una sola, ed e' la stessa gia' scritta sopra: togliere il testo dalla fotografia e portarlo nella fascia bianca sotto, come faceva il vecchio sito con le mete. */ .hero h1 { color: var(--bianco); max-width: 15em; } .hero .sottotitolo { color: #EAF0F8; font-size: 1.3rem; margin-top: 1.2rem; } /* Il filetto d'oro e' pieno, quindi l'ombra gli va INTORNO: un pelo di contorno scuro piu' un alone. Senza, su una fotografia chiara scendeva a 2,5:1 — sotto il 3:1 che si chiede a un elemento grafico. */ .hero .rigo-oro { box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.75); } /* v3: la home è quasi a tutto schermo, la destinazione molto alta */ .hero-max { min-height: clamp(38rem, 88svh, 56rem); } /* v4: testo dell'hero home ancorato in basso (richiesta Razvan) */ .hero-basso { align-items: flex-end; } .hero-alta { min-height: clamp(28rem, 62svh, 40rem); align-items: flex-end; } .hero-alta .contenitore { padding-bottom: 4.5rem; padding-top: 8rem; } .hero-piccola { min-height: 26rem; } /* Hero delle pagine interne (dal riquadro "Banner", come sul vecchio sito): titolo centrato sulla foto, briciole di pane sotto. Oggi NON usato: provato sui cataloghi e scartato (2026-08-07); resta pronto se l'hero tornera'. */ .hero-centro { justify-content: center; text-align: center; } .hero-centro .contenitore { padding-top: 3rem; padding-bottom: 3rem; } .hero-centro h1 { margin: 0 auto; max-width: 18em; } /* Le briciole SULL'HERO sono bianche sulla foto; fuori dall'hero vale il componente base (v. sezione Breadcrumb), che su fondo chiaro resta grigio/blu. */ .hero .briciole { margin-top: 1.05rem; padding: 0; display: flex; gap: .3rem; /* align-items: il link "Home" e' alto 48px (bersaglio tattile), il resto e' testo semplice: senza centratura verticale la riga viene storta. */ justify-content: center; align-items: center; font-size: .98rem; color: #EAF0F8; } /* l'imbottitura porta il bersaglio del link a 48px anche in larghezza ("Home" da solo misura 44); il gap ridotto compensa il distacco visivo */ .hero .briciole a { color: var(--bianco); text-decoration: underline; text-underline-offset: 3px; padding: 0 .4rem; } .hero .briciole a:hover { color: var(--bianco); } .hero .briciole span[aria-current] { color: var(--bianco); font-weight: 600; } @media (max-width: 560px) { .hero-centro { min-height: 20rem; } } /* L'introduzione della pagina cataloghi: larga quanto la colonna, cioe' quanto il titolo sopra e quanto la griglia dei cataloghi sotto (marketing, 26/08/2026). Prima era stretta a 62ch come sul vecchio sito, e finiva incolonnata al centro di una testata larga il doppio. ⚠ Cosi' la riga arriva intorno ai 120 caratteri, contro i 62 che il BRIEF fissa come misura di lettura — stessa deroga gia' presa per il testo di apertura di /destinazioni/ (.testo-apertura-mete, qui sopra). Regge perche' sono quattro righe di presentazione che si scorrono; se un domani quel testo diventa lungo, va rimesso in colonna. */ .intro-cataloghi { margin: 1.6rem auto 0; text-align: center; } /* ---------- Il testo d'apertura largo quanto la colonna ---------- Chiesto dal marketing il 26/08/2026 per /viaggi/, le pagine di tipologia (Viaggi Firmati Utat e sorelle), /viaggi-in-partenza/ e /blog/: l'apertura comincia dove comincia il titolo e finisce dove finisce la riga dei filtri sotto, invece di fermarsi a meta' schermata. Classe a se' e non un ritocco a .sottotitolo, che vale su mezzo sito — nelle schede dei tour e nelle fasce quella misura stretta serve ancora. ⚠ Cosi' la riga arriva intorno ai 120 caratteri, contro i 62 che il BRIEF fissa come misura di lettura. E' la terza volta che si prende questa deroga (prima .testo-apertura-mete su /destinazioni/, poi .intro-cataloghi): regge perche' sono aperture di due o tre righe, allineate a sinistra, che si scorrono invece di leggerle riga per riga. Se uno di quei testi diventa lungo, quella pagina va rimessa in colonna. */ .testo-largo, .sottotitolo.testo-largo, .prose.testo-largo { max-width: none; } /* Titolo di pagina che pesa come un titolo di sezione: e' il testo grande centrato dei cataloghi ("Pagine che racchiudono..."), H1 per la semantica ma con la misura dell'h2, come sul vecchio sito. SOLO per h2 (21/08/2026): quattro pagine la mettevano sull'H1 e il titolo della pagina pesava esattamente quanto un titolo di sezione qualunque — su "Chi siamo" il titolo pesava quanto "I nostri valori" che gli sta sotto. Misurato: 39,2px l'h1 vestito, 39,2px ogni h2. Ora gli h1 vanno nudi (56px) come le pagine sorelle. */ .titolo-di-sezione { font-size: clamp(1.7rem, 3.1vw, 2.45rem); } /* Descrizione ricca sotto la testa (destinazioni): colonna stretta al centro, testo a bandiera — lunga e piena di link, centrata sarebbe faticosa. */ .colonna-descrizione { max-width: var(--misura-lettura); margin: 1.6rem auto 0; } /* Il testo di apertura dell'indice /destinazioni/: largo quanto il titolo e la griglia delle mete, chiesto dal marketing. Classe a se' e non .colonna-descrizione, che serve ancora a "chi siamo". ⚠ Cosi' la riga arriva intorno ai 120 caratteri, contro i 62 che il BRIEF fissa come misura di lettura. Regge perche' sono due paragrafi corti e mezzi fatti di collegamenti — cioe' un elenco travestito da frase, che si scorre invece di leggerlo. Se un domani quel testo diventa lungo, va rimesso in colonna. */ .testo-apertura-mete { margin-top: 1.6rem; } /* ---------- Le sotto-mete senza card: solo nome e collegamento, in colonne ---------- Modello Boscolo. Gli Stati Uniti ne hanno 34 e di card ce ne stanno sei: qui passano le altre. Colonne che si contano da sole, cosi' l'elenco regge tanto 3 voci quanto 30. */ .elenco-sottomete { list-style: none; margin-top: 2.6rem; display: grid; gap: .2rem 2rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); /* 15px, chiesto dal marketing: sotto il minimo di 17px del BRIEF, ma qui non e' testo da leggere — sono nomi di citta' di due parole. L'area cliccabile resta alta 44px (sotto), quindi il dito e il mouse non ci perdono niente. */ font-size: .9375rem; } .elenco-sottomete a { /* 48 e non 44: sono trentaquattro nomi di citta' uno sotto l'altro, e chi sbaglia riga finisce su un'altra meta. Il testo resta di 15px, cresce solo la riga che si tocca (misurato il 20/08/2026). */ display: flex; align-items: center; min-height: 48px; color: var(--blu); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .elenco-sottomete a:hover { color: var(--oro-scuro); } /* ---------- Informazioni utili complete: capitoli a linguette ---------- In fondo alla pagina destinazione; il link nel riquadro in alto scorre qui. Linguette "a cartellina" alla Turisanda (appunti di viaggio): la scheda attiva è un tab bianco con l'orlo d'oro in alto, FUSO col pannello sotto (la riga delle linguette scavalca di 1px il bordo del pannello, e il tab attivo, bianco e senza bordo in basso, lo interrompe); le altre appoggiano sul fondo pagina. Quando non ci stanno si scorrono col dito o coi cerchietti-freccia ai lati; la barra di scorrimento resta nascosta. */ .linguette-riga { display: flex; align-items: stretch; position: relative; z-index: 2; margin-bottom: -1px; } .schede-linguette { display: flex; gap: .25rem; overflow-x: auto; flex: 1; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .schede-linguette::-webkit-scrollbar { display: none; } .linguetta { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; background: none; font: inherit; font-weight: 600; color: var(--blu); padding: .9rem 1.15rem; min-height: 48px; cursor: pointer; border: 1px solid transparent; border-bottom: 0; border-top: 3px solid transparent; border-radius: 10px 10px 0 0; } .linguetta .ico { width: 1.15em; height: 1.15em; flex-shrink: 0; } .linguetta:hover { color: var(--oro-scuro); } .linguetta.attiva { background: var(--bianco); border-color: var(--sabbia-bordo); border-bottom: 0; border-top: 3px solid var(--oro); color: var(--blu); } /* I cerchietti stanno FUORI dal flusso, a cavallo del bordo della riga (metà dentro, metà fuori come su Turisanda): così non rubano spazio alle linguette e non le "tagliano". Sporgono nel margine del contenitore (24px, 16px sotto i 420px): mai oltre lo schermo. */ .linguette-freccia { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; /* 48px come la gemella della barra delle sezioni: erano gli ultimi due comandi del sito sotto la soglia del polpastrello. */ width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--sabbia-bordo); background: var(--bianco); color: var(--blu); cursor: pointer; box-shadow: 0 6px 16px rgba(16, 41, 77, .10); } .linguette-freccia[hidden] { display: none; } /* Quanto sporgono: fin dove arriva lo spazio senza creare scorrimento orizzontale. Dai 1280px in su (pagina centrata, almeno 56px d'aria per lato: 24 di padding + il margine) il cerchietto sta TUTTO fuori dal pannello, con un filo d'aria; sotto, resta nel padding del contenitore (24px; 14 dei 16 sotto i 420px). */ .linguette-freccia:first-child { left: -24px; } .linguette-freccia:last-child { right: -24px; } @media (min-width: 1280px) { .linguette-freccia:first-child { left: -54px; } .linguette-freccia:last-child { right: -54px; } } @media (max-width: 420px) { .linguette-freccia:first-child { left: -14px; } .linguette-freccia:last-child { right: -14px; } } .linguette-freccia .ico { width: 1.2em; height: 1.2em; } .scheda-info { background: var(--bianco); border: 1px solid var(--sabbia-bordo); border-radius: var(--raggio); box-shadow: 0 16px 40px rgba(16, 41, 77, .07); padding: 2rem 2.2rem; max-width: 100%; } @media (max-width: 560px) { .scheda-info { padding: 1.2rem; } } /* ---------- Barra di ricerca: orizzontale, a cavallo del fondo hero ---------- */ .box-ricerca { background: var(--bianco); border-radius: var(--raggio); border: 1px solid var(--hairline); box-shadow: 0 24px 60px rgba(16,41,77,.16); padding: .6rem; /* Tre scomparti dal 20/08/2026 (era 1fr 1fr auto): il campo libero, che e' quello che si usa per primo, poi le due tendine. Al campo si da' piu' spazio — ci si scrive dentro, mentre nelle tendine si sceglie e basta. La scatola cresce da 56 a 64rem: misurato, sotto quella misura "DOVE VUOI ANDARE?" andava a capo e delle tre domande una sola stava su due righe. */ display: grid; grid-template-columns: 1.15fr 1fr 1fr auto; align-items: stretch; max-width: 64rem; margin: 0 auto; position: relative; z-index: 5; } .box-ricerca > div { padding: .55rem 1.3rem; border-right: 1px solid var(--hairline); } .box-ricerca > div:last-of-type { border-right: 0; } .box-ricerca label { font-weight: 700; color: var(--blu); display: block; margin-bottom: .1rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; } /* Il campo di testo si veste come le tendine che ha di fianco: niente cornice sua, e' la scatola bianca a fare da cornice a tutti e tre. 17px pieni: sotto i 16 il telefono ingrandisce da solo al primo tocco. */ .box-ricerca select.campo, .box-ricerca input.campo { border: 0; padding-left: 0; min-height: 3rem; font-size: 1.08rem; background: transparent; } .box-ricerca input.campo::placeholder { color: var(--testo-soft); opacity: 1; } .box-ricerca .btn { align-self: center; margin: .35rem; } .ricerca-flottante { margin-top: -3.4rem; padding: 0 1.5rem; } /* Tre scomparti in una riga sola vogliono spazio: finche' la scatola non ha la sua misura piena (64rem + i 3rem di margine della fascia = 1072px di finestra) passa a due righe — campo largo sopra, tendine sotto — invece di strizzare le domande fino a mandarle a capo. Misurato: a 1000px "DOVE VUOI ANDARE?" si spezzava in due righe mentre le altre due domande restavano su una. */ @media (min-width: 761px) and (max-width: 1071px) { .box-ricerca { grid-template-columns: 1fr 1fr; } .box-ricerca > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--hairline); } .box-ricerca .btn { grid-column: 1 / -1; margin: .6rem .35rem .35rem; } } @media (max-width: 760px) { .box-ricerca { grid-template-columns: 1fr; } .box-ricerca > div { border-right: 0; border-bottom: 1px solid var(--hairline); } /* impilate a tutta larghezza lo spazio verticale non manca: 52px come i bottoni */ .box-ricerca select.campo, .box-ricerca input.campo { min-height: 3.25rem; } /* "DOVE VUOI ANDARE?" era a 12.5px: sono le domande del modulo, non didascalie. 17px come le etichette dei filtri (stessa regola dei 720px piu' sotto); la spaziatura si stringe perche' a questa misura .14em allarga troppo. */ .box-ricerca label { font-size: 1.0625rem; letter-spacing: .08em; } } /* Sui telefoni piu' stretti (320px, l'iPhone SE e chi ingrandisce il testo di sistema) "CHE VIAGGIO CERCHI?" chiedeva 239px e ne aveva 209: andava a capo da solo mentre le altre due domande restavano su una riga. Si stringe la spaziatura delle lettere e lo scomparto, non il corpo del testo. */ @media (max-width: 400px) { .box-ricerca label { letter-spacing: .02em; } .box-ricerca > div { padding-left: 1rem; padding-right: 1rem; } } /* ---------- Campi form ---------- */ .campo, select.campo, input.campo, textarea.campo { width: 100%; min-height: 3.25rem; padding: .7rem .95rem; font: inherit; color: var(--testo); border: 1px solid #C6CDD8; border-radius: var(--raggio-s); background: var(--bianco); transition: border-color .2s; } select.campo { cursor: pointer; } .campo:hover, .campo:focus { border-color: var(--blu); } label.etichetta { display: block; font-weight: 600; color: var(--blu); margin-bottom: .4rem; font-size: 1rem; } .campo-gruppo { margin-bottom: 1.3rem; } .obbligatorio::after { content: " *"; color: var(--rosso); } /* ---------- Il modulo della pagina di ricerca (search.php) ---------- */ /* Campo e bottone sulla stessa riga, in colonna sotto i 640. Il campo a 18px: e' IL campo della pagina, e sotto i 16px iOS zoomerebbe da solo al tocco. */ .modulo-ricerca { max-width: 40rem; margin-top: 1.6rem; } .modulo-ricerca-riga { display: flex; gap: .8rem; } .modulo-ricerca .campo { flex: 1; min-width: 0; font-size: 1.125rem; } @media (max-width: 640px) { .modulo-ricerca-riga { flex-direction: column; } } /* ---------- Striscia fiducia: sottile, tipografica, su sabbia ---------- */ /* Fondo bianco (chiesto dal marketing, era sabbia): dentro ci sono i soli badge delle recensioni, coi marchi di Google e Trustpilot, e quelli sono nati per stare sul bianco. Il filo di separazione passa da sabbia a hairline, perche' sul bianco il bordo sabbia non si vedrebbe. */ .barra-fiducia { background: var(--bianco); border-bottom: 1px solid var(--hairline); } .barra-fiducia .contenitore { display: flex; flex-wrap: wrap; gap: .6rem 3.5rem; justify-content: center; padding-top: 1.5rem; padding-bottom: 1.5rem; font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blu); } /* Dentro la barra ci sono i badge (.prove): il maiuscoletto e la spaziatura della fascia non li riguardano — il voto e' un numero, non un'etichetta. */ .barra-prove { text-transform: none; letter-spacing: 0; gap: 1rem 3rem; } /* Nella barra il badge si scrive IN RIGA - marchio, stelle, voto uno accanto all'altro (Vlad, 21/08/2026). La barra e' una striscia alta poche decine di pixel: in colonna la faceva crescere e i due badge diventavano due colonnine in mezzo al bianco. L'ordine e' lo stesso di sempre, cambia solo il verso. Nel piede e nella pagina recensioni restano in colonna: li' lo spazio e' stretto e alto, e il verso giusto e' quello. */ .barra-prove .prova { flex-direction: row; align-items: center; gap: .6rem; min-width: 0; padding: .5rem .3rem; } .barra-prove .prova-marchio { height: auto; } .barra-prove .prova-voto { line-height: 1; } /* Le voci coi voti vestite da badge: la G di Google o le stelle verdi di Trustpilot accanto al testo di bacheca, e tutta la voce porta alla scheda dove il voto si controlla. Stesso colore delle sorelle: che sia un collegamento lo dicono il marchio e la sottolineatura al passaggio. */ .barra-fiducia .fiducia-prova { display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; /* Sono diventate collegamenti: l'area di tocco sale a ~48px col padding rimborsato dal margine, senza spostare niente (stesso giro dei consensi). */ padding: .65rem .4rem; margin: -.65rem -.4rem; } a.fiducia-prova:hover .fiducia-testo, a.fiducia-prova:focus-visible .fiducia-testo, a.fiducia-prova:hover .fiducia-parola, a.fiducia-prova:focus-visible .fiducia-parola { text-decoration: underline; text-underline-offset: .22em; } .fiducia-marchi { display: flex; align-items: center; gap: .55rem; } /* La parola del giudizio ("Eccellente") esce dal maiuscoletto della barra: minuscola vera, un gradino piu' grande, blu pieno — come la scrive Caldana. */ .fiducia-parola { text-transform: none; letter-spacing: 0; font-size: 1.2rem; font-weight: 600; color: var(--blu-scuro); } .fiducia-prova .stelle-voto { font-size: 1.1rem; letter-spacing: .06em; } .fiducia-prova .logo-google, .fiducia-prova .stelle-trustpilot { display: block; } @media (max-width: 760px) { /* In verticale ogni voce e' una riga centrata; i badge vanno in colonna (marchi sopra, testo sotto) perche' in riga, a questa larghezza, il testo andava a capo DI FIANCO alle stelle e la barra usciva sfrangiata. */ .barra-fiducia .contenitore { flex-direction: column; align-items: center; gap: 1.1rem; } .barra-fiducia .contenitore > span, .barra-fiducia .fiducia-prova { justify-content: center; text-align: center; } .barra-fiducia .fiducia-prova { flex-direction: column; gap: .4rem; } } @media (max-width: 760px) { /* Sul telefono le voci stanno una sotto l'altra e 13.6px era il testo piu' piccolo della prima schermata: 17px, come il corpo (pubblico 59% over-60). */ .barra-fiducia .contenitore { font-size: 1.0625rem; letter-spacing: .06em; } } /* ---------- Card tour: flat, bordo hairline, hover con vita ---------- */ .griglia-card { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); } /* Nel catalogo ogni scheda sta dentro un contenitore che serve ai filtri. La griglia allungava QUEL contenitore fino all'altezza della riga, ma la scheda dentro restava alta quanto il suo testo: misurato a 1440px, tre schede della stessa riga erano 527, 551 e 555px, e i tre prezzi stavano a 1193, 1217 e 1221 — 28px di sfalsamento. In un catalogo il prezzo e' il dato che si confronta, e se ogni volta sta a un'altezza diversa l'occhio deve cercarlo. La scheda ha gia' "margin-top:auto" sul fondo: bastava lasciarla riempire. */ .griglia-card > .slot-tour { display: grid; } /* ...ma un elemento con l'attributo "hidden" deve restare nascosto. Questa riga non e' un dettaglio: "display: grid" qui sopra VINCE sul display:none che il browser da' a [hidden] (una regola scritta nel foglio batte sempre quella predefinita), e il filtro della pagina destinazione — che nasconde proprio con .hidden = true — contava giusto ("1 tour") lasciando tutte le schede a schermo. Segnalato da Vlad il 20/08/2026 cercando "the new" sugli Stati Uniti: il contatore diceva 1 e sotto c'erano California, Citta' Montagne e Musica, Cow Boys & Indians. */ .griglia-card > .slot-tour[hidden] { display: none; } /* height:100% + il titolo bloccato a due righe (piu' sotto) = TUTTE LE CARD ALTE UGUALE, quindi il prezzo di ognuna alla stessa altezza. Prima le sfalsavano la riga descrittiva (1 o 2 righe secondo il testo) e il titolo; la riga descrittiva e' stata tolta dal marketing, il resto lo tengono queste due regole. position:relative regge il collegamento del titolo, che si allarga su tutta la card. */ .card-tour { position: relative; height: 100%; background: var(--bianco); border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--hairline); text-decoration: none; color: var(--testo); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; } .card-tour:hover { transform: translateY(-4px); box-shadow: var(--ombra-hover); border-color: transparent; } .card-tour figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .card-tour figure img { width: 100%; height: 100%; object-fit: cover; transition: var(--transizione-foto); } /* Fondo del riquadro foto su TUTTE le schede: una JPEG si dipinge dall'alto, e finche' non e' arrivata tutta il fondo resta in vista — grigio brand, non bianco crudo che pare un difetto (foto «a meta'» colta da Vlad su una scheda India, 25/08/2026: file e tagli erano sani, era solo il viaggio). */ .card-tour figure, .card-catalogo figure, .card-tipologia figure, .card-blog figure { background: var(--grigio); } .card-tour:hover figure img { transform: scale(1.05); } .chip-foto { position: absolute; bottom: 0; left: 0; background: rgba(16,41,77,.82); color: var(--bianco); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .45rem .9rem; } .chip-offerta { position: absolute; top: 1rem; right: 0; background: var(--oro); color: var(--blu-scuro); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .4rem .9rem; } /* Il bollino della collezione con accompagnatore: in alto a destra come il sigillo del vecchio sito. Rettangolo a spigoli vivi, uguale al chip che il sito usa sulle fotografie; fondo blu e scritta bianca. Sta a destra perche' a sinistra c'e' gia' il cartellino dello sconto, e i due non devono accavallarsi. */ .bollo-firmato { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: inline-flex; align-items: center; gap: .32rem; background: rgba(16,41,77,.82); color: var(--bianco); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .45rem .9rem; } .bollo-firmato svg { width: .85em; height: .85em; flex: none; } .card-tour .corpo { padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } /* Il titolo occupa SEMPRE due righe, anche quando ne basta una: e' quello che teneva disallineato tutto il resto della card. Oltre le due righe si taglia. */ .card-tour h3 { font-size: 1.16rem; line-height: 1.3; min-height: calc(2 * 1.3em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-tour h3 a { color: inherit; text-decoration: none; } /* Il collegamento del titolo si allarga su tutta la card: si clicca dappertutto come quando la card era un sola, ma senza annidare un dentro un altro — cosi' il bottone "Scopri il tour" puo' essere un collegamento vero. */ .card-tour h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .card-tour .dest { color: var(--oro-scuro); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; } /* La durata, che prima stava stampata sulla fotografia */ .card-tour .durata-card { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-soft); } /* Quante partenze si possono ancora prenotare. Niente icona, quindi niente flex. */ .card-tour .quando-card { display: block; color: var(--testo); margin-top: .15rem; } .card-tour .quando-card strong { font-weight: 600; } .card-tour .fondo { margin-top: auto; padding-top: 1.05rem; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: .9rem; } /* "Scopri il tour". Sopra al collegamento del titolo (z-index), altrimenti il clic lo prenderebbe la card e il bottone sarebbe finto. ⚠ Bianco su #ECAE2D fa 1,98:1 di contrasto, sotto il 4,5:1 che il BRIEF chiede per il testo. Scelta del marketing, guardata sul cantiere e confermata. Se un giorno si rivede: lo stesso oro col blu scuro fa 7,3:1 ed e' quello dei bottoni oro del sito. */ .btn-scopri { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1.15rem; /* Blu scuro e non bianco: ovunque il sito scrive su fondo oro (.btn-oro, .chip-offerta, .bollino) il testo e' --blu-scuro, e c'e' un perche' — il bianco su --oro si ferma a 1,97:1, sotto perfino il 3:1 dei testi grandi, mentre --blu-scuro arriva a 7,33:1. Questo era l'unico bottone rimasto bianco, sul bersaglio primario di ogni scheda. */ background: var(--oro); color: var(--blu-scuro); border-radius: var(--raggio); text-decoration: none; white-space: nowrap; font-size: .92rem; font-weight: 700; letter-spacing: .04em; transition: background .25s ease; } /* #DDA01F e' l'hover ufficiale dell'oro (.btn-oro:hover), non il #D89A1C che stava qui: una terza tonalita' per lo stesso gesto era una variante in piu'. */ .btn-scopri:hover, .btn-scopri:focus-visible { background: #DDA01F; color: var(--blu-scuro); } /* Sotto i 380px il prezzo e il bottone affiancati si strizzano a vicenda */ @media (max-width: 380px) { .card-tour .fondo { flex-direction: column; align-items: stretch; } .card-tour .btn-scopri { width: 100%; } } .prezzo-da { font-size: .82rem; color: var(--testo-soft); letter-spacing: .06em; text-transform: uppercase; } .prezzo-da strong { display: block; font-size: 1.35rem; color: var(--blu); font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600; letter-spacing: 0; text-transform: none; } .partenze-num { font-size: .92rem; color: var(--testo-soft); text-align: right; } /* ---------- Cataloghi da sfogliare: griglia a due colonne ---------- Stesso impianto del vecchio sito (copertina, titolo, riga, due pulsanti), ma con la pelle del tema: raggio 4px invece delle pillole, bordo hairline invece dell'ombra a riposo, blu/oro invece del bordeaux. 26rem di minimo = due colonne sul contenitore pieno, una sotto i 900px. */ .griglia-cataloghi { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); } @media (max-width: 560px) { .griglia-cataloghi { grid-template-columns: 1fr; gap: 1.75rem; } } .card-catalogo { background: var(--bianco); border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--hairline); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; } .card-catalogo:hover { transform: translateY(-4px); box-shadow: var(--ombra-hover); border-color: transparent; } .card-catalogo figure { aspect-ratio: 3 / 2; overflow: hidden; } .card-catalogo figure img { width: 100%; height: 100%; object-fit: cover; transition: var(--transizione-foto); } .card-catalogo:hover figure img { transform: scale(1.05); } .card-catalogo .corpo { padding: 1.9rem 1.6rem 1.7rem; flex: 1; display: flex; flex-direction: column; gap: .7rem; text-align: center; } .card-catalogo h2 { font-size: 1.5rem; line-height: 1.25; } .card-catalogo p, .card-catalogo .testo-scheda { color: var(--testo-soft); } .card-catalogo .testo-scheda p + p { margin-top: .6em; } /* I pulsanti in fondo restano allineati fra schede di altezza diversa. */ .card-catalogo .azioni { margin-top: auto; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; } /* Su schermo stretto i due pulsanti vanno a tutta larghezza: il pubblico e' over-60, meglio due bersagli grandi che due bottoncini affiancati. */ @media (max-width: 420px) { .card-catalogo .azioni .btn { flex: 1 1 100%; } } /* ---------- Carosello (destinazioni alla Boscolo, scroll-snap) ---------- */ .carosello { position: relative; } .carosello-traccia { display: flex; gap: 1.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem .25rem 1rem; scrollbar-width: none; } .carosello-traccia::-webkit-scrollbar { display: none; } .carosello-traccia > * { scroll-snap-align: start; flex: 0 0 auto; } .carosello-frecce { display: flex; gap: .7rem; justify-content: flex-end; margin-bottom: 1.4rem; } .freccia-car { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid #C6CDD8; background: var(--bianco); color: var(--blu); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .freccia-car:hover { background: var(--blu); border-color: var(--blu); color: var(--bianco); } /* Card destinazione grande, verticale. Nata per il carosello della home, ora e' anche la card dell'indice /destinazioni/: una sola card per tutt'e due i posti, cosi' non possono divergere. La larghezza fissa serve al carosello, dove le card scorrono in orizzontale; in griglia la toglie .griglia-dest qui sotto. */ .card-dest-g { position: relative; border-radius: var(--raggio); overflow: hidden; width: clamp(17rem, 24vw, 22rem); aspect-ratio: 3 / 4; display: flex; align-items: flex-end; text-decoration: none; } /* L'indice delle destinazioni: le stesse card, ma in griglia. Senza width:auto resterebbero ferme a 22rem lasciando buchi a destra. */ .griglia-dest { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); } .griglia-dest .card-dest-g { width: auto; } .card-dest-g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transizione-foto); } .card-dest-g:hover img { transform: scale(1.05); } .card-dest-g .velo { position: relative; width: 100%; background: linear-gradient(180deg, transparent, rgba(13,28,54,.86)); color: var(--bianco); padding: 5rem 1.6rem 1.5rem; } .card-dest-g h3 { color: var(--bianco); font-size: 1.7rem; } .card-dest-g .velo span { font-size: .95rem; opacity: .92; } .card-dest-g .velo .rigo { width: 2rem; height: 2px; background: var(--oro); margin: .6rem 0 .5rem; transition: width .3s; } .card-dest-g:hover .velo .rigo { width: 3.4rem; } /* ---------- Card destinazione (griglie interne, v2) ---------- */ .card-dest { position: relative; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; } .card-dest:hover { transform: translateY(-4px); box-shadow: var(--ombra-hover); } .card-dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transizione-foto); } .card-dest:hover img { transform: scale(1.05); } .card-dest .velo { position: relative; width: 100%; background: linear-gradient(180deg, transparent, rgba(13,28,54,.82)); color: var(--bianco); padding: 3rem 1.4rem 1.2rem; } .card-dest h3 { color: var(--bianco); font-size: 1.3rem; } .card-dest .velo span { font-size: .92rem; opacity: .9; } /* ---------- Tipologie di viaggio ---------- */ .griglia-tipologie { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); } .card-tipologia { background: var(--bianco); border: 1px solid var(--hairline); border-radius: var(--raggio); overflow: hidden; text-decoration: none; color: var(--testo); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; } .card-tipologia:hover { transform: translateY(-4px); box-shadow: var(--ombra-hover); border-color: transparent; } .card-tipologia figure { aspect-ratio: 16 / 10; overflow: hidden; } .card-tipologia figure img { width: 100%; height: 100%; object-fit: cover; transition: var(--transizione-foto); } .card-tipologia:hover figure img { transform: scale(1.05); } .card-tipologia .corpo { padding: 1.5rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; } .card-tipologia h3 { font-size: 1.2rem; } /* La categoria sopra al nome ("Città", "Natura"…) nelle card di "cosa vedere": stesso occhiello oro delle card tour, chiesto dal marketing. Prima era grigio e scritto negli stili della pagina, dove nessuno lo trovava. --oro-scuro e non --oro: a 12px l'oro del marchio sul bianco non si legge (v. la nota accanto alla variabile). */ .card-tipologia .dest { color: var(--oro-scuro); font-size: .78rem; /* come .card-tour .dest: stesso ruolo, stessa misura */ font-weight: 600; text-transform: uppercase; letter-spacing: .14em; } .card-tipologia p { font-size: .96rem; color: var(--testo-soft); line-height: 1.55; } .card-tipologia .fondo { margin-top: auto; padding-top: 1rem; font-size: .85rem; font-weight: 700; color: var(--blu); letter-spacing: .08em; text-transform: uppercase; } /* ---------- Il carosello delle tipologie (home) ---------- Dal 27/08/2026 (Vlad) le schede delle tipologie SONO le schede delle destinazioni: stessa card (.card-dest-g), stesso contenitore (.carosello), stesse misure per costruzione. Qui non serve piu' nessuna regola: la vestizione "quasi tutta fotografia con la fascia bianca" (.card-tip-foto, .carosello-tip a --per-vista) e' stata tolta insieme al suo markup — sta nella storia di git se dovesse tornare utile. */ /* I pallini. Il bersaglio e' 44px pieni anche se il disegno e' un dischetto di 11: il pubblico e' over-60 e un pallino da 11px non si becca. Lo spazio fra i bersagli e' negativo di proposito, se no due dischetti vicini sembrerebbero lontanissimi. */ /* I pallini vanno a capo invece di stringersi. Con otto pagine di carosello servono 8x48 = 384px e su un telefono da 390 ne restano 358: il flex li schiacciava a 36px di larghezza, cioe' sotto il polpastrello, e per giunta attaccati fra loro (misurato il 20/08/2026). Meglio due righe di pallini giusti che una riga di pallini che si sbagliano. */ /* "margin-inline: auto" e non solo margin-top: quando i pallini vanno a capo, il JavaScript stringe il contenitore per pareggiare le righe (4+4 invece di 7+1), e un contenitore stretto senza margini automatici si incolla a sinistra. */ /* I PUNTINI DEL CAROSELLO (quarta versione, approvata — Vlad 27/08/2026): pieni, fitti, sempre tutti su una riga. Sul telefono sono spie e basta (pointer-events spenti: il comando e' il dito, e un bersaglio da 8px non sarebbe mai onesto); sulla scrivania crescono a 13px e si cliccano, e la traccia si trascina col mouse (vedi sito.js). */ .carosello-punti { display: flex; flex-wrap: nowrap; justify-content: center; gap: 9px; margin: 1.1rem auto 0; } .carosello-punti[hidden] { display: none; } .punto-car { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #C9D1DD; transition: background .2s, transform .2s; pointer-events: none; } .punto-car.attivo { background: var(--blu); transform: scale(1.3); } @media (hover: hover) and (pointer: fine) { /* Il pallino DISEGNATO e' 13px (il ::before), ma il bersaglio del clic e' il bottone intero: 26px, invisibile. Facile da centrare senza ingrossare il segno. */ .carosello-punti { gap: 4px; } .punto-car { width: 26px; height: 26px; pointer-events: auto; cursor: pointer; background: none; transform: none; display: inline-flex; align-items: center; justify-content: center; } .punto-car::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: #C9D1DD; transition: background .2s, transform .2s; } .punto-car:hover::before { background: #9DB0CC; transform: scale(1.15); } .punto-car.attivo { background: none; transform: none; } .punto-car.attivo::before, .punto-car.attivo:hover::before { background: var(--blu); transform: scale(1.25); } .punto-car:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; border-radius: 50%; } /* la traccia dice con la mano che si puo' trascinare */ .carosello-traccia { cursor: grab; } .carosello-traccia.trascina { cursor: grabbing; } } /* durante il trascinamento col mouse lo scatto si spegne (combatterebbe con la mano), lo scorrimento diventa SECCO (scroll-behavior auto: con smooth ogni spostamento animerebbe e la traccia arrancherebbe dietro al mouse invece di seguirlo 1:1) e niente si seleziona; riaccende tutto sito.js a scheda raggiunta */ .carosello-traccia.trascina { scroll-snap-type: none; scroll-behavior: auto; user-select: none; } /* ---------- Blocco di presentazione (home, fra la barra della fiducia e i viaggi) ---- Titolo grande a sinistra, testo a destra. LE DUE COLONNE COPRONO LA STESSA ALTEZZA. Sono due caselle della stessa riga di griglia, quindi sono alte uguale per costruzione; il titolo pero' e' piu' corto del testo, e da solo lascerebbe un vuoto in fondo. Le sue righe sono e si distribuiscono sull'altezza della riga: il titolo comincia e finisce dove comincia e finisce il testo di fianco. */ .blocco-intro { display: grid; gap: 1.6rem 4rem; grid-template-columns: 1fr 1fr; } .blocco-intro h2 { margin: 0; display: flex; flex-direction: column; justify-content: space-between; } .blocco-intro h2 span { display: block; } /* Giustificato su richiesta (Vlad, 28/08/2026). Con la sillabazione: senza, il giustificato su una colonna da mezza pagina apre fiumi bianchi. */ .blocco-intro p { margin: 0; text-align: justify; hyphens: auto; } @media (max-width: 860px) { /* Incolonnate non c'e' piu' niente da pareggiare: il titolo torna un titolo normale, righe attaccate, altrimenti sul telefono si sfilaccerebbe in tre righe lontane. */ .blocco-intro { grid-template-columns: 1fr; gap: 1.2rem; } .blocco-intro h2 { display: block; } } /* ---------- "Cosa rende speciale un tour": tre colonne ---------- Qui di fianco alle colonne c'era il video di YouTube, con la finestra che si apriva al clic: tolto su richiesta del marketing il 18/08/2026, e con lui tutto il vestito che serviva solo a lui (riquadro, bollo di riproduzione, finestra). In git c'e'. */ .colonne-speciale { display: grid; gap: 2.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Icona e titolo al centro della colonna (chiesto dal marketing), il testo sotto resta giustificato: la testa della colonna fa da insegna, il testo si legge come un paragrafo. La centratura dell'icona la fa il margine automatico ai lati — il riquadro ha una misura sua, quindi "auto" ha spazio da spartire. */ .voce-speciale .icona { color: var(--blu); width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem; } .voce-speciale h3 { font-size: 1.08rem; margin-bottom: .5rem; text-align: center; } /* Giustificato, come chiesto, e NIENTE sillabazione: le parole non si spezzano col trattino a fine riga (chiesto dal marketing dopo averla vista su "cu-rate"). Il prezzo e' quello che la sillabazione serviva a evitare: in colonne strette il giustificato, senza poter spezzare, allarga gli spazi fra le parole e ogni tanto si vede una riga piu' arieggiata delle altre. Fra i due difetti il marketing ha scelto questo, ed e' anche quello che si nota meno leggendo. */ .voce-speciale p { font-size: .98rem; color: var(--testo-soft); line-height: 1.6; text-align: justify; hyphens: none; } @media (max-width: 700px) { .colonne-speciale { grid-template-columns: 1fr; gap: 2.4rem; } /* Su una colonna sola il giustificato non serve piu' e i buchi fra le parole si vedrebbero il doppio: si torna a bandiera. */ .voce-speciale p { text-align: left; } } /* ---------- Download: le locandine dei Firmati ---------- La pagina era prosa d'editor (titoletto, riga di date, due collegamenti mignon in fila): qui ogni locandina e' una scheda con i due comandi da bottone, e il PDF viene per primo perche' la pagina si chiama Download. */ /* ---------- Download: l'elenco delle locandine ---------- Una colonna, righe divise da un filetto, nessuna scatola. Le schede servono dove c'e' una fotografia da mostrare (Cataloghi); qui c'e' solo un nome, una riga di date e un PDF da prendere, e in una card da 19rem quella riga si spezzava in cinque monconi da 36 caratteri. Vedi la nota in cima a page-download.php. */ .elenco-locandine { list-style: none; margin-top: 2.75rem; border-top: 1px solid var(--hairline); } .voce-locandina { display: grid; gap: 1rem 3rem; padding: 1.7rem 0; border-bottom: 1px solid var(--hairline); } .voce-locandina h2 { font-size: 1.35rem; line-height: 1.25; } .voce-dati { color: var(--testo-soft); font-size: 1.0625rem; line-height: 1.6; max-width: var(--misura-lettura); margin-top: .4rem; } /* Date e prezzo sono gia' in grassetto dall'editor: e' l'unica cosa che si cerca davvero, e in questo colore risalta senza aggiungere niente. */ .voce-dati strong { color: var(--testo); font-weight: 600; } .voce-comandi { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; } .voce-comandi .btn .ico { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; } /* Il bottone non si stringe con la colonna: l'etichetta piu' la nota stanno su una riga sola fino a 560px, poi il bottone va a tutta larghezza. */ .btn-scarica { padding-left: 1.6rem; padding-right: 1.6rem; white-space: nowrap; } /* ⚠ Questi due @media stanno DOPO le regole base di .voce-comandi, non prima: messi sopra perdevano nella cascata a parita' di specificita' e i bottoni non si allargavano davvero (visto: 393px in una colonna da 400, gli otto ancora di larghezze diverse). */ /* Da 900px in su i comandi vanno a destra: le righe restano alte due sole righe di testo e gli otto bottoni si incolonnano sul filo destro, che e' il modo piu' veloce di scorrere un elenco di cose da scaricare. La colonna ha larghezza FISSA e i bottoni la riempiono: larghi quanto il loro contenuto venivano uno diverso dall'altro, perche' il peso del file cambia (475,1 KB, 1,0 MB, 859,9 KB). Etichette allineate a sinistra, cosi' le otto scritte partono dallo stesso punto. (Il distintivo "PDF" in fondo al bottone non c'e' piu' — tolto il 25/08 su ordine di Vlad.) */ @media (min-width: 900px) { .voce-locandina { grid-template-columns: minmax(0, 1fr) 25rem; align-items: center; } .voce-comandi { align-items: stretch; } /* Lo stiramento vale per il bottone, non per il collegamento sotto: tirato a 400px il suo rigo d'oro diventava una riga che attraversa mezza pagina e si leggeva come un divisorio, non come la sottolineatura di due parole. */ .voce-comandi .link-freccia { align-self: flex-start; } .voce-comandi .btn-scarica { justify-content: flex-start; } } /* Da telefono il bottone prende tutta la riga, di UNA riga sola. */ @media (max-width: 560px) { .btn-scarica { width: 100%; white-space: normal; padding-left: 1rem; padding-right: 1rem; } } /* Sotto i 380 "SCARICA LA LOCANDINA" in maiuscoletto spaziato non ci sta: a 320px chiedeva 309px in un contenitore da 288 e faceva sbordare la pagina di 5px. Si stringe la spaziatura, non il corpo — stesso rimedio gia' usato per .btn-solo e .btn-grande poco piu' sopra. Anche cosi' restava in bilico per un pelo: misurato a 320px servivano 256px esatti e ce n'erano 256, quindi bastava un arrotondamento per mandarlo a capo. L'ultimo filo lo danno il margine interno e lo stacco fra icona ed etichetta: su un bottone gia' largo quanto la riga non danno forma, rubano parole (la stessa ragione scritta per .btn-solo). */ @media (max-width: 380px) { .btn-scarica { letter-spacing: .04em; gap: .45rem; padding-left: .8rem; padding-right: .8rem; } } /* ---------- Recensioni ---------- */ .recensioni { display: flex; gap: 2.5rem; flex-wrap: wrap; } .recensione-badge { display: flex; align-items: center; gap: .9rem; } .recensione-badge .voto { font-family: 'Zalando Sans Expanded', sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--blu); } .recensione-badge .fonte { font-size: .92rem; color: var(--testo-soft); line-height: 1.35; } .stelle { color: var(--oro); letter-spacing: .08em; } .griglia-recensioni { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .card-recensione { background: var(--bianco); border: 1px solid var(--hairline); border-radius: var(--raggio); padding: 2rem 2rem 1.7rem; display: flex; flex-direction: column; gap: 1rem; } .card-recensione .virgolette { color: var(--oro); font-family: Georgia, serif; font-size: 3rem; line-height: .5; height: 1.4rem; } /* Quando la card porta una recensione vera di Trustpilot, al posto delle virgolette ci sono le SUE stelle verdi: un dato (il voto di quella recensione), non un ornamento. Stessa altezza di riga delle virgolette, cosi' le card vive e quelle di scorta restano allineate. */ .card-recensione .stelle-card { height: 1.4rem; display: flex; align-items: center; } .card-recensione footer a { color: inherit; text-underline-offset: .18em; } .card-recensione blockquote { font-size: 1.02rem; line-height: 1.65; color: var(--testo); } .card-recensione footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hairline); font-size: .9rem; color: var(--testo-soft); } .card-recensione footer strong { color: var(--blu); display: block; font-size: .98rem; } .citazione-tour { text-align: center; max-width: 46rem; margin: 0 auto; } .citazione-tour blockquote { font-family: 'Zalando Sans Expanded', sans-serif; font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 600; color: var(--blu); line-height: 1.4; } .citazione-tour figcaption { margin-top: 1.2rem; color: var(--testo-soft); font-size: .95rem; } /* ---------- Blog ---------- */ .card-blog { background: var(--bianco); border: 1px solid var(--hairline); border-radius: var(--raggio); overflow: hidden; text-decoration: none; color: var(--testo); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; } .card-blog:hover { transform: translateY(-4px); box-shadow: var(--ombra-hover); border-color: transparent; } .card-blog figure { aspect-ratio: 16 / 9; overflow: hidden; } .card-blog figure img { width: 100%; height: 100%; object-fit: cover; transition: var(--transizione-foto); } .card-blog:hover figure img { transform: scale(1.05); } /* gap .85rem e non .5rem (marketing, 24/08/2026): argomento, titolo e bottone erano appiccicati. È il gap a fare la distanza minima fra titolo e bottone — il bottone ha margin-top:auto e sulle schede dal titolo corto si stacca da solo, ma su quelle da tre righe è il gap l'unica cosa che lo tiene giù. */ .card-blog .corpo { padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .85rem; flex: 1; } /* L'ARGOMENTO AL POSTO DELLA DATA (marketing, 21/08/2026): stessa riga, stessa misura, stesso oro. La data diceva quando e' stato scritto, che su un pezzo del 2023 lo invecchia e basta; l'argomento dice di che parla. */ .card-blog .argomento { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-scuro); } /* TUTTE LE SCHEDE DELLA STESSA ALTEZZA, sulla misura di un titolo da tre righe (chiesto dal marketing). Servono tutt'e due le regole: il min-height tiene su le schede dal titolo corto — se no la loro riga si accorcia e la griglia va a gradini — e il clamp ferma a tre righe i titoli lunghi, che qui arrivano a cinque. Il titolo intero si legge sulla pagina dell'articolo, dove non lo taglia niente. Il 3 e l'1.35 vanno insieme: 1.35 e' la line-height qui sotto, e cambiandola va cambiato anche il calc. */ .card-blog h3, .card-blog h2 { font-size: 1.12rem; line-height: 1.35; min-height: calc(1.35em * 3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* "LEGGI L'ARTICOLO" CON LA FACCIA DI UN BOTTONE. E' uno , non un