/* ---- MOBILE FIX: max 768px ---- */ header .btn-link.text-dark-gray, header .text-dark-gray, header a.text-dark-gray-hover:hover { color: #ffffff87 !important; } @media (max-width: 768px) { /* Spaziature più sane per le sezioni prodotti */ #section-Luq6hZLA, #section-DqYYHB1X, #section-WG2QSTZH { margin-top: 2rem !important; margin-bottom: 2rem !important; } #section-Luq6hZLA .container, #section-DqYYHB1X .container, #section-WG2QSTZH .container { padding-left: 12px !important; padding-right: 12px !important; overflow: hidden; /* evita overflow orizzontale */ } /* Griglia prodotti (moduli ProntoShop) in 2 colonne, niente tagli */ .products-section .product, .products-section .product-item { width: 48% !important; margin: 1% !important; float: left !important; } .products-section img, .products-section .product img, .products-section .product-item img { width: 100% !important; height: auto !important; object-fit: cover; display: block; } /* NUOVI ARRIVI: neutralizza le “outside-box” che escono dal viewport */ #section-SrRTTLly .outside-box-right-10, #section-SrRTTLly .lg-outside-box-right-20, #section-SrRTTLly .md-outside-box-right-25, #section-SrRTTLly .xs-outside-box-right-0 { position: static !important; transform: none !important; margin: 0 !important; width: 100% !important; } /* Lo slider prende tutta la larghezza disponibile */ #section-SrRTTLly .swiper, #section-SrRTTLly .swiper-wrapper, #section-SrRTTLly .swiper-slide { width: 100% !important; } /* Immagini slider responsive, niente tagli */ #section-SrRTTLly .interactive-banner-style-09 img, #section-SrRTTLly .MS_img { max-width: 100% !important; width: 100% !important; height: auto !important; display: block !important; } /* Padding/testi più piccoli nello slider per non “schiacciare” */ #section-SrRTTLly .image-content { padding: 12px !important; } #section-SrRTTLly .fs-22 { font-size: 18px !important; } #section-SrRTTLly .content-title { font-size: 12px !important; } /* Marquee (riga scorrevole in fondo): niente tagli ai lati */ #section-yZGDufUk .swiper-width-auto { width: 100% !important; } #section-yZGDufUk .swiper-wrapper .swiper-slide .alt-font { font-size: 18px !important; padding: 16px !important; white-space: nowrap; } #section-yZGDufUk .row { overflow: hidden; } } /* Piccola protezione anche per telefoni più piccoli */ @media (max-width: 576px) { .products-section .product, .products-section .product-item { width: 49% !important; margin: 0.5% !important; } #section-yZGDufUk .swiper-wrapper .swiper-slide .alt-font { font-size: 16px !important; padding: 12px !important; } #sections { overflow: hidden; } nav.navbar .menu-logo { order: 2; margin: 0 auto; } nav.navbar .menu-order { order: 1; } nav.navbar .col-lg-5:not(.menu-order) { order: 3; } nav.navbar .col-lg-2.text-end { order: 3; } section img, section .atropos { touch-action: pan-y; } } @media (min-width: 1080px) { header:not(.sticky-active) .navbar.bg-black { background-color: transparent !important; } #section-TtC5WRG3 { margin-top: -100px !important; } #section-TtC5WRG3 .full-screen.top-space-margin { height: 100vh !important; } .navbar .navbar-nav .dropdown .dropdown-menu{ background: #00000075 !important; backdrop-filter: blur(10px); } .navbar .navbar-nav .dropdown .dropdown-menu img { height: 150px; object-fit:contain; } header .btn-link.text-dark-gray, header .text-dark-gray, header a.text-dark-gray-hover:hover{ color: #ffffffc2 !important; } } :root { --heading-font-family: var(--alt-font); --body-font-family: var(--primary-font) } .hero-lines { position: relative; min-height: 62vh; display: flex; align-items: center; background-image: var(--hero-image); background-size: cover; background-position: center center; background-repeat: no-repeat; isolation: isolate; } .hero-lines::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .30)); z-index: 0; } /* Container principale */ .categories-box { position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; transition: transform 0.4s ease; text-align: center; } /* Effetto sollevamento della card */ .categories-box:hover { transform: translateY(-12px) scale(1.02); } /* Wrapper dell'immagine */ .categories-box img { width: 100%; height: 370px; object-fit: contain; border-radius: 10px; transition: transform 0.7s cubic-bezier(.19,1,.22,1); position: relative; /* necessario per il bordo */ z-index: 1; } /* Zoom elegante sull'immagine */ .categories-box:hover img { transform: scale(1.12); } /* Glow / bordo animato SOLO sull'immagine */ .categories-box img::after { content: ""; position: absolute; inset: 0; border-radius: 10px; border: 2px solid var(--pulse-color, rgba(255,255,255,0.5)); opacity: 0; box-shadow: 0 0 0px var(--pulse-color); transition: opacity 0.5s, box-shadow 0.5s; pointer-events: none; z-index: 2; } .categories-box:hover img::after { opacity: 1; animation: pulseBorder 1.8s infinite; } /* Animazione pulsante */ @keyframes pulseBorder { 0% { box-shadow: 0 0 0px var(--pulse-color); } 50% { box-shadow: 0 0 18px var(--pulse-color); } 100% { box-shadow: 0 0 0px var(--pulse-color); } } .categories-box .btn { font-size: 16px; /* più piccolo e raffinato */ padding: 6px 18px; /* altezza ridotta, più elegante */ border-radius: 6px; /* angoli morbidi */ text-transform: none; /* niente maiuscole forzate */ transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* ombra delicata */ } /* Hover elegante sui bottoni */ .categories-box .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); background-color: #fff; /* oppure un colore chiaro complementare */ color: inherit; /* mantiene il colore del testo originale */ } .img-wrapper { position: relative; border-radius: 15px; overflow: hidden; animation: float 6s ease-in-out infinite alternate; } .img-wrapper img { display: block; width: 100%; height: auto; border-radius: inherit; transition: transform 0.7s ease; } @keyframes float { 0% { transform: translateY(0) rotate(-0.5deg); } 50% { transform: translateY(-8px) rotate(0.5deg); } 100% { transform: translateY(0) rotate(-0.5deg); } }