:root{ --navy:#0A1E3B; --navy2:#071730; --navy3:#040e1f; --brand:#1668C4; --brand2:#2E9BE6; --sky:#7FCBF3; --sky2:#A9DCF6; --ice:#EAF3FB; --paper:#F5F9FE; --white:#ffffff; --ink:#0C1B2E; --ink2:#31465f; --muted:#6a809a; --gold:#F3B84A; --gold2:#FFD37A; --line:rgba(12,27,46,.10); --shadow:0 24px 60px -24px rgba(8,28,58,.32); --shadow-sm:0 10px 30px -14px rgba(8,28,58,.30); --r:20px; --r-lg:28px; --maxw:1220px; --disp:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'Space Grotesk',system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}h1,h2,h3,h4{font-family:var(--disp);line-height:1.06;letter-spacing:-.02em;font-weight:700}::selection{background:var(--brand2);color:#fff}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.26em;font-weight:600;color:var(--brand)}.section{padding:clamp(64px,9vw,128px) 0;position:relative;content-visibility:auto;contain-intrinsic-size:auto 900px}.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--disp);font-weight:600;font-size:.98rem;padding:15px 26px;border-radius:100px;border:0;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s;will-change:transform}.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 14px 34px -12px rgba(22,104,196,.7)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 44px -12px rgba(22,104,196,.8)}.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}.btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}.btn svg{width:18px;height:18px;transition:transform .35s}.btn:hover svg{transform:translateX(3px)}/* ============ NAV ============ */ header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,box-shadow .4s,padding .4s;padding:18px 0}header.scrolled{background:rgba(247,251,254,.86);backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 1px 0 var(--line);padding:10px 0}.nav{display:flex;align-items:center;justify-content:space-between;gap:18px}.nav-logo{position:relative;display:inline-block;width:172px;height:38px}.nav-logo img{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:opacity .35s,height .4s}.logo-c{opacity:0}header.scrolled .nav-logo{height:32px}header.scrolled .nav-logo img{height:32px}header.scrolled .logo-w{opacity:0}header.scrolled .logo-c{opacity:1}.wordmark{font-family:var(--disp);font-weight:800;letter-spacing:-.01em}.nav-links{display:flex;align-items:center;gap:30px;list-style:none}.nav-links a{font-family:var(--disp);font-weight:500;color:rgba(255,255,255,.9);position:relative;transition:color .3s}.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--brand2);transition:width .3s}.nav-links a:hover{color:#fff}.nav-links a:hover::after{width:100%}header.scrolled .nav-links a{color:var(--ink2)}header.scrolled .nav-links a:hover{color:var(--brand)}.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}.burger span{width:26px;height:2px;background:#fff;border-radius:2px;transition:.3s}header.scrolled .burger span{background:var(--ink)}.mobile-menu{position:fixed;inset:0;z-index:130;background:var(--navy2);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:40px;transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);visibility:hidden}.mobile-menu.open{transform:translateX(0);visibility:visible}.mobile-menu a{font-family:var(--disp);font-weight:600;font-size:1.7rem;color:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}.mobile-menu .mclose{position:absolute;top:26px;right:26px;font-size:2rem;color:#fff;background:none;border:0;cursor:pointer;line-height:1}/* ============ HERO ============ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(165deg,var(--navy) 0%,var(--navy2) 55%,var(--navy3) 100%)}.hero-sky{position:absolute;inset:0;background:radial-gradient(120% 90% at 78% -10%,rgba(46,155,230,.42),transparent 55%),radial-gradient(80% 60% at 12% 8%,rgba(127,203,243,.18),transparent 60%),linear-gradient(165deg,var(--navy),var(--navy2) 60%,var(--navy3))}/* louver light bands - evokes frangisole / persiane */ .hero-louvers{position:absolute;inset:0;opacity:.5;background-image:repeating-linear-gradient(100deg,transparent 0 48px,rgba(169,220,246,.05) 48px 49px,transparent 49px 96px);mix-blend-mode:screen;animation:louvShift 14s linear infinite} @keyframes louvShift{0%{background-position:0 0}100%{background-position:96px 0}}/* god rays */ .rays{position:absolute;top:-30%;right:-5%;width:120%;height:150%;pointer-events:none;mix-blend-mode:screen;opacity:.85;transform-origin:top center;animation:raysSway 26s ease-in-out infinite;will-change:transform} @keyframes raysSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.ray{position:absolute;top:0;left:50%;transform-origin:top center;width:46vmax;height:120%;background:linear-gradient(to bottom,rgba(174,222,250,.30),rgba(174,222,250,0) 70%);filter:blur(6px);animation:rayglow 7s ease-in-out infinite}.ray:nth-child(1){transform:rotate(14deg) translateX(-10vmax);animation-delay:0s}.ray:nth-child(2){transform:rotate(19deg) translateX(2vmax);opacity:.7;animation-delay:1.1s}.ray:nth-child(3){transform:rotate(24deg) translateX(14vmax);opacity:.55;animation-delay:2.2s}.ray:nth-child(4){transform:rotate(29deg) translateX(26vmax);opacity:.4;animation-delay:.6s} @keyframes rayglow{0%,100%{opacity:.25}50%{opacity:.9}}/* floating luminous dust */ .dust{position:absolute;inset:0;pointer-events:none}.dust i{position:absolute;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#cfeeff,rgba(207,238,255,0));animation:float linear infinite} @keyframes float{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}90%{opacity:.7}100%{transform:translateY(-120vh) translateX(30px);opacity:0}}/* faint glass grid reflection at base */ .hero-glass{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(46,155,230,.10),transparent);pointer-events:none}.hero-inner{position:relative;z-index:5;width:100%;padding-top:90px}.hero-logo{width:min(600px,84vw);margin-bottom:30px;filter:drop-shadow(0 10px 46px rgba(127,203,243,.34));animation:logoFloat 7s ease-in-out infinite;will-change:transform} @keyframes logoFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}.hero .hero-tag-line{color:#fff;font-weight:700;font-size:clamp(1.45rem,3.4vw,2.5rem);letter-spacing:-.02em;max-width:22ch;margin-bottom:2px}.hero h1{color:#fff;font-weight:800;font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.03em;max-width:16ch}.hero h1 .lux{position:relative;background:linear-gradient(120deg,var(--sky2),var(--gold2),var(--sky2));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:luxShimmer 6s linear infinite} @keyframes luxShimmer{0%{background-position:0% 0}100%{background-position:220% 0}}.hero p.lead{color:rgba(233,243,251,.86);font-size:clamp(1.05rem,2.1vw,1.28rem);max-width:52ch;margin:26px 0 38px;font-weight:400}.hero-cta{display:flex;gap:14px;flex-wrap:wrap}.hero-tags{display:flex;gap:26px;flex-wrap:wrap;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}.hero-tag{color:#fff}.hero-tag b{font-family:var(--disp);display:block;font-weight:600}.hero-tag span{color:var(--sky);font-family:var(--mono);letter-spacing:.04em}.scrolldown{position:absolute;left:50%;transform:translateX(-50%);z-index:6;color:rgba(255,255,255,.6);font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}.scrolldown .line{width:1px;height:40px;background:linear-gradient(to bottom,var(--sky),transparent);animation:scrolldrop 2s ease-in-out infinite} @keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}/* ============ MARQUEE STRIP ============ */ .strip{background:var(--ink);color:#fff;overflow:hidden;padding:16px 0}.marquee{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:marq 28s linear infinite}.marquee span{font-family:var(--disp);font-weight:600;display:inline-flex;align-items:center;gap:16px;opacity:.9}.marquee span::before{content:"✦";color:var(--gold);font-size:.8rem} @keyframes marq{to{transform:translateX(-50%)}}/* ============ reveal ============ */ .reveal{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.sec-head{max-width:660px}.sec-head.center{margin-inline:auto;text-align:center}.sec-head h2{margin:16px 0 18px;color:var(--ink)}.sec-head p{color:var(--ink2)}/* ============ ABOUT ============ */ .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}.about-copy h2{font-size:clamp(1.9rem,4.2vw,3rem);margin:16px 0 20px}.about-copy p{color:var(--ink2);margin-bottom:18px}.about-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.pill{font-family:var(--mono);font-weight:600;letter-spacing:.03em;padding:9px 16px;border-radius:100px;background:var(--ice);color:var(--brand);border:1px solid var(--line)}.about-media{position:relative}.about-media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow);aspect-ratio:4/5}.about-badge{position:absolute;left:-22px;bottom:28px;background:#fff;border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow);border:1px solid var(--line);max-width:230px}.about-badge .big{font-family:var(--disp);font-weight:800;font-size:1.6rem;background:linear-gradient(120deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}.about-badge small{color:var(--ink2);font-size:.86rem;display:block;margin-top:6px}.about-media .glow{position:absolute;inset:-30px;background:radial-gradient(circle at 70% 30%,rgba(46,155,230,.28),transparent 60%);filter:blur(20px);z-index:-1}/* ============ PRODUCTS ============ */ .filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}.filter{font-family:var(--disp);font-weight:600;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;transition:.3s}.filter:hover{border-color:var(--brand2);color:var(--brand)}.filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transform:translateZ(0);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,opacity .5s}.card.hide{display:none}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.card img{position:absolute;inset:0;width:100%;height:100%;transition:transform .9s cubic-bezier(.2,.8,.2,1)}.card:hover img{transform:scale(1.08)}.card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(4,14,31,.9) 6%,rgba(4,14,31,.28) 46%,rgba(4,14,31,.05) 78%)}.card::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);transform:translateX(-120%);transition:transform .8s}.card:hover::after{transform:translateX(120%)}.card-body{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end}.card-cat{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin-bottom:8px}.card h3{color:#fff;margin-bottom:8px}.card p{color:rgba(233,243,251,.82);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .5s,margin .5s}.card:hover p{max-height:120px;opacity:1;margin-top:4px}.card .arrow{position:absolute;top:22px;right:22px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;transition:.4s}.card:hover .arrow{background:var(--brand2);transform:rotate(-45deg)}.card-body{padding:20px 18px 18px}.card .badge-patent~*, .card-body{padding-top:52px}.badge-patent{position:absolute;top:20px;left:20px;z-index:3;font-family:var(--mono);font-weight:700;letter-spacing:.08em;background:var(--gold);color:#3a2a00;padding:6px 12px;border-radius:100px;box-shadow:0 6px 18px -6px rgba(243,184,74,.8)}/* ============ PATENT / FEATURE DARK BAND ============ */ .dark-band{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;position:relative;overflow:hidden}.dark-band .rays2{position:absolute;top:-20%;left:-10%;width:60%;height:140%;background:linear-gradient(120deg,rgba(127,203,243,.14),transparent 60%);filter:blur(30px);pointer-events:none;animation:huePulse 9s ease-in-out infinite} @keyframes huePulse{0%,100%{opacity:.6}50%{opacity:1}}.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative;z-index:2}.feat-copy .eyebrow{color:var(--sky)}.feat-copy h2{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);margin:16px 0 20px}.feat-copy p{color:rgba(233,243,251,.82);margin-bottom:16px}.feat-list{list-style:none;margin-top:24px;display:grid;gap:14px}.feat-list li{display:flex;gap:14px;align-items:flex-start;color:rgba(233,243,251,.92);font-size:.98rem}.feat-list svg{flex:none;width:22px;height:22px;color:var(--sky);margin-top:2px}.patent-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.pbadge{font-family:var(--mono);font-weight:600;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff}.pbadge b{color:var(--gold)}.feat-media{position:relative}.feat-media img{width:100%;border-radius:var(--r-lg);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}.feat-media .mini{position:absolute;border-radius:var(--r);border:5px solid var(--navy2);box-shadow:var(--shadow)}/* ============ PROCESS ============ */ .proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}.proc-step{padding-top:30px}.proc-step .num{font-family:var(--mono);font-weight:700;color:var(--brand);letter-spacing:.1em}.proc-step .bar{height:3px;background:var(--ice);border-radius:3px;position:relative;margin:14px 0 18px;overflow:hidden}.proc-visual{margin-top:56px;border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--shadow)}.proc-visual img{aspect-ratio:21/8}.proc-visual .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,14,31,.7),transparent 55%);display:flex;align-items:center}.proc-visual .ov div{padding:0 clamp(24px,5vw,64px);color:#fff;max-width:560px}.proc-visual .ov h3{color:#fff;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:10px}.proc-visual .ov p{color:rgba(233,243,251,.85)}/* ============ MATERIALS DARK ============ */ .mat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}.mat-head h2{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem)}.mat-head p{color:rgba(233,243,251,.8);max-width:44ch}.mat-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:20px}.mat-card{border-radius:var(--r-lg);overflow:hidden;position:relative;background:#0d2136;border:1px solid rgba(255,255,255,.08)}.mat-card img{width:100%;height:100%;transition:transform .8s}.mat-card:hover img{transform:scale(1.06)}.mat-card .lab{position:absolute;left:20px;bottom:18px;z-index:2}.mat-card .lab b{font-family:var(--disp);color:#fff;font-size:1.1rem;display:block}.mat-card .lab span{font-family:var(--mono);color:var(--sky);letter-spacing:.14em;text-transform:uppercase}.mat-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(4,14,31,.85),transparent 55%)}/* ============ GALLERY ============ */ /* .gal: layout sostituito da CSS Grid nel blocco patch in fondo */ /* .gal figure: vedi blocco patch */ /* .gal img: vedi blocco patch */ .gal figure:hover img{transform:scale(1.07)}/* ============ CONTACT ============ */ .contact{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;position:relative;overflow:hidden}.contact .rays3{position:absolute;top:-30%;right:-10%;width:70%;height:160%;background:linear-gradient(140deg,rgba(46,155,230,.18),transparent 55%);filter:blur(30px);pointer-events:none;animation:huePulse 11s ease-in-out infinite}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);position:relative;z-index:2}.contact-copy h2{color:#fff;font-size:clamp(2rem,4.6vw,3.2rem);margin:16px 0 18px}.contact-copy p{color:rgba(233,243,251,.82);margin-bottom:26px;max-width:44ch}.contact-info{display:grid;gap:6px;margin-top:26px}.ci-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);transition:padding-left .3s}a.ci-row:hover{padding-left:6px}a.ci-row:hover b{color:var(--sky)}.ci-row svg{width:22px;height:22px;color:var(--sky);flex:none}.ci-row b{font-family:var(--disp);font-weight:600;display:block;font-size:1rem}.ci-row span{color:rgba(233,243,251,.7);font-size:.9rem}.form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);backdrop-filter:blur(8px)}.form label{display:block;font-family:var(--disp);font-weight:500;font-size:.86rem;margin:0 0 8px;color:rgba(233,243,251,.9)}.form input,.form textarea,.form select{width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font-family:var(--body);font-size:.98rem;transition:.3s}.form input::placeholder,.form textarea::placeholder{color:rgba(233,243,251,.4)}.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--brand2);background:rgba(255,255,255,.08)}.form select option{color:#0c1b2e}.form textarea{resize:vertical;min-height:110px}.form .btn{width:100%;justify-content:center;margin-top:6px}.form-note{color:rgba(233,243,251,.55);text-align:center}/* ============ FOOTER ============ */ footer{background:var(--navy3);color:rgba(233,243,251,.7);padding:64px 0 28px}.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}.foot-logo{width:210px;margin-bottom:18px}.foot-brand p{max-width:34ch}.foot-col h3{font-family:var(--disp);color:#fff;margin-bottom:16px;font-weight:600}.foot-col a,.foot-col p{display:block;font-size:.9rem;color:rgba(233,243,251,.65);padding:5px 0;transition:.3s}.foot-col a:hover{color:var(--sky)}.foot-social{display:flex;gap:12px;margin-top:14px}.foot-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;transition:.3s}.foot-social a:hover{background:var(--brand2);transform:translateY(-3px)}.foot-social svg{width:18px;height:18px}.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);color:rgba(233,243,251,.5)}/* ============ AMBIENT LIGHT / MOTION ============ */ #scrollProgress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--brand),var(--brand2),var(--sky));z-index:120;will-change:transform;box-shadow:0 0 12px rgba(46,155,230,.6)}.pfx{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}.parallax{will-change:transform;transform:scale(1.12)}.about-media .pfx img{aspect-ratio:4/5;display:block}.feat-media .pfx{border-radius:var(--r-lg)}.feat-media .pfx img{display:block}.section>.wrap{position:relative;z-index:2}.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.ambient-move{position:absolute;inset:0;will-change:transform}.orb{position:absolute;border-radius:50%;filter:blur(56px);pointer-events:none;will-change:transform;contain:strict}.orb.a{width:min(560px,72vw);height:min(560px,72vw);left:-8%;top:-12%;background:radial-gradient(circle,rgba(46,155,230,.27),transparent 70%);animation:drift1 24s ease-in-out infinite}.orb.b{width:min(460px,60vw);height:min(460px,60vw);right:-6%;bottom:-14%;background:radial-gradient(circle,rgba(127,203,243,.25),transparent 70%);animation:drift2 30s ease-in-out infinite}.orb.c{width:min(360px,50vw);height:min(360px,50vw);left:42%;top:26%;background:radial-gradient(circle,rgba(243,184,74,.14),transparent 70%);animation:drift1 36s ease-in-out infinite reverse} @keyframes drift1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(7%,-5%,0)}} @keyframes drift2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-8%,6%,0)}}.dark-band .orb.a{background:radial-gradient(circle,rgba(46,155,230,.36),transparent 70%)}.dark-band .orb.b{background:radial-gradient(circle,rgba(127,203,243,.30),transparent 70%)}.contact .orb.a{background:radial-gradient(circle,rgba(46,155,230,.34),transparent 70%)}.contact .orb.b{background:radial-gradient(circle,rgba(127,203,243,.28),transparent 70%)}/* sweeping light shaft */ .beam{position:absolute;top:-25%;left:-45%;width:42%;height:150%;pointer-events:none;transform:skewX(-12deg);background:linear-gradient(100deg,transparent,rgba(174,222,250,.05),transparent);animation:beamMove 17s ease-in-out infinite;will-change:transform,opacity}.dark-band .beam,.contact .beam{background:linear-gradient(100deg,transparent,rgba(174,222,250,.11),transparent)} @keyframes beamMove{0%{transform:translate3d(0,0,0) skewX(-12deg);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate3d(380%,0,0) skewX(-12deg);opacity:0}}/* hero aurora */ .hero-aurora{position:absolute;inset:-25%;z-index:1;pointer-events:none;mix-blend-mode:screen;filter:blur(28px);will-change:transform; background:radial-gradient(38% 40% at 22% 28%,rgba(46,155,230,.44),transparent 62%), radial-gradient(34% 36% at 80% 18%,rgba(127,203,243,.36),transparent 62%), radial-gradient(46% 46% at 62% 82%,rgba(18,58,116,.5),transparent 62%); animation:aurora 22s ease-in-out infinite} @keyframes aurora{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(-4%,3%,0)}66%{transform:translate3d(5%,-3%,0)}}/* ============ RESPONSIVE ============ */ @media(max-width:980px){ .nav-links{display:none}.burger{display:flex} .about-grid{grid-template-columns:1fr;gap:40px} .about-media img{aspect-ratio:16/11} .feat-grid{grid-template-columns:1fr;gap:36px} .feat-media{order:-1} .prod-grid{grid-template-columns:repeat(2,1fr)} .proc-grid{grid-template-columns:repeat(2,1fr);gap:26px} .mat-grid{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr} /* .gal 2 col: vedi blocco patch */ .foot-grid{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .wrap{padding:0 18px} .nav-cta{display:none} .scrolldown{display:none} .hero{align-items:flex-start} .hero-inner{padding-top:118px;padding-bottom:56px} .hero-tags{gap:18px 22px;margin-top:40px} .prod-grid{grid-template-columns:1fr} .proc-grid{grid-template-columns:1fr} .mat-grid{grid-template-columns:1fr} /* .gal 1 col: vedi blocco patch */ .foot-grid{grid-template-columns:1fr} .about-badge{left:0} .card p{max-height:120px;opacity:1;margin-top:4px} .card .arrow{display:none} /* lighten effects on mobile for fluidity */ .rays,.dust{opacity:.4} .ray{animation:none} .hero-louvers{opacity:.3} .orb{opacity:.55;filter:blur(50px)} .orb.c{display:none} .hero-aurora{filter:blur(24px);opacity:.85} .parallax{transform:none} }.wa-fab{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:transform .3s}.wa-fab:hover{transform:scale(1.08)}.wa-fab svg{width:30px;height:30px;color:#fff} @media print{.wa-fab{display:none}} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} }/* ================================================================== PATCH — galleria, lightbox e specchietti showroom/online ================================================================== */ /* ---------- FIX GALLERIA (ex multi-column) ---------- Il layout a colonne CSS rompeva le figure (immagini spezzate / sovrapposte / salti di layout) perché ogni figure ha una transform di reveal dentro un contenitore multicolonna, dentro una sezione con content-visibility:auto. Sostituito con CSS Grid. */ .gal{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:150px; grid-auto-flow:dense; gap:18px}.gal figure{ margin:0; grid-row:span 2; border-radius:var(--r); overflow:hidden; position:relative; box-shadow:var(--shadow-sm); background:var(--ice)}.gal figure:nth-child(4n+1){grid-row:span 3}.gal figure:nth-child(6n+4){grid-row:span 3}.gal img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1)}.gal figure:hover img{transform:scale(1.07)}.gal figcaption{ position:absolute;inset:0;display:flex;align-items:flex-end; color:#fff;font-family:var(--disp);font-weight:600; background:linear-gradient(to top,rgba(4,14,31,.78),transparent 58%); opacity:0;transition:opacity .4s;pointer-events:none}.gal figure:hover figcaption{opacity:1}/* su touch l'hover non esiste: le didascalie restano visibili */ @media(hover:none){ .gal figcaption{opacity:1} }/* ---------- INDICATORE "CLICCA PER INGRANDIRE" ---------- */ .zoomable{cursor:zoom-in}.zoom-hint{ position:absolute;top:14px;right:14px;z-index:4; width:38px;height:38px;border-radius:50%; background:rgba(7,23,48,.55);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.32); display:grid;place-items:center;color:#fff; opacity:0;transform:scale(.85); transition:opacity .35s,transform .35s,background .35s; pointer-events:none}.zoom-hint svg{width:18px;height:18px}.gal figure:hover .zoom-hint, .mat-card:hover .zoom-hint, .pfx:hover .zoom-hint, .proc-visual:hover .zoom-hint{opacity:1;transform:scale(1)} @media(hover:none){ .zoom-hint{opacity:.9;transform:scale(1)} }.card .zoom-hint{display:none}/* ---------- LIGHTBOX ---------- */ .lightbox{ position:fixed;inset:0;z-index:200; background:rgba(4,14,31,.94); backdrop-filter:blur(14px) saturate(1.1); display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .35s; padding:clamp(12px,3vw,44px)}.lightbox.open{opacity:1;visibility:visible}body.lb-lock{overflow:hidden}.lb-stage{ position:relative;max-width:100%;max-height:100%; display:flex;align-items:center;justify-content:center; overflow:auto;-webkit-overflow-scrolling:touch}.lb-img{ max-width:min(1400px,92vw);max-height:82vh; width:auto;height:auto;object-fit:contain; border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.85); cursor:zoom-in; transform:scale(.94);opacity:0; transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .35s; user-select:none;-webkit-user-drag:none}.lightbox.open .lb-img{transform:scale(1);opacity:1}.lb-img.zoomed{ max-width:none;max-height:none;width:auto;height:auto; cursor:zoom-out;border-radius:0}.lb-cap{ position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom)); text-align:center;color:rgba(233,243,251,.92); font-family:var(--disp);font-weight:600;font-size:.98rem; padding:0 70px;pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.7)}.lb-cap small{ display:block;font-family:var(--mono);font-weight:500;font-size:.72rem; letter-spacing:.18em;text-transform:uppercase;color:var(--sky);margin-top:6px}.lb-btn{ position:absolute;z-index:3; width:52px;height:52px;border-radius:50%; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24); color:#fff;display:grid;place-items:center;cursor:pointer; backdrop-filter:blur(8px);transition:background .3s,transform .3s}.lb-btn:hover{background:var(--brand);transform:scale(1.08)}.lb-btn svg{width:22px;height:22px}.lb-close{top:max(16px,env(safe-area-inset-top));right:16px}.lb-prev{left:16px;top:50%;transform:translateY(-50%)}.lb-next{right:16px;top:50%;transform:translateY(-50%)}.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.08)}.lb-count{ position:absolute;top:max(24px,env(safe-area-inset-top));left:22px;z-index:3; font-family:var(--mono);font-size:.78rem;letter-spacing:.16em; color:rgba(233,243,251,.72)} @media(max-width:600px){ .lb-img{max-width:94vw;max-height:70vh} .lb-btn{width:44px;height:44px} .lb-prev{left:8px}.lb-next{right:8px} .lb-cap{font-size:.88rem;padding:0 14px} } @media(prefers-reduced-motion:reduce){ .lb-img{transform:none!important;opacity:1!important} }/* ================================================================== PATCH PRO — accessibilità, trust, FAQ, CTA sticky, consenso cookie ================================================================== */ /* ---------- accessibilità ---------- */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:300; background:var(--brand);color:#fff;padding:14px 22px;border-radius:0 0 12px 0; font-family:var(--disp);font-weight:600}.skip-link:focus{left:0}.skip-link+.skip-link:focus{left:0;top:52px}:focus-visible{outline:3px solid var(--brand2);outline-offset:3px;border-radius:6px}.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}/* ---------- striscia di rassicurazione ---------- */ .trust{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px);margin-top:clamp(32px,4vw,54px)}.trust-item{ display:flex;gap:14px;align-items:flex-start;border-radius:18px; background:rgba(255,255,255,.72);border:1px solid var(--line); backdrop-filter:blur(8px)}.trust-item svg{flex:none;width:26px;height:26px;color:var(--brand);margin-top:2px}.trust-item b{display:block;font-family:var(--disp);margin-bottom:4px;color:var(--ink)}.trust-item span{color:var(--ink2);line-height:1.5} @media(max-width:980px){ .trust{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .trust{grid-template-columns:1fr} }/* ---------- FAQ ---------- */ .faq{max-width:880px;margin:0 auto}.faq-item{ border:1px solid var(--line);border-radius:18px;background:#fff; margin-bottom:12px;overflow:hidden;transition:border-color .3s,box-shadow .3s}.faq-item.open{border-color:var(--brand2);box-shadow:var(--shadow-sm)}.faq-q{ width:100%;text-align:left;background:none;border:0;cursor:pointer;position:relative; font-family:var(--disp);font-weight:600;color:var(--ink); display:block;line-height:1.45}.faq-q::after{ content:"";position:absolute;right:24px;top:50%;width:13px;height:13px; border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand); transform:translateY(-70%) rotate(45deg); transition:transform .35s cubic-bezier(.2,.8,.2,1)}.faq-item.open .faq-q::after{transform:translateY(-20%) rotate(-135deg)}.faq-a{ max-height:0;overflow:hidden; transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s; opacity:0}.faq-item.open .faq-a{opacity:1}.faq-a p{color:var(--ink2);line-height:1.7}.faq-a a{color:var(--brand);font-weight:600}/* ---------- barra CTA fissa su mobile ---------- */ .mcta{ position:fixed;left:0;right:0;bottom:0;z-index:120;display:none; grid-template-columns:1fr 1fr 1fr;gap:1px; background:var(--line); padding-bottom:env(safe-area-inset-bottom); transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 30px -18px rgba(4,14,31,.5)}.mcta.show{transform:none}.mcta a{ background:#fff;padding:13px 6px 12px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:5px; font-family:var(--disp);font-weight:600;font-size:.74rem;color:var(--ink)}.mcta a svg{width:20px;height:20px;color:var(--brand)}.mcta a.acc{background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff}.mcta a.acc svg{color:#fff} @media(max-width:820px){ .mcta{display:grid} body{padding-bottom:64px} .wa-fab{bottom:82px} }/* ---------- torna su ---------- */ /* Il badge "Powered by Netlify" sta in basso a destra: alzo i pulsanti flottanti per non farli coprire. */ .wa-fab{bottom:104px!important} @media(max-width:820px){ .wa-fab{bottom:150px!important} }.totop{ position:fixed;right:22px;bottom:176px;z-index:110; width:46px;height:46px;border-radius:50%;border:1px solid var(--line); background:rgba(255,255,255,.9);backdrop-filter:blur(8px); display:grid;place-items:center;cursor:pointer;color:var(--brand); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .35s,transform .35s,visibility .35s,background .3s; box-shadow:var(--shadow-sm)}.totop.show{opacity:1;visibility:visible;transform:none}.totop:hover{background:var(--brand);color:#fff}.totop svg{width:20px;height:20px} @media(max-width:820px){ .totop{bottom:222px;right:18px} }/* ---------- banner cookie ---------- */ .cbar{ position:fixed;left:0;right:0;bottom:0;z-index:250; background:var(--navy);color:#fff; padding:22px clamp(18px,4vw,40px) calc(22px + env(safe-area-inset-bottom)); transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.8,.2,1); box-shadow:0 -20px 50px -25px rgba(0,0,0,.7); border-top:1px solid rgba(255,255,255,.12)}.cbar.show{transform:none}.cbar-in{ max-width:1180px;margin:0 auto; display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between}.cbar p{font-size:.9rem;color:rgba(233,243,251,.85);max-width:620px;line-height:1.6;margin:0}.cbar p a{color:var(--sky);text-decoration:underline}.cbar-btns{display:flex;gap:10px;flex-wrap:wrap}.cbar-btns button{ font-family:var(--disp);font-weight:600;font-size:.88rem; padding:12px 20px;border-radius:100px;cursor:pointer;border:1px solid transparent; transition:transform .25s,background .25s,border-color .25s}.cbar-btns button:hover{transform:translateY(-2px)}.c-ok{background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff}.c-no{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.24)}.c-pref{background:none;color:rgba(233,243,251,.75);text-decoration:underline} @media(max-width:700px){ .cbar-in{flex-direction:column;align-items:stretch} .cbar-btns{justify-content:stretch} .cbar-btns button{flex:1} }/* ---------- modale legale ---------- */ .lgl{ position:fixed;inset:0;z-index:260;background:rgba(4,14,31,.72); backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px; opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}.lgl.open{opacity:1;visibility:visible}.lgl-box{ background:#fff;border-radius:var(--r-lg);max-width:760px;width:100%; max-height:86vh;overflow:auto;padding:clamp(26px,4vw,44px);position:relative; transform:translateY(18px) scale(.98);transition:transform .4s cubic-bezier(.2,.8,.2,1)}.lgl.open .lgl-box{transform:none}.lgl-box h3{font-size:1.5rem;margin-bottom:8px}.lgl-box h4{font-family:var(--disp);font-size:1rem;margin:22px 0 8px;color:var(--ink)}.lgl-box p,.lgl-box li{font-size:.92rem;color:var(--ink2);line-height:1.7}.lgl-box ul{padding-left:20px;margin:8px 0}.lgl-box .todo{ background:#FFF7E6;border:1px dashed #E0A45C;border-radius:12px; padding:14px 16px;font-size:.86rem;color:#7A5320;margin:16px 0}.lgl-close{ position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%; border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink2)}.lgl-close:hover{background:var(--ice);color:var(--ink)}.lgl-close svg{width:18px;height:18px}body.lgl-lock{overflow:hidden}/* ---------- form: consenso privacy + stati ---------- */ .consent{ display:flex;gap:11px;align-items:flex-start;margin:4px 0 16px; font-size:.84rem;color:rgba(233,243,251,.78);line-height:1.55}.consent input{ appearance:none;flex:none;margin-top:1px;cursor:pointer; border:1.5px solid rgba(255,255,255,.35);border-radius:6px;background:rgba(255,255,255,.06); transition:background .25s,border-color .25s}.consent input:checked{background:var(--brand2);border-color:var(--brand2)}.consent input:checked::after{content:"";display:block;width:5px;height:10px;margin:2px auto 0; border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}.consent a{color:var(--sky);text-decoration:underline;cursor:pointer}.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}.field input.err,.field textarea.err{border-color:#FF8A7A!important;background:rgba(255,138,122,.08)}.form-ok{ display:flex;gap:12px;align-items:center;padding:16px 18px;border-radius:14px; background:rgba(127,203,243,.12);border:1px solid rgba(127,203,243,.35); color:#CDE9F8;font-size:.92rem;margin-top:14px; animation:cardin .5s ease both}.form-ok svg{width:22px;height:22px;color:#7FCBF3;flex:none}/* ---------- ancore: lo scroll non deve finire sotto l'header fisso ---------- */ html{scroll-padding-top:96px}section[id],#contenuto,main [id]{scroll-margin-top:96px} @media(max-width:820px){ html{scroll-padding-top:82px} section[id]{scroll-margin-top:82px} }/* ---------- APERTURA FLUIDA ---------- Prima gli elementi della prima schermata comparivano a scatto dopo il caricamento, perché aspettavano l'osservatore. Ora tutto ciò che è già visibile all'apertura è mostrato subito, e le transizioni sono più morbide e leggermente più lente. */ .reveal{transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .95s cubic-bezier(.22,.61,.36,1)}html.primo-carico .reveal{transition:none!important}html.primo-carico .reveal.in{opacity:1!important;transform:none!important;filter:none!important}/* il contenuto della prima schermata non usa content-visibility: era una delle cause degli scatti in apertura */ #top,#top *{content-visibility:visible!important}.reveal,.proc-step{will-change:opacity,transform}.reveal.in{will-change:auto}/* ---------- FIX FOTO DEFORMATE ---------- Alcune immagini venivano stirate per riempire il contenitore (object-fit:fill). Ora vengono ritagliate, mai schiacciate. */ .pfx img,.feat-media img,.mini,.parallax,.about-media img,.proc-visual img, .card img,.gal figure img,.mat-card img,.espo-media img{object-fit:cover}/* i loghi non vanno né stirati né ritagliati: si adattano per intero */ .logo-w,.logo-c,.hero-logo,.foot-logo,.nav-logo img{object-fit:contain;height:auto}/* ---------- fallback immagine mancante ---------- */ img{background:linear-gradient(120deg,var(--ice),#fff)}.card img,.gal img,.mat-card img{background:linear-gradient(120deg,#E7EFF7,#F5F9FC)}/* ---------- stampa ---------- */ @media print{ header,.mcta,.totop,.wa-fab,.cbar,.lgl,.ambient,.rays3,.zoom-hint,.lightbox,.form, .tools,.dots,.news-form,.storeband,.strip,.sep{display:none!important} .news{background:none!important;border:1px solid #ccc} .news h2,.news p{color:#000!important} body{background:#fff!important;padding:0} .section{padding:18px 0!important;break-inside:avoid;background:#fff!important} h1,h2,h3{color:#000!important} p,li,span{color:#222!important} .reveal{opacity:1!important;transform:none!important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.72rem;color:#555} }/* ================================================================== PATCH v3 — logo trasparente, animazioni, richiami allo showroom ================================================================== */ /* ---------- FIX LOGO ---------- Lo sfondo di riserva veniva applicato a TUTTE le , quindi si vedeva anche dietro ai loghi PNG trasparenti su header e footer scuri. Ora è limitato ai soli contenitori di fotografie. */ img{background:none}.card img, .gal figure img, .mat-card img, .pfx img, .proc-visual img, .espo-media img{background:linear-gradient(120deg,#E7EFF7,#F5F9FC)}.nav-logo img,.hero-logo,.foot-logo,.logo-w,.logo-c{background:none!important}/* ---------- BANDA SCORREVOLE "VIENI A TROVARCI" ---------- */ .storeband{ position:relative;overflow:hidden; background:linear-gradient(100deg,var(--navy),var(--navy2) 55%,var(--navy3)); border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); padding:15px 0}.storeband-track{ display:flex;width:max-content; animation:stripmove 38s linear infinite; will-change:transform}.storeband:hover .storeband-track{animation-play-state:paused}.storeband-track span{ display:inline-flex;align-items:center;gap:12px;white-space:nowrap; font-family:var(--disp);font-weight:600; color:rgba(233,243,251,.9)}.storeband-track span b{color:var(--sky)}.storeband-track i{ width:6px;height:6px;border-radius:50%; background:var(--gold);flex:none; box-shadow:0 0 12px 2px rgba(212,168,83,.55)}.storeband-track svg{width:17px;height:17px;color:var(--sky)} @keyframes stripmove{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .storeband-track{animation:none} }/* ---------- SEZIONE ESPOSITORI ---------- */ .espo-grid{ display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.8vw,30px)}.espo{ position:relative;border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-sm);background:var(--ice); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}.espo:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.espo-media{position:relative;overflow:hidden;aspect-ratio:4/5}.espo-media img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .9s cubic-bezier(.2,.8,.2,1)}.espo:hover .espo-media img{transform:scale(1.06)}.espo-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(4,14,31,.72),transparent 55%)}.espo-cap{ position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff}.espo-cap b{display:block;font-family:var(--disp);margin-bottom:5px}.espo-cap span{color:rgba(233,243,251,.82);line-height:1.55}/* segnaposto in attesa delle foto reali */ .espo-slot svg{width:42px;height:42px;color:var(--brand);opacity:.55;margin-bottom:14px}.espo-slot b{display:block;font-family:var(--disp);font-size:1.02rem;color:var(--ink);margin-bottom:6px}.espo-slot span{font-size:.86rem;color:var(--ink2);max-width:300px;display:block;line-height:1.6}.espo-slot code{ font-family:var(--mono);font-size:.76rem;background:rgba(22,104,196,.1); padding:3px 8px;border-radius:6px;color:var(--brand);display:inline-block;margin-top:10px} @media(max-width:760px){ .espo-grid{grid-template-columns:1fr} }/* ---------- ANIMAZIONI SPECCHIETTI ---------- */ /* riflesso che attraversa la scheda al passaggio del mouse */ .spec-card::after,.spec-shop::after{pointer-events:none}.spec-shop{overflow:hidden}.spec-shop .sheen{ position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);opacity:0;pointer-events:none}.spec-shop:hover .sheen{animation:sheenrun .9s ease forwards} @keyframes sheenrun{ 0%{left:-60%;opacity:0} 15%{opacity:1} 100%{left:120%;opacity:0} }/* icona che reagisce */ .shop-ic{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}.spec-shop:hover .shop-ic{transform:translateY(-3px) rotate(-4deg) scale(1.06)}/* elenco che entra a cascata */ .spec-shop .shop-list li,.spec-store .spec-list li{ opacity:0;transform:translateX(-10px); transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}.spec-card.in .shop-list li,.spec-card.in .spec-list li{opacity:1;transform:none}.spec-card.in .shop-list li:nth-child(1),.spec-card.in .spec-list li:nth-child(1){transition-delay:.10s}.spec-card.in .shop-list li:nth-child(2),.spec-card.in .spec-list li:nth-child(2){transition-delay:.18s}.spec-card.in .shop-list li:nth-child(3),.spec-card.in .spec-list li:nth-child(3){transition-delay:.26s}.spec-card.in .spec-list li:nth-child(4){transition-delay:.34s}.spec-card.in .spec-list li:nth-child(5){transition-delay:.42s}/* spunte che "disegnano" il segno */ .shop-list svg,.spec-list svg{ stroke-dasharray:24;stroke-dashoffset:24; transition:stroke-dashoffset .6s ease .25s}.spec-card.in .shop-list svg,.spec-card.in .spec-list svg{stroke-dashoffset:0}/* bordo superiore che si allarga */ .spec-shop::before{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.spec-card.in.spec-shop::before{transform:scaleX(1)}/* indirizzo showroom: pulsazione delicata del segnaposto */ .spec-addr svg{animation:pinbeat 3.2s ease-in-out infinite} @keyframes pinbeat{ 0%,100%{transform:none} 50%{transform:translateY(-3px) scale(1.08)} }/* pulsanti: sollevamento uniforme */ .spec-actions .btn{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s}.spec-actions .btn:hover{transform:translateY(-3px)}/* schede rassicurazione: entrata a cascata + icona */ .trust-item{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}.trust-item:hover{transform:translateY(-5px);border-color:var(--brand2);box-shadow:var(--shadow-sm)}.trust-item svg{transition:transform .45s cubic-bezier(.2,.8,.2,1)}.trust-item:hover svg{transform:scale(1.15) rotate(-5deg)}/* FAQ: la riga si accende all'apertura */ .faq-item{position:relative}.faq-item::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--brand),var(--brand2)); transform:scaleY(0);transform-origin:top; transition:transform .45s cubic-bezier(.2,.8,.2,1)}.faq-item.open::before{transform:scaleY(1)}/* pulsante showroom fluttuante nelle sezioni prodotto */ .inline-cta{ display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center; margin-top:clamp(28px,3.5vw,44px);padding:22px clamp(20px,3vw,34px); border-radius:var(--r-lg); background:linear-gradient(120deg,rgba(22,104,196,.07),rgba(46,155,230,.05)); border:1px solid rgba(22,104,196,.16); text-align:center}.inline-cta p{margin:0;color:var(--ink2)}.inline-cta p b{color:var(--ink);font-family:var(--disp)}.inline-cta .btn{flex:none}.inline-cta svg.pin{width:20px;height:20px;color:var(--brand);flex:none} @media(prefers-reduced-motion:reduce){ .spec-shop .sheen,.spec-addr svg{animation:none!important} .spec-shop .shop-list li,.spec-store .spec-list li{opacity:1!important;transform:none!important} .shop-list svg,.spec-list svg{stroke-dashoffset:0!important} .spec-shop::before{transform:scaleX(1)!important} }/* ================================================================== PATCH v5 — più varietà: movimenti differenziati, separatori, indicatore di sezione, titoli con accento ================================================================== */ /* ---------- 1. MOVIMENTI D'INGRESSO DIFFERENZIATI ---------- Prima ogni blocco entrava allo stesso modo, dal basso. Ora la direzione cambia da sezione a sezione: il ritmo si sente. */ .rv-left{opacity:0;transform:translateX(-38px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}.rv-right{opacity:0;transform:translateX(38px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}.rv-zoom{opacity:0;transform:scale(.93);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}.rv-tilt{opacity:0;transform:perspective(900px) rotateX(9deg) translateY(28px);transform-origin:top center; transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1)}.rv-blur{opacity:0;filter:blur(9px);transform:translateY(18px); transition:opacity .9s ease,filter .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}.rv-left.in,.rv-right.in,.rv-zoom.in,.rv-tilt.in{opacity:1;transform:none}.rv-blur.in{opacity:1;filter:none;transform:none}/* ---------- 2. TITOLI CON ACCENTO CHE SI DISEGNA ---------- */ .sec-head h2{position:relative;display:inline-block}.sec-head h2::after{ content:"";position:absolute;left:0;bottom:-10px;height:3px;width:74px;border-radius:3px; background:linear-gradient(90deg,var(--brand),var(--brand2)); transform:scaleX(0);transform-origin:left; transition:transform .8s cubic-bezier(.2,.8,.2,1) .25s}.sec-head.center h2::after{left:50%;transform:translateX(-50%) scaleX(0);transform-origin:center}.sec-head.in h2::after{transform:scaleX(1)}.sec-head.center.in h2::after{transform:translateX(-50%) scaleX(1)}.dark-band .sec-head h2::after{background:linear-gradient(90deg,var(--sky),var(--gold))}/* ---------- 3. SEPARATORI TRA FASCE CHIARE E SCURE ---------- */ .sep{display:block;width:100%;height:clamp(36px,4.2vw,70px);line-height:0;position:relative;z-index:3;margin-bottom:-1px}.sep svg{display:block;width:100%;height:100%}.sep.flip{transform:rotate(180deg);margin:-1px 0 0}/* ---------- 4. INDICATORE DI SEZIONE (solo desktop largo) ---------- */ .dots{ position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:95; display:flex;flex-direction:column;gap:14px; opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}.dots.show{opacity:1;visibility:visible}.dots button{ width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer; border:1.5px solid rgba(22,104,196,.45);background:transparent; transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s; position:relative}.dots button:hover{transform:scale(1.35)}.dots button.on{background:var(--brand);border-color:var(--brand);transform:scale(1.25)}.dots button::after{ content:attr(data-label); position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(6px); font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink);background:rgba(255,255,255,.95);border:1px solid var(--line); padding:5px 10px;border-radius:8px;white-space:nowrap; opacity:0;pointer-events:none;transition:opacity .3s,transform .3s; box-shadow:var(--shadow-sm)}.dots button:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}.dots.on-dark button{border-color:rgba(127,203,243,.55)}.dots.on-dark button.on{background:var(--sky);border-color:var(--sky)} @media(max-width:1180px){ .dots{display:none} }/* ---------- 5. VARIETÀ NELLE SCHEDE PRODOTTO ---------- */ #prodGrid .card{transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s}#prodGrid .card:nth-child(odd):hover{transform:translateY(-9px) rotate(-.5deg)}#prodGrid .card:nth-child(even):hover{transform:translateY(-9px) rotate(.5deg)}/* ---------- 6. GALLERIA: ritmo meno regolare ---------- */ .gal figure:nth-child(7n+3){grid-row:span 3}.gal figure:nth-child(5n+2){grid-row:span 2}/* ---------- 7. PASSI DEL PROCESSO: linea che si riempie ---------- */ .proc-step{position:relative}.proc-step::before{ content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg,var(--brand),var(--brand2)); transform:scaleY(0);transform-origin:top; transition:transform .7s cubic-bezier(.2,.8,.2,1)}.proc-step.in::before{transform:scaleY(1)}/* ---------- 8. LE DUE BANDE SCORRONO A VELOCITÀ DIVERSE ---------- */ .storeband-track{animation-duration:46s} @media(prefers-reduced-motion:reduce){ .rv-left,.rv-right,.rv-zoom,.rv-tilt,.rv-blur{opacity:1!important;transform:none!important;filter:none!important} .sec-head h2::after{transform:scaleX(1)!important} .sec-head.center h2::after{transform:translateX(-50%) scaleX(1)!important} #prodGrid .card:hover{transform:translateY(-6px)!important} }/* ================================================================== TEMA CHIARO / SCURO + SELETTORE LINGUA ================================================================== */ /* ---------- variabili del tema scuro ---------- Il sito era costruito solo per il chiaro: qui ridefiniamo le variabili di base, e più sotto correggiamo i pochi punti dove il bianco era scritto a mano nel codice. */ html[data-tema="scuro"]{ --paper:#0B1524; --ice:#111E30; --white:#16243A; --ink:#E7EEF6; --ink2:#AFC0D4; --muted:#8496AC; --line:rgba(233,243,251,.14); --navy:#050F1E; --navy2:#040B16; --navy3:#02070F; --shadow:0 24px 60px -24px rgba(0,0,0,.72); --shadow-sm:0 10px 30px -14px rgba(0,0,0,.6); color-scheme:dark}html[data-tema="scuro"] body{background:var(--paper);color:var(--ink)}/* superfici che erano bianche fisse */ html[data-tema="scuro"] .section{background:transparent}html[data-tema="scuro"] .faq-item, html[data-tema="scuro"] .spec-shop, html[data-tema="scuro"] .lgl-box, html[data-tema="scuro"] .mcta a, html[data-tema="scuro"] .form, html[data-tema="scuro"] .about-badge, html[data-tema="scuro"] .pbadge, html[data-tema="scuro"] .filter, html[data-tema="scuro"] .lgl-close, html[data-tema="scuro"] .trust-item{background:rgba(22,36,58,.72);border-color:var(--line)}html[data-tema="scuro"] .totop{background:rgba(22,36,58,.92);border-color:var(--line);color:var(--sky)}html[data-tema="scuro"] .totop:hover{background:var(--brand);color:#fff}html[data-tema="scuro"] .dots button::after{background:rgba(22,36,58,.96);color:var(--ink);border-color:var(--line)}html[data-tema="scuro"] .espo-slot{background:var(--ice);border-color:rgba(46,155,230,.3)}html[data-tema="scuro"] .card .arrow{background:var(--white);color:var(--sky)}html[data-tema="scuro"] .form input, html[data-tema="scuro"] .form textarea, html[data-tema="scuro"] .form select{background:rgba(255,255,255,.05);color:var(--ink)}html[data-tema="scuro"] .btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--line)}html[data-tema="scuro"] .spec-casaforma h3{color:var(--ink)}html[data-tema="scuro"] .foot-social a{background:rgba(255,255,255,.07)}html[data-tema="scuro"] .cbar{background:#050F1E}html[data-tema="scuro"] .lgl-box .todo{background:rgba(224,164,92,.12);color:#E8C89A;border-color:rgba(224,164,92,.4)}html[data-tema="scuro"] .card img, html[data-tema="scuro"] .gal figure img, html[data-tema="scuro"] .mat-card img, html[data-tema="scuro"] .espo-media img{background:linear-gradient(120deg,#152238,#0E1828)}/* header traslucido */ html[data-tema="scuro"] header{background:rgba(11,21,36,.82)}html[data-tema="scuro"] .mm{background:var(--paper)}/* le foto sono state scattate per fondo chiaro: le smorziamo appena */ html[data-tema="scuro"] .gal figure img, html[data-tema="scuro"] .card img{filter:brightness(.94)}/* Accenti testuali: il blu del marchio su fondo scuro arriva solo a 3:1. Come testo passiamo alla variante chiara (5,2–6,1:1). Sui pulsanti il blu resta, perché lì fa da sfondo e non da testo. */ html[data-tema="scuro"] .faq-a a, html[data-tema="scuro"] .spec-foot a, html[data-tema="scuro"] .trust-item svg, html[data-tema="scuro"] .inline-cta svg.pin, html[data-tema="scuro"] .espo-slot svg, html[data-tema="scuro"] .espo-slot code, html[data-tema="scuro"] .pill, html[data-tema="scuro"] .mcta a svg, html[data-tema="scuro"] .chan a.lnk, html[data-tema="scuro"] .filter:hover, html[data-tema="scuro"] header.scrolled .nav-links a:hover{color:var(--brand2)}/* L'occhiello è testo piccolo: sui fondi più saturi il blu del marchio scendeva a 4,3-4,4:1, sotto il minimo. Toni corretti per entrambi i temi. */ .eyebrow{color:#12579F}html[data-tema="scuro"] .eyebrow{color:#7FCBF3}html[data-tema="scuro"] .espo-slot code{background:rgba(46,155,230,.16)}html[data-tema="scuro"] .dots button{border-color:rgba(46,155,230,.55)}html[data-tema="scuro"] .dots button.on{background:var(--brand2);border-color:var(--brand2)}html[data-tema="scuro"] .spec-foot a{border-bottom-color:rgba(46,155,230,.45)}/* logo: la versione blu è poco leggibile su fondo scuro -> diventa bianca */ html[data-tema="scuro"] .nav-logo img, html[data-tema="scuro"] .logo-c{filter:brightness(0) invert(1);opacity:.95}/* la barra di navigazione si comprime prima di andare a capo */ @media(max-width:1500px){ .nav-links{gap:clamp(10px,1.3vw,22px)} .nav-links a{font-size:.92rem;white-space:nowrap} } @media(max-width:1240px){ .nav-links a{font-size:.86rem} .nav-cta{padding:11px 18px;font-size:.88rem;white-space:nowrap} }/* ---------- barra strumenti in alto a destra ---------- */ .tools{display:flex;align-items:center;gap:8px}.tool-btn{ width:40px;height:40px;border-radius:12px;cursor:pointer; border:1px solid var(--line);background:transparent;color:var(--ink); display:grid;place-items:center; transition:background .3s,transform .3s,border-color .3s}.tool-btn:hover{background:rgba(22,104,196,.10);border-color:var(--brand2);transform:translateY(-2px)}.tool-btn svg{width:19px;height:19px}.tool-btn .ico-sole{display:none}html[data-tema="scuro"] .tool-btn .ico-sole{display:block}html[data-tema="scuro"] .tool-btn .ico-luna{display:none}/* selettore lingua */ .lang{position:relative}.lang-btn{ height:40px;padding:0 12px;border-radius:12px;cursor:pointer;gap:8px; border:1px solid var(--line);background:transparent;color:var(--ink); display:flex;align-items:center;font-family:var(--disp);font-weight:600;font-size:.84rem; transition:background .3s,border-color .3s,transform .3s}.lang-btn:hover{background:rgba(22,104,196,.10);border-color:var(--brand2);transform:translateY(-2px)}.lang-btn .flag{font-size:1.15rem;line-height:1}.lang-btn .caret{width:12px;height:12px;opacity:.6;transition:transform .3s}.lang[aria-expanded="true"] .caret{transform:rotate(180deg)}.lang-menu{ position:absolute;top:calc(100% + 10px);right:0;z-index:140;min-width:186px; background:var(--white);border:1px solid var(--line);border-radius:16px; box-shadow:var(--shadow);padding:7px; opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97); transition:opacity .28s,transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s}html:not([data-tema="scuro"]) .lang-menu{background:#fff}.lang[aria-expanded="true"] .lang-menu{opacity:1;visibility:visible;transform:none}.lang-menu button{ width:100%;display:flex;align-items:center;gap:11px; padding:10px 12px;border:0;background:none;cursor:pointer;border-radius:10px; font-family:var(--body);font-size:.92rem;color:var(--ink);text-align:left; transition:background .22s}.lang-menu button:hover{background:rgba(22,104,196,.10)}.lang-menu button[aria-current="true"]{background:rgba(22,104,196,.14);font-weight:600}.lang-menu .flag{font-size:1.2rem;line-height:1}.lang-menu .code{margin-left:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--muted)}/* in-header su schermi stretti la barra si compatta */ @media(max-width:1080px){ .tools .lang-btn .nome{display:none} } @media(max-width:820px){ header .tools{margin-left:auto;margin-right:10px} .tool-btn,.lang-btn{height:36px;width:auto;min-width:36px;padding:0 9px} }/* nel menu mobile la barra si ripete, più larga */ .mm .tools{margin-top:26px;gap:10px;justify-content:center}/* ---------- transizione morbida al cambio tema ---------- */ html.cambio-tema, html.cambio-tema *{transition:background-color .45s ease,color .45s ease,border-color .45s ease!important} @media(prefers-reduced-motion:reduce){ html.cambio-tema,html.cambio-tema *{transition:none!important} }/* ================================================================== PATCH v6 — processo ridisegnato, newsletter, banner cookie ================================================================== */ /* ---------- 1. SEZIONE "COME LAVORIAMO" RIDISEGNATA ---------- La linea verticale aggiunta in precedenza tagliava i numeri e spezzava la lettura. Ora ogni passo è una scheda con pallino numerato e una linea di collegamento orizzontale. */ .proc-step::before{display:none!important}.proc-grid{ display:grid;grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.6vw,22px);position:relative}.proc-step{ position:relative; background:var(--white);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow-sm); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}html:not([data-tema="scuro"]) .proc-step{background:#fff}.proc-step:hover{transform:translateY(-6px);border-color:var(--brand2);box-shadow:var(--shadow)}/* pallino numerato */ .proc-step .num{ width:44px;height:44px;border-radius:50%; display:grid;place-items:center;margin-bottom:16px; font-family:var(--mono);font-weight:700;font-size:.92rem;letter-spacing:.02em; color:#fff;background:linear-gradient(140deg,var(--brand),var(--brand2)); box-shadow:0 10px 22px -10px rgba(22,104,196,.75); transition:transform .5s cubic-bezier(.2,.8,.2,1)}.proc-step:hover .num{transform:scale(1.08) rotate(-5deg)}/* linea di avanzamento sotto il pallino */ .proc-step .bar{ height:3px;background:var(--ice);border-radius:3px; position:relative;margin:0 0 16px;overflow:hidden}html[data-tema="scuro"] .proc-step .bar{background:rgba(233,243,251,.12)}.proc-step .bar::after{ content:"";position:absolute;left:0;top:0;height:100%;width:0; background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width 1.1s cubic-bezier(.2,.8,.2,1) .15s}.proc-step.in .bar::after{width:100%}.proc-step h3{margin-bottom:8px;line-height:1.3}.proc-step p{color:var(--ink2);line-height:1.6}/* freccia di collegamento tra i passi, solo su schermo largo */ @media(min-width:1100px){ .proc-step:not(:last-child)::after{ content:"";position:absolute;right:calc(-1 * clamp(14px,1.6vw,22px) / 2 - 4px); top:48px;width:9px;height:9px;border-top:2px solid var(--brand2); border-right:2px solid var(--brand2);transform:rotate(45deg);opacity:.55; } } @media(max-width:1099px){ .proc-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:820px){ .proc-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .proc-grid{grid-template-columns:1fr} }/* ---------- 2. NEWSLETTER ---------- */ .news{ position:relative;overflow:hidden;border-radius:var(--r-lg); padding:clamp(30px,4.4vw,52px); background:linear-gradient(140deg,var(--navy),var(--navy2) 68%,var(--navy3)); color:#fff;box-shadow:var(--shadow); display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,48px);align-items:center}.news::after{ content:"";position:absolute;top:-45%;right:-12%;width:60%;height:190%; background:radial-gradient(circle at 50% 40%,rgba(46,155,230,.30),transparent 62%); filter:blur(30px);pointer-events:none}.news-txt{position:relative;z-index:2}.news .spec-tag{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:var(--sky)}.news h2{color:#fff;margin-bottom:12px}.news p{color:rgba(233,243,251,.84)}.news-form{position:relative;z-index:2}.news-row{display:flex;gap:10px;flex-wrap:wrap}.news-row input{ flex:1 1 220px;min-width:0; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18); border-radius:100px;padding:15px 22px;color:#fff;font-family:var(--body);font-size:.96rem; transition:border-color .3s,background .3s}.news-row input::placeholder{color:rgba(233,243,251,.5)}.news-row input:focus{outline:none;border-color:var(--brand2);background:rgba(255,255,255,.11)}.news-row input.err{border-color:#FF8A7A;background:rgba(255,138,122,.10)}.news-row .btn{flex:none}.news-consent{ display:flex;gap:11px;align-items:flex-start;margin-top:16px; font-size:.82rem;color:rgba(233,243,251,.88);line-height:1.55}.news-consent input{ appearance:none;flex:none;width:19px;height:19px;margin-top:1px;cursor:pointer; border:1.5px solid rgba(255,255,255,.35);border-radius:6px;background:rgba(255,255,255,.06); transition:background .25s,border-color .25s}.news-consent input:checked{background:var(--brand2);border-color:var(--brand2)}.news-consent input:checked::after{content:"";display:block;width:5px;height:9px;margin:2px auto 0; border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}.news-consent a{color:var(--sky);text-decoration:underline;cursor:pointer}.news-note{margin-top:12px;font-size:.82rem;min-height:1.2em}.news-ok{ display:flex;gap:12px;align-items:center;padding:16px 18px;border-radius:14px; background:rgba(127,203,243,.12);border:1px solid rgba(127,203,243,.35); color:#CDE9F8;font-size:.93rem;animation:cardin .5s ease both}.news-ok svg{width:22px;height:22px;color:#7FCBF3;flex:none} @media(max-width:900px){ .news{grid-template-columns:1fr} }/* ---------- 3. BANNER COOKIE SOPRA IL BADGE NETLIFY ---------- Il badge "Powered by Netlify" sta in basso a destra e copriva i pulsanti del banner. Lasciamo lo spazio libero. */ .cbar{padding-bottom:calc(78px + env(safe-area-inset-bottom))}.cbar-in{padding-right:0} @media(min-width:701px){ .cbar-in{max-width:1180px} .cbar-btns{margin-right:190px} /* larghezza del badge Netlify */ } @media(max-width:700px){ .cbar{padding-bottom:calc(86px + env(safe-area-inset-bottom))} }/* ================================================================== APERTURA — sequenza d'ingresso della prima schermata ================================================================== Prima gli elementi comparivano di colpo, tutti insieme, appena il JavaScript era pronto. Ora entrano in ordine, con una dissolvenza morbida: logo, titolo, testo, pulsanti, etichette. Usiamo solo opacity, transform e filter: sono le uniche proprietà che la scheda grafica anima senza ricalcolare il layout, quindi niente scatti. */ /* velo iniziale: copre il salto tra HTML grezzo e pagina impaginata */ .veil{ position:fixed;inset:0;z-index:400;pointer-events:none; background:linear-gradient(160deg,#0A1E3B,#071730 60%,#040e1f); opacity:1}html.apertura-fatta .veil{ opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1)}html.apertura-finita .veil{display:none}/* stato di partenza degli elementi della prima schermata */ html.apertura .hero-logo, html.apertura .hero-tag-line, html.apertura .hero-inner .lead, html.apertura .hero-cta, html.apertura .hero-tags, html.apertura .scrolldown, html.apertura header{ opacity:0; will-change:opacity,transform}html.apertura .hero-logo{transform:translateY(24px) scale(.97)}html.apertura .hero-tag-line{transform:translateY(20px)}html.apertura .hero-inner .lead{transform:translateY(16px)}html.apertura .hero-cta{transform:translateY(16px)}html.apertura .hero-tags{transform:translateY(14px)}html.apertura .scrolldown{transform:translateY(10px)}html.apertura header{transform:translateY(-100%)}/* arrivo: stessa curva per tutti, ritardi diversi -> ritmo */ html.apertura-fatta .hero-logo, html.apertura-fatta .hero-tag-line, html.apertura-fatta .hero-inner .lead, html.apertura-fatta .hero-cta, html.apertura-fatta .hero-tags, html.apertura-fatta .scrolldown, html.apertura-fatta header{ opacity:1;transform:none; transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.19,1,.22,1)}html.apertura-fatta header{transition-delay:.02s}html.apertura-fatta .hero-logo{transition-delay:.10s}html.apertura-fatta .hero-tag-line{transition-delay:.19s}html.apertura-fatta .hero-inner .lead{transition-delay:.27s}html.apertura-fatta .hero-cta{transition-delay:.34s}html.apertura-fatta .hero-tags{transition-delay:.40s}html.apertura-fatta .scrolldown{transition-delay:.56s}/* la parola evidenziata del titolo si accende un attimo dopo */ html.apertura .hero-tag-line .lux{opacity:.25}html.apertura-fatta .hero-tag-line .lux{ opacity:1;transition:opacity .5s ease .42s}/* le quattro etichette entrano una dopo l'altra */ html.apertura .hero-tag{opacity:0;transform:translateY(12px)}html.apertura-fatta .hero-tag{ opacity:1;transform:none; transition:opacity .7s ease,transform .8s cubic-bezier(.19,1,.22,1)}html.apertura-fatta .hero-tag:nth-child(1){transition-delay:.42s}html.apertura-fatta .hero-tag:nth-child(2){transition-delay:.48s}html.apertura-fatta .hero-tag:nth-child(3){transition-delay:.54s}html.apertura-fatta .hero-tag:nth-child(4){transition-delay:.60s}/* gli effetti di sfondo si accendono con calma, senza rubare scena */ html.apertura .hero-aurora,html.apertura .rays,html.apertura .dust{opacity:0}html.apertura-fatta .hero-aurora, html.apertura-fatta .rays, html.apertura-fatta .dust{opacity:1;transition:opacity 1.2s ease .2s}/* finita l'animazione liberiamo la scheda grafica */ html.apertura-finita .hero-logo, html.apertura-finita .hero-tag-line, html.apertura-finita .hero-inner .lead, html.apertura-finita .hero-cta, html.apertura-finita .hero-tags, html.apertura-finita .scrolldown, html.apertura-finita header, html.apertura-finita .hero-tag{will-change:auto;transition-delay:0s}/* chi ha chiesto meno movimento vede la pagina già pronta */ @media(prefers-reduced-motion:reduce){ .veil{display:none} html.apertura .hero-logo,html.apertura .hero-tag-line,html.apertura .hero-inner .lead, html.apertura .hero-cta,html.apertura .hero-tags,html.apertura .scrolldown, html.apertura header,html.apertura .hero-tag, html.apertura .hero-aurora,html.apertura .rays,html.apertura .dust{ opacity:1!important;transform:none!important;filter:none!important; } html.apertura .hero-tag-line .lux{opacity:1!important} }/* ================================================================== LUCE — sfumature morbide al posto del pulviscolo ================================================================== Le particelle sono state rimosse: erano l'unico effetto che disegnava decine di elementi separati. Al loro posto entrano gradienti che si muovono molto lentamente, con opacità basse. Tutto usa solo transform e opacity, quindi gira sulla GPU. */ .dust{display:none!important}/* ---------- 1. VELO DI LUCE SULLA PRIMA SCHERMATA ---------- Due masse luminose che respirano fuori sincrono: il movimento si percepisce appena, ma la scena smette di sembrare ferma. */ .luce-hero{ position:absolute;inset:-20%;z-index:1;pointer-events:none; mix-blend-mode:screen;overflow:hidden}.luce-hero i{ position:absolute;display:block;border-radius:50%; filter:blur(90px);will-change:transform,opacity}.luce-hero i:nth-child(1){ width:60%;height:70%;left:-8%;top:-10%; background:radial-gradient(circle,rgba(90,175,235,.19),transparent 70%); animation:respiro1 26s ease-in-out infinite}.luce-hero i:nth-child(2){ width:52%;height:62%;right:-6%;top:18%; background:radial-gradient(circle,rgba(150,215,250,.13),transparent 72%); animation:respiro2 34s ease-in-out infinite}.luce-hero i:nth-child(3){ width:40%;height:46%;left:34%;bottom:-14%; background:radial-gradient(circle,rgba(243,184,74,.09),transparent 74%); animation:respiro3 42s ease-in-out infinite} @keyframes respiro1{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9} 50% {transform:translate3d(4%,3%,0) scale(1.12);opacity:.62} } @keyframes respiro2{ 0%,100%{transform:translate3d(0,0,0) scale(1.06);opacity:.65} 50% {transform:translate3d(-5%,-4%,0) scale(1);opacity:.95} } @keyframes respiro3{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.5} 50% {transform:translate3d(3%,-5%,0) scale(1.18);opacity:.85} }/* ---------- 2. RIFLESSO CHE ATTRAVERSA LE FASCE SCURE ---------- Un passaggio di luce ogni 14 secondi. Lento e trasparente: si nota se lo si guarda, non disturba se si sta leggendo. */ .dark-band .ambient::after, .contact .ambient::after, .spec-store::before{ content:"";position:absolute;top:-40%;left:-30%; width:26%;height:180%;pointer-events:none;z-index:1; background:linear-gradient(100deg,transparent,rgba(174,222,250,.10),transparent); transform:skewX(-14deg); animation:passaggio 14s ease-in-out infinite}.contact .ambient::after{animation-delay:-6s}.spec-store::before{animation-delay:-9s;border-radius:inherit} @keyframes passaggio{ 0% {transform:translateX(0) skewX(-14deg);opacity:0} 12% {opacity:1} 55%,100%{transform:translateX(520%) skewX(-14deg);opacity:0} }/* ---------- 3. ALONE CHE SEGUE IL PUNTATORE SULLE SCHEDE ---------- Solo dove c'è un mouse vero: sui touch non serve e non si vede. */ @media(hover:hover) and (pointer:fine){ .card,.espo,.spec-shop,.trust-item,.faq-item,.proc-step{position:relative} .card::before{z-index:2} .alone{ position:absolute;inset:0;pointer-events:none;z-index:3; border-radius:inherit;opacity:0; transition:opacity .45s ease; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(127,203,243,.16),transparent 62%); } .card:hover .alone,.espo:hover .alone,.spec-shop:hover .alone, .trust-item:hover .alone,.faq-item:hover .alone,.proc-step:hover .alone{opacity:1} html:not([data-tema="scuro"]) .alone{ background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(22,104,196,.10),transparent 62%); } }/* ---------- 4. LUCE SOTTO LE SEZIONI CHIARE ---------- Una velatura calda appena percettibile che rompe il bianco piatto. */ .section{position:relative}.section::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(70% 50% at 12% 0%,rgba(46,155,230,.055),transparent 60%), radial-gradient(60% 45% at 88% 100%,rgba(243,184,74,.04),transparent 62%)}html[data-tema="scuro"] .section::before{ background: radial-gradient(70% 50% at 12% 0%,rgba(46,155,230,.09),transparent 60%), radial-gradient(60% 45% at 88% 100%,rgba(243,184,74,.05),transparent 62%)}.section > *{position:relative;z-index:1}/* La parola evidenziata del titolo ha già il suo effetto (luxShimmer). */ /* ---------- 6. BORDO LUMINOSO SULLE SCHEDE IN EVIDENZA ---------- */ .spec-shop::after{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:0;opacity:0; transition:opacity .5s ease; box-shadow:inset 0 0 0 1px rgba(127,203,243,.35), 0 0 40px -12px rgba(46,155,230,.35)}.spec-shop:hover::after{opacity:1} @media(prefers-reduced-motion:reduce){ .luce-hero i,.dark-band .ambient::after,.contact .ambient::after, .spec-store::before{animation:none!important} .alone{display:none} }/* ================================================================== PATCH v7 — gamma completa + correzione pulsante scuro ================================================================== */ /* ---------- FIX: pulsante "Vedi le offerte su Subito.it" ---------- Usava --ink come sfondo. Nel tema scuro --ink diventa chiaro, quindi restava testo bianco su fondo chiaro: illeggibile. */ /* Stessa trappola del pulsante scuro: --ink come SFONDO diventa chiaro nel tema scuro, e il testo bianco sopra spariva (1,17:1). Vale per la striscia scorrevole, i filtri e il menu mobile. */ /* "SCORRI" finiva sopra le etichette Indoor/Outdoor/Luci. Prima lo nascondevo oltre certe misure di finestra; ora la soluzione è strutturale: il contenuto della prima schermata riserva sempre la fascia in fondo, quindi la sovrapposizione non è più possibile a nessuna dimensione. Le soglie restano come seconda rete. */ .hero-inner{padding-bottom:92px}.scrolldown{bottom:20px;pointer-events:none} @media(max-height:760px){ .scrolldown{display:none} .hero-inner{padding-bottom:0} } @media(max-width:900px){ .scrolldown{display:none} .hero-inner{padding-bottom:0} }html[data-tema="scuro"] .strip{background:var(--white);color:var(--ink)}html[data-tema="scuro"] .marquee span{color:var(--ink)}html[data-tema="scuro"] .filter.active{background:var(--brand2);border-color:var(--brand2);color:#06121F}html[data-tema="scuro"] header.scrolled .burger span{background:var(--ink)}html[data-tema="scuro"] .btn-dark{ background:var(--ink); color:var(--navy2)}html[data-tema="scuro"] .btn-dark:hover{ background:var(--sky); color:var(--navy3)}/* ---------- LA GAMMA COMPLETA ---------- Dodici categorie in una griglia sobria: nessuna foto da procurare, nessuna sezione in più da navigare. */ .gamma{ display:grid;grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.2vw,16px);margin-top:clamp(26px,3vw,40px)}.gamma a{ display:flex;flex-direction:column;align-items:center;border-radius:16px;text-align:center; border:1px solid var(--line);background:var(--white); transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}html:not([data-tema="scuro"]) .gamma a{background:#fff}.gamma a:hover{transform:translateY(-5px);border-color:var(--brand2);box-shadow:var(--shadow-sm)}.gamma svg{color:var(--brand);transition:transform .4s,color .4s}html[data-tema="scuro"] .gamma svg{color:var(--brand2)}.gamma a:hover svg{transform:scale(1.14) rotate(-5deg)}.gamma b{ font-family:var(--disp);font-weight:600; color:var(--ink);line-height:1.25}.gamma-nota{ text-align:center;margin-top:18px;font-size:.9rem;color:var(--ink2)}.gamma-nota a{color:var(--brand);font-weight:600;border-bottom:1px solid rgba(22,104,196,.35)}html[data-tema="scuro"] .gamma-nota a{color:var(--brand2);border-bottom-color:rgba(46,155,230,.4)} @media(max-width:1080px){ .gamma{grid-template-columns:repeat(4,1fr)} } @media(max-width:680px){ .gamma{grid-template-columns:repeat(3,1fr)} .gamma b{font-size:.78rem} } @media(max-width:400px){ .gamma{grid-template-columns:repeat(2,1fr)} }/* ================================================================== CATALOGO CASAFORMA — dati reali dallo Shopify, senza foto prodotto ================================================================== */ /* filtri per famiglia */ .cat-fam button{ font-family:var(--disp);font-weight:600;font-size:.86rem; padding:9px 16px;border-radius:100px;cursor:pointer; border:1px solid var(--line);background:transparent;color:var(--ink2); transition:background .3s,color .3s,border-color .3s,transform .3s}.cat-fam button:hover{transform:translateY(-2px);border-color:var(--brand2);color:var(--ink)}.cat-fam button.on{background:var(--brand);border-color:var(--brand);color:#fff}html[data-tema="scuro"] .cat-fam button.on{background:var(--brand2);border-color:var(--brand2);color:#06121F}/* griglia delle collezioni */ .cat-card{ display:flex;flex-direction:column;padding:22px 20px 18px; border:1px solid var(--line);border-radius:18px;background:var(--white); transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}html:not([data-tema="scuro"]) .cat-card{background:#fff}.cat-card:hover{transform:translateY(-5px);border-color:var(--brand2);box-shadow:var(--shadow-sm)}.cat-card.hide{display:none}.cat-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}.cat-card h3{font-size:1.02rem;margin:0;line-height:1.3}.cat-n b{font-weight:700}.cat-n{ font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;white-space:nowrap; color:var(--brand);background:rgba(22,104,196,.10);padding:4px 9px;border-radius:100px}html[data-tema="scuro"] .cat-n{color:var(--brand2);background:rgba(46,155,230,.16)}.cat-fam-lab{ font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-bottom:12px}.cat-es{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}.cat-es li{ font-size:.86rem;color:var(--ink2);line-height:1.45; padding-left:14px;position:relative}.cat-es li::before{ content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%; background:var(--brand2);opacity:.6}.cat-card .lnk{ margin-top:auto;font-family:var(--disp);font-weight:600;font-size:.86rem; color:var(--brand);display:inline-flex;align-items:center;gap:6px}html[data-tema="scuro"] .cat-card .lnk{color:var(--brand2)}.cat-card .lnk svg{width:14px;height:14px}.cat-foot{ margin-top:clamp(22px,2.6vw,32px);padding:20px 24px;border-radius:18px;text-align:center; background:linear-gradient(120deg,rgba(22,104,196,.07),rgba(46,155,230,.05)); border:1px solid rgba(22,104,196,.16)}.cat-foot p{margin:0 0 14px;font-size:.95rem;color:var(--ink2)}.cat-foot b{color:var(--ink);font-family:var(--disp)} @media(max-width:980px){ .cat-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .cat-grid{grid-template-columns:1fr} }/* ================================================================== CATALOGO COMPATTO + SPECCHIETTO SUBITO ================================================================== */ /* ---------- catalogo: sei blocchi invece di trentasei schede ---------- */ .cc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(24px,3vw,36px)}.cc-fam{border:1px solid var(--line);border-radius:18px;background:var(--white); transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.2,.8,.2,1)}html:not([data-tema="scuro"]) .cc-fam{background:#fff}.cc-fam:hover{transform:translateY(-4px);border-color:var(--brand2);box-shadow:var(--shadow-sm)}.cc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.cc-head h3{margin:0}.cc-n{ font-family:var(--mono);font-weight:700;letter-spacing:.06em; color:var(--brand);background:rgba(22,104,196,.10);padding:3px 9px;border-radius:100px}html[data-tema="scuro"] .cc-n{color:var(--brand2);background:rgba(46,155,230,.16)}.cc-nota{color:var(--muted);line-height:1.45;margin:0 0 12px}.cc-chips{display:flex;flex-wrap:wrap;gap:6px}.cc-chips a{ display:inline-flex;align-items:center;gap:6px;line-height:1;border-radius:9px; border:1px solid var(--line);color:var(--ink2);background:transparent; transition:background .25s,border-color .25s,color .25s,transform .25s}.cc-chips a:hover{ background:rgba(22,104,196,.09);border-color:var(--brand2);color:var(--ink);transform:translateY(-2px)}.cc-chips b{font-family:var(--mono);font-size:.68rem;color:var(--muted);font-weight:600}.cc-chips a:hover b{color:var(--brand)}html[data-tema="scuro"] .cc-chips a:hover{background:rgba(46,155,230,.14)}html[data-tema="scuro"] .cc-chips a:hover b{color:var(--brand2)}.cc-foot{text-align:center;margin-top:clamp(18px,2.2vw,26px);color:var(--ink2)}.cc-foot a{color:var(--brand);font-weight:600;white-space:nowrap}html[data-tema="scuro"] .cc-foot a{color:var(--brand2)} @media(max-width:980px){ .cc{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .cc{grid-template-columns:1fr} }/* ---------- SPECCHIETTO SUBITO: colori del marchio ---------- Rosso Subito su fondo pieno, come la piattaforma. */ .spec-subito{ background:linear-gradient(150deg,#D40027 0%,#B80021 55%,#94001A 100%)!important; border-color:rgba(255,255,255,.18)!important; color:#fff;overflow:hidden}html[data-tema="scuro"] .spec-subito{ background:linear-gradient(150deg,#C60024 0%,#A3001E 55%,#7A0016 100%)!important}.spec-subito::after{ content:"";position:absolute;top:-45%;right:-18%;width:70%;height:190%; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.22),transparent 62%); filter:blur(30px);pointer-events:none;opacity:1}.spec-subito h3{color:#fff!important}.spec-subito > p{color:rgba(255,255,255,.96)!important;position:relative;z-index:2}.spec-subito > p b{color:#fff!important}.spec-subito .spec-tag, html[data-tema="scuro"] .spec-subito .spec-tag{border-color:rgba(255,255,255,.3)!important}.spec-subito .shop-ic.sub{ background:#fff;color:#E4002B; box-shadow:0 10px 26px -10px rgba(0,0,0,.45)}.spec-subito .shop-list li{color:rgba(255,255,255,.96);position:relative;z-index:2}.spec-subito .shop-head,.spec-subito .spec-actions{position:relative;z-index:2}/* pulsante bianco su rosso: massimo contrasto */ .spec-subito .btn-sub{ background:#fff!important;color:#B00020!important; box-shadow:0 14px 30px -14px rgba(0,0,0,.5)!important}.spec-subito .btn-sub:hover{background:#FFF0F2!important;color:#8C0019!important}.spec-subito .sheen{background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent)}/* l'alone del puntatore, in bianco */ .spec-subito .alone, html:not([data-tema="scuro"]) .spec-subito .alone{ background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.20),transparent 62%)!important}/* firma della piattaforma */ .sub-badge{ position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px; margin-top:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.92)}.sub-badge span{ display:inline-block;padding:3px 8px;border-radius:6px; background:#fff;color:#B00020;font-weight:700;letter-spacing:.02em}/* ================================================================== SCALA GENERALE — tutto più compatto ================================================================== Titoli, spaziature e altezze delle sezioni erano tarati in grande. Qui riduciamo in modo uniforme: circa un quinto in meno su spaziature verticali e titoli, senza toccare la leggibilità del testo di lettura (che resta sopra i 15 px). */ /* sottotitolo dei gruppi del catalogo */ .cc-sub{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; font-size:1.02rem;margin:clamp(22px,2.4vw,30px) 0 2px}.cc-sub small{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.cc-sub:first-of-type{margin-top:clamp(18px,2vw,26px)}/* ---------- 1. ARIA VERTICALE DELLE SEZIONI ---------- */ .section{padding-top:clamp(48px,5.2vw,84px);padding-bottom:clamp(48px,5.2vw,84px)}.sec-head.center p{margin-left:auto;margin-right:auto}/* ---------- 2. TITOLI ---------- */ h1,.hero-tag-line{font-size:clamp(1.9rem,4.4vw,3.4rem)!important}/* ---------- 3. SCHEDE E RIQUADRI ---------- */ .card p{font-size:.88rem}.inline-cta p{font-size:.93rem}.gamma a{gap:8px}.storeband{padding:12px 0}.storeband-track span{font-size:.88rem;padding:0 20px}/* ---------- 4. PIÈ DI PAGINA ---------- */ footer{padding-top:clamp(40px,4.4vw,64px)}/* ---------- 5. PRIMA SCHERMATA ---------- */ .hero-logo{max-width:min(520px,60vw)}.hero-cta .btn{padding:13px 22px;font-size:.94rem}.hero-tag b{font-size:.94rem}/* su schermi piccoli si comprime ancora un po' */ @media(max-width:640px){ .section{padding-top:40px;padding-bottom:40px} .sec-head h2{font-size:clamp(1.4rem,6vw,1.9rem)} .sec-head p{font-size:.92rem} }/* ================================================================== SCALA v2 — immagini contenute e sezioni più corte ================================================================== Le immagini affiancate al testo si allungavano fino all'altezza della colonna accanto: una zanzariera arrivava a 1317 px, più di uno schermo intero. Qui fissiamo proporzioni e tetti di altezza. */ /* ---------- immagini affiancate al testo ---------- */ .about-media,.feat-media{align-self:start}.about-media .pfx,.feat-media .pfx{ aspect-ratio:4/5;max-height:480px;height:auto}.feat-media .mini{object-fit:cover}/* banner del processo: era alto quanto tre schermi di testo */ .proc-visual{aspect-ratio:21/8;max-height:380px;overflow:hidden}.proc-visual img{width:100%;height:100%;object-fit:cover}/* espositori del negozio */ .espo-media{aspect-ratio:1/1;max-height:460px}/* galleria: righe più basse */ .gal{grid-auto-rows:118px} @media(max-width:600px){ .gal img{aspect-ratio:3/2} }/* schede prodotto e materiali */ .card{min-height:215px}/* ---------- secondo giro di compattazione ---------- */ .section{padding-top:clamp(38px,4.2vw,66px);padding-bottom:clamp(38px,4.2vw,66px)}h1,.hero-tag-line{font-size:clamp(1.75rem,3.8vw,2.9rem)!important}.trust-item{padding:14px}.espo-cap{padding:15px} @media(max-width:640px){ .section{padding-top:34px;padding-bottom:34px} .about-media .pfx,.feat-media .pfx{max-height:340px} .proc-visual{max-height:220px} .espo-media{max-height:340px} }/* ================================================================== SCALA v3 — terzo giro di riduzione ================================================================== Il testo di lettura resta sopra i 12 px: sotto quella soglia il sito diventa faticoso, e qui si vendono prodotti che il cliente deve poter leggere. Si riducono soprattutto titoli, spaziature e altezze delle immagini. */ /* ---------- titoli ---------- */ h1,.hero-tag-line{font-size:clamp(1.5rem,3vw,2.3rem)!important;line-height:1.08!important}.sec-head h2{line-height:1.15}.hero-inner .lead,.hero .lead{max-width:520px}.sec-head p{max-width:560px}/* L'occhiello era display:inline. Finché il titolo era grande andava comunque a capo da solo; rimpicciolendolo i due entravano sulla stessa riga e l'intestazione sembrava sbilenca. Ora è un blocco. */ .eyebrow{display:block;width:100%;font-size:.7rem;letter-spacing:.16em;margin-bottom:8px}.sec-head.center .eyebrow{text-align:center}.sec-head h2{margin-bottom:10px}.sec-head.center h2{margin-left:auto;margin-right:auto}/* pulsante e filtri: respiro uniforme sotto l'intestazione */ .sec-head + .btn,.sec-head + a.btn{margin-top:2px}.filters{margin-top:18px;margin-bottom:22px;gap:8px}.filter{padding:8px 15px;font-size:.84rem}/* ---------- spaziature ---------- */ .section{padding-top:clamp(30px,3.4vw,52px);padding-bottom:clamp(30px,3.4vw,52px)}.cc{gap:12px;margin-top:20px}.gamma{gap:9px;margin-top:20px}.trust{gap:12px;margin-top:24px}.inline-cta{padding:14px 20px;margin-top:20px}footer{padding-top:clamp(26px,3vw,42px)}/* ---------- immagini: altro giro ---------- */ .about-media .pfx,.feat-media .pfx{max-height:400px}.proc-visual{aspect-ratio:24/8}/* ---------- schede ---------- */ .card h3{font-size:.98rem}.card p{line-height:1.5}.shop-list,.spec-list{margin-bottom:16px}.spec-tag{padding:6px 11px;margin-bottom:12px}.faq-q{padding:12px 42px 12px 16px}.faq-a p{padding:0 16px 14px}.proc-step{padding:14px 12px 13px}.proc-step .num{width:33px;height:33px;font-size:.78rem;margin-bottom:10px}.cc-fam{padding:14px}.cc-nota{margin-bottom:9px}.cc-chips a{padding:5px 8px}.gamma a{padding:11px 7px 10px}.gamma svg{width:20px;height:20px}.gal figcaption{padding:14px}/* ---------- barra di navigazione ---------- */ .nav-links a{font-size:.86rem}.nav-cta{padding:10px 16px;font-size:.85rem}.foot-col h3{font-size:.9rem} @media(max-width:640px){ .section{padding-top:28px;padding-bottom:28px} .about-media .pfx,.feat-media .pfx{max-height:290px} .proc-visual{max-height:190px} .espo-media{max-height:300px} }/* ================================================================== SCALA v4 — riduzione uniforme, senza togliere contenuto ================================================================== Invece di ritoccare regola per regola, si abbassa l'unità di misura della pagina: tutto ciò che è espresso in rem si rimpicciolisce nella stessa proporzione, quindi le proporzioni restano quelle disegnate e cambia solo la scala. */ html{font-size:87.5%}/* 16 px -> 14 px: tutto scala del 12,5% */ /* Le clamp con unità vw non seguono il rem: le riduciamo a mano nella stessa proporzione. */ h1,.hero-tag-line{font-size:clamp(1.5rem,2.6vw,2.2rem)!important}.sec-head h2{font-size:clamp(1.25rem,1.9vw,1.65rem)!important}.news h2{font-size:clamp(1.15rem,1.7vw,1.45rem)!important}.section{padding-top:clamp(26px,2.9vw,44px);padding-bottom:clamp(26px,2.9vw,44px)}.sec-head{margin-bottom:clamp(14px,1.6vw,21px)}.news{padding:clamp(18px,2.4vw,28px)}/* ---------- pavimento di leggibilità ---------- Abbassando il rem, i testi già piccoli sarebbero finiti sotto gli 11 px. Questi risalgono, così nessun testo scende sotto ~12 px. */ body{font-size:1.06rem}.sec-head p{font-size:1rem}.card p{font-size:.96rem}.card h3{font-size:1.12rem}.faq-q{font-size:1.04rem}.faq-a p{font-size:.97rem}.cc-chips a{font-size:.89rem}.cc-nota{font-size:.87rem}.cc-head h3{font-size:1.07rem}.proc-step p{font-size:.92rem}.proc-step h3{font-size:1.07rem}.trust-item b{font-size:1rem}.trust-item span{font-size:.89rem}.gamma b{font-size:.83rem}.nav-links a{font-size:.98rem}.foot-col a,.foot-brand p{font-size:.96rem}.espo-cap b{font-size:1.07rem}.espo-cap span{font-size:.89rem}.gal figcaption{font-size:.97rem}.news p{font-size:.98rem}.hero-inner .lead,.hero .lead{font-size:clamp(.95rem,1vw,1.08rem)!important}.cc-sub{font-size:1.08rem}.cc-foot{font-size:1rem}.marquee span{font-size:1rem}/* Etichette e minuzie: con il rem più basso erano scese fino a 9,5 px. Le riporto tutte sopra gli 11,5 px, che è la soglia sotto cui un testo maiuscolo spaziato diventa faticoso. */ .cc-chips b{font-size:.86rem}.spec-tag{font-size:.86rem!important}.sub-badge,.sub-badge span{font-size:.84rem}.hero-tag span{font-size:.88rem}.pill{font-size:.86rem}.card-cat{font-size:.86rem}.badge-patent,.pbadge,.pbadge b{font-size:.86rem}.mat-card .lab span{font-size:.86rem}.eyebrow{font-size:.86rem}.cc-n,.cc-sub small{font-size:.86rem}.news-consent span,.news-consent a{font-size:.9rem}.foot-bottom,.foot-legal,.foot-legal a,.foot-bottom span{font-size:.9rem}.scrolldown{font-size:.84rem}/* barra rapida in fondo su telefono: era scesa a 11,1 px */ .mcta a{font-size:.84rem}/* ---------- immagini: scalano con il resto ---------- */ .about-media .pfx,.feat-media .pfx{max-height:350px}.about-media img,.feat-media img{max-height:350px}.proc-visual{max-height:260px}.proc-visual img{max-height:260px}.espo-media{max-height:330px}.gal{grid-auto-rows:84px;gap:10px}.card{min-height:190px}.mat-card img{min-height:115px;max-height:185px}.hero-logo{max-width:min(400px,48vw)} @media(max-width:640px){ html{font-size:93.75%} /* sul telefono si resta un filo più grandi */ .about-media .pfx,.feat-media .pfx{max-height:260px} .proc-visual{max-height:170px} .espo-media{max-height:270px} }/* Limitando l'altezza con una proporzione fissa, la foto grande si era ristretta in larghezza; la piccola però resta ancorata al bordo della colonna, e fra le due si era aperto un vuoto. Ora la grande riempie la colonna e l'altezza si limita ritagliando, così le due foto tornano affiancate. */ .about-media .pfx,.feat-media .pfx{ aspect-ratio:auto!important;width:100%; height:clamp(230px,24vw,330px);max-height:330px}.about-media .pfx img,.feat-media .pfx img{width:100%;height:100%;object-fit:cover;max-height:none}.feat-media .mini{bottom:-18px;right:-10px;width:38%;max-width:150px;max-height:180px;border-width:4px} @media(max-width:900px){ .about-media .pfx,.feat-media .pfx{height:clamp(200px,42vw,270px)} .feat-media .mini{width:34%;max-width:120px;max-height:150px;bottom:-14px;right:-6px} }/* ================================================================== PREVENTIVO e SHOWROOM — riduzione mirata ================================================================== */ /* ---------- modulo preventivo ---------- */ .contact-copy h2{font-size:clamp(1.3rem,2.2vw,1.85rem)!important;margin-bottom:10px}.contact-copy > p{font-size:.88rem;margin-bottom:18px}.ci-row{padding:9px 0} .ci-row b{font-size:.9rem} .ci-row span{font-size:.8rem} .ci-row svg{width:18px;height:18px}.form{padding:20px}.field{margin-bottom:12px}.field label{font-size:.78rem;margin-bottom:5px}.field input,.field select,.field textarea{padding:10px 13px;font-size:.88rem;border-radius:11px}.field textarea{min-height:88px}.consent{font-size:.78rem;gap:9px;margin:12px 0}.consent input{width:19px;height:19px}.form .btn{padding:12px 20px;font-size:.92rem}.form-note{font-size:.75rem;margin-top:8px}/* ---------- negozio e vendita online ---------- */ #showroom .spec-grid{gap:9px}#showroom .spec-card{padding:16px}#showroom .spec-card h3{font-size:clamp(1rem,1.5vw,1.22rem)}#showroom .spec-card > p{font-size:.84rem;margin-bottom:12px}#showroom .spec-list li,#showroom .shop-list li{font-size:.81rem}#showroom .spec-list,#showroom .shop-list{gap:6px;margin-bottom:14px}#showroom .spec-list svg,#showroom .shop-list svg{width:17px;height:17px}#showroom .shop-ic{width:40px;height:40px}#showroom .shop-ic svg{width:19px;height:19px}#showroom .spec-tag{padding:5px 10px;margin-bottom:10px;font-size:.64rem}#showroom .spec-addr{padding:10px 12px}#showroom .spec-actions{gap:8px}#showroom .spec-actions .btn{padding:10px 16px;font-size:.83rem}#showroom .sub-badge{margin-top:11px;font-size:.63rem}#showroom .mcta{margin-top:16px;font-size:.86rem}/* piè di pagina */ .foot-grid{gap:22px}.foot-brand img,.foot-logo{max-width:170px}.foot-bottom{padding:14px 0;font-size:.8rem} @media(max-width:640px){ .form{padding:16px} #showroom .spec-card{padding:11px 12px} }/* ---------- barra di ricerca del catalogo ---------- Usa gli stessi colori, bordi e raggi delle targhette qui sotto: non introduce un linguaggio grafico nuovo. */ .cc-cerca{position:relative;max-width:560px;margin:0 auto}.cc-cerca > svg{ position:absolute;left:14px;top:13px;width:18px;height:18px; color:var(--muted);pointer-events:none}.cc-cerca input{ width:100%;padding:11px 40px 11px 40px;font:inherit;font-size:.9rem; color:var(--ink);background:var(--white); border:1px solid var(--line);border-radius:12px; transition:border-color .25s,box-shadow .25s}html:not([data-tema="scuro"]) .cc-cerca input{background:#fff}.cc-cerca input::placeholder{color:var(--muted)}.cc-cerca input:focus{ outline:none;border-color:var(--brand2); box-shadow:0 0 0 3px rgba(46,155,230,.18)}.cc-cerca input::-webkit-search-cancel-button{display:none}.cc-cerca button{ position:absolute;right:8px;top:8px;width:28px;height:28px; display:grid;place-items:center;border:0;border-radius:8px; background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}.cc-cerca button:hover{background:rgba(22,104,196,.10);color:var(--brand)}.cc-cerca button svg{width:15px;height:15px}.cc-cerca button[hidden]{display:none}#ccEsito{ min-height:1.1em;margin:8px 0 0;text-align:center; font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink2)}#ccEsito.vuoto{color:var(--cf-testo)}html[data-tema="scuro"] #ccEsito.vuoto{color:var(--cf-2)}/* evidenziazione del pezzo che combacia */ .cc-chips mark{background:rgba(243,184,74,.34);color:inherit;padding:0 1px;border-radius:3px}html[data-tema="scuro"] .cc-chips mark{background:rgba(243,184,74,.26)}.cc-fam[hidden],.cc-sub[hidden],.cc-chips a[hidden]{display:none!important}/* ---------- rispetto delle preferenze di movimento ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .reveal{opacity:1!important;transform:none!important} }/* ---------- SPECCHIETTI: SHOWROOM, SUBITO, CASAFORMA ---------- */ /* >>> COLORI DEI BRAND — modifica solo qui <<< --cf-* = colori del logo CasaForma --sub-* = colori Subito.it */ :root{ --cf-1:#B8763A; /* CasaForma — colore principale */ --cf-2:#E0A45C; /* CasaForma — colore secondario / gradiente */ --cf-ink:#3A2415; /* CasaForma — testo scuro coordinato */ --cf-testo:#8F5A28; /* CasaForma — tono per il testo (contrasto conforme) */ --sub-1:#E4002B; /* Subito.it — rosso */ --sub-2:#FF5A3C; /* Subito.it — rosso chiaro */ }.spec-grid{ display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,28px);align-items:stretch}.spec-card{ position:relative;overflow:hidden; border-radius:var(--r-lg);padding:clamp(26px,3.2vw,40px); display:flex;flex-direction:column}/* --- showroom (fascia intera) --- */ .spec-store{ grid-column:1 / -1; background:linear-gradient(150deg,var(--navy),var(--navy2) 65%,var(--navy3)); color:#fff;box-shadow:var(--shadow)}.spec-store::after{ content:"";position:absolute;top:-40%;right:-10%;width:60%;height:180%; background:radial-gradient(circle at 50% 40%,rgba(46,155,230,.28),transparent 62%); filter:blur(28px);pointer-events:none}.store-inner{ position:relative;z-index:2; display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(24px,3.4vw,52px);align-items:start}.store-col{display:flex;flex-direction:column}/* --- tag comune --- */ .spec-tag{ display:inline-flex;align-items:center;gap:8px;align-self:flex-start; font-family:var(--mono);font-size:.7rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase; padding:8px 14px;border-radius:100px;margin-bottom:18px}.spec-tag svg{width:14px;height:14px}.spec-store .spec-tag{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:var(--sky)}.spec-subito .spec-tag{background:rgba(228,0,43,.08);border:1px solid rgba(228,0,43,.22);color:#B00020;margin-bottom:8px}html[data-tema="scuro"] .spec-subito .spec-tag{background:rgba(255,90,60,.16);border-color:rgba(255,90,60,.4);color:#FF9B86}/* --cf-1 come TESTO su fondo chiaro sta a 3,3:1: usiamo una variante più scura per l'etichetta, il colore del marchio resta sui pulsanti. */ .spec-casaforma .spec-tag{background:color-mix(in srgb,var(--cf-1) 10%,#fff);border:1px solid color-mix(in srgb,var(--cf-1) 26%,#fff);color:var(--cf-testo);margin-bottom:8px}html[data-tema="scuro"] .spec-casaforma .spec-tag{background:color-mix(in srgb,var(--cf-1) 20%,transparent);border-color:color-mix(in srgb,var(--cf-1) 45%,transparent);color:var(--cf-2)}html[data-tema="scuro"] .btn-cf-ghost{color:var(--cf-2);border-color:color-mix(in srgb,var(--cf-2) 45%,transparent)}html[data-tema="scuro"] .spec-casaforma .shop-list svg{color:var(--cf-2)}.spec-card h3{font-size:clamp(1.4rem,2.5vw,1.95rem);margin-bottom:14px;position:relative;z-index:2}.spec-store h3{color:#fff}.spec-card>p{position:relative;z-index:2;margin-bottom:18px;font-size:.98rem}.spec-store p{color:rgba(233,243,251,.84)}.spec-shop>p{color:var(--ink2)}.spec-shop>p b{color:var(--ink)}.spec-list{list-style:none;display:grid;gap:12px;margin:0 0 26px;position:relative;z-index:2}.spec-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:rgba(233,243,251,.92)}.spec-list svg{flex:none;width:20px;height:20px;color:var(--sky);margin-top:2px}.spec-addr{ position:relative;z-index:2;display:flex;gap:14px;align-items:center; padding:16px 18px;border-radius:16px;margin-top:auto; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}.spec-addr svg{width:22px;height:22px;color:var(--gold);flex:none}.spec-addr b{font-family:var(--disp);display:block;font-size:1rem;color:#fff}.spec-addr span{font-size:.86rem;color:rgba(233,243,251,.7)}.spec-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;position:relative;z-index:2}.spec-actions .btn{font-size:.92rem;padding:13px 22px}/* --- schede shop (Subito / CasaForma) --- */ .spec-shop{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s,box-shadow .4s}.spec-shop:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.spec-shop::before{content:"";position:absolute;left:0;right:0;top:0;height:5px}.spec-subito::before{background:linear-gradient(90deg,var(--sub-1),var(--sub-2))}.spec-casaforma::before{background:linear-gradient(90deg,var(--cf-1),var(--cf-2))}.shop-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}.shop-head h3{margin:0}.shop-ic{ flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center; color:#fff;font-family:var(--disp);font-weight:800;font-size:1.05rem;letter-spacing:.02em}.shop-ic svg{width:26px;height:26px}.shop-ic.sub{background:linear-gradient(140deg,var(--sub-1),var(--sub-2));box-shadow:0 12px 26px -12px rgba(228,0,43,.75)}.shop-ic.cf{background:linear-gradient(140deg,var(--cf-1),var(--cf-2));box-shadow:0 12px 26px -12px color-mix(in srgb,var(--cf-1) 75%,transparent)}.spec-casaforma h3{color:var(--cf-ink)}.shop-list{list-style:none;display:grid;gap:10px;margin:0 0 26px}.shop-list li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--ink2)}.shop-list svg{flex:none;width:18px;height:18px;margin-top:2px}.spec-subito .shop-list svg{color:var(--sub-1)}.spec-casaforma .shop-list svg{color:var(--cf-1)}.btn-sub{background:linear-gradient(120deg,var(--sub-1),var(--sub-2));color:#fff;box-shadow:0 14px 30px -14px rgba(228,0,43,.8)}.btn-sub:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(228,0,43,.85)}.btn-cf{background:linear-gradient(120deg,var(--cf-1),var(--cf-2));color:#fff;box-shadow:0 14px 30px -14px color-mix(in srgb,var(--cf-1) 80%,transparent)}.btn-cf:hover{transform:translateY(-3px)}.btn-cf-ghost{background:transparent;color:var(--cf-1);border:1px solid color-mix(in srgb,var(--cf-1) 35%,#fff)}.btn-cf-ghost:hover{background:color-mix(in srgb,var(--cf-1) 8%,#fff);transform:translateY(-3px)}.btn-cf-ghost svg{width:17px;height:17px}.spec-foot{ text-align:center;margin-top:30px;color:var(--ink2);font-size:.95rem}.spec-foot a{color:var(--brand);font-weight:600;border-bottom:1px solid rgba(22,104,196,.35)}.spec-foot a:hover{color:var(--brand2)} @media(max-width:600px){ .shop-head{align-items:flex-start} .shop-ic{width:46px;height:46px;border-radius:14px} .spec-tag{font-size:.64rem;letter-spacing:.16em;padding:7px 12px} } @media(max-width:980px){ .spec-grid{grid-template-columns:1fr} .store-inner{grid-template-columns:1fr;gap:26px} .spec-addr{margin-top:0} } @media(max-width:980px){ .gal{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .gal{grid-template-columns:1fr;grid-auto-rows:auto} .gal figure,.gal figure:nth-child(4n+1),.gal figure:nth-child(6n+4){grid-row:auto} .gal img{aspect-ratio:4/3} } /* Senza JavaScript le risposte delle FAQ resterebbero chiuse: qui le apriamo tutte. */ .faq-a{max-height:none!important;opacity:1!important}.faq-q::after{display:none}.faq-item{border-color:var(--line)}/* I link che dipendono da JS verrebbero cliccati a vuoto: li rendiamo inerti. */ [data-lgl],#reopenConsent{pointer-events:none;opacity:.55;text-decoration:none}.reveal{opacity:1!important;transform:none!important} @keyframes cardin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ================================================================== CATALOGO: RICERCA, FILTRI, PREFERITI, CAMPIONI ================================================================== Portate qui dal sito CasaForma. Nulla di esistente è stato tolto: le voci del catalogo restano gli stessi collegamenti allo shop. */ .cc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:clamp(16px,2vw,24px) 0 4px}.cc-cerca{ position:relative;display:flex;align-items:center;flex:1 1 300px;min-width:240px; border:1px solid var(--line);border-radius:12px;background:var(--white); transition:border-color .25s,box-shadow .25s}.cc-cerca:focus-within{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(46,155,230,.16)}.cc-cerca svg{width:17px;height:17px;margin-left:12px;flex:none;color:var(--muted);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.cc-cerca input{ flex:1;border:0;background:transparent;padding:10px 12px;font:inherit;font-size:.88rem; color:var(--ink);min-width:0}.cc-cerca input:focus{outline:none}.cc-cerca input::-webkit-search-cancel-button{display:none}.cc-cerca button{ border:0;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1; padding:0 12px;cursor:pointer}.cc-cerca button:hover{color:var(--ink)}.cc-filtri{display:flex;flex-wrap:wrap;gap:7px}.ccf{ display:inline-flex;align-items:center;gap:6px; border:1px solid var(--line);background:var(--white);color:var(--ink2); padding:8px 14px;border-radius:100px;font:inherit;font-size:.82rem;cursor:pointer; transition:background .22s,border-color .22s,color .22s,transform .22s}.ccf:hover{border-color:var(--brand2);transform:translateY(-1px)}.ccf.on{background:var(--brand);border-color:var(--brand);color:#fff}html[data-tema="scuro"] .ccf.on{background:var(--brand2);border-color:var(--brand2);color:#06121F}.ccf svg{width:14px;height:14px;fill:currentColor}.ccf-fav b{font-family:var(--mono);font-size:.72rem}.ccf-fav.on{background:#C2185B;border-color:#C2185B;color:#fff}html[data-tema="scuro"] .ccf-fav.on{background:#F06292;border-color:#F06292;color:#2A0512}.cc-esito{flex-basis:100%;margin:2px 0 0;font-size:.82rem;min-height:1.1em}/* voce del catalogo: link + cuore */ .cc-chip{display:inline-flex;align-items:stretch;border-radius:9px;overflow:hidden}.cc-chip > a{border-radius:9px 0 0 9px;border-right:0}.cc-chip .fav{ display:inline-flex;align-items:center;justify-content:center; width:26px;border:1px solid var(--line);border-left:0;border-radius:0 9px 9px 0; background:transparent;cursor:pointer;padding:0; transition:background .22s,border-color .22s}.cc-chip .fav svg{width:13px;height:13px;fill:none;stroke:var(--muted);stroke-width:1.8;transition:fill .25s,stroke .25s}.cc-chip .fav:hover{background:rgba(194,24,91,.08)}.cc-chip .fav:hover svg{stroke:#C2185B}.cc-chip .fav[aria-pressed="true"] svg{fill:#C2185B;stroke:#C2185B}html[data-tema="scuro"] .cc-chip .fav[aria-pressed="true"] svg{fill:#F06292;stroke:#F06292}.cc-chip:hover > a{transform:none}/* evidenziazione del testo cercato */ .cc-chip mark{background:rgba(243,184,74,.38);color:inherit;border-radius:3px;padding:0 1px}html[data-tema="scuro"] .cc-chip mark{background:rgba(243,184,74,.3)}/* richiesta campioni */ .cc-camp{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px; margin-top:clamp(16px,2vw,22px);padding:14px 18px; border:1px solid var(--line);border-radius:14px;background:var(--white)}.cc-camp p{margin:0;font-size:.88rem;color:var(--ink2)}.cc-camp b{color:var(--brand)}html[data-tema="scuro"] .cc-camp b{color:var(--brand2)}.cc-camp .btn{padding:10px 18px;font-size:.86rem}.cc-camp .btn svg{width:16px;height:16px}.cc-fam[hidden],.cc-chip[hidden],.cc-sub[hidden]{display:none!important} @media(max-width:640px){ .cc-bar{gap:8px} .cc-filtri{gap:6px} .ccf{padding:7px 12px;font-size:.78rem} }/* Esito della ricerca: colori espliciti. Con le variabili il testo restava a 3,84:1 nel chiaro e 1,89:1 nello scuro. */ #ccEsito,.cc-esito{color:#4A5C70}html[data-tema="scuro"] #ccEsito,html[data-tema="scuro"] .cc-esito{color:#A9BCD1}/* La vecchia regola metteva la lente in posizione assoluta e finiva sopra il testo digitato. Qui la rimetto nel flusso, a sinistra. */ .cc-bar .cc-cerca svg{position:static!important;margin:0 0 0 12px;flex:none}.cc-bar .cc-cerca #ccQ{padding-left:10px}.cc-bar .cc-cerca #ccX{position:static!important;flex:none} /* ================================================================== CALCOLATORE METRI QUADRI, NOTIFICHE, PRODOTTO NON TROVATO Portati dal sito CasaForma. Lì il calcolatore aggiunge al carrello; qui ArreDoor non vende, quindi il risultato finisce nel preventivo. ================================================================== */ .calc{ margin-top:clamp(18px,2.2vw,26px);padding:16px 18px; border:1px solid var(--line);border-radius:14px;background:var(--white)}.calc-h{margin:0 0 4px;font-family:var(--disp);font-weight:700;font-size:.98rem}.calc-t{margin:0 0 12px;font-size:.82rem;color:var(--ink2)}.calc-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}.calc-row label{display:flex;flex-direction:column;gap:4px;font-size:.76rem;color:var(--ink2);flex:1 1 120px;min-width:110px}.calc-row label span{font-family:var(--mono);font-size:.66rem}.calc-row input,.calc select{ border:1px solid var(--line);border-radius:10px;padding:9px 11px; font:inherit;font-size:.88rem;background:transparent;color:var(--ink);width:100%}.calc-row input:focus,.calc select:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(46,155,230,.16)}.calc-opp{font-size:.76rem;padding-bottom:10px;flex:none}.calc-sfrido{display:block;margin-top:10px;max-width:320px}.calc-out{margin:12px 0 0;font-size:.88rem;color:var(--ink2);line-height:1.5}.calc-out b{color:var(--ink)}.calc-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.calc-azioni .btn{padding:10px 16px;font-size:.85rem}.calc-n{margin:10px 0 0;font-size:.76rem;color:var(--muted);line-height:1.5}/* notifica breve */ .toast{ position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px); z-index:120;max-width:min(92vw,420px); padding:11px 18px;border-radius:12px; background:var(--ink);color:var(--paper); font-size:.86rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.5); opacity:0;pointer-events:none;transition:opacity .28s,transform .28s}html[data-tema="scuro"] .toast{background:#E7EEF6;color:#0C1B2E}.toast.on{opacity:1;transform:translate(-50%,0)} @media(max-width:600px){ .toast{bottom:78px} }/* prodotto non trovato */ .cc-nf{display:inline-block;margin-left:6px;font:inherit;font-size:.82rem; background:none;border:0;padding:0;color:var(--brand);text-decoration:underline;cursor:pointer}html[data-tema="scuro"] .cc-nf{color:var(--brand2)}/* Nota dello sfrido e "oppure": con --muted restavano a 4,06:1 nel chiaro. */ .calc-n,.calc-opp{color:#4A5C70}html[data-tema="scuro"] .calc-n,html[data-tema="scuro"] .calc-opp{color:#A9BCD1}.calc-row label span{color:#4A5C70}html[data-tema="scuro"] .calc-row label span{color:#A9BCD1} /* ================================================================== ASSISTENTE — ripreso dal sito CasaForma. È a regole, non un modello: parole chiave e risposte scritte. Per questo non si chiama "AI": quando non sa, passa a una persona. ================================================================== */ .ai-btn{ position:fixed;right:18px;bottom:92px;z-index:95; display:inline-flex;align-items:center;gap:8px; padding:11px 16px;border:0;border-radius:100px;cursor:pointer; background:var(--ink);color:var(--paper); font:inherit;font-size:.85rem;font-weight:600; box-shadow:0 14px 32px -14px rgba(0,0,0,.5); transition:transform .25s,box-shadow .25s,opacity .25s}html[data-tema="scuro"] .ai-btn{background:#E7EEF6;color:#0C1B2E}.ai-btn:hover{transform:translateY(-2px)}.ai-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}.ai-btn[hidden]{display:none} @media(max-width:600px){ .ai-btn{bottom:142px;right:14px;padding:10px 14px;font-size:.8rem} }.ai-box{ position:fixed;right:18px;bottom:92px;z-index:96; width:min(360px,calc(100vw - 28px));max-height:min(560px,calc(100vh - 130px)); display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line);border-radius:18px;background:var(--white); box-shadow:0 30px 70px -26px rgba(0,0,0,.5); opacity:0;transform:translateY(10px) scale(.98);pointer-events:none; transition:opacity .26s,transform .26s}.ai-box.on{opacity:1;transform:none;pointer-events:auto} @media(max-width:600px){ .ai-box{right:10px;left:10px;width:auto;bottom:142px;max-height:calc(100vh - 190px)} }.ai-head{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line)}.ai-head b{font-size:.92rem;display:block;line-height:1.2}.ai-head span{font-size:.75rem;color:#4A5C70}html[data-tema="scuro"] .ai-head span{color:#A9BCD1}.ai-av{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center; background:var(--brand);color:#fff}html[data-tema="scuro"] .ai-av{background:var(--brand2);color:#06121F}.ai-av svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}.ai-x{margin-left:auto;border:0;background:transparent;color:#4A5C70;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}html[data-tema="scuro"] .ai-x{color:#A9BCD1}.ai-msg{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}.am{max-width:88%;padding:9px 12px;border-radius:13px;font-size:.85rem;line-height:1.5}.am-a{align-self:flex-start;background:rgba(22,104,196,.09);color:var(--ink);border-bottom-left-radius:5px}html[data-tema="scuro"] .am-a{background:rgba(46,155,230,.14)}.am-u{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px}html[data-tema="scuro"] .am-u{background:var(--brand2);color:#06121F}.am a,.am button.link{color:inherit;font-weight:600;text-decoration:underline;background:none;border:0;padding:0;font:inherit;cursor:pointer}.ai-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}.ai-sugg button{ border:1px solid var(--line);background:transparent;color:var(--ink2); padding:6px 11px;border-radius:100px;font:inherit;font-size:.76rem;cursor:pointer; transition:background .2s,border-color .2s}.ai-sugg button:hover{border-color:var(--brand2);background:rgba(22,104,196,.08)}.ai-form{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}.ai-form input{ flex:1;min-width:0;border:1px solid var(--line);border-radius:10px; padding:9px 12px;font:inherit;font-size:.85rem;background:transparent;color:var(--ink)}.ai-form input:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(46,155,230,.16)}.ai-form button{ border:0;border-radius:10px;padding:0 13px;cursor:pointer; background:var(--brand);color:#fff;display:grid;place-items:center}html[data-tema="scuro"] .ai-form button{background:var(--brand2);color:#06121F}.ai-form button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}/* ================================================================== MENU MOBILE — non scorreva ================================================================== Era display:flex con justify-content:center e nessun overflow: con undici voci il contenuto superava lo schermo e l'ultima ("Contatti") restava irraggiungibile a qualsiasi altezza, anche su 390x844. Le due margin:auto centrano il menu quando c'è spazio e lo lasciano scorrere quando non ce n'è, senza tagliare la prima voce come farebbe justify-content:center con overflow. */ .mobile-menu{ justify-content:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; /* scorrimento fluido su iOS */ overscroll-behavior:contain; /* non trascina la pagina sotto */ padding:84px 28px calc(28px + env(safe-area-inset-bottom))}.mobile-menu > a:first-of-type{margin-top:auto}.mobile-menu > a:last-of-type{margin-bottom:auto}.mobile-menu .mclose{position:fixed;top:22px;right:22px;z-index:2}/* su schermi bassi le voci si stringono, invece di uscire dallo schermo */ @media(max-height:800px){ .mobile-menu a{font-size:1.32rem;padding:10px 0} .mobile-menu{padding-top:74px} } @media(max-height:620px){ .mobile-menu a{font-size:1.12rem;padding:8px 0} }/* la barra azioni in fondo non deve coprire l'ultima voce */ @media(max-width:600px){ .mobile-menu{padding-bottom:calc(96px + env(safe-area-inset-bottom))} } /* i tondi flottanti si possono trascinare dove serve */ .wa-fab,.ai-btn,.totop{ cursor:grab;touch-action:none; -webkit-user-select:none;user-select:none}.wa-fab.trascino,.ai-btn.trascino,.totop.trascino{ cursor:grabbing;transform:scale(1.06);transition:none; box-shadow:0 14px 34px -8px rgba(0,0,0,.45)}.wa-fab:active,.ai-btn:active,.totop:active{cursor:grabbing}/* quando l'utente li ha spostati, le regole per telefono non devono riportarli al loro posto di partenza */ .wa-fab.spostato,.ai-btn.spostato,.totop.spostato{ right:auto!important;bottom:auto!important}.fab-reset{ background:none;border:0;padding:0;font:inherit;font-size:inherit; color:inherit;text-decoration:underline;cursor:pointer}/* ================================================================== TONDI FLOTTANTI — si sovrapponevano ================================================================== Il pulsante dell'assistente stava a bottom:92px e WhatsApp a 104px: si accavallavano per 29 px, e il clic finiva sempre sull'assistente perché ha z-index più alto. Chi voleva WhatsApp apriva l'assistente. Ora la colonna è ordinata dal basso: WhatsApp, assistente, torna su. */ /* Le posizioni fisse non reggevano: WhatsApp cambia altezza a più soglie e a 768px i due tornavano a toccarsi. L'impilamento lo fa il codice, misurando davvero il pulsante WhatsApp. */ /* Aree di tocco: i comandi in testata erano sotto i 44px, la misura minima perché un dito li centri senza sbagliare. */ @media(max-width:900px){ .tool-btn{min-width:44px;min-height:44px} .lang-btn{min-height:44px} .burger{min-width:44px;min-height:44px} .mclose{min-width:44px;min-height:44px} .cc-chip .fav{min-width:34px} } /* ================================================================== PRODOTTI — 251 articoli con foto, prezzo, scheda tecnica ================================================================== */ .pr-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:clamp(16px,2vw,22px) 0 6px}.pr-cerca{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:220px; border:1px solid var(--line);border-radius:12px;background:var(--white)}.pr-cerca:focus-within{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(46,155,230,.16)}.pr-cerca svg{width:16px;height:16px;margin-left:12px;flex:none;color:#4A5C70;fill:none;stroke:currentColor;stroke-width:2}html[data-tema="scuro"] .pr-cerca svg{color:#A9BCD1}.pr-cerca input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.86rem;color:var(--ink)}.pr-cerca input:focus{outline:none}.pr-filtri{display:flex;flex-wrap:wrap;gap:6px}.prf{border:1px solid var(--line);background:transparent;color:var(--ink2); border-radius:100px;font:inherit;font-size:.78rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.prf:hover{border-color:var(--brand2)}.prf.on{background:var(--brand);border-color:var(--brand);color:#fff}html[data-tema="scuro"] .prf.on{background:var(--brand2);border-color:var(--brand2);color:#06121F}.pr-esito{flex-basis:100%;margin:2px 0 0;font-size:.8rem;color:#4A5C70}html[data-tema="scuro"] .pr-esito{color:#A9BCD1}.pr-griglia{display:grid}.pr-card{border:1px solid var(--line);background:var(--white);overflow:hidden; display:flex;flex-direction:column;transition:border-color .3s,transform .3s,box-shadow .3s}.pr-card:hover{border-color:var(--brand2);transform:translateY(-3px);box-shadow:var(--shadow-sm)}.pr-foto{position:relative;background:var(--ice);overflow:hidden}html[data-tema="scuro"] .pr-foto{background:#0E1A2B}.pr-foto img{width:100%;height:100%;object-fit:cover;display:block}.pr-badge{position:absolute;top:8px;left:8px;background:var(--gold);color:#3A2415; font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;font-weight:700}.pr-fav{position:absolute;top:6px;right:6px;border:0;border-radius:50%; background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;padding:0}html[data-tema="scuro"] .pr-fav{background:rgba(10,20,34,.8)}.pr-fav svg{fill:none;stroke:#4A5C70;stroke-width:1.8}html[data-tema="scuro"] .pr-fav svg{stroke:#A9BCD1}.pr-fav[aria-pressed="true"] svg{fill:#C2185B;stroke:#C2185B}.pr-corpo{display:flex;flex-direction:column;flex:1}.pr-coll{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:#4A5C70}html[data-tema="scuro"] .pr-coll{color:#A9BCD1}.pr-nome{font-family:var(--disp);font-weight:700;font-size:.92rem;line-height:1.25;margin:0}.pr-spec{font-size:.72rem;color:#4A5C70;margin:2px 0 0}html[data-tema="scuro"] .pr-spec{color:#A9BCD1}.pr-piede{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto}.pr-prezzo{font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--brand)}html[data-tema="scuro"] .pr-prezzo{color:var(--brand2)}.pr-prezzo small{font-family:var(--mono);font-size:.6rem;font-weight:400;color:#4A5C70;margin-left:3px}html[data-tema="scuro"] .pr-prezzo small{color:#A9BCD1}.pr-apri{border:0;background:none;padding:0;font:inherit;font-size:.75rem;color:var(--brand); text-decoration:underline;cursor:pointer}html[data-tema="scuro"] .pr-apri{color:var(--brand2)}.pr-altro{display:block;margin:18px auto 0;border-radius:100px; border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:.86rem;cursor:pointer}.pr-altro:hover{border-color:var(--brand2)}/* scheda del singolo prodotto */ .pr-mod{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:16px; background:rgba(6,14,26,.72);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.pr-mod.on{opacity:1;visibility:visible}.pr-box{width:min(720px,100%);max-height:88vh;overflow-y:auto;background:var(--white);border:1px solid var(--line);transform:translateY(10px);transition:transform .3s}.pr-mod.on .pr-box{transform:none}.pr-box img{width:100%;object-fit:cover;display:block;border-radius:18px 18px 0 0}.pr-testo h3{margin:0 0 3px;font-size:1.15rem}.pr-testo .pr-coll{margin-bottom:10px;display:block}.pr-testo p{font-size:.88rem;line-height:1.6;color:var(--ink2);white-space:pre-line;margin:0 0 12px}.pr-tab{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.pr-tab div{border:1px solid var(--line)}.pr-tab b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.09em; text-transform:uppercase;color:#4A5C70;margin-bottom:2px;font-weight:600}html[data-tema="scuro"] .pr-tab b{color:#A9BCD1}.pr-tab span{font-size:.85rem}.pr-azioni{display:flex;flex-wrap:wrap;gap:8px}.pr-azioni .btn{padding:10px 16px;font-size:.84rem}.pr-x{position:sticky;top:8px;float:right;margin:8px 8px 0 0;width:34px;height:34px;border:0; border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;z-index:2} @media(max-width:640px){ .pr-griglia{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} }/* ================================================================== COMPATTAZIONE — ingombri, non caratteri ================================================================== Il testo base è già a 14px e molte scritte stanno sotto gli 11: ridurle ancora renderebbe il sito faticoso da leggere. Qui si stringono margini, riempimenti, icone e altezze delle schede. */ /* ---------- specchietti informativi ---------- */ .spec-card{padding:13px 13px 12px}.spec-card h3{margin-bottom:5px}.spec-card > p{margin-bottom:9px;line-height:1.5}.shop-list,.spec-list{gap:4px;margin-bottom:11px}.shop-list li,.spec-list li{gap:8px}.shop-list svg,.spec-list svg{width:15px;height:15px;margin-top:1px}.shop-ic{width:34px;height:34px;border-radius:9px}.shop-ic svg{width:16px;height:16px}.shop-head{gap:9px;margin-bottom:8px}.spec-tag{padding:4px 9px;margin-bottom:8px}.spec-addr{padding:8px 10px;border-radius:10px}.spec-actions{gap:6px}.spec-actions .btn{padding:8px 13px}.sub-badge{margin-top:8px}.mcta{margin-top:12px}/* ---------- schede prodotto ---------- */ .pr-griglia{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:11px;margin-top:13px}.pr-card{border-radius:12px}.pr-corpo{gap:2px}.pr-piede{padding-top:6px}.pr-fav{width:26px;height:26px}.pr-fav svg{width:13px;height:13px}.pr-badge{padding:2px 6px}.pr-bar{margin:12px 0 4px;gap:6px}.prf{padding:6px 11px}.pr-cerca input{padding:8px}.pr-altro{margin-top:14px;padding:9px 18px}.pr-box{border-radius:15px}.pr-box img{aspect-ratio:16/9}.pr-testo{padding:14px}.pr-tab{gap:6px;margin:10px 0 13px}.pr-tab div{padding:6px 9px;border-radius:8px}/* ---------- catalogo a voci ---------- */ .cc{gap:10px;margin-top:16px}.cc-head{margin-bottom:4px}.cc-nota{margin-bottom:8px;line-height:1.4}.cc-chips{gap:5px}.cc-chip .fav{width:24px}.cc-bar{margin:12px 0 4px;gap:7px}.cc-sub{margin:18px 0 2px}.cc-camp{padding:11px 14px;gap:11px;margin-top:14px}.calc-row{gap:8px}.calc-row input,.calc select{padding:7px 10px}.calc-out{margin-top:10px}.calc-azioni{margin-top:10px}/* ---------- aria fra le sezioni ---------- */ .section{padding-top:clamp(26px,3vw,46px);padding-bottom:clamp(26px,3vw,46px)}.gamma{gap:7px}.trust{gap:10px}.field{margin-bottom:9px}.news{padding:clamp(16px,2.2vw,24px)}.foot-grid{gap:16px} @media(max-width:640px){ .pr-griglia{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px} .spec-card{padding:11px} .section{padding-top:24px;padding-bottom:24px} }/* Galleria e griglia prodotti erano i due blocchi più alti della pagina: 1068 e 1111 px. Righe più basse e colonne più strette li accorciano senza togliere nemmeno una foto. */ .gal{grid-auto-rows:72px;gap:9px}.pr-griglia{grid-template-columns:repeat(auto-fill,minmax(156px,1fr))}.pr-foto{aspect-ratio:1/1} @media(max-width:640px){ .gal{grid-auto-rows:58px;gap:7px} .pr-griglia{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} }/* riquadro di riserva quando una foto non arriva */ .pr-foto.senza-foto{display:grid;place-items:center}.pr-foto.senza-foto::after{ content:attr(data-iniz);font-family:var(--disp);font-weight:700; font-size:1.5rem;color:#8FA3B8;letter-spacing:.04em}/* Ultimo ritocco: solo ingombri, i caratteri di lettura restano dove sono. */ .section{padding-top:clamp(22px,2.6vw,40px);padding-bottom:clamp(22px,2.6vw,40px)}.sec-head{margin-bottom:clamp(12px,1.5vw,18px)}.sec-head h2{font-size:clamp(1.15rem,1.95vw,1.55rem)!important}h1,.hero-tag-line{font-size:clamp(1.4rem,2.8vw,2.1rem)!important}.gal{grid-auto-rows:66px;gap:8px}.pr-griglia{gap:9px;margin-top:11px}.pr-corpo{padding:8px 9px 9px}.cc{gap:9px;margin-top:14px}.cc-fam{padding:11px}.spec-grid{gap:10px}.spec-card{padding:12px}.calc{padding:12px 13px;margin-top:14px}.trust{margin-top:15px}.gamma{margin-top:14px}.espo-media{max-height:300px}.proc-visual{max-height:235px}.about-media .pfx,.feat-media .pfx{height:clamp(195px,19vw,265px)}.form{padding:14px}footer{padding-top:clamp(20px,2.3vw,32px)} @media(max-width:640px){ .section{padding-top:21px;padding-bottom:21px} .gal{grid-auto-rows:54px} } /* ================================================================== FLUIDITÀ ================================================================== Il sito aveva 40 elementi sfocati (uno 2160x1350 con blur 28px, tre aloni con blur 90px) e 55 animazioni che giravano di continuo, anche fuori schermo. Ogni fotogramma ridisegnava livelli enormi: 2 fps. Qui non si toglie nessun effetto. Si fa in modo che: - i livelli sfocati vengano disegnati una volta sola e poi solo spostati dalla scheda video, invece di essere ricalcolati; - le animazioni decorative si fermino quando escono dallo schermo; - il browser salti del tutto il disegno delle sezioni non visibili. ================================================================== */ /* 1. I livelli decorativi diventano superfici a sé, disegnate una volta. Senza questo, ogni spostamento ricalcola la sfocatura da capo. */ .hero-aurora,.orb,.ray,.rays2,.rays3,.beam,.glow,.sheen,.alone{ will-change:transform,opacity; transform:translateZ(0); backface-visibility:hidden; contain:paint}/* 2. Le sfocature più grandi costano in proporzione al raggio: su un gradiente morbido 90px e 48px sono indistinguibili a occhio. */ .orb{filter:blur(48px)!important}.hero-aurora{filter:blur(20px)!important}/* 3. Fuori schermo l'animazione si ferma: nessun ridisegno inutile. */ .fuori-vista,.fuori-vista *{ animation-play-state:paused!important}/* 4. Il browser salta il disegno di ciò che non è a schermo. L'altezza dichiarata evita che la barra di scorrimento salti. */ section:not(.hero):not(#top){ content-visibility:auto; contain-intrinsic-size:auto 700px}/* 5. Su schermi piccoli la scheda video è meno potente: gli aloni restano, con sfocatura più corta. */ @media(max-width:900px){ .orb{filter:blur(30px)!important} .hero-aurora{filter:blur(14px)!important} .ray,.rays2,.rays3{filter:none!important} }/* 6. Chi ha chiesto meno movimento non paga nulla di tutto questo. */ @media(prefers-reduced-motion:reduce){ .hero-aurora,.orb,.ray,.rays2,.rays3,.beam,.glow{animation:none!important} }/* ================================================================== SENSAZIONE DI FLUIDITÀ ================================================================== Il carico era già veloce (mezzo secondo). Quello che rendeva il sito "macchinoso" erano due cose diverse dalla velocità: 1. I contenuti comparivano in 0,9 secondi mentre scorrevi: scendevi e le cose arrivavano dopo. Ora 0,32s: si nota appena, ma la pagina sembra già pronta. 2. Dieci punti del sito usavano la sfocatura di sfondo, anche su frecce da 37 px dove non si vede. È l'effetto più caro che esista per il browser, e su Safari fa scattare lo scorrimento. Resta dove serve davvero — testata, lightbox, informative — e sparisce dove era solo decorazione, sostituito da fondi un filo più pieni. ================================================================== */ .reveal{ transition:opacity .32s cubic-bezier(.2,.7,.3,1), transform .34s cubic-bezier(.2,.7,.3,1)!important; transform:translateY(14px)!important}.reveal.in,.reveal.on,.reveal.visible{transform:none!important}.d1{transition-delay:.05s!important}.d2{transition-delay:.1s!important}.d3{transition-delay:.15s!important}.d4{transition-delay:.2s!important}/* sfocatura di sfondo tolta dove non si vedeva */ .btn-ghost,.card .arrow,.zoom-hint,.lb-btn,.trust-item,.totop,.form{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important}/* fondi leggermente più pieni, così l'aspetto regge senza la sfocatura */ .trust-item{background:rgba(255,255,255,.82)}html[data-tema="scuro"] .trust-item{background:rgba(22,36,58,.86)}.form{background:rgba(255,255,255,.9)}html[data-tema="scuro"] .form{background:rgba(22,36,58,.9)}.totop{background:rgba(255,255,255,.94)}html[data-tema="scuro"] .totop{background:rgba(22,36,58,.94)}.card .arrow,.zoom-hint,.lb-btn{background:rgba(255,255,255,.22)} /* Il catalogo aveva due elenchi per la stessa cosa: le voci di collezione e la griglia dei prodotti. Le voci restano, ma chiuse: chi le vuole le apre, chi no vede subito i prodotti con foto e prezzo. */ .cc-coll{margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--white)} .cc-coll > summary{ cursor:pointer;padding:11px 14px;font-size:.88rem;font-weight:600; display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none; } .cc-coll > summary::-webkit-details-marker{display:none} .cc-coll > summary::after{content:'⌄';font-size:1.1rem;line-height:1;color:#4A5C70;transition:transform .25s} html[data-tema="scuro"] .cc-coll > summary::after{color:#A9BCD1} .cc-coll[open] > summary::after{transform:rotate(180deg)} .cc-coll > summary span{font-family:var(--mono);font-size:.7rem;color:#4A5C70;font-weight:400} html[data-tema="scuro"] .cc-coll > summary span{color:#A9BCD1} .cc-coll[open]{padding-bottom:12px} .cc-coll .cc-sub{margin-top:10px;padding:0 14px} .cc-coll .cc{padding:0 14px} .cc-coll .cc-camp{margin:12px 14px 0} /* Il pulsante che apre le collezioni deve sembrare un pulsante. */ .cc-coll > summary{ background:rgba(22,104,196,.07);border-radius:11px; transition:background .22s,color .22s; } html[data-tema="scuro"] .cc-coll > summary{background:rgba(46,155,230,.12)} .cc-coll > summary:hover{background:rgba(22,104,196,.14)} html[data-tema="scuro"] .cc-coll > summary:hover{background:rgba(46,155,230,.2)} .cc-coll > summary:focus-visible{outline:2px solid var(--brand2);outline-offset:2px} .cc-coll{border-color:transparent;background:transparent} .cc-coll[open]{border-color:var(--line);background:var(--white)} /* rimandi alle pagine dedicate: servono al visitatore e a Google */ .pagine-sez{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 4px} .pagine-sez a{ display:inline-flex;align-items:center;gap:6px; border:1px solid var(--line);border-radius:100px;padding:8px 14px; font-size:.82rem;color:var(--ink2);transition:border-color .22s,background .22s,color .22s; } .pagine-sez a::after{content:'→';font-size:.9em;opacity:.6} .pagine-sez a:hover{border-color:var(--brand2);background:rgba(22,104,196,.08);color:var(--ink)} html[data-tema="scuro"] .pagine-sez a:hover{background:rgba(46,155,230,.14)} /* ================================================================== SPECCHIETTI E MODULI — decisamente più compatti ================================================================== Qui si scende anche sui caratteri, non solo sui margini: sono blocchi di servizio, si leggono in due secondi. Il testo di lettura delle sezioni narrative resta com'era. */ /* ---------- specchietti informativi ---------- */ .spec-card{padding:11px 12px 11px} .spec-grid{gap:9px} .spec-card h3{font-size:1.02rem;line-height:1.2;margin-bottom:4px} .spec-card > p{font-size:.79rem;line-height:1.45;margin-bottom:8px} .shop-list li,.spec-list li{font-size:.76rem;line-height:1.35;gap:7px} .shop-list,.spec-list{gap:3px;margin-bottom:9px} .shop-list svg,.spec-list svg{width:13px;height:13px;margin-top:2px} .shop-ic{width:30px;height:30px;border-radius:8px} .shop-ic svg{width:14px;height:14px} .shop-head{gap:8px;margin-bottom:6px} .spec-tag{padding:3px 8px;font-size:.62rem;margin-bottom:7px} .spec-addr{padding:7px 9px;border-radius:9px} .spec-addr b{font-size:.84rem} .spec-addr span{font-size:.73rem} .spec-actions{gap:5px} .spec-actions .btn{padding:7px 12px;font-size:.78rem} .sub-badge{margin-top:7px;font-size:.58rem} .mcta{margin-top:10px;font-size:.8rem} /* ---------- modulo preventivo ---------- */ .form{padding:12px} .field{margin-bottom:7px} .field label{font-size:.72rem;margin-bottom:3px} .field input,.field select,.field textarea{padding:7px 10px;font-size:.82rem;border-radius:9px} .field textarea{min-height:66px} .consent{font-size:.72rem;gap:7px;margin:9px 0} .consent input{width:16px;height:16px} .form .btn{padding:9px 16px;font-size:.85rem} .form-note{font-size:.7rem;margin-top:6px} .contact-copy h2{margin-bottom:7px} .contact-copy > p{font-size:.82rem;margin-bottom:13px} .ci-row{padding:7px 0} .ci-row b{font-size:.84rem} .ci-row span{font-size:.74rem} .ci-row svg{width:16px;height:16px} /* ---------- newsletter ---------- */ .news{padding:clamp(13px,1.8vw,19px)} .news h2{font-size:clamp(1rem,1.7vw,1.3rem)!important;margin-bottom:5px} .news p{font-size:.79rem;line-height:1.45} .news-row input{padding:8px 11px;font-size:.82rem} .news-row .btn{padding:8px 15px;font-size:.82rem} @media(max-width:640px){ .spec-card{padding:10px} .form{padding:11px} } /* Le regole con #showroom vincevano su quelle per classe: qui la specificità è pari, così i rimpicciolimenti fanno effetto davvero. */ #showroom .spec-card h3{font-size:1.02rem;line-height:1.2;margin-bottom:4px} #showroom .spec-card > p{font-size:.79rem;line-height:1.45;margin-bottom:8px} #showroom .spec-list li,#showroom .shop-list li{font-size:.76rem;line-height:1.35} #showroom .spec-list,#showroom .shop-list{gap:3px;margin-bottom:9px} #showroom .spec-list svg,#showroom .shop-list svg{width:13px;height:13px} #showroom .shop-ic{width:30px;height:30px} #showroom .shop-ic svg{width:14px;height:14px} #showroom .spec-tag{padding:3px 8px;margin-bottom:7px;font-size:.62rem} #showroom .spec-addr{padding:7px 9px} #showroom .spec-actions{gap:5px} #showroom .spec-actions .btn{padding:7px 12px;font-size:.78rem} #showroom .sub-badge{margin-top:7px;font-size:.58rem} #showroom .mcta{margin-top:10px;font-size:.8rem} /* Le spunte del riquadro Subito erano disegnate in rosso su fondo rosso, e il tratto restava non disegnato: invisibili. Qui sono bianche e piene. */ .spec-subito .shop-list svg, .spec-subito .spec-list svg{ stroke:#fff!important; color:#fff!important; stroke-dashoffset:0!important; opacity:1!important; } /* ---------- marchi veri negli specchietti ---------- */ /* CasaForma: il simbolo dentro il quadrato del marchio, e il logo esteso al posto del titolo scritto a mano. */ .shop-ic.cf{display:grid;place-items:center;padding:6px} .shop-ic.cf img{width:100%;height:100%;object-fit:contain;display:block} h3 .logo-cf{height:26px;width:auto;display:block} /* Il logo CasaForma è bianco: sulla scheda chiara sparirebbe. Si usa la versione scura sul tema chiaro e quella bianca sullo scuro. */ h3 .logo-cf{content:url('img/casaforma-logo-scuro.png')} html[data-tema="scuro"] h3 .logo-cf{content:url('img/casaforma-logo.png')} @media(max-width:640px){ h3 .logo-cf{height:22px} } /* Subito: il riquadro resta nei colori del marchio; il tondo bianco porta la "s" minuscola della piattaforma, come sul loro marchio. */ .shop-ic.sub{ background:#fff;color:#B00020; font-family:var(--disp);font-weight:800;font-size:1.25rem;line-height:1; display:grid;place-items:center; } .shop-ic.sub svg{display:none} .shop-ic.sub::after{content:'s';margin-top:-2px} /* ================================================================== APERTURA PIÙ SVELTA ================================================================== All'apertura la prima schermata restava vuota per oltre due secondi: il velo aspettava il caricamento del logo, poi partivano transizioni da 0,6-0,7 s con ritardi a cascata. Qui la sequenza resta, ma dura un terzo: si nota il movimento, non l'attesa. */ html.apertura-fatta header, html.apertura-fatta .hero-logo, html.apertura-fatta .hero-tag-line, html.apertura-fatta .hero-inner .lead, html.apertura-fatta .hero-cta, html.apertura-fatta .hero-tag{ transition-duration:.26s!important; } html.apertura-fatta .hero-logo{transition-delay:.02s!important} html.apertura-fatta .hero-tag-line{transition-delay:.06s!important} html.apertura-fatta .hero-inner .lead{transition-delay:.10s!important} html.apertura-fatta .hero-cta{transition-delay:.14s!important} html.apertura-fatta .hero-tag{transition-delay:.18s!important} html.apertura-fatta header{transition-delay:0s!important} /* il velo scuro sopra la pagina se ne va subito */ .veil{transition-duration:.22s!important} /* ================================================================== RISPOSTA PIÙ SVELTA DEI PANNELLI ================================================================== I comandi rispondono in pochi millisecondi, ma le animazioni di apertura duravano 0,3-0,35 s: è quello che fa sembrare lento un sito veloce. Qui scendono a 0,16-0,18 s: il movimento si vede ancora, l'attesa no. */ .ai-box{transition:opacity .16s,transform .16s} .pr-mod{transition:opacity .16s,visibility .16s} .pr-mod .pr-box{transition:transform .18s} .lightbox{transition:opacity .18s} .toast{transition:opacity .16s,transform .16s} .pr-card{transition:border-color .18s,transform .18s,box-shadow .18s} .cc-chip > a,.cc-chips a{transition:background .14s,border-color .14s,color .14s,transform .14s} .btn{transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s} .prf,.ccf{transition:background .14s,border-color .14s,color .14s,transform .14s} .faq-q{transition:background .16s,color .16s} .faq-a{transition:max-height .22s ease,opacity .18s} /* ================================================================== PRIMA SCHERMATA: TUTTO INSIEME ================================================================== Gli elementi comparivano uno dopo l'altro, ciascuno con il suo ritardo: logo, poi titolo, poi testo, poi pulsanti, poi etichette. Da vedere sembrava lento e sconnesso. Ora escono insieme, in un quarto di secondo. */ html.apertura-fatta header, html.apertura-fatta .hero-logo, html.apertura-fatta .hero-tag-line, html.apertura-fatta .hero-inner .lead, html.apertura-fatta .hero-cta, html.apertura-fatta .hero-tag, html.apertura-fatta .hero-tags, html.apertura-fatta .hero-inner > *{ transition-delay:0s!important; transition-duration:.24s!important; } /* niente scaglionamento nemmeno sugli elementi contrassegnati d1..d4 dentro la prima schermata */ .hero .d1,.hero .d2,.hero .d3,.hero .d4, #top .d1,#top .d2,#top .d3,#top .d4{transition-delay:0s!important} /* La ricerca delle collezioni ora vive dentro il blocco richiudibile: a schermo resta una sola barra invece di due sovrapposte. */ .cc-coll .cc-bar{margin:12px 14px 8px} .cc-coll[open] .cc-bar{display:flex} .cc-sub{margin-top:16px} /* il contatore dei preferiti sta nella fila dei filtri prodotto */ .prf-fav{display:inline-flex;align-items:center;gap:6px} .prf-fav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2} .prf-fav[aria-pressed="true"] svg{fill:#C2185B;stroke:#C2185B} .prf-fav b{font-family:var(--mono);font-size:.72rem} /* la scheda prodotto intera è cliccabile */ .pr-card{cursor:pointer} .pr-card:focus-visible{outline:2px solid var(--brand2);outline-offset:2px} .pr-card:hover .pr-nome{color:var(--brand)} html[data-tema="scuro"] .pr-card:hover .pr-nome{color:var(--brand2)} .pr-piede{justify-content:flex-start}