/* ── RITOCCHI ── Correzioni successive alla messa in opera. Ultimo foglio caricato, così queste righe hanno sempre l'ultima parola. */ /* Telefoni stretti (320 px): il blocco dell'accompagnatrice, nei viaggi di gruppo, era una griglia a due colonne che non riusciva a stringersi sotto la larghezza della sua etichetta, e la pagina si scorreva di lato. Sotto i 400 px fotografia e testo si mettono uno sopra l'altro. */ .grp-bea figcaption{min-width:0} .grp-bea figcaption .grp-tag{white-space:normal} @media(max-width:400px){ .grp-bea{grid-template-columns:1fr;gap:14px;padding:14px;justify-items:start} .grp-bea-frame{max-width:190px} } /* ── L'APERTURA DEI VIAGGI DI GRUPPO ── La foto nuova è un salto di freestyle motocross: il soggetto è bellissimo ma il cielo è chiaro, e la velatura normale non bastava — il titolo bianco ci si perdeva dentro, soprattutto sul telefono, dove il taglio centra la moto invece del cielo scuro a sinistra. Stessa soluzione già adottata per Chi siamo e per Viaggi studio: una velatura un po' più decisa, solo qui. */ #groupPage .pgx-open-img{filter:brightness(.94)} #groupPage .pgx-open::after{background: linear-gradient(90deg,rgba(8,8,8,.62) 0%,rgba(8,8,8,.22) 50%,transparent 78%), linear-gradient(180deg,rgba(8,8,8,.5) 0%,rgba(8,8,8,.12) 24%,rgba(8,8,8,.82) 58%,#080808 100%)} /* Il testo d'apertura delle esperienze: "pgx-sub" si centra da solo, perché nelle sezioni di chiusura sta sotto un titolo centrato. Qui il titolo è allineato a sinistra, e il testo deve seguirlo. */ #grpExp .pgx-sub{margin-left:0} /* La fotografia della lista nozze di Valentina e Francesco è di Wikimedia Commons e va citata. La regola che il sito ha già vale solo dentro le pagine "pgx": questa la porta anche qui, identica. */ .nzl-page .pgx-photo-credit{position:absolute;right:14px;bottom:10px;z-index:2;margin:0; font-size:10px;line-height:1.4;color:rgba(255,255,255,.45);max-width:60%;text-align:right} .nzl-page .pgx-photo-credit a{color:rgba(255,255,255,.6)} @media(max-width:600px){.nzl-page .pgx-photo-credit{font-size:9.5px;max-width:78%}} /* ── IL RITRATTO DEGLI SPOSI ── Sta nella colonna del titolo, che è stretta: un ritratto verticale ci entra senza forzature. La cornice è quella di una stampa — passepartout bianco, un filo d'oro sottile, un'ombra lunga e morbida — e gli angoli restano quasi vivi, perché una fotografia stampata non ha gli angoli tondi. */ .nzc-foto{margin:28px 0 0;max-width:264px;padding:10px;background:#fff; border:1px solid rgba(201,164,103,.5);border-radius:2px; box-shadow:0 20px 44px rgba(60,45,25,.14),0 2px 6px rgba(60,45,25,.07)} .nzc-foto img{display:block;width:100%;height:auto;border-radius:1px} @media(min-width:861px){ /* Con la fotografia la colonna di sinistra diventa alta, e le due righe di presentazione restavano appese in cima a un mezzo metro di vuoto: meglio al centro, all'altezza del ritratto. */ .nzc-sec .nzc-two:has(.nzc-foto:not([hidden])) .nzc-about{align-self:center} } @media(max-width:860px){ /* a una colonna sola la cornice sta fra il titolo e le due righe: più piccola, così non spinge il testo troppo in basso */ .nzc-foto{max-width:220px;margin-top:24px} } @media(prefers-reduced-motion:no-preference){ .nzc-foto{transition:transform .6s cubic-bezier(.2,.7,.3,1)} .nzc-foto:hover{transform:translateY(-3px)} } /* ── GLI ANGOLI DELLE FOTOGRAFIE DEL TEAM ── La scheda di una persona è fatta di forme morbide: il ritratto è un cerchio, i pulsanti sono pastiglie. I riquadri delle fotografie avevano angoli quasi vivi (6px) e stonavano. Più tondi stanno al loro posto — e vale per tutti, non solo per Ivan, perché la fila delle persone deve restare una sola cosa. Ingrandita, invece, la fotografia torna a essere una fotografia: niente angoli smussati addosso all'immagine. */ .tmmpage-gallery-item{border-radius:16px} .tmmpage-gallery-item .team-photo-fallback{border-radius:inherit} #photoLightbox img{border-radius:0} /* Sei fotografie in una griglia che ne faceva stare quattro per riga: due restavano orfane sotto. Tre per riga le tiene in due file pari, e quelle di Lorenzo — che sono tre — in una fila sola. */ @media(min-width:760px){ .tmmpage-gallery{grid-template-columns:repeat(3,1fr)} } /* ── L'APERTURA DI CHI SIAMO ── La fotografia dell'agenzia è larga: su uno schermo stretto il taglio prende una fascia verticale, e al centro c'è soprattutto parete verde. Spostandolo verso destra entrano le cose che raccontano davvero quella sala — gli orologi delle capitali e il planisfero. */ @media(max-width:700px){ #aboutPage .pgx-open-img{object-position:68% center} } /* ── IL CONSENSO NEL MODULO DEI VIAGGI DI GRUPPO ── Questa riga ereditava le regole dei campi di testo: "ogni input del modulo è largo quanto il modulo e alto cinquanta" valeva anche per la casella da spuntare, che diventava un quadratone bianco largo settecento punti; e "ogni etichetta è in maiuscoletto spaziato" valeva anche per la frase del consenso, gridata in maiuscolo a undici punti. La riga del consenso non è un campo: è una casella piccola e una frase da leggere. Le altre pagine ce l'hanno già così — questa non ci arrivava perché la regola che la vestiva era scritta per la pagina delle nozze. */ .grp-form .grp-priv{display:flex;gap:12px;align-items:flex-start;margin-top:6px} .grp-form .grp-priv input[type="checkbox"]{ width:20px;height:20px;min-height:0;flex:none;margin:2px 0 0;padding:0; border:0;border-radius:4px;background:none;accent-color:var(--or)} .grp-form .grp-priv>span{ font-size:13px;font-weight:400;letter-spacing:normal;text-transform:none; line-height:1.6;color:var(--mu)} /* ══ IL PANNELLO "PERSONALIZZA" DEL BANNER ══ Tre pulsanti nel banner, e dietro il pulsante di mezzo un pannello con le voci. Il terzo pulsante ha lo stesso peso visivo degli altri due: le linee guida del Garante chiedono che rifiutare non sia più difficile che accettare, e "Personalizza" non deve sembrare la via comoda né quella scoraggiata. */ .consent-cust{background:none;color:var(--or)} .consent-cust:hover{opacity:.82} #consentPanel{max-width:1100px;margin:1.2rem auto 0;padding-top:1.2rem; border-top:1px solid var(--bd);max-height:46vh;overflow-y:auto;outline:none} #consentPanel[hidden]{display:none} #consentPanel .cn-h{font-family:var(--serif);font-size:1.02rem;color:#fff;margin:0 0 .5rem} #consentPanel .cn-p{font-size:.78rem;color:var(--mu);line-height:1.7;margin:0 0 1.1rem;max-width:68ch} .cn-cat{padding:.85rem 0;border-top:1px solid rgba(255,255,255,.07)} .cn-row{display:flex;align-items:center;gap:.7rem;margin:0;cursor:pointer} /* La casella resta una casella: venti punti per venti. Senza questa riga le regole generali dei campi la stiravano a tutta larghezza — è già successo una volta, nel modulo dei viaggi di gruppo. */ #consentPanel input[type="checkbox"]{ width:20px;height:20px;min-width:0;min-height:0;flex:none;margin:0;padding:0; border:0;border-radius:4px;background:none;accent-color:var(--or);cursor:pointer} #consentPanel input[type="checkbox"]:disabled{cursor:default;opacity:.55} .cn-nome{font-size:.84rem;color:#fff;letter-spacing:.01em} .cn-sempre{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mu); border:1px solid var(--bd);border-radius:20px;padding:.2rem .6rem} .cn-d{font-size:.75rem;color:var(--mu);line-height:1.7;margin:.5rem 0 0 2.3rem;max-width:72ch} .cn-nota{font-size:.75rem;color:var(--mu);line-height:1.7;margin:1rem 0 0;max-width:72ch; border-top:1px solid rgba(255,255,255,.07);padding-top:1rem} #consentPanel code{font-size:.72rem;opacity:.85} /* I due pulsanti restano in vista mentre si scorre il pannello: su un portatile il banner aperto è già alto, e un "Salva" che si trova solo scorrendo fino in fondo è un pulsante che metà delle persone non trova. */ .cn-azioni{display:flex;gap:.7rem;justify-content:flex-end;flex-wrap:wrap; position:sticky;bottom:0;margin-top:1.3rem;padding:.9rem 0 .2rem; background:rgb(10,10,10)} .cn-azioni::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px; background:linear-gradient(180deg,rgba(10,10,10,0),rgb(10,10,10));pointer-events:none} @media(max-width:700px){ #consentPanel{max-height:52vh} .cn-d,.cn-nota{margin-left:0;font-size:.73rem} /* In fila, non in colonna: sul telefono la barra dei pulsanti resta sempre visibile in fondo al pannello e due righe sarebbero metà schermo. */ .cn-azioni{flex-direction:row} .cn-azioni .consent-btn{flex:1;width:auto;padding:.7rem .4rem;font-size:.7rem} } /* ══ IL RIQUADRO AL POSTO DELLA MAPPA ══ Finché le mappe non sono consentite non si scarica nulla da cdnjs né da jsDelivr. Qui si spiega perché e si offre il pulsante che le attiva. */ .rv-velo{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:.55rem;padding:2.6rem 1.6rem;margin:0 auto;max-width:620px; min-height:220px;border:1px dashed var(--bd);border-radius:14px; background:rgba(255,255,255,.025)} .rv-velo-t{margin:0;font-size:.9rem;color:#fff;letter-spacing:.01em} .rv-velo-p{margin:0;font-size:.76rem;color:var(--mu);line-height:1.7;max-width:52ch} .rv-velo-b{margin-top:.5rem;padding:.7rem 1.7rem;border-radius:30px;font-size:.76rem; letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:inherit; border:1px solid var(--or);background:var(--or);color:#fff;transition:.25s} .rv-velo-b:hover{opacity:.85} @media(max-width:700px){ .rv-velo{padding:2rem 1.1rem;min-height:180px} } /* ══ IL MENU A PANNELLO ANCHE SUL COMPUTER ══ Le nove voci in fila non ci stavano: a 1280 pixel partivano attaccate al marchio e arrivavano a 1270, spingendo il selettore della lingua fuori dallo schermo — a 1024 finivano fuori anche loro. Servirebbero 1700 pixel buoni perché quella riga respiri, e quasi nessuno ha quello schermo. Da qui in poi il computer si comporta come il telefono: nella barra restano il marchio, le lingue, il pulsante Contattaci e il tasto del menu; tutto il resto sta nel pannello. */ @media(min-width:961px){ .nav-burger{display:flex} /* nella barra sopravvive solo il pulsante arancione */ .nav-links{gap:0} .nav-links>li{display:none} .nav-links>li:has(>.nav-cta){display:block} /* il marchio resta visibile sopra il pannello, accanto alla X */ .nav-left{position:relative;z-index:200} nav.open .nav-links{ display:flex;flex-direction:column;position:fixed;inset:0; background:var(--bk);justify-content:center;align-items:center; gap:clamp(1rem,2.4vh,1.7rem);z-index:99; padding:calc(72px + 2vh) 5vw 4vh;overflow-y:auto;overscroll-behavior:contain} nav.open .nav-links>li{display:block} nav.open .nav-links>li:first-child{margin-top:auto} nav.open .nav-links>li:last-child{margin-bottom:auto} nav.open .nav-links a{font-size:clamp(1rem,2.2vh,1.18rem)} nav.open .nav-links .nav-cta{padding:.7rem 2rem;display:inline-block} /* la voce Home serve anche qui: il pannello copre il marchio cliccabile */ nav.open .nav-home-item{display:block} /* le lingue passano dalla barra al pannello, come sul telefono */ nav.open .nav-right>.lang-switch{display:none} nav.open .nav-mobile-lang{display:flex;flex-direction:column;align-items:center; gap:.8rem;margin-top:clamp(1rem,2.6vh,2rem);padding-top:clamp(1rem,2.4vh,1.8rem); /* Non per tutta la larghezza dello schermo: sul telefono il blocco della lingua è largo quanto il pannello, qui diventerebbe una pastiglia di milleottocento pixel. */ width:min(420px,100%);border-top:1px solid rgba(255,255,255,.09)} nav.open .nav-mobile-lang::before{content:attr(data-label); font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.32)} nav.open .nav-mobile-lang .lang-switch{display:inline-flex!important;gap:6px;padding:5px; width:auto;align-self:center} nav.open .nav-mobile-lang .lang-btn{padding:.55rem 1.1rem;font-size:.72rem} body.menu-open{overflow:hidden} } /* ══ SU APPLE RESTANO LE TENDINE DI SISTEMA ══ Il file delle tendine, su iPhone, iPad e Mac, non costruisce niente e segna l'HTML con rv-apple: restano i