/* ========================================================================== TurboFix - foglio di stile unico del sito (2026-07-29) Sostituisce gli stili sparsi dentro ogni pagina e il fondale 3D da 786 KB. Nessuna libreria, nessun font esterno a runtime: Inter e' ospitato qui. Un solo colore d'accento (il blu del marchio). Rosso e ambra compaiono solo dove servono a dire una cosa (il confronto sui falsi allarmi), mai per decorare. ========================================================================== */ @font-face{ font-family:"Inter var"; src:url("/assets/inter-latin.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; /* Latino di base + Latin-1: copre italiano, inglese, spagnolo e francese. */ unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ /* --- fondali --- */ --bg:#05080F; --bg2:#080D18; --sup:rgba(255,255,255,.038); --sup2:rgba(255,255,255,.06); --linea:rgba(255,255,255,.09); --linea2:rgba(255,255,255,.16); /* --- testo (contrasto verificato AA sul fondale scuro) --- */ --ink:#EDF2FB; --ink2:#AFBBD1; --ink3:#8492AC; /* --- accento unico --- */ --blu:#2E6BF0; --bluC:#7FACFF; --bluS:#1B49B8; /* --- gli accenti, e cosa vogliono dire --- Non sono decorazione: ognuno ha un mestiere e non lo fa mai fuori dal suo. Cosi' il sito e' vivo senza diventare un arlecchino. ciano = misurato, verificato, "va bene" indaco = le persone: recensioni, stelle, voci di chi lo usa corallo = il falso allarme, il cleaner disonesto Il blu resta il colore del prodotto e di tutto il resto. Niente giallo: bocciato da Eric il 29/07. */ --ciano:#35D6DD; --indaco:#9B8CFF; --corallo:#FF7E6B; --allarme:var(--corallo); /* vecchio nome, tenuto vivo */ --u:8px; --max:1180px; --prosa:820px; --curva:14px; --molla:cubic-bezier(.22,.61,.36,1); /* --- vecchi nomi, tenuti vivi --- Le pagine interne (guide, FAQ, privacy...) hanno ancora regole loro che usano questi nomi. Invece di riscriverle una per una, i nomi vecchi puntano ai nuovi: una riga qui invece di cento la' dentro. */ --blue:var(--blu); --blueL:var(--bluC); --cyan:#22C7DE; --line:var(--linea); --glass:var(--sup); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--bg); background-image: radial-gradient(720px 380px at 82% -8%,rgba(46,107,240,.10),transparent 62%), radial-gradient(620px 400px at -6% 108%,rgba(46,107,240,.07),transparent 62%); background-attachment:fixed; color:var(--ink); font-family:"Inter var",-apple-system,"Segoe UI",system-ui,Roboto,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* Niente varianti alternative dei glifi: le cifre restano quelle normali, quelle che si leggono senza pensarci. */ font-feature-settings:normal; font-variant-ligatures:common-ligatures; } img,video{max-width:100%;display:block} h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.028em;font-weight:700} p{margin:0} a{color:var(--bluC);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:3px solid var(--bluC);outline-offset:3px;border-radius:6px} ::selection{background:rgba(46,107,240,.42)} .num{font-variant-numeric:tabular-nums} .salta{position:absolute;left:-9999px;top:0;background:var(--blu);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200} .salta:focus{left:0} /* Gli elementi che entrano di lato partono fuori dallo schermo. "clip" li taglia senza creare un contenitore di scorrimento, quindi la pagina non si lascia trascinare e la barra alta continua a restare appiccicata. */ main{overflow-x:clip} .contenitore{max-width:var(--max);margin:0 auto;padding:0 24px} .prosa{max-width:var(--prosa);margin:0 auto;padding:0 24px} /* ---------------------------------------------------------------- barra alta */ .barra{ position:sticky;top:0;z-index:80; background:rgba(5,8,15,.72); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; } .barra.giu{border-bottom-color:var(--linea);background:rgba(5,8,15,.92)} .barra .contenitore{display:flex;align-items:center;gap:18px;height:66px} /* gap:0 e margine sull'icona: con "gap" il browser tratta "Turbo" e "Fix" come due elementi separati e infila uno spazio in mezzo al nome del marchio. */ .marchio{display:inline-flex;align-items:center;gap:0;font-weight:700;font-size:19px; color:var(--ink);letter-spacing:-.03em;text-decoration:none} .marchio:hover{text-decoration:none} .marchio span.f{color:var(--bluC)} /* Il marchio nuovo e' il TF libero, senza quadrato: e' largo (rapporto 3:2) e non va arrotondato, non essendo piu' una tessera. */ .marchio img{width:45px;height:30px;border-radius:0;margin-right:10px} /* ---------------------------------------------------------------- menu a tendina Su schermo largo: una barra di voci, e sotto ognuna un pannello che si apre passandoci sopra o premendo Invio. Da tastiera funziona tutto: Tab entra, Esc chiude, e il pannello non sparisce mentre ci si sta dentro. Sotto i 1000 px: un pulsante a tre righe apre un pannello a fisarmonica. */ .menu{margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:4px} .menu>li{list-style:none;position:relative} .menu a,.menu .apri{color:var(--ink2);font-size:15px;font-weight:500;text-decoration:none; background:none;border:0;font-family:inherit;cursor:pointer; display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:9px; transition:color .2s,background .2s} .menu a:hover,.menu .apri:hover,.menu .apri[aria-expanded="true"]{color:var(--ink); background:rgba(255,255,255,.06);text-decoration:none} .menu .apri:after{content:"";width:6px;height:6px;border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s;opacity:.75} .menu .apri[aria-expanded="true"]:after{transform:rotate(-135deg) translate(-3px,-3px)} .menu .btn-nav{margin-left:10px} .tendina{ position:absolute;top:calc(100% + 10px);left:0;min-width:268px;z-index:70; background:rgba(9,14,24,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--linea2);border-radius:14px;padding:8px; box-shadow:0 26px 60px rgba(0,0,0,.6); display:grid;gap:2px; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s,transform .22s,visibility .22s} /* Solo il passaggio del mouse, piu' la classe che mette il JavaScript. NIENTE :focus-within: teneva aperta la tendina finche' il pulsante era selezionato, quindi il secondo clic non la chiudeva mai. Con la tastiera ci pensa il JavaScript, che apre e chiude sul serio. */ .menu>li:hover>.tendina, .tendina.aperta{opacity:1;visibility:visible;transform:none} .tendina a{display:block;padding:10px 13px;font-size:14.5px;color:var(--ink2);border-radius:9px; line-height:1.35} .tendina a small{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px} .tendina a:hover{background:rgba(46,107,240,.16);color:#fff} .tendina a:hover small{color:#BFD2FF} .tendina a.ciano:hover{background:rgba(53,214,221,.14)} .tendina a.indaco:hover{background:rgba(155,140,255,.16)} /* Il pulsante "Scarica" resta in barra anche sul telefono, FUORI dal menu che si apre: con la nuova barra era finito dentro il pannello chiuso, cioe' a due tocchi di distanza invece di uno. E' il pulsante piu' importante del sito. */ /* Due classi, non una: ".btn-nav" da solo dichiara display:inline-flex piu' in basso nel foglio e vincerebbe, facendo comparire questo pulsante anche su schermo largo (dove c'e' gia' quello nel menu). */ .btn-nav.scarica-corto{display:none} @media(max-width:1000px){ .btn-nav.scarica-corto{display:inline-flex;margin-left:auto;padding:9px 16px;font-size:14.5px} .barra .contenitore{gap:10px} } @media(max-width:380px){.btn-nav.scarica-corto{padding:9px 12px;font-size:13.5px}} /* il pulsante a tre righe: esiste solo sui piccoli */ .tre-righe{display:none;margin-left:0;background:none;border:1px solid var(--linea2); border-radius:10px;width:42px;height:42px;cursor:pointer;padding:0; align-items:center;justify-content:center} .tre-righe span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px; position:relative;transition:background .2s} .tre-righe span:before,.tre-righe span:after{content:"";position:absolute;left:0;width:18px; height:2px;background:var(--ink);border-radius:2px;transition:transform .25s} .tre-righe span:before{top:-6px}.tre-righe span:after{top:6px} .tre-righe[aria-expanded="true"] span{background:transparent} .tre-righe[aria-expanded="true"] span:before{transform:translateY(6px) rotate(45deg)} .tre-righe[aria-expanded="true"] span:after{transform:translateY(-6px) rotate(-45deg)} @media(max-width:1000px){ .tre-righe{display:inline-flex} /* ATTENZIONE, difetto gia' pagato una volta (29/07): qui NON si puo' usare position:fixed. La barra ha "backdrop-filter", e un elemento con quel filtro diventa il riferimento per i figli fissi: il pannello si posizionava dentro la barra alta 66 px e si apriva alto 55 px, cioe' invisibile. Con "absolute" il riferimento e' la barra e va bene cosi': top:100% vuol dire "subito sotto la barra", e l'altezza la decide max-height. */ .menu{position:absolute;top:100%;left:0;right:0;margin:0;z-index:75; max-height:calc(100vh - 66px); background:rgba(5,8,15,.985);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); flex-direction:column;align-items:stretch;gap:0;padding:14px 20px 40px;overflow-y:auto; border-top:1px solid var(--linea);box-shadow:0 24px 60px rgba(0,0,0,.6); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .25s,transform .25s,visibility .25s} @supports (max-height:100dvh){.menu{max-height:calc(100dvh - 66px)}} .menu.aperto{opacity:1;visibility:visible;transform:none} .menu>li{border-bottom:1px solid var(--linea)} .menu>li:last-child{border-bottom:0;margin-top:18px} .menu a,.menu .apri{width:100%;justify-content:space-between;padding:15px 4px;font-size:17px} .menu .apri:after{margin-left:auto} .tendina{position:static;opacity:1;visibility:visible;transform:none; background:none;border:0;box-shadow:none;padding:0 0 10px 12px;min-width:0; display:none} /* Sul telefono la tendina si apre SOLO col tocco, mai col passaggio del dito. Il ":not(.aperta)" e' quello che conta: senza, questa riga vinceva anche sulla tendina aperta e la fisarmonica non si apriva mai. */ .menu>li:hover>.tendina:not(.aperta){display:none} .tendina.aperta{display:grid} .tendina a{font-size:15.5px;padding:11px 10px} .menu .btn-nav{margin:0;justify-content:center;font-size:16px;padding:14px 20px;min-height:50px} } /* ---------------------------------------------------------------- pulsanti */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:11px;font-weight:600;font-size:16.5px; border:1px solid transparent;cursor:pointer;min-height:50px;text-decoration:none; transition:transform .22s var(--molla),box-shadow .22s,background .22s,border-color .22s,color .22s; } .btn:hover{text-decoration:none} .btn svg{flex:0 0 auto} .btn.pri{background:linear-gradient(135deg,#3E7BF7,var(--bluS));color:#fff; box-shadow:0 8px 26px rgba(46,107,240,.34)} .btn.pri:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(46,107,240,.44)} .btn.pri:active{transform:translateY(0)} .btn.sec{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--linea2)} .btn.sec:hover{background:rgba(255,255,255,.09);border-color:var(--bluC);transform:translateY(-2px)} .btn.pic{padding:9px 18px;font-size:14.5px;min-height:40px;border-radius:9px} /* Il pulsante della barra alta ha un nome tutto suo: alcune pagine interne definiscono ancora un ".btn" loro, e vincerebbe su questo. */ .btn-nav{display:inline-flex;align-items:center;justify-content:center; padding:9px 18px;border-radius:9px;font-weight:600;font-size:14.5px;min-height:40px; background:linear-gradient(135deg,#3E7BF7,var(--bluS));color:#fff;text-decoration:none; box-shadow:0 8px 22px rgba(46,107,240,.32); transition:transform .22s var(--molla),box-shadow .22s} .btn-nav:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(46,107,240,.44); text-decoration:none;color:#fff} /* ---------------------------------------------------------------- pezzi comuni */ .pastiglia{ display:inline-flex;align-items:center;gap:9px; font-size:13px;font-weight:600;letter-spacing:.01em;color:#CFE0FF; background:rgba(46,107,240,.14);border:1px solid rgba(127,172,255,.32); padding:7px 15px;border-radius:100px; } .puntino{width:7px;height:7px;border-radius:50%;background:var(--bluC); box-shadow:0 0 0 0 rgba(127,172,255,.7);animation:pulsa 2.6s infinite} @keyframes pulsa{ 0%{box-shadow:0 0 0 0 rgba(127,172,255,.6)} 70%{box-shadow:0 0 0 9px rgba(127,172,255,0)} 100%{box-shadow:0 0 0 0 rgba(127,172,255,0)} } /* Maiuscoletto con spaziatura contenuta: allargato troppo prende l'aria da telescrivente, che e' proprio il look da evitare. Ogni sezione ha il suo accento: scendendo, il colore cambia. */ .occhiello{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--bluC);margin-bottom:14px;display:flex;align-items:center;gap:10px} .occhiello:before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor; opacity:.65;flex:0 0 auto} .occhiello.ciano{color:var(--ciano)} .occhiello.indaco{color:var(--indaco)} .occhiello.corallo{color:var(--corallo)} h2{font-size:clamp(27px,3.6vw,41px)} h3{font-size:19.5px;font-weight:650} .guida{font-size:18px;color:var(--ink2);max-width:36em;margin-top:16px} section{padding:calc(var(--u)*13) 0;position:relative} @media(max-width:900px){section{padding:calc(var(--u)*8) 0}} .riga-sep{border-top:1px solid var(--linea)} /* La testata delle pagine interne: piu' bassa dell'apertura della home, ma con la stessa aria. Il fondo si schiarisce appena, cosi' la pagina "comincia". */ .testata{padding:calc(var(--u)*12) 0 calc(var(--u)*9); background: radial-gradient(60% 100% at 12% 0%,rgba(46,107,240,.14),transparent 70%), linear-gradient(180deg,rgba(255,255,255,.028),transparent 70%)} .testata h1{font-size:clamp(33px,4.6vw,52px);font-weight:750;letter-spacing:-.032em;margin-bottom:18px} .testata .guida{font-size:18.5px;max-width:40em} .testata .azioni{margin-top:30px} @media(max-width:900px){.testata{padding:calc(var(--u)*8) 0 calc(var(--u)*6)}} /* Il colore della testata cambia da pagina a pagina: e' quello che da' a ognuna una faccia sua senza cambiare impianto. */ .testata.ciano{background: radial-gradient(60% 100% at 12% 0%,rgba(53,214,221,.13),transparent 70%), linear-gradient(180deg,rgba(255,255,255,.028),transparent 70%)} .testata.indaco{background: radial-gradient(60% 100% at 12% 0%,rgba(155,140,255,.15),transparent 70%), linear-gradient(180deg,rgba(255,255,255,.028),transparent 70%)} .testata.corallo{background: radial-gradient(60% 100% at 12% 0%,rgba(255,126,107,.13),transparent 70%), linear-gradient(180deg,rgba(255,255,255,.028),transparent 70%)} .testata.compatta{padding:calc(var(--u)*9) 0 calc(var(--u)*6)} .testata.compatta h1{font-size:clamp(29px,3.6vw,40px)} /* Le briciole di pane: dove sono e come torno indietro. */ .briciole{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px; color:var(--ink3);margin-bottom:20px} .briciole a{color:var(--ink3);text-decoration:none} .briciole a:hover{color:var(--bluC);text-decoration:none} .briciole span[aria-hidden]{opacity:.5} /* ---------------------------------------------------------------- corpo delle pagine Il testo lungo delle guide: una colonna sola, larga da leggere, coi titoli marcati dall'accento della pagina. */ .wrap h2{position:relative;padding-left:18px} .wrap h2:before{content:"";position:absolute;left:0;top:.34em;width:5px;height:.86em; border-radius:3px;background:var(--bluC);opacity:.85} .ciano .wrap h2:before,.wrap.ciano h2:before{background:var(--ciano)} .indaco .wrap h2:before,.wrap.indaco h2:before{background:var(--indaco)} .corallo .wrap h2:before,.wrap.corallo h2:before{background:var(--corallo)} .wrap>h2:first-child{margin-top:0} /* La chiusura uguale su tutte le pagine interne: si arriva in fondo e si sa dove andare. */ .chiusura{border-top:1px solid var(--linea); background:linear-gradient(180deg,rgba(46,107,240,.06),transparent)} .chiusura .contenitore{max-width:var(--prosa)} .chiusura h2{font-size:clamp(24px,3vw,32px);margin-bottom:12px} .chiusura p{color:var(--ink2);font-size:16.5px;max-width:34em} .chiusura .azioni{margin-top:26px} /* ---------------------------------------------------------------- schede */ .griglia{display:grid;gap:22px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}} .scheda{ background:var(--sup);border:1px solid var(--linea);border-radius:var(--curva); padding:28px; transition:transform .35s var(--molla),border-color .35s,background .35s,box-shadow .35s; } .scheda:hover{transform:translateY(-4px);border-color:rgba(127,172,255,.34); background:var(--sup2);box-shadow:0 20px 46px rgba(0,0,0,.42)} .scheda h3{margin-bottom:10px;color:var(--ink)} .scheda p{color:var(--ink2);font-size:15.5px} /* Una scheda puo' essere tutta un link: allora si comporta da link ma non si colora e non si sottolinea come un link normale. */ a.scheda{display:flex;flex-direction:column;text-decoration:none;color:inherit} a.scheda:hover{text-decoration:none} a.scheda p{flex:1} .scheda .vai{display:inline-flex;align-items:center;gap:7px;margin-top:16px; font-size:14px;font-weight:600;color:var(--bluC)} .scheda.ciano .vai{color:var(--ciano)} .scheda.indaco .vai{color:var(--indaco)} .scheda.corallo .vai{color:var(--corallo)} .scheda .vai:after{content:"";width:7px;height:7px;border-top:2px solid currentColor; border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .25s} a.scheda:hover .vai:after{transform:rotate(45deg) translate(2px,-2px)} .icona{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px; background:rgba(46,107,240,.16);border:1px solid rgba(127,172,255,.22)} .icona svg{width:22px;height:22px;stroke:var(--bluC);fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} /* Le famiglie di colore delle schede. Una sezione, un accento. */ .scheda.ciano .icona{background:rgba(53,214,221,.13);border-color:rgba(53,214,221,.28)} .scheda.ciano .icona svg{stroke:var(--ciano)} .scheda.ciano:hover{border-color:rgba(53,214,221,.4)} .scheda.indaco .icona{background:rgba(155,140,255,.14);border-color:rgba(155,140,255,.3)} .scheda.indaco .icona svg{stroke:var(--indaco)} .scheda.indaco:hover{border-color:rgba(155,140,255,.42)} .scheda.corallo .icona{background:rgba(255,126,107,.12);border-color:rgba(255,126,107,.26)} .scheda.corallo .icona svg{stroke:var(--corallo)} .scheda.corallo:hover{border-color:rgba(255,126,107,.38)} /* una riga di colore in cima alla scheda, che si accende passandoci sopra */ .scheda{position:relative;overflow:hidden} .scheda:after{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,currentColor,transparent); opacity:0;transition:opacity .35s;color:var(--bluC)} .scheda.ciano:after{color:var(--ciano)} .scheda.indaco:after{color:var(--indaco)} .scheda.corallo:after{color:var(--corallo)} .scheda:hover:after{opacity:.85} /* ========================================================================== L'ASSISTENTE CHE SI DIMOSTRA DA SOLO Il riquadro si scrive la domanda da solo, la manda, e mostra la risposta. Poi passa alla coppia successiva, in giro. Le domande e le risposte sono QUELLE VERE dell'applicazione: qui non si inventa niente, si rievoca. Ed e' dichiarato: c'e' scritto "dimostrazione". ========================================================================== */ .demo-eti{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ink3);border:1px solid var(--linea); border-radius:100px;padding:3px 9px} .demo-flusso{display:grid;gap:14px;align-content:start} .demo-flusso:empty{min-height:0} .demo-flusso>*{animation:entra-bolla .45s cubic-bezier(.16,.84,.3,1) both} @keyframes entra-bolla{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .demo-flusso .via{animation:esce-bolla .3s ease-in forwards} @keyframes esce-bolla{to{opacity:0;transform:translateY(-8px)}} /* la casella in cui "si scrive" */ .demo-casella{display:flex;align-items:center;gap:10px;margin-top:16px; border:1px solid var(--linea2);background:rgba(0,0,0,.28);border-radius:11px; padding:11px 13px;font-size:14px;color:var(--ink);min-height:46px} .demo-casella .vuoto{color:var(--ink3)} .demo-cursore{display:inline-block;width:2px;height:1.05em;background:var(--bluC); vertical-align:-.16em;margin-left:1px;animation:batte 1s steps(1) infinite} @keyframes batte{0%,49%{opacity:1}50%,100%{opacity:0}} .demo-casella.manda .demo-cursore{opacity:0} .demo-invio{margin-left:auto;display:grid;place-items:center;width:30px;height:30px; border-radius:8px;background:linear-gradient(135deg,#3E7BF7,var(--bluS));flex:0 0 auto; transition:transform .18s} .demo-casella.manda .demo-invio{transform:scale(.86)} .demo-invio svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} /* i tre puntini mentre "pensa" */ .demo-pensa{display:inline-flex;gap:5px;align-items:center;padding:6px 2px} .demo-pensa i{width:6px;height:6px;border-radius:50%;background:var(--bluC);opacity:.5; animation:pensa 1.1s infinite} .demo-pensa i:nth-child(2){animation-delay:.16s} .demo-pensa i:nth-child(3){animation-delay:.32s} @keyframes pensa{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} /* ---------------------------------------------------------------- i due casi Terza disposizione, ed e' quella giusta. 1. due riquadri larghi affiancati senza regole di altezza: si scrivevano addosso e ballavano mentre la risposta cresceva; 2. ragionamento a sinistra e prove impilate a destra: la colonna del testo finiva a meta' e sotto restava mezzo schermo vuoto. Adesso l'introduzione sta in alto come in tutte le altre sezioni del sito, e i due casi stanno sotto affiancati, larghi uguali e alti uguali. Sono le due meta' dello stesso discorso: devono pesare uguale anche a guardarle. */ .intro-casi{max-width:730px} .due-casi{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;margin-top:46px} @media(max-width:1040px){.due-casi{grid-template-columns:1fr;gap:34px;margin-top:38px}} /* stessa altezza: la scatola si allunga, la conversazione dentro riempie */ .caso{display:flex;flex-direction:column} .caso .conv{flex:1;display:flex;flex-direction:column} .caso .conv-corpo{flex:1;display:flex;flex-direction:column} /* il flusso prende lo spazio che avanza, la casella "Chiedi" resta in fondo */ .caso .demo-flusso{flex:1;min-height:250px;align-content:start} @media(max-width:1040px){.caso .demo-flusso{min-height:210px}} @media(max-width:520px){.caso .demo-flusso{min-height:270px}} .caso .demo-casella{margin-top:auto} .caso .etichetta{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;margin-bottom:13px} .caso .etichetta:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.06)} .caso.sa .etichetta{color:var(--ciano)} .caso.nonsa .etichetta{color:var(--corallo)} /* Il bordo colorato dice a colpo d'occhio quale dei due stai guardando, senza bisogno di leggere l'etichetta. */ .caso.sa .conv{border-color:rgba(53,214,221,.26)} .caso.nonsa .conv{border-color:rgba(255,126,107,.24)} .caso .conv-testa .t{font-size:12.5px} /* Due riquadri affiancati significa meta' larghezza: il testo dentro va stretto di conseguenza, altrimenti le righe diventano lunghissime. */ .caso .conv-corpo{padding:20px 18px 18px;gap:14px} .caso .dom{font-size:14.5px} .caso .ris p{font-size:14.5px;line-height:1.62} .caso .dato .v{font-size:14px} /* Dentro la finestra dell'app le bolle devono somigliare a QUELLE DELL'APP, non a quelle del sito: il JavaScript ne genera un tipo solo, qui si rivestono. */ .app .demo-casella{margin-top:0;font-size:13px;border-radius:11px} .app .demo-flusso{gap:12px} .app .demo-flusso .dom{justify-self:end;max-width:78%;background:rgba(46,107,240,.20); border:1px solid rgba(127,172,255,.28);border-radius:13px 13px 4px 13px; padding:10px 14px;font-size:13px;color:#DDE9FF;margin:0} .app .demo-flusso .ris{font-size:13.5px;color:var(--ink);line-height:1.6;max-width:52em; display:grid;gap:12px} .app .demo-flusso .ris p{margin:0} .app .demo-flusso .ris b{color:#fff;font-weight:650} .app .demo-flusso .dato{border:1px solid rgba(127,172,255,.26);background:rgba(46,107,240,.10); border-radius:11px;padding:10px 13px;margin:0} .app .demo-flusso .dato .et{font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--bluC)} .app .demo-flusso .dato .v{font-size:13px;color:var(--ink2);margin-top:3px; font-variant-numeric:tabular-nums} .app .demo-flusso .bottoncini{margin:0} .app .demo-flusso .bottoncino{font-size:12.5px;padding:9px 16px;border-radius:9px} .app .demo-flusso .bottoncino.esegue{background:linear-gradient(135deg,#3E7BF7,var(--bluS)); border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(46,107,240,.30)} /* il testo alternativo per chi usa lo screen reader: c'e' ma non si vede */ .solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------------------------------------------------------------- sfondi video */ .fondo{position:relative;overflow:hidden;isolation:isolate} .fondo picture{display:contents} .fondo video,.fondo img.fondo-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; opacity:0;transition:opacity 1.1s ease; /* La scala in piu' serve al parallasse: spostando il fondo non deve mai comparire il bordo sotto. */ transform:translate3d(0,var(--par,0px),0) scale(1.14); will-change:transform} .fondo video.acceso,.fondo img.fondo-img.acceso{opacity:1} .velo{position:absolute;inset:0;z-index:-1;pointer-events:none} /* IL VIDEO SI DEVE VEDERE (richiesta di Eric del 29/07 sera). Quindi niente coperta scura su tutto il filmato: il buio sta SOLO dietro la colonna del testo, e si dissolve prima della meta' dello schermo. Da li' in poi il video e' pulito. 1. scrim di sinistra - si spegne al 62%, dove il testo e' finito; 2. attacco sopra e sotto - poco, giusto per non staccare dalla pagina. */ .velo.sinistra{background: linear-gradient(92deg,rgba(5,8,15,.68) 0%,rgba(5,8,15,.52) 28%,rgba(5,8,15,.20) 50%,rgba(5,8,15,.04) 66%,transparent 76%), linear-gradient(180deg,rgba(5,8,15,.34) 0%,rgba(5,8,15,0) 18%,rgba(5,8,15,0) 78%,var(--bg) 100%)} .velo.pieno{background: linear-gradient(180deg,var(--bg) 0%,rgba(5,8,15,.62) 18%,rgba(5,8,15,.62) 82%,var(--bg) 100%), linear-gradient(90deg,rgba(5,8,15,.86) 0%,rgba(5,8,15,.62) 46%,rgba(5,8,15,.40) 100%)} /* Sul telefono il testo sta SOPRA al video, non di fianco: li' lo scrim non basta e serve una velatura verticale. Resta comunque piu' leggera di prima, e la conversazione ha il suo pannello opaco. */ @media(max-width:900px){ .velo.sinistra{background: linear-gradient(180deg,rgba(5,8,15,.62) 0%,rgba(5,8,15,.40) 20%,rgba(5,8,15,.54) 60%,var(--bg) 100%)} .velo.pieno{background: linear-gradient(180deg,var(--bg) 0%,rgba(5,8,15,.80) 14%,rgba(5,8,15,.80) 86%,var(--bg) 100%)} } /* Pannello morbido dietro alle sole parole dell'apertura: e' questo che tiene il contrasto quando sotto passa un fotogramma chiaro, senza spegnere il video. Non ha bordi ne' angoli: e' un alone, non un riquadro. */ .apertura .parole{position:relative} .apertura .parole:before{content:"";position:absolute;z-index:-1; inset:-40px -70px -40px -60px; background:radial-gradient(70% 62% at 34% 50%,rgba(5,8,15,.60),rgba(5,8,15,.26) 62%,transparent 82%); filter:blur(6px);pointer-events:none} @media(max-width:900px){.apertura .parole:before{inset:-24px -24px -24px -24px}} /* ---------------------------------------------------------------- apertura (hero) Si chiama "apertura" e non "hero" perche' backup.html usa gia' una classe .hero sua per un riquadro in evidenza: due classi con lo stesso nome e uno dei due si rompe. */ .apertura{padding:calc(var(--u)*14) 0 calc(var(--u)*13);min-height:min(88vh,860px);display:flex;align-items:center} .apertura .contenitore{width:100%} .apertura-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center} @media(max-width:1040px){.apertura{padding:calc(var(--u)*9) 0 calc(var(--u)*8);min-height:0} .apertura-grid{grid-template-columns:1fr;gap:40px}} .apertura h1{font-size:clamp(37px,5.4vw,63px);font-weight:750;margin:22px 0 20px;letter-spacing:-.035em} /* La parte colorata del titolo: se il browser non sa ritagliare lo sfondo dentro il testo, resta un azzurro pieno. Senza questa precauzione il titolo sparirebbe. */ .apertura h1 .ev{color:var(--bluC)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .apertura h1 .ev{background:linear-gradient(96deg,#8FBAFF 0%,var(--bluC) 40%,#3E7BF7 100%); -webkit-background-clip:text;background-clip:text;color:transparent} } .apertura .sotto{font-size:19px;color:var(--ink2);max-width:33em} .azioni{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:32px} .postilla{font-size:14px;color:var(--ink3);margin-top:16px} /* ---------------------------------------------------------------- la conversazione */ .conv{ background:linear-gradient(180deg,rgba(12,18,32,.92),rgba(7,11,20,.96)); border:1px solid var(--linea2);border-radius:18px;overflow:hidden; box-shadow:0 36px 90px rgba(0,0,0,.55); } .conv-testa{display:flex;align-items:center;gap:10px;padding:13px 18px; border-bottom:1px solid var(--linea);background:rgba(255,255,255,.03)} .conv-testa .tf{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#3E7BF7,var(--bluS)); display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;letter-spacing:-.04em} .conv-testa .t{font-size:13px;color:var(--ink3);font-weight:500} .conv-corpo{padding:22px 20px 20px;display:grid;gap:16px} .dom{justify-self:end;max-width:88%;background:rgba(46,107,240,.20);border:1px solid rgba(127,172,255,.28); border-radius:14px 14px 4px 14px;padding:11px 16px;font-size:15.5px;color:#DDE9FF} .ris{max-width:96%;font-size:15.5px;color:var(--ink);line-height:1.6} .ris b{color:#fff;font-weight:650} .dato{ margin-top:12px;border:1px solid rgba(127,172,255,.26);border-radius:11px; background:rgba(46,107,240,.09);padding:11px 14px; } .dato .et{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--bluC);text-transform:uppercase} .dato .v{font-size:14.5px;color:var(--ink2);margin-top:4px;font-variant-numeric:tabular-nums} .dato.fatto{border-color:rgba(127,172,255,.34);background:rgba(46,107,240,.14)} .bottoncini{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px} .bottoncino{font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:9px; border:1px solid var(--linea2);color:var(--ink2);background:rgba(255,255,255,.04)} .bottoncino.esegue{border-color:rgba(127,172,255,.45);color:#DDE9FF;background:rgba(46,107,240,.18)} /* ---------------------------------------------------------------- nastro scorrevole Una striscia di fatti che scorre da destra a sinistra, senza fine. Il contenuto sta scritto due volte identico: l'animazione arriva a meta' (-50%) e ricomincia, quindi il punto di giunzione non si vede mai. Si ferma passandoci sopra col mouse, cosi' chi vuole leggere puo' leggere. */ .nastro{position:relative;overflow:hidden;padding:15px 0; border-top:1px solid var(--linea);border-bottom:1px solid var(--linea); background:linear-gradient(90deg,rgba(46,107,240,.09),rgba(53,214,221,.05) 45%,rgba(155,140,255,.07)); -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .nastro-pista{display:flex;width:max-content;animation:scorri 42s linear infinite} .nastro:hover .nastro-pista,.nastro:focus-within .nastro-pista{animation-play-state:paused} .nastro-gruppo{display:flex;align-items:center;gap:34px;padding-right:34px} .nastro-voce{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap; font-size:15.5px;color:var(--ink2)} .nastro-voce b{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--bluC); font-variant-numeric:tabular-nums} .nastro-voce.buono b{color:var(--ciano)} .nastro-sep{color:var(--indaco);opacity:.8;font-size:17px;line-height:1} @keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------------------------------------------------------------- banner recensioni Le recensioni scorrono come il nastro dei fatti, ma piu' lente: qui c'e' da leggere. Stesso meccanismo (contenuto doppio, animazione fino a meta'). Sono l'unico posto dove parlano le persone: per questo l'indaco e non il blu. */ .rec-nastro .nastro-pista{animation-duration:64s} .rec-gruppo{display:flex;align-items:stretch;gap:20px;padding-right:20px} .rec-nastro .virgolette{width:340px;flex:0 0 340px} @media(max-width:520px){.rec-nastro .virgolette{width:270px;flex:0 0 270px}} /* ---------------------------------------------------------------- fascia numeri */ .numeri{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--bg2)} .numeri .contenitore{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:40px;padding-bottom:40px} @media(max-width:780px){.numeri .contenitore{grid-template-columns:repeat(2,1fr);gap:24px}} /* I numeri della fascia. Prima ogni cifra viveva in una colonnina larga .62ch: piu' stretta della cifra stessa, quindi i glifi si accavallavano e "0 EUR" si leggeva "C EUR". Adesso e' testo normale che sale da zero: nessuna larghezza forzata, cifre a passo fisso (tabular) cosi' il numero non balla mentre conta. */ .numero .n{font-size:clamp(31px,3.4vw,38px);font-weight:700;letter-spacing:-.015em; color:var(--bluC);line-height:1.15; font-family:"Inter var",-apple-system,"Segoe UI",system-ui,sans-serif; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; white-space:nowrap} .numero .d{font-size:14.5px;color:var(--ink2);margin-top:6px;line-height:1.45} /* Quattro numeri, quattro accenti: la fascia si legge come una fila di fatti diversi, non come un blocco unico di blu. */ .numero.verificato .n{color:var(--ciano)} .numero.persone .n{color:var(--indaco)} .conta{display:inline-block;min-width:1.2ch;text-align:right} /* ---------------------------------------------------------------- domande d'esempio */ .esempi{display:grid;grid-template-columns:260px 1fr;gap:26px;margin-top:44px;align-items:start} @media(max-width:900px){.esempi{grid-template-columns:1fr}} .linguette{display:grid;gap:8px} @media(max-width:900px){.linguette{grid-template-columns:1fr;gap:7px}} .linguetta{ text-align:left;width:100%;cursor:pointer;font-family:inherit; background:var(--sup);border:1px solid var(--linea);border-radius:11px; padding:13px 16px;color:var(--ink2);font-size:15px;font-weight:550; transition:border-color .25s,background .25s,color .25s; } .linguetta:hover{border-color:var(--linea2);color:var(--ink)} .linguetta[aria-selected="true"]{border-color:rgba(127,172,255,.5);background:rgba(46,107,240,.16);color:#fff} .pannello[hidden]{display:none} /* Altezza minima uguale per tutti i pannelli: cambiando domanda la pagina non salta. */ .pannello{min-height:330px} @media(max-width:900px){.pannello{min-height:0}} /* ---------------------------------------------------------------- confronto onesta' */ .confronto{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px} @media(max-width:780px){.confronto{grid-template-columns:1fr}} .colonna{border-radius:var(--curva);padding:28px;border:1px solid var(--linea);background:var(--sup)} .colonna.loro{border-color:rgba(240,102,90,.26);background:rgba(240,102,90,.05)} .colonna.noi{border-color:rgba(127,172,255,.32);background:rgba(46,107,240,.08)} .colonna .cap{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px} .colonna.loro .cap{color:var(--allarme)} .colonna.noi .cap{color:var(--bluC)} .finto{font-size:clamp(28px,4vw,40px);font-weight:750;color:var(--allarme);letter-spacing:-.03em; font-variant-numeric:tabular-nums} .vero{font-size:clamp(23px,3vw,30px);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1.22} .colonna ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px} .colonna li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink2)} .colonna li svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .colonna.loro li svg{stroke:var(--allarme)} .colonna.noi li svg{stroke:var(--bluC)} /* ---------------------------------------------------------------- elenco spuntato */ /* Le spunte dicono "questo e' garantito": ciano, come tutto cio' che e' verificato. */ .spunte{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px} .spunte li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink2)} .spunte svg{width:20px;height:20px;stroke:var(--ciano);fill:none;stroke-width:2.4;flex:0 0 auto;margin-top:3px} /* Le schede della promessa: quello che il programma NON fara' mai. Ciano. */ .scheda.garanzia .icona{background:rgba(53,214,221,.13);border-color:rgba(53,214,221,.28)} .scheda.garanzia .icona svg{stroke:var(--ciano)} .scheda.garanzia:hover{border-color:rgba(53,214,221,.4)} .scheda.garanzia:after{color:var(--ciano)} /* ========================================================================== MOCKUP DELL'APP Non sono immagini: e' la finestra di TurboFix ricostruita in HTML e CSS. Percio' resta nitida a qualunque ingrandimento, si legge con lo screen reader, pesa qualche riga di testo e non va rifatta a ogni ritocco. I testi e i numeri sono quelli veri dell'applicazione. ========================================================================== */ .app{ border-radius:16px;overflow:hidden; background:linear-gradient(180deg,#0C1220,#070B14); border:1px solid var(--linea2); box-shadow:0 30px 70px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.04) inset; font-size:14px; } .app-barra{display:flex;align-items:center;gap:9px;padding:11px 14px; background:rgba(255,255,255,.035);border-bottom:1px solid var(--linea)} .app-barra .tf{width:20px;height:20px;border-radius:6px;display:grid;place-items:center; background:linear-gradient(135deg,#3E7BF7,var(--bluS));color:#fff;font-size:9px;font-weight:800; letter-spacing:-.04em} .app-barra .nome{font-size:12.5px;color:var(--ink3);font-weight:500} .app-barra .pallini{margin-left:auto;display:flex;gap:6px} .app-barra .pallini i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);display:block} .app-corpo{display:grid;grid-template-columns:132px 1fr} @media(max-width:560px){.app-corpo{grid-template-columns:1fr}.app-menu{display:none}} .app-menu{background:rgba(255,255,255,.022);border-right:1px solid var(--linea);padding:12px 0} .app-menu .voce{display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:12.5px;color:var(--ink3)} .app-menu .voce.on{color:#fff;font-weight:600;background:rgba(46,107,240,.16); box-shadow:inset 3px 0 0 var(--bluC)} .app-menu .voce svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .app-schermo{padding:20px 22px 22px;display:grid;gap:16px;align-content:start} .app-titolo{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em} .app-sotto{font-size:13px;color:var(--ink2);line-height:1.55;max-width:46em} .app-saluto{border:1px solid rgba(127,172,255,.24);background:rgba(46,107,240,.09); border-radius:12px;padding:13px 15px;font-size:13px;color:var(--ink);line-height:1.55} .app-saluto b{color:#fff} .app-suggerimenti{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} @media(max-width:620px){.app-suggerimenti{grid-template-columns:repeat(2,1fr)}} .app-sugg{border:1px solid var(--linea);background:rgba(255,255,255,.04);border-radius:10px; padding:10px 12px;font-size:12.5px;color:var(--ink2)} .app-casella{display:flex;align-items:center;gap:10px;border:1px solid var(--linea2); background:rgba(0,0,0,.28);border-radius:11px;padding:11px 13px;font-size:13px;color:var(--ink3)} .app-casella .invio{margin-left:auto;display:grid;place-items:center;width:30px;height:30px; border-radius:8px;background:linear-gradient(135deg,#3E7BF7,var(--bluS))} .app-casella .invio svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .app-dom{justify-self:end;max-width:78%;background:rgba(46,107,240,.20); border:1px solid rgba(127,172,255,.28);border-radius:13px 13px 4px 13px; padding:10px 14px;font-size:13px;color:#DDE9FF} .app-ris{font-size:13.5px;color:var(--ink);line-height:1.6;max-width:52em} .app-ris b{color:#fff;font-weight:650} .app-dato{border:1px solid rgba(127,172,255,.26);background:rgba(46,107,240,.10); border-radius:11px;padding:10px 13px} .app-dato .et{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bluC)} .app-dato .v{font-size:13px;color:var(--ink2);margin-top:3px;font-variant-numeric:tabular-nums} .app-btn{display:inline-flex;align-items:center;gap:8px;align-self:start;justify-self:start; background:linear-gradient(135deg,#3E7BF7,var(--bluS));color:#fff;font-weight:600;font-size:12.5px; padding:9px 16px;border-radius:9px;box-shadow:0 6px 18px rgba(46,107,240,.30)} .app-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .app-btn.vuoto{background:rgba(255,255,255,.05);border:1px solid var(--linea2);box-shadow:none;color:var(--ink)} /* Le due finestre affiancate hanno contenuti di lunghezza diversa: senza questo una finisce piu' in alto dell'altra e le didascalie non sono in riga. */ /* ---------------------------------------------------------------- pagina Novita' */ .ver-riga{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px} .ver-riga h3{margin:0;font-size:20px} .ver-riga .quando{font-size:13.5px;color:var(--ink3)} /* L'ULTIMA VERSIONE STA DA SOLA (14/08/2026) In cima alla pagina Novita' c'e' una scheda sola, quella nuova: e' la cosa che interessa a chi arriva. La scheda respira, ma il testo NON si allarga fino a 1.180 px: righe da centotrenta caratteri non si leggono, si scansionano. */ .ver-ultima{padding:34px 36px;max-width:880px} .ver-ultima .ver-riga h3{font-size:25px} .ver-ultima .punti-ver{max-width:75ch} .ver-ultima .punti-ver li{font-size:16.5px} @media(max-width:680px){.ver-ultima{padding:24px 22px} .ver-ultima .ver-riga h3{font-size:22px}} /* dentro un soffietto ci puo' stare anche un elenco (lo storico delle versioni) */ .domande details>ul{padding:0 0 18px 21px;margin:0} .domande details .punti-ver{display:grid;gap:10px} .punti-ver{list-style:none;padding:0;margin:0;display:grid;gap:11px} .punti-ver li{position:relative;padding-left:20px;font-size:15.5px;color:var(--ink2);line-height:1.55} .punti-ver li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px; border-radius:50%;background:var(--bluC);opacity:.8} .scheda.indaco .punti-ver li:before{background:var(--indaco)} .scheda.ciano .punti-ver li:before{background:var(--ciano)} .punti-ver li b{color:#fff;font-weight:650} .punti-ver.storico li b{color:var(--ciano);font-variant-numeric:tabular-nums} .punti-ver.storico li{font-size:15px} figure.scatto{margin:0;display:flex;flex-direction:column} figure.scatto .app{flex:1} figure.scatto figcaption{color:var(--ink3);font-size:14px;margin-top:14px} /* ---------------------------------------------------------------- le quattro garanzie Erano nella vecchia home e sono fra le cose che convincono di piu': tornano, con l'aria nuova. */ .garanzie{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:900px){.garanzie{grid-template-columns:repeat(2,1fr);gap:14px}} @media(max-width:480px){.garanzie{grid-template-columns:1fr}} .garanzia{display:flex;gap:13px;align-items:flex-start; border:1px solid var(--linea);border-radius:var(--curva);padding:18px 20px; background:var(--sup);transition:border-color .3s,background .3s} .garanzia:hover{border-color:rgba(53,214,221,.35);background:var(--sup2)} .garanzia svg{width:22px;height:22px;flex:0 0 auto;margin-top:2px; stroke:var(--ciano);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .garanzia b{display:block;color:#fff;font-size:15.5px;font-weight:650;margin-bottom:3px} .garanzia span{font-size:14px;color:var(--ink2);line-height:1.5} /* ---------------------------------------------------------------- la tabella del confronto Due colonne affiancate: da una parte come fanno gli altri, dall'altra come facciamo noi. Su schermo stretto diventa una coppia sotto l'altra, con l'etichetta davanti, cosi' si continua a capire chi dice cosa. */ .confronto-tab{margin-top:40px;border:1px solid var(--linea);border-radius:var(--curva);overflow:hidden} .confronto-tab .riga{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--linea)} .confronto-tab .riga:last-child{border-bottom:0} .confronto-tab .cella{padding:16px 20px;font-size:15.5px;display:flex;gap:11px;align-items:flex-start} .confronto-tab .cella:first-child{border-right:1px solid var(--linea); color:var(--ink3);background:rgba(255,126,107,.045)} .confronto-tab .cella:last-child{color:var(--ink)} .confronto-tab .capo{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; background:rgba(255,255,255,.03)} .confronto-tab .capo:first-child{color:var(--corallo)} .confronto-tab .capo:last-child{color:var(--ciano)} .confronto-tab .cella svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px; fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round} .confronto-tab .cella:first-child svg{stroke:var(--corallo)} .confronto-tab .cella:last-child svg{stroke:var(--ciano)} @media(max-width:720px){ .confronto-tab .riga{grid-template-columns:1fr} .confronto-tab .cella:first-child{border-right:0;border-bottom:1px solid var(--linea)} .confronto-tab .capo{display:none} } /* ---------------------------------------------------------------- rimuove / non fara' mai */ .due-liste{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px} @media(max-width:780px){.due-liste{grid-template-columns:1fr}} .lista-si,.lista-no{border-radius:var(--curva);padding:26px;border:1px solid var(--linea)} .lista-si{border-color:rgba(53,214,221,.28);background:rgba(53,214,221,.05)} .lista-no{border-color:rgba(255,126,107,.26);background:rgba(255,126,107,.05)} .lista-si .cap,.lista-no .cap{font-size:12.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;margin-bottom:16px} .lista-si .cap{color:var(--ciano)} .lista-no .cap{color:var(--corallo)} .lista-si ul,.lista-no ul{list-style:none;padding:0;margin:0;display:grid;gap:11px} .lista-si li,.lista-no li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink2)} .lista-si li svg,.lista-no li svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px; fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .lista-si li svg{stroke:var(--ciano)} .lista-no li svg{stroke:var(--corallo)} /* ---------------------------------------------------------------- i tre pilastri */ .pilastri{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px} @media(max-width:780px){.pilastri{grid-template-columns:1fr}} .pilastro{border-left:3px solid var(--ciano);padding:6px 0 6px 20px} .pilastro b{display:block;color:#fff;font-size:17px;font-weight:650;margin-bottom:6px} .pilastro span{font-size:15px;color:var(--ink2);line-height:1.55} /* ---------------------------------------------------------------- recensioni */ /* Le recensioni sono l'unico posto dove parlano le persone, non il prodotto: per questo qui il colore e' l'indaco e non il blu. */ .virgolette{border:1px solid rgba(155,140,255,.20);border-radius:var(--curva); background:linear-gradient(180deg,rgba(155,140,255,.075),rgba(255,255,255,.03)); padding:24px;transition:transform .35s var(--molla),border-color .35s,box-shadow .35s; display:flex;flex-direction:column} .virgolette:hover{transform:translateY(-4px);border-color:rgba(155,140,255,.5); box-shadow:0 18px 40px rgba(0,0,0,.4)} .virgolette p{flex:1} .stelle{display:flex;gap:3px;margin-bottom:14px} .stelle svg{width:17px;height:17px;fill:var(--indaco)} .stelle svg.spenta{fill:rgba(155,140,255,.22)} .occhiello.persone{color:var(--indaco)} /* la risposta che TurboFix da' a una recensione, dentro la scheda */ .virgolette .risposta{margin-top:14px;padding:12px 14px;border-radius:10px; background:rgba(46,107,240,.10);border:1px solid rgba(127,172,255,.22)} .virgolette .risposta .et{font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--bluC);margin-bottom:5px} .virgolette .risposta p{font-size:14.5px;color:var(--ink2)} /* la distribuzione delle stelle, nella pagina Recensioni */ .rec-riga{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:12px; font-size:14px;color:var(--ink2);margin-bottom:8px} .rec-riga .q{color:var(--indaco);font-weight:600;white-space:nowrap} .rec-riga .tr{height:8px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden} .rec-riga .tr i{display:block;height:100%;border-radius:6px;background:var(--indaco)} .rec-riga .pc{text-align:right;font-variant-numeric:tabular-nums} .virgolette p{font-size:16.5px;color:var(--ink);line-height:1.55} .virgolette .chi{font-size:13.5px;color:var(--ink3);margin-top:14px} /* ---------------------------------------------------- quante recensioni ci sono La sezione cambia forma da sola a seconda di quante recensioni vere ci sono. Non e' un vezzo: un nastro che scorre all'infinito con dentro UNA sola recensione ripetuta e' peggio che non averlo, perche' si vede che e' un trucco. Meglio una citazione sola, grande e ferma: sembra quello che e', cioe' la prima. 1-2 -> vetrina: la citazione al centro, in grande, ferma 3 -> griglia di tre, ferme 4+ -> il nastro che scorre Chi decide e' il JavaScript, contando le recensioni con testo. */ /* --- la vetrina: una o due citazioni, grandi e ferme ------------------- Allineata a SINISTRA e non centrata: il titolo della sezione sta a sinistra, e una citazione centrata sotto un titolo allineato sembra finita li' per sbaglio. Cosi' invece il bordo sinistro della scheda cade sotto la prima lettera del titolo. */ .rec-vetrina{display:grid;gap:24px;max-width:820px} .rec-vetrina.due{grid-template-columns:1fr 1fr;max-width:none} @media(max-width:820px){.rec-vetrina.due{grid-template-columns:1fr}} /* Una sola recensione merita il trattamento della citazione: testo piu' grande, respiro intorno, e le virgolette vere disegnate dietro. */ .rec-vetrina .virgolette{padding:38px 40px;position:relative;overflow:hidden} @media(max-width:600px){.rec-vetrina .virgolette{padding:28px 24px}} .rec-vetrina.una .virgolette p{font-size:22px;line-height:1.5;font-weight:450} @media(max-width:600px){.rec-vetrina.una .virgolette p{font-size:18.5px}} .rec-vetrina .stelle svg{width:20px;height:20px} /* il segno di virgoletta dietro: decorativo, quindi non lo legge nessun lettore di schermo e non intercetta il mouse */ .rec-vetrina.una .virgolette:before{content:"\201C";position:absolute; right:26px;top:-4px;font-size:112px;line-height:1; color:rgba(155,140,255,.075);pointer-events:none;font-weight:600} @media(max-width:600px){.rec-vetrina.una .virgolette:before{display:none}} /* un respiro appena percettibile: e' l'"accenno di movimento", non un'animazione */ .rec-vetrina .virgolette{animation:respiro-rec 7s ease-in-out infinite} @keyframes respiro-rec{ 0%,100%{box-shadow:0 0 0 rgba(155,140,255,0)} 50%{box-shadow:0 14px 42px rgba(155,140,255,.10)} } .rec-vetrina .virgolette:hover{animation:none} /* --- la griglia: tre citazioni ferme ----------------------------------- */ .rec-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:980px){.rec-griglia{grid-template-columns:1fr 1fr}} @media(max-width:680px){.rec-griglia{grid-template-columns:1fr}} /* --- quando non ce n'e' ancora nessuna --------------------------------- */ /* Non si mostrano riquadri vuoti ne' finti: si dice com'e'. */ .rec-nessuna{max-width:640px;margin:0 auto;text-align:center; border:1px dashed rgba(155,140,255,.28);border-radius:var(--curva); background:rgba(155,140,255,.04);padding:34px 28px} .rec-nessuna p{color:var(--ink2);font-size:16px;margin:0} .rec-nessuna b{color:var(--ink)} /* ---------------------------------------------------------------- domande in pagina */ .domande{display:grid;gap:11px;margin-top:40px} .domande details{border:1px solid var(--linea);border-radius:12px;background:var(--sup);padding:2px 20px} .domande details[open]{border-color:rgba(127,172,255,.28)} .domande summary{cursor:pointer;font-weight:650;color:#fff;font-size:16px;padding:16px 0;list-style:none; display:flex;align-items:center;gap:12px} .domande summary::-webkit-details-marker{display:none} .domande summary:before{content:"";width:9px;height:9px;border-right:2px solid var(--bluC); border-bottom:2px solid var(--bluC);transform:rotate(-45deg);flex:0 0 auto;transition:transform .25s} .domande details[open] summary:before{transform:rotate(45deg)} .domande details p{color:var(--ink2);font-size:15.5px;padding:0 0 18px 21px} /* ---------------------------------------------------------------- pie' di pagina */ footer{border-top:1px solid var(--linea);padding:52px 0 40px;background:var(--bg2)} footer .contenitore,footer .wrap{display:grid;gap:30px} .pie-griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} @media(max-width:860px){.pie-griglia{grid-template-columns:1fr 1fr}} @media(max-width:520px){.pie-griglia{grid-template-columns:1fr}} .pie-griglia h4{font-size:12.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase; color:var(--ink3);margin-bottom:14px} .pie-griglia ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .pie-griglia a{color:var(--ink2);font-size:14.5px} .pie-griglia a:hover{color:var(--bluC)} .pie-basso{border-top:1px solid var(--linea);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px; align-items:center;font-size:13.5px;color:var(--ink3)} .pie-basso nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:18px} .pie-basso a{color:var(--ink3)} .pie-basso a:hover{color:var(--bluC)} /* pie' di pagina compatto delle pagine interne */ footer.semplice{padding:30px 0 44px;background:transparent;border-top:1px solid var(--linea)} footer.semplice .contenitore{max-width:var(--prosa);display:block} footer.semplice .pie-basso{border-top:0;padding-top:0} /* barra alta delle pagine interne: stessa barra, contenuto piu' stretto */ .barra.stretta .contenitore{max-width:var(--prosa)} /* ========================================================================== PAGINE INTERNE - la stessa ossatura che avevano prima (.top/.wrap/.card), cosi' il contenuto gia' scritto non va toccato. ========================================================================== */ .top{max-width:var(--prosa);margin:0 auto;padding:22px 20px;display:flex;align-items:center;gap:14px} .brand{font-weight:750;font-size:19px;color:#fff;text-decoration:none;letter-spacing:-.03em} .brand:hover{text-decoration:none} .brand .f{color:var(--bluC)} .back{margin-left:auto;font-size:14px;font-weight:600;color:var(--ink2);text-decoration:none} .back:hover{color:var(--bluC);text-decoration:none} .wrap{max-width:var(--prosa);margin:0 auto;padding:38px 20px 70px} /* Dopo la testata il corpo attacca subito: altrimenti fra il sottotitolo e il primo paragrafo restava un buco di un centinaio di pixel. */ .testata + .wrap{padding-top:4px} .wrap h1{font-size:clamp(28px,4.4vw,38px);margin-bottom:6px} .wrap .sub{color:var(--ink2);font-size:16.5px;margin:10px 0 26px} .wrap h2{font-size:21px;font-weight:700;color:#fff;margin:32px 0 10px} .wrap h3{font-size:17.5px;font-weight:650;color:#fff;margin:22px 0 8px} .wrap p,.wrap li{color:var(--ink2);font-size:16px} .wrap p{margin:0 0 14px} .wrap ul,.wrap ol{margin:8px 0 16px 22px;padding:0} .wrap li{margin:6px 0} .wrap .card{background:var(--sup);border:1px solid var(--linea);border-radius:var(--curva);padding:28px} .wrap table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:15px} .wrap th,.wrap td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--linea);color:var(--ink2);vertical-align:top} .wrap th{color:#fff;font-weight:650;font-size:13px;letter-spacing:.04em;text-transform:uppercase} .faq details{border:1px solid var(--linea);border-radius:12px;background:var(--sup);padding:2px 18px;margin-bottom:10px} .faq summary{cursor:pointer;font-weight:650;color:#fff;font-size:15.5px;padding:15px 0;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq details p{padding:0 0 16px;margin:0} /* ========================================================================== PAGINE GUIDA - i pezzi che prima stavano in un