/* ========================================================================== Villa Charm and Elegance — strato di tema Caricato DOPO custom.css: ridefinisce le variabili del tema originale invece di riscriverne le regole. Il tema usa --accent-color 58 volte, --primary-color 42 e --white-color 58, quindi cambiare qui ricolora tutto. I colori non sono scelti a occhio: sono campionati dalle foto della villa. Accanto a ognuno c'e' il valore misurato da cui deriva. ========================================================================== */ :root { /* --- Palette, misurata dalle foto ------------------------------------- Blu Canalotto persiane e cancello misurati #284C77 / #0C2E5E Blu notte acqua della piscina di sera misurato #2E5B9A -> fondo Turchese acqua di giorno misurato #0FC2D0 Bianco calce muro in ombra misurato #DAECF4 Pietra travertino del piano cucina misurato #756C65 --------------------------------------------------------------------- */ --blu-canalotto: #0F4C81; --blu-canalotto-scuro: #0B3A63; --blu-notte: #0B2B45; --turchese: #12B8C8; --turchese-fondo: #0E7C88; /* tinta chiara per il testo sopra il blu e sopra le foto: 5.3:1 sul menu blu, 7.2:1 sul velo scuro dell'hero */ --turchese-chiaro: #5FDAE6; --bianco-calce: #F6F9FA; --pietra: #5A6B78; --pietra-chiara: #D9DDE0; /* --- Rimappatura delle variabili del tema originale ------------------- */ --primary-color: var(--blu-notte); --secondary-color: var(--bianco-calce); --text-color: var(--pietra); --accent-color: var(--blu-canalotto); --white-color: #FFFFFF; --divider-color: #0B2B4520; --dark-divider-color: #FFFFFF24; --error-color: #C0392B; --default-font: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --display-font: "Fraunces", Georgia, "Times New Roman", serif; /* --- Ritmo verticale: sezioni che non respirano tutte uguali ---------- */ --sezione-y: clamp(4.5rem, 8vw, 8rem); --sezione-y-stretta: clamp(2.5rem, 4vw, 4rem); /* --- Variabili Bootstrap ---------------------------------------------- Comandano da qui, non dal pannello Theme di Bootstrap Studio. Il pannello non legge questi valori (continua a mostrare #0d6efd) e quello che ci si scrive finisce in bss-overrides.css, caricato PRIMA di questo file: vincerebbe sempre questo blocco. Per spostare la palette nel pannello vedi CONSEGNA-BOOTSTRAP-STUDIO.md, "Palette". */ --bs-primary: #0F4C81; --bs-primary-rgb: 15, 76, 129; --bs-secondary: #12B8C8; --bs-secondary-rgb: 18, 184, 200; --bs-body-bg: #FFFFFF; --bs-body-color: #5A6B78; --bs-emphasis-color: #0B2B45; --bs-heading-color: #0B2B45; --bs-body-font-family: var(--default-font); --bs-body-font-size: 1.0625rem; --bs-body-line-height: 1.7; --bs-border-color: #D9DDE0; --bs-border-radius: 6px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 12px; /* --- Scala degli angoli ------------------------------------------------ Non un raggio unico su tutto: un valore uguale ovunque e' uno dei segni che tradiscono il tema Bootstrap non ritoccato. Qui la scala e' a tre gradini, e non e' arbitraria: il soggiorno della villa ha un grande arco circolare in cemento e la piscina ha i bordi raggiati, quindi l'angolo morbido viene dall'architettura, non dalla moda. Le fasce a tutta larghezza restano a spigolo: arrotondarle le staccherebbe dal bordo dello schermo. */ --angolo-piccolo: 6px; /* campi, pulsanti, riquadri piccoli */ --angolo-medio: 12px; /* immagini, schede, riquadri */ --angolo-grande: 20px; /* immagini grandi e blocchi in rilievo */ --bs-link-color: #0F4C81; --bs-link-color-rgb: 15, 76, 129; --bs-link-hover-color: #0B3A63; } /* ========================================================================== Tipografia Fraunces per i titoli (la meta' "Elegance"), Karla per il resto (la meta' "Charm", e piu' vicina all'insegna blu gia' sul muro). ========================================================================== */ body { font-family: var(--default-font); font-size: 1.0625rem; line-height: 1.7; color: var(--pietra); } /* La famiglia si applica ovunque; il COLORE solo ai tag nudi, altrimenti sovrascrive il bianco che il tema usa sulle sezioni scure e sull'hero. */ h1, h2, h3, h4, h5, h6, .section-title h1, .section-title h2, .hero-content .section-title h1, .hero-content .section-title h2, .page-header-box h1 { font-family: var(--display-font); font-variation-settings: "SOFT" 20, "WONK" 0; font-weight: 600; letter-spacing: -0.015em; } h1, h2, h3, h4, h5, h6 { color: var(--blu-notte); } /* Sezioni scure, hero e testate: il testo resta bianco */ .dark-section h1, .dark-section h2, .dark-section h3, .hero-content h1, .hero-content h2, .hero-content h3, .page-header-box h1, .page-header-box h2 { color: var(--white-color); } /* Il tema mette i titoli tutti in maiuscolo: con un serif ad alto contrasto diventa illeggibile. Li riporto in caso normale e lascio il maiuscoletto solo agli occhielli. */ .section-title h1, .section-title h2, .hero-content .section-title h1, .hero-content .section-title h2, .page-header-box h1 { text-transform: none; } .section-title h3 { font-family: var(--default-font); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8125rem; color: var(--blu-canalotto); } /* Le parole evidenziate nei titoli: il tema le colora di accento */ .section-title h1 span, .section-title h2 span { color: var(--blu-canalotto); font-style: italic; } /* ...ma sulle sezioni scure (dotazioni, video, banda "date libere") il blu Canalotto sul blu notte fa 1,6:1 e la parola sparisce. Li' va il turchese chiaro, gia' usato per il testo sopra il blu: 8,7:1 sul blu notte. L'hero della home era escluso (scelta del committente): dal 25/09/2026 anche li' e' turchese, vedi "titolo dell'hero leggibile" in fondo. */ .section-title.dark-section h2 span { color: var(--turchese-chiaro); } /* ========================================================================== Velatura su hero e testate Il testo bianco sopra una foto non e' leggibile per conto suo: la villa e' bianca, il cielo siciliano e' pieno, e senza velatura il titolo sparisce. Gradiente e non tinta piatta, cosi' la foto resta leggibile in alto e il testo guadagna contrasto solo dove serve. ========================================================================== */ #hero::before, .hero::before, .page-header::before { background: linear-gradient( 180deg, rgba(11, 43, 69, 0.55) 0%, rgba(11, 43, 69, 0.30) 38%, rgba(11, 43, 69, 0.72) 100% ) !important; opacity: 1 !important; } /* Ombra morbida sotto il testo dell'hero: regge anche sui punti piu' chiari */ .hero-content h1, .hero-content h2, .page-header-box h1 { text-shadow: 0 2px 24px rgba(11, 43, 69, 0.45); } /* ========================================================================== Il turchese Misurato #0FC2D0. Su bianco fa 2.4:1, quindi NON e' mai testo ne' linea sottile: solo riempimenti grandi, stati hover e elementi sopra le foto. Dove serve leggibilita' si usa --turchese-fondo (4.9:1). ========================================================================== */ ::selection { background: var(--turchese); color: var(--blu-notte); } :focus-visible { outline: 3px solid var(--turchese); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== Elemento firma: l'onda Ripresa dal volantino stampato della villa, dove una curva bianca taglia la foto della Scala dei Turchi. Divide le sezioni e si disegna allo scroll. ========================================================================== */ .onda { display: block; width: 100%; height: clamp(40px, 5vw, 80px); line-height: 0; color: var(--white-color); } .onda svg { display: block; width: 100%; height: 100%; } .onda--calce { color: var(--bianco-calce); } .onda--notte { color: var(--blu-notte); } /* il tratto che si disegna allo scroll (lo innesca GSAP in villa.js) */ .onda-tratto { fill: none; stroke: var(--turchese); stroke-width: 2; vector-effect: non-scaling-stroke; } /* ========================================================================== Ritmo delle sezioni ========================================================================== */ .sezione-ampia { padding-block: var(--sezione-y); } .sezione-stretta { padding-block: var(--sezione-y-stretta); } /* ========================================================================== Dati in evidenza (117 mq, 5 camere, 10 posti letto...) ========================================================================== */ .dato-chiave { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 0.5rem; } .dato-chiave__numero { font-family: var(--display-font); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1; color: var(--blu-canalotto); } .dato-chiave__etichetta { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pietra); } /* ========================================================================== Modulo di prenotazione Holidu L'iframe si ridimensiona da solo via postMessage (gestito in villa.js). ========================================================================== */ .prenota-holidu { width: 100%; max-width: 1280px; margin-inline: auto; } .prenota-holidu iframe { width: 100%; height: 1000px; border: none; display: block; } /* Holidu prevede un messaggio 'resize' per dire la sua altezza. Il 21/09/2026 non arrivava; il 22/09/2026 si': l'ascoltatore in villa.js adatta il riquadro da solo. Queste altezze restano come riserva, se il messaggio smette di arrivare, e sono quelle che fanno stare il modulo senza tagliarlo. */ @media only screen and (max-width: 991px) { .prenota-holidu iframe { height: 1150px; } } @media only screen and (max-width: 767px) { .prenota-holidu iframe { height: 1250px; } } @media only screen and (max-width: 420px) { .prenota-holidu iframe { height: 1320px; } } .prenota-holidu__fallback { padding: 1.5rem; border: 1px solid var(--pietra-chiara); background: var(--bianco-calce); } /* Elenchi di condizioni: niente pallini, un trattino turchese al posto loro */ .elenco-condizioni { list-style: none; padding-left: 0; margin-top: 1rem; } .elenco-condizioni li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; line-height: 1.6; } .elenco-condizioni li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 1rem; height: 2px; background: var(--turchese); } /* Le due sezioni della pagina di prenotazione */ .page-prenotazione { background: var(--white-color); } .page-condizioni { background: var(--bianco-calce); } .page-condizioni h3 { font-size: 1.25rem; margin-bottom: 0; } /* ========================================================================== Contrasti da correggere dopo il cambio palette Il tema usava un accento arancione: certi testi erano leggibili solo grazie a quello. Con il blu alcune combinazioni diventano blu-su-blu. ========================================================================== */ /* Menu mobile (SlickNav): il pannello ha sfondo --accent-color, quindi il testo in hover non puo' essere --primary-color. */ .slicknav_nav a, .slicknav_nav .slicknav_row, .slicknav_menu .slicknav_btn { color: var(--white-color); } /* NON toccare ::after sulle voci di menu: il tema ci disegna dentro le frecce dei sottomenu (content '\f107' di Font Awesome). Una regola ::after qui le cancella. L'hover si fa solo col colore. Il turchese pieno come testo farebbe 3.7:1 sul blu del menu, sotto la soglia di 4.5. --turchese-chiaro fa 5.3:1 sul menu e 7.2:1 sopra la foto. */ /* Desktop: una pillola attorno alla voce. Il contorno e' un box-shadow inset e non un border, cosi' non aggiunge due pixel di larghezza e le voci non ballano quando il mouse ci passa sopra. Il padding del tema e' 12px 15px !important: lo stringo un po' cosi' la pillola sta piu' aderente alla parola. */ .main-menu .navbar-nav > li > a { padding: 8px 14px !important; border-radius: 999px; transition: background-color 220ms ease, box-shadow 220ms ease, color 220ms ease; } .main-menu .navbar-nav > li > a:hover, .main-menu .navbar-nav > li > a:focus, .main-menu .navbar-nav > li:hover > a { background-color: rgba(18, 184, 200, 0.16); box-shadow: inset 0 0 0 1px var(--turchese-chiaro); color: var(--white-color); } /* Le voci dentro la tendina restano piatte: li' la pillola sarebbe rumore. Fondo blu, quindi il testo in hover va chiaro (5.3:1), mai blu su blu. */ .main-menu .navbar-nav ul li a:hover, .main-menu .navbar-nav ul li a:focus, .main-menu .navbar-nav ul li:hover > a { color: var(--turchese-chiaro); background-color: rgba(18, 184, 200, 0.14); box-shadow: none; } /* La tendina dei sottomenu: angoli morbidi come il resto del sito */ .main-menu .navbar-nav ul ul, .main-menu ul ul { border-radius: var(--angolo-medio); overflow: hidden; box-shadow: 0 10px 30px rgba(11, 43, 69, 0.22); } /* ========================================================================== Selettore di lingua nella barra Sta FUORI da .main-menu di proposito: dentro, la regola del tema ".main-menu ul ul { visibility: hidden }" colpiva anche la sua tendina e non si apriva piu'. ========================================================================== */ .navbar > .container > .selettore-lingua, .navbar .selettore-lingua { margin-left: 1.5rem; } @media (max-width: 991px) { .navbar .selettore-lingua { margin-left: auto; margin-right: 0.75rem; } } .slicknav_nav a, .slicknav_nav .slicknav_row, .slicknav_menu .slicknav_btn { color: var(--white-color); } .slicknav_nav a:hover, .slicknav_nav a:focus, .slicknav_nav .slicknav_row:hover, .slicknav_nav .slicknav_row:focus, .slicknav_nav .slicknav_item:hover > a { color: var(--turchese-chiaro) !important; background-color: transparent; } .header-sticky.active .main-menu .navbar-nav .nav-link:hover, .header-sticky.active .main-menu .navbar-nav .nav-item:hover > .nav-link { color: var(--blu-canalotto); } /* La tendina dei sottomenu ha fondo BLU (--accent-color), non chiaro: il testo in hover va tenuto chiaro. La regola sta piu' sopra, insieme alle altre del menu. */ /* Icone social nell'hero. Il tema colora l'elemento , non il link (.hero-social-media ul li i:hover), e lo porta a --accent-color: blu scuro sopra una foto, invisibile. Qui si colpisce anche la , altrimenti la regola del tema vince. */ .hero-social-media ul li a, .hero-social-media ul li a i, .hero-social-media a { color: var(--white-color); opacity: 1; text-shadow: 0 1px 10px rgba(11, 43, 69, 0.6); transition: color 200ms ease, transform 200ms ease; } .hero-social-media ul li a:hover, .hero-social-media ul li a:hover i, .hero-social-media ul li i:hover, .hero-social-media a:hover { color: var(--turchese-chiaro); transform: translateY(-2px); } /* Telefono in testata: sta sopra la foto dell'hero, e il tema lo porta a --accent-color in hover. Stessa trappola del footer. */ .header-contact-box-content h3, .header-contact-box-content h3 a { color: var(--white-color); text-shadow: 0 1px 10px rgba(11, 43, 69, 0.55); } .header-contact-box-content h3 a:hover, .header-contact-box-content h3 a:focus { color: var(--turchese-chiaro); } /* Quando l'intestazione diventa opaca allo scroll il fondo e' chiaro: li' il telefono torna scuro e l'ombra non serve. */ .header-sticky.active .header-contact-box-content h3, .header-sticky.active .header-contact-box-content h3 a { color: var(--blu-notte); text-shadow: none; } .header-sticky.active .header-contact-box-content h3 a:hover { color: var(--blu-canalotto); } /* Stessa trappola ovunque il fondo sia scuro */ .dark-section a:hover, .cta-box a:hover, .our-experience a:hover { color: var(--turchese-chiaro); } .hero-social-media h3 { text-shadow: 0 1px 10px rgba(11, 43, 69, 0.6); } /* ========================================================================== I tab delle camere Nel tema sono testo nudo separato da pallini: non si capisce che sono cliccabili. Diventano pillole, come le voci del menu. ========================================================================== */ .property-tab-nav ul li .nav-link { padding: 0.55rem 1.4rem !important; border-radius: 999px; color: var(--blu-notte); box-shadow: inset 0 0 0 1px var(--pietra-chiara); background: var(--white-color); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; } .property-tab-nav ul li .nav-link:hover, .property-tab-nav ul li .nav-link:focus-visible { color: var(--blu-canalotto); box-shadow: inset 0 0 0 1px var(--blu-canalotto); background: rgba(15, 76, 129, 0.06); } .property-tab-nav ul li .nav-link.active { background: var(--blu-canalotto); color: var(--white-color); box-shadow: inset 0 0 0 1px var(--blu-canalotto); } /* Il tema mette un pallino fra un tab e l'altro: e' un ::before sul .nav-link (posizionato a right:-34px), non un ::after. Con le pillole e' rumore. */ .property-tab-nav ul li .nav-link::before, .property-tab-nav ul li .nav-link::after { display: none !important; content: none !important; } .property-tab-nav ul { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } /* ========================================================================== Il riquadro del modulo Holidu Il widget cambia tutta la sua schermata quando si apre "Ospiti" o il calendario: senza una cornice non si capisce dove finisce il sito e dove comincia lo strumento di prenotazione. ========================================================================== */ .prenota-holidu { border: 1px solid var(--pietra-chiara); border-radius: 6px; background: var(--white-color); box-shadow: 0 2px 24px rgba(11, 43, 69, 0.08); overflow: hidden; } /* Barra di intestazione: dice a chiare lettere che da qui in giu' e' Holidu */ .prenota-holidu__testata { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.875rem 1rem; background: var(--bianco-calce); border-bottom: 1px solid var(--pietra-chiara); font-size: 0.8125rem; color: var(--pietra); } .prenota-holidu__testata strong { color: var(--blu-notte); font-weight: 600; } .prenota-holidu__sicuro::before { content: "\f023"; /* lucchetto, Font Awesome */ font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; margin-right: 0.4rem; color: var(--turchese-fondo); } /* Il contenuto dentro l'iframe e' di Holidu e NON si puo' stilare da qui: e' un altro dominio (widget.holiduhost.com) e la same-origin policy blocca qualunque selettore, !important compreso. Verificato: contentDocument e' null e ogni scrittura alza SecurityError. Nel loro markup i contenitori sono "md:px-16", cioe' Tailwind mette il padding orizzontale solo da 768px in su: sotto quella soglia il contenuto arriva a filo. Lo compensiamo con il padding dell'iframe, che e' l'unica leva disponibile da fuori. Per colori e forma del widget si agisce invece dal pannello Holidu (themeColor, themeShape, colorPrimary): quelli sono suoi parametri. */ .prenota-holidu iframe { border-radius: 0 0 6px 6px; box-sizing: border-box; background: var(--white-color); padding-inline: 10px; /* Il CSS di Holidu ha html{scrollbar-gutter:stable}: sui computer con barre di scorrimento che occupano spazio (Windows) il modulo lascia una striscia vuota a destra. villa.js misura quella larghezza e la mette in --barra-holidu: la stessa si aggiunge a sinistra. Sui telefoni vale 0. */ padding-left: calc(10px + var(--barra-holidu, 0px)); /* Holidu non mette spazio sopra la barra di ricerca: con gli angoli arrotondati il bordo toccava il margine superiore del riquadro. villa.js aggiunge questo padding all'altezza che manda Holidu. */ padding-top: 14px; } /* Sotto i 768px Holidu non mette padding: serve il nostro */ @media (max-width: 767.98px) { .prenota-holidu iframe { padding-inline: 16px; padding-left: calc(16px + var(--barra-holidu, 0px)); } .prenota-holidu__testata { padding-inline: 16px; } } /* ========================================================================== Mappa ========================================================================== */ .mappa-villa { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 320px; border: 1px solid var(--pietra-chiara); border-radius: 6px; overflow: hidden; } .mappa-villa iframe { width: 100%; height: 100%; border: 0; display: block; } /* ========================================================================== Angoli morbidi Applicati per ruolo, non a tappeto. Le fasce a tutta larghezza, l'hero e le testate di pagina restano a spigolo perche' toccano il bordo dello schermo. ========================================================================== */ /* Immagini dentro un contenitore: il raggio va sul contenitore, che ha overflow:hidden, altrimenti l'effetto di reveal esce dagli angoli */ .image-anime, .reveal, .apartment-image, .amenities-img, .project-img, .post-featured-image, .team-image, .photo-gallery, .video-gallery-image, .property-tab-image, .about-us-image-box-1 figure, .about-us-image-box-2 figure, .why-choose-img, .our-experience-image figure, .project-entry-image { border-radius: var(--angolo-medio); overflow: hidden; } .about-us-images figure, .intro-video-box figure { border-radius: var(--angolo-grande); overflow: hidden; } /* Schede e riquadri */ .apartment-item, .our-amenities-item, .features-item, .project-item, .post-item, .amenities-item, .property-type-item, .experience-counter-item, .testimonial-item, .cta-box, .sidebar-cta-box, .query-box, .amenities-entry-box { border-radius: var(--angolo-medio); } /* Pulsanti e campi */ .btn-default, .btn-default-white, .readmore-btn, button, input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control { border-radius: var(--angolo-piccolo); } /* L'accordion delle domande */ .accordion-item, .accordion-button, .accordion-button:not(.collapsed) { border-radius: var(--angolo-piccolo); } /* Le icone tonde restano tonde */ .icon-box, .dato-chiave__numero { border-radius: inherit; } /* Niente angoli su cio' che tocca il bordo dello schermo */ #hero, .hero, .page-header, .main-header, .main-footer, .google-map, section > .container-fluid > .row > [class*="col-"] > .google-map-iframe:not(.mappa-villa) { border-radius: 0; } /* ========================================================================== Accessibilita' e movimento ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Il logo della villa Il marchio e' un adesivo: macchia blu, lettere bianche in negativo. Nella versione chiara la macchia diventa bianca e le lettere blu, cosi' funziona sia sopra la foto dell'hero sia sul footer blu notte; su fondo bianco la macchia sparisce e resta la sola scritta blu. ========================================================================== */ .navbar-brand img { height: 72px; width: auto; max-width: none; } @media (max-width: 991.98px) { .navbar-brand img { height: 54px; } } /* ========================================================================== I dischi blu sfalsati dietro le icone Il tema piazza dietro ogni icona un disco di --accent-color largo 40px ancorato a top:0 right:0. Nato come accento arancione che spuntava appena, in blu pieno diventa una macchia storta dietro un disegno a filo. Al suo posto una piastrella centrata con lo stesso raggio delle schede. ========================================================================== */ .about-detail-item .icon-box, .property-type-item .icon-box, .features-item .icon-box, .amenities-item .icon-box, .experience-counter-item .icon-box, .why-choose-list-item .icon-box, .amenities-entry-item .icon-box, .contact-info-item .icon-box { display: inline-flex !important; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0 !important; flex: 0 0 auto; background-color: rgba(18, 184, 200, 0.13); box-shadow: inset 0 0 0 1px rgba(15, 76, 129, 0.12); border-radius: var(--angolo-medio); transition: background-color 260ms ease, box-shadow 260ms ease; } .about-detail-item .icon-box::before, .property-type-item .icon-box::before, .features-item .icon-box::before, .amenities-item .icon-box::before, .experience-counter-item .icon-box::before, .why-choose-list-item .icon-box::before, .amenities-entry-item .icon-box::before, .contact-info-item .icon-box::before { display: none !important; content: none !important; } .about-detail-item .icon-box img, .property-type-item .icon-box img, .features-item .icon-box img, .amenities-item .icon-box img, .experience-counter-item .icon-box img, .why-choose-list-item .icon-box img, .amenities-entry-item .icon-box img, .contact-info-item .icon-box img { position: static !important; width: auto !important; max-width: 34px !important; height: auto; } /* Passando sulla scheda la piastrella si riempie e l'icona va in negativo */ .features-item:hover .icon-box, .amenities-item:hover .icon-box, .why-choose-list-item:hover .icon-box, .amenities-entry-item:hover .icon-box, .property-type-item:hover .icon-box { background-color: var(--blu-canalotto); box-shadow: inset 0 0 0 1px var(--blu-canalotto); } .features-item:hover .icon-box img, .amenities-item:hover .icon-box img, .why-choose-list-item:hover .icon-box img, .amenities-entry-item:hover .icon-box img, .property-type-item:hover .icon-box img { filter: brightness(0) invert(1); } /* La scheda contatti si scurisce tutta al passaggio: qui la piastrella fa il contrario, diventa bianca e l'icona resta blu. */ .contact-info-item:hover .icon-box { background-color: var(--white-color); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); } /* Al passaggio il tema porta a bianco titolo e paragrafi della scheda contatti, ma non i link dentro i paragrafi: telefono ed e-mail restavano blu sul blu (1:1) e sparivano. La transizione è sul link a riposo, così il colore sfuma insieme al resto della scheda invece di scattare. */ .contact-info-content a { transition: color 0.3s ease-in-out; } .contact-info-item:hover .contact-info-content a { color: var(--white-color); } .contact-info-item:hover .contact-info-content a:hover { text-decoration: underline; } /* Schede camera ("Posti letto", "Letti", "Aria condizionata", "TV"): il tema metteva l'icona da 40px accanto al testo; con la piastrella da 64px non ci sta piu', il testo va a capo sotto e restava attaccato (0px, e su telefono a volte 12 o 14). Qui la piastrella sta sopra come nelle schede servizi, con la stessa distanza del resto del sito: 20px, 10px su telefono. align-content: se la scheda accanto va su due righe, la riga si alza e senza questo lo spazio in piu' finiva fra icona e titolo (22px su "TV"). */ .property-type-item { align-content: flex-start; } .property-type-item .icon-box { margin: 0 0 20px 0; } .property-type-content { width: 100%; } @media (max-width: 767.98px) { .property-type-item .icon-box, .contact-info-item .icon-box { margin-bottom: 10px; } } @media (max-width: 767.98px) { .about-detail-item .icon-box, .property-type-item .icon-box, .features-item .icon-box, .amenities-item .icon-box, .experience-counter-item .icon-box, .why-choose-list-item .icon-box, .amenities-entry-item .icon-box, .contact-info-item .icon-box { width: 54px; height: 54px; } .about-detail-item .icon-box img, .property-type-item .icon-box img, .features-item .icon-box img, .amenities-item .icon-box img, .experience-counter-item .icon-box img, .why-choose-list-item .icon-box img, .amenities-entry-item .icon-box img, .contact-info-item .icon-box img { max-width: 28px !important; } } /* ========================================================================== Le schede dei consigli Due difetti: il pulsante "Continua" seguiva il testo, quindi con titoli di lunghezza diversa finiva a tre altezze diverse; e il riempimento blu dell'hover e' un rettangolo che sbordava dagli angoli tondi della scheda. ========================================================================== */ .post-item { display: flex; flex-direction: column; overflow: hidden; } .post-item-content { flex: 1 1 auto; } .post-item-btn { margin-top: auto; } .post-item-btn a, .post-item-btn a::before { border-radius: 0 0 var(--angolo-medio) var(--angolo-medio); } /* Stessa cosa per le schede dei servizi, che hanno lo stesso pulsante */ .amenities-item { display: flex; flex-direction: column; overflow: hidden; } .amenities-item .amenities-item-content { flex: 1 1 auto; } .amenities-item .features-btn { margin-top: auto; } /* ========================================================================== I tab di "chi siamo" Stesso componente di quelli delle camere, ma con un'altra classe: erano rimasti testo nudo separato da pallini mentre gli altri erano gia' pillole. ========================================================================== */ .vision-mission-nav ul li .nav-link { padding: 0.55rem 1.4rem !important; border-radius: 999px; color: var(--blu-notte); box-shadow: inset 0 0 0 1px var(--pietra-chiara); background: var(--white-color); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; } .vision-mission-nav ul li .nav-link:hover, .vision-mission-nav ul li .nav-link:focus-visible { color: var(--blu-canalotto); box-shadow: inset 0 0 0 1px var(--blu-canalotto); background: rgba(15, 76, 129, 0.06); } .vision-mission-nav ul li .nav-link.active { background: var(--blu-canalotto); color: var(--white-color); box-shadow: inset 0 0 0 1px var(--blu-canalotto); } .vision-mission-nav ul li .nav-link::before, .vision-mission-nav ul li .nav-link::after { display: none !important; content: none !important; } .vision-mission-nav ul { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* Il tema stonda i campi con un selettore piu' specifico del mio, quindi la regola generica qui sopra non arrivava al modulo dei contatti. */ .contact-form .form-control, .contact-form input, .contact-form textarea, .sidebar-search input, .newsletter-form input, .comment-form input, .comment-form textarea { border-radius: var(--angolo-piccolo); } /* Nella pagina dei consigli le schede hanno un livello in piu' (.post-item-body) che in home non c'e': senza renderlo anch'esso una colonna flessibile il pulsante restava attaccato al testo e le schede finivano scalinate. */ .post-item-body { display: flex; flex-direction: column; flex: 1 1 auto; } .post-item-body .post-item-content { flex: 1 1 auto; } /* Impaginazione: il tema li fa quadrati con border-radius: 0px esplicito */ .page-pagination ul li a, .page-pagination ul li span { border-radius: var(--angolo-piccolo); } /* Immagini grandi delle pagine di dettaglio, rimaste a spigolo vivo */ .amenities-featured-img figure, .post-featured-image figure, .project-entry-image figure, .blog-single-image figure, .amenities-single-image figure, .service-featured-img figure { border-radius: var(--angolo-medio); overflow: hidden; } /* ========================================================================== Le icone sono glifi Font Awesome, non piu' immagini Font Awesome 6.7.2 Free era gia' nel progetto (CSS + webfont) e il tema lo usa per le frecce dei sottomenu. Un glifo dentro una scatola flex sta al centro per costruzione: gli SVG del tema portavano ognuno il proprio margine interno, per questo sembravano sempre un po' storti. ========================================================================== */ .about-detail-item .icon-box i, .property-type-item .icon-box i, .features-item .icon-box i, .amenities-item .icon-box i, .experience-counter-item .icon-box i, .why-choose-list-item .icon-box i, .amenities-entry-item .icon-box i, .contact-info-item .icon-box i { font-size: 26px; line-height: 1; color: var(--blu-canalotto); transition: color 260ms ease; } .features-item:hover .icon-box i, .amenities-item:hover .icon-box i, .why-choose-list-item:hover .icon-box i, .amenities-entry-item:hover .icon-box i, .property-type-item:hover .icon-box i { color: var(--white-color); } /* La scheda contatti si scurisce tutta: qui la piastrella diventa bianca e il glifo deve restare blu, non seguire il resto del testo. */ .contact-info-item:hover .icon-box i { color: var(--blu-canalotto); } @media (max-width: 767.98px) { .about-detail-item .icon-box i, .property-type-item .icon-box i, .features-item .icon-box i, .amenities-item .icon-box i, .experience-counter-item .icon-box i, .why-choose-list-item .icon-box i, .amenities-entry-item .icon-box i, .contact-info-item .icon-box i { font-size: 22px; } } /* Telefono in testata: cerchio blu pieno, glifo bianco */ .header-contact-box .icon-box i { font-size: 14px; line-height: 1; color: var(--white-color); } /* Telefono nella sezione "chi siamo": cerchio bianco, glifo blu, che si inverte al passaggio come faceva l'immagine con il filtro. */ .about-contact-box .icon-box i { font-size: 20px; line-height: 1; color: var(--blu-canalotto); transition: color 300ms ease; } .about-contact-box:hover .icon-box i { color: var(--white-color); } /* ========================================================================== Angoli rimasti vivi Non erano una scelta: il controllo di coerenza girava su un elenco di selettori e questi non c'erano. Restano volutamente a spigolo le fasce a tutta larghezza (hero, testate, footer, mappa), dove l'angolo tondo sembrerebbe un errore di ritaglio. ========================================================================== */ /* Il pulsante freccia sulle schede camera (e sulle schede dei servizi) */ .apartment-btn a, .project-btn a, .post-btn a, .amenities-btn a { border-radius: var(--angolo-piccolo); } /* Il riquadro scuro "Hai ancora un dubbio?" e la scheda camera in colonna */ .query-box, .project-deatil-box, .sidebar-cta-box, .contact-info-item, .sidebar-widget { border-radius: var(--angolo-medio); overflow: hidden; } /* La testata blu della scheda camera deve seguire l'angolo della scatola */ .project-deatil-box h2 { border-radius: 0; } /* ========================================================================== Maiuscole all'inglese Il tema mette text-transform: capitalize su una trentina di selettori: e' una convenzione tipografica inglese, e in italiano produce "Giardino E Spazi All'aperto" o "Cucina E Lavanderia". Qui la spengo e rimetto in maiuscolo solo la prima lettera con ::first-letter, cosi' i nomi propri restano come sono scritti ("camera Nuvola" -> "Camera Nuvola") e il testo nell'HTML non va toccato. ========================================================================== */ .about-detail-content h3, .about-contact-content p, .property-content-info h2, .property-type-content h3, .property-type-content p, .features-item-content h3, .amenities-item-content h3, .why-choose-item-content h3, .why-choose-item-content p, .amenities-content h3, .amenities-entry-item-content h3, .project-title h3, .project-deatil-item h3, .project-deatil-item p, .project-entry h2, .contact-info-content h3, .amenities-catagery-list ul li, .faq-catagery-list ul li, .property-tab-nav ul li .nav-link, .vision-mission-nav ul li .nav-link { text-transform: none; } /* Rimasti fuori dal primo giro: menu ("Chi Siamo"), menu mobile, pulsante del video ("Guarda Il Video"), elenchi laterali e link sotto i servizi. Qui il testo nell'HTML ha gia' la maiuscola dove serve, oppure la mette il ::first-letter del
  • qui sotto. */ .main-menu ul li a, .slicknav_nav .slicknav_row, .slicknav_nav li a, .intro-video .intro-video-box .video-play-button a, .amenities-catagery-list ul li a, .faq-catagery-list ul li a, .amenities-entry-box-footer p a { text-transform: none; } .about-detail-content h3::first-letter, .about-contact-content p::first-letter, .property-content-info h2::first-letter, .property-type-content h3::first-letter, .property-type-content p::first-letter, .features-item-content h3::first-letter, .amenities-item-content h3::first-letter, .why-choose-item-content h3::first-letter, .why-choose-item-content p::first-letter, .amenities-content h3::first-letter, .amenities-entry-item-content h3::first-letter, .project-title h3::first-letter, .project-deatil-item h3::first-letter, .project-deatil-item p::first-letter, .project-entry h2::first-letter, .contact-info-content h3::first-letter, .amenities-catagery-list ul li::first-letter, .faq-catagery-list ul li::first-letter, .property-tab-nav ul li .nav-link::first-letter, .vision-mission-nav ul li .nav-link::first-letter { text-transform: uppercase; } /* ========================================================================== Gli ultimi angoli vivi Box in barra laterale e immagine grande: erano fuori dall'elenco di selettori su cui girava il controllo, per questo su servizi, dettaglio servizio e domande frequenti restavano quadrati mentre le altre pagine no. ========================================================================== */ .faq-catagery-list, .amenities-catagery-list, .our-experience-img, .our-experience-img figure, .amenities-single-img, .faq-single-img { border-radius: var(--angolo-medio); overflow: hidden; } /* Il pulsante del menu su mobile */ .slicknav_btn { border-radius: var(--angolo-piccolo); } /* ========================================================================== La banda di richiamo resta a spigolo vivo E' una fascia a tutta larghezza: gli angoli tondi la facevano sembrare ritagliata male sopra la sezione precedente. ========================================================================== */ .cta-box, .cta-box *, .cta-box *::before, .cta-box *::after { border-radius: 0 !important; } /* ...tranne il pulsante, che resta tondo come tutti gli altri del sito: la regola qui sopra lo aveva squadrato insieme alla banda */ .cta-box .btn-default { border-radius: var(--angolo-piccolo) !important; } /* ========================================================================== Le piastrelle sulle sezioni scure Dotazioni e dettaglio piscina stanno su fondo blu notte: li' un velo di turchese al 13% e un glifo blu Canalotto spariscono, si vedevano solo in hover. Su fondo scuro la piastrella si schiarisce e il glifo passa al turchese chiaro (7,2:1 su #0B2B45); al passaggio si invertono. ========================================================================== */ .features-item .icon-box, .amenities-entry-item .icon-box { /* il velo resta leggero per non mangiare il contrasto del glifo (5,7:1), a rendere percepibile la piastrella ci pensa il bordo (3,7:1) */ background-color: rgba(95, 218, 230, 0.18); box-shadow: inset 0 0 0 1px rgba(95, 218, 230, 0.55); } .features-item .icon-box i, .amenities-entry-item .icon-box i { color: var(--turchese-chiaro); } .features-item:hover .icon-box, .amenities-entry-item:hover .icon-box { background-color: var(--turchese-chiaro); box-shadow: inset 0 0 0 1px var(--turchese-chiaro); } .features-item:hover .icon-box i, .amenities-entry-item:hover .icon-box i { color: var(--blu-notte); } /* Nello stesso riquadro scuro, il piede era grigio su blu notte e il collegamento restava del blu del tema: 1,4:1, praticamente invisibile. */ .amenities-entry-box-footer p { color: rgba(255, 255, 255, 0.82); } .amenities-entry-box-footer p a { color: var(--turchese-chiaro); text-decoration-color: rgba(95, 218, 230, 0.5); } .amenities-entry-box-footer p a:hover { color: var(--white-color); } /* ========================================================================== L'icona nelle schede dei servizi Il tema centra il contenuto di .amenities-item con text-align: center. Rendendo la scheda una colonna flessibile — per attaccare "Continua" al fondo — text-align ha smesso di valere per la piastrella, che e' un elemento flex e non testo: restava incollata a sinistra mentre titolo e paragrafo erano al centro. Il centraggio dei figli di un flex lo fa align-self, non text-align. ========================================================================== */ .amenities-item > .icon-box { align-self: center; } /* --------------------------------------------------------------------------- Pagina 404. Pagina a se': niente intestazione, piede, caricamento. Il video del 404, il titolo e un pulsante, centrati in un solo schermo, senza scorrere. Il video prende il posto dell'illustrazione fissa: stessa resa della GIF originale, ma 2 MB invece di 10 e nitido sugli schermi ad alta densita'. Il fondo della pagina e' quello del video, misurato (#FAFAF8 circa): su bianco puro si vedeva il rettangolo del video. Chi ha attivo "riduci le animazioni" vede il fotogramma di partenza: il video lo ferma lo script in fondo a 404.html. --------------------------------------------------------------------------- */ .errore { min-height: 100vh; min-height: 100svh; background-color: #FAFAF9; } /* Il video si stringe quando lo schermo e' basso (telefono in orizzontale, portatile piccolo), cosi' titolo e pulsante restano sempre in vista. 18rem = titolo, testo, pulsante e margini; 1.78 = 16:9 del video. */ .errore__video { display: block; width: 40rem; width: clamp(12rem, (100vh - 18rem) * 1.78, 40rem); width: clamp(12rem, (100svh - 18rem) * 1.78, 40rem); max-width: 100%; height: auto; } .errore__titolo { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); } .errore__titolo span { color: var(--blu-canalotto); font-style: italic; } .errore__testo { max-width: 32rem; } /* Il pulsante del tema ha la freccia in avanti: ↗ ferma, → al passaggio. Qui si torna indietro: stessa freccia girata, ↖ ferma e ← al passaggio, con lo stesso quarto di giro. Lo spostamento resta quello del tema. */ .errore__pulsante::after { transform: translate(-18px, -50%) rotate(-90deg); } .errore__pulsante:hover::after { transform: translate(-18px, -50%) rotate(-135deg); } @media only screen and (max-width: 991px) { .errore__pulsante::after { transform: translate(-15px, -50%) rotate(-90deg); } .errore__pulsante:hover::after { transform: translate(-15px, -50%) rotate(-135deg); } } /* Entrata: lo stesso fadeInUp sfalsato che la pagina aveva con WOW.js, in CSS perche' qui le librerie del tema non si caricano. */ @keyframes errore-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .errore__video, .errore__titolo, .errore__testo, .errore__pulsante { animation: errore-entra 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both; } .errore__titolo { animation-delay: 120ms; } .errore__testo { animation-delay: 220ms; } .errore__pulsante { animation-delay: 320ms; } @media (prefers-reduced-motion: reduce) { .errore__video, .errore__titolo, .errore__testo, .errore__pulsante { animation: none; } } /* --------------------------------------------------------------------------- Pagine legali. Testo lungo da leggere, non da scorrere: misura di riga contenuta, titoli che si distinguono, tabelle che su telefono non escono dallo schermo. --------------------------------------------------------------------------- */ .page-legale { padding: 100px 0; } .testo-legale { max-width: 46rem; } .testo-legale h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 2.6rem 0 .9rem; padding-top: 1.6rem; border-top: 1px solid rgba(15, 76, 129, .14); } .testo-legale h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4rem; } .testo-legale p, .testo-legale li { line-height: 1.75; } .testo-legale ul { margin: 0 0 1.1rem 1.1rem; } .testo-legale li { margin-bottom: .45rem; } .testo-legale code { background: rgba(15, 76, 129, .08); padding: .1em .45em; border-radius: 4px; font-size: .9em; } .legale-avviso { background: rgba(15, 76, 129, .06); border-left: 3px solid #0F4C81; border-radius: 0 8px 8px 0; padding: 1rem 1.2rem; font-size: .93rem; margin-bottom: 2rem; } /* tabelle: su telefono scorrono in orizzontale invece di sfondare la pagina */ .tabella-legale { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: .9rem; } .tabella-legale th, .tabella-legale td { border-bottom: 1px solid rgba(15, 76, 129, .14); padding: .7rem .8rem; text-align: left; vertical-align: top; min-width: 8rem; } .tabella-legale thead th { border-bottom-width: 2px; white-space: nowrap; } /* un pulsante che sembra un link: riapre le preferenze sui cookie */ .btn-testo { background: none; border: 0; padding: 0; font: inherit; color: #0F4C81; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; } .btn-testo:hover { text-decoration-thickness: 2px; } @media only screen and (max-width: 767px) { .page-legale { padding: 60px 0; } } /* --------------------------------------------------------------------------- Consenso ai cookie. La barra sta in basso, arrotondata come il resto del sito, e non copre mai del tutto il contenuto. Il riquadro d'attesa prende esattamente il posto del contenuto spento, cosi' la pagina non salta quando si accende. --------------------------------------------------------------------------- */ .barra-cookie { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 1200; width: min(72rem, calc(100vw - 2.4rem)); background: #0F4C81; color: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(9, 24, 44, .38); animation: cookieEntra .45s cubic-bezier(.2, .7, .3, 1) both; } @keyframes cookieEntra { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } } .barra-cookie__inner { display: flex; align-items: center; gap: 1.4rem; padding: 1.1rem 1.4rem; } .barra-cookie__testo { margin: 0; font-size: .88rem; line-height: 1.6; } .barra-cookie__testo a { color: #fff; text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; } .barra-cookie__azioni { display: flex; gap: .7rem; flex-shrink: 0; } .btn-cookie { border: 1px solid #fff; background: #fff; color: #0F4C81; font-size: .84rem; font-weight: 600; letter-spacing: .02em; padding: .65rem 1.4rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .btn-cookie:hover { background: transparent; color: #fff; } .btn-cookie--ghost { background: transparent; color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .34); } .btn-cookie--ghost:hover { background: transparent; border-color: #fff; color: #fff; } /* --- il riquadro al posto del contenuto spento -------------------------- */ .attesa-consenso { display: grid; place-items: center; min-height: 18rem; padding: 2rem 1.5rem; background: rgba(15, 76, 129, .06); border: 1px dashed rgba(15, 76, 129, .3); border-radius: 12px; text-align: center; } .attesa-consenso__testo { max-width: 26rem; } .attesa-consenso h3 { font-size: 1.15rem; margin-bottom: .5rem; } .attesa-consenso p { font-size: .88rem; line-height: 1.65; margin-bottom: 1.2rem; } .attesa-consenso .btn-default { margin-bottom: .7rem; } .attesa-consenso__sempre { display: block; margin: 0 auto; font-size: .82rem; opacity: .8; } /* (16/10/2026) tolta «iframe[data-src] { display: none; }» del vecchio consenso: nascondeva la mappa anche dopo l'accettazione. Il riquadro di consenso.js copre l'iframe spento, non serve nasconderlo. */ @media only screen and (max-width: 767px) { .barra-cookie { bottom: .7rem; border-radius: 12px; } .barra-cookie__inner { flex-direction: column; align-items: stretch; gap: .9rem; padding: 1rem 1.1rem; } .barra-cookie__testo { font-size: .82rem; text-align: center; } .barra-cookie__azioni { justify-content: center; } .btn-cookie { flex: 1; padding: .7rem .9rem; } .attesa-consenso { min-height: 14rem; padding: 1.5rem 1rem; } } /* --------------------------------------------------------------------------- Tasto "torna su". Prende il linguaggio dell'unico pulsante che il tema ha, .btn-default: fondo pieno del colore d'accento e inversione al passaggio. Tondo perche' dentro c'e' solo una freccia. --------------------------------------------------------------------------- */ .torna-su { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-color); color: var(--white-color); font-size: .9rem; text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease, visibility .4s, background-color .5s ease-in-out, color .5s ease-in-out; } .torna-su:not(.si-vede) { pointer-events: none; } .torna-su.si-vede { opacity: 1; visibility: visible; transform: none; animation: tornaSuEntra .5s cubic-bezier(.2, .7, .3, 1) both; } @keyframes tornaSuEntra { from { opacity: 0; transform: translateY(14px) scale(.88); } to { opacity: 1; transform: none; } } /* la freccia si muove prima del cerchio, come nei pulsanti del tema */ .torna-su i { display: block; transition: transform .35s cubic-bezier(.2, .7, .3, 1); } .torna-su:hover i, .torna-su:focus-visible i { transform: translateY(-3px); } .torna-su:active { transform: scale(.93); } .torna-su:hover, .torna-su:focus-visible { background: var(--primary-color); color: var(--white-color); } .torna-su:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; } body.con-barra-cookie .torna-su { bottom: calc(24px + var(--altezza-barra-cookie, 110px)); } @media only screen and (max-width: 575px) { .torna-su { right: 16px; bottom: 16px; width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .torna-su, .torna-su.si-vede { animation: none; transition: opacity .2s ease; } .torna-su i { transition: none; } } /* Il campo trappola per i robot: fuori dalla vista, ma non display:none, perche' i robot saltano quello che e' nascosto cosi'. */ .campo-robot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== Etichette dei contatori sopra la foto della sezione video ("Metri quadri", "Ospiti", "Camere", "Piscina"). Il tema le colora di accento: nato arancione, dopo il cambio di palette era blu su foto scura e non si leggeva. Stesso turchese chiaro dei titoli sulle sezioni scure. ========================================================================== */ .intro-video-counter-item h3 { color: var(--turchese-chiaro); } /* ========================================================================== Bootstrap Studio: le
    come componente Figure L'importer riconosce una
    solo se ha la classe .figure di Bootstrap: senza, ogni foto del sito arriva come blocco Custom Code e non si puo' cambiare dal pannello (verificato con un import reale in BSS 8.0.1: 83 blocchi sul sito italiano). Con la classe diventa Figure + Image, modificabile. Bootstrap pero' da' a .figure display:inline-block, e l'app aggiunge da sola .figure-img alle immagini dentro una Figure, con un margine sotto: qui li riporto al comportamento della
    del tema. ========================================================================== */ .figure { display: block; } .figure > .figure-img { margin-bottom: 0; } /* La citazione di spiagge-realmonte.html: figure.figure > blockquote.blockquote e' la forma che l'importer riconosce come componente Blockquote (un
    da solo diventa Custom Code). Il margine lo tiene gia' il blockquote del tema, la figure non ne aggiunge. */ .citazione { margin: 0; } /* ========================================================================== Home: modulo di prenotazione Holidu dentro l'hero Stesso riquadro di prenota.html (.prenota-holidu), in versione compatta. A questa larghezza il modulo intero e' alto circa 1200px: qui se ne mostrano 520 (400 sugli schermi bassi), cioe' la ricerca (arrivo, partenza, ospiti, "Verifica disponibilita'") e l'inizio della scheda con la foto; il resto si scorre dentro il riquadro, oppure si apre a tutta pagina dal link sotto. Il pulsante flottante "Mappa" di Holidu sta sempre in fondo al LORO riquadro visibile, e non c'e' nessun parametro per toglierlo (verificato nel codice del widget il 23/09/2026). Con l'iframe basso 520px finiva sopra la foto. Per questo qui l'iframe e' alto quanto il suo contenuto (l'altezza la manda Holidu col messaggio 'resize', la applica villa.js) e a scorrere e' la nostra .prenota-holidu__finestra: il pulsante resta cosi' in fondo al modulo, sopra il loro pie' di pagina, come sul sito Holidu. ========================================================================== */ .hero--prenota { padding: 170px 0 110px; } .prenota-holidu--hero { position: relative; z-index: 2; box-shadow: 0 18px 50px rgba(11, 43, 69, 0.35); } .prenota-holidu__finestra { height: 520px; overflow-y: auto; /* la barra di scorrimento prendeva spazio solo a destra e spostava il modulo: e' nascosta, il riquadro scorre lo stesso (rotella, dito) */ scrollbar-width: none; } .prenota-holidu__finestra::-webkit-scrollbar { display: none; } /* Altezza di riserva finche' non arriva quella vera da Holidu: abbastanza alta da tenere il pulsante "Mappa" lontano dalla foto anche se il messaggio tardasse. */ .prenota-holidu--hero iframe { height: 1200px; } /* Testata del riquadro: qui fa da titolo, "Prenota la villa" deve vedersi */ .prenota-holidu--hero .prenota-holidu__testata { flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 1rem 1.25rem; } .prenota-holidu__titolo { font-family: var(--display-font); font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--blu-notte); } /* Con la colonna piu' stretta il titolo andava a capo spezzando "non / una stanza": la parte evidenziata resta su una riga sola. */ @media (min-width: 992px) { .hero--prenota .hero-content .section-title h1 span { white-space: nowrap; } } @media (min-width: 992px) and (max-width: 1199.98px) { .hero--prenota .hero-content .section-title h1 { font-size: 64px; } } /* Portatili con schermo basso (1366x768): il riquadro resta nella prima schermata, link "tutta pagina" compreso. */ @media (min-width: 992px) and (max-height: 820px) { .hero--prenota { padding: 150px 0 80px; } .prenota-holidu__finestra { height: 400px; } } .prenota-holidu__completa { display: block; padding: 0.75rem 1rem; border-top: 1px solid var(--pietra-chiara); background: var(--bianco-calce); color: var(--blu-canalotto); font-size: 0.875rem; font-weight: 600; text-align: center; transition: color 200ms ease; } .prenota-holidu__completa:hover, .prenota-holidu__completa:focus { color: var(--blu-canalotto-scuro); text-decoration: underline; } @media (max-width: 991.98px) { .hero--prenota { padding: 170px 0 110px; } .prenota-holidu--hero { margin-top: 30px; } .prenota-holidu__finestra { height: 480px; } } /* ========================================================================== Cambio camera nelle schede (Nuvola, Arcobaleno, Sole, Stella) Bootstrap cambia scheda con una dissolvenza di 150ms: sembra un salto. Come nello slider delle recensioni, la pianta entra di lato e poi titolo, testo e dati salgono uno dopo l'altro. Si anima la
    e non il suo contenitore, cosi' la macchia di sfondo dietro la pianta resta ferma. Solo opacity e transform; con "riduci movimento" attivo le azzera la regola generale in cima al file. ========================================================================== */ @keyframes camera-entra-lato { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } } @keyframes camera-entra-su { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .property-tab-item.active .property-tab-image figure { animation: camera-entra-lato 650ms cubic-bezier(0.2, 0.7, 0.3, 1) both; } .property-tab-item.active .property-content-info { animation: camera-entra-su 550ms cubic-bezier(0.2, 0.7, 0.3, 1) 100ms both; } .property-tab-item.active .property-type-item { animation: camera-entra-su 500ms cubic-bezier(0.2, 0.7, 0.3, 1) both; } .property-tab-item.active .property-type-item:nth-child(1) { animation-delay: 200ms; } .property-tab-item.active .property-type-item:nth-child(2) { animation-delay: 270ms; } .property-tab-item.active .property-type-item:nth-child(3) { animation-delay: 340ms; } .property-tab-item.active .property-type-item:nth-child(4) { animation-delay: 410ms; } /* ========================================================================== Piede di pagina Prima era tutto centrato e ogni recapito compariva due volte (l'e-mail a 44 px, poi di nuovo come icona tonda; l'indirizzo sopra e poi nel copyright). Ora ogni cosa c'e' una volta sola, in quattro colonne che su telefono si impilano allineate a sinistra, dove l'occhio le scorre: dove siamo, come contattarci, le pagine, e in fondo i dati di legge. L'unico elemento in rilievo e' il pulsante WhatsApp, perche' e' da li' che arrivano davvero le richieste. ========================================================================== */ .main-footer { padding: clamp(3.5rem, 7vw, 6rem) 0 0; color: rgba(255, 255, 255, .78); font-size: 1rem; } /* --- Dove siamo ---------------------------------------------------------- */ .footer-marchio { margin-bottom: 1.5rem; } .footer-marchio img { height: 92px; width: auto; } .footer-indirizzo { font-style: normal; margin-bottom: .75rem; } /* l'indirizzo e' l'unica riga in Fraunces: e' la cosa che il footer di una casa vacanze deve dire prima di tutte le altre */ .footer-via { display: block; font-family: var(--display-font); font-variation-settings: "SOFT" 20, "WONK" 0; font-size: clamp(1.3rem, 2.2vw, 1.55rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--white-color); } .footer-citta { display: block; margin-top: .3rem; line-height: 1.5; } .footer-freccia { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; color: var(--turchese-chiaro); text-decoration: none; transition: color .3s ease-in-out; } .footer-freccia i { font-size: .8em; transition: transform .3s ease-in-out; } .footer-freccia:hover, .footer-freccia:focus-visible { color: var(--white-color); } .footer-freccia:hover i, .footer-freccia:focus-visible i { transform: translateX(4px); } /* --- Titoli di colonna: lo stesso occhiello delle sezioni del sito ------- */ .main-footer .footer-titolo { font-family: var(--default-font); font-variation-settings: normal; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--turchese-chiaro); margin-bottom: 1.1rem; } /* --- Contatti ------------------------------------------------------------ */ .btn-whatsapp { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .8rem; --bs-btn-font-weight: 600; --bs-btn-font-size: 1rem; --bs-btn-color: var(--blu-notte); --bs-btn-bg: var(--white-color); --bs-btn-border-color: var(--white-color); --bs-btn-hover-color: var(--blu-notte); --bs-btn-hover-bg: var(--turchese-chiaro); --bs-btn-hover-border-color: var(--turchese-chiaro); --bs-btn-active-color: var(--blu-notte); --bs-btn-active-bg: var(--turchese-chiaro); --bs-btn-active-border-color: var(--turchese-chiaro); --bs-btn-focus-box-shadow: none; /* il focus lo disegna l'outline comune del footer */ --bs-btn-border-radius: var(--angolo-piccolo); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.25rem; transition: background-color .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out; } .btn-whatsapp i { font-size: 1.3em; } .footer-recapiti { margin: 0; } .footer-recapiti a { display: inline-flex; align-items: baseline; gap: .75rem; padding: .45rem 0; color: rgba(255, 255, 255, .9); text-decoration: none; transition: color .3s ease-in-out; } .footer-recapiti i { flex: 0 0 1.1rem; text-align: center; font-size: .9rem; color: var(--turchese-chiaro); } /* l'e-mail e' lunga 31 caratteri: se non ci sta, va a capo invece di uscire dallo schermo */ .footer-recapiti span { min-width: 0; overflow-wrap: anywhere; } .footer-recapiti a:hover, .footer-recapiti a:focus-visible, .footer-menu a:hover, .footer-menu a:focus-visible { color: var(--turchese-chiaro); } /* --- Pagine -------------------------------------------------------------- */ .footer-menu { margin: 0; } .footer-menu a { display: inline-block; padding: .45rem 0; color: rgba(255, 255, 255, .9); text-decoration: none; transition: color .3s ease-in-out; } /* il tema toglie l'outline a tutti i link (a:focus { outline: 0 }): qui, per chi naviga da tastiera, il punto in cui si trova torna visibile */ .main-footer a:focus-visible { outline: 2px solid var(--turchese-chiaro); outline-offset: 3px; border-radius: 2px; } /* --- Fondo: dati di legge e firma --------------------------------------- */ .footer-fondo { margin-top: clamp(3rem, 6vw, 4.5rem); padding: 1.75rem 0 2rem; border-top: 1px solid var(--dark-divider-color); font-size: .875rem; line-height: 1.6; color: rgba(255, 255, 255, .66); } .footer-fondo p { margin: 0; } .footer-legale { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: .2rem; } /* CIN e CIR non si spezzano mai a meta': al massimo vanno a capo interi */ .footer-codici { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: .2rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .footer-codici span { white-space: nowrap; } /* la firma sta sotto i dati di legge, un gradino piu' piccola; tutto il fondo e' allineato a sinistra, cosi' l'angolo in basso a destra resta libero per il tasto "torna su" */ .footer-fondo .footer-firma { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: .2rem; margin-top: .6rem; font-size: .8125rem; } .footer-firma-recapiti { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: .2rem; } .footer-firma a { color: rgba(255, 255, 255, .85); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: .2em; overflow-wrap: anywhere; transition: color .3s ease-in-out, text-decoration-color .3s ease-in-out; } .footer-firma a:hover, .footer-firma a:focus-visible { color: var(--white-color); text-decoration-color: currentColor; } @media (max-width: 991.98px) { .footer-marchio img { height: 76px; } } @media (max-width: 575.98px) { /* il pulsante prende tutta la riga: e' l'azione da fare col pollice */ .btn-whatsapp { width: 100%; } /* spazio per il tasto "torna su", che su telefono sta sopra l'ultima riga */ .footer-fondo { padding-bottom: 4.5rem; } } @media (max-width: 359.98px) { /* sui telefoni piu' stretti l'e-mail ci sta intera solo un punto sotto */ .footer-recapiti { font-size: .9375rem; } } /* ========================================================================== Schede camera in home La freccia era un'icona blu scuro con bordo blu, appoggiata sulla foto: sul fondo scuro dell'immagine quasi spariva. Ora sta su un disco chiaro, e al passaggio si inverte (fondo blu, freccia bianca) come prima. Sui dispositivi touch il passaggio del mouse non esiste: la freccia si vede sempre, altrimenti compariva solo dopo il primo tocco. ========================================================================== */ .apartment-btn a { background: rgba(255, 255, 255, .92); border-color: transparent; box-shadow: 0 2px 10px rgba(11, 43, 69, .25); } .apartment-btn a:hover, .apartment-btn a:focus-visible { background: var(--accent-color); } @media (hover: none) { .apartment-btn { opacity: 1; visibility: visible; top: 30px; } } /* Su telefono due schede per fila: testo e freccia si stringono */ @media (max-width: 767.98px) { /* il tema fissa 15 px di margine su ogni colonna (.row > *), cosi' le classi gx-* di Bootstrap non fanno effetto: lo spazio si stringe qui */ .camere-griglia { margin-right: -8px; margin-left: -8px; } .camere-griglia > * { padding-right: 8px; padding-left: 8px; } .apartment-item { height: calc(100% - 16px); margin-bottom: 16px; } .apartments-content { right: 12px; bottom: 14px; left: 14px; } .apartments-content h3 { font-size: 15px; line-height: 1.25; } .apartment-btn, .apartment-item:hover .apartment-btn { top: 12px; right: 12px; } .apartment-btn a { width: 34px; height: 34px; } .apartment-btn img { max-width: 12px; } } /* ========================================================================== Home: foto dell'hero a rotazione Carousel di Bootstrap in dissolvenza, usato come sfondo: e' un componente nativo di Bootstrap Studio, quindi foto, intervallo e pausa si cambiano dal pannello Options. Ogni foto resta 6 secondi e mentre e' in scena si avvicina appena (8%), cosi' anche la foto ferma ha un po' di vita. Le foto sono in assets/img/hero/: per cambiarle basta sovrascrivere i file. La velatura blu dell'hero (.hero::before) resta sopra le foto: il titolo si legge su qualunque immagine. ========================================================================== */ .hero--foto { background: var(--blu-notte); isolation: isolate; /* il carosello puo' stare a z-index -1 senza sparire dietro il fondo */ } .hero-foto { position: absolute; inset: 0; z-index: -1; } .hero-foto .carousel-inner, .hero-foto .carousel-item { height: 100%; } .hero-foto__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Dissolvenza lenta. Bootstrap fa sparire la foto uscente dopo 0,6 s: con una dissolvenza piu' lunga si vedrebbe il fondo blu fra una foto e l'altra, quindi anche quel tempo va allineato. */ .hero-foto.carousel-fade .carousel-item { transition-duration: 1.6s; } .hero-foto.carousel-fade .active.carousel-item-start, .hero-foto.carousel-fade .active.carousel-item-end { transition: opacity 0s 1.6s; } @keyframes hero-foto-avvicina { from { transform: scale(1); } to { transform: scale(1.08); } } .hero-foto .carousel-item.active .hero-foto__img { animation: hero-foto-avvicina 9s ease-out forwards; } /* ========================================================================== Home: il video dell'hero Un