/* ============================================================ Base comune ai siti delle strutture. Fondo chiaro, fotografia grande, poco cromo: sono siti dove un ospite decide dove dormire, non la vetrina di un'azienda. Il colore e i caratteri NON stanno qui: ogni struttura carica prima il proprio tema.css, che definisce le variabili sotto. ============================================================ */ :root{ /* valori di riserva: se un tema dimenticasse una variabile il sito resta leggibile invece di diventare nero su nero */ --carta:#fdfcfa; --carta-2:#f4f0e9; --inchiostro:#23211e; --inchiostro-2:#5f5a53; --filo:rgba(35,33,30,.12); --filo-forte:rgba(35,33,30,.28); --accento:#a9873f; --accento-scuro:#8a6c2c; --accento-chiaro:#f0e6d2; --su-accento:#fff; --titolo:Georgia,'Times New Roman',serif; --testo:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --etichetta:var(--testo); --raggio:4px; --raggio-grande:8px; --ombra:0 18px 40px -24px rgba(35,33,30,.45); /* altezza della barra di prenotazione WuBook, misurata da site.js */ --barra-prenota:0px; /* altezza della testata fissa, misurata da site.js: il valore qui e' quello del computer, vale finche' lo script non ha misurato */ --testata:76px; } *{box-sizing:border-box;} /* Niente scorrimento di lato: il widget WuBook in fondo pagina e' a posizione fissa e su schermi stretti sborda, e senza questa regola si trascinerebbe dietro la pagina. Con "clip", non con "hidden". Il primo giro era overflow-x:hidden su e anche su , e questo rompeva in silenzio la testata: con tutti e due impostati il body diventa un contenitore di scorrimento a se', e position:sticky si aggancia a lui invece che alla finestra. La barra con camere, servizi e contatti scorreva via con la pagina, su tutti i siti, pur avendo scritto "sticky" nel CSS. Misurato: dopo 1600 px di scorrimento la testata stava a -1600 con hidden, a 0 con clip, anche a 360 px di larghezza e con il widget WuBook caricato, senza scorrimento di lato. "clip" taglia allo stesso modo ma non crea nessun contenitore. Dove non e' supportato (Safari prima della 16) resta hidden sul solo , che si trasferisce alla finestra e non rompe la testata. */ html{scroll-behavior:smooth;overflow-x:hidden;} /* Con la testata fissa un'ancora porterebbe il titolo dietro la barra: lo spazio si lascia una volta sola qui, per tutte le ancore di tutte le pagine, invece che sezione per sezione. */ html{scroll-padding-top:calc(var(--barra-prenota) + var(--testata));} @supports (overflow:clip){ html,body{overflow-x:clip;} } body{ margin:0;background:var(--carta);color:var(--inchiostro); font-family:var(--testo);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased; } /* height:auto e' obbligatorio, non decorativo: gli portano width e height nell'HTML (servono al browser per riservare lo spazio ed evitare che la pagina salti). Senza height:auto il browser stringe la larghezza al contenitore ma tiene l'altezza scritta nell'attributo, e la foto esce schiacciata. */ img,svg,iframe{max-width:100%;height:auto;display:block;} a{color:inherit;} h1,h2,h3,h4{font-family:var(--titolo);font-weight:400;line-height:1.1;margin:0;} p{margin:0 0 1em;} ::selection{background:var(--accento);color:var(--su-accento);} .wrap{max-width:1180px;margin:0 auto;padding:0 32px;} @media (max-width:760px){.wrap{padding:0 20px;} body{font-size:16px;}} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ---------- ritmo verticale ---------- */ .blocco{padding:96px 0;} .blocco.stretto{padding:64px 0;} .blocco.tinta{background:var(--carta-2);} /* Titolo di pagina: attaccato al contenuto che introduce, altrimenti fra i due si sommano due spaziature e resta in mezzo una fascia vuota. */ .blocco.attacco{padding-bottom:0;} @media (max-width:760px){.blocco{padding:64px 0;} .blocco.stretto{padding:44px 0;}} .occhiello{ font-family:var(--etichetta);font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--accento-scuro);margin:0 0 14px;font-weight:600; } h2.grande{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:20px;} h3.media{font-size:clamp(1.4rem,2.6vw,1.9rem);} .sommario{font-size:1.12rem;color:var(--inchiostro-2);max-width:62ch;} .centrato{text-align:center;} .centrato .sommario{margin-left:auto;margin-right:auto;} /* ---------- bottoni ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--etichetta);font-size:.86rem;letter-spacing:.1em; text-transform:uppercase;font-weight:600;text-decoration:none; padding:15px 30px;border-radius:var(--raggio);border:1px solid transparent; cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; } .btn:hover{transform:translateY(-2px);} .btn-pieno{background:var(--accento);color:var(--su-accento);} .btn-pieno:hover{background:var(--accento-scuro);} .btn-filo{border-color:var(--filo-forte);color:var(--inchiostro);background:transparent;} .btn-filo:hover{border-color:var(--accento);color:var(--accento-scuro);} .btn-chiaro{background:rgba(255,255,255,.94);color:var(--inchiostro);} .btn-chiaro:hover{background:#fff;} /* ---------- testata ---------- */ header.sito{ position:sticky;top:var(--barra-prenota);z-index:900; background:rgba(253,252,250,.93);backdrop-filter:blur(10px); border-bottom:1px solid var(--filo); } .navbar{display:flex;align-items:center;gap:26px;height:76px;} .marchio{ font-family:var(--titolo);font-size:1.22rem;letter-spacing:.02em; text-decoration:none;margin-right:auto;line-height:1.15; } .marchio small{ display:block;font-family:var(--etichetta);font-size:.6rem; letter-spacing:.24em;text-transform:uppercase;color:var(--inchiostro-2); } nav.voci{display:flex;gap:26px;} nav.voci a{ font-family:var(--etichetta);font-size:.84rem;letter-spacing:.04em; text-decoration:none;color:var(--inchiostro-2);padding:4px 0; border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease; } nav.voci a:hover{color:var(--inchiostro);} nav.voci a.qui{color:var(--inchiostro);border-bottom-color:var(--accento);} .lingue{position:relative;} .lingue select{ appearance:none;background:transparent;border:1px solid var(--filo-forte); border-radius:var(--raggio);color:var(--inchiostro-2);font-family:var(--etichetta); font-size:.78rem;letter-spacing:.08em;padding:8px 26px 8px 10px;cursor:pointer; } .lingue::after{ content:'';position:absolute;right:10px;top:50%;width:5px;height:5px; border-right:1px solid var(--inchiostro-2);border-bottom:1px solid var(--inchiostro-2); transform:translateY(-70%) rotate(45deg);pointer-events:none; } .btn-testata{padding:12px 22px;font-size:.78rem;} #apri-menu{ display:none;background:none;border:1px solid var(--filo-forte); border-radius:var(--raggio);color:var(--inchiostro);font-family:var(--etichetta); font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;cursor:pointer; } @media (max-width:960px){ #apri-menu{display:block;order:3;} .navbar{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:14px;gap:14px;} .marchio{margin-right:auto;} .btn-testata{order:2;} nav.voci{ order:5;flex-basis:100%;flex-direction:column;gap:0;display:none; border-top:1px solid var(--filo);padding-top:10px; } nav.voci.aperto{display:flex;} nav.voci a{padding:12px 0;border-bottom:1px solid var(--filo);font-size:.95rem;} .lingue{order:4;} } /* Sotto i 560 px marchio, "Prenota" e "Menu" non ci stanno affiancati e la riga sfonda lo schermo, trascinandosi dietro tutta la pagina. Si stringe quello che si puo' e il sottotitolo del marchio sparisce: e' un dettaglio, il pulsante di prenotazione no. */ @media (max-width:560px){ .navbar{gap:10px;} .marchio{font-size:1.05rem;} .marchio small{display:none;} .btn-testata{padding:11px 16px;font-size:.72rem;} #apri-menu{padding:9px 11px;font-size:.68rem;} .lingue select{padding:7px 22px 7px 8px;font-size:.72rem;} } /* ---------- apertura ---------- */ .apertura{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;} .apertura .sfondo{position:absolute;inset:0;overflow:hidden;} .apertura .sfondo img{width:100%;height:100%;object-fit:cover;} /* Due sfumature invece di una. Le foto delle camere sono chiare e con una sola sfumatura dal basso il titolo bianco spariva a meta' frase: la fascia scura da sinistra tiene leggibile il testo qualunque foto ci sia sotto. */ .apertura .velo{ position:absolute;inset:0; background: linear-gradient(to right,rgba(0,0,0,.66) 0%,rgba(0,0,0,.38) 44%,rgba(0,0,0,0) 76%), linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.14) 46%,rgba(0,0,0,.1) 100%); } /* Sul telefono il testo occupa tutta la larghezza: la fascia laterale non basta piu' e serve una velatura uniforme. */ @media (max-width:760px){ .apertura .velo{background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.46) 55%,rgba(0,0,0,.32) 100%);} } .apertura .wrap{position:relative;padding-top:110px;padding-bottom:66px;color:#fff;width:100%;} .apertura .occhiello{color:rgba(255,255,255,.86);} .apertura h1{ font-size:clamp(2.6rem,7vw,5rem);margin-bottom:18px; text-shadow:0 2px 30px rgba(0,0,0,.35);max-width:16ch; } .apertura .sommario{color:rgba(255,255,255,.92);max-width:52ch;font-size:1.16rem;} .apertura .azioni{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;} /* riga dei dati concreti sotto l'apertura: posizione, ospiti, prezzo */ .dati{display:flex;flex-wrap:wrap;border-top:1px solid var(--filo);background:var(--carta);} .dati > div{ flex:1 1 200px;padding:26px 30px;border-right:1px solid var(--filo); } .dati > div:last-child{border-right:none;} .dati dt{ font-family:var(--etichetta);font-size:.68rem;letter-spacing:.18em; text-transform:uppercase;color:var(--inchiostro-2);margin-bottom:6px; } .dati dd{margin:0;font-family:var(--titolo);font-size:1.24rem;} @media (max-width:760px){.dati > div{flex-basis:50%;padding:20px;border-bottom:1px solid var(--filo);}} /* ---------- testo + foto affiancati ---------- */ .duetto{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;} .duetto > *{min-width:0;} .duetto.rovesciato .testo{order:2;} .duetto img{border-radius:var(--raggio-grande);box-shadow:var(--ombra);} @media (max-width:900px){ .duetto{grid-template-columns:1fr;gap:36px;} .duetto.rovesciato .testo{order:0;} } /* ---------- griglia di schede ---------- */ .griglia{display:grid;gap:30px;} .griglia.tre{grid-template-columns:repeat(3,1fr);} .griglia.due{grid-template-columns:repeat(2,1fr);} .griglia.quattro{grid-template-columns:repeat(4,1fr);} @media (max-width:980px){.griglia.tre,.griglia.quattro{grid-template-columns:repeat(2,1fr);}} @media (max-width:640px){.griglia.tre,.griglia.due,.griglia.quattro{grid-template-columns:1fr;}} .scheda{ background:var(--carta);border:1px solid var(--filo);border-radius:var(--raggio-grande); overflow:hidden;display:flex;flex-direction:column; transition:transform .25s ease,box-shadow .25s ease; } .scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra);} .scheda .foto{aspect-ratio:4/3;overflow:hidden;background:var(--carta-2);} .scheda .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .scheda:hover .foto img{transform:scale(1.04);} .scheda .corpo{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1;} .scheda h3{font-size:1.3rem;} .scheda p{margin:0;color:var(--inchiostro-2);font-size:.97rem;} .scheda .prezzo{ margin-top:auto;font-family:var(--etichetta);font-size:.8rem;letter-spacing:.1em; text-transform:uppercase;color:var(--accento-scuro);font-weight:600; } /* ---------- camera / appartamento con galleria ---------- */ .unita{ display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start; padding:56px 0;border-top:1px solid var(--filo); } .unita:first-of-type{border-top:none;padding-top:0;} /* Una colonna della griglia non scende sotto la larghezza minima del suo contenuto: con dodici miniature in fila la colonna delle foto pretendeva mille pixel e spingeva il testo fuori dallo schermo. La striscia scorre gia' per conto suo, quindi puo' stringersi quanto serve. */ .unita > *{min-width:0;} @media (max-width:900px){.unita{grid-template-columns:1fr;gap:28px;}} .galleria .principale{ aspect-ratio:4/3;overflow:hidden;border-radius:var(--raggio-grande); background:var(--carta-2);cursor:zoom-in; } .galleria .principale img{width:100%;height:100%;object-fit:cover;} .strisce{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;} .strisce img{ width:76px;height:56px;object-fit:cover;border-radius:var(--raggio);cursor:pointer; opacity:.55;transition:opacity .2s ease,outline-color .2s ease; outline:2px solid transparent;outline-offset:2px;flex:0 0 auto; } .strisce img:hover{opacity:.85;} .strisce img.scelta{opacity:1;outline-color:var(--accento);} .unita .dettagli h3{font-size:clamp(1.6rem,3vw,2.15rem);margin-bottom:6px;} .zona{ font-family:var(--etichetta);font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:var(--inchiostro-2);display:block;margin-bottom:12px; } .tacche{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;} .tacca{ font-family:var(--etichetta);font-size:.74rem;letter-spacing:.05em; background:var(--accento-chiaro);color:var(--accento-scuro); border-radius:100px;padding:6px 14px;font-weight:600; } .elenco-servizi{list-style:none;padding:0;margin:0 0 20px;columns:2;column-gap:26px;} .elenco-servizi li{ font-size:.94rem;color:var(--inchiostro-2);padding:5px 0 5px 20px;position:relative; break-inside:avoid; } .elenco-servizi li::before{ content:'';position:absolute;left:0;top:.78em;width:7px;height:7px; border-radius:50%;background:var(--accento); } @media (max-width:560px){.elenco-servizi{columns:1;}} .riga-prezzo{ display:flex;align-items:baseline;gap:10px;margin-bottom:18px; font-family:var(--titolo);font-size:1.5rem; } .riga-prezzo small{ font-family:var(--etichetta);font-size:.74rem;letter-spacing:.12em; text-transform:uppercase;color:var(--inchiostro-2); } .azioni-unita{display:flex;gap:12px;flex-wrap:wrap;} /* ---------- mosaico (colazione) ---------- */ .mosaico{ display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:34px; } .mosaico img{ width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--raggio); transition:transform .4s ease; } .mosaico img:hover{transform:scale(1.03);} /* La prima e la settima prendono il doppio: una griglia tutta uguale sembra un catalogo, e queste sono fotografie di cibo, vanno guardate. */ .mosaico img:first-child,.mosaico img:nth-child(7){grid-column:span 2;grid-row:span 2;aspect-ratio:1/1;} @media (max-width:900px){.mosaico{grid-template-columns:repeat(4,1fr);}} @media (max-width:560px){ .mosaico{grid-template-columns:repeat(2,1fr);} .mosaico img:first-child,.mosaico img:nth-child(7){grid-column:span 2;grid-row:auto;} } /* ---------- servizi ---------- */ .gruppo-servizi{margin-bottom:54px;} .gruppo-servizi h3{ font-family:var(--etichetta);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase; color:var(--accento-scuro);font-weight:700;padding-bottom:12px; border-bottom:1px solid var(--filo);margin-bottom:24px; } .servizi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 34px;} @media (max-width:860px){.servizi{grid-template-columns:repeat(2,1fr);}} @media (max-width:540px){.servizi{grid-template-columns:1fr;}} .servizio{display:flex;gap:14px;align-items:flex-start;} .servizio .segno{ flex:0 0 34px;height:34px;border-radius:50%;background:var(--accento-chiaro); display:grid;place-items:center;color:var(--accento-scuro);font-size:.9rem;font-weight:700; } .servizio b{display:block;font-weight:600;font-size:.98rem;} .servizio span{font-size:.9rem;color:var(--inchiostro-2);} /* ---------- quello che qui non c'e' ---------- Righe piu' lunghe e piu' distanziate del solito elenco servizi: sono frasi da leggere, non voci da spuntare. */ .chiaro-e-tondo{list-style:none;padding:0;margin:0;max-width:76ch;} .chiaro-e-tondo li{ position:relative;padding:16px 0 16px 30px;border-bottom:1px solid var(--filo); font-size:1.02rem;line-height:1.62;color:var(--inchiostro-2); } .chiaro-e-tondo li:last-child{border-bottom:none;} .chiaro-e-tondo li::before{ content:'';position:absolute;left:2px;top:1.55em; width:14px;height:1px;background:var(--accento); } /* ---------- dove siamo ---------- */ .mappa{ position:relative;aspect-ratio:16/9;border-radius:var(--raggio-grande); overflow:hidden;background:var(--carta-2);border:1px solid var(--filo); } .mappa iframe{width:100%;height:100%;border:0;} .muro-consenso{ position:absolute;inset:0;background:var(--carta-2); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:16px;text-align:center;padding:26px; } .muro-consenso p{margin:0;max-width:40ch;color:var(--inchiostro-2);font-size:.92rem;} .distanze{list-style:none;padding:0;margin:0;} .distanze li{ display:flex;justify-content:space-between;gap:18px;padding:13px 0; border-bottom:1px solid var(--filo);font-size:.98rem; } .distanze li span:last-child{ font-family:var(--etichetta);color:var(--inchiostro-2);white-space:nowrap;font-size:.9rem; } .arrivo{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;} @media (max-width:760px){.arrivo{grid-template-columns:1fr;}} .arrivo h4{ font-family:var(--etichetta);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase; color:var(--accento-scuro);font-weight:700;margin-bottom:8px; } .arrivo p{font-size:.96rem;color:var(--inchiostro-2);} /* ---------- info per il soggiorno ---------- La pagina dietro le icone della mail. Si apre quasi sempre dal telefono, spesso gia' in viaggio: indice a riquadri grandi da toccare, risposta secca in cima a ogni sezione (i "fatti"), spiegazione sotto. */ .voce-info{padding:40px 0;} .voce-info.tinta{background:var(--carta-2);} .apertura-info{padding:52px 0 44px;} @media (max-width:760px){.voce-info{padding:30px 0;} .apertura-info{padding:36px 0 32px;}} #argomenti h1{margin-bottom:12px;} #argomenti .sommario{font-size:1rem;} /* Indice: icona a sinistra, titolo e sintesi a destra. La sintesi e' la risposta breve (orari, prezzi): chi ha fretta si ferma qui. */ .indice-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px;} @media (max-width:900px){.indice-info{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.indice-info{grid-template-columns:1fr;gap:8px;}} .indice-info a{ display:flex;align-items:center;gap:14px;padding:12px 14px; border:1px solid var(--filo);border-radius:var(--raggio-grande);background:var(--carta); text-decoration:none;transition:border-color .2s ease; } .indice-info a:hover,.indice-info a:focus-visible{border-color:var(--accento);} .indice-info b{display:block;font-weight:600;font-size:.96rem;line-height:1.25;} .indice-info small{display:block;font-size:.84rem;color:var(--inchiostro-2);line-height:1.35;margin-top:2px;} .icona-info{ width:40px;height:40px;border-radius:50%;background:var(--accento-chiaro); color:var(--accento-scuro);display:grid;place-items:center;flex:none; } .icona-info svg{ width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round; } /* Sezioni: titolo a sinistra, contenuto a destra; sotto i 900px uno sopra l'altro. */ .voce-info .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:40px;align-items:start;} #argomenti .wrap{display:block;} @media (max-width:900px){.voce-info .wrap{grid-template-columns:1fr;gap:14px;}} .testata-info{display:flex;align-items:center;gap:12px;} .testata-info h2{font-size:clamp(1.45rem,2.4vw,1.8rem);flex:1;} .torna-su{color:var(--inchiostro-2);text-decoration:none;font-size:1rem;padding:4px 8px;} .torna-su:hover{color:var(--accento-scuro);} .corpo-info > p{color:var(--inchiostro-2);max-width:68ch;font-size:.97rem;margin-bottom:.8em;} .fatti-info{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;margin:0 0 14px;} .fatti-info.una{grid-template-columns:1fr;} @media (max-width:540px){.fatti-info{grid-template-columns:1fr;}} .fatti-info div{padding:8px 0;border-bottom:1px solid var(--filo);} .fatti-info dt{ font-family:var(--etichetta);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase; color:var(--accento-scuro);font-weight:700; } .fatti-info dd{margin:0;font-size:1rem;} .passi-info{counter-reset:passo;list-style:none;padding:0;margin:4px 0 12px;max-width:68ch;} .passi-info li{ counter-increment:passo;position:relative;padding:1px 0 8px 36px; color:var(--inchiostro-2);font-size:.95rem; } .passi-info li::before{ content:counter(passo);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%; border:1px solid var(--accento);color:var(--accento-scuro);display:grid;place-items:center; font-size:.76rem;font-weight:600; } .avviso-info{ border-left:3px solid var(--accento);background:var(--accento-chiaro);color:var(--inchiostro); padding:10px 14px;border-radius:var(--raggio);font-size:.92rem;max-width:68ch;margin:0; } .link-info{color:var(--accento-scuro);font-weight:500;} .azioni-info{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;} /* Video verticale (Short): largo come un telefono, non come la colonna. */ .video-info{ position:relative;width:100%;max-width:300px;aspect-ratio:9/16;margin:6px 0 6px; border-radius:var(--raggio-grande);overflow:hidden;background:var(--inchiostro); } .video-info iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .avvia-video{ position:absolute;inset:0;width:100%;border:0;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; padding:20px;background:var(--inchiostro);color:var(--carta); font-family:var(--etichetta);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600; } .avvia-video .play{ width:64px;height:64px;border-radius:50%;background:var(--accento);color:var(--su-accento); display:grid;place-items:center;font-size:1.4rem;padding-left:4px;transition:transform .2s ease; } .avvia-video:hover .play,.avvia-video:focus-visible .play{transform:scale(1.08);} .link-youtube{font-size:.85rem;margin:0 0 12px;} .voce-info .arrivo{gap:18px 30px;} .voce-info .arrivo p{margin-bottom:.4em;} /* ---------- contatti ---------- */ .contatti{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;} @media (max-width:900px){.contatti{grid-template-columns:1fr;gap:40px;}} .recapiti{list-style:none;padding:0;margin:0 0 30px;} .recapiti li{padding:16px 0;border-bottom:1px solid var(--filo);} .recapiti dt{ font-family:var(--etichetta);font-size:.68rem;letter-spacing:.18em; text-transform:uppercase;color:var(--inchiostro-2);margin-bottom:4px; } .recapiti dd{margin:0;font-size:1.08rem;} .recapiti a{color:var(--accento-scuro);text-decoration:none;border-bottom:1px solid var(--filo-forte);} .recapiti a:hover{border-bottom-color:var(--accento);} .modulo{display:flex;flex-direction:column;gap:22px;} .campo{display:flex;flex-direction:column;gap:7px;} .campo label{ font-family:var(--etichetta);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--inchiostro-2); } .campo input,.campo textarea,.campo select{ font-family:var(--testo);font-size:1rem;color:var(--inchiostro); background:var(--carta);border:1px solid var(--filo-forte);border-radius:var(--raggio); padding:13px 14px;width:100%;transition:border-color .2s ease; } .campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--accento);} .campo textarea{resize:vertical;min-height:120px;} .coppia{display:grid;grid-template-columns:1fr 1fr;gap:22px;} @media (max-width:560px){.coppia{grid-template-columns:1fr;}} .consenso{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--inchiostro-2);} .consenso input{width:auto;margin-top:4px;flex:0 0 auto;} .esito{font-size:.9rem;color:var(--accento-scuro);min-height:1.4em;} /* L'esca del modulo: fuori dallo schermo, non display:none. I programmi che riempiono i moduli in automatico saltano quello che il CSS toglie del tutto, e l'esca serve proprio a farsi riempire da loro. */ .esca{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;} /* La spunta di Turnstile: arriva in un iframe di altezza fissa, gli si lascia il posto perche' comparendo non faccia saltare il modulo sotto il dito di chi sta gia' scrivendo. */ .cf-turnstile{min-height:65px;} /* Un campo con "hidden" non sparisce se una regola d'autore gli da' un display: quella d'autore vince su quella del browser. */ [hidden]{display:none !important;} /* ---------- chiusura con richiamo alla prenotazione ---------- */ .chiusura{background:var(--carta-2);text-align:center;padding:96px 0;} .chiusura h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:16px;} .chiusura .sommario{margin:0 auto 30px;} /* ---------- pie' di pagina ---------- */ footer.sito{background:var(--inchiostro);color:rgba(255,255,255,.72);padding:64px 0 30px;font-size:.94rem;} footer.sito a{color:rgba(255,255,255,.72);text-decoration:none;} footer.sito a:hover{color:#fff;} .colonne{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;} @media (max-width:860px){.colonne{grid-template-columns:1fr 1fr;gap:30px;}} @media (max-width:520px){.colonne{grid-template-columns:1fr;}} .colonne h4{ font-family:var(--etichetta);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.5);margin-bottom:14px;font-weight:700; } .colonne .voce{display:block;padding:5px 0;} .marchio-pie{font-family:var(--titolo);font-size:1.3rem;color:#fff;margin-bottom:12px;display:block;} .base-pie{ border-top:1px solid rgba(255,255,255,.14);padding-top:22px; display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.82rem;color:rgba(255,255,255,.5); } .riapri-cookie{cursor:pointer;text-decoration:underline;} /* ---------- lente d'ingrandimento sulle foto ---------- */ #lente{ position:fixed;inset:0;z-index:9800;background:rgba(18,16,14,.94); display:none;align-items:center;justify-content:center;padding:40px; } #lente.aperta{display:flex;} #lente img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:var(--raggio);} #lente button{ position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28); color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.3rem;cursor:pointer; display:grid;place-items:center;transition:background-color .2s ease; } #lente button:hover{background:rgba(255,255,255,.24);} #lente .prec{left:24px;top:50%;transform:translateY(-50%);} #lente .succ{right:24px;top:50%;transform:translateY(-50%);} #lente .chiudi{right:24px;top:24px;} #lente .conta{ position:absolute;bottom:26px;left:50%;transform:translateX(-50%); color:rgba(255,255,255,.66);font-family:var(--etichetta);font-size:.8rem;letter-spacing:.14em; } @media (max-width:640px){ #lente{padding:14px;} #lente button{width:44px;height:44px;} #lente .prec{left:10px;} #lente .succ{right:10px;} #lente .chiudi{right:10px;top:10px;} } /* ---------- fascia cookie ---------- */ #fascia-cookie{ position:fixed;left:16px;right:16px;bottom:16px;z-index:9600;max-width:680px;margin:0 auto; background:var(--carta);border:1px solid var(--filo-forte);border-radius:var(--raggio-grande); padding:22px 24px;box-shadow:0 24px 60px -18px rgba(0,0,0,.4);display:none; } #fascia-cookie.visibile{display:block;} #fascia-cookie h4{ font-family:var(--etichetta);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--accento-scuro);font-weight:700;margin-bottom:8px; } #fascia-cookie p{font-size:.86rem;color:var(--inchiostro-2);margin-bottom:16px;} #fascia-cookie a{color:var(--accento-scuro);} #fascia-cookie .scelte{display:flex;gap:10px;flex-wrap:wrap;} #fascia-cookie button{ font-family:var(--etichetta);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase; padding:11px 18px;border-radius:var(--raggio);cursor:pointer;font-weight:600; } #fascia-cookie .tutto{background:var(--accento);color:var(--su-accento);border:none;} #fascia-cookie .minimo{background:none;color:var(--inchiostro);border:1px solid var(--filo-forte);} /* Il widget WuBook in fondo pagina ha uno z-index altissimo: senza questo scostamento la fascia cookie ci finisce sotto e non si riesce a chiuderla. L'altezza vera la misura site.js, qui c'e' solo il valore di partenza. */ body.con-widget #fascia-cookie{bottom:calc(var(--widget-basso, 0px) + 16px);} /* La barra di prenotazione e' fissa in fondo allo schermo: senza uno spazio alto quanto lei, a fine pagina copre l'ultima riga del footer (copyright e preferenze cookie). Prima non si notava perche' sotto il footer c'era un secondo widget WuBook, costruito per sbaglio, che faceva da spessore. L'altezza la misura site.js: sui siti senza barra vale zero. */ body.con-widget{padding-bottom:var(--widget-basso, 0px);} /* punto d'innesto del widget di prenotazione a fondo pagina */ .riquadro-widget{ max-width:920px;margin:0 auto;min-height:80px; } /* ---------- widget WuBook ---------- Il widget arriva con un arancione suo che non c'entra con nessuno dei quattro siti, e siccome sta fisso in fondo allo schermo e' la prima cosa che si vede. Il markup e' nel documento (non in un iframe), quindi si puo' vestire: si ridipinge il pulsante e la fascia con i colori del tema. Sono selettori su classi di terze parti: se WuBook le rinomina, il widget torna arancione ma continua a funzionare. */ .kw_container_fixed_bottom{ border-top:1px solid var(--filo) !important; background:var(--carta) !important; box-shadow:0 -10px 30px -18px rgba(0,0,0,.35) !important; } /* La classe ripetuta (.kw_button.kw_button) alza la specificita' senza cambiare cosa viene selezionato: il foglio di stile di WuBook arriva dopo il nostro e usa anche lui !important, quindi a parita' di peso vincerebbe lui e il pulsante resterebbe arancione. */ .kw_container .kw_button.kw_button, .kw_button.kw_button{ background:var(--accento) !important; border-color:var(--accento) !important; color:var(--su-accento) !important; border-radius:var(--raggio) !important; font-family:var(--etichetta) !important; letter-spacing:.08em; } .kw_container .kw_button.kw_button:hover, .kw_button.kw_button:hover{background:var(--accento-scuro) !important;} /* Il "Prenota" grande non e' un .kw_button ma un div .kw_book_button, ed e' quello arancione che si vede da lontano: e' il pezzo che conta ridipingere. */ .kw_book_button.kw_book_button{ background:var(--accento) !important; color:var(--su-accento) !important; border-radius:var(--raggio) !important; } .kw_book_button.kw_book_button:hover{background:var(--accento-scuro) !important;} .kw_book_button.kw_book_button *{color:var(--su-accento) !important;} .kw_book_button.kw_book_button .kw_book_button__title{ font-family:var(--etichetta) !important;letter-spacing:.08em; } .kw_book_button__title{font-weight:700;} .kw_book_button__desc, .kw_container .kw_book_button__desc{color:var(--inchiostro-2) !important;} .kw_form_dates__input, .kw_container .kw_input{font-family:var(--testo) !important;color:var(--inchiostro) !important;} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} html{scroll-behavior:auto;} .btn:hover,.scheda:hover{transform:none;} }