/* ---- Variables ---- */ :root { --bg: #0a0a0a; --bg-light: #111; --text: #fff; --text-gray: #b3b3b3; --text-muted: #888; --accent: #c41e2a; --accent-dark: #8b1520; --watermark: #161616; --glow: #d4762a; --font-main: 'Montserrat', sans-serif; --font-serif: 'Playfair Display', serif; --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } h1, h2, h3, h4, h5, h6 { color: unset; } #sections section h2, #sections section h3, #sections section h4 { color: unset; } /* ---- Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-main); background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Skip to content ---- */ .skip-link { position: absolute; top: -100px; left: 16px; background: var(--accent); color: #fff; padding: 12px 24px; font-size: 0.85rem; font-weight: 600; border-radius: 0 0 8px 8px; z-index: 10000; transition: top 200ms ease-out; text-decoration: none; } .skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; } /* ================================================ PRELOADER Dal video: sfondo nero, logo Vulcano centrato, barra di progresso bianca sottile sotto il logo ================================================ */ #preloader { position: fixed; inset: 0; background: var(--bg); z-index: 99999; display: flex; align-items: center; justify-content: center; } .preloader-inner { text-align: center; } .preloader-logo { width: 80px; margin-bottom: 25px; filter: brightness(0) invert(1); } .preloader-track { width: 160px; height: 2px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; margin: 0 auto; } .preloader-bar { width: 0; height: 100%; background: #fff; } /* ================================================ NAVBAR Dal video: logo bianco a sinistra, menu dentro una CAPSULA arrotondata grigio scuro centrata. "Home" ha pill rossa. ================================================ */ #mainNav, #mainNavbar { padding: 18px 0; z-index: 99999; transition: background 0.4s ease, padding 0.4s ease; } #mainNav.scrolled, #mainNavbar.scrolled { background: rgba(10, 10, 10, 0.92) !important; backdrop-filter: blur(15px); padding: 10px 0; } .link-accent { color: var(--accent); } .nav-logo { height: 64px; transition: height 0.3s ease; } #mainNav.scrolled .nav-logo, #mainNavbar.scrolled .nav-logo { height: 58px; } /* Capsula che contiene i link */ .nav-capsule { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 30px; padding: 4px 6px; } .nav-capsule .navbar-nav { gap: 0; } .nav-capsule .nav-link { font-size: 0.72rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-gray) !important; padding: 8px 16px !important; border-radius: 22px; transition: all 0.3s ease; white-space: nowrap; } .nav-capsule .nav-link:hover { color: var(--text) !important; } /* Link attivo con fiamme decorative */ .nav-capsule .nav-link.active { background: none; color: var(--text) !important; font-weight: 700; position: relative; padding-left: 28px !important; padding-right: 28px !important; } @keyframes flameFlicker { 0% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); } 25% { opacity: 0.85; transform: translateY(-52%) scale(1.05) rotate(-2deg); } 50% { opacity: 0.95; transform: translateY(-48%) scale(0.97) rotate(1deg); } 75% { opacity: 0.8; transform: translateY(-53%) scale(1.08) rotate(-1deg); } 100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); } } .nav-capsule .nav-link.active::before, .nav-capsule .nav-link.active::after { content: ''; position: absolute; top: 45%; transform: translateY(-50%); width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center; animation: flameFlicker 2s ease-in-out infinite; } .nav-capsule .nav-link.active::after { animation-delay: 0.3s; } .nav-capsule .nav-link.active::before { left: 6px; background-image: url('https: //www.pscdn.it/img/117/26/04/04950-flame-left.webp'); } .nav-capsule .nav-link.active::after { right: 6px; background-image: url('https://www.pscdn.it/img/117/26/04/42814-flame-right.webp'); } /* Hamburger mobile */ .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.2); padding: 5px 10px; } .navbar-toggler:focus { box-shadow: none; } .navbar-toggler-icon { filter: brightness(0) invert(1); } /* ================================================ SEZIONE 1: HERO Fullscreen, vulcano sfondo, testo in col-lg-6, bottiglia FUORI dalla grid, inclinata 32deg, tagliata da destra e sotto. ================================================ */ #hero { position: relative; width: 100%; height: 100svh; min-height: 600px; overflow: hidden; /* Taglia la bottiglia */ z-index: 10; /* Sopra le altre sezioni: nasconde le bottiglie che salgono */ background: var(--bg); /* Sfondo solido per coprire le bottiglie sotto */ } /* Background vulcano */ .hero-bg { position: absolute; inset: 0; width: 100%; height: 120%; /* Extra per parallax */ z-index: 0; } .hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.5; } /* Overlay gradiente */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.4) 35%, rgba(10, 10, 10, 0.35) 60%, rgba(10, 10, 10, 0.9) 90%, rgba(10, 10, 10, 1) 100%); } /* Container testo — centrato verticalmente e orizzontalmente */ .hero-container { position: relative; z-index: 3; height: 100svh; display: flex; align-items: center; justify-content: center; } .hero-text-col { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 5; } /* "BENVENUTI NEL MONDO" */ .hero-subtitle { font-size: 0.95rem; font-weight: 300; letter-spacing: 14px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 12px; opacity: 0; } /* "BIRRA VULCANO" */ .hero-title { font-size: clamp(3.2rem, 8vw, 6.5rem); font-weight: 900; letter-spacing: 5px; text-transform: uppercase; line-height: 0.95; margin-bottom: 35px; opacity: 0; } /* BOTTIGLIA — fuori dalla grid, absolute, inclinata, tagliata */ .hero-bottle { position: absolute; right: -60px; bottom: -120px; transform: rotate(-22deg) scale(1.15); z-index: 2; pointer-events: none; height: 85vh; max-height: 780px; width: auto; filter: drop-shadow(-20px 10px 40px rgba(0, 0, 0, 0.6)); opacity: 0; /* Animata con GSAP */ } /* Bottiglia dietro il testo su schermi medi */ @media (max-width: 1399.98px) and (min-width: 992px) { .hero-bottle { right: -120px; height: 75vh; max-height: 680px; opacity: 0; } } /* ================================================ BOTTONE VULCANO (GLOBALE) SVG Figma originale con testo sovrapposto. Outline di default, riempito rosso su hover. ================================================ */ .btn-vulcano-wrap { display: inline-block; text-decoration: none; cursor: pointer; opacity: 1; } .btn-vulcano-svg-container { position: relative; width: 280px; height: 140px; display: inline-block; } .btn-svg-obj { display: block; width: 280px; height: 140px; pointer-events: none; transition: opacity 0.4s ease; } .btn-svg-outline { opacity: 1; } .btn-svg-filled { position: absolute; top: 0; left: 0; width: 280px; height: 140px; opacity: 0; } /* Testo centrato nel bottone SVG. L'SVG ha viewBox 0 0 283.46 141.73. La pill occupa circa y:22 a y:120, la parte sinistra fino a x:170. Centro verticale visivo della pill: ~y:71 = 50% del viewBox. Centro orizzontale della pill (escluso cerchio): ~x:85 */ .btn-vulcano-label { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; padding-right: 100px; /* Compensa il cerchio a destra */ font-family: var(--font-main); font-size: 0.7rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); z-index: 2; pointer-events: none; transition: color 0.4s ease; white-space: nowrap; } /* Hover: SVG riempito appare, outline scompare */ .btn-vulcano-wrap:hover .btn-svg-outline { opacity: 0; } .btn-vulcano-wrap:hover .btn-svg-filled { opacity: 1; } .btn-vulcano-wrap:hover .btn-vulcano-label { color: #fff; } /* ================================================ SEZIONE 2: PRODUZIONE ARTIGIANALE Sfondo nero, watermark enorme dietro, 2 bottiglie centrate inclinate, card in alto-sx e basso-dx con bordo rosso. ================================================ */ #produzione { position: relative; width: 100%; min-height: 100svh; background: #13110C; display: flex; align-items: center; justify-content: center; overflow: visible; padding: 80px 0; z-index: 2; /* Sopra la sezione 3 */ } /* Watermark enorme dietro */ .prod-watermark { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); font-family: 'Kalnia', serif; font-weight: 700; text-transform: uppercase; color: rgba(255, 255, 255, 0.1); line-height: 0.85; text-align: center; pointer-events: none; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; width: 100%; overflow: hidden; /* Font-size scala per toccare i bordi senza uscire */ font-size: 13.5vw; } /* Bottiglie centrali */ .prod-bottles { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 40px; } .prod-bottle { height: 480px; width: auto; filter: drop-shadow(0 10px 30px rgba(255, 255, 255, 0.05)); } .prod-bottle-left { margin-right: -25px; } .prod-bottle-right { margin-left: -25px; } /* ================================================ BOTTIGLIA CON ETICHETTA Etichetta SOPRA la bottiglia, ritagliata con overflow:hidden sull'area del corpo cilindrico. Ombre cilindriche + riflesso vetro in overlay. In questa sezione: etichetta STATICA, centrata. ================================================ */ .bottle-with-label { position: relative; display: inline-block; } .bottle-with-label .bottle-base-img { height: 480px; width: auto; display: block; filter: drop-shadow(0 10px 30px rgba(255, 255, 255, 0.05)); } /* Area etichetta */ .bottle-label-area { position: absolute; top: 46%; left: 0%; right: 0%; height: 44%; background: transparent; z-index: 2; pointer-events: none; overflow: visible; border-radius: 10px; } /* Etichetta: object-fit: fill copre tutta l'area senza bordi vuoti. */ .bottle-label-area .label-img { display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; border-radius: 10px; } /* Sfumatura laterale più forte per simulare la curvatura verso il retro della bottiglia */ .bottle-label-area::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 10px; background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, transparent 3%, transparent 97%, rgba(0, 0, 0, 0.9) 100%); z-index: 3; } /* Card info — posizionate absolute */ .prod-card { position: absolute; z-index: 3; max-width: 280px; padding: 20px 25px; } .prod-card-left { top: 3%; left: 3%; } .prod-card-right { bottom: 3%; right: 3%; text-align: right; } .prod-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .prod-card-right .prod-card-header { flex-direction: row-reverse; } .prod-card-icon { width: 42px; height: 42px; flex-shrink: 0; } .prod-card-icon img, .prod-card-icon svg { width: 100%; height: 100%; object-fit: contain; } .prod-card-title { font-family: var(--font-main); font-size: 0.85rem; font-weight: 800; color: var(--accent); letter-spacing: 1px; line-height: 1.3; text-transform: uppercase; margin: 0; } .prod-card-text { font-size: 0.78rem; color: var(--text-gray); line-height: 1.6; margin: 0; } /* Wrapper sezione 2+3: clip solo asse X per evitare scrollbar, Y libero per animazione bottiglia */ #sections-wrapper { position: relative; overflow-x: clip; overflow-y: visible; } /* Wrapper per il pin/sticky della bottiglia APA */ .americana-wrapper { position: relative; z-index: 9999; display: inline-block; } #apa-placeholder { position: relative; } /* GPU acceleration per animazioni fluide su mobile */ .americana-wrapper, #apa-placeholder, .apa-scaler { will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; } /* ================================================ SEZIONE 3: BEER TRANSITION Sfondo rubinetti, bottiglia APA scende, etichetta ruota mostrando il retro. ================================================ */ #beer-transition { position: relative; height: 150svh; overflow: hidden; z-index: 0; /* Dietro la sezione 2 */ } /* Sfondo rubinetti */ .transition-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #1a1a1a; } /* Removed: image no longer needed, using solid background instead .transition-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.1); transform-origin: center center; } */ /* Overlay scuro sopra la foto */ .transition-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19, 17, 12, 1) 0%, rgba(19, 17, 12, 0.7) 20%, rgba(0, 0, 0, 0.5) 50%, rgba(19, 17, 12, 0.7) 80%, rgba(19, 17, 12, 1) 100%); z-index: 1; } /* Bottiglia APA — centrata, sticky per restare visibile durante scroll */ .transition-bottle { position: sticky; top: 15vh; z-index: 2; width: 180px; margin: 0 auto; display: block; } .transition-bottle-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.6)); } /* Area etichetta — stesse proporzioni del corpo bottiglia */ .transition-label-area { position: absolute; top: 46%; left: 0%; right: 0%; height: 44%; overflow: hidden; border-radius: 8px; z-index: 2; pointer-events: none; } /* Etichetta panoramica — larga 300% per poter scrollare */ .transition-label-img { position: absolute; top: 0; left: 0; width: 300%; height: 100%; object-fit: cover; object-position: center; } /* Sfumatura cilindrica sopra l'etichetta */ .transition-label-shadow { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, transparent 8%, transparent 92%, rgba(0, 0, 0, 0.8) 100%); z-index: 3; pointer-events: none; border-radius: 8px; } /* ================================================ SEZIONE 4: APA DETAIL Scheda della birra L'Americana con testi a sinistra, pillole tecniche a destra, bottiglia al centro (dalla sez.3). ================================================ */ #apa-detail { position: relative; min-height: 100svh; background: var(--bg); z-index: 1; display: flex; align-items: center; padding: 40px 0; } .apa-detail-content { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 5%; } /* Testi descrittivi — sinistra */ .apa-text { max-width: 400px; } .apa-title { font-family: var(--font-main); font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; color: var(--text); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 5px; visibility: hidden; } .apa-subtitle { font-family: var(--font-main); font-size: 0.85rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 25px; visibility: hidden; } .apa-description { font-family: var(--font-main); font-size: 0.95rem; font-weight: 300; color: var(--text-gray); line-height: 1.8; margin-bottom: 20px; visibility: hidden; } .apa-ingredients { font-family: var(--font-main); font-size: 0.7rem; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; line-height: 1.6; margin-bottom: 30px; visibility: hidden; } /* Pillole tecniche — destra */ .apa-pills { display: flex; flex-direction: column; gap: 20px; } .apa-pill { width: 90px; height: 90px; border-radius: 50%; border: 1px solid var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; visibility: hidden; } .pill-value { font-family: var(--font-main); font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1; } .pill-label { font-family: var(--font-main); font-size: 0.55rem; font-weight: 400; color: var(--text-gray); text-transform: uppercase; letter-spacing: 2px; margin-top: 4px; } /* ================================================ SEZIONE 5: DECIDI DA CHE PARTE STARE ================================================ */ #choose-side { height: 100svh; background: #000; overflow: hidden; position: relative; z-index: 10000; } .choose-left, .choose-right { overflow: visible; } /* Gradiente sfondo dinamico — unico, dal basso verso l'alto */ .choose-bg-gradient { background: linear-gradient(to top, rgba(255, 255, 255, 0.05) 0%, transparent 50%); z-index: 0; pointer-events: none; } /* Titolo */ .choose-title { font-family: var(--font-main); font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: 5px; z-index: 2; margin-top: 50px; text-wrap: balance; } .choose-title strong { font-weight: 900; } .choose-title-dynamic { font-weight: 900; } /* Piedistallo wrapper */ .pedestal-wrapper { z-index: 1; overflow: visible; } /* Glow incandescente */ .pedestal-glow { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); width: 90%; height: 250px; border-radius: 50%; filter: blur(80px); opacity: 0.25; z-index: 0; pointer-events: none; transition: opacity 0.5s ease; } .pedestal-glow-blue { background: radial-gradient(circle, #3D66AE 0%, #1e4a8a 30%, transparent 70%); } .pedestal-glow-red { background: radial-gradient(circle, #ff3b3b 0%, #c41e2a 30%, transparent 70%); } .choose-left:hover .pedestal-glow, .choose-right:hover .pedestal-glow { opacity: 0.55; } /* Gruppo sfondo (Group 47/48) */ .product-group { max-height: 110px; width: auto; position: relative; z-index: 1; opacity: 0.45; filter: brightness(0.5) saturate(0.7); margin-bottom: -15px; } /* Piedistallo piccolo sotto il gruppo */ .pedestal-rock-small { width: 75%; max-width: 320px; height: auto; position: relative; z-index: 1; opacity: 0.5; transform: scale(0.65); margin-top: -35px; margin-bottom: -40px; } /* Prodotto hero — incastrato DENTRO il piedistallo */ .product-hero { max-height: 600px; width: auto; position: relative; z-index: 4; margin-bottom: -100px; top: -100px; transition: transform 0.3s ease, filter 0.3s ease; } .choose-left .product-hero { filter: drop-shadow(0 15px 50px rgba(61, 102, 174, 0.4)); max-height: 500px; left: -200px; } .choose-right .product-hero { filter: drop-shadow(0 15px 50px rgba(196, 30, 42, 0.4)); left: 200px; } .choose-left:hover .product-hero, .choose-right:hover .product-hero { transform: scale(1.04); } /* Piedistallo grande */ .pedestal-rock { width: 300%; max-width: 1260px; height: auto; position: relative; z-index: 3; margin-top: -10%; } /* Piedistallo dietro (sfondo) */ /* Gruppo lattine sopra il piedistallo back */ /* Gruppo lattine sopra il piedistallo back */ .product-group-back { position: absolute; top: calc(10% - 200px); left: -2%; z-index: 2; height: 180px; width: auto; opacity: 0.8; filter: brightness(0.7); pointer-events: none; } /* Piedistallo dietro */ .pedestal-rock-back { position: absolute; top: 10%; left: -15%; z-index: 1; opacity: 0.5; transform: scale(1); filter: brightness(0.35); pointer-events: none; margin-right: 0; margin-left: 0; } /* Gruppo bottiglie sopra il piedistallo back destro */ .product-group-back-right { position: absolute; top: calc(10% - 125px); right: -5%; z-index: 2; height: 180px; width: auto; opacity: 0.8; filter: brightness(0.7); pointer-events: none; } /* Piedistallo back destro (bottiglia) */ .pedestal-rock-back-right.pedestal-flip { position: absolute; top: 15%; right: -15%; left: auto; z-index: 1; opacity: 0.5; transform: scaleX(-1) !important; filter: brightness(0.35); pointer-events: none; margin-right: 0; margin-left: 0; } /* Piedistallo sinistro: tocca il bordo sinistro */ .choose-left .pedestal-rock { margin-left: -60%; } /* Piedistallo destro: tocca il bordo destro */ .choose-right .pedestal-rock { margin-right: -60%; } /* Flip per lato destro */ .pedestal-flip { transform: scaleX(-1); } /* ---- BOTTONI SEZIONE 5 ---- */ /* Wrapper prodotto — position relative per i bottoni absolute */ .product-hero-wrap { z-index: 4; } /* Bottoni posizionati dal basso — stesso valore = stessa altezza */ #choose-side .btn-vulcano-wrap { position: absolute; bottom: 260px; top: auto !important; transform: translateY(50%); z-index: 99999; transition: transform 0.3s ease; } #choose-side .btn-vulcano-wrap:hover { transform: translateY(50%) scale(1.05); } /* LATTINE — a destra della lattina */ .choose-btn-blue { left: 110%; } /* BOTTIGLIE — a sinistra della bottiglia */ .choose-btn-red { right: 85%; } /* Filtri colore SVG — LATTINE (blu) */ .choose-btn-blue .btn-svg-filled { filter: hue-rotate(200deg) saturate(1.5); } .choose-btn-blue .btn-svg-outline { filter: hue-rotate(200deg) saturate(0.8) brightness(1.2); } /* BOTTIGLIE (rosso) — riflesso speculare, testo dritto */ .choose-btn-red .btn-vulcano-svg-container { transform: scaleX(-1); } .choose-btn-red .btn-vulcano-svg-container .btn-vulcano-label { transform: scaleX(-1); padding-right: 0; padding-left: 100px; } /* ================================================ RESPONSIVE ================================================ */ /* --- Desktop XL (1400px+) --- */ @media (min-width: 1400px) { .prod-bottle { height: 750px; } .bottle-with-label .bottle-base-img { height: 750px; } .prod-watermark { font-size: 13.5vw; } .transition-bottle { width: 220px; } } /* --- Desktop XL basso (1400px – 1550px) --- */ @media (min-width: 1400px) and (max-width: 1550px) { /* Bottoni: rientrano per evitare sovrapposizione */ .choose-btn-blue { left: 90%; } .choose-btn-red { right: 70%; } /* Piedistalli back: bottom fisso, stessa altezza */ .pedestal-rock-back { top: auto !important; bottom: 250px; left: -20%; transform: scale(0.9); } .pedestal-rock-back-right.pedestal-flip { top: auto !important; bottom: 250px; right: -20%; transform: scale(0.9) scaleX(-1) !important; } /* Gruppi birre: sopra i piedistalli */ .product-group-back { top: calc(10% - 130px); height: 200px; left: -5%; } .product-group-back-right { top: calc(10% - 30px); height: 200px; right: -8%; } } /* --- Desktop Medio (992px – 1399px) --- */ @media (max-width: 1399.98px) and (min-width: 992px) { /* Sezione 5 — Desktop medio: stesse proporzioni del XL, scalate */ .choose-title { margin-top: 10px; margin-bottom: 40px; } .product-hero { max-height: 500px; top: -80px; } .choose-left .product-hero { max-height: 420px; left: 0; } .choose-right .product-hero { left: 0; } .pedestal-rock { width: 280%; max-width: 1100px; } .choose-left .pedestal-rock { margin-left: -30%; } .choose-right .pedestal-rock { margin-right: -30%; } .pedestal-rock-back { transform: scale(0.85) !important; left: -55% !important; top: 8% !important; } .pedestal-rock-back-right.pedestal-flip { transform: scale(0.85) scaleX(-1) !important; right: -55% !important; } .product-group-back { height: 150px; top: calc(10% - 130px); } .product-group-back-right { height: 150px; top: calc(10% - 50px); } /* Forza stacking context sui parent */ #choose-side .choose-left, #choose-side .choose-right { z-index: auto !important; } #choose-side .pedestal-wrapper { z-index: auto !important; } #choose-side .product-hero-wrap { z-index: auto !important; } /* Bottoni: centrali, prima linea assoluta */ #choose-side .choose-btn-blue, #choose-side .choose-btn-red { position: absolute !important; z-index: 99999 !important; } /* Bottoni centrali: LATTINE sopra, BOTTIGLIE sotto con gap */ #choose-side .choose-btn-blue { left: calc(50vw - 18vw - 119px) !important; right: auto !important; } #choose-side .choose-btn-red { left: auto !important; right: calc(50vw - 14vw - 119px) !important; } #choose-side .choose-btn-blue .btn-vulcano-svg-container, #choose-side .choose-btn-red .btn-vulcano-svg-container { /* mantieni dimensioni */ } #choose-side .btn-vulcano-wrap { bottom: 230px; transform: translateY(50%) scale(0.85); } #choose-side .choose-btn-red.btn-vulcano-wrap { bottom: 120px; } #choose-side .btn-vulcano-wrap:hover { transform: translateY(50%) scale(0.9); } } /* --- Tablet Landscape (≤991px) --- */ @media (max-width: 991.98px) { .nav-capsule { background: rgba(255, 255, 255, 0.04); border: none; border-radius: 12px; padding: 15px 10px; margin-top: 15px; } .nav-capsule .navbar-nav { gap: 2px; } .nav-capsule .nav-link { text-align: center; padding: 10px 15px !important; } .hero-bottle { right: -180px; bottom: -100px; height: 65vh; max-height: 550px; transform: rotate(-22deg) scale(1); z-index: 1; } .hero-text-col { text-align: center; } .hero-subtitle { font-size: 0.8rem; letter-spacing: 8px; } /* Produzione: colonna su tablet */ #produzione { flex-direction: column; align-items: center; gap: 20px; padding: 50px 20px 80px; min-height: auto; } .prod-bottle { height: 480px; } .bottle-with-label .bottle-base-img { height: 480px; } .prod-bottles { gap: 25px; order: 2; } .prod-watermark { font-size: 13.5vw; } .transition-bottle { width: 150px; } .prod-card { position: relative; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; max-width: 100%; text-align: center; padding: 12px 20px; z-index: 4; } .prod-card-left { order: 1; } .prod-card-right { order: 3; text-align: center; } .prod-card-header { justify-content: center; } .prod-card-right .prod-card-header { flex-direction: row; } .prod-card-title { font-size: 0.75rem; } .prod-card-text { font-size: 0.7rem; } /* Sezione 4 APA — tablet: colonna centrata, sopra la bottiglia */ #apa-detail { z-index: 10000; } .apa-detail-content { flex-direction: column; align-items: center; gap: 40px; position: relative; z-index: 2; } .apa-text { text-align: center; max-width: 90%; } .apa-pills { flex-direction: row; gap: 15px; } .apa-pill { width: 75px; height: 75px; } .pill-value { font-size: 1.3rem; } /* Sezione 5 — tablet */ #choose-side { height: 85vh; max-height: 85vh; padding: 40px 0 20px; overflow: clip !important; overflow-x: visible !important; overflow-y: clip !important; } .choose-title { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-top: 20px; margin-bottom: 120px; } /* Prodotti: stessa altezza */ .product-hero { max-height: 380px; top: -40px; } .choose-left .product-hero { max-height: 380px; left: 0px; } .choose-right .product-hero { max-height: 430px; left: 0px; margin-bottom: -140px; top: -80px; } /* Piedistalli front: stessa altezza */ .pedestal-rock { width: 240%; max-width: 800px; margin-top: 20px; } .choose-left .pedestal-rock:not(.pedestal-rock-back) { margin-left: -50%; } .choose-right .pedestal-rock:not(.pedestal-rock-back):not(.pedestal-rock-back-right) { margin-right: -50%; } /* Layout a due colonne forzato */ #choose-side .row { flex-wrap: nowrap !important; } #choose-side .choose-left, #choose-side .choose-right { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; z-index: auto !important; } #choose-side .pedestal-wrapper { z-index: auto !important; } #choose-side .product-hero-wrap { z-index: auto !important; } #choose-side .btn-vulcano-wrap { z-index: 99999 !important; } /* Piedistalli back: visibili */ .pedestal-rock-back { transform: scale(0.65) !important; opacity: 0.6; left: -22% !important; top: 5% !important; z-index: 2; } .pedestal-rock-back-right.pedestal-flip { transform: scale(0.65) scaleX(-1) !important; opacity: 0.6; right: -22% !important; top: 5% !important; z-index: 2; } .product-group-back { height: 90px; top: calc(8% + 10px) !important; left: -2% !important; z-index: 3 !important; } .product-group-back-right { height: 90px; top: calc(8% + 10px) !important; right: -2.5% !important; left: auto !important; z-index: 3 !important; } /* Bottoni: libera il containing block — i bottoni risalgono a .pedestal-wrapper */ #choose-side .product-hero-wrap { position: static !important; } /* Bottoni: libera il containing block — i bottoni risalgono a .pedestal-wrapper */ #choose-side .product-hero-wrap { position: static !important; } #choose-side .btn-vulcano-wrap.choose-btn-blue { bottom: 73vw; transform: translateY(50%) scale(0.75); } #choose-side .btn-vulcano-wrap.choose-btn-blue:hover { transform: translateY(50%) scale(0.8); } #choose-side .btn-vulcano-wrap.choose-btn-red { bottom: 59vw; transform: translateY(50%) scale(0.75); } #choose-side .btn-vulcano-wrap.choose-btn-red:hover { transform: translateY(50%) scale(0.8); } } /* --- Tablet Small (≤707px) — fix sezione 5 --- */ @media (max-width: 707px) and (min-width: 576px) { /* Birre front: convergono verso il centro */ .choose-left .product-hero { max-height: 260px; left: -15px; } .choose-right .product-hero { max-height: 430px; left: 15px; transform: scale(0.7); top: -25px; } /* Gruppi birre back: responsive con vw */ .product-group-back { height: 13vw; top: calc(-17% + 10px) !important; left: 10% !important; } .product-group-back-right { height: 12vw; top: calc(1% + 40px) !important; right: 10% !important; } /* Piedistalli back: scala ridotta */ .pedestal-rock-back { transform: scale(0.65) !important; left: -18% !important; top: -21% !important; } .pedestal-rock-back-right.pedestal-flip { transform: scale(0.65) scaleX(-1) !important; right: -18% !important; top: 2% !important; } /* Bottoni: posizione responsive + containing block */ #choose-side .product-hero-wrap { position: static !important; } #choose-side .btn-vulcano-wrap.choose-btn-blue, #choose-side .btn-vulcano-wrap.choose-btn-red { z-index: 10 !important; } #choose-side .btn-vulcano-wrap.choose-btn-blue { bottom: 100vw; transform: translateY(50%) scale(0.65); } #choose-side .btn-vulcano-wrap.choose-btn-blue:hover { transform: translateY(50%) scale(0.7); } #choose-side .btn-vulcano-wrap.choose-btn-red { bottom: 79vw; transform: translateY(50%) scale(0.65); } #choose-side .btn-vulcano-wrap.choose-btn-red:hover { transform: translateY(50%) scale(0.7); } } /* --- Tablet Portrait (≤767px) --- */ @media (max-width: 767.98px) { .nav-logo { height: 32px; } .hero-subtitle { font-size: 0.65rem; letter-spacing: 5px; } .hero-title { font-size: 2.8rem; letter-spacing: 3px; } .hero-bottle { right: -200px; bottom: -80px; height: 50vh; max-height: 420px; transform: rotate(-22deg) scale(1); opacity: 0.3 !important; z-index: 1; } /* Produzione: colonna verticale su tablet portrait */ #produzione { flex-direction: column; align-items: center; gap: 20px; padding: 50px 20px 80px; min-height: auto; } .prod-bottle { height: 380px; } .bottle-with-label .bottle-base-img { height: 380px; } .prod-bottles { gap: 15px; order: 2; } .prod-bottle-left { margin-right: -15px; } .prod-bottle-right { margin-left: -15px; } .prod-watermark { font-size: 13.5vw; } .transition-bottle { width: 140px; } #beer-transition { height: 120svh; } .prod-card { position: relative; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; max-width: 100%; text-align: center; padding: 10px 20px; z-index: 4; } .prod-card-left { order: 1; } .prod-card-right { order: 3; text-align: center; } .prod-card-header { justify-content: center; } .prod-card-right .prod-card-header { flex-direction: row; } .prod-card-icon { width: 32px; height: 32px; } .prod-card-title { font-size: 0.7rem; } .prod-card-text { font-size: 0.62rem; } } /* --- Mobile (≤575px) --- */ @media (max-width: 575.98px) { /* Sezione: colonna verticale */ #produzione { flex-direction: column; align-items: center; gap: 25px; padding: 40px 20px 120px; min-height: auto; overflow: visible; } /* Watermark: dietro tutto, centrato */ .prod-watermark { font-size: 13.5vw; } .transition-bottle { width: 120px; } #beer-transition { height: 100svh; } /* Bottiglie più piccole */ .prod-bottle { height: 280px; } .bottle-with-label .bottle-base-img { height: 280px; } .prod-bottles { gap: 10px; order: 2; } .prod-bottle-left { margin-right: -10px; } .prod-bottle-right { margin-left: -10px; } /* Card: posizione relativa, in flow */ .prod-card { position: relative; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; max-width: 100%; text-align: center; padding: 10px 20px; z-index: 4; } .prod-card-left { order: 1; } .prod-card-right { order: 3; text-align: center; } .prod-card-header { justify-content: center; } .prod-card-right .prod-card-header { flex-direction: row; } .prod-card-icon { width: 28px; height: 28px; } .prod-card-title { font-size: 0.75rem; } .prod-card-text { font-size: 0.68rem; } /* Sezione 4 APA — mobile */ .apa-title { font-size: 1.8rem; } .apa-description { font-size: 0.85rem; } .apa-pill { width: 65px; height: 65px; } .pill-value { font-size: 1.1rem; } .pill-label { font-size: 0.5rem; } /* Sezione 5 — mobile: layout a due colonne, ridimensionato */ #choose-side { height: 70vh; max-height: 70vh; padding: 25px 0 10px; overflow: clip !important; overflow-x: visible !important; overflow-y: clip !important; } #choose-side .row { flex-wrap: nowrap !important; } #choose-side .choose-left, #choose-side .choose-right { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; } .choose-title { font-size: clamp(1.9rem, 6.5vw, 2.6rem); margin-top: 10px; margin-bottom: 60px; } .choose-left, .choose-right { overflow: visible; } /* Forza stessa altezza sui wrapper per allineare i back */ #choose-side .pedestal-wrapper { min-height: 56vw; } /* Birre front: ridotte, centrate, stessa scala per coerenza */ .product-hero { max-height: 50vw; top: -3vw; z-index: 5; position: relative; } .choose-left .product-hero { max-height: clamp(150px, 36vw, 200px); left: clamp(-30px, -5vw, -16px); top: -60px; transform: scale(0.9); } .choose-right .product-hero { max-height: 75vw; left: 7vw; transform: scale(0.5); top: 7vw; margin-bottom: -18vw; } /* Piedistalli front: ridotti */ .pedestal-rock { width: 210%; max-width: 450px; margin-top: 10px; } .choose-left .pedestal-rock:not(.pedestal-rock-back) { margin-left: -42%; } .choose-right .pedestal-rock:not(.pedestal-rock-back):not(.pedestal-rock-back-right) { margin-right: -42%; } /* Piedistalli back: stessa scala, posizione corretta per ogni lato */ .pedestal-rock-back { display: block !important; transform: scale(0.45) !important; opacity: 0.4; left: -55% !important; top: clamp(-190px, -33vw, -105px) !important; z-index: 2; width: 300% !important; max-width: none !important; } .pedestal-rock-back-right.pedestal-flip { display: block !important; transform: scale(0.45) scaleX(-1) !important; opacity: 0.4; right: -55% !important; top: 8vw !important; z-index: 2; width: 300% !important; max-width: none !important; } /* Gruppi birre back: stessa altezza e offset dai piedistalli */ .product-group-back { display: block !important; height: 10vw; top: clamp(-107px, -19vw, -60px) !important; left: 12% !important; z-index: 3 !important; } .product-group-back-right { display: block !important; height: 13vw; top: 21vw !important; right: 0% !important; z-index: 3 !important; } /* Bottoni: libera il containing block */ #choose-side .product-hero-wrap { position: static !important; } /* Bottoni: libera il containing block */ #choose-side .product-hero-wrap { position: static !important; } #choose-side .btn-vulcano-wrap.choose-btn-blue { bottom: 100vw; transform: translateY(50%) scale(0.65); } #choose-side .btn-vulcano-wrap.choose-btn-blue:hover { transform: translateY(50%) scale(0.68); } #choose-side .btn-vulcano-wrap.choose-btn-red { bottom: 86vw; transform: translateY(50%) scale(0.65); } #choose-side .btn-vulcano-wrap.choose-btn-red:hover { transform: translateY(50%) scale(0.68); } } /* --- Mobile Piccolo (≤389px) --- */ @media (max-width: 389.98px) { .prod-bottle { height: 240px; } .bottle-with-label .bottle-base-img { height: 240px; } .prod-watermark { font-size: 13.5vw; } .prod-card-title { font-size: 0.6rem; } .prod-card-text { font-size: 0.58rem; } /* Sezione 5 — birra front sinistra scalabile */ .choose-left .product-hero { max-height: 38vw; top: -15vw; } /* Sezione 5 — abbassare tutti i componenti tranne il titolo */ #choose-side .row { margin-top: 40px; } } /* ================================================ PAGINE INTERNE — STILI GLOBALI ================================================ */ /* ---- Alias variabili per pagine interne ---- */ :root { --color-bg: #0a0a0a; --color-bg-light: #111; --color-bg-card: #141414; --color-text: #fff; --color-text-secondary: #aaa; --color-text-muted: #666; --color-accent: #c41e2a; --color-accent-dark: #8b1520; --font-heading: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; --transition-smooth: all 0.3s ease; --border-subtle: 1px solid rgba(255, 255, 255, 0.06); } /* ================================================ NAVBAR INNER PAGES Stessa capsule della homepage ================================================ */ #mainNavbar { padding: 18px 0; z-index: 99999; transition: background 0.4s ease, padding 0.4s ease; } #mainNavbar .navbar-logo, .navbar-logo { height: 64px; transition: height 0.3s ease; } #mainNavbar.scrolled .navbar-logo { height: 58px; } #mainNavbar .navbar-nav { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 30px; padding: 4px 6px; gap: 0; } /* When nav-capsule wraps navbar-nav (homepage), remove duplicate pill from navbar-nav */ #mainNavbar .nav-capsule .navbar-nav { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; } #mainNavbar .nav-link { font-size: 0.72rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-gray) !important; padding: 8px 16px !important; border-radius: 22px; transition: all 0.3s ease; white-space: nowrap; } #mainNavbar .nav-link:hover { color: var(--text) !important; } #mainNavbar .nav-link.active { background: none; color: var(--text) !important; font-weight: 700; position: relative; padding-left: 28px !important; padding-right: 28px !important; } #mainNavbar .nav-link.active::before, #mainNavbar .nav-link.active::after { content: ''; position: absolute; top: 45%; transform: translateY(-50%); width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center; animation: flameFlicker 2s ease-in-out infinite; } #mainNavbar .nav-link.active::after { animation-delay: 0.3s; } #mainNavbar .nav-link.active::before { left: 6px; background-image: url('https://www.pscdn.it/img/117/26/04/04950-flame-left.webp'); } #mainNavbar .nav-link.active::after { right: 6px; background-image: url('https://www.pscdn.it/img/117/26/04/42814-flame-right.webp'); } #mainNavbar .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.2); padding: 5px 10px; } #mainNavbar .navbar-toggler:focus { box-shadow: none; } #mainNavbar .navbar-toggler-icon { filter: brightness(0) invert(1); } /* ================================================ PAGE HERO — Banner con vulcano ================================================ */ .page-hero { position: relative; height: 55vh; min-height: 360px; max-height: 500px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.4; z-index: 0; aspect-ratio: 16 / 9; } .birre-hero-v2-bg { aspect-ratio: 16 / 9; } .page-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.3) 40%, rgba(10, 10, 10, 0.5) 70%, rgba(10, 10, 10, 1) 100%); } .page-hero-content { position: relative; z-index: 2; text-align: center; padding-top: 60px; } .page-hero-title { font-family: var(--font-main); font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 900; letter-spacing: 8px; text-transform: uppercase; color: var(--text); text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5); text-wrap: balance; } /* ================================================ PAGE SECTIONS ================================================ */ .page-section { padding: 80px 0; position: relative; background: var(--bg); } .page-section h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; color: var(--text); } .page-section p { color: var(--text-gray); } /* ================================================ SECTION TITLES — Stile comune ================================================ */ .section-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; color: var(--text); text-wrap: balance; } .section-subtitle { font-size: 1rem; color: var(--text-gray); max-width: 700px; margin: 0 auto; line-height: 1.8; } /* ================================================ CARDS — Stile globale pagine interne ================================================ */ .card-dark { background: var(--color-bg-card); border: var(--border-subtle); border-radius: 16px; padding: 28px 28px; text-align: center; transition: var(--transition-smooth); position: relative; overflow: hidden; } .card-dark::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(135deg, rgba(196, 30, 42, 0.08) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s ease; } @media (hover: hover) and (pointer: fine) { .card-dark:hover { border-color: rgba(196, 30, 42, 0.2); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(196, 30, 42, 0.12); } .card-dark:hover::before { opacity: 1; } } .card-dark:active { transform: scale(0.98); } .card-dark-icon { width: 56px; height: 56px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(196, 30, 42, 0.1); position: relative; z-index: 1; } .card-dark-icon svg { width: 28px; height: 28px; stroke: var(--accent); stroke-width: 1.5; fill: none; } .card-dark h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; position: relative; z-index: 1; } .card-dark p { font-size: 0.88rem; color: var(--text-gray); line-height: 1.7; margin-bottom: 0; position: relative; z-index: 1; } .card-dark-label { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; position: relative; z-index: 1; } /* ================================================ BUTTONS — Flat style per pagine interne ================================================ */ .btn-vulcano { display: inline-block; padding: 14px 40px; background: var(--accent); color: var(--text); font-family: var(--font-main); font-size: 0.75rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; border: 2px solid var(--accent); border-radius: 4px; cursor: pointer; transition: background 0.3s var(--ease-out-strong), color 0.3s var(--ease-out-strong), border-color 0.3s var(--ease-out-strong), transform 0.3s var(--ease-out-strong), box-shadow 0.3s var(--ease-out-strong); } @media (hover: hover) and (pointer: fine) { .btn-vulcano:hover { background: transparent; color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(196, 30, 42, 0.3); } } .btn-vulcano:active { transform: scale(0.97); } .btn-vulcano-outline { display: inline-block; padding: 14px 40px; background: transparent; color: var(--text); font-family: var(--font-main); font-size: 0.75rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 4px; cursor: pointer; transition: background 0.3s var(--ease-out-strong), color 0.3s var(--ease-out-strong), border-color 0.3s var(--ease-out-strong), transform 0.3s var(--ease-out-strong), box-shadow 0.3s var(--ease-out-strong); } @media (hover: hover) and (pointer: fine) { .btn-vulcano-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(196, 30, 42, 0.25); } } .btn-vulcano-outline:active { transform: scale(0.97); } /* ================================================ FORMS — Dark theme ================================================ */ .form-dark .form-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-gray); margin-bottom: 8px; } .form-dark .form-control { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: var(--text); padding: 14px 18px; font-size: 0.9rem; transition: var(--transition-smooth); } .form-dark .form-control::placeholder { color: var(--text-muted); } .form-dark .form-control:focus { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 30, 42, 0.15); color: var(--text); } .form-dark .form-select { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: var(--text); padding: 14px 18px; font-size: 0.9rem; transition: var(--transition-smooth); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .form-dark .form-select:focus { background-color: rgba(255, 255, 255, 0.06); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 30, 42, 0.15); color: var(--text); } /* ================================================ TIMELINE — Chi Siamo ================================================ */ .timeline { position: relative; max-width: 700px; margin: 0 auto; padding: 40px 0; } .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, var(--accent), transparent); transform: translateX(-50%); } .timeline-item { position: relative; padding: 20px 0 40px; text-align: center; } .timeline-item::before { content: ''; position: absolute; left: 50%; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); transform: translateX(-50%); z-index: 1; } .timeline-year { font-family: var(--font-main); font-size: 2rem; font-weight: 900; color: var(--accent); letter-spacing: 3px; margin-bottom: 10px; } .timeline-text { font-size: 0.9rem; color: var(--text-gray); line-height: 1.7; max-width: 500px; margin: 0 auto; } /* ================================================ BEER CARDS + FILTER — Le Birre ================================================ */ .filter-btns { display: flex; justify-content: center; gap: 12px; margin-bottom: 50px; flex-wrap: wrap; } .filter-btn { padding: 10px 28px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 30px; color: var(--text-gray); font-family: var(--font-main); font-size: 0.72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: var(--transition-smooth); } .filter-btn:hover { border-color: var(--accent); color: var(--text); } .filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--text); } .beer-card { background: transparent; border: none; padding: 40px 20px 32px; text-align: center; height: 100%; position: relative; cursor: pointer; isolation: isolate; } /* Kill old pseudo-elements */ .beer-card::before, .beer-card::after { content: none; } /* Glow behind bottle on hover */ .beer-card-glow { position: absolute; top: 30%; left: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(196, 30, 42, 0.2) 0%, transparent 70%); border-radius: 50%; opacity: 0; filter: blur(30px); transition: opacity 0.6s ease, width 0.6s ease, height 0.6s ease; z-index: -1; pointer-events: none; } .beer-card:hover .beer-card-glow { opacity: 1; width: 180px; height: 180px; } .beer-card img { height: 230px; width: auto; margin: 0 auto 24px; display: block; object-fit: contain; aspect-ratio: 3 / 4; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s ease; position: relative; z-index: 1; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3)) saturate(1); } .beer-card:hover img { transform: translateY(-14px) scale(1.05); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)) saturate(1.15); } /* Thin rule separator */ .beer-card h4 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; font-style: italic; color: var(--text); letter-spacing: 0.3px; margin-bottom: 0; padding: 0 8px 10px; position: relative; z-index: 1; transition: color 0.3s ease; } .beer-card:hover h4 { color: #fff; } .beer-card p { font-family: var(--font-main); font-size: 0.58rem; color: var(--text-muted); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 0; padding: 10px 8px 0; position: relative; z-index: 1; transition: color 0.4s ease; border-top: 1px solid rgba(255, 255, 255, 0.06); } .beer-card-wrapper { transition: opacity 0.4s ease, transform 0.4s ease; } .beer-card-wrapper.hidden { opacity: 0; transform: scale(0.9); pointer-events: none; position: absolute; visibility: hidden; } /* ================================================ EVENT CARDS — Eventi ================================================ */ .event-card { background: var(--color-bg-card); border: var(--border-subtle); border-radius: 16px; padding: 35px 30px; transition: var(--transition-smooth); position: relative; overflow: hidden; } .event-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent); border-radius: 4px 0 0 4px; opacity: 0.5; transition: opacity 0.3s ease; } .event-card:hover { border-color: rgba(196, 30, 42, 0.2); transform: translateY(-3px); } .event-card:hover::before { opacity: 1; } .event-date { font-size: 0.7rem; font-weight: 700; color: var(--accent); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; } .event-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 8px; } .event-desc { font-size: 0.88rem; color: var(--text-gray); line-height: 1.6; margin-bottom: 0; } /* ================================================ FOOTER ================================================ */ #footer { background: #080808; padding: 60px 0 30px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .footer-logo { height: 40px; margin-bottom: 15px; } .footer-tagline { font-size: 0.85rem; color: var(--text-gray); line-height: 1.6; } .footer-links h5, .footer-contact h5 { font-family: var(--font-main); font-size: 0.7rem; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; } .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 8px; } .footer-links a { font-size: 0.85rem; color: var(--text-gray); transition: color 0.3s ease; } .footer-links a:hover { color: var(--text); } .footer-contact p { font-size: 0.85rem; color: var(--text-gray); line-height: 1.6; } .footer-social { display: flex; gap: 12px; margin-top: 15px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.7rem; font-weight: 700; color: var(--text-gray); transition: var(--transition-smooth); } .footer-social a:hover { border-color: var(--accent); color: var(--accent); background: rgba(196, 30, 42, 0.1); } .footer-bottom { text-align: center; padding-top: 30px; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .footer-bottom p { font-size: 0.75rem; color: var(--text-muted); margin: 0; } /* ================================================ REVEAL ANIMATIONS — pagine interne ================================================ */ .reveal-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-up.revealed { opacity: 1; transform: translateY(0); } .reveal-left, .reveal-right, .reveal-scale { opacity: 0; will-change: transform, opacity; } .reveal-left { transform: translateX(-40px); } .reveal-right { transform: translateX(40px); } .reveal-scale { transform: scale(0.95); } .reveal-clip { clip-path: inset(100% 0 0 0); will-change: clip-path; } .reveal-clip-left { clip-path: inset(0 100% 0 0); will-change: clip-path; } [data-stagger]>* { transition-delay: calc(var(--i, 0) * 60ms); } /* ================================================ HORECA — Etichette Personalizzate ================================================ */ .horeca-service-header { display: flex; align-items: center; gap: 16px; margin-bottom: 15px; } .horeca-service-number { font-family: var(--font-main); font-size: 4rem; font-weight: 900; color: rgba(196, 30, 42, 0.15); line-height: 1; letter-spacing: -2px; } .horeca-service-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--text); margin: 0; } .horeca-service-accent { color: var(--accent); } /* Horeca headers — mobile fix */ @media (max-width: 767.98px) { .horeca-service-header { flex-direction: column; align-items: flex-start; gap: 8px; } .horeca-service-number { font-size: 2.5rem; } .horeca-service-title { font-size: 1.25rem; letter-spacing: 1.5px; word-break: break-word; overflow-wrap: break-word; } } @media (max-width: 400px) { .horeca-service-title { font-size: 1.1rem; letter-spacing: 1px; } } /* Label Customizer */ .label-customizer { background: var(--color-bg-card); border: var(--border-subtle); border-radius: 20px; padding: 40px; position: relative; overflow: hidden; } .label-customizer::before { content: ''; position: absolute; top: -50%; right: -30%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(196, 30, 42, 0.06) 0%, transparent 70%); pointer-events: none; } .label-preview-container { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; } .label-preview-bottle { position: relative; display: inline-block; } .label-preview-bottle img { height: 400px; width: auto; display: block; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4)); } .label-preview-area { position: absolute; top: 36%; left: 12%; right: 12%; height: 28%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; pointer-events: none; } .label-preview-area img { width: 100%; height: 100%; object-fit: contain; filter: none; } .label-preview-overlay { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 8%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.1) 92%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; z-index: 2; } .label-upload-zone { border: 2px dashed rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 40px 30px; text-align: center; cursor: pointer; transition: var(--transition-smooth); position: relative; } .label-upload-zone:hover, .label-upload-zone.dragover { border-color: var(--accent); background: rgba(196, 30, 42, 0.05); } .label-upload-zone svg { width: 48px; height: 48px; stroke: var(--text-muted); stroke-width: 1.5; fill: none; margin-bottom: 15px; transition: stroke 0.3s ease; } .label-upload-zone:hover svg { stroke: var(--accent); } .label-upload-zone h4 { font-family: var(--font-main); font-size: 0.85rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); margin-bottom: 8px; } .label-upload-zone p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0; } .label-options { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; } .label-color-picker { display: flex; gap: 10px; flex-wrap: wrap; } .label-color-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: var(--transition-smooth); position: relative; } .label-color-swatch:hover, .label-color-swatch.active { border-color: var(--text); transform: scale(1.15); } .label-color-swatch.active::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--bg); } /* ================================================ HORECA — Impianti alla Spina ================================================ */ .tap-plan-card { background: var(--color-bg-card); border: var(--border-subtle); border-radius: 20px; padding: 40px 30px; text-align: center; transition: var(--transition-smooth); position: relative; overflow: hidden; height: 100%; } .tap-plan-card.featured { border-color: rgba(196, 30, 42, 0.3); background: linear-gradient(180deg, rgba(196, 30, 42, 0.08) 0%, var(--color-bg-card) 40%); } .tap-plan-card.featured::after { content: 'CONSIGLIATO'; position: absolute; top: 16px; right: -32px; background: var(--accent); color: var(--text); font-size: 0.55rem; font-weight: 700; letter-spacing: 1.5px; padding: 5px 40px; transform: rotate(45deg); } .tap-plan-card:hover { border-color: rgba(196, 30, 42, 0.3); transform: translateY(-6px); } .tap-plan-icon { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(196, 30, 42, 0.1); } .tap-plan-icon svg { width: 32px; height: 32px; stroke: var(--accent); stroke-width: 1.5; fill: none; } .tap-plan-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin-bottom: 8px; } .tap-plan-desc { font-size: 0.82rem; color: var(--text-gray); line-height: 1.6; margin-bottom: 20px; } .tap-plan-features { list-style: none; padding: 0; margin: 0 0 25px; text-align: left; } .tap-plan-features li { font-size: 0.82rem; color: var(--text-gray); padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); display: flex; align-items: center; gap: 10px; } .tap-plan-features li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ================================================ HORECA — Merchandising ================================================ */ /* --- Servizi Hero — Fullscreen Immersive (Experience) --- */ .servizi-hero { position: relative; min-height: 100dvh; overflow: hidden; display: flex; align-items: stretch; } /* Background image layers — crossfade */ .servizi-bg-layer { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.8s var(--ease-in-out-strong); } .servizi-bg-layer.active { opacity: 1; } .servizi-bg-layer img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 6s var(--ease-out-strong); } .servizi-bg-layer.active img { transform: scale(1); } /* Dark overlay */ .servizi-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6, 6, 6, 0.92) 0%, rgba(6, 6, 6, 0.7) 40%, rgba(6, 6, 6, 0.35) 100%); } /* Film grain texture */ .servizi-grain { position: absolute; inset: 0; z-index: 2; opacity: 0.04; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* Content wrapper — grid layout */ .servizi-content { position: relative; z-index: 3; width: 100%; display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: center; padding: 120px 60px 80px; max-width: 1440px; margin: 0 auto; } /* === Left nav thumbnails === */ .servizi-nav { display: flex; flex-direction: column; gap: 6px; } .servizi-nav-label { font-family: var(--font-main); font-size: 0.68rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); margin-bottom: 20px; padding-left: 4px; } .servizi-thumb { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.35s var(--ease-out-strong); background: transparent; border: 1px solid transparent; } .servizi-thumb:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); } .servizi-thumb.active { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Animated accent bar on left edge */ .servizi-thumb-bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; background: var(--accent); border-radius: 0 3px 3px 0; transition: transform 0.4s var(--ease-spring); } .servizi-thumb.active .servizi-thumb-bar { transform: translateY(-50%) scaleY(1); } .servizi-thumb-num { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.12); min-width: 36px; transition: color 0.35s ease; } .servizi-thumb.active .servizi-thumb-num { color: var(--accent); } .servizi-thumb-info { min-width: 0; } .servizi-thumb-info h5 { font-family: var(--font-main); font-size: 0.82rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 3px 0; transition: color 0.35s ease; } .servizi-thumb.active .servizi-thumb-info h5 { color: #fff; } .servizi-thumb-info p { font-size: 0.72rem; color: rgba(255, 255, 255, 0.25); margin: 0; line-height: 1.3; transition: color 0.35s ease; } .servizi-thumb.active .servizi-thumb-info p { color: rgba(255, 255, 255, 0.45); } /* === Right side — featured detail === */ .servizi-detail { padding-left: 40px; max-width: 620px; transition: opacity 0.3s ease, transform 0.3s ease; } .servizi-detail.servizi-switching { opacity: 0; transform: translateY(16px); } .servizi-detail-eyebrow { display: inline-block; font-family: var(--font-main); font-size: 0.7rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; padding: 6px 16px; border: 1px solid rgba(196, 30, 42, 0.3); border-radius: 100px; } .servizi-detail-title { font-family: var(--font-serif); font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -1px; color: #fff; margin-bottom: 28px; text-wrap: balance; } .servizi-detail-desc { font-size: 1rem; color: rgba(255, 255, 255, 0.6); line-height: 1.8; margin-bottom: 36px; max-width: 480px; } .servizi-detail-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-main); font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-decoration: none; padding: 16px 32px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 60px; transition: all 0.35s var(--ease-out-strong); background: transparent; } .servizi-detail-btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-spring); } .servizi-detail-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 30px rgba(196, 30, 42, 0.25); } .servizi-detail-btn:hover svg { transform: translateX(4px); } .servizi-detail-btn:active { transform: scale(0.97); } /* Scroll hint */ .servizi-scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.2); font-size: 0.65rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; animation: servizi-bounce 2.5s ease-in-out infinite; } .servizi-scroll-hint svg { width: 16px; height: 16px; } @keyframes servizi-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* === Mobile === */ @media (max-width: 991.98px) { .servizi-content { grid-template-columns: 1fr; gap: 40px; padding: 110px 24px 100px; } .servizi-overlay { background: linear-gradient(180deg, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.65) 50%, rgba(6, 6, 6, 0.9) 100%); } .servizi-nav { order: 2; } .servizi-detail { order: 1; padding-left: 0; max-width: 100%; } .servizi-detail-title { font-size: clamp(2rem, 8vw, 3rem); } } @media (max-width: 575.98px) { .servizi-thumb { padding: 14px 16px; gap: 12px; } .servizi-thumb-num { font-size: 1.2rem; min-width: 28px; } .servizi-thumb-info p { display: none; } .servizi-detail-desc { font-size: 0.9rem; } } /* --- Merch Showcase Layout --- */ .merch-showcase { min-height: 480px; } /* Sidebar thumbnails */ .merch-thumb { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--color-bg-card); border: var(--border-subtle); border-radius: 14px; cursor: pointer; transition: all 0.3s ease; } .merch-thumb:hover { border-color: rgba(196, 30, 42, 0.25); background: rgba(196, 30, 42, 0.04); } .merch-thumb.active { border-color: rgba(196, 30, 42, 0.5); background: rgba(196, 30, 42, 0.08); box-shadow: 0 0 20px rgba(196, 30, 42, 0.1); } .merch-thumb-icon { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); border-radius: 10px; } .merch-thumb-icon svg { width: 22px; height: 22px; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; fill: none; transition: stroke 0.3s ease; } .merch-thumb.active .merch-thumb-icon svg { stroke: rgba(196, 30, 42, 0.7); } .merch-thumb-text { min-width: 0; } .merch-thumb-text h5 { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text); margin: 0 0 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .merch-thumb-text p { font-size: 0.72rem; color: var(--text-gray); margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Featured card grande */ .merch-featured { background: var(--color-bg-card); border: var(--border-subtle); border-radius: 20px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: opacity 0.25s ease, transform 0.25s ease; } .merch-featured.merch-switching { opacity: 0; transform: scale(0.97); } .merch-featured-visual { flex: 1; min-height: 280px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(196, 30, 42, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); position: relative; } .merch-featured-visual svg { width: 100px; height: 100px; stroke: rgba(196, 30, 42, 0.35); stroke-width: 0.8; fill: none; } .merch-featured-body { padding: 30px 35px; } .merch-featured-body h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin-bottom: 12px; } .merch-featured-body p { font-size: 0.9rem; color: var(--text-gray); line-height: 1.7; margin-bottom: 0; } /* Mobile: stack vertically */ @media (max-width: 767.98px) { .merch-showcase { min-height: auto; } .merch-sidebar { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; } .merch-thumb { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px 12px; } .merch-thumb-icon { width: 34px; height: 34px; } .merch-thumb-icon svg { width: 18px; height: 18px; } .merch-thumb-text h5 { font-size: 0.65rem; letter-spacing: 0.5px; white-space: normal; overflow: visible; text-overflow: unset; } .merch-thumb-text p { display: none; } .merch-featured-visual { min-height: 200px; } .merch-featured-body { padding: 20px 24px; } .merch-featured-body h3 { font-size: 1rem; letter-spacing: 1px; word-break: break-word; } } /* ================================================ HORECA — Steps / Come Funziona ================================================ */ .steps-row { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; counter-reset: step-counter; } .step-item { flex: 1; min-width: 200px; max-width: 260px; text-align: center; position: relative; counter-increment: step-counter; } .step-number { width: 50px; height: 50px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-main); font-size: 1.1rem; font-weight: 800; color: var(--accent); position: relative; } .step-item h4 { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); margin-bottom: 8px; } .step-item p { font-size: 0.8rem; color: var(--text-gray); line-height: 1.6; } /* ================================================ INNER PAGES — Responsive ================================================ */ @media (max-width: 991.98px) { .page-hero { height: 40vh; min-height: 280px; } .page-hero-title { font-size: clamp(2rem, 8vw, 3.5rem); letter-spacing: 4px; } .page-section { padding: 60px 0; } .label-customizer { padding: 25px; } .label-preview-bottle img { height: 300px; } .label-preview-container { min-height: 320px; } #mainNavbar .navbar-nav { background: rgba(255, 255, 255, 0.04); border-radius: 16px; padding: 12px; margin-top: 15px; } #mainNavbar .nav-link { padding: 10px 16px !important; border-radius: 10px; text-align: center; } } @media (max-width: 575.98px) { .beer-card { padding: 24px 12px 20px; } .beer-card img { height: 170px; } .beer-card h4 { font-size: 0.9rem; } .beer-card p { font-size: 0.55rem; letter-spacing: 2px; } .page-hero { height: 35vh; min-height: 240px; } .page-hero-title { letter-spacing: 3px; } .page-section { padding: 50px 0; } .label-preview-bottle img { height: 250px; } .label-preview-container { min-height: 280px; } .tap-plan-card { padding: 30px 20px; } .steps-row { gap: 20px; } .step-item { min-width: 100%; } .beer-card img { height: 160px; } .timeline::before { left: 20px; } .timeline-item { text-align: left; padding-left: 50px; } .timeline-item::before { left: 20px; } } /* ================================================ HORECA — Extra Styles ================================================ */ .horeca-section-alt { background: var(--bg-light); } .hero-page-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .label-tool-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin-bottom: 20px; } .label-option-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-gray); margin-bottom: 10px; } .label-file-info { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 12px 16px; margin-top: 12px; } .label-file-name { font-size: 0.82rem; color: var(--text); font-weight: 500; } .label-file-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; transition: color 0.3s ease; display: flex; align-items: center; } .label-file-remove:hover { color: var(--accent); } .label-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; } .label-placeholder span { font-size: 0.65rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); } /* Form select dark override */ .form-dark .form-select { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: var(--text); padding: 12px 16px; font-size: 0.85rem; } .form-dark .form-select option { background: #1a1a1a; color: var(--text); } /* Tap Stats */ .tap-stat { padding: 25px 10px; } .tap-stat-value { display: block; font-family: var(--font-main); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; color: var(--accent); letter-spacing: 2px; line-height: 1; margin-bottom: 6px; } .tap-stat-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-gray); } /* Smooth scroll for anchor links */ html { scroll-padding-top: 80px; } /* Navbar scrolled detection for inner pages */ #mainNavbar { background: transparent; } /* ================================================ RESTYLING V2 — Inner Pages Enhanced ================================================ */ /* --- HERO PARALLAX ENHANCED --- */ .page-hero { will-change: transform; } .page-hero-bg { transition: transform 0.1s linear; } .page-hero-subtitle { font-family: var(--font-serif); font-size: clamp(0.9rem, 2vw, 1.15rem); font-weight: 400; font-style: italic; color: rgba(255, 255, 255, 0.6); letter-spacing: 2px; margin-top: 12px; } /* --- TIMELINE V2 — Alternating Layout --- */ .timeline-v2 { position: relative; padding: 40px 0; } .timeline-v2::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--accent), transparent); transform: translateX(-50%); } .timeline-v2-item { position: relative; margin-bottom: 80px; opacity: 0; } .timeline-v2-item.revealed { opacity: 1; } .timeline-v2-dot { position: absolute; left: 50%; top: 30px; width: 16px; height: 16px; background: var(--accent); border: 3px solid var(--bg); border-radius: 50%; transform: translateX(-50%); z-index: 2; } .timeline-v2-year { font-family: var(--font-main); font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; color: rgba(255, 255, 255, 0.04); line-height: 1; letter-spacing: 4px; margin-bottom: 8px; } .timeline-v2-content h3 { font-family: var(--font-main); font-size: 1.3rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin-bottom: 12px; } .timeline-v2-content p { font-size: 0.95rem; line-height: 1.8; color: var(--text-gray); } .timeline-v2-img { border-radius: 12px; overflow: hidden; position: relative; } .timeline-v2-img img { width: 100%; height: 280px; object-fit: cover; display: block; clip-path: inset(0 100% 0 0); transition: clip-path 0s; } .timeline-v2-img img.revealed { clip-path: inset(0 0% 0 0); } @media (max-width: 991px) { .timeline-v2::before, .timeline-v2-line { left: 20px; } .timeline-v2-dot { left: 20px; } .timeline-v2-item .row { flex-direction: column !important; } .timeline-v2-item .col-md-5 { width: 100%; padding-left: 50px; } .timeline-v2-item .offset-md-1 { margin-left: 0; } .timeline-v2-img img { height: 200px; } } /* --- NAVBAR TABLET (768px - 991px) --- */ @media (max-width: 991px) { #mainNav, #mainNavbar { background: rgba(10, 10, 10, 0.98) !important; backdrop-filter: blur(20px); } #mainNav.scrolled, #mainNavbar.scrolled { background: rgba(10, 10, 10, 0.98) !important; } #mainNavbar .navbar-nav { background: rgba(255, 255, 255, 0.03); border: none; border-radius: 0; padding: 16px 0; gap: 2px; } .nav-capsule { background: rgba(255, 255, 255, 0.03) !important; border: none !important; border-radius: 0 !important; padding: 16px 0 !important; } /* Link — fit-content centrato per tenere le fiamme vicine */ .nav-capsule .navbar-nav, #mainNavbar .navbar-nav { align-items: center; } .nav-capsule .nav-link, #mainNavbar .nav-link { padding: 10px 16px !important; border-radius: 8px !important; width: fit-content; text-align: center; } /* Link attivo con fiamme */ .nav-capsule .nav-link.active, #mainNavbar .nav-link.active { padding-left: 32px !important; padding-right: 32px !important; } .nav-capsule .nav-link.active::before, .nav-capsule .nav-link.active::after, #mainNavbar .nav-link.active::before, #mainNavbar .nav-link.active::after { width: 16px; height: 16px; } .nav-capsule .nav-link.active::before, #mainNavbar .nav-link.active::before { left: 8px; } .nav-capsule .nav-link.active::after, #mainNavbar .nav-link.active::after { right: 8px; } } /* --- NAVBAR MOBILE LANDSCAPE (576px - 767px) --- */ @media (max-width: 767px) { .nav-capsule .nav-link.active, #mainNavbar .nav-link.active { padding-left: 28px !important; padding-right: 28px !important; } .nav-capsule .nav-link.active::before, .nav-capsule .nav-link.active::after, #mainNavbar .nav-link.active::before, #mainNavbar .nav-link.active::after { width: 14px; height: 14px; } .nav-capsule .nav-link.active::before, #mainNavbar .nav-link.active::before { left: 6px; } .nav-capsule .nav-link.active::after, #mainNavbar .nav-link.active::after { right: 6px; } } /* --- NAVBAR MOBILE PORTRAIT (< 576px) --- */ @media (max-width: 575px) { .nav-capsule .nav-link.active, #mainNavbar .nav-link.active { padding-left: 26px !important; padding-right: 26px !important; } .nav-capsule .nav-link.active::before, .nav-capsule .nav-link.active::after, #mainNavbar .nav-link.active::before, #mainNavbar .nav-link.active::after { width: 12px; height: 12px; } .nav-capsule .nav-link.active::before, #mainNavbar .nav-link.active::before { left: 6px; } .nav-capsule .nav-link.active::after, #mainNavbar .nav-link.active::after { right: 6px; } } /* --- COUNTER STATS --- */ .counter-stat { text-align: center; padding: 30px 15px; } .counter-stat-value { display: block; font-family: var(--font-main); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 900; color: var(--accent); line-height: 1; margin-bottom: 8px; white-space: nowrap; } .counter-stat-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-gray); } /* --- TERRITORY SECTION (full-width parallax) --- */ .territory-section { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; } .territory-bg { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; opacity: 0.25; will-change: transform; } .territory-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.7) 50%, rgba(10, 10, 10, 0.3) 100%); z-index: 1; } .territory-content { position: relative; z-index: 2; } .territory-content .lead-text { font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 2; color: var(--text-gray); font-style: italic; } /* --- PROCESS STEPS (horizontal scroll on desktop) --- */ .process-section { overflow: hidden; padding: 80px 0; background: var(--bg-light); } .process-track { display: flex; gap: 0; width: fit-content; } .process-step { min-width: 100vw; display: flex; align-items: center; justify-content: center; padding: 0 60px; } .process-step-number { font-family: var(--font-main); font-size: clamp(6rem, 12vw, 10rem); font-weight: 900; color: rgba(196, 30, 42, 0.08); line-height: 1; margin-bottom: 0; } .process-step-title { font-family: var(--font-main); font-size: 1.6rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text); margin-bottom: 16px; } .process-step-text { font-size: 1rem; line-height: 1.8; color: var(--text-gray); max-width: 500px; } .process-step-img { border-radius: 16px; overflow: hidden; max-height: 350px; } .process-icon-wrap { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(196, 30, 42, 0.15); border-radius: 50%; background: radial-gradient(circle at center, rgba(196, 30, 42, 0.06) 0%, transparent 70%); transition: transform 0.4s ease, border-color 0.4s ease; } .process-icon-wrap:hover { transform: scale(1.08); border-color: rgba(196, 30, 42, 0.35); } .process-icon-wrap svg { width: 140px; height: 140px; } .process-step .col-lg-4.text-center { text-align: center !important; } .process-step-number { text-align: center; } .process-step-title { text-align: center; } .process-step-text { text-align: center; margin-left: auto; margin-right: auto; } @media (max-width: 991px) { .process-icon-wrap { width: 160px; height: 160px; } .process-icon-wrap svg { width: 100px; height: 100px; } } .process-step-img img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 991px) { .process-track { flex-direction: column; width: 100%; } .process-step { min-width: 100%; padding: 40px 20px; flex-direction: column; text-align: center; } .process-step-number { font-size: 5rem; } } /* --- TASTING PACKAGES --- */ .tasting-card { background: var(--color-bg-card, #141414); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 40px 30px; text-align: center; transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; overflow: hidden; } .tasting-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(196, 30, 42, 0.08), transparent 60%); opacity: 0; transition: opacity 0.4s ease; } .tasting-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(196, 30, 42, 0.12); } .tasting-card:hover::before { opacity: 1; } .tasting-card.featured { border-color: var(--accent); box-shadow: 0 0 30px rgba(196, 30, 42, 0.15); } .tasting-card.featured::after { content: 'CONSIGLIATO'; position: absolute; top: 20px; right: -35px; background: var(--accent); color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; padding: 5px 40px; transform: rotate(45deg); } .tasting-card-name { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; font-style: italic; color: var(--text); margin-bottom: 6px; position: relative; z-index: 1; } .tasting-card-price { font-family: var(--font-main); font-size: 2.4rem; font-weight: 900; color: var(--accent); margin-bottom: 16px; position: relative; z-index: 1; } .tasting-card-price small { font-size: 0.9rem; font-weight: 600; color: var(--text-gray); } .tasting-card-desc { font-size: 0.9rem; line-height: 1.7; color: var(--text-gray); margin-bottom: 20px; position: relative; z-index: 1; } .tasting-card-includes { list-style: none; padding: 0; margin: 0 0 30px; position: relative; z-index: 1; } .tasting-card-includes li { font-size: 0.85rem; color: var(--text-gray); padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .tasting-card-includes li:last-child { border: none; } /* ================================================ EVENTS V3 — Editorial Asymmetric ================================================ */ /* Section */ .ev3-section { padding-top: 100px; padding-bottom: 120px; } /* Header — split layout */ .ev3-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 60px; } .ev3-header-left { flex-shrink: 0; } .ev3-eyebrow { display: block; font-family: var(--font-main); font-size: 0.68rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .ev3-title { font-family: var(--font-serif); font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 700; line-height: 1.05; letter-spacing: -1px; color: var(--text); } .ev3-header-right { max-width: 380px; padding-bottom: 6px; } .ev3-header-right p { font-size: 0.88rem; color: var(--text-gray); line-height: 1.7; margin-bottom: 20px; } .ev3-view-all { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-main); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); text-decoration: none; transition: color 0.3s ease; } .ev3-view-all svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-spring); } .ev3-view-all:hover { color: var(--accent); } .ev3-view-all:hover svg { transform: translateX(4px); } /* Grid — asymmetric CSS grid */ .ev3-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; } /* === Card base === */ .ev3-card { position: relative; border-radius: 18px; overflow: hidden; } .ev3-card-link { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; color: inherit; } /* Media */ .ev3-card-media { position: absolute; inset: 0; z-index: 0; } .ev3-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out-strong); will-change: transform; } .ev3-card:hover .ev3-card-media img { transform: scale(1.05); } /* Gradient overlay */ .ev3-card-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 6, 6, 0) 0%, rgba(6, 6, 6, 0.15) 40%, rgba(6, 6, 6, 0.85) 100%); transition: background 0.5s ease; } .ev3-card:hover .ev3-card-overlay { background: linear-gradient(180deg, rgba(6, 6, 6, 0.1) 0%, rgba(6, 6, 6, 0.25) 40%, rgba(6, 6, 6, 0.9) 100%); } /* Content */ .ev3-card-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 36px; } .ev3-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .ev3-card-date { font-family: var(--font-main); font-size: 0.7rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .ev3-card-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); padding: 4px 12px; border: 1px solid rgba(196, 30, 42, 0.4); border-radius: 100px; } .ev3-card-title { font-family: var(--font-serif); font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 1.15; transition: transform 0.4s var(--ease-out-strong); } .ev3-card:hover .ev3-card-title { transform: translateY(-4px); } .ev3-card-desc { font-size: 0.88rem; line-height: 1.7; color: rgba(255, 255, 255, 0.55); margin-bottom: 20px; max-width: 540px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.05s, transform 0.4s var(--ease-out-strong) 0.05s; } .ev3-card:hover .ev3-card-desc { opacity: 1; transform: translateY(0); } .ev3-card-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-main); font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease 0.1s, transform 0.35s var(--ease-out-strong) 0.1s, color 0.3s ease; } .ev3-card-cta svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-spring); } .ev3-card:hover .ev3-card-cta { opacity: 1; transform: translateY(0); } .ev3-card:hover .ev3-card-cta:hover { color: var(--accent); } .ev3-card:hover .ev3-card-cta:hover svg { transform: translateX(4px); } /* Decorative number */ .ev3-card-number { position: absolute; top: 28px; right: 32px; z-index: 2; font-family: var(--font-serif); font-size: 4.5rem; font-weight: 700; font-style: italic; line-height: 1; color: rgba(255, 255, 255, 0.04); pointer-events: none; transition: color 0.5s ease; } .ev3-card:hover .ev3-card-number { color: rgba(255, 255, 255, 0.08); } /* === Hero card — spans full row === */ .ev3-card--hero { grid-column: 1 / -1; min-height: 520px; } .ev3-card--hero .ev3-card-title { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.5px; } .ev3-card--hero .ev3-card-content { padding: 48px 52px; } .ev3-card--hero .ev3-card-number { font-size: 7rem; top: 36px; right: 48px; } /* === Secondary cards === */ .ev3-card--secondary { min-height: 380px; } .ev3-card--secondary .ev3-card-title { font-size: 1.25rem; } .ev3-card--secondary .ev3-card-content { padding: 28px 30px; } .ev3-card--secondary .ev3-card-number { font-size: 3.5rem; top: 22px; right: 26px; } /* Middle card taller for asymmetry */ .ev3-card--tall { margin-top: -40px; min-height: 420px; } /* === Scroll-reveal entrance === */ .ev3-reveal { opacity: 0; transform: translateY(50px); transition: opacity 0.7s var(--ease-out-strong), transform 0.7s var(--ease-out-strong); transition-delay: calc(var(--stagger, 0) * 0.12s); } .ev3-reveal.ev3-visible { opacity: 1; transform: translateY(0); } /* === Swap animations === */ .ev3-swap-out { opacity: 0 !important; transform: scale(0.96) !important; transition: opacity 0.35s ease, transform 0.35s ease !important; } .ev3-swap-in { animation: ev3SwapIn 0.5s var(--ease-out-strong) forwards; } @keyframes ev3SwapIn { from { opacity: 0; transform: scale(1.02) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Hidden badge on secondary cards */ .ev3-badge-hidden { display: none !important; } /* Secondary cards are clickable — visual hint */ .ev3-swappable { cursor: pointer; } .ev3-card--secondary::after { content: ''; position: absolute; inset: 0; z-index: 3; border: 2px solid transparent; border-radius: 18px; transition: border-color 0.3s ease; pointer-events: none; } .ev3-card--secondary:hover::after { border-color: rgba(196, 30, 42, 0.35); } /* === Responsive === */ /* Tablet */ @media (max-width: 991.98px) { .ev3-header { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; } .ev3-header-right { max-width: 100%; } .ev3-grid { grid-template-columns: 1fr 1fr; } .ev3-card--hero { grid-column: 1 / -1; min-height: 420px; } .ev3-card--tall { margin-top: 0; } .ev3-card--secondary:last-child { grid-column: 1 / -1; min-height: 340px; } } /* Mobile — horizontal snap scroll */ @media (max-width: 767.98px) { .ev3-section { padding-top: 70px; padding-bottom: 80px; overflow: visible; } /* Let the grid bleed out of the container */ .ev3-section .container { overflow: visible; } .ev3-grid { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Bleed past container padding so cards go edge-to-edge */ margin-left: -12px; margin-right: -12px; padding: 0 12px 24px; } .ev3-grid::-webkit-scrollbar { display: none; } .ev3-card { flex: 0 0 82vw; max-width: 82vw; scroll-snap-align: center; border-radius: 16px; } /* Last card: extra right padding so it can center-snap */ .ev3-card:last-child { margin-right: 12px; } .ev3-card--hero, .ev3-card--secondary { min-height: 440px; } .ev3-card--hero .ev3-card-title { font-size: 1.5rem; } .ev3-card--hero .ev3-card-content, .ev3-card--secondary .ev3-card-content { padding: 24px 22px; } .ev3-card--hero .ev3-card-number { font-size: 4rem; top: 18px; right: 22px; } .ev3-card--secondary .ev3-card-number { font-size: 3rem; top: 16px; right: 20px; } .ev3-card--tall { margin-top: 0; min-height: 440px; } /* Show desc + cta on mobile (no hover) */ .ev3-card-desc { opacity: 0.75; transform: translateY(0); font-size: 0.82rem; } .ev3-card-cta { opacity: 1; transform: translateY(0); } /* No entrance animation — all visible */ .ev3-reveal { opacity: 1; transform: translateY(0); } /* Scroll indicator dots */ .ev3-grid::after { content: ''; flex: 0 0 1px; } } /* --- COUNTDOWN --- */ .countdown-section { padding: 60px 0; background: var(--bg-light); } .countdown-wrap { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; } .countdown-unit { text-align: center; min-width: 80px; } .countdown-value { font-family: var(--font-main); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; color: var(--accent); line-height: 1; display: block; } .countdown-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-gray); margin-top: 6px; display: block; } /* --- DARK MAP --- */ .map-dark-container { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); } .map-dark-container iframe { width: 100%; height: 400px; border: 0; filter: grayscale(1) invert(0.92) hue-rotate(150deg) contrast(1.1) saturate(1.8); } /* Leaflet dark map with red roads */ #mapVulcano { width: 100%; height: 400px; } #mapVulcano .leaflet-tile-pane img { filter: grayscale(1) brightness(1.0) contrast(1.2); } #mapVulcano .leaflet-tile-pane { mix-blend-mode: screen; } #mapVulcano { background: #c41e2a; } #mapVulcano .leaflet-control-zoom a { background: #141414; color: #fff; border-color: rgba(255, 255, 255, 0.1); } #mapVulcano .leaflet-control-zoom a:hover { background: var(--accent); } .leaflet-popup-content-wrapper { border-radius: 10px; } .leaflet-popup-tip { background: #fff; } /* --- FAQ ACCORDION DARK --- */ .faq-dark .accordion-item { background: var(--color-bg-card, #141414); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px !important; margin-bottom: 12px; overflow: hidden; } .faq-dark .accordion-button { background: transparent; color: var(--text); font-family: var(--font-main); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.5px; padding: 20px 24px; box-shadow: none; } .faq-dark .accordion-button:not(.collapsed) { color: var(--accent); background: rgba(196, 30, 42, 0.05); } .faq-dark .accordion-button::after { filter: invert(1); } .faq-dark .accordion-body { color: var(--text-gray); font-size: 0.9rem; line-height: 1.8; padding: 0 24px 20px; } /* --- FLOATING LABELS DARK --- */ .form-floating-dark .form-floating>.form-control, .form-floating-dark .form-floating>.form-select { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--text); height: 56px; padding-top: 1.625rem; } .form-floating-dark .form-floating>textarea.form-control { height: 140px; } .form-floating-dark .form-floating>label { color: var(--text-muted); font-size: 0.85rem; } .form-floating-dark .form-floating>.form-control:focus, .form-floating-dark .form-floating>.form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 30, 42, 0.15); } .form-floating-dark .form-floating>.form-control:focus~label, .form-floating-dark .form-floating>.form-select:focus~label { color: var(--accent); } /* --- TESTIMONIAL CARD --- */ .testimonial-card { background: var(--color-bg-card, #141414); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 36px 30px; text-align: center; transition: var(--transition-smooth); } .testimonial-card:hover { border-color: rgba(196, 30, 42, 0.2); transform: translateY(-3px); } .testimonial-card-logo { height: 40px; margin-bottom: 20px; opacity: 0.5; } .testimonial-card-quote { font-family: var(--font-serif); font-size: 1.05rem; font-style: italic; line-height: 1.8; color: var(--text-gray); margin-bottom: 20px; } .testimonial-card-author { font-size: 0.8rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); } .testimonial-card-role { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; } /* --- ATMOSPHERE SECTION --- */ .atmosphere-img-wrap { border-radius: 16px; overflow: hidden; position: relative; } .atmosphere-img-wrap img { width: 100%; height: 500px; object-fit: cover; display: block; will-change: transform; } .atmosphere-text .lead-text { font-family: var(--font-serif); font-size: clamp(1rem, 1.8vw, 1.2rem); font-style: italic; line-height: 2; color: var(--text-gray); } @media (max-width: 991px) { .atmosphere-img-wrap img { height: 300px; } .territory-section { min-height: auto; padding: 80px 0; } .territory-bg { height: 100%; } } @media (max-width: 575px) { .countdown-wrap { gap: 16px; } .countdown-unit { min-width: 60px; } .tasting-card { padding: 30px 20px; } .map-dark-container iframe { height: 280px; } #mapVulcano { height: 280px; } .atmosphere-img-wrap img { height: 220px; } } /* ================================================ HOMEPAGE SECTIONS — Images responsive ================================================ */ .hp-section-img { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); } .hp-section-img img { width: 100%; height: 360px; object-fit: cover; display: block; } /* Base rule for full viewport height sections on all screen sizes */ .hp-fullscreen-mobile { min-height: 100dvh; display: flex; align-items: center; padding: 80px 0; } .hp-fullscreen-mobile>.container { width: 100%; } @media (max-width: 991px) { .hp-section-img img { height: 280px; } } @media (max-width: 767px) { .hp-fullscreen-mobile { padding: 60px 0; } .hp-section-img img { height: 220px; } } /* ================================================ BEER DETAIL PAGE ================================================ */ .beer-detail { min-height: 100dvh; padding-top: 100px; padding-bottom: 60px; background: var(--bg); position: relative; overflow: hidden; } .beer-detail-inner { display: grid; grid-template-columns: 200px 1fr 1fr 80px; gap: 40px; align-items: center; min-height: calc(100dvh - 160px); } /* Left sidebar - Sicily + badges */ .beer-detail-sidebar { display: flex; flex-direction: column; align-items: center; gap: 40px; } .beer-sicily-map { width: 140px; height: auto; opacity: 0.9; } .beer-badge-icon { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.9; } .beer-badge { text-align: center; padding: 16px 12px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; align-items: center; } .beer-badge-title { font-family: var(--font-main); font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .beer-badge-text { font-size: 0.7rem; color: var(--text-gray); line-height: 1.5; margin: 0; } /* Center - Bottle image */ .beer-detail-image { display: flex; align-items: center; justify-content: center; position: relative; } .beer-detail-image img { max-height: 65vh; width: auto; object-fit: contain; filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5)); transition: transform 0.6s ease, opacity 0.25s ease; } .beer-detail-image:hover img { transform: scale(1.03); } /* Right - Info panel */ .beer-detail-info { padding: 20px 0; } .beer-detail-name { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.1; } .beer-detail-stars { display: flex; gap: 4px; margin-bottom: 16px; } .beer-detail-stars svg { width: 18px; height: 18px; fill: var(--accent); } .beer-detail-style { font-family: var(--font-main); font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 16px; } .beer-detail-desc { font-size: 0.9rem; line-height: 1.8; color: var(--text-gray); margin-bottom: 24px; max-width: 480px; } .beer-detail-ingredients { margin-bottom: 20px; } .beer-detail-ingredients h5 { font-family: var(--font-main); font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin-bottom: 4px; } .beer-detail-ingredients p { font-size: 0.8rem; color: var(--text-gray); margin-bottom: 12px; } .beer-detail-note { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 6px; } .beer-detail-serving { font-size: 0.75rem; color: var(--text-gray); margin-bottom: 24px; } /* Format buttons */ .beer-format-btns { display: flex; gap: 10px; margin-bottom: 24px; } .beer-format-btn { padding: 8px 20px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; background: transparent; color: var(--text-gray); font-family: var(--font-main); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .beer-format-btn.active, .beer-format-btn:hover { border-color: var(--accent); color: var(--text); background: rgba(196, 30, 42, 0.1); } /* Cart row */ .beer-cart-row { display: flex; align-items: center; gap: 12px; } .beer-qty { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; overflow: hidden; } .beer-qty button { width: 36px; height: 36px; background: transparent; border: none; color: var(--text); font-size: 1rem; cursor: pointer; transition: background 0.2s; } .beer-qty button:hover { background: rgba(255, 255, 255, 0.06); } .beer-qty span { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--font-main); font-size: 0.85rem; font-weight: 600; color: var(--text); border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); } /* Far right - Stat circles */ .beer-detail-stats { display: flex; flex-direction: column; gap: 20px; align-items: center; } .beer-stat-circle { width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .beer-stat-label { font-family: var(--font-main); font-size: 0.5rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); line-height: 1; } .beer-stat-value { font-family: var(--font-main); font-size: 1.2rem; font-weight: 900; color: var(--text); line-height: 1.2; } /* Back button */ .beer-back-link { position: fixed; top: 90px; left: 30px; z-index: 100000; font-family: var(--font-main); font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-gray); text-decoration: none; transition: color 0.3s; } .beer-back-link:hover { color: var(--accent); } /* Responsive */ @media (max-width: 1199px) { .beer-detail-inner { grid-template-columns: 150px 1fr 1fr 70px; gap: 24px; } .beer-detail-sidebar { display: flex; } } @media (max-width: 991px) { .beer-detail-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; } .beer-detail-sidebar { display: flex; flex-direction: row; justify-content: center; gap: 14px; flex-wrap: wrap; } .beer-sicily-map { display: none; } .beer-badge { flex: 1 1 0; min-width: 0; padding: 18px 16px; justify-content: flex-start; } .beer-detail-image img { max-height: 45vh; } .beer-detail-stats { flex-direction: row; justify-content: center; order: -1; padding-top: 20px; } .beer-detail-desc { margin-left: auto; margin-right: auto; } .beer-format-btns { justify-content: center; } .beer-cart-row { justify-content: center; } .beer-detail-stars { justify-content: center; } .beer-back-link { top: 80px; left: 16px; } } @media (max-width: 575px) { .beer-detail { padding-top: 110px; padding-bottom: 40px; overflow-x: hidden; overflow-y: visible; } .beer-detail-sidebar { gap: 10px; } .beer-badge { flex: 1 1 0; min-width: 0; padding: 14px 12px; } .beer-badge-icon { width: 36px; height: 36px; margin-bottom: 8px; } .beer-badge-title { font-size: 0.58rem; letter-spacing: 1.5px; margin-bottom: 5px; } .beer-badge-text { font-size: 0.65rem; line-height: 1.4; } .beer-detail-image img { max-height: 35vh; } .beer-detail-stats { flex-wrap: nowrap; justify-content: center; gap: 12px; width: 100%; padding: 0 8px; } .beer-stat-circle { width: 72px; height: 72px; flex-shrink: 0; } .beer-stat-label { font-size: 0.48rem; letter-spacing: 1px; } .beer-stat-value { font-size: 1rem; } } /* Beer card link */ .beer-card-link { text-decoration: none; color: inherit; display: block; } /* ================================================ HOME PREVIEW — Utility classes ================================================ */ .section-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section-desc { font-size: 0.95rem; line-height: 1.9; color: var(--text-gray); margin-bottom: 24px; } .card-preview { padding: 40px 30px; height: 100%; } .card-preview-sm { padding: 24px 12px; } .card-preview-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; font-style: italic; color: var(--text); margin-bottom: 14px; } .card-preview-text { font-size: 0.9rem; line-height: 1.8; color: var(--text-gray); margin-bottom: 24px; } .card-preview-icon { width: 44px; height: 44px; margin: 0 auto 12px; } .card-preview-icon-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text); margin: 0; } .btn-sm-vulcano { font-size: 0.75rem; padding: 12px 28px; } .btn-xs-vulcano { font-size: 0.72rem; padding: 10px 24px; } /* ================================================ PAGE HERO — Subtitle ================================================ */ .page-hero-subtitle { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 1px; margin-top: 8px; } /* ================================================ BEER CARD — 3D tilt improvements ================================================ */ /* ================================================ TASTING CARD — Glow pulse ================================================ */ .tasting-card.featured { animation: glowPulse 3s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px rgba(196, 30, 42, 0.15); } 50% { box-shadow: 0 0 35px rgba(196, 30, 42, 0.3); } } /* ================================================ FAQ — Grid layout ================================================ */ .faq-grid-item { padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .faq-grid-item:last-child { border-bottom: none; } .faq-question { font-family: var(--font-main); font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.5; } .faq-answer { font-size: 0.9rem; color: var(--text-gray); line-height: 1.7; } @media (max-width: 767.98px) { .faq-grid-item { grid-template-columns: 1fr; gap: 8px; } } /* ================================================ FOOTER — Social icons ================================================ */ .footer-social-icon { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all 200ms var(--ease-out-strong); } .footer-social-icon svg { width: 16px; height: 16px; fill: var(--text-gray); transition: fill 200ms ease; } @media (hover: hover) and (pointer: fine) { .footer-social-icon:hover { border-color: var(--accent); transform: translateY(-2px); } .footer-social-icon:hover svg { fill: var(--accent); } } .footer-legal { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; } /* ================================================ SPOTLIGHT — Border effect ================================================ */ .spotlight-card { position: relative; overflow: hidden; } .spotlight-card::after { content: ''; position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(196, 30, 42, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 300ms ease; left: var(--sx, 50%); top: var(--sy, 50%); transform: translate(-50%, -50%); z-index: 0; } @media (hover: hover) and (pointer: fine) { .spotlight-card:hover::after { opacity: 1; } } /* ================================================ EXPERIENCE PAGE — Styles ================================================ */ .why-vulcano-list { list-style: none; padding: 0; margin: 0; } .why-vulcano-list li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .why-vulcano-list li:last-child { border-bottom: none; } .why-vulcano-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(196, 30, 42, 0.1); } .why-vulcano-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.5; } .why-vulcano-title { font-size: 0.85rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .why-vulcano-desc { font-size: 0.88rem; color: var(--text-gray); line-height: 1.6; margin: 0; } /* .service-grid uses Bootstrap row + col-lg-6 — no custom grid override needed */ /* ================================================ LOCALI V2 — Editorial Staggered + Spotlight ================================================ */ /* Section spacing */ .loc-section { padding-top: 100px; padding-bottom: 120px; } /* Header — split */ .loc-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; } .loc-header-left { flex-shrink: 0; } .loc-eyebrow { display: block; font-family: var(--font-main); font-size: 0.68rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .loc-title { font-family: var(--font-serif); font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -1px; color: var(--text); } .loc-header-right { max-width: 360px; padding-bottom: 6px; } .loc-header-right p { font-size: 0.88rem; color: var(--text-gray); line-height: 1.7; margin: 0; } /* Grid: featured left (55%) + stacked right (45%) */ .loc-grid { display: grid; grid-template-columns: 55% 1fr; gap: 20px; align-items: stretch; } .loc-stack { display: flex; flex-direction: column; gap: 20px; } /* === Card base === */ .loc-card { position: relative; border-radius: 20px; overflow: hidden; background: #111; } /* Image */ .loc-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.8s var(--ease-out-strong); will-change: transform; } .loc-card:hover .loc-card-img { transform: scale(1.06); } /* Gradient overlay */ .loc-card-gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(6, 6, 6, 0) 0%, rgba(6, 6, 6, 0.2) 35%, rgba(6, 6, 6, 0.88) 100%); transition: background 0.5s ease; } .loc-card:hover .loc-card-gradient { background: linear-gradient(160deg, rgba(6, 6, 6, 0.05) 0%, rgba(6, 6, 6, 0.3) 35%, rgba(6, 6, 6, 0.92) 100%); } /* Spotlight border — radial glow following cursor */ .loc-card-spotlight { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; border-radius: 20px; transition: opacity 0.4s ease; border: 1px solid transparent; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(196, 30, 42, 0.25) 0%, transparent 70%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* Card body */ .loc-card-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } /* Pin location label */ .loc-card-pin { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 14px; } .loc-card-pin svg { width: 14px; height: 14px; flex-shrink: 0; } /* Card name */ .loc-card-name { font-family: var(--font-serif); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 14px; transition: transform 0.4s var(--ease-out-strong); } .loc-card:hover .loc-card-name { transform: translateY(-3px); } /* Description */ .loc-card-desc { font-size: 0.88rem; line-height: 1.7; color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; max-width: 440px; } /* Meta: hours + stats */ .loc-card-meta { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .loc-card-hours { display: flex; align-items: flex-start; gap: 10px; font-size: 0.76rem; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; } .loc-card-hours svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; stroke: var(--accent); opacity: 0.6; } .loc-card-hours div { display: flex; flex-direction: column; gap: 2px; } /* Mini stats */ .loc-card-stats { display: flex; gap: 20px; margin-left: auto; } .loc-stat { text-align: center; } .loc-stat strong { display: block; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -1px; } .loc-stat small { font-size: 0.62rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); } /* Actions */ .loc-card-actions { display: flex; align-items: center; gap: 16px; } .loc-btn-primary { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-main); font-size: 0.74rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-decoration: none; padding: 14px 28px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 60px; background: transparent; transition: all 0.35s var(--ease-out-strong); } .loc-btn-primary svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-spring); } .loc-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 24px rgba(196, 30, 42, 0.25); } .loc-btn-primary:hover svg { transform: translateX(4px); } .loc-btn-primary:active { transform: scale(0.97); } .loc-btn-ghost { font-family: var(--font-main); font-size: 0.74rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); text-decoration: none; padding: 14px 8px; transition: color 0.3s ease; } .loc-btn-ghost:hover { color: #fff; } /* === Featured card === */ .loc-card--featured { min-height: 600px; } .loc-card--featured .loc-card-body { padding: 44px; } .loc-card--featured .loc-card-name { font-size: clamp(1.8rem, 2.8vw, 2.4rem); letter-spacing: -0.5px; } /* === Compact cards === */ .loc-card--compact { min-height: 0; flex: 1; } .loc-card--compact .loc-card-body { padding: 30px 32px; } .loc-card--compact .loc-card-name { font-size: 1.2rem; } .loc-card--compact .loc-card-desc { font-size: 0.82rem; margin-bottom: 16px; } .loc-card--compact .loc-card-meta { margin-bottom: 18px; padding-top: 14px; } /* === Scroll-reveal entrance === */ .loc-reveal { opacity: 0; transform: translateY(44px); transition: opacity 0.7s var(--ease-out-strong), transform 0.7s var(--ease-out-strong); transition-delay: calc(var(--loc-stagger, 0) * 0.15s); } .loc-reveal.loc-visible { opacity: 1; transform: translateY(0); } /* === Responsive === */ @media (max-width: 991.98px) { .loc-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; } .loc-header-right { max-width: 100%; } .loc-grid { grid-template-columns: 1fr; } .loc-card--featured { min-height: 480px; } .loc-stack { flex-direction: row; } .loc-card--compact { flex: 1; min-height: 380px; } } @media (max-width: 767.98px) { .loc-section { padding-top: 70px; padding-bottom: 80px; } .loc-stack { flex-direction: column; } .loc-card--featured { min-height: 440px; } .loc-card--featured .loc-card-body { padding: 28px; } .loc-card--compact { min-height: 360px; } .loc-card--compact .loc-card-body { padding: 24px; } .loc-card-stats { display: none; } /* Reveal all on mobile */ .loc-reveal { opacity: 1; transform: translateY(0); } } /* ================================================ COUNTDOWN — Improved ================================================ */ .countdown-section { padding: 60px 0; background: var(--bg-light); border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .countdown-wrap { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .countdown-unit { text-align: center; min-width: 80px; } .countdown-value { display: block; font-family: var(--font-main); font-size: 2.8rem; font-weight: 900; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; } .countdown-label { display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-gray); margin-top: 6px; } /* ================================================ TIMELINE V2 — Scroll-driven ================================================ */ .timeline-v2 { position: relative; padding: 40px 0; } .timeline-v2::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.06); transform: translateX(-50%); } .timeline-v2-line { position: absolute; left: 50%; top: 0; width: 2px; height: 0; background: linear-gradient(to bottom, var(--accent), rgba(196, 30, 42, 0.3)); transform: translateX(-50%); z-index: 1; } .timeline-v2-item { position: relative; padding: 40px 0; } .timeline-v2-dot { position: absolute; left: 50%; top: 50px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255, 255, 255, 0.15); transform: translateX(-50%) scale(0.6); z-index: 2; transition: all 0.5s var(--ease-spring); } .timeline-v2-dot.active { border-color: var(--accent); background: var(--accent); transform: translateX(-50%) scale(1); box-shadow: 0 0 16px rgba(196, 30, 42, 0.4); } .timeline-v2-year { font-family: var(--font-main); font-size: 2.2rem; font-weight: 900; color: var(--accent); letter-spacing: 3px; margin-bottom: 12px; } .timeline-v2-content h3 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; font-style: italic; color: var(--text); margin-bottom: 12px; } .timeline-v2-content p { font-size: 0.9rem; color: var(--text-gray); line-height: 1.7; } .timeline-v2-img { border-radius: 12px; overflow: hidden; } .timeline-v2-img img { width: 100%; height: 280px; object-fit: cover; border-radius: 12px; } @media (max-width: 767.98px) { .timeline-v2::before, .timeline-v2-line { left: 20px; } .timeline-v2-dot { left: 20px; } .timeline-v2-item .row { flex-direction: column !important; } .timeline-v2-item .col-md-5 { text-align: left !important; padding-left: 48px; } .timeline-v2-item .offset-md-1 { margin-left: 0; padding-left: 48px; } } /* ================================================ VALUES — Zig-zag layout ================================================ */ .values-zigzag { display: flex; flex-direction: column; gap: 48px; } .values-zigzag-item { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; max-width: 600px; } .values-zigzag-item:nth-child(even) { margin-left: auto; } .values-zigzag-item:nth-child(odd) { margin-right: auto; } .values-zigzag-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(196, 30, 42, 0.1); } .values-zigzag-icon svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; stroke-width: 1.5; } .values-zigzag-title { font-size: 1rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; } .values-zigzag-text { font-size: 0.88rem; color: var(--text-gray); line-height: 1.7; } @media (max-width: 767.98px) { .values-zigzag-item:nth-child(even) { margin-left: 0; } } /* ================================================ STEPS — Progress layout ================================================ */ .steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } .steps-row::before { content: ''; position: absolute; top: 24px; left: 10%; right: 10%; height: 2px; background: rgba(255, 255, 255, 0.06); } .steps-row-progress { position: absolute; top: 24px; left: 10%; height: 2px; width: 0; background: var(--accent); z-index: 1; } .step-item { text-align: center; position: relative; z-index: 2; } .step-number { width: 48px; height: 48px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-weight: 700; font-size: 1rem; color: var(--text-gray); transition: all 0.4s var(--ease-spring); } .step-number.active { border-color: var(--accent); color: var(--accent); transform: scale(1.1); box-shadow: 0 0 12px rgba(196, 30, 42, 0.3); } .step-item h4 { font-size: 0.85rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .step-item p { font-size: 0.82rem; color: var(--text-gray); line-height: 1.6; } @media (max-width: 767.98px) { .steps-row { grid-template-columns: 1fr 1fr; } .steps-row::before, .steps-row-progress { display: none; } } /* ================================================ CONTACT — Info compact layout ================================================ */ .contact-info-item { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .contact-info-item:last-child { border-bottom: none; } .contact-info-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(196, 30, 42, 0.1); transition: transform 300ms var(--ease-out-strong); } @media (hover: hover) and (pointer: fine) { .contact-info-item:hover .contact-info-icon { transform: rotate(8deg); } } .contact-info-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.5; } .contact-info-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .contact-info-text { font-size: 0.9rem; color: var(--text-gray); line-height: 1.5; margin: 0; } .contact-info-text a { color: var(--text-gray); text-decoration: none; transition: color 200ms ease; } .contact-info-text a:hover { color: var(--accent); } /* ================================================ FORM — Floating dark improved ================================================ */ .form-floating-dark .form-control { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: var(--text); transition: border-color 200ms var(--ease-out-strong), box-shadow 200ms var(--ease-out-strong), background 200ms ease; } .form-floating-dark .form-control:focus { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 30, 42, 0.15); color: var(--text); } .form-floating-dark label { color: var(--text-muted); } .form-floating-dark .form-control:focus~label { color: var(--accent); } /* ================================================ MARQUEE — Kinetic scroll ================================================ */ .marquee-wrap { overflow: hidden; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .marquee-track { display: flex; width: max-content; animation: marqueeScroll 30s linear infinite; } .marquee-track span { font-family: var(--font-main); font-size: 0.7rem; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.08); white-space: nowrap; padding: 0 40px; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ================================================ V VULCANO — Chi Siamo Hero ================================================ */ .v-vulcano-wrap { position: relative; width: clamp(220px, 25vw, 350px); height: clamp(220px, 25vw, 350px); display: flex; align-items: center; justify-content: center; overflow: visible; } .v-vulcano-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 30px rgba(196, 30, 42, 0.3)); } .v-vulcano-path { stroke-dasharray: 300; stroke-dashoffset: 300; fill: none; stroke: #c41e2a; stroke-width: 1.5; } /* Particelle di brace */ .v-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .v-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c41e2a; opacity: 0; animation: particleRise 2.5s ease-out infinite; } .v-particle:nth-child(2) { left: 30%; animation-delay: 0.3s; background: #e8732a; width: 2px; height: 2px; } .v-particle:nth-child(3) { left: 50%; animation-delay: 0.7s; } .v-particle:nth-child(4) { left: 65%; animation-delay: 1.1s; background: #e8732a; width: 4px; height: 4px; } .v-particle:nth-child(5) { left: 40%; animation-delay: 1.5s; width: 2px; height: 2px; } .v-particle:nth-child(6) { left: 55%; animation-delay: 0.5s; background: #ff9944; } .v-particle:nth-child(7) { left: 25%; animation-delay: 1.8s; width: 2px; height: 2px; } .v-particle:nth-child(8) { left: 70%; animation-delay: 0.9s; background: #e8732a; } @keyframes particleRise { 0% { bottom: 20%; opacity: 0; transform: translateX(0) scale(1); } 20% { opacity: 0.8; } 100% { bottom: 90%; opacity: 0; transform: translateX(15px) scale(0.3); } } @media (max-width: 991px) { .v-vulcano-wrap { width: 250px; height: 250px; margin: 0 auto 30px; } } /* ABV Badge */ .beer-card-abv { display: inline-block; font-family: var(--font-main); font-size: 0.65rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); background: rgba(196, 30, 42, 0.1); padding: 4px 10px; border-radius: 4px; margin-top: 8px; } /* ================================================ HO.RE.CA SECTION — Horizontal feature cards ================================================ */ .hp-horeca-section { /* inherits hp-fullscreen-mobile */ } .hp-horeca-cards { display: flex; flex-direction: column; gap: 0; } .hp-horeca-card { position: relative; display: flex; align-items: center; gap: 24px; padding: 28px 32px; border-left: 2px solid rgba(196, 30, 42, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: border-left-color 200ms cubic-bezier(0.23, 1, 0.32, 1), background 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; } .hp-horeca-card:last-child { border-bottom: none; } @media (hover: hover) and (pointer: fine) { .hp-horeca-card:hover { border-left-color: var(--accent); border-left-width: 3px; background: rgba(196, 30, 42, 0.06); transform: translateX(6px); } } .hp-horeca-card:active { transform: scale(0.98); } .hp-horeca-card-icon { flex-shrink: 0; width: 64px; height: 64px; background: rgba(196, 30, 42, 0.08); border: 1px solid rgba(196, 30, 42, 0.18); border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .hp-horeca-card:hover .hp-horeca-card-icon { background: rgba(196, 30, 42, 0.18); border-color: rgba(196, 30, 42, 0.5); box-shadow: 0 0 30px rgba(196, 30, 42, 0.2); transform: scale(1.08); } } .hp-horeca-card-icon svg { width: 28px; height: 28px; stroke: var(--accent); } .hp-horeca-card-body { flex: 1; } .hp-horeca-card-title { font-family: var(--font-main); font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; color: var(--text); margin-bottom: 6px; transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .hp-horeca-card:hover .hp-horeca-card-title { color: var(--accent) !important; } } .hp-horeca-card-text { font-size: 0.83rem; color: var(--text-gray); line-height: 1.7; margin: 0; } .hp-horeca-card-num { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700; font-style: italic; color: rgba(196, 30, 42, 0.08); transition: color 250ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .hp-horeca-card:hover .hp-horeca-card-num { color: rgba(196, 30, 42, 0.2); transform: translateY(-50%) scale(1.1); } } @media (max-width: 767px) { .hp-horeca-card { padding: 22px 20px; gap: 18px; } .hp-horeca-card-icon { width: 52px; height: 52px; } } /* ================================================ TAP ROOMS SECTION — Enlarged image with badge ================================================ */ .hp-taproom-section { /* inherits hp-fullscreen-mobile */ } .hp-taproom-img-wrap { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(196, 30, 42, 0.08); } .hp-taproom-img-wrap img { width: 100%; height: 520px; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), filter 600ms cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .hp-taproom-img-wrap:hover img { transform: scale(1.04); filter: brightness(1.05); } } .hp-taproom-img-badge { position: absolute; bottom: 24px; right: 24px; background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(196, 30, 42, 0.3); border-radius: 14px; padding: 16px 22px; text-align: center; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 250ms cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .hp-taproom-img-wrap:hover .hp-taproom-img-badge { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(196, 30, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); } } .hp-taproom-badge-num { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; font-style: italic; color: var(--accent); line-height: 1; text-shadow: 0 0 20px rgba(196, 30, 42, 0.3); } .hp-taproom-badge-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-gray); line-height: 1.4; } .hp-taproom-locations { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-gray); justify-content: center; } @media (min-width: 992px) { .hp-taproom-locations { justify-content: flex-start; } } .hp-taproom-sep { color: rgba(196, 30, 42, 0.4); } @media (max-width: 991px) { .hp-taproom-img-wrap img { height: 360px; } } @media (max-width: 767px) { .hp-taproom-img-wrap img { height: 260px; } .hp-taproom-img-badge { bottom: 14px; right: 14px; } } /* ================================================ CHI SIAMO SECTION — Counter prominence ================================================ */ .hp-chisiamo-section { /* inherits hp-fullscreen-mobile */ } .hp-chisiamo-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; overflow: hidden; } .hp-counter-item { position: relative; border-right: 1px solid rgba(255, 255, 255, 0.06); } .hp-counter-item:last-child { border-right: none; } .hp-counter-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background 0.4s ease; } .hp-counter-item:hover::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); } .hp-counter-item .counter-stat { padding: 32px 16px; background: rgba(255, 255, 255, 0.01); transition: background 0.3s ease; } .hp-counter-item:hover .counter-stat { background: rgba(196, 30, 42, 0.04); } /* Override base counter-stat-value for hp variant */ .hp-chisiamo-counters .counter-stat-value { font-size: clamp(1.6rem, 3.5vw, 2.6rem); color: var(--text); } .hp-chisiamo-counters .counter-stat-label { color: var(--accent); letter-spacing: 1.5px; } @media (max-width: 767px) { .hp-chisiamo-counters { grid-template-columns: repeat(2, 1fr); } .hp-counter-item:nth-child(2) { border-right: none; } .hp-counter-item:nth-child(1), .hp-counter-item:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .hp-counter-item .counter-stat { padding: 24px 12px; } } /* ================================================ EXPERIENCE + CONTATTACI — Full-screen split section ================================================ */ .hp-split-section { display: flex; flex-direction: row; min-height: 100dvh; position: relative; overflow: hidden; } .hp-split-panel { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 80px 60px; overflow: hidden; transition: flex 0.5s ease; } /* Experience — subtle dark-red tint */ .hp-split-experience { background: var(--bg); } .hp-split-experience::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 60%, rgba(196, 30, 42, 0.06) 0%, transparent 70%); pointer-events: none; } /* Contattaci — slightly lighter, accent top border */ .hp-split-contact { background: var(--bg-light); border-top: none; } .hp-split-contact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 40%, rgba(196, 30, 42, 0.08) 0%, transparent 70%); pointer-events: none; } .hp-split-divider { width: 1px; background: linear-gradient(to bottom, transparent, rgba(196, 30, 42, 0.3) 30%, rgba(196, 30, 42, 0.3) 70%, transparent); flex-shrink: 0; align-self: stretch; } .hp-split-panel-inner { position: relative; z-index: 1; max-width: 420px; width: 100%; } .hp-split-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .hp-split-title { font-family: var(--font-serif); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 700; font-style: italic; color: var(--text); line-height: 1.05; margin-bottom: 24px; } .hp-split-text { font-size: 0.92rem; line-height: 1.9; color: var(--text-gray); margin-bottom: 40px; } .hp-split-link { display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text); text-decoration: none; padding: 14px 28px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, gap 0.3s ease; } .hp-split-link:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); gap: 16px; } .hp-split-link--accent { border-color: rgba(196, 30, 42, 0.4); color: var(--text); } .hp-split-link--accent:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(196, 30, 42, 0.2); color: #fff; } .hp-split-arrow { width: 16px; height: 16px; stroke: currentColor; transition: transform 0.3s ease; } .hp-split-link:hover .hp-split-arrow { transform: translateX(4px); } /* Large decorative number */ .hp-split-deco-num { position: absolute; bottom: -10px; right: 20px; font-family: var(--font-serif); font-size: clamp(8rem, 14vw, 14rem); font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.02); line-height: 1; pointer-events: none; user-select: none; } /* Hover expansion on desktop */ @media (hover: hover) and (pointer: fine) and (min-width: 992px) { .hp-split-section:has(.hp-split-experience:hover) .hp-split-experience { flex: 1.15; } .hp-split-section:has(.hp-split-experience:hover) .hp-split-contact { flex: 0.85; } .hp-split-section:has(.hp-split-contact:hover) .hp-split-contact { flex: 1.15; } .hp-split-section:has(.hp-split-contact:hover) .hp-split-experience { flex: 0.85; } } /* Mobile: stack vertically */ @media (max-width: 991px) { .hp-split-section { flex-direction: column; } .hp-split-panel { padding: 70px 32px; flex: none; min-height: 50dvh; width: 100%; box-sizing: border-box; } .hp-split-divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(196, 30, 42, 0.3) 30%, rgba(196, 30, 42, 0.3) 70%, transparent); flex-shrink: 0; align-self: auto; } } @media (max-width: 575px) { .hp-split-panel { padding: 56px 24px; } .hp-split-title { font-size: 2.4rem; } .hp-split-deco-num { font-size: 6rem; } } /* ================================================ HO.RE.CA V2 — "Three Pillars" Liquid Glass ================================================ */ .hp-horeca-v2 { position: relative; overflow: visible; display: flex; align-items: center; justify-content: center; } .horeca-v2-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(196, 30, 42, 0.06) 0%, transparent 70%); pointer-events: none; } /* Header */ .horeca-v2-header { margin-bottom: 56px; } .horeca-v2-title { font-family: var(--font-serif); font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 700; font-style: italic; letter-spacing: 0.04em; color: var(--text); line-height: 1; margin-bottom: 16px; } .horeca-v2-subtitle { font-size: 1rem; color: var(--text-gray); line-height: 1.7; max-width: 520px; margin: 0 auto; } /* Panels container */ .horeca-v2-panels { display: flex; gap: 0; min-height: 340px; border-radius: 20px; overflow: visible; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 80px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Individual panel — override legacy .hp-horeca-card styles */ .hp-horeca-v2 .hp-horeca-card { border-left: none; border-bottom: none; cursor: default; } .hp-horeca-v2 .hp-horeca-card-icon { width: auto; height: auto; background: none; border: none; border-radius: 0; } .hp-horeca-v2 .hp-horeca-card-num { /* positioning handled by .horeca-v2-ghost */ } .horeca-v2-panel { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 32px; text-decoration: none; color: var(--text); overflow: visible; transition: flex 600ms cubic-bezier(0.23, 1, 0.32, 1), background 400ms cubic-bezier(0.23, 1, 0.32, 1); } .horeca-v2-panel::before { content: ''; position: absolute; inset: -60px; background: radial-gradient(circle at 50% 50%, rgba(196, 30, 42, 0.14), rgba(196, 30, 42, 0.04) 45%, transparent 80%); opacity: 0; transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 0; } .horeca-v2-panel:active { transform: scale(0.97); } /* Divider */ .horeca-v2-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.06); flex-shrink: 0; } /* Ghost number */ .horeca-v2-ghost { position: absolute; bottom: 8px; right: 16px; top: auto; left: auto; transform: none; font-family: var(--font-serif); font-size: clamp(5rem, 10vw, 9rem); font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.05); line-height: 0.85; pointer-events: none; z-index: 0; transition: color 500ms cubic-bezier(0.23, 1, 0.32, 1); } /* Icon */ .horeca-v2-icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: rgba(196, 30, 42, 0.06); border: 1px solid rgba(196, 30, 42, 0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; position: relative; z-index: 1; transition: background 400ms cubic-bezier(0.23, 1, 0.32, 1), border-color 400ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 500ms cubic-bezier(0.23, 1, 0.32, 1), transform 400ms cubic-bezier(0.23, 1, 0.32, 1); } .horeca-v2-icon-wrap svg { width: 28px; height: 28px; stroke: var(--accent); position: relative; z-index: 1; } .horeca-v2-icon-wrap::after { content: ''; position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(circle, rgba(196, 30, 42, 0.45) 0%, rgba(196, 30, 42, 0.2) 30%, rgba(196, 30, 42, 0.05) 60%, transparent 75%); opacity: 0; transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 0; filter: blur(8px); } /* Panel text */ .horeca-v2-panel-title { font-family: var(--font-main); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text); margin-bottom: 8px; text-align: center; position: relative; z-index: 1; transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1); } .horeca-v2-panel-desc { font-size: 0.82rem; color: var(--text-gray); line-height: 1.6; text-align: center; max-width: 200px; margin: 0; position: relative; z-index: 1; } /* Hover — desktop only */ @media (hover: hover) and (pointer: fine) { .horeca-v2-panels:hover .horeca-v2-panel { flex: 0.85; } .horeca-v2-panels .horeca-v2-panel:hover { flex: 1.3; background: rgba(196, 30, 42, 0.03); } .horeca-v2-panel:hover::before { opacity: 1; } .horeca-v2-panel:hover .horeca-v2-ghost { color: rgba(196, 30, 42, 0.12); } .horeca-v2-panel:hover .horeca-v2-icon-wrap { background: rgba(196, 30, 42, 0.25); border-color: rgba(196, 30, 42, 0.5); box-shadow: 0 0 30px 4px rgba(196, 30, 42, 0.35), 0 0 80px 20px rgba(196, 30, 42, 0.2), 0 0 160px 40px rgba(196, 30, 42, 0.08); transform: scale(1.1); } .horeca-v2-panel:hover .horeca-v2-icon-wrap::after { opacity: 1; } .horeca-v2-panel:hover .horeca-v2-panel-title { color: var(--accent); } } /* Tablet */ @media (max-width: 991px) { .horeca-v2-panels { min-height: 280px; } .horeca-v2-panel { padding: 40px 24px; } .horeca-v2-ghost { font-size: 4.5rem; bottom: 6px; right: 12px; } } /* Mobile — stack vertically */ @media (max-width: 767px) { .horeca-v2-header { margin-bottom: 36px; } .horeca-v2-panels { flex-direction: column; min-height: auto; } .horeca-v2-panel { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; padding: 28px 24px; flex: none !important; } .horeca-v2-panel::before { background: radial-gradient(circle at 0% 50%, rgba(196, 30, 42, 0.12), transparent 60%); } .horeca-v2-ghost { position: absolute; top: auto; bottom: 4px; left: auto; right: 12px; transform: none; font-size: 3.5rem; } .horeca-v2-divider { width: 100%; height: 1px; align-self: auto; } .horeca-v2-icon-wrap { margin-bottom: 0; flex-shrink: 0; width: 56px; height: 56px; } .horeca-v2-panel-title, .horeca-v2-panel-desc { text-align: left; } .horeca-v2-panel-desc { max-width: none; } } @media (max-width: 575px) { .horeca-v2-title { font-size: 3rem; } } /* ================================================ TAP ROOMS V2 — "Immersive Location Showcase" ================================================ */ /* Override legacy taproom styles in v2 context */ .hp-taproom-v2 .hp-taproom-badge-num, .hp-taproom-v2 .hp-taproom-badge-label { /* Reset any inherited positioning */ } .hp-taproom-v2 .hp-taproom-locations { justify-content: flex-start; } .hp-taproom-v2 { position: relative; overflow: hidden; display: flex; align-items: flex-end; } /* Full-bleed background */ .taproom-v2-bg { position: absolute; inset: 0; z-index: 0; } .taproom-v2-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; } /* Dark gradient overlay */ .taproom-v2-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.7) 40%, rgba(10, 10, 10, 0.3) 70%, rgba(10, 10, 10, 0.15) 100%), linear-gradient(to right, rgba(10, 10, 10, 0.6) 0%, transparent 50%); pointer-events: none; } /* Content */ .taproom-v2-content { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 80px; max-width: 640px; } /* Stat */ .taproom-v2-stat { display: inline-flex; align-items: center; gap: 12px; background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(196, 30, 42, 0.25); border-radius: 14px; padding: 14px 22px; margin-bottom: 32px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .taproom-v2-stat-num { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700; font-style: italic; color: var(--accent); line-height: 1; text-shadow: 0 0 30px rgba(196, 30, 42, 0.3); } .taproom-v2-stat-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-gray); line-height: 1.4; } /* Title */ .taproom-v2-title { font-family: var(--font-serif); font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 700; font-style: italic; line-height: 0.95; color: var(--text); margin-bottom: 24px; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15); text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5); } /* Location pills */ .taproom-v2-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .taproom-v2-pill { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 100px; padding: 8px 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); transition: background 300ms cubic-bezier(0.23, 1, 0.32, 1), border-color 300ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 300ms cubic-bezier(0.23, 1, 0.32, 1); } .taproom-v2-pill:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .taproom-v2-pill:hover { background: rgba(196, 30, 42, 0.12); border-color: rgba(196, 30, 42, 0.3); box-shadow: 0 0 20px rgba(196, 30, 42, 0.15); } } /* Description */ .taproom-v2-desc { max-width: 480px; margin-bottom: 28px; } /* Responsive */ @media (max-width: 991px) { .taproom-v2-content { padding-top: 100px; padding-bottom: 60px; } .taproom-v2-title { font-size: clamp(2.8rem, 6vw, 5rem); } } @media (max-width: 767px) { .hp-taproom-v2 { min-height: 100dvh; } .taproom-v2-content { padding-top: 80px; padding-bottom: 48px; } .taproom-v2-title { font-size: 2.8rem; -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.1); } .taproom-v2-pills { gap: 8px; } .taproom-v2-pill { padding: 6px 16px; font-size: 0.65rem; } .taproom-v2-stat-num { font-size: 2.2rem; } } @media (max-width: 575px) { .taproom-v2-title { font-size: 2.2rem; } } /* ================================================ BEER CATALOG V2 — Volcanic Showcase Complete visual redesign of le-birre.html ================================================ */ /* ---------- HERO V2 ---------- */ .birre-hero-v2 { height: 70vh; min-height: 440px; max-height: 640px; } .birre-hero-v2 .page-hero-bg { opacity: 0.35; transform: scale(1.05); will-change: transform; transition: none; } .birre-hero-v2::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.15) 30%, rgba(10, 10, 10, 0.3) 60%, rgba(10, 10, 10, 1) 100%); } .birre-hero-v2-content { display: flex; align-items: center; justify-content: center; padding-top: 40px; } .birre-hero-v2-glass { position: relative; padding: 48px 72px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 24px; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 32px 80px rgba(0, 0, 0, 0.4); } .birre-hero-v2-title { font-family: var(--font-serif); font-size: clamp(4rem, 10vw, 9rem); font-weight: 700; font-style: italic; color: var(--text); letter-spacing: 0.04em; line-height: 1; margin-bottom: 16px; text-shadow: 0 4px 40px rgba(196, 30, 42, 0.15); } .birre-hero-v2-tagline { font-family: var(--font-main); font-size: 0.72rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--text-gray); margin: 0; } /* ---------- FILTER BAR V2 — Glass Pill ---------- */ .beer-catalog-v2 .filter-btns.birre-filter-v2 { display: inline-flex; gap: 4px; margin-bottom: 200px; padding: 6px; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.3); justify-content: center; z-index: 100; /* Center the pill bar */ position: relative; left: 50%; transform: translateX(-50%); } .birre-filter-v2 { position: sticky; top: 75px; z-index: 1020; padding-bottom: 60px; background: var(--bg); } .birre-filter-v2.birre-filter-sticky { /* no longer used — kept for backwards compat */ } .beer-catalog-v2 .filter-btn { padding: 10px 28px; background: transparent; border: 1px solid transparent; border-radius: 40px; color: var(--text-gray); font-family: var(--font-main); font-size: 0.72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 250ms var(--ease-out-strong), color 250ms var(--ease-out-strong), border-color 250ms var(--ease-out-strong); min-width: 44px; min-height: 44px; } .beer-catalog-v2 .filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--text); box-shadow: 0 4px 16px rgba(196, 30, 42, 0.35); } @media (hover: hover) and (pointer: fine) { .beer-catalog-v2 .filter-btn:not(.active):hover { background: rgba(255, 255, 255, 0.06); color: var(--text); border-color: rgba(255, 255, 255, 0.1); } } /* ---------- BEER COLORS — per-beer glow ---------- */ [data-beer="americana"] { --beer-color-rgb: 229, 36, 33; } [data-beer="bianca"] { --beer-color-rgb: 255, 255, 255; } [data-beer="rossa"] { --beer-color-rgb: 229, 36, 33; } [data-beer="saison"] { --beer-color-rgb: 172, 191, 37; } [data-beer="ipa"] { --beer-color-rgb: 91, 176, 51; } [data-beer="tripel"] { --beer-color-rgb: 127, 89, 154; } [data-beer="double-ipa"] { --beer-color-rgb: 0, 150, 65; } [data-beer="gluten-free"] { --beer-color-rgb: 214, 217, 0; } [data-beer="bionda-miele"] { --beer-color-rgb: 255, 208, 8; } [data-beer="bionda-sale"] { --beer-color-rgb: 109, 198, 217; } [data-beer="rossa-miele"] { --beer-color-rgb: 241, 138, 102; } [data-beer="castagna"] { --beer-color-rgb: 160, 114, 90; } [data-beer="grape-ale"] { --beer-color-rgb: 123, 45, 142; } [data-beer="estrema"] { --beer-color-rgb: 63, 187, 204; } [data-beer="5-cereali"] { --beer-color-rgb: 234, 94, 11; } [data-beer="analcolica"] { --beer-color-rgb: 126, 200, 227; } [data-beer="nera"] { --beer-color-rgb: 255, 255, 255; } [data-beer="can-american-ipa"] { --beer-color-rgb: 229, 36, 33; } [data-beer="can-hoppy-tripel"] { --beer-color-rgb: 127, 89, 154; } [data-beer="can-rossa"] { --beer-color-rgb: 229, 36, 33; } [data-beer="can-saison"] { --beer-color-rgb: 172, 191, 37; } [data-beer="can-stout"] { --beer-color-rgb: 255, 255, 255; } [data-beer="can-weiss"] { --beer-color-rgb: 127, 222, 212; } /* ---------- BEER CARDS V2 — Horizontal Cards ---------- */ .beer-catalog-v2 .beer-card-wrapper { transition: opacity 0.4s ease, transform 0.4s ease; } .beer-catalog-v2 .beer-card-wrapper.hidden { opacity: 0; transform: scale(0.9); pointer-events: none; position: absolute; visibility: hidden; } .beer-catalog-v2 .beer-card-link { text-decoration: none; color: inherit; display: block; } /* Card: container with absolute-positioned visual */ .beer-catalog-v2 .beer-card { display: flex; align-items: flex-end; background: transparent; border: none; border-radius: 0; padding: 0; position: relative; cursor: pointer; box-shadow: none; transition: padding 350ms cubic-bezier(0.23, 1, 0.32, 1); height: 340px; } /* Override Bootstrap column widths — CSS Grid handles layout */ .beer-grid>.beer-card-wrapper { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; } /* Beer grid — CSS Grid centered */ .beer-grid { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: center; justify-items: center; column-gap: 100px; row-gap: 400px; margin: 0 auto; } @media (max-width: 1400px) { .beer-grid { grid-template-columns: repeat(2, auto); column-gap: 80px; row-gap: 350px; } .beer-card-visual { width: 260px; height: 260px; } .beer-catalog-v2 .beer-card-visual img:first-child { height: 520px; } .beer-catalog-v2 .beer-card-pedestal { max-width: 560px; margin-top: -425px; } .beer-card-info { padding-left: 195px; padding-bottom: 35px; } .beer-catalog-v2 .beer-card h4 { font-size: 1.6rem; } .beer-catalog-v2 .beer-card { height: 300px; } .beer-grid.filter-lattina .beer-card-wrapper[data-type="lattina"] .beer-card-pedestal { margin-top: -425px; } .beer-grid.filter-lattina .beer-card-wrapper[data-type="lattina"] .beer-card-visual img:first-child { margin-top: 40px; } } @media (max-width: 991px) { .beer-grid { grid-template-columns: repeat(2, auto); column-gap: 70px; row-gap: 280px; } } @media (max-width: 767px) { .beer-grid { grid-template-columns: repeat(2, auto); column-gap: 40px; row-gap: 200px; } } @media (max-width: 575px) { .beer-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 80px; } .beer-catalog-v2 { padding-bottom: 0; } } @media (max-width: 767px) and (min-width: 576px) { .beer-catalog-v2 { padding-bottom: 0; } .beer-grid { row-gap: 160px; } } /* Left side: bottle + pedestal — absolute so text doesn't shift it */ .beer-card-visual { position: absolute; bottom: 0; left: 0; width: 300px; height: 300px; display: flex; flex-direction: column; align-items: center; overflow: visible; pointer-events: none; } .beer-catalog-v2 .beer-card-visual img:first-child { height: 600px; width: auto; display: block; object-fit: contain; position: relative; z-index: 2; margin-left: -5px; pointer-events: auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), filter 300ms cubic-bezier(0.23, 1, 0.32, 1); } .beer-catalog-v2 .beer-card-pedestal { pointer-events: none; } /* Lattine: pedestal slightly lower (only when lattina filter active) */ .beer-grid.filter-lattina .beer-card-wrapper[data-type="lattina"] .beer-card-pedestal { margin-top: -475px; } /* Pedestal — larger, centered under bottle */ .beer-catalog-v2 .beer-card-pedestal { display: block; width: 480%; max-width: 660px; height: auto !important; position: relative; z-index: 1; margin-top: -490px; margin-left: 50%; transform: translateX(-50%); opacity: 0.85; filter: drop-shadow(0 4px 16px rgba(196, 30, 42, 0.15)); transition: opacity 250ms cubic-bezier(0.23, 1, 0.32, 1), filter 250ms cubic-bezier(0.23, 1, 0.32, 1); } /* Right side: name + expandable details */ .beer-card-info { display: flex; flex-direction: column; justify-content: flex-end; min-height: 80px; padding-left: 220px; padding-bottom: 40px; } .beer-catalog-v2 .beer-card h4 { font-family: var(--font-serif); font-style: italic; font-size: 1.95rem; font-weight: 700; color: #fff; margin-bottom: 0; position: relative; z-index: 2; transition: color 200ms ease, text-shadow 200ms ease; } /* Hidden details — expand on hover */ .beer-card-details { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 350ms cubic-bezier(0.23, 1, 0.32, 1), opacity 250ms ease 50ms; } .beer-card-details p { font-family: var(--font-main); font-size: 0.65rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: #fff; margin-bottom: 6px; margin-top: 10px; border-top: none; padding: 0; } .beer-card-details .beer-card-abv { display: inline-block; font-family: var(--font-main); font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; color: #fff; background: none; border: none; padding: 0; } /* === HOVER: expand details === */ @media (hover: hover) and (pointer: fine) { .beer-catalog-v2 .beer-card-link:hover .beer-card-details { max-height: 80px; opacity: 1; } .beer-catalog-v2 .beer-card-link:hover .beer-card-visual img:first-child { transform: translateY(-8px) scale(1.03); filter: drop-shadow(0 0 25px rgba(var(--beer-color-rgb, 196, 30, 42), 0.4)) drop-shadow(0 0 50px rgba(var(--beer-color-rgb, 196, 30, 42), 0.4)); } .beer-catalog-v2 .beer-card-link:hover .beer-card-pedestal { opacity: 1; filter: drop-shadow(0 0 35px rgba(var(--beer-color-rgb, 196, 30, 42), 0.4)) drop-shadow(0 0 70px rgba(var(--beer-color-rgb, 196, 30, 42), 0.4)); } .beer-catalog-v2 .beer-card-link:hover .beer-card h4 { text-shadow: 0 0 20px rgba(var(--beer-color-rgb, 196, 30, 42), 0.4); } .beer-catalog-v2 .beer-card-wrapper.beer-dark-hover .beer-card-link:hover .beer-card h4, .beer-catalog-v2 .beer-card-wrapper.beer-dark-hover .beer-card-link:hover .beer-card-details p, .beer-catalog-v2 .beer-card-wrapper.beer-dark-hover .beer-card-link:hover .beer-card-details .beer-card-abv { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.2); } } /* Pedestal: always keep centered, never animate transform */ .beer-catalog-v2 .beer-card-pedestal { transform: translateX(-50%) !important; } /* ---------- CTA V2 ---------- */ .birre-cta-v2 { padding: 40px 0 100px; background: var(--bg); position: relative; } .birre-cta-v2-glass { max-width: 600px; margin: 0 auto; text-align: center; padding: 56px 48px; background: rgba(255, 255, 255, 0.025); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 64px rgba(0, 0, 0, 0.3), 0 0 120px rgba(196, 30, 42, 0.04); position: relative; } .birre-cta-v2-glass::before { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: var(--accent); border-radius: 2px; } .birre-cta-v2-label { font-family: var(--font-main); font-size: 0.68rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .birre-cta-v2-heading { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; font-style: italic; color: var(--text); margin-bottom: 16px; } .birre-cta-v2-text { font-family: var(--font-main); font-size: 0.95rem; color: var(--text-gray); line-height: 1.7; margin-bottom: 32px; max-width: 400px; margin-left: auto; margin-right: auto; } .birre-cta-v2-btn { display: inline-block; padding: 14px 40px; font-family: var(--font-main); font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); background: var(--accent); border: none; border-radius: 40px; text-decoration: none; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 4px 20px rgba(196, 30, 42, 0.3); min-height: 44px; } @media (hover: hover) and (pointer: fine) { .birre-cta-v2-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(196, 30, 42, 0.45); } } .birre-cta-v2-btn:active { transform: scale(0.97); transition-duration: 80ms; } /* ============================================ HO.RE.CA — FULL SCREEN SECTION ============================================ */ .horeca-fullscreen { min-height: 100dvh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0a0a0a; } .horeca-fs-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(196, 30, 42, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(232, 115, 42, 0.08) 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, rgba(196, 30, 42, 0.06) 0%, transparent 50%); pointer-events: none; } .horeca-fs-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; opacity: 0.5; z-index: 1; } .horeca-fs-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: center; max-width: 1200px; width: 100%; padding: 60px 40px; } .horeca-fs-label { display: inline-block; font-family: var(--font-main); font-size: 0.68rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .horeca-fs-title { font-family: var(--font-serif); font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 700; font-style: italic; color: #fff; line-height: 0.9; letter-spacing: -2px; margin-bottom: 28px; } .horeca-fs-desc { font-family: var(--font-main); font-size: 1.05rem; color: rgba(255, 255, 255, 0.6); line-height: 1.8; max-width: 480px; margin-bottom: 40px; text-wrap: pretty; } .horeca-fs-btns { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .horeca-fs-btn-primary { display: inline-block; padding: 16px 40px; font-family: var(--font-main); font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: var(--accent); border: none; border-radius: 40px; text-decoration: none; transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 250ms cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 4px 24px rgba(196, 30, 42, 0.3); } @media (hover: hover) and (pointer: fine) { .horeca-fs-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(196, 30, 42, 0.45); } } .horeca-fs-btn-primary:active { transform: scale(0.97); } .horeca-fs-btn-secondary { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-main); font-size: 0.72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 250ms ease; } .horeca-fs-btn-secondary svg { transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .horeca-fs-btn-secondary:hover { color: #fff; } .horeca-fs-btn-secondary:hover svg { transform: translateX(4px); } } /* Right side — stats */ .horeca-fs-right { display: flex; flex-direction: column; gap: 48px; padding-left: 60px; border-left: 1px solid rgba(255, 255, 255, 0.06); } .horeca-fs-stat-num { display: block; font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; font-style: italic; color: #fff; line-height: 1; letter-spacing: -1px; } .horeca-fs-stat-label { display: block; font-family: var(--font-main); font-size: 0.68rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-top: 8px; } /* Background deco text */ .horeca-fs-deco { position: absolute; bottom: -3%; left: 50%; transform: translateX(-50%); font-family: var(--font-serif); font-size: clamp(8rem, 18vw, 20rem); font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.015); letter-spacing: 10px; line-height: 1; pointer-events: none; user-select: none; white-space: nowrap; z-index: 1; } /* Responsive */ @media (max-width: 991px) { .horeca-fs-content { grid-template-columns: 1fr; gap: 50px; text-align: center; padding: 100px 24px 60px; } .horeca-fs-desc { margin-left: auto; margin-right: auto; } .horeca-fs-btns { justify-content: center; } .horeca-fs-right { flex-direction: row; justify-content: center; gap: 40px; padding-left: 0; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 40px; } .horeca-fs-stat { text-align: center; } } @media (max-width: 575px) { .horeca-fs-title { letter-spacing: -1px; } .horeca-fs-right { flex-direction: column; gap: 28px; } .horeca-fs-desc { font-size: 0.95rem; } } /* ---------- RESPONSIVE — Beer Catalog V2 ---------- */ @media (max-width: 991.98px) { .birre-hero-v2 { height: 50vh; min-height: 340px; max-height: 480px; } .birre-hero-v2-glass { padding: 36px 40px; border-radius: 20px; } .birre-hero-v2-title { font-size: clamp(3rem, 9vw, 5rem); } .birre-hero-v2-tagline { font-size: 0.65rem; letter-spacing: 3px; } .birre-filter-v2.birre-filter-sticky { top: 70px; } .beer-catalog-v2 .filter-btns.birre-filter-v2 { padding: 5px; gap: 3px; } .beer-catalog-v2 .filter-btn { padding: 10px 22px; font-size: 0.7rem; } } @media (max-width: 767.98px) { .birre-hero-v2 { height: 45vh; min-height: 300px; } .birre-hero-v2-glass { padding: 28px 24px; margin: 0 16px; } .birre-hero-v2-title { font-size: clamp(2.5rem, 12vw, 4rem); } .birre-filter-v2 { margin-bottom: 48px; } .beer-catalog-v2 .filter-btns.birre-filter-v2 { display: flex; width: calc(100% - 32px); max-width: 340px; left: 50%; transform: translateX(-50%); padding: 5px; gap: 3px; } .beer-catalog-v2 .filter-btn { flex: 1; padding: 10px 8px; font-size: 0.68rem; letter-spacing: 1px; text-align: center; min-width: 0; } .birre-cta-v2-glass { padding: 40px 24px; margin: 0 8px; border-radius: 20px; } .birre-cta-v2-heading { font-size: 1.6rem; } .birre-cta-v2-text { font-size: 0.88rem; } } @media (max-width: 575px) { .birre-hero-v2-title { font-size: clamp(2.2rem, 14vw, 3.2rem); } .birre-hero-v2-tagline { font-size: 0.58rem; letter-spacing: 2px; } } /* ================================================ CHI SIAMO V2 — Cinematic Scroll-Storytelling Redesign ================================================ */ /* --- INTRO: Magazine-style cinematic opener --- */ .chisiamo-v2-intro { padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 120px); background: var(--bg); position: relative; overflow: hidden; } .chisiamo-v2-intro::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(196, 30, 42, 0.04) 0%, transparent 70%); pointer-events: none; } .chisiamo-v2-intro-quote { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 400; font-style: italic; color: var(--text); line-height: 1.3; text-align: center; margin-bottom: 0; max-width: 800px; margin-left: auto; margin-right: auto; } .chisiamo-v2-intro-divider { width: 80px; height: 1px; background: var(--accent); margin: clamp(32px, 5vw, 56px) auto; opacity: 0.6; } .chisiamo-v2-intro-body { font-size: clamp(0.92rem, 1.1vw, 1.05rem); line-height: 2; color: var(--text-gray); margin-bottom: 0; } /* --- MILESTONES: Sticky scroll storytelling --- */ .chisiamo-v2-milestones { padding: clamp(60px, 8vw, 120px) 0; background: var(--bg-light); position: relative; } .chisiamo-v2-milestones .timeline-v2 { padding: 0; } .chisiamo-v2-milestones .timeline-v2::before { background: linear-gradient(180deg, transparent, rgba(196, 30, 42, 0.2) 10%, rgba(196, 30, 42, 0.2) 90%, transparent); } .chisiamo-v2-chapter { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; position: relative; margin-bottom: 0 !important; padding: clamp(60px, 8vh, 100px) 0; } .chisiamo-v2-chapter-year { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-serif); font-size: clamp(8rem, 18vw, 15rem); font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.02); line-height: 1; pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; } .chisiamo-v2-year-pill { display: inline-block; font-family: var(--font-main); font-size: 0.65rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); padding: 6px 16px; border: 1px solid rgba(196, 30, 42, 0.3); border-radius: 100px; margin-bottom: 16px; } .chisiamo-v2-milestones .timeline-v2-content h3 { font-family: var(--font-serif); font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700; font-style: italic; color: var(--text); letter-spacing: 0; text-transform: none; margin-bottom: 16px; } .chisiamo-v2-milestones .timeline-v2-content p { font-size: 0.92rem; line-height: 1.9; color: var(--text-gray); } .chisiamo-v2-img-glass { position: relative; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px; } .chisiamo-v2-img-glass img { border-radius: 10px; height: clamp(260px, 35vh, 400px) !important; } .chisiamo-v2-milestones .timeline-v2-item .row { position: relative; z-index: 1; gap: 0; } .chisiamo-v2-milestones .timeline-v2-item .row>[class*="col-md-5"] { flex: 0 0 45%; max-width: 45%; } .chisiamo-v2-milestones .timeline-v2-item .row>[class*="offset-md"] { margin-left: 0; } .chisiamo-v2-milestones .timeline-v2-item .row { justify-content: space-between; } /* --- I NOSTRI NUMERI: Dramatic full-width counters --- */ .chisiamo-v2-numeri { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg); position: relative; overflow: hidden; } .chisiamo-v2-numeri::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(196, 30, 42, 0.06) 0%, transparent 60%); pointer-events: none; } .chisiamo-v2-numeri-grid { display: flex; align-items: center; justify-content: center; gap: 0; position: relative; } .chisiamo-v2-numeri-item { flex: 1; text-align: center; padding: 40px 20px; } .chisiamo-v2-numeri-item .counter-stat { padding: 0; } .chisiamo-v2-numeri-item .counter-stat-value { font-family: var(--font-main); font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 900; font-style: normal; color: var(--text); margin-bottom: 8px; white-space: nowrap; } .chisiamo-v2-numeri-item .counter-stat-label { font-family: var(--font-main); font-size: 0.75rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); } .chisiamo-v2-numeri-divider { width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.08), transparent); flex-shrink: 0; } /* --- IL TERRITORIO: Immersive parallax --- */ .chisiamo-v2-territory { min-height: 100dvh !important; align-items: flex-end !important; } .chisiamo-v2-territory .territory-bg { opacity: 0.35; height: 130%; } .chisiamo-v2-territory-overlay { background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.5) 40%, rgba(10, 10, 10, 0.92) 80%, rgba(10, 10, 10, 0.98) 100%) !important; } .chisiamo-v2-territory-content { padding-bottom: clamp(60px, 8vh, 120px); padding-top: clamp(60px, 8vh, 120px); } .chisiamo-v2-territory-glass { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 20px; padding: clamp(32px, 5vw, 56px); } .chisiamo-v2-territory-glass .section-title { margin-bottom: 24px; } .chisiamo-v2-territory-glass .lead-text { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 2; color: rgba(255, 255, 255, 0.75); } /* --- I NOSTRI VALORI: 2x2 glassmorphic grid --- */ .chisiamo-v2-valori-section { background: var(--bg-light); } .chisiamo-v2-value-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; padding: clamp(32px, 4vw, 48px); height: 100%; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .chisiamo-v2-value-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(196, 30, 42, 0.1); border: 1px solid rgba(196, 30, 42, 0.2); margin-bottom: 24px; box-shadow: 0 0 24px rgba(196, 30, 42, 0.12); transition: box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .chisiamo-v2-value-icon svg { width: 24px; height: 24px; stroke: var(--accent); } .chisiamo-v2-value-title { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; font-style: italic; color: var(--text); margin-bottom: 12px; } .chisiamo-v2-value-text { font-size: 0.9rem; line-height: 1.8; color: var(--text-gray); margin-bottom: 0; } @media (hover: hover) and (pointer: fine) { .chisiamo-v2-value-card:hover { transform: translateY(-6px); border-color: rgba(196, 30, 42, 0.15); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(196, 30, 42, 0.06); } .chisiamo-v2-value-card:hover .chisiamo-v2-value-icon { box-shadow: 0 0 36px rgba(196, 30, 42, 0.25); } } .chisiamo-v2-value-card:active { transform: scale(0.97); } /* --- IL PROCESSO: Vertical stacked steps --- */ .chisiamo-v2-processo { padding: clamp(60px, 8vw, 120px) 0 0; background: var(--bg); overflow: hidden; } .chisiamo-v2-process-step { padding: clamp(60px, 8vh, 100px) 0; position: relative; overflow: hidden; background: var(--bg); } .chisiamo-v2-process-step-alt { background: var(--bg-light); } .chisiamo-v2-process-step::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(196, 30, 42, 0.03) 0%, transparent 60%); pointer-events: none; } .chisiamo-v2-process-text-col { position: relative; } .chisiamo-v2-process-ghost { font-family: var(--font-serif) !important; font-size: clamp(6rem, 14vw, 12rem) !important; font-weight: 700 !important; font-style: italic; color: rgba(196, 30, 42, 0.05) !important; line-height: 1; margin-bottom: -20px !important; position: relative; z-index: 0; } .chisiamo-v2-process-title { font-family: var(--font-serif) !important; font-size: clamp(1.4rem, 2.5vw, 2rem) !important; font-weight: 700 !important; font-style: italic; letter-spacing: 0 !important; text-transform: none !important; position: relative; z-index: 1; } .chisiamo-v2-process-step .process-step-text { position: relative; z-index: 1; max-width: 520px; } .chisiamo-v2-process-icon { width: 180px; height: 180px; } /* --- RESPONSIVE: Mobile-first adjustments --- */ /* Numeri: mobile stack */ @media (max-width: 767px) { .chisiamo-v2-numeri-grid { flex-direction: column; gap: 0; } .chisiamo-v2-numeri-divider { width: 60px; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent); } .chisiamo-v2-numeri-item { padding: 28px 20px; } .chisiamo-v2-numeri-item .counter-stat-value { font-size: 1.6rem; } } /* Milestones: mobile chapter */ @media (max-width: 991px) { .chisiamo-v2-chapter { min-height: auto; padding: 48px 0; } .chisiamo-v2-chapter-year { font-size: 5rem; top: 20px; left: 50%; transform: translateX(-50%); } .chisiamo-v2-milestones .timeline-v2-item .row>[class*="col-md-5"] { flex: 0 0 100%; max-width: 100%; } .chisiamo-v2-milestones .timeline-v2-item .col-md-5 { width: 100%; padding-left: 50px; } .chisiamo-v2-milestones .timeline-v2-item .offset-md-2 { margin-left: 0; padding-left: 50px; } .chisiamo-v2-img-glass img { height: 220px !important; } .chisiamo-v2-milestones .timeline-v2 { position: relative; z-index: 0; } .chisiamo-v2-milestones .timeline-v2::before { z-index: 0; } .chisiamo-v2-milestones .timeline-v2-item .row { position: relative; z-index: 2; } .chisiamo-v2-img-glass { position: relative; z-index: 3; } .chisiamo-v2-milestones .timeline-v2::before, .chisiamo-v2-milestones .timeline-v2-line { left: 20px !important; } .chisiamo-v2-milestones .timeline-v2-dot { left: 20px !important; } } @media (max-width: 767.98px) { .chisiamo-v2-milestones { padding: 50px 0 60px; } .chisiamo-v2-chapter { padding: 32px 0; } .chisiamo-v2-chapter-year { font-size: 3.5rem; top: 12px; } .chisiamo-v2-milestones .timeline-v2::before { left: 14px; } .chisiamo-v2-milestones .timeline-v2-dot { left: 14px; } .chisiamo-v2-milestones .timeline-v2-item .col-md-5, .chisiamo-v2-milestones .timeline-v2-item .offset-md-2 { padding-left: 38px; padding-right: 0; } .chisiamo-v2-milestones .timeline-v2-content h3 { font-size: 1.15rem; margin-bottom: 10px; } .chisiamo-v2-milestones .timeline-v2-content p { font-size: 0.82rem; line-height: 1.65; } .chisiamo-v2-year-pill { font-size: 0.6rem; padding: 4px 12px; margin-bottom: 10px; } .chisiamo-v2-img-glass { padding: 5px; margin-top: 16px; } .chisiamo-v2-img-glass img { height: 180px !important; } } @media (max-width: 400px) { .chisiamo-v2-milestones .timeline-v2-item .col-md-5, .chisiamo-v2-milestones .timeline-v2-item .offset-md-2 { padding-left: 32px; } .chisiamo-v2-milestones .timeline-v2-content p { font-size: 0.78rem; line-height: 1.6; } } /* Intro: single column on mobile */ @media (max-width: 767px) { .chisiamo-v2-intro-quote { font-size: 1.6rem; } .chisiamo-v2-intro-body+.chisiamo-v2-intro-body { margin-top: 20px; } } /* Process: mobile */ @media (max-width: 767px) { .chisiamo-v2-process-ghost { font-size: 5rem !important; } .chisiamo-v2-process-icon { width: 140px; height: 140px; margin-top: 24px; } } /* Values: single column on small mobile */ @media (max-width: 575px) { .chisiamo-v2-value-card { padding: 28px 24px; } } /* ================================================ EXPERIENCE PAGE — counter override to match homepage ================================================ */ .experience-stats .counter-stat-value { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 900; color: var(--text); } .experience-stats .counter-stat-label { color: var(--accent); letter-spacing: 1.5px; } /* ================================================ HORECA FORM — replace inline styles ================================================ */ .horeca-form-heading { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; font-style: italic; color: var(--text); margin-bottom: 16px; } .horeca-form-text { font-size: 0.9rem; line-height: 1.8; color: var(--text-gray); margin-bottom: 28px; } /* ================================================ TAP ROOM — Location Panels v2 ================================================ */ .taproom-locations-v2 { padding-top: clamp(60px, 8vw, 100px); } .tr-loc-panel { padding: clamp(60px, 8vw, 100px) 0; position: relative; overflow: hidden; } .tr-loc-panel--dark { background: var(--bg, #0a0a0a); } .tr-loc-panel--light { background: var(--bg-light, #111); } .tr-loc-inner { position: relative; max-width: 720px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.3); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .tr-loc-inner:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 30, 42, 0.15); } } .tr-loc-inner:active { transform: scale(0.97); } /* Ghost watermark number */ .tr-loc-ghost { position: absolute; top: -20px; right: 24px; font-family: var(--font-serif, 'Playfair Display', serif); font-style: italic; font-size: clamp(6rem, 12vw, 10rem); font-weight: 700; color: rgba(255, 255, 255, 0.03); line-height: 1; pointer-events: none; user-select: none; } .tr-loc-eyebrow { font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent, #c41e2a); margin-bottom: 12px; } .tr-loc-name { font-family: var(--font-serif, 'Playfair Display', serif); font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--text, #fff); margin-bottom: 8px; line-height: 1.2; } .tr-loc-address { font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 0.85rem; font-weight: 400; color: var(--text-gray, #b3b3b3); letter-spacing: 0.5px; margin-bottom: 20px; } .tr-loc-desc { font-size: 0.95rem; line-height: 1.8; color: var(--text-gray, #b3b3b3); margin-bottom: 24px; max-width: 600px; } .tr-loc-meta { display: flex; flex-direction: column; gap: 14px; } .tr-loc-orari { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text, #fff); font-weight: 500; } .tr-loc-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent, #c41e2a); } .tr-loc-features { display: flex; flex-wrap: wrap; gap: 8px; } .tr-loc-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-gray, #b3b3b3); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 100px; padding: 5px 14px; transition: border-color 0.3s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .tr-loc-tag:hover { border-color: rgba(196, 30, 42, 0.4); color: var(--text, #fff); } } /* Responsive: mobile adjustments */ @media (max-width: 767px) { .tr-loc-inner { padding: 32px 24px; } .tr-loc-ghost { font-size: 5rem; top: -10px; right: 12px; } .tr-loc-orari { flex-direction: column; align-items: flex-start; gap: 6px; } } @media (max-width: 575px) { .tr-loc-panel { padding: 40px 0; } .tr-loc-inner { padding: 28px 20px; border-radius: 12px; } .tr-loc-name { font-size: 1.4rem; } } /* === RESPONSIVE — Horizontal Cards === */ @media (max-width: 991px) { .beer-card-visual { width: 210px; height: 210px; } .beer-catalog-v2 .beer-card-visual img:first-child { height: 420px; } .beer-catalog-v2 .beer-card-pedestal { width: 480%; max-width: 460px; margin-top: -360px; } .beer-card-info { padding-left: 155px; padding-bottom: 30px; } .beer-catalog-v2 .beer-card { height: 260px; } .beer-catalog-v2 .beer-card h4 { font-size: 1.4rem; } .beer-grid.filter-lattina .beer-card-wrapper[data-type="lattina"] .beer-card-pedestal { margin-top: -360px; } .beer-grid.filter-lattina .beer-card-wrapper[data-type="lattina"] .beer-card-visual img:first-child { margin-top: 8px; } } @media (max-width: 767px) { .beer-card-visual { width: 165px; height: 165px; } .beer-catalog-v2 .beer-card-visual img:first-child { height: 330px; } .beer-catalog-v2 .beer-card-pedestal { width: 480%; max-width: 360px; margin-top: -295px; } .beer-card-info { padding-left: 125px; padding-bottom: 25px; } .beer-catalog-v2 .beer-card { height: 220px; } .beer-catalog-v2 .beer-card h4 { font-size: 1.1rem; } .beer-card-details p { font-size: 0.58rem; } .beer-card-details .beer-card-abv { font-size: 0.55rem; } } @media (max-width: 575px) { .beer-catalog-v2 .beer-card { flex-direction: column; align-items: center; justify-content: flex-start; height: auto; width: 280px; padding: 0; text-align: center; } .beer-card-visual { position: relative; width: 100%; height: 280px; margin: 0 auto; display: block; overflow: visible; } .beer-catalog-v2 .beer-card-visual img:first-child { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); height: 240px; width: auto; margin: 0; } .beer-catalog-v2 .beer-card-pedestal { position: absolute; left: 50%; bottom: -120px; width: 260px; max-width: 260px; margin: 0; transform: translateX(calc(-50% + 4px)) !important; } .beer-grid.filter-lattina .beer-card-wrapper[data-type="lattina"] .beer-card-pedestal { margin-top: 0; bottom: -120px; } .beer-grid.filter-lattina .beer-card-wrapper[data-type="lattina"] .beer-card-visual img:first-child { bottom: 45px !important; transform: translateX(calc(-50% + 2px)) !important; } .beer-card-info { padding: 12px 0 0; align-items: center; min-height: auto; width: 100%; } .beer-catalog-v2 .beer-card h4 { font-size: 1.1rem; } .beer-card-details { max-height: 80px; opacity: 1; } .beer-card-details p { font-size: 0.58rem; } .beer-card-details .beer-card-abv { font-size: 0.55rem; } .beer-grid { row-gap: 150px; } .page-birre .horeca-fullscreen { margin-top: -400px; min-height: auto; padding: 60px 0; } } /* ============================================ LAVA TEXTURE BACKGROUND — Le Birre catalog ============================================ */ .beer-catalog-v2 { padding-bottom: 600px; background: radial-gradient(ellipse at 15% 30%, rgba(196, 30, 42, 0.12) 0%, transparent 40%), radial-gradient(ellipse at 85% 20%, rgba(232, 115, 42, 0.08) 0%, transparent 35%), radial-gradient(ellipse at 50% 60%, rgba(196, 30, 42, 0.1) 0%, transparent 45%), radial-gradient(ellipse at 5% 80%, rgba(232, 115, 42, 0.1) 0%, transparent 30%), radial-gradient(ellipse at 95% 70%, rgba(196, 30, 42, 0.08) 0%, transparent 35%), radial-gradient(ellipse at 40% 95%, rgba(232, 115, 42, 0.07) 0%, transparent 40%), radial-gradient(ellipse at 70% 10%, rgba(196, 30, 42, 0.06) 0%, transparent 30%), var(--bg) !important; position: relative; } /* ============================================ BEER NAME COLOR — per-card custom property ============================================ */ .beer-catalog-v2 .beer-card h4 { color: rgb(var(--beer-color-rgb, 255, 255, 255)) !important; } /* ============================================ ABV BADGE COLOR — matches beer name ============================================ */ .beer-catalog-v2 .beer-card-abv { color: #fff !important; opacity: 0.7; } /* ============================================ NOISE / GRAIN OVERLAY — Le Birre catalog ============================================ */ .beer-catalog-v2::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* ============================================ INLINE STYLES — moved to CSS ============================================ */ /* index.html — CHI SIAMO section-desc spacing */ .hp-chisiamo-section .section-desc:first-of-type { margin-bottom: 10px; } /* chi-siamo.html — territory full-height row */ .chisiamo-fullrow { min-height: 100dvh; } /* birra.html — recommended beers section light background */ .page-section-light { background: var(--bg-light); } /* birra.html — HoReCa section title spacing */ .horeca-section-title { margin-bottom: 20px; } /* birra.html — HoReCa card-preview-text margin reset */ .horeca-section .card-preview-text { margin: 0; } /* horeca.html — form hint text */ .form-hint { font-size: 0.7rem; color: var(--text-muted); margin-top: 6px; margin-bottom: 0; } /* contatti.html — contact form textarea height */ .contatti-textarea { height: 140px; } /* contatti.html + tap-room.html — Leaflet map marker dot */ .map-marker-dot { width: 16px; height: 16px; background: #c41e2a; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 12px rgba(196, 30, 42, 0.6); } /* contatti.html + tap-room.html — Leaflet map popup */ .map-popup { font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 600; color: #0a0a0a; text-align: center; padding: 4px 8px; } /* contatti.html + tap-room.html — Leaflet map popup sub-text */ .map-popup-sub { font-weight: 400; font-size: 11px; } /* ============================================ TAP ROOM VENUES — Modern Photo Cards ============================================ */ .tr-venues { background: var(--bg); padding: 100px 0 60px; } .tr-venue { display: grid; grid-template-columns: 1.1fr 0.9fr; max-width: 1200px; margin: 0 auto 100px; gap: 0; align-items: stretch; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); transition: border-color 300ms ease; } @media (hover: hover) and (pointer: fine) { .tr-venue:hover { border-color: rgba(196, 30, 42, 0.15); } .tr-venue:hover .tr-venue-img img { transform: scale(1.04); } .tr-venue:hover .tr-venue-num { opacity: 0.2; } .tr-venue:hover .tr-venue-cta svg { transform: translateX(4px); } } .tr-venue:last-child { margin-bottom: 0; } /* Reversed layout */ .tr-venue--reverse { grid-template-columns: 0.9fr 1.1fr; } .tr-venue--reverse .tr-venue-img { order: 2; } .tr-venue--reverse .tr-venue-body { order: 1; } /* Photo side */ .tr-venue-img { position: relative; overflow: hidden; min-height: 420px; } .tr-venue-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); } .tr-venue-img-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 10, 10, 0.3) 0%, transparent 60%); pointer-events: none; } .tr-venue-num { position: absolute; top: 24px; left: 28px; font-family: var(--font-serif); font-size: clamp(4rem, 8vw, 7rem); font-weight: 700; font-style: italic; color: #fff; line-height: 1; opacity: 0.1; transition: opacity 300ms ease; pointer-events: none; } /* Content side */ .tr-venue-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; } .tr-venue-eyebrow { font-family: var(--font-main); font-size: 0.62rem; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .tr-venue-name { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; font-style: italic; color: #fff; line-height: 1.1; margin-bottom: 12px; letter-spacing: -0.5px; } .tr-venue-address { display: flex; align-items: center; gap: 6px; font-family: var(--font-main); font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; } .tr-venue-address svg { flex-shrink: 0; stroke: var(--accent); } .tr-venue-desc { font-family: var(--font-main); font-size: 0.92rem; color: rgba(255, 255, 255, 0.55); line-height: 1.75; margin-bottom: 24px; text-wrap: pretty; } .tr-venue-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .tr-venue-tag { font-family: var(--font-main); font-size: 0.62rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; transition: border-color 200ms ease, color 200ms ease; } @media (hover: hover) and (pointer: fine) { .tr-venue-tag:hover { border-color: rgba(196, 30, 42, 0.3); color: #fff; } } .tr-venue-hours { display: flex; align-items: center; gap: 8px; font-family: var(--font-main); font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.4); margin-bottom: 28px; } .tr-venue-hours svg { flex-shrink: 0; stroke: rgba(255, 255, 255, 0.35); } .tr-venue-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-main); font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); text-decoration: none; transition: color 200ms ease; } .tr-venue-cta svg { transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); stroke: var(--accent); } @media (hover: hover) and (pointer: fine) { .tr-venue-cta:hover { color: #fff; } .tr-venue-cta:hover svg { stroke: #fff; } } /* Responsive */ @media (max-width: 991px) { .tr-venue, .tr-venue--reverse { grid-template-columns: 1fr; } .tr-venue--reverse .tr-venue-img { order: 0; } .tr-venue--reverse .tr-venue-body { order: 0; } .tr-venue-img { min-height: 280px; } .tr-venue-body { padding: 36px 32px; } .tr-venue { margin: 0 16px 60px; } } @media (max-width: 575px) { .tr-venue-img { min-height: 220px; } .tr-venue-body { padding: 28px 24px; } .tr-venue-name { font-size: 1.4rem; } .tr-venue { margin: 0 12px 48px; border-radius: 12px; } } /* ============================================ FOOTER V2 — Premium Redesign ============================================ */ .footer-v2 { position: relative; background: #060606; padding: 80px 0 0; overflow: hidden; } .footer-v2-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 200px; background: radial-gradient(ellipse, rgba(196, 30, 42, 0.08) 0%, transparent 70%); pointer-events: none; } /* Top: brand + social */ .footer-v2-top { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .footer-v2-logo { height: 120px; margin-bottom: 16px; display: block; } .footer-v2-statement { font-family: var(--font-main); font-size: 0.88rem; color: rgba(255, 255, 255, 0.4); line-height: 1.6; max-width: 320px; } .footer-v2-social { display: flex; gap: 12px; } .footer-v2-social-link { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: border-color 250ms ease, transform 250ms cubic-bezier(0.23, 1, 0.32, 1); } .footer-v2-social-link svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, 0.5); transition: fill 250ms ease; } @media (hover: hover) and (pointer: fine) { .footer-v2-social-link:hover { border-color: var(--accent); transform: translateY(-2px); } .footer-v2-social-link:hover svg { fill: var(--accent); } } /* Grid: 4 columns */ .footer-v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 48px 0; } .footer-v2-heading { font-family: var(--font-main); font-size: 0.62rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .footer-v2-list { list-style: none; padding: 0; margin: 0; } .footer-v2-list li { margin-bottom: 12px; font-family: var(--font-main); font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); line-height: 1.4; } .footer-v2-list a { color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 200ms ease; } @media (hover: hover) and (pointer: fine) { .footer-v2-list a:hover { color: #fff; } } /* Bottom bar */ .footer-v2-bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .footer-v2-bottom p { font-family: var(--font-main); font-size: 0.72rem; color: rgba(255, 255, 255, 0.25); margin: 0; } .footer-v2-legal { display: flex; align-items: center; gap: 20px; } .footer-v2-legal a, .footer-v2-legal span { font-family: var(--font-main); font-size: 0.72rem; color: rgba(255, 255, 255, 0.25); text-decoration: none; transition: color 200ms ease; } @media (hover: hover) and (pointer: fine) { .footer-v2-legal a:hover { color: rgba(255, 255, 255, 0.6); } } /* Responsive */ @media (max-width: 991px) { .footer-v2-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 575px) { .footer-v2 { padding: 60px 0 0; } .footer-v2-top { flex-direction: column; gap: 24px; padding-bottom: 32px; } .footer-v2-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 32px 0; } .footer-v2-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 20px 0; } .footer-v2-legal { flex-wrap: wrap; justify-content: center; gap: 12px; } } /* ============================================ HORECA — Tablet (576–991) card layout refinements ============================================ */ @media (max-width: 991.98px) and (min-width: 576px) { /* SOLUZIONI B2B preview: 3 colonne compatte (no orfana) */ .page-horeca .horeca-preview-row>[class*="col-"] { flex: 0 0 auto !important; width: 33.3333% !important; max-width: 33.3333% !important; } .page-horeca .horeca-preview-row .card-dark { padding: 22px 18px; } .page-horeca .horeca-preview-row .card-dark h3 { font-size: 0.85rem; letter-spacing: 1px; } .page-horeca .horeca-preview-row .card-dark p { font-size: 0.78rem; line-height: 1.55; } .page-horeca .horeca-preview-row .card-dark-icon { width: 46px; height: 46px; margin-bottom: 14px; } .page-horeca .horeca-preview-row .card-dark-icon svg { width: 22px; height: 22px; } /* Piani di Noleggio: featured full-width sopra + 2 affiancate sotto */ .page-horeca .horeca-plans-row { align-items: stretch; } .page-horeca .horeca-plans-row>[class*="col-"] { flex: 0 0 auto !important; max-width: 50% !important; width: 50% !important; } .page-horeca .horeca-plans-row>[class*="col-"]:nth-child(2) { order: -1; width: 100% !important; max-width: 100% !important; } .page-horeca .horeca-plans-row>[class*="col-"]:nth-child(2) .tap-plan-card { max-width: 640px; margin-left: auto; margin-right: auto; } /* I NOSTRI PARTNER: 3 colonne compatte (no orfana) */ .page-horeca .horeca-partners-row>[class*="col-"] { flex: 0 0 auto !important; width: 33.3333% !important; max-width: 33.3333% !important; } .page-horeca .horeca-partners-row .testimonial-card { padding: 22px 18px; } .page-horeca .horeca-partners-row .testimonial-card-quote { font-size: 0.85rem; line-height: 1.55; } .page-horeca .horeca-partners-row .testimonial-card-logo { max-height: 40px; } .page-horeca .horeca-partners-row .testimonial-card-author { font-size: 0.9rem; } .page-horeca .horeca-partners-row .testimonial-card-role { font-size: 0.75rem; } }