.
===================================================================== */
body.single-post .sohohotel-blog-description ol.vz-k-timeline {
container: vzk-timeline / inline-size;
margin: clamp(26px, 3.8vw, 40px) 0;
}
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li {
--vz-k-tl-x: 9px; /* asse della linea */
display: block;
padding: 0 0 28px 36px;
}
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li:last-child { padding-bottom: 0; }
/* punto */
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li::before {
content: "";
position: absolute;
z-index: 1;
left: calc(var(--vz-k-tl-x) - 7px);
top: .42em;
width: 14px;
height: 14px;
box-sizing: border-box;
border-radius: 50%;
border: 3px solid var(--vz-k-accent);
background: var(--vz-k-paper);
}
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li:first-child::before { background: var(--vz-k-accent); box-shadow: 0 0 0 5px var(--vz-k-tint); }
/* tratto di linea fino al punto successivo */
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li::after {
content: "";
position: absolute;
left: calc(var(--vz-k-tl-x) - 1px);
top: calc(.42em + 14px);
bottom: calc(-.42em);
width: 2px;
background: linear-gradient(180deg, var(--vz-k-accent), var(--vz-k-soft));
}
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li:last-child::after { content: none; }
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li > :is(time, .vz-k-timeline__date) {
display: block;
margin: 0 0 4px;
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 430;
font-size: clamp(1.2rem, 1.1rem + .4vw, 1.42rem);
line-height: 1.2;
letter-spacing: -.01em;
color: var(--vz-k-deep);
font-variant-numeric: lining-nums;
}
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li > p {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: var(--vz-k-text);
text-wrap: pretty;
}
/* WordPress: [vc_column_text] di WPBakery toglie i senza classe e wpautop li rimette solo fra un blocco e l'altro:
il testo che segue la data può restare senza
. Stesso testo, stesso aspetto (vale anche per regole e miti). */
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li:not(:has(> p)) {
font-size: 1rem;
line-height: 1.6;
color: var(--vz-k-text);
}
@container vzk-timeline (min-width: 520px) {
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li {
--vz-k-tl-x: calc(9rem + 24px);
display: grid;
grid-template-columns: 9rem minmax(0, 1fr);
column-gap: 48px;
padding: 0 0 30px;
}
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li > :is(time, .vz-k-timeline__date) { margin: 0; text-align: right; }
body.single-post .sohohotel-blog-description ol.vz-k-timeline > li > p { padding-top: .12em; }
}
/* =====================================================================
6. Parole ul.vz-k-words
Schede di vetro di mare: parola grande in Fraunces, pronuncia in maiuscoletto (la sillaba accentata resta
in maiuscolo pieno), definizione. Due colonne quando c'è spazio; se le parole sono dispari l'ultima
scheda prende tutta la riga.
===================================================================== */
body.single-post .sohohotel-blog-description ul.vz-k-words {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 12px;
margin: clamp(22px, 3.2vw, 30px) 0 clamp(30px, 4.4vw, 44px);
}
body.single-post .sohohotel-blog-description ul.vz-k-words > li.vz-k-word {
display: flex;
flex-wrap: wrap;
align-items: baseline;
align-content: flex-start;
column-gap: 12px;
row-gap: 4px;
padding: 20px 22px 22px;
border-radius: 22px;
background: var(--vz-k-sea);
}
/* «of .vz-k-word»: conta solo le schede, anche se wpautop ha lasciato un
vuoto fra le voci */
body.single-post .sohohotel-blog-description ul.vz-k-words > li.vz-k-word:nth-child(odd of .vz-k-word):nth-last-child(1 of .vz-k-word) { grid-column: 1 / -1; }
body.single-post .sohohotel-blog-description .vz-k-word .vz-k-word__term {
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 400;
font-size: clamp(1.7rem, 1.4rem + 1vw, 2.15rem);
line-height: 1.1;
letter-spacing: -.015em;
color: var(--vz-k-ink);
}
body.single-post .sohohotel-blog-description .vz-k-word .vz-k-word__say {
font-family: var(--vz-k-sans);
font-size: .95rem;
font-weight: 500;
font-variant-caps: small-caps;
letter-spacing: .06em;
color: var(--vz-k-deep);
}
body.single-post .sohohotel-blog-description .vz-k-word .vz-k-word__def {
display: block;
flex: 1 0 100%;
margin-top: 8px;
font-size: 1rem;
line-height: 1.55;
color: var(--vz-k-text);
text-wrap: pretty;
}
/* =====================================================================
7. Regole non scritte ol.vz-k-rules
Niente schede: numeri grandi (contatore decorativo) e righe sottili, due colonne su computer.
===================================================================== */
body.single-post .sohohotel-blog-description ol.vz-k-rules {
counter-reset: vzk-rule;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
column-gap: clamp(24px, 4vw, 44px);
margin: clamp(16px, 2.6vw, 24px) 0 clamp(30px, 4.4vw, 44px);
}
body.single-post .sohohotel-blog-description ol.vz-k-rules > li.vz-k-rule {
counter-increment: vzk-rule;
display: grid;
grid-template-columns: 2.7rem minmax(0, 1fr);
column-gap: 14px;
align-items: start;
padding: 20px 0 22px;
border-top: 1px solid var(--vz-k-line-2);
}
body.single-post .sohohotel-blog-description ol.vz-k-rules > li.vz-k-rule::before {
content: counter(vzk-rule);
content: counter(vzk-rule) / "";
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100, "opsz" 144;
font-weight: 300;
font-size: 3rem;
line-height: .8;
letter-spacing: -.03em;
font-variant-numeric: lining-nums;
color: var(--vz-k-accent);
}
body.single-post .sohohotel-blog-description .vz-k-rule > p {
margin: 0;
font-size: 1.04rem;
font-weight: 500;
line-height: 1.5;
color: var(--vz-k-ink);
text-wrap: pretty;
}
/* regola senza
(WordPress, vedi la linea del tempo): stesso aspetto */
body.single-post .sohohotel-blog-description ol.vz-k-rules > li.vz-k-rule:not(:has(> p)) {
font-size: 1.04rem;
font-weight: 500;
line-height: 1.5;
color: var(--vz-k-ink);
}
/* =====================================================================
8. Una giornata div.vz-k-day
Linea del giorno con i colori del cielo (alba celeste → mezzogiorno chiaro → tramonto pesca → notte blu);
il video (figure.vz-k-video, sezione 24) sta accanto da 600 px, sotto sul telefono. Qui solo la posizione del video:
aspetto e comandi sono nella sezione 24.
===================================================================== */
body.single-post .sohohotel-blog-description div.vz-k-day {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px;
margin: clamp(22px, 3.2vw, 30px) 0 clamp(34px, 4.8vw, 48px);
}
@media (min-width: 600px) {
body.single-post .sohohotel-blog-description div.vz-k-day:has(> .vz-k-video) {
grid-template-columns: minmax(0, 1fr) clamp(11rem, 33%, 14.5rem);
column-gap: clamp(24px, 3.6vw, 40px);
align-items: start;
}
body.single-post .sohohotel-blog-description div.vz-k-day > .vz-k-video {
position: sticky;
top: calc(var(--vz-k-nav) + 24px);
}
}
body.single-post .sohohotel-blog-description div.vz-k-day > .vz-k-video {
justify-self: center;
width: min(100%, 17rem);
margin: 0;
}
@media (min-width: 600px) {
body.single-post .sohohotel-blog-description div.vz-k-day > .vz-k-video { width: 100%; }
}
/* aspetto minimo di un senza la classe vz-k-video__media (specificità zero: vince sempre la sezione 24) */
:where(.vz-k-day > .vz-k-video) video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 24px; background: #dbe9f3; }
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__list { position: relative; }
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__list::before {
content: "";
position: absolute;
left: 7px;
top: 10px;
bottom: 12px;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, #b7d8ee 0%, #80b2d3 22%, #e7d7a3 42%, #f2c38f 62%, #e88a62 80%, #1e3f58 100%);
}
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__item {
--vz-k-day-c: var(--vz-k-accent);
padding: 0 0 24px 40px;
}
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__item:last-child { padding-bottom: 0; }
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__item::before {
content: "";
position: absolute;
left: 1px;
top: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--vz-k-day-c);
box-shadow: 0 0 0 4px var(--vz-k-paper), 0 0 0 5px rgba(31, 61, 63, .1);
}
body.single-post .sohohotel-blog-description .vz-k-day__item[data-time="morning"] { --vz-k-day-c: #b7d8ee; }
body.single-post .sohohotel-blog-description .vz-k-day__item[data-time="late-morning"] { --vz-k-day-c: #80b2d3; }
body.single-post .sohohotel-blog-description .vz-k-day__item[data-time="lunch"] { --vz-k-day-c: #ecdba3; }
body.single-post .sohohotel-blog-description .vz-k-day__item[data-time="afternoon"] { --vz-k-day-c: #f2c38f; }
body.single-post .sohohotel-blog-description .vz-k-day__item[data-time="sunset"] { --vz-k-day-c: #e88a62; }
body.single-post .sohohotel-blog-description .vz-k-day__item[data-time="night"] { --vz-k-day-c: #1e3f58; }
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__item > p.vz-k-day__when {
margin: 0 0 4px;
font-family: var(--vz-k-sans);
font-size: .78rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--vz-k-deep);
}
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__item[data-time="sunset"] > p.vz-k-day__when { color: var(--vz-k-warm-ink); }
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__item[data-time="night"] > p.vz-k-day__when { color: var(--vz-k-night); }
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__item > p:not(.vz-k-day__when) {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: var(--vz-k-text);
text-wrap: pretty;
}
body.single-post .sohohotel-blog-description .vz-k-day .vz-k-day__item strong { font-weight: 600; color: var(--vz-k-ink); }
/* =====================================================================
9. Sul piatto div.vz-k-plate
Schede bianche con il bordo sottile e l'etichetta del gruppo; sopra, i filtri creati dal JS.
===================================================================== */
body.single-post .sohohotel-blog-description div.vz-k-plate { margin: clamp(22px, 3.2vw, 30px) 0 clamp(30px, 4.4vw, 44px); }
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 16px;
}
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__filter {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
margin: 0;
padding: 0 14px;
border: 0;
border-radius: 999px;
background: var(--vz-k-sea);
box-shadow: inset 0 0 0 1px rgba(31, 61, 63, .1);
color: var(--vz-k-ink);
font-family: var(--vz-k-sans);
font-size: .94rem;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 140ms var(--vz-k-ease);
}
/* stesso peso del carattere nei due stati: il filtro premuto non cambia larghezza e non sposta i vicini */
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__filter[aria-pressed="true"] {
background: var(--vz-k-accent);
box-shadow: none;
color: var(--vz-k-on-accent);
}
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__filter:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__filter[aria-pressed="false"]:hover { background: var(--vz-k-tint); }
}
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__filter:focus-visible { outline: 2px solid var(--vz-k-deep); outline-offset: 2px; }
/* numero di piatti: cifra piccola accanto al nome, nessun fondo (i cinque filtri stanno su una riga da 600 px) */
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__n {
font-size: .8rem;
font-weight: 600;
line-height: 1.2;
font-variant-numeric: tabular-nums;
color: var(--vz-k-muted);
}
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__filter[aria-pressed="true"] .vz-k-plate__n { color: var(--vz-k-on-accent); }
/* annuncio per i lettori di schermo (non visibile) */
body.single-post .sohohotel-blog-description .vz-k-plate .vz-k-plate__status {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
body.single-post .sohohotel-blog-description .vz-k-plate ul.vz-k-plate__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
gap: 12px;
}
body.single-post .sohohotel-blog-description .vz-k-plate ul.vz-k-plate__list > li.vz-k-dish {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 18px 20px 20px;
border-radius: 20px;
background: var(--vz-k-paper);
box-shadow: inset 0 0 0 1px rgba(31, 61, 63, .13);
transition: box-shadow 200ms ease, transform 220ms var(--vz-k-ease);
}
@media (hover: hover) and (pointer: fine) {
body.single-post .sohohotel-blog-description .vz-k-plate ul.vz-k-plate__list > li.vz-k-dish:hover {
box-shadow: inset 0 0 0 1px rgba(128, 178, 211, .7), 0 16px 32px -20px rgba(34, 82, 114, .4);
transform: translateY(-2px);
}
}
body.single-post .sohohotel-blog-description .vz-k-plate ul.vz-k-plate__list > li.vz-k-dish.vz-k-dish--in {
animation: vzkFadeUp 260ms var(--vz-k-ease) backwards;
animation-delay: calc(var(--vz-k-i, 0) * 35ms);
}
body.single-post .sohohotel-blog-description .vz-k-dish .vz-k-dish__tag {
--vz-k-ico: var(--vz-k-i-sea);
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 12px;
padding: 4px 11px 4px 8px;
border-radius: 999px;
background: var(--vz-k-tint);
color: var(--vz-k-deep);
font-family: var(--vz-k-sans);
font-size: .78rem;
font-weight: 600;
line-height: 1.3;
}
body.single-post .sohohotel-blog-description .vz-k-dish .vz-k-dish__tag::before {
content: "";
flex: none;
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask: var(--vz-k-ico) center / contain no-repeat;
mask: var(--vz-k-ico) center / contain no-repeat;
}
body.single-post .sohohotel-blog-description .vz-k-dish .vz-k-dish__tag[data-tag="lagoon"] { --vz-k-ico: var(--vz-k-i-lagoon); background: #e2ece9; color: var(--vz-k-ink); }
body.single-post .sohohotel-blog-description .vz-k-dish .vz-k-dish__tag[data-tag="mountains"] { --vz-k-ico: var(--vz-k-i-mountains); background: var(--vz-k-sea); color: var(--vz-k-ink); box-shadow: inset 0 0 0 1px rgba(31, 61, 63, .12); }
body.single-post .sohohotel-blog-description .vz-k-dish .vz-k-dish__tag[data-tag="sweet"] { --vz-k-ico: var(--vz-k-i-sweet); background: var(--vz-k-warm-tint); color: var(--vz-k-warm-ink); }
body.single-post .sohohotel-blog-description .vz-k-dish p.vz-k-dish__name {
margin: 0 0 6px;
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 430;
font-size: 1.32rem;
line-height: 1.2;
letter-spacing: -.008em;
color: var(--vz-k-ink);
}
body.single-post .sohohotel-blog-description .vz-k-dish p.vz-k-dish__desc {
margin: 0;
font-size: .97rem;
line-height: 1.55;
color: var(--vz-k-text);
text-wrap: pretty;
}
/* =====================================================================
10. Confronto div.vz-k-compare > table
La tabella resta quella del redesign; il contenitore scorre di lato quando la tabella non entra (telefono),
con la prima colonna ferma. La riga «Our take» va nel (th scope="row" + td colspan).
===================================================================== */
body.single-post .sohohotel-blog-description div.vz-k-compare {
position: relative;
margin: clamp(22px, 3.2vw, 30px) 0;
overflow-x: auto;
overscroll-behavior-x: contain;
border-radius: 18px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
/* la tabella del redesign ha overflow: hidden (bordi arrotondati): qui il ritaglio lo fa il contenitore,
così la prima colonna può restare ferma (sticky) */
body.single-post .sohohotel-blog-description div.vz-k-compare > table {
width: 100%;
min-width: max(100%, 30rem);
margin: 0;
overflow: visible;
}
body.single-post .sohohotel-blog-description div.vz-k-compare > table :is(thead th:first-child, tbody th, tfoot th) {
position: sticky;
left: 0;
z-index: 1;
transition: box-shadow 200ms ease;
}
body.single-post .sohohotel-blog-description div.vz-k-compare.vz-k-compare--scrolled > table :is(thead th:first-child, tbody th, tfoot th) {
box-shadow: 10px 0 14px -12px rgba(19, 50, 74, .5);
}
body.single-post .sohohotel-blog-description div.vz-k-compare.vz-k-compare--more {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
body.single-post .sohohotel-blog-description div.vz-k-compare:focus-visible { outline: 2px solid var(--vz-k-deep); outline-offset: 3px; }
body.single-post .sohohotel-blog-description div.vz-k-compare > table > tfoot :is(th, td) {
border-top: 1px solid rgba(128, 178, 211, .55);
background: #f2f7fb;
}
body.single-post .sohohotel-blog-description div.vz-k-compare > table > tfoot th { background: var(--vz-k-tint); }
body.single-post .sohohotel-blog-description div.vz-k-compare > table > tfoot td {
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 400;
font-size: 1.05rem;
line-height: 1.45;
color: var(--vz-k-ink);
}
/* =====================================================================
11. Stagioni div.vz-k-seasons
Livelli: best, good, busy, quiet, event. Mesi come righe colorate (telefono e tablet); da 1025 px una striscia
orizzontale che esce dalla colonna
fino ai bordi della lastra (come le immagini). Livello scritto in ogni mese (JS) e legenda (JS);
poi la tabella «When to come» invariata.
===================================================================== */
body.single-post .sohohotel-blog-description div.vz-k-seasons { margin: clamp(22px, 3.2vw, 30px) 0 clamp(30px, 4.4vw, 44px); }
body.single-post .sohohotel-blog-description .vz-k-seasons [data-level="best"] { --vz-k-lv: var(--vz-k-accent); --vz-k-lv-bg: #e2eff8; --vz-k-lv-ink: #1d4b6b; }
body.single-post .sohohotel-blog-description .vz-k-seasons [data-level="good"] { --vz-k-lv: var(--vz-k-soft); --vz-k-lv-bg: #f1f6f9; --vz-k-lv-ink: var(--vz-k-deep); }
body.single-post .sohohotel-blog-description .vz-k-seasons [data-level="busy"] { --vz-k-lv: var(--vz-k-warm); --vz-k-lv-bg: var(--vz-k-warm-tint); --vz-k-lv-ink: var(--vz-k-warm-ink); }
/* «quiet»: mesi tranquilli o fuori stagione, grigio di mare (testo #4a6462 su #f3f6f5: 5,9:1) */
body.single-post .sohohotel-blog-description .vz-k-seasons [data-level="quiet"] { --vz-k-lv: #b9c9c6; --vz-k-lv-bg: #f3f6f5; --vz-k-lv-ink: var(--vz-k-muted); }
body.single-post .sohohotel-blog-description .vz-k-seasons [data-level="event"] { --vz-k-lv: #e88a62; --vz-k-lv-swatch: var(--vz-k-night); --vz-k-lv-bg: var(--vz-k-night); --vz-k-lv-ink: #f6c9a0; }
body.single-post .sohohotel-blog-description .vz-k-seasons ul.vz-k-seasons__legend {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: 0 0 14px;
}
body.single-post .sohohotel-blog-description .vz-k-seasons ul.vz-k-seasons__legend > li {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--vz-k-sans);
font-size: .86rem;
line-height: 1.4;
color: var(--vz-k-muted);
}
body.single-post .sohohotel-blog-description .vz-k-seasons ul.vz-k-seasons__legend > li::before {
content: "";
width: 22px;
height: 8px;
border-radius: 999px;
background: var(--vz-k-lv-swatch, var(--vz-k-lv));
}
body.single-post .sohohotel-blog-description .vz-k-seasons ol.vz-k-seasons__strip {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
margin: 0 0 4px;
}
body.single-post .sohohotel-blog-description .vz-k-seasons ol.vz-k-seasons__strip > li {
display: grid;
grid-template-columns: 6.6rem minmax(0, 1fr);
column-gap: 14px;
align-items: baseline;
padding: 12px 16px 12px 22px;
border-radius: 14px;
background: var(--vz-k-lv-bg, var(--vz-k-sea));
overflow: hidden;
}
body.single-post .sohohotel-blog-description .vz-k-seasons ol.vz-k-seasons__strip > li::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--vz-k-lv, var(--vz-k-accent));
}
body.single-post .sohohotel-blog-description .vz-k-seasons .vz-k-seasons__m {
grid-column: 1;
grid-row: 1 / span 2;
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 430;
font-size: 1.15rem;
line-height: 1.25;
color: var(--vz-k-ink);
}
body.single-post .sohohotel-blog-description .vz-k-seasons .vz-k-seasons__lvl {
display: block;
grid-column: 2;
font-family: var(--vz-k-sans);
font-size: .72rem;
font-weight: 600;
line-height: 1.45;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--vz-k-lv-ink, var(--vz-k-deep));
}
body.single-post .sohohotel-blog-description .vz-k-seasons .vz-k-seasons__t {
display: block;
grid-column: 2;
font-family: var(--vz-k-sans);
font-size: .92rem;
line-height: 1.45;
color: var(--vz-k-text);
}
body.single-post .sohohotel-blog-description .vz-k-seasons ol.vz-k-seasons__strip > li[data-level="event"] :is(.vz-k-seasons__m, .vz-k-seasons__t) { color: #ffffff; }
body.single-post .sohohotel-blog-description .vz-k-seasons > table { margin-top: 22px; }
@media (min-width: 1025px) {
body.single-post .sohohotel-blog-description .vz-k-seasons ol.vz-k-seasons__strip {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
margin-inline: calc(-1 * var(--vz-b-pad, 100px) + 12px);
}
body.single-post .sohohotel-blog-description .vz-k-seasons ol.vz-k-seasons__strip > li {
display: flex;
flex-direction: column;
gap: 3px;
min-height: 9.6rem;
padding: 20px 12px 14px;
border-radius: 16px;
}
body.single-post .sohohotel-blog-description .vz-k-seasons ol.vz-k-seasons__strip > li::before { right: 0; bottom: auto; width: auto; height: 6px; }
body.single-post .sohohotel-blog-description .vz-k-seasons .vz-k-seasons__m { font-size: 1.08rem; }
body.single-post .sohohotel-blog-description .vz-k-seasons .vz-k-seasons__t { margin-top: 2px; font-size: .84rem; line-height: 1.4; }
}
/* =====================================================================
12. Verdetto div.vz-k-verdict
Due schede affiancate (azzurra con la spunta, pesca con l'onda), una sotto l'altra sul telefono;
sotto, a tutta riga, il consiglio («The fix…»).
===================================================================== */
body.single-post .sohohotel-blog-description div.vz-k-verdict {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 12px;
margin: clamp(22px, 3.2vw, 30px) 0 clamp(30px, 4.4vw, 44px);
}
body.single-post .sohohotel-blog-description .vz-k-verdict :is(.vz-k-verdict__yes, .vz-k-verdict__no) {
padding: 22px 24px 24px;
border-radius: 24px;
background: var(--vz-k-glass-solid);
}
body.single-post .sohohotel-blog-description .vz-k-verdict .vz-k-verdict__no { background: var(--vz-k-warm-tint); }
body.single-post .sohohotel-blog-description .vz-k-verdict p.vz-k-verdict__label {
position: relative;
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 450;
font-size: clamp(1.3rem, 1.2rem + .4vw, 1.5rem);
line-height: 1.2;
color: var(--vz-k-ink);
}
/* cerchio colorato + icona (spunta o onda) disegnata come maschera sopra il cerchio */
body.single-post .sohohotel-blog-description .vz-k-verdict p.vz-k-verdict__label::before {
content: "";
flex: none;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--vz-k-accent);
}
body.single-post .sohohotel-blog-description .vz-k-verdict p.vz-k-verdict__label::after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 38px;
height: 38px;
margin-top: -19px;
background: var(--vz-k-on-accent);
-webkit-mask: var(--vz-k-ico, var(--vz-k-i-check)) center / 20px 20px no-repeat;
mask: var(--vz-k-ico, var(--vz-k-i-check)) center / 20px 20px no-repeat;
}
body.single-post .sohohotel-blog-description .vz-k-verdict .vz-k-verdict__no p.vz-k-verdict__label { --vz-k-ico: var(--vz-k-i-wave); }
body.single-post .sohohotel-blog-description .vz-k-verdict .vz-k-verdict__no p.vz-k-verdict__label::before { background: var(--vz-k-warm); }
body.single-post .sohohotel-blog-description .vz-k-verdict .vz-k-verdict__no p.vz-k-verdict__label::after { background: #13293b; }
body.single-post .sohohotel-blog-description .vz-k-verdict :is(.vz-k-verdict__yes, .vz-k-verdict__no) > p:not(.vz-k-verdict__label) {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: var(--vz-k-text);
text-wrap: pretty;
}
body.single-post .sohohotel-blog-description .vz-k-verdict p.vz-k-verdict__fix {
grid-column: 1 / -1;
position: relative;
margin: 0;
padding: 15px 20px 15px 54px;
border-radius: 18px;
background: var(--vz-k-sea);
font-size: 1rem;
font-weight: 500;
line-height: 1.55;
color: var(--vz-k-ink);
}
body.single-post .sohohotel-blog-description .vz-k-verdict p.vz-k-verdict__fix::before {
content: "";
position: absolute;
left: 20px;
top: 15px;
width: 22px;
height: 1.55em;
background: var(--vz-k-deep);
-webkit-mask: var(--vz-k-i-tip) center / 22px 22px no-repeat;
mask: var(--vz-k-i-tip) center / 22px 22px no-repeat;
}
/* =====================================================================
13. Approfondimenti nav.vz-k-deeper
Gruppi su due colonne, link come schede con la freccia (al massimo 8 link in tutto).
===================================================================== */
body.single-post .sohohotel-blog-description nav.vz-k-deeper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 26px 24px;
margin: clamp(18px, 2.8vw, 26px) 0 clamp(30px, 4.4vw, 44px);
}
body.single-post .sohohotel-blog-description nav.vz-k-deeper .vz-k-deeper__group > h3 {
margin: 0 0 10px;
font-size: 1.15rem;
font-weight: 460;
line-height: 1.25;
letter-spacing: -.005em;
color: var(--vz-k-ink);
}
body.single-post .sohohotel-blog-description nav.vz-k-deeper .vz-k-deeper__group > ul { display: grid; gap: 8px; }
body.single-post .sohohotel-blog-description nav.vz-k-deeper .vz-k-deeper__group > ul > li > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 54px;
box-sizing: border-box;
padding: 11px 12px 11px 18px;
border-radius: 16px;
background: var(--vz-k-sea);
color: var(--vz-k-ink);
font-family: var(--vz-k-sans);
font-size: .98rem;
font-weight: 500;
line-height: 1.35;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 180ms ease, transform 160ms var(--vz-k-ease);
}
body.single-post .sohohotel-blog-description nav.vz-k-deeper .vz-k-deeper__group > ul > li > a::after {
content: "";
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--vz-k-paper) var(--vz-k-arrow) center / 17px 17px no-repeat;
transition: transform 220ms var(--vz-k-ease);
}
@media (hover: hover) and (pointer: fine) {
body.single-post .sohohotel-blog-description nav.vz-k-deeper .vz-k-deeper__group > ul > li > a:hover { background: var(--vz-k-tint); }
body.single-post .sohohotel-blog-description nav.vz-k-deeper .vz-k-deeper__group > ul > li > a:hover::after { transform: translateX(3px); }
}
body.single-post .sohohotel-blog-description nav.vz-k-deeper .vz-k-deeper__group > ul > li > a:active { transform: scale(.98); }
body.single-post .sohohotel-blog-description nav.vz-k-deeper .vz-k-deeper__group > ul > li > a:focus-visible { outline: 2px solid var(--vz-k-deep); outline-offset: 2px; }
/* =====================================================================
14. Fonti section.vz-k-sources
Piccolo, numerato, in fondo, sotto una riga sottile.
===================================================================== */
body.single-post .sohohotel-blog-description section.vz-k-sources {
margin: clamp(30px, 4.4vw, 48px) 0 0;
padding: clamp(20px, 3vw, 28px) 0 0;
border-top: 1px solid var(--vz-k-line-2);
}
body.single-post .sohohotel-blog-description section.vz-k-sources > h2 {
margin: 0 0 .45em;
font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem);
}
body.single-post .sohohotel-blog-description section.vz-k-sources ol.vz-k-sources__list { counter-reset: vzk-src; margin-top: 14px; }
body.single-post .sohohotel-blog-description section.vz-k-sources ol.vz-k-sources__list > li {
counter-increment: vzk-src;
padding: 6px 0 6px 2rem;
font-family: var(--vz-k-sans);
font-size: .9rem;
line-height: 1.55;
color: var(--vz-k-muted);
}
body.single-post .sohohotel-blog-description section.vz-k-sources ol.vz-k-sources__list > li::before {
content: counter(vzk-src) ".";
position: absolute;
left: 0;
top: 6px;
width: 1.4rem;
text-align: right;
font-size: .85rem;
font-weight: 600;
line-height: 1.65;
font-variant-numeric: tabular-nums;
color: var(--vz-k-deep);
}
body.single-post .sohohotel-blog-description section.vz-k-sources ol.vz-k-sources__list > li > a { font-weight: 500; }
/* =====================================================================
15. Plan your visit div.vz-k-plan
Riquadri di vetro di mare con il filo azzurro a sinistra: titolo in maiuscoletto, testo sotto. 2 colonne, 1 sotto i 560 px.
===================================================================== */
.sohohotel-blog-description .vz-k-plan {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(10px, 1.6vw, 16px);
margin: 1.4em 0 2em;
}
.sohohotel-blog-description .vz-k-plan > br,
.sohohotel-blog-description .vz-k-plan p:empty { display: none; }
.sohohotel-blog-description .vz-k-plan__tile {
position: relative;
padding: 18px 20px 18px 22px;
border-radius: var(--vz-r-m, 18px);
background: var(--vz-bg, #eef3f1);
box-shadow: inset 0 0 0 1px var(--vz-line, rgba(31, 61, 63, .1));
}
.sohohotel-blog-description .vz-k-plan__tile::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--vz-accent, #80b2d3);
}
.sohohotel-blog-description .vz-k-plan__tile p {
margin: 0 !important;
font-size: .98rem !important;
line-height: 1.55 !important;
color: var(--vz-b-text, #2e4a4b);
}
.sohohotel-blog-description .vz-k-plan__tile p.vz-k-plan__title {
margin: 0 0 6px !important;
font-family: var(--vz-sans, "Figtree", sans-serif);
font-size: .78rem !important;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--vz-accent-deep, #2b5b7d);
}
@media (max-width: 560px) {
.sohohotel-blog-description .vz-k-plan { grid-template-columns: minmax(0, 1fr); }
}
@media print {
.sohohotel-blog-description .vz-k-plan__tile { box-shadow: none; border: 1px solid #ccc; }
}
/* =====================================================================
15b. Basi comuni dei blocchi interattivi (16–25)
===================================================================== */
/* wpautop: a capo e paragrafi vuoti dentro i componenti non contano */
:is(.vz-k-myths, .vz-k-myth, .vz-k-myth > summary, .vz-k-myth__reality, .vz-k-legend, .vz-k-numbers, .vz-k-numbers > li, .vz-k-facts,
.vz-k-quiz, .vz-k-quiz__q, .vz-k-quiz__options, .vz-k-quiz__answer, .vz-k-checklist, .vz-k-checklist__list, .vz-k-checklist__list > li,
.vz-k-sunset, .vz-k-map, .vz-k-map__canvas, .vz-k-map__list, .vz-k-map__list > li, .vz-k-gallery, .vz-k-gallery__list,
.vz-k-gallery__item, .vz-k-gallery__item > figure, .vz-k-video, .vz-k-video__frame, .vz-k-ask) > br { display: none !important; }
:is(.vz-k-myths, .vz-k-myth, .vz-k-myth__reality, .vz-k-legend, .vz-k-numbers > li, .vz-k-quiz, .vz-k-quiz__q, .vz-k-quiz__answer,
.vz-k-checklist, .vz-k-sunset, .vz-k-map, .vz-k-map__list > li, .vz-k-gallery, .vz-k-gallery__item > figure, .vz-k-video) p:empty { display: none !important; }
/* elenchi del kit: niente pallini, righe e spazi del tema (.sohohotel-main-content ul li) e del redesign (.wpb_text_column ul li) */
:is(.vz-k-numbers, .vz-k-facts, .vz-k-quiz__options, .vz-k-checklist__list, .vz-k-map__list, .vz-k-gallery__list) {
list-style: none !important;
margin: 0;
padding: 0 !important;
border: 0 !important;
}
:is(.vz-k-numbers, .vz-k-facts, .vz-k-quiz__options, .vz-k-checklist__list, .vz-k-map__list, .vz-k-gallery__list) > li {
position: relative;
float: none;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: inherit;
line-height: inherit;
}
:is(.vz-k-numbers, .vz-k-facts, .vz-k-quiz__options, .vz-k-checklist__list, .vz-k-map__list, .vz-k-gallery__list) > li::before,
:is(.vz-k-numbers, .vz-k-facts, .vz-k-quiz__options, .vz-k-checklist__list, .vz-k-map__list, .vz-k-gallery__list) > li::after {
content: none !important;
display: none;
}
/* testo solo per i lettori di schermo */
.vz-k-sr {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* pulsanti secondari del kit (Reveal all, Try again, Clear list) */
:is(.vz-k-myths__all, .vz-k-quiz__again, .vz-k-checklist__reset) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
margin: 0;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--vz-k2-paper, #fff);
box-shadow: inset 0 0 0 1.5px rgba(43, 91, 125, .3);
color: var(--vz-k2-deep, #2b5b7d);
font: 600 .92rem/1.2 var(--vz-k2-sans);
letter-spacing: .005em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
transition: transform 160ms var(--vz-k2-ease), background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
:is(.vz-k-myths__all, .vz-k-quiz__again, .vz-k-checklist__reset):active { transform: scale(.97); }
:is(.vz-k-myths__all, .vz-k-quiz__again, .vz-k-checklist__reset):focus-visible { outline: 2px solid var(--vz-k2-deep, #2b5b7d); outline-offset: 3px; }
:is(.vz-k-myths__all, .vz-k-quiz__again, .vz-k-checklist__reset)[aria-disabled="true"] { color: var(--vz-k2-muted); box-shadow: inset 0 0 0 1.5px rgba(31, 61, 63, .14); cursor: default; }
:is(.vz-k-myths__all, .vz-k-quiz__again, .vz-k-checklist__reset)[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
:is(.vz-k-myths__all, .vz-k-quiz__again, .vz-k-checklist__reset):not([aria-disabled="true"]):hover { background: var(--vz-k2-tint, #dbe9f3); box-shadow: inset 0 0 0 1.5px rgba(43, 91, 125, .45); }
}
/* =====================================================================
16. Mito o realtà div.vz-k-myths
===================================================================== */
.vz-k-myths {
display: grid;
gap: 14px;
margin: 1.4em 0 1.9em;
}
.vz-k-myth {
--vz-k2-frost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28' viewBox='0 0 160 28' fill='none' stroke='%232b5b7d' stroke-opacity='.07' stroke-width='1.4'%3E%3Cpath d='M0 14C13.3 4 26.7 4 40 14S66.7 24 80 14S106.7 4 120 14S146.7 24 160 14'/%3E%3C/svg%3E");
position: relative;
display: block;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: var(--vz-k2-r);
background: var(--vz-k2-frost) 0 0 / 160px 28px repeat, var(--vz-k2-bg);
box-shadow: inset 0 0 0 1px rgba(31, 61, 63, .06);
transition: background-color 260ms ease, box-shadow 260ms ease, transform 260ms var(--vz-k2-ease);
}
/* aperta: il vetro smerigliato diventa acqua chiara */
.vz-k-myth[open] {
background: var(--vz-k2-paper);
box-shadow: var(--vz-k2-shadow), inset 0 0 0 1px rgba(43, 91, 125, .16);
}
.vz-k-myth > summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "tag flip" "claim flip" "hint hint";
align-items: start;
gap: 10px 14px;
margin: 0;
padding: 18px 16px 16px 22px;
border-radius: inherit;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.vz-k-myth > summary::-webkit-details-marker { display: none; }
.vz-k-myth > summary::marker { content: ""; }
.vz-k-myth > summary:focus-visible { outline: 2px solid var(--vz-k2-deep); outline-offset: 3px; }
/* il segno che «gira» la scheda: due frecce in un cerchio, ruota di mezzo giro all'apertura */
.vz-k-myth > summary::after {
content: "";
grid-area: flip;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b5b7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/%3E%3Cpath d='M4 3.5V8h4.5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/%3E%3Cpath d='M20 20.5V16h-4.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
box-shadow: 0 6px 14px -8px rgba(31, 61, 63, .5), inset 0 0 0 1px rgba(43, 91, 125, .12);
transition: transform 340ms var(--vz-k2-ease), background-color 220ms ease;
}
.vz-k-myth[open] > summary::after { transform: rotate(180deg); background-color: var(--vz-k2-tint); }
.vz-k-myth__tag {
grid-area: tag;
justify-self: start;
display: inline-flex;
align-items: center;
padding: 4px 11px 4px;
border-radius: 999px;
background: var(--vz-k2-warm-tint);
color: var(--vz-k2-warm);
font: 600 .74rem/1.25 var(--vz-k2-sans);
letter-spacing: .14em;
text-transform: uppercase;
transition: color 220ms ease, background-color 220ms ease;
}
/* aperta: l'etichetta «Myth» viene barrata, come una voce corretta a matita */
.vz-k-myth[open] > summary .vz-k-myth__tag { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(154, 79, 28, .7); }
.vz-k-myth__claim {
grid-area: claim;
min-width: 0;
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100;
font-weight: 420;
font-size: clamp(1.18rem, 1.06rem + .45vw, 1.4rem);
line-height: 1.32;
letter-spacing: -.008em;
color: var(--vz-k2-ink);
text-wrap: pretty;
overflow-wrap: break-word;
/* aperta: sotto la frase compare una sottolineatura ondulata calda, come un errore segnato a margine */
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: transparent;
text-decoration-thickness: 1.5px;
text-underline-offset: .28em;
text-decoration-skip-ink: none;
transition: text-decoration-color 320ms ease 80ms;
}
.vz-k-myth[open] > summary .vz-k-myth__claim { text-decoration-color: var(--vz-k2-warm-line); }
.vz-k-myth__hint {
grid-area: hint;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--vz-k2-deep);
font: 600 .86rem/1.3 var(--vz-k2-sans);
letter-spacing: .01em;
}
.vz-k-myth__hint::after {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 220ms var(--vz-k2-ease);
}
.vz-k-myth[open] > summary .vz-k-myth__hint { display: none; }
.vz-k-myth__reality { padding: 0 22px 20px; }
.vz-k-myth__reality > p {
margin: 0 !important;
padding-top: 14px;
border-top: 1px dashed rgba(43, 91, 125, .24);
color: var(--vz-k2-text);
}
.vz-k-myth__reality > p + p { border-top: 0; padding-top: 0; margin-top: .7em !important; }
/* realtà senza (WordPress, vedi la linea del tempo): la riga tratteggiata e lo spazio passano al contenitore */
.vz-k-myth__reality:not(:has(> p)) {
margin: 0 22px;
padding: 14px 0 20px;
border-top: 1px dashed rgba(43, 91, 125, .24);
line-height: 1.68; /* come i paragrafi della lastra */
color: var(--vz-k2-text);
}
.vz-k-myth__tag.vz-k-myth__tag--real {
display: inline-flex;
margin: 0 8px 0 0;
vertical-align: .12em;
background: var(--vz-k2-accent);
color: var(--vz-k2-on-accent);
text-decoration: none;
}
.vz-k-myths__all { justify-self: start; margin-top: 2px; }
.vz-k-myths__all::before {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8l5 5 5-5M7 13l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8l5 5 5-5M7 13l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 260ms var(--vz-k2-ease);
}
.vz-k-myths__all[data-state="open"]::before { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
.vz-k-myth:not([open]):has(> summary:hover) { transform: translateY(-2px); box-shadow: var(--vz-k2-shadow), inset 0 0 0 1px rgba(43, 91, 125, .14); }
.vz-k-myth > summary:hover .vz-k-myth__hint::after { transform: translateY(2px); }
}
.vz-k-myth:not([open]):has(> summary:active) { transform: scale(.99); transition-duration: 120ms; }
/* =====================================================================
17. Leggenda aside.vz-k-legend
===================================================================== */
.vz-k-legend {
position: relative;
isolation: isolate;
overflow: hidden;
margin: 1.6em 0 1.4em;
padding: clamp(24px, 4.4vw, 42px) clamp(20px, 4.4vw, 42px) clamp(22px, 4vw, 36px);
border-radius: 28px;
background: linear-gradient(165deg, #f4f8fb 0%, #e5eff7 100%);
box-shadow: inset 0 0 0 1px rgba(43, 91, 125, .1);
color: var(--vz-k2-text);
}
/* onde tenui che sfumano verso il basso (motivo «da racconto», nessun testo) */
.vz-k-legend::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28' viewBox='0 0 160 28' fill='none' stroke='%232b5b7d' stroke-opacity='.1' stroke-width='1.4'%3E%3Cpath d='M0 14C13.3 4 26.7 4 40 14S66.7 24 80 14S106.7 4 120 14S146.7 24 160 14'/%3E%3C/svg%3E") 0 0 / 160px 28px repeat;
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
/* virgolette grandi decorative in alto a destra */
.vz-k-legend::after {
content: "";
position: absolute;
top: clamp(16px, 3vw, 26px);
right: clamp(16px, 3vw, 30px);
z-index: -1;
width: clamp(46px, 7vw, 68px);
aspect-ratio: 48 / 40;
background: var(--vz-k2-soft);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M20 4C10 7 4 14 4 24v12h14V22h-7c.6-6 4-10 10.5-12.5zM44 4C34 7 28 14 28 24v12h14V22h-7c.6-6 4-10 10.5-12.5z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M20 4C10 7 4 14 4 24v12h14V22h-7c.6-6 4-10 10.5-12.5zM44 4C34 7 28 14 28 24v12h14V22h-7c.6-6 4-10 10.5-12.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vz-k-legend > p.vz-k-legend__kicker {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px !important;
color: var(--vz-k2-deep);
font-family: var(--vz-k2-sans);
font-size: .76rem !important;
line-height: 1.3 !important;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
}
.vz-k-legend > p.vz-k-legend__kicker::before {
content: "";
flex: none;
width: 26px;
height: 11px;
background: var(--vz-k2-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 7c3-4 6-4 8 0s5 4 8 0 6-4 8 0'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 7c3-4 6-4 8 0s5 4 8 0 6-4 8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vz-k-legend > h3 {
margin: 0 0 .55em !important;
padding-right: clamp(48px, 8vw, 80px);
font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem) !important;
line-height: 1.15 !important;
color: var(--vz-k2-ink);
}
/* il racconto: Fraunces inclinato (il redesign carica solo il tondo, il browser ricava il corsivo) */
.vz-k-legend > p:not([class]) {
margin: 0 0 .9em !important;
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100;
font-style: italic;
font-weight: 380;
font-size: clamp(1.14rem, 1.04rem + .4vw, 1.32rem) !important;
line-height: 1.55 !important;
color: var(--vz-k2-ink);
}
.vz-k-legend > p.vz-k-legend__fact {
position: relative;
margin: 1.1em 0 .9em !important;
padding: 14px 18px 14px 20px;
border-radius: 16px;
background: rgba(255, 255, 255, .86);
box-shadow: 0 1px 2px rgba(31, 61, 63, .05), inset 3px 0 0 var(--vz-k2-accent);
font-size: .98rem !important;
line-height: 1.6 !important;
color: var(--vz-k2-text);
}
.vz-k-legend > p.vz-k-legend__fact > strong:first-child { color: var(--vz-k2-deep); }
.vz-k-legend > p.vz-k-legend__source {
margin: 0 !important;
font-size: .84rem !important;
line-height: 1.5 !important;
color: var(--vz-k2-muted);
}
.vz-k-legend + .vz-k-myths { margin-top: 1.1em; }
/* =====================================================================
18. Numeri wow e fatti ul.vz-k-numbers, ul.vz-k-facts
===================================================================== */
ul.vz-k-numbers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 3.2vw, 30px) clamp(16px, 3vw, 28px);
margin: 1.5em 0 1.4em !important;
}
.vz-k-numbers > li {
min-width: 0;
padding: 0 !important;
}
/* la pillola bicolore dei titoli del redesign sopra ogni numero (segno, nessun testo) */
ul.vz-k-numbers > li::before {
content: "" !important;
display: block !important;
position: static !important;
width: 36px !important;
height: 5px !important;
margin: 0 0 14px !important;
border-radius: 999px !important;
background: var(--vz-b-mark, linear-gradient(90deg, #80b2d3 0 40%, #c6ddec 40% 100%)) !important;
box-shadow: none !important;
}
.vz-k-numbers p.vz-k-num {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 7px;
margin: 0 0 8px !important;
line-height: 1 !important;
color: var(--vz-k2-deep);
}
.vz-k-num__value {
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100, "opsz" 144;
font-weight: 340;
font-size: clamp(2.6rem, 1.9rem + 2.4vw, 3.7rem);
line-height: .95;
letter-spacing: -.035em;
font-variant-numeric: lining-nums;
color: var(--vz-k2-deep);
}
.vz-k-num__unit {
font-family: var(--vz-k2-sans);
font-weight: 600;
font-size: .95rem;
letter-spacing: .02em;
color: var(--vz-k2-muted);
}
.vz-k-numbers p.vz-k-num__label {
margin: 0 !important;
font-size: .95rem !important;
line-height: 1.5 !important;
color: var(--vz-k2-text);
text-wrap: pretty;
}
ul.vz-k-facts {
display: grid;
margin: .6em 0 1.8em !important;
}
ul.vz-k-facts > li {
padding: 15px 0 15px 46px !important;
border-bottom: 1px solid var(--vz-k2-line) !important;
color: var(--vz-k2-text);
}
ul.vz-k-facts > li:last-child { border-bottom: 0 !important; }
/* stella su una pastiglia azzurra */
ul.vz-k-facts > li::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
top: 14px !important;
width: 30px !important;
height: 30px !important;
margin: 0 !important;
border-radius: 50% !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232b5b7d' d='M12 2.8l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 16.8l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E") center / 15px 15px no-repeat, var(--vz-k2-tint) !important;
box-shadow: none !important;
}
/* ingresso leggero dei numeri mentre entrano nello schermo: solo spostamento, mai trasparenza (contrasto sempre pieno);
fuori dall'intervallo nessun effetto. Solo browser con animazioni legate allo scroll. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.vz-k-numbers > li { animation: vzK2Rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
.vz-k-numbers > li:nth-child(2) { animation-range: entry 6% entry 76%; }
.vz-k-numbers > li:nth-child(3) { animation-range: entry 12% entry 82%; }
.vz-k-numbers > li:nth-child(4) { animation-range: entry 18% entry 88%; }
}
}
@keyframes vzK2Rise { from { translate: 0 22px; } to { translate: 0 0; } }
/* =====================================================================
19. Quiz section.vz-k-quiz
Nella v2 il punteggio (p.vz-k-quiz__score, aria-live) lo crea il JS in fondo al blocco; spazio riservato più sotto.
===================================================================== */
.vz-k-quiz {
position: relative;
margin: 2.2em 0;
padding: clamp(22px, 4.6vw, 46px) clamp(16px, 4.6vw, 46px) clamp(20px, 4vw, 40px);
border-radius: 28px;
background: linear-gradient(160deg, #eef6fb 0%, #dcebf5 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(128, 178, 211, .28);
color: var(--vz-k2-text);
}
.vz-k-quiz > h2 { margin: 0 0 .5em !important; }
.vz-k-quiz__q { padding: 22px 0 6px; border-top: 1px solid rgba(43, 91, 125, .14); }
.vz-k-quiz > h2 + .vz-k-quiz__q { border-top: 0; padding-top: 4px; }
.vz-k-quiz p.vz-k-quiz__question {
margin: 0 0 14px !important;
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100;
font-weight: 440;
font-size: clamp(1.14rem, 1.04rem + .4vw, 1.3rem) !important;
line-height: 1.35 !important;
color: var(--vz-k2-ink);
text-wrap: pretty;
}
ul.vz-k-quiz__options {
display: grid;
gap: 10px;
margin: 0 0 12px !important;
}
/* senza JS: righe leggibili con la lettera; con JS il pulsante dentro la riga ha le stesse misure (nessuno spostamento) */
ul.vz-k-quiz__options > li {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 9px 14px 9px 10px !important;
border-radius: 16px;
background: rgba(255, 255, 255, .72);
box-shadow: inset 0 0 0 1.5px rgba(43, 91, 125, .16);
font-size: 1rem !important;
line-height: 1.4 !important;
color: var(--vz-k2-ink);
}
ul.vz-k-quiz__options > li::before {
content: attr(data-key) !important;
content: attr(data-key) / "" !important;
display: grid !important;
place-items: center;
flex: none;
position: static !important;
width: 34px !important;
height: 34px !important;
margin: 0 !important;
border-radius: 50% !important;
background: var(--vz-k2-tint) !important;
color: var(--vz-k2-deep);
font: 600 .88rem/1 var(--vz-k2-sans);
text-transform: uppercase;
box-shadow: none !important;
}
.vz-k-quiz[data-vz-k-ready] ul.vz-k-quiz__options > li { display: block; min-height: 0; padding: 0 !important; background: none; box-shadow: none; }
.vz-k-quiz[data-vz-k-ready] ul.vz-k-quiz__options > li::before { content: none !important; display: none !important; }
.vz-k-quiz__opt {
--vz-k2-opt-line: rgba(43, 91, 125, .16);
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 56px;
margin: 0;
padding: 9px 14px 9px 10px;
border: 0;
border-radius: 16px;
background: rgba(255, 255, 255, .72);
box-shadow: inset 0 0 0 1.5px var(--vz-k2-opt-line);
color: var(--vz-k2-ink);
font: 400 1rem/1.4 var(--vz-k2-sans);
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
transition: transform 160ms var(--vz-k2-ease), background-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}
.vz-k-quiz__opt:focus-visible { outline: 2px solid var(--vz-k2-deep); outline-offset: 3px; }
.vz-k-quiz__opt:not(.is-locked):active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
.vz-k-quiz__opt:not(.is-locked):hover { background: #fff; --vz-k2-opt-line: rgba(43, 91, 125, .5); }
}
.vz-k-quiz__key {
display: grid;
place-items: center;
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--vz-k2-tint);
color: var(--vz-k2-deep);
font: 600 .88rem/1 var(--vz-k2-sans);
transition: background-color 220ms ease, color 220ms ease;
}
.vz-k-quiz__text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.vz-k-quiz__mark {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
font: 600 .84rem/1.2 var(--vz-k2-sans);
letter-spacing: .01em;
white-space: nowrap;
}
.vz-k-quiz__mark:empty { display: none; }
/* icona dentro il cerchio della lettera: spunta (giusto) o croce (sbagliato) */
.vz-k-quiz__opt:is(.is-right, .is-wrong, .is-answer) .vz-k-quiz__key { color: transparent; position: relative; }
.vz-k-quiz__opt:is(.is-right, .is-wrong, .is-answer) .vz-k-quiz__key::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
background: #fff;
-webkit-mask: var(--vz-k2-icon) center / contain no-repeat;
mask: var(--vz-k2-icon) center / contain no-repeat;
}
.vz-k-quiz__opt:is(.is-right, .is-answer) { --vz-k2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.vz-k-quiz__opt.is-wrong { --vz-k2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
/* giusto: acqua chiara (azzurro del logo); sbagliato: tramonto (pesca). Colore + icona + parola. */
.vz-k-quiz__opt.is-right { background: var(--vz-k2-accent); color: var(--vz-k2-on-accent); --vz-k2-opt-line: var(--vz-k2-deep); }
.vz-k-quiz__opt.is-right .vz-k-quiz__key { background: var(--vz-k2-on-accent); }
.vz-k-quiz__opt.is-right .vz-k-quiz__mark { color: var(--vz-k2-on-accent); }
.vz-k-quiz__opt.is-wrong { background: var(--vz-k2-warm-tint); --vz-k2-opt-line: var(--vz-k2-warm-line); }
.vz-k-quiz__opt.is-wrong .vz-k-quiz__key { background: #c2622d; }
.vz-k-quiz__opt.is-wrong .vz-k-quiz__mark { color: var(--vz-k2-warm); }
.vz-k-quiz__opt.is-answer { background: #fff; --vz-k2-opt-line: var(--vz-k2-deep); }
.vz-k-quiz__opt.is-answer .vz-k-quiz__key { background: var(--vz-k2-deep); }
.vz-k-quiz__opt.is-answer .vz-k-quiz__mark { color: var(--vz-k2-deep); }
.vz-k-quiz__opt.is-locked { cursor: default; }
.vz-k-quiz__opt.is-locked:not(.is-right):not(.is-wrong):not(.is-answer) { background: rgba(255, 255, 255, .45); color: var(--vz-k2-muted); --vz-k2-opt-line: rgba(43, 91, 125, .1); }
.vz-k-quiz__opt.is-locked:not(.is-right):not(.is-wrong):not(.is-answer) .vz-k-quiz__key { background: rgba(43, 91, 125, .08); color: var(--vz-k2-muted); }
/* la spiegazione */
details.vz-k-quiz__answer { margin: 0 0 14px; }
details.vz-k-quiz__answer > summary {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 4px;
list-style: none;
cursor: pointer;
color: var(--vz-k2-deep);
font: 600 .9rem/1.2 var(--vz-k2-sans);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
border-radius: 10px;
}
details.vz-k-quiz__answer > summary::-webkit-details-marker { display: none; }
details.vz-k-quiz__answer > summary::marker { content: ""; }
details.vz-k-quiz__answer > summary::after {
content: "";
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 240ms var(--vz-k2-ease);
}
details.vz-k-quiz__answer[open] > summary::after { transform: rotate(180deg); }
details.vz-k-quiz__answer > summary:focus-visible { outline: 2px solid var(--vz-k2-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
details.vz-k-quiz__answer > summary:hover { text-decoration: underline; text-underline-offset: .22em; }
}
details.vz-k-quiz__answer > p {
margin: 4px 0 0 !important;
padding: 14px 18px;
border-radius: 16px;
background: #fff;
box-shadow: 0 1px 2px rgba(31, 61, 63, .05), inset 3px 0 0 var(--vz-k2-accent);
font-size: 1rem !important;
line-height: 1.6 !important;
color: var(--vz-k2-text);
}
/* punteggio: spazio riservato, così il riquadro non salta quando il JS lo riempie */
.vz-k-quiz p.vz-k-quiz__score {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
min-height: 44px;
margin: 10px 0 0 !important;
padding-top: 16px;
border-top: 1px solid rgba(43, 91, 125, .14);
font-size: .98rem !important;
line-height: 1.4 !important;
color: var(--vz-k2-ink);
}
.vz-k-quiz p.vz-k-quiz__score:empty { border-top-color: transparent; }
/* v2: il punteggio lo crea il JS; con JavaScript attivo il suo spazio è riservato da subito */
@media (scripting: enabled) {
.vz-k-quiz:not([data-vz-k-ready]):not(:has(.vz-k-quiz__score))::after {
content: "";
display: block;
min-height: 44px;
margin-top: 10px;
padding-top: 16px;
border-top: 1px solid transparent;
}
}
.vz-k-quiz__dots { display: inline-flex; gap: 7px; }
.vz-k-quiz__dots i {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(43, 91, 125, .16);
transition: background-color 260ms ease, transform 260ms var(--vz-k2-ease);
}
.vz-k-quiz__dots i.is-right { background: var(--vz-k2-deep); }
.vz-k-quiz__dots i.is-wrong { background: #c2622d; }
.vz-k-quiz__dots i.is-shown { background: transparent; box-shadow: inset 0 0 0 2px var(--vz-k2-deep); }
.vz-k-quiz__result { font-weight: 600; }
.vz-k-quiz p.vz-k-quiz__score.is-final .vz-k-quiz__result {
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100;
font-weight: 440;
font-size: 1.3rem;
letter-spacing: -.005em;
}
.vz-k-quiz__again { margin-top: 12px; }
.vz-k-quiz__again[hidden] { display: none; }
.vz-k-quiz__again::before {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.6-5.9L4 8.5'/%3E%3Cpath d='M4 3.5v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.6-5.9L4 8.5'/%3E%3Cpath d='M4 3.5v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* =====================================================================
20. Lista da spuntare div.vz-k-checklist
Nella v2 l'HTML ha solo
: il JS mette in ogni voce testo
senza casella): stessa riga della voce con la casella (12 + 24 + 12 px a sinistra),
con un quadratino vuoto disegnato; il JS la sostituisce con senza spostare il testo */
.vz-k-checklist:not([data-vz-k-ready]) .vz-k-checklist__list > li:not(:has(input)) {
min-height: 48px;
padding: 11px 12px 11px 48px !important;
border-radius: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='7' fill='%23fff' stroke='%235f7a78' stroke-width='2'/%3E%3C/svg%3E") 12px 11px / 24px 24px no-repeat;
color: var(--vz-k2-text);
font-size: 1rem;
line-height: 1.45;
}
/* stato «3 of 6 packed» con la barra di avanzamento (riempita dal JS) */
.vz-k-checklist p.vz-k-checklist__status {
position: relative;
margin: 8px 0 0 !important;
padding: 16px 12px 0;
font-size: .92rem !important;
line-height: 1.4 !important;
color: var(--vz-k2-muted);
min-height: 44px;
}
.vz-k-checklist p.vz-k-checklist__status:empty { visibility: hidden; }
.vz-k-checklist p.vz-k-checklist__status::before,
.vz-k-checklist p.vz-k-checklist__status::after {
content: "";
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 6px;
border-radius: 999px;
}
.vz-k-checklist p.vz-k-checklist__status::before { background: rgba(43, 91, 125, .12); }
.vz-k-checklist p.vz-k-checklist__status::after {
background: linear-gradient(90deg, var(--vz-k2-accent) 0%, var(--vz-k2-deep) 100%);
transform: scaleX(var(--vz-k2-done, 0));
transform-origin: 0 50%;
transition: transform 420ms var(--vz-k2-ease);
}
.vz-k-checklist.is-complete p.vz-k-checklist__status { color: var(--vz-k2-deep); font-weight: 600; }
/* «Clear list»: senza JS non fa nulla, quindi resta invisibile (lo spazio c'è già: niente salti all'avvio) */
.vz-k-checklist__reset { align-self: end; margin-bottom: 2px; visibility: hidden; }
.vz-k-checklist[data-vz-k-ready] .vz-k-checklist__reset { visibility: visible; }
/* v2: contatore e «Clear list» li crea il JS; con JavaScript attivo la loro riga è riservata da subito */
@media (scripting: enabled) {
.vz-k-checklist:not([data-vz-k-ready]):not(:has(.vz-k-checklist__status))::after {
content: "";
grid-column: 1 / -1;
min-height: 44px;
margin-top: 8px;
padding-top: 16px;
}
}
/* =====================================================================
21. Tramonto di oggi div.vz-k-sunset
===================================================================== */
.vz-k-sunset {
--vz-k2-pad: clamp(20px, 3.6vw, 34px);
--vz-k2-arc: clamp(48px, 7vw, 64px); /* altezza dell'arco del sole */
--vz-k2-sea: 22px; /* mare sotto l'orizzonte */
--vz-k2-clock: clamp(2.8rem, 2.1rem + 2.4vw, 3.8rem);
position: relative;
isolation: isolate;
overflow: hidden;
margin: 1.4em 0 1.9em;
padding: var(--vz-k2-pad) var(--vz-k2-pad) calc(var(--vz-k2-pad) + var(--vz-k2-arc) + var(--vz-k2-sea) + 6px);
border-radius: 28px;
background:
radial-gradient(90% 75% at 92% 100%, rgba(255, 214, 172, .7) 0%, rgba(250, 200, 160, .22) 38%, rgba(201, 223, 238, 0) 66%),
linear-gradient(180deg, transparent calc(100% - var(--vz-k2-sea)), rgba(128, 178, 211, .45) calc(100% - var(--vz-k2-sea)), rgba(43, 91, 125, .28) 100%),
linear-gradient(165deg, #e2eef7 0%, #c9dfee 58%, #b8d4e8 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 48px -32px rgba(43, 91, 125, .55);
color: var(--vz-k2-on-accent);
}
/* arco del giorno (dall'alba al tramonto), tratteggiato, appoggiato sull'orizzonte */
.vz-k-sunset::before {
content: "";
position: absolute;
z-index: -1;
left: var(--vz-k2-pad);
right: var(--vz-k2-pad);
bottom: var(--vz-k2-sea);
height: var(--vz-k2-arc);
border: 1.5px dashed rgba(19, 50, 74, .32);
border-bottom: 0;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* il sole: posizione calcolata dal JS sull'arco (--vz-k2-sun-x da 0 a 1, --vz-k2-sun-y altezza da 0 a 1) */
.vz-k-sunset::after {
content: "";
position: absolute;
z-index: -1;
width: 22px;
height: 22px;
left: calc(var(--vz-k2-pad) + var(--vz-k2-sun-x, .5) * (100% - 2 * var(--vz-k2-pad)) - 11px);
bottom: calc(var(--vz-k2-sea) + var(--vz-k2-sun-y, 0) * var(--vz-k2-arc) - 11px);
border-radius: 50%;
background: radial-gradient(circle at 40% 38%, #fff7e6 0%, #ffd79c 42%, #f2a66a 100%);
box-shadow: 0 0 0 6px rgba(255, 207, 138, .35), 0 0 24px 8px rgba(255, 180, 110, .45);
opacity: 0;
transition: opacity 400ms ease;
}
.vz-k-sunset[data-vz-k-ready]::after { opacity: 1; }
/* sole già tramontato (o non ancora sorto): mezzo disco sull'orizzonte, più tenue */
.vz-k-sunset.is-night::after { clip-path: inset(0 0 50% 0); box-shadow: 0 0 18px 4px rgba(255, 180, 110, .35); }
.vz-k-sunset p.vz-k-sunset__label {
margin: 0 0 6px !important;
font-family: var(--vz-k2-sans);
font-size: .78rem !important;
line-height: 1.3 !important;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #1d4b6b;
}
.vz-k-sunset p.vz-k-sunset__time {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 8px;
min-height: calc(var(--vz-k2-clock) + 36px); /* spazio riservato a orario + frase: niente salti quando il JS li scrive */
margin: 0 0 10px !important;
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100;
font-weight: 380;
font-size: clamp(1.15rem, 1.05rem + .4vw, 1.32rem) !important;
line-height: 1.35 !important;
color: var(--vz-k2-on-accent);
}
.vz-k-sunset__clock {
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100, "opsz" 144;
font-weight: 340;
font-size: var(--vz-k2-clock);
line-height: 1;
letter-spacing: -.03em;
font-variant-numeric: tabular-nums lining-nums;
color: var(--vz-k2-on-accent);
}
.vz-k-sunset__in {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .8);
color: var(--vz-k2-warm);
font: 600 .9rem/1.3 var(--vz-k2-sans);
letter-spacing: .01em;
}
@media (max-width: 480px) {
/* su telefono la frase «Tonight it has already set: tomorrow at» va su due righe: spazio riservato per entrambi gli stati */
.vz-k-sunset p.vz-k-sunset__time { min-height: calc(var(--vz-k2-clock) + 58px); }
}
.vz-k-sunset p.vz-k-sunset__note {
max-width: 34em;
margin: 0 !important;
font-size: .95rem !important;
line-height: 1.55 !important;
color: #1e3f58;
}
/* =====================================================================
22. Mappa figure.vz-k-map (disegnata, con SVG) e figure.vz-k-map.vz-k-map--list (solo elenco dei luoghi)
===================================================================== */
figure.vz-k-map { position: relative; margin: 1.6em 0 1.9em; }
.vz-k-map__canvas {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #d4e6f2;
box-shadow: inset 0 0 0 1px rgba(43, 91, 125, .14);
}
.vz-k-map__canvas > svg { display: block; width: 100%; height: auto; }
/* colori della mappa (classi usate dall'SVG di M1) */
.vz-k-map__sea { fill: #d4e6f2; }
.vz-k-map__land { fill: #f4f7f5; stroke: #9fc3da; stroke-width: 1.6; stroke-linejoin: round; }
.vz-k-map__road { fill: none; stroke: #c8d3d0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vz-k-map__label {
fill: #4a6462;
font-family: var(--vz-k2-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
paint-order: stroke;
stroke: rgba(255, 255, 255, .9);
stroke-width: 3px;
stroke-linejoin: round;
pointer-events: none;
}
.vz-k-map__pin { cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.vz-k-map__pin circle {
fill: var(--vz-k2-deep);
stroke: #fff;
stroke-width: 2.5;
transform-box: fill-box;
transform-origin: center;
transition: transform 220ms var(--vz-k2-ease), fill 200ms ease, stroke-width 200ms ease;
}
.vz-k-map__pin text {
fill: #fff;
font-family: var(--vz-k2-sans);
font-size: 13px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: central;
pointer-events: none;
}
/* il punto dell'hotel nel colore del tramonto */
.vz-k-map__pin[data-id="uji-i-ftohte"] circle { fill: #f2a66a; }
.vz-k-map__pin[data-id="uji-i-ftohte"] text { fill: #13293b; }
.vz-k-map__pin:is(.is-hot, .is-active) circle { transform: scale(1.22); }
.vz-k-map__pin.is-active circle { stroke: var(--vz-k2-on-accent); stroke-width: 3; }
.vz-k-map__pin:focus-visible circle { stroke: var(--vz-k2-on-accent); stroke-width: 4; transform: scale(1.22); }
@media (hover: hover) and (pointer: fine) {
.vz-k-map__pin:hover circle { transform: scale(1.22); }
}
ol.vz-k-map__list {
counter-reset: vzk2map;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px 16px;
margin: 16px 0 0 !important;
}
ol.vz-k-map__list > li {
counter-increment: vzk2map;
padding: 11px 12px 11px 52px !important;
border-radius: 16px;
transition: background-color 200ms ease;
}
ol.vz-k-map__list > li::before {
content: counter(vzk2map) !important;
content: counter(vzk2map) / "" !important;
display: grid;
place-items: center;
position: absolute;
left: 12px;
top: 11px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--vz-k2-deep);
color: #fff;
font: 700 .82rem/1 var(--vz-k2-sans);
box-shadow: 0 0 0 2px #fff;
}
ol.vz-k-map__list > li[data-id="uji-i-ftohte"]::before { background: #f2a66a; color: #13293b; }
ol.vz-k-map__list > li:is(.is-hot, .is-active) { background: var(--vz-k2-tint); }
.vz-k-map[data-vz-k-ready] ol.vz-k-map__list > li { cursor: pointer; }
.vz-k-map__list p.vz-k-map__name {
margin: 0 0 2px !important;
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100;
font-weight: 460;
font-size: 1.08rem !important;
line-height: 1.3 !important;
color: var(--vz-k2-ink);
}
.vz-k-map__list > li > p:not([class]) {
margin: 0 0 4px !important;
font-size: .95rem !important;
line-height: 1.5 !important;
color: var(--vz-k2-text);
}
.vz-k-map__list p.vz-k-map__links {
margin: 0 !important;
font-size: .88rem !important;
line-height: 1.5 !important;
color: var(--vz-k2-muted);
}
figure.vz-k-map > figcaption {
margin: 12px 0 0 !important;
font-style: normal !important;
font-size: .86rem !important;
line-height: 1.5 !important;
color: var(--vz-k2-muted);
text-align: left !important;
}
/* la scheda piccola vicino al punto (creata dal JS) */
.vz-k-map__card {
position: absolute;
z-index: 3;
width: min(270px, calc(100% - 16px));
padding: 14px 44px 14px 16px;
border-radius: 16px;
background: #fff;
box-shadow: 0 18px 40px -16px rgba(19, 50, 74, .5), 0 0 0 1px rgba(43, 91, 125, .12);
color: var(--vz-k2-text);
font-family: var(--vz-k2-sans);
text-align: left;
}
.vz-k-map__card[hidden] { display: none; }
.vz-k-map__card:focus { outline: none; }
.vz-k-map__card:focus-visible { outline: 2px solid var(--vz-k2-deep); outline-offset: 2px; }
.vz-k-map__card::after {
content: "";
position: absolute;
left: calc(var(--vz-k2-arrow, 50%) - 7px);
bottom: -7px;
width: 14px;
height: 14px;
background: #fff;
transform: rotate(45deg);
box-shadow: 3px 3px 4px -2px rgba(19, 50, 74, .18);
}
.vz-k-map__card.is-below::after { bottom: auto; top: -7px; box-shadow: -2px -2px 3px -2px rgba(19, 50, 74, .16); }
.vz-k-map__card.is-docked { position: relative; left: auto; top: auto; width: auto; margin: 10px 0 0; box-shadow: 0 12px 28px -18px rgba(19, 50, 74, .5), 0 0 0 1px rgba(43, 91, 125, .16); }
.vz-k-map__card.is-docked::after { content: none; }
.vz-k-map__card-name {
margin: 0 0 4px;
font-family: var(--vz-k2-serif);
font-variation-settings: "SOFT" 100;
font-weight: 480;
font-size: 1.08rem;
line-height: 1.25;
color: var(--vz-k2-ink);
}
.vz-k-map__card-text { margin: 0 0 6px; font-size: .9rem; line-height: 1.45; }
.vz-k-map__card-links { font-size: .88rem; line-height: 1.5; color: var(--vz-k2-muted); }
.vz-k-map__card-links a {
white-space: nowrap;
color: var(--vz-k2-deep);
text-decoration: underline;
text-decoration-color: rgba(128, 178, 211, .9);
text-decoration-thickness: 1.5px;
text-underline-offset: .2em;
}
.vz-k-map__card-close {
position: absolute;
top: 6px;
right: 6px;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--vz-k2-bg);
color: var(--vz-k2-deep);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.vz-k-map__card-close::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vz-k-map__card-close:focus-visible { outline: 2px solid var(--vz-k2-deep); outline-offset: 2px; }
@media (min-width: 700px) {
ol.vz-k-map__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mappa vera (mappa/mappa.svg): ogni punto ha più cerchi (area di clic, fondo, anello, puntino sul luogo).
La regola generica del kit «.vz-k-map__pin circle» li colorava tutti e l'anello copriva il numero:
il colore va solo sul fondo; area di clic e anello restano trasparenti (l'anello si vede sul punto scelto). */
.vz-k-map .vz-k-map__pin circle.vz-k-map__pin-hit,
.vz-k-map .vz-k-map__pin[data-id] circle.vz-k-map__pin-hit { fill: transparent; stroke: none; }
.vz-k-map .vz-k-map__pin circle.vz-k-map__pin-ring,
.vz-k-map .vz-k-map__pin[data-id] circle.vz-k-map__pin-ring { fill: none; stroke: none; }
.vz-k-map .vz-k-map__pin:is(.is-active, :focus-visible) circle.vz-k-map__pin-ring { stroke: var(--vz-accent-deep, #2b5b7d); stroke-width: 2.5; }
.vz-k-map .vz-k-map__pin circle.vz-k-map__dot { stroke-width: 1.5; }
.vz-k-map .vz-k-map__pin text.vz-k-map__pin-num { fill: #fff; font-size: 14px; }
.vz-k-map .vz-k-map__pin[data-id="uji-i-ftohte"] text.vz-k-map__pin-num { fill: #13293b; }
@media (min-width: 900px) {
.vz-k-map .vz-k-map__pin-body { transform: scale(1.05); }
}
/* variante «solo elenco» (figure.vz-k-map.vz-k-map--list, modello di Gerti): nessun disegno, i luoghi come schede di
vetro di mare con il numero, il nome in Fraunces, una riga e i link; 2 colonne da 700 px. Nessun JS. */
figure.vz-k-map.vz-k-map--list {
margin: 1.4em 0 1.9em;
}
figure.vz-k-map--list ol.vz-k-map__list {
gap: 10px 12px;
margin: 0 !important;
}
figure.vz-k-map--list ol.vz-k-map__list > li {
padding: 16px 18px 16px 58px !important;
border-radius: 18px;
background: var(--vz-k2-bg);
box-shadow: inset 0 0 0 1px rgba(31, 61, 63, .06);
}
figure.vz-k-map--list ol.vz-k-map__list > li::before {
left: 16px;
top: 16px;
width: 30px;
height: 30px;
box-shadow: 0 0 0 3px var(--vz-k2-paper), 0 6px 14px -8px rgba(19, 50, 74, .6);
}
figure.vz-k-map--list .vz-k-map__list p.vz-k-map__name { margin: 2px 0 4px !important; font-size: 1.12rem !important; }
figure.vz-k-map--list .vz-k-map__list p.vz-k-map__links { margin-top: 8px !important; }
figure.vz-k-map--list .vz-k-map__list p.vz-k-map__links a {
white-space: nowrap; /* «Open in Google Maps» resta su una riga: si va a capo fra i due link */
color: var(--vz-k2-deep);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(128, 178, 211, .9);
text-decoration-thickness: 1.5px;
text-underline-offset: .2em;
}
@media (hover: hover) and (pointer: fine) {
figure.vz-k-map--list .vz-k-map__list p.vz-k-map__links a:hover { text-decoration-color: currentColor; }
}
figure.vz-k-map--list .vz-k-map__list p.vz-k-map__links a:focus-visible { outline: 2px solid var(--vz-k2-deep); outline-offset: 2px; border-radius: 4px; }
figure.vz-k-map--list > figcaption { margin-top: 14px !important; }
@media (max-width: 480px) {
figure.vz-k-map--list ol.vz-k-map__list > li { padding: 14px 14px 14px 52px !important; }
figure.vz-k-map--list ol.vz-k-map__list > li::before { left: 12px; top: 14px; }
}
/* =====================================================================
23. Galleria div.vz-k-gallery
===================================================================== */
.vz-k-gallery { margin: 1.4em 0 1.9em; }
ul.vz-k-gallery__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: 16px 14px;
margin: 0 !important;
}
.vz-k-gallery__item > figure { margin: 0 !important; max-width: none !important; }
a.vz-k-gallery__link {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1 / 1;
border-radius: 18px;
background: var(--vz-k2-bg);
isolation: isolate;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: transform 160ms var(--vz-k2-ease);
}
a.vz-k-gallery__link:active { transform: scale(.98); }
a.vz-k-gallery__link:focus-visible { outline: 2px solid var(--vz-k2-deep); outline-offset: 3px; }
.vz-k-gallery a.vz-k-gallery__link img {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
aspect-ratio: 1 / 1;
object-fit: cover;
margin: 0 !important;
border-radius: 0 !important;
transition: transform 700ms var(--vz-k2-ease);
}
/* cerchio con le frecce «ingrandisci» che compare al passaggio del mouse (decorazione) */
a.vz-k-gallery__link::after {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b5b7d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
box-shadow: 0 6px 16px -8px rgba(31, 61, 63, .5);
opacity: 0;
transform: scale(.8);
transition: opacity 180ms ease, transform 240ms var(--vz-k2-ease);
pointer-events: none;
}
a.vz-k-gallery__link:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
a.vz-k-gallery__link:hover img { transform: scale(1.045); }
a.vz-k-gallery__link:hover::after { opacity: 1; transform: none; }
}
.vz-k-gallery figcaption.vz-k-gallery__credit {
margin: 8px 2px 0 !important;
font-style: normal !important;
font-size: .78rem !important;
line-height: 1.45 !important;
color: var(--vz-k2-muted);
text-align: left !important;
}
.vz-k-gallery figcaption.vz-k-gallery__credit a {
color: var(--vz-k2-deep);
text-decoration: underline;
text-decoration-color: rgba(128, 178, 211, .9);
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
/* telefono e tablet stretto: fila da scorrere col dito (una foto e mezza), che arriva ai bordi della lastra */
@media (max-width: 767px) {
.vz-k-gallery { --vz-k2-bleed: var(--vz-b-pad, 20px); }
ul.vz-k-gallery__list {
display: flex;
gap: 10px;
margin-inline: calc(-1 * var(--vz-k2-bleed)) !important;
padding: 2px var(--vz-k2-bleed) 12px !important;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--vz-k2-bleed);
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.vz-k-gallery__list > li { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
.vz-k-gallery { --vz-k2-bleed: 20px; } /* rientro della lastra su telefono (50-blog.css: padding 30px 20px) */
}
/* la foto grande (dialog nativo, creato dal JS) */
dialog.vz-k-gallery__dialog {
position: fixed;
inset: 0;
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #eef4f9;
overflow: hidden;
font-family: var(--vz-k2-sans, "Figtree", system-ui, sans-serif);
}
dialog.vz-k-gallery__dialog[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
dialog.vz-k-gallery__dialog::backdrop {
background: rgba(10, 26, 37, .9);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.vz-k-gallery__stage {
display: grid;
place-items: center;
min-height: 0;
padding: 64px clamp(12px, 5vw, 76px) 10px;
touch-action: pan-y pinch-zoom;
}
/* misure scritte dal JS (riquadro con le proporzioni della foto), qui solo i limiti */
.vz-k-gallery__dialog img.vz-k-gallery__full {
display: block;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
border-radius: 14px !important;
object-fit: contain;
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
background: rgba(255, 255, 255, .04);
}
.vz-k-gallery__bar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px 16px;
width: min(100%, 1100px);
margin: 0 auto;
padding: 12px clamp(12px, 4vw, 40px) max(16px, env(safe-area-inset-bottom, 0px));
}
.vz-k-gallery__count { font-weight: 600; font-size: .9rem; letter-spacing: .04em; color: #c3d5e3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vz-k-gallery__desc { font-size: .95rem; line-height: 1.45; color: #eef4f9; }
.vz-k-gallery__credit-full { margin-top: 2px; font-size: .8rem; line-height: 1.45; color: #c3d5e3; }
.vz-k-gallery__credit-full a { color: #eef4f9; text-decoration: underline; text-underline-offset: .2em; }
.vz-k-gallery__credit-full:empty { display: none; }
.vz-k-gallery__nav { display: inline-flex; gap: 8px; }
:is(.vz-k-gallery__prev, .vz-k-gallery__next, .vz-k-gallery__close) {
position: relative;
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
color: #fff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background-color 180ms ease, transform 160ms var(--vz-k2-ease, ease-out);
}
:is(.vz-k-gallery__prev, .vz-k-gallery__next, .vz-k-gallery__close)::before {
content: "";
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: var(--vz-k2-icon) center / contain no-repeat;
mask: var(--vz-k2-icon) center / contain no-repeat;
}
.vz-k-gallery__prev { --vz-k2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.vz-k-gallery__next { --vz-k2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.vz-k-gallery__close { --vz-k2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; }
:is(.vz-k-gallery__prev, .vz-k-gallery__next, .vz-k-gallery__close):active { transform: scale(.94); }
:is(.vz-k-gallery__prev, .vz-k-gallery__next, .vz-k-gallery__close):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
:is(.vz-k-gallery__prev, .vz-k-gallery__next)[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
:is(.vz-k-gallery__prev, .vz-k-gallery__next, .vz-k-gallery__close):hover { background: rgba(255, 255, 255, .26); }
}
@media (max-width: 560px) {
.vz-k-gallery__bar { grid-template-columns: minmax(0, 1fr) auto; }
.vz-k-gallery__count { grid-column: 1; grid-row: 1; }
.vz-k-gallery__nav { grid-column: 2; grid-row: 1; }
.vz-k-gallery__text { grid-column: 1 / -1; grid-row: 2; }
}
/* =====================================================================
24. Video verticale figure.vz-k-video ( o ; il pulsante lo crea il JS se manca)
===================================================================== */
figure.vz-k-video {
width: min(100%, 400px, calc(min(78svh, 720px) * 9 / 16));
max-width: 100% !important;
margin: 1.6em auto 1.9em !important;
}
.vz-k-video__frame {
position: relative;
overflow: hidden;
aspect-ratio: 9 / 16;
border-radius: 24px;
background: #1e3f58;
box-shadow: 0 26px 56px -30px rgba(19, 50, 74, .7);
isolation: isolate;
}
.vz-k-video__media {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.vz-k-video__toggle {
position: absolute;
right: 14px;
bottom: 14px;
z-index: 2;
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--vz-glass-bg, linear-gradient(135deg, rgba(240, 248, 254, .9), rgba(196, 224, 244, .82)));
-webkit-backdrop-filter: blur(10px) saturate(160%);
backdrop-filter: blur(10px) saturate(160%);
box-shadow: var(--vz-glass-shadow-sm, 0 10px 24px -12px rgba(34, 82, 114, .5));
color: var(--vz-k2-on-accent);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: transform 160ms var(--vz-k2-ease);
}
.vz-k-video__toggle[hidden] { display: none; }
.vz-k-video__toggle::before {
content: "";
width: 14px;
height: 16px;
background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
.vz-k-video__toggle[data-state="paused"]::before {
width: 14px;
margin-left: 3px;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.vz-k-video__toggle:active { transform: scale(.94); }
.vz-k-video__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px var(--vz-k2-deep); }
figure.vz-k-video > figcaption {
margin: 12px 4px 0 !important;
font-style: normal !important;
font-size: .86rem !important;
line-height: 1.5 !important;
color: var(--vz-k2-muted);
text-align: center !important;
}
/* =====================================================================
25. Chiedi alla reception p.vz-k-ask
===================================================================== */
p.vz-k-ask {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin: 1.2em 0 1.6em !important;
}
p.vz-k-ask a.vz-k-ask__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 24px 0 20px;
border-radius: 999px;
background: var(--vz-k2-peach);
box-shadow: 0 12px 26px -12px rgba(232, 138, 98, .9);
color: #13293b !important;
font: 700 1rem/1.2 var(--vz-k2-sans);
letter-spacing: .005em;
text-decoration: none !important;
overflow-wrap: normal;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: transform 160ms var(--vz-k2-ease), box-shadow 220ms ease;
}
p.vz-k-ask a.vz-k-ask__btn::before {
content: "";
flex: none;
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.5-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.5-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
p.vz-k-ask a.vz-k-ask__btn:active { transform: scale(.97); }
p.vz-k-ask a.vz-k-ask__btn:focus-visible { outline: 2px solid var(--vz-k2-deep); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
p.vz-k-ask a.vz-k-ask__btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(232, 138, 98, 1); }
}
p.vz-k-ask > span {
flex: 1 1 15em;
min-width: 0;
font-size: .95rem;
line-height: 1.5;
color: var(--vz-k2-muted);
}
@media (max-width: 480px) {
p.vz-k-ask a.vz-k-ask__btn { width: 100%; }
}
/* =====================================================================
Uscita fino ai bordi della lastra (sopra i 1024 px)
Solo galleria, numeri e mappa disegnata, solo dentro la lastra bianca e non dentro colonne interne affiancate
(come le immagini a blocco).
===================================================================== */
@media (min-width: 1025px) {
body.single-post .sohohotel-blog-description:not(:has(.vc_row[data-vc-full-width])):not(:has(.vz-k-spot)) :is(.vz-k-gallery, ul.vz-k-numbers, figure.vz-k-map:not(.vz-k-map--list)):not(.vc_row_inner *):not(.vz-k-day *) {
margin-left: calc(-1 * var(--vz-b-pad, 12px) + 12px) !important;
margin-right: calc(-1 * var(--vz-b-pad, 12px) + 12px) !important;
max-width: none !important;
}
body.single-post .sohohotel-blog-description:not(:has(.vc_row[data-vc-full-width])):not(:has(.vz-k-spot)) ul.vz-k-numbers:not(.vc_row_inner *) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* =====================================================================
Movimento e trasparenza ridotti
===================================================================== */
@keyframes vzkFadeDown { from { opacity: 0; transform: translateY(-6px); } }
@keyframes vzkFadeUp { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
body.single-post .sohohotel-blog-description :is(.vz-k-dish, .vz-k-toc__list) { animation: none !important; }
.vz-k-toc__panel,
.vz-k-toc__fab,
.vz-k-toc__sheet { transform: none !important; }
.vz-k-toc__fab:active,
.vz-k-toc__close:active { transform: none; }
:is(.vz-k-myth, .vz-k-myth > summary::after, .vz-k-quiz__opt, .vz-k-quiz__dots i, .vz-k-checklist__list input[type="checkbox"],
.vz-k-checklist__list input[type="checkbox"]::before, .vz-k-checklist p.vz-k-checklist__status::after, .vz-k-map__pin circle,
a.vz-k-gallery__link, a.vz-k-gallery__link img, a.vz-k-gallery__link::after, .vz-k-ask__btn) { transition-duration: .01ms !important; }
.vz-k-myth:not([open]):has(> summary:hover), .vz-k-myth:not([open]):has(> summary:active) { transform: none !important; }
a.vz-k-gallery__link img { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
.vz-k-toc__fab { background: var(--vz-k-glass-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.vz-k-toc__sheet { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.vz-k-video__toggle { background: var(--vz-glass-solid, #e6f1f9); -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog.vz-k-gallery__dialog::backdrop { background: #0a1a25; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.vz-k-video__toggle { background: var(--vz-glass-solid, #e6f1f9); }
}
/* =====================================================================
Righe WPBakery negli articoli: spazi tra testo, foto e video (30/10/2026)
- wpautop mette un vuoti non contano). Senza JavaScript: tutto leggibile. */
/* =====================================================================
0. Variabili e icone (il kit esistente le definisce solo sulle sue radici)
===================================================================== */
:is(.vz-k-hook, .vz-k-spot, .vz-k-spotbar, .vz-k-moments, .vz-k-nearby, .vz-k-region, .vz-k-discover, .vz-k-trip, .vz-k-tripadd, .vz-k-share) {
--vz-k-ink: var(--vz-ink, #1f3d3f);
--vz-k-text: var(--vz-b-text, #2e4a4b);
--vz-k-muted: var(--vz-muted, #4a6462);
--vz-k-line: var(--vz-line, rgba(31, 61, 63, .1));
--vz-k-paper: var(--vz-paper, #ffffff);
--vz-k-sea: var(--vz-bg, #eef3f1);
--vz-k-accent: var(--vz-accent, #80b2d3);
--vz-k-deep: var(--vz-accent-deep, #2b5b7d);
--vz-k-on-accent: var(--vz-accent-ink, #13324a);
--vz-k-tint: var(--vz-accent-tint, #dbe9f3);
--vz-k-soft: var(--vz-logo-soft, #c6ddec);
--vz-k-glass-solid: var(--vz-glass-solid, #e6f1f9);
--vz-k-night: var(--vz-field, #1e3f58);
--vz-k-warm: #f2a66a;
--vz-k-warm-tint: #fdeee2;
--vz-k-warm-ink: #9a4f1c;
--vz-k-serif: var(--vz-serif, "Fraunces", "Iowan Old Style", Georgia, serif);
--vz-k-sans: var(--vz-sans, "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
--vz-k-ease: var(--vz-ease-out, cubic-bezier(.23, 1, .32, 1));
--vz-k-nav: var(--vz-nav-h, 84px);
--vz-k-i-from: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s-6.8-5.9-6.8-11.3a6.8 6.8 0 0 1 13.6 0c0 5.4-6.8 11.3-6.8 11.3z'/%3E%3Ccircle cx='12' cy='9.9' r='2.4'/%3E%3C/svg%3E");
--vz-k-i-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2V12l3.2 2'/%3E%3C/svg%3E");
--vz-k-i-when: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M12 3v1.8M12 19.2V21M3 12h1.8M19.2 12H21M5.6 5.6l1.3 1.3M17.1 17.1l1.3 1.3M5.6 18.4l1.3-1.3M17.1 6.9l1.3-1.3'/%3E%3C/svg%3E");
--vz-k-i-who: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.6' r='3.1'/%3E%3Cpath d='M3.4 19.4c.7-3.3 3-5.2 5.6-5.2s4.9 1.9 5.6 5.2'/%3E%3Ccircle cx='17.2' cy='9.6' r='2.4'/%3E%3Cpath d='M16 14.4c2.4.1 4.1 1.6 4.8 4.4'/%3E%3C/svg%3E");
--vz-k-i-cost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='6.5' width='18.4' height='11' rx='2.2'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Cpath d='M6.2 9.6v4.8M17.8 9.6v4.8'/%3E%3C/svg%3E");
--vz-k-i-effort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19.2l6.2-9.7 3.5 5.3 2.7-3.7 5.6 8.1z'/%3E%3C/svg%3E");
--vz-k-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
--vz-k-i-nav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5L3.8 10.6l6.3 2.3 2.3 6.3z'/%3E%3C/svg%3E");
--vz-k-i-bed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19V6M3 15h18v4M21 15v-3a3 3 0 0 0-3-3h-7v6'/%3E%3Ccircle cx='7' cy='11' r='2'/%3E%3C/svg%3E");
--vz-k-i-fork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v7a2 2 0 0 0 2 2v9M11 3v7a2 2 0 0 1-2 2M9 3v5M17 21V3c-2.2 1.6-3 4-3 7v3h3'/%3E%3C/svg%3E");
--vz-k-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
--vz-k-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
}
/* =====================================================================
0b. wpautop:
vuoti dentro i blocchi non contano
===================================================================== */
body.single-post .sohohotel-blog-description :is(.vz-k-spot, .vz-k-spot__list, .vz-k-spot__item, .vz-k-moments, .vz-k-moments__list, .vz-k-moment, .vz-k-nearby, .vz-k-nearby__list, .vz-k-near) > br { display: none; }
.vz-k-region > br, .vz-k-region__layout > br { display: none; }
.vz-k-region p:empty { display: none; }
body.single-post .sohohotel-blog-description :is(.vz-k-spot, .vz-k-spot__list, .vz-k-moments, .vz-k-nearby, .vz-k-region) p:empty { display: none; }
body.single-post .sohohotel-blog-description :is(.vz-k-moments__list, .vz-k-nearby__list) {
list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
body.single-post .sohohotel-blog-description :is(.vz-k-moments__list, .vz-k-nearby__list) > li {
list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
font-size: inherit; line-height: inherit;
}
/* il segno del tema (freccina) e il «ciottolo» del redesign sono ::before posizionati: via, qui si parte da zero */
body.single-post .sohohotel-blog-description :is(.vz-k-moments__list, .vz-k-nearby__list) > li::before { background: none; box-shadow: none; }
/* la scheda luogo è corta (3–4 minuti): niente indice del kit (pulsante «Contents», pannello e foglio) */
body:has(.vz-k-spot) :is(nav.vz-k-toc, .vz-k-toc__panel, .vz-k-toc__fab, .vz-k-toc__sheet) { display: none !important; }
/* =====================================================================
1. Frase d'apertura p.vz-k-hook: la prima cosa che si legge
===================================================================== */
body.single-post .sohohotel-blog-description p.vz-k-hook {
position: relative;
margin: 0 0 clamp(18px, 2.4vw, 26px) !important; /* !important: il redesign ha una regola molto specifica per il primo paragrafo */
padding-top: 22px;
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 340 !important;
font-style: italic;
font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem) !important;
line-height: 1.22 !important;
letter-spacing: -.014em !important;
color: var(--vz-k-ink);
text-wrap: balance;
}
body.single-post .sohohotel-blog-description p.vz-k-hook::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 44px;
height: 4px;
border-radius: 4px;
background: linear-gradient(90deg, var(--vz-k-accent) 0 62%, var(--vz-k-warm) 62% 100%);
}
/* =====================================================================
2. Pannello aside.vz-k-spot («Plan this visit»)
Vetro chiaro, una voce per riga con l'icona in un cerchio; sotto i 1100 px è una scheda normale.
===================================================================== */
body.single-post .sohohotel-blog-description aside.vz-k-spot {
box-sizing: border-box;
position: relative;
margin: clamp(20px, 3vw, 30px) 0 clamp(26px, 3.6vw, 38px);
padding: 22px 22px 20px;
border-radius: 26px;
background: linear-gradient(165deg, var(--vz-k-glass-solid) 0%, #f6fafd 100%);
box-shadow: 0 0 0 1px rgba(43, 91, 125, .1), inset 0 1px 0 rgba(255, 255, 255, .95), 0 26px 50px -30px rgba(43, 91, 125, .42);
color: var(--vz-k-text);
font-family: var(--vz-k-sans);
font-size: 1rem;
line-height: 1.45;
}
@supports (backdrop-filter: blur(1px)) {
body.single-post .sohohotel-blog-description aside.vz-k-spot {
background: linear-gradient(165deg, rgba(230, 241, 249, .86) 0%, rgba(246, 250, 253, .9) 100%);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
backdrop-filter: blur(14px) saturate(1.15);
}
}
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__title {
margin: 0 0 6px;
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 450;
font-size: 1.5rem;
line-height: 1.15;
letter-spacing: -.006em;
color: var(--vz-k-ink);
}
body.single-post .sohohotel-blog-description aside.vz-k-spot dl.vz-k-spot__list { margin: 0; padding: 0; display: block; }
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item {
position: relative;
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
column-gap: 14px;
align-items: center;
margin: 0;
padding: 12px 0;
border: 0;
border-top: 1px solid var(--vz-k-line);
}
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item:first-child { border-top: 0; }
/* cerchio + icona (maschera) nella prima colonna, a cavallo delle due righe */
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item::before,
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item::after {
content: "";
grid-column: 1;
grid-row: 1 / span 2;
place-self: center;
position: static;
margin: 0;
border: 0;
}
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item::before {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--vz-k-tint);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item::after {
width: 21px;
height: 21px;
background: var(--vz-k-deep);
-webkit-mask: var(--vz-k-i-from) center / contain no-repeat;
mask: var(--vz-k-i-from) center / contain no-repeat;
}
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item[data-icon="time"]::after { -webkit-mask-image: var(--vz-k-i-time); mask-image: var(--vz-k-i-time); }
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item[data-icon="when"]::after { -webkit-mask-image: var(--vz-k-i-when); mask-image: var(--vz-k-i-when); }
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item[data-icon="who"]::after { -webkit-mask-image: var(--vz-k-i-who); mask-image: var(--vz-k-i-who); }
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item[data-icon="cost"]::after { -webkit-mask-image: var(--vz-k-i-cost); mask-image: var(--vz-k-i-cost); }
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item[data-icon="effort"]::after { -webkit-mask-image: var(--vz-k-i-effort); mask-image: var(--vz-k-i-effort); }
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item dt {
grid-column: 2;
grid-row: 1;
margin: 0;
padding: 0;
font-size: .72rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
line-height: 1.3;
color: var(--vz-k-muted);
background: none !important;
box-shadow: none !important;
}
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item dd {
grid-column: 2;
grid-row: 2;
margin: 2px 0 0;
padding: 0;
font-size: 1.04rem;
font-weight: 540;
line-height: 1.38;
color: var(--vz-k-ink);
text-wrap: pretty;
background: none !important;
box-shadow: none !important;
}
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__note {
margin: 4px 0 0;
padding: 12px 0 0;
border-top: 1px solid var(--vz-k-line);
font-size: .9rem;
line-height: 1.45;
color: var(--vz-k-muted);
}
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 14px 0 0;
padding: 0;
}
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 12px 18px;
border-radius: 999px;
font-family: var(--vz-k-sans);
font-size: 17px;
font-weight: 600;
line-height: 1.2;
text-decoration: none !important;
box-shadow: none;
transition: transform 160ms var(--vz-k-ease), background-color 200ms ease, box-shadow 200ms ease;
}
/* Stay in Vlorë (celeste) ed Eat at Eden (pesca): pulsanti pieni uno sotto l'altro; Directions, solo bordo, sotto */
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a.vz-k-spot__stay { order: 1; background: var(--vz-k-accent); color: var(--vz-k-on-accent) !important; }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a.vz-k-spot__eat { order: 2; background: var(--vz-k-warm); color: var(--vz-k-on-accent) !important; }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a.vz-k-spot__go {
order: 3;
grid-column: auto;
min-height: 48px;
background: transparent;
color: var(--vz-k-deep) !important;
box-shadow: inset 0 0 0 1.5px rgba(43, 91, 125, .55);
}
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a.vz-k-spot__go::after {
content: "";
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: var(--vz-k-i-nav) center / contain no-repeat;
mask: var(--vz-k-i-nav) center / contain no-repeat;
}
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a:is(.vz-k-spot__stay, .vz-k-spot__eat)::before {
content: "";
flex: none;
width: 22px;
height: 22px;
background: currentColor;
-webkit-mask: var(--vz-k-i-bed) center / contain no-repeat;
mask: var(--vz-k-i-bed) center / contain no-repeat;
}
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a.vz-k-spot__eat::before { -webkit-mask-image: var(--vz-k-i-fork); mask-image: var(--vz-k-i-fork); }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a:active { transform: scale(.97); }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 3px; }
@media (hover: hover) {
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a.vz-k-spot__stay:hover { background: #6fa5ca; }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a.vz-k-spot__eat:hover { background: #eb9650; }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions a.vz-k-spot__go:hover { background: var(--vz-k-tint); }
}
/* tablet: le voci su due colonne */
@media (min-width: 560px) and (max-width: 1099px) {
body.single-post .sohohotel-blog-description aside.vz-k-spot dl.vz-k-spot__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item:nth-child(2) { border-top: 0; }
}
/* ---- computer, da 1100 px: lastra più larga, testo a sinistra, pannello fisso a destra ---- */
@media (min-width: 1100px) {
body.single-post .sohohotel-blog-single-wrapper .sohohotel-blog-description:has(.vz-k-spot) {
width: min(calc(100% - 2 * var(--vz-m, 56px)), 1180px);
padding-left: clamp(40px, 4.4vw, 64px);
padding-right: clamp(40px, 4.4vw, 64px);
}
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
column-gap: clamp(36px, 4vw, 52px);
row-gap: 0;
align-items: start;
}
/* i margini non si fondono nella griglia: tutti a zero, poi un solo margine sopra, regolare (come nel flusso normale) */
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) > * {
grid-column: 1;
min-width: 0;
margin: 0 !important;
}
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) > * + * { margin-top: 1.05em !important; }
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) > :is(h2, h3, section, ol, ul, div, figure, table) + *,
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) > * + :is(section, ol.vz-k-timeline, div.vz-k-verdict, div.vz-k-facts, div.vz-k-numbers, div.vz-k-myths, ul.vz-k-numbers) { margin-top: clamp(30px, 3.4vw, 44px) !important; }
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) > h2 { margin-top: clamp(40px, 4.4vw, 58px) !important; margin-bottom: 0.1em !important; }
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) > h2 + * { margin-top: .5em !important; }
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) > :is(br, p:empty) { display: none !important; }
body.single-post .sohohotel-blog-description .wpb_text_column > .wpb_wrapper:has(> .vz-k-spot) > aside.vz-k-spot {
grid-column: 2;
grid-row: 1 / span 60;
align-self: start;
position: sticky;
top: var(--vz-k-spot-top, calc(var(--vz-k-nav) + 20px)); /* nessuno scorrimento interno: vedi spotTop() in luogo.js */
margin: 0 !important;
padding: 18px 20px 18px;
}
/* voci più strette: il pannello sta tutto in 1440×900 e in 1366×768 senza scorrere */
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item { padding: 8px 0; }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__title { font-size: 1.35rem; margin-bottom: 2px; }
body.single-post .sohohotel-blog-description aside.vz-k-spot .vz-k-spot__item dd { font-size: 1rem; line-height: 1.32; }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__note { padding-top: 8px; }
body.single-post .sohohotel-blog-description aside.vz-k-spot p.vz-k-spot__actions { margin-top: 12px; gap: 8px; }
/* righe che seguono il testo (domande, fonti): stessa colonna di lettura del testo, allineata a sinistra */
body.single-post .sohohotel-blog-description:has(.vz-k-spot) > .wpb-content-wrapper > .vc_row:not(:first-child) {
max-width: calc(100% - 320px - clamp(36px, 4vw, 52px));
}
}
/* =====================================================================
3. Momenti section.vz-k-moments («What you'll see»): griglia 2 colonne (1 sotto i 560 px), niente slider
Scheda con foto: foto 4:3 (object-fit: cover) sopra il testo. Scheda senza foto: compatta, cerchio col numero accanto
al titolo e testo sotto, su fondo vetro. Con una sola foto, da 560 px la sua scheda occupa una colonna intera,
alta quanto le altre tre.
===================================================================== */
body.single-post .sohohotel-blog-description section.vz-k-moments { margin: 0; }
body.single-post .sohohotel-blog-description section.vz-k-moments > h2 { margin-top: 0; }
body.single-post .sohohotel-blog-description section.vz-k-moments ol.vz-k-moments__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1.8vw, 18px);
margin-top: clamp(16px, 2vw, 22px) !important;
counter-reset: vzk-moment;
}
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border-radius: 22px;
background: var(--vz-k-glass-solid);
box-shadow: 0 0 0 1px rgba(43, 91, 125, .08);
}
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment > img {
display: block;
width: 100% !important;
max-width: none !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
object-fit: cover;
object-position: center;
background: var(--vz-k-tint);
}
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment > h3 {
margin: 0 !important;
padding: 16px 18px 0;
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-style: normal;
font-weight: 450;
font-size: clamp(1.15rem, 1.05rem + .4vw, 1.32rem);
line-height: 1.22;
letter-spacing: -.004em;
color: var(--vz-k-ink);
}
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment > h3::after,
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment > h3::before { content: none; }
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment > p {
margin: 6px 0 0 !important;
padding: 0 18px 18px;
font-size: .98rem;
line-height: 1.5;
color: var(--vz-k-text);
}
/* senza foto: compatta */
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment:not(:has(> img)) {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
column-gap: 12px;
align-content: start;
align-items: center;
padding: 16px 18px 18px !important; /* !important: la regola base degli elenchi azzera il padding dei li */
}
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment:not(:has(> img))::before {
content: counter(vzk-moment);
grid-column: 1;
grid-row: 1;
display: grid;
place-items: center;
position: static;
width: 32px;
height: 32px;
margin: 0;
border-radius: 50%;
background: var(--vz-k-accent);
font-family: var(--vz-k-sans);
font-weight: 700;
font-size: .9rem;
line-height: 1;
color: var(--vz-k-on-accent);
opacity: 1;
}
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment:not(:has(> img)) > h3 { grid-column: 2; grid-row: 1; padding: 0 !important; }
body.single-post .sohohotel-blog-description .vz-k-moments li.vz-k-moment:not(:has(> img)) > p { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0 !important; padding: 0 !important; }
@media (min-width: 560px) {
/* una sola foto: colonna intera alta quanto le altre tre, la foto riempie l'altezza
(:has dentro :has non è valido: «unica» = ha una foto, nessuna foto dopo di lei e nessuna prima) */
body.single-post .sohohotel-blog-description .vz-k-moments__list > li:has(> img):not(:has(~ li > img)):not(li:has(> img) ~ li) { grid-row: span 3; }
body.single-post .sohohotel-blog-description .vz-k-moments__list > li:has(> img):not(:has(~ li > img)):not(li:has(> img) ~ li) > img {
flex: 1 1 0;
min-height: 200px;
height: auto !important;
aspect-ratio: auto !important;
}
}
@media (max-width: 559px) {
body.single-post .sohohotel-blog-description section.vz-k-moments ol.vz-k-moments__list { grid-template-columns: 1fr; }
}
/* =====================================================================
4. Luoghi vicini section.vz-k-nearby («Combine it with»): griglia 3 colonne (1 sotto i 560 px), scheda intera cliccabile
===================================================================== */
body.single-post .sohohotel-blog-description section.vz-k-nearby { margin: 0; }
body.single-post .sohohotel-blog-description section.vz-k-nearby > h2 { margin-top: 0; }
body.single-post .sohohotel-blog-description section.vz-k-nearby ul.vz-k-nearby__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 1.6vw, 16px);
margin-top: clamp(16px, 2vw, 22px) !important;
}
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near { min-width: 0; display: flex; }
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
border-radius: 22px;
background: var(--vz-k-glass-solid);
box-shadow: 0 0 0 1px rgba(43, 91, 125, .08);
color: var(--vz-k-ink) !important;
text-decoration: none !important;
transition: transform 220ms var(--vz-k-ease), box-shadow 220ms ease;
}
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a > img {
display: block;
width: 100% !important;
max-width: none !important;
height: auto !important;
aspect-ratio: 4 / 5 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
object-fit: cover;
object-position: center;
background: var(--vz-k-tint);
}
body.single-post .sohohotel-blog-description .vz-k-nearby .vz-k-near__name {
display: block;
padding: 14px 16px 0;
font-family: var(--vz-k-serif);
font-variation-settings: "SOFT" 100;
font-weight: 450;
font-size: 1.14rem;
line-height: 1.2;
color: var(--vz-k-ink);
}
body.single-post .sohohotel-blog-description .vz-k-nearby .vz-k-near__why {
display: block;
padding: 5px 16px 40px;
font-size: .92rem;
line-height: 1.42;
color: var(--vz-k-text);
}
/* freccia in basso a destra: dice che la scheda è un link */
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a::after {
content: "";
position: absolute;
right: 12px;
bottom: 12px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--vz-k-accent);
-webkit-mask: none;
mask: none;
background-image: none;
box-shadow: none;
transition: transform 220ms var(--vz-k-ease);
}
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a::before {
content: "";
position: absolute;
z-index: 1;
right: 12px;
bottom: 12px;
width: 28px;
height: 28px;
background: var(--vz-k-on-accent);
-webkit-mask: var(--vz-k-i-arrow) center / 15px 15px no-repeat;
mask: var(--vz-k-i-arrow) center / 15px 15px no-repeat;
transition: transform 220ms var(--vz-k-ease);
}
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a:active { transform: scale(.985); }
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 3px; }
@media (hover: hover) {
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(43, 91, 125, .14), 0 22px 36px -24px rgba(43, 91, 125, .5); }
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a:hover::before,
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a:hover::after { transform: translateX(3px); }
}
@media (max-width: 559px) {
body.single-post .sohohotel-blog-description section.vz-k-nearby ul.vz-k-nearby__list { grid-template-columns: 1fr; }
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a { flex-direction: row; align-items: stretch; }
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a > img { width: 104px !important; aspect-ratio: 1 / 1 !important; flex: none; height: auto !important; align-self: stretch; }
body.single-post .sohohotel-blog-description .vz-k-nearby .vz-k-near__name { padding: 14px 52px 0 14px; }
body.single-post .sohohotel-blog-description .vz-k-nearby .vz-k-near__why { padding: 4px 14px 14px; }
/* in riga il testo sta a destra della foto: due elementi in colonna dentro un contenitore implicito */
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto 1fr; }
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a > img { grid-row: 1 / span 2; grid-column: 1; }
body.single-post .sohohotel-blog-description .vz-k-nearby .vz-k-near__name { grid-column: 2; grid-row: 1; }
body.single-post .sohohotel-blog-description .vz-k-nearby .vz-k-near__why { grid-column: 2; grid-row: 2; }
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a::before,
body.single-post .sohohotel-blog-description .vz-k-nearby li.vz-k-near > a::after { top: 12px; bottom: auto; }
}
/* =====================================================================
5. Ingressi leggeri (classi messe dal JS: senza JS non si nasconde nulla)
===================================================================== */
@media (prefers-reduced-motion: no-preference) {
.vz-k-moment.vz-k-pre, .vz-k-near.vz-k-pre { opacity: 0; transform: translateY(14px); }
.vz-k-moment.vz-k-pre.is-in, .vz-k-near.vz-k-pre.is-in {
opacity: 1;
transform: none;
transition: opacity 420ms var(--vz-k-ease), transform 420ms var(--vz-k-ease);
transition-delay: var(--vz-k-d, 0ms);
}
}
/* =====================================================================
6. Mappa section.vz-k-region («Where it is»): costruita dal JS. Spazio riservato prima che arrivi.
Da 620 px di larghezza del blocco: mappa a sinistra (58%, al massimo 560 px di altezza) e pannello del luogo
a destra, alto uguale. Sotto i 620 px: mappa sopra, pannello sotto.
===================================================================== */
section.vz-k-region {
margin: 0;
container-type: inline-size;
container-name: vzreg;
--vz-k-t-history: #2b5b7d;
--vz-k-t-nature: #3f8a5a;
--vz-k-t-beach: #f2a66a;
--vz-k-t-hike: #8a4f7d;
--vz-k-t-places: #2b5b7d;
--vz-k-t-itineraries: #8a4f7d;
--vz-k-t-food: #f2a66a;
--vz-k-t-plan: #3f8a5a;
--vz-k-map-sea: #a9cbe0;
--vz-k-map-land: #f4eee2;
--vz-k-map-road: #d58f4e;
}
.vz-k-region.vz-k-region > h2:first-child { margin-top: 0 !important; }
@media (scripting: enabled) {
section.vz-k-region:not(.is-ready)::after {
content: "";
display: block;
margin: 72px auto 0;
width: min(100%, 443px, calc(82svh * .791));
aspect-ratio: 600 / 758.5;
border-radius: 24px;
background: var(--vz-k-tint);
}
}
.vz-k-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vz-k-ink); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.vz-k-dot[data-tipo="history"] { background: var(--vz-k-t-history); }
.vz-k-dot[data-tipo="nature"] { background: var(--vz-k-t-nature); }
.vz-k-dot[data-tipo="beach"] { background: var(--vz-k-t-beach); box-shadow: 0 0 0 1.5px #b9733c; }
.vz-k-dot[data-tipo="hike"] { background: var(--vz-k-t-hike); }
.vz-k-dot[data-tipo="places"] { background: var(--vz-k-t-places); }
.vz-k-dot[data-tipo="itineraries"] { background: var(--vz-k-t-itineraries); }
.vz-k-dot[data-tipo="food"] { background: var(--vz-k-t-food); box-shadow: 0 0 0 1.5px #b9733c; }
.vz-k-dot[data-tipo="plan"] { background: var(--vz-k-t-plan); }
.vz-k-dot[data-tipo="water"] { background: var(--vz-k-t-water); }
.vz-k-dot[data-tipo="land"] { background: var(--vz-k-t-land); }
.vz-k-dot[data-tipo="taste"] { background: var(--vz-k-t-taste); box-shadow: 0 0 0 1.5px #b9733c; }
.vz-k-region__groups {
display: flex; flex-wrap: wrap; gap: 4px; box-sizing: border-box; width: fit-content; max-width: 100%;
min-height: 54px; margin: 18px 0 0; padding: 5px; border-radius: 999px;
background: var(--vz-k-tint); box-shadow: inset 0 0 0 1px rgba(43, 91, 125, .16);
}
.vz-k-region__groups:empty { background: none; box-shadow: none; }
.vz-k-region__group {
appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; padding: 0 8px 0 20px;
border: 0; border-radius: 999px; background: transparent; cursor: pointer;
font-family: var(--vz-k-sans); font-size: .98rem; font-weight: 650; line-height: 1; color: var(--vz-k-deep);
transition: background-color 180ms ease, color 180ms ease, transform 150ms var(--vz-k-ease);
}
.vz-k-region__group[aria-pressed="true"] { background: var(--vz-k-deep); color: #fff; }
.vz-k-region__group:active { transform: scale(.97); }
.vz-k-region__group:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; }
.vz-k-region__count {
display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; box-sizing: border-box;
background: var(--vz-k-paper); font-size: .82rem; font-weight: 700; color: var(--vz-k-deep);
}
.vz-k-region__group[aria-pressed="true"] .vz-k-region__count { background: rgba(255, 255, 255, .22); color: #fff; }
.vz-k-region__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; min-height: 44px; }
.vz-k-region__groups + .vz-k-region__filters { margin-top: 12px; }
.vz-k-region__pill {
appearance: none;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
margin: 0;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--vz-k-tint);
box-shadow: inset 0 0 0 1px rgba(43, 91, 125, .16);
color: var(--vz-k-deep);
font-family: var(--vz-k-sans);
font-size: .95rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background-color 180ms ease, color 180ms ease, transform 150ms var(--vz-k-ease);
}
.vz-k-region__pill[aria-pressed="true"] { background: var(--vz-k-accent); color: var(--vz-k-on-accent); box-shadow: none; }
.vz-k-region__pill:active { transform: scale(.96); }
.vz-k-region__pill:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; }
.vz-k-region__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.vz-k-region__frame {
position: relative;
box-sizing: border-box;
width: min(100%, 443px, calc(82svh * .791)); /* come il disegno (600 × 758,5): niente bande, al massimo 560 px di altezza */
margin-inline: auto;
aspect-ratio: 600 / 758.5;
overflow: hidden;
border-radius: 24px;
background: var(--vz-k-map-sea);
box-shadow: 0 0 0 1px rgba(43, 91, 125, .16);
touch-action: manipulation;
}
.vz-k-region__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.vz-k-region.is-drawn .vz-k-region__svg { opacity: 1; transition: opacity 300ms ease; }
.vz-k-region__svg :is(.vz-r-sea, .sea, .water) { fill: var(--vz-k-map-sea); }
.vz-k-region__svg :is(.vz-r-land, .land) { fill: var(--vz-k-map-land); }
.vz-k-region__svg .vz-r-lagoon { fill: var(--vz-k-map-sea); stroke: none; }
.vz-k-region__svg .vz-r-river { fill: none; stroke: #8fb9d6; stroke-width: 2; stroke-linecap: round; }
.vz-k-region__svg :is(.vz-r-road, .road) { fill: none; stroke: var(--vz-k-map-road); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.vz-k-region__svg .vz-r-coast { fill: none; stroke: rgba(43, 91, 125, .6); stroke-width: 1.4; stroke-linejoin: round; }
.vz-k-region__svg .vz-k-ref text { font-family: var(--vz-k-serif); font-style: italic; font-size: 12.5px; font-weight: 500; fill: #4b5f6a; paint-order: stroke; stroke: rgba(244, 238, 226, .9); stroke-width: 3.5; stroke-linejoin: round; pointer-events: none; }
.vz-k-region__svg .vz-k-pt { cursor: pointer; outline: none; }
.vz-k-region__svg .vz-k-hitc { fill: transparent; stroke: none; cursor: pointer; }
.vz-k-region__svg .vz-k-hit.is-off { pointer-events: none; }
.vz-k-region__svg .vz-k-pt:focus-visible .vz-k-pt__dot { stroke: var(--vz-k-deep); stroke-width: 4.5; }
.vz-k-region__svg .vz-k-pt__dot { fill: var(--vz-k-ink); stroke: #fff; stroke-width: 2; transition: transform 180ms var(--vz-k-ease); transform-box: fill-box; transform-origin: center; }
.vz-k-region__svg .vz-k-pt[data-tipo="history"] .vz-k-pt__dot { fill: var(--vz-k-t-history); }
.vz-k-region__svg .vz-k-pt[data-tipo="nature"] .vz-k-pt__dot { fill: var(--vz-k-t-nature); }
.vz-k-region__svg .vz-k-pt[data-tipo="beach"] .vz-k-pt__dot { fill: var(--vz-k-t-beach); stroke: #b9733c; stroke-width: 1.6; }
.vz-k-region__svg .vz-k-pt[data-tipo="hike"] .vz-k-pt__dot { fill: var(--vz-k-t-hike); }
.vz-k-region__svg .vz-k-pt[data-tipo="places"] .vz-k-pt__dot { fill: var(--vz-k-t-places); }
.vz-k-region__svg .vz-k-pt[data-tipo="itineraries"] .vz-k-pt__dot { fill: var(--vz-k-t-itineraries); }
.vz-k-region__svg .vz-k-pt[data-tipo="food"] .vz-k-pt__dot { fill: var(--vz-k-t-food); stroke: #b9733c; stroke-width: 1.6; }
.vz-k-region__svg .vz-k-pt[data-tipo="plan"] .vz-k-pt__dot { fill: var(--vz-k-t-plan); }
.vz-k-region__svg .vz-k-pt[data-approx] .vz-k-pt__dot { stroke-dasharray: 3 2.2; }
.vz-k-region__svg .vz-k-pt.is-off { opacity: .12; pointer-events: none; transition: opacity 200ms ease; }
.vz-k-region__svg .vz-k-pt.is-sel .vz-k-pt__dot { transform: scale(1.35); stroke: var(--vz-k-ink); stroke-width: 2.6; }
.vz-k-region__svg .vz-k-pt--now .vz-k-pt__dot { stroke: var(--vz-k-ink); stroke-width: 3; }
.vz-k-region__svg .vz-k-pt__ring { fill: none; stroke: var(--vz-k-warm-ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.vz-k-region__svg .vz-k-pt__label, .vz-k-region__svg .vz-k-valza__label {
font-family: var(--vz-k-sans); font-size: 13px; font-weight: 700; fill: var(--vz-k-ink);
paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: 4; stroke-linejoin: round; pointer-events: none;
}
.vz-k-region__svg .vz-k-valza__star { fill: var(--vz-k-warm); stroke: var(--vz-k-ink); stroke-width: 1.6; stroke-linejoin: round; }
.vz-k-region__svg .vz-k-line { fill: none; stroke: var(--vz-k-ink); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
.vz-k-region.is-drawn .vz-k-pt__ring { animation: vzkRing 1400ms var(--vz-k-ease) 250ms 1 both; }
}
@keyframes vzkRing { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(3.4); } }
/* pannello del luogo scelto */
.vz-k-region__panel {
box-sizing: border-box;
min-width: 0;
min-height: 460px;
padding: 16px;
border-radius: 24px;
background: linear-gradient(165deg, var(--vz-k-glass-solid) 0%, #f6fafd 100%);
box-shadow: 0 0 0 1px rgba(43, 91, 125, .1), inset 0 1px 0 rgba(255, 255, 255, .95);
font-family: var(--vz-k-sans);
color: var(--vz-k-text);
}
.vz-k-region__panel-in { display: flex; flex-direction: column; }
.vz-k-region__ph { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, var(--vz-k-tint), var(--vz-k-soft)); }
.vz-k-region__ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: cover; }
.vz-k-region.vz-k-region .vz-k-region__panel p { margin: 0; font-size: .95rem; line-height: 1.4; }
.vz-k-region.vz-k-region .vz-k-region__panel p.vz-k-region__kicker {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 2px;
font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--vz-k-muted);
}
.vz-k-region__here { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--vz-k-deep); }
.vz-k-region.vz-k-region .vz-k-region__panel p.vz-k-region__panel-name {
font-family: var(--vz-k-serif); font-variation-settings: "SOFT" 100; font-weight: 450; font-size: 1.3rem; line-height: 1.2; color: var(--vz-k-ink);
}
.vz-k-region.vz-k-region .vz-k-region__panel p.vz-k-region__panel-line { margin-top: 4px; min-height: 2.8em; color: var(--vz-k-text); }
.vz-k-region.vz-k-region .vz-k-region__panel a.vz-k-region__panel-link {
display: inline-flex; align-items: center; align-self: flex-start; min-height: 36px; font-size: .95rem; font-weight: 600;
color: var(--vz-k-deep) !important; text-decoration: underline; text-underline-offset: 3px;
}
.vz-k-region.vz-k-region .vz-k-region__panel p.vz-k-region__near-title {
margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--vz-k-line);
font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--vz-k-muted);
}
.vz-k-region.vz-k-region ul.vz-k-region__near { list-style: none !important; margin: 2px 0 0 !important; padding: 0 !important; }
.vz-k-region.vz-k-region ul.vz-k-region__near > li { list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: inherit; }
.vz-k-region.vz-k-region ul.vz-k-region__near > li::before { content: none; }
.vz-k-region__near-btn {
appearance: none; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0 2px;
border: 0; background: transparent; cursor: pointer; text-align: left; font-family: var(--vz-k-sans); font-size: .98rem; font-weight: 600; color: var(--vz-k-deep);
}
.vz-k-region__near-btn:active { transform: scale(.985); }
.vz-k-region__near-btn:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; border-radius: 10px; }
@media (hover: hover) { .vz-k-region__near-btn:hover .vz-k-region__near-name { text-decoration: underline; text-underline-offset: 3px; } }
@container vzreg (min-width: 620px) {
.vz-k-region__layout { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 18px; }
.vz-k-region__frame { width: 100%; max-width: 443px; max-height: 560px; margin-inline: 0; }
/* il pannello non allunga la riga: ha l'altezza della mappa e, se serve, scorre */
.vz-k-region__panel { contain: size; align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.vz-k-region__ph { aspect-ratio: 16 / 9; }
.vz-k-region.vz-k-region .vz-k-region__panel p.vz-k-region__panel-line { min-height: 0; }
.vz-k-region__near-btn { min-height: 40px; }
}
/* variante estesa (pagina Discover): mappa grande, fino a 720 px di altezza; il pannello sta accanto da 900 px di larghezza del blocco */
.vz-k-region--full .vz-k-region__frame { width: min(100%, 570px, calc(82svh * .791)); max-width: 570px; max-height: 720px; }
@container vzreg (min-width: 620px) {
.vz-k-region--full .vz-k-region__layout { grid-template-columns: minmax(0, 1fr); }
.vz-k-region--full .vz-k-region__frame { width: min(100%, 570px); max-width: 570px; max-height: 720px; margin-inline: auto; }
.vz-k-region--full .vz-k-region__panel { contain: none; align-self: start; min-height: 460px; overflow: visible; }
.vz-k-region--full .vz-k-region__ph { aspect-ratio: 16 / 10; }
.vz-k-region--full .vz-k-region__near-btn { min-height: 44px; }
}
@container vzreg (min-width: 900px) {
.vz-k-region--full .vz-k-region__layout { grid-template-columns: minmax(0, 570px) minmax(0, 1fr); gap: 24px; }
.vz-k-region--full .vz-k-region__frame { margin-inline: 0; }
.vz-k-region--full .vz-k-region__panel { contain: size; align-self: stretch; min-height: 0; overflow-y: auto; }
.vz-k-region--full .vz-k-region__ph { aspect-ratio: 16 / 9; }
}
.vz-k-region.vz-k-region p.vz-k-region__credit { margin: 8px 2px 0; font-size: .8rem; line-height: 1.4; color: var(--vz-k-muted); }
.vz-k-region__credit a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; }
.vz-k-region__all { margin: 14px 0 0; border-radius: 18px; background: var(--vz-k-glass-solid); box-shadow: 0 0 0 1px rgba(43, 91, 125, .08); }
.vz-k-region__all > summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 48px; padding: 0 18px; cursor: pointer; list-style: none;
font-family: var(--vz-k-sans); font-size: .98rem; font-weight: 600; color: var(--vz-k-deep);
}
.vz-k-region__all > summary::-webkit-details-marker { display: none; }
.vz-k-region__all > summary::after {
content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
-webkit-mask: var(--vz-k-i-chev) center / contain no-repeat; mask: var(--vz-k-i-chev) center / contain no-repeat;
transition: transform 200ms var(--vz-k-ease);
}
.vz-k-region__all[open] > summary::after { transform: rotate(180deg); }
.vz-k-region__all > summary:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; border-radius: 18px; }
.vz-k-region.vz-k-region ul.vz-k-region__list {
list-style: none !important; margin: 0 !important; padding: 4px 18px 16px !important;
columns: 2 220px; column-gap: 24px;
}
.vz-k-region.vz-k-region ul.vz-k-region__list > li {
list-style: none !important; margin: 0 !important; padding: 0 !important; break-inside: avoid; font-size: .95rem; line-height: 1.3;
}
.vz-k-region.vz-k-region ul.vz-k-region__list > li::before { content: none; }
.vz-k-region.vz-k-region ul.vz-k-region__list a { display: block; padding: 8px 0; color: var(--vz-k-deep) !important; text-decoration: none; }
.vz-k-region.vz-k-region ul.vz-k-region__list a[aria-current="page"] { font-weight: 700; color: var(--vz-k-ink) !important; }
@media (hover: hover) { .vz-k-region.vz-k-region ul.vz-k-region__list a:hover { text-decoration: underline; } }
/* =====================================================================
7. Barra in basso (creata dal JS) sotto i 1100 px, dove il pannello non è fisso: «Stay in Vlorë» e «Eat at Eden».
Compare dopo il pannello, resta per tutta la lettura, sparisce vicino al piè di pagina e col banner dei cookie.
===================================================================== */
.vz-k-spotbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990;
box-sizing: border-box;
display: none;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(246, 250, 253, .94);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
box-shadow: 0 -1px 0 rgba(43, 91, 125, .14), 0 -14px 30px -18px rgba(31, 61, 63, .4);
font-family: var(--vz-k-sans);
transform: translateY(105%);
visibility: hidden;
}
@media (max-width: 1099px) {
.vz-k-spotbar { display: block; }
}
.vz-k-spotbar.is-on { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
.vz-k-spotbar { transition: transform 260ms var(--vz-k-ease), visibility 0s linear 260ms; }
.vz-k-spotbar.is-on { transition: transform 260ms var(--vz-k-ease), visibility 0s; }
}
.vz-k-spotbar__in { display: flex; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto; }
.vz-k-spotbar__btn {
flex: 1 1 0;
min-width: 0;
box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 10px;
border-radius: 999px;
font-size: 1rem; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none !important;
white-space: nowrap;
}
.vz-k-spotbar__btn--hotel { background: var(--vz-k-accent); color: var(--vz-k-on-accent) !important; }
.vz-k-spotbar__btn--eden { background: var(--vz-k-warm); color: var(--vz-k-on-accent) !important; }
.vz-k-spotbar__btn:active { transform: scale(.97); }
.vz-k-spotbar__btn:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 3px; }
@media (max-width: 359px) { .vz-k-spotbar__btn { font-size: .92rem; padding: 0 6px; } }
/* =====================================================================
8. Stampa: niente mappa interattiva né barra; ingressi visibili
===================================================================== */
@media print {
.vz-k-spotbar, .vz-k-region__frame, .vz-k-region__filters, .vz-k-region__credit { display: none !important; }
.vz-k-moment.vz-k-pre, .vz-k-near.vz-k-pre { opacity: 1 !important; transform: none !important; }
body.single-post .sohohotel-blog-description aside.vz-k-spot { position: static !important; max-height: none !important; box-shadow: none; border: 1px solid #999; }
}
/* il numero conta solo le schede senza foto: con una foto in mezzo la sequenza resta 1, 2, 3 */
body.single-post .sohohotel-blog-description .vz-k-moment:not(:has(> img)) { counter-increment: vzk-moment; }
/* gruppo Activities: stessi colori dei tipi affini */
.vz-k-region { --vz-k-t-water: var(--vz-k-t-nature); --vz-k-t-land: var(--vz-k-t-history); --vz-k-t-taste: var(--vz-k-t-beach); }
.vz-k-region__svg .vz-k-pt[data-tipo="water"] .vz-k-pt__dot { fill: var(--vz-k-t-water); }
.vz-k-region__svg .vz-k-pt[data-tipo="land"] .vz-k-pt__dot { fill: var(--vz-k-t-land); }
.vz-k-region__svg .vz-k-pt[data-tipo="taste"] .vz-k-pt__dot { fill: var(--vz-k-t-taste); stroke: #b9733c; stroke-width: 1.5; }
/* zoom della mappa: i pin restano grandi uguali, le linee non si ingrossano */
.vz-k-region__frame { position: relative; }
.vz-k-region__svg path { vector-effect: non-scaling-stroke; }
.vz-k-region__zoom {
position: absolute; top: 10px; right: 10px; z-index: 3;
display: flex; flex-direction: column; overflow: hidden;
border-radius: 14px; background: var(--vz-k-paper, #fff);
box-shadow: 0 2px 10px rgba(19, 50, 74, .18);
}
.vz-k-region__zoom-btn {
width: 44px; height: 44px; padding: 0; border: 0; background: none;
color: var(--vz-k-deep); font: 500 26px/1 var(--vz-k-sans); cursor: pointer;
}
.vz-k-region__zoom-btn + .vz-k-region__zoom-btn { box-shadow: 0 -1px 0 var(--vz-k-line); }
.vz-k-region__zoom-btn:hover:not(:disabled) { background: var(--vz-k-tint); }
.vz-k-region__zoom-btn:disabled { color: var(--vz-k-line-2); cursor: default; }
.vz-k-region__zoom-btn:focus-visible { outline: 2.5px solid var(--vz-k-deep); outline-offset: -3px; }
/* a mappa intera un dito scorre la pagina; ingrandita, il dito sposta la mappa */
.vz-k-region__svg { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vz-k-region__frame.is-zoomed .vz-k-region__svg { touch-action: none; cursor: grab; }
.vz-k-region__frame.is-dragging .vz-k-region__svg { cursor: grabbing; }
/* telefono: i tre filtri principali stanno su una riga */
@media (max-width: 480px) {
.vz-k-region__groups { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; padding: 4px; gap: 2px; }
.vz-k-region__group { flex: 1 1 auto; min-width: 0; padding: 9px 6px; gap: 5px; font-size: 13.5px; justify-content: center; white-space: nowrap; }
.vz-k-region__count { min-width: 22px; height: 22px; font-size: 11.5px; padding: 0 5px; }
}
/* nella Scheda luogo i blocchi restano nella colonna del testo: nel blog numeri e stagioni escono verso i bordi della lastra */
@media (min-width: 641px) {
body.single-post .sohohotel-blog-description:has(.vz-k-spot) :is(ul.vz-k-numbers, .vz-k-seasons ol.vz-k-seasons__strip, div.vz-k-compare) { margin-inline: 0 !important; width: auto !important; max-width: 100% !important; }
body.single-post .sohohotel-blog-description:has(.vz-k-spot) ul.vz-k-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 32px; }
body.single-post .sohohotel-blog-description:has(.vz-k-spot) ul.vz-k-numbers > li { min-width: 0; }
}
/* =====================================================================
Pagina Discover: niente foto di testata, mappa in primo piano, sezioni figlie, hotel ed Eden
===================================================================== */
body:has(.vz-k-discover) .sohohotel-site-wrapper .sohohotel-page-header {
display: block; min-height: 0 !important; height: auto !important; margin: 0 auto !important; padding: clamp(18px, 2.4vw, 30px) clamp(16px, 4vw, 40px) 0 !important;
max-width: 1280px; box-sizing: border-box; overflow: visible;
background: none !important; box-shadow: none !important; border-radius: 0 !important;
}
body:has(.vz-k-discover) .sohohotel-site-wrapper .sohohotel-page-header::before,
body:has(.vz-k-discover) .sohohotel-site-wrapper .sohohotel-page-header::after { display: none !important; }
body:has(.vz-k-discover) .sohohotel-site-wrapper .sohohotel-page-header h1::before,
body:has(.vz-k-discover) .sohohotel-site-wrapper .sohohotel-page-header h1::after { display: none !important; }
body:has(.vz-k-discover) .sohohotel-site-wrapper .sohohotel-page-header h1 {
position: static !important; max-width: none !important; margin: 0 !important; outline: 0 !important; padding: 0 !important; transform: none !important;
background: none !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
color: var(--vz-ink, #1f3d3f) !important; font-size: clamp(2rem, 3.8vw, 3rem) !important; line-height: 1.1; text-align: left !important;
}
/* la pagina Discover aveva quattro colonne di schede (25-pages.css): la riga diventa un blocco unico a tutta larghezza */
body:has(.vz-k-discover) .sohohotel-content-wrapper .sohohotel-main-content-full-width { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body:has(.vz-k-discover) .wpb-content-wrapper > .vc_row:first-child { display: block !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; }
body:has(.vz-k-discover) .wpb-content-wrapper > .vc_row:first-child > .wpb_column { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body:has(.vz-k-discover) .wpb-content-wrapper > .vc_row:first-child > .wpb_column > .vc_column-inner {
height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; transform: none !important; transition: none !important;
background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body:has(.vz-k-discover) .wpb-content-wrapper .wpb_text_column { margin: 0 !important; }
.vz-k-discover { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) clamp(40px, 6vw, 80px); box-sizing: border-box; }
.vz-k-discover .vz-k-region { margin-top: 8px; }
/* mappa in primo piano: su computer introduzione e filtri stanno su due righe compatte */
@media (min-width: 1000px) {
.vz-k-discover .vz-k-region { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
.vz-k-discover .vz-k-region > * { grid-column: 1 / -1; }
.vz-k-discover .vz-k-region > .vz-k-region__groups { grid-column: 1; margin-bottom: 14px; }
.vz-k-discover .vz-k-region > .vz-k-region__filters { grid-column: 2; margin-bottom: 14px; }
.vz-k-discover .vz-k-region > p:not([class]) { max-width: 90ch !important; margin-bottom: 14px; }
}
.vz-k-region__panel-in--invite .vz-k-region__panel-name { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.vz-k-region__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.vz-k-region__cta-btn { flex: 1 1 150px; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 1rem; color: var(--vz-k-on-accent) !important; text-decoration: none !important; }
.vz-k-region__cta-btn--hotel { background: var(--vz-k-accent); }
.vz-k-region__cta-btn--eden { background: var(--vz-k-warm); }
.vz-k-discover .vz-k-region > h2 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); margin: 0 0 .3em; }
.vz-k-discover .vz-k-region > h2::after { display: none !important; }
.vz-k-discover .vz-k-region > p { max-width: 62ch; }
.vz-k-discover .vz-k-region .vz-k-region__frame { width: min(100%, 640px, calc(80svh * .791)); max-width: 640px; }
.vz-k-discover > section + section { margin-top: clamp(48px, 7vw, 88px); }
.vz-k-hub > h2, .vz-k-base > h2, .vz-k-trip h2 { font-family: var(--vz-k-serif); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; margin: 0 0 clamp(16px, 2.4vw, 26px); color: var(--vz-k-ink); }
.vz-k-hub__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0 !important; padding: 0 !important; list-style: none !important; }
.vz-k-hub__item { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.vz-k-hub__item::before, .vz-k-hub__item::after { display: none !important; content: none !important; }
.vz-k-hub__item > a, .vz-k-base__card {
display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 22px; text-decoration: none !important; color: var(--vz-k-ink) !important;
background: var(--vz-k-paper); box-shadow: 0 0 0 1px rgba(43, 91, 125, .1), 0 10px 26px rgba(19, 50, 74, .07);
transition: transform 220ms var(--vz-k-ease), box-shadow 220ms var(--vz-k-ease);
}
.vz-k-hub__item > a:hover, .vz-k-base__card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(43, 91, 125, .16), 0 16px 34px rgba(19, 50, 74, .12); }
.vz-k-hub__item > a:focus-visible, .vz-k-base__card:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 3px; }
.vz-k-hub__item img, .vz-k-base__card img { display: block; width: 100% !important; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; margin: 0 !important; }
.vz-k-hub__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: clamp(18px, 2.2vw, 26px); }
.vz-k-hub__name, .vz-k-base__name { display: flex; align-items: center; gap: 10px; font-family: var(--vz-k-serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15; }
.vz-k-hub__count { padding: 3px 10px; border-radius: 999px; background: var(--vz-k-tint); color: var(--vz-k-deep); font-family: var(--vz-k-sans); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.vz-k-hub__why, .vz-k-base__why { display: block; font-size: 1rem; line-height: 1.55; color: var(--vz-k-text); }
.vz-k-hub__go { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--vz-k-deep); }
.vz-k-hub__go::after { content: " \2192"; }
.vz-k-hub__more { margin: clamp(16px, 2vw, 22px) 0 0; font-size: 1rem; color: var(--vz-k-text); }
.vz-k-base__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.vz-k-base__name { padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.2vw, 26px) 6px; }
.vz-k-base__why { padding: 0 clamp(18px, 2.2vw, 26px); }
.vz-k-base__go { align-self: flex-start; margin: 16px clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px); margin-top: auto; padding: 13px 22px; border-radius: 999px; font-weight: 600; color: var(--vz-k-on-accent); }
.vz-k-base__why { margin-bottom: 16px; }
.vz-k-base__go--hotel { background: var(--vz-k-accent); }
.vz-k-base__go--eden { background: var(--vz-k-warm); }
/* su Discover non c'è il pannello fisso: la barra Stay ed Eat resta visibile a ogni larghezza, compatta su computer */
.vz-k-spotbar.vz-k-spotbar--sempre { display: block; }
@media (min-width: 1100px) {
.vz-k-spotbar.vz-k-spotbar--sempre { left: auto; right: 24px; bottom: 24px; width: 430px; padding: 10px; border-radius: 20px; }
}
@media (max-width: 680px) {
.vz-k-hub__list, .vz-k-base__list { grid-template-columns: minmax(0, 1fr); }
.vz-k-discover .vz-k-region .vz-k-region__frame { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vz-k-hub__item > a, .vz-k-base__card { transition: none; } .vz-k-hub__item > a:hover, .vz-k-base__card:hover { transform: none; } }
/* =====================================================================
My Vlorë Trip: pulsante vz-k-tripadd (creato dal JS) e sezione vz-k-trip di Discover
===================================================================== */
.vz-k-tripadd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; font-family: var(--vz-k-sans); }
.vz-k-tripadd button.vz-k-tripadd__btn {
appearance: none;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
margin: 0;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--vz-k-deep);
box-shadow: none;
color: #fff;
font-family: var(--vz-k-sans);
font-size: .95rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background-color 180ms ease, color 180ms ease, transform 150ms var(--vz-k-ease);
}
.vz-k-tripadd button.vz-k-tripadd__btn::before { content: "+"; font-size: 1.2em; line-height: 1; }
.vz-k-tripadd button.vz-k-tripadd__btn.is-on { background: var(--vz-k-accent); color: var(--vz-k-on-accent); box-shadow: none; }
.vz-k-tripadd button.vz-k-tripadd__btn.is-on::before { content: "\2713"; font-size: 1em; }
.vz-k-tripadd button.vz-k-tripadd__btn:active { transform: scale(.96); }
.vz-k-tripadd button.vz-k-tripadd__btn:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; }
@media (hover: hover) { .vz-k-tripadd button.vz-k-tripadd__btn:not(.is-on):hover { background: #234c69; } }
.vz-k-tripadd__after { font-size: .9rem; line-height: 1.4; color: var(--vz-k-muted); }
.vz-k-sr, .vz-k-tripadd__after:empty, .vz-k-trip__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vz-k-tripadd__after a { display: inline-block; padding: 4px 0; color: var(--vz-k-deep) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* striscia con WhatsApp e gli altri pulsanti: prima riga Add to My Trip e Directions, poi la condivisione */
.vz-k-share__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--vz-k-line); }
.vz-k-share__top > .vz-k-tripadd { display: contents; }
.vz-k-share__top .vz-k-tripadd__after:not(:empty) { order: 9; flex: 1 1 100%; }
.vz-k-share a.vz-k-spot__go {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 18px;
border-radius: 999px;
background: var(--vz-k-paper);
box-shadow: inset 0 0 0 1.5px rgba(43, 91, 125, .55);
color: var(--vz-k-deep) !important;
font-family: var(--vz-k-sans);
font-size: .95rem;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
transition: background-color 180ms ease, transform 150ms var(--vz-k-ease);
}
.vz-k-share a.vz-k-spot__go::after {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--vz-k-i-nav) center / contain no-repeat;
mask: var(--vz-k-i-nav) center / contain no-repeat;
}
.vz-k-share a.vz-k-spot__go:active { transform: scale(.96); }
.vz-k-share a.vz-k-spot__go:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; }
@media (hover: hover) { .vz-k-share a.vz-k-spot__go:hover { background: var(--vz-k-tint); } }
@media (max-width: 480px) {
.vz-k-share__top button.vz-k-tripadd__btn, .vz-k-share__top a.vz-k-spot__go { flex: 1 1 130px; justify-content: center; padding: 0 12px; }
}
.page-id-1363 .vc_inner .vc_btn3-container .vz-k-tripadd { margin-top: 8px; }
.vz-k-trip:not(.is-ready) { display: none; }
.vz-k-trip {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(16px, 2.4vw, 28px);
box-sizing: border-box;
padding: clamp(20px, 3.4vw, 40px);
border-radius: 28px;
background: var(--vz-k-glass-solid);
box-shadow: 0 0 0 1px rgba(43, 91, 125, .1), 0 10px 26px rgba(19, 50, 74, .07);
font-family: var(--vz-k-sans);
color: var(--vz-k-text);
}
.vz-k-trip h2 { margin-bottom: .3em; }
.vz-k-trip h2:focus { outline: none; }
.vz-k-trip__intro p { margin: 0; max-width: 46ch; font-size: 1.02rem; line-height: 1.55; color: var(--vz-k-text); }
.vz-k-trip__steps, .vz-k-trip__ideas, .vz-k-trip__list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.vz-k-trip__steps > li, .vz-k-trip__ideas > li, .vz-k-trip__list > li { margin: 0 !important; background: none; border: 0 !important; list-style: none !important; }
.vz-k-trip__ideas > li { padding: 0 !important; }
.vz-k-trip__ideas > li::before, .vz-k-trip__ideas > li::after { display: none !important; content: none !important; }
.vz-k-trip__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: vz-step; }
.vz-k-trip__steps > li { position: relative; padding: 0 0 0 38px !important; font-size: .95rem; line-height: 1.4; color: var(--vz-k-text); counter-increment: vz-step; }
.vz-k-trip__steps > li::before {
content: counter(vz-step) !important;
position: absolute;
top: 0;
left: 0;
display: grid !important;
place-items: center;
width: 28px;
height: 28px;
margin: 0;
border: 0;
border-radius: 50%;
background: var(--vz-k-accent);
color: var(--vz-k-on-accent);
font-size: .85rem;
font-weight: 700;
line-height: 1;
}
.vz-k-trip__steps strong { display: block; color: var(--vz-k-ink); font-weight: 600; }
.vz-k-trip__box { min-height: 60px; }
.vz-k-trip__empty { margin: 0 0 12px; font-size: 1rem; line-height: 1.5; color: var(--vz-k-text); }
.vz-k-trip__ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vz-k-trip__places .vz-k-trip__ideas { grid-template-columns: minmax(0, 1fr); margin-top: 10px !important; }
button.vz-k-trip__idea {
appearance: none;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 64px;
margin: 0;
padding: 8px 16px 8px 8px;
border: 0;
border-radius: 16px;
background: var(--vz-k-paper);
box-shadow: 0 0 0 1px rgba(43, 91, 125, .1);
color: var(--vz-k-ink);
font-family: var(--vz-k-sans);
font-size: .98rem;
font-weight: 600;
line-height: 1.25;
text-align: left;
cursor: pointer;
transition: transform 150ms var(--vz-k-ease), box-shadow 180ms ease;
}
button.vz-k-trip__idea:active { transform: scale(.98); }
button.vz-k-trip__idea:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; }
@media (hover: hover) { button.vz-k-trip__idea:hover { box-shadow: 0 0 0 1px rgba(43, 91, 125, .28); } }
.vz-k-trip__idea-pic { flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: var(--vz-k-tint); }
.vz-k-trip__idea-pic img, .vz-k-trip__thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.vz-k-trip__idea-name { flex: 1 1 auto; min-width: 0; }
.vz-k-trip__idea-add { flex: 0 0 auto; color: var(--vz-k-deep); font-size: 1.4rem; font-weight: 500; line-height: 1; }
.vz-k-trip__listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-family: var(--vz-k-serif); font-size: 1.25rem; line-height: 1.25; color: var(--vz-k-ink); }
.vz-k-trip__listhead:focus { outline: none; }
.vz-k-trip__count { font-family: var(--vz-k-sans); font-size: .9rem; color: var(--vz-k-muted); white-space: nowrap; }
.vz-k-trip__list { display: grid; gap: 10px; counter-reset: vz-trip; }
.vz-k-trip__list > .vz-k-trip__item {
position: relative;
display: grid;
grid-template-columns: 72px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 10px !important;
border-radius: 18px;
background: var(--vz-k-paper);
box-shadow: 0 0 0 1px rgba(43, 91, 125, .1);
counter-increment: vz-trip;
}
.vz-k-trip__list > .vz-k-trip__item::before {
content: counter(vz-trip) !important;
position: absolute;
top: 4px;
left: 4px;
z-index: 1;
display: grid !important;
place-items: center;
width: 26px;
height: 26px;
margin: 0;
border: 0;
border-radius: 50%;
background: var(--vz-k-deep);
color: #fff;
font-size: .82rem;
font-weight: 700;
line-height: 1;
}
.vz-k-trip__thumb { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 12px; background: var(--vz-k-tint); }
.vz-k-trip__body { min-width: 0; }
.vz-k-trip__name { display: block; font-family: var(--vz-k-serif); font-size: 1.08rem; line-height: 1.25; color: var(--vz-k-ink) !important; text-decoration: none !important; overflow-wrap: anywhere; }
@media (hover: hover) { a.vz-k-trip__name:hover { text-decoration: underline !important; text-underline-offset: 3px; } }
.vz-k-trip__line { display: -webkit-box; margin-top: 3px; overflow: hidden; font-size: .9rem; line-height: 1.4; color: var(--vz-k-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vz-k-trip__tools { display: flex; gap: 2px; }
button.vz-k-trip__tool {
appearance: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--vz-k-deep);
font-family: var(--vz-k-sans);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
transition: background-color 180ms ease, transform 150ms var(--vz-k-ease);
}
button.vz-k-trip__tool:disabled { opacity: .3; cursor: default; }
button.vz-k-trip__tool:not(:disabled):active { transform: scale(.9); }
button.vz-k-trip__tool:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: -3px; }
@media (hover: hover) { button.vz-k-trip__tool:not(:disabled):hover { background: var(--vz-k-tint); } }
.vz-k-trip__next { box-sizing: border-box; padding: clamp(16px, 2.4vw, 24px); border-radius: 22px; background: var(--vz-k-paper); box-shadow: 0 0 0 1px rgba(43, 91, 125, .1); }
.vz-k-trip__nexttitle { margin: 0 0 4px; font-family: var(--vz-k-serif); font-size: 1.25rem; line-height: 1.25; color: var(--vz-k-ink); }
.vz-k-trip__nexttext { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; color: var(--vz-k-text); }
button.vz-k-trip__save {
appearance: none;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
margin: 0;
padding: 0 20px;
border: 0;
border-radius: 999px;
background: var(--vz-k-deep);
color: #fff !important;
font-family: var(--vz-k-sans);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
cursor: pointer;
transition: background-color 180ms ease, transform 150ms var(--vz-k-ease);
}
button.vz-k-trip__save:active { transform: scale(.98); }
button.vz-k-trip__save:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; }
@media (hover: hover) { button.vz-k-trip__save:hover { background: #234c69; } }
.vz-k-trip__note { margin: 10px 0 0; font-size: .92rem; color: var(--vz-k-muted); }
.vz-k-trip__sharedbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
button.vz-k-trip__back { appearance: none; min-height: 44px; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--vz-k-deep); font-family: var(--vz-k-sans); font-size: .95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.vz-k-trip__back:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; }
.vz-k-trip__status { font-size: .92rem; line-height: 1.4; color: var(--vz-k-deep); overflow-wrap: anywhere; }
.vz-k-trip__picker[hidden] { display: none; }
.vz-k-trip h3.vz-k-trip__pickertitle { margin: 0 0 10px; font-family: var(--vz-k-serif); font-size: 1.25rem; font-weight: 400; font-style: normal; line-height: 1.25; color: var(--vz-k-ink); }
.vz-k-trip h3.vz-k-trip__pickertitle::after { display: none !important; }
.vz-k-trip input.vz-k-trip__search { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: block; width: 100%; max-width: 420px; height: 48px; margin: 0 0 10px; padding: 0 16px; border: 1px solid rgba(43, 91, 125, .35); border-radius: 999px; background: var(--vz-k-paper); box-shadow: none; color: var(--vz-k-ink); font-family: var(--vz-k-sans); font-size: 1rem; line-height: 1; }
.vz-k-trip input.vz-k-trip__search:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 1px; }
.vz-k-trip__nofind { margin: 0 0 10px; color: var(--vz-k-text); font-size: .95rem; }
.vz-k-trip__nofind[hidden], .vz-k-trip__group[hidden], .vz-k-trip__type[hidden], .vz-k-trip__picks > li.vz-k-trip__pick[hidden] { display: none !important; }
.vz-k-trip__pickergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.vz-k-trip__group { border-radius: 16px; background: var(--vz-k-paper); box-shadow: 0 0 0 1px rgba(43, 91, 125, .1); }
.vz-k-trip__group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 56px; box-sizing: border-box; padding: 8px 16px; border-radius: 16px; color: var(--vz-k-ink); cursor: pointer; list-style: none; }
.vz-k-trip__group > summary::-webkit-details-marker { display: none; }
.vz-k-trip__group > summary::after { content: ""; order: 9; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--vz-k-deep); border-bottom: 2px solid var(--vz-k-deep); transform: translateY(-2px) rotate(45deg); transition: transform 180ms var(--vz-k-ease); }
.vz-k-trip__group[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.vz-k-trip__group > summary:focus-visible { outline: 3px solid var(--vz-k-deep); outline-offset: 2px; }
.vz-k-trip__groupname { font-size: 1.02rem; font-weight: 600; line-height: 1.2; }
.vz-k-trip__groupcount { padding: 3px 8px; border-radius: 999px; background: var(--vz-k-tint); color: var(--vz-k-deep); font-size: .8rem; font-weight: 600; line-height: 1.2; }
.vz-k-trip__groupsel { color: var(--vz-k-deep); font-size: .85rem; font-weight: 600; line-height: 1.2; }
.vz-k-trip__groupsel:empty { display: none; }
.vz-k-trip__groupbody { box-sizing: border-box; height: 560px; overflow-y: auto; border-top: 1px solid var(--vz-k-line); scrollbar-color: var(--vz-k-soft) transparent; scrollbar-width: thin; }
.vz-k-trip__picker.is-searching .vz-k-trip__groupbody { height: auto; max-height: 560px; }
.vz-k-trip__typename { padding: 12px 16px 6px; color: var(--vz-k-muted); font-size: .76rem; font-weight: 600; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; }
.vz-k-trip__picks { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.vz-k-trip__picks > li.vz-k-trip__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-top: 1px solid var(--vz-k-line) !important; background: none; list-style: none !important; }
.vz-k-trip__picks > li.vz-k-trip__pick::before, .vz-k-trip__picks > li.vz-k-trip__pick::after { display: none !important; content: none !important; }
.vz-k-trip .vz-k-trip__pick label { flex: 1 1 0; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px; margin: 0; padding: 5px 0; color: var(--vz-k-ink); font-size: .95rem; font-weight: 500; line-height: 1.3; cursor: pointer; }
.vz-k-trip .vz-k-trip__pick label > span { min-width: 0; color: var(--vz-k-ink); overflow-wrap: anywhere; }
.vz-k-trip .vz-k-trip__pick input[type="checkbox"] { flex: 0 0 22px; display: block; width: 22px; height: 22px; margin: 0; accent-color: var(--vz-k-deep); -webkit-appearance: auto; appearance: auto; cursor: pointer; }
a.vz-k-trip__pickread { flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--vz-k-deep) !important; font-size: .84rem; font-weight: 600; line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.vz-k-trip__pickfull { flex: 1 1 100%; padding: 0 0 10px 32px; color: var(--vz-k-warm-ink); font-size: .9rem; font-weight: 600; line-height: 1.35; }
@media (max-width: 1100px) {
.vz-k-trip__pickergrid { grid-template-columns: minmax(0, 1fr); }
.vz-k-trip__groupbody { height: auto; max-height: 460px; }
}
@media (min-width: 900px) {
.vz-k-trip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.vz-k-trip__box, .vz-k-trip__status, .vz-k-trip__picker { grid-column: 1 / -1; }
.vz-k-trip__box.has-list { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(18px, 2.6vw, 32px); align-items: start; }
}
@media (max-width: 700px) {
.vz-k-trip__steps, .vz-k-trip__ideas { grid-template-columns: minmax(0, 1fr); }
.vz-k-trip__box.has-list .vz-k-trip__next { margin-top: 16px; }
}
@media (max-width: 560px) {
.vz-k-trip__list > .vz-k-trip__item { grid-template-columns: 60px minmax(0, 1fr); align-items: start; gap: 4px 12px; }
.vz-k-trip__thumb { width: 60px; height: 60px; }
.vz-k-trip__tools { grid-column: 1 / -1; justify-content: flex-end; }
}
@media print {
.vz-k-tripadd, .vz-k-trip__tools, .vz-k-trip__next, .vz-k-trip__ideas, .vz-k-trip__picker { display: none !important; }
}
/* la barra fissa in basso non deve coprire i pulsanti raggiunti con il tasto Tab */
html:has(.vz-k-spotbar.is-on) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1100px) { html:has(.vz-k-spotbar--sempre.is-on) { scroll-padding-bottom: 108px; } }