@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Rye&family=Unbounded:wght@200;400;700&display=swap'); html, body { overflow-x: hidden; overflow-x: clip; } :root { --vh-night: #16130c; --vh-gold: #ebc717; --vh-sea-deep: #0d2b42; --vh-horizon: #b8d4e8; --vh-sand: #e8d9c0; --vh-malto: #efe7d8; --vh-salt: #f4efe8; --vh-paper: #f7f5f1; --vh-ink: #1c1c1c; --vh-ink-soft: #5d5750; --vh-stone: #9a8f7a; --vb-accent: var(--vh-gold); --vb-ink: var(--vh-night); } :root { --alt-font: "Rye", sans-serif; --base-color: #ebc717; --primary-font: 'Montserrat', sans-serif; } .text-lowercase { text-transform: lowercase !important; } header .navbar-brand img { max-height: 74px; } .bg-yellow { background-color: var(--base-color) !important; } .btn { border: none; } .btn.btn-base-color { color: #222; } .text-color-secondary { color: #ebc717; } .center-logo .navbar-nav .nav-link { font-size: unset; } .btn.btn-black-primary-light { border-color: #ebc717; } .btn.btn-brand-color { background-color: var(--base-color); } .hero-page { height: 600px; } .page-content .carte { display: none; } @media (min-width: 992px) { .page-content .carte { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .carta-1 { position: absolute; top: -1.8rem; left: -2rem; } .carta-2 { position: absolute; top: -6.8rem; right: -7rem; width: 360px; } .carta-3 { position: absolute; bottom: 0; left: 0; } .carta-4 { position: absolute; bottom: 0; right: 0; } } .overlay--custom:before { background-color: var(--overlay-background, rgb(0 0 0 / 50%)); } .nav-tabs--custom { scrollbar-color: var(--base-color); scrollbar-width: auto; padding-bottom: .75rem; } .nav-tabs--custom::-webkit-scrollbar { width: 4px; height: 6px; } .nav-tabs--custom::-webkit-scrollbar-thumb { background-color: var(--base-color); border-radius: 10px; } .nav-tabs--custom>li.nav-item>a.nav-link { font-size: 1rem; line-height: 1.2; } .nav-tabs--custom>li.nav-item { width: 150px; flex: 0 0 150px; margin: 1rem 0rem !important; } @keyframes rotateY360 { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .animated-coin { animation: rotateY360 2s linear 2; transform-style: preserve-3d; } .animated-coin--infinite { animation: rotateY360 2s linear infinite; transform-style: preserve-3d; } .page-title-extra-large { z-index: 2; } .header-shop header .navbar { position: sticky; top: 0; background: #3c3c3c; box-shadow: 0 0 15px rgba(0, 0, 0, .15); } .header-shop header .prenota-tavolo { display: none; } header .cart-icon__dot, header .wishlist-icon__dot { top: 23px; } /* STILE PER PAGINA SHOP */ body.header-shop { position: relative; } body.header-shop:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background: url(https://www.pscdn.it//img/137/25/01/35245-bg.webp) no-repeat 0 0; background-size: cover; opacity: .5; } .header-shop .sticky-header { background: transparent; } .header-shop .header-bottom { background-color: transparent; } .header-shop header .head-search-card { opacity: 1; border-radius: 50px; background-color: #ccc; } .header-shop header .head-search-card .form-control { min-height: calc(1em + (1rem + 2px)); padding: .5rem .775rem; } .header-shop header .head-search-card .form-control[placeholder] { text-align: end; } .header-shop header .menu-grey { background-color: #575756; padding: .25rem 1rem; margin-top: 1rem; } .header-shop header .menu-grey .nav-item { padding: 1rem !important; } .header-shop header .menu-grey .nav-link { padding: 0 .5rem; } .header-shop .box-home { min-height: 300px; } .header-shop .box-home--big { min-height: 600px; } .header-shop .overlay-bg { position: relative; z-index: 0; } .header-shop .overlay-bg:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: rgba(0, 0, 0, 1); } .header-shop .overlay-bg--500:before { opacity: .5; } .header-shop .overlay-bg--350:before { opacity: .35; } .header-shop .btn.btn-primary { background-color: #FFD600 !important; border-radius: 50px; padding: .5rem 3rem; border: 1px solid #FFD600; font-weight: 500 !important; color: #575756 !important; } .header-shop .text-secondary { font-family: Rye !important; font-weight: 500; } .header-shop .text-title { font-family: Abril Fatface; font-size: 40px; } .header-shop .color-secondary { color: #D1A900; } .header-shop .img-overlay { max-width: 530px; position: absolute; top: -5rem; left: 35%; } .header-shop .contact-box small { font-size: .7125rem; } .header-shop .borderLeft { position: relative; } .header-shop .borderLeft:before { position: absolute; top: 0; bottom: 0; left: 0; content: ''; width: 1px; height: 100%; background-color: transparent; border: 1px solid #dfdfdf; border-radius: 50%; transform: scaleX(1.4); } .header-shop .footer-newsletter-form { height: 48px; } .header-shop .footer-newsletter-input, .footer-newsletter-btn { background: transparent; } .header-shop .footer-top { border-bottom: 60px solid #D1A900; } .header-shop .icon-circular-background { display: inline-flex; align-items: center; justify-content: center; background-color: #dddddd; border-radius: 50%; width: 40px; height: 40px; text-decoration: none; margin-right: 8px; } .cart-icon__dot, .wishlist-icon__dot { background-color: #d1a900 !important; } .header-shop .breadcrumb_collection { margin-top: 0 !important; } .header-shop .breadcrumb { margin-top: 20px !important; } .header-shop .featured-collection-section.related-products { margin: 70px 0 !important } .header-shop .featured-collection-section.related-product h6 span { font-family: "Rye", sans-serif; } @media (max-width: 768px) { /* Barra chiara, non scura: il logo del mobile (80616-logo.webp) ha le lettere grigio scuro con gli accenti oro, e' disegnato per un fondo chiaro. Su un fondo nero spariva. Le linee dell'hamburger sono gia' scure (rgb(38,37,37)), quindi si leggono anche loro. */ header .navbar { position: relative !important; background: #ffffff; box-shadow: 0 0 15px rgba(0, 0, 0, .15); } .prenota-tavolo { display: none; } main #sections>section:first-child { margin-top: 0 !important; } } .sfumatura { background: linear-gradient(to bottom, #F0EEEA, #FFFFFF); } /* css antonino */ ::selection { color: #fff; background-color: #ebc717; } /* Scorrimento fluido per le ancore interne. Il tema lo spegne con @media (prefers-reduced-motion:no-preference){:root{scroll-behavior:auto}} e `:root` pesa (0,1,0) contro (0,0,1) di `html`: dichiararlo su html non basta, per quanto sia scritto dopo. Serve lo stesso selettore, e vince l'ordine. Resta dentro no-preference: chi ha chiesto meno animazioni non le riceve. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } /* Le ancore non atterrano incollate al bordo */ #prenotatavolo, #vossia-app, #section-s6am6js8, #vcs-am-opening, #regolamento { scroll-margin-top: 20px; } /* ICONE H3 */ .title-container { display: flex; align-items: center; justify-content: center; } h3 { margin: 0; text-align: center; } .left-icon { margin-right: 10px; margin-bottom: 25px; } .right-icon { margin-left: 10px; margin-bottom: 25px; } .bg-gradient-dark-transparent { background: linear-gradient(0deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.50) 50%, rgba(0, 0, 0, 0.55) 100%); } /* Stili per l’anchor che pulsa verso il basso */ .scroll-down { display: inline-block; animation: pulseDown 1.5s infinite; } /* Definizione dei keyframes */ @keyframes pulseDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(20px); } } .floating-element { position: absolute; animation: float 6s ease-in-out infinite; max-width: 350px; z-index: 1; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px); } } /* back to top */ .scroll-top-btn { position: fixed; bottom: 40px; right: 40px; cursor: pointer; z-index: 99999; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(180deg) scale(0.8); background: rgba(235, 199, 23, 0.9); border-radius: 50%; padding: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .scroll-top-btn.show { opacity: 1; visibility: visible; transform: rotate(180deg) scale(1); } .scroll-top-img { width: 50px; height: 50px; display: block; transition: transform 0.3s ease; } .scroll-top-btn:hover .scroll-top-img { transform: translateY(5px); } @media (max-width: 767px) { .scroll-top-btn { bottom: 20px; right: 20px; padding: 8px; } .scroll-top-img { width: 40px; height: 40px; } } /* ombra img */ .image-levitate { position: relative; display: inline-block; } .image-levitate::after { content: ""; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 50%; height: 15px; background: rgba(0, 0, 0, 0.35); border-radius: 50%; filter: blur(8px); z-index: -1; } .image-levitate2 img { display: block; transition: transform 0.6s ease; transform-origin: center; } .image-levitate2:hover img { transform: rotate(8deg); } .image-levitate2 { position: relative; display: inline-block; } .image-levitate2::after { content: ""; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 25%; height: 15px; background: rgba(0, 0, 0, 0.35); border-radius: 50%; filter: blur(8px); z-index: -1; } .hover { position: relative; overflow: visible; } .hover::before { content: ""; position: absolute; width: 25px; /* diametro iniziale del cerchio */ height: 25px; background: rgba(235, 199, 23, 0.9); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s ease-out; pointer-events: none; z-index: -1; } .hover:hover::before { transform: translate(-50%, -50%) scale(15); /* scala abbastanza da coprire l’intero elemento */ } .fixed-hover { position: relative; overflow: visible; } .fixed-hover::before { content: ""; position: absolute; width: 25px; /* diametro base del cerchio */ height: 25px; background: rgba(235, 199, 23, 0.9); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(18); transition: transform 0.4s ease-out; pointer-events: none; z-index: -1; } .fixed-hover:hover::before { transform: translate(-50%, -50%) scale(0); } /* video ricette*/ .video-container { width: 100%; max-width: 400px; aspect-ratio: 4 / 5; margin: auto; } .video-container video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 15px 25px, rgba(0, 0, 0, 0.35) 0px 5px 10px; } @media (max-width: 767px) { .video-container { max-width: 100%; aspect-ratio: 4 / 6; } } /* prodotto consigliato*/ .badge-consigliato { position: absolute; top: 10px; right: 10px; background-color: #ebc717; color: white; font-weight: bold; padding: 5px 10px; font-size: 0.9rem; border-radius: 8px; z-index: 10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } /* La curva superiore del footer. La disegnava la skin pizzao-style.css, che pero' non c'e' su tutti gli store (soleverde, per dirne una, non ha nessun clip-path): sta qui perche' non dipenda da quale skin ha il negozio. */ .footer-bg { position: relative; background-position: center top; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1; background-color: #16130c; background-image: url('https://www.pscdn.it/img/137/25/05/14561-vintage-golden-floral-pattern-.webp'); -webkit-clip-path: ellipse(100% 100% at 50% 100%); clip-path: ellipse(100% 100% at 50% 100%); } @media (max-width: 991.98px) { .footer-bg { -webkit-clip-path: ellipse(100% 95% at 50% 100%); clip-path: ellipse(100% 95% at 50% 100%); } } .footer-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1; } /* FOOTER — curva superiore ripristinata */ /* Il fondo scuro sta QUI e non solo su .footer-bg: fuori dalla cupola ritagliata si vedrebbe il bianco del . z-index insieme a position:relative apre un contesto di impilamento, e serve: .footer-bg ha z-index -1, e senza contesto finirebbe DIETRO questo fondo, sparendo. La skin pizzao lo dichiara, soleverde no — quindi lo dichiariamo noi e non dipende piu' da quale tema ha il negozio. */ footer, .s-footer { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-top: 50px !important; padding-bottom: 0 !important; border-radius: 0 !important; transform: none !important; position: relative !important; z-index: 1 !important; } footer .container { max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; } /* Abbasso solo il logo rispetto alle scritte */ footer .footer-logo { margin-top: 50px !important; display: inline-block; } body>section:last-of-type, body>div:last-of-type>section:last-child { margin-bottom: 0 !important; } /* Mobile */ @media (max-width: 767.98px) { footer, .s-footer { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 30px !important; } footer .footer-logo { margin-top: 30px !important; } .footer-bg { -webkit-clip-path: none !important; clip-path: none !important; } } .wishlist-icon__dot { position: absolute; top: 23px; right: -8px; background-color: #d1a900; width: 18px; height: 18px; border-radius: 50%; line-height: 18px; font-weight: 700; font-size: 10px; text-align: center; cursor: pointer; z-index: 999; color: var(--primary-text-color, #fff); } .wishlist-page { margin-top: 0 !important; } .wishlist-page-inner { padding-top: 100px !important; } /* paginazione ricette */ @keyframes slideFromRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes slideFromLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } .slide-from-right { animation: slideFromRight 0.5s ease-out forwards; } .slide-from-left { animation: slideFromLeft 0.5s ease-out forwards; } .btn.btn-dark-gray.active { background-color: #ebc717 !important; color: #1a1a1a !important; } .btn.btn-dark-gray:hover { background-color: #ebc717 !important; } .btn.btn-dark-yellow { background-color: #ebc717 !important; color: #1a1a1a !important; } .btn.btn-dark-yellow:hover { background-color: #1a1a1a !important; color: #ebc717 !important } /*pagina shop */ .header-shop header .navbar { background: #0c0c0c; } .filter-sort-wrapper.fixed { transform: none !important; } .breadcrumb_collection { background-color: #ebc717; } .col-breadcrumb__title { font-family: var(--alt-font) !important; } .action-card { background-color: #000 !important; } .action-card svg { color: #fff !important; } .action-card:hover { background-color: #ebc717 !important; color: #000 !important; } .ProgressBarComponent .ProgressBar { background-color: #ebc717; } /* dettaglio prodotto*/ h2.section-heading, .product-tab-link, h2.product-title { font-family: var(--alt-font) !important; } .addtocart-btn:hover, .quickview-btn:hover, .btn-atc:hover { background-color: #ebc717; color: #000; } @media (max-width: 448px) { .hover:hover::before { transform: translate(-50%, -50%) scale(12); } .fixed-hover::before { transform: translate(-50%, -50%) scale(12); } } @media (max-width: 768px) { .floating-element { max-width: 100px; } } @media (max-width: 991px) { .navbar-left, .navbar-right { text-align: center !important; width: 100% !important; } header .navbar [class*=col-] .navbar-nav .nav-item, header .navbar [class*=col-] .navbar-nav .nav-item a { display: block; color: #000; font-weight: 700; } .navbar.header-dark .navbar-collapse { background-color: #ffffff !important; color: #000 !important; background-image: url('https://www.pscdn.it/img/137/25/01/35245-bg.webp'); } .navbar .language-wrapper { margin-top: 20px !important; margin-bottom: 20px !important; } .navbar .language-wrapper button span { color: #000; } } @media (min-width: 1440px) { .fs-100 { font-size: 8.25rem; } } /* menu style */ .modern-menu-section { font-family: 'Open Sans', sans-serif; color: #333; } .menu-hero { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; margin-bottom: 40px; } .hero-content { max-width: 800px; padding: 20px; } .restaurant-name { font-size: 3rem; font-weight: 300; margin-bottom: 10px; letter-spacing: 2px; } .menu-title { font-size: 2rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 1px; } .restaurant-logo { max-width: 150px; height: auto; margin: 0 auto; } .menu-container { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .menu-sidebar { width: 250px; border-radius: 10px; padding: 20px; margin-right: 30px; position: sticky; top: 20px; height: fit-content; z-index: 10; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .category-list { list-style: none; padding: 0; margin: 0; } .category-item { display: flex; align-items: center; padding: 12px 15px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .category-item:hover { background: #e9e9e9; } .category-item.active { background: var(--base-color); color: white; } .category-icon { width: 30px; height: 30px; margin-right: 15px; } .menu-content { flex: 1; } .menu-category { display: none; } .menu-category.active { display: block; } .category-title { font-size: 2rem; color: var(--base-color); margin-bottom: 30px; padding-bottom: 10px; border-bottom: 2px solid #eee; } .category-columns { display: flex; gap: 30px; } .category-column { flex: 1; } .subcategory-title { font-size: 1.5rem; color: #333; margin-bottom: 20px; } .menu-item { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px dashed #ddd; } /* Nascondo il logo da ogni portata */ .menu-item .item-image { display: none; } .item-header { display: flex; align-items: center; margin-bottom: 10px; } .item-name { flex: 1; font-size: 1.2rem; font-weight: 600; margin: 0; } .item-price { font-size: 1.2rem; font-weight: 600; color: var(--base-color); } .item-description { margin: 0; color: #666; font-size: 1rem; line-height: 1.5; text-transform: lowercase; } @media (max-width: 992px) { .menu-container { flex-direction: column; } .menu-sidebar { width: 100%; margin-right: 0; margin-bottom: 30px; position: static; } .category-columns { flex-direction: column; } } @media (max-width: 768px) { .menu-hero { height: 250px; } .restaurant-name { font-size: 2.2rem; } .menu-title { font-size: 1.5rem; } } /* Desktop Styles */ @media (min-width: 992px) { .desktop-menu { display: block; /* Show on desktop */ } .mobile-menu { display: none; /* Hide on desktop */ } } /* Mobile Styles */ @media (max-width: 991px) { .desktop-menu { display: none; /* Hide on mobile */ } .mobile-menu { display: block; /* Show on mobile */ } .tab-content.anime-complete h2 { color: var(--base-color) !important; text-align: center !important; font-size: 2rem !important; } } /* Rendi la navbar sticky */ .sticky-nav { position: sticky; top: 0; z-index: 1000; background-color: rgba(240, 238, 234, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Base styles */ .list-group { width: 100%; max-width: 280px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow: hidden; padding: 0; margin: 0 auto; } /* Item styles */ .list-group-item { display: block; padding: 12px 20px; font-size: 16px; font-weight: 500; color: #333; background-color: #fff; border: none; border-bottom: 1px solid #f0f0f0; transition: all 0.3s ease; cursor: pointer; } .list-group-item:last-child { border-bottom: none; } /* Hover and active styles */ .list-group-item:hover, .list-group-item:focus { background-color: #f8f9fa; color: #000; text-decoration: none; } .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { background-color: var(--base-color); color: #fff; font-weight: 600; border-left: 4px solid #ae8e00; border-radius: 0; border-bottom: none !important; } /* Optional: rounded corners for the first and last items */ .list-group-item:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; } .list-group-item:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* Responsive adjustments */ @media (max-width: 768px) { .list-group { max-width: 100%; border-radius: 0; box-shadow: none; } } .giftbox-wrapper *:not(.fas) { font-family: Montserrat } .giftbox-wrapper .products-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !IMPORTANT; } .giftbox-wrapper .header-section h1 { font-family: var(--alt-font) !important; } .language-btn { background: transparent; border: 0; outline: none; } @media (max-width: 590px) { .language-wrapper { display: flex; justify-content: center; margin: 0 AUTO; } } /* Effetto hover sulle immagini dei piatti */ .hover-wrapper { display: inline-block; overflow: visible; /* permette box-shadow e levitazione */ } .hover-dynamic { display: block; transition: transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease; cursor: pointer; will-change: transform, filter, box-shadow; /* ottimizza la performance */ } .hover-wrapper:hover .hover-dynamic { transform: scale(1.05) rotate(-2deg) translateY(-10px); /* zoom ridotto */ filter: brightness(1.2) saturate(1.3); box-shadow: 0 25px 40px rgba(0, 0, 0, 0.3); } /* PIATTI HERO — zigzag impattante con immagini grandi e hover 3D */ .vdish-hero { position: relative; margin-bottom: 80px; } .vdish-hero__row { align-items: center; gap: 0; } .vdish-hero__img-wrap { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); /* Altezza importante per impatto visivo */ height: 550px; /* 3D transform */ transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; } .vdish-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); } .vdish-hero__img-wrap:hover { transform: rotateY(-3deg) rotateX(2deg) scale(1.02); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); } .vdish-hero__img-wrap:hover .vdish-hero__img { transform: scale(1.1); } /* Badge di sede — flottante sopra l'immagine */ .vdish-hero__badge { position: absolute; top: 24px; left: 24px; padding: 10px 22px; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; border-radius: 50px; z-index: 2; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); animation: vdish-badge-pulse 3s ease-in-out infinite; } @keyframes vdish-badge-pulse { 0%, 100% { transform: scale(1) translateY(0); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } 50% { transform: scale(1.05) translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } } .vdish-hero__badge--palermo { background: var(--vh-gold); color: var(--vh-night); } .vdish-hero__badge--ammare { background: var(--vh-horizon); color: var(--vh-sea-deep); } /* Contenuto testuale — lato opposto all'immagine */ .vdish-hero__content { padding: 40px 50px; position: relative; } /* Linea decorativa sopra il titolo */ .vdish-hero__line { width: 60px; height: 4px; border-radius: 2px; margin-bottom: 24px; transition: width 0.5s ease; } .vdish-hero__row:hover .vdish-hero__line { width: 100px; } .vdish-hero__line--palermo { background: var(--vh-gold); } .vdish-hero__line--ammare { background: var(--vh-horizon); } .vdish-hero__subtitle { font-family: var(--primary-font); font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; display: inline-block; padding: 6px 16px; border-radius: 4px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .vdish-hero__subtitle--palermo { color: var(--vh-gold); background: rgba(22, 19, 12, 0.65); } .vdish-hero__subtitle--ammare { color: var(--vh-horizon); background: rgba(13, 43, 66, 0.65); } .vdish-hero__name { font-family: var(--alt-font); font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.05; text-transform: uppercase; margin: 0 0 20px; color: var(--vh-ink); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .vdish-hero__desc { font-size: 17px; line-height: 1.7; color: var(--vh-ink-soft); margin: 0 0 28px; max-width: 500px; } /* Icona decorativa — forchetta/coltello stilizzata */ .vdish-hero__icon { display: inline-block; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 0.4s ease, box-shadow 0.4s ease; } .vdish-hero__row:hover .vdish-hero__icon { transform: rotate(15deg) scale(1.1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .vdish-hero__icon--palermo { background: var(--vh-gold); color: var(--vh-night); } .vdish-hero__icon--ammare { background: var(--vh-horizon); color: var(--vh-sea-deep); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .vdish-hero__img-wrap, .vdish-hero__img, .vdish-hero__badge, .vdish-hero__line, .vdish-hero__icon { transition: none; animation: none; } .vdish-hero__img-wrap:hover { transform: none; } .vdish-hero__img-wrap:hover .vdish-hero__img { transform: none; } } /* Tablet — altezza ridotta */ @media (max-width: 991.98px) { .vdish-hero__img-wrap { height: 450px; } .vdish-hero__content { padding: 32px 36px; } .vdish-hero__name { font-size: clamp(28px, 5vw, 40px); } } /* Mobile — stack verticale, immagine sopra */ @media (max-width: 767.98px) { .vdish-hero { margin-bottom: 60px; } .vdish-hero__img-wrap { height: 380px; margin-bottom: 28px; } .vdish-hero__content { padding: 0 20px 20px; } .vdish-hero__name { font-size: clamp(26px, 7vw, 34px); } .vdish-hero__desc { font-size: 15px; } .vdish-hero__badge { top: 16px; left: 16px; padding: 8px 16px; font-size: 10px; } } /* MAPPA INTERATTIVA — selettore di sede con animazioni */ .vmap-section { position: relative; /* Sfondo carta con pattern, come le sezioni prima */ background: var(--vh-paper) url('https://www.pscdn.it/img/137/25/01/35245-bg.webp') center/cover no-repeat; overflow: hidden; } .vmap-container { position: relative; max-width: 1200px; margin: 0 auto; padding: 60px 20px; } .vmap-header { text-align: center; margin-bottom: 40px; } .vmap-title { font-family: var(--alt-font); font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; text-transform: uppercase; color: var(--vh-ink); margin: 0 0 10px; } .vmap-subtitle { font-size: 15px; color: var(--vh-ink-soft); margin: 0; } /* Tab selector — hover con transition, non animation */ .vmap-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 36px; flex-wrap: wrap; } .vmap-tab { position: relative; padding: 12px 26px; font-family: var(--primary-font); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border: 2px solid rgba(0, 0, 0, 0.08); border-radius: 50px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; background: white; color: var(--vh-ink-soft); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .vmap-tab:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .vmap-tab--palermo:hover { border-color: var(--vh-gold); color: var(--vh-night); } .vmap-tab--ammare:hover { border-color: var(--vh-horizon); color: var(--vh-sea-deep); } .vmap-tab--active { border-color: transparent; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .vmap-tab--active.vmap-tab--palermo { background: var(--vh-gold); color: var(--vh-night); } .vmap-tab--active.vmap-tab--ammare { background: var(--vh-horizon); color: var(--vh-sea-deep); } /* Icona nel tab */ .vmap-tab__icon { display: inline-block; margin-right: 6px; font-size: 15px; vertical-align: middle; } /* Content area */ .vmap-content { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; } /* Info panel */ .vmap-info { position: relative; height: 440px; } .vmap-info__card { position: absolute; inset: 0; background: white; border-radius: 20px; padding: 32px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; display: flex; flex-direction: column; } .vmap-info__card--active { opacity: 1; visibility: visible; transform: translateY(0); } /* Pill sede — piu' piccola e leggera */ .vmap-info__badge { display: inline-block; padding: 5px 14px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 50px; margin-bottom: 16px; align-self: flex-start; } .vmap-info__badge--palermo { background: rgba(235, 199, 23, 0.15); color: var(--vh-night); } .vmap-info__badge--ammare { background: rgba(184, 212, 232, 0.25); color: var(--vh-sea-deep); } /* Titolo sede — stile coerente con la pill */ .vmap-info__name { font-family: var(--alt-font); font-size: clamp(20px, 3vw, 28px); font-weight: 700; text-transform: uppercase; color: var(--vh-ink); margin: 0 0 20px; line-height: 1.15; } /* Info rows moderne */ .vmap-info__details { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; } .vmap-info__item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 14px; color: var(--vh-ink-soft); } .vmap-info__item:last-child { border-bottom: none; } /* Icona in cerchietto colorato */ .vmap-info__item-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 50%; transition: background 0.25s ease; } /* Cerchietto colorato per Palermo (oro) */ .vmap-info__card--palermo .vmap-info__item-icon, [data-sede-card="palermo"] .vmap-info__item-icon { background: rgba(235, 199, 23, 0.12); color: var(--vh-gold); } /* Cerchietto colorato per Ammare (blu) */ .vmap-info__card--ammare .vmap-info__item-icon, [data-sede-card="ammare"] .vmap-info__item-icon { background: rgba(13, 43, 66, 0.08); color: var(--vh-sea-deep); } .vmap-info__item-text { line-height: 1.5; padding-top: 2px; } .vmap-info__item-text strong { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vh-ink); margin-bottom: 2px; } /* CTA — full-width dentro la card, in basso */ .vmap-info__cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 24px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-radius: 12px; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; margin-top: auto; } .vmap-info__cta--palermo { background: var(--vh-gold); color: var(--vh-night); } .vmap-info__cta--palermo:hover { background: var(--vh-night); color: var(--vh-gold); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .vmap-info__cta--ammare { background: var(--vh-horizon); color: var(--vh-sea-deep); } .vmap-info__cta--ammare:hover { background: var(--vh-sea-deep); color: var(--vh-horizon); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } /* Map container — stesso border-radius e ombra della card */ .vmap-map { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); height: 420px; } .vmap-map iframe { width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0; transition: opacity 0.3s ease; } /* L'iframe originale (hardcoded) va nascosto */ #vmap-iframe { display: none; } .vmap-map__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.04) 100%); pointer-events: none; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .vmap-tab, .vmap-info__card, .vmap-map iframe, .vmap-info__cta { transition: none; } } /* Tablet */ @media (max-width: 991.98px) { .vmap-content { grid-template-columns: 1fr; gap: 24px; } .vmap-info { min-height: auto; } .vmap-info__card { position: relative; } .vmap-info__card:not(.vmap-info__card--active) { display: none; } .vmap-map { height: 360px; } } /* Mobile */ @media (max-width: 767.98px) { .vmap-container { padding: 40px 16px; } .vmap-tabs { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 24px; } .vmap-tab { text-align: center; padding: 12px 20px; font-size: 11px; } .vmap-info__card { padding: 24px 20px; border-radius: 16px; } .vmap-info__name { font-size: clamp(20px, 5.5vw, 26px); } .vmap-info__item-icon { width: 32px; height: 32px; font-size: 14px; } .vmap-info__cta { border-radius: 10px; padding: 13px 20px; } .vmap-map { height: 280px; border-radius: 16px; } } /* PRENOTA TAVOLO — DARK MODE */ #prenotatavolo { background: var(--vh-night); padding: 80px 0; position: relative; overflow: hidden; } /* Pattern sottile */ #prenotatavolo::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(235, 199, 23, 0.05) 1px, transparent 1.5px); background-size: 24px 24px; pointer-events: none; } /* Titolo — Rye, come gli altri titoli della homepage */ #prenotatavolo h2 { color: var(--vh-salt); font-family: var(--alt-font); font-size: clamp(32px, 5vw, 48px); margin-bottom: 16px; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } #prenotatavolo h2 .text-highlight { color: var(--vh-gold); position: relative; } #prenotatavolo p { color: rgba(232, 217, 192, 0.65); font-size: 16px; line-height: 1.6; } /* Card del form — glass su fondo scuro */ #prenotatavolo .contact-form-style-05 { position: relative; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(235, 199, 23, 0.2); border-radius: 24px; padding: 40px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; overflow: hidden; } /* Linee decorative gold */ #prenotatavolo .contact-form-style-05::before { content: ''; position: absolute; top: -1px; left: 40px; right: 40px; height: 2px; background: linear-gradient(90deg, transparent, var(--vh-gold), transparent); } #prenotatavolo .contact-form-style-05::after { content: ''; position: absolute; bottom: -1px; left: 40px; right: 40px; height: 2px; background: linear-gradient(90deg, transparent, var(--vh-gold), transparent); } #prenotatavolo .contact-form-style-05:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border-color: rgba(235, 199, 23, 0.35); } #prenotatavolo .form-control { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(235, 199, 23, 0.15) !important; border-radius: 12px !important; padding: 14px 18px !important; color: var(--vh-salt) !important; font-size: 15px !important; transition: all 0.3s ease !important; } #prenotatavolo .form-control::placeholder { color: rgba(232, 217, 192, 0.4) !important; opacity: 1 !important; } #prenotatavolo .form-control:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--vh-gold) !important; box-shadow: 0 0 0 3px rgba(235, 199, 23, 0.12) !important; outline: none !important; } #prenotatavolo select.form-control, .contact-form select.form-control { width: 100% !important; max-width: 100% !important; display: block !important; height: 48px !important; line-height: 1.5 !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-color: rgba(20, 20, 20, 0.95) !important; color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ebc717' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 42px !important; padding-left: 14px !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; border-radius: 12px !important; transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important; transition-property: color, border-color, box-shadow, opacity !important; -webkit-transition-property: color, border-color, box-shadow, opacity !important; } select:disabled, select[disabled], select.form-control:disabled, select.form-control[disabled] { background-position: right 14px center !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ebc717' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; opacity: 0.65 !important; } #prenotatavolo select option, .contact-form select option { background-color: #1a1a1a !important; color: #ffffff !important; padding: 10px 15px !important; max-width: 100% !important; } #prenotatavolo select optgroup, .contact-form select optgroup { background-color: #1a1a1a !important; color: #ebc717 !important; font-weight: 700 !important; font-style: normal !important; padding: 8px 12px !important; } #prenotatavolo select option:checked, #prenotatavolo select option:hover, .contact-form select option:checked, .contact-form select option:hover { background-color: #ebc717 !important; color: #000000 !important; } /* Disattiva l'icona duplicata generata dal tema su .date-icon per lasciare una sola icona calendario dorata */ .date-icon::after, .date-icon::before, #prenotatavolo .date-icon::after, #prenotatavolo .date-icon::before, .contact-form .date-icon::after, .contact-form .date-icon::before { display: none !important; content: none !important; background: none !important; width: 0 !important; height: 0 !important; } /* Icona calendario dorata (oro caldo #EBC717) su tutti i campi data - visibile e centrata in qualsiasi stato */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="date"]:disabled::-webkit-calendar-picker-indicator, input[type="date"][disabled]::-webkit-calendar-picker-indicator, input[type="date"][readonly]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23EBC717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 18px 18px !important; width: 24px !important; height: 24px !important; margin-top: auto !important; margin-bottom: auto !important; margin-right: 2px !important; align-self: center !important; vertical-align: middle !important; cursor: pointer !important; display: inline-block !important; opacity: 0.95 !important; filter: none !important; visibility: visible !important; } /* Centraggio verticale perfetto per il campo data */ input[type="date"].form-control, .vb-am .contact-form input[type="date"].form-control { height: 48px !important; line-height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 14px !important; padding-right: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; } input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="date"]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; vertical-align: middle !important; } #prenotatavolo textarea.form-control { min-height: 100px; resize: vertical; } #prenotatavolo button[type="submit"] { background: var(--vh-gold) !important; color: var(--vh-night) !important; border: none !important; padding: 16px 32px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 50px !important; box-shadow: 0 8px 24px rgba(235, 199, 23, 0.3) !important; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important; } #prenotatavolo button[type="submit"]:hover { background: var(--vh-salt) !important; color: var(--vh-night) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px rgba(235, 199, 23, 0.4) !important; } #prenotatavolo button[type="submit"] i { margin-right: 8px; font-size: 18px; } #prenotatavolo .fs-14 { color: rgba(232, 217, 192, 0.5) !important; font-size: 13px !important; } #prenotatavolo .fs-14 a { color: var(--vh-gold) !important; text-decoration: underline !important; transition: color 0.3s ease !important; } #prenotatavolo .fs-14 a:hover { color: var(--vh-salt) !important; } /* Mobile */ @media (max-width: 767.98px) { #prenotatavolo { padding: 60px 0; } #prenotatavolo .contact-form-style-05 { padding: 28px 20px; } #prenotatavolo h2 { font-size: clamp(28px, 7vw, 36px); text-align: center; } #prenotatavolo p { text-align: center; font-size: 15px; } } /* Tema Ammare (blu) — JS */ #prenotatavolo.form-theme-ammare .contact-form-style-05 { border-color: rgba(184, 212, 232, 0.25); } #prenotatavolo.form-theme-ammare .contact-form-style-05::before, #prenotatavolo.form-theme-ammare .contact-form-style-05::after { background: linear-gradient(90deg, transparent, var(--vh-horizon), transparent); } #prenotatavolo.form-theme-ammare .form-control { border-color: rgba(184, 212, 232, 0.2) !important; } #prenotatavolo.form-theme-ammare .form-control:focus { border-color: var(--vh-horizon) !important; box-shadow: 0 0 0 3px rgba(184, 212, 232, 0.15) !important; } #prenotatavolo.form-theme-ammare button[type="submit"] { background: var(--vh-horizon) !important; color: var(--vh-sea-deep) !important; } #prenotatavolo.form-theme-ammare button[type="submit"]:hover { background: var(--vh-salt) !important; color: var(--vh-sea-deep) !important; } #prenotatavolo.form-theme-ammare .fs-14 a { color: var(--vh-horizon) !important; } #prenotatavolo.form-theme-ammare .fs-14 a:hover { color: var(--vh-salt) !important; } #prenotatavolo .contact-form-style-05, #prenotatavolo .form-control, #prenotatavolo button[type="submit"] { transition: all 0.4s ease !important; } /* HERO — contrasto testo "Delizie del Mediterraneo" */ .hero-subtitle { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 0, 0, 0.4); position: relative; padding: 8px 20px; background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%); border-radius: 4px; } /* Anche l'H1 sotto beneficia di un text-shadow più marcato */ #section-jCLpdogY h1 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 4px 20px rgba(0, 0, 0, 0.7); } header .disable-fixed { position: fixed; } .language-wrapper { position: relative; z-index: 9999999; } .language-wrapper * { position: relative; z-index: 9999999; } .phone-block { display: none; } @media screen and (min-width: 1500px) { .phone-block { display: block; } } @media screen and (min-width: 990px) { header a[href="/page/la-matta"] { width: 200px; } } @media screen and (min-width: 992px) and (max-width: 1199.98px) { header .navbar-nav .nav-link { padding-left: 8px !important; padding-right: 8px !important; } header a[href="/page/la-matta"] { width: 120px !important; } .language-wrapper { width: 75px !important; } } .navbar .navbar-nav .dropdown .dropdown-menu { margin: 0; padding: 20px 0 22px; } .navbar .navbar-nav .dropdown .dropdown-menu .dropdown-item:focus, .navbar .navbar-nav .dropdown .dropdown-menu .dropdown-item:hover { color: #fff; background-color: #f8f9fa2b; } .vm-overlay { display: none } @media(max-width:991.98px) { #navbarNav { display: none !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important } .vm-overlay { display: block; position: fixed; inset: 0; background: #f5f0eb url('https://www.pscdn.it/img/137/25/01/35245-bg.webp') center/cover no-repeat; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); will-change: transform } .vm-overlay.vm-open { transform: translateX(0) } .vm-close { position: sticky; top: 0; z-index: 10; display: flex; justify-content: flex-end; padding: 18px 20px 10px; background: transparent } .vm-close-btn { background: none; border: none; cursor: pointer; padding: 8px; color: #1a1a1a; line-height: 1 } .vm-close-btn svg { display: block; width: 28px; height: 28px } .vm-link { display: block; padding: 16px 28px; font-size: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .1); transition: background .15s } .vm-link:active { background: rgba(0, 0, 0, .05) } /* Niente bordo superiore: l'ultima voce del menu ha gia' il suo bordo inferiore, e i due filetti a 8px di distanza sembravano racchiudere una voce che non c'e'. */ .vm-lang { display: flex; align-items: center; gap: 10px; padding: 20px 28px; margin-top: 8px; color: rgba(0, 0, 0, .5); font-size: 15px; font-weight: 600; letter-spacing: .05em } .vm-lang img { width: 22px; border-radius: 2px } body.vm-body-lock { overflow: hidden; touch-action: none } } /* TASK 0 + TASK 1 — Prenotazioni e tracciamento conversioni */ .vb-am { content-visibility: auto; contain-intrinsic-size: auto 760px; position: relative; overflow: hidden; padding: 110px 0 120px; background: var(--vcs-am-sea-deep, #0D2B42); } .vb-am::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 212, 232, .35), transparent); } .vb-am__label { font-family: 'Unbounded', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--vcs-am-stone, #7A8A8F); margin-bottom: 22px; } .vb-am__heading { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 300; line-height: 1.1; color: var(--vcs-am-salt, #F4EFE8); margin-bottom: 24px; } .vb-am__heading em { font-style: italic; color: var(--vcs-am-gold, #EBC717); } .vb-am__body { font-size: 1rem; line-height: 1.75; color: rgba(244, 239, 232, .72); max-width: 44ch; margin-bottom: 32px; } /* Click-to-call: il traffico Ads su Ammare è in larga parte mobile */ .vb-am__phone { display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px; border: 1px solid rgba(184, 212, 232, .35); font-family: 'Unbounded', sans-serif; font-size: 13px; letter-spacing: 2px; color: var(--vcs-am-horizon, #B8D4E8); text-decoration: none; transition: border-color .25s, color .25s; } .vb-am__phone:hover, .vb-am__phone:focus-visible { color: var(--vcs-am-gold, #EBC717); border-color: var(--vcs-am-gold, #EBC717); } .vb-am__phone small { display: block; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--vcs-am-stone, #7A8A8F); } .vb-am .contact-form .form-control { background: transparent; border: 0; border-bottom: 1px solid rgba(184, 212, 232, .28); border-radius: 0; color: var(--vcs-am-salt, #F4EFE8); font-size: 15px; height: 48px !important; line-height: 48px !important; margin-top: 0; padding: 0 10px !important; box-sizing: border-box !important; transition: border-color .25s; } .vb-am .contact-form .form-control::placeholder { color: rgba(244, 239, 232, .55); opacity: 1; } .vb-am .contact-form .form-control:focus { background: transparent; color: var(--vcs-am-salt, #F4EFE8); border-bottom-color: var(--vcs-am-gold, #EBC717); box-shadow: none; } .vb-am .contact-form .form-control:focus-visible { outline: 2px solid var(--vcs-am-gold, #EBC717) !important; outline-offset: 3px; } .vb-am .contact-form select.form-control { width: 100% !important; max-width: 100% !important; display: block !important; height: 48px !important; line-height: 1.5 !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-color: #0D2B42 !important; color: #F4EFE8 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23EBC717' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 42px !important; padding-left: 14px !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; border-radius: 6px !important; transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; transition-property: color, border-color, box-shadow !important; } .vb-am .contact-form select.form-control option { background-color: #0D2B42 !important; color: #F4EFE8 !important; padding: 10px 15px !important; } .vb-am .contact-form select.form-control optgroup { background-color: #0D2B42 !important; color: #EBC717 !important; font-weight: 700 !important; font-style: normal !important; padding: 8px 12px !important; } .vb-am .contact-form select.form-control option:checked, .vb-am .contact-form select.form-control option:hover { background-color: #EBC717 !important; color: #0F1E29 !important; } .vb-am .contact-form input[type="date"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23EBC717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 18px 18px !important; width: 24px !important; height: 24px !important; cursor: pointer !important; display: inline-block !important; opacity: 0.95 !important; filter: none !important; } .vb-am .contact-form textarea.form-control { min-height: 88px; resize: vertical; } .vb-am__submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 18px 32px; border: 0; background: var(--vcs-am-gold, #EBC717); font-family: 'Unbounded', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--vcs-am-ink, #0F1E29); cursor: pointer; transition: background .25s, color .25s; } .vb-am__submit:hover, .vb-am__submit:focus-visible { background: var(--vcs-am-salt, #F4EFE8); } .vb-am__submit:focus-visible { outline: 2px solid var(--vcs-am-horizon, #B8D4E8) !important; outline-offset: 3px; } .vb-am__note { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: rgba(244, 239, 232, .5); } .vb-am__note a { color: var(--vcs-am-horizon, #B8D4E8); } @media (max-width: 991.98px) { .vb-am { padding: 70px 0 80px; } } @media (min-width: 992px) { .vb-am-gallery .gallery-image img { height: 420px; width: auto; max-width: none; object-fit: cover; display: block; } } .vb-ty { display: flex; align-items: center; min-height: 72vh; padding: 170px 0 110px; } .vb-ty--palermo { background: #16130c; } .vb-ty--ammare { background: #0D2B42; } .vb-ty__check { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 34px; border-radius: 50%; border: 1px solid currentColor; font-size: 26px; line-height: 1; } .vb-ty--palermo .vb-ty__check { color: var(--base-color, #ebc717); } .vb-ty--ammare .vb-ty__check { color: #EBC717; } .vb-ty__title { font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.15; color: #F4EFE8; margin-bottom: 18px; } .vb-ty__lead { font-size: 1.05rem; line-height: 1.7; color: rgba(244, 239, 232, .74); max-width: 52ch; margin-bottom: 46px; } .vb-ty__steps { list-style: none; counter-reset: vbty; padding: 0; margin: 0 0 46px; } .vb-ty__steps li { counter-increment: vbty; position: relative; padding: 0 0 22px 46px; color: rgba(244, 239, 232, .74); line-height: 1.6; } .vb-ty__steps li::before { content: counter(vbty); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(244, 239, 232, .3); border-radius: 50%; font-size: 12px; color: rgba(244, 239, 232, .74); } .vb-ty__steps strong { display: block; color: #F4EFE8; font-weight: 600; margin-bottom: 3px; } .vb-ty__aside { padding: 34px; border: 1px solid rgba(244, 239, 232, .16); } .vb-ty__aside-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(244, 239, 232, .5); margin-bottom: 16px; } .vb-ty__aside p { color: rgba(244, 239, 232, .74); line-height: 1.7; margin-bottom: 22px; } .vb-ty__tel { display: block; font-size: 1.45rem; line-height: 1.35; text-decoration: none; color: #F4EFE8; transition: color .25s; } .vb-ty__tel:hover, .vb-ty__tel:focus-visible { color: #EBC717; } .vb-ty__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .vb-ty__link { padding: 13px 26px; border: 1px solid rgba(244, 239, 232, .3); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; color: rgba(244, 239, 232, .8); transition: border-color .25s, color .25s; } .vb-ty__link:hover, .vb-ty__link:focus-visible { color: #EBC717; border-color: #EBC717; } .vb-ty__link--solid { background: #EBC717; border-color: #EBC717; color: #16130c; } .vb-ty__link--solid:hover, .vb-ty__link--solid:focus-visible { background: #F4EFE8; border-color: #F4EFE8; color: #16130c; } @media (max-width: 991.98px) { .vb-ty { min-height: 0; padding: 130px 0 70px; } .vb-ty__aside { margin-top: 40px; } } @media (prefers-reduced-motion: reduce) { .vb-am__phone, .vb-am__submit, .vb-am .contact-form .form-control, .vb-ty__tel, .vb-ty__link { transition: none; } } /* TASK 2 — Hub dei menu, blocco /page/i-nostri-menu */ .vh-page { background: var(--vh-paper); } .vh-hero { position: relative; display: flex; align-items: flex-end; min-height: 100vh; padding-bottom: 90px; overflow: hidden; isolation: isolate; background: var(--vh-night); } .vh-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 42%; } .vh-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 19, 12, 0) 0%, rgba(22, 19, 12, .02) 30%, rgba(22, 19, 12, .10) 46%, rgba(22, 19, 12, .42) 56%, rgba(22, 19, 12, .80) 62%, rgba(22, 19, 12, .93) 68%, rgba(22, 19, 12, .97) 82%, rgba(22, 19, 12, .98) 100%); } .vh-hero__eyebrow { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--vh-gold); margin-bottom: 14px; } .vh-hero__title { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.1; color: var(--vh-salt); margin-bottom: 14px; } .vh-hero__lead { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: rgba(244, 239, 232, .84); max-width: 58ch; margin: 0; } .vh-sedi { padding-bottom: 96px; } /* CARD SEDI — REDESIGN IMPATTANTE */ .vh-sede { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 540px; height: 100%; padding: 48px; overflow: hidden; text-decoration: none; isolation: isolate; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; } .vh-sede:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); } .vh-sede__bg { position: absolute; inset: -20px; z-index: -2; background-size: cover; background-position: center; transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.2s ease; filter: brightness(0.85); } .vh-sede:hover .vh-sede__bg { transform: scale(1.08); filter: brightness(0.7); } .vh-sede__veil { position: absolute; inset: 0; z-index: -1; transition: opacity 0.6s ease; } .vh-sede--palermo .vh-sede__veil { background: linear-gradient(180deg, rgba(22, 19, 12, .2) 0%, rgba(22, 19, 12, .75) 55%, rgba(22, 19, 12, .95) 100%), linear-gradient(120deg, rgba(235, 199, 23, .2), transparent 55%); } .vh-sede--ammare .vh-sede__veil { background: linear-gradient(180deg, rgba(13, 43, 66, .15) 0%, rgba(13, 43, 66, .75) 55%, rgba(13, 43, 66, .95) 100%), linear-gradient(120deg, rgba(184, 212, 232, .25), transparent 55%); } /* Bordo luminoso dorato/blu sopra la card */ .vh-sede::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; transition: opacity 0.5s ease; opacity: 0; } .vh-sede--palermo::before { background: linear-gradient(90deg, transparent, var(--vh-gold), transparent); } .vh-sede--ammare::before { background: linear-gradient(90deg, transparent, var(--vh-horizon), transparent); } .vh-sede:hover::before { opacity: 1; } .vh-sede__eyebrow { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .vh-sede__eyebrow::before { content: ''; width: 30px; height: 1px; transition: width 0.5s ease; } .vh-sede:hover .vh-sede__eyebrow::before { width: 50px; } .vh-sede--palermo .vh-sede__eyebrow { color: var(--vh-gold); } .vh-sede--palermo .vh-sede__eyebrow::before { background: var(--vh-gold); } .vh-sede--ammare .vh-sede__eyebrow { color: var(--vh-horizon); } .vh-sede--ammare .vh-sede__eyebrow::before { background: var(--vh-horizon); } .vh-sede__name { font-size: clamp(2.2rem, 3.8vw, 3rem); line-height: 1.05; color: var(--vh-salt); margin-bottom: 14px; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); transition: transform 0.5s ease; } .vh-sede:hover .vh-sede__name { transform: translateY(-4px); } .vh-sede__where { font-size: .95rem; line-height: 1.6; margin-bottom: 24px; max-width: 90%; transition: transform 0.5s ease; } .vh-sede:hover .vh-sede__where { transform: translateY(-2px); } .vh-sede--palermo .vh-sede__where { color: rgba(244, 239, 232, .72); } .vh-sede--ammare .vh-sede__where { color: rgba(244, 239, 232, .78); } .vh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .vh-chip { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 14px; border: 1px solid rgba(244, 239, 232, .25); color: rgba(244, 239, 232, .85); background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(4px); border-radius: 4px; transition: all 0.3s ease; } .vh-sede:hover .vh-chip { border-color: rgba(244, 239, 232, .4); background: rgba(0, 0, 0, 0.25); } .vh-sede__cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 16px 32px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; border-radius: 4px; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; } .vh-sede__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.15), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .vh-sede:hover .vh-sede__cta::before { transform: translateX(100%); } .vh-sede--palermo .vh-sede__cta { background: var(--vh-gold); border: 1px solid var(--vh-gold); color: var(--vh-night); box-shadow: 0 4px 20px rgba(235, 199, 23, 0.3); } .vh-sede--palermo:hover .vh-sede__cta { box-shadow: 0 8px 30px rgba(235, 199, 23, 0.45); transform: translateY(-2px); } .vh-sede--ammare .vh-sede__cta { background: transparent; border: 1px solid rgba(184, 212, 232, .55); color: var(--vh-salt); } .vh-sede--ammare:hover .vh-sede__cta { background: rgba(184, 212, 232, 0.15); border-color: var(--vh-horizon); box-shadow: 0 4px 20px rgba(184, 212, 232, 0.2); transform: translateY(-2px); } .vh-sede:focus-visible { box-shadow: 0 0 0 3px var(--vh-paper), 0 0 0 6px var(--vh-ink) !important; } .vh-section { padding: 84px 0; } .vh-section .row { --bs-gutter-y: 30px; } .vh-section--malto { background: var(--vh-malto); padding-bottom: 288px; } .vh-section--dark { background: var(--vh-night); } .vh-section--sea { background: var(--vh-sea-deep); } .vh-section__eyebrow { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--vh-stone); margin-bottom: 12px; } .vh-section--dark .vh-section__eyebrow { color: var(--vh-gold); } .vh-section--sea .vh-section__eyebrow { color: var(--vh-horizon); } .vh-section__title { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; color: var(--vh-ink); margin-bottom: 14px; } .vh-section--dark .vh-section__title, .vh-section--sea .vh-section__title { color: var(--vh-salt); } .vh-section__lead { line-height: 1.7; color: var(--vh-ink-soft); max-width: 62ch; margin-bottom: 44px; } .vh-section--dark .vh-section__lead, .vh-section--sea .vh-section__lead { color: rgba(244, 239, 232, .68); } /* --- Tessere di categoria — REDESIGN IMPATTANTE --- */ .vh-tile { position: relative; display: block; overflow: hidden; text-decoration: none; border-radius: 4px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; } .vh-tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2); } .vh-tile img { display: block; width: 100%; height: 260px; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.8s ease; filter: brightness(0.9); } .vh-tile:hover img { transform: scale(1.08); filter: brightness(0.75); } /* Overlay gradiente scuro che si intensifica al hover */ .vh-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.6) 100%); transition: opacity 0.5s ease; opacity: 0.7; pointer-events: none; } .vh-tile:hover::after { opacity: 1; background: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, 0.8) 100%); } .vh-tile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85)); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; z-index: 2; transform: translateY(0); transition: transform 0.4s ease; } .vh-tile:hover .vh-tile__label { transform: translateY(-4px); } /* Etichetta di sede */ .vh-tile__sede { position: absolute; top: 14px; left: 14px; padding: 6px 14px; background: var(--vh-horizon); color: var(--vh-sea-deep); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; border-radius: 3px; z-index: 2; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .vh-tile:hover .vh-tile__sede { transform: scale(1.05); } .vh-tile:focus-visible { box-shadow: 0 0 0 3px var(--vh-paper), 0 0 0 6px var(--vh-gold) !important; } /* --- Birre artigianali — REDESIGN IMPATTANTE --- */ .vh-birra { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px 32px; text-decoration: none; background: #fff; border-radius: 4px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; overflow: hidden; position: relative; } .vh-birra::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vh-gold), var(--vh-salt), var(--vh-gold)); opacity: 0; transition: opacity 0.4s ease; } .vh-birra:hover::before { opacity: 1; } .vh-birra:hover { transform: translateY(-8px); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15); } .vh-birra img { width: 70%; max-height: 220px; object-fit: contain; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); margin-bottom: 16px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15)); } .vh-birra:hover img { transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.25)); } .vh-birra__name { font-size: clamp(1.2rem, 2.5vw, 1.5rem); color: var(--vh-ink); margin-bottom: 4px; transition: color 0.3s ease; } .vh-birra__note { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--vh-stone); transition: color 0.3s ease; } .vh-birra:hover .vh-birra__name { color: var(--vh-gold); } .vh-birra:hover .vh-birra__note { color: var(--vh-ink); } @media (max-width: 991.98px) { .vh-sede { min-height: 380px; padding: 30px; } .vh-section { padding: 60px 0; } /* Dopo .vh-section, che alla stessa specificita' vincerebbe per ordine. */ .vh-section--malto { padding-bottom: 272px; } /* STAGIONE BALNEARE (1 di 4) — la regola, e come tornare indietro. */ .vh-sedi__col--ammare { order: 1; } .vh-sedi__col--palermo { order: 2; } } @media (max-width: 767.98px) { .vh-section--malto { padding-bottom: 164px; } } @media (max-width: 575.98px) { .vh-sede { min-height: 330px; padding: 24px; } .vh-tile img { height: 180px; } } @media (prefers-reduced-motion: reduce) { .vh-sede__bg, .vh-sede__cta, .vh-tile img, .vh-birra { transition: none; } .vh-sede:hover .vh-sede__bg, .vh-sede:focus-visible .vh-sede__bg, .vh-tile:hover img, .vh-tile:focus-visible img { transform: none; } } /* FOCUS DA TASTIERA — regola globale (TASK 7.6) */ /* --- BLOCCO A: campi che il tema protegge con !important ------------------ */ .contact-form input:not([type="hidden"]):focus-visible, .contact-form textarea:focus-visible, .contact-form select:focus-visible, .field-item input:not([type="hidden"]):focus-visible, .field-item textarea:focus-visible, .review-form-area input:not([type="hidden"]):focus-visible, .review-form-area textarea:focus-visible, .search-wrapper .search-form input:focus-visible, input.field__input:focus-visible, input.footer-newsletter-input:focus-visible, input.filter-field:focus-visible, .filter-field input.field-input:focus-visible, input.form-check-input:focus-visible, input.input-counter__text:focus-visible, input.product-option__input:focus-visible, select.product-option__select:focus-visible { outline: 2px solid #1F1F1F !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(235, 199, 23, .65) !important; } /* --- BLOCCO B: tutto il resto, senza !important --------------------------- */ a:focus-visible, button:focus-visible, input:not([type="hidden"]):focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid #1F1F1F !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(235, 199, 23, .65) !important; } @media (prefers-contrast: more) { .contact-form input:not([type="hidden"]):focus-visible, .contact-form textarea:focus-visible, .contact-form select:focus-visible, a:focus-visible, button:focus-visible { outline-width: 3px; } } /* LA NOSTRA STORIA — .vcs-hub, le due porte di /page/ristorante */ .vcs-hub { position: relative; min-height: 100dvh; padding: 108px 0 0; background: var(--vh-night); overflow: hidden; } .vcs-hub__grana { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.16; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* --- la fascia editoriale: la pagina si presenta prima di far scegliere --- */ .vcs-hub__intro { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto 34px; padding: 0 28px; } .vcs-hub__kicker { display: inline-block; font-family: var(--primary-font); font-size: 10px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--vh-gold); margin-bottom: 20px; } .vcs-hub__kicker::before { content: ''; display: inline-block; width: 40px; height: 1px; background: var(--vh-gold); vertical-align: middle; margin-right: 14px; } .vcs-hub__titolo { font-size: clamp(34px, 4.1vw, 56px); line-height: 1.06; color: var(--vh-salt); margin: 0 0 18px; text-wrap: balance; } .vcs-hub__titolo em { font-style: italic; color: var(--vh-gold); } .vcs-hub__lead { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; line-height: 1.6; color: rgba(244, 239, 232, 0.72); max-width: 58ch; margin: 0; } /* --- le due porte --- */ .vcs-hub__porte { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 1240px; margin: 0 auto; padding: 0 28px 96px; } @media (min-width: 992px) { .vcs-hub__porte { /* asimmetria voluta: Palermo e' l'origine e pesa un po' di piu' */ grid-template-columns: 1.08fr 0.92fr; gap: 26px; align-items: start; } } .vcs-hub__card { position: relative; display: flex; align-items: flex-end; min-height: 460px; border-radius: 18px; overflow: hidden; isolation: isolate; text-decoration: none; transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.55s ease; } @media (min-width: 992px) { .vcs-hub__card { min-height: 500px; } .vcs-hub__card--ammare { margin-top: 52px; } } .vcs-hub__card:hover, .vcs-hub__card:focus-visible { transform: translateY(-6px); } .vcs-hub__card--palermo:hover, .vcs-hub__card--palermo:focus-visible { box-shadow: 0 26px 60px rgba(235, 199, 23, 0.16); } .vcs-hub__card--ammare:hover, .vcs-hub__card--ammare:focus-visible { box-shadow: 0 26px 60px rgba(184, 212, 232, 0.16); } .vcs-hub__card:focus-visible { outline: 2px solid var(--vh-salt); outline-offset: 4px; } .vcs-hub__card-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 1.1s cubic-bezier(0.23, 1, 0.32, 1); } .vcs-hub__card:hover .vcs-hub__card-bg { transform: scale(1.06); } .vcs-hub__card-veil { position: absolute; inset: 0; z-index: -1; } .vcs-hub__card--palermo .vcs-hub__card-veil { background: linear-gradient(to top, rgba(22, 19, 12, 0.97) 0%, rgba(22, 19, 12, 0.94) 42%, rgba(22, 19, 12, 0.78) 62%, rgba(22, 19, 12, 0.34) 100%); } .vcs-hub__card--ammare .vcs-hub__card-veil { background: radial-gradient(150% 125% at 6% 100%, rgba(13, 43, 66, 0.97) 0%, rgba(13, 43, 66, 0.93) 34%, rgba(13, 43, 66, 0.74) 60%, rgba(13, 43, 66, 0.26) 100%); } /* L'anno, grande e appena accennato: ancora la storia nel tempo */ .vcs-hub__card-anno { position: absolute; top: -14px; right: 18px; z-index: 1; font-family: 'Unbounded', var(--primary-font), sans-serif; font-weight: 200; font-size: clamp(88px, 11vw, 168px); line-height: 1; letter-spacing: -6px; pointer-events: none; user-select: none; } .vcs-hub__card--palermo .vcs-hub__card-anno { color: rgba(235, 199, 23, 0.13); } .vcs-hub__card--ammare .vcs-hub__card-anno { color: rgba(255, 255, 255, 0.20); } .vcs-hub__card-content { position: relative; z-index: 2; padding: 38px 30px 36px; max-width: 520px; } @media (min-width: 992px) { .vcs-hub__card-content { padding: 48px 48px 44px; } } .vcs-hub__card-num { display: block; font-family: 'Unbounded', var(--primary-font), sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 3px; margin-bottom: 14px; } .vcs-hub__card--palermo .vcs-hub__card-num { color: var(--vh-gold); } .vcs-hub__card--ammare .vcs-hub__card-num { color: var(--vh-horizon); } .vcs-hub__card-eyebrow { display: block; font-family: var(--primary-font); font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--vh-salt); margin-bottom: 16px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); } .vcs-hub__card-title { font-size: clamp(34px, 4.2vw, 58px); line-height: 1; color: var(--vh-salt); margin-bottom: 16px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); } .vcs-hub__card-title-sub { display: block; font-family: var(--primary-font); font-size: 0.235em; font-weight: 600; letter-spacing: 0.36em; text-transform: uppercase; text-indent: 0.36em; margin-top: 0.5em; color: rgba(244, 239, 232, 0.92); text-shadow: none; } .vcs-hub__card-desc { font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; line-height: 1.6; color: rgba(244, 239, 232, 0.8); margin-bottom: 30px; max-width: 42ch; } .vcs-hub__card-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--primary-font); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid currentColor; transition: gap 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease; } .vcs-hub__card-cta svg { width: 17px; height: 17px; flex: 0 0 17px; } .vcs-hub__card--palermo .vcs-hub__card-cta { color: var(--vh-gold); } .vcs-hub__card--ammare .vcs-hub__card-cta { color: var(--vh-horizon); } .vcs-hub__card:hover .vcs-hub__card-cta { gap: 18px; color: var(--vh-salt); } @media (max-width: 991.98px) { .vcs-hub { padding-top: 108px; } .vcs-hub__intro { margin-bottom: 34px; } .vcs-hub__porte { padding-bottom: 64px; } .vcs-hub__card-title { font-size: clamp(30px, 8.5vw, 44px); } .vcs-hub__card-anno { font-size: clamp(70px, 20vw, 110px); top: -8px; } } @media (prefers-reduced-motion: reduce) { .vcs-hub__card, .vcs-hub__card-bg, .vcs-hub__card-cta { transition: none; } .vcs-hub__card:hover { transform: none; } .vcs-hub__card:hover .vcs-hub__card-bg { transform: none; } } /* "COS'È QUESTA SEDE" — .vcs-vossia, la hero con le card delle due pagine sede */ .vcs-vossia { position: relative; padding: 108px 0 92px; overflow: hidden; background: var(--vh-night); } .vcs-vossia--ammare { background: var(--vh-sea-deep); } .vcs-vossia__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .vcs-vossia__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 19, 12, 0.93) 0%, rgba(22, 19, 12, 0.86) 45%, rgba(22, 19, 12, 0.94) 100%); } .vcs-vossia--ammare .vcs-vossia__veil { background: linear-gradient(180deg, rgba(13, 43, 66, 0.93) 0%, rgba(13, 43, 66, 0.86) 45%, rgba(13, 43, 66, 0.94) 100%); } .vcs-vossia__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--alt-font); font-size: clamp(120px, 20vw, 280px); color: rgba(255, 255, 255, 0.045); letter-spacing: 0.1em; pointer-events: none; user-select: none; white-space: nowrap; } /* --- intestazione: a sinistra, non piu' centrata --- */ .vcs-vossia__header { max-width: 760px; margin: 0 0 48px; position: relative; z-index: 1; } .vcs-vossia__eyebrow { font-family: var(--primary-font); font-size: 10px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--vh-gold); display: inline-block; margin-bottom: 18px; } .vcs-vossia__eyebrow::before { content: ''; display: inline-block; width: 38px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 14px; } .vcs-vossia--ammare .vcs-vossia__eyebrow { color: var(--vh-horizon); } .vcs-vossia__title { font-size: clamp(34px, 4.4vw, 58px); color: var(--vh-salt); margin-bottom: 16px; line-height: 1.06; text-wrap: balance; } .vcs-vossia__title em { font-style: italic; color: var(--vh-gold); } .vcs-vossia--ammare .vcs-vossia__title em { color: var(--vh-horizon); } .vcs-vossia__lead { font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; line-height: 1.62; color: rgba(244, 239, 232, 0.84); max-width: 62ch; } /* --- il bento --- */ .vcs-vossia__features { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 992px) { .vcs-vossia__features { /* la card grande pesa piu' delle tre strisce: e' l'identita' del posto */ grid-template-columns: 1.02fr 0.98fr; gap: 22px; align-items: stretch; } } /* --- la card grande, fotografica --- */ .vcs-vossia__grande { position: relative; display: flex; align-items: flex-end; min-height: 380px; border-radius: 20px; overflow: hidden; isolation: isolate; text-decoration: none; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; } @media (min-width: 992px) { .vcs-vossia__grande { min-height: 470px; } } .vcs-vossia__grande:hover, .vcs-vossia__grande:focus-visible { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.4); } .vcs-vossia__grande:focus-visible { outline: 2px solid var(--vh-salt); outline-offset: 4px; } .vcs-vossia__grande-foto { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 1.1s cubic-bezier(0.23, 1, 0.32, 1); } .vcs-vossia__grande:hover .vcs-vossia__grande-foto { transform: scale(1.06); } .vcs-vossia__grande-velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(22, 19, 12, 0.96) 0%, rgba(22, 19, 12, 0.88) 42%, rgba(22, 19, 12, 0.46) 74%, rgba(22, 19, 12, 0.24) 100%); } .vcs-vossia--ammare .vcs-vossia__grande-velo { background: linear-gradient(to top, rgba(13, 43, 66, 0.96) 0%, rgba(13, 43, 66, 0.88) 42%, rgba(13, 43, 66, 0.46) 74%, rgba(13, 43, 66, 0.22) 100%); } .vcs-vossia__grande-corpo { position: relative; z-index: 1; padding: 34px 30px 32px; } @media (min-width: 992px) { .vcs-vossia__grande-corpo { padding: 44px 44px 40px; } } .vcs-vossia__grande-icona { display: block; width: 40px; height: 40px; margin-bottom: 18px; color: var(--vh-gold); } .vcs-vossia--ammare .vcs-vossia__grande-icona { color: var(--vh-horizon); } .vcs-vossia__grande-icona svg { width: 100%; height: 100%; } .vcs-vossia__grande-titolo { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: var(--vh-salt); margin-bottom: 12px; } .vcs-vossia__grande-desc { font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; line-height: 1.6; color: rgba(244, 239, 232, 0.86); margin-bottom: 24px; max-width: 46ch; } .vcs-vossia__grande-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--primary-font); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--vh-gold); padding-bottom: 8px; border-bottom: 1px solid currentColor; transition: gap 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease; } .vcs-vossia--ammare .vcs-vossia__grande-cta { color: var(--vh-horizon); } .vcs-vossia__grande:hover .vcs-vossia__grande-cta { gap: 18px; color: var(--vh-salt); } /* --- le tre strisce in vetro --- */ .vcs-vossia__strisce { display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; } @media (min-width: 992px) { .vcs-vossia__strisce { gap: 22px; } } .vcs-vossia__striscia { position: relative; display: flex; align-items: center; gap: 20px; padding: 24px 24px; border-radius: 16px; text-decoration: none; color: var(--vh-salt); background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background 0.35s ease, border-color 0.35s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1); } @media (min-width: 992px) { .vcs-vossia__striscia { padding: 26px 28px; } } .vcs-vossia__striscia:hover, .vcs-vossia__striscia:focus-visible { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24); transform: translateX(6px); } .vcs-vossia__striscia:focus-visible { outline: 2px solid var(--vh-salt); outline-offset: 3px; } .vcs-vossia__striscia-icona { flex: 0 0 38px; width: 38px; height: 38px; color: var(--vh-gold); transition: transform 0.4s ease; } .vcs-vossia--ammare .vcs-vossia__striscia-icona { color: var(--vh-horizon); } .vcs-vossia__striscia-icona svg { width: 100%; height: 100%; } .vcs-vossia__striscia:hover .vcs-vossia__striscia-icona { transform: scale(1.08); } .vcs-vossia__striscia-testo { flex: 1 1 auto; min-width: 0; } .vcs-vossia__striscia-titolo { display: block; font-family: var(--alt-font); font-size: 17px; line-height: 1.2; color: var(--vh-salt); margin-bottom: 6px; } .vcs-vossia__striscia-desc { display: block; font-size: 14px; line-height: 1.55; color: rgba(244, 239, 232, 0.76); } .vcs-vossia__striscia .vcs-vossia__freccia { flex: 0 0 18px; width: 18px; height: 18px; color: rgba(244, 239, 232, 0.5); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease; } .vcs-vossia__striscia:hover .vcs-vossia__freccia { transform: translateX(5px); color: var(--vh-salt); } .vcs-vossia__grande-cta .vcs-vossia__freccia { width: 17px; height: 17px; flex: 0 0 17px; } /* --- schermi stretti --- */ @media (max-width: 991.98px) { .vcs-vossia { padding: 84px 0 66px; } .vcs-vossia__header { margin-bottom: 34px; } .vcs-vossia__lead { font-size: 18px; } } @media (max-width: 575.98px) { .vcs-vossia__eyebrow { letter-spacing: 3px; } .vcs-vossia__eyebrow::before { display: none; } .vcs-vossia__striscia { gap: 16px; padding: 20px 18px; } .vcs-vossia__striscia-icona { flex-basis: 32px; width: 32px; height: 32px; } .vcs-vossia__grande-corpo { padding: 28px 22px 26px; } } @media (prefers-reduced-motion: reduce) { .vcs-vossia__grande, .vcs-vossia__grande-foto, .vcs-vossia__striscia, .vcs-vossia__freccia { transition: none; } .vcs-vossia__grande:hover, .vcs-vossia__striscia:hover { transform: none; } .vcs-vossia__grande:hover .vcs-vossia__grande-foto { transform: none; } } /* CHI SIAMO — /page/chi-siamo */ :root { --vcs-gold: #EBC717; --vcs-gold-dark: #B8960F; --vcs-ink: #1A1410; --vcs-cream: #F5EFE0; --vcs-paper: #EDE5D0; --vcs-warm-gray: #A89880; --vcs-rust: #8B3A1E; --vcs-dark: #110E0A; --vcs-section-bg: #F9F3E8; } .vossia-cs-sans { font-family: 'Unbounded', sans-serif; } .vossia-cs-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: 90px; overflow: hidden; background-color: var(--vcs-ink); } .vossia-cs-hero__bg { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1600&q=80'); background-size: cover; background-position: center 30%; filter: brightness(0.30) saturate(0.55); transform: scale(1.04); transition: transform 14s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .vossia-cs-hero__bg.vossia-cs-ready { transform: scale(1); } .vossia-cs-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 14, 10, .92) 0%, rgba(17, 14, 10, .1) 60%, transparent 100%); } .vossia-cs-hero__year { font-family: 'Unbounded', sans-serif; font-weight: 200; font-size: clamp(120px, 18vw, 240px); line-height: 1; color: rgba(235, 199, 23, .07); position: absolute; right: -20px; bottom: 60px; letter-spacing: -8px; pointer-events: none; user-select: none; } .vossia-cs-hero__eyebrow { font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--vcs-gold); margin-bottom: 20px; display: flex; align-items: center; gap: 14px; } .vossia-cs-hero__eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: var(--vcs-gold); } .vossia-cs-hero__title { font-weight: 300; font-size: clamp(52px, 8vw, 110px); line-height: .92; color: var(--vcs-cream); letter-spacing: -2px; margin-bottom: 28px; } .vossia-cs-hero__title em { font-style: italic; color: var(--vcs-gold); } .vossia-cs-hero__sub { font-weight: 300; font-size: 18px; color: var(--vcs-warm-gray); letter-spacing: .5px; max-width: 440px; } .vossia-cs-hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: 'Unbounded', sans-serif; font-size: 8px; letter-spacing: 4px; color: var(--vcs-warm-gray); text-transform: uppercase; text-decoration: none; } .vossia-cs-hero__scroll span { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--vcs-gold), transparent); animation: vcs-scroll-line 2s ease-in-out infinite; } @keyframes vcs-scroll-line { 0%, 100% { opacity: .4; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } .vossia-cs-intro { background: var(--vcs-section-bg); padding: 120px 0 100px; position: relative; overflow: hidden; } .vossia-cs-intro__watermark { position: absolute; font-weight: 600; font-size: clamp(80px, 14vw, 180px); color: rgba(26, 20, 16, .05); top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: -4px; } .vossia-cs-intro__quote { font-weight: 300; font-size: clamp(32px, 4.5vw, 58px); line-height: 1.25; color: var(--vcs-ink); letter-spacing: -.5px; } .vossia-cs-intro__quote strong { font-weight: 600; font-style: italic; color: var(--vcs-rust); } .vossia-cs-intro__line { width: 1px; height: 80px; background: var(--vcs-gold); margin: 40px auto; } .vossia-cs-intro__caption { font-family: 'Unbounded', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(--vcs-warm-gray); text-align: center; } .vossia-cs-story { padding: 100px 0; } .vossia-cs-story--dark { background: var(--vcs-dark); color: var(--vcs-cream); } .vossia-cs-story--light { background: #fff; color: var(--vcs-ink); } .vossia-cs-story--paper { background: var(--vcs-section-bg); color: var(--vcs-ink); } .vossia-cs-story__chapter { font-family: 'Unbounded', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 5px; text-transform: uppercase; color: var(--vcs-gold); display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .vossia-cs-story__chapter::before { content: ''; display: block; width: 32px; height: 1px; background: var(--vcs-gold); } .vossia-cs-story__heading { font-weight: 300; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.05; letter-spacing: -1px; margin-bottom: 32px; } .vossia-cs-story--dark .vossia-cs-story__heading { color: var(--vcs-cream); } .vossia-cs-story--light .vossia-cs-story__heading { color: var(--vcs-ink); } .vossia-cs-story--paper .vossia-cs-story__heading { color: var(--vcs-ink); } .vossia-cs-story__heading em { font-style: italic; color: var(--vcs-gold); } .vossia-cs-story__body { font-weight: 400; font-size: 19px; line-height: 1.8; color: var(--vcs-warm-gray); max-width: 540px; } .vossia-cs-story--light .vossia-cs-story__body, .vossia-cs-story--paper .vossia-cs-story__body, .vossia-cs-sedi__lead { color: #5A4E40; } .vossia-cs-story__img-wrap { position: relative; overflow: hidden; border-radius: 2px; } .vossia-cs-story__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .vossia-cs-story__img-wrap:hover img { transform: scale(1.04); } .vossia-cs-story__img-caption { position: absolute; bottom: 16px; left: 16px; font-family: 'Unbounded', sans-serif; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: rgba(245, 239, 224, .6); background: rgba(17, 14, 10, .5); padding: 6px 10px; backdrop-filter: blur(4px); } .vossia-cs-story__img-main { height: 520px; } .vossia-cs-story__img-small { height: 240px; margin-top: -80px; margin-left: 40px; width: calc(100% - 40px); border: 4px solid #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .2); position: relative; z-index: 2; } @media (max-width: 767px) { .vossia-cs-story__img-main { height: 320px; } .vossia-cs-story__img-small { height: 200px; margin-top: 16px; margin-left: 0; width: 100%; border: 0; box-shadow: none; } } .vossia-cs-timeline { background: var(--vcs-dark); padding: 100px 0 120px; position: relative; overflow: hidden; } .vossia-cs-timeline__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(235, 199, 23, .15); transform: translateX(-50%); } @media (max-width: 991px) { .vossia-cs-timeline__track { left: 32px; } } .vossia-cs-timeline__item { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0 24px; margin-bottom: 72px; align-items: start; } @media (max-width: 991px) { .vossia-cs-timeline__item { grid-template-columns: 48px 1fr; grid-template-rows: auto; margin-left: 8px; } } .vossia-cs-timeline__dot { grid-column: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--vcs-gold); border: 3px solid var(--vcs-dark); outline: 1px solid var(--vcs-gold); margin: 4px auto 0; flex-shrink: 0; position: relative; z-index: 1; } @media (max-width: 991px) { .vossia-cs-timeline__dot { grid-column: 1; grid-row: 1; } } .vossia-cs-timeline__content-left { grid-column: 1; text-align: right; padding-right: 8px; } .vossia-cs-timeline__content-right { grid-column: 3; padding-left: 8px; } @media (max-width: 991px) { .vossia-cs-timeline__content-left, .vossia-cs-timeline__content-right { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 0 12px; } } .vossia-cs-timeline__year { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(32px, 4vw, 52px); color: rgba(235, 199, 23, .15); line-height: 1; margin-bottom: 4px; letter-spacing: -2px; } .vossia-cs-timeline__label { font-family: 'Unbounded', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--vcs-gold); margin-bottom: 10px; } .vossia-cs-timeline__text { font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--vcs-warm-gray); } .vossia-cs-pillars { background: var(--vcs-section-bg); padding: 100px 0 120px; } .vossia-cs-pillars__heading { font-weight: 300; font-size: clamp(40px, 5vw, 68px); color: var(--vcs-ink); line-height: 1.05; letter-spacing: -1px; margin-bottom: 60px; } .vossia-cs-pillars__heading em { font-style: italic; color: var(--vcs-rust); } .vossia-cs-pillar { border-top: 1px solid rgba(26, 20, 16, .12); padding: 36px 0 28px; position: relative; transition: border-color .3s; } .vossia-cs-pillar:hover { border-color: var(--vcs-gold); } .vossia-cs-pillar__num { font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 200; letter-spacing: 2px; color: var(--vcs-gold); margin-bottom: 16px; } .vossia-cs-pillar__title { font-weight: 600; font-size: 26px; color: var(--vcs-ink); margin-bottom: 12px; letter-spacing: -.3px; } .vossia-cs-pillar__text { font-size: 17px; line-height: 1.7; color: #6B5A48; } .vossia-cs-pillar__arrow { position: absolute; top: 36px; right: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(26, 20, 16, .15); display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s; } .vossia-cs-pillar:hover .vossia-cs-pillar__arrow { background: var(--vcs-gold); border-color: var(--vcs-gold); } .vossia-cs-pillar__arrow svg { width: 12px; height: 12px; fill: none; stroke: var(--vcs-ink); stroke-width: 1.5; transform: rotate(-45deg); transition: transform .3s; } .vossia-cs-pillar:hover .vossia-cs-pillar__arrow svg { transform: rotate(0deg); } .vossia-cs-closing { background: var(--vcs-dark); padding: 120px 0; text-align: center; position: relative; overflow: hidden; } .vossia-cs-closing__bg { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1400&q=70'); background-size: cover; background-position: center; filter: brightness(.18) saturate(.4); } .vossia-cs-closing__tagline { font-weight: 300; font-style: italic; font-size: clamp(28px, 4vw, 52px); color: var(--vcs-cream); letter-spacing: -.5px; line-height: 1.3; margin-bottom: 12px; } .vossia-cs-closing__tagline strong { display: block; font-weight: 600; font-style: normal; color: var(--vcs-gold); font-size: .85em; letter-spacing: 2px; text-transform: uppercase; font-family: 'Unbounded', sans-serif; font-size: clamp(11px, 1.2vw, 15px); margin-bottom: 16px; } /* TASK 6 (Fase 2) — le due sedi dentro la storia */ .vossia-cs-sedi { background: var(--vcs-section-bg); padding: 100px 0 0; } .vossia-cs-sedi__intro { margin-bottom: 60px; } .vossia-cs-sedi__intro .vossia-cs-story__heading { color: var(--vcs-ink); margin-bottom: 24px; } .vossia-cs-sedi__intro .vossia-cs-story__heading em { color: var(--vcs-rust); } .vossia-cs-sedi__lead { font-size: 19px; line-height: 1.8; max-width: 520px; margin: 0 auto; } .vossia-cs-sede { display: block; padding: 96px 0; background: var(--vb-ink); } .vossia-cs-sede__testo { max-width: 588px; } .vossia-cs-sede .vlogo { display: flex; width: fit-content; margin-bottom: 26px; } .vossia-cs-sede .vossia-cs-story__chapter { color: var(--vb-accent); } .vossia-cs-sede .vossia-cs-story__chapter::before { background: var(--vb-accent); flex-shrink: 0; } .vossia-cs-sede__eyebrow { line-height: 1.6; } .vossia-cs-sede .vossia-cs-story__heading { color: var(--vh-salt); } .vossia-cs-sede .vossia-cs-story__body { color: rgba(244, 239, 232, .84); } .vossia-cs-sede .vossia-cs-story__img-caption { color: var(--vh-salt); background: rgba(17, 14, 10, .72); } .vossia-cs-sede .vossia-cs-sede__name { font-size: clamp(30px, 3.2vw, 44px); margin-bottom: 26px; } .vossia-cs-sede__cta { display: flex; width: fit-content; margin-top: 30px; } @media (max-width: 991.98px) { .vossia-cs-sedi { padding-top: 72px; } .vossia-cs-sede { padding: 64px 0; } .vossia-cs-sedi { display: flex; flex-direction: column; } .vossia-cs-sede--ammare { order: 1; } .vossia-cs-sede--palermo { order: 2; } } @media (prefers-reduced-motion: reduce) { .vossia-cs-story__img-wrap img, .vossia-cs-story__img-wrap:hover img { transition: none; transform: none; } } /* VOSSIA AMMARE — /page/vossia-ammare */ :root { --vcs-am-sea: #1B4A6E; --vcs-am-sea-deep: #0D2B42; --vcs-am-horizon: #B8D4E8; --vcs-am-sand: #E8D9C0; --vcs-am-salt: #F4EFE8; --vcs-am-gold: #EBC717; --vcs-am-coral: #D4613A; --vcs-am-stone: #7A8A8F; --vcs-am-dark: #080F14; --vcs-am-ink: #0F1E29; } .vossia-cs-am-serif { font-family: 'Cormorant Garamond', Georgia, serif; } .vossia-cs-am-sans { font-family: 'Unbounded', sans-serif; } .vossia-cs-am-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: 90px; overflow: hidden; background: var(--vcs-am-dark); } .vossia-cs-am-hero__bg { position: absolute; inset: 0; background-image: url('https://www.pscdn.it/img/137/26/05/14897-foto-vossia-ammare-3.webp'); background-size: cover; background-position: center 45%; filter: brightness(.32) saturate(.7); transform: scale(1.04); transition: transform 14s cubic-bezier(.25, .46, .45, .94); } .vossia-cs-am-hero__bg.vossia-cs-am-ready { transform: scale(1); } .vossia-cs-am-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 15, 20, .95) 0%, rgba(8, 15, 20, .2) 55%, transparent 100%), linear-gradient(to right, rgba(8, 15, 20, .6) 0%, transparent 60%); } .vossia-cs-am-hero__waves { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none; } .vossia-cs-am-hero__waves svg { width: 100%; height: 100%; } .vossia-cs-am-wave-1 { animation: vcs-wave 8s ease-in-out infinite; } .vossia-cs-am-wave-2 { animation: vcs-wave 10s ease-in-out infinite reverse; opacity: .4; } @keyframes vcs-wave { 0%, 100% { d: path('M0 60 Q200 20 400 60 T800 60 T1200 60 T1600 60 V120 H0Z'); } 50% { d: path('M0 60 Q200 90 400 60 T800 60 T1200 60 T1600 60 V120 H0Z'); } } .vossia-cs-am-hero__badge { position: absolute; top: 40px; right: 40px; width: 90px; height: 90px; border-radius: 50%; border: 1px solid rgba(235, 199, 23, .4); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: 'Unbounded', sans-serif; font-size: 7px; letter-spacing: 2px; text-transform: uppercase; color: var(--vcs-am-gold); line-height: 1.6; animation: vcs-badge-spin 20s linear infinite; } @keyframes vcs-badge-spin { to { transform: rotate(360deg); } } .vossia-cs-am-hero__badge span { animation: vcs-badge-spin 20s linear infinite reverse; display: block; font-size: 18px; font-weight: 200; letter-spacing: 0; margin-bottom: 2px; } .vossia-cs-am-hero__eyebrow { font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--vcs-am-horizon); margin-bottom: 20px; display: flex; align-items: center; gap: 14px; } .vossia-cs-am-hero__eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: var(--vcs-am-horizon); } .vossia-cs-am-hero__title { font-weight: 300; font-size: clamp(54px, 9vw, 120px); line-height: .9; letter-spacing: -3px; color: var(--vcs-am-salt); margin-bottom: 28px; } .vossia-cs-am-hero__title em { font-style: italic; color: var(--vcs-am-horizon); font-weight: 300; } .vossia-cs-am-hero__sub { font-weight: 300; font-size: 18px; color: var(--vcs-am-stone); max-width: 420px; line-height: 1.6; } .vossia-cs-am-hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: 'Unbounded', sans-serif; font-size: 8px; letter-spacing: 4px; color: var(--vcs-am-stone); text-transform: uppercase; text-decoration: none; } .vossia-cs-am-hero__scroll span { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--vcs-am-horizon), transparent); animation: vcs-am-scroll 2s ease-in-out infinite; } @keyframes vcs-am-scroll { 0%, 100% { opacity: .4; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } .vossia-cs-am-opening { background: var(--vcs-am-ink); padding: 110px 0 100px; position: relative; overflow: hidden; } .vossia-cs-am-opening::before { content: 'Ammare'; position: absolute; font-weight: 600; font-size: clamp(80px, 18vw, 200px); color: rgba(184, 212, 232, .04); top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: -6px; } .vossia-cs-am-opening__quote { font-weight: 300; font-size: clamp(30px, 4.5vw, 56px); line-height: 1.25; color: var(--vcs-am-salt); letter-spacing: -.5px; } .vossia-cs-am-opening__quote strong { font-style: italic; font-weight: 400; color: var(--vcs-am-horizon); } .vossia-cs-am-opening__divider { width: 60px; height: 1px; background: var(--vcs-am-gold); margin: 40px auto; } .vossia-cs-am-opening__caption { font-family: 'Unbounded', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(--vcs-am-stone); text-align: center; } .vossia-cs-am-story { padding: 100px 0; } .vossia-cs-am-story--sea { background: var(--vcs-am-dark); color: var(--vcs-am-salt); } .vossia-cs-am-story--light { background: var(--vcs-am-salt); color: var(--vcs-am-ink); } .vossia-cs-am-story--sand { background: var(--vcs-am-sand); color: var(--vcs-am-ink); } .vossia-cs-am-story__chapter { font-family: 'Unbounded', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 5px; text-transform: uppercase; color: var(--vcs-am-gold); display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .vossia-cs-am-story__chapter::before { content: ''; display: block; width: 32px; height: 1px; background: var(--vcs-am-gold); } .vossia-cs-am-story__heading { font-weight: 300; font-size: clamp(36px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -1px; margin-bottom: 32px; } .vossia-cs-am-story--sea .vossia-cs-am-story__heading { color: var(--vcs-am-salt); } .vossia-cs-am-story--light .vossia-cs-am-story__heading, .vossia-cs-am-story--sand .vossia-cs-am-story__heading { color: var(--vcs-am-sea-deep); } .vossia-cs-am-story__heading em { font-style: italic; color: var(--vcs-am-horizon); } .vossia-cs-am-story--light .vossia-cs-am-story__heading em, .vossia-cs-am-story--sand .vossia-cs-am-story__heading em { color: var(--vcs-am-coral); } .vossia-cs-am-story__body { font-weight: 400; font-size: 19px; line-height: 1.8; } .vossia-cs-am-story--sea .vossia-cs-am-story__body { color: var(--vcs-am-stone); } .vossia-cs-am-story--light .vossia-cs-am-story__body, .vossia-cs-am-story--sand .vossia-cs-am-story__body { color: #4A5F6A; } .vossia-cs-am-img { position: relative; overflow: hidden; border-radius: 2px; } .vossia-cs-am-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s cubic-bezier(.25, .46, .45, .94); } .vossia-cs-am-img:hover img { transform: scale(1.05); } .vossia-cs-am-img--tall { height: 540px; } .vossia-cs-am-img--medium { height: 380px; } .vossia-cs-am-img--wide { height: 420px; } .vossia-cs-am-img__caption { position: absolute; bottom: 16px; left: 16px; font-family: 'Unbounded', sans-serif; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: rgba(244, 239, 232, .6); background: rgba(8, 15, 20, .55); padding: 6px 10px; backdrop-filter: blur(4px); } .vossia-cs-am-img__overlay-tag { position: absolute; top: 20px; right: 20px; font-family: 'Unbounded', sans-serif; font-size: 8px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--vcs-am-gold); background: rgba(8, 15, 20, .8); padding: 8px 12px; border: 1px solid rgba(235, 199, 23, .3); } .vossia-cs-am-menu { background: var(--vcs-am-sea-deep); padding: 100px 0 110px; } .vossia-cs-am-menu__heading { font-weight: 300; font-size: clamp(36px, 4vw, 56px); color: var(--vcs-am-salt); letter-spacing: -1px; line-height: 1.05; margin-bottom: 60px; } .vossia-cs-am-menu__heading em { font-style: italic; color: var(--vcs-am-horizon); } .vossia-cs-am-dish { border-top: 1px solid rgba(184, 212, 232, .12); padding: 28px 0; display: flex; align-items: baseline; gap: 20px; transition: border-color .3s; } .vossia-cs-am-dish:hover { border-color: rgba(184, 212, 232, .4); } .vossia-cs-am-dish__cat { font-family: 'Unbounded', sans-serif; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--vcs-am-gold); width: 80px; flex-shrink: 0; } .vossia-cs-am-dish__name { font-weight: 600; font-size: 22px; color: var(--vcs-am-salt); flex: 1; letter-spacing: -.2px; } .vossia-cs-am-dish__desc { font-size: 16px; color: var(--vcs-am-stone); font-style: italic; } .vossia-cs-am-values { background: var(--vcs-am-salt); padding: 100px 0 110px; } .vossia-cs-am-values__heading { font-weight: 300; font-size: clamp(38px, 4.5vw, 60px); color: var(--vcs-am-sea-deep); letter-spacing: -1px; line-height: 1.05; margin-bottom: 60px; } .vossia-cs-am-values__heading em { font-style: italic; color: var(--vcs-am-coral); } .vossia-cs-am-value { padding: 0 0 40px; border-bottom: 1px solid rgba(27, 74, 110, .1); margin-bottom: 40px; position: relative; } .vossia-cs-am-value__num { font-family: 'Unbounded', sans-serif; font-size: 10px; font-weight: 200; letter-spacing: 2px; color: var(--vcs-am-gold); margin-bottom: 14px; } .vossia-cs-am-value__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(27, 74, 110, .2); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background .3s, border-color .3s; } .vossia-cs-am-value:hover .vossia-cs-am-value__icon { background: var(--vcs-am-gold); border-color: var(--vcs-am-gold); } .vossia-cs-am-value__icon svg { width: 18px; height: 18px; stroke: var(--vcs-am-sea); fill: none; stroke-width: 1.5; transition: stroke .3s; } .vossia-cs-am-value:hover .vossia-cs-am-value__icon svg { stroke: var(--vcs-am-ink); } .vossia-cs-am-value__title { font-weight: 600; font-size: 26px; color: var(--vcs-am-sea-deep); margin-bottom: 12px; } .vossia-cs-am-value__text { font-size: 17px; line-height: 1.75; color: #4A5F6A; } .vossia-cs-am-closing { position: relative; padding: 130px 0; text-align: center; overflow: hidden; background: var(--vcs-am-dark); } .vossia-cs-am-closing__bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(27, 74, 110, .55), transparent 70%), linear-gradient(180deg, var(--vcs-am-ink), var(--vcs-am-dark)); } .vossia-cs-am-closing__label { font-family: 'Unbounded', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(--vcs-am-gold); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 14px; } .vossia-cs-am-closing__label::before, .vossia-cs-am-closing__label::after { content: ''; display: block; width: 40px; height: 1px; background: var(--vcs-am-gold); } .vossia-cs-am-closing__quote { font-weight: 300; font-size: clamp(30px, 5vw, 64px); line-height: 1.15; color: var(--vcs-am-salt); letter-spacing: -1px; margin-bottom: 40px; } .vossia-cs-am-closing__quote em { font-style: italic; color: var(--vcs-am-horizon); } .vossia-cs-am-reveal { opacity: 0; transform: translateY(36px); transition: opacity .85s cubic-bezier(.4, 0, .2, 1), transform .85s cubic-bezier(.4, 0, .2, 1); } .vossia-cs-am-reveal.vossia-cs-am-visible { opacity: 1; transform: translateY(0); } .vossia-cs-am-d1 { transition-delay: .15s; } .vossia-cs-am-d2 { transition-delay: .30s; } .vossia-cs-am-d3 { transition-delay: .45s; } @media (max-width: 767px) { .vossia-cs-am-img--tall { height: 320px; } .vossia-cs-am-img--medium { height: 260px; } .vossia-cs-am-img--wide { height: 280px; } .vossia-cs-am-hero__badge { display: none; } .vossia-cs-am-dish { flex-direction: column; gap: 6px; } } /* HOMEPAGE — blocco "app" (.vapp) — REDESIGN */ .vapp { position: relative; overflow: hidden; background: var(--vh-paper); padding: 100px 0; } /* Watermark "APP" */ .vapp::before { content: "APP"; position: absolute; top: 50%; right: -40px; transform: translateY(-50%) rotate(-12deg); font-family: "Abril Fatface", serif; font-size: clamp(180px, 22vw, 320px); color: rgba(235, 199, 23, 0.04); letter-spacing: 0.15em; pointer-events: none; user-select: none; } /* Alone dorato */ .vapp::after { content: ''; position: absolute; top: 50%; right: 15%; transform: translate(50%, -50%); width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(235, 199, 23, 0.1) 0%, rgba(235, 199, 23, 0.03) 40%, transparent 70%); pointer-events: none; animation: vapp-halo-pulse 5s ease-in-out infinite; } @keyframes vapp-halo-pulse { 0%, 100% { transform: translate(50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(50%, -50%) scale(1.12); opacity: 0.7; } } .vapp__eyebrow { font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(--vh-gold); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .vapp__eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--vh-gold); display: block; } .vapp__subtitle { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--vh-ink); margin-bottom: 16px; } .vapp__title { font-family: var(--alt-font); /* Rye — stesso font di "I nostri video" e titoli homepage */ font-weight: 400; font-size: clamp(38px, 4.5vw, 60px); line-height: 1; color: var(--vh-ink); margin-bottom: 28px; } .vapp__title em { font-style: italic; color: #b8860b; font-family: "Cormorant Garamond", Georgia, serif; } .vapp__desc { font-size: 19px; line-height: 1.75; color: #6B5A48; max-width: 460px; margin-bottom: 32px; } /* E' una <ul>: senza azzerare il rientro di lista restano 24px di padding a sinistra e 0 a destra, e la riga centrata finisce 12px fuori asse. Sul desktop gli stessi 24px rientravano le pillole rispetto al testo sopra. */ .vapp__features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; padding-left: 0; list-style: none; } .vapp__feature { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--vh-ink); border: 1px solid rgba(26, 20, 16, .15); border-radius: 30px; padding: 10px 20px; background: #fff; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .vapp__feature:hover { transform: translateY(-2px); border-color: var(--vh-gold); box-shadow: 0 8px 20px rgba(26, 20, 16, .08); } .vapp__stores { display: flex; flex-wrap: wrap; gap: 12px; } .vapp__store { display: inline-flex; align-items: center; gap: 11px; background: #1A1410; color: #F5EFE0; border-radius: 12px; padding: 14px 26px; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; min-width: 180px; } .vapp__store:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); color: #F5EFE0; } .vapp__store-text { display: flex; flex-direction: column; line-height: 1; } .vapp__store-small { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .6; margin-bottom: 4px; } .vapp__store-name { font-size: 18px; font-weight: 600; letter-spacing: -.3px; } .vapp__phone-wrap { position: relative; display: flex; justify-content: center; align-items: center; padding: 40px 0; z-index: 2; } .vapp__halo { position: absolute; top: 50%; left: 50%; width: min(480px, 90%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(235, 199, 23, .25) 0%, rgba(235, 199, 23, .10) 45%, transparent 70%); } .vapp__ring { position: absolute; top: 50%; left: 50%; width: min(420px, 80%); aspect-ratio: 1; border: 1.5px dashed rgba(184, 132, 10, .35); border-radius: 50%; pointer-events: none; animation: vapp-ring-spin 40s linear infinite; } @keyframes vapp-ring-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .vapp__phone-img { position: relative; z-index: 2; width: min(320px, 70%); height: auto; transform: rotate(-5deg); animation: vapp-phone-float 5s ease-in-out infinite; filter: drop-shadow(0 30px 50px rgba(26, 20, 16, .25)); } @keyframes vapp-phone-float { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-14px); } } .vapp__chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fff; border: 1px solid rgba(26, 20, 16, .08); border-radius: 14px; box-shadow: 0 15px 35px rgba(26, 20, 16, .12); font-size: 13px; font-weight: 600; color: #1A1410; animation: vapp-chip-float 6s ease-in-out infinite; } .vapp__chip small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .5px; color: #6B5A48; } .vapp__chip--1 { top: 8%; left: 0; } .vapp__chip--2 { bottom: 10%; right: 0; animation-delay: 1.2s; } .vapp__tick { flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vh-gold); color: #1A1410; font-weight: 700; } @keyframes vapp-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (max-width: 991.98px) { .vapp { padding: 80px 0; } } @media (max-width: 767.98px) { .vapp { padding: 70px 0; text-align: center; } .vapp__eyebrow { justify-content: center; } .vapp__desc { margin-left: auto; margin-right: auto; } .vapp__features, .vapp__stores { justify-content: center; } .vapp__chip { display: none; } .vapp__phone-img { width: min(280px, 80%); } } @media (prefers-reduced-motion: reduce) { .vapp__phone-img, .vapp__ring, .vapp__chip { animation: none; } .vapp__phone-img { transform: rotate(-5deg); } .vapp__feature, .vapp__store { transition: none; } .vapp__feature:hover, .vapp__store:hover { transform: none; } } /* CARD HOMEPAGE — stile moderno + animazioni allo scroll */ /* Card generiche della homepage — stile moderno */ .vhome-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease; /* Animazione iniziale — parte invisibile */ opacity: 0; transform: translateY(40px); } .vhome-card.vhome-card--visible { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease; } .vhome-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } /* ANIMAZIONI IN/OUT SEZIONI HOMEPAGE — IntersectionObserver custom */ /* Stato iniziale (nascosto) — tutte le sezioni con .anim-section */ .anim-section { opacity: 0; transform: translateY(50px); transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; } /* Stato visibile (quando entra nel viewport) */ .anim-section.anim-visible { opacity: 1; transform: translateY(0); } /* Variazioni per tipo di sezione — diverse direzioni e intensità */ /* App: entra dal basso con scale leggero */ .vapp.anim-section { transform: translateY(60px) scale(0.97); } .vapp.anim-section.anim-visible { transform: translateY(0) scale(1); transition-duration: 1s; } /* Video: entra dall'alto con fade */ #section-video.anim-section { transform: translateY(-40px); } #section-video.anim-section.anim-visible { transform: translateY(0); transition-duration: 0.8s; } /* Sedi: entra dal basso con scale */ #section-sedi-home.anim-section { transform: translateY(50px) scale(0.96); } #section-sedi-home.anim-section.anim-visible { transform: translateY(0) scale(1); transition-duration: 1s; } /* Piatti: entrano da lati opposti */ .vdish-hero.anim-section { transform: translateX(60px); transition-duration: 1s; } .vdish-hero.anim-section.anim-visible { transform: translateX(0); transition-duration: 1s; } /* Primo piatto da sinistra, secondo da destra */ .vdish-hero:nth-of-type(1).anim-section { transform: translateX(-60px); } /* Mappa: entra dal basso */ .vmap-section.anim-section { transform: translateY(50px) scale(0.98); } .vmap-section.anim-section.anim-visible { transform: translateY(0) scale(1); transition-duration: 1s; } /* Prenotazione: entra con eleganza dal basso */ #prenotatavolo.anim-section { transform: translateY(60px); } #prenotatavolo.anim-section.anim-visible { transform: translateY(0); transition-duration: 1.1s; } /* Recensioni: entra dall'alto */ #prenotatavolo~section.anim-section { transform: translateY(-30px); } #prenotatavolo~section.anim-section.anim-visible { transform: translateY(0); transition-duration: 0.8s; } /* Stagger delay per elementi sequenziali */ .vdish-hero:nth-of-type(1) { transition-delay: 0.1s; } .vdish-hero:nth-of-type(2) { transition-delay: 0.25s; } /* Reduced motion — disabilita tutto */ @media (prefers-reduced-motion: reduce) { .anim-section { opacity: 1; transform: none; transition: none; } .anim-section.anim-visible { opacity: 1; transform: none; } } /* Mobile: animazioni più rapide e leggermente più intense */ @media (max-width: 767.98px) { .anim-section { transform: translateY(35px); transition-duration: 0.7s; } .vapp.anim-section { transform: translateY(40px) scale(0.98); } #section-video.anim-section { transform: translateY(-25px); } #section-sedi-home.anim-section { transform: translateY(35px) scale(0.98); } .vdish-hero.anim-section { transform: translateX(40px); } .vdish-hero:nth-of-type(1).anim-section { transform: translateX(-40px); } .vmap-section.anim-section { transform: translateY(35px); } #prenotatavolo.anim-section { transform: translateY(40px); } } /* LA MATTA — REDESIGN IMPATTANTE */ /* Hero */ .vlm-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; isolation: isolate; background: var(--vh-night); } .vlm-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: brightness(0.4); } .vlm-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 19, 12, 0.3) 0%, rgba(22, 19, 12, 0.7) 50%, rgba(22, 19, 12, 0.95) 100%); } .vlm-hero__content { text-align: center; padding: 120px 20px 80px; } .vlm-hero__eyebrow { font-family: var(--primary-font); font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: var(--vh-gold); display: inline-block; padding: 8px 24px; border: 1px solid rgba(235, 199, 23, 0.3); border-radius: 50px; margin-bottom: 24px; } .vlm-hero__title { font-size: clamp(48px, 8vw, 96px); color: var(--vh-salt); margin-bottom: 16px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } .vlm-hero__subtitle { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(20px, 3vw, 32px); color: rgba(244, 239, 232, 0.7); margin-bottom: 40px; } .vlm-hero__subtitle em { color: var(--vh-gold); font-style: italic; } .vlm-hero__coin { margin-bottom: 50px; } .vlm-hero__coin-img { animation: vlm-coin-spin 3s linear infinite; filter: drop-shadow(0 8px 24px rgba(235, 199, 23, 0.4)); } @keyframes vlm-coin-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .vlm-hero__scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--vh-gold); text-decoration: none; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; animation: vlm-scroll-bounce 2s ease-in-out infinite; } @keyframes vlm-scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* Sezione regole */ .vlm-regole { background: var(--vh-paper); padding: 100px 0 60px; } .vlm-regole__header { text-align: center; max-width: 700px; margin: 0 auto 60px; } .vlm-regole__eyebrow { font-family: var(--primary-font); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--vh-stone); display: block; margin-bottom: 12px; } .vlm-regole__title { font-size: clamp(32px, 5vw, 48px); color: var(--vh-ink); margin-bottom: 16px; } .vlm-regole__lead { font-size: 17px; line-height: 1.7; color: var(--vh-ink-soft); margin-bottom: 10px; } .vlm-regole__note { font-size: 13px; color: var(--vh-stone); font-style: italic; } /* Premi — 3 card */ .vlm-premi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto 50px; } .vlm-premio { position: relative; background: #fff; border-radius: 8px; padding: 40px 28px 32px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: hidden; } .vlm-premio::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .vlm-premio--gold::before { background: linear-gradient(90deg, transparent, var(--vh-gold), transparent); } .vlm-premio--silver::before { background: linear-gradient(90deg, transparent, #c0c0c0, transparent); } .vlm-premio--bronze::before { background: linear-gradient(90deg, transparent, #cd7f32, transparent); } .vlm-premio:hover { transform: translateY(-6px); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.12); } .vlm-premio__tentativo { font-family: var(--primary-font); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--vh-stone); display: block; margin-bottom: 16px; } .vlm-premio__icon { margin-bottom: 20px; } .vlm-premio__icon img { filter: drop-shadow(0 4px 12px rgba(235, 199, 23, 0.3)); } .vlm-premio__title { font-size: clamp(20px, 3vw, 28px); color: var(--vh-ink); margin-bottom: 12px; } .vlm-premio__desc { font-size: 15px; line-height: 1.6; color: var(--vh-ink-soft); margin-bottom: 12px; } .vlm-premio__nota { font-size: 11px; color: var(--vh-stone); font-style: italic; } /* Alert */ .vlm-regole__alert { max-width: 600px; margin: 0 auto; display: flex; align-items: center; gap: 14px; background: rgba(235, 199, 23, 0.08); border: 1px solid rgba(235, 199, 23, 0.2); border-radius: 8px; padding: 18px 24px; } .vlm-regole__alert-icon { color: var(--vh-gold); font-size: 20px; flex-shrink: 0; } .vlm-regole__alert p { margin: 0; font-size: 14px; color: var(--vh-ink); } /* Galleria vincitori */ .vlm-gallery { background: var(--vh-night); padding: 80px 0; } .vlm-gallery__header { text-align: center; margin-bottom: 50px; } .vlm-gallery__eyebrow { font-family: var(--primary-font); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--vh-gold); display: block; margin-bottom: 12px; } .vlm-gallery__title { font-size: clamp(28px, 4vw, 42px); color: var(--vh-salt); } .vlm-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; } .vlm-gallery__item { position: relative; overflow: hidden; border-radius: 4px; } .vlm-gallery__item--tall { grid-row: span 2; } .vlm-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; } .vlm-gallery__item:hover img { transform: scale(1.06); filter: brightness(0.6); } .vlm-gallery__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.4s ease; } .vlm-gallery__item:hover .vlm-gallery__overlay { opacity: 1; } .vlm-gallery__zoom { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); border-radius: 50%; color: var(--vh-ink); font-size: 22px; transform: scale(0.8); transition: transform 0.3s ease; } .vlm-gallery__item:hover .vlm-gallery__zoom { transform: scale(1); } /* CTA finale */ .vlm-cta { background: var(--vh-paper) url('https://www.pscdn.it/img/137/25/01/35245-bg.webp') center/cover no-repeat; padding: 80px 0; } .vlm-cta__inner { text-align: center; max-width: 600px; margin: 0 auto; } .vlm-cta__title { font-size: clamp(28px, 4vw, 42px); color: var(--vh-ink); margin-bottom: 14px; } .vlm-cta__desc { font-size: 17px; color: var(--vh-ink-soft); margin-bottom: 32px; } /* Tablet */ @media (max-width: 991.98px) { .vlm-premi { grid-template-columns: 1fr; gap: 20px; } .vlm-gallery__grid { grid-template-columns: repeat(2, 1fr); } .vlm-gallery__item--tall { grid-row: span 1; } } /* Mobile */ @media (max-width: 767.98px) { .vlm-hero__content { padding: 100px 16px 60px; } .vlm-hero__title { font-size: clamp(36px, 12vw, 56px); } .vlm-regole { padding: 60px 0 40px; } .vlm-gallery__grid { grid-template-columns: 1fr; } .vlm-cta { padding: 60px 0; } } /* PAGINA SEDI — /page/sedi */ /* Hero */ .vsd-hero { position: relative; display: flex; align-items: flex-end; min-height: 100vh; padding-bottom: 90px; overflow: hidden; isolation: isolate; background: var(--vh-night); } .vsd-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 30%; } .vsd-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 19, 12, 0) 0%, rgba(22, 19, 12, .02) 30%, rgba(22, 19, 12, .10) 46%, rgba(22, 19, 12, .42) 56%, rgba(22, 19, 12, .80) 62%, rgba(22, 19, 12, .93) 68%, rgba(22, 19, 12, .97) 82%, rgba(22, 19, 12, .98) 100%); } .vsd-hero__eyebrow { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--vh-stone); margin-bottom: 14px; } .vsd-hero__title { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; color: var(--vh-salt); margin-bottom: 14px; } .vsd-hero__lead { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: rgba(244, 239, 232, .84); max-width: 52ch; margin: 0; } .vsd-sedi { padding: 96px 0; background: var(--vh-paper); } .vsd-sede { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; padding: 40px; overflow: hidden; isolation: isolate; } .vsd-sede__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.02); transition: transform .9s cubic-bezier(.25, .46, .45, .94); } .vsd-sede:hover .vsd-sede__bg { transform: scale(1.06); } .vsd-sede__veil { position: absolute; inset: 0; z-index: -1; } .vsd-sede--palermo .vsd-sede__veil { background: linear-gradient(180deg, rgba(22, 19, 12, .3) 0%, rgba(22, 19, 12, .84) 58%, rgba(22, 19, 12, .96) 100%), linear-gradient(120deg, rgba(235, 199, 23, .16), transparent 62%); } .vsd-sede--ammare .vsd-sede__veil { background: linear-gradient(180deg, rgba(13, 43, 66, .48) 0%, rgba(13, 43, 66, .9) 30%, rgba(13, 43, 66, .96) 100%), linear-gradient(120deg, rgba(184, 212, 232, .2), transparent 62%); } .vsd-sede__eyebrow { font-size: 10px; line-height: 1.6; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 12px; } .vsd-sede--palermo .vsd-sede__eyebrow { color: var(--vh-gold); } .vsd-sede--ammare .vsd-sede__eyebrow { color: var(--vh-horizon); } .vsd-sede .vlogo { position: absolute; top: 0; left: 0; } @media (max-width: 575.98px) { .vsd-sede .vlogo--pad { padding: 8px 12px; } .vsd-sede .vlogo img { width: 72px; } } .vsd-sede__name { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--vh-salt); margin-bottom: 16px; } .vsd-sede__addr, .vsd-sede__hours { font-size: 15px; line-height: 1.5; color: rgba(244, 239, 232, .78); margin: 0 0 6px; } .vsd-sede__tels { margin: 4px 0 0; } .vsd-sede__tel { font-size: 17px; font-weight: 600; color: var(--vh-salt); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s; } .vsd-sede__tel:hover { border-bottom-color: currentColor; } .vsd-sede__tel--alt { font-weight: 500; color: rgba(244, 239, 232, .78); } .vsd-sede__sep { color: rgba(244, 239, 232, .45); margin: 0 8px; } .vsd-sede__cta { align-self: flex-start; } .vsd-sede__cta:focus-visible, .vsd-sede__tel:focus-visible, .vsd-mappa:focus-visible { outline: 2px solid var(--vh-salt) !important; outline-offset: 3px; } .vsd-chiusura { padding: 0 0 96px; background: var(--vh-paper); } .vsd-chiusura__testo { font-size: 1.1rem; line-height: 1.7; color: var(--vh-ink-soft); margin-bottom: 18px; } @media (max-width: 991.98px) { .vsd-sede { min-height: 420px; padding: 30px; } .vsd-col--ammare { order: 1; } .vsd-col--palermo { order: 2; } } /* TASK 5 (Fase 2) — le schede alte */ .vsd-sede.vsd-sede--sedi { justify-content: flex-start; padding: 0; } .vsd-sede--sedi .vsd-sede__foto { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; min-height: 560px; padding: 40px; overflow: hidden; isolation: isolate; } .vsd-sede--sedi.vsd-sede--palermo .vsd-sede__veil { background: linear-gradient(180deg, rgba(22, 19, 12, .06) 0%, rgba(22, 19, 12, .18) 30%, rgba(22, 19, 12, .50) 48%, rgba(22, 19, 12, .86) 62%, rgba(22, 19, 12, .95) 78%, rgba(22, 19, 12, .96) 100%), linear-gradient(120deg, rgba(235, 199, 23, .16), transparent 62%); } .vsd-sede--sedi.vsd-sede--ammare .vsd-sede__veil { background: linear-gradient(180deg, rgba(13, 43, 66, .10) 0%, rgba(13, 43, 66, .24) 30%, rgba(13, 43, 66, .56) 48%, rgba(13, 43, 66, .90) 62%, rgba(13, 43, 66, .96) 78%, rgba(13, 43, 66, .97) 100%), linear-gradient(120deg, rgba(184, 212, 232, .2), transparent 62%); } .vsd-sede--sedi .vsd-sede__desc { font-size: clamp(15px, 1.1vw, 16px); line-height: 1.6; max-width: 40ch; margin: 0; color: rgba(244, 239, 232, .86); } .vsd-sede--sedi .vsd-sede__dettagli { padding: 30px 40px 34px; background: var(--vb-ink); } .vsd-sede__azioni { display: flex; flex-wrap: wrap; gap: 12px; } .vsd-mappa { position: relative; display: block; margin: 24px 0 26px; padding: 18px 20px 18px 58px; background-color: rgba(244, 239, 232, .05); background-image: repeating-linear-gradient(0deg, rgba(244, 239, 232, .13) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(244, 239, 232, .13) 0 1px, transparent 1px 24px); border: 1px solid rgba(244, 239, 232, .18); border-radius: 2px; text-decoration: none; transition: background-color .25s ease, border-color .25s ease; } /* Il segnaposto, disegnato: niente icon set nuovi, niente emoji. */ .vsd-mappa::before { content: ""; position: absolute; top: 50%; left: 22px; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--vb-accent); border-radius: 50%; } .vsd-mappa::after { content: ""; position: absolute; top: 50%; left: 28px; width: 4px; height: 4px; margin-top: -2px; background: var(--vb-accent); border-radius: 50%; } .vsd-mappa:hover { background-color: rgba(244, 239, 232, .1); border-color: rgba(244, 239, 232, .34); } .vsd-mappa__label { display: block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--vb-accent); margin-bottom: 6px; } .vsd-mappa__cta { display: block; font-size: 15px; line-height: 1.4; color: var(--vh-salt); } @media (max-width: 991.98px) { .vsd-sede--sedi .vsd-sede__foto { padding: 30px; } .vsd-sede--sedi .vsd-sede__dettagli { padding: 26px 30px 30px; } } @media (prefers-reduced-motion: reduce) { .vsd-sede__bg, .vsd-sede:hover .vsd-sede__bg { transition: none; transform: none; } .vsd-mappa { transition: none; } } /* HOME — TASK 2 (Fase 2) */ .vhome-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } @media (max-width: 575.98px) { .vhome-cta { flex-direction: column; } } @media (min-width: 576px) { .vhome-cta .vb--block { width: auto; } } .vhome-cta .vb.vb--ghost { background: rgba(22, 19, 12, .34); } .vhome-sedi { padding: 80px 0 90px; } .vsd-sede--home.vsd-sede--palermo .vsd-sede__veil { background: linear-gradient(180deg, rgba(22, 19, 12, 0) 0%, rgba(22, 19, 12, .08) 26%, rgba(22, 19, 12, .46) 44%, rgba(22, 19, 12, .8) 60%, rgba(22, 19, 12, .94) 80%, rgba(22, 19, 12, .96) 100%), linear-gradient(120deg, rgba(235, 199, 23, .14), transparent 62%); } .vsd-sede--home.vsd-sede--ammare .vsd-sede__veil { background: linear-gradient(180deg, rgba(13, 43, 66, 0) 0%, rgba(13, 43, 66, .08) 26%, rgba(13, 43, 66, .52) 44%, rgba(13, 43, 66, .84) 60%, rgba(13, 43, 66, .94) 80%, rgba(13, 43, 66, .96) 100%), linear-gradient(120deg, rgba(184, 212, 232, .18), transparent 62%); } .vsd-sede--home .vsd-sede__veil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 6, .26) 0%, rgba(12, 10, 6, .12) 28%, transparent 46%); transition: opacity .6s ease; } .vsd-sede--home:hover .vsd-sede__veil::before { opacity: 0; } .vsd-sede--home .vsd-sede__claim { font-size: 1rem; line-height: 1.6; max-width: 34ch; margin: 0 0 26px; color: rgba(244, 239, 232, .82); transition: color .4s ease; } .vsd-sede--home:hover .vsd-sede__claim { color: rgb(244, 239, 232); } @media (prefers-reduced-motion: reduce) { .vsd-sede--home .vsd-sede__veil::before, .vsd-sede--home .vsd-sede__claim { transition: none; } } /* HOME — TASK 3 (Fase 2): le due schede piatto */ .vdish { display: flex; flex-direction: column; height: 100%; background: var(--vh-salt); border-top: 3px solid var(--vb-ink); overflow: hidden; } .vdish__photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; transition: transform .7s cubic-bezier(.25, .46, .45, .94); } .vdish:hover .vdish__photo { transform: scale(1.05); } .vdish__body { padding: 26px 28px 30px; } .vdish__sede { display: inline-block; margin: 0 0 14px; padding: 6px 12px; background: var(--vb-ink); color: var(--vb-accent); font-size: 10px; font-weight: 600; letter-spacing: 3px; line-height: 1.4; text-transform: uppercase; border-radius: 2px; } .vdish__name { font-family: var(--alt-font); font-size: clamp(18px, 2.6vw, 32px); font-weight: 400; line-height: 1.15; letter-spacing: .5px; text-transform: uppercase; color: var(--vh-ink); margin: 0 0 12px; } .vdish__desc { font-size: 16px; line-height: 1.65; color: var(--vh-ink-soft); margin: 0; } @media (max-width: 575.98px) { .vdish__body { padding: 22px 20px 26px; } } @media (prefers-reduced-motion: reduce) { .vdish__photo, .vdish:hover .vdish__photo { transition: none; transform: none; } } /* /page/ristorante — blocchi aggiunti per la parita' con /page/vossia-ammare */ .vsp-opening { padding: 64px 0; background: var(--vh-paper); text-align: center; } .vsp-opening__eyebrow { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--vh-stone); margin-bottom: 14px; } .vsp-opening__hours { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5; color: var(--vh-ink); margin-bottom: 18px; } .vsp-opening__divider { width: 54px; height: 2px; background: var(--vh-gold); margin-bottom: 18px; } .vsp-opening__addr { font-size: .98rem; line-height: 1.8; color: var(--vh-ink-soft); margin: 0; } .vsp-opening__tel, .vsp-opening__map { color: var(--vh-ink); text-decoration: none; border-bottom: 1px solid rgba(28, 28, 28, .3); } .vsp-opening__tel:hover, .vsp-opening__map:hover { border-bottom-color: var(--vh-gold); } .vsp-opening__sep { color: var(--vh-stone); margin: 0 10px; } .vsp-chiusura { padding: 72px 0; background: var(--vh-night); text-align: center; } .vsp-chiusura__testo { font-size: 1.15rem; line-height: 1.7; color: rgba(244, 239, 232, .82); margin-bottom: 20px; } /* CONTATTI — /page/contatti (TASK 7, Fase 2) */ /* PAGINA CONTATTI — card sedi REDESIGN IMPATTANTE */ .vct-sedi { padding-bottom: 50px; } .vct-sede { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; min-height: 520px; } .vct-sede:hover { transform: translateY(-8px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); } /* Sfondo fotografico */ .vct-sede__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 1s ease, filter 1s ease; } .vct-sede--palermo .vct-sede__bg { background-image: url('https://www.pscdn.it/img/137/25/12/24856-whatsapp-image-2025-12-01-at-1.webp?width=1200'); } .vct-sede--ammare .vct-sede__bg { background-image: url('https://www.pscdn.it/img/137/26/05/11249-foto-vossia-ammare-2.webp?width=1200'); } .vct-sede:hover .vct-sede__bg { transform: scale(1.06); filter: brightness(0.65); } /* Velo */ .vct-sede__veil { position: absolute; inset: 0; z-index: -1; } .vct-sede--palermo .vct-sede__veil { background: linear-gradient(180deg, rgba(22, 19, 12, 0.15) 0%, rgba(22, 19, 12, 0.7) 50%, rgba(22, 19, 12, 0.92) 100%); } .vct-sede--ammare .vct-sede__veil { background: linear-gradient(180deg, rgba(13, 43, 66, 0.1) 0%, rgba(13, 43, 66, 0.65) 50%, rgba(13, 43, 66, 0.92) 100%); } /* Bordo luminoso superiore */ .vct-sede::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; opacity: 0; transition: opacity 0.5s ease; } .vct-sede--palermo::before { background: linear-gradient(90deg, transparent, var(--vh-gold), transparent); } .vct-sede--ammare::before { background: linear-gradient(90deg, transparent, var(--vh-horizon), transparent); } .vct-sede:hover::before { opacity: 1; } /* Contenuto */ .vct-sede__inner { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 40px; flex: 1; } .vct-sede .vlogo { display: flex; width: fit-content; margin-bottom: 24px; } .vct-sede__eyebrow { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--vb-accent); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .vct-sede__eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--vb-accent); transition: width 0.4s ease; } .vct-sede:hover .vct-sede__eyebrow::before { width: 50px; } .vct-sede__name { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--vh-salt); margin-bottom: 20px; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: transform 0.4s ease; } .vct-sede:hover .vct-sede__name { transform: translateY(-3px); } .vct-sede .vsd-sede__addr, .vct-sede .vsd-sede__hours { color: rgba(244, 239, 232, 0.75); margin-bottom: 6px; } .vct-sede .vsd-sede__tels { margin: 8px 0 24px; } .vct-sede .vsd-sede__tel { color: var(--vh-salt); transition: color 0.3s ease; } .vct-sede .vsd-sede__tel:hover { color: var(--vb-accent); } .vct-sede .vsd-mappa { margin: auto 0 0; } .vct-sede__cta { align-self: flex-start; margin-top: 18px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); padding-left: 36px !important; padding-right: 36px !important; } .vct-sede__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.15), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .vct-sede:hover .vct-sede__cta::before { transform: translateX(100%); } .vct-sede__cta:focus-visible { outline: 2px solid var(--vh-salt) !important; outline-offset: 3px; } @media (max-width: 991.98px) { .vct-sede__inner { padding: 32px 28px; } .vct-col--ammare { order: 1; } .vct-col--palermo { order: 2; } } @media (max-width: 767.98px) { .vct-sede { min-height: 440px; } .vct-sede__inner { padding: 28px 24px; } .vct-sede__name { font-size: 22px; } } /* BOTTONI — famiglia unica .vb */ .vb, button.vb, a.vb { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 18px 48px !important; border: none !important; border-radius: 50px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important; position: relative !important; overflow: hidden !important; background: transparent !important; box-shadow: none !important; line-height: 1.4 !important; } /* Primary: pieno con glow al hover */ .vb.vb--primary { background: var(--vb-accent) !important; color: var(--vb-ink) !important; box-shadow: 0 4px 20px rgba(235, 199, 23, 0.25) !important; } .vb.vb--primary:hover { background: var(--vb-ink) !important; color: var(--vb-accent) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(235, 199, 23, 0.4) !important; } /* Ghost: bordo con riempimento al hover */ .vb.vb--ghost { background: transparent !important; color: var(--vb-accent) !important; border: 1.5px solid var(--vb-accent) !important; } .vb.vb--ghost:hover { background: var(--vb-accent) !important; color: var(--vb-ink) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 20px rgba(235, 199, 23, 0.25) !important; } /* Su fondo chiaro il ghost prende l'inchiostro */ .vb--on-light.vb--ghost { color: var(--vh-ink) !important; border-color: var(--vh-ink) !important; } .vb--on-light.vb--ghost:hover { background: var(--vh-ink) !important; color: var(--vh-paper) !important; } /* Block: full width */ .vb--block { width: 100% !important; } /* HERO HOMEPAGE — pulsanti con glow effect speciale */ #section-jCLpdogY .vb.vb--primary { box-shadow: 0 4px 20px rgba(235, 199, 23, 0.3), 0 0 40px rgba(235, 199, 23, 0.15); } #section-jCLpdogY .vb.vb--primary:hover { box-shadow: 0 8px 40px rgba(235, 199, 23, 0.5), 0 0 60px rgba(235, 199, 23, 0.25); } #section-jCLpdogY .vb.vb--ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; backdrop-filter: blur(4px); } #section-jCLpdogY .vb.vb--ghost:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15); } .vb.vb--primary { background: var(--vb-accent); color: var(--vb-ink); border-color: var(--vb-accent); } .vb.vb--primary:hover { background: transparent; color: var(--vb-accent); } .vb.vb--ghost { background: transparent; color: var(--vb-accent); border-color: var(--vb-accent); } .vb.vb--ghost:hover { background: var(--vb-accent); color: var(--vb-ink); } .vb--on-light.vb--ghost { color: var(--vh-ink); } .vb--block { width: 100%; } .vsd-sede--palermo, .vsp-opening, .vsp-chiusura, .vdish--palermo, .vossia-cs-sede--palermo, .vct-sede--palermo, .vcs-vossia--palermo { --vb-accent: var(--vh-gold); --vb-ink: var(--vh-night); } .vsd-sede--ammare, .vdish--ammare, .vossia-cs-sede--ammare, .vct-sede--ammare, .vcs-vossia--ammare { --vb-accent: var(--vh-horizon); --vb-ink: var(--vh-sea-deep); } .vossia-cs-am-hero, .vossia-cs-am-closing { --vb-accent: var(--vh-horizon); --vb-ink: var(--vh-sea-deep); } @media (prefers-reduced-motion: reduce) { .vb { transition: none; } } /* LOGO DI SEDE — .vlogo */ .vlogo { display: inline-flex; align-items: center; line-height: 0; } .vlogo img { display: block; height: auto; max-width: 100%; } .vlogo--pad { padding: 14px 20px; background: var(--vh-paper); border-radius: 2px; } .vlogo--palermo { --vb-accent: var(--vh-gold); --vb-ink: var(--vh-night); } .vlogo--ammare { --vb-accent: var(--vh-horizon); --vb-ink: var(--vh-sea-deep); } /* TITOLI DI SEZIONE — .vt-title */ .vt-title { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; text-transform: uppercase; letter-spacing: 1px; color: var(--vh-ink); } .vt-title::before, .vt-title::after { content: ""; width: 46px; height: 1px; background: var(--vh-stone); flex: 0 0 auto; } .vt-title--on-dark { color: var(--vh-salt); } .vt-title--on-dark::before, .vt-title--on-dark::after { background: var(--vb-accent, var(--vh-gold)); } @media (max-width: 575.98px) { .vt-title { gap: 10px; } .vt-title::before, .vt-title::after { width: 22px; } } /* ROUND 7 — MOBILE: banda bianca sotto l'header */ @media (max-width: 767.98px) { .ipad-top-space-margin { margin-top: 0 !important; } .full-screen.ipad-top-space-margin { height: 100vh !important; } } /* ROUND 7 — DESKTOP: pulsante "PRENOTA ORA" / voci menu sovrapposti */ @media (max-width: 1199.98px) and (min-width: 992px) { .center-logo .navbar-nav .nav-link { padding: 38px 8px !important; font-size: 16px !important; letter-spacing: 0 !important; } .language-wrapper.dropdown { width: 80px !important; } } @media (max-width: 1366px) and (min-width: 1200px) { .center-logo .navbar-nav .nav-link { padding: 38px 12px !important; } } /* FIX PULSANTI — override classi tema (.btn, .btn-dark-gray) su elementi .vb */ /* Forza lo stile .vb quando e' presente insieme a classi del tema */ button.vb.btn, a.vb.btn, button.vb.btn-dark-gray, a.vb.btn-dark-gray { background: var(--vb-accent) !important; color: var(--vb-ink) !important; border: none !important; border-radius: 50px !important; padding: 18px 48px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 4px 20px rgba(235, 199, 23, 0.25) !important; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important; position: relative !important; overflow: hidden !important; line-height: 1.4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } button.vb.btn:hover, a.vb.btn:hover, button.vb.btn-dark-gray:hover, a.vb.btn-dark-gray:hover { background: var(--vb-ink) !important; color: var(--vb-accent) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(235, 199, 23, 0.4) !important; } /* Rimuove lo span .bg-base-color / .bg-yellow che il tema usa per lo slide */ .vb.btn span.bg-base-color, .vb.btn span.bg-yellow, .vb.btn-dark-gray span.bg-base-color, .vb.btn-dark-gray span.bg-yellow { display: none !important; } .footer-bg { -webkit-clip-path: ellipse(100% 100% at 50% 100%); clip-path: ellipse(100% 100% at 50% 100%); }