`: assicura che #page non “restringa” il blocco hero rispetto al viewport. */ body.notedicolore-luxury.page-template-individual-home-custom-template #page.site { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } body.notedicolore-luxury:not(.overflow-hidden) main.site-main { overflow: visible !important; max-height: none !important; } /* Tema global_styles: #hero-vid usa 100vw — larghezza “logica” senza gutter scrollbar (variabili da head.php). */ body.notedicolore-luxury #hero-img img, body.notedicolore-luxury #hero-vid { width: var(--notedicolore-100vw, 100%) !important; max-width: var(--notedicolore-100vw, 100%) !important; height: var(--notedicolore-100vh, 100vh) !important; max-height: var(--notedicolore-100vh, 100vh) !important; box-sizing: border-box; } @media (max-width: 767px) { body.notedicolore-luxury #hero-img img, body.notedicolore-luxury #hero-vid { height: calc(var(--notedicolore-100vh, 100vh) - 35px) !important; max-height: calc(var(--notedicolore-100vh, 100vh) - 35px) !important; } } body.notedicolore-luxury { box-sizing: border-box; min-height: 100%; width: 100%; max-width: 100%; /* * Parete sabbiata: (1) puntinatura CSS sempre visibile; (2) rumore SVG più grossolano (niente blend-mode sul colore, * perché soft-light + SVG filtrato spesso risulta invisibile in Chrome/Safari). */ --notedicolore-luxury-wall-speckle-a: radial-gradient( circle closest-side, rgba(48, 44, 40, 0.045) 0.45px, transparent 1.05px ); --notedicolore-luxury-wall-speckle-b: radial-gradient( circle closest-side, rgba(48, 44, 40, 0.028) 0.35px, transparent 0.9px ); --notedicolore-luxury-wall-noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); /* * Titoli: Aptos dove installato (Office/Windows recenti). Non è distribuibile come webfont: * fallback web Source Sans 3 (stesso designer dei caratteri Microsoft Office, leggibile come Aptos). */ --notedicolore-display-font: "Aptos", "Aptos Display", "Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--notedicolore-luxury-ink, #363636) !important; } /* Classe display del tema + h1–h3 (sans Aptos / Source Sans 3 al posto di Vanitas) */ body.notedicolore-luxury h1, body.notedicolore-luxury h2, body.notedicolore-luxury h3, body.notedicolore-luxury .display-1, body.notedicolore-luxury .display-1-72, body.notedicolore-luxury .display-2-48, body.notedicolore-luxury .display-3-40, body.notedicolore-luxury .display-4-32, body.notedicolore-luxury .amenities-title-box .display-2-48, body.notedicolore-luxury .amenities-title-box h2 { font-family: var(--notedicolore-display-font) !important; font-weight: 700 !important; font-optical-sizing: auto; } body.notedicolore-luxury, body.notedicolore-luxury #page, body.notedicolore-luxury .site, body.notedicolore-luxury .site-main, body.notedicolore-luxury .site-main > section, body.notedicolore-luxury .site-main > div, body.notedicolore-luxury .site-main .container, body.notedicolore-luxury .site-main .container-fluid, body.notedicolore-luxury .site-main .row, body.notedicolore-luxury .site-main [class*="col-"], body.notedicolore-luxury .wp-block-group.white-bg, body.notedicolore-luxury .wp-block-group.white-bg .wp-block-group__inner-container, body.notedicolore-luxury .amenities-title-box, body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapsing, body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapse.show { background-color: var(--notedicolore-luxury-page-bg, #f8f6f2) !important; background-image: var(--notedicolore-luxury-wall-speckle-a), var(--notedicolore-luxury-wall-speckle-b), var(--notedicolore-luxury-wall-noise-image) !important; background-size: 7px 8px, 6px 7px, 280px 280px !important; background-position: 0 0, 2.5px 1.5px, 0 0 !important; background-repeat: repeat, repeat, repeat !important; } body.notedicolore-luxury, body.notedicolore-luxury p, body.notedicolore-luxury li, body.notedicolore-luxury span, body.notedicolore-luxury a, body.notedicolore-luxury button, body.notedicolore-luxury input, body.notedicolore-luxury textarea, body.notedicolore-luxury select { font-family: "Manrope", "FreightSansProBook", ui-sans-serif, system-ui, "Segoe UI", sans-serif !important; font-weight: 300; letter-spacing: 0.01em; } body.notedicolore-luxury .nav-link, body.notedicolore-luxury .btn, body.notedicolore-luxury .primary-btn, body.notedicolore-luxury .secondary-btn, body.notedicolore-luxury strong, body.notedicolore-luxury b { font-weight: 450 !important; letter-spacing: 0.015em; } body.notedicolore-luxury .site-main h1, body.notedicolore-luxury .site-main h2, body.notedicolore-luxury .site-main h3, body.notedicolore-luxury .site-main h4, body.notedicolore-luxury .site-main h5, body.notedicolore-luxury .site-main p, body.notedicolore-luxury .site-main li, body.notedicolore-luxury .site-main span, body.notedicolore-luxury .site-main a { color: var(--notedicolore-luxury-ink, #363636) !important; } body.notedicolore-luxury h2 { text-shadow: none !important; } body.notedicolore-luxury input::placeholder, body.notedicolore-luxury textarea::placeholder { color: rgba(37, 40, 45, 0.5) !important; opacity: 1; } body.notedicolore-luxury #events .whitetext { color: #ffffff !important; } body.notedicolore-luxury .amenities-title-box { border: none !important; border-bottom: none !important; box-shadow: none !important; } body.notedicolore-luxury #nav-main, body.notedicolore-luxury nav.global-navbar, body.notedicolore-luxury nav.global-navbar.internal-nav, body.notedicolore-luxury .individual-home-navbar { background-color: transparent !important; background-image: none !important; } body.notedicolore-luxury #nav-main.darkHeader, body.notedicolore-luxury nav.global-navbar.darkHeader, body.notedicolore-luxury nav.global-navbar.internal-nav.darkHeader { background-color: var(--notedicolore-luxury-page-bg, #f8f6f2) !important; background-image: var(--notedicolore-luxury-wall-speckle-a), var(--notedicolore-luxury-wall-speckle-b), var(--notedicolore-luxury-wall-noise-image) !important; background-size: 7px 8px, 6px 7px, 280px 280px !important; background-position: 0 0, 2.5px 1.5px, 0 0 !important; background-repeat: repeat, repeat, repeat !important; } /* Bianco solo sulla barra (hamburger): le .nav-link stanno nel collapse e usano antracite sotto */ body.notedicolore-luxury #nav-main .notedicolore-navbar-shell .toggler-icon-animated i { color: #ffffff !important; } body.notedicolore-luxury #nav-main #black_logo { display: none !important; } body.notedicolore-luxury #nav-main #white_logo { display: block !important; } /* Scroll: header bianco + controlli antracite */ body.notedicolore-luxury #nav-main.scrolled-nav { background-color: var(--notedicolore-luxury-page-bg, #f8f6f2) !important; background-image: var(--notedicolore-luxury-wall-speckle-a), var(--notedicolore-luxury-wall-speckle-b), var(--notedicolore-luxury-wall-noise-image) !important; background-size: 7px 8px, 6px 7px, 280px 280px !important; background-position: 0 0, 2.5px 1.5px, 0 0 !important; background-repeat: repeat, repeat, repeat !important; } body.notedicolore-luxury #nav-main.scrolled-nav .wpml-ls-legacy-dropdown-click a, body.notedicolore-luxury #nav-main.scrolled-nav .dropdown-toggle, body.notedicolore-luxury #nav-main.scrolled-nav .notedicolore-navbar-shell .toggler-icon-animated i { color: var(--notedicolore-luxury-ink, #363636) !important; } body.notedicolore-luxury #nav-main.scrolled-nav #black_logo { display: block !important; } body.notedicolore-luxury .home-prenota-btn { border-radius: 0 !important; border: 1px solid #e3cba5 !important; background: #3c3e21 !important; color: #e3cba5 !important; transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease; } body.notedicolore-luxury .home-prenota-btn:hover, body.notedicolore-luxury .home-prenota-btn:focus-visible { background: #e3cba5 !important; color: #1f1f1f !important; border-color: #3c3e21 !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16); } body.notedicolore-luxury .home-prenota-btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14); } body.notedicolore-luxury #nav-main.scrolled-nav #white_logo { display: none !important; } /* Menu primario ridotto (4 voci): evita min-width del tema su .static-area */ @media (min-width: 1200px) and (max-width: 1350px) { body.notedicolore-luxury .more-dropdown-navbar .static-area.notedicolore-primary-nav { min-width: 0 !important; } } /* * Navbar notedicolore luxury: menu solo tramite overlay (hamburger sempre visibile). * Overlay a schermo intero, sfondo da LUXURY_PAGE_BACKGROUND_HEX, testo da LUXURY_ANTHRACITE_HEX. */ body.notedicolore-luxury #nav-main.notedicolore-navbar-overlay-mode { /* Sopra #masthead (1040): il nav è sibling del masthead, non più figlio. */ z-index: 1060 !important; } /* * Halos: in home/contatti/servizi era spesso z-index:2 mentre #page vale 1 → il layer fisso copreva * tutto il sito (anche l’header position:fixed). Restano dietro al contenuto. */ body.notedicolore-luxury .bg-halos-home { z-index: 0 !important; max-width: 100%; contain: paint; } /* * Masthead fuori da #page: deve stare sopra a tutto il contenuto del sito (hero full-screen, widget, ecc.). * Con hero `min-height: 100vh` alcuni browser compositano il blocco homepage sopra il masthead se questo non * sta in uno stacking layer abbastanza alto (#nav è fixed → il masthead può avere altezza 0 nel flusso). * Resta sotto alle modali Bootstrap (1055+) e ai banner cookie (~1200). */ body.notedicolore-luxury #masthead.site-header { position: relative; z-index: 1040; overflow: visible !important; } /* Wrapper hero tema (individual home): sempre nel layer contenuto sotto header. */ body.notedicolore-luxury .fullscreen-hero-banner-booking-widget { position: relative; z-index: 0; } /* * Masthead: `top: 0` fisso. Non usare `visualViewport.offsetTop` qui: su `vv-scroll` (Chrome mobile) quel valore * sale anche senza scroll della pagina e spinge la barra fuori vista. L’ancoraggio al bordo destro del visual * viewport resta solo sul toggler (`--notedicolore-visual-right-edge` da head.php). */ body.notedicolore-luxury #nav-main.navbar.fixed-top { position: fixed !important; top: 0 !important; bottom: auto !important; left: 0 !important; right: 0 !important; margin-top: 0 !important; transform: none !important; /* `width:100%` del contenuto vs viewport con scrollbar: left+right+width:auto segue il blocco di layout fisso. */ width: auto !important; max-width: 100% !important; /* Sopra #masthead (1040) e #page (0); sotto cookie/modali (~1200 / 1055). */ z-index: 1060 !important; box-sizing: border-box; } /* * Barra chiusa: altezza rigida in px (no clamp su --notedicolore-1vw dall’inline header.php). * Menu aperto: eccezione sotto (.menu-open → height auto). */ @media (min-width: 768px) { body.notedicolore-luxury #nav-main.navbar.fixed-top:not(.menu-open) { height: 100px !important; min-height: 100px !important; max-height: 100px !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.notedicolore-luxury #nav-main.navbar.fixed-top:not(.menu-open) .notedicolore-navbar-shell { height: 100px !important; min-height: 100px !important; max-height: 100px !important; align-items: center !important; } body.notedicolore-luxury #nav-main.navbar.fixed-top:not(.menu-open) .navbar-brand .logo { max-height: 56px !important; width: auto !important; object-fit: contain; } } @media (max-width: 767.98px) { body.notedicolore-luxury #nav-main.navbar.fixed-top:not(.menu-open) { height: 82px !important; min-height: 82px !important; max-height: 82px !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.notedicolore-luxury #nav-main.navbar.fixed-top:not(.menu-open) .notedicolore-navbar-shell { height: 82px !important; min-height: 82px !important; max-height: 82px !important; align-items: center !important; } body.notedicolore-luxury #nav-main.navbar.fixed-top:not(.menu-open) .navbar-brand .logo { max-height: 44px !important; width: auto !important; object-fit: contain; } } /* * Tema (navbar.css, navbar-individual-hotels.css): `width: 100vw` su menu / linee → +15–17px vs clientWidth quando c’è scrollbar verticale. * Qui il contenitore è già a tutta larghezza utile: 100% evita la seconda barra orizzontale. */ body.notedicolore-luxury #nav-main .navbar .dropdown-menu, body.notedicolore-luxury #nav-main .login.dropdown-menu.dropdown-menu-center, body.notedicolore-luxury [id^="menu-item-"] #hotelList__dropdown, body.notedicolore-luxury .header-bottom-line.menus-open, body.notedicolore-luxury .header-bottom-line-IBU.menus-open, body.notedicolore-luxury .global-home-link-dropdown-box .dropdown-menu.show { width: var(--notedicolore-100vw, 100%) !important; max-width: var(--notedicolore-100vw, 100%) !important; box-sizing: border-box; } /* theme_body.css — breakout .width-100 con 100vw + margin negativo */ body.notedicolore-luxury .width-100 { width: var(--notedicolore-100vw, 100%) !important; max-width: var(--notedicolore-100vw, 100%) !important; margin-left: 0 !important; left: auto !important; } body.notedicolore-luxury .notedicolore-navbar-shell { /* * Distanza fissa dai bordi (non clamp in vw): stesso inset su ogni breakpoint + notch iOS. * Il JS in head.php aggiorna solo le variabili viewport; questo resta costante in px. */ --notedicolore-menu-control-edge: 16px; --notedicolore-menu-control-top: calc(var(--notedicolore-menu-control-edge) + env(safe-area-inset-top, 0px)); --notedicolore-menu-control-right: calc(var(--notedicolore-menu-control-edge) + env(safe-area-inset-right, 0px)); --notedicolore-menu-control-size: 52px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; } body.notedicolore-luxury .notedicolore-navbar-shell .notedicolore-nav-toggler { display: flex !important; align-items: center; justify-content: center; position: fixed; top: var(--notedicolore-menu-control-top); /* * Ancora al bordo destro del *visual viewport* (--notedicolore-visual-right-edge da head.php), non con right+gap su * innerWidth (instabile con scale/subpixel). Fallback: 100vw prima che giri il JS. */ right: auto !important; left: calc( var(--notedicolore-visual-right-edge, 100vw) - var(--notedicolore-menu-control-size) - var(--notedicolore-menu-control-edge) - env(safe-area-inset-right, 0px) ); /* Sopra hero/contenuto; con menu aperto si abbassa sotto la X (stesso inset). */ z-index: 1035; margin: 0 !important; padding: 0 !important; width: var(--notedicolore-menu-control-size); height: var(--notedicolore-menu-control-size); min-width: var(--notedicolore-menu-control-size); min-height: var(--notedicolore-menu-control-size); line-height: 1; border-radius: 0; box-shadow: none !important; background: transparent !important; color: var(--notedicolore-luxury-ink, #363636) !important; } body.notedicolore-luxury .notedicolore-navbar-shell .notedicolore-nav-toggler .toggler-icon-animated { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } body.notedicolore-luxury .notedicolore-navbar-shell .notedicolore-nav-toggler .toggler-icon-animated .fa-bars { font-size: var( --notedicolore-menu-icon-size, clamp(1.55rem, calc(1.1 * var(--notedicolore-1vw, 1vw) + 1rem), 2rem) ) !important; font-weight: 300; line-height: 1 !important; display: inline-block; } @media (max-width: 767.98px) { body.notedicolore-luxury .notedicolore-navbar-shell .notedicolore-nav-toggler .toggler-icon-animated .fa-bars { font-size: var(--notedicolore-menu-icon-size-mobile, 1.7rem) !important; } } /* * Un solo â€œapriâ€ (hamburger) e un solo â€œchiudiâ€ (Ã— nellâ€™overlay). * Il tema mostra fa-times nel toggler quando .menu-open â†’ X duplicata sopra lâ€™overlay in chiusura. */ body.notedicolore-luxury #nav-main .toggler-icon-animated .fa-times { display: none !important; } /* Tema: #bootscore-navbar-collapsedd { display:flex } da 1198px â€” senza overlay chiuso */ body.notedicolore-luxury .custom-navbar-page #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapse:not(.show):not(.collapsing) { display: none !important; } /* overflow-y solo con menu aperto: altrimenti concorre al doppio scroll con body */ body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapse.show, body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapsing { max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* Macchie colore organiche (generate in JS) dietro al contenuto del menu */ body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel .notedicolore-menu-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel .notedicolore-menu-blob { position: absolute; box-sizing: border-box; pointer-events: none; transform-origin: center center; } body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel .notedicolore-menu-blob-svg { display: block; width: 100%; height: 100%; overflow: visible; } /* * Fase Bootstrap .collapsing (prima di .show in apertura): senza questo il pannello * resta opacitÃ 1 per un frame e poi parte lâ€™animazione â†’ effetto â€œcompare e poi si muoveâ€. */ body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapsing:not(.show) { opacity: 0 !important; transform: translateY(1.1rem); } body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapsing { position: fixed !important; inset: 0 !important; z-index: 999 !important; width: 100% !important; min-height: var(--notedicolore-100vh, 100dvh) !important; display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; transition: none !important; } body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapse.show { position: fixed !important; inset: 0 !important; z-index: 999 !important; width: 100% !important; min-height: var(--notedicolore-100vh, 100dvh) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; height: auto !important; } body.notedicolore-luxury .notedicolore-nav-overlay-inner { position: relative; z-index: 1; flex: 1 0 auto; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 42rem; margin-inline: auto; padding: clamp(5.5rem, 14vh, 9rem) 1.5rem 2.5rem; box-sizing: border-box; } /* Apertura rapida: mantiene la transizione ma riduce il tempo percepito */ body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapse.show:not(.notedicolore-overlay-exit) { animation: notedicoloreOverlayPanelIn 0.18s ease-out both; } /* Chiusura: ease-out sullâ€™intero overlay */ body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.notedicolore-overlay-exit { animation: notedicoloreOverlayPanelOut 0.4s ease-out forwards !important; } @keyframes notedicoloreOverlayPanelIn { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: translateY(0); } } @keyframes notedicoloreOverlayPanelOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-0.65rem); } } @media (prefers-reduced-motion: reduce) { body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.collapse.show:not(.notedicolore-overlay-exit), body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.notedicolore-overlay-exit { animation: none !important; transform: none !important; will-change: auto; } body.notedicolore-luxury #bootscore-navbar-collapsedd.notedicolore-navbar-overlay-panel.notedicolore-overlay-exit { opacity: 0; } } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-nav-list.navbar-nav { flex-direction: column !important; width: 100%; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-nav-list .nav-item { width: 100%; } /* Due ID (#nav-main + #bootscore…) battono #nav-main .nav-link del tema / vecchie regole */ body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-nav-list .nav-link { font-size: clamp(2rem, calc(7.5 * var(--notedicolore-1vw, 1vw)), 4.25rem) !important; line-height: 1.12 !important; font-weight: 300 !important; letter-spacing: 0.06em !important; padding: 0.28em 1rem !important; text-decoration: none !important; border: none !important; text-transform: uppercase !important; color: var(--notedicolore-luxury-ink, #363636) !important; text-shadow: none; transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-nav-list .nav-link:hover, body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-nav-list .nav-link:focus { color: var(--notedicolore-luxury-ink, #363636) !important; opacity: 0.82; text-shadow: none; transform: scale(1.02); outline: none; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-nav-list .nav-link.notedicolore-nav-link-booking { color: var(--notedicolore-luxury-ink, #363636) !important; text-shadow: none; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-nav-list .nav-link.notedicolore-nav-link-booking:hover, body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-nav-list .nav-link.notedicolore-nav-link-booking:focus { color: var(--notedicolore-luxury-ink, #363636) !important; opacity: 0.82; text-shadow: none; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-nav-overlay-lang .nav-link, body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-lang-link { font-size: clamp(1.25rem, calc(4 * var(--notedicolore-1vw, 1vw)), 2rem) !important; letter-spacing: 0.35em !important; font-weight: 400 !important; padding: 0.75rem 1rem !important; text-transform: uppercase !important; color: var(--notedicolore-luxury-ink, #363636) !important; text-shadow: none; transition: opacity 0.35s ease, color 0.35s ease; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-nav-overlay-lang .nav-link:hover, body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-nav-overlay-lang .nav-link:focus, body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-lang-link:hover, body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-lang-link:focus { color: var(--notedicolore-luxury-ink, #363636) !important; opacity: 0.82; outline: none; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-close { position: fixed; top: var(--notedicolore-menu-control-top); right: var(--notedicolore-menu-control-right); z-index: 1042; width: var(--notedicolore-menu-control-size); min-width: var(--notedicolore-menu-control-size); height: var(--notedicolore-menu-control-size); min-height: var(--notedicolore-menu-control-size); padding: 0; margin: 0; border: none; border-radius: 0; background: transparent !important; color: var(--notedicolore-luxury-ink, #363636) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: opacity 0.35s ease-out, transform 0.3s ease-out; box-shadow: none !important; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-close:hover, body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-close:focus { opacity: 0.88; transform: scale(1.06); outline: none; } body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-close-x { font-size: calc( var( --notedicolore-menu-icon-size, clamp(1.55rem, calc(1.1 * var(--notedicolore-1vw, 1vw) + 1rem), 2rem) ) * 1.12 ); font-weight: 300; line-height: 1; text-shadow: none; display: inline-block; } @media (max-width: 767.98px) { body.notedicolore-luxury #nav-main #bootscore-navbar-collapsedd .notedicolore-overlay-close-x { font-size: calc(var(--notedicolore-menu-icon-size-mobile, 1.7rem) * 1.12); } } body.notedicolore-luxury #nav-main.menu-open, body.notedicolore-luxury #nav-main.individual-home-navbar { height: auto !important; max-height: none !important; overflow: visible !important; background-color: #ffffff !important; background-image: none !important; } /* Non impostare color su #nav-main.menu-open: eredita sul collapse e rimette tutto bianco */ body.notedicolore-luxury #nav-main.menu-open .notedicolore-navbar-shell .toggler-icon-animated i { color: var(--notedicolore-luxury-ink, #363636) !important; } /* Menu aperto: stessa cella in alto a destra per la X; l’hamburger non deve coprire la chiusura */ body.notedicolore-luxury #nav-main.menu-open .notedicolore-navbar-shell .notedicolore-nav-toggler { visibility: hidden; pointer-events: none; opacity: 0; z-index: 997; } body.notedicolore-luxury #nav-main .navbar-collapse .navbar-nav:not(.rightlinks) { border-bottom: none !important; padding: 0 !important; } /* * Nessun z-index qui: con z-index:1 tutto #page diventava un solo layer compositato; blocchi interni * (hero, widget) potevano coprire la navbar fixed durante lo scroll. L’ordine DOM + z-index sul masthead/nav bastano. */ body.notedicolore-luxury #page { position: relative; /* Esplicito: tutto il sito (hero compreso) resta sotto #masthead (1040). */ z-index: 0; } /* Sicurezza: tema legacy — niente overflow misto che forzi auto su un asse (vedi commento sopra) */ body.notedicolore-luxury:not(.overflow-hidden) #page, body.notedicolore-luxury:not(.overflow-hidden) #page.site, body.notedicolore-luxury:not(.overflow-hidden) .site { overflow: visible !important; } /* Tema navbar.css: .navbar.menu-open { height: 100vh; overflow-y: scroll } — secondo scroll; qui usiamo solo l’overlay */ @media screen and (max-width: 1200px) { body.notedicolore-luxury #nav-main.navbar.menu-open { height: auto !important; max-height: none !important; overflow: visible !important; } } /* Pagine legali / testo lungo (cookie policy, privacy, ecc.) â€” sotto header fixed */ body.notedicolore-luxury .notedicolore-legal-page { padding-top: clamp(6rem, 16vh, 9rem); scroll-margin-top: clamp(6rem, 16vh, 9rem); padding-bottom: 4rem; } body.notedicolore-luxury .notedicolore-legal-page .container { max-width: 42rem; } body.notedicolore-luxury .notedicolore-legal-page h2 { margin-bottom: 1.25rem; } body.notedicolore-luxury .notedicolore-legal-page h3 { font-weight: 400; letter-spacing: 0.03em; margin-top: 1.75rem; margin-bottom: 0.5rem; } body.notedicolore-luxury .notedicolore-legal-page .body-2 { line-height: 1.65; opacity: 0.95; } /* Contatti + FAQ (riusato in home e pagina dedicata) */ #contact-details, #contact-details .individual-homepage-contact-map, #faq, #faq .container { background: transparent !important; background-color: transparent !important; background-image: none !important; } body.notedicolore-luxury #contact-details.individual-homepage-contact-map-section { padding-top: 3rem !important; padding-bottom: 0 !important; } body.notedicolore-luxury #contact-details .individual-homepage-contact-map { max-width: 100% !important; padding: 2.75rem 1rem 3rem !important; background: transparent !important; } body.notedicolore-luxury #contact-details .notedicolore-contact-copy { background: transparent !important; } body.notedicolore-luxury #contact-details .contact-details p { display: block !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } body.notedicolore-luxury #contact-details .notedicolore-contact-map { max-width: 72rem; margin-left: auto; margin-right: auto; } body.notedicolore-luxury #faq.notedicolore-faq { position: relative; } body.notedicolore-luxury #faq.notedicolore-faq .notedicolore-faq-title { max-width: 28rem; margin-left: auto; margin-right: auto; font-weight: 400; letter-spacing: 0.04em; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq { max-width: 52rem; margin-left: auto; margin-right: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq .card { border: none !important; background: transparent !important; background-color: transparent !important; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq .card:not(:last-child) { border-bottom: 1px solid rgba(227, 203, 165, 0.28) !important; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq .card-header { background: transparent !important; background-color: transparent !important; padding-left: 0 !important; padding-right: 0 !important; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq .card-body, body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq .accordionFaq-card-content, body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq .collapse { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq .card-body { padding-left: 0 !important; padding-right: 2rem; padding-top: 0; opacity: 0.92; line-height: 1.65; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq button.btn { border-bottom: none !important; padding-left: 0 !important; padding-right: 0 !important; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq button > h3 { color: var(--notedicolore-luxury-ink, #363636) !important; font-weight: 400 !important; letter-spacing: 0.02em; } body.notedicolore-luxury #faq.notedicolore-faq .accordionFaq .plus-icon { color: #e3cba5 !important; opacity: 0.95; } #contact-details .contact-map-wrap { position: relative; overflow: hidden; margin-top: 50px; height: 400px; filter: grayscale(1); -webkit-filter: grayscale(1); } #contact-details .contact-map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; } /* GDPR cookie banner + preference panel */ body.notedicolore-luxury .notedicolore-cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1200; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(54, 54, 54, 0.18); border-radius: 16px; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.15); color: var(--notedicolore-luxury-ink, #363636) !important; backdrop-filter: blur(6px); } body.notedicolore-luxury .notedicolore-cookie-banner__content { max-width: 76rem; margin: 0 auto; padding: 1rem 1.1rem; } body.notedicolore-luxury .notedicolore-cookie-banner h3 { margin: 0 0 0.45rem; font-size: 1.02rem; font-weight: 600; color: var(--notedicolore-luxury-ink, #363636) !important; } body.notedicolore-luxury .notedicolore-cookie-banner p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: rgba(54, 54, 54, 0.9) !important; } body.notedicolore-luxury .notedicolore-cookie-banner a { color: #ce5516 !important; font-weight: 500; } body.notedicolore-luxury .notedicolore-cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.85rem; } body.notedicolore-luxury .notedicolore-cookie-banner__actions .secondary-btn, body.notedicolore-luxury .notedicolore-cookie-panel__actions .secondary-btn { background-color: #ffffff !important; border: 1px solid rgba(54, 54, 54, 0.35) !important; color: var(--notedicolore-luxury-ink, #363636) !important; opacity: 1 !important; text-shadow: none !important; border-radius: 999px !important; padding: 0.55rem 1rem !important; font-weight: 500 !important; } body.notedicolore-luxury .notedicolore-cookie-banner__actions .secondary-btn:hover, body.notedicolore-luxury .notedicolore-cookie-panel__actions .secondary-btn:hover { background-color: #f5f5f5 !important; border-color: rgba(54, 54, 54, 0.55) !important; color: #1f1f1f !important; } body.notedicolore-luxury .notedicolore-cookie-banner__actions .primary-btn, body.notedicolore-luxury .notedicolore-cookie-panel__actions .primary-btn { background-color: #ce5516 !important; border: 1px solid #ce5516 !important; color: #ffffff !important; opacity: 1 !important; text-shadow: none !important; border-radius: 999px !important; padding: 0.55rem 1rem !important; font-weight: 600 !important; } body.notedicolore-luxury .notedicolore-cookie-banner__actions .primary-btn:hover, body.notedicolore-luxury .notedicolore-cookie-panel__actions .primary-btn:hover { background-color: #b6470f !important; border-color: #b6470f !important; color: #ffffff !important; } body.notedicolore-luxury .notedicolore-cookie-banner button, body.notedicolore-luxury .notedicolore-cookie-panel button { -webkit-text-fill-color: currentColor !important; } body.notedicolore-luxury .notedicolore-cookie-panel { position: fixed; inset: 0; z-index: 1201; background: rgba(54, 54, 54, 0.4); display: flex; align-items: center; justify-content: center; padding: 1rem; } body.notedicolore-luxury .notedicolore-cookie-panel__box { width: min(42rem, 100%); background: #ffffff; border: 1px solid rgba(54, 54, 54, 0.18); border-radius: 18px; box-shadow: 0 24px 45px rgba(0, 0, 0, 0.2); padding: 1.2rem 1.2rem 1rem; position: relative; } body.notedicolore-luxury .notedicolore-cookie-panel h3 { margin: 0 0 1rem; color: var(--notedicolore-luxury-ink, #363636) !important; font-size: 1.1rem; font-weight: 600; } body.notedicolore-luxury .notedicolore-cookie-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; border-top: 1px solid rgba(54, 54, 54, 0.14); padding: 0.85rem 0; } body.notedicolore-luxury .notedicolore-cookie-row p { margin: 0.2rem 0 0; font-size: 0.9rem; color: rgba(54, 54, 54, 0.82) !important; } body.notedicolore-luxury .notedicolore-cookie-switch { min-width: 3.2rem; text-align: right; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; } body.notedicolore-luxury .notedicolore-cookie-switch input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: #ce5516; cursor: pointer; } body.notedicolore-luxury .notedicolore-cookie-switch input[type="checkbox"][disabled] { cursor: not-allowed; } body.notedicolore-luxury .notedicolore-cookie-switch__state { min-width: 2.1rem; text-align: right; font-size: 0.86rem; letter-spacing: 0.01em; color: #ce5516 !important; } body.notedicolore-luxury .notedicolore-cookie-panel__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; margin-top: 0.35rem; } body.notedicolore-luxury .notedicolore-cookie-panel__close { position: absolute; right: 0.6rem; top: 0.35rem; font-size: 1.45rem; line-height: 1; border: none; background: transparent; color: var(--notedicolore-luxury-ink, #363636); opacity: 0.9; } body.notedicolore-luxury .notedicolore-cookie-manage-link { border: none; background: transparent; padding: 0; text-decoration: underline; } @media (max-width: 767.98px) { body.notedicolore-luxury .notedicolore-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; } } /* Consente a Bootstrap .overflow-hidden di bloccare lo scroll (priorità su :not() sopra) */ body.notedicolore-luxury.overflow-hidden { overflow: hidden !important; } html.overflow-hidden { overflow: hidden !important; } /* Hero bottom copy (regole da individual-homepage-widget-video-text-content.css; stesso markup su index) */ body.notedicolore-luxury .individual-homepage-content-section { position: absolute; bottom: 11.5rem; z-index: 3; } body.notedicolore-luxury .individual-homepage-content-section h2, body.notedicolore-luxury .individual-homepage-content-section p, body.notedicolore-luxury .individual-homepage-content-section a, body.notedicolore-luxury .individual-homepage-content-section span { color: #fff; } body.notedicolore-luxury .individual-homepage-content-section p, body.notedicolore-luxury .individual-homepage-content-section a { letter-spacing: 2px; font-size: 16px; } body.notedicolore-luxury p.homepage-content-address { max-width: 432px; } body.notedicolore-luxury .homepage-content-conact-links { display: flex; gap: 20px; text-decoration: underline; } @media (max-width: 991px) { body.notedicolore-luxury .individual-homepage-content-section { bottom: 10.5rem; } body.notedicolore-luxury .homepage-content-conact-links { flex-direction: column; gap: 5px; } }