/* LUXLAB v2 — sections / hero / vip / dove / footer — estratto da index.html monolite, contenuto invariato */ /* ---------- HERO ---------- */ #hero{height:100vh;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative} #hero .content{width:1200px;height:562px;border-radius:40px;overflow:hidden;background:#000;position:relative;transform-origin:center top} /* v2: il drift di luminosità (era animation:brightness/filter su .content) ora è un overlay nero con opacity animata, sopra tutti i figli (logo incluso, z-index:20). overflow:hidden lo clippa ai 40px. */ #hero .content::after{content:'';position:absolute;inset:0;background:#000;opacity:0;z-index:50;pointer-events:none;animation:brightness 200s linear infinite} @media(max-width:1200px){#hero .content{transform:scale(calc(100vw/1200));}} @media(max-width:600px){#hero .content{transform:scale(.65);}} #hero .container-full{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;animation:zoom 200s linear infinite;z-index:5} /* ---------- HERO LOGO CENTRATO NEL CUBO PIÙ IN ALTO ---------- */ .hero-logo-container { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); z-index: 20; pointer-events: none; } .hero-logo { width: 280px; height: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); opacity: 1; } #hero .backgroundImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #hero .hue{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1e5799 0%,#7db9e8 100%);mix-blend-mode:overlay;animation:hue 8s infinite;z-index:3} /* Cubo testuale */ #hero .cube{position:absolute;width:1050px;height:190px;display:flex;align-items:center;perspective:480px;perspective-origin:50% 70%;z-index:8} #hero .face{position:absolute;width:100%;height:100%;display:flex;align-items:center;overflow:hidden} #hero .left {transform:translateX(-525px) rotateY(-90deg) scaleX(-1)} #hero .right{transform:translateX( 525px) rotateY( 90deg) scaleX(-1)} #hero .back {transform:translateZ(-525px) rotateY(180deg) scaleX(-1)} #hero p{white-space:nowrap;font-family:'Bebas Neue',sans-serif;font-size:6.4rem;color:#fff} #hero span{color:var(--gold)} #hero .left p,#hero .right p,#hero .back p{animation:slide 15s linear infinite} /* riflesso */ #hero .container-reflect{position:absolute;top:380px;width:100%;height:190px;display:flex;align-items:center;justify-content:center;filter:blur(10px);z-index:7} #hero .container-reflect .cube{perspective:480px;perspective-origin:50% -30%} #hero .container-reflect .left {transform:translateX(-525px) rotateY(-90deg) scaleX(-1) scaleY(-1)} #hero .container-reflect .right{transform:translateX( 525px) rotateY( 90deg) scaleX(-1) scaleY(-1)} #hero .container-reflect .back {transform:translateZ(-525px) rotateY(180deg) scaleX(-1) scaleY(-1)} #hero .container-reflect p{transform:scaleY(.7)} /* ---------- SECTIONS ---------- */ section{padding:120px 6vw;min-height:100vh;} .sec-title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(2.6rem,6vw,3.8rem); color:var(--gold); margin:0 auto 70px; position:relative; display:block; text-align:center; width:fit-content; } .sec-title:before{content:'';position:absolute;left:-54px;top:50%;transform:translateY(-50%);height:3px;width:0;background:var(--gold);transition:width .8s var(--ease)} .reveal.in-view .sec-title:before{width:46px} .reveal{opacity:0;transform:translateY(60px);transition:all .85s var(--ease)} .reveal.in-view{opacity:1;transform:none} /* Chi Siamo - EFFETTI SPETTACOLARI */ #about{ background:linear-gradient(180deg,#fff 0%,#fafafa 100%); position:relative;overflow:hidden; min-height: 120vh; z-index: 1; isolation: isolate; /* Crea nuovo stacking context */ } /* Separatore dopo about */ #about::after{ content:''; position:absolute; bottom:0; left:10%; width:80%; height:1px; background:linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent); pointer-events:none; z-index:100; /* Alto per essere sempre visibile */ } /* Floating particles background */ #about:before{ content:'';position:absolute;top:-50%;left:-50%; width:200%;height:200%; background: radial-gradient(circle at 20% 20%, rgba(212,175,55,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(212,175,55,0.08) 0%, transparent 50%), radial-gradient(circle at 40% 70%, rgba(212,175,55,0.06) 0%, transparent 50%); animation:floatingParticles 20s ease-in-out infinite; } /* Geometric shapes floating */ #about:after{ content:'';position:absolute;top:10%;right:10%; width:100px;height:100px; background:linear-gradient(45deg, rgba(212,175,55,0.1), rgba(212,175,55,0.2)); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); animation:floatingDiamond 15s ease-in-out infinite; } /* Intro text con effetto typewriter */ .about-intro{ max-width:800px;margin:0 auto 80px;text-align:left; font-size:1.3rem;line-height:1.9;color:#333; position: relative; opacity:0;animation:typewriterFade 2s .5s forwards; font-family: 'Playfair Display', serif; overflow: visible; } .about-intro.epic-text { font-style: italic; letter-spacing: 0.5px; } .about-intro em { color: var(--gold); font-style: italic; } .about-intro strong { color: #1a1a1a; font-weight: 700; } /* INIZIALE STILE VOGUE - Lettera decorativa */ .vogue-initial { float: left; font-family: 'Playfair Display', serif; font-size: 4.2rem; font-weight: 700; line-height: 1; margin-right: 9px; margin-top: 6px; margin-bottom: 0; padding: 5px 8px; transform: scaleY(1.23) translateY(-35%) translateX(5%); color: transparent; background: linear-gradient(135deg, #d4af37 0%, #f4e168 30%, #d4af37 60%, #b8860b 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(2px 2px 4px rgba(212,175,55,0.3)); animation: vogueShine 4s ease-in-out infinite; position: relative; z-index: 2; overflow: visible; } /* Nessun rettangolo - RIMOSSO */ .vogue-initial::before { display: none; } /* Nessun rettangolo decorativo */ .vogue-initial::before { display: none; } /* Container con perspective 3D */ .service-container{ display:flex;flex-wrap:wrap;gap:50px;justify-content:center; max-width:1200px;margin:0 auto; perspective: 1200px; transform-style: preserve-3d; } /* ================================================ DRAWING SVG + TYPEWRITER ANIMATIONS ================================================ */ /* Drawing SVG - Setup */ .service-item .icon svg path, .service-item .icon svg line, .service-item .icon svg circle, .service-item .icon svg ellipse, .service-item .icon svg rect { stroke: var(--gold); stroke-width: 15; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1500; stroke-dashoffset: 0; transition: stroke-dashoffset 0s; } /* Attiva drawing 1 SECONDO DOPO che la card è visibile */ .service-item.animate .icon svg path, .service-item.animate .icon svg line, .service-item.animate .icon svg circle, .service-item.animate .icon svg ellipse, .service-item.animate .icon svg rect { animation: svgDraw 2.5s ease-out 1s forwards; } /* Stagger naturale per ogni elemento SVG */ .service-item.animate .icon svg *:nth-child(1) { animation-delay: 0s; } .service-item.animate .icon svg *:nth-child(2) { animation-delay: 0.08s; } .service-item.animate .icon svg *:nth-child(3) { animation-delay: 0.16s; } .service-item.animate .icon svg *:nth-child(4) { animation-delay: 0.24s; } .service-item.animate .icon svg *:nth-child(5) { animation-delay: 0.32s; } .service-item.animate .icon svg *:nth-child(6) { animation-delay: 0.4s; } .service-item.animate .icon svg *:nth-child(7) { animation-delay: 0.48s; } .service-item.animate .icon svg *:nth-child(8) { animation-delay: 0.56s; } .service-item.animate .icon svg *:nth-child(9) { animation-delay: 0.64s; } .service-item.animate .icon svg *:nth-child(10) { animation-delay: 0.72s; } .service-item.animate .icon svg *:nth-child(11) { animation-delay: 0.8s; } .service-item.animate .icon svg *:nth-child(12) { animation-delay: 0.88s; } .service-item.animate .icon svg *:nth-child(13) { animation-delay: 0.96s; } .service-item.animate .icon svg *:nth-child(14) { animation-delay: 1.04s; } .service-item.animate .icon svg *:nth-child(15) { animation-delay: 1.12s; } /* Glow finale dopo il drawing */ .service-item.animate .icon svg { animation: svgGlowPulse 3s ease-in-out 2.5s infinite; } /* Titoli h4 - STILE VOGUE CON ORO SOTTILE */ .service-item h4 { font-size: 1.9rem; margin: 30px 0 20px; color: var(--black); position: relative; display: inline-block; text-shadow: 0 2px 4px rgba(0,0,0,0.1); opacity: 0; transform: translateY(15px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; font-family: 'Playfair Display', serif; letter-spacing: 1px; } .service-item h4::first-letter { font-size: 2.4rem; font-weight: 700; color: #d4af37; margin-right: 2px; } /* Sottolineatura oro sottile */ .service-item h4::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(90deg, transparent, #d4af37, transparent); transition: width 0.5s ease; } .service-item.visible h4::after { width: 80%; } .service-item.visible h4 { opacity: 1; transform: translateY(0); } /* Stagger delay per le 3 card */ .service-item:nth-child(1).animate h4 { transition-delay: 0.1s; } .service-item:nth-child(2).animate h4 { transition-delay: 0.3s; } .service-item:nth-child(3).animate h4 { transition-delay: 0.5s; } /* Fade up per paragrafi - APPAIONO SUBITO */ .service-item p { font-size: 1.1rem; color: #555; line-height: 1.7; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease-out 0.15s, transform 0.5s ease-out 0.15s; } .service-item.visible p { opacity: 1; transform: translateY(0); } /* Stagger SINCRONIZZATO per card 2 e 3 */ .service-item:nth-child(1).animate h4 { animation-delay: 1.8s, 1.8s; /* Card 1 inizia prima */ } .service-item:nth-child(1).animate p { animation-delay: 3.5s; } .service-item:nth-child(2).animate h4 { animation-delay: 2.0s, 2.0s; /* Card 2 segue */ } .service-item:nth-child(2).animate p { animation-delay: 3.7s; } .service-item:nth-child(3).animate h4 { animation-delay: 2.2s, 2.2s; /* Card 3 ultima */ } .service-item:nth-child(3).animate p { animation-delay: 3.9s; } /* Card visibilità iniziale */ .service-item { opacity: 0; transform: rotateY(0) translateZ(0) translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .service-item.visible { opacity: 1; transform: rotateY(0) translateZ(0) translateY(0); } /* Fix: assicura che le card siano visibili */ .reveal.in-view .service-item { opacity: 1; transform: rotateY(0) translateZ(0); } /* Stagger ingresso card */ .service-item:nth-child(1) { transition-delay: 0.1s; } .service-item:nth-child(2) { transition-delay: 0.25s; } .service-item:nth-child(3) { transition-delay: 0.4s; } /* Rimuovi rotazione icona esistente */ .service-item .icon svg { animation: none !important; max-width: 60%; max-height: 60%; position: relative; z-index: 1; } /* Service items con effetti morfici - HOVER RIMOSSO */ .service-item{ width:340px;min-height:500px;padding:40px 30px; background:linear-gradient(145deg,rgba(255,255,255,0.9),rgba(248,248,248,0.9)); backdrop-filter: blur(20px); border:2px solid transparent;border-radius:25px; display:flex;flex-direction:column;align-items:center;text-align:center; transform:rotateY(90deg) translateZ(50px); transition:all 1s cubic-bezier(0.23, 1, 0.32, 1); box-shadow:0 20px 60px rgba(0,0,0,.08); position:relative;overflow:hidden; } /* Morphing background effect - DISABILITATO */ /* v2: il layer è permanentemente opacity:0 (nessuna regola lo rivela), quindi il pan background-position (morphingGradient) non produce alcun output visibile: rimosso per eliminare il repaint per-frame. Resa visiva identica (layer invisibile). */ .service-item:before{ content:'';position:absolute;inset:-2px; background:linear-gradient(45deg, rgba(212,175,55,0.1) 0%, rgba(212,175,55,0.2) 25%, rgba(212,175,55,0.1) 50%, rgba(212,175,55,0.3) 75%, rgba(212,175,55,0.1) 100%); border-radius:25px;opacity:0; transition:opacity .6s ease; z-index: -1; } /* Reveal animations staggered */ .reveal.in-view .service-item{transform:rotateY(0) translateZ(0)} .service-item:nth-child(1){transition-delay:.2s} .service-item:nth-child(2){transition-delay:.4s} .service-item:nth-child(3){transition-delay:.6s} /* Icon con effetti originali ripristinati - HOVER RIDOTTO */ .icon{ margin-bottom:25px;width:130px;height:130px; display:flex;justify-content:center;align-items:center; background:linear-gradient(135deg,var(--gold-soft),var(--gold)); border-radius:50%;position:relative; transition:transform .3s; } .icon:before{ content:'';position:absolute;inset:4px; background:#fff; border-radius:50%; } /* Hover iconico ridotto - ROTAZIONE RIMOSSA */ .service-item:hover .icon{ transform: scale(1.05); } /* SVG senza animazione spin */ .icon svg{ max-width:60%;max-height:60%;position:relative;z-index:1; } .icon svg *{ stroke:var(--gold);fill:none;stroke-width:15; } /* Typography con effetti molto ridotti */ .service-item h4{ font-size:1.9rem;margin:30px 0 20px;color:var(--black); transition:all .3s ease;position:relative; text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .service-item p{ font-size:1.1rem;color:#555;line-height:1.7; transition: all .3s ease; } /* ---------- NUOVA SEZIONE IL NOSTRO PROCESSO ---------- */ #process { background: linear-gradient(180deg, #fafafa 0%, #fff 100%); padding: 120px 6vw 140px; /* Padding bottom aumentato */ position: relative; overflow: hidden; z-index: 2; /* Z-index basso per evitare conflitti */ box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Shadow sottile per separazione */ } /* Separatore dopo process */ #process::after{ content:''; position:absolute; bottom:0; left:5%; width:90%; height:1px; /* Sottile come gli altri */ background:linear-gradient(90deg, transparent, rgba(212,175,55,0.5), rgba(212,175,55,0.6), rgba(212,175,55,0.5), transparent); pointer-events:none; z-index:100; /* Alto per essere sempre visibile */ box-shadow: 0 1px 2px rgba(212,175,55,0.2); /* Leggera ombra per maggiore visibilità */ } .process-container { max-width: 1200px; margin: 0 auto; } .process-timeline { position: relative; padding: 80px 0; } /* Linea centrale */ .process-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, transparent, var(--gold), transparent); transform: translateX(-50%); } /* Step del processo */ .process-step { position: relative; margin-bottom: 100px; display: flex; align-items: center; opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .process-step.in-view { opacity: 1; transform: translateY(0); } .process-step:nth-child(even) { flex-direction: row-reverse; } .process-content { flex: 1; padding: 40px; background: rgba(255,255,255,0.9); border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); border: 2px solid rgba(212,175,55,0.2); position: relative; transition: all 0.3s ease; } .process-content:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(212,175,55,0.2); border-color: var(--gold); } .process-content h3 { font-size: 2rem; color: var(--black); margin-bottom: 15px; font-family: 'Bebas Neue', sans-serif; } .process-content h4 { font-size: 1.2rem; color: var(--gold); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; } .process-content p { color: #666; line-height: 1.8; margin-bottom: 25px; } .process-features { list-style: none; padding: 0; } .process-features li { padding: 8px 0; color: #555; position: relative; padding-left: 30px; } .process-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: bold; font-size: 1.2rem; }

Richiedi il tuo preventivo gratuito sul servizio indicato

Ogni dettaglio conta. Ogni progetto è unico.

In Lux Lab, trasformiamo le tue idee in realtà straordinarie. Ogni richiesta viene analizzata con cura maniacale, perché crediamo che l'eccellenza nasca dall'attenzione ai minimi particolari. Il tuo progetto merita il massimo.

Risponderemo entro 24 ore con un preventivo personalizzato

/* SERVIZI SLIDER STYLES con padding top corretto */ #work { background: transparent; overflow: hidden; position: relative; padding: 160px 6vw 120px; min-height: 100vh; z-index: 3; } #work .sec-title { position: relative; z-index: 10; } #work * { box-sizing: border-box; margin: 0; padding: 0; } #work .app__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -5; filter: blur(8px); pointer-events: none; user-select: none; } #work .app__bg__image { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateX(var(--image-translate-offset, 0)); width: 180%; height: 100%; transition: transform 1s ease, opacity 1s ease; } #work .app__bg__image img { width: 100%; height: 100%; object-fit: cover; } #work .app__bg__image.current--image { opacity: 1; --image-translate-offset: 0; } #work .app__bg__image.hidden--image { opacity: 0; } /* Pulsing animation for arrows */ /* Slider Cards con animazioni spettacolari */ #work .card_list { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 900px; height: 420px; } /* Frecce - Contorno oro, riempimento scuro, click oro */ #work .card_list_btn { width: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(30, 30, 30, 0.9); border: 2px solid var(--gold); border-radius: 50%; cursor: pointer; z-index: 10; backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(0,0,0,0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #work .card_list_btn:hover { transform: translateY(-50%) scale(1.1); background: rgba(40, 40, 40, 0.95); box-shadow: 0 12px 35px rgba(212,175,55,0.3); border-color: var(--gold-bright); } #work .card_list_btn:active { transform: translateY(-50%) scale(0.95); background: linear-gradient(135deg, var(--gold), var(--gold-soft)); border-color: var(--gold-bright); box-shadow: 0 8px 30px rgba(212,175,55,0.6); } #work .card_list_btn.btn_left { left: -80px; } #work .card_list_btn.btn_right { right: -80px; } #work .card_list_btn svg { width: 60%; height: 60%; stroke: var(--gold); stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); transition: stroke 0.3s ease; } #work .card_list_btn:active svg { stroke: #000; } /* buttonFloat RIMOSSO */ #work .cards_wrapper { position: relative; width: 100%; height: 100%; perspective: 1500px; transform-style: preserve-3d; } /* Card con animazioni cinematiche */ #work .card { --card-translateY-offset: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset)) rotateX(var(--card-rotateX-offset, 0deg)) scale(var(--card-scale-offset)); width: 350px; height: 450px; transition: all 1s cubic-bezier(0.23, 1, 0.32, 1); user-select: none; overflow: hidden; border-radius: 20px; background: linear-gradient(145deg, #111, #000); box-shadow: 0 25px 60px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15); } /* Card glow effect */ #work .card::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(45deg, transparent 0%, rgba(212,175,55,0.1) 25%, rgba(212,175,55,0.3) 50%, rgba(212,175,55,0.1) 75%, transparent 100%); border-radius: 20px; opacity: 0; transition: opacity 0.6s ease; z-index: -1; /* animation: borderGlow 3s ease-in-out infinite; */ } /* Nessun hover per le altre card */ #work .card.next--card:hover, #work .card.previous--card:hover, #work .card.hidden--card:hover { transform: translate(-50%, -50%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset)) rotateX(var(--card-rotateX-offset, 0deg)) scale(var(--card-scale-offset)) !important; } /* Hover card centrale = riduce opacità overlay (più luminosa) */ #work .card.current--card:hover { box-shadow: 0 40px 80px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.3); } #work .card.current--card:hover .card__image::before { opacity: 0.1 !important; } #work .card:hover::before { opacity: 1; } /* LAYOUT DESKTOP/TABLET: Carosello classico con 3 card visibili */ #work .card.hidden--card { opacity: 0; pointer-events: none; --card-translateX-offset: 150%; --card-rotation-offset: 45deg; --card-scale-offset: 0.6; --card-rotateX-offset: 30deg; z-index: 1; } #work .card.current--card { --card-translateX-offset: 0; --card-rotation-offset: 0deg; --card-scale-offset: 1.1; --card-rotateX-offset: 0deg; opacity: 1; z-index: 10; animation-delay: 0s; } #work .card.next--card { --card-translateX-offset: 420px; --card-rotation-offset: -25deg; --card-scale-offset: 0.9; --card-rotateX-offset: 10deg; opacity: 0.8; z-index: 5; animation-delay: 0.1s; } #work .card.previous--card { --card-translateX-offset: -420px; --card-rotation-offset: 25deg; --card-scale-offset: 0.9; --card-rotateX-offset: 10deg; opacity: 0.8; z-index: 5; animation-delay: 0.1s; } #work .card__image { width: 100%; height: 75%; overflow: hidden; position: relative; } #work .card__image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 0%, rgba(212,175,55,0.1) 30%, transparent 70%); opacity: 0; transition: opacity 0.5s ease; z-index: 2; } /* Effetti immagine SOLO sulla card centrale */ #work .card.current--card:hover .card__image::before { opacity: 1; } #work .card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); filter: brightness(0.9) contrast(1.1); } /* FIX iOS - Immagini card carosello */ #work .card__image img { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; } @supports (-webkit-touch-callout: none) { #work .card__image img { transform: translate3d(0, 0, 0); will-change: transform; } } /* Animazione immagine SOLO sulla card centrale */ #work .card.current--card:hover .card__image img { transform: scale(1.1) rotate(2deg); filter: brightness(1) contrast(1.2); } /* FRASE SORPRESA - Divertente */ .card__surprise { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 1px; color: rgba(212, 175, 55, 0.9); text-transform: uppercase; margin-top: 8px; opacity: 0.85; white-space: nowrap; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); } @media (max-width: 768px) { .card__surprise { font-size: 0.6rem; letter-spacing: 0.5px; white-space: nowrap; } } #work .card__caption { padding: 20px 15px; text-align: center; /* OVERLAY PROSPETTICO - Gradiente che crea profondità 3D */ background: linear-gradient( 180deg, rgba(0, 0, 0, 0.95) 0%, /* Top: nero intenso */ rgba(15, 15, 15, 0.98) 20%, /* Transizione */ rgba(20, 20, 20, 1) 50%, /* Centro solido */ rgba(10, 10, 10, 1) 100% /* Bottom: leggermente più scuro */ ); color: #fff; height: 25%; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; /* Effetto "emergere" dallo sfondo */ box-shadow: inset 0 10px 30px -10px rgba(212, 175, 55, 0.15), inset 0 -5px 20px -5px rgba(0, 0, 0, 0.8); /* Bordo superiore oro sottile */ border-top: 1px solid rgba(212, 175, 55, 0.3); } /* Effetto profondità extra */ #work .card__caption::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient( 180deg, rgba(212, 175, 55, 0.08) 0%, transparent 100% ); pointer-events: none; } #work .card__caption::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: left 0.8s ease; } /* Effetto caption SOLO sulla card centrale */ #work .card.current--card:hover .card__caption::before { left: 100%; } /* FRASE SORPRESA - Divertente */ .card__surprise { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 1px; color: rgba(212, 175, 55, 0.9); text-transform: uppercase; margin-top: 8px; opacity: 0.85; white-space: nowrap; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); } @media (max-width: 768px) { .card__surprise { font-size: 0.55rem; letter-spacing: 0.5px; white-space: nowrap; } } #work .card__caption .name { font-size: 1.3rem; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; color: var(--gold); line-height: 1.3; letter-spacing: 1px; /* Testo che EMERGE con ombre multiple */ text-shadow: 0 0 10px rgba(212, 175, 55, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 15px rgba(212, 175, 55, 0.4); position: relative; z-index: 2; } #work .card__caption .description { font-size: 1.05rem; font-weight: 500; line-height: 1.5; color: #f0f0f0; /* Più luminoso */ white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* Contrasto migliorato */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5); position: relative; z-index: 2; letter-spacing: 0.3px; } @media only screen and (min-width: 800px) { #work .card { width: 380px; height: 480px; } #work .card_list { width: 1050px; height: 500px; } /* Posizioni specifiche per desktop - 3 card visibili */ #work .card.next--card { --card-translateX-offset: 420px; --card-rotation-offset: -25deg; --card-scale-offset: 0.9; --card-rotateX-offset: 10deg; opacity: 0.8; } #work .card.previous--card { --card-translateX-offset: -420px; --card-rotation-offset: 25deg; --card-scale-offset: 0.9; --card-rotateX-offset: 10deg; opacity: 0.8; } } /* Contatore Luxury con frase */ #work .slider-counter { position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 10; } #work .slider-counter .counter-text { display: flex; align-items: baseline; gap: 4px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; } #work .slider-counter .current-slide { color: var(--gold); font-size: 2.2rem; font-weight: 700; text-shadow: 0 0 20px rgba(212,175,55,0.6); transition: all 0.4s ease; } #work .slider-counter .separator { color: rgba(255,255,255,0.3); font-size: 1.4rem; margin: 0 2px; } #work .slider-counter .total-slides { color: rgba(255,255,255,0.5); font-size: 1.4rem; } #work .slider-counter .luxury-tagline { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; color: rgba(255,255,255,0.75); letter-spacing: 2px; text-transform: uppercase; position: relative; white-space: nowrap; display: inline-flex; align-items: center; flex-shrink: 0; text-shadow: 0 0 8px rgba(255,255,255,0.0342), 0 0 15px rgba(0,0,0,0.0342), 0 1px 2px rgba(0,0,0,0.5); } #work .slider-counter .luxury-tagline::before, #work .slider-counter .luxury-tagline::after { content: '—'; color: var(--gold); opacity: 0.5; margin: 0 12px; flex-shrink: 0; } /* Nascondi dots su mobile */ @media only screen and (max-width: 768px) { #work .slider-dots { display: none !important; } #work .slider-counter { bottom: -25px; width: 100%; max-width: 100%; padding: 0 10px; } #work .slider-counter .current-slide { font-size: 2.5rem; text-shadow: 0 0 25px rgba(212,175,55,0.8); } #work .slider-counter .counter-text { transform: translateY(-10px); } #work .slider-counter .luxury-tagline { font-size: 0.65rem; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90vw; } #work .slider-counter .luxury-tagline::before, #work .slider-counter .luxury-tagline::after { margin: 0 6px; } } #work .slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: 2px solid rgba(212, 175, 55, 0.5); cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } #work .slider-dot::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(45deg, rgba(212,175,55,0.8), rgba(212,175,55,0.4), rgba(212,175,55,0.8)); border-radius: 50%; opacity: 0; transform: scale(0); transition: all 0.3s ease; } #work .slider-dot:hover { transform: scale(1.2); background: rgba(255, 255, 255, 0.6); border-color: rgba(212, 175, 55, 0.8); box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); } #work .slider-dot:hover::before { opacity: 1; transform: scale(1); } #work .slider-dot.active { background: var(--gold); border-color: rgba(255, 255, 255, 0.8); /* v2 ECCEZIONE documentata: il glow è un box-shadow OUTSET sul dot stesso; il dot ha overflow:hidden (serve per la ring ::before), quindi un layer figlio ::after con box-shadow verrebbe clippato e il glow sparirebbe. Nessun equivalente compositor pulito senza alterare la ring. Elemento 12px, solo il dot attivo pulsa -> paint trascurabile. Si mantiene il box-shadow+scale originale. */ transform: scale(1.3); box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); animation: dotPulse 2s ease-in-out infinite; } /* OTTIMIZZAZIONI MOBILE */ @media only screen and (max-width: 768px) { /* Sezioni generali */ section { padding: 80px 4vw; min-height: auto; } /* Sezione servizi più alta per mobile */ #work { min-height: 110vh; /* Ridotto da 120vh */ padding: 120px 4vw 80px; /* Aumentato padding top da 100px a 120px */ margin-bottom: 80px; } /* Titolo sezione con più spazio */ #work .sec-title { margin-top: 7vh; margin: 0 auto 100px; text-align: center; font-size: clamp(2.2rem, 8vw, 3.2rem); width: fit-content; } /* Navbar mobile ottimizzata */ nav { height: 70px; } nav .logo-left { top: 35px; } nav .logo-left img { height: 93px; } nav li { padding: 6px 12px; margin: 0 -8px; } nav li::after { left: 12px; width: calc(100% - 24px); } .hamburger { right: 20px; top: 38px; /* Leggermente più in basso */ z-index: 1202; position: fixed; width: 44px; /* Area più grande */ height: 44px; /* Area più grande */ padding: 10px; /* Padding maggiore */ } /* Language switcher spostato più a sinistra per evitare conflitti */ .lang-switcher { right: 80px; top: 35px; transform: translateY(-50%); gap: 6px; } .lang-switcher img { width: 26px; height: 19px; } /* Hero ottimizzazioni */ #hero .content { transform: scale(0.85) !important; } /* Logo hero mobile ABBASSATO DEL 33% */ .hero-logo-container { top: 23% !important; /* Era 12%, ora 23% */ } .hero-logo { width: 240px; } /* Chi Siamo mobile ottimizzato */ .service-container { gap: 25px; padding: 0 15px; } .service-item { width: 100%; max-width: 350px; min-height: 380px; padding: 25px 20px; transform: translateY(30px); transition: all 0.6s ease; overflow: visible; } .reveal.in-view .service-item { transform: translateY(0); opacity: 1; } .icon { width: 100px; height: 100px; margin-bottom: 20px; } /* FIX: SVG sempre visibile su mobile */ .icon svg { opacity: 1 !important; visibility: visible !important; max-width: 55%; max-height: 55%; } .service-item h4 { font-size: 1.5rem; margin: 20px 0 15px; } .service-item p { font-size: 0.95rem; line-height: 1.6; } /* Sezione servizi PIÙ ALTA per mobile - Migliore leggibilità con padding corretto */ #work { min-height: 120vh; /* Ottimizzato per mobile senza dots */ padding: 130px 4vw 80px; /* Aumentato padding top da 110px a 130px */ } /* Titolo sezione con più spazio */ #work .sec-title { margin: 0 auto 120px; text-align: center; font-size: clamp(2.2rem, 8vw, 3.2rem); width: fit-content; } /* Carosello servizi mobile - UNA card visibile con layout ottimizzato */ #work .card_list { width: 100vw; height: 560px; transform: translate(-50%, -50%); padding: 0 20px; top: 52%; /* Ridotto da 55% a 52% per centrare meglio senza dots */ } #work .card { width: calc(100vw - 80px); max-width: 360px; height: 500px; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.4); } /* FIX MOBILE - Blocca click indesiderati su carosello */ #work .card_list { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* ========== FIX MOBILE CAROSELLO SERVIZI ========== */ /* CRITICO: Disabilita 3D che causa spostamento immagini */ #work .cards_wrapper { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; perspective: none !important; transform-style: flat !important; } #work .card a, #work .card_list a { pointer-events: none; } /* CRITICO: Transform semplificato SENZA rotazioni 3D */ #work .card { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%) translateX(var(--card-translateX-offset, 0)) scale(var(--card-scale-offset, 1)) !important; } #work .card.current--card { z-index: 15; } /* FIX: Immagini centrate correttamente */ #work .card__image img { object-position: center center !important; -webkit-transform: translateZ(0); transform: translateZ(0); } /* LAYOUT MOBILE: Solo card corrente visibile - SENZA ROTAZIONI 3D */ #work .card.current--card { --card-translateX-offset: 0; --card-scale-offset: 1; opacity: 1; z-index: 10; } #work .card.hidden--card { --card-translateX-offset: 120%; --card-scale-offset: 0.7; opacity: 0; z-index: 1; pointer-events: none; } /* Override delle classi desktop per mobile - SENZA ROTAZIONI 3D */ #work .card.next--card { --card-translateX-offset: 120%; --card-scale-offset: 0.7; opacity: 0; z-index: 1; pointer-events: none; } #work .card.previous--card { --card-translateX-offset: -120%; --card-scale-offset: 0.7; opacity: 0; z-index: 1; pointer-events: none; } /* Frecce mobile STILE NETFLIX - pulite e minimal - FIX Z-INDEX */ #work .card_list_btn { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 50px !important; height: 50px !important; background: rgba(0, 0, 0, 0.7) !important; border: 2px solid rgba(212, 175, 55, 0.5) !important; border-radius: 50% !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; outline: none !important; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; z-index: 100 !important; } #work .card_list_btn:active { background: rgba(212, 175, 55, 0.3); transform: translateY(-50%) scale(0.95); } #work .card_list_btn:focus, #work .card_list_btn:focus-visible { outline: none; box-shadow: none; border: none; } #work .card_list_btn svg { width: 24px; height: 24px; stroke: #ffffff; stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } #work .card_list_btn.btn_left { left: 5px !important; z-index: 100 !important; } #work .card_list_btn.btn_right { right: 5px !important; z-index: 100 !important; } /* Area immagine mobile ottimizzata - FIX immagini tagliate */ #work .card__image { height: 65%; width: 100%; overflow: hidden; } #work .card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } #work .card__caption { height: 35%; } /* Testo mobile MIGLIORATO - più leggibile */ #work .card__caption { padding: 25px 20px; background: linear-gradient(135deg, #000, #1a1a1a, #000); height: 30%; display: flex; flex-direction: column; justify-content: center; } #work .card__caption .name { font-size: 1.4rem; margin-bottom: 12px; color: var(--gold); line-height: 1.2; text-shadow: 0 2px 8px rgba(212,175,55,0.6); } #work .card__caption .description { font-size: 1.15rem; line-height: 1.4; color: #ffffff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Indicatori dots mobile premium - NASCOSTI SU MOBILE */ #work .slider-dots { display: none !important; /* Nascosti su mobile */ } /* VIP SECTION INGRANDITA MOBILE */ #vip { background:linear-gradient(135deg,#fafafa,#fff); display:flex; align-items:center; justify-content:center; padding: 0; /* Rimosso il padding */ min-height: 100vh; /* Altezza piena viewport */ position: relative; /* Per l'iframe absolute */ overflow: hidden; /* Contiene l'iframe */ } /* =============== MOBILE VIP COMPLETO =============== */ .mobile-menu-list li[data-link="vip"] { background: linear-gradient(135deg, var(--luxury-green) 0%, var(--luxury-green-light) 100%) !important; /* TEXTURE MOBILE SEMPLIFICATA */ background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12) 0%, transparent 60%), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.08) 0%, transparent 50%), repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, transparent 2px, transparent 8px, rgba(255,255,255,0.015) 10px); color: white !important; font-weight: 600; text-align: center; margin: 12px 0; position: relative; overflow: hidden; padding: 18px 25px; border-radius: 28px; border: 1px solid rgba(255,255,255,0.12); /* SHADOWS MOBILE */ box-shadow: 0 4px 12px rgba(53, 94, 59, 0.3), inset 0 1px 0 rgba(255,255,255,0.15); /* SOLO PULSE AUTONOMO SU MOBILE - NIENTE SHIMMER */ animation: vipTextPulse 2.5s ease-in-out infinite; transition: all 0.3s ease; } .mobile-menu-list li[data-link="vip"]:hover { background: linear-gradient(135deg, var(--luxury-green-light) 0%, var(--luxury-green-bright) 100%) !important; transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 18px rgba(53, 94, 59, 0.4), 0 0 20px rgba(95, 155, 111, 0.2), inset 0 1px 0 rgba(255,255,255,0.2); } .mobile-menu-list li[data-link="vip"]:active { transform: translateY(0px) scale(0.98); box-shadow: 0 2px 8px rgba(53, 94, 59, 0.5), inset 0 2px 4px rgba(0,0,0,0.1); } } /* Sezione Dove responsive */ #dove { padding: 80px 4vw; min-height: 100vh; opacity: 1 !important; transform: none !important; } #dove .cities-container { height: calc(100vh - 200px); min-height: 500px; } /* Contatti - MOBILE FIX */ #contact .inner { gap: 30px; padding: 20px 15px; } .info-cards { flex-direction: column; gap: 15px; width: 100%; } .info { min-width: 100%; max-width: 100%; padding: 20px; flex-direction: column; text-align: center; } .info i { margin-bottom: 10px; } .map-wrap { min-height: 250px; margin-bottom: 25px; } #contact h2.sec-title { font-size: 2rem; margin-bottom: 20px; } /* Box preventivo mobile */ #contact > .inner > div[style*="text-align: center"] { padding: 30px 15px !important; } #contact > .inner > div[style*="text-align: center"] h3 { font-size: 1.5rem !important; } #contact > .inner > div[style*="text-align: center"] p { font-size: 1rem !important; } /* Footer ottimizzato mobile */ footer { padding: 40px 4vw 30px; } .footer-links { gap: 25px; display: none !important; /* Nascondi i link teleport su mobile */ } .footer-logo { height: 60px; } /* Mostra solo copyright su mobile */ .footer-bottom { font-size: 0.8rem; } /* Processo mobile */ #process { padding: 80px 4vw 100px; } /* Padding bottom aumentato */ .process-timeline::before { display: none; } .process-step { margin-bottom: 60px; flex-direction: column !important; } .process-content { padding: 30px 20px; } /* Fix per titolo preventivo lungo su mobile */ #process h2[data-it*="servizio indicato"] { font-size: 1.8rem !important; letter-spacing: 1px !important; line-height: 1.3 !important; } /* Quote box responsive */ .quote-box { padding: 50px 20px !important; margin: 60px auto 30px !important; } /* MOBILE VIP - SOLO PULSE, NO SHIMMER */ .mobile-menu-list li[data-link="vip"] { background: linear-gradient(135deg, var(--luxury-green) 0%, var(--luxury-green-light) 100%) !important; color: white !important; font-weight: 600; text-align: center; margin: 8px 0; position: relative; overflow: hidden; padding: 15px 20px; border-radius: 25px; border: 1px solid rgba(255,255,255,0.1); /* SOLO PULSE AUTONOMO SU MOBILE - NIENTE SHIMMER */ animation: vipTextPulse 2.5s ease-in-out infinite; } } @media only screen and (max-width: 480px) { /* Dispositivi molto piccoli */ section { padding: 60px 3vw; } /* Sezione servizi ancora più alta per telefoni piccoli */ #work { min-height: 110vh; /* Ridotto da 130vh */ padding: 80px 3vw 60px; /* Ridotto padding */ margin-bottom: 80px; } /* Titolo ancora più prominente */ #work .sec-title { margin: 0 auto 80px; font-size: clamp(2rem, 9vw, 2.8rem); width: fit-content; text-align: center; } /* Hero ancora più piccolo */ #hero .content { transform: scale(0.65) !important; } /* Logo hero telefoni piccoli ABBASSATO DEL 33% */ .hero-logo-container { top: 23% !important; /* Era 12%, ora 23% */ } .hero-logo { width: 200px; } /* Navbar per telefoni molto piccoli - Language switcher nascosto */ .lang-switcher { display: none !important; } .hamburger { right: 15px; top: 40px; /* Spostato più in basso */ z-index: 1202; position: fixed; width: 42px; /* Area clic più grande */ height: 42px; /* Area clic più grande */ padding: 8px; /* Padding aumentato per area clic */ } /* Mostra language switcher nel mobile panel */ .mobile-lang-switcher { display: flex !important; } /* Mobile panel ottimizzato e fixato */ .mobile-panel { top: 70px; height: calc(100vh - 70px); padding: 0 0 20px 0; gap: 0; max-height: calc(100vh - 70px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-menu-list li { padding: 22px 30px; font-size: 1.1rem; } /* Chi Siamo */ .service-item { padding: 25px 15px; min-height: 380px; } .service-item h4 { font-size: 1.6rem; } .service-item p { font-size: 1rem; } .icon { width: 100px; height: 100px; } /* Sezione servizi ANCORA PIÙ ALTA per telefoni piccoli con padding corretto */ #work { min-height: 130vh; /* Ottimizzato per mobile piccoli senza dots */ padding: 130px 3vw 60px; /* Aumentato padding top da 110px a 130px */ } /* Titolo ancora più prominente */ #work .sec-title { margin: 0 auto 100px; font-size: clamp(2rem, 9vw, 2.8rem); width: fit-content; text-align: center; } /* Carosello servizi piccolo - Layout ottimizzato */ #work .card_list { height: 540px; padding: 0 15px; top: 50%; } /* CRITICO 480px: Mantieni disabilitato 3D */ #work .cards_wrapper { perspective: none !important; transform-style: flat !important; } #work .card { width: calc(100vw - 60px); max-width: 330px; height: 480px; box-shadow: 0 12px 35px rgba(0,0,0,0.5); transform: translate(-50%, -50%) translateX(var(--card-translateX-offset, 0)) scale(var(--card-scale-offset, 1)) !important; } /* Layout telefoni piccoli - SENZA ROTAZIONI 3D */ #work .card.current--card { --card-translateX-offset: 0; --card-scale-offset: 1; opacity: 1; z-index: 10; } #work .card.hidden--card, #work .card.next--card { --card-translateX-offset: 110%; --card-scale-offset: 0.6; opacity: 0; z-index: 1; pointer-events: none; } #work .card.previous--card { --card-translateX-offset: -110%; --card-scale-offset: 0.6; opacity: 0; z-index: 1; pointer-events: none; } /* Frecce piccole ma MOLTO VICINE */ #work .card_list_btn { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, rgba(212, 175, 55, 1), rgba(212, 175, 55, 0.9)); border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 8px 25px rgba(212,175,55,0.5); } #work .card_list_btn.btn_left { left: 2px; } #work .card_list_btn.btn_right { right: 2px; } /* Area immagine ottimizzata */ #work .card__image { height: 68%; } /* Testo compatto ma MOLTO LEGGIBILE */ #work .card__caption { padding: 22px 15px; height: 32%; background: linear-gradient(135deg, #000, #1a1a1a, #000); } #work .card__caption .name { font-size: 1.3rem; margin-bottom: 10px; text-shadow: 0 2px 6px rgba(212,175,55,0.7); } #work .card__caption .description { font-size: 1.05rem; line-height: 1.3; } /* Indicatori dots ottimizzati per telefoni piccoli - NASCOSTI SU MOBILE */ #work .slider-dots { display: none !important; /* Nascosti su mobile */ } /* VIP SECTION PIÙ GRANDE MOBILE */ #vip { padding: 60px 3vw; min-height: 100vh; /* MOLTO PIÙ GRANDE */ } /* Sezione Dove responsive piccoli dispositivi */ #dove { padding: 60px 3vw; min-height: 100vh; opacity: 1 !important; transform: none !important; } #dove .cities-container { height: calc(100vh - 180px); min-height: 450px; } /* =============== FORM PREMIUM CONTATTI =============== */ .contact-form input, .contact-form textarea, .contact-form select { background: rgba(20, 20, 20, 0.8) !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; border-radius: 12px !important; padding: 16px 20px !important; color: #fff !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; position: relative !important; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none !important; border-color: var(--gold) !important; box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.1), inset 0 0 20px rgba(212, 175, 55, 0.05) !important; background: rgba(30, 30, 30, 0.9) !important; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.4) !important; transition: all 0.3s ease !important; } .contact-form input:focus::placeholder, .contact-form textarea:focus::placeholder { color: rgba(212, 175, 55, 0.6) !important; transform: translateX(10px) !important; } /* Bottone invio premium con shimmer */ .contact-form button, .contact-form input[type="submit"], .btn-submit-contact { background: linear-gradient(135deg, var(--gold) 0%, #f4e168 50%, var(--gold) 100%) !important; background-size: 200% 200% !important; border: none !important; border-radius: 12px !important; padding: 16px 40px !important; color: #000 !important; font-family: 'Playfair Display', serif !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: 2px !important; text-transform: uppercase !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; transition: all 0.4s ease !important; /* v2: il pan del gradiente (shimmerButton, background-position = repaint) passa a un layer ::after z-index:-1 (dietro al testo, sopra lo sfondo) traslato in X. A riposo translateX(0)+bg 0 0 mostra lo stesso crop dello sfondo statico. isolation:isolate crea lo stacking context perché il layer z-index:-1 stia SOPRA lo sfondo del bottone (altrimenti finirebbe dietro e sparirebbe). */ isolation: isolate !important; } .contact-form button::after, .contact-form input[type="submit"]::after, .btn-submit-contact::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 200% !important; background: linear-gradient(135deg, var(--gold) 0%, #f4e168 50%, var(--gold) 100%) !important; background-size: 100% 200% !important; background-position: 0 0 !important; transform: translateX(0) !important; animation: shimmerButton 3s ease-in-out infinite !important; z-index: -1 !important; pointer-events: none !important; } .contact-form button:hover, .contact-form input[type="submit"]:hover, .btn-submit-contact:hover { transform: translateY(-3px) !important; box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4) !important; } .contact-form button::before, .contact-form input[type="submit"]::before, .btn-submit-contact::before { content: '' !important; position: absolute !important; top: 0 !important; /* v2: scia hover left:-100%->100% (layout) -> translateX(-100%)->(100%) (compositor). Elemento a left:0, largo 100%: stessa corsa di 200% width, resa identica. */ left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important; transform: translateX(-100%) !important; transition: transform 0.6s ease !important; } .contact-form button:hover::before, .contact-form input[type="submit"]:hover::before, .btn-submit-contact:hover::before { transform: translateX(100%) !important; } /* Icone contatto animate */ .contact-info i, .contact-icon { color: var(--gold) !important; font-size: 24px !important; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; } .contact-info a:hover i, .contact-item:hover .contact-icon { transform: scale(1.2) rotate(10deg) !important; text-shadow: 0 0 20px rgba(212, 175, 55, 0.8) !important; } /* =============== FOOTER SIGNATURE LUXURY =============== */ footer { position: relative !important; overflow: hidden !important; } /* Logo footer con glow pulsante */ .footer-logo, footer .logo { position: relative !important; animation: logoBreathFooter 4s ease-in-out infinite !important; } /* Social icons premium hover */ .social-icons a, .footer-social a, footer a[href*="instagram"], footer a[href*="facebook"], footer a[href*="linkedin"], footer a[href*="whatsapp"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 45px !important; height: 45px !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; border-radius: 50% !important; color: var(--gold) !important; font-size: 18px !important; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; position: relative !important; overflow: hidden !important; } .social-icons a::before, .footer-social a::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; background: var(--gold) !important; border-radius: 50% !important; transform: translate(-50%, -50%) !important; transition: all 0.4s ease !important; z-index: -1 !important; } .social-icons a:hover, .footer-social a:hover { color: #000 !important; border-color: var(--gold) !important; transform: translateY(-5px) rotate(360deg) !important; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4) !important; } .social-icons a:hover::before, .footer-social a:hover::before { width: 100% !important; height: 100% !important; } /* Citazione Aristotele typewriter */ .footer-quote { opacity: 0; transform: translateY(20px); transition: all 0.8s ease; } .footer-quote.visible { opacity: 1; transform: translateY(0); } .footer-quote p, .aristotle-quote { font-family: 'Playfair Display', serif !important; font-style: italic !important; font-size: 18px !important; color: rgba(212, 175, 55, 0.8) !important; position: relative !important; display: inline-block !important; } .footer-quote p::before, .footer-quote p::after { content: '"' !important; font-size: 40px !important; color: var(--gold) !important; opacity: 0.5 !important; line-height: 1 !important; } /* NASCOSTO DI DEFAULT - SEMPRE */ .back-to-top, #backToTop, .scroll-top-btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; display: none !important; position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: -1 !important; } .back-to-top:not(.visible) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; display: none !important; } /* Torna su button elegante - SOLO quando .visible */ .back-to-top.visible, #scrollToTop.visible, .scroll-top-btn.visible { display: flex !important; position: fixed !important; bottom: 30px !important; right: 30px !important; width: 50px !important; height: 50px !important; background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(40, 40, 40, 0.9)) !important; border: 1px solid var(--gold) !important; border-radius: 50% !important; color: var(--gold) !important; font-size: 20px !important; cursor: pointer !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(20px) !important; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .back-to-top.visible, #scrollToTop.visible, .scroll-top-btn.visible { display: flex !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; position: fixed !important; bottom: 30px !important; right: 30px !important; width: 50px !important; height: 50px !important; background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(40, 40, 40, 0.9)) !important; border: 1px solid var(--gold) !important; border-radius: 50% !important; color: var(--gold) !important; font-size: 20px !important; cursor: pointer !important; z-index: 9999 !important; align-items: center !important; justify-content: center !important; } .back-to-top:hover, #scrollToTop:hover, .scroll-top-btn:hover { background: var(--gold) !important; color: #000 !important; transform: translateY(-5px) scale(1.1) !important; box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5) !important; } .back-to-top::before, #scrollToTop::before, .scroll-top-btn::before { content: '' !important; position: absolute !important; top: -5px !important; left: -5px !important; right: -5px !important; bottom: -5px !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; border-radius: 50% !important; animation: pulseRing 2s ease-out infinite !important; } /* =============== SMOOTH SCROLL + PROGRESS BAR =============== */ html { scroll-behavior: smooth !important; } /* SCROLL PROGRESS BAR - Integrata sotto navbar stondata */ .scroll-progress-bar { position: fixed !important; top: 82px !important; left: 50% !important; transform: translateX(-50%) !important; max-width: 1100px !important; width: 0% !important; height: 3px !important; background: linear-gradient(90deg, var(--gold), #f4e168, var(--gold)) !important; background-size: 200% 100% !important; z-index: 1449 !important; transition: width 0.15s ease-out !important; /* v2: lo shimmer (background-position pan, repaint per-frame) passa a un layer ::before largo 400% con gradiente tiled, traslato di esattamente un tile (translateX, compositor) -> loop senza giunzioni, resa identica al pan ripetuto. */ overflow: hidden !important; box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4) !important; border-radius: 0 0 8px 8px !important; } .scroll-progress-bar::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 400%; background: linear-gradient(90deg, var(--gold), #f4e168, var(--gold)); background-size: 50% 100%; background-repeat: repeat-x; transform: translateX(0); animation: progressShimmer 2s linear infinite; pointer-events: none; } /* Mobile - scroll bar sotto navbar mobile */ @media (max-width: 768px) { .scroll-progress-bar { top: 75px !important; max-width: calc(100% - 40px) !important; border-radius: 0 0 6px 6px !important; } } /* Smooth scroll per tutti i link */ a[href^="#"] { scroll-behavior: smooth !important; } /* Footer */ .footer-links { flex-direction: column; gap: 15px; text-align: center; display: none !important; /* Completamente nascosti su mobile piccoli */ } /* Processo piccoli dispositivi */ #process { padding: 60px 3vw 80px; } /* Padding bottom consistente */ .process-content h3 { font-size: 1.6rem; } /* Fix per titolo preventivo lungo su telefoni piccoli */ #process h2[data-it*="servizio indicato"] { font-size: 1.5rem !important; letter-spacing: 0.5px !important; padding: 0 10px; } /* Quote box piccoli dispositivi */ .quote-box { padding: 40px 15px !important; margin: 50px auto 20px !important; } } /* VIP SECTION - INGRANDITA VERTICALMENTE COME RICHIESTO */ #vip { background:linear-gradient(135deg,#fafafa,#fff); display:flex; align-items:center; justify-content:center; padding:120px 6vw; min-height: 120vh; /* AUMENTATO DA 60vh A 120vh */ } /* DOVE SECTION - Con slider citta */ #dove { background:#000; padding:120px 6vw; min-height: 100vh; position: relative; overflow: hidden; transition: opacity 0.3s ease; } /* Background pattern sottile */ #dove::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 50%, rgba(212,175,55,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(212,175,55,0.1) 0%, transparent 50%); pointer-events: none; z-index: 1; } /* Titolo sezione con colore dorato */ #dove .sec-title { color: var(--gold) !important; text-align: center; margin-bottom: 40px; position: relative; z-index: 2; } /* Container dello slider citta */ #dove .cities-container { position: relative; height: calc(100vh - 300px); min-height: 600px; overflow: hidden; max-width: 1400px; margin: 40px auto 0; z-index: 2; } /* Slider citta */ #dove .cities-slider { position: relative; height: 100%; transform: translate3d(0, 0, 0); z-index: 10; will-change: transform; cursor: all-scroll; user-select: none; } #dove .cities-slider.animation { transition: transform 750ms cubic-bezier(0.4, 0, 0.2, 1); } #dove .cities-slider.animation .city-slide__text, #dove .cities-slider.animation .city-slide__letter { transition: transform 750ms cubic-bezier(0.4, 0, 0.2, 1); } /* Singola slide citta */ #dove .city-slide { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; } /* Posizionamento slide in sequenza */ #dove .city-slide:nth-child(1) { left: 0%; } #dove .city-slide:nth-child(2) { left: 100%; } #dove .city-slide:nth-child(3) { left: 200%; } #dove .city-slide:nth-child(4) { left: 300%; } #dove .city-slide:nth-child(5) { left: 400%; } #dove .city-slide:nth-child(6) { left: 500%; } /* Background delle slide */ #dove .city-slide__darkbg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: translate3d(0, 0, 0); will-change: transform; z-index: 10; background-color: rgba(0,0,0,0.4); background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } #dove .city-slide__darkbg:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%); } /* Overlay griglia dorata per slide 4 e 5 */ #dove .city-slide:nth-child(4) .city-slide__darkbg, #dove .city-slide:nth-child(5) .city-slide__darkbg { background-color: rgba(0,0,0,0.8); } #dove .city-slide:nth-child(4) .city-slide__darkbg:before, #dove .city-slide:nth-child(5) .city-slide__darkbg:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(212,175,55,0.1) 25px), repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(212,175,55,0.1) 25px); } /* Wrapper per testo */ #dove .city-slide__text-wrapper { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 15; } /* Animazione NEON BIANCO + PULSE ORO DIETRO - PIU SCURO */ @keyframes letterWhitePulseGold { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)) drop-shadow(0 0 12px rgba(255,255,255,0.3)) drop-shadow(0 0 25px rgba(139,115,85,0.25)); } 50% { filter: drop-shadow(0 0 7px rgba(255,255,255,0.6)) drop-shadow(0 0 15px rgba(255,255,255,0.4)) drop-shadow(0 0 35px rgba(178,134,11,0.4)); } } /* Abbreviazioni citta con animazione bordo lussuosa */ #dove .city-slide__letter { position: relative; display: flex; align-items: center; justify-content: center; width: 50%; height: 50%; transform: translate3d(0, 0, 0); font-size: 20vw; font-weight: 800; font-family: 'Bebas Neue', sans-serif; user-select: none; /* NEON BIANCO SCURO + ORO DISCRETO */ -webkit-text-stroke: 2px rgba(255,255,255,0.7); filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)) drop-shadow(0 0 12px rgba(255,255,255,0.3)) drop-shadow(0 0 25px rgba(139,115,85,0.3)); animation: letterWhitePulseGold 4s ease-in-out infinite; } #dove .city-slide__letter.clip { -webkit-text-fill-color: transparent !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } /* Hover effect sulle abbreviazioni - NO PULSE */ #dove .city-slide__letter:hover { transform: scale(1.05); transition: transform 0.4s ease; } /* Nomi citta - SOLO ORO FISSO, NIENTE NEON, NIENTE PULSE */ #dove .city-slide__text { font-size: 3.45vw; font-weight: 700; font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: 4px; color: var(--gold); user-select: none; margin-top: 0.8rem; } /* Animazione ORO DELICATO per nomi città (neon FISSO) */ @keyframes cityTextGoldDelicate { 0%, 100% { color: rgba(212,175,55,0.9); opacity: 0.92; } 50% { color: #FFD700; opacity: 1; } } /* Animazione PULSE ORO COSTANTE per diciture città */ @keyframes cityTextGoldPulse { 0%, 100% { color: var(--gold); text-shadow: 0 0 15px rgba(212,175,55,0.5), 0 0 30px rgba(212,175,55,0.3); transform: scale(1); } 50% { color: #FFD700; text-shadow: 0 0 25px rgba(255,215,0,0.8), 0 0 50px rgba(212,175,55,0.5), 0 0 75px rgba(212,175,55,0.3); transform: scale(1.02); } } /* Navigazione citta */ #dove .cities-nav { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); list-style-type: none; z-index: 20; display: flex; gap: 15px; } #dove .cities-nav__slide { position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--gold); cursor: pointer; transition: all 0.3s ease; background: rgba(0,0,0,0.5); } #dove .cities-nav__slide:hover { transform: scale(1.2); border-color: #fff; box-shadow: 0 0 15px rgba(212,175,55,0.6); } #dove .cities-nav__slide:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0,0); width: 75%; height: 75%; border-radius: 50%; background: var(--gold); opacity: 0; transition: all 0.3s ease; } #dove .cities-nav__slide:hover:after, #dove .cities-nav__slide.nav-active:after { transform: translate(-50%, -50%) scale(1,1); opacity: 1; } #dove .cities-nav__slide.nav-active { border-color: #fff; } /* v2: pulse box-shadow del dot attivo -> layer ::before di picco in opacity (compositor). ::after del dot è già usato, quindi si usa ::before. A riposo opacity:0 = nessun glow. */ #dove .cities-nav__slide.nav-active::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 12px rgba(212,175,55,0.5), 0 0 24px rgba(212,175,55,0.25); opacity: 0; pointer-events: none; animation: cityNavGlow 2s ease-in-out infinite; } @keyframes cityNavGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* FIX IMMAGINI CITTÀ CENTRATE - DESKTOP E MOBILE */ #dove .city-slide__darkbg, #dove .city-slide__letter.clip { background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } #dove .city-slide__text-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; } #dove .city-slide__letter { display: flex; align-items: center; justify-content: center; text-align: center; } #dove .city-slide__text { text-align: center; width: 100%; } /* FIX IMMAGINI CARD SERVIZI CENTRATE */ #work .card__image { position: relative; width: 100%; overflow: hidden; } #work .card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* Fix neon mobile - disabilita animazione che si sfasa */ @media (max-width: 768px) { #dove .cities-nav__slide.nav-active { border-color: var(--gold) !important; box-shadow: 0 0 8px rgba(212,175,55,0.4) !important; } /* v2: il pulse glow vive sul layer ::before (opacity); su mobile manteneva 2.5s */ #dove .cities-nav__slide.nav-active::before { animation-duration: 2.5s !important; } #dove .cities-nav__slide { border-width: 1px !important; box-shadow: none !important; } #dove .cities-nav__slide:hover { box-shadow: 0 0 8px rgba(212,175,55,0.4) !important; } #dove .cities-nav__slide:after { display: none !important; } } /* Navigazione laterale citta - SEMPRE VISIBILI */ #dove .cities-side-nav { position: absolute; width: 12%; height: 100%; top: 0; z-index: 50; cursor: pointer; opacity: 0.15; visibility: visible; transition: opacity 0.3s ease; pointer-events: auto !important; } /* Piu visibile su hover */ #dove:hover .cities-side-nav, #dove:focus-within .cities-side-nav { opacity: 0.35; } #dove .cities-side-nav:hover { opacity: 0.6 !important; } #dove .cities-side-nav:active { opacity: 0.8 !important; background-color: rgba(212, 175, 55, 0.3) !important; } /* Click state */ #dove .cities-side-nav:active { opacity: 0.8 !important; background-color: rgba(212, 175, 55, 0.2); } #dove .cities-side-nav--right { right: 0; background: linear-gradient(to left, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.1) 50%, transparent 100%); border-left: 1px solid rgba(212, 175, 55, 0.2); } #dove .cities-side-nav--left { left: 0; background: linear-gradient(to right, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.1) 50%, transparent 100%); border-right: 1px solid rgba(212, 175, 55, 0.2); } /* Frecce indicative sui rettangoli */ #dove .cities-side-nav::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid rgba(212, 175, 55, 0.6); opacity: 0; transition: opacity 0.3s ease; } #dove .cities-side-nav:hover::after { opacity: 1; } #dove .cities-side-nav--right::after { right: 15px; border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); } #dove .cities-side-nav--left::after { left: 15px; border-top: none; border-right: none; transform: translateY(-50%) rotate(45deg); } /* FIX MOBILE - BLOCCA SCROLL QUANDO MENU APERTO */ body.menu-open { overflow: hidden !important; touch-action: none !important; overscroll-behavior: none !important; /* NO position fixed - causa scroll jump. 2026-09-11: tolto anche height:100vh — schiacciava il documento a una viewport e azzerava lo scroll (salto alla hero all'apertura del menu). overflow:hidden su html+body conserva la posizione; su iOS il tocco e' gia' bloccato da touchmove preventDefault in app-4.js. */ } html.menu-open { overflow: hidden !important; touch-action: none !important; } /* Mobile adjustments */ /* ========== FIX CAROSELLO MOBILE - RIGHE 5249-5307 ========== */ @media screen and (max-width: 768px) { #dove { padding: 80px 4vw; } #dove .cities-container { height: calc(100vh - 220px); min-height: 500px; max-height: 600px; margin-top: 20px; position: relative; overflow: hidden; } /* FIX SLIDER MOBILE - Posizionamento corretto */ #dove .cities-slider { position: relative; width: 100%; height: 100%; display: block; } /* FIX SINGOLA SLIDE MOBILE */ #dove .city-slide { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; } /* FIX SFONDO IMMAGINE MOBILE - Centrato e fissato */ #dove .city-slide__darkbg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } /* FIX WRAPPER TESTO MOBILE - Centrato */ #dove .city-slide__text-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 15; } /* FIX LETTERE MOBILE - Dicitura proporzionata (RU, IT, US, etc) */ #dove .city-slide__letter { position: relative; width: auto; height: auto; font-size: 55vw; display: flex; align-items: center; justify-content: center; -webkit-text-stroke: 2px rgba(255,255,255,0.7); will-change: filter; filter: drop-shadow(0 0 15px rgba(255,255,255,0.5)) drop-shadow(0 0 30px rgba(255,255,255,0.3)); background-position: center center !important; background-size: cover !important; margin-bottom: 15px; } /* FIX TESTO CITTÀ MOBILE - EUROPA, RUSSIA, AMERICA - Centrato */ #dove .city-slide__text { position: absolute !important; bottom: 80px !important; left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; font-size: 5vw !important; font-weight: 700 !important; letter-spacing: 4px !important; text-align: center !important; text-transform: uppercase !important; z-index: 20 !important; color: var(--gold) !important; text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 20px rgba(212,175,55,0.4) !important; padding: 0 10px !important; } #dove .cities-nav { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); gap: 12px; z-index: 30; display: flex; justify-content: center; align-items: center; } #dove .cities-nav__slide { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.3); border: 2px solid rgba(212,175,55,0.5); transition: all 0.3s ease; } #dove .cities-nav__slide.active { background: var(--gold); transform: scale(1.2); } #dove .cities-side-nav { display: none; } } @media screen and (max-width: 480px) { #dove { padding: 60px 3vw; } #dove .cities-container { height: calc(100vh - 200px); min-height: 400px; max-height: 550px; } #dove .city-slide__letter { font-size: 65vw; -webkit-text-stroke: 1.5px rgba(255,255,255,0.6); } #dove .city-slide__text { position: absolute !important; bottom: 60px !important; left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; font-size: 4.5vw !important; font-weight: 700 !important; letter-spacing: 3px !important; text-align: center !important; color: var(--gold) !important; padding: 0 10px !important; } #dove .cities-nav { bottom: 20px; gap: 10px; } #dove .cities-nav__slide { width: 12px; height: 12px; } } /* Contact - Lussuoso */ #contact{background:url('/assets/img/migrated/foto-7.jpeg') center/cover;background-attachment:fixed;position:relative} /* FIX iOS Contact */ @supports (-webkit-touch-callout: none) { #contact { background-attachment: scroll; } } #contact:before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.85)} #contact .inner{position:relative;max-width:1200px;margin:auto;display:grid;gap:60px} .info-cards-wrapper{display:flex;justify-content:center;align-items:center;width:100%;margin-bottom:40px;padding:0 20px} .info-cards{display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center;max-width:400px;width:100%;margin:0 auto} .info{width:100%;max-width:350px;margin:0 auto} .info{background:rgba(255,255,255,0.95);border:1px solid rgba(212,175,55,0.3);border-radius:12px;padding:15px 20px;display:inline-flex;align-items:center;gap:12px;text-align:left;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);width:auto;min-width:auto;max-width:280px} .info:hover{transform:translateX(-5px);box-shadow:0 12px 35px rgba(212,175,55,0.2);border-color:rgba(212,175,55,0.4)} .info i{color:var(--gold);font-size:1.8rem} .info strong{color:#1a1a1a;font-size:1.1rem;margin-bottom:5px} .info div{color:#333;font-size:0.95rem;line-height:1.5} .info:hover{transform:none;box-shadow:none} .info i{color:var(--gold);font-size:2.2rem;flex-shrink:0;transition:all 0.3s ease;opacity:0.8} .info:hover i{opacity:0.8;transform:none} .more-brands-info{background:linear-gradient(135deg, #1a1a1a, #0d0d0d);border:1px solid rgba(212,175,55,0.3);border-radius:8px;padding:12px 20px;display:flex;align-items:center;justify-content:center;pointer-events:none;cursor:default;opacity:0.7} .more-brands-info .brand-text{color:var(--gold);font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase} .info > div{flex:1} .info strong{display:block;font-size:0.95rem;margin-bottom:5px;color:#8B7355} @keyframes goldPulse{0%,100%{opacity:0.92;text-shadow:0 0 0 transparent}50%{opacity:1;text-shadow:0 0 8px rgba(139,115,85,0.3)}} .info div:not(.info strong){font-size:0.85rem;line-height:1.4} .info div{color:#1a1a1a;font-size:0.85rem;line-height:1.4} .info a{color:#1a1a1a!important;transition:color 0.3s ease} .info a:hover{color:#8B7355!important} #contact .inner{position:relative;min-height:500px} #contact .map-wrap{position:relative;width:100%;height:450px;margin-bottom:0} #contact .map-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} .map-wrap{width:100%;min-height:350px;border:3px solid var(--gold);border-radius:15px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;color:#999;font-style:italic;margin-bottom:40px} /* Footer lussuoso */ footer{background:#f8f8f8;color:#666;padding:60px 6vw 40px;text-align:center;border-top:1px solid #e0e0e0} .footer-content{max-width:1200px;margin:0 auto} .footer-logo{height:80px;margin-bottom:30px;opacity:.8} .footer-links{display:flex;justify-content:center;gap:40px;margin-bottom:30px;flex-wrap:wrap} .footer-links a{color:#666;text-decoration:none;transition:all .3s ease;font-weight:500;position:relative;padding:5px 10px} .footer-links a:hover{color:var(--gold);transform:translateY(-2px)} .footer-bottom{font-size:.9rem;color:#999} /* Citazione Aristotele */ .footer-bottom p:first-child { text-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease; animation: quoteGlow 3s ease-in-out infinite alternate; } @keyframes quoteGlow { 0% { opacity: 0.85; text-shadow: 0 2px 4px rgba(0,0,0,0.1); } 100% { opacity: 1; text-shadow: 0 0 15px rgba(212,175,55,0.2); } } .footer-bottom p:first-child:hover { color: #f4d03f; text-shadow: 0 0 20px rgba(212,175,55,0.4); transform: scale(1.02); } /* Mobile CTA adjustments */ @media (max-width: 768px) { #navbar { padding: 0 20px; height: 60px; width: calc(100% - 20px); } .cta-banner h2 { font-size: 2.2rem; line-height: 1.3; } .cta-banner p { font-size: 1.2rem; } } /* =============================================== MYSTERY SECTION CONTAINER =============================================== */ /* SFONDO NERO MYSTERY BOX */ .mystery-section { background: #000 !important; background-color: #000 !important; position: relative; overflow: hidden; padding: 80px 20px; min-height: 100vh; } #mystery-box { background: #000 !important; background-color: #000 !important; } section[data-bg="dark"]#mystery-box { background: #000 !important; } .mystery-section.fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow-y: auto; padding-top: 70px; background: #000; } /* =============================================== MYSTERY BOX - SFONDO ANIMATO PUNTI E STELLE =============================================== */ .floating-questions { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 1; } .question-mark { position: absolute; bottom: -50px; color: rgba(212, 175, 55, 0.12); font-family: 'Playfair Display', serif; font-weight: bold; animation: floatUpQuestion 15s linear infinite; filter: blur(1.5px); text-shadow: 0 0 15px rgba(212, 175, 55, 0.25); } .floating-star { position: absolute; bottom: -30px; color: rgba(212, 175, 55, 0.18); animation: floatUpStar 18s linear infinite; filter: blur(1px); text-shadow: 0 0 12px rgba(212, 175, 55, 0.35); } .sparkle-dot { position: absolute; bottom: -20px; background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent); border-radius: 50%; animation: floatUpSparkle 20s linear infinite; filter: blur(2.5px); } @keyframes floatUpQuestion { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 5% { opacity: 0.5; } 95% { opacity: 0.5; } 100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; } } @keyframes floatUpStar { 0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0; } 5% { opacity: 0.6; } 50% { transform: translateY(-50vh) scale(1.3) rotate(180deg); } 95% { opacity: 0.6; } 100% { transform: translateY(-100vh) scale(1) rotate(360deg); opacity: 0; } } @keyframes floatUpSparkle { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 5% { opacity: 0.7; } 50% { transform: translateY(-50vh) scale(1.2); } 95% { opacity: 0.7; } 100% { transform: translateY(-100vh) scale(0.8); opacity: 0; } } /* =============================================== TOP BAR =============================================== */ .mystery-topbar { position: sticky; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212, 175, 55, 0.25); display: flex; justify-content: flex-start; align-items: center; padding: 15px 30px; gap: 20px; } /* FULLSCREEN: Topbar fissa che copre TUTTA la larghezza in alto */ .mystery-section.fullscreen .mystery-topbar { position: fixed; top: 0; left: 0; right: 0; width: 100vw; height: 70px; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 10000; padding: 15px 30px; } /* Mostra topbar solo quando mystery è in vista */ .mystery-section.in-view .mystery-topbar { display: flex; } .topbar-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: transparent; border: 1px solid rgba(212, 175, 55, 0.3); color: #d4af37; font-size: 12px; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; } .topbar-btn:hover { background: rgba(212, 175, 55, 0.1); border-color: #d4af37; } /* PULSANTE FULLSCREEN - PULSE ORO */ /* v2: il pulse del box-shadow (blur 15->30px, repaint) passa a un layer ::after di picco in opacity (compositor). Il border-color (NON vietato, paint economico) resta animato sull'elemento. A riposo ::after opacity:0 -> resta solo il box-shadow base = identico. */ .fullscreen-btn { position: relative; border: 2px solid #d4af37; animation: pulseGoldBorder 2s ease-in-out infinite; box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); } .fullscreen-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 30px rgba(212, 175, 55, 0.6), 0 0 50px rgba(212, 175, 55, 0.3); opacity: 0; pointer-events: none; animation: pulseGoldGlow 2s ease-in-out infinite; } .fullscreen-btn:hover { background: rgba(212, 175, 55, 0.2); box-shadow: 0 0 25px rgba(212, 175, 55, 0.5); } @keyframes pulseGoldBorder { 0%, 100% { border-color: #d4af37; } 50% { border-color: #FFD700; } } @keyframes pulseGoldGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* QUANDO IN FULLSCREEN: Smette di pulsare */ .mystery-section.fullscreen .fullscreen-btn { animation: none; box-shadow: none; border: 1px solid rgba(212, 175, 55, 0.4); } .mystery-section.fullscreen .fullscreen-btn::after { animation: none; box-shadow: none; opacity: 0; } /* PULSANTE NUOVA MYSTERY - Appare dopo pagamento */ /* v2: pulse box-shadow -> layer ::after di picco in opacity (compositor). */ .new-order-btn { position: relative; border: 2px solid #d4af37; background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05)); color: #d4af37; font-weight: 600; } .new-order-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 20px rgba(212, 175, 55, 0.5), 0 0 30px rgba(212, 175, 55, 0.2); opacity: 0; pointer-events: none; animation: pulseNewOrder 2s ease-in-out infinite; } .new-order-btn:hover { background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.15)); transform: scale(1.05); } @keyframes pulseNewOrder { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* MYSTERY BOX - ISOLAMENTO STEP */ .mystery-section.step-active .mystery-header { display: none; } .mystery-section.step-active .gender-section { display: none; } .mystery-section.step-active .gender-section.current-step { display: block !important; } .mystery-section.step-active .mode-section { display: none; } .mystery-section.step-active .mode-section.current-step { display: block !important; } .mystery-section.step-active .cards-section { display: none; } .mystery-section.step-active .cards-section.current-step { display: block !important; } /* MOBILE: Scroll lento/duro */ @media (max-width: 768px) { .mystery-content { scroll-behavior: smooth; } .mystery-section.step-active .mystery-content { overflow-y: auto; scroll-snap-type: y mandatory; } .mystery-section .gender-section, .mystery-section .mode-section, .mystery-section .cards-section { scroll-snap-align: start; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; } .step-back-btn { padding: 8px 12px; font-size: 10px; } .step-back-btn span { display: none; } } /* =============================================== FLOATING BACKGROUND - PUNTI INTERROGATIVI E STELLE =============================================== */ .floating-questions { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; } .question-mark { position: absolute; bottom: -50px; color: #d4af37; opacity: 0; font-family: 'Playfair Display', serif; font-weight: bold; text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); animation: floatUpQuestion 12s linear infinite; } .floating-star { position: absolute; bottom: -50px; color: #d4af37; opacity: 0; text-shadow: 0 0 15px rgba(212, 175, 55, 0.6); animation: floatUpStar 14s linear infinite; } .sparkle-dot { position: absolute; bottom: -20px; background: #d4af37; border-radius: 50%; opacity: 0; box-shadow: 0 0 10px #d4af37, 0 0 20px #d4af37; animation: floatUpSparkle 16s linear infinite; } @keyframes floatUpQuestion { 0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; } 5% { opacity: 0.25; } 50% { opacity: 0.2; transform: translateY(-50vh) rotate(180deg) scale(1.1); } 95% { opacity: 0.25; } 100% { transform: translateY(-110vh) rotate(360deg) scale(1); opacity: 0; } } @keyframes floatUpStar { 0% { transform: translateY(0) scale(1); opacity: 0; } 5% { opacity: 0.3; } 50% { opacity: 0.35; transform: translateY(-50vh) scale(1.3); } 95% { opacity: 0.3; } 100% { transform: translateY(-110vh) scale(1); opacity: 0; } } @keyframes floatUpSparkle { 0% { transform: translateY(0); opacity: 0; } 5% { opacity: 0.5; } 50% { opacity: 0.6; } 95% { opacity: 0.5; } 100% { transform: translateY(-110vh); opacity: 0; } } /* =============================================== MYSTERY CONTENT CONTAINER =============================================== */ .mystery-content { position: relative; max-width: 1200px; margin: 0 auto; z-index: 10; } /* =============================================== HERO HEADER =============================================== */ .mystery-header { text-align: center; margin-bottom: 60px; } .mystery-title { font-family: 'Playfair Display', serif; font-size: clamp(48px, 10vw, 80px); font-weight: 300; letter-spacing: 8px; margin-bottom: 20px; background: linear-gradient(135deg, #fff 0%, #d4af37 50%, #fff 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmerTitle 3s ease-in-out infinite; } @keyframes shimmerTitle { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .mystery-subtitle { font-family: 'Inter', sans-serif; font-size: 16px; color: rgba(255, 255, 255, 0.6); font-weight: 300; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 30px; } .mystery-badge { display: inline-block; background: rgba(212, 175, 55, 0.1); border: 1px solid rgba(212, 175, 55, 0.3); color: #d4af37; padding: 12px 30px; font-size: 11px; letter-spacing: 1px; } /* =============================================== STEP 1: GENDER SELECTION =============================================== */ .gender-section { text-align: center; margin-bottom: 60px; } .gender-title { font-family: 'Playfair Display', serif; font-size: 24px; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; letter-spacing: 2px; } .gender-buttons { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .gender-btn { position: relative; min-width: 200px; padding: 50px 60px; background: transparent; border: 2px solid rgba(212, 175, 55, 0.25); color: #fff; cursor: pointer; transition: all 0.4s ease; text-align: center; } .gender-btn::before, .gender-btn::after { display: none !important; content: none !important; } .gender-btn:hover { border-color: #d4af37; box-shadow: inset 0 0 40px rgba(212, 175, 55, 0.05); } .gender-btn.selected { background: rgba(212, 175, 55, 0.08); border-color: #d4af37; box-shadow: 0 0 60px rgba(212, 175, 55, 0.15); } /* Decorazioni angoli rimosse da gender-btn */ .gender-icon { font-size: 60px; margin-bottom: 15px; display: block; color: #d4af37; transition: transform 0.3s ease; } .gender-btn:hover .gender-icon { transform: scale(1.1); } .gender-btn.pulse-left { animation: pulseLeft 2s ease-in-out infinite; } @keyframes pulseLeft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } .gender-text { font-family: 'Playfair Display', serif; font-size: 20px; letter-spacing: 4px; text-transform: uppercase; } /* =============================================== STEP 2: MODE SELECTION =============================================== */ .mode-section { display: none; text-align: center; margin-bottom: 60px; animation: fadeInUp 0.5s ease; } .mode-title { font-family: 'Playfair Display', serif; font-size: 28px; color: rgba(255, 255, 255, 0.9); margin-bottom: 15px; letter-spacing: 2px; } .mode-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin-bottom: 40px; letter-spacing: 1px; } .mode-buttons { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; } .mode-btn { position: relative; min-width: 280px; padding: 40px 50px; background: transparent; border: 2px solid rgba(212, 175, 55, 0.25); color: #fff; cursor: pointer; transition: all 0.4s ease; } .mode-btn::before, .mode-btn::after { display: none !important; content: none !important; } .mode-btn:hover { border-color: #d4af37; background: rgba(212, 175, 55, 0.05); } .mode-btn-icon { font-size: 40px; margin-bottom: 15px; color: #d4af37; } .mode-btn-text { font-family: 'Playfair Display', serif; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; } .mode-btn-desc { font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 1px; } .mode-btn.surprise { background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%); } .mode-btn.surprise:hover { background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%); box-shadow: 0 0 40px rgba(212, 175, 55, 0.2); } /* Mode button selezionato */ .mode-btn.selected { border-color: #d4af37 !important; background: rgba(212, 175, 55, 0.15) !important; box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); } .mode-btn.selected::before { content: '✓'; position: absolute; top: 10px; right: 10px; color: #d4af37; font-size: 1.2rem; } /* =============================================== MYSTERY CARDS - PREZZI =============================================== */ .cards-section { display: none; margin-bottom: 60px; animation: fadeInUp 0.5s ease; } .cards-title { font-family: 'Playfair Display', serif; font-size: 24px; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 40px; letter-spacing: 2px; } .cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; } .mystery-card { position: relative; background: transparent; border: 2px solid rgba(212, 175, 55, 0.25); padding: 50px 35px; text-align: center; cursor: pointer; transition: all 0.4s ease; } .mystery-card::before, .mystery-card::after { content: ''; position: absolute; width: 20px; height: 20px; border-color: #d4af37; transition: all 0.4s ease; } .mystery-card::before { top: -2px; left: -2px; border-top: 2px solid; border-left: 2px solid; } .mystery-card::after { bottom: -2px; right: -2px; border-bottom: 2px solid; border-right: 2px solid; } .mystery-card:hover::before, .mystery-card:hover::after { width: 40px; height: 40px; } .mystery-card:hover { border-color: #d4af37; box-shadow: inset 0 0 40px rgba(212, 175, 55, 0.05); } .mystery-card.selected { background: rgba(212, 175, 55, 0.05); border-color: #d4af37; box-shadow: 0 0 60px rgba(212, 175, 55, 0.1); } .mystery-card.selected::before, .mystery-card.selected::after { width: 50px; height: 50px; } .card-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #d4af37; color: #000; padding: 6px 20px; font-size: 10px; font-weight: 600; letter-spacing: 2px; } .card-tier { font-size: 10px; letter-spacing: 5px; color: #d4af37; margin-bottom: 20px; text-transform: uppercase; } .card-price { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 300; color: #fff; margin-bottom: 8px; } .card-shipping { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-bottom: 25px; letter-spacing: 1px; } .card-divider { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #d4af37, transparent); margin: 25px auto; } .card-features { list-style: none; margin-bottom: 30px; padding: 0; } .card-features li { color: rgba(255, 255, 255, 0.7); font-size: 14px; padding: 10px 0; letter-spacing: 1px; font-weight: 300; } .card-cta { font-size: 11px; letter-spacing: 3px; color: #d4af37; text-transform: uppercase; padding-top: 15px; border-top: 1px solid rgba(212, 175, 55, 0.15); } .mystery-card.premium-highlight { transform: scale(1.02); } /* =============================================== PREFERENCES SECTION =============================================== */ .preferences-section { display: none; margin-bottom: 60px; animation: fadeInUp 0.5s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .section-header { text-align: center; margin-bottom: 50px; } .section-title { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 300; letter-spacing: 3px; color: #fff; margin-bottom: 15px; } .section-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.5); letter-spacing: 2px; } .pref-group { margin-bottom: 50px; } .pref-label { font-size: 11px; letter-spacing: 3px; color: #d4af37; text-transform: uppercase; margin-bottom: 20px; text-align: center; } .colors-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; } .color-option { width: 60px; height: 60px; border: 2px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; letter-spacing: 1px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .color-option:hover { border-color: rgba(255, 255, 255, 0.3); transform: scale(1.05); } .color-option.selected { border-color: #d4af37; box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); } .desires-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; max-width: 800px; margin: 0 auto; } .desire-option { background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 15px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .desire-option:hover { border-color: rgba(212, 175, 55, 0.3); } .desire-option.selected { border-color: #d4af37; background: rgba(212, 175, 55, 0.05); } .desire-icon { font-size: 24px; margin-bottom: 10px; color: #d4af37; } .desire-text { font-size: 12px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.8); } .brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 100%; margin: 0 auto; padding: 10px; } @media (max-width: 900px) { .brands-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .brands-grid { grid-template-columns: repeat(2, 1fr); } } .brand-option { background: linear-gradient(145deg, rgba(30,30,30,0.9), rgba(15,15,15,0.95)); border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 8px; padding: 14px 8px; text-align: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } .brand-option::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.1), transparent); transition: left 0.5s ease; } .brand-option:hover::before { left: 100%; } .brand-option:hover { border-color: rgba(212, 175, 55, 0.6); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15); } .brand-option.selected { border-color: #d4af37; background: linear-gradient(145deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05)); box-shadow: 0 0 20px rgba(212, 175, 55, 0.2), inset 0 0 20px rgba(212, 175, 55, 0.05); } .brand-option.selected .brand-text { color: #d4af37; text-shadow: 0 0 10px rgba(212,175,55,0.3); } .brand-text { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; transition: all 0.3s ease; } .brand-option.nopref-btn { grid-column: span 2; background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05)); border: 1px dashed rgba(212, 175, 55, 0.4); } .brand-option.nopref-btn .brand-text { color: #d4af37; font-size: 11px; } .continue-btn { width: 100%; max-width: 400px; display: block; margin: 40px auto 0; padding: 18px 40px; background: transparent; border: 2px solid #d4af37; color: #d4af37; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .continue-btn:hover:not(:disabled) { background: #d4af37; color: #000; } .continue-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* =============================================== CHECKOUT SECTION =============================================== */ .checkout-section { display: none; max-width: 700px; margin: 0 auto; animation: fadeInUp 0.5s ease; } .order-summary { background: rgba(212, 175, 55, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); padding: 30px; margin-bottom: 40px; } .summary-title { font-family: 'Playfair Display', serif; font-size: 20px; color: #fff; margin-bottom: 20px; letter-spacing: 2px; text-align: center; } .summary-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 14px; color: rgba(255, 255, 255, 0.7); } .summary-row.total { border-bottom: none; padding-top: 20px; font-size: 18px; color: #d4af37; font-weight: 500; } .business-fields { display: block; margin-bottom: 25px; padding: 20px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); } .b2b-disclaimer { background: rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; } .form-section-title { font-family: 'Playfair Display', serif; font-size: 18px; color: #fff; margin: 30px 0 20px; letter-spacing: 2px; } .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 11px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; margin-bottom: 10px; } .form-input { width: 100%; padding: 16px 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 15px; font-family: 'Inter', sans-serif; transition: all 0.3s ease; box-sizing: border-box; } .form-input:focus { outline: none; border-color: #d4af37; background: rgba(212, 175, 55, 0.03); } .form-input::placeholder { color: rgba(255, 255, 255, 0.3); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .payment-section { margin: 30px 0; } .payment-methods { display: flex; gap: 15px; } .payment-method { flex: 1; padding: 20px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); text-align: center; cursor: pointer; transition: all 0.3s ease; } .payment-method:hover { border-color: rgba(212, 175, 55, 0.3); } .payment-method.selected { border-color: #d4af37; color: #d4af37; background: rgba(212, 175, 55, 0.05); } .payment-method i { font-size: 24px; margin-bottom: 10px; display: block; } .payment-method span { font-size: 12px; letter-spacing: 1px; } /* =============================================== LUX LAB TOOLS - SEZIONE MENU (UN MONDO A PARTE) =============================================== */ .menu-tools-section { padding: 25px; margin: 15px 20px; background: linear-gradient(135deg, rgba(30, 58, 95, 0.15) 0%, rgba(91, 75, 138, 0.1) 50%, rgba(30, 58, 95, 0.15) 100%); border: 1px solid rgba(91, 75, 138, 0.3); border-radius: 16px; position: relative; overflow: hidden; } .menu-tools-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(91, 75, 138, 0.6), rgba(61, 122, 181, 0.6), transparent); } .menu-tools-header { text-align: center; margin-bottom: 18px; } .menu-tools-icon { font-size: 1.5rem; color: #5b4b8a; margin-bottom: 10px; display: block; text-shadow: 0 0 20px rgba(91, 75, 138, 0.5); } .menu-tools-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: #5b4b8a !important; letter-spacing: 2px; margin-bottom: 5px; text-shadow: 0 0 15px rgba(91, 75, 138, 0.4); background: linear-gradient(90deg, #5b4b8a, #8B7BB5, #5b4b8a) !important; background-size: 200% auto; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: shimmerTitle 3s linear infinite; } @keyframes shimmerTitle { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .menu-tools-subtitle { font-size: 0.7rem; color: #8B7BB5; letter-spacing: 1.5px; text-transform: uppercase; text-shadow: none; } /* =============================================== MENU NAV SECTION - DESKTOP E MOBILE =============================================== */ .menu-nav-section { padding: 20px 25px; display: flex; flex-direction: column; gap: 5px; } .menu-nav-item { display: block; padding: 15px 20px; color: #1a1a1a; text-decoration: none; font-size: 0.95rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; border-radius: 10px; transition: all 0.3s ease; text-align: center; cursor: pointer; border: 1px solid transparent; } /* v2: effetto-cursore (item visibili solo nel menu mobile) -> su touch la sticky-hover al tap animava background/border (paint) = scatto. Limitato ai device col mouse. */ @media (hover: hover) { .menu-nav-item:hover { background: rgba(212, 175, 55, 0.1); color: #d4af37; border-color: rgba(212, 175, 55, 0.3); } } .menu-nav-item.menu-storia-item { color: rgba(212, 175, 55, 0.9) !important; font-style: italic; position: relative; } .menu-nav-item.menu-storia-item::before { content: ''; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--gold); border-radius: 50%; opacity: 0.6; animation: storiaDot 2s ease-in-out infinite; } @keyframes storiaDot { 0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(0.8); } 50% { opacity: 0.8; transform: translateY(-50%) scale(1); } } /* ICONA STORIA - STELLA DORATA */ .storia-icon { color: #d4af37; margin-right: 8px; font-size: 0.9em; animation: storiaIconPulse 2s ease-in-out infinite; display: inline-block; } @keyframes storiaIconPulse { 0%, 100% { opacity: 0.7; transform: scale(1); text-shadow: 0 0 5px rgba(212, 175, 55, 0.5); } 50% { opacity: 1; transform: scale(1.15); text-shadow: 0 0 15px rgba(212, 175, 55, 0.8); } } /* VOCE MENU STORIA - DORATA */ .menu-nav-item.menu-storia-item { color: #d4af37 !important; font-style: italic; position: relative; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); } /* v2: effetto-cursore (text-shadow = paint) limitato al mouse; su touch niente scatto. */ @media (hover: hover) { .menu-nav-item.menu-storia-item:hover { color: #FFD700 !important; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } } .menu-nav-item.menu-storia-item::before { content: ''; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: linear-gradient(135deg, #d4af37, #FFD700); border-radius: 50%; opacity: 0.8; animation: storiaGoldPulse 2s ease-in-out infinite; } @keyframes storiaGoldPulse { 0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(0.8); box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); } 50% { opacity: 1; transform: translateY(-50%) scale(1); box-shadow: 0 0 15px rgba(212, 175, 55, 0.6); } } /* ═══════════════════════════════════════════════════════════ SEZIONE STORIA - DOVE TUTTO COMINCIA ═══════════════════════════════════════════════════════════ */ .menu-storia-section { background: linear-gradient(135deg, rgba(139, 115, 85, 0.08) 0%, rgba(212, 175, 55, 0.05) 50%, rgba(180, 140, 40, 0.08) 100%); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; padding: 20px; margin: 15px 0; position: relative; overflow: hidden; } .menu-storia-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 60%); animation: storiaAura 6s ease-in-out infinite; pointer-events: none; } @keyframes storiaAura { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; } 50% { transform: translate(10%, 10%) scale(1.1); opacity: 0.5; } } .menu-storia-header { text-align: center; margin-bottom: 15px; position: relative; z-index: 1; } .menu-storia-icon { font-size: 1.5rem; color: #d4af37; margin-bottom: 8px; display: block; animation: storiaFeatherFloat 3s ease-in-out infinite; } @keyframes storiaFeatherFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(5deg); } } .menu-storia-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 600; color: #d4af37; letter-spacing: 1px; margin-bottom: 5px; text-shadow: 0 0 15px rgba(212, 175, 55, 0.3); } .menu-storia-subtitle { font-family: 'Inter', sans-serif; font-size: 0.7rem; color: rgba(212, 175, 55, 0.7); font-style: italic; letter-spacing: 0.5px; } .storia-enter-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 20px; background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 40, 0.15) 50%, rgba(139, 115, 85, 0.2) 100%); border: 1px solid rgba(212, 175, 55, 0.5); border-radius: 10px; color: #d4af37; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 2px; cursor: pointer; transition: all 0.4s ease; position: relative; z-index: 1; /* v2: pulse box-shadow -> layer ::after di picco in opacity; border-color (non vietato) resta animato sull'elemento. A riposo ::after opacity:0 -> nessun glow = identico. */ animation: storiaBtnBorder 3s ease-in-out infinite; } .storia-enter-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 25px rgba(212, 175, 55, 0.4); opacity: 0; pointer-events: none; z-index: -1; animation: storiaBtnGlow 3s ease-in-out infinite; } @keyframes storiaBtnBorder { 0%, 100% { border-color: rgba(212, 175, 55, 0.5); } 50% { border-color: rgba(212, 175, 55, 0.8); } } @keyframes storiaBtnGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* v2: effetto-cursore. Su touch il tap accendeva la sticky-hover animando background (gradient repaint) + box-shadow (paint) -> scatto. Limitato ai device col mouse. A regime resta il glow in loop (::after opacity, gia' compositor). Desktop invariato. */ @media (hover: hover) { .storia-enter-btn:hover { background: linear-gradient(135deg, rgba(212, 175, 55, 0.35) 0%, rgba(180, 140, 40, 0.25) 100%); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4); } } .storia-enter-btn i { font-size: 1rem; color: #d4af37; } /* ORDINE MOBILE: Storia prima di Laboratorio */ @media (max-width: 768px) { .menu-storia-section { order: -2; /* Prima di tutto tranne bandiere */ margin: 10px 0; padding: 15px; } .menu-tools-section { order: -1; /* Dopo storia, prima di navigazione */ } .menu-storia-title { font-size: 1rem; } .storia-enter-btn { padding: 12px 18px; font-size: 0.8rem; } } /* PULSANTE STORIA - STILE ORO ELEGANTE */ .tools-storia-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 15px; padding: 16px 24px; background: linear-gradient(135deg, rgba(139, 115, 85, 0.3) 0%, rgba(201, 169, 97, 0.2) 50%, rgba(212, 175, 55, 0.3) 100%); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 12px; color: #d4af37; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 2px; cursor: pointer; transition: all 0.4s ease; backdrop-filter: blur(10px); } /* v2: effetto-cursore (background+box-shadow paint) limitato al mouse; su touch niente scatto. */ @media (hover: hover) { .tools-storia-btn:hover { background: linear-gradient(135deg, rgba(212, 175, 55, 0.4) 0%, rgba(201, 169, 97, 0.3) 100%); border-color: rgba(212, 175, 55, 0.7); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3); } } .tools-storia-btn i { font-size: 1rem; color: #d4af37; } .menu-nav-item.menu-vip-item { background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05)); border: 1px solid rgba(212, 175, 55, 0.3); color: #d4af37; font-weight: 600; } /* DESKTOP: Nascondi navigazione nel menu dropdown (c'è già nella navbar) */ @media (min-width: 769px) { .menu-nav-section { display: none !important; } } /* MOBILE: Mostra navigazione nel menu dropdown - PRIMO PIANO */ @media (max-width: 768px) { .menu-nav-section { display: flex !important; order: -1; /* SPOSTA IN CIMA al menu */ border-bottom: 1px solid rgba(212, 175, 55, 0.15); padding-bottom: 15px; margin-bottom: 10px; } } /* Mobile: Menu centrato — rimosso duplicato, L.2577 con !important governa */ .tools-enter-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 20px; border-radius: 12px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border: none; position: relative; overflow: hidden; isolation: isolate; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* v2: gradiente animato spostato su layer ::before (translateX) per compositor. L'elemento resta trasparente; il ::before riproduce identico il gradiente. */ background: transparent; color: #fff; box-shadow: 0 4px 15px rgba(30, 58, 95, 0.4), inset 0 1px 0 rgba(255,255,255,0.1); } /* v2: layer del gradiente — 2x dimensioni, traslato in X (compositor). A translateX(0) il box mostra il quadrante top-left dell'immagine 2W×2H, identico al background-position iniziale 0% 0% dello stato disabilitato. */ .tools-enter-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; z-index: -1; pointer-events: none; background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 30%, #5b4b8a 70%, #3d5a80 100% ); background-size: 100% 100%; transform: translateX(0); animation: toolsGradient 6s ease-in-out infinite; } @keyframes toolsGradient { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-50%); } } .tools-enter-btn:hover { transform: translateY(-3px); background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 30%, #5b4b8a 70%, #3d5a80 100% ) !important; box-shadow: 0 0 15px rgba(91, 75, 138, 0.5), 0 0 30px rgba(91, 75, 138, 0.3), 0 8px 25px rgba(91, 75, 138, 0.25), inset 0 1px 0 rgba(255,255,255,0.2); border: 1px solid rgba(91, 75, 138, 0.6); } .tools-enter-btn i:first-child { font-size: 1rem; transition: transform 0.3s ease; } .tools-enter-btn:hover i:first-child { transform: none; } .tools-enter-btn i:last-child { font-size: 0.75rem; opacity: 0.7; transition: none; } .tools-enter-btn:hover i:last-child { transform: none; opacity: 0.7; } /* Click sul pulsante laboratorio */ /* v2: il tap su touch animava background (gradient repaint) + box-shadow su tutto il bottone con transition: all 0.4s -> era il costo piu' alto misurato (tap_max ~333ms). Riscritto compositor-only: layer ::after pre-renderizzato (gradiente viola + glow pressato) pilotato in opacity. A riposo opacity:0 = identico; al press opacity:1 ricrea il pressed. Nota: il gradiente viola del press, dopo lo spostamento del gradiente base su ::before, era di fatto coperto/morto sull'elemento; portarlo su ::after (sopra ::before, sotto il testo) ne ripristina la resa viola voluta dal design originale. */ .tools-enter-btn::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, #5b4b8a 0%, #8B7BB5 50%, #5b4b8a 100% ); box-shadow: 0 2px 10px rgba(91, 75, 138, 0.6), inset 0 2px 4px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .tools-enter-btn:active::after { opacity: 1; } .tools-enter-btn:active { transform: translateY(0); } /* Disabilita hover su touch/mobile - solo click */ @media (hover: none) and (pointer: coarse) { .tools-enter-btn:hover { transform: none !important; box-shadow: 0 4px 15px rgba(30, 58, 95, 0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important; border: none !important; } } /* Badge NEW */ .app-badge { position: absolute; top: -8px; right: -8px; background: linear-gradient(135deg, #d4af37, #FFD700); color: #000; font-size: 0.55rem; font-weight: 700; padding: 4px 8px; border-radius: 10px; letter-spacing: 0.5px; box-shadow: 0 2px 10px rgba(212,175,55,0.5); animation: badgePulse 2s ease-in-out infinite; z-index: 3; } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Responsive Mobile */ @media (max-width: 768px) { .menu-app-section { padding: 15px 20px; } .app-premium-btn { padding: 14px 18px; font-size: 0.8rem; border-radius: 12px; } .app-divider span { font-size: 0.6rem; } } /* =============================================== LEGAL DISCLAIMER CON CHECKBOX =============================================== */ .legal-disclaimer-box { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); padding: 25px 30px; margin: 30px 0; } .disclaimer-title { font-size: 11px; letter-spacing: 1.5px; color: #d4af37; text-transform: none; /* Rimuove CAPS */ margin-bottom: 15px; font-weight: 600; } .disclaimer-text { font-size: 12px; color: rgba(255, 255, 255, 0.5); line-height: 1.8; margin-bottom: 20px; } .disclaimer-text strong { color: rgba(255, 255, 255, 0.7); } .checkbox-container { display: flex; align-items: flex-start; gap: 15px; cursor: pointer; } .checkbox-container input[type="checkbox"] { display: none; } .custom-checkbox { width: 24px; height: 24px; min-width: 24px; border: 2px solid rgba(212, 175, 55, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; background: transparent; } .checkbox-container input[type="checkbox"]:checked + .custom-checkbox { background: #d4af37; border-color: #d4af37; } .custom-checkbox::after { content: '✓'; color: #000; font-size: 14px; font-weight: bold; opacity: 0; transition: opacity 0.3s ease; } .checkbox-container input[type="checkbox"]:checked + .custom-checkbox::after { opacity: 1; } .checkbox-label { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; } .checkbox-label a { color: #d4af37; text-decoration: none; } /* =============================================== ORDER BUTTON =============================================== */ .order-btn { width: 100%; padding: 20px 40px; background: #d4af37; border: none; color: #000; font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; } .order-btn:hover:not(:disabled) { background: #f4e168; box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3); } .order-btn:disabled { opacity: 0.4; cursor: not-allowed; } .shipping-note { text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.5); margin-top: 20px; letter-spacing: 1px; } /* =============================================== SUCCESS MESSAGE =============================================== */ .success-section { display: none; text-align: center; padding: 80px 20px; animation: fadeInUp 0.5s ease; } .success-icon { font-size: 80px; margin-bottom: 30px; } .success-title { font-family: 'Playfair Display', serif; font-size: 36px; color: #fff; margin-bottom: 20px; letter-spacing: 3px; } .success-text { font-size: 16px; color: rgba(255, 255, 255, 0.6); max-width: 420px; padding: 0 20px; margin: 0 auto; line-height: 1.8; } /* PULSANTE NUOVO ORDINE - Centrato e accattivante */ .new-mystery-btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 40px; margin: 40px auto; background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1)); border: 2px solid #d4af37; color: #d4af37; font-family: 'Playfair Display', serif; font-size: 16px; letter-spacing: 2px; cursor: pointer; transition: all 0.4s ease; text-transform: uppercase; position: relative; overflow: hidden; } .new-mystery-btn:hover { background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.15)); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3); } .new-mystery-btn:active { transform: translateY(0); } .italy-notice { text-align: center; margin: 40px 0; padding: 25px; background: rgba(212, 175, 55, 0.05); border: 1px solid rgba(212, 175, 55, 0.15); } .italy-notice p { font-size: 13px; color: rgba(255, 255, 255, 0.7); letter-spacing: 1px; } .italy-notice a { color: #d4af37; text-decoration: none; } .loading-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 10000; align-items: center; justify-content: center; flex-direction: column; } .loading-overlay.show { display: flex; } .loading-spinner { width: 60px; height: 60px; border: 3px solid rgba(212, 175, 55, 0.2); border-top-color: #d4af37; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { color: #d4af37; margin-top: 20px; font-size: 14px; letter-spacing: 2px; } .back-arrow-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: none; color: #d4af37; font-size: 14px; cursor: pointer; margin-bottom: 30px; padding: 10px 0; transition: all 0.3s ease; } .back-arrow-btn:hover { transform: translateX(-5px); } /* =============================================== RESPONSIVE =============================================== */ @media (max-width: 768px) { .mystery-section { padding: 80px 15px 60px; } .mystery-title { font-size: 40px; letter-spacing: 4px; } .gender-buttons { flex-direction: column; align-items: center; gap: 20px; } .gender-btn { min-width: 250px; padding: 40px 50px; } .mode-buttons { flex-direction: column; align-items: center; } .mode-btn { min-width: 280px; } .cards-container { display: flex !important; flex-wrap: nowrap !important; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 10px 5px; max-width: 100%; } .mystery-card { flex: 0 0 auto; width: 280px; min-width: 260px; scroll-snap-align: center; margin-bottom: 0; padding: 30px 20px; } .mystery-card .card-price { font-size: 38px; } .mystery-card .card-features li { font-size: 12px; } /* Nascondi scrollbar ma mantieni funzionalità */ .cards-container::-webkit-scrollbar { height: 4px; } .cards-container::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.5); border-radius: 2px; } .form-row { grid-template-columns: 1fr; } .payment-methods { flex-direction: column; } .topbar-btn span { display: none; } .mystery-topbar { padding: 10px 15px; } } @media (max-width: 768px) { .info-cards{position:relative;top:auto;right:auto;transform:none;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:100%;padding:20px;margin:20px auto 0 auto} .info{width:100%;max-width:350px;margin:0 auto} #contact .inner{min-height:auto} } /* VIP SECTION - DESIGN COMPLETAMENTE NUOVO CON ORO */ .vip-section { position: relative; min-height: 140vh; /* AUMENTATO per mobile */ display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%, #0a0a0a 100%); overflow: hidden; padding: 100px 20px; } /* Background pattern animato */ .vip-bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 30%, rgba(212,175,55,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(212,175,55,0.06) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(212,175,55,0.04) 0%, transparent 70%); animation: patternMove 20s ease-in-out infinite; z-index: 1; } @keyframes patternMove { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; } 50% { transform: scale(1.1) rotate(2deg); opacity: 0.8; } } /* Particelle premium */ .vip-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .particle { position: absolute; width: 3px; height: 3px; background: radial-gradient(circle, var(--gold), transparent); border-radius: 50%; animation: floatParticle 15s infinite linear; opacity: 0; } @keyframes floatParticle { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10%, 90% { opacity: 0.7; } 50% { opacity: 1; } 100% { transform: translateY(-10vh) scale(1.2); opacity: 0; } } /* Container principale */ .vip-container { position: relative; z-index: 10; width: 100%; max-width: 1000px; margin: 0 auto; } .vip-content { text-align: center; } /* Header VIP */ .vip-header { margin-bottom: 60px; } .vip-crown-icon { margin-bottom: 20px; animation: crownFloat 3s ease-in-out infinite; } .vip-crown-icon i { font-size: 4rem; color: var(--gold); filter: drop-shadow(0 4px 20px rgba(212,175,55,0.5)); } @keyframes crownFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(2deg); } } .vip-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: 8px; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 30px rgba(212,175,55,0.5); margin-bottom: 1rem; } @keyframes waveGold { 0% { background-position: -200% 0; } 50% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes titleGlow { 0%, 100% { text-shadow: 0 4px 15px rgba(212,175,55,0.4); transform: scale(1); } 50% { text-shadow: 0 4px 25px rgba(212,175,55,0.7), 0 0 50px rgba(212,175,55,0.3); transform: scale(1.02); } } .vip-divider { width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 0 auto 25px; border-radius: 2px; position: relative; } /* v2: pulse box-shadow del divider -> layer ::after di picco in opacity (compositor). A riposo opacity:0 = nessun glow, identico allo stato disabilitato (nessun box-shadow). */ .vip-divider::after { content: ''; position: absolute; inset: 0; border-radius: 2px; box-shadow: 0 0 15px rgba(212,175,55,0.6); opacity: 0; pointer-events: none; animation: dividerGlow 2s ease-in-out infinite alternate; } @keyframes dividerGlow { from { opacity: 0; } to { opacity: 1; } } .vip-subtitle { font-size: 1.3rem; color: #333333; /* NERO INVECE DI BIANCO */ line-height: 1.6; font-weight: 400; margin: 0 auto; max-width: 600px; letter-spacing: 1px; } /* Card VIP con glassmorphism */ .vip-card { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); border: 1px solid rgba(212,175,55,0.2); border-radius: 25px; padding: 0; transition: all 0.4s ease; box-shadow: 0 20px 60px rgba(0,0,0,0.3); margin-top: 40px; } .vip-card:hover { transform: translateY(-5px); border-color: rgba(212,175,55,0.4); box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 40px rgba(212,175,55,0.1); } .vip-card-inner { padding: 50px 40px; } /* Features VIP */ .vip-features { display: flex; justify-content: center; gap: 40px; margin-bottom: 50px; flex-wrap: wrap; } .vip-feature { display: flex; flex-direction: column; align-items: center; gap: 15px; min-width: 120px; transition: all 0.3s ease; } .vip-feature:hover { transform: translateY(-5px); } .feature-icon { width: 70px; height: 70px; background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.2)); border: 2px solid rgba(212,175,55,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; transition: all 0.3s ease; } .feature-icon:hover { background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.3)); border-color: var(--gold); box-shadow: 0 0 20px rgba(212,175,55,0.3); } .feature-icon i { font-size: 1.8rem; color: var(--gold); } .vip-feature span { font-size: 0.9rem; color: #444444; /* NERO INVECE DI BIANCO */ font-weight: 500; text-align: center; letter-spacing: 1px; text-transform: uppercase; } /* Bottoni VIP migliorati */ .vip-actions { display: flex; flex-direction: column; gap: 25px; align-items: center; margin-bottom: 40px; } .vip-btn { position: relative; padding: 20px 50px; border: none; border-radius: 50px; font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.4s ease; overflow: hidden; min-width: 300px; backdrop-filter: blur(10px); } .vip-btn-primary { background: linear-gradient(135deg, var(--gold) 0%, #FFD700 50%, var(--gold) 100%); color: #000; box-shadow: 0 10px 30px rgba(212,175,55,0.3); } .vip-btn-primary .btn-text, .vip-btn-primary .btn-content, .vip-btn-primary span { color: #000 !important; opacity: 1 !important; visibility: visible !important; } .vip-btn-primary:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 20px 50px rgba(212,175,55,0.5), 0 0 40px rgba(212,175,55,0.3), 0 0 80px rgba(255,215,0,0.2); background: linear-gradient(135deg, #FFD700 0%, var(--gold) 50%, #FFD700 100%); animation: goldPulse 1.5s ease-in-out infinite; } @keyframes goldPulse { 0%, 100% { box-shadow: 0 20px 50px rgba(212,175,55,0.5), 0 0 40px rgba(212,175,55,0.3), 0 0 80px rgba(255,215,0,0.2); } 50% { box-shadow: 0 25px 60px rgba(212,175,55,0.7), 0 0 60px rgba(212,175,55,0.5), 0 0 120px rgba(255,215,0,0.4); } } .vip-btn-secondary { background: rgba(212,175,55,0.1); color: var(--gold); /* ORO INVECE DI BIANCO TRASPARENTE */ border: 2px solid var(--gold); box-shadow: 0 10px 30px rgba(212,175,55,0.1); } .vip-btn-secondary:hover { transform: none; background: rgba(212,175,55,0.1); box-shadow: 0 10px 30px rgba(212,175,55,0.1); color: var(--gold); cursor: pointer; } /* NO riempimento al click */ .vip-btn:active, .vip-btn-primary:active, .vip-btn-secondary:active { transform: translateY(-2px); /* Mantieni lo stile normale, nessun riempimento oro */ } .btn-bg { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s ease; } .vip-btn:hover .btn-bg { left: 100%; } .btn-content { position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; z-index: 2; } .btn-icon { font-size: 1.3rem; transition: transform 0.3s ease; } .btn-arrow { font-size: 1rem; transition: transform 0.3s ease; } .vip-btn:hover .btn-icon { transform: scale(1.2) rotate(10deg); } .vip-btn:hover .btn-arrow { transform: translateX(5px); } /* Badge premium */ .vip-badge { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 25px; background: transparent; border: none; border-radius: 30px; font-size: 0.8rem; color: var(--gold); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-top: 20px; } .vip-badge i { animation: starTwinkle 2s ease-in-out infinite; } @keyframes starTwinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(180deg); } } /* RESPONSIVE DESIGN MIGLIORATO */ @media (max-width: 768px) { .vip-section { min-height: 150vh; /* ANCORA PIÙ ALTO per mobile */ padding: 80px 15px; } .vip-title { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 15px; } .vip-subtitle { font-size: 1.1rem; padding: 0 10px; } .vip-features { gap: 25px; margin-bottom: 40px; } .feature-icon { width: 60px; height: 60px; } .feature-icon i { font-size: 1.5rem; } .vip-feature span { font-size: 0.8rem; } .vip-btn { padding: 18px 40px; font-size: 1rem; min-width: 280px; } .vip-card-inner { padding: 40px 25px; } } @media (max-width: 480px) { .vip-section { min-height: 160vh; /* MASSIMA ALTEZZA per telefoni piccoli */ padding: 60px 10px; } .vip-features { flex-direction: column; align-items: center; gap: 20px; } .vip-feature { min-width: auto; width: 100%; max-width: 200px; } .vip-btn { padding: 16px 35px; font-size: 0.95rem; min-width: 260px; } .btn-content { font-size: 0.85rem; } .vip-card-inner { padding: 30px 20px; } .vip-crown-icon i { font-size: 3rem; } } /* Prevenzione overflow */ .vip-section * { box-sizing: border-box; } /* =============== NAVBAR ISLAND VARIABLES =============== */ :root { --gold: #d4af37; --luxury-green: #355E3B; --luxury-green-light: #4A7C59; --luxury-green-bright: #5F9B6F; --black: #000; --white: #fff; --gray-light: #f8f9fa; --shadow: rgba(0,0,0,0.1); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Theme Variables */ [data-theme="light"] { --bg-primary: #ffffff; --text-primary: #1a1a1a; --text-secondary: #666; --menu-text: #000000; --navbar-bg: rgba(255, 255, 255, 0.15); /* MOLTO TRASPARENTE nella hero */ --navbar-bg-scrolled: rgba(255, 255, 255, 0.95); /* OPACA quando si scrolla */ } [data-theme="dark"] { --bg-primary: #0f0f0f; --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --menu-text: #e0e0e0; --navbar-bg: rgba(15, 15, 15, 0.15); /* MOLTO TRASPARENTE nella hero */ --navbar-bg-scrolled: rgba(15, 15, 15, 0.95); /* OPACA quando si scrolla */ } /* SUPPORTO TRANSIZIONI THEME */ html, body, #navbar { transition: background-color 0.3s ease, color 0.3s ease !important; } /* CORREZIONI MOBILE FLAGS */ @media (max-width: 768px) { .mobile-flag-container.active { background: rgba(212,175,55,0.15) !important; border-color: var(--gold) !important; } } /* =============== RIGHT SIDE CONTROLS =============== */ .nav-right { display: flex; align-items: center; gap: 15px; } .language-switcher { display: flex; gap: 8px; } .flag-container { width: 28px; height: 20px; border-radius: 3px; overflow: hidden; cursor: pointer; transition: all 0.3s var(--ease); border: 1px solid rgba(255,255,255,0.2); } .flag-container:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .flag-container.active { box-shadow: 0 0 0 2px var(--gold); } .flag-img { width: 100%; height: 100%; object-fit: cover; } /* FIX iOS - Immagini card carosello */ #work .card__image img { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; } @supports (-webkit-touch-callout: none) { #work .card__image img { transform: translate3d(0, 0, 0); will-change: transform; } } .theme-toggle { background: none; border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); position: relative; overflow: hidden; } .theme-toggle:hover { background: rgba(212,175,55,0.1); border-color: var(--gold); transform: scale(1.05); } .theme-icon { color: var(--text-secondary); font-size: 16px; transition: all 0.3s var(--ease); position: absolute; } [data-theme="light"] .light-icon { opacity: 1; transform: rotate(0deg); } [data-theme="light"] .dark-icon { opacity: 0; transform: rotate(180deg); } [data-theme="dark"] .light-icon { opacity: 0; transform: rotate(180deg); } [data-theme="dark"] .dark-icon { opacity: 1; transform: rotate(0deg); } /* FIX MENU FLASH — rimosso duplicato, L.2167 base governa transition */ /* =============== FIX HAMBURGER MOBILE CENTRATO =============== */ @media (max-width: 768px) { #navbar { display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 18px !important; position: fixed !important; top: 20px !important; height: 55px !important; } .nav-left { position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; } .hamburger { display: flex !important; flex-direction: column !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; margin: 0 !important; padding: 7px !important; z-index: 1001 !important; } .logo-mobile { display: block !important; position: relative !important; left: auto !important; top: auto !important; transform: none !important; margin: 0 auto !important; text-align: center !important; } .logo-desktop { display: none !important; } .nav-center { display: none !important; } .nav-right { position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; width: 40px !important; } } /* =============== FIX HAMBURGER X TRANSFORM =============== */ .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px) !important; background: #d4af37 !important; } .hamburger.active span:nth-child(2) { opacity: 0 !important; transform: translateX(-10px) !important; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px) !important; background: #d4af37 !important; } /* Assicura che gli span siano visibili e stilizzati */ .hamburger span { display: block !important; width: 20px !important; height: 2px !important; background: var(--menu-text, #000) !important; margin: 2px 0 !important; transition: all 0.3s ease !important; border-radius: 1px !important; } .loading-screen { display: none !important; } .main-website { opacity: 1 !important; visibility: visible !important; } /* ============================================================ super-audit 2026-06-13 — "Il nostro processo" compatto su MOBILE. Solo ≤768px: desktop invariato. Obiettivo: sezione ≤ ~2200px (era 2850px su 390×844). Nessuna animazione toccata. ============================================================ */ @media (max-width: 768px) { #process { padding: 56px 4vw 64px; } .process-timeline { padding: 28px 0 0; } .process-step { margin-bottom: 26px; } .process-content { padding: 22px 18px; } .process-content h3 { font-size: 1.45rem; margin-bottom: 6px; } .process-content h4 { font-size: 0.9rem; margin-bottom: 10px; letter-spacing: 1.5px; } .process-content p { font-size: 0.95rem; line-height: 1.55; margin-bottom: 12px; } .process-features li { padding: 3px 0 3px 26px; font-size: 0.92rem; } /* quote-box (stili inline nel markup -> servono !important) */ #process .quote-box { padding: 32px 16px !important; margin: 36px auto 16px !important; } #process .quote-box h2 { font-size: 1.35rem !important; margin-bottom: 12px !important; letter-spacing: 0.5px !important; } #process .quote-box > p:nth-of-type(1) { font-size: 1.05rem !important; line-height: 1.5 !important; margin-bottom: 8px !important; } #process .quote-box > p:nth-of-type(2) { font-size: 0.9rem !important; line-height: 1.55 !important; margin-bottom: 22px !important; } #process .quote-box label { font-size: 0.95rem !important; margin-bottom: 6px !important; } #process .quote-box input { padding: 12px 14px !important; } #process .quote-box textarea { padding: 12px 14px !important; height: 110px !important; min-height: 90px !important; } #quoteForm > div { margin-bottom: 14px !important; } #quoteForm button[type="submit"] { padding: 14px 30px !important; font-size: 1rem !important; } #process .quote-box p[style*="italic"] { font-size: 0.8rem !important; margin-top: 12px !important; } } /* ============================================================ MOBILE COMPACT — "Il nostro processo" (riduce lo scroll prima di Richiedi preventivo / Cosa facciamo). Desktop invariato. ============================================================ */ @media (max-width: 768px){ #process{ padding-top: 10px; } .process-timeline{ padding: 14px 0; } .process-timeline::before{ display: none; } /* via la linea verticale centrale su mobile */ .process-step{ margin-bottom: 16px; display: block; /* stop al layout flex alternato */ } .process-step:nth-child(even){ flex-direction: column; } .process-content{ padding: 18px 16px; border-radius: 16px; border-left: 3px solid var(--gold); /* mini-rail oro a sinistra al posto della timeline */ } .process-content h3{ font-size: 1.35rem; margin-bottom: 6px; } .process-content h4{ font-size: .9rem; margin-bottom: 10px; letter-spacing: 1px; } .process-content p { font-size: .92rem; line-height: 1.5; margin-bottom: 12px; } .process-features li{ padding: 4px 0 4px 24px; font-size: .9rem; } } /* ============================================================ 2026-09-10 pagine servizio — link "Scopri di più" nelle card del carosello #work che hanno una pagina dedicata (card con attributo data-more). Le altre 14 card restano identiche. - tap area 44px con margini negativi: occupa ~16px di flusso - su mobile il CSS sopra disattiva ogni nelle card: qui si riabilita SOLO questo link, e solo sulle card non nascoste ============================================================ */ #work .card__caption .card__more{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;margin:-13px auto -15px;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(212,175,55,.55);text-shadow:0 0 10px rgba(212,175,55,.3);position:relative;z-index:3;white-space:nowrap;-webkit-user-drag:none;user-select:none;transition:color .3s ease,text-decoration-color .3s ease} #work .card__caption .card__more:hover{color:#fff;text-decoration-color:var(--gold)} #work .card a.card__more{pointer-events:auto} #work .card.hidden--card .card__more{pointer-events:none} #work .card[data-more] .card__image{height:68%} #work .card[data-more] .card__caption{height:32%} @media only screen and (min-width:800px){ #work .card[data-more] .card__image{height:70%} #work .card[data-more] .card__caption{height:30%} } @media only screen and (max-width:768px){ #work .card[data-more] .card__image{height:65%} #work .card[data-more] .card__caption{height:35%} #work .card__caption .card__more{font-size:.62rem;margin:-14px auto -16px} } /* ============================================================ 2026-09-11 popup info card — icona "i" nelle 16 card di #work + dialog #card-info (i testi dei servizi stanno nell'HTML). Comportamento copiato dall'overlay AI (ai.css / ai.js): il body viene bloccato con position:fixed, il pannello scorre da solo con overflow-y:auto + -webkit-overflow-scrolling:touch. Nessuna proprieta' di compositing forzato sugli elementi fixed (regola iOS del progetto, vedi ai.css). ------------------------------------------------------------ Icona: