/* Confezioni CM — custom CSS v2 WOW */ [x-cloak] { display: none !important; } /* ─── MOBILE MENU OVERLAY (Alpine x-show) ─── */ /* Stagger animation per le voci giganti italic. Quando l'overlay è visibile (display!=none impostato da Alpine x-show), le .mm-link entrano da destra con delay variabile (--d). Fallback senza Alpine: se l'overlay non ha display:none inline, anima comunque. */ .mobile-menu-overlay .mm-link { opacity: 0; transform: translateX(32px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0ms); } .mobile-menu-overlay:not([style*="display: none"]) .mm-link, .mobile-menu-overlay:not([style*="display:none"]) .mm-link { opacity: 1; transform: translateX(0); } .mobile-menu-overlay .mm-footer { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out 500ms, transform 0.6s ease-out 500ms; } .mobile-menu-overlay:not([style*="display: none"]) .mm-footer, .mobile-menu-overlay:not([style*="display:none"]) .mm-footer { opacity: 1; transform: translateY(0); } /* Safety: se Alpine fallisce, .mobile-menu-open su mostra l'overlay */ body.mobile-menu-open .mobile-menu-overlay { display: block !important; } body.mobile-menu-open { overflow: hidden; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; } ::selection { background-color: #A0263A; color: white; } em { font-style: italic; } /* ─── SCROLL REVEAL (più drammatico) ─── */ .reveal { opacity: 0; transform: translateY(60px) scale(0.96); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); } /* Direzioni alternative del reveal */ .reveal-left { transform: translateX(-60px) scale(0.97); } .reveal-left.is-visible { transform: translateX(0) scale(1); } .reveal-right { transform: translateX(60px) scale(0.97); } .reveal-right.is-visible { transform: translateX(0) scale(1); } /* ─── COOKIE BANNER (semplice, display:none/block — no fancy transitions) ─── */ #cookie-banner { display: none; position: fixed; bottom: 24px; left: 24px; right: 24px; max-width: 440px; background: #fff; border-radius: 18px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); padding: 24px; z-index: 300; border: 1px solid rgba(0,0,0,0.08); animation: cookieFadeIn 0.4s ease-out; } #cookie-banner.active { display: block; } @keyframes cookieFadeIn { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { #cookie-banner { left: 16px; right: 16px; bottom: 16px; } } /* ─── HERO ATMOSPHERE: spotlight che segue il mouse ─── */ .hero-spotlight { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle 600px at var(--mx, 50%) var(--my, 50%), rgba(201, 168, 90, 0.18) 0%, transparent 70% ); mix-blend-mode: screen; transition: opacity 0.4s ease; } @media (max-width: 768px) { .hero-spotlight { display: none; } } /* ─── KEN BURNS slow zoom su card images ─── */ .kb-hover { overflow: hidden; } .kb-hover img { transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .kb-hover:hover img { transform: scale(1.08); } /* ─── PARALLAX hero image ─── */ .parallax-img { will-change: transform; transition: transform 0.3s ease-out; } /* ─── MARQUEE infinite scroll ─── */ .marquee-track { display: flex; animation: marquee 30s linear infinite; gap: 80px; } .marquee-track:hover { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ─── ACCENT GOLD (per CTA primary più premium) ─── */ .cta-gold { position: relative; overflow: hidden; background: linear-gradient(135deg, #A0263A 0%, #5A1422 100%); color: white; box-shadow: 0 10px 30px -10px rgba(176, 141, 63, 0.6); transition: all 0.4s ease; } .cta-gold::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #9B2538 0%, #A0263A 100%); opacity: 0; transition: opacity 0.4s ease; } .cta-gold:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -15px rgba(176, 141, 63, 0.7); } .cta-gold:hover::before { opacity: 1; } .cta-gold > * { position: relative; z-index: 1; } /* ─── NUMBERS COUNTER aspect ─── */ .counter-num { font-variant-numeric: tabular-nums; background: linear-gradient(135deg, #1f3a8f 0%, #A0263A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── SCROLL BAR slim ─── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #f3f3f3; } ::-webkit-scrollbar-thumb { background: #A0263A; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #1f3a8f; } /* ─── LINK trasparenze + hover transitions ─── */ a, button { transition: all 0.3s ease; } /* ─── DECORATIVE BG dots (nelle sezioni dark) ─── */ .bg-dots { background-image: radial-gradient(circle at 1px 1px, rgba(201, 168, 90, 0.12) 1px, transparent 0); background-size: 32px 32px; } /* ─── PRINT ─── */ @media print { nav, footer, #cookie-banner { display: none !important; } } /* ─── KEYFRAMES Hero+Loader v3 ─── */ @keyframes loaderFade { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes heroLine { 0% { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0); } 100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0% 0); } } @keyframes fadeUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes loaderExit { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-100%); pointer-events: none; visibility: hidden; } } .loader-exit { animation: loaderExit 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards; } /* x-cloak per Alpine */ [x-cloak] { display: none !important; }