/* ============================================================ EdilBoost — landing B2B · composizione di pagina «Un solo angolo, sempre in salita.» Questo file è LIVELLO B: scelte di composizione. I valori duri (colore, tipografia, spazio, geometria, focus) stanno in tokens.css; i componenti in componenti.css. Qui non nasce nessun colore nuovo e nessuna spaziatura fuori dalla scala base-4. Larghezze dichiarate dal copy (landing-edilboost-v1.md, riga 7): 1120 fascia piena · 800 fold e pannelli · 720 testo · 620 lead ============================================================ */ :root{ --lp-col: 1120px; /* fascia piena */ --lp-fold: 800px; /* fold e pannelli */ --lp-video: 900px; /* la copertina: 900 di corsa, 506 di altezza a 16:9 */ --lp-titolo: 900px; /* titoli di sezione: piu' larghi, cosi' vanno a capo meno */ --lp-titolo-largo: 1000px; /* dove il titolo deve stare su meno righe: il ② in due, il ⑧ in una */ /* Il filo della timeline e il bordo del riquadro che lo raccoglie devono stare sulla stessa verticale e avere lo stesso spessore. Erano due numeri scritti in due punti: qui sono uno solo. */ --lp-filo-x: 5px; --lp-filo-w: 2px; --lp-testo: 720px; /* testo corrente */ --lp-lead: 620px; /* righe di lead */ --lp-y: var(--sp-96); /* respiro in apertura e chiusura di ogni sezione. 80 non esiste nella scala del sistema (i nove valori sono 4·8·12·16·24·32·48·64·96): 96 e' il gradino piu' vicino verso l'alto. */ --lp-x: var(--sp-32); /* margine laterale, mai sotto 32 */ --lp-logo: 208px; /* lockup orizzontale in header */ --lp-anello: calc(var(--lp-logo) * 0.0839); /* area di rispetto = 1 anello */ /* La piastrella delle oblique: 170 passi esatti, misurati in verticale. 21,35 e' il passo in perpendicolare alle righe; diviso il coseno di 25 gradi diventa il passo in verticale (23,557). Per il perche' serva, vedi .lp-obliqua. */ --lp-obliqua-tassello: calc(21.35px * 170 / 0.9063078); } @media (max-width:1024px){ :root{ --lp-logo:176px; } } @media (max-width:640px) { :root{ --lp-y:var(--sp-64); --lp-x:var(--sp-16); --lp-logo:152px; } } /* --- 0 · BASE --------------------------------------------- */ html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } /* overflow-x:clip, non hidden: hidden fa del body un contenitore di scorrimento e puo' spegnere il position:sticky dello screencast del caso. clip taglia e basta. Il fallback resta per i browser vecchi. */ body{ background:var(--ghiaccio); color:var(--carbone); overflow-x:hidden; overflow-x:clip; } img{ max-width:100%; } /* Il rame come fondo della selezione fa 4,21:1: regge sui titoli, non sul corpo. L'ardesia fa 15,02 su tutto. */ ::selection{ background:var(--ardesia); color:var(--ghiaccio); } /* Il focus è quello del sistema, sempre visibile. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:0; box-shadow:var(--focus-ring); } .lp-salta{ position:absolute; left:-9999px; top:var(--sp-8); z-index:99; background:var(--ardesia); color:var(--ghiaccio); display:inline-flex; align-items:center; min-height:var(--target-min); padding:var(--sp-12) var(--sp-16); font-size:14px; font-weight:500; } .lp-salta:focus{ left:var(--sp-16); } /* Solo per lettori di schermo */ .lp-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* --- 1 · TELAIO ------------------------------------------- */ .lp-sez{ position:relative; padding-block:var(--lp-y); } /* IL TESTO SUL FONDO SCURO — regola unica di pagina. Il sistema ha tre grigi per lo scuro: --ghiaccio per i titoli, --testo-corrente (#CED3D6) per il corpo, --etichetta-scura per le etichette. Sul chiaro pero' ne ha due soli, e titolo e corpo sono LO STESSO carbone. Da li' l'asimmetria: sullo scuro il corpo usciva piu' spento del suo equivalente sul chiaro, e infatti a occhio sembrava grigio invece che bianco. Qui il corpo su scuro e' --ghiaccio, come sul chiaro e' --carbone. Due livelli su tutti e due i fondi, simmetrici: corrente e etichetta. --testo-corrente resta nel design system, la landing non lo usa: dove serve un secondario su scuro c'e' gia' --etichetta-scura, che e' esplicito. #F5F5F5 su #162128 fa 14,94:1, contro i 10,78 di prima. */ .lp-sez--scura{ background:var(--ardesia); color:var(--ghiaccio); } .lp-sez--chiara{ background:var(--ghiaccio); color:var(--carbone); } /* Il bianco e' la terza superficie del sistema, non un colore nuovo: e' il piano rialzato sopra il ghiaccio. Serve a staccare una sezione dalle sue vicine senza tagli e senza scurire il corpo della pagina. Vale dove NON ci sono oggetti bianchi dentro: su carta un pannello bianco sparirebbe. La portano il ③ — dove i fogli delle richieste hanno il corpo in ghiaccio e sul ghiaccio si scioglievano — e il ⑥, che e' una colonna di solo testo. */ .lp-sez--carta{ background:var(--bianco); color:var(--carbone); } .lp-wrap{ width:100%; max-width:calc(var(--lp-col) + 2 * var(--lp-x)); margin-inline:auto; padding-inline:var(--lp-x); position:relative; z-index:2; } .lp-testo{ max-width:var(--lp-testo); margin-inline:auto; } /* Centrati, i display che finiscono con una parola sola perdono il peso che quella dimensione doveva comprare. */ .lp-h1, .lp-h2, .lp-sottotitolo{ text-wrap:balance; } /* Tutti i titoli di sezione sono centrati, senza eccezioni (decisione di copy, landing-edilboost-v1.md §Registro). */ /* I titoli di sezione in Bold, non in Black. Il Black regge sull'H1, che e' una riga sola e deve pesare; su otto titoli lunghi, ognuno una domanda da 60-75 battute, diventa un muro. Il sistema dichiara il Black per il display e il Bold per il titolo: qui si tiene la dimensione del display e il peso del titolo, e il tracking segue il peso (il Bold ha bisogno di meno stretta del Black). Piu' larghi di 100px, cosi' vanno a capo una volta di meno. */ .lp-h2{ text-align:center; max-width:var(--lp-titolo); margin-inline:auto; font-weight:var(--titolo); letter-spacing:-.018em; } /* La misura larga dei titoli. A 900 la domanda del ② si spezzava in tre righe corte, e stringendola peggiorava; il titolo del ⑧ ci stava per un pelo e a volte andava a capo. A 1000 il primo sta in due righe piene e il secondo in una, e restano dentro la fascia da 1120. Gli altri titoli sono corti: si allargano questi, non tutti. */ .lp-h2--largo{ max-width:var(--lp-titolo-largo); } /* Il sottotitolo sta sulla misura di lettura, 720, non sui 620 dei lead. I 620 erano l'unica larghezza che in pagina non compariva da nessun'altra parte: il testo corrente e' 720, i pannelli e il video 800, la fascia 1120. Una misura che non torna da nessuna parte si legge come un errore di allineamento, anche quando non lo e'. */ .lp-sottotitolo{ text-align:center; max-width:var(--lp-testo); margin:var(--sp-24) auto 0; font-size:var(--lead-size); line-height:var(--lead-lh); font-weight:400; } .lp-sez--chiara .lp-sottotitolo, .lp-sez--carta .lp-sottotitolo{ color:var(--etichetta-chiara); } .lp-sez--scura .lp-sottotitolo{ color:var(--ghiaccio); } /* Distanza fra la testa della sezione e il suo corpo */ .lp-corpo{ margin-top:var(--sp-64); } @media (max-width:640px){ .lp-corpo{ margin-top:var(--sp-32); } } /* IL NERETTO DELLA PAGINA e' sempre e solo peso: 700, mai un colore e mai una misura diversa. Serve a chi scorre — se legge solo i neretti deve ricevere l'argomento — quindi ne va al massimo uno per paragrafo, e non in tutti i paragrafi. Gotham ha il Bold vero, quindi il non viene sintetizzato. La cifra del caso resta a 900: e' una classe, e vince su questa. */ main b{ font-weight:700; } .lp-p{ font-size:var(--corpo-size); line-height:var(--corpo-lh); margin:0 0 var(--sp-24); } .lp-p:last-child{ margin-bottom:0; } .lp-sez--scura .lp-p{ color:var(--ghiaccio); } /* Il pannello di constatazione: bianco, filetto rame a sinistra. È il pattern del sistema per il dato su fondo chiaro (componenti.css §15, .eb-slide--chiara .eb-slide-dato). Lo usano il ② e il ④, che il copy vuole della stessa famiglia. */ .lp-pannello{ background:var(--bianco); border-left:3px solid var(--rame); padding:var(--sp-32) var(--sp-48); max-width:var(--lp-fold); margin-inline:auto; } .lp-pannello .lp-p:last-child{ margin-bottom:0; } .lp-pannello--forte .lp-p{ font-size:23px; line-height:1.42; font-weight:700; color:var(--carbone); } @media (max-width:640px){ .lp-pannello{ padding:var(--sp-24); } } /* Bottone. Il sistema fissa la CTA a 12px: con bianco su rame fa 4,21:1, sotto la soglia AA per il testo piccolo. Il design system stesso indica la via d'uscita (§2, nota sul bianco su rame): "alza la dimensione del testo o passa al bottone a filetto". Qui si alza: a 19px bold il testo e' "grande" e la soglia scende a 3:1, che 4,21 supera. */ /* Lo smusso del bottone e' proporzionale: 18 di salita su 46,4 di altezza. La CTA sta a 64, quindi la salita sale a 24 — l'angolo resta 25°, perche' la corsa si ricalcola da sola. */ .lp-cta{ font-size:19px; letter-spacing:.06em; padding:var(--sp-16) var(--sp-48); min-height:64px; text-align:center; --btn-salita:24px; } /* Stessa ragione dentro il form, con l'ingombro tarato sul pannello. */ .lp-form-pannello .eb-btn{ font-size:19px; letter-spacing:.06em; line-height:1.2; padding:var(--sp-12) var(--sp-24); min-height:52px; } .lp-form-pannello .eb-btn[type="submit"]{ width:100%; } .lp-btn-riga{ margin-top:var(--sp-48); text-align:center; } @media (max-width:520px){ /* Il testo resta a 19px: sotto, il bianco su rame torna sotto soglia. Si stringe il padding e si lascia andare a capo. */ .lp-cta{ width:100%; padding-inline:var(--sp-16); } } /* --- 2 · HEADER ------------------------------------------- */ /* L'header non e' una fascia a se': e' il bordo alto della copertina. Stesso ardesia della piega, e da ora anche le stesse oblique — un campo che cominciava sotto il marchio invece che in cima alla pagina metteva un gradino dove non c'e' nessun confine da segnare. Il marchio pero' resta fuori dalla trama: l'area di rispetto e' un anello di vuoto, e una texture che gli passa sopra e' il contrario del vuoto. Da qui il z-index sul contenuto. */ .lp-header{ background:var(--ardesia); padding-block:var(--sp-24); position:relative; overflow:hidden; } .lp-header > .lp-wrap{ position:relative; z-index:2; } /* L'unico tassello appeso in basso di tutta la pagina: e' il bordo che condivide con la piega, non il proprio. */ .lp-header .lp-obliqua{ background-position:0 100%; } .lp-header-in{ display:flex; align-items:center; } .lp-logo{ display:block; width:var(--lp-logo); height:auto; margin:var(--lp-anello) 0; } /* --- 3 · ① LA PIEGA --------------------------------------- Campo ardesia pieno, attraversato dal ritmo di righe. Il retino qui non entra: retino e ritmo non compaiono mai insieme. La fotografia della pagina e' una sola, il fermo immagine del video. Una seconda, sotto la piega, non avrebbe un compito. */ /* LE OBLIQUE — la texture di tutte le superfici scure della pagina. Misure prese dai vettoriali, non a occhio. Negli asset esistono due passi, e sono due cose diverse: 45,03 x 1,12 -> «linee oblique per lo sfondo.svg» 21,35 x 2,83 -> «Linee oblique 25 gradi.svg» Qui sta il passo fine, 21,35, con il tratto portato a 1,5: a 2,83 la trama diventava il soggetto del campo invece della sua materia. Copertura 7,0% contro il 13,25% del tratto pieno e il 2,49% del passo largo — nel mezzo, che e' dove doveva stare. L'angolo non si tocca: -25deg. Le lunghezze del gradiente sono gia' misurate in perpendicolare alle bande, come le quote dei file. Non e' piu' .eb-retino perche' non e' piu' il retino: passo e tratto sono altri, e una classe di sistema non si piega di nascosto. Se il campo dovesse virare, la leva e' l'opacita'. */ .lp-obliqua{ position:absolute; inset:0; z-index:1; pointer-events:none; background-image:repeating-linear-gradient(-25deg, rgba(185,101,62,.15) 0 1.5px, transparent 1.5px 21.35px); /* PERCHE' LA TRAMA E' AGGANCIATA E NON LIBERA. Un gradiente ripetuto prende come origine il CENTRO della sua area. Due campi attaccati ma di altezza diversa — l'header e la piega — disegnano quindi le stesse righe in due fasi diverse, e al confine ogni riga fa uno scalino: fino a 12 px, su linee che corrono quasi orizzontali. Si vede. Fissando l'area a un tassello alto un numero INTERO di passi, l'origine smette di dipendere dall'altezza del campo e le righe si agganciano per bordo: l'header appende il suo tassello all'orlo basso (sotto), la piega il suo all'orlo alto, e i due orli sono lo stesso millimetro di pagina. La trama passa dall'uno all'altro senza salti. Il numero intero di passi serve anche al resto: cosi' il tassello si ripete su se stesso senza cuciture se un campo dovesse superare i 4.005 px di altezza. */ background-size:100% var(--lp-obliqua-tassello); background-position:0 0; } /* L'aggancio serve SOLO alla coppia header + piega, che sono attaccate. L'⑧ non ha nessuno da agganciare: sopra ha una sezione chiara, sotto il piede senza trama. Torna quindi all'inquadratura di prima — tassello grande quanto il campo, origine al centro — cosi' le righe cadono esattamente dove cadevano. Stesso rame, stesso passo, stesso tratto: cambiava solo dove capitava la prima riga. */ .lp-sez--scura .lp-obliqua{ background-size:auto; background-position:0 0; } /* La riduzione del sistema (§11) spegne le texture sotto i 1024, e fino al 2026-09-22 qui sotto i 640 l'obliqua si spegneva del tutto. Decisione di Vasyly: resta accesa anche sul telefono in verticale. Regge, e per due motivi misurati. Il primo: l'obliqua non decora, e' la materia del campo scuro — spenta, l'header e la piega sul telefono diventavano due rettangoli piatti, e il gesto di marca spariva proprio dove il 60% della gente legge. Il secondo: non costa niente in leggibilita', perche' sta DIETRO il contenuto (z-index 1 contro il 2 di .lp-wrap) e il tratto e' rame al 15% su 21,35px di passo — 1,17:1 contro il fondo, una materia, non un disegno. */ .lp-fold-sez{ background:var(--ardesia); color:var(--ghiaccio); position:relative; overflow:hidden; padding-block:var(--sp-64) var(--sp-96); } @media (max-width:640px){ .lp-fold-sez{ padding-block:var(--sp-32) var(--sp-64); } } /* La piega della thank-you: senza contenuto sotto il titolo, respira di piu' sopra. Ma in un foglio, non in un attributo style, che nessun media query riesce a battere. */ .lp-fold-sez--ty{ padding-block:var(--sp-96); } @media (max-width:640px){ .lp-fold-sez--ty{ padding-block:var(--sp-48); } } /* L'interlinea dell'H1 sale da 0,94 a 1,08: +15%. Lo 0,94 del sistema e' tarato su un display di UNA riga, dove serve a compattare il blocco. Qui il titolo ne fa due o tre, e a quella misura le maiuscole della riga sotto arrivavano addosso alle discendenti di quella sopra. Si tocca solo qui: il token resta com'e', perche' altrove il display e' una riga sola. */ .lp-h1{ text-align:center; max-width:var(--lp-fold); margin-inline:auto; line-height:1.08; } /* Il lead della piega e' ghiaccio, non testo-corrente: --testo-corrente e' il grigio del testo lungo (10,78:1 su ardesia), e su una riga sola a 20px sotto un H1 in Black legge come una didascalia spenta. Il ghiaccio fa 14,94:1 ed e' il colore che il titolo si aspetta accanto. Il grigio resta dov'e' il suo lavoro: i paragrafi lunghi del ③ e ⑧. */ .lp-fold-lead{ text-align:center; max-width:var(--lp-fold); margin:var(--sp-32) auto 0; font-size:var(--lead-size); line-height:var(--lead-lh); color:var(--ghiaccio); } .lp-fold-lead b{ font-weight:400; color:var(--ghiaccio); display:block; margin-top:var(--sp-8); } /* Copertina video: registro FUNZIONALE, rettangolo, nessun taglio. Il gesto di marca della piega è la banda obliqua qui sotto, non questo riquadro: la copertina sparisce al primo clic e un gesto che sparisce non può reggere il brand. */ /* IL FILETTO INTORNO AL VIDEO. Il video ha inquadrature con il fondo scuro quasi identico all'ardesia della pagina: senza un bordo il riquadro si mimetizza, e non si capisce nemmeno che sta girando. Il filetto e' l'unico modo che il sistema ammette per staccare due superfici — «bordo, contrasto e spazio, non ombre» (design system §8). Colore: --etichetta-scura, non --bordo e non il bianco. --bordo (#D5D8D5) su ardesia fa 11:1, cioe' una riga quasi bianca che si guarda invece di guardare il video. --etichetta-scura e' un grigio vero: 7,12:1 sull'ardesia della piega e 2,30:1 sul bianco della thank-you — si legge su tutte e due le superfici, e su nessuna grida. Tinta piena e non ghiaccio trasparente proprio per questo: un'alpha cambierebbe faccia a seconda di cosa ha dietro. Sta su .lp-video e non sull'immagine, cosi' vale in tutti e due gli stati — copertina E player — senza doverlo scrivere due volte: foto e iframe sono in inset:0 e finiscono dentro il bordo da soli. Con box-sizing:border-box i 3px stanno DENTRO il 16:9: il riquadro non cresce di un pixel e non sposta niente in pagina. */ .lp-video{ position:relative; z-index:1; width:100%; max-width:var(--lp-video); margin:var(--sp-48) auto 0; aspect-ratio:16/9; background:var(--carbone); overflow:hidden; border:3px solid var(--etichetta-scura); } .lp-video-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 46%; } /* Il velo scurisce quanto basta a leggere il claim e lascia respirare il cantiere: più fitto in alto, dove sta il testo, più leggero in basso, dove sta la casa. */ .lp-video-velo{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,33,40,.90) 0%, rgba(22,33,40,.74) 52%, rgba(22,33,40,.58) 100%); } .lp-video-testo{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:clamp(var(--sp-12),3vw,var(--sp-32)) clamp(var(--sp-16),6%,var(--sp-64)); } .lp-video-claim{ font-weight:900; font-size:clamp(24px,4.2vw,38px); line-height:1.22; letter-spacing:-.022em; color:var(--ghiaccio); margin:0; max-width:600px; } .lp-video-claim .eb-enfasi{ color:var(--rame); } .lp-video-sub{ font-size:clamp(15px,2.3vw,19px); line-height:1.35; color:var(--ghiaccio); margin:var(--sp-12) 0 0; max-width:520px; } .lp-play{ appearance:none; background:transparent; border:0; cursor:pointer; margin-top:clamp(var(--sp-12),3vw,var(--sp-48)); display:flex; flex-direction:column; align-items:center; gap:var(--sp-8); font-family:var(--font); color:var(--ghiaccio); padding:var(--sp-8); } .lp-play-segno{ width:clamp(56px,7vw,78px); aspect-ratio:1; border:3px solid var(--ghiaccio); display:flex; align-items:center; justify-content:center; transition:background var(--durata-micro) linear, border-color var(--durata-micro) linear; } .lp-play-segno svg{ width:34%; height:auto; fill:var(--ghiaccio); transition:fill var(--durata-micro) linear; } .lp-play:hover .lp-play-segno{ background:var(--rame); border-color:var(--rame); } .lp-play:hover .lp-play-segno svg{ fill:var(--bianco); } .lp-play-testo{ font-weight:500; font-size:var(--label-min); letter-spacing:var(--label-ls); text-transform:uppercase; color:var(--ghiaccio); } /* LA COPERTINA CHE SI PORTA IL TESTO ADDOSSO — dal 28-08-2026. La copertina della piega non e' piu' una fotografia con sopra del testo in HTML: e' una composizione chiusa, dove claim, sotto-riga, freccia e pulsante sono disegnati nel file. Le regole qui sopra NON si cancellano: grazie.html e la v2 usano ancora velo, claim e pulsante ad anello. Qui si aggiunge soltanto quello che le annulla, e lo si fa con un modificatore. Il comando diventa la copertina intera. Il focus si segna con un filetto INTERNO: un anello esterno cadrebbe fuori dal riquadro e l'overflow lo taglierebbe via. */ .lp-play--pieno{ position:absolute; inset:0; width:100%; height:100%; display:block; margin:0; padding:0; background:transparent; } .lp-play--pieno:focus-visible{ outline:0; box-shadow:inset 0 0 0 3px var(--ghiaccio), inset 0 0 0 5px var(--carbone); } /* Un solo segnale al passaggio, e non e' un segno nuovo: la fotografia si schiarisce appena. Sopra un pulsante disegnato, qualunque altra cosa sarebbe un doppione. */ .lp-video--intera .lp-video-foto{ object-position:50% 50%; transition:filter var(--durata-micro) linear; } .lp-video--intera:not(.lp-video--attivo):hover .lp-video-foto{ filter:brightness(1.06); } .lp-video-player{ position:absolute; inset:0; z-index:3; width:100%; height:100%; border:0; } .lp-video-attesa{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--carbone); padding:var(--sp-32); color:var(--etichetta-scura); font-size:var(--label-min); letter-spacing:var(--label-ls); text-transform:uppercase; } /* --- 5 · ② I QUATTRO MODI --------------------------------- */ /* Struttura approvata il 12-08-2026: tabella da 1025 px, schede a tab fino a 1024. Stesso contenuto, due forme. */ .lp-modi-tabella{ display:block; } .lp-modi-tab{ display:none; } @media (max-width:1024px){ .lp-modi-tabella{ display:none; } /* La scheda e' disegnata a misura di telefono: distesa su 945px a tablet diventa una tabella a una colonna con dentro un buco. */ .lp-modi-tab{ display:block; max-width:640px; margin-inline:auto; } } /* --- la tabella --- */ .lp-tab-scroll{ overflow-x:auto; } /* Il campo della tabella e' ghiaccio; bianca resta solo la colonna nostra, perche' nel sistema il bianco e' la superficie in rilievo sopra il ghiaccio. La gerarchia la fa la superficie, non un fondo colorato. */ .lp-tabella{ width:100%; border-collapse:collapse; font-size:14px; background:transparent; table-layout:fixed; } .lp-tabella th, .lp-tabella td{ text-align:left; vertical-align:top; padding:var(--sp-16) var(--sp-16); border-bottom:1px solid var(--bordo); } /* Le larghezze seguono il testo, non un'equidistanza di comodo. Contate le battute: la colonna EdilBoost ne porta 41,9 di media contro le 19,4 del passaparola, e finora aveva la stessa larghezza. Allargarla e' quello che chiede il contenuto, e l'effetto "da' di piu'" arriva da solo. Le tre in mezzo restano uguali fra loro: tre uguali e una diversa si legge come una scelta, quattro diverse come sciatteria. Le domande stanno alla stessa larghezza delle prime tre risposte: non e' una colonna piu' importante, e' solo la chiave di lettura. La tabella esiste solo da 1025px in su, quindi vale gia' solo li'. */ .lp-tabella thead td:first-child{ width:18.5%; } .lp-tabella thead th{ width:18.5%; } .lp-tabella thead th.lp-noi{ width:26%; } /* L'intestazione deve leggersi come quattro soluzioni messe una accanto all'altra, non come quattro occhielli sopra del testo. Quindi ognuna e' un oggetto: superficie bianca, cioe' in rilievo sopra il ghiaccio, bordo su tutti i lati e un filetto scuro sotto che la stacca dal corpo. Numero grande sopra, nome sotto: e' la stessa grammatica delle schede a tab, cosi' desktop e telefono raccontano la stessa cosa con lo stesso segno. */ .lp-tabella thead th{ background:var(--bianco); vertical-align:bottom; border:1px solid var(--bordo); border-bottom:2px solid var(--carbone); padding:var(--sp-24) var(--sp-16) var(--sp-16); } .lp-tabella thead td:first-child{ border:0; background:transparent; } .lp-capo-n{ display:block; font-weight:900; font-size:26px; line-height:1; letter-spacing:-.02em; color:var(--etichetta-chiara); margin-bottom:var(--sp-8); } .lp-capo-nome{ display:block; font-weight:700; font-size:16px; line-height:1.2; letter-spacing:-.01em; color:var(--carbone); } /* La nostra. Il filetto rame sopra non faceva nessun lavoro: la colonna era gia' marcata dal fondo bianco e dal filetto sotto, e il segno in piu' leggeva come un'evidenziazione. Al suo posto parla il testo — numero e nome in rame. Il numero e' a 26px e regge il rame pieno (4,21:1 su bianco, soglia 3:1 sopra i 24px). Il nome e' a 16px Bold, sotto la soglia del testo grande: li' il rame pieno farebbe 4,21 contro i 4,5 richiesti, quindi prende --rame-premuto, che e' lo stesso rame un gradino sotto e fa 4,77:1. A quella misura i due sono indistinguibili. */ .lp-tabella thead th.lp-noi{ border-bottom-color:var(--rame); } .lp-tabella thead th.lp-noi .lp-capo-n { color:var(--rame); } .lp-tabella thead th.lp-noi .lp-capo-nome{ color:var(--rame-premuto); } .lp-tabella tbody th{ font-weight:700; font-size:15px; line-height:1.35; color:var(--carbone); padding-left:0; } .lp-tabella tbody td{ color:var(--carbone); line-height:1.45; } .lp-tabella tbody tr:last-child th, .lp-tabella tbody tr:last-child td{ border-bottom:0; } /* La colonna nostra: bianca, il nome in rame in testa. Una sola enfasi cromatica, e cade dove il lettore deve arrivare. */ .lp-tabella .lp-noi{ background:var(--bianco); } .lp-tabella thead .lp-noi{ color:var(--carbone); background:var(--bianco); } .lp-tabella tbody .lp-noi{ font-weight:500; } /* I tre segni. Il rosso è uscito (22-08 lo teneva come scostamento dichiarato): il sistema vieta i colori di stato in ADV, e una tabella di confronto su una landing è ADV. Cosi' rientra, e il confronto smette di somigliare a un comparatore di preventivi. Resta una sola marcatura cromatica, il rame sulla spunta, dove il lettore deve arrivare. Il no e il parziale sono tutti e due grigi: a distinguerli è la forma — X contro trattino — che è poi l'unica cosa che funziona anche per chi i colori non li distingue. La spunta prende il tratto a 3: non è più grande, è più grassa. La misura resta 14, se cresce si sfalsa l'allineamento con la riga. Rame su ghiaccio 3,84:1 e su bianco 4,21:1 — per un segno grafico la soglia è 3:1. */ .lp-segno{ display:inline-block; width:14px; height:14px; flex:none; margin-right:var(--sp-8); vertical-align:-2px; } .lp-segno path{ fill:none; stroke-width:2; stroke-linecap:square; } .lp-segno--si path { stroke:var(--rame); stroke-width:3; } .lp-segno--for path{ stroke:var(--etichetta-chiara); } .lp-segno--no path { stroke:var(--etichetta-chiara); } /* --- le schede a tab (fino a 1024 px) --- */ /* Quattro numeri in fila e basta. Il nome del modo compare nella scheda appena si preme: e' quello che fa venire voglia di premere. L'etichetta resta nel markup per chi ascolta, non a schermo. */ .lp-tab-testa{ display:grid; grid-template-columns:repeat(4,minmax(0,96px)); gap:var(--sp-8); justify-content:center; margin-bottom:var(--sp-32); } .lp-tab-btn{ appearance:none; cursor:pointer; font-family:var(--font); background:var(--bianco); border:1px solid var(--bordo); border-radius:var(--raggio); padding:var(--sp-12) var(--sp-8); min-height:64px; display:flex; align-items:center; justify-content:center; position:relative; transition:background var(--durata-micro) linear, border-color var(--durata-micro) linear; } .lp-tab-btn:hover{ border-color:var(--carbone); } .lp-tab-n{ font-weight:900; font-size:28px; line-height:1; letter-spacing:-.02em; color:var(--etichetta-chiara); } .lp-tab-l{ font-weight:500; font-size:var(--label-min); line-height:1.15; letter-spacing:.02em; text-transform:uppercase; color:var(--etichetta-chiara); text-align:center; } /* Il quarto e' l'arrivo di tutta la salita, e da spento lo dice: pieno rame, numero bianco. Il rame come fondo di micro-UI sarebbe fuori regola, ma il bottone primario del sistema e' gia' rame pieno con il testo bianco: un pulsante rame e' la stessa famiglia, non un'eccezione nuova. Il numero e' a 28px Black, quindi il bianco su rame (4,21:1) supera la soglia del testo grande. */ .lp-tab-btn[data-i="4"]{ background:var(--rame); border-color:var(--rame); } .lp-tab-btn[data-i="4"] .lp-tab-n{ color:var(--bianco); } .lp-tab-btn[data-i="4"]:not([aria-selected="true"]):hover{ background:var(--rame-premuto); border-color:var(--rame-premuto); } /* Selezionato, ogni tab passa all'ardesia: arrivato il momento, il quarto non deve piu' chiamare. Queste regole vengono dopo apposta, perche' hanno la stessa specificita' di quella qui sopra. */ .lp-tab-btn[aria-selected="true"]{ background:var(--ardesia); border-color:var(--ardesia); } .lp-tab-btn[aria-selected="true"] .lp-tab-n{ color:var(--ghiaccio); } .lp-tab-btn[aria-selected="true"] .lp-tab-l{ color:var(--etichetta-scura); } .lp-scheda{ background:var(--bianco); border:1px solid var(--bordo); } .lp-scheda-testa{ padding:var(--sp-24) var(--sp-24) var(--sp-16); border-bottom:1px solid var(--bordo); background:var(--ghiaccio); } /* Sotto i 1025 la tabella diventa quattro schede: stessa decisione, stesso segno. Via il filetto sopra, il nome in rame. */ .lp-scheda--noi .lp-scheda-testa{ background:var(--bianco); } .lp-scheda--noi .lp-scheda-tit { color:var(--rame-premuto); } .lp-scheda-tit{ font-weight:700; font-size:21px; line-height:1.2; letter-spacing:-.02em; color:var(--carbone); margin:0; } .lp-scheda-claim{ font-size:14px; line-height:1.4; color:var(--etichetta-chiara); margin:var(--sp-8) 0 0; } .lp-riga{ display:grid; grid-template-columns:16px 1fr; gap:var(--sp-12); padding:var(--sp-12) var(--sp-24); border-bottom:1px solid var(--bordo); align-items:start; } .lp-riga:last-of-type{ border-bottom:0; } .lp-riga-q{ display:block; font-weight:400; font-size:var(--label-min); letter-spacing:.04em; text-transform:uppercase; color:var(--etichetta-chiara); margin-bottom:2px; } .lp-riga-a{ font-size:15px; line-height:1.4; color:var(--carbone); } .lp-scheda--noi .lp-riga-a{ font-weight:500; } .lp-riga .lp-segno{ margin-right:0; margin-top:3px; } .lp-avanti{ appearance:none; cursor:pointer; font-family:var(--font); width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); background:var(--ghiaccio); border:0; border-top:1px solid var(--bordo); padding:var(--sp-16) var(--sp-24); min-height:var(--target-min); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--carbone); text-align:left; transition:background var(--durata-micro) linear, color var(--durata-micro) linear; } .lp-avanti:hover{ background:var(--ardesia); color:var(--ghiaccio); } .lp-avanti:hover .lp-freccia path{ stroke:var(--ghiaccio); } /* Lo snodo verso la quarta scheda porta la lama rame, non il testo rame: il rame piccolo su etichette e' vietato (DS §2) e il rame come fondo di micro-UI anche (DS §13). Il segno resta, la parola no. */ .lp-avanti--snodo{ background:var(--bianco); color:var(--carbone); box-shadow:inset 3px 0 0 var(--rame); } .lp-avanti--snodo:hover{ background:var(--ardesia); color:var(--ghiaccio); } .lp-freccia{ width:20px; height:12px; flex:none; } .lp-freccia path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; } .lp-tab-nota{ text-align:center; font-size:12px; letter-spacing:.04em; color:var(--etichetta-chiara); margin:var(--sp-16) 0 0; } /* --- 6 · ③ CHI SIAMO · LE RICHIESTE ----------------------- */ /* Quello che segue la fascia rame e' un titolo di secondo livello, non una didascalia: sta sul livello --titolo del sistema (Bold 700, 28-32px), centrato come tutti gli altri. */ .lp-bandiera-sub{ text-align:center; max-width:var(--lp-fold); margin:var(--sp-48) auto 0; color:var(--carbone); } /* LA FASCIA — una banda a tutta larghezza con dentro solo un titolo. Il sistema ne fissa il MODO (una fascia, un titolo, niente altro dentro) e ne disegna una tinta sola, il campo rame: quella la porta il ③, che e' dove si dice chi siamo. Il ⑦ usa la stessa banda in ardesia. Non e' un campo rame ricolorato — quella classe di sistema non si piega — e' la stessa composizione con un altro fondo: li' si dichiarano i paletti, e l'ardesia e' gia' il campo delle tre schede del NO qui sotto. Cosi' il rame resta una volta sola in tutta la pagina. */ .lp-bandiera{ padding-block:clamp(var(--sp-24),4vw,var(--sp-48)); justify-content:center; } .lp-bandiera--scura{ background:var(--ardesia); display:flex; align-items:center; padding-inline:var(--sp-48); } /* Ghiaccio su ardesia 14,94:1, contro i 4,21 del bianco su rame. */ .lp-bandiera--scura .eb-campo-rame-tit{ color:var(--ghiaccio); } /* Bianco su rame fa 4,21:1: passa dai 24px in su, mai sotto. L'interlinea sale da 1 a 1,15: sono due frasi, non due mezze righe dello stesso periodo, e a interlinea piena si leggevano incollate. Il punto in fondo non c'e' piu': a capo fa gia' quel lavoro. */ .lp-bandiera .eb-campo-rame-tit{ font-size:clamp(24px,3.4vw,38px); line-height:1.15; text-align:center; max-width:var(--lp-col); } .lp-split{ display:grid; grid-template-columns:352px minmax(0,1fr); column-gap:var(--sp-48); row-gap:0; align-items:start; } /* Senza min-width:0 la riga flex dei folio allarga la colonna e con lei tutta la pagina: la griglia userebbe min-content, che qui vale la somma dei cinque fogli. */ .lp-split > *{ min-width:0; } .lp-rail, .lp-slider-testa{ min-width:0; } .lp-split-testo .lp-p{ font-size:var(--corpo-size); line-height:1.58; margin-bottom:var(--sp-16); } /* Il titolo appoggia sui fogli. Prima stava a 24 di margine dentro una riga alta 64: fra la frase e la cosa che la frase annuncia passava quasi un centimetro di vuoto, e le due si leggevano come due blocchi separati. Ora e' 12 — la distanza che un titolo tiene dal suo testo. */ .lp-slider-testa{ margin-bottom:var(--sp-12); } .lp-slider-tit{ font-weight:700; font-size:20px; line-height:1.3; letter-spacing:-.02em; color:var(--carbone); margin:0; max-width:calc(100% - 140px); } /* Il gancio non e' piu' accanto al titolo: sta a cavallo del bordo alto dei fogli, in alto a destra. Meta' della freccia resta fuori, meta' sormonta la scheda: e' il bordo a tagliarla, ed e' quello che la fa leggere come un gesto sopra i fogli e non come un'icona accanto a loro. La parola sta sopra la freccia, perche' si legge prima di seguire il segno. La quota: la freccia e' alta 58, sopra ha la parola (16) e il suo distacco (4). Perche' il bordo la tagli a meta' l'aggancio deve stare a -(16+4+29) = -49; 48 e' il valore in scala piu' vicino, e lascia 28 fuori e 30 dentro. */ .lp-split-slider{ position:relative; } .lp-aprine{ position:absolute; z-index:3; right:0; top:calc(var(--sp-48) * -1); display:flex; flex-direction:column; align-items:center; width:104px; color:var(--etichetta-chiara); pointer-events:none; } .lp-aprine svg{ width:72px; height:58px; } .lp-aprine path{ fill:none; stroke:var(--rame); stroke-width:2; stroke-linecap:square; } .lp-aprine span{ font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:var(--carbone); margin-bottom:var(--sp-4); } /* hidden, NON clip. Qui c'era `clip`, e per un motivo giusto: hidden lascia che il browser scrolli il rail quando il fuoco arriva su un folio fuori vista, e da quel momento transform e scrollLeft muovono la stessa riga su due sistemi diversi. Ma il prezzo era molto piu' alto del problema che risolveva. `clip` taglia il DISEGNO ma non crea un contenitore di scorrimento: il contenuto tagliato continua a esistere nel conto della larghezza del documento. Qui dentro c'e' una riga di nove fogli affiancati — misurata il 2026-09-22 a 430px di schermo: **2.712 px**. Su iOS Safari quel numero diventa la larghezza della pagina, e il browser rimpicciolisce tutto per farcelo stare: la landing si apre come se fosse un sito desktop, a schermo pieno, anche restando fermi sulla prima schermata. Non c'entrano lo scroll ne' la rivelazione. `hidden` crea un contenitore vero: il contenuto sta dentro e non entra nel conto. E' l'unico modo che tutti i browser trattano allo stesso modo. Il vecchio problema del fuoco si paga con tre righe di JS (sezione 2 di landing.js), che il rail lo riportano a zero. */ .lp-rail{ overflow:hidden; } .lp-folio-riga{ display:flex; gap:var(--sp-24); transition:transform var(--durata-pannello) ease; } /* Il folio adesso e' la scheda vera: 1358x1920, cioe' 0,707, che e' l'A4 verticale — lo stesso rapporto che il riquadro aveva gia'. Niente padding e niente etichetta sopra: l'intestazione, il numero di richiesta e il marchio stanno dentro l'immagine, e un secondo cappello fuori direbbe la stessa cosa due volte. A 315px il corpo del testo scende sotto i 5px: e' voluto. Da qui si legge il formato — che e' una scheda compilata, non due righe di modulo — e per leggerla si apre. Via anche il filetto rame in testa: la scheda porta gia' la sua fascia scura col marchio, e il filetto ci finiva sotto perche' l'inset shadow sta dietro al contenuto. */ .lp-folio{ flex:0 0 315px; aspect-ratio:1/1.414; background:var(--bianco); border:1px solid var(--bordo); padding:0; overflow:hidden; cursor:zoom-in; text-align:left; font-family:var(--font); transition:border-color var(--durata-micro) linear; } .lp-folio:hover{ border-color:var(--carbone); } .lp-folio-foto{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; } .lp-slider-cmd{ display:flex; align-items:center; gap:var(--sp-12); margin-top:var(--sp-24); } .lp-arrow{ appearance:none; cursor:pointer; background:transparent; width:44px; height:44px; border:2px solid var(--bordo); border-radius:var(--raggio); display:flex; align-items:center; justify-content:center; transition:border-color var(--durata-micro) linear; } .lp-arrow svg{ width:18px; height:12px; } .lp-arrow path{ fill:none; stroke:var(--carbone); stroke-width:2; stroke-linecap:square; } .lp-arrow:hover{ border-color:var(--carbone); } .lp-arrow[disabled]{ opacity:.35; cursor:not-allowed; } .lp-punti{ display:flex; gap:var(--sp-8); margin-left:var(--sp-8); } .lp-punti i{ width:8px; height:8px; background:var(--bordo); display:block; } .lp-punti i.on{ background:var(--rame); } /* Ingrandimento del folio */ .lp-lente{ position:fixed; inset:0; z-index:90; background:rgba(22,33,40,.94); display:none; align-items:center; justify-content:center; padding:var(--sp-32); } .lp-lente[open]{ display:flex; } /* LA LENTE E' UNA GALLERIA. La scheda aperta sta INTERA in altezza, senza scorrimento: l'altezza la detta la finestra, la larghezza segue da sola perche' l'A4 ha un rapporto fisso. A destra la pila delle altre richieste, in piccolo: serve a dire che ce ne sono altre e a saltarci dentro senza chiudere. Il prezzo dichiarato: legare la scheda all'altezza della finestra vuol dire che su uno schermo basso il testo si rimpicciolisce. E' il patto di ogni galleria — si vede tutto il foglio, e per leggere le righe fitte si ingrandisce la finestra. */ .lp-lente-in{ display:flex; align-items:center; justify-content:center; gap:var(--sp-24); max-width:100%; max-height:88vh; } .lp-lente-foglio{ background:var(--bianco); min-width:0; min-height:0; display:flex; padding:0; } .lp-lente-foto{ display:block; width:auto; height:auto; max-height:88vh; max-width:100%; object-fit:contain; } /* LA PILA — uno slider verticale, non un box che scorre. La barra di scorrimento non era solo brutta: mangiava larghezza al contenitore, e le miniature ci finivano dentro tagliate. Qui la vista e' chiusa (overflow:hidden) ed e' il nastro a traslare, quindi la colonna e' larga ESATTAMENTE quanto una miniatura, senza padding e senza barra da scontare. Il movimento lo comandano le due frecce, e segue da solo quando si cambia scheda da tastiera. */ .lp-lente-pila{ flex:0 0 auto; align-self:stretch; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:var(--sp-8); } .lp-pila-vista{ flex:1 1 auto; min-height:0; width:88px; overflow:hidden; } .lp-pila-nastro{ display:flex; flex-direction:column; gap:var(--sp-8); transition:transform var(--durata-pannello) ease; } .lp-lente-mini{ flex:0 0 auto; width:88px; aspect-ratio:1/1.414; padding:0; appearance:none; cursor:pointer; overflow:hidden; background:var(--bianco); border:1px solid rgba(245,245,245,.28); opacity:.5; transition:opacity var(--durata-micro) linear, border-color var(--durata-micro) linear; } .lp-lente-mini img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; } .lp-lente-mini:hover{ opacity:.85; } .lp-lente-mini[aria-current="true"]{ opacity:1; border:2px solid var(--rame); } .lp-pila-freccia{ flex:0 0 auto; width:88px; height:28px; appearance:none; cursor:pointer; background:transparent; border:1px solid rgba(245,245,245,.28); display:flex; align-items:center; justify-content:center; transition:border-color var(--durata-micro) linear; } .lp-pila-freccia svg{ width:12px; height:18px; } .lp-pila-freccia path{ fill:none; stroke:var(--ghiaccio); stroke-width:2; stroke-linecap:square; } .lp-pila-freccia:hover{ border-color:var(--ghiaccio); } .lp-pila-freccia[disabled]{ opacity:.3; cursor:not-allowed; } /* Sul telefono la pila non ci sta a fianco: passa sotto, in riga. Li' le frecce non servono — si trascina col dito — e la barra la nasconde il sistema operativo da solo. */ @media (max-width:640px){ .lp-lente-in{ flex-direction:column; gap:var(--sp-16); max-height:92vh; } .lp-lente-foto{ max-height:70vh; } .lp-lente-pila{ align-self:stretch; flex-direction:row; max-height:none; } .lp-pila-freccia{ display:none; } .lp-pila-vista{ width:auto; flex:1 1 auto; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } .lp-pila-vista::-webkit-scrollbar{ display:none; } .lp-pila-nastro{ flex-direction:row; transform:none !important; } .lp-lente-mini{ width:56px; } } .lp-lente-chiudi{ position:absolute; top:var(--sp-24); right:var(--sp-24); appearance:none; cursor:pointer; background:transparent; border:2px solid var(--ghiaccio); width:44px; height:44px; display:flex; align-items:center; justify-content:center; } .lp-lente-chiudi path{ fill:none; stroke:var(--ghiaccio); stroke-width:2; stroke-linecap:square; } .lp-lente-chiudi:hover{ border-color:var(--rame); } .lp-lente-chiudi:hover path{ stroke:var(--rame); } /* --- 7 · ④ COME NASCE UN CONTATTO PROFILATO --------------- */ .lp-timeline{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } /* Le quattro tappe sono un percorso solo: nessuna e' marcata diversa dalle altre. Ma le due direzioni non pesano uguale. ORIZZONTALI in grigio scuro: sono la griglia su cui poggia il disegno, tengono la struttura e non devono chiamare. VERTICALI e quadratini in rame: sono il percorso, la cosa che il lettore deve seguire, e cadono dove sta il contenuto. Il grigio scuro su ardesia fa 2,61:1 — sul chiaro il --bordo faceva 1,29, quindi qui la linea e' addirittura piu' presente di prima. Il rame fa 3,89:1 su ardesia: per un segno la soglia e' 3:1, e il numero e' 24px in Black, quindi testo grande, stessa soglia. */ .lp-tappa{ position:relative; padding:0 var(--sp-24); border-top:2px solid var(--etichetta-chiara); } .lp-tappa::before{ content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; background:var(--rame); border:2px solid var(--rame); z-index:2; } .lp-tappa::after{ content:""; position:absolute; left:var(--lp-filo-x); top:8px; width:var(--lp-filo-w); height:calc(100% - 34px); background:var(--rame); } /* La terza scende fino al riquadro che la commenta, e li' si ferma. Sforava di 12px (top:8 + 100% + 4) e quei 12px finivano SOTTO il fondo bianco del riquadro, che e' dipinto dopo: la linea spariva sotto la scatola e ricompariva come bordo, e nel passaggio si leggeva come un assottigliamento. Ora finisce esatta sul fondo della tappa, dove il bordo del riquadro la riprende: un solo segno continuo, nessuna sovrapposizione da nascondere. */ .lp-tappa--filo::after{ height:calc(100% - 8px); } .lp-tappa-n{ font-weight:900; font-size:24px; letter-spacing:-.01em; line-height:1; color:var(--rame); margin:var(--sp-24) 0 var(--sp-12); } .lp-tappa p:not(.lp-tappa-n){ font-size:15.5px; line-height:1.5; margin:0; color:var(--carbone); } .lp-coda{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } .lp-coda-cella{ grid-column:3 / 5; padding-left:var(--lp-filo-x); } /* La giunzione col filo della tappa 3. Le due quote coincidono gia' (filo a left:5 largo 2 · cella con padding-left:5 e bordo da 2), ma il contorno grigio da 1px rompeva l'innesto: nell'angolo alto a sinistra i due bordi si uniscono a 45°, e il grigio mangiava in diagonale il rame proprio dove il filo arriva. Sul campo ardesia il contorno non serve — il bianco si stacca da solo — e togliendolo il filo entra nel bordo del riquadro senza una tacca. */ .lp-coda-box{ background:var(--bianco); border-left:var(--lp-filo-w) solid var(--rame); padding:var(--sp-16) var(--sp-24); } .lp-coda-box p{ font-size:14.5px; line-height:1.5; margin:0; color:var(--carbone); } /* La stessa timeline sul campo ardesia. Ora che il percorso e' tutto rame non c'e' quasi niente da riscrivere: filetto, quadratino, filo e numero valgono su ogni fondo. Cambia solo il testo corrente. I due riquadri bianchi restano bianchi — su ardesia sono oggetti, ed e' il motivo per cui reggono anche qui. */ .lp-sez--scura .lp-tappa p:not(.lp-tappa-n){ color:var(--ghiaccio); } /* --- 8 · ⑤ IL CASO ---------------------------------------- */ .lp-meta{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-64); align-items:start; } .lp-meta-media{ position:sticky; top:var(--sp-32); } /* La cifra resta nel flusso, in carbone: il rame sotto i 24px e' vietato dal sistema (3,86:1 su ghiaccio) e qui il numero vive dentro un paragrafo da 17. Il peso lo porta il nero, non il colore. */ .lp-caso-cifra{ font-weight:900; color:var(--carbone); letter-spacing:-.01em; white-space:nowrap; } /* IL RIQUADRO — fondo bianco e filetto rame a sinistra. E' lo stesso oggetto della coda del ④: tira fuori dal filo del racconto un pezzo che va letto da solo. Nel ⑥ raccoglie i tre paragrafi su COME lavoravano, che sono la spiegazione del numero: non tre frasi in fila, un blocco. */ .lp-riquadro{ background:var(--bianco); border-left:var(--lp-filo-w) solid var(--rame); padding:var(--sp-32); margin:var(--sp-32) 0; font-size:var(--corpo-size); line-height:var(--corpo-lh); color:var(--carbone); } .lp-riquadro p{ margin:0 0 var(--sp-24); } .lp-riquadro p:last-child{ margin-bottom:0; } /* LA NOTA — il limite dichiarato. Non puo' essere lo stesso oggetto del riquadro: due blocchi identici uno sotto l'altro si leggono come due parti della stessa cosa, e qui una spiega mentre l'altra ammette. Cambia in tutto: niente fondo, filetto orizzontale sopra invece che verticale a sinistra, corpo un gradino sotto e colore da testo secondario. E' la forma della nota a pie' di racconto, che e' esattamente quello che fa — un'ammissione detta a voce, non un claim da incorniciare. Grigio su ghiaccio 5,77:1, sopra soglia per il testo piccolo. */ .lp-nota{ margin:var(--sp-32) 0 0; padding-top:var(--sp-16); border-top:1px solid var(--bordo); font-size:15px; line-height:1.6; color:var(--etichetta-chiara); } /* IL REGISTRO — il video sta alla misura piena del blocco (800), non in una colonna a fianco: e' la prova del numero, e una prova non si mette a margine. Rapporto bloccato a 16/9 cosi' il riquadro non salta quando il poster arriva. Il fondo carbone sotto il poster copre il momento fra il primo frame e il rendering, che su un campo chiaro si vedrebbe. */ /* Il registro prende la fascia piena, come la tabella del ②: e' la prova del numero, e in pagina non c'e' niente di piu' largo. */ .lp-registro{ max-width:var(--lp-col); margin-inline:auto; } .lp-registro-video{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:var(--carbone); border:1px solid var(--bordo); } /* PROVA (⑤ bis) — IL RACCONTO E IL SUO BILANCIO, affiancati. Il componente di sistema resta quello: cifre in rame, filetti, mai scatole. Cambiano orientamento e misura, che sono composizione. 700 + 48 + 260 fa 1008, dentro la fascia da 1120. In verticale e stretto il prospetto non ha piu' il problema che aveva in orizzontale — quattro cifre da 38px non stanno in 800 — e in piu' resta accanto al racconto mentre si legge, invece di aspettare la fine: e' sticky, quindi i numeri accompagnano la storia. La cifra resta ai 38px del componente: in 272px di contenuto «2,5 mln €» ci sta con margine, e non serve piegarla. Rame su bianco 4,21:1: a 38px e' testo grande, soglia 3:1. */ /* Il blocco sta sulla fascia piena, come tutto il resto della pagina. Le colonne non sono due numeri scelti: il racconto vale --lp-testo, che e' la misura di lettura del sistema, e al prospetto va quello che resta. Cosi' 1120 non si spezza in quote inventate: 720 di lettura, 64 di gap, 336 al bilancio. */ .lp-caso-due{ display:grid; grid-template-columns:minmax(0,var(--lp-testo)) minmax(0,1fr); gap:var(--sp-64); align-items:start; } .lp-caso-testo{ min-width:0; } .lp-prospetto{ background:var(--bianco); padding:var(--sp-32); position:sticky; top:var(--sp-32); } .lp-prospetto > *{ padding:var(--sp-24) 0; } .lp-prospetto > * + *{ border-top:1px solid var(--bordo); } .lp-prospetto > :first-child{ padding-top:0; } .lp-prospetto > :last-child { padding-bottom:0; } .lp-prospetto .eb-dato-txt { margin:var(--sp-8) 0 0; font-size:14px; } /* Il bilancio ha due forme, una per misura, e non convivono mai. Da 1025 in su e' il prospetto in colonna: sta a fianco e accompagna la lettura. Sotto, una colonna a fianco non ci sta — impilarla sotto il racconto vorrebbe dire mettere quattro cifre dopo il punto finale, dove non aggiungono niente. Li' il bilancio torna a essere la frase da cui era nato, dentro il testo. display:none e non visibility: quella spenta esce anche dall'albero di accessibilita', quindi non viene letta due volte. */ .lp-solo-stretto{ display:none; } @media (max-width:1024px){ .lp-caso-due{ grid-template-columns:1fr; } .lp-caso-testo{ max-width:var(--lp-testo); margin-inline:auto; } .lp-prospetto{ display:none; } .lp-solo-stretto{ display:block; } } /* --- 9 · ⑥ COME SI INIZIA --------------------------------- */ /* ⑥ — LA SCHEDA TECNICA. La sezione era nuda perche' i cinque passi erano cinque paragrafi: il numero stava dentro il testo come un segno di lista, e non c'era niente a dire dove finiva uno e cominciava l'altro. Qui il numero esce dal testo e prende una colonna sua, in rame e a due cifre — 01, 02… — che e' come si numera un elenco tecnico. Fra un passo e l'altro un filetto, che e' il modo del sistema per dividere: filetti, mai scatole. L'allineamento e' sulla base: 32px e 17px condividono la riga di terra, cosi' il numero non galleggia sopra la sua frase. Nessun passo e' marcato diverso: cinque momenti dello stesso avvio, e il quinto chiude senza alzare la voce. Rame su bianco 4,21:1: a 32px e' testo grande, soglia 3:1. */ .lp-scala{ counter-reset:s; max-width:var(--lp-testo); margin-inline:auto; } .lp-scalino{ counter-increment:s; display:grid; grid-template-columns:72px minmax(0,1fr); gap:var(--sp-32); align-items:baseline; padding:var(--sp-32) 0; } .lp-scalino::before{ content:counter(s,decimal-leading-zero); font-weight:900; font-size:32px; line-height:1; letter-spacing:-.032em; color:var(--rame); font-variant-numeric:tabular-nums; } .lp-scalino + .lp-scalino{ border-top:1px solid var(--bordo); } .lp-scalino:first-child{ padding-top:0; } .lp-scalino p{ font-size:var(--corpo-size); line-height:var(--corpo-lh); margin:0; } .lp-scala-nota{ max-width:var(--lp-testo); margin:var(--sp-48) auto 0; font-size:var(--corpo-size); line-height:var(--corpo-lh); color:var(--etichetta-chiara); } @media (max-width:640px){ /* 72px di colonna su una pagina da 390 mangiano un quinto della riga: il numero torna sopra la sua frase. */ .lp-scalino{ grid-template-columns:1fr; gap:var(--sp-8); } } /* --- 10 · ⑦ GARANZIE E PALETTI ---------------------------- */ /* Le due righe che aprono le famiglie salgono al livello --titolo del sistema (28-32px, Bold): a 19px erano fuori scala, in mezzo fra lead e corpo, e non si leggevano come le teste di due gruppi. La dimensione la porta .eb-titolo, qui resta la composizione. Il punto in fondo non c'e' piu': aprono, non chiudono. Il NO resta grigio e il SI passa al rame — a quella misura il rame e' testo grande, 3,84:1 su ghiaccio contro una soglia di 3:1, ed e' l'unica riga rame della sezione: cade dove la lettura deve girare. */ .lp-famiglia{ text-align:center; margin:0 0 var(--sp-32); color:var(--carbone); } .lp-famiglia--no{ color:var(--etichetta-chiara); } .lp-famiglia--si{ color:var(--rame); } .lp-terzi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-32); } .lp-carta{ background:var(--bianco); border:1px solid var(--bordo); padding:var(--sp-32) var(--sp-24); display:flex; flex-direction:column; } .lp-carta--si{ box-shadow:inset 0 3px 0 var(--rame); } .lp-carta h3{ font-weight:700; font-size:17px; line-height:1.32; letter-spacing:-.008em; margin:var(--sp-24) 0 var(--sp-12); color:var(--carbone); } .lp-carta p{ font-size:15px; line-height:1.55; color:var(--carbone); margin:0; } /* Le tre del NO stanno sul campo ardesia. Il filetto in testa non c'e' perche' non serve: a distinguere le due famiglie basta il salto di superficie, che e' un segno molto piu' forte di un filetto. Le tre del SI restano bianche col filetto rame, e il confronto sta li'. ORDINE: questo blocco sta DOPO le regole generiche della carta, e deve restarci. .lp-carta--no h3 e .lp-carta h3 hanno la stessa specificita' (0,1,1): a decidere e' chi viene dopo. Messo sopra, il titolo tornava carbone su ardesia, cioe' 1,5:1 — illeggibile. Ghiaccio su ardesia fa 14,94:1, l'icona a 7,15:1. */ .lp-carta--no{ background:var(--ardesia); border-color:var(--ardesia); } .lp-carta--no h3{ color:var(--ghiaccio); } .lp-carta--no p { color:var(--ghiaccio); } .lp-gruppo + .lp-gruppo{ margin-top:var(--sp-64); } /* --- 11 · ⑧ IL FORM --------------------------------------- */ .lp-form-pannello{ background:var(--ghiaccio); color:var(--carbone); clip-path:polygon(var(--smusso-corsa) 0,100% 0,100% 100%,0 100%,0 44.77px); padding:var(--sp-64) var(--sp-32) var(--sp-32); } @media (max-width:640px){ .lp-form-pannello{ padding:var(--sp-64) var(--sp-24) var(--sp-24); } } /* LA BARRA — cinque passi, e sono bottoni. Portano due informazioni in una: dove sei e a che punto sei. Grigio = domanda senza risposta, rame = domanda risposta. Alla fine sono tutti e cinque rame, che e' il modo piu' corto per dire «hai finito». Il passo su cui sei ha il numero in carbone: e' un terzo stato indipendente dagli altri due, cosi' una domanda gia' risposta su cui torni si legge come risposta E come corrente. Il padding verticale non si vede ma serve: porta l'area cliccabile a 45px, dentro il target di 44 del sistema. */ .lp-barra{ display:flex; gap:var(--sp-8); margin-bottom:var(--sp-32); } .lp-passo-b{ flex:1; appearance:none; background:transparent; border:0; padding:var(--sp-8) 0 var(--sp-12); cursor:pointer; font-family:var(--font); text-align:left; display:flex; flex-direction:column; gap:var(--sp-8); } .lp-passo-b > span{ font-weight:500; font-size:13px; line-height:1; color:var(--etichetta-chiara); font-variant-numeric:tabular-nums; transition:color var(--durata-micro) linear; } .lp-passo-b > i{ display:block; height:4px; background:var(--bordo); transition:background var(--durata-micro) linear; } .lp-passo-b.fatto > span{ color:var(--rame); font-weight:700; } .lp-passo-b.fatto > i { background:var(--rame); } .lp-passo-b[aria-current="step"] > span{ color:var(--carbone); font-weight:900; } .lp-passo-b[disabled]{ cursor:default; } .lp-passo-b:not([disabled]):hover > i{ background:var(--etichetta-chiara); } .lp-passo-b.fatto:not([disabled]):hover > i{ background:var(--rame-premuto); } .lp-domanda{ display:none; } .lp-domanda.on{ display:block; } .lp-domanda:focus{ outline:0; } /* riceve il fuoco per farsi annunciare, non per farsi vedere */ /* Le domande a scelta sono gruppi con una legenda: senza, un lettore di schermo annuncia "Si', pulsante di opzione 1 di 2" e la domanda non la sente nessuno. */ .lp-gruppo-scelte{ border:0; padding:0; margin:0; min-width:0; } .lp-gruppo-scelte > legend{ padding:0; display:block; width:100%; float:left; } .lp-gruppo-scelte > legend + *{ clear:both; } .lp-domanda-eti{ display:block; font-weight:500; font-size:var(--label-min); letter-spacing:.14em; text-transform:uppercase; color:var(--etichetta-chiara); margin-bottom:var(--sp-12); } .lp-domanda-tit{ font-weight:700; font-size:18px; line-height:1.35; letter-spacing:-.01em; margin:0 0 var(--sp-24); color:var(--carbone); } .lp-scelte{ display:flex; flex-wrap:wrap; gap:var(--sp-12); } .lp-scelta{ position:relative; } .lp-scelta input{ position:absolute; opacity:0; width:1px; height:1px; } .lp-scelta span{ display:flex; align-items:center; gap:var(--sp-12); cursor:pointer; min-height:var(--target-min); padding:var(--sp-12) var(--sp-16); background:var(--bianco); border:1px solid var(--bordo); font-size:var(--input-min); line-height:1.3; color:var(--carbone); transition:border-color var(--durata-micro) linear; } .lp-scelta span::before{ content:""; width:16px; height:16px; flex:none; border:2px solid var(--etichetta-chiara); background:var(--bianco); } .lp-scelta:hover span{ border-color:var(--carbone); } .lp-scelta input:checked + span{ border-color:var(--rame); } /* La casella si riempie, la scelta singola porta un quadrato interno. La D1 e la D4 avanzano da sole al clic, la D3 no: con lo stesso marcatore il lettore non capisce che li' puo' sceglierne cinque. Il raggio zero e' invariante, quindi il cerchio non e' la strada. */ .lp-scelta input[type="checkbox"]:checked + span::before{ background:var(--rame); border-color:var(--rame); } /* Dentro la casella piena ci va la spunta: uno stato non si comunica con il colore soltanto. Due bordi ruotati, nessun glifo da caricare. */ .lp-scelta span{ position:relative; } .lp-scelta input[type="checkbox"]:checked + span::after{ content:""; position:absolute; left:var(--sp-16); top:50%; width:5px; height:10px; margin-top:-7px; margin-left:5px; border:2px solid var(--bianco); border-top:0; border-left:0; transform:rotate(42deg); } .lp-scelta input[type="radio"]:checked + span::before{ border-color:var(--rame); box-shadow:inset 0 0 0 2px var(--bianco), inset 0 0 0 8px var(--rame); } .lp-scelta input:focus-visible + span{ box-shadow:var(--focus-ring); } /* La nota sotto il campo: dice una cosa che l'etichetta da sola non direbbe. Grigio su bianco del pannello, 12px come da componente. */ .lp-campo-nota{ color:var(--etichetta-chiara); } /* L'errore sta SOTTO il campo che sbaglia, non in fondo alla schermata: con quattro campi in colonna un messaggio unico dice che qualcosa non va, non dove. Vuoto sparisce, cosi' non lascia un buco nel ritmo verticale quando non serve. Rosso su ghiaccio 6,16:1, e non e' mai solo il colore a dirlo: c'e' la frase, e il campo prende aria-invalid. */ /* La misura: 16px in Bold, non i 12 dell'etichetta. A 12 e peso 500 l'errore era grande e pesante ESATTAMENTE come la nota grigia che gli sta accanto — stessa taglia, stesso peso, cambiava solo il colore. E un messaggio che si distingue per il solo colore, chi scorre veloce non lo vede, e chi non distingue i rossi non lo vede mai. Ora e' piu' grosso e piu' nero della nota: si stacca anche a colori spenti. */ .lp-campo-err{ margin:var(--sp-12) 0 0; font-weight:700; font-size:16px; line-height:1.4; color:var(--error); } .lp-campo-err:empty{ display:none; } /* Il campo esca dell'antispam. Fuori schermo e non nel flusso, ma NON display:none: i robot che cercano le trappole saltano cio' che e' spento, mentre un campo che c'e' e non si vede lo compilano. */ .lp-esca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .lp-campo-eti{ display:block; font-size:13px; font-weight:500; color:var(--etichetta-chiara); margin-bottom:var(--sp-8); } textarea.eb-campo{ min-height:96px; resize:vertical; } .lp-nav{ display:flex; gap:var(--sp-12); margin-top:var(--sp-24); flex-wrap:wrap; } .lp-consenso{ display:flex; align-items:flex-start; gap:var(--sp-12); margin-top:var(--sp-24); font-size:13.5px; line-height:1.45; color:var(--etichetta-chiara); cursor:pointer; } .lp-consenso input{ position:absolute; opacity:0; width:1px; height:1px; } .lp-consenso .lp-quadro{ width:18px; height:18px; flex:none; margin-top:2px; border:2px solid var(--etichetta-chiara); background:var(--bianco); } .lp-consenso{ position:relative; } .lp-consenso input:checked ~ .lp-quadro{ background:var(--rame); border-color:var(--rame); } /* Stessa spunta delle caselle del form: due controlli che fanno la stessa cosa non possono avere due segni diversi. */ .lp-consenso input:checked ~ .lp-quadro::after{ content:""; display:block; width:5px; height:10px; margin:1px 0 0 5px; border:2px solid var(--bianco); border-top:0; border-left:0; transform:rotate(42deg); } .lp-consenso input:focus-visible ~ .lp-quadro{ box-shadow:var(--focus-ring); } .lp-consenso a{ color:var(--carbone); } /* L'errore generale sale al livello del testo corrente, 17px in Bold: e' la frase che ferma l'invio, non una didascalia. Il filetto passa da 3 a 4 px e il testo prende fiato: cosi' il blocco si legge come un blocco e non come una riga persa fra due campi. */ .lp-errore{ font-weight:700; font-size:var(--corpo-size); line-height:1.45; color:var(--error); margin:var(--sp-16) 0 0; display:none; } .lp-errore.on{ display:flex; gap:var(--sp-12); align-items:center; } .lp-errore::before{ content:""; width:4px; align-self:stretch; min-height:24px; background:var(--error); flex:none; } /* Le 12 icone del sistema: griglia 24 su tela 48, tratto 2, linecap square. Il colore arriva dalle classi, mai da attributi inline: inline resterebbero carbone su ardesia, cioe' 1,44:1. */ .eb-icona{ flex:none; } .lp-carta .eb-icona{ width:44px; height:44px; } /* Sul campo ardesia il grigio chiaro faceva 2,61:1. Questa regola viveva da quando le carte del NO erano trasparenti su ghiaccio. */ .lp-carta--no .eb-icona{ stroke:var(--etichetta-scura); } /* Il segno dei segnaposto. Il glifo di pausa lo rende il font emoji a colori: su una pagina a palette bloccata sarebbe l'unico pixel fuori tavolozza. Qui e' un quadrato rame, cioe' un segno e non testo. */ .lp-attesa{ display:inline-block; width:9px; height:9px; background:var(--rame); margin-right:var(--sp-8); vertical-align:1px; flex:none; } /* --- 12 · FOOTER ------------------------------------------ */ /* IL PIEDE E IL SUO CONFINE. Sopra c'e' l'⑧, che e' ardesia con le oblique: il piede lo era pure, e due campi identici attaccati non sono due campi — il piede leggeva come la coda del form. Si separano senza cambiare tinta. Primo: le oblique restano solo all'⑧. La trama diventa il modo di distinguerli, ed e' coerente col resto della pagina — la texture sta dove si lavora, non dove si firma. Secondo: il filetto. E' lo stesso ghiaccio al 22% che dentro il piede stacca la riga legale; qui pero' corre a tutta fascia, e la scala dice quale dei due confini e' quello grosso. Il fondo NON si schiarisce: --carbone e' «mai fondo di pagina» (design system §2), e la chiusura scura e' gia' una decisione. */ .lp-footer{ background:var(--ardesia); color:var(--ghiaccio); padding-block:var(--sp-64); border-top:1px solid rgba(245,245,245,.22); } .lp-footer-in{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-32); flex-wrap:wrap; } .lp-footer p{ font-size:14px; line-height:1.6; margin:0; max-width:46ch; } .lp-footer a{ color:var(--ghiaccio); } .lp-footer-link{ display:flex; gap:var(--sp-24); flex-wrap:wrap; font-size:14px; } /* I recapiti.
nasce in corsivo: qui e' un dato, non una citazione. Telefono e mail sono link veri — su un telefono la riga del footer e' il modo piu' corto per chiamare. */ .lp-footer-dati{ font-style:normal; font-size:14px; line-height:1.7; margin-top:var(--sp-12); color:var(--ghiaccio); } /* La riga legale chiude il piede: centrata su tutta la fascia, separata da un filetto e non da una scatola. Selettore a due classi, non una: .lp-footer p le imponeva 46ch di misura e 14px, e con 0,1,1 di specificita' batteva la classe da sola. Da qui le due righe strette e storte a sinistra. Colore: il ghiaccio del sistema portato al 55%, come il filetto qui sopra sta al 22%. Non e' un colore nuovo, e' lo stesso con un'alpha. Fa 5,45:1 contro i 7,15 di prima: si spegne di un gradino e resta sopra la soglia AA per il testo piccolo. */ .lp-footer .lp-footer-legale{ margin:var(--sp-48) 0 0; padding-top:var(--sp-24); border-top:1px solid rgba(245,245,245,.22); max-width:none; text-align:center; font-size:13px; line-height:1.6; color:rgba(245,245,245,.55); } .lp-footer-link a{ display:inline-flex; align-items:center; min-height:var(--target-min); } /* L'etichetta dei segnaposto vive su tutte e due le superfici: su ghiaccio il grigio da ardesia farebbe 2,11:1. */ .lp-aperto{ display:inline-block; font-weight:500; font-size:var(--label-min); letter-spacing:.1em; text-transform:uppercase; color:var(--etichetta-chiara); box-shadow:inset 0 0 0 1px var(--bordo); padding:var(--sp-4) var(--sp-8); margin-top:var(--sp-16); } .lp-fold-sez .lp-aperto, .lp-footer .lp-aperto, .lp-sez--scura .lp-aperto{ color:var(--etichetta-scura); box-shadow:inset 0 0 0 1px rgba(245,245,245,.22); } /* --- 13 · THANK-YOU --------------------------------------- */ .lp-ty-item{ background:var(--bianco); border:1px solid var(--bordo); box-shadow:inset 0 3px 0 var(--rame); padding:var(--sp-32); margin-bottom:var(--sp-24); } .lp-ty-item p{ font-size:var(--corpo-size); line-height:var(--corpo-lh); margin:0 0 var(--sp-24); } /* --- 14 · LA BARRA CHE RESTA ------------------------------- */ /* Il pulsante della piega non muore quando esce dallo schermo: si ritira qui e resta a disposizione per tutta la pagina. La barra e' ardesia pieno — nessun velo, nessuna sfocatura: il sistema comunica l'elevazione con bordo, contrasto e spazio (§8), e il filetto in basso e' lo stesso segno con cui il piede si stacca dal form. Un solo vocabolario per tutti i confini. Fuori campo non e' solo spostata, e' invisibile per davvero: una barra traslata resta raggiungibile col tab, e si finirebbe a premere un pulsante che non si vede. La visibility scatta senza durata, ma DOPO la corsa in uscita — cosi' l'uscita si vede tutta e l'entrata parte gia' visibile. */ .lp-barra-fissa{ position:fixed; inset:0 0 auto 0; z-index:80; background:var(--ardesia); border-bottom:1px solid rgba(245,245,245,.22); transform:translateY(-100%); visibility:hidden; transition:transform var(--durata-pannello) ease-out, visibility 0s linear var(--durata-pannello); } .lp-barra-fissa.lp-viva{ transform:translateY(0); visibility:visible; transition:transform var(--durata-pannello) ease-out, visibility 0s; } .lp-barra-fissa-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-24); min-height:var(--sp-64); } /* Il marchio scende a due terzi della misura in testata: resta lo stesso lockup, non diventa un altro segno. L'anello di rispetto lo fa il respiro della barra, non un margine sull'immagine. `flex:0 1 auto` con `min-width:0` non e' un dettaglio: e' cio' che decide CHI cede quando lo schermo si stringe. La barra ha due inquilini e uno dei due deve rimpicciolirsi — cede il marchio, che la testata in cima alla pagina ha gia' detto, e non l'invito, che e' l'unico motivo per cui la barra esiste. Cosi' il lockup si accorcia in proporzione fino a 320px invece di sparire di colpo sotto una soglia, e la riga non va mai a capo ne' in fuori. */ .lp-barra-fissa .lp-logo{ width:calc(var(--lp-logo) * 0.64); margin:0; flex:0 1 auto; min-width:0; } /* Il pulsante invece non cede e non va a capo: e' l'altra meta' della stessa decisione. Senza questo, a 320px la frase si spezzava in due righe e la barra cresceva a 80px — su uno schermo dove i pixel in verticale sono la cosa piu' cara che c'e'. */ .lp-barra-fissa .eb-btn{ white-space:nowrap; flex:none; } /* --- 15 · LA RIVELAZIONE ALLO SCROLL ----------------------- */ /* Ogni blocco entra da 16px piu' in basso mentre lo scorri. Non e' decorazione: e' il modo in cui una pagina che si legge in sequenza — una lettera, non un sito — dice «questa e' una cosa nuova» a chi sta scendendo. La durata e' --durata-retta, il token da 700ms: e' l'unico del sistema a scala di composizione, definito «una volta per sezione», che e' esattamente questo. Con prefers-reduced-motion il token va a zero da solo e il blocco compare senza corsa — ma il JS in quel caso salta l'osservatore e mette tutto a posto comunque, che e' la rete di sotto. La piega non rivela niente: e' gia' sullo schermo quando la pagina arriva, e una cosa che c'e' non puo' comparire. */ .js .lp-rv{ opacity:0; transform:translateY(var(--sp-16)); transition:opacity var(--durata-retta) ease-out, transform var(--durata-retta) ease-out; } .js .lp-rv.lp-vista{ opacity:1; transform:none; } /* ============================================================ 16 · RESPONSIVE Ordine di riduzione del sistema (§11): prima le texture, poi i segni, poi dal taglio totale alla fascia, poi display e spazio. Mai comprimere testo, CTA o area interattiva. ============================================================ */ @media (max-width:1024px){ /* Impilato, l'ordine del DOM mette il titolo dello slider sopra al testo di sinistra: cosi' l'istruzione d'uso si staccherebbe dalla cosa da usare. Si riordina: prima il racconto, poi il titolo, poi i folio. */ .lp-split{ grid-template-columns:1fr; row-gap:var(--sp-32); } .lp-split > :first-child{ display:none; } .lp-split-testo { order:1; max-width:var(--lp-lead); margin-inline:auto; } .lp-slider-testa { order:2; margin-bottom:var(--sp-12); } .lp-slider-tit { max-width:none; } /* A colonna singola il titolo prende tutta la riga: il gancio non ha piu' un angolo libero da scavalcare, e torna nel flusso sopra i fogli invece di finire addosso al titolo. */ .lp-aprine { position:static; margin-bottom:var(--sp-12); } .lp-split-slider { order:3; } /* Su una colonna il testo non deve allargarsi oltre la misura di lettura: a 1024 sarebbero 110 battute per riga. */ .lp-meta{ grid-template-columns:1fr; gap:var(--sp-48); } .lp-meta > *{ width:100%; max-width:var(--lp-lead); margin-inline:auto; } .lp-meta-media{ position:static; } /* La timeline passa a 2x2: la tappa 3 finisce in basso a sinistra, e la sua coda resta appesa alla prima colonna. */ .lp-timeline{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--sp-32); } .lp-coda{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lp-coda-cella{ grid-column:1 / 2; padding-left:5px; margin-top:var(--sp-24); } .lp-tappa--filo::after{ height:calc(100% - 34px); } /* Il pannello prende la stessa misura della scheda che commenta: era l'unico blocco più largo di quello a cui si riferisce. */ .lp-pannello{ padding:var(--sp-24) var(--sp-32); max-width:640px; } } /* Le due terne del ⑦ saltano lo stadio 2+1: il copy dichiara "tre" due volte, e una riga da due con la cella vuota smonta il conteggio. */ @media (max-width:900px){ /* A colonna singola le carte prendono la stessa misura di lettura degli altri blocchi impilati: piene larghezza andrebbero oltre le 80 battute per riga. */ .lp-terzi{ grid-template-columns:1fr; gap:var(--sp-24); max-width:var(--lp-lead); margin-inline:auto; } } @media (max-width:768px){ .lp-coda{ grid-template-columns:1fr; } .lp-coda-cella{ grid-column:1; padding-left:var(--sp-32); } /* La timeline diventa verticale: le tappe una sotto l'altra, il filo passa dal bordo superiore al bordo sinistro. */ .lp-timeline{ grid-template-columns:1fr; row-gap:0; } .lp-tappa{ border-top:0; border-left:2px solid var(--rame); padding:0 0 var(--sp-32) var(--sp-32); } .lp-tappa::before{ top:0; left:-7px; } .lp-tappa::after{ display:none; } .lp-tappa:last-child{ padding-bottom:0; border-left-color:transparent; } .lp-tappa-n{ margin-top:0; } .lp-coda-cella{ margin-top:var(--sp-16); } } @media (max-width:640px){ /* Nessun rapporto fisso finche' la copertina e' una copertina: l'altezza la detta il testo, che e' chiuso ed e' la misura piu' affidabile che c'e'. Un 4:3 o un 1:1 si romperebbero di nuovo al prossimo cambio di font. La foto resta di sfondo, e il 16:9 torna da solo appena parte il player. */ .lp-video:not(.lp-video--attivo){ aspect-ratio:auto; } .lp-video:not(.lp-video--attivo) .lp-video-testo{ position:relative; } /* La copertina della piega fa eccezione: non ha piu' testo in HTML da far respirare, e il 16:9 e' il rapporto per cui la composizione e' stata disegnata. Lasciarla ad altezza libera vorrebbe dire deformare un'immagine che porta delle parole. */ .lp-video--intera:not(.lp-video--attivo){ aspect-ratio:16/9; } .lp-video--intera:not(.lp-video--attivo) .lp-video-testo{ position:absolute; } /* La copertina nuda della thank-you non ha claim ne' sottotitolo: il testo che detta l'altezza qui non c'e', e l'auto la schiaccerebbe all'altezza del solo pulsante. Senza testo da proteggere il rapporto fisso non rischia niente, quindi il 16:9 vale a ogni larghezza e il play torna al centro. */ /* §11, riduzione 4: display e spacing seguendo la scala. A 56px fissi l'H1 mangiava sei righe e spingeva il video sotto la piega: il video e' il pezzo che deve vedersi, il titolo scende. */ /* Il lead scende dal livello lead al livello corpo: sono due livelli del sistema, non uno scostamento, e su un telefono 17px stanno in cinque righe invece di sei. Serve a tenere la CTA vicina alla prima schermata, che si era allontanata allargando la copertina. */ .lp-fold-lead{ font-size:var(--corpo-size); } .lp-video{ margin-top:var(--sp-32); } .lp-btn-riga{ margin-top:var(--sp-32); } .eb-display-1{ font-size:clamp(34px,10vw,56px); } .eb-display-2{ font-size:clamp(26px,7.6vw,40px); } .eb-titolo { font-size:clamp(21px,5.4vw,28px); } .lp-folio{ flex:0 0 min(280px, 78vw); } /* Su una colonna il gancio non ha un angolo da scavalcare: torna nel flusso, sopra i fogli, e si corica in orizzontale. */ .lp-aprine{ position:static; flex-direction:row; align-items:center; gap:var(--sp-12); width:auto; margin-bottom:var(--sp-12); } .lp-aprine span{ margin-bottom:0; } .lp-aprine svg{ width:44px; height:36px; } .lp-footer-in{ align-items:flex-start; } /* La barra a colonna stretta: cade la coda della frase e il fiato ai lati del pulsante. Il TESTO della CTA non si comprime — la scala di riduzione del sistema lo vieta: quello che cede e' lo spazio, mai l'invito. */ .lp-barra-coda{ display:none; } .lp-barra-fissa .eb-btn{ padding-inline:var(--sp-16); } .lp-barra-fissa-in{ gap:var(--sp-12); } } @media (max-width:400px){ .lp-riga{ padding-inline:var(--sp-16); } .lp-scheda-testa{ padding-inline:var(--sp-16); } .lp-avanti{ padding-inline:var(--sp-16); } /* Stesso gesto degli altri tre, ma qui non e' estetica: i cinque passi si dividono la larghezza del pannello, e a 320px con 24 di fianco restavano bottoni da 41,6 — sotto i 44 che il sistema fissa come area utile minima. Otto pixel per lato e tornano a 44,8. */ .lp-form-pannello{ padding-inline:var(--sp-16); } } /* Motion ridotto: il sistema porta le durate a 0 nei token. Qui si spegne anche lo scorrimento dello slider. */ @media (prefers-reduced-motion:reduce){ .lp-folio-riga{ transition:none; } }