/* tema.css · lp.gigasolar.it · AY-1 · un tema solo (04/10/2026): colori, caratteri, raggi e regole comuni a tutte le pagine. Prima erano copiati in ognuna delle 8 pagine. Si cambia QUI una volta e vale ovunque. Le regole proprie di una pagina restano nella pagina. */ *{margin:0;padding:0;box-sizing:border-box} /* AY-2 · colori del tema: UNA tavolozza, coi valori effettivi (prima erano due :root in sequenza) */ :root{ /* BS-1 (LP-19 #15-#16): la scala dei caratteri, unica per tutto il sito. 8 gradini, proporzionali alla larghezza (375 → 1335 px): xs 11→12 · s 12,5→13,5 · b 14→15 · m 16→17 · l 18→20 · xl 21→25 · 2x 26→32 · 3x 30→40. Si cambia QUI e vale ovunque. */ --t-xs:clamp(12px,11.2px + .22vw,12.5px); /* DR-3 (REPO-CHAT-10): niente sotto i 12 px sul telefono */ --t-s:clamp(12.5px,11.6px + .25vw,13.5px); --t-b:clamp(14px,13px + .28vw,15px); --t-m:clamp(16px,15px + .3vw,17px); --t-l:clamp(18px,16.6px + .38vw,20px); --t-xl:clamp(21px,18.5px + .7vw,25px); --t-2x:clamp(26px,22px + 1.1vw,32px); --t-3x:clamp(30px,24px + 1.6vw,40px); --dark:#1e293b; --blue:#2563eb; --navy:#0d2b4e; --navy-2:#0a2140; --ink:#16243a; --mut:#5b6b82; --line:#e3e9f2; --amber:#f59e0b; --amber-2:#fbbf24; --green:#0a9269; --carta:#ffffff; --fondo:#f6f8fb; --ombra:0 1px 2px rgba(13,43,78,.05),0 10px 30px -12px rgba(13,43,78,.14); --r:18px; /* AY-2b · i colori battezzati: colori che prima erano scritti a mano nelle regole (nome = famiglia + chiarezza) */ --acqua-600:#0ca875; --acqua-600-b:#10b981; --acqua-700:#059669; --acqua-800:#047857; --acqua-800-b:#064e3b; --acqua-800-c:#065f46; --ambra-100:#fde8bd; --ambra-100-b:#fef3c7; --ambra-200:#f6dfa8; --ambra-200-b:#fde68a; --ambra-400:#fcd34d; --ambra-50:#fff7e6; --ambra-50-b:#fffbeb; --arancio-600:#b45309; --arancio-600-b:#d97706; --arancio-700:#78350f; --arancio-700-b:#7c2d12; --arancio-700-c:#92400e; --blu-100:#bfdbfe; --blu-100-b:#d7e1ee; --blu-100-c:#d9e6f7; --blu-100-d:#dbe6f2; --blu-100-e:#dbeafe; --blu-100-f:#e2e8f0; --blu-100-g:#e8eef6; --blu-200:#93c5fd; --blu-200-b:#b9c9dc; --blu-200-c:#bed3ec; --blu-200-d:#c6d4e5; --blu-200-e:#c9d6e6; --blu-200-f:#cbd5e1; --blu-300:#94a3b8; --blu-300-b:#9fb2c9; --blu-300-c:#a9bbd1; --blu-400:#8da3bd; --blu-50:#eaf1fb; --blu-50-b:#eef3fb; --blu-50-c:#eff6ff; --blu-50-d:#f1f5f9; --blu-50-e:#f8fafc; --blu-50-f:#fbfcff; --blu-500:#64748b; --blu-600:#1e40af; --blu-700:#14406e; --blu-700-b:#334155; --blu-700-c:#475569; --blu-800:#123a63; --blu-800-b:#1e3a5f; --blu-900:#0f172a; --rosso-100:#fee2e2; --rosso-200:#fca5a5; --rosso-400:#ef4444; --rosso-50:#fef2f2; --rosso-50-b:#fff5f5; --rosso-500:#dc2626; --rosso-600:#991b1b; --rosso-600-b:#b91c1c; --verde-100:#c8eedd; --verde-100-b:#d1fae5; --verde-100-c:#e7f8f1; --verde-200:#a7f3d0; --verde-200-b:#a9dfc6; --verde-300:#6ee7b7; --verde-300-b:#86efac; --verde-50:#ecfdf5; --verde-50-b:#f0fdf4; --verde-800:#166534; } html{scroll-behavior:smooth} body{font-family:'Segoe UI','DejaVu Sans',Arial,sans-serif;color:var(--ink);background:var(--blu-50-d);font-size:var(--t-m);line-height:1.55} /* DR-1 / DR-2 (REPO-CHAT-10, analisi del testo 17/10): una scala sola per i titoli (h1 > h2 > h3 > h4) e un corpo solo: gli elenchi alla misura dei paragrafi, non del body */ h1{font-size:var(--t-2x)}h2{font-size:var(--t-xl)}h3{font-size:var(--t-l)}h4{font-size:var(--t-m)}li{font-size:var(--t-b)}main p{font-size:var(--t-b)} .wrap{max-width:860px;margin:0 auto;padding:0 16px} .tbc{background:var(--ambra-200-b);color:var(--arancio-700);padding:0 4px;border-radius:3px;font-weight:700} header{background:var(--navy);color:var(--carta);border-bottom:4px solid var(--amber)} header .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap} .logo{background:var(--carta);border-radius:6px;padding:4px 9px} .logo img{height:34px;display:block} .hinfo{text-align:right;font-size:var(--t-s);line-height:1.5} .hinfo b{color:var(--amber-2);font-size:var(--t-b)} .hinfo div{color:var(--blu-200-f)} .hinfo .c{margin-top:3px;padding-top:3px;border-top:1px solid rgba(255,255,255,.18);color:var(--blu-300)} .motto{background:var(--verde-50);border:1px solid var(--verde-200);border-left:10px solid var(--green);border-bottom:4px solid var(--amber);border-radius:12px 12px 0 0;margin-top:16px;padding:16px 20px 12px 70px;position:relative} .motto .q{position:absolute;left:16px;top:-6px;font:700 76px/1 Georgia,serif;color:var(--amber)} .motto p{font-size:var(--t-xl);font-weight:800;line-height:1.28;color:var(--acqua-800-b)} .motto p span{color:var(--acqua-800);border-bottom:3px solid var(--amber)} .motto small{display:block;text-align:right;font-size:var(--t-s);font-weight:700;color:var(--acqua-800-c);margin-top:6px} .hero{background:var(--blu-50);border-left:10px solid var(--navy);border-bottom:5px solid var(--amber);border-radius:0 0 12px 12px;padding:18px 22px} .hero .k{font-size:var(--t-s);letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--arancio-600)} .hero h1{font-size:var(--t-3x);line-height:1.12;color:var(--navy);margin:6px 0 10px} .hero h1 span{color:var(--arancio-600-b)} .hero p{color:var(--blu-700-b);margin-bottom:6px} .hero p b{color:var(--navy)} .hero .n{font-size:var(--t-s);color:var(--mut)} .cta{display:inline-block;margin-top:10px;background:var(--navy);color:var(--carta);text-decoration:none;font-weight:800;padding:13px 22px;border-radius:10px;border-bottom:4px solid var(--amber)} .cta2{display:inline-block;margin:10px 0 0 10px;color:var(--navy);font-weight:700;font-size:var(--t-b);padding:12px 4px;text-decoration:underline} .up{display:none} .api .up{display:block} .api span.up{display:inline} .api .noapi{display:none} input[type=file]{width:100%;padding:10px;font-size:var(--t-b);border:1.5px dashed var(--blu-200-f);border-radius:9px;background:var(--carta)} select{width:100%;padding:13px 12px;font-size:var(--t-m);border:1.5px solid var(--blu-200-f);border-radius:9px;background:var(--carta)} .two{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:520px){.two{grid-template-columns:1fr}} .sec{font-size:var(--t-l);color:var(--navy);margin:20px 0 8px} .svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px} .svc{display:block;background:var(--carta);border:1px solid var(--line);border-top:5px solid var(--green);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)} .svc:nth-child(2){border-top-color:var(--amber)} .svc:nth-child(3){border-top-color:var(--blue)} .svc b{display:block;color:var(--navy);font-size:var(--t-l)} .svc span{font-size:var(--t-b);color:var(--blu-700-c)} .why{list-style:none;margin:14px 0 16px;font-size:var(--t-b);color:var(--blu-700-b)} .why li{padding:3px 0 3px 24px;position:relative} .why li:before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800} details.more{margin-top:14px;border:1.5px dashed var(--blu-200-f);border-radius:10px;padding:10px 14px} details.more summary{cursor:pointer;font-weight:700;color:var(--navy);padding:6px 0} details.info{border-style:solid;border-color:var(--line);font-size:var(--t-b);color:var(--navy)} details.info p{margin:6px 0} .opc,.opcp a{color:var(--navy);font-weight:700} .opcp{text-align:center;font-size:var(--t-b);margin:0 0 16px} [hidden]{display:none!important} .ben{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:16px 0} .b{background:var(--carta);border:1px solid var(--line);border-top:5px solid var(--blue);border-radius:10px;padding:14px 16px} .b:nth-child(2n){border-top-color:var(--green)} .b:nth-child(3n){border-top-color:var(--amber)} .b h3{font-size:var(--t-l);/* DR-1 */color:var(--navy);margin-bottom:4px} .b p{font-size:var(--t-b);color:var(--blu-700-c);line-height:1.5} .quote{background:var(--ambra-100-b);border-left:5px solid var(--amber);border-radius:10px;padding:14px 18px;font-style:italic;font-weight:600;color:var(--arancio-700);font-size:var(--t-l);margin-bottom:16px} .form{background:var(--carta);border:1px solid var(--line);border-radius:14px;padding:18px 18px 22px;margin-bottom:16px} .form h2{font-size:var(--t-xl);color:var(--navy)} .form .sub{color:var(--mut);font-size:var(--t-b);margin:2px 0 8px} .agent{background:var(--blu-50-c);border:1px dashed var(--blu-200);border-radius:8px;padding:6px 12px;font-size:var(--t-b);color:var(--navy);display:none;margin:8px 0} fieldset{border:none;margin-top:18px} legend{font-weight:800;color:var(--navy);font-size:var(--t-m);padding-bottom:6px;width:100%;border-bottom:2px solid var(--line);margin-bottom:10px} legend i{display:inline-block;width:24px;height:24px;border-radius:12px;background:var(--navy);color:var(--amber-2);font-style:normal;font-size:var(--t-s);text-align:center;line-height:24px;margin-right:8px} label.t{display:block;font-size:var(--t-b);color:var(--mut);margin:10px 0 3px} input[type=text],input[type=tel],input[type=email],input[type=number]{width:100%;padding:13px 12px;font-size:var(--t-m);border:1.5px solid var(--blu-200-f);border-radius:9px;background:var(--carta)} input:focus{outline:3px solid var(--blu-100);border-color:var(--blue)} .chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px} .chips label{cursor:pointer;position:relative} .chips input{position:absolute;opacity:0} .chips span{display:inline-block;padding:11px 15px;border:1.5px solid var(--blu-200-f);border-radius:24px;font-size:var(--t-m);background:var(--carta)} .chips input:checked+span{background:var(--navy);color:var(--carta);border-color:var(--navy)} .chips input:focus-visible+span{outline:3px solid var(--blu-100)} .addr{position:relative} #sugg{list-style:none;position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--carta);border:1.5px solid var(--blu-200-f);border-top:none;border-radius:0 0 9px 9px;max-height:260px;overflow:auto;display:none;box-shadow:0 8px 18px rgba(0,0,0,.12)} #sugg li{padding:12px 14px;font-size:var(--t-m);border-top:1px solid var(--line);cursor:pointer} #sugg li small{display:block;color:var(--mut);font-size:var(--t-s)} #sugg li:hover,#sugg li.on{background:var(--blu-50-c)} .gps{margin-top:8px;background:var(--blu-50-c);color:var(--navy);border:1.5px solid var(--blu-200);border-radius:24px;padding:11px 16px;font-size:var(--t-m);font-weight:700;cursor:pointer} .gpsmsg{display:block;font-size:var(--t-b);color:var(--mut);margin-top:6px} .sub2{font-size:var(--t-b);color:var(--mut);margin:8px 0 2px;font-weight:600} .send{background:var(--verde-50);border:2px solid var(--green);border-radius:12px;padding:14px 16px;margin-top:18px} .send h3{color:var(--acqua-800-c);font-size:var(--t-b);letter-spacing:.4px;text-transform:uppercase} .send p{font-size:var(--t-b);color:var(--acqua-800-b);margin-top:4px} .priv{background:var(--blu-50-c);border-left:5px solid var(--blue);border-radius:8px;padding:14px 16px;margin-top:18px;font-size:var(--t-b);line-height:1.6;color:var(--navy)} .priv h3{font-size:var(--t-l);/* DR-1 */color:var(--blu-600);margin-bottom:6px} .priv p{margin-bottom:8px} .cons{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:var(--t-b);cursor:pointer} .cons input{width:22px;height:22px;margin-top:2px;flex:none} .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} .btn{flex:1 1 240px;border:none;border-radius:12px;padding:16px 18px;font-size:var(--t-l);font-weight:800;color:var(--carta);cursor:pointer;border-bottom:5px solid rgba(0,0,0,.2)} .btn.wa{background:var(--green)} .btn.em{background:var(--navy)} .err{display:none;background:var(--rosso-100);color:var(--rosso-600);border-left:5px solid var(--rosso-400);border-radius:8px;padding:10px 14px;margin-top:14px;font-size:var(--t-b)} .ok{display:none;background:var(--verde-50);border-left:5px solid var(--green);border-radius:8px;padding:14px 16px;margin-top:14px;font-size:var(--t-m);color:var(--acqua-800-b)} footer{background:var(--dark);color:var(--blu-300);border-top:4px solid var(--amber);margin-top:20px;font-size:var(--t-b)} footer .wrap{display:flex;flex-wrap:wrap;gap:20px;padding-top:18px;padding-bottom:18px} footer .s{flex:1 1 180px} footer h4{color:var(--amber-2);font-size:var(--t-s);text-transform:uppercase;margin-bottom:5px} footer .n{color:var(--carta);font-weight:700;font-size:var(--t-m)} footer .n b{color:var(--amber-2)} footer .bd{display:inline-block;background:var(--green);color:var(--carta);padding:2px 8px;border-radius:4px;font-size:var(--t-s);margin-top:5px} footer .ib{color:var(--blu-100-f);font-weight:600;margin-top:3px} .bozza{background:var(--rosso-100);color:var(--rosso-600);border:1px dashed var(--rosso-400);border-radius:6px;text-align:center;font-size:var(--t-s);font-weight:700;padding:5px 8px;margin:14px 16px} .tiles{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0} @media(min-width:600px){.tiles{grid-template-columns:1fr 1fr}} .tile{display:block;background:var(--carta);border:1px solid var(--line);border-left:10px solid var(--navy);border-radius:12px;padding:18px 18px;text-decoration:none;color:var(--ink)} .tile b{display:block;font-size:var(--t-xl);color:var(--navy)} .tile span{font-size:var(--t-m);color:var(--blu-700-c)} .tile em{float:right;font-style:normal;font-size:var(--t-2x);color:var(--amber);font-weight:800} .intro{background:var(--blu-50);border-left:10px solid var(--navy);border-bottom:5px solid var(--amber);border-radius:0 12px 12px 0;padding:16px 20px;margin:14px 0 16px} .intro h1{font-size:var(--t-2x);/* DR-1: il titolo di pagina sta sopra ai titoli di sezione */color:var(--navy);line-height:1.15;margin-bottom:6px} .intro p{color:var(--blu-700-b)} table.lst{width:100%;border-collapse:collapse;font-size:var(--t-b);margin:8px 0 12px;background:var(--carta)} table.lst th,table.lst td{border:1px solid var(--line);padding:9px 8px;text-align:right} table.lst th{background:var(--blu-50-c);color:var(--navy);font-size:var(--t-s)} table.lst td:first-child,table.lst th:first-child{text-align:left} .box{background:var(--carta);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px} .box h2{font-size:var(--t-xl);/* DR-1: una misura sola per gli h2 */color:var(--navy);margin-bottom:6px} .box ul{margin:6px 0 0 20px;font-size:var(--t-b)} .note{font-size:var(--t-b);color:var(--mut);margin-top:6px} img{max-width:100%;height:auto} @media(max-width:600px){.intro{padding:12px 14px;margin:10px 0 12px}} @media(max-width:600px){.intro h1{font-size:var(--t-2x);/* DR-1: il titolo di pagina sta sopra ai titoli di sezione */margin:0 0 4px}} @media(max-width:600px){.intro p{font-size:var(--t-b)}} .wz{padding:18px 18px 22px} .pgb{height:8px;background:var(--blu-100-f);border-radius:6px;overflow:hidden} .pgf{height:100%;background:var(--amber);width:0;transition:width .3s} .wzst{list-style:none;display:flex;justify-content:space-between;gap:4px;margin:0 0 10px;padding:0} .wzst li{position:relative;flex:1 1 0;max-width:46px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--blu-50-d);border:2px solid var(--blu-100-f);font-size:var(--t-l);line-height:1;filter:grayscale(1);opacity:.6} .wzst li .nr{position:absolute;right:-3px;bottom:-3px;min-width:16px;height:16px;border-radius:8px;background:var(--blu-300);color:var(--carta);font:700 10px/16px 'Segoe UI',Arial,sans-serif;text-align:center;padding:0 3px} .wzst li.done{filter:none;opacity:1;background:var(--verde-50);border-color:var(--verde-200);cursor:pointer} .wzst li.done:hover,.wzst li.done:focus-visible{border-color:var(--green);outline:none;box-shadow:0 0 0 3px var(--verde-200)} .wzst li.done .nr{background:var(--green)} .wzst li.on{filter:none;opacity:1;background:var(--ambra-50);border-color:var(--amber);box-shadow:0 0 0 3px var(--ambra-200-b)} .wzst li.on .nr{background:var(--navy)} .wzn{font-size:var(--t-b);color:var(--mut);margin:8px 0 4px;font-weight:600} #wzq h2{font-size:var(--t-xl);color:var(--navy);line-height:1.2} .opts{display:grid;gap:10px;margin-top:14px} @media(min-width:700px){.opts{grid-template-columns:1fr 1fr}} .opt{padding:16px 16px;border:1.5px solid var(--blu-200-f);border-radius:12px;font-size:var(--t-l);text-align:left;background:var(--carta);color:var(--ink);cursor:pointer;font-family:inherit} .opt:hover,.opt.on{border-color:var(--navy);background:var(--blu-50)} .opt.on{font-weight:800} .wzback{margin-top:16px;background:none;border:none;color:var(--navy);font-weight:700;font-size:var(--t-m);cursor:pointer;padding:8px 0} .res .rk{font-size:var(--t-3x);font-weight:800;color:var(--navy);line-height:1.15;margin:6px 0} .res .re{font-size:var(--t-l);color:var(--acqua-800-c);font-weight:700} .res h3{font-size:var(--t-l);/* DR-1 */color:var(--navy);margin:14px 0 4px} .res ul{margin:0 0 6px 20px;font-size:var(--t-m)} .res li{margin:3px 0} .ct{font-size:var(--t-xl);color:var(--navy);margin:22px 0 4px;border-top:2px solid var(--line);padding-top:18px} .agent{background:var(--blu-50-c);border:1px dashed var(--blu-200);border-radius:8px;padding:6px 12px;font-size:var(--t-b);color:var(--navy);display:none;margin:8px 0} .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))} textarea{width:100%;padding:13px 12px;font-size:var(--t-m);border:1.5px solid var(--blu-200-f);border-radius:9px;font-family:inherit} header.top .wrap{flex-wrap:nowrap;padding-top:8px;padding-bottom:8px;gap:12px} /* CX-1 (LP-28 #12 «header dev'essere sempre visibile altrimenti si perde il focus»): la testata resta in cima mentre si scorre, su tutte le pagine */ :root{--hdr:58px} /* misurata: 58 px a 375 e a 1335 (il pulsante WhatsApp fa l'altezza); EA-1: è il valore di partenza, tip.js la rimisura sulla testata vera */ html{scroll-padding-top:calc(var(--hdr) + 12px)} /* EA-1 (committente 19/10: «la pagina di rientro dev'essere integrale … per ogni pagina»): ogni ancora e ogni scrollIntoView arriva 12 px sotto la testata fissa; i margini scritti a mano qui sotto si sono tolti per non sommarsi */ header.top{position:sticky;top:0;z-index:60} body.gsm-pieno header.top{position:static} /* con la mappa a tutto schermo la testata non serve: ogni tocco è un angolo */ .top .logo{display:block;flex:none} .top .logo img{height:30px} .top .tag{display:none;color:var(--blu-200-f);font-size:var(--t-s);line-height:1.3} .top .tag b{color:var(--amber-2)} .menu{display:none} .wab{margin-left:auto;flex:none;background:var(--green);color:var(--carta);font-weight:800;text-decoration:none;padding:9px 14px;border-radius:10px;font-size:var(--t-b);white-space:nowrap} .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:var(--carta);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(15,23,42,.10);padding-bottom:env(safe-area-inset-bottom)} .tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px 6px;font-size:var(--t-s);font-weight:700;color:var(--mut);text-decoration:none} .tabbar a span{font-size:var(--t-xl);line-height:1.15;filter:grayscale(1);opacity:.7} .tabbar a.on{color:var(--navy);box-shadow:inset 0 3px 0 var(--amber)} .tabbar a.on span{filter:none;opacity:1} body{padding-bottom:62px} .contact{background:var(--carta);border-top:1px solid var(--line);margin-top:26px} .contact .wrap{padding-top:22px;padding-bottom:22px} .contact h2{color:var(--navy);font-size:var(--t-xl)} .contact p{color:var(--blu-700-c)} .cbtns{display:grid;gap:10px;margin-top:12px} .cbtns a{display:block;text-align:center;text-decoration:none;font-size:var(--t-m);flex:none} .btn.ml{background:var(--carta);color:var(--navy);border:2px solid var(--navy);border-bottom-width:5px} .contact+footer{margin-top:0} .cform{margin-top:14px;display:grid;gap:10px;text-align:left} .cform label{display:block;font-size:var(--t-b);color:var(--blu-700-c);font-weight:700} .cform input,.cform textarea{display:block;width:100%;margin-top:4px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:var(--t-m);color:var(--blu-900);background:var(--carta);box-sizing:border-box} .cform textarea{resize:vertical} .cf2{display:grid;gap:10px} .cform .cfcons{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:var(--t-b)} .cform .cfcons input{display:inline;width:auto;margin-top:3px} #cferr{display:none;color:var(--rosso-600-b);font-weight:700} #cfok{display:none;color:var(--verde-800);font-weight:700} @media(min-width:600px){.cf2{grid-template-columns:1fr 1fr}} @media(hover:hover) and (pointer:fine){.cbtns .soltel{display:none}} @media(hover:hover) and (pointer:fine){.cbtns{grid-template-columns:1fr}} .go{display:grid;gap:12px;margin-top:14px} .go a{display:flex;align-items:center;gap:14px;background:var(--navy);color:var(--carta);text-decoration:none;border-radius:14px;padding:15px 18px;border-bottom:5px solid var(--amber)} .go a.az{background:var(--acqua-800-c)} .go a i{font-style:normal;font-size:var(--t-2x);line-height:1} .go a b{display:block;font-size:var(--t-l);line-height:1.2} .go a small{display:block;font-size:var(--t-b);color:var(--blu-200-f)} .go a:after{content:"\203A";margin-left:auto;font-size:var(--t-2x);color:var(--amber);font-weight:800} .alt{font-size:var(--t-b);margin-top:10px} .alt a,.lnk{color:var(--navy);font-weight:700} .mnote{background:var(--carta);border:1px solid var(--verde-200);border-top:none;border-radius:0 0 12px 12px;padding:10px 20px;font-size:var(--t-b);color:var(--acqua-800-c);margin-bottom:6px} .lead{font-size:var(--t-l);color:var(--blu-700-b);margin-bottom:10px} .how{list-style:none;display:grid;gap:10px;margin:8px 0;counter-reset:h} .how li{background:var(--carta);border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 60px;position:relative;counter-increment:h} .how li:before{content:counter(h);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--amber);color:var(--carta);font-weight:800;text-align:center;line-height:32px} .how b{display:block;color:var(--navy);font-size:var(--t-l)} .how span{font-size:var(--t-b);color:var(--blu-700-c)} .slo{background:var(--navy);color:var(--carta);border-radius:12px;padding:18px 20px;font-size:var(--t-xl);font-weight:800;text-align:center;margin:20px 0;line-height:1.25;border-bottom:5px solid var(--amber)} .slo .tbc{font-size:var(--t-s);vertical-align:middle} /* BS-4 (P3, LP-19 #14): sotto i 900 px lo slogan di Azienda è una fascia bassa, non una schermata: il percorso resta la prima cosa */ @media(max-width:899px){.slo{font-size:var(--t-l);padding:12px 16px;margin:14px 0 8px;border-bottom-width:3px}} /* BT-1 (P4, LP-19 #14 «la parte finale del riepilogo come ci deve entrare nel telefono??»; D1a): l'analisi di Casa in tre pannelli richiudibili, stampo BH-1 (riepilogo richiudibile). I blocchi restano quelli di sempre: ogni testata .gcsez apre e chiude i blocchi con lo stesso data-sez. */ #fase3 .gcsez,#gcresto .gcsez{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;margin:12px 0 6px;padding:9px 12px;background:#eef4fb;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:8px;cursor:pointer;font-size:var(--t-b);color:var(--navy);line-height:1.3} #fase3 .gcsez:focus-visible,#gcresto .gcsez:focus-visible{outline:2.5px solid #fbbf24;outline-offset:2px} #fase3 .gcsez>b,#gcresto .gcsez>b{font-weight:800;white-space:nowrap} #fase3 .gcsez>span,#gcresto .gcsez>span{flex:1;min-width:0;font-size:var(--t-s);color:var(--blu-700-c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #fase3 .gcsez::after,#gcresto .gcsez::after{content:'\25BE';font-size:var(--t-s);color:var(--navy)} #fase3 .gcsez[aria-expanded=true]::after,#gcresto .gcsez[aria-expanded=true]::after{content:'\25B4'} #fase3 .gcsez[aria-expanded=true],#gcresto .gcsez[aria-expanded=true]{border-radius:8px 8px 0 0;margin-bottom:8px} @media(max-width:599px){#gcresto .gcsez,#fase3 .gcsez{flex-wrap:wrap}#gcresto .gcsez::after,#fase3 .gcsez::after{order:1;margin-left:auto}#gcresto .gcsez>span,#fase3 .gcsez>span{order:2;flex:1 1 100%;white-space:normal;line-height:1.3}} /* BW-2-bis (LP-20): sul telefono la sintesi va a capo sotto il titolo invece di finire in «…» */ #gcresto .gcpan .cart{display:none} /* CT-2: il .cart sta nel riquadro della tappa 1 */ /* prima: #gcresto .gcsez[data-sez="1"]+.cart */ /* BW-2 (LP-19 #23): il titolo interno «E domani? Tocca cosa vorrai…» ripeteva la testata; resta nel DOM come segnaposto del pannello 1 */ #gcresto.gc-chiusa-1>[data-sez="1"]:not(.gcsez),#gcresto.gc-chiusa-2>[data-sez="2"]:not(.gcsez),#gcresto.gc-chiusa-3>[data-sez="3"]:not(.gcsez),#gcresto.gc-chiusa-4>[data-sez="4"]:not(.gcsez){display:none!important} /* BU-3 (LP-19 #20): la testata resta sempre visibile; prima spariva col suo pannello e non si poteva più aprire */ /* il pulsante verso il riepilogo resta in vista sul telefono (sopra la barra delle voci) */ @media(max-width:899px){#gcresto .fx.gcfissa{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom));z-index:5;margin:6px -6px 0;padding:8px 6px;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);border-top:1px solid var(--line)}} .faq details{background:var(--carta);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:0 16px} .faq summary{padding:14px 0;font-weight:700;color:var(--navy);cursor:pointer;font-size:var(--t-m)} .faq details p{padding:0 0 14px;color:var(--blu-700-b);font-size:var(--t-m)} .inc:nth-of-type(2){border-top-color:var(--amber)} .inc:nth-of-type(3){border-top-color:var(--blue)} .inc.az{border-top-color:var(--navy)} .inc h2{font-size:var(--t-xl);color:var(--navy);margin-bottom:8px;line-height:1.2} .inc dl{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:var(--t-m)} .inc dt{font-weight:700;color:var(--mut)} .inc dd{margin:0} .inc .src{font-size:var(--t-b);margin-top:10px;color:var(--mut)} /* BO-3 (LP-18 #22): «Come ottieni il rimborso» in passi numerati e il punto d'accesso come pulsante */ .inc .incpt{font-size:var(--t-l);/* DR-1 */color:var(--navy);margin:14px 0 6px} .inc .incpassi{margin:0;padding-left:22px;display:grid;gap:7px;font-size:var(--t-m);line-height:1.45} .inc .incpassi li::marker{font-weight:800;color:var(--amber)} .inc .incvai{margin:12px 0 0}.inc .incvai .btn{display:block;text-align:center;text-decoration:none;color:#fff;white-space:nowrap} @media(min-width:600px){.inc .incvai .btn{display:inline-block}} .inc .incctt{margin:10px 0 0;font-size:var(--t-b);line-height:1.45}.inc .incctt a{color:var(--navy);font-weight:700} .inc .src a{color:var(--navy);font-weight:700;word-break:break-word} /* BP-1 (LP-18 #28): schede a tendina, una aperta; la testata è un pulsante (titolo + una riga che incuriosisce + freccia) */ .inc h2 .incapri{all:unset;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;cursor:pointer;color:inherit;font:inherit;padding-right:30px;position:relative} .inc h2 .incapri:focus-visible{outline:2.5px solid #fbbf24;outline-offset:4px;border-radius:4px} .inc .incriga{display:none;flex-basis:100%;font-family:inherit;font-size:var(--t-b);font-weight:600;color:var(--mut);line-height:1.4} .fisarmonica .inc.fis h2 .incapri::after{content:'\25BE';position:absolute;right:2px;top:2px;font-size:var(--t-m);color:var(--navy)} .fisarmonica .inc.fis.aperta h2 .incapri::after{content:'\25B4'} .fisarmonica .inc.fis:not(.aperta){padding-bottom:12px} .fisarmonica .inc.fis:not(.aperta) h2{margin-bottom:0} .fisarmonica .inc.fis:not(.aperta) .incriga{display:block} .fisarmonica .inc.fis:not(.aperta) .incc{display:none} .inc.fis{scroll-margin-top:0} /* EA-1: era 10px, sotto la testata; ora vale scroll-padding-top */ /* BU-2 (P6): la scheda aperta di Incentivi più corta: definizioni più fitte, fonti in una riga piccola, link secondari su una riga */ .inc dl{gap:4px 10px} .inc .incpt{margin:10px 0 4px} .inc .incpassi{gap:4px} .inc .src{font-size:var(--t-xs);margin-top:8px;line-height:1.4} .inc .incctt{margin-top:8px} /* BP-2 (check-up gratuito): il contatto in primo piano già nell'intestazione, stessa forma delle schede */ .intro .incvai{margin:14px 0 0}.intro .incvai .btn{display:block;text-align:center;text-decoration:none;color:#fff;white-space:nowrap;font-size:var(--t-l)} @media(min-width:600px){.intro .incvai .btn{display:inline-block}} .intro .incctt{margin:10px 0 0;font-size:var(--t-b);line-height:1.45}.intro .incctt a{color:var(--navy);font-weight:700} .inc.ck .incpassi{list-style:none;padding-left:0}.inc.ck ol.incpassi{list-style:decimal;padding-left:22px} .inc.ck ul.incpassi li{padding-left:22px;position:relative}.inc.ck ul.incpassi li::before{content:'\2713';position:absolute;left:0;color:var(--green);font-weight:800} /* BP-3 · in home la card del check-up, sotto quella della colonnina */ .inc.ck dd a{color:var(--navy);font-weight:700} .hero .promo.ck{border-color:var(--green)} .fx .upk{flex-basis:100%;font-size:var(--t-b);color:var(--navy);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px;padding:2px 0} @media(max-width:460px){.inc dl{grid-template-columns:1fr;gap:0}} @media(max-width:460px){.inc dt{margin-top:8px}} .biz .cfg{font-size:var(--t-m);font-weight:700;color:var(--navy);margin:2px 0 10px} .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px} .kpi{background:var(--blu-50-e);border:1px solid var(--line);border-radius:12px;padding:12px 14px} .kpi b{display:block;font-size:var(--t-xl);color:var(--navy);line-height:1.15;font-variant-numeric:tabular-nums} .kpi span{display:block;font-size:var(--t-b);font-weight:700;color:var(--blu-700-b);margin-top:2px} .kpi small{display:block;font-size:var(--t-s);color:var(--mut)} .cop{margin:10px 0 0;font-size:var(--t-m)} .modi{display:grid;gap:10px} .modo{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--carta)} .modo.on{border-color:var(--navy);box-shadow:0 0 0 3px var(--blu-100-e)} .modo h4{font-size:var(--t-m);color:var(--navy);margin-bottom:6px} .modo h4 em{font-style:normal;font-size:var(--t-s);background:var(--navy);color:var(--carta);border-radius:10px;padding:2px 8px;vertical-align:middle;margin-left:4px} .modo dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:var(--t-b)} .modo dt{color:var(--mut)} .modo dd{margin:0;text-align:right;font-variant-numeric:tabular-nums} .modo .pos{color:var(--acqua-800-c)} .modo .neg{color:var(--rosso-600-b)} .msg{margin:12px 0 0;padding:12px 14px;background:var(--verde-50);border-left:5px solid var(--green);border-radius:0 10px 10px 0;font-size:var(--t-m)} .sl{margin:18px 0 4px;padding:14px;background:var(--blu-50-e);border:1px solid var(--line);border-radius:12px} .sl h3{margin-top:0} .sl label{display:block;font-size:var(--t-b);font-weight:700;color:var(--blu-700-b);margin-top:10px} .sl output{float:right;color:var(--navy);font-variant-numeric:tabular-nums} .sl input[type=range]{display:block;width:100%;margin-top:6px;accent-color:var(--navy);height:28px} .lg{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--t-b);color:var(--blu-700-b);margin:4px 0 6px} .lg span{display:inline-flex;align-items:center;gap:6px} .sw{display:inline-block;width:18px;height:0;border-top:3px solid} .sw.s1{border-color:var(--s1)} .sw.s2{border-color:var(--s2)} .sw.s3{border-color:var(--s3)} .sw.d{border-top-style:dashed} .cfw{position:relative} svg.cf{display:block;width:100%;height:auto;touch-action:pan-y} svg.cf .gl{stroke:var(--blu-100-f);stroke-width:1} svg.cf .z{stroke:var(--blu-300);stroke-width:1.2} svg.cf .ax{font-size:var(--t-s);fill:var(--blu-500)} svg.cf .dl{font-size:var(--t-s);font-weight:700;fill:var(--dark)} svg.cf .ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round} svg.cf .s1{stroke:var(--s1)} svg.cf .s2{stroke:var(--s2)} svg.cf .s3{stroke:var(--s3)} svg.cf .hx{stroke:var(--blu-500);stroke-width:1;stroke-dasharray:3 3} svg.cf .hit{fill:transparent;cursor:crosshair} .tip{position:absolute;top:4px;background:var(--carta);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 14px rgba(15,23,42,.14);padding:8px 10px;font-size:var(--t-s);pointer-events:none;white-space:nowrap} .tip b{display:block;color:var(--navy)} .tip span{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums} .tab table.lst{font-size:var(--t-s)} .tab table.lst td{font-variant-numeric:tabular-nums} #wzcards .svcs{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important} .biz .tec{font-size:var(--t-b);color:var(--blu-700-b);margin:-4px 0 10px} .iper{margin:18px 0 0;padding:14px 16px;background:var(--blu-50-c);border:1px solid var(--blu-100);border-radius:12px} .iper h3{margin-top:0} .iper p{font-size:var(--t-m)} .tmap .tmsg{padding:20px;color:var(--navy);font-weight:700} .leaflet-container{font:inherit;font-size:var(--t-s)} .tmap.tdraw,.tmap.tdraw *{touch-action:none!important} .tsrch{position:relative;margin-top:10px} #tsugg{list-style:none;position:absolute;left:0;right:0;top:100%;z-index:1000;background:var(--carta);border:1.5px solid var(--blu-200-f);border-top:none;border-radius:0 0 9px 9px;max-height:240px;overflow:auto;display:none;box-shadow:0 8px 18px rgba(0,0,0,.12)} #tsugg li{padding:12px 14px;font-size:var(--t-m);border-top:1px solid var(--line);cursor:pointer} #tsugg li:hover{background:var(--blu-50-c)} .tbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .tb{background:var(--blu-50-c);color:var(--navy);border:1.5px solid var(--blu-200);border-radius:24px;padding:10px 14px;font-size:var(--t-b);font-weight:700;cursor:pointer;font-family:inherit} .tb[aria-pressed=true]{background:var(--navy);color:var(--carta);border-color:var(--navy)} .tb.lt{background:var(--carta);border-color:var(--blu-200-f);color:var(--blu-700-c)} .tinfo{background:var(--ambra-50);border:1px solid var(--ambra-200-b);border-radius:10px;padding:10px 12px;font-size:var(--t-b);min-height:44px} .tgo{display:block;width:100%;margin-top:16px} .tgo:disabled{opacity:.45;cursor:not-allowed} .tnote{margin:10px 0 0 20px;font-size:var(--t-b)} .tnote li{margin:3px 0} .tsch{display:block;width:100%;height:auto;max-height:70vh;margin-top:12px;background:var(--blu-50-e);border-radius:10px} .tsch .ax{font-size:var(--t-b);fill:var(--blu-500)} .gauge{margin:14px auto 0;max-width:360px;text-align:center} .gauge svg{display:block;width:100%;height:auto} .gauge path{fill:none;stroke-width:26} .gauge .gt{stroke:var(--blu-100-f)} .gauge .gv{stroke:var(--acqua-600-b)} .gauge .gg{stroke:var(--amber)} .gauge .gr{stroke:var(--rosso-500)} .gauge .glim{stroke:var(--dark);stroke-width:3} .gauge .glt{font-size:var(--t-xs);font-weight:700;fill:var(--rosso-600-b)} .gauge .gn{transform-origin:150px 150px;transition:transform .45s cubic-bezier(.3,1.4,.5,1)} .gauge .gn line{stroke:var(--dark);stroke-width:5;stroke-linecap:round} .gauge .gh{fill:var(--dark)} .gauge .gq{font-size:var(--t-2x);font-weight:800;fill:var(--blu-800-b)} .gauge .gs{font-size:var(--t-s);fill:var(--blu-700-c);font-weight:600} .gauge .ge{font-size:var(--t-xs);fill:var(--blu-500)} .gz{margin:4px 0 0;font-size:var(--t-b);font-weight:700;border-radius:10px;padding:8px 10px} .gz.z-verde{background:var(--verde-50);color:var(--acqua-800-c)} .gz.z-gialla{background:var(--ambra-50-b);color:var(--arancio-700-c)} .gz.z-rossa{background:var(--rosso-50);color:var(--rosso-600-b)} @media(prefers-reduced-motion:reduce){.gauge .gn{transition:none}} .rata2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .rata2 .rata{margin:0} .resta{background:var(--acqua-800-c);color:var(--carta);border-radius:12px;padding:14px 16px;border-bottom:5px solid var(--amber)} .resta.neg,.resta.rossa{background:var(--rosso-600-b)} .resta.gialla{background:var(--arancio-600)} .resta span{display:block;font-size:var(--t-b);color:var(--verde-200);font-weight:700} .resta b{display:block;font-size:var(--t-2x);line-height:1.15} .resta small{display:block;font-size:var(--t-b);color:var(--verde-100-b)} @media(max-width:420px){.rata2{grid-template-columns:1fr}} .rata{margin:12px 0 0;background:var(--navy);color:var(--carta);border-radius:12px;padding:14px 16px;border-bottom:5px solid var(--amber)} .rata span{display:block;font-size:var(--t-b);color:var(--blu-200-f);font-weight:700} .rata b{display:block;font-size:var(--t-2x);line-height:1.15} .rata small{display:block;font-size:var(--t-b);color:var(--blu-100-f)} .sq{display:inline-block;width:12px;height:12px;border-radius:2px} .sq.b1{background:var(--blu-200)} .sq.b2{background:var(--acqua-700)} svg.cf rect.b1{fill:var(--blu-200)} svg.cf rect.b2{fill:var(--acqua-700)} .gd{list-style:none;counter-reset:g;margin:10px 0} .gd li{counter-increment:g;background:var(--carta);border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 52px;position:relative;margin-bottom:8px;font-size:var(--t-b);color:var(--blu-700-b)} .gd li:before{content:counter(g);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--amber);color:var(--carta);font-weight:800;text-align:center;line-height:28px} .gd b{display:block;color:var(--navy);font-size:var(--t-m)} .gd li.warn{border-color:var(--rosso-200);background:var(--rosso-50-b)} .gd li.warn:before{background:var(--rosso-600-b)} #tgn{background:var(--ambra-50);border:1px solid var(--ambra-200-b);border-radius:12px;padding:10px 14px;margin:10px 0} #tgn ul{margin:0 0 0 18px;font-size:var(--t-b)} .sl label.tiva{display:flex;gap:10px;align-items:flex-start;font-weight:600} .prz{margin:10px 0 12px;background:var(--navy);color:var(--carta);border-radius:12px;padding:14px 16px;border-bottom:5px solid var(--amber)} .prz>span{display:block;font-size:var(--t-b);color:var(--blu-200-f);font-weight:700} .prz b{display:block;font-size:var(--t-2x);line-height:1.15} .prz small{display:block;font-size:var(--t-b);color:var(--blu-100-f)} .prz small .tbc{font-size:var(--t-s)} .prz em{display:block;font-style:normal;font-size:var(--t-b);color:var(--ambra-200-b);margin-top:6px} /* CE-9 (LP-22 #9 «un elemento grafico intuitivo e chiaro come pulsante per inviare la richiesta tramite whatsapp e mail»): i due pulsanti dell'offerta */ .offb{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0} .offb a{flex:1 1 150px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 14px;border-radius:999px;font-size:var(--t-b);font-weight:800;text-decoration:none;border-bottom:4px solid rgba(0,0,0,.2)} .offb a svg{flex:none} #bwa svg,#bem svg{vertical-align:-5px;margin-right:8px} /* CE-9: le stesse icone sui pulsanti di invio dei simulatori */ .offb .wa{background:var(--green);color:#fff} .offb .ml{background:var(--carta);color:var(--navy);border:2px solid var(--navy);border-bottom-width:4px} .luxr{margin:0 0 12px;padding:12px 14px;background:var(--verde-50);border:1px solid var(--verde-200);border-left:6px solid var(--acqua-700);border-radius:12px} .luxr b{display:block;color:var(--acqua-800-c);font-size:var(--t-m)} .luxr>span{display:block;font-size:var(--t-b);color:var(--blu-700-b);margin-top:4px} .luxinv{margin:14px 0 4px;padding:14px 16px;background:linear-gradient(180deg,var(--verde-50),var(--carta));border:1px solid var(--verde-200);border-left:6px solid var(--acqua-700);border-radius:12px} .luxinv h3{margin:0 0 6px;color:var(--acqua-800-c);font-size:var(--t-l);line-height:1.25} .luxinv p{font-size:var(--t-b);color:var(--blu-700-b);margin:0 0 6px} .luxinv .cons{margin-top:6px} .cat3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .catmsg{display:block;font-size:var(--t-b);color:var(--mut);margin-top:6px} .go a.te{background:var(--arancio-700-b)} @media(min-width:600px){.go a.te{grid-column:1/-1}} @media(min-width:900px){.tmap{height:520px}} .lux{margin:14px 0 4px;padding:14px;background:linear-gradient(180deg,var(--verde-50),var(--carta) 70%);border:1px solid var(--verde-200);border-radius:14px} .lux h3{margin:0 0 2px;color:var(--acqua-800-c);font-size:var(--t-l)} .lux svg{display:block;width:100%;max-width:440px;margin:6px auto;height:auto} .lux .lxc{fill:var(--verde-50-b);stroke:var(--verde-300-b);stroke-width:2;stroke-dasharray:6 6} .lux .lxt{font-size:var(--t-s);fill:var(--acqua-800);font-weight:700;letter-spacing:.5px} .lux .lxm{fill:var(--acqua-700)} .lux .lxh{fill:var(--verde-300);opacity:.35;transform-origin:180px 140px;animation:lxh 2.4s ease-in-out infinite} .lux .lxb{font-size:var(--t-m);font-weight:800;fill:var(--carta)} .lux .lxs{font-size:var(--t-xs);fill:var(--verde-100-b)} .lux .lxp{fill:var(--ambra-50);stroke:var(--amber);stroke-width:3} .lux .lxn{fill:var(--carta);stroke:var(--acqua-600-b);stroke-width:2} .lux .lxe{font-size:var(--t-l)} .lux .lxl{font-size:var(--t-b);font-weight:800;fill:var(--blu-800-b)} .lux .lxs2{font-size:var(--t-s);fill:var(--blu-700-c);font-weight:600} .lux .fl{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 9;animation:lxf 1s linear infinite} .lux .fl.a{stroke:var(--amber)} .lux .fl.v{stroke:var(--acqua-600-b)} @keyframes lxf{to{stroke-dashoffset:-22}} @keyframes lxh{50%{transform:scale(1.12);opacity:.15}} @media(prefers-reduced-motion:reduce){.lux .fl,.lux .lxh{animation:none}} .tcap{margin:12px 0;padding:14px;background:var(--blu-50-e);border:1px solid var(--line);border-radius:12px} .tcap .opts{margin-top:8px} .tcap .opt b{display:block;font-size:var(--t-l)} .tcap .opt small{display:block;font-size:var(--t-b);color:var(--blu-700-c);font-weight:600} .tcap label{display:block;font-size:var(--t-b);font-weight:700;color:var(--blu-700-b);margin-top:12px} .tcap output{float:right;color:var(--navy)} .tcap input[type=range]{display:block;width:100%;margin-top:6px;accent-color:var(--navy);height:28px} .tchk{margin:6px 0 4px} .tchk h3{margin:0 0 4px;color:var(--navy);font-size:var(--t-l)} .tchk ul{list-style:none;margin:10px 0 0} .tchk li{position:relative;padding:10px 12px 10px 46px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:var(--carta);color:var(--blu-700-b)} .tchk li i{position:absolute;left:12px;top:11px;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:800;font-size:var(--t-b);line-height:24px;text-align:center;color:var(--carta);background:var(--blu-300)} .tchk li b{display:block;color:var(--navy);font-size:var(--t-b)} .tchk li span{display:block;font-size:var(--t-b)} .tchk li small{display:block;font-size:var(--t-s);color:var(--mut);margin-top:2px} .tchk li small a{color:var(--navy)} .tchk li.c-ok i{background:var(--acqua-700)} .tchk li.c-ok i:before{content:"✓"} .tchk li.c-warn{border-color:var(--ambra-400);background:var(--ambra-50-b)} .tchk li.c-warn i{background:var(--arancio-600-b)} .tchk li.c-warn i:before{content:"!"} .tchk li.c-info i{background:var(--blue)} .tchk li.c-info i:before{content:"i"} .tchk li.c-no i:before{content:"–"} .tchk li.c-lk i{background:var(--blu-800-b)} .tchk li.c-lk i:before{content:"🔒";font-size:var(--t-s)} .tchk li.c-lk span{color:var(--acqua-700);font-weight:700;font-size:var(--t-b)} .tchk li.c-run i{background:none;border:3px solid var(--blu-200-f);border-top-color:var(--navy);width:18px;height:18px;left:15px;top:14px;animation:ckr .8s linear infinite} .tchk li.c-run span{color:var(--mut);font-size:var(--t-b)} @keyframes ckr{to{transform:rotate(360deg)}} .tchk.lock{background:var(--blu-50-e);border:1px solid var(--line);border-radius:12px;padding:12px} .ok .tchk{margin-top:12px;color:var(--ink)} .lxq{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px} .lxq div{background:var(--carta);border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center;font-size:var(--t-s);color:var(--blu-700-b);line-height:1.3} .lxq b{display:block;font-size:var(--t-l);color:var(--acqua-800-c)} .lxq small{display:block;font-size:var(--t-s);font-weight:700;color:var(--navy);margin-top:2px} .bol{margin:16px 0 6px;padding:14px 16px;background:var(--ambra-50);border:1px solid var(--ambra-200-b);border-radius:12px;font-size:var(--t-m)} @media(min-width:600px){.go{grid-template-columns:1fr 1fr}} @media(min-width:600px){.cbtns{grid-template-columns:repeat(3,1fr)}} @media(min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}} @media(min-width:900px){.form.wide{max-width:1000px}} @media(min-width:900px){.modi{grid-template-columns:repeat(3,1fr)}} @media(min-width:900px){.how{grid-template-columns:repeat(4,1fr)}} @media(min-width:900px){.how li{padding:52px 16px 16px}} @media(min-width:900px){.how li:before{top:12px;left:16px}} @media(max-width:380px){body{font-size:var(--t-m)}} @media(max-width:380px){.tile b{font-size:var(--t-l)}} @media(max-width:380px){.btn{font-size:var(--t-m)}} @media(max-width:380px){table.lst{font-size:var(--t-s)}} @media(max-width:380px){table.lst th,table.lst td{padding:7px 5px}} @media(max-width:380px){.wab{padding:8px 11px;font-size:var(--t-b)}} @media(min-width:900px){.wrap{max-width:1040px}} @media(min-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}} @media(min-width:900px){.tile{padding:22px 18px;min-height:130px}} @media(min-width:900px){.svcs{grid-template-columns:repeat(3,1fr)}} @media(min-width:900px){.form,.box,.inc,.faq{max-width:780px;margin-left:auto;margin-right:auto}} @media(min-width:900px){.intro,.hero{padding:24px 30px}} @media(min-width:900px){.why{display:flex;gap:24px;justify-content:center}} @media(min-width:900px){.why li{flex:1}} @media(min-width:900px){.tabbar{display:none}} @media(min-width:900px){body{padding-bottom:0}} @media(min-width:900px){.menu{display:flex;gap:2px;margin-left:auto}} @media(min-width:900px){.menu a{color:var(--blu-100-f);text-decoration:none;font-weight:700;font-size:var(--t-b);padding:8px 12px;border-radius:8px}} @media(min-width:900px){.menu a.on,.menu a:hover{background:rgba(255,255,255,.14);color:var(--carta)}} @media(min-width:900px){.wab{margin-left:6px}} @media(min-width:1180px){.top .tag{display:block}} @media(min-width:1280px){body{font-size:var(--t-l)}} @media(min-width:1280px){.wrap{max-width:1160px}} @media(min-width:900px) and (orientation:landscape){.form .two{gap:16px}} @media print{.hprint{display:block}} @media print{.top,.tabbar,.contact,.wzback{display:none!important}} @media print{body{padding-bottom:0;background:var(--carta)}} @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('caratteri/inter.woff2?v=CW') format('woff2')} @font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url('caratteri/sora.woff2?v=CW') format('woff2')} body{font-family:'Inter','Segoe UI',Arial,sans-serif;background:var(--fondo);color:var(--ink);letter-spacing:.01em} h1,h2,h3,h4,.rk,.logo-t{font-family:'Sora','Segoe UI',Arial,sans-serif;letter-spacing:-.015em} /* ── intestazione: blu notte pieno, menu a pillole ── */ header{background:linear-gradient(135deg,var(--navy-2),var(--navy) 55%,var(--blu-800));border-bottom:0;position:relative} header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--amber-2) 45%,transparent 85%)} .logo{background:var(--carta);border-radius:12px;padding:6px 11px;box-shadow:0 2px 10px rgba(0,0,0,.25)} .menu a{color:var(--blu-200-e);font-weight:600;border-radius:999px;padding:8px 14px} .menu a:hover{background:rgba(255,255,255,.08);color:var(--carta)} .menu a.on{background:rgba(245,158,11,.16);color:var(--ambra-400)} .wab{background:linear-gradient(135deg,var(--acqua-600),var(--green));border-radius:999px;padding:9px 16px;box-shadow:0 4px 14px -4px rgba(10,146,105,.55)} .hinfo div{color:var(--blu-300-b)} .hinfo b{color:var(--amber-2)} /* ── eroe: pannello scuro con bagliori, non più celeste bordato ── */ .hero,.hero.solo{background:radial-gradient(900px 420px at 85% -20%,rgba(245,158,11,.18),transparent 60%),radial-gradient(700px 380px at -10% 110%,rgba(37,99,235,.22),transparent 55%),linear-gradient(140deg,var(--navy-2),var(--navy) 60%,var(--blu-700));border:0;border-radius:22px;margin-top:18px;padding:30px 28px 26px;box-shadow:0 18px 50px -18px rgba(10,33,64,.55);color:var(--blu-100-g)} .hero .k{color:var(--amber-2);letter-spacing:3px} .hero h1{color:var(--carta);font-weight:800;font-size:var(--t-3x)} .hero h1 span{color:var(--amber-2)} .hero p{color:var(--blu-200-d)} .hero p b{color:var(--carta)} .hero .n{color:var(--blu-400)} .hero .hsl{margin:18px 0 6px;font-size:var(--t-b);color:var(--blu-200-d)}.hero .hsl b{display:block;font-family:'Sora',sans-serif;font-size:var(--t-l);font-weight:800;color:var(--amber-2);margin-bottom:2px} /* CE-1: lo slogan sotto i simulatori */ @media(max-width:599px){.hero.solo h1{font-size:var(--t-2x)}.hero.solo .go{gap:10px;margin-top:12px}.hero.solo .go a{padding:12px 40px 12px 14px}.hero.solo .go a small{font-size:var(--t-b);/* DS-1 (REPO-CHAT-10 #11 «alza i sottotitoli delle card»): da 12,5 a 14 */line-height:1.35}} /* CE-1: sul telefono i tre simulatori stanno nella prima schermata, sopra la barra delle schede */ /* ── le tre porte: carte bianche con freccia, non blocchi blu ── */ .go{gap:12px;margin-top:16px} .go a{background:var(--carta);color:var(--ink);border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r);padding:16px 44px 16px 16px;box-shadow:var(--ombra);position:relative;transition:transform .18s,box-shadow .18s,border-color .18s} .go a:hover{transform:translateY(-3px);border-color:var(--amber);box-shadow:0 4px 8px rgba(13,43,78,.06),0 18px 38px -14px rgba(13,43,78,.22)} .go a::after{content:'›';position:absolute;right:16px;top:50%;transform:translateY(-50%);font:800 26px/1 'Sora';color:var(--amber)} .go i{font-style:normal;flex:none;width:52px;height:52px;display:grid;place-items:center;font-size:var(--t-2x);background:linear-gradient(145deg,var(--ambra-50),var(--ambra-100));border:1px solid var(--ambra-200);border-radius:14px} .go b{color:var(--navy);font-size:var(--t-l)} .go small{color:var(--mut)} /* ── titoli di sezione: riga-kicker ambra e più aria ── */ .sec{font-size:var(--t-xl);font-weight:800;color:var(--navy);margin:34px 0 14px;padding-top:14px;position:relative} .sec::before{content:'';position:absolute;top:0;left:0;width:44px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--amber),var(--amber-2))} /* ── carte: ombra morbida, niente bordo colorato in testa ── */ .svcs{gap:12px} .svc{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--ombra)} .svc b{color:var(--navy);font-size:var(--t-m);display:block;margin-bottom:4px} .svc span{color:var(--mut);font-size:var(--t-b);line-height:1.5} a.svc{transition:transform .18s,box-shadow .18s,border-color .18s} a.svc:hover{transform:translateY(-3px);border-color:var(--amber)} /* ── come lavoriamo: numeri collegati da un filo ── */ .how li{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--ombra);padding:56px 18px 18px} .how li:before{background:linear-gradient(145deg,var(--amber),var(--arancio-600-b));box-shadow:0 6px 14px -4px rgba(217,119,6,.5);left:18px;top:16px} .how b{font-size:var(--t-m)} /* ── FAQ, contatti, piede ── */ .faq details{border-radius:14px;box-shadow:var(--ombra);border:1px solid var(--line)} .faq summary{font-family:'Sora'} .alt a,.lnk{color:var(--navy)} .contact{background:linear-gradient(135deg,var(--navy-2),var(--navy));border-top:0;color:var(--blu-100-d)} .contact h2{color:var(--carta)} .contact p{color:var(--blu-200-b)} footer{background:var(--navy-2)} .tabbar{border-top:0;box-shadow:0 -6px 24px rgba(10,33,64,.16)} .tabbar a.on{color:var(--amber)} /* su schermi larghi le tre porte stanno in riga */ @media(min-width:900px){.go{grid-template-columns:1fr 1fr 1fr}} @media(min-width:900px){.go a.te{grid-column:auto}} /* le tre porte restano carte bianche anche per Azienda e Investimenti (il colore vive nell'icona, non nel blocco) */ .go a.az,.go a.te{background:var(--carta);color:var(--ink)} .go a small{color:var(--mut)} .go a.az i{background:linear-gradient(145deg,var(--verde-100-c),var(--verde-100));border-color:var(--verde-200-b)} .go a.te i{background:linear-gradient(145deg,var(--blu-50-b),var(--blu-100-c));border-color:var(--blu-200-c)} .go a b{color:var(--navy)} /* l'ingresso delle pagine interne: carta bianca con kicker, non più riquadro celeste bordato */ .intro{background:var(--carta);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r);box-shadow:var(--ombra);padding:22px 22px 18px;position:relative;overflow:hidden} .intro::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--amber),var(--amber-2))} .intro h1{color:var(--navy);font-weight:800} .form,.box{border-radius:var(--r);box-shadow:var(--ombra)} .btn{border-radius:999px} /* card v2 (committente, 03/10: «le card sono molto poco professionali... qualcosa di innovativo»): filo ambra in testa uguale per tutte, spunta dorata sulle card «Perché sceglierci», titoli più presenti, tutte si alzano al passaggio */ .svc{background:linear-gradient(90deg,var(--amber),var(--amber-2)) top/48px 3px no-repeat,linear-gradient(180deg,var(--carta),var(--blu-50-f));padding:20px 18px 18px} a.svc{transition:transform .18s,box-shadow .18s,border-color .18s} a.svc:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(13,43,78,.06),0 18px 38px -14px rgba(13,43,78,.2);border-color:var(--blu-100-b)} .svc b{font-size:var(--t-l);margin-bottom:6px} section.svcs:not([style]) .svc{padding-left:58px;position:relative} section.svcs:not([style]) .svc::before{content:'✓';position:absolute;left:16px;top:19px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font:800 16px/1 'Sora';color:var(--carta);background:linear-gradient(145deg,var(--amber-2),var(--arancio-600-b));box-shadow:0 5px 12px -4px rgba(217,119,6,.55)} section.svcs:not([style]) a.svc::before{content:'★'} .svc .lnk,.alt a{font-weight:700} @media(min-width:900px){.how{grid-template-columns:repeat(4,1fr)}} /* BA-2 · sul telefono i pulsanti dei passi (Avanti…) in proporzione: meno alti, carattere più piccolo, larghi quanto il testo (LP-11 #9) */ @media(max-width:599px){.fx .btn{flex:0 1 auto;font-size:var(--t-b);padding:10px 18px;border-bottom-width:3px;line-height:1.25}} /* BA-6 · «Parliamone» compatto (LP-11 #10): il modulo si apre dal pulsante «Scrivici un messaggio»; sul telefono i pulsanti in proporzione */ .cfdet{margin-top:14px}.cfdet>summary{list-style:none;display:inline-block;text-align:center;cursor:pointer}.cfdet>summary::-webkit-details-marker{display:none}.cfdet[open]>summary{margin-bottom:6px} @media(max-width:599px){.cbtns .btn,.cfdet>summary.btn{flex:0 1 auto;font-size:var(--t-b);padding:10px 18px;border-bottom-width:3px;line-height:1.25}} /* BB-1 (LP-12 #46) · «Parliamone» a tre tondi: WhatsApp · Chiama · Scrivici; i numeri restano nel piè di pagina */ .cbtns.icone{display:flex;justify-content:center;align-items:flex-start;gap:28px;flex-wrap:wrap;margin-top:14px} .cbtns.icone .cfdet{display:contents} .cbtns.icone .cform{flex:1 0 100%;margin-top:10px} .cbt{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;cursor:pointer} summary.cbt{list-style:none} summary.cbt::-webkit-details-marker{display:none} .cbt .tnd{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.25)} .cbt small{font-size:var(--t-xs);color:var(--mut,#64748b);letter-spacing:.02em} .cbt.wa2 .tnd{background:#25d366} .cbt.tel .tnd{background:var(--navy,#1e3a5f)} .cbt.po .tnd{background:var(--green,#059669)} .cfdet[open] summary.cbt .tnd{outline:2.5px solid #fbbf24;outline-offset:2px} @media(hover:hover) and (pointer:fine){.cbtns.icone .soltel{display:none}} /* BN-3 (LP-18 #13, committente: «l'area PARLIAMONE...sotto la pagina nn va bene il testo supera le icone mail e whatsapp, sistemalo»): titolo e frase centrati sopra i tondi (prima partivano dal bordo e correvano oltre le icone); scritte sotto i tondi chiare sul blu (prima grigie, --mut); il tondo «Chiama» blu su blu prende un bordo chiaro; il modulo «Scrivici» aperto resta allineato a sinistra. */ .contact h2,.contact .wrap>p{text-align:center} .contact .wrap>p{max-width:680px;margin-left:auto;margin-right:auto} .contact .cbt small{font-size:var(--t-s);color:var(--blu-100-d)} .contact .cbt.tel .tnd{box-shadow:0 0 0 2px var(--blu-200-b),0 3px 10px rgba(0,0,0,.25)} .contact .cform{text-align:left} /* BN-3, rassegna (misurata col modulo «Scrivici» aperto): il modulo vive dentro .cbtns (i tondi) e ne prendeva le regole — il link dell'informativa diventava un blocco (riga del consenso spezzata in tre), etichette blu scuro su blu, «Invia la richiesta» blu su blu, e su PC il modulo stava accanto ai tondi. Ora: sotto i tondi, largo come la frase, etichette chiare, link ambra, pulsante verde. */ .contact .cbtns.icone .cform{flex:0 0 100%;max-width:680px;margin:12px auto 0} .contact .cbtns.icone .cfdet[open]::details-content{flex:0 0 100%} /* Chromium recente: il contenuto di
è una scatola sua, è lei la voce della riga dei tondi */ .contact .cform label{color:var(--blu-100-d)} .contact .cform a{display:inline;font-size:inherit;text-align:left;color:var(--amber-2);text-decoration:underline} .contact .cform .btn.em{background:var(--green)} /* ===== BC · l'analisi «Il tuo tetto contro la tua bolletta» (slide doors) ===== Dal mockup approvato in LP-12 (v5h + #1-#43), scopato sotto #gsconf per non toccare il resto del tema (.top e .bol esistono già nel tema: qui diventano .sdtop e .sdbol). */ #gsconf{max-width:520px;margin:0 auto;padding:4px 2px 10px} #gsconf .sdtorna{display:inline-block;font-size:var(--t-s);font-weight:700;color:var(--navy,#1e3a5f);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-bottom:4px} #gsconf .sdtop{display:flex;align-items:center;justify-content:space-between;gap:10px} #gsconf .sdtop h2{margin:0;font-size:var(--t-l);color:var(--navy,#1e3a5f)} #gsconf .sdbol{position:relative;width:54px;height:54px;border-radius:50%;border:2.5px solid var(--navy,#1e3a5f);overflow:hidden;cursor:pointer;flex:0 0 auto;background:#fff;padding:0} #gsconf .sdbol .acq{position:absolute;left:-25%;width:150%;height:150%;top:100%;background:#3b82f6;border-radius:42%;transition:top 1.2s ease;animation:gsonda 3s linear infinite} @keyframes gsonda{to{transform:rotate(360deg)}} #gsconf .sdbol b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--t-l);z-index:2;color:var(--navy,#1e3a5f)} #gsconf .sdst{font-size:var(--t-s);color:var(--mut,#64748b);margin:4px 0 12px} #gsconf .sdst u{cursor:pointer} #gsconf .sdst b{color:var(--navy,#1e3a5f)} /* BC-10 (LP-14 #13): il numero in evidenza */ #gsconf .sdst .sdsta{display:block;margin-top:3px} /* l'azione su una riga sua */ #gsconf .sugt.ambra{background:#fff7ed;color:#7c2d12} /* BC-13 (LP-14 #17): la riga che anticipa l'obiezione */ #gsconf #gcsovra .sr span{font-weight:500;line-height:1.45}#gsconf #gcsovra .sr b{font-weight:800} /* BC-17 (LP-15 #2): il premio si legge leggero, in evidenza solo l'attacco */ /* BC-18 (LP-15 #5): il premio si festeggia una volta — riflesso che attraversa il banner (Bella scelta e Ottima mossa), stelline e ✨ che pulsa (solo Ottima mossa) */ #gsconf #gcsovra{position:relative;overflow:hidden} #gsconf #gcsovra.luce::after{content:'';position:absolute;top:0;bottom:0;left:-45%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);animation:gcluce 1.1s ease-out 1 forwards;pointer-events:none} #gsconf #gcsovra .gcst{position:absolute;font-style:normal;font-size:var(--t-b);line-height:1;color:#f59e0b;opacity:0;pointer-events:none} #gsconf #gcsovra .gcst:nth-of-type(1){left:14%;top:12%}#gsconf #gcsovra .gcst:nth-of-type(2){left:40%;top:62%}#gsconf #gcsovra .gcst:nth-of-type(3){left:66%;top:14%}#gsconf #gcsovra .gcst:nth-of-type(4){left:90%;top:58%} #gsconf #gcsovra.festa .gcst{animation:gcstella .9s ease-out 1 forwards} #gsconf #gcsovra.festa .gcst:nth-of-type(2){animation-delay:.18s}#gsconf #gcsovra.festa .gcst:nth-of-type(3){animation-delay:.36s}#gsconf #gcsovra.festa .gcst:nth-of-type(4){animation-delay:.54s} #gsconf #gcsovra.festa .sr em{display:inline-block;animation:gcpulsa .6s ease-in-out 2} @keyframes gcluce{to{left:110%}} @keyframes gcstella{0%{opacity:0;transform:scale(.3) rotate(0)}40%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.6) rotate(90deg) translateY(-6px)}} @keyframes gcpulsa{50%{transform:scale(1.35)}} @media (prefers-reduced-motion:reduce){#gsconf #gcsovra.luce::after,#gsconf #gcsovra .gcst{display:none}#gsconf #gcsovra.festa .sr em{animation:none}} #gsconf .eunota{font-size:var(--t-xs);color:var(--mut,#64748b);margin:4px 0 0} /* BC-13 (LP-14 #18): il prelievo residuo dichiarato */ #gsconf .eunota.domani{font-size:var(--t-s);color:#334155;margin:6px 0 10px} /* BC-15 (LP-14 #22): il punto d'arrivo delle previsioni si legge */ #gsconf .eunota.domani b{color:var(--navy,#1e3a5f)} #gsconf .eunota.domani span{white-space:normal} /* CU-1: a 375 non deve sporgere */ /* BC-15-bis: oggi e domani non si spezzano */ #gsconf .tet{background:#eef6f1;border:1.5px solid #bbe3cd;border-radius:14px;padding:9px 11px;margin-bottom:10px} #gsconf .tet .da{display:block;font-size:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;color:#065f46;font-weight:800;margin-bottom:2px;white-space:normal;line-height:1.25;min-width:0} /* CU-1 (LP-26 #20, «il testo esce fuori»): prima nowrap, «L'accumulo · si ricarica col sole del tuo tetto» usciva di 60 px dalla card a 375 */ #gsconf .teth{display:flex;align-items:center;gap:8px} #gsconf .teth svg{flex:0 0 auto} #gsconf .tetr{display:flex;align-items:baseline;gap:8px;margin-top:5px;font-size:var(--t-s);flex-wrap:wrap} #gsconf .tetr em{font-style:normal;flex:0 0 auto} #gsconf .tetr u{white-space:nowrap;cursor:pointer} #gsconf .tetr.pot2>b{font-size:var(--t-xl);color:#065f46;white-space:nowrap;line-height:1.1} #gsconf .tetr.pot2 .kwd{color:var(--mut,#64748b);font-size:var(--t-s)} #gsconf .slw{position:relative;margin:10px 0 0} #gsconf input[type=range]{width:100%;accent-color:#059669;margin:0;position:relative;z-index:2} /* BC-12 (LP-14 #16) · pallino e corsia NOSTRI: misure dichiarate (pallino 18px), così il ▼ del consiglio si centra al pixel */ #gsconf .slw input[type=range]{-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer} #gsconf .slw input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,#059669 var(--gcf,0%),#e2e8f0 var(--gcf,0%))} #gsconf .slw input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#059669;border:2.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);margin-top:-5px} #gsconf .slw input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:#e2e8f0} #gsconf .slw input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:#059669} #gsconf .slw input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#059669;border:2.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35)} #gsconf .sugm{position:absolute;top:-7px;transform:translateX(-50%);z-index:1;color:#4ade80;font-size:var(--t-s);line-height:1;transition:left .5s ease} #gsconf .tet .r2{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--mut,#64748b);margin-top:2px} #gsconf .sugt{font-size:var(--t-s);font-weight:700;color:#15803d;background:#dcfce7;border-radius:8px;padding:5px 8px;margin-top:7px} #gsconf .sugt .sr{display:flex;align-items:flex-start;gap:8px;margin-top:6px} #gsconf .sugt .sr:first-child{margin-top:0} #gsconf .sugt .sr em{font-style:normal;font-size:var(--t-m);line-height:1.3;flex:0 0 auto} #gsconf .azioni{display:flex;align-items:center;gap:10px;margin-top:8px} #gsconf .azioni .azi{width:42px;height:42px;border-radius:50%;border:1.5px solid #059669;background:#fff;color:#065f46;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0} #gsconf .azioni .azi:active{background:#ecfdf5} #gsconf .azioni .pm{width:30px;height:30px;border-radius:50%;border:1.5px solid #059669;background:#fff;color:#065f46;font:700 17px/1 Inter,system-ui,sans-serif;cursor:pointer;flex:0 0 auto;padding:0} #gsconf .azioni .pm:disabled{opacity:.35;cursor:default} #gsconf .azioni .gs-i2,#gsconf .sugt .gs-i2{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #15803d;background:#fff;color:#15803d;font:italic 700 12px/1 Georgia,serif;cursor:pointer;flex:0 0 auto} #gsconf .azn{font-size:var(--t-s);font-weight:700;color:#065f46;flex:1;min-width:0} #gsconf .spiega{font-size:var(--t-s);color:#065f46;background:#dcfce7;border-radius:8px;padding:6px 8px;margin-top:6px;line-height:1.45} #gsconf .spiega[hidden]{display:none} #gsconf #gcmax{position:relative;overflow:hidden;border-color:#dc2626} #gsconf #gcmax .acq2{position:absolute;left:-25%;width:150%;height:150%;top:100%;background:#dc2626;border-radius:42%;transition:top .5s ease,background .4s ease;animation:gsonda 3s linear infinite;z-index:0} #gsconf #gcmax b{position:relative;z-index:2;font-size:var(--t-s);font-weight:800;color:#b45309;transition:color .3s;font-variant-numeric:tabular-nums} #gsconf #gcmax b.chiaro{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)} #gsconf #gcmax.rosso b{font-size:var(--t-m)} #gsconf .eu h3{margin:0 0 7px;font-size:var(--t-m);color:#14293f;font-weight:800} #gsconf .voce{margin:0 0 9px} #gsconf .voce .vl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-s);margin-bottom:3px} #gsconf .voce .vl b{font-size:var(--t-m);color:var(--navy,#1e3a5f)} #gsconf .voce .vl small{color:var(--mut,#64748b);font-weight:400} #gsconf .barra{display:flex;height:30px;border-radius:9px;overflow:hidden;background:#fff;border:1.5px solid var(--line,#e2e8f0)} #gsconf .barra i{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;white-space:nowrap;font-size:var(--t-s);font-weight:700;color:#fff;transition:flex-grow .6s ease;font-style:normal} #gsconf .barra .g{background:#f97316} #gsconf .barra .r{background:#475569} #gsconf .barra .s{background:repeating-linear-gradient(135deg,#16a34a 0 8px,#15803d 8px 16px)} #gsconf .pot{background:linear-gradient(150deg,#1e3a5f,#16304e);color:#fff;border-radius:14px;padding:11px 14px 12px;text-align:center;margin:14px 0 12px;box-shadow:0 5px 14px rgba(15,34,56,.28)} #gsconf .pot small{display:block;font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;opacity:.92} #gsconf .pot>b{display:block;font-size:var(--t-2x);line-height:1.15;margin:2px 0 8px;color:#fde68a;text-shadow:0 1px 2px rgba(0,0,0,.18)} #gsconf .pot .vr{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border-radius:10px;padding:6px 10px;margin-top:6px;font-size:var(--t-s);text-align:left} #gsconf .pot .vr em{font-style:normal;font-size:var(--t-l);flex:0 0 auto} #gsconf .pot i{font-style:normal;font-weight:800;color:#fde68a} #gsconf .pot .dieci{display:flex;gap:9px;align-items:flex-start;text-align:left;font-size:var(--t-s);margin-top:9px;border-top:1px solid rgba(255,255,255,.28);padding-top:8px;line-height:1.4} #gsconf .pot .dieci em{font-style:normal;font-size:var(--t-b);flex:0 0 auto} #gsconf .pot .dieci b{color:#fde68a} #gsconf .pot .dieci small{display:block;font-size:var(--t-xs);opacity:.8;text-transform:none;letter-spacing:0} #gsconf .pot .srid{display:block;font-size:var(--t-xs);opacity:.85;margin-top:2px;text-align:right;text-transform:none;letter-spacing:0} #gsconf .cart{font-size:var(--t-s);font-weight:800;color:#14293f} #gsconf .car{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 10px} #gsconf .car button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;border:1.5px solid var(--line,#e2e8f0);background:#fff;font:inherit;font-size:var(--t-xs);color:var(--navy,#1e3a5f);cursor:pointer} #gsconf .car button span{font-size:var(--t-l)} #gsconf .car button[aria-pressed=true]{border-color:#059669;background:#ecfdf5} #gsconf .abit{position:relative;background:#fff7ed;border-left:4px solid #f59e0b;border-radius:8px;padding:8px 10px 9px;font-size:var(--t-s);margin:8px 0} #gsconf .abit .abt{margin-bottom:2px;line-height:1.4} #gsconf .abit .abt em{font-style:normal;margin-right:5px} #gsconf .abit .abt b{white-space:normal;color:#7c2d12} /* CW-2 (LP-27 #7): il titolo va a capo dove serve; il numero resta unito (gs-sim.js) */ #gsconf .abit .abt small{display:block;color:#92400e;font-weight:400;font-size:var(--t-xs);margin-left:23px} #gsconf .abt small{padding-right:40px} /* BC-19 (LP-15 #7, visto nella prova vera a 375): il sottotitolo lascia posto al ↺ (34 px col tocco minimo), non ci passa sotto */ #gsconf .abit .abr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:7px} #gsconf .abit .abg2{display:inline-flex;align-items:center;gap:7px} #gsconf .abit .abg2>em{font-style:normal;font-size:var(--t-m)} #gsconf .abit button{width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid var(--navy,#1e3a5f);background:#fff;font-size:var(--t-b);line-height:1;cursor:pointer} #gsconf .abit button[aria-pressed=true]{background:var(--navy,#1e3a5f);box-shadow:0 0 0 2px #fde68a inset} #gsconf .abn{font-size:var(--t-xs);color:#92400e;margin-top:6px;min-height:15px} #gsconf .abn .abnr{margin-top:3px;line-height:1.45} /* BO-2 (LP-18 #20): la riga del bonus colonnine sotto i carichi, quando l'auto è accesa */ #gsconf .gcbonus{margin:-2px 0 10px;padding:8px 10px;border-radius:10px;background:var(--ambra-100-b);border:1px solid var(--ambra-200);color:var(--navy);font-size:var(--t-b);line-height:1.4} #gsconf .gcbonus a{color:var(--navy);font-weight:700} #gsconf .abreset{position:absolute;top:8px;right:9px;width:24px;height:24px;padding:0;border-radius:50%;border:1.5px solid #b45309;background:#fff;color:#b45309;font-size:var(--t-s);line-height:1;cursor:pointer} #gsconf .batr{align-items:center;flex-wrap:nowrap} #gsconf .batt{display:flex;flex-direction:column;min-width:0;flex:1} #gsconf .batt b{font-size:var(--t-b);color:#065f46} #gsconf .notte{display:flex;align-items:center;gap:6px;margin-top:8px} #gsconf .notte>em{font-style:normal;font-size:var(--t-b);flex:0 0 auto} #gsconf .nbar{position:relative;flex:1;height:17px;border-radius:9px;background:linear-gradient(90deg,rgba(245,158,11,.18),rgba(30,58,95,.22) 35%,rgba(30,58,95,.22) 65%,rgba(245,158,11,.18));border:1px solid var(--line,#e2e8f0);overflow:hidden} #gsconf .nfill{height:100%;width:0;background:linear-gradient(90deg,rgba(5,150,105,.85),rgba(5,150,105,.45));transition:width .5s ease} #gsconf .nore{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--t-xs);color:#14293f;font-variant-numeric:tabular-nums} #gsconf .batlv{position:relative;margin:12px 4px 2px;padding-top:11px} #gsconf .blvm{position:absolute;top:-3px;color:#4ade80;font-size:var(--t-s);line-height:1;transform:translateX(-50%);transition:left .5s ease} #gsconf .blvt{display:flex;justify-content:space-between} #gsconf .blvd{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:var(--t-xs);color:var(--mut,#64748b);cursor:pointer;min-width:18px} #gsconf .blvd i{width:13px;height:13px;border-radius:50%;border:1.5px solid #059669;background:#fff;font-style:normal;transition:background .3s} #gsconf .blvd.on i{background:#059669} #gsconf .blvd.on{color:#065f46;font-weight:700} #gsconf .blvd.off{opacity:.35;cursor:default} /* BC-8 (LP-14 #8): taglia oltre il limite del tetto, a vista ma non scegibile */ #gsconf .blvd.off i{border-color:#94a3b8;background:#f1f5f9} #gsconf #bolletta{margin-top:10px} #gsconf .fx{margin-top:14px} /* BC-3/BC-4 (LP-13 #12 + LP-14 #2) · i tuoi consumi: le domande una alla volta, poi righe compatte che si riaprono a mezzo span */ #gsconf .cns .cnq{margin-top:8px} #gsconf .cns .cnq .cnd{display:none;font-weight:700;color:#7c2d12;font-size:var(--t-s);margin-bottom:5px} #gsconf .cns .cnq.aperta .cnd{display:block} #gsconf .cns .cnq .cno{display:none;flex-wrap:wrap;gap:6px} #gsconf .cns .cnq.aperta .cno{display:flex} #gsconf .abit.cns .cno button{width:auto;height:auto;min-height:32px;padding:5px 11px;border-radius:16px;font-size:var(--t-s);color:var(--navy,#1e3a5f);font-weight:600} #gsconf .abit.cns .cno button[aria-pressed=true]{color:#fff} #gsconf .abit.cns .cnr{display:flex;align-items:center;gap:6px;width:100%;height:auto;text-align:left;background:#fff;border:1.5px solid #fcd34d;border-radius:10px;padding:6px 11px;font-size:var(--t-s);color:#7c2d12;cursor:pointer} #gsconf .abit.cns .cnq.aperta .cnr{display:none} #gsconf .abit.cns .cnr b{color:var(--navy,#1e3a5f)} #gsconf .abit.cns .cnr i{font-style:normal;margin-left:auto;color:#b45309} #gsconf .cns .cnin{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--t-s);font-weight:700;color:#7c2d12} #gsconf .cns .cnin input{width:84px;min-height:44px;padding:4px 8px;border:1.5px solid var(--navy,#1e3a5f);border-radius:10px;font-size:16px} /* DQ-4 (REPO-CHAT-10): a misura di dito, niente ingrandimento di Safari */ #gsconf .abit.cns .cnin button{width:auto;height:auto;min-height:44px;padding:5px 14px;border-radius:22px;font-size:var(--t-s);color:var(--navy,#1e3a5f);font-weight:700} #gsconf .cns .cnq:not(.aperta) .cnin{display:none} /* BW-4 (LP-20 #2 «la seconda foto dei consumi dichiarati non è al livello dell'area "e domani?"») · la card dei consumi prende lo stampo delle testate dei tre pannelli (.gcsez): stessa altezza, colore, bordo e margini; il corpo (domande, righe compatte) sta sotto senza riquadro arancione */ #gsconf .abit.cns{background:transparent;border-left:0;border-radius:0;padding:0;margin:12px 0 6px} #gsconf .cns .abt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:9px 12px;background:#eef4fb;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:8px;font-size:var(--t-b);color:var(--navy);line-height:1.3} #gsconf .cns .abt em{margin:0} #gsconf .cns .abt b{flex:1 1 0;min-width:0;color:var(--navy);font-weight:800;white-space:normal} /* il titolo va a capo dentro la riga: emoji e freccia restano ai lati */ #gsconf .cns .abt small{flex:1 1 100%;order:3;margin:0;font-size:var(--t-s);color:var(--blu-700-c);font-weight:400} #gsconf .cns .abt .cnfr{order:2;margin-left:auto;color:var(--navy);font-size:var(--t-s)} #gsconf .cns .abt .abreset{order:1;margin-left:auto} #gsconf .cns .abt .abreset+small,#gsconf .cns .abt .cnfr:not([hidden])~.abreset{margin-left:0} #gsconf .cns:not(.chiusa) .abt{border-radius:8px 8px 0 0;margin-bottom:8px} #gsconf .cns .cnq,#gsconf .cns .cnsalta{padding:0 2px} /* BC-14 (LP-14 #20) · la card dei consumi si chiude a fisarmonica, col titolo che porta la somma */ #gsconf .cns .abt{cursor:pointer} #gsconf.cnfase .cns .abt{cursor:default} #gsconf .cns .cnfr{margin-left:6px;color:#b45309;font-size:var(--t-s)} #gsconf .cns.chiusa .cnq,#gsconf .cns.chiusa .cnsalta,#gsconf .cns.chiusa .abreset,#gsconf .cns.chiusa .abt small{display:none} #gsconf .cns.chiusa .abt{margin-bottom:0} #gsconf .cns .cnsalta{display:none;margin:9px 0 0} #gsconf .abit.cns .cnsalta .lnkb{width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;font-size:var(--t-s)} #gsconf.cnfase .cns .cnsalta{display:block} #gsconf.cnfase .cns .abreset{display:none} #gsconf.cnfase #gcresto{display:none} /* BE-1 (LP-16 #9-#14) · il richiamo delle colonnine in prima pagina: card della home con bordo ambra, cifra in evidenza */ .hero .promo{margin:16px 0 4px;border:2px solid var(--amber);border-top-width:6px;box-shadow:var(--ombra)} .hero .promo b{font-size:var(--t-l);line-height:1.3} .hero .promo em{font-style:normal;color:var(--green);white-space:nowrap} .hero .promo u{display:inline-block;margin-top:4px;color:var(--navy);font-weight:700} .hero .promo{margin:12px 0 4px;border-top-width:4px;padding:12px 14px}.hero .promo b{font-size:var(--t-b)}.hero .promo>span{font-size:var(--t-s)}.hero .promo u{margin-top:0} /* CE-2 (LP-21 #12): le card promozionali della home più piccole, un messaggio */ /* BH-1 (LP-17 #11, «vorrei che il riepilogo fosse richiudibile come i cosumi dichiarati così ottimizziamo spazio»): il riepilogo ha la forma della fisarmonica «Consumi dichiarati» (barra col filo a sinistra, freccia ▾/▴), nei colori della marca; nasce chiuso */ details.gsrp{margin:14px 0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:8px} details.gsrp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eef4fb;border-radius:0 7px 7px 0;font-weight:700;font-size:var(--t-b);color:var(--navy)} details.gsrp>summary::-webkit-details-marker{display:none} details.gsrp>summary::after{content:'\25BE';margin-left:auto;font-size:var(--t-s)} details.gsrp[open]>summary{border-radius:0 7px 0 0} details.gsrp[open]>summary::after{content:'\25B4'} details.gsrp>#gsrp{padding:10px 12px} /* BQ-1 (LP-14 #4): la demo animata sopra la mappa: non prende i tocchi, sta sotto i comandi di Leaflet */ .gsm-demo{position:absolute;inset:0;z-index:650;pointer-events:none;transition:opacity .6s} .gsm-demo.via{opacity:0} .gsm-demo svg{position:absolute;left:0;top:0} .gsm-demo polygon{transition:fill-opacity .5s} .gsm-dito{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.55);border:3px solid var(--navy,#1e3a5f);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .55s ease-in-out,opacity .4s} .gsm-dito.tap{animation:gsmtap .45s ease-out} @keyframes gsmtap{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 18px rgba(255,255,255,0),0 2px 8px rgba(0,0,0,.35)}} .gsm-demo-t{position:absolute;left:50%;top:60%;transform:translateX(-50%);max-width:calc(100% - 40px);background:var(--navy,#1e3a5f);color:#fff;font-size:var(--t-b);font-weight:700;line-height:1.3;padding:6px 12px;border-radius:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.3)} .gsm-gc{font:inherit;font-size:var(--t-s);font-weight:700;color:var(--navy,#1e3a5f);background:#fff;border:1.5px solid var(--navy,#1e3a5f);border-radius:14px;padding:2px 10px;margin-left:4px;cursor:pointer;white-space:nowrap} /* BR-1 (LP-19 #10, «eccessivamente impegnativa la parte informazioni in blu/bassa … devi ottimizzarla»): «Parliamone» e piè di pagina compatti su tutte le pagine; nessuna informazione tolta: i titoletti del piè (GigaSolar Srl, Sede, Contatti) spariscono, le voci si leggono di seguito. */ .contact{margin-top:14px} .contact .wrap{padding-top:12px;padding-bottom:12px} .contact h2{font-size:var(--t-xl)/* DR-1 */;margin:0} .contact .wrap>p{font-size:var(--t-b);margin-top:2px} .contact .cbtns.icone{margin-top:8px;gap:22px} .contact .cbt .tnd{width:44px;height:44px} .contact .cbt .tnd svg{width:21px;height:21px} @media(min-width:900px){ /* PC: una riga sola, titolo e frase a sinistra, i tondi a destra; col modulo aperto torna a tutta larghezza */ .contact .wrap:not(:has(.cfdet[open])){display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:18px} .contact .wrap:not(:has(.cfdet[open]))>h2,.contact .wrap:not(:has(.cfdet[open]))>p{text-align:left;margin:0;max-width:none} .contact .wrap:not(:has(.cfdet[open])) .cbtns.icone{margin-top:0}} footer{font-size:var(--t-s);line-height:1.55} footer .wrap{display:block;padding-top:10px;padding-bottom:10px} footer h4{display:none} footer .s{display:block} footer .s>*{display:inline} footer .s>*+*::before{content:' \00b7 ';color:var(--blu-300)} footer .n{font-size:var(--t-s)} footer .bd{display:inline-block;margin:0 0 0 6px;padding:0 6px;font-size:var(--t-xs);vertical-align:1px} footer .s>.bd::before,footer .s>h4+*::before{content:none} footer .s>h4{display:none} footer a{color:inherit} /* BU-1 (P5, LP-19 #14 «il footer quel PARLIAMONE e i dati GIGASOLAR da ottimizzare e migliorare la posizione, disposizione e la lettura»): Parliamone e piè sono UN blocco: stesso fondo, una riga ambra sottile fra i due; i dati tornano in colonne con la loro etichetta (si legge per colonna: azienda · sede · contatti), tre a PC, due sul telefono con la sede sotto. Sostituisce le righe «in linea» di BR-1 qui sopra. */ .contact{margin-top:18px} .contact .wrap{padding-top:16px;padding-bottom:14px} .contact h2{font-size:var(--t-xl)} .contact .cbt small{font-size:var(--t-s)} footer{border-top-width:2px} footer .wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding-top:12px;padding-bottom:12px;font-size:var(--t-s);line-height:1.5} footer .s{display:block;min-width:0} footer .s>*{display:block} footer .s>*+*::before{content:none} footer .s>h4{display:block;font-size:var(--t-xs);letter-spacing:.06em;margin:0 0 2px;color:var(--amber-2)} footer .s:nth-child(2){grid-column:1/-1;order:3} /* sul telefono: azienda | contatti, la sede sotto a tutta riga */ footer .n{font-size:var(--t-b)} footer .bd{display:inline-block;margin:4px 0 0;padding:1px 7px} footer .s div{overflow-wrap:anywhere} @media(min-width:700px){footer .wrap{grid-template-columns:1fr 1fr 1.3fr}footer .s:nth-child(2){grid-column:auto;order:0}} /* BR-2 (LP-19 #11, «testo non proporzionale … il testo va equilibrato»): l'elenco dei pannelli ha la misura del riepilogo (13 px) */ .gsm .gsm-pc{font-size:var(--t-s);line-height:1.35} .gsm .gsm-pc li button{padding:5px 8px} .gsm .gsm-pc li button b{font-size:var(--t-s)} .gsm .gsm-pc li button small{font-size:var(--t-xs)} .gsm .gsm-sug{font-size:var(--t-s);font-weight:600;margin-bottom:6px} .gsm .gsm-sug input{width:17px;height:17px} .gsm .gsm-pc input[type=search]{font-size:var(--t-m);padding:5px 9px} /* sul telefono 16 px: sotto, iPhone ingrandisce la pagina */ .gsm-pc input[type=search]{min-height:44px} /* DS-6 (trovato dalla regressione, prova 5666): alto 44 come gli altri campi, era 41 (regola DQ-3). Senza «.gsm» davanti: il riquadro del catalogo vive nello slot della tappa, fuori da .gsm, e le righe .gsm .gsm-pc qui sopra non lo raggiungono (misurato il 17/10: inGsm false, padding 7px 10px dalla regola di gs-sim.js) */ @media(hover:hover) and (pointer:fine){.gsm .gsm-pc input[type=search]{font-size:var(--t-s)}} .gsm .gsm-pcn{font-size:var(--t-xs)} /* BV-1 (LP-19 #22, «manca il copyright by Giuseppe Motta 2026»): la riga del copyright in fondo al piè, a tutta larghezza, su tutte le pagine */ footer .copy{grid-column:1/-1;margin:2px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);font-size:var(--t-xs);color:var(--blu-300);text-align:left} /* CT-2 (LP-26 #16, «una sola area aperta per volta … meglio marcato e ben separato dalle parti ancora chiuse») · il carosello della pagina 2 di Casa: la tappa aperta è un riquadro bianco col bordo navy attaccato alla sua testata; le chiuse sono una riga sottile e chiara con la sintesi; «Le tue abitudini» è una tappa come le altre (il riquadro ambra di prima non serve dentro il carosello); «Avanti ›» in fondo alla tappa aperta. */ #gcresto .gcpan{background:var(--carta);border:1px solid var(--line);border-left:4px solid var(--navy);border-top:0;border-radius:0 0 8px 8px;padding:10px 12px 12px;margin:-8px 0 14px} #gcresto .gcsez[aria-expanded=true]{background:var(--navy);color:var(--carta);margin-bottom:8px} #gcresto .gcsez[aria-expanded=true]>span,#gcresto .gcsez[aria-expanded=true]::after{color:var(--carta)} #gcresto .gcsez[aria-expanded=false]{background:var(--fondo);border-left-color:var(--line);margin:8px 0 0} #gcresto .gcsez[aria-expanded=false]>b{font-weight:700;color:var(--mut)} #gcresto .gcpan .abit{background:transparent;border:0;border-radius:0;padding:0;margin:0} #gcresto .gcpan .abit .abt{display:none} /* la testata della tappa dice già «Le tue abitudini»; il ↺ resta nel riquadro, sotto */ #gcresto .gcpan .abit .abr{margin-top:2px} #gcresto .gcnext{display:block;width:100%;margin:12px 0 0;padding:11px 14px;border:1.5px solid var(--navy);border-radius:999px;background:var(--carta);color:var(--navy);font:inherit;font-weight:800;cursor:pointer;text-align:center} #gcresto .gcnext:focus-visible{outline:2.5px solid #fbbf24;outline-offset:2px} /* CU-6 (LP-26 #22, «Il tuo impianto … è molto grande, il testo, troppo rumore … come se fosse una card a sé»): la tappa 2 più compatta. Via il titolo e il disegnino «Il tuo disegno dalla mappa» (resta la riga «2 superfici · 65 m² · modifica sulla mappa»), il numero dei kW più piccolo, il condominio una riga di testo, le superfici come righe scelte (gs-sim.js .gsm-pslotr), l'accumulo con meno aria. */ #gcresto .gcpan[data-sez="2"]>.tet:first-of-type .teth{display:none} #gcresto .gcpan[data-sez="2"] .tet{padding:8px 10px;margin-bottom:8px} #gcresto .gcpan[data-sez="2"] .tetr{margin-top:4px} #gcresto .gcpan[data-sez="2"] .tetr.pot2>b{font-size:var(--t-l)} #gcresto .gcpan[data-sez="2"] .condo{margin-top:4px} #gcresto .gcpan[data-sez="2"] .condot{border:0;background:none;padding:2px 0;font-size:var(--t-s)} #gcresto .gcpan[data-sez="2"] .condot b{text-decoration:underline;text-underline-offset:3px} #gcresto .gcpan[data-sez="2"] .condot[aria-pressed="true"]{border:0;background:none} #gcresto .gcpan[data-sez="2"] .gsm-pslot{margin-top:4px} #gcresto .gcpan[data-sez="2"] .notte{margin-top:5px} #gcresto .gcpan[data-sez="2"] .batlv{margin:8px 4px 0} /* CV (LP-26 #27, dalla foto della CU sul telefono: «spazio iniziale vuoto … il messaggio del condominio non è quello il posto … la barra deve esprimere esattamente la potenza rispetto al punto … una barra per dire siamo qui») · la tappa «Il tuo impianto» rifatta. Scelte di forma della chat (CLAUDE.md §9.10). */ /* CV-1 · niente spazio vuoto in cima alla tappa: il 📐 andava a capo da solo e lasciava una riga vuota; via, resta «1 superficie · 68 m² · modifica sulla mappa» */ #gcresto .gcpan[data-sez="2"]>.tet:first-of-type>.teth+.tetr>em{display:none} #gcresto .gcpan[data-sez="2"]>.tet:first-of-type>.teth+.tetr{margin-top:0} /* CV-2 · il condominio è la quarta domanda della casa (#gccasaq): il vecchio pulsante-riga «È il tetto di un condominio?» sparisce, restano i due pulsanti della domanda; le famiglie (−/+) si vedono solo con la domanda aperta e «Condominio» scelto; le note lunghe («se aderissero tutte», l’assemblea) restano nel DOM ma non nella domanda */ #gsconf .cns #gccasaq .condot{display:none} #gsconf .cns .cnq:not(.aperta) .condo{display:none} #gsconf .cns #gccasaq .condo{margin-top:8px} #gsconf .cns #gccasaq .condob{margin-top:0} #gsconf .cns #gccasaq .condon .eunota,#gsconf .cns #gccasaq .condon .tutte{display:none} #gsconf .cns #gccasaq .cnok{display:none;margin:8px 0 0} #gsconf .cns #gccasaq.aperta .cnok:not([hidden]){display:block} #gsconf .abit.cns .cnok .lnkb{width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;font-size:var(--t-s);font-weight:700;color:var(--navy,#1e3a5f);text-decoration:underline;text-underline-offset:3px} /* CV-4 · il valore («7,5 kW · 14 pannelli») sta sul pomello dell’asticella; sotto i kW grandi resta solo «11.753 kWh l’anno» (il doppione «14 pannelli» esce dallo schermo, non dal DOM: la sintesi della tappa chiusa lo legge ancora); a sinistra «2 kW», a destra «11,5 kW · tutto il tetto» (gs-sim.js maxl) */ #gcresto .gcpan[data-sez="2"] #gcpan{position:absolute;left:-9999px;top:0} #gcresto .gcpan[data-sez="2"] .kwd .sep{display:none} #gcresto .gcpan[data-sez="2"] .slw{margin-top:28px} #gsconf .gcval{position:absolute;left:clamp(66px,calc(9px + (100% - 18px) * var(--gcn,0)),calc(100% - 66px));top:-21px;transform:translateX(-50%);z-index:3;white-space:nowrap;font-size:var(--t-xs);font-weight:800;color:#065f46;background:#fff;border:1px solid #bbe3cd;border-radius:999px;padding:2px 8px;line-height:1.2;pointer-events:none;transition:left .15s ease} #gsconf .gcval:empty{display:none} /* CV-6 · il tondo della percentuale è verde: un tetto pieno al 65 % non è un allarme (prima rosso→arancio); il riempimento lo colora gs-sim.js in verde */ #gsconf #gcmax{border-color:#059669} #gsconf #gcmax .acq2{background:#059669} #gsconf #gcmax b{color:#065f46} /* CV-8 · «✉ Avanti: il tuo riepilogo» (verde, fisso in basso) solo nell’ultima tappa «Quanto risparmi»: nelle altre c’è già «Avanti: …» della tappa */ #gcresto.gc-chiusa-3 .fx.gcfissa{display:none} /* CV-9 · l’accumulo in una riga: «1 batteria da 20 kWh · consigliata · copre ≈ 12,5 h di notte»; la barra della notte con lo stesso numero esce di scena */ #gcresto .gcpan[data-sez="2"] .batt{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:5px} #gcresto .gcpan[data-sez="2"] .batn{font-size:var(--t-s);color:#334155} #gcresto .gcpan[data-sez="2"] .batn:empty{display:none} #gcresto .gcpan[data-sez="2"] .notte{display:none} /* CV-7 · la striscia delle tappe «siamo qui» (nav.gctappe, residenziale.html), fissa in cima allo schermo mentre si scorre: ✓ fatta · ● qui · ○ da fare; ogni voce si tocca. Le testate delle tappe e dei consumi si fermano sotto la striscia (scroll-margin-top). */ #gsconf .gctappe{position:sticky;top:var(--hdr);z-index:6;/* CX-1: sotto la testata ferma */display:flex;gap:2px;margin:0 -2px 6px;padding:calc(5px + env(safe-area-inset-top,0px)) 2px 4px;/* CW-2: sempre visibile, sotto la barra di stato di iOS */background:rgba(255,255,255,.96);backdrop-filter:blur(4px);border-bottom:1px solid var(--line)} #gsconf .gctappe button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0;border:0;border-radius:6px;background:none;font:inherit;font-size:var(--t-xs);font-weight:600;color:var(--mut,#64748b);cursor:pointer;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #gsconf .gctappe button i{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:14px;height:14px;border-radius:50%;border:1.5px solid #cbd5e1;background:#fff;font-style:normal;font-size:9px;line-height:1;color:#fff} #gsconf .gctappe button.fatta{color:#065f46} #gsconf .gctappe button.fatta i{background:#059669;border-color:#059669} #gsconf .gctappe button.fatta i::before{content:'\2713'} #gsconf .gctappe button.qui{color:var(--navy,#1e3a5f);font-weight:800} #gsconf .gctappe button.qui i{background:var(--navy,#1e3a5f);border-color:var(--navy,#1e3a5f);box-shadow:0 0 0 3px #dbeafe} #gsconf .gctappe button:focus-visible{outline:2.5px solid #fbbf24;outline-offset:1px} #gsconf.cnfase .gctappe button[data-t]:not([data-t="c"]){cursor:default;opacity:.7} #gcresto .gcsez,#gsconf .cns .abt{scroll-margin-top:46px} /* CX-1 · EA-1: la testata la mette scroll-padding-top, qui resta la striscia delle tappe */ /* CW-1 (LP-27 #3-#5) · la home come colonna di card: sul telefono ogni card prende lo schermo (meno la barra), si scorre una card per volta (scroll-snap); su PC riquadri uno sotto l'altro. L'hero resta la prima card (promozione + i tre simulatori nella prima schermata, LP-21 #11). */ main.wrap>.cardv:not(.hero){background:var(--carta);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:14px 0;box-shadow:0 1px 4px rgba(15,23,42,.05)} main.wrap>.cardv .sec{margin:0 0 12px;padding-top:12px} main.wrap>.cardv .alt{margin-top:12px} main.wrap>.cardv.duo{display:grid;gap:12px;grid-template-columns:1fr} main.wrap>.cardv.duo .promo{margin:0} main.wrap>.cardv.duo .dati3{grid-column:1/-1;margin:0} @media(min-width:900px){main.wrap>.cardv.duo{grid-template-columns:1fr 1fr}} @media(max-width:899px){html{scroll-snap-type:y proximity} main.wrap>.cardv{scroll-snap-align:start;scroll-margin-top:0;/* EA-1: la testata la mette scroll-padding-top */margin:0 0 14px} /* CX-2 (LP-28 #12 «quanto spazio sprecato»): la card è alta quanto il suo contenuto; lo scatto resta */ main.wrap>.cardv.hero,main.wrap>.cardv.pcard:first-child{margin-top:8px}} /* CW-8 → CX-2: con la testata ferma la prima card prende 8 px d'aria */ /* CW-1 · la fascia della promozione (promo.js): immagine, titolo, riga, scadenza; nella prima schermata sopra ai simulatori */ .pfascia{display:flex;align-items:center;gap:12px;margin:-4px 0 14px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:var(--carta);text-decoration:none} .pfascia[hidden]{display:none} .pfascia img{width:84px;height:56px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#fff} .pfascia span{flex:1;min-width:0} .pfascia b{display:block;font-family:'Sora',sans-serif;font-size:var(--t-m);font-weight:800;color:var(--amber-2);line-height:1.2} .pfascia small{display:block;font-size:var(--t-xs);color:var(--blu-200-d);margin-top:2px} .pfascia em{display:inline-block;margin-top:6px;font-style:normal;font-size:var(--t-xs);font-weight:800;background:var(--amber-2);color:var(--navy);border-radius:999px;padding:3px 9px;white-space:nowrap} .pfascia img{width:72px;height:72px} .pfascia em.cifra{background:var(--carta);color:var(--navy);font-size:var(--t-b)} /* DR-4: la cifra della promozione si legge */ /* CW-1: la cifra della promozione (CLAUDE.md §9.11), più in vista della scadenza */ /* CW-3 (LP-27 #13) · la stessa fascia sulle pagine chiare (Residenziale, Azienda, Investimenti): sotto il titolo, sopra il simulatore; fondo blu-50 e bordo ambra come l'.intro */ .pfascia.chiara{margin:0 0 14px;background:var(--blu-50);border:1px solid var(--line);border-left:6px solid var(--amber);color:var(--navy)} .pfascia.chiara b{color:var(--navy)} .pfascia.chiara small{color:var(--blu-700-b)} .pfascia.chiara em.cifra{background:var(--navy);color:#fff} @media(max-width:600px){.pfascia.chiara{padding:8px 10px;gap:10px}.pfascia.chiara small{display:none}.pfascia.chiara img{width:56px;height:56px}} /* sul telefono più corta: titolo, cifra, scadenza */ /* CW-6 (LP-28 #3) · il manifesto della promozione: la seconda card della home; sul telefono riempie lo schermo, su PC al massimo 90 % dell'altezza, centrato */ main.wrap>.cardv.pcard{padding:0;overflow:hidden;background:var(--carta)} .pcard .pman{position:relative;margin:0 auto;width:min(100%,calc(90vh * .5628))} /* CW-7: largo quanto l'immagine (941/1672), così le zone in % cadono sui pulsanti disegnati */ .pcard .pman>a{display:block;line-height:0} .pcard img{display:block;width:100%;height:auto;background:var(--carta)} .pcard .pzona{position:absolute;display:block;border-radius:14px;z-index:1} /* CW-7: i pulsanti disegnati sul manifesto: simulatore, telefono, WhatsApp */ .pcard .pzona:focus-visible{outline:3px solid var(--amber);outline-offset:2px} @media(max-width:899px){.pcard .pman{width:min(100%,calc((100svh - var(--hdr) - 24px) * .5628))}} /* CX-2 → CY-1: il manifesto sta tutto sopra la piega, anche su Safari */ body.gs-manifesto .tabbar,body.gs-manifesto .gsch-b{display:none} /* CY-1 (LP-28 #14): col manifesto in vista niente barra né bolla sopra i pulsanti disegnati */ @media(max-width:599px){.hero.solo>p{display:none}.hero.solo h1{font-size:var(--t-xl)}.hero.solo .hsl{margin-top:10px}} /* CW-1: sul telefono la prima schermata tiene promozione e tre simulatori (LP-21 #11); il paragrafo ripeteva le tre card */ /* CV · su PC la tappa resta a una colonna (scelta di forma): il modulo è largo 520 px, due colonne da 250 spezzerebbero le righe delle falde; a 1335 la tappa sta già in 0,8 schermi */ /* BX (LP-19 #24, LP-20 #1-#12) · la pagina 3 di Casa in tre pannelli: stesse testate .gcsez della pagina 2; dentro «Prenota il sopralluogo» due riquadri (recapiti navy, immobile ambra) */ #fase3.p3-chiusa-1>[data-p3="1"]:not(.gcsez),#fase3.p3-chiusa-2>[data-p3="2"]:not(.gcsez),#fase3.p3-chiusa-3>[data-p3="3"]:not(.gcsez){display:none!important} #fase3 .p3pan{padding:0 2px 6px} #fase3 .p3sub{margin:10px 0 14px;padding:8px 12px 10px;background:#f8fafc;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:10px} #fase3 .p3sub.imm{border-left-color:var(--amber)}#fase3 .p3sub.imm h4{color:#b45309} #fase3 .p3sub h4{margin:0 0 2px;font-size:var(--t-xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--navy)} #fase3 .p3sub label.t{margin:8px 0 3px}#fase3 .p3sub h4+label.t{margin-top:4px} #fase3 .p3riga{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#fase3 .p3riga input{flex:1 1 180px;min-width:0} #fase3 .p3cert{flex:0 0 auto;display:inline-block;border-radius:999px;padding:9px 14px;font-size:var(--t-s);font-weight:700;text-decoration:none;background:#fff;color:#128c7e;border:1.5px solid #25d366;cursor:pointer} #fase3 .p3hint,#fase3 .p3nota{margin:6px 0 2px;font-size:var(--t-xs);color:var(--mut)}#fase3 .p3hint b.wa{color:#128c7e}#fase3 .p3hint b.em{color:var(--navy)} #fase3 details.gsrp{margin:8px 0} /* il riquadro e-mail di gs-sim.js fra i recapiti: via titolo, intro e i campi doppi (nome, cellulare, consenso vengono dai campi della pagina); resta la riga e-mail + codice */ #fase3 #p3mailslot .gsml{margin:8px 0 0;padding:0;border:0;background:transparent} #fase3 #p3mailslot .gsml>b,#fase3 #p3mailslot .gsml>p:not(.gsml-m),#fase3 #p3mailslot .gsml>label,#fase3 #p3mailslot .gsml-r:has(#gsmlnome){display:none} #fase3.p3uff #p3mailslot .gsml>b{display:block;font-size:var(--t-s)} #fase3 #p3mailslot .gsml-r{margin:6px 0}#fase3 #p3mailslot .gsml-r input{flex:1 1 180px;font-size:var(--t-m);padding:10px 12px} #fase3 #p3mailslot .gsml-r button{background:#fff;color:var(--navy);border:1.5px solid var(--blu-200);padding:9px 14px;font-size:var(--t-s)} #fase3 #p3mailslot .gsml-m{margin:4px 0 0} /* posizione e catasto come link di testo */ #fase3 .gps{all:unset;display:inline-block;margin:4px 0 0;font-size:var(--t-xs);font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer} #fase3 .gpsmsg,#fase3 .catmsg{display:block;font-size:var(--t-xs);color:var(--mut);margin-top:4px} #fase3 .cat3{margin-top:2px} #fase3 .luxinv{margin:10px 0 4px} /* un solo pulsante pieno: senza API (il sito pubblico oggi) è «Prenota il sopralluogo su WhatsApp» (bwa), con l'e-mail come link; con API è bapi */ #fase3 .btns{align-items:center;gap:10px 18px} #fase3 .btns .btn.wa{flex:0 1 auto;min-width:240px;padding:13px 28px;font-size:var(--t-m)} #fase3 .btns .btn.em.noapi{all:unset;cursor:pointer;color:var(--navy);font-weight:700;font-size:var(--t-b);text-decoration:underline;text-underline-offset:3px} @media(max-width:599px){#fase3 .btns .btn.wa{flex:1 1 100%}} /* le 12 card: tre compatte in riga; le altre nove stanno in perche.html (link sotto) */ #fase3 #gsdiff>h3,#fase3 #gsdiff>p,#fase3 #gsdiff .gsd-n2{display:none} #fase3 #gsdiff.gsd-k .gsd-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;padding:0;margin:8px 0 6px} #fase3 #gsdiff .gsd-c{flex:none;display:none}#fase3 #gsdiff .gsd-c[data-diff="blackout"],#fase3 #gsdiff .gsd-c[data-diff="pratiche"],#fase3 #gsdiff .gsd-c[data-diff="prezzo"]{display:block} /* le tre del disegno (LP-19 #24) */ #fase3 #gsdiff .gsd-c h4{margin:0;padding:10px 10px 2px;font-size:var(--t-s);color:var(--navy)} #fase3 #gsdiff .gsd-r{grid-template-columns:1fr}#fase3 #gsdiff .gsd-a,#fase3 #gsdiff .gsd-n>b,#fase3 #gsdiff .gsd-n img,#fase3 #gsdiff .gsd-n svg,#fase3 #gsdiff .gsd-f{display:none} #fase3 #gsdiff .gsd-n{background:#fff;border:0;padding:0 10px 10px;font-size:var(--t-xs);color:var(--mut);line-height:1.35} @media(max-width:599px){#fase3 #gsdiff.gsd-k .gsd-g{grid-template-columns:1fr;gap:6px}#fase3 #gsdiff .gsd-c[data-diff="blackout"],#fase3 #gsdiff .gsd-c[data-diff="pratiche"],#fase3 #gsdiff .gsd-c[data-diff="prezzo"]{display:flex;align-items:baseline;gap:8px;padding:8px 10px}#fase3 #gsdiff .gsd-c h4{padding:0;white-space:nowrap}#fase3 #gsdiff .gsd-r{flex:1;min-width:0}#fase3 #gsdiff .gsd-n{padding:0}} /* sul telefono: una card per riga, titolo e frase sulla stessa riga */ #fase3 .alt{margin:4px 0 0} /* BY-1 (LP-20 #27) · la spunta dell'informativa fra i recapiti; se manca, lampeggia */ #fase3 .p3sub .cons.p3cons{margin:10px 0 2px;font-size:var(--t-s)} #fase3 .cons.evidenzia{animation:p3lamp 1.2s ease-out 2;border-radius:8px} @keyframes p3lamp{0%,60%{box-shadow:0 0 0 3px #fbbf24;background:#fff7ed}100%{box-shadow:none;background:transparent}} /* BY-2 (LP-20 #28 «quando esco dalla progettazione dovrebbe essere visibile il pulsante … senza bisogno di scrollare») · la riga del pulsante resta in vista in basso, stesso stampo del pulsante «Avanti» della pagina 2 (.gcfissa) */ #fase3 .btns{position:sticky;bottom:12px;z-index:5;margin:6px -6px 0;padding:8px 6px;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);border-top:1px solid var(--line)} @media(max-width:899px){#fase3 .btns{bottom:calc(62px + env(safe-area-inset-bottom))}} /* CH-1 (LP-22 #7, D3) · il condominio nella scheda del disegno: una riga che si accende, due contatori, le cifre a famiglia */ #gsconf .condo{margin-top:8px} #gsconf .condot{display:flex;align-items:baseline;gap:8px;width:100%;height:auto;padding:7px 10px;border-radius:10px;border:1.5px dashed var(--line,#e2e8f0);background:#fff;font:inherit;font-size:var(--t-s);color:#334155;text-align:left;cursor:pointer} #gsconf .condot em{font-style:normal;flex:0 0 auto} #gsconf .condot b{color:var(--navy,#1e3a5f)} #gsconf .condot[aria-pressed="true"]{border-style:solid;border-color:#059669;background:#ecfdf5} #gsconf .condob{margin-top:6px;padding:8px 10px;border-radius:10px;background:#f8fafc} #gsconf .condor{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0;font-size:var(--t-s);color:#334155} #gsconf .stp{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto} #gsconf .stp b{min-width:2ch;text-align:center;font-size:var(--t-b);color:var(--navy,#1e3a5f)} #gsconf .stp button{width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid var(--navy,#1e3a5f);background:#fff;color:var(--navy,#1e3a5f);font-size:var(--t-b);line-height:1;cursor:pointer} #gsconf .stp button:disabled{opacity:.35;cursor:default} #gsconf .condon p{margin:6px 0 0;font-size:var(--t-s);color:#334155} #gsconf .condon b{color:var(--navy,#1e3a5f)} #gsconf .condon p.tutte{padding-top:6px;border-top:1px solid var(--line,#e2e8f0)} #gsconf .condon p.eunota{font-size:var(--t-xs);color:var(--mut,#64748b)} /* CI-1 (LP-23 #5) · Azienda: i consumi scritti (media al mese o mese per mese) e le barre mese per mese, consumi contro produzione */ .cscr{margin-top:12px} .cscr #cscrB{margin-top:8px;padding:10px;border-radius:10px;background:#f8fafc;border:1px solid var(--line,#e2e8f0)} .cscrm{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .cscrt{width:auto;height:auto;min-height:32px;padding:5px 12px;border-radius:16px;border:1.5px solid var(--navy,#1e3a5f);background:#fff;color:var(--navy,#1e3a5f);font:inherit;font-size:var(--t-s);font-weight:600;cursor:pointer} .cscrt.on{background:var(--navy,#1e3a5f);color:#fff} .cscrv{display:flex;align-items:center;gap:8px;font-size:var(--t-s);color:#334155} .cscrv input{width:9em} .cscrg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px} @media(min-width:700px){.cscrg{grid-template-columns:repeat(6,1fr)}} .cscrg label{display:flex;align-items:center;gap:5px;font-size:var(--t-s);color:#334155} .cscrg input{width:100%;min-width:0} .cscr input{min-height:44px;padding:6px 8px;border:1px solid var(--line,#e2e8f0);border-radius:8px;font:inherit;font-size:var(--t-b)} /* DQ-4: i 12 mesi a misura di dito */ .cscre{margin:8px 0 0;font-size:var(--t-s);color:#b91c1c} .cscr .gsgo{margin-top:10px} .mesi{margin:16px 0 6px} .mesi .mb{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:150px;padding:6px 0 0;border-bottom:1px solid var(--line,#e2e8f0)} .mesi .mm{display:flex;flex-direction:column;align-items:center;height:100%;min-width:0} .mesi .mbb{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px} .mesi .mbb i{display:block;width:42%;max-width:14px;border-radius:3px 3px 0 0;min-height:1px} .mesi .mm span{font-size:var(--t-xs);color:var(--mut,#64748b);margin-top:3px} .mesi i.mc,.mesi .sw.mc{background:#94a3b8;border-color:#94a3b8} .mesi i.mp,.mesi .sw.mp{background:#16a34a;border-color:#16a34a} .mesi .sw.mc,.mesi .sw.mp{height:10px;border-top:0;border-radius:2px} /* CZ-1 (LP-28 #15, 11/10/2026) · la testa della tappa «Il tuo impianto», dal mock LP-29: riga 0 etichetta + «modifica sulla mappa ›»; riga 1 il totale col pulsante-pannello a fine riga (sul telefono va a capo, a destra); riga 2 solo con 2+ superfici «‹ n/N › …» nella cornice della riga attiva; sotto l'asticella «2 kW · prossimo passo … · massimo» (sul telefono «prossimo passo» su riga propria). #gspanslot e .gsm-pslotl sono trasparenti (display:contents): i loro figli stanno nella riga 1. I kW impostati restano la riga .tetr.pot2 (CV-4: il valore sta sul pomello). */ #gsconf .tet .tk{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px} #gsconf .tet .tk .da{margin:0;white-space:nowrap} #gsconf .tet .tk u{font-size:var(--t-xs);font-weight:700;color:var(--navy);cursor:pointer;white-space:nowrap;text-underline-offset:3px} #gsconf .tet .tr1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:var(--t-s);color:var(--navy)} #gsconf .tet .tr1 .ic{flex:0 0 auto;display:block} #gsconf .tet .tr1>.trt{flex:1 1 auto;min-width:0;line-height:1.3;display:flex;align-items:center;gap:8px} #gsconf .tet .tr1>.trt>span{flex:1 1 auto;min-width:0} #gsconf .tet .tr1 .trt b{font-weight:800} #gsconf .tet #gspanslot,#gsconf .tet .gsm-pslotl{display:contents} #gsconf .tet .panb{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--t-s);font-weight:700;color:var(--navy);padding:4px 9px;border:1.5px solid var(--navy);border-radius:8px;background:#fff;cursor:pointer;white-space:nowrap} #gsconf .tet .panb svg{display:block} #gsconf .tet .panb[aria-expanded=true]{background:var(--navy);color:#fff} #gsconf .tet .panb-f{cursor:default} #gsconf .tet .gsm-pslotr.tr2{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:5px 8px;color:var(--navy)} #gsconf .tet .gsm-pslotr.tr2 .trt{flex:1 1 auto;min-width:0;line-height:1.3} #gsconf .tet .gsm-pslotr.tr2 .trt b{font-weight:800} #gsconf .tet .gsm-pslotr:not(.tr2){flex:1 1 100%;margin:0} #gsconf .tet .gsm-pc{flex:1 1 100%;margin:2px 0 0} #gsconf .tet .r2{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 6px} #gsconf .tet .r2>span{white-space:nowrap} #gsconf .tet .r2 .r2m{color:#065f46;font-weight:700} #gsconf .tet .r2 .r2m:empty{display:none} #gsconf .tet .tr3 .mx{margin-left:auto;font-size:var(--t-s);color:var(--mut);white-space:nowrap} #gsconf .tet .tr3 .mx b{color:var(--navy)} #gcresto .gcpan[data-sez="2"] #gcpan{position:static} /* LP-29 #3: i pannelli tornano accanto ai kW (CV-4 li nascondeva: il valore stava sul pomello) */ #gsconf .gcval{display:none} /* LP-29 #3: la pillola sul pomello ripeteva la riga 3 */ #gcresto .gcpan[data-sez="2"] .slw{margin-top:6px} /* CZ-6 (LP-29 #4): la fascia della promozione in fondo alle pagine dei simulatori, prima di «Scrivici»: aria sopra, come una card */ .pfascia.chiara.pfondo{margin:20px 0 8px} /* CZ-1-quater: il pulsante-pannello fuori dalla testa di Casa (Azienda): icona e testo in fila */ .gsm-pan.panb{display:inline-flex;align-items:center;gap:6px}.gsm-pan.panb svg{display:block;flex:0 0 auto} /* DA-1 (LP-29 #10): la produzione accanto ai kW (il separatore torna: CV-4 lo spegneva), il massimo sotto la fine dell'asticella, il prossimo passo a sinistra */ #gcresto .gcpan[data-sez="2"] .tr3 .kwd .sep{display:inline} #gsconf .tet .r2{align-items:baseline}#gsconf .tet .r2 .mx{margin-left:auto;color:var(--mut);white-space:nowrap}#gsconf .tet .r2 .mx b{color:var(--navy)} /* DA-1-bis (LP-29 #11): i kW attaccati all'asticella */ #gcresto .gcpan[data-sez="2"] .tr3+.slw{margin-top:-4px} /* DA-1-ter: il ▼ del consiglio sulla barra; sul telefono il massimo in prima riga a destra, il prossimo passo sotto */ #gcresto .gcpan[data-sez="2"] .tr3+.slw .sugm{top:4px;font-size:var(--t-xs)} @media(max-width:520px){#gsconf .tet .r2 .mx{order:-1;flex:1 1 100%;text-align:right}} /* DA-1-quater: sul telefono pannelli e produzione in colonna accanto ai kW grandi, una riga sola */ @media(max-width:520px){#gsconf .tet .tr3{flex-wrap:nowrap;align-items:center}#gsconf .tet .tr3 .kwd{display:flex;flex-direction:column;line-height:1.25;min-width:0}#gcresto .gcpan[data-sez="2"] .tr3 .kwd .sep{display:none}#gsconf .tet .tr3 .kwh{white-space:nowrap}} /* DB-1 (LP-30, 12/10/2026; LP-29 #13-#14, OpenSolar) · la riga di sintesi a posti fissi: kW · kWh l'anno · accumulo · copertura. Stampo in gs-sim.js (GSSIM.sintesi). Quattro colonne pesate sul contenuto (misurate sul mock: a 375 servono 68/88/60/47 px su 282) che non scendono mai sotto il loro contenuto; le parole («l'anno», «accumulo», «dal sole») solo da 460 px di riga. */ .gsint{display:grid;grid-template-columns:minmax(min-content,66fr) minmax(min-content,86fr) minmax(min-content,58fr) minmax(min-content,50fr);gap:0 4px;align-items:center;width:100%;margin:0;padding:0;color:inherit;line-height:1.25;container-type:inline-size} .gsint>span{min-width:0;display:flex;align-items:baseline;gap:1px;white-space:nowrap;font-variant-numeric:tabular-nums} .gsint>span>svg{flex:0 0 auto;width:13px;height:13px;align-self:center;margin:0 2px 0 0} .gsint>span>b{font-weight:800;font-size:var(--t-s)} .gsint>span>small{font-size:var(--t-xs);opacity:.85;color:inherit} .gsint>span>i{font-style:normal;font-size:var(--t-xs);opacity:.75;display:none;margin-left:2px} @media(min-width:600px){.gsint{grid-template-columns:minmax(min-content,76fr) minmax(min-content,135fr) minmax(min-content,126fr) minmax(min-content,100fr);gap:0 10px}} @container (min-width:460px){.gsint>span>i{display:inline}} .gsint>span.vuoto{opacity:.45} #gcresto .gcsez.gsintesta{flex-wrap:wrap}#gcresto .gcsez.gsintesta::after{order:1;margin-left:auto} /* la riga sta sotto il titolo a ogni larghezza (come BW-2-bis sul telefono) */ #gcresto .gcsez>.gsint{order:2;flex:1 1 100%;margin-top:3px} #gcresto .gcsez[aria-expanded=false]>.gsint{color:var(--navy)} .gsint.sola{background:var(--carta);border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:8px;padding:9px 12px;margin:8px 0 12px;color:var(--navy);box-sizing:border-box} /* da sola (Azienda, Investimenti): la cornice della testata chiusa */ /* DB-2 (LP-30, 12/10/2026; LP-29 #13-#14, OpenSolar) · la card unica del componente: la cornice .tet di oggi con una testa (.gsch: icona dello sprite DB-1 · nome · numero grande), «una scelta» (.gscs) e «un dettaglio» (.gscd). Pannelli · Accumulo · Colonnina (domani la pompa di calore). Il blocco del tetto (.tet.tetto) non è un componente. */ #gsconf .tet.tetto{margin-bottom:10px} #gsconf .gsch{display:flex;align-items:center;gap:8px;margin:0 0 6px;flex-wrap:nowrap} #gsconf .gsch .gsci{flex:0 0 auto;width:22px;height:22px;color:#065f46} #gsconf .gsch .nome{flex:1 1 auto;min-width:0;font-size:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;color:#065f46;font-weight:800;line-height:1.25} #gsconf .gsch .nome small{display:block;letter-spacing:0;text-transform:none;font-weight:600;color:var(--mut);font-size:var(--t-xs)} #gsconf .gsch>b{flex:0 0 auto;font-size:var(--t-xl);font-weight:800;color:#065f46;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums} #gsconf .gsch>b small{font-size:var(--t-s);font-weight:700} #gsconf .gsch>b.vuoto{color:var(--mut);opacity:.6} #gsconf .gscs{margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} #gsconf .gscs .quando{font-size:var(--t-s);color:var(--navy)} #gsconf .gscd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:var(--t-s);color:var(--mut)} #gsconf .gscd b{color:var(--navy);font-weight:700} #gsconf .gscd .kwd{color:var(--mut)}#gcresto .gcpan[data-sez="2"] .gscd .kwd .sep{display:inline} /* il «·» fra pannelli e kWh (la DA lo spegneva fuori dalla riga dei kW) */ #gsconf .gscd .gcbonus{flex:1 1 100%;margin:0} #gsconf .gscomp .batlv{margin-top:6px} #gsconf .gscomp .abg2{display:inline-flex;align-items:center;gap:7px}#gsconf .gscomp .abg2>em{font-style:normal;font-size:var(--t-m)} #gsconf .gscomp .abg2 button{width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid var(--navy,#1e3a5f);background:#fff;font-size:var(--t-b);line-height:1;cursor:pointer} #gsconf .gscomp .abg2 button[aria-pressed=true]{background:var(--navy,#1e3a5f);box-shadow:0 0 0 2px #fde68a inset} #gsconf .gscomp[data-comp=colonnina]:has(#gcaut[hidden]){display:none} /* la card c'è solo con l'auto (gs-sim.js mostra #gcaut quando si sceglie «Auto») */ /* DO-3 (REPO-CHAT-09 #4-#5, misura delle 12 pagine a 375 a tocco: strumenti-revisioni/sito-revDO-strumenti/misura/dn-*-375.json) · i comandi a misura di dito, solo sugli schermi a tocco. Scelte di forma (§9.10): i link dentro il testo (senza classe: telefono, «›», fonti ufficiali, informativa nel piè di pagina) prendono 13 px sopra e sotto di area di tocco; su un link in linea il bordo interno non sposta le righe, il testo resta identico. I comandi della mappa e dei simulatori almeno 44 px; la «i» resta piccola a vista ma si tocca su 44 px. Sul computer non cambia niente. */ @media(pointer:coarse){ a:not([class]):not(nav a):not(.gsch-p a){padding-top:13px;padding-bottom:13px} .leaflet-container.leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px} .gsm .gsm-ic{min-width:44px;min-height:44px} .tb,.lnkb{min-height:44px} .gs-i{position:relative}.gs-i::after{content:'';position:absolute;inset:-7px;border-radius:50%} /* DO-4: nessun campo sotto i 16 px sul telefono (sotto, Safari di iPhone ingrandisce la pagina al tocco: la regola di r. 971 resa generale; misurati a 14 px #gsconf .cnin e i consumi scritti a mano .cscr della pagina Azienda) */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important} } /* DO-8 (REPO-CHAT-09 #7): nella fila «Tutto GigaSolar» della home la card «La tua offerta» ha il titolo-link (la card tiene la sua riga di cattura): si legge come i titoli delle altre card, non come un link blu sottolineato */ .svc > b > a{color:inherit;text-decoration:none} /* DP-4 (REPO-CHAT-09 #13, committente dall'iPhone: «per passare dalla prima card alla seconda devo spingere più volte … torna a quella in focus … il cliente non deve essere limitato nello scorrere la pagina»): via lo scatto verticale della home (CW-1, r. 1059-1060, superata in questo punto). Le card restano, la pagina scorre libera. Gli scatti orizzontali dentro i caroselli (volantino .pcar, monete .gsd-g) non frenano la pagina e restano. */ @media(max-width:899px){html{scroll-snap-type:none}main.wrap>.cardv{scroll-snap-align:none}} /* DQ-2 / DQ-3 (REPO-CHAT-10, 17/10/2026): sul telefono, con un campo a fuoco (body.gs-tastiera, da gs-sim.js), barra e bolla della chat si tolgono, i pulsanti appiccicati di pagina 3 e dei consumi tornano normali, la pagina ha mezzo schermo di margine in fondo: gli ultimi campi salgono sopra la tastiera. */ @media(max-width:899px){body.gs-tastiera .tabbar,body.gs-tastiera .gsch-b{display:none}body.gs-tastiera{padding-bottom:50vh}body.gs-tastiera #fase3 .btns,body.gs-tastiera #gcresto .fx.gcfissa{position:static}} /* DS-3 (REPO-CHAT-10 #11): sotto l'asticella dei kW, una riga per superficie (Falda 1 (sud) · 15 di 15 · 5,9 kW) */ .gcfalde{display:flex;flex-direction:column;gap:3px;margin:6px 0 2px;font-size:var(--t-b);color:var(--mut)}.gcfalde[hidden]{display:none}.gcfalde .gcfalda b{color:var(--navy)}.gcfalde .gcfalda.ridotta b:last-child{color:var(--acqua-800-c)}.gcfalde .gcfalda.nota{font-size:var(--t-s);color:var(--mut)} /* DT-3 (REPO-CHAT-11 #5, regola §9.12) · LA (i) DEL SITO: l'informazione utile ma non essenziale sta dietro un cerchietto con la i; il testo è in data-tip e compare al passaggio del mouse o al tocco (gs-sim.js, stampo del suggerimento). Visibile 22 px, area del dito 44 (::after) */ .gsi{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:0 0 0 4px;padding:0;border:1.5px solid var(--navy);border-radius:50%;background:#fff;color:var(--navy);font:700 12px/1 inherit;font-family:inherit;vertical-align:middle;cursor:help;flex:none} .gsi::after{content:"";position:absolute;inset:-11px;border-radius:50%} .gsi:hover,.gsi:focus-visible{background:var(--navy);color:#fff;outline:none} /* DU-0: la nuvoletta del suggerimento (.gsm-tip, AZ-2) anche nelle pagine senza gs-sim.js: la scrive tip.js; stessa regola di gs-sim.js */ .gsm-tip{position:fixed;z-index:3000;left:0;top:0;max-width:240px;background:var(--navy,#1e3a5f);color:#fff;font-family:inherit;font-size:var(--t-s);font-weight:700;line-height:1.3;padding:5px 9px;border-radius:7px;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;opacity:0;transition:opacity .12s}.gsm-tip.on{opacity:1} .gsi.inl{margin-left:6px;vertical-align:-3px} /* DU-1: la (i) in coda a una riga di testo */ /* DV-1 (REPO-CHAT-11 #10): il fumetto con cui l'assistente si fa sentire, sopra la bolla «Scrivici qui»; niente ombre (DS-2) */ .gsch-fum{position:fixed;z-index:2000;max-width:min(300px,calc(100vw - 32px));margin:0;padding:10px 12px;border:1.5px solid var(--navy);border-radius:14px 14px 4px 14px;background:var(--carta);color:var(--navy);font:inherit;font-size:var(--t-b);line-height:1.35;text-align:left;cursor:pointer;animation:gsch-fum-in .25s ease-out}.gsch-fum .chi{display:block;font-size:var(--t-xs);font-weight:700;color:var(--mut);margin-bottom:3px}.gsch-fum:hover,.gsch-fum:focus-visible{border-color:var(--amber);outline:none}@keyframes gsch-fum-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.gsch-fum{animation:none}} .gsm-a{scroll-margin-top:0} /* DT-4 · EA-1: era 68px scritti a mano (testata di 58 + 10); ora la testata vera + 12 px, da scroll-padding-top e gsRientra (tip.js) */ /* DT-4 (REPO-CHAT-11 #5 «troppo rumore con spazi vuoti») · il riepilogo della tappa 1: una riga per superficie (nome breve, m², utili in piccolo, kW), il verdetto in due righe (gs-sim.js), sul telefono il pulsante a tutta larghezza e i due link uno accanto all'altro, più piccoli e vicini */ .gsm-l li .gsm-ln{flex:1 1 auto;min-width:0} .gsm-l li .gsm-ln small{font-size:var(--t-s);color:var(--mut)} .gsm-l li b{white-space:nowrap} @media(max-width:599px){#fase2 .fx{margin-top:10px;gap:4px 16px}#fase2 .fx .btn{flex:1 1 100%}#fase2 .fx .lnkb{font-size:var(--t-s);min-height:40px;padding:4px 0}#fase2 .fx .upk{flex-basis:auto;font-size:var(--t-s);padding:4px 0}}