@font-face { font-family: 'AGaramondPro-Bold'; font-style: normal; font-weight: normal; src: local('AGaramondPro-Bold'), url('https://www.pscdn.it/file/155/25/03/31874-agaramondpro-bold.woff') format('woff'); } html, body { margin: 0 !important; padding: 0 !important; font-family: 'Poppins', sans-serif !important; font-weight: normal; font-style: normal; } .navbar-dark .navbar-toggler { margin-top: 35px !important; } .s-icon.cart-bag { opacity: .65 !important; } .navbar-nav * { font-family: 'Red Hat Display', Helvetica, Arial, Lucida, sans-serif !important; } body { overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: "AGaramondPro-Bold" !important; font-weight: normal; font-style: normal; } .login-page { margin-top: 150px; } .navbar-nav .btn.btn-nav { font-weight: 600; font-size: 14px; } h1::first-letter, slide-img h1::first-letter, section-top h2::first-letter, section-parallax h2::first-letter, collections-section h2::first-letter, hero-section-1 h2::first-letter, blog-section-2 h2::first-letter { font-size: 1.2em; line-height: 0.8em; margin-right: 2px; } p, a { font-family: 'Poppins', sans-serif !important; font-weight: normal; font-style: normal; } ::selection { background-color: #D30C14 !important; color: white !important; } .breadcrumb { margin-top: 2.5rem !important; } /* navbar */ .navbar { font-family: 'Poppins', sans-serif; text-transform: uppercase !important; background: transparent; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1030 !important; transition: background-color 0.3s ease !important; } .nav-link, .navbar-nav .dropdown button { font-weight: bold; position: relative; transition: color 0.3s ease, transform 0.3s ease; } .nav-link::after, .navbar-nav .dropdown button:after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; border: 0; height: 3px; background: linear-gradient(to right, #D30C14 20%, transparent 20%, transparent 25%, #317EAF 25%, #317EAF 45%, transparent 45%, transparent 50%, #3FA535 50%, #3FA535 70%, transparent 70%, transparent 75%, #FFE500 75%, #FFE500 95%); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-link:hover { color: #000 !important; } .nav-link:hover::after, .navbar-nav .dropdown button:hover::after { transform: scaleX(1); } .navbar .nav-link { color: white !important; transition: color 0.3s ease-in-out; font-size: 14px; letter-spacing: 1.5px; } .navbar.scrolled { background-color: #111111 !important; transition: background-color 0.9s ease !important; } /* slideshow */ .slideshow-section { position: relative !important; min-height: 100vh !important; overflow: hidden !important; } .slide-item { position: relative !important; min-height: 100vh !important; } .slide-subheading { margin-top: 0 !important; } .slide- { width: 100% !important; min-height: 100vh !important; object-fit: cover !important; } .bg-image { min-height: 65vh } .btn-slide { font-family: 'Poppins', sans-serif; font-weight: 600; text-decoration: none; text-transform: uppercase; font-size: 1rem; background-color: #D30C14; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 15px 15px; cursor: pointer; } .btn-slide:hover { background-color: #8B0000; color: white; border: none; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); opacity: 0.9; } .content-absolute { position: absolute !important; top: 10% !important; left: 0 !important; width: 100% !important; color: #fff !important; } .overlay-bg { background: rgba(0, 0, 0, 0.4) !important; padding: 20px !important; border-radius: 5px !important; } .slick-slide { outline: none !important; } .slick-prev:before, .slick-next:before { color: #fff !important; font-size: 30px !important; } /* section bottom slider */ .section-top { margin-top: -30px; padding: 4rem 0; background-color: #f8f9fa; text-align: center; position: relative; overflow: hidden; } .section-top img { max-width: 100px; margin-bottom: 2rem; transition: transform 0.3s ease-out, opacity 0.4s ease; } .section-top h2 { font-size: 4rem; color: #333 margin-bottom: 1.5rem; opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .section-top .divider { width: 80px; height: 4px; background: linear-gradient(to right, #D30C14 20%, transparent 20%, transparent 25%, #317EAF 25%, #317EAF 45%, transparent 45%, transparent 50%, #3FA535 50%, #3FA535 70%, transparent 70%, transparent 75%, #FFE500 75%, #FFE500 95%); margin: 1.5rem auto; opacity: 0; transform: translateX(-20px); transition: all 0.6s ease 0.2s; } .section-top p { font-family: 'Poppins', sans-serif; color: #666; line-height: 1.8; opacity: 0; transform: translateY(20px); transition: all 0.6s ease 0.4s; } .section-top .visible { opacity: 1; transform: translateY(0) translateX(0); } .section-parallax { min-height: 100vh; position: relative; overflow: visible; } .content-column { padding: 2rem; display: flex; flex-direction: column; justify-content: center; position: relative; background-image: url('https://www.pscdn.it/img/155/25/03/67838-distilleria-russo.webp'); background-size: cover; background-position: center; } .content-column::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1; } .content-column>* { position: relative; z-index: 2; } .motion-image { transform: translateY(0); transition: transform 0.3s ease-out, opacity 0.4s ease; max-width: 75% !important; margin: 0 auto; position: relative; z-index: 3; will-change: transform; backface-visibility: hidden; } .title-animate { font-size: 5rem; color: #fff !important; opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .divider-animate { width: 80px; height: 4px; background: linear-gradient(to right, #D30C14 20%, transparent 20%, transparent 25%, #317EAF 25%, #317EAF 45%, transparent 45%, transparent 50%, #3FA535 50%, #3FA535 70%, transparent 70%, transparent 75%, #FFE500 75%, #FFE500 95%); margin: 2rem 0; opacity: 0; transform: translateX(-20px); transition: all 0.6s ease 0.2s; } .text-animate { opacity: 0; transform: translateY(20px); transition: all 0.6s ease 0.4s; color: #ffffffcc; font-family: 'Poppins', sans-serif; line-height: 1.8; font-size: 1.1rem; } .visible { opacity: 1; transform: translateY(0) translateX(0); } .image-column { background-image: url('https://www.pscdn.it/img/155/25/03/84961-white-bg.webp'); background-size: cover; background-position: center; position: relative; overflow: visible; } .image-column::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.0); z-index: 1; } .image-column>* { position: relative; z-index: 2; } /* prodotti */ .logo-img { max-height: 30px; width: auto; } .color-square { width: 12px; height: 12px; display: inline-block; margin: 0 3px; /* Stato iniziale */ opacity: 0; transform: translateY(-30px); } /* L'animazione verrà applicata solo quando il container ha la classe .animate */ .animate .color-square { animation: squareAppear 0.5s ease-out forwards; } /* Keyframes: partenza dall'alto (-30px), overshoot a +10px, poi posizione finale */ @keyframes squareAppear { 0% { opacity: 0; transform: translateY(-30px); } 60% { transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* Animazione per il gruppo a destra (da logo verso l'esterno) */ .right-container .color-square:nth-child(1) { animation-delay: 0.3s; } .right-container .color-square:nth-child(2) { animation-delay: 0.6s; } .right-container .color-square:nth-child(3) { animation-delay: 0.9s; } .right-container .color-square:nth-child(4) { animation-delay: 1.2s; } /* Animazione per il gruppo a sinistra: inverto i ritardi in modo che il quadrato più vicino al logo (ultimo nel markup) abbia il delay minore */ .left-container .color-square:nth-child(1) { animation-delay: 1.2s; } .left-container .color-square:nth-child(2) { animation-delay: 0.9s; } .left-container .color-square:nth-child(3) { animation-delay: 0.6s; } .left-container .color-square:nth-child(4) { animation-delay: 0.3s; } /* Colori definiti */ .red { background-color: #D30C14; } .blue { background-color: #317EAF; } .green { background-color: #3FA535; } .yellow { background-color: #FFE500; } .product-price { font-family: 'Poppins', sans-serif !important; } .product-card-img:hover img { transform: scale(1.03); transition: transform 0.4s ease; } .product-ins-pic { position: relative; display: inline-block; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .product-ins-pic::before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: inherit; background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(200, 200, 200, 0.8)); z-index: 0; opacity: 0; transition: opacity 0.4s ease; } .product-ins-pic:hover { border-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); } .product-ins-pic:hover::before { opacity: 1; } .product-ins-pic img { display: block; position: relative; z-index: 1; transition: transform 0.4s ease; border-radius: 10px; } .product-card-title a { text-decoration: none !important; } .product-card-title a:hover { text-decoration: underline !important; } .product-card-details { text-align: center !important; } .ratings { justify-content: center !important; } /* shop banner */ .container h2 { filter: opacity(1) !important; font-size: 3rem; } /* Blog */ .slick-slide a img.card-img-top { width: 400px !important; height: 300px !important; object-fit: cover; border-radius: 10px; } .p-4 h5 a { text-decoration: none; transition: color 0.3s ease; color: black !important; } .p-4 h5 a:hover { color: #D30C14 !important; text-decoration: underline !important; transition: color 0.3s ease; } /* Footer */ .footer-bottom, .footer-top { background-color: #0B0C0B; color: white; } .footer-menu-item a { color: #000; } .newsletter-wrapper h4 { color: white !important; } .footer-top { padding: 100px 0 50px; } .footer-newsletter-form { position: relative; width: 100%; max-width: 500px; margin: 0 auto; } .newsletter-wrapper { transition: transform 0.5s ease; } .newsletter-wrapper:hover { transform: scale(1.05); transition: transform 0.5s ease; } .footer-newsletter-input { width: 80%; padding: 12px 20px; border: 2px solid #ddd; border-radius: 25px; font-size: 16px; outline: none; transition: all 0.3s ease; } .footer-newsletter-input:focus { border-color: #007bff; box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); } .footer-newsletter-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background-color: #8B0000; border: none; padding: 12px 20px; border-radius: 25px; color: white; cursor: pointer; transition: background-color 0.3s ease; } .footer-newsletter-btn:hover { background-color: #D30C14; } footer h4 { font-size: 24px; margin-bottom: 20px; color: white; } .newsletter-wrapper { text-align: center; padding: 30px 20px; background-color: #222; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .footer-links__item { color: #fff; text-decoration: none; position: relative; transition: color 0.3s ease, transform 0.3s ease; } .footer-links__item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35%; height: 3px; background-color: #8B0000; transform: scaleX(0); transition: transform 0.3s ease; } .footer-links__item:hover { color: #fff !important; transform: translateX(5px); } .footer-links__item:hover::after { transform: scaleX(1); } .dipl_clipping_text { font-size: 4rem; font-weight: bold; color: white; font-family: "AGaramondPro-Bold" !important; } #particles-js_fuoco, #particles-js_neve, #particles-js_vento, #particles-js_foglie { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; } .bottle-column { cursor: pointer; position: relative; height: 80vh; overflow: hidden; background-size: cover; background-position: top; background-attachment: fixed; } .bottle-column::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 0; transition: background-color 0.3s ease; } .categorie:hover .bottle-column:hover::before { background-color: rgba(0, 0, 0, 0.85); } .bottle-column:nth-child(1) { background-image: url('https://www.pscdn.it/img/155/25/02/82825-fichi.webp'); } .bottle-column:nth-child(2) { background-image: url('https://www.pscdn.it/img/155/25/02/83555-limoni.webp'); } .bottle-column:nth-child(3) { background-image: url('https://www.pscdn.it/img/155/25/02/84085-miele.webp'); } .bottle-container { position: absolute; left: 35%; transform: rotate(-18.9deg); } .bottle-container img.bottle { width: 180px; display: block; position: relative; z-index: 2; } .title-overlay { position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3rem; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; text-align: center; width: 100%; } .bottle-column:hover .title-overlay { opacity: 1; } @media (min-width: 992px) { .navbar-collapse .row { width: 100% !important; } .navbar-brand.mx-lg-auto { position: absolute; left: 50%; transform: translateX(-50%); } } @media (max-width: 768px) { .vh-md-75 { height: 75vh !important; } #section-0 { height: 175vh; } .bg-image { min-height: 40vh } .bottle-column { height: 65vh; /* Altezza ridotta su mobile */ } .title-overlay { font-size: 1rem; } .bottle-container { position: absolute; left: 5%; transform: rotate(-18.9deg); } .bottle-container img.bottle { width: 120px; display: block; position: relative; z-index: 2; } .title-overlay { opacity: 1; } .section-top { padding: 2rem 0; } .section-top h2 { font-size: 2rem; } .section-top p { font-size: 0.9rem; } .content-column { padding: 1rem; } .title-animate { font-size: 2rem; } .text-animate { font-size: 0.9rem; } .motion-image { max-width: 100%; } .dipl_clipping_text { font-size: 3rem; } } @media (min-width: 992px) { .w-lg-50 { width: 50%; } .h-lg-646 { height: 646px; } .h-lg-625 { height: 625px; } .w-lg-756 { width: 756px; } .h-lg-450 { height: 450px; } .h-lg-756 { height: 756px; } .mw-2560 { max-width: 2560px; } .mt-lg-20 { margin-top: 20px; } .ml-lg-m120 { margin-left: -120px; } .mt-lg-80 { margin-top: 80px; } .mb-lg-80 { margin-bottom: 80px; } .w-lg-370 { width: 370px; } .w-lg-700 { width: 700px; } .fs-lg-95 { font-size: 95px; } .ps-lg-80 { padding-left: 80px !important; } .pe-lg-50 { padding-right: 50px !important; } .ms-lg-100 { margin-left: 100px; } .border-gray-lg-e { border-right: 1px solid #ccc; } .l-lg-50 { left: 50px; } .t-lg-50 { top: 50px; } .pt-lg-150 { padding-top: 150px !important; } .h-lg-400 { height: 400px; } .fs-lg-200 { font-size: 200px; } .fs-lg-20 { font-size: 20px; } .mb-lg-40 { margin-bottom: 40px; } .pt-lg-150 { padding: 150px; } .pt-lg-200 { padding-top: 200px; } } @media (max-width: 992px) { .h-200 { height: 200px; } .w-280 { width: 280px; } .h-280 { height: 280px; } .mt-m100 { margin-top: -100px; } .fs-50 { font-size: 50px; } .h-320 { height: 320px; } .ms-20 { margin-left: 20px; } .l-m20 { left: -20px; } .pt-100 { padding-top: 100px; } .pt-150 { padding-top: 150px; } .py-100 { padding: 100px 0; } .fs-100 { font-size: 100px; } } .h-300 { height: 300px } .h-400 { height: 400px; } .section-4 .contact-form input, .section-4 .contact-form textarea { border: 0; border-bottom: 3px solid #fff; border-radius: 0; } .section-4 .contact-form input::placeholder, .section-4 .contact-form textarea::placeholder, .section-126 .contact-form input::placeholder, .section-126 .contact-form textarea::placeholder { color: #fff !important; } .section-126 .contact-form input, .section-126 .contact-form textarea { border: 2px solid #fff; } .section-1624 img:hover, .section-1223 img:hover, .section-1223 a:hover, .section-1026 img:hover, .section-1025 img:hover, .section-1024 img:hover, .section-346 img:hover, .section-348 img:hover, .section-350 img:hover, .section-352 img:hover, .section-354 img:hover, .section-235 img:hover, .section-123 img:hover, .section-123 a:hover, .section-124 img:hover, .section-124 a:hover, .section-125 img:hover, .section-125 a:hover, .section-126 img:hover, .section-126 a:hover, .section-127 img:hover, .section-127 a:hover, .section-1 img:hover, .section-1 a:hover, .section-2 img:hover, .section-2 a:hover, .section-3 img:hover, .section-4 img:hover { transform: scale(1.2); } .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; } @media (max-width: 720px) { .navbar-nav { justify-content: center; align-items: center; margin: 0 auto; } .navbar-collapse { margin-top: 50px; } .language-wrapper { margin-top: 30px !important; } .brand-l { padding-left: 50px; } .brand-l img { max-height: 60px !important; } } #btn-yes { background: #b30000 !important; } #btn-no { COLOR: #FFF; } h2::first-letter, h3::first-letter, h4::first-letter { color: #b30000; font-size: 120%; font-weight: bold; } .navbar-nav .dropdown-menu { padding: 10px; background-color: rgba(35, 35, 35, 0.93) !important; border-top: 3px solid #d30c14; color: #fff; } .navbar-nav .dropdown-menu .dropdown-item { color: #b1b3b5; font-weight: 600; font-size: 14px; padding: .8rem 1.5rem; } .navbar-nav .dropdown-menu .dropdown-item:focus, .navbar-nav .dropdown-menu .dropdown-item:hover { background-color: #e9ecef0f !important; color: #fff !Important; } .section-1126 ul li::marker { color: #ff0000; } @media screen and (max-width: 590px) { #section-QwrYipKp .row { flex-direction: column; } #section-QwrYipKp .row .col { margin-left: 0 !important; } .navbar-nav .dropdown { flex-direction: column; display: flex; } .nav-link:hover::after, .navbar-nav .dropdown button:hover::after { display: none; } .navbar-nav .dropdown-menu { position: static; background: transparent !important; border: 0 !important; min-width: auto; max-height: 200px; overflow: auto; } .filter-sort-wrapper.fixed { transform: translateY(100px) !important; } .navbar-nav .dropdown-menu .dropdown-item { font-size: 12px; padding: .6rem 1.5rem; letter-spacing: 2px; text-align: center; } } @media (min-width: 992px) and (max-width: 1380px) { .navbar-brand img { max-height: 60px !important; } } @media (min-width: 992px) and (max-width: 1200px) { .navbar .container:first-child { max-width: 100%; margin: 0 auto; } } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; left: 0%; min-width: 300px; } .navbar-nav .nav-item a img { top: 4px; position: relative; } } #sections { overflow: hidden; }