/* SK Active — ritocchi minimi per le pagine generate dal page-builder. Il grosso dello stile arriva da Website.css: qui solo cio' che nella SPA e' fornito dal contenitore React e che in una pagina PHP manca. */ .sk-cms-main { display: block; } .sk-cms-main > .page-header:first-child { margin-top: 0; } .sk-embed { max-width: 1180px; margin: 0 auto; } .sk-embed iframe { max-width: 100%; border: 0; } /* Le card senza link non devono sembrare cliccabili */ .sk-cms-main .room-card:not(.is-clickable) { cursor: default; } /* Player esterni (YouTube/Vimeo): le regole di .sk-embed-video NON stanno qui. Le inietta sk-media-embed.js, perche' quel modulo gira anche sulle pagine React, che questo foglio non lo caricano. Una definizione sola, in un posto solo. */ /* Calendario eventi: righe con filetto dell'elemento, sobrio come il resto. */ .sk-eventi{max-width:1180px;margin:0 auto;display:grid;gap:.6rem} .sk-evento{display:flex;align-items:baseline;gap:1.6rem;padding:1.1rem 1.3rem; background:var(--bg-elevated,#fff);border:1px solid var(--border);border-left-width:3px; border-radius:2px;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s} a.sk-evento:hover{transform:translateX(3px);border-left-color:var(--accent)} .sk-evento.tint-acqua{border-left-color:#347176} .sk-evento.tint-aria{border-left-color:#747748} .sk-evento.tint-fuoco{border-left-color:#973b2e} .sk-evento.tint-terra{border-left-color:#803a27} .sk-evento.tint-metallo{border-left-color:#5a6270} .sk-evento-data{flex:0 0 190px;font-family:var(--font-body);font-weight:600;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle)} .sk-evento-corpo{flex:1 1 auto;min-width:0} .sk-evento-titolo{font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.25;color:var(--fg)} .sk-evento-luogo{font-family:var(--font-body);font-size:.85rem;color:var(--accent);margin-top:.15rem} .sk-evento-testo{font-family:var(--font-body);font-weight:300;font-size:.92rem;color:var(--fg-muted);margin-top:.4rem} .sk-evento-freccia{flex:0 0 auto;color:var(--accent);font-size:1.1rem} .section.dark .sk-evento{background:rgba(241,240,236,.04);border-color:rgba(241,240,236,.12)} .section.dark .sk-evento-titolo{color:var(--fg-on-dark)} .section.dark .sk-evento-testo{color:var(--fg-on-dark-muted)} @media (max-width:700px){.sk-evento{flex-direction:column;gap:.5rem}.sk-evento-data{flex:none}} /* Landing monolingua: testata e chiusura essenziali, senza la nav del sito. Poche regole, perché la pagina deve portare a un contatto, non a navigare. */ .sk-landing-top{position:sticky;top:0;z-index:40;display:flex;align-items:center; justify-content:space-between;gap:1rem;padding:.9rem 1.4rem; background:var(--bg-inverse,#1a2a44)} .sk-landing-logo{display:flex;align-items:center;gap:.8rem;text-decoration:none} /* Il marchio e' scuro: su fondo navy va invertito, come fa la nav del sito quando sta sopra l'overlay. */ .sk-landing-logo img{display:block;height:40px;width:auto;max-width:56px; object-fit:contain;filter:brightness(0) invert(1)} .sk-landing-nome{font-family:var(--font-body);font-weight:700;font-size:.72rem; letter-spacing:.3em;text-transform:uppercase;color:var(--fg-on-dark,#f1f0ec);line-height:1} .sk-landing-nome span{display:block;font-weight:400;font-size:.55rem;opacity:.6; margin-top:4px;letter-spacing:.22em} /* Il nome resta scritto da sinistra: e' un marchio, non una parola da tradurre. */ [dir=rtl] .sk-landing-nome{direction:ltr;text-align:right} .sk-landing-cta{white-space:nowrap} /* Il colore va messo sui FIGLI, non solo sul contenitore: Website.css ha una regola globale su p e a (--fg-muted, cioe' navy trasparente) che vince sull'ereditarieta'. Su fondo navy il risultato era testo invisibile. */ .sk-landing-foot{background:var(--bg-inverse,#1a2a44);padding:2.6rem 1.4rem} .sk-landing-foot-in{max-width:1180px;margin:0 auto;line-height:1.9;font-size:.95rem} .sk-landing-foot-in p{color:var(--fg-on-dark-muted,rgba(241,240,236,.7));margin:0} .sk-landing-foot-in p strong{color:var(--fg-on-dark,#f1f0ec)} .sk-landing-foot a,.sk-landing-foot-in p a{color:var(--fg-on-dark,#f1f0ec);text-decoration:none; border-bottom:1px solid rgba(241,240,236,.35)} .sk-landing-foot a:hover{border-bottom-color:var(--accent,#b08d57)} /* Numeri, indirizzi e email restano da sinistra a destra anche in una pagina araba. */ .ltr{unicode-bidi:isolate;direction:ltr;display:inline-block} /* Modulo di iscrizione: campi ampi, tocco comodo, nessuna sorpresa su mobile. */ .sk-iscrizione{max-width:560px;margin:0 auto;display:grid;gap:1rem} .sk-iscrizione-campo{display:grid;gap:.4rem} .sk-iscrizione-campo span{font-family:var(--font-body);font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--fg-muted)} .sk-iscrizione input[type=text],.sk-iscrizione input[type=email]{ width:100%;padding:.85rem 1rem;font:inherit;font-size:1rem;color:var(--fg); background:var(--bg-elevated,#fff);border:1px solid var(--border);border-radius:2px;min-height:48px} .sk-iscrizione input:focus-visible{outline:2px solid var(--sk-raw-oak,#b08d57);outline-offset:2px} .sk-iscrizione-privacy{display:flex;gap:.7rem;align-items:flex-start; font-family:var(--font-body);font-size:.88rem;line-height:1.6;color:var(--fg-muted)} .sk-iscrizione-privacy input{margin-top:.25rem;width:18px;height:18px;flex:0 0 auto} .sk-iscrizione .btn-primary{justify-self:start;min-height:48px} .section.dark .sk-iscrizione-campo span,.section.dark .sk-iscrizione-privacy{color:var(--fg-on-dark-muted)} .section.dark .sk-iscrizione input[type=text],.section.dark .sk-iscrizione input[type=email]{ background:rgba(241,240,236,.06);border-color:rgba(241,240,236,.22);color:var(--fg-on-dark)} [dir=rtl] .sk-iscrizione .btn-primary{justify-self:end} @media (max-width:600px){.sk-iscrizione .btn-primary{justify-self:stretch;text-align:center}} /* Modulo di contatto: stessa grammatica dell'iscrizione, piu' campi. Su telefono ogni campo va a riga piena: affiancarli renderebbe i selettori di data inutilizzabili. */ .sk-contatto{max-width:760px;margin:0 auto;display:grid;gap:1.1rem} .sk-contatto-riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.1rem} .sk-campo{display:grid;gap:.4rem} .sk-campo span{font-family:var(--font-body);font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--fg-muted)} .sk-contatto input,.sk-contatto textarea{width:100%;padding:.85rem 1rem;font:inherit;font-size:1rem; color:var(--fg);background:var(--bg-elevated,#fff);border:1px solid var(--border); border-radius:2px;min-height:48px} .sk-contatto textarea{min-height:120px;resize:vertical} .sk-contatto input:focus-visible,.sk-contatto textarea:focus-visible{ outline:2px solid var(--sk-raw-oak,#b08d57);outline-offset:2px} .sk-consenso{display:flex;gap:.7rem;align-items:flex-start;font-family:var(--font-body); font-size:.88rem;line-height:1.6;color:var(--fg-muted)} .sk-consenso input{margin-top:.25rem;width:18px;height:18px;flex:0 0 auto} .sk-contatto .btn-primary{justify-self:start;min-height:48px} .section.dark .sk-campo span,.section.dark .sk-consenso{color:var(--fg-on-dark-muted)} .section.dark .sk-contatto input,.section.dark .sk-contatto textarea{ background:rgba(241,240,236,.06);border-color:rgba(241,240,236,.22);color:var(--fg-on-dark)} [dir=rtl] .sk-contatto .btn-primary{justify-self:end} @media (max-width:640px){ .sk-contatto-riga{grid-template-columns:1fr} .sk-contatto .btn-primary{justify-self:stretch;text-align:center} } /* L'arabo non tollera il maiuscoletto tracciato: spezza le legature. */ [dir=rtl] .sk-campo span,[dir=rtl] .sk-iscrizione-campo span{text-transform:none;letter-spacing:0} /* Firma dello studio, anche sulle landing monolingua. */ .sk-landing-credit{margin-top:1.2rem;font-size:.82rem;opacity:.75} .sk-landing-credit a{color:var(--fg-on-dark,#f1f0ec);text-decoration:none; border-bottom:1px solid rgba(241,240,236,.3)} .sk-landing-credit a:hover{border-bottom-color:var(--accent,#b08d57)} /* La testata e' sticky: senza questo, l'ancora #contatto porta il titolo della sezione esattamente sotto la barra, nascosto. */ .sk-cms-main [id]{scroll-margin-top:5.5rem} /* ═══════════════ COPERTINA — testata con foto o video ═══════════════ La testata senza foto resta quella di sempre. Con una foto diventa una copertina: l'immagine sta sotto, il testo sopra un velo scuro. Il velo NON e' un vezzo grafico. Su una foto chiara — neve, cielo, un muro bianco — il testo bianco sparisce, e non c'e' modo di saperlo in anticipo perche' la foto la sceglie chi scrive. Il velo garantisce il contrasto qualunque foto venga caricata domani. */ .page-header.sk-copertina{background:var(--sk-deep-mineral,#12161a)} /* La specificita' non e' un vezzo: sk-motion.css dichiara `.page-header > :not(.sk-jagged) { position: relative }`, che vale piu' di una classe sola e rimetterebbe la foto nel flusso — cioe' sopra al testo invece che dietro. Due classi bastano a vincere. */ .sk-copertina > .sk-copertina-foto{position:absolute;inset:0;z-index:0} .sk-copertina-foto img,.sk-copertina-foto video{width:100%;height:100%;object-fit:cover;display:block} /* Piu' scuro in basso, dove sta il testo; piu' leggero in alto, dove si guarda la foto. */ .sk-copertina::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(11,15,18,.35) 0%,rgba(11,15,18,.55) 45%,rgba(11,15,18,.82) 100%)} .sk-copertina>*:not(.sk-copertina-foto){position:relative;z-index:2} .sk-copertina .bg-mesh{opacity:.25} .sk-copertina-alta{min-height:82vh;display:flex;flex-direction:column;justify-content:flex-end} @media (max-width:768px){ .sk-copertina-alta{min-height:76vh} } /* ═══════════════ MOTORE DI PRENOTAZIONE FISSO IN BASSO ═══════════════ Sempre a portata di mano: chiuso e' una striscia, aperto e' il motore. Perche' chiuso di default: aperto occupa oltre meta' dello schermo di un telefono. Chi arriva vuole prima capire dov'e' finito; il motore serve subito dopo, ed e' li' che lo trova senza cercarlo. */ .sk-sb-flottante{position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--sk-deep-mineral,#12161a); box-shadow:0 -14px 40px rgba(0,0,0,.35); font-family:var(--font-body,Helvetica,Arial,sans-serif)} .sk-sb-flottante[hidden]{display:none} .sk-sb-maniglia{display:flex;align-items:center;justify-content:center;gap:.7rem; width:100%;padding:1.05rem 1.5rem;border:0;cursor:pointer; background:var(--accent,#b08d57);color:#12161a; font:600 .82rem/1 var(--font-body,Helvetica,Arial,sans-serif); letter-spacing:.13em;text-transform:uppercase} .sk-sb-maniglia:hover{filter:brightness(1.07)} .sk-sb-maniglia:focus-visible{outline:3px solid #fff;outline-offset:-5px} /* La freccia gira invece di cambiare simbolo: un solo elemento, nessun testo da tradurre, e il verso resta corretto anche da destra a sinistra. */ .sk-sb-maniglia-icona{width:9px;height:9px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(-135deg); transition:transform .25s ease;margin-top:3px} .sk-sb-flottante.aperta .sk-sb-maniglia-icona{transform:rotate(45deg);margin-top:-3px} /* Chiuso: altezza zero ma nodo vivo. La SyncroBox va inizializzata una volta sola per pagina, quindi il contenitore non puo' essere rimosso e rimesso. */ .sk-sb-pannello{max-height:0;overflow:hidden;transition:max-height .32s ease} .sk-sb-flottante.aperta .sk-sb-pannello{max-height:76vh;overflow:auto; -webkit-overflow-scrolling:touch;padding:1.25rem 1.25rem 1.6rem} /* ── APERTA DEL TUTTO: il calendario deve poter uscire ── Il selettore delle date della SyncroBox si apre VERSO L'ALTO e va oltre l'altezza della barra. Con overflow nascosto o automatico veniva tagliato in cima: si vedeva mezzo riquadro bianco sotto la maniglia e il calendario restava irraggiungibile. Qui i due contenitori che ritagliavano smettono di farlo. La classe la mette il JavaScript a transizione FINITA: durante l'apertura serve ancora il ritaglio, altrimenti il contenuto sborda mentre la barra cresce. */ .sk-sb-flottante.spalancata, .sk-sb-flottante.spalancata .sk-sb-pannello{overflow:visible} /* ── LA SYNCROBOX RESTA DA SINISTRA A DESTRA ── Simple Booking non ha l'arabo e serve la versione inglese, che e' pensata per essere letta da sinistra. Dentro una pagina in arabo il browser le ribaltava la disposizione: l'etichetta finiva da una parte e i campi dall'altra, con l'aria di un errore. Il testo dentro il widget e' inglese: che si comporti da inglese. */ [dir="rtl"] #sb-container, [dir="rtl"] .sk-sb-pannello{direction:ltr} [dir="rtl"] .sk-sb-maniglia, [dir="rtl"] .sk-sb-chiudi{direction:rtl} .sk-sb-chiudi{display:block;margin:1rem auto 0;padding:.55rem 1.6rem; background:transparent;color:#f1f0ec;border:1px solid rgba(241,240,236,.34); border-radius:2px;cursor:pointer;font-size:.76rem;letter-spacing:.1em; text-transform:uppercase} .sk-sb-chiudi:hover{border-color:var(--accent,#b08d57);color:var(--accent,#b08d57)} /* Il fondo della pagina non deve finire sotto il pannello aperto. */ body.sk-sb-barra-aperta .sk-cms-main{padding-bottom:4rem} .sk-sb-flottante ~ .sk-cms-main,body:has(.sk-sb-flottante) .sk-landing-credit{padding-bottom:4.5rem} /* Da tablet in su la striscia si restringe a pillola centrata: a tutta larghezza su un monitor sarebbe una fascia enorme per due parole. */ @media (min-width:900px){ .sk-sb-flottante{left:50%;right:auto;transform:translateX(-50%); width:min(1040px,94vw);border-radius:10px 10px 0 0;overflow:hidden} .sk-sb-maniglia{padding:.95rem 2rem;font-size:.8rem} .sk-sb-flottante.aperta .sk-sb-pannello{max-height:70vh;padding:1.5rem 1.75rem 1.9rem} } /* Card che apre una galleria: deve sembrare cliccabile come quelle con link. */ .room-card[data-sk-galleria]{cursor:pointer} .room-card[data-sk-galleria]:focus-visible{outline:3px solid var(--accent,#b08d57);outline-offset:3px} /* ═══════════════ MANUTENZIONE ═══════════════ Non ha testata ne' piede: durante i lavori la navigazione porterebbe su pagine che rispondono anche loro 503, cioe' in nessun posto. */ .sk-manutenzione{min-height:100vh;display:flex;flex-direction:column;justify-content:center} .sk-manutenzione-contatti{display:flex;gap:1rem;margin-top:2.5rem;flex-wrap:wrap} .sk-manutenzione-credit{margin-top:3.5rem;font-size:.86rem;line-height:1.8; color:var(--fg-on-dark-muted,rgba(241,240,236,.7))} /* ═══════════════ CALENDARIO A GRIGLIA ═══════════════ Un elenco dice quando; la griglia dice anche quanto manca e se il ponte cade dentro un evento. Chi sta scegliendo le date se lo chiede. */ .sk-cal{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:2.5rem} .sk-cal-mese{min-width:0} .sk-cal-titolo{font-family:var(--font-display,Georgia,serif);font-size:1.15rem;margin-bottom:.9rem; text-transform:capitalize} .sk-cal-titolo span{opacity:.45;font-size:.9em} .sk-cal-griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .sk-cal-gio{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;text-align:center; padding:.3rem 0;opacity:.5} .sk-cal-vuoto{aspect-ratio:1} .sk-cal-giorno{aspect-ratio:1;display:flex;align-items:center;justify-content:center; font-size:.78rem;border-radius:3px;color:inherit;text-decoration:none; /* I numeri in una griglia devono stare incolonnati: con le cifre a larghezza variabile la griglia sembra storta. */ font-variant-numeric:tabular-nums} /* Oggi: un anello, non un riempimento — il riempimento e' riservato agli eventi, e due riempimenti diversi si confonderebbero. */ .sk-cal-giorno.oggi{box-shadow:inset 0 0 0 1.5px currentColor;font-weight:600} a.sk-cal-giorno.attivo{font-weight:600;background:var(--accent,#b08d57);color:#12161a} a.sk-cal-giorno.attivo:hover{filter:brightness(1.12)} a.sk-cal-giorno.attivo:focus-visible{outline:2px solid currentColor;outline-offset:2px} .sk-cal-giorno.attivo.tint-acqua{background:#5b8fa8} .sk-cal-giorno.attivo.tint-aria{background:#9db4c0} .sk-cal-giorno.attivo.tint-fuoco{background:#c46a4a} .sk-cal-giorno.attivo.tint-terra{background:#8a7a5e} .sk-cal-giorno.attivo.tint-metallo{background:#7d8794} a.sk-cal-giorno.attivo{color:#fff} .sk-cal-legenda{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.82rem;opacity:.85} .sk-cal-voce{display:inline-flex;align-items:center;gap:.5rem} .sk-cal-voce i{width:11px;height:11px;border-radius:2px;background:var(--accent,#b08d57);flex:0 0 auto} .sk-cal-voce i.tint-acqua{background:#5b8fa8} .sk-cal-voce i.tint-aria{background:#9db4c0} .sk-cal-voce i.tint-fuoco{background:#c46a4a} .sk-cal-voce i.tint-terra{background:#8a7a5e} .sk-cal-voce i.tint-metallo{background:#7d8794} /* La testata e' appiccicata: senza questo, saltando a un evento dalla griglia il titolo finirebbe sotto la barra. */ .sk-evento[id]{scroll-margin-top:6rem} /* Giorno con piu' di un evento: un puntino in basso. Senza, sembrerebbe che quel giorno ci sia solo il primo. */ .sk-cal-giorno.doppio{position:relative} .sk-cal-giorno.doppio::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%); width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.75} /* ═══════════════ LA SYNCROBOX SULLA BARRA SCURA ═══════════════ Website.css veste il motore di prenotazione per una pagina CHIARA: etichette e valori in blu profondo, che sulla pagina /prenota e' giusto. Sulla barra fissa lo sfondo e' lo stesso blu, e il risultato era blu su blu: le caselle si vedevano ma dentro non c'era scritto niente — misurato, contrasto 1:1. Nessun errore visibile, solo campi che sembrano vuoti. I selettori ricalcano quelli di Website.css con una classe in piu' davanti: servono a superarli in specificita', perche' li' sono tutti !important. Restano fuori il pulsante (fondo blu, testo gia' chiaro), il calendario e il pannello ospiti, che hanno fondo bianco proprio. */ .sk-sb-flottante #sb-container div.sb .sb__form-field-label, .sk-sb-flottante #sb-container div.sb .sb__form-field-date-number, .sk-sb-flottante #sb-container div.sb .sb__form-field-month-year, .sk-sb-flottante #sb-container div.sb .sb__form-field-property, .sk-sb-flottante #sb-container div.sb .sb__form-field-guests, .sk-sb-flottante #sb-container div.sb .sb__form-field-rooms, .sk-sb-flottante #sb-container div.sb .sb__form-field-input{ color:var(--fg-on-dark,#f1f0ec) !important} /* I secondari — giorno della settimana, note — restano piu' tenui, ma chiari. */ .sk-sb-flottante #sb-container div.sb .sb__form-field-weekday{ color:rgba(241,240,236,.72) !important} /* Il bordo delle caselle: sul chiaro e' un filetto scuro, qui sparirebbe. */ .sk-sb-flottante #sb-container div.sb .sb__form-field{ border-bottom-color:rgba(241,240,236,.34) !important} .sk-sb-flottante #sb-container div.sb .sb__form-field:focus-within{ border-bottom-color:var(--accent,#b08d57) !important} /* Calendario e pannello ospiti hanno fondo bianco: li' il testo resta scuro, com'e' gia' in Website.css. Si ripete solo per essere espliciti: una regola di colore scritta a meta' si dimentica al primo ritocco. */ .sk-sb-flottante #sb-container div.sb .sb__calendar, .sk-sb-flottante #sb-container div.sb .sb__calendar *, .sk-sb-flottante #sb-container div.sb .sb__guests, .sk-sb-flottante #sb-container div.sb .sb__guests *{ color:var(--sk-deep-mineral,#1a2a44) !important} /* La barra fissa e' scura: li' l'oro chiaro ci sta benissimo. La regola per il fondo CHIARO sta in Website.css, che e' caricato anche dalle pagine React — sk-cms.css no, e /prenota e' una di quelle. */ .sk-sb-flottante #sb-container div.sb .sb__footer-link{ color:var(--accent,#c4a878) !important} /* ============================================================================ ELENCO ARTICOLI: UNO IN EVIDENZA, GLI ALTRI IN GRIGLIA Con un articolo solo la sezione sembrava vuota; con dieci, una fila di schede uguali non dice quale valga la pena leggere. Il primo sale a tutta larghezza — lo decide la spunta « in evidenza », o in mancanza il piu' recente — e gli altri restano nella griglia di sempre. Da telefono torna una scheda come le altre: su 375 pixel una scheda alta mezzo schermo e' un ostacolo, non un richiamo. ========================================================================== */ .sk-art-evidenza{ position:relative;display:block;width:100%; height:clamp(300px,44vh,460px); border-radius:3px;overflow:hidden} .sk-art-evidenza .info{max-width:56ch} .sk-art-evidenza .nm{font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.12} .sk-art-evidenza .meta{font-size:.98rem;line-height:1.55} /* Senza foto: il blu della testata, non una tinta a caso. Si riconosce come il sito, e non finge di essere una fotografia che non c'e'. */ .sk-art-senza-foto .img{ background:var(--sk-deep-mineral,#1a2a44); background-image:radial-gradient(circle at 22% 18%, rgba(196,168,120,.16), transparent 46%), radial-gradient(circle at 78% 82%, rgba(196,168,120,.10), transparent 52%)} /* Senza foto sotto non c'e' niente da schiarire: il velo servirebbe solo a spegnere il blu. */ .sk-art-senza-foto .overlay{background:linear-gradient(180deg,transparent 40%,rgba(10,18,32,.45))} @media (max-width:980px){ .sk-art-evidenza{height:clamp(230px,34vh,300px)} .sk-art-evidenza .nm{font-size:clamp(1.3rem,5.2vw,1.7rem)} .sk-art-evidenza .meta{font-size:.9rem} } /* ============================================================================ LA COPERTINA DELL'ARTICOLO — 16:9, la stessa proporzione ovunque Prima era un'altezza fissa in pixel, e il taglio cambiava fra la scheda dell'elenco e la pagina dell'articolo: per ogni foto bisognava cercare l'inquadratura che stesse bene in tutti e due, e spesso non esisteva. Il 16:9 e' la proporzione con cui si scattano le foto ed e' quella che chiedono i social per l'anteprima di un link condiviso — la stessa immagine serve tre scopi senza compromessi. Non e' larga tutto lo schermo: a tutta larghezza un 16:9 su un monitor grande tornerebbe alto 700 pixel — una schermata di sola foto, il difetto da cui siamo partiti. Un tetto in altezza la tiene entro i 26rem, e la proporzione fa il resto restringendo la larghezza invece di tagliare. La foto si vede INTERA: se e' 16:9 all'origine, quello che hai inquadrato e' quello che si vede. Era il punto — niente ritagli da indovinare. ========================================================================== */ /* La larghezza e' l'unica leva: un tetto in ALTEZZA romperebbe la proporzione — provato, la scatola diventava 2,15:1 e la foto tornava tagliata. Con 46rem il 16:9 esce intorno ai 450 pixel d'altezza, che sta nella prima schermata insieme alla testata. */ .sk-art-cover{width:100%;max-width:46rem;margin:0 auto;aspect-ratio:16/9;overflow:hidden} .sk-art-cover img,.sk-art-cover video{width:100%;height:100%;object-fit:cover;display:block} /* Anche le schede dell'ELENCO ARTICOLI in 16:9: stessa proporzione della copertina, stesso taglio, nessuna sorpresa fra l'anteprima e la pagina. La classe in piu' non e' pignoleria. La regola scritta come « .rooms-grid .room-card » prendeva OGNI griglia di card del sito, comprese quelle delle pagine migrate: le camere, i servizi, gli itinerari — tutte schiacciate da 4:5 a 16:9. Segnalato il 26 agosto 2026 su Bike, e valeva per tutte e undici. Le card delle pagine restano verticali, come sono sempre state. */ .rooms-grid.sk-elenco-articoli .room-card{aspect-ratio:16/9} /* « Ti potrebbe interessare anche »: la card come collegamento. Nei bundle quella card e' un