/* Visit Bordighera – Hero stili: solo ciò che le classi globali di Elementor non possono esprimere. */ /* Altezza = area realmente visibile del dispositivo. svh esclude le barre del browser mobile; le classi Elementor non supportano questa unità né la condizione sulla barra di amministrazione di WordPress (utenti loggati). */ body .elementor .vb-lmr, body .elementor .vb-mood { height: 100vh; height: 100svh; } .admin-bar .elementor .vb-lmr, .admin-bar .elementor .vb-mood { height: calc(100vh - 32px); height: calc(100svh - 32px); } @media (max-width: 782px) { .admin-bar .elementor .vb-lmr, .admin-bar .elementor .vb-mood { height: calc(100vh - 46px); height: calc(100svh - 46px); } } /* Header fisso: sotto la barra di amministrazione di WordPress (solo utenti loggati). */ .admin-bar .elementor .vb-hdr { top: 32px; } @media (max-width: 782px) { .admin-bar .elementor .vb-hdr { top: 46px; } } /* Hover sulla card: la freccia interna si ingrandisce e scorre (selettore discendente). */ .vb-lmr-card:hover .vb-lmr-card-arrow, .vb-lmr-card:focus-visible .vb-lmr-card-arrow { transform: scale(1.5) translateX(6px); } /* Carosello articoli: scorrimento orizzontale con aggancio alle card e senza barra visibile (overflow-x e scroll-snap non sono proprietà supportate dalle classi Elementor; il selettore è più specifico di ".e-con { overflow: var(--overflow) }" di Elementor). */ body .elementor .vb-art-track { --overflow: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .vb-art-track::-webkit-scrollbar { display: none; } .vb-art-item { scroll-snap-align: start; } /* Testo degli articoli: è il contenuto WordPress inserito nel modello Elementor, quindi i suoi titoli e paragrafi si raggiungono solo con selettori discendenti. Usa le variabili globali. */ .vb-post-content p, .vb-post-content li { font-family: var(--sans), sans-serif; font-size: inherit; font-weight: 400; line-height: 1.7; color: var(--ink); } .vb-post-content p { margin: 0 0 1.4em; } .vb-post-content h2, .vb-post-content h3 { font-family: var(--serif), serif; font-weight: 400; line-height: 1.05; letter-spacing: 0; color: var(--ink); margin: 1.8em 0 0.6em; } .vb-post-content h2 { font-size: 38px; } .vb-post-content h3 { font-size: 27px; font-weight: 500; } @media (max-width: 767px) { .vb-post-content h2 { font-size: 30px; } .vb-post-content h3 { font-size: 24px; } } .vb-post-content a { color: var(--sea-800); text-decoration: underline; text-underline-offset: 3px; } .vb-post-content img { max-width: 100%; height: auto; border-radius: 7px; } /* Il tema (Astra) sottolinea i link nei contenuti con una regola più specifica delle classi Elementor. */ .vb-lmr a, .vb-mood a, .ast-single-post .entry-content .vb-lmr a, .ast-single-post .entry-content .vb-lmr a:hover, .ast-single-post .entry-content .vb-lmr a:focus, .ast-single-post .entry-content .vb-mood a, .ast-single-post .entry-content .vb-mood a:hover, .ast-single-post .entry-content .vb-mood a:focus, .vb-art a, .ast-single-post .entry-content .vb-art a, .ast-single-post .entry-content .vb-art a:hover { text-decoration: none; } /* Chi preferisce meno movimento: niente scorrimento animato del binario. */ @media (prefers-reduced-motion: reduce) { .vb-lmr-track, .vb-mood-track, .vb-art-card, .vb-lmr-card, .vb-lmr-card-arrow, .vb-hdr, .vb-hdr * { transition: none !important; } } /* Mappa evento: l'iframe è creato dallo script e non ha controlli Elementor; la sezione resta nascosta quando l'evento non ha un link Google Maps (classe "vb-has-map" sul body). */ body:not(.vb-has-map):not(.elementor-editor-active) .vb-event-map { display: none; } .vb-map-frame iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: 12px; } @media (max-width: 767px) { .vb-map-frame iframe { height: 300px; } } /* Tappe dell'itinerario e itinerari del luogo: sezioni nascoste quando non ci sono collegamenti. */ body:not(.vb-has-tappe):not(.elementor-editor-active) .vb-section-tappe, body:not(.vb-has-itinerari):not(.elementor-editor-active) .vb-section-itinerari-luogo { display: none; } /* Eventi ed esperienze del luogo e "Come arrivare da Bordighera": nascosti quando sono vuoti. */ body:not(.vb-has-eventi-luogo):not(.elementor-editor-active) .vb-section-eventi-luogo, body:not(.vb-has-esperienze-luogo):not(.elementor-editor-active) .vb-section-esperienze-luogo, body:not(.vb-has-arrivo):not(.elementor-editor-active) .vb-luogo-arrivo { display: none; } /* Mappa del territorio (.vb-terr-map): gli elementi (segnaposto, etichette, filtri, scheda) sono creati dallo script dentro la mappa, quindi le classi globali di Elementor non li raggiungono. Colori e caratteri usano le variabili globali del sito; la mappa ha lo stile della brochure. */ .vb-terr-map { position: relative; overflow: hidden; background: #d6e6ba; } .vb-terr-map .vb-tm-stage { position: absolute; inset: 0; } .vb-terr-map .maplibregl-ctrl-attrib { font-size: 10px; background: rgba(255, 255, 255, .65); } .vb-terr-map .maplibregl-ctrl-group { border-radius: 12px; box-shadow: 0 4px 14px rgba(38, 73, 93, .14); } .vb-terr-map .maplibregl-cooperative-gesture-screen { font-family: var(--sans), sans-serif; background: rgba(38, 73, 93, .55); } .vb-tm-poi { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; cursor: pointer; transform-origin: 50% 100%; transition: transform .15s ease; } .vb-tm-poi svg { display: block; width: calc(42px * var(--vb-tm-s, 1)); height: auto; overflow: visible; filter: drop-shadow(0 2px 1px rgba(60, 70, 40, .2)); } .vb-tm-poi:hover, .vb-tm-poi:focus-visible, .vb-tm-poi.is-active { transform: translateY(-3px) scale(1.08); } .vb-tm-poi:focus-visible .vb-tm-lbl, .vb-tm-poi.is-active .vb-tm-lbl { background: #fff; } .vb-tm-poi.is-hidden { display: none; } /* Il tema colora i