/* ============================================================
BLUVIA — FILE 2 · COMPONENTI
Richiede bluvia-tokens.css. Nessun valore hardcoded:
ogni misura, colore e tempo arriva dalle variabili del FILE 1.
============================================================ */
/* ------------------------------------------------------------
1 · TESTO
------------------------------------------------------------ */
/* Occhiello: maiuscoletto larghissimo, apre ogni blocco */
.bv-eyebrow {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-eyebrow);
font-weight: var(--bv-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--bv-ls-eyebrow);
color: var(--bv-ink-3);
}
.bv-eyebrow--sm { font-size: var(--bv-fs-eyebrow-sm); }
.bv-eyebrow--wide { letter-spacing: var(--bv-ls-eyebrow-wide); }
/* Etichetta mono: codici, passi, orari tecnici */
.bv-mono {
font-family: var(--bv-font-mono);
font-size: var(--bv-fs-eyebrow);
font-weight: var(--bv-fw-medium);
letter-spacing: var(--bv-ls-mono);
color: var(--bv-ink-3);
}
/* Titoli serif */
.bv-display,
.bv-h1,
.bv-h2,
.bv-h3 {
margin: var(--bv-s-0);
font-family: var(--bv-font-serif);
font-weight: var(--bv-fw-regular);
color: var(--bv-ink);
text-wrap: pretty;
}
.bv-display { font-size: var(--bv-fs-display); line-height: var(--bv-lh-tight); letter-spacing: var(--bv-ls-display); }
.bv-h1 { font-size: var(--bv-fs-h1); line-height: var(--bv-lh-tight); letter-spacing: var(--bv-ls-display); }
.bv-h2 { font-size: var(--bv-fs-h2); line-height: var(--bv-lh-title); letter-spacing: var(--bv-ls-title); }
.bv-h3 { font-size: var(--bv-fs-h3); line-height: var(--bv-lh-title); letter-spacing: var(--bv-ls-title); }
/* Titolo sans: solo dove serve autorità funzionale (prezzi, blocchi UI) */
.bv-h4 {
margin: var(--bv-s-0);
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-h4);
font-weight: var(--bv-fw-bold);
line-height: var(--bv-lh-snug);
letter-spacing: var(--bv-ls-title);
color: var(--bv-ink);
}
/* Corpo del testo */
.bv-lead,
.bv-body,
.bv-body-sm {
margin: var(--bv-s-0);
font-family: var(--bv-font-sans);
font-weight: var(--bv-fw-regular);
color: var(--bv-ink-2);
text-wrap: pretty;
}
.bv-lead { font-size: var(--bv-fs-lead); line-height: var(--bv-lh-loose); max-width: var(--bv-measure); }
.bv-body { font-size: var(--bv-fs-body); line-height: var(--bv-lh-body); max-width: var(--bv-measure); }
.bv-body-sm { font-size: var(--bv-fs-body-sm); line-height: var(--bv-lh-body); }
/* Meta: data, durata, distanza */
.bv-meta {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-meta);
font-weight: var(--bv-fw-regular);
color: var(--bv-ink-3);
font-variant-numeric: tabular-nums;
}
/* Numeri: sempre tabellari, mai ballerini */
.bv-num { font-variant-numeric: tabular-nums; }
.bv-price {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-price);
font-weight: var(--bv-fw-bold);
letter-spacing: var(--bv-ls-num);
color: var(--bv-ink);
font-variant-numeric: tabular-nums;
}
/* Link testuale: coral con filetto, mai sottolineatura di default */
.bv-link {
font-family: var(--bv-font-mono);
font-size: var(--bv-fs-eyebrow);
font-weight: var(--bv-fw-medium);
letter-spacing: var(--bv-ls-mono);
color: var(--bv-coral-ink);
text-decoration: none;
border-bottom: var(--bv-bw) solid var(--bv-coral-line);
padding-bottom: var(--bv-s-1);
transition: border-color var(--bv-dur-fast) var(--bv-ease);
}
.bv-link:hover { border-color: var(--bv-coral-ink); }
/* Testo su immagine */
.bv-on-scrim { color: var(--bv-on-scrim); }
.bv-on-scrim-2 { color: var(--bv-on-scrim-2); }
/* Filetto di apertura: la regola grafica ricorrente del progetto */
.bv-rule { border-top: var(--bv-bw) solid var(--bv-line-ink); }
.bv-rule--light { border-top: var(--bv-bw) solid var(--bv-line); }
/* Focus visibile coerente su tutti i componenti */
.bv-cta:focus-visible,
.bv-filter:focus-visible,
.bv-link:focus-visible,
.bv-card-tour:focus-visible {
outline: var(--bv-bw-focus) solid var(--bv-focus);
outline-offset: var(--bv-s-1);
}
/* ------------------------------------------------------------
2 · CARD TOUR EDITORIALE (due colonne)
Immagine a sinistra ad angoli vivi, testo a destra su filetto.
------------------------------------------------------------ */
.bv-card-tour {
display: grid;
grid-template-columns: minmax(var(--bv-s-0), var(--bv-col-media)) minmax(var(--bv-s-0), var(--bv-col-text));
gap: var(--bv-s-10);
align-items: center;
padding-top: var(--bv-s-7);
border-top: var(--bv-bw) solid var(--bv-line-ink);
background: transparent;
color: var(--bv-ink);
text-decoration: none;
}
/* Colonna immagine: contenitore che ritaglia lo zoom */
.bv-card-tour__media {
position: relative;
overflow: hidden;
border-radius: var(--bv-r-none);
aspect-ratio: var(--bv-ar-editorial);
background: var(--bv-skeleton-base);
}
.bv-card-tour__media img {
display: block;
width: var(--bv-full);
height: var(--bv-full);
object-fit: cover;
transition: transform var(--bv-dur) var(--bv-ease);
}
.bv-card-tour:hover .bv-card-tour__media img { transform: scale(var(--bv-zoom)); }
/* Colonna testo */
.bv-card-tour__body {
display: flex;
flex-direction: column;
gap: var(--bv-s-4);
max-width: var(--bv-measure-sm);
}
.bv-card-tour__title {
margin: var(--bv-s-0);
font-family: var(--bv-font-serif);
font-size: var(--bv-fs-h3);
font-weight: var(--bv-fw-regular);
line-height: var(--bv-lh-title);
letter-spacing: var(--bv-ls-title);
color: var(--bv-ink);
transition: color var(--bv-dur-fast) var(--bv-ease);
}
.bv-card-tour:hover .bv-card-tour__title { color: var(--bv-coral-ink); }
/* Piede: prezzo a sinistra, dettaglio a destra, su filetto leggero */
.bv-card-tour__foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bv-s-4);
padding-top: var(--bv-s-4);
border-top: var(--bv-bw) solid var(--bv-line);
}
/* Variante specchiata: immagine a destra, per alternare il ritmo */
.bv-card-tour--flip { grid-template-columns: minmax(var(--bv-s-0), var(--bv-col-text)) minmax(var(--bv-s-0), var(--bv-col-media)); }
.bv-card-tour--flip .bv-card-tour__media { order: var(--bv-order-last); }
/* Sotto i 600px le due colonne diventano una: su un telefono la colonna testo
scenderebbe a poche parole per riga. Vale anche per la variante specchiata,
che deve rimettere l'immagine sopra al testo. */
@media (max-width: 600px) {
.bv-card-tour,
.bv-card-tour--flip {
grid-template-columns: minmax(var(--bv-s-0), var(--bv-col-text));
gap: var(--bv-s-5);
}
.bv-card-tour--flip .bv-card-tour__media { order: var(--bv-s-0); }
.bv-card-tour__body { max-width: none; }
}
/* ------------------------------------------------------------
3 · CARD TOUR COMPATTA (griglia, carosello, risultati)
------------------------------------------------------------ */
.bv-card-compact {
display: flex;
flex-direction: column;
gap: var(--bv-s-3);
background: var(--bv-surface);
border-radius: var(--bv-r-lg);
overflow: hidden;
color: var(--bv-ink);
text-decoration: none;
transition: transform var(--bv-dur) var(--bv-ease), box-shadow var(--bv-dur) var(--bv-ease);
}
.bv-card-compact:hover {
transform: translateY(var(--bv-lift));
box-shadow: var(--bv-shadow-soft);
}
.bv-card-compact__media {
position: relative;
aspect-ratio: var(--bv-ar-compact);
overflow: hidden;
background: var(--bv-skeleton-base);
}
.bv-card-compact__media img {
display: block;
width: var(--bv-full);
height: var(--bv-full);
object-fit: cover;
}
.bv-card-compact__body {
display: flex;
flex-direction: column;
gap: var(--bv-s-2);
padding: var(--bv-s-0) var(--bv-s-5) var(--bv-s-5);
}
.bv-card-compact__title {
margin: var(--bv-s-0);
font-family: var(--bv-font-serif);
font-size: var(--bv-fs-h4);
font-weight: var(--bv-fw-regular);
line-height: var(--bv-lh-title);
letter-spacing: var(--bv-ls-title);
}
.bv-card-compact__foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bv-s-3);
padding-top: var(--bv-s-3);
border-top: var(--bv-bw) solid var(--bv-line);
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-body-sm);
font-weight: var(--bv-fw-semibold);
font-variant-numeric: tabular-nums;
}
/* Griglia di card compatte */
.bv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--bv-grid-min), var(--bv-col-text)));
gap: var(--bv-s-8);
}
/* ------------------------------------------------------------
4 · BADGE OVERLAY (sopra l'immagine)
------------------------------------------------------------ */
.bv-badge {
position: absolute;
top: var(--bv-s-3);
left: var(--bv-s-3);
display: inline-flex;
align-items: center;
gap: var(--bv-s-2);
min-height: var(--bv-badge-h);
padding: var(--bv-s-0) var(--bv-s-3);
border: var(--bv-bw) solid var(--bv-on-scrim-line);
border-radius: var(--bv-r-pill);
/* Niente backdrop-filter: la regola 7 vieta il glassmorphism, e lo scrim al
62% regge da solo la leggibilità (bianco su scrim sopra foto media: 10.5:1). */
background: var(--bv-scrim-soft);
font-family: var(--bv-font-mono);
font-size: var(--bv-fs-eyebrow-sm);
font-weight: var(--bv-fw-medium);
letter-spacing: var(--bv-ls-mono);
text-transform: uppercase;
color: var(--bv-on-scrim);
white-space: nowrap;
}
.bv-badge--right { left: auto; right: var(--bv-s-3); }
.bv-badge--bottom { top: auto; bottom: var(--bv-s-3); }
/* Variante piena: per lo stato "ultimi posti" */
.bv-badge--coral { background: var(--bv-coral); border-color: var(--bv-coral); color: var(--bv-on-coral); }
/* Velo in basso sull'immagine, per il testo sovrapposto */
.bv-scrim {
position: absolute;
inset: auto var(--bv-s-0) var(--bv-s-0) var(--bv-s-0);
height: var(--bv-full);
background: linear-gradient(to top, var(--bv-scrim), var(--bv-scrim-zero));
pointer-events: none;
}
/* ------------------------------------------------------------
5 · FILTRI (filetto sotto l'attivo)
------------------------------------------------------------ */
.bv-filters {
display: flex;
flex-wrap: wrap;
gap: var(--bv-s-6);
border-bottom: var(--bv-bw) solid var(--bv-line);
}
.bv-filter {
appearance: none;
background: transparent;
border: var(--bv-s-0) solid transparent;
border-bottom: var(--bv-bw-active) solid transparent;
margin-bottom: calc(var(--bv-bw-active) * -1); /* il filetto attivo copre quello del contenitore */
padding: var(--bv-s-0) var(--bv-s-0) var(--bv-s-3);
min-height: var(--bv-tap);
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-eyebrow);
font-weight: var(--bv-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--bv-ls-eyebrow);
color: var(--bv-ink-3);
cursor: pointer;
transition: color var(--bv-dur-fast) var(--bv-ease), border-color var(--bv-dur-fast) var(--bv-ease);
}
.bv-filter:hover { color: var(--bv-ink); }
.bv-filter[aria-pressed='true'],
.bv-filter[aria-selected='true'],
.bv-filter.is-active {
color: var(--bv-ink);
border-bottom-color: var(--bv-line-ink);
}
/* Contatore accanto all'etichetta */
.bv-filter__count {
font-family: var(--bv-font-mono);
font-weight: var(--bv-fw-regular);
letter-spacing: var(--bv-ls-none);
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------
6 · CTA
------------------------------------------------------------ */
.bv-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bv-s-3);
width: var(--bv-full);
min-height: var(--bv-tap);
height: var(--bv-cta-h);
padding: var(--bv-s-0) var(--bv-s-6);
background: var(--bv-coral);
color: var(--bv-on-coral);
border: var(--bv-s-0) solid transparent;
border-radius: var(--bv-r-md);
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-lead);
font-weight: var(--bv-fw-bold);
letter-spacing: var(--bv-ls-none);
text-decoration: none;
cursor: pointer;
transition: background var(--bv-dur-fast) var(--bv-ease);
}
.bv-cta:hover { background: var(--bv-coral-hover); }
.bv-cta:disabled { background: var(--bv-line-strong); color: var(--bv-surface); cursor: default; }
/* Secondaria navy piena */
.bv-cta--ink { background: var(--bv-ink); color: var(--bv-on-ink); height: var(--bv-btn-h); font-size: var(--bv-fs-body); }
.bv-cta--ink:hover { background: var(--bv-ink-hover); }
/* Terziaria in outline */
.bv-cta--ghost {
background: transparent;
color: var(--bv-ink);
border: var(--bv-bw) solid var(--bv-line-strong);
height: var(--bv-btn-h);
font-size: var(--bv-fs-body);
font-weight: var(--bv-fw-semibold);
}
.bv-cta--ghost:hover { background: transparent; border-color: var(--bv-line-ink); }
/* Larghezza naturale, per barre e toolbar */
.bv-cta--auto { width: auto; }
/* ------------------------------------------------------------
7 · RIGA DATI (filetti, etichetta + valore)
------------------------------------------------------------ */
.bv-data {
display: flex;
flex-direction: column;
border-top: var(--bv-bw) solid var(--bv-line-ink);
}
.bv-data__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bv-s-4);
padding: var(--bv-s-5) var(--bv-s-0);
border-bottom: var(--bv-bw) solid var(--bv-line);
}
.bv-data__label {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-eyebrow-sm);
font-weight: var(--bv-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--bv-ls-eyebrow);
color: var(--bv-ink-3);
}
.bv-data__value {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-body);
font-weight: var(--bv-fw-regular);
color: var(--bv-ink);
font-variant-numeric: tabular-nums;
text-align: right;
}
.bv-data__value--strong { font-weight: var(--bv-fw-bold); }
.bv-data__note {
display: block;
font-size: var(--bv-fs-meta);
font-weight: var(--bv-fw-regular);
color: var(--bv-ink-3);
}
/* Variante a colonne (desktop): tre dati affiancati con filetti verticali */
.bv-data--cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--bv-s-0), var(--bv-col-text)));
border-bottom: var(--bv-s-0) solid transparent;
}
.bv-data--cols .bv-data__row {
flex-direction: column;
align-items: flex-start;
gap: var(--bv-s-2);
padding: var(--bv-s-6) var(--bv-s-0) var(--bv-s-6) var(--bv-s-8);
border-bottom: var(--bv-s-0) solid transparent;
border-left: var(--bv-bw) solid var(--bv-line);
}
.bv-data--cols .bv-data__row:first-child { padding-left: var(--bv-s-0); border-left: var(--bv-s-0) solid transparent; }
.bv-data--cols .bv-data__value { text-align: left; font-weight: var(--bv-fw-bold); font-size: var(--bv-fs-lead); }
/* ------------------------------------------------------------
8 · CARD METEO (alleggerita: nessun bordo, solo fondo e numero)
------------------------------------------------------------ */
.bv-weather {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--bv-s-5);
padding: var(--bv-s-5) var(--bv-s-6);
background: var(--bv-surface-sunk);
border-radius: var(--bv-r-md);
}
.bv-weather__side {
display: flex;
flex-direction: column;
gap: var(--bv-s-2);
}
.bv-weather__label {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-eyebrow-sm);
font-weight: var(--bv-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--bv-ls-eyebrow);
color: var(--bv-ink-3);
}
.bv-weather__state {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-body);
font-weight: var(--bv-fw-regular);
color: var(--bv-ink);
}
.bv-weather__temp {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-temp);
font-weight: var(--bv-fw-bold);
line-height: var(--bv-lh-flat);
letter-spacing: var(--bv-ls-num);
color: var(--bv-ink);
font-variant-numeric: tabular-nums;
}
.bv-weather__wind {
font-family: var(--bv-font-mono);
font-size: var(--bv-fs-eyebrow-sm);
letter-spacing: var(--bv-ls-mono);
color: var(--bv-ink-3);
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------
9 · BOOKING BOX STICKY
------------------------------------------------------------ */
.bv-booking {
position: sticky;
top: var(--bv-sticky-top);
width: var(--bv-full);
max-width: var(--bv-booking-w);
display: flex;
flex-direction: column;
gap: var(--bv-s-6);
padding: var(--bv-s-7);
background: var(--bv-surface);
border: var(--bv-bw) solid var(--bv-line-strong);
border-radius: var(--bv-r-none);
}
/* Riepilogo: miniatura + titolo */
.bv-booking__head {
display: grid;
grid-template-columns: var(--bv-thumb) minmax(var(--bv-s-0), var(--bv-col-text));
gap: var(--bv-s-4);
align-items: center;
}
.bv-booking__thumb {
width: var(--bv-thumb);
height: var(--bv-thumb);
overflow: hidden;
background: var(--bv-skeleton-base);
}
.bv-booking__thumb img {
display: block;
width: var(--bv-full);
height: var(--bv-full);
object-fit: cover;
}
/* Totale: filetto forte sopra, numero grande */
.bv-booking__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bv-s-4);
padding-top: var(--bv-s-5);
border-top: var(--bv-bw) solid var(--bv-line-ink);
}
.bv-booking__fine {
font-family: var(--bv-font-sans);
font-size: var(--bv-fs-meta);
line-height: var(--bv-lh-body);
color: var(--bv-ink-3);
}
/* Barra fissa mobile: stessa gerarchia, ancorata in basso */
.bv-booking--bar {
position: fixed;
inset: auto var(--bv-s-0) var(--bv-s-0) var(--bv-s-0);
top: auto;
max-width: none;
flex-direction: row;
align-items: center;
gap: var(--bv-s-4);
padding: var(--bv-s-4) var(--bv-s-6) var(--bv-s-6);
border: var(--bv-s-0) solid transparent;
border-top: var(--bv-bw) solid var(--bv-line);
box-shadow: var(--bv-shadow-card);
}
.bv-booking--bar .bv-booking__total { border-top: var(--bv-s-0) solid transparent; padding-top: var(--bv-s-0); flex-direction: column; align-items: flex-start; gap: var(--bv-s-1); }
/* ------------------------------------------------------------
10 · SKELETON SHIMMER
------------------------------------------------------------ */
@keyframes bv-shimmer {
from { background-position: var(--bv-shimmer-from) var(--bv-s-0); }
to { background-position: var(--bv-shimmer-to) var(--bv-s-0); }
}
.bv-skeleton {
background-color: var(--bv-skeleton-base);
background-image: linear-gradient(
to right,
var(--bv-skeleton-base),
var(--bv-skeleton-shine),
var(--bv-skeleton-base)
);
background-size: var(--bv-shimmer-size) var(--bv-full);
background-repeat: no-repeat;
animation: bv-shimmer var(--bv-dur-shimmer) var(--bv-ease) infinite;
border-radius: var(--bv-r-sm);
color: transparent;
user-select: none;
}
/* Forme: riga di testo, titolo, immagine editoriale, miniatura */
.bv-skeleton--line { height: var(--bv-s-3); border-radius: var(--bv-r-pill); }
.bv-skeleton--title { height: var(--bv-s-8); border-radius: var(--bv-r-none); }
.bv-skeleton--media { aspect-ratio: var(--bv-ar-editorial); border-radius: var(--bv-r-none); width: var(--bv-full); }
.bv-skeleton--thumb { width: var(--bv-thumb); height: var(--bv-thumb); border-radius: var(--bv-r-none); }
.bv-skeleton--square { aspect-ratio: var(--bv-ar-square); border-radius: var(--bv-r-none); }
/* Righe accorciate, per un blocco di testo credibile */
.bv-skeleton--w2 { width: var(--bv-w-3-4); }
.bv-skeleton--w3 { width: var(--bv-w-1-2); }
.bv-skeleton-stack {
display: flex;
flex-direction: column;
gap: var(--bv-s-3);
}
/* Ferma lo shimmer: lo skeleton dice "sto caricando", e quando il caricamento è
finito e il dato semplicemente non esiste continuare ad animare è una bugia. */
.bv-skeleton--still { animation: none; background-image: none; }
/* ------------------------------------------------------------
11 · MEDIA ASSENTE
Non è uno skeleton: il caricamento è finito e l'immagine non c'è.
Blocco fermo con il marchio in filigrana, stesso trattamento
ovunque manchi una foto (card e dettaglio).
L'SVG è l'onda della sezione in fondo, variante navy, invariata.
------------------------------------------------------------ */
/* Il marchio non è un francobollo centrato: è grande e tagliato dall'angolo, in
filigrana. Centrarlo faceva leggere il blocco come un'icona di errore. */
.bv-media-empty {
position: relative;
overflow: hidden;
background: var(--bv-surface-sunk);
}
/* L'opacità sta sullo pseudo-elemento e non sul blocco: così il fondo resta
pieno e non lascia trasparire quello che c'è sotto. */
.bv-media-empty::after {
content: '';
position: absolute;
right: var(--bv-watermark-right);
bottom: var(--bv-watermark-bottom);
width: var(--bv-watermark-width);
aspect-ratio: var(--bv-ar-square);
opacity: var(--bv-op-watermark);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Ccircle cx='50' cy='50' r='45' stroke='%230F2942' stroke-width='3.4'/%3E%3Cpath d='M12.4 65.2C18.5 64.2 27.5 59 33.8 54.3C40.5 48.6 48 42 56.1 38.2C60.5 36.6 65.5 35.4 71 35.6C73.5 35.9 75.3 36.9 76.2 38.2C77.8 40.2 80.8 42.3 82.5 44.2' stroke='%230F2942' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M73.5 39C70.5 40.4 66.3 42.5 63.8 44.4C61.6 47.4 60.1 50.6 60.1 54.3C60.1 58.5 62 62.6 65 65.2C67.5 67.4 71.5 70.3 76.1 70.3C81.5 70.3 85.5 68.4 88 65.3C89.4 64.1 90.7 63.6 92 62.9' stroke='%230F2942' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Rispetto delle preferenze di movimento */
@media (prefers-reduced-motion: reduce) {
.bv-skeleton { animation: none; }
.bv-card-tour__media img,
.bv-card-compact,
.bv-cta,
.bv-filter,
.bv-link { transition: none; }
}
/* ------------------------------------------------------------
ONDA BLUVIA — marchio, due varianti di colore
Copiare nell'HTML. Il cerchio e le due onde condividono
stroke-width 4.6 / 3.4; su fondo scuro usare la variante bianca,
su fondo chiaro quella navy (--bv-ink).
VARIANTE BIANCA (su immagine o fondo navy):
VARIANTE NAVY (su fondo chiaro):
Per l'animazione di tracciatura aggiungere a ogni tratto
pathLength="100" stroke-dasharray="100" stroke-dashoffset="100"
e @keyframes bv-draw { to { stroke-dashoffset: 0 } } con ritardi 0 / 60ms / 120ms.
------------------------------------------------------------ */