@import url('https://fonts.googleapis.com/css2?family=Madimi+One&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Madimi+One&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap'); :root { --base-color: #f1ac2d !important; --very-light-gray: #EEE8E6; --dark-gray: #36332e; --medium-gray: #858181; --light-medium-gray: #f8f3f0; --alt-font: 'Rufina', serif; --primary-font: 'Jost', sans-serif; } ::selection { background-color: #f1ac2d; color: white; } .comfortaa-regular { font-family: "Comfortaa", sans-serif !important; font-weight: 300; } .comfortaa-medium { font-family: "Comfortaa", sans-serif !important; font-weight: 500; } .comfortaa-bold { font-family: "Comfortaa", sans-serif !important; font-weight: 600; } .madimi-one-regular { font-family: "Madimi One", sans-serif; font-weight: 400; font-style: normal; } .madimi-one-bold { font-family: "Madimi One", sans-serif; font-weight: 600; font-style: normal; } :root { --alt-font: "Madimi One", sans-serif !important; --base-color: #f1ac2d !important; --very-light-gray: #EEE8E6; --dark-gray: #36332e; --medium-gray: #858181; --light-medium-gray: #f8f3f0; --primary-font: 'Jost', sans-serif; } /* Esempio di utilizzo con grassetto */ h1, h2, h3, h4, h5, h6 { font-family: var(--alt-font); font-weight: 300; } p { font-family: "Comfortaa", sans-serif !important; font-weight: 300; } /* Aggiungi questo media query */ @media (max-width: 767px) { .slide-item[data-slide="0"] .slide-img { object-position: right center; } } @media (max-width: 991px) { .navbar-full-screen-menu-inner.bg-transparent, .navbar-modern-inner.bg-transparent, .navbar.bg-transparent { background-color: transparent !important; } .header-icon .icon>a { color: white !important; } } .navbar-toggler-line, .swiper-pagination-style-4.dark .swiper-pagination-bullet { background: white !important; } /* slide hero */ .slide-heading { font-size: 5rem; } .swiper { width: 100%; height: 100vh; position: relative; } .swiper-slide { background-size: cover; background-position: center; position: relative; } .slide-overlay { background: rgba(0, 0, 0, 0.6); position: absolute; inset: 0; z-index: 1; } .slide-content { z-index: 2; color: white; position: relative; text-align: center; padding: 2rem; animation: fadeInUp 1s ease-in-out both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } #section-mNI7xerm { position: relative; z-index: 1; padding-top: 0px !important; padding-bottom: 0px !important; } #section-mNI7xerm::before { content: ''; position: absolute; top: -160px; left: 0; width: 100%; height: 35%; z-index: 10; opacity: 0.5; pointer-events: none; } .swiper-button-next, .swiper-button-prev { color: white; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transition: all 0.3s ease; } .swiper-button-next:after, .swiper-button-prev:after { font-size: 1.2rem; font-weight: bold; } .swiper-button-next:hover, .swiper-button-prev:hover { background: rgba(255, 255, 255, 0.5); } .btn-slide { position: relative; display: inline-block; padding: 14px 36px; background: transparent; color: #fff; border: 2px solid #f1ac2d; /* Colore principale */ border-radius: 50px; font-size: 1.1rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; overflow: hidden; cursor: pointer; transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1); z-index: 1; } .btn-slide::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #f1ac2d 0%, #f8c56d 100%); /* Gradiente dorato */ transform: translateX(-100%); transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1); z-index: -1; } .btn-slide:hover { color: #fff; } .btn-slide:hover::before { transform: translateX(0); } .btn-slide:active { transform: translateY(3px) scale(0.98); } /* bordo */ .border-color-light-gray { border-color: #f1ac2d !important; } .border-color-custom { position: relative; border-bottom: none; } .border-color-custom::before, .border-color-custom::after { content: ''; position: absolute; bottom: 0; height: 3px; width: calc(50% - 50px); background-color: #f1ac2d; } .border-color-custom::before { left: 0; } .border-color-custom::after { right: 0; } /* Slide birre */ #birre::before { content: ''; position: absolute; top: -100px; left: 0; width: 100%; height: 35%; background: url(https://www.pscdn.it//img/172/25/05/97287-beer-foam-capovolta1.webp) center center / cover no-repeat; z-index: 1; pointer-events: none; filter: drop-shadow(0px 40px 40px rgba(0, 0, 0, 0.2)); } /* ====================== STILI BASE ====================== */ .special-section-slider { min-height: 100vh; min-width: 100vw; position: relative; overflow: hidden; } .special-swiper-slide { position: relative; } /* Immagine di sfondo: ora occupa sempre il 100% di slide */ .special-slide-image { position: absolute; top: 0; left: 50%; width: auto; height: 90%; object-fit: cover; transform: translateX(-50%); filter: drop-shadow(0px 30px 60px rgba(0, 0, 0, 0.5)); } .special-slide-content { position: relative; z-index: 2; color: white; padding: 2rem; height: 100vh; } .special-slide-title { font-weight: bold; position: absolute; top: 120px; right: 0; padding: 30px 100px 30px 50px; border-radius: 100px 0 0 100px; font-size: 6.5rem; text-align: right; max-width: 60%; color: transparent; background-color: transparent; } .special-slide-title2 { font-weight: bold; position: absolute; top: 120px; left: 0; padding: 30px 100px 30px 50px; border-radius: 100px 0 0 100px; font-size: 5rem; text-align: right; max-width: 80%; color: transparent; background-color: transparent; } .special-slide-description { position: absolute; top: 50%; left: 0; font-size: 2rem; font-weight: 400; line-height: 1.6; background: transparent; padding: 30px 50px 30px 100px; border-radius: 0 100px 100px 0; transition: transform 0.3s ease, opacity 0.3s ease; max-width: 550px !important; } .special-swiper-controls { position: absolute; bottom: 200px; right: 100px; z-index: 10; display: flex; gap: 10px; } .special-swiper-button-prev, .special-swiper-button-next { position: relative; margin-top: 0; color: white; background: transparent; padding: 20px; border-radius: 50%; width: 50px; height: 50px; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .special-swiper-controls:hover .special-swiper-button-prev:not(:hover), .special-swiper-controls:hover .special-swiper-button-next:not(:hover) { transform: scale(0.85); opacity: 0.8; } .special-swiper-button-prev:hover, .special-swiper-button-next:hover { transform: scale(1.15); z-index: 2; } .beer-specs { gap: 15px; margin-top: 10px; } .beer-category { color: #fff; font-size: 3rem; font-family: "Madimi One", sans-serif; font-weight: 400; font-style: normal; margin-bottom: 8px; text-transform: uppercase; } .ingredients-list { list-style-position: inside; padding-left: 1.5rem; margin: 0; display: block; color: #fff; } .ingredients-list li { list-style: disc !important; margin: 0.25rem 0; font-size: 1.5rem; } .beer-notes { border-left: 4px solid #fff; padding-left: 15px; margin-top: 10px; } /* ====================== MEDIA QUERIES ====================== */ @media (max-width: 1024px) { .special-slide-description { padding: 20px 50px 20px 20px; bottom: 0px; max-width: 550px !important; } .special-slide-title { padding: 30px 30px 30px 50px; } } /* Tablet e smartphone orizzontale */ @media (max-width: 768px) { .special-slide-title { font-size: 3rem; padding: 20px 40px 20px 20px; max-width: 90%; } .special-slide-title2 { font-weight: bold; position: absolute; top: 120px; left: 0; padding: 30px 100px 30px 50px; border-radius: 100px 0 0 100px; font-size: 3rem; text-align: right; max-width: 80%; color: transparent; background-color: transparent; } .special-slide-description { width: 40%; left: 0%; bottom: 20px; padding: 15px 25px 15px 15px; font-size: 0.95rem; max-width: 90% !important; border-radius: 0 50px 50px 0; } .special-slide-title { padding: 15px 15px 15px 25px; } .beer-specs { display: block; } .beer-category { font-size: 2rem; } .special-swiper-controls { bottom: 130px; right: 30px; } .special-swiper-button-prev, .special-swiper-button-next { width: 60px; height: 60px; padding: 12px; } } /* Smartphone verticale */ @media (max-width: 480px) { .special-slide-title { font-size: 3.5rem; padding: 15px 30px 15px 25px; top: 80px; } .special-slide-title2 { position: absolute; top: 80px; left: 0px; writing-mode: vertical-rl; text-orientation: sideways; line-height: 1; font-size: 5rem; font-weight: bold; padding: 0; max-width: none; text-align: center; letter-spacing: 0px; } .special-slide-description { font-size: 1.5rem; width: 55%; left: 0%; top: 60%; bottom: 0px; max-width: 50% !important; } .beer-category { font-size: 2rem; } .special-swiper-controls { bottom: 100px; right: 20px; } .special-swiper-button-prev, .special-swiper-button-next { width: 55px; height: 55px; padding: 8px; } .ingredients-list li { font-size: 1.3rem !important; } } /* special */ /* Sfumatura birra fissa */ .beer-liquid-background { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(235, 158, 32, 0.8) 0%, /* Colore oro chiaro */ rgba(235, 158, 32, 0.9) 30%, /* Transizione */ rgba(194, 124, 14, 0.9) 70%, /* Colore ambra */ rgba(150, 90, 10, 0.9) 100%); /* Colore più scuro in fondo */ z-index: 0; overflow: hidden; }