/* ══ IL FOGLIO DI STILE DELLE PAGINE DI MESTIERE ══════════════════════════ Lo usano /scuole/, /ristorazione/, /bellezza/, /negozi/ e /pagina-personale/. Estratto da /scuole/ il 28/08/2026, quando le pagine sono diventate cinque. ⚠️ PRIMA ERA SCRITTO DENTRO OGNI PAGINA. Con cinque pagine sarebbero state cinque copie da tenere allineate, ed è il difetto che questo progetto ha già pagato due volte (le vetrine e la striscia della proposta). Qui si cambia una volta e cambia dappertutto. 📌 Quello che cambia da pagina a pagina è SOLO il contenuto. Se ti serve una regola nuova per una pagina sola, quasi sempre vuol dire che il contenuto è fuori posto, non che manca uno stile. ⚠️ I caratteri sono ospitati da noi in /fonts/, mai dal servizio di Google (regola n°3): le quattro righe @font-face non si tolgono. */ @font-face{font-family:Fraunces;font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:Fraunces;font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Karla;font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/karla-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:Karla;font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/karla-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} :root{ /* ══ LA SCALA DEI TESTI — 09/09/2026 ═══════════════════════════════════ Otto misure, e nessuna nona. Il PAVIMENTO è 14 px: sotto quella riga non scende niente, nemmeno un'etichetta, perché il pubblico ha fra i 40 e i 65 anni. Il corpo NON è stato toccato: sul telefono era già a 18 px. Il modellino, con le otto regole di impaginazione: https://claude.ai/code/artifact/2af67a64-89ce-4750-8cb3-ff05929fbb9b ⚠️ LE STESSE OTTO RIGHE stanno nel foglio dentro site/index.html. Se cambiano qui, cambiano anche lì. */ --t-corpo:clamp(16px,1.05vw + 14px,18px); /* 16 → 18 quello che si legge */ --t-vicino:1rem; /* 16 elenchi, schede, servizio */ --t-nota:.9375rem; /* 15 note e didascalie */ --t-etichetta:.875rem; /* 14 occhielli, etichette, il pavimento */ --paper:#F2EDE3;--paper-2:#E7DFD1;--ink:#17130F;--ink-2:#4E463C; /* 🩶 09/09/2026: era #7C7267, e su questa carta stava a 4,04:1 dove ne servono 4,5. Scurito del 7% passa a 4,55. A occhio è lo stesso grigio, e rimette a posto tutti i testi di servizio in una riga sola. */ --ink-3:#736A60; /* 🎨 12/09/2026 — «--red-d» è il rosso scuro: serve dove il rosso chiaro non arriva a 4,5:1, come la cifra dentro la nota delle schede prezzi. */ --red:#BE3D18;--red-d:#9C2F0F;--ochre:#B08432;--rule:#CFC4B1; --serif:Fraunces,'Iowan Old Style',Georgia,serif; --sans:Karla,'Helvetica Neue',Helvetica,sans-serif; --wrap:min(1080px,92vw); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); font-size:clamp(16px,1.05vw + 14px,18px);line-height:1.62;-webkit-font-smoothing:antialiased} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")} main,header,footer{position:relative;z-index:1} .wrap{width:var(--wrap);margin:0 auto} /* ── intestazione ── */ .top{padding:1.4rem 0;border-bottom:1px solid var(--rule)} .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem} .top a.marchio{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink); font-family:var(--serif);font-weight:700;font-size:1.22rem;letter-spacing:-.02em} /* 13/09/2026 — il marchio COME IN HOME, rilievo di Simone: il punto rosso fra «Urbians» e «Lab», e la stessa misura (1.22rem, 1.05 sul telefono). ⚠️ Le tre parti stanno dentro UNO : il marchio è un flex col gap, e senza lo span «Urbians», il punto e «Lab» diventavano tre pezzi distanziati. */ .top a.marchio i{color:var(--red);font-style:normal} .top img{width:30px;height:30px} .top .indietro{color:var(--ink-3);text-decoration:none;font-size:var(--t-etichetta)} .top .indietro:hover{color:var(--ink)} /* ── apertura ── */ .hero{padding:4.5rem 0 3.4rem} .eyebrow{font-size:var(--t-etichetta);letter-spacing:.2em;text-transform:uppercase;color:var(--red); font-weight:700;margin:0 0 1.3rem} h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5.4vw,3.7rem);line-height:1.07; letter-spacing:-.02em;margin:0;max-width:19ch} .sottotitolo{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-2);margin:1.2rem 0 0;max-width:34ch} .intro{color:var(--ink-2);margin:1.5rem 0 0;max-width:52ch;font-size:var(--t-vicino)} .azioni{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.3rem} /* 💊 12/09/2026 — Pastiglie anche qui, e senza l'ombra dura spostata di quattro pixel: quello che cambia fra il primo tasto e il secondo è IL PIENO. */ .btn{display:inline-block;text-decoration:none;font-weight:700;font-size:var(--t-vicino);padding:.9rem 1.5rem; border:1px solid var(--ink);border-radius:999px;transition:background .16s,color .16s} .btn-pieno{background:var(--ink);color:var(--paper)} .btn-pieno:hover{background:var(--ink-2)} .btn-vuoto{background:transparent;color:var(--ink)} .btn-vuoto:hover{background:var(--paper-2)} /* ── le domande ── */ .capo{padding:2.4rem 0 .4rem} .capo h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.8vw,2rem); letter-spacing:-.015em;margin:0} .capo p{color:var(--ink-2);margin:.7rem 0 0;max-width:50ch;font-size:var(--t-vicino)} .domande{padding:1rem 0 3rem} /* ⚠️ Le colonne non sono 1fr 1fr e il testo non è più largo di 40ch: con due metà uguali il telefono restava centrato in mezza pagina e finiva lontanissimo dalla frase che spiega. Adesso la colonna dell'immagine è più stretta del testo e l'insieme si legge come una cosa sola. */ .dom{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:2.2rem clamp(1.6rem,3vw,2.6rem);align-items:center; padding:2.8rem 0;border-top:1px solid var(--rule)} .dom:nth-child(even) .testo{order:2} .q{font-family:var(--serif);font-size:clamp(1.35rem,2.5vw,1.85rem);font-weight:600;line-height:1.22; letter-spacing:-.01em;margin:0 0 .9rem;max-width:22ch} .a{color:var(--ink-2);margin:0;max-width:40ch} .a a{color:var(--red);font-weight:700} /* ── Il pannello, dentro un telefono ── ⚠️ Prima qui il pannello era RIDISEGNATO a mano col foglio di stile, e si era già scollato dal pannello vero: diceva «Listino» dove il pannello dice «Il menu» e mostrava nomi di file che non esistono più. Adesso sono FOTOGRAFIE del pannello vero di una scuola, scattate da un telefono da 390 px. Si rifanno con ./strumenti/foto-mockup.sh, e il telefono in mano dice da solo la cosa che conta: si fa dal divano. */ .tel{width:min(268px,72vw);margin:0 auto;border-radius:34px;padding:9px; background:linear-gradient(160deg,#2A241C,#151210); box-shadow:0 26px 50px -18px rgba(23,19,15,.5),0 0 0 1px rgba(23,19,15,.12)} /* 🔴 09/09/2026 — LA CORNICE ERA PIÙ LARGA DELLA FOTOGRAFIA. Rilievo di Simone: «il mockup della home ha rapporto dimensioni più corretto delle altre landing che sono allargate». Le immagini sono 480×960, cioè 9/18, e qui la cornice era 9/16: «cover» tagliava, e il telefono usciva tozzo. Adesso è 9/18.6 come in home, e le tre cornici del sito sono uguali. */ .tel-s{background:#fff;border-radius:26px;overflow:hidden;aspect-ratio:9/18.6} .tel-s img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} /* le ultime due domande stanno affiancate, senza immagine */ .coppia{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 3.4rem;padding:2.8rem 0;border-top:1px solid var(--rule)} @media(max-width:820px){.coppia{grid-template-columns:1fr;gap:1.8rem;padding:2.2rem 0}} /* ── chiusura ── */ .chiudi{background:var(--ink);color:var(--paper);padding:4rem 0;margin-top:1rem} .chiudi h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.12; letter-spacing:-.02em;margin:0;max-width:20ch} .chiudi p{color:#D8CFC0;margin:1.1rem 0 0;max-width:42ch} .chiudi .btn{border-color:var(--paper)} .chiudi .btn-pieno{background:var(--paper);color:var(--ink)} .chiudi .btn-vuoto{color:var(--paper)} .chiudi .btn-vuoto:hover{background:rgba(255,255,255,.1)} /* ── domande di servizio ── */ .servizio{padding:3.6rem 0 4rem} .servizio h2{font-family:var(--serif);font-weight:600;font-size:1.6rem;margin:0 0 1.6rem;letter-spacing:-.01em} details{border-top:1px solid var(--rule)} details:last-of-type{border-bottom:1px solid var(--rule)} summary{cursor:pointer;padding:1.05rem 2rem 1.05rem 0;font-weight:700;position:relative;list-style:none} summary::-webkit-details-marker{display:none} summary::after{content:"+";position:absolute;right:.2rem;top:.95rem;color:var(--red);font-size:1.3rem;line-height:1} details[open] summary::after{content:"–"} details p{color:var(--ink-2);margin:0 0 1.2rem;max-width:56ch;font-size:var(--t-vicino)} details a{color:var(--red);font-weight:700} footer{border-top:1px solid var(--rule);padding:2rem 0 3rem;color:var(--ink-3);font-size:var(--t-nota)} footer a{color:var(--ink-3)} @media(max-width:820px){ .hero{padding:3.2rem 0 2.4rem} .dom{grid-template-columns:1fr;gap:1.6rem;padding:2.2rem 0} .dom:nth-child(even) .testo{order:0} } /* La riga in fondo alle domande: cosa sappiamo, non come lavoriamo. Aggiunta il 28/08/2026 con le quattro pagine nuove. */ .firma{max-width:62ch;margin:2.6rem auto 0;padding-top:1.5rem;border-top:1px solid var(--rule); font-style:italic;color:var(--ink-2);font-size:var(--t-vicino);text-align:center;text-wrap:pretty} /* ══════════════════════════════════════════════════════════════════════════ DA PAGINA DI MESTIERE A PAGINA DI ATTERRAGGIO — 30/08/2026 Queste pagine sono il bersaglio della pubblicità: chi arriva deve capire in cinque secondi che può AVERE il sito della sua scuola, non leggere un articolo. Quindi in cima ci vuole il modulo, e più giù i prezzi. ⚠️ Il foglio è UNO SOLO per tutte e cinque: quello che si aggiunge qui compare su ognuna. I testi stanno in functions/_pagine-mestiere.js. ══════════════════════════════════════════════════════════════════════════ */ /* ══ LA FASCIA E LA TESTATA, APPICCICATE INSIEME — 09/09/2026 ══════════════ 🔴 Chiesto da Simone: anche la riga del prezzo resta in vista scorrendo. ⚠️ NON si possono appiccicare due cose una sotto l'altra: si sovrappongono, e la seconda dovrebbe sapere quanto è alta la prima. Si appiccica UN involucro che le contiene tutte e due, e dentro restano ferme. È lo stesso trucco della striscia sopra le demo (striscia.css, «.alto»). ⚠️ Il fondo va sull'involucro, non solo sulla testata: senza, scorrendo si vedrebbe la pagina passare nella riga di stacco fra le due. ⚠️ La riga è a 14 px ma la fascia NON è più alta di prima: l'interlinea scende da 1,62 a 1,35. Stessa cosa per il tasto della testata, con 1,2. */ /* 🔴 LO SPAZIO PER LA BARRA APPICCICATA — 09/09/2026. La fascia e la testata restano in cima per tutta la pagina: senza questa riga, un collegamento come «#prezzi» porta il titolo ESATTAMENTE sotto la barra, e chi tocca vede la pagina saltare su una sezione senza titolo. ⚠️ Il valore segue l'altezza vera della barra (74 px sul telefono). Se la barra cambia altezza, questo numero va rimisurato. */ section[id],[id]{scroll-margin-top:86px} .alto{position:sticky;top:0;z-index:50;background:var(--paper)} .alto .top{position:static;z-index:auto} .fascia{background:var(--ink);color:var(--paper);font-size:var(--t-etichetta);line-height:1.35; text-align:center;padding:.42rem 1rem} .fascia b{color:#F0C98A} /* Il prezzo è un collegamento alle due schede: la fascia resta in vista per tutta la pagina, quindi da qualunque punto «quanto costa» è a un tocco. */ .fascia-prezzo{color:inherit;text-decoration:underline;text-decoration-color:rgba(240,201,138,.5); text-underline-offset:3px;text-decoration-thickness:1px} .fascia-prezzo:hover{text-decoration-color:#F0C98A} .top{position:sticky;top:0;z-index:40;background:rgba(242,237,227,.93);backdrop-filter:blur(8px);padding:.7rem 0} /* 🎨 12/09/2026 — Rosso anche qui, come in home: la barra in cima è la NOSTRA, col nostro marchio, e il rosso è già l'accento di tutte e cinque le landing. Il colore del mestiere resta al sito del cliente, che sta più in basso. */ .top .cta{background:var(--red);color:var(--paper);text-decoration:none;font-weight:700; font-size:var(--t-etichetta);line-height:1.2; padding:.5rem 1.05rem;border-radius:999px;white-space:nowrap} .top .cta:hover{background:var(--red-d)} /* ══ IL MODULO IN CIMA, e l'anteprima accanto ══ */ /* 🔴 UNA COLONNA SOLA — 13/09/2026, scelta di Simone sul modellino (opzione B). Il modulo stava accanto al testo e si prendeva metà riga: il titolo aveva 542 px invece di 1140, e per questo era piccolo. Sceso sotto, il titolo passa da 54,4 a 73,6 px sul computer e da 33,6 a 40 sul telefono, senza che sia cambiata una parola. ⚠️ Il modulo va tenuto stretto: largo quanto la pagina non sembrerebbe più una cosa da riempire in due secondi. */ .apertura{display:grid;gap:1.7rem;justify-items:start;padding:2rem 0 3rem} /* 🔴 13/09/2026 — IL TITOLO PRENDE TUTTA LA RIGA, E SOTTO STANNO AFFIANCATI LA RIGA E IL MODULO. Simone guardava la pagina e chiedeva se non fosse più pulito rimettere il modulo accanto al testo, com'era prima. ➡️ Rimettendolo accanto AL TITOLO si torna al titolo da 54 px, che è il problema di partenza. Così invece si tengono tutte e due le cose: il titolo ha i suoi 1080 px di riga e i 73,6 px, e la metà destra non resta vuota. 📌 E il modulo sale: il tasto passa da y=576 a y≈430 su un 1280×800. ⚠️ Sotto i 940 px non cambia niente: una colonna, nell'ordine in cui si legge. */ @media(min-width:940px){ .apertura{grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:2rem 3.4rem;align-items:start;justify-items:stretch} .ap-testa{grid-column:1 / -1} .ap-riga{grid-column:1;grid-row:2} .ap-modulo{grid-column:2;grid-row:2} } .apertura h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.5rem,6.4vw,4.6rem); line-height:1.06;letter-spacing:-.025em;margin:.5rem 0 0;max-width:24ch; /* Senza questo l'ultima riga resta con una parola sola appesa: «…pronto in due / minuti.». Con «balance» il browser divide le righe in parti uguali. */ text-wrap:balance} /* La riga sotto il titolo adesso è UNA, e tiene tutte e due le frasi: le serve più larghezza di prima, quando ne teneva una sola. */ .apertura .sottotitolo{margin-top:1.1rem;max-width:54ch} .apertura .sottotitolo b{color:var(--ink);font-weight:700} .ap-modulo{width:100%;max-width:520px} .modulo{margin-top:0;background:#FBF8F2;border:1px solid var(--rule);border-radius:18px; padding:.85rem;box-shadow:0 14px 40px -24px rgba(23,19,15,.4)} /* ⚠️ UNA COLONNA SOLA dal 04/09/2026. I campi erano due — nome e città — e stavano affiancati; adesso il campo è uno solo e la città non si chiede più. Il perché sta in DA-RICORDARE.md ✍️. */ .modulo-campi{display:grid;gap:.55rem} /* L'etichetta sta SOPRA il campo e non sparisce mai: il suggerimento in grigio se ne va appena uno comincia a scrivere, e chi ha fra i 40 e i 65 anni resta senza sapere cosa gli era stato chiesto. */ .campo-etichetta{display:block;font-size:var(--t-vicino);font-weight:700;color:var(--ink); margin-bottom:.05rem} .modulo input{width:100%;font:inherit;font-size:var(--t-vicino);padding:.78rem .85rem;background:#fff; border:1px solid var(--rule);border-radius:12px;color:var(--ink)} .modulo input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)} .modulo button{width:100%;font:inherit;font-weight:700;font-size:var(--t-vicino);padding:.8rem 1.2rem; border:0;border-radius:12px;background:var(--red);color:#FFF6EC;cursor:pointer} .modulo button:hover{background:#9C2F0F} @media(min-width:560px){.modulo .largo{grid-column:1 / -1}} .modulo .nota{margin:.65rem .3rem 0;padding-top:.6rem;border-top:1px solid var(--rule); font-size:var(--t-nota);color:var(--ink-3)} /* ══ I SUGGERIMENTI SOTTO IL CAMPO DEL NOME — 04/09/2026 ══ Chi scrive le prime lettere del nome della sua attività se la ritrova nell'elenco: la sceglie, e indirizzo, telefono e orari arrivano da soli. ⚠️ I nomi qui sono grandi apposta — 16 px il nome, 14 l'indirizzo. È un elenco che si tocca col dito su un telefono, e il pubblico ha fra i 40 e i 65 anni: righe piccole vorrebbero dire toccare quella sbagliata. ⚠️ Le richieste NON partono dal browser verso Google: passano dal nostro server (/api/cerca). È la regola n°3, ed è scritta anche nella privacy. */ .suggerisci{position:relative} .suggeriti{position:absolute;z-index:40;left:0;right:0;top:calc(100% + .35rem); margin:0;padding:.3rem;list-style:none;background:#fff; border:1px solid var(--rule);border-radius:12px; box-shadow:0 20px 44px -20px rgba(23,19,15,.5);max-height:16rem;overflow-y:auto} .suggeriti li{padding:.6rem .65rem;border-radius:9px;cursor:pointer;line-height:1.35} .suggeriti li:hover,.suggeriti li[aria-selected="true"]{background:#F4EFE6} .suggeriti b{display:block;font-size:1rem;font-weight:700;color:var(--ink)} .suggeriti span{display:block;font-size:var(--t-nota);color:var(--ink-3);margin-top:.05rem} /* il telefono che si riempie con quello che si scrive */ /* ⚠️ DA QUI ALLA FINE DEL BLOCCO: REGOLE NON PIÙ USATE dal 31/08/2026. Erano il telefono disegnato che si riempiva mentre si scriveva il nome, tolto da Simone. Restano scritte apposta e non si cancellano a occhio: se un giorno si volesse rimettere un'anteprima dentro la pagina, la forma è già qui. */ .vetrinetta{justify-self:center;width:min(272px,78vw);background:linear-gradient(160deg,#2A241C,#151210); border-radius:36px;padding:9px;box-shadow:0 24px 50px -28px rgba(23,19,15,.75)} .vetrinetta .dentro{background:#FBF8F2;border-radius:28px;padding:.85rem;min-height:400px; display:flex;flex-direction:column;justify-content:space-between} .v-testa{display:flex;align-items:center;justify-content:space-between;gap:.5rem; border-bottom:1px solid var(--rule);padding-bottom:.55rem;margin-bottom:.55rem} .v-nome{font-family:var(--serif);font-weight:700;font-size:.84rem;line-height:1.2} .v-badge{font-size:.6rem;font-weight:700;background:rgba(62,107,65,.14);color:#3E6B41; padding:.15rem .42rem;border-radius:999px;white-space:nowrap} .v-citta{font-size:.68rem;color:var(--ink-3);margin:0 0 .6rem} .v-avviso{background:var(--paper-2);border:1px solid var(--rule);border-radius:10px;padding:.5rem .55rem;margin-bottom:.5rem} .v-avviso b{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)} .v-avviso span{font-size:.72rem} .v-riga{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:.5rem .55rem;font-size:.72rem;margin-bottom:.35rem} .v-fondo{border-top:1px solid var(--rule);padding-top:.55rem} .v-tasto{background:var(--ink);color:var(--paper);border-radius:10px;text-align:center;padding:.5rem;font-size:.72rem;font-weight:700} .v-slug{text-align:center;font-size:.62rem;color:var(--ink-3);margin:.4rem 0 0;word-break:break-all} /* ══ L'ESEMPIO: la demo di questa categoria ══ */ .esempio{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:3rem 0} .esempio-in{display:grid;gap:2rem;align-items:center} @media(min-width:860px){.esempio-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}} .esempio h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.15;margin:0} .esempio p{color:var(--ink-2);margin:.9rem 0 0;max-width:44ch} .esempio .tel{margin:0 auto} /* ══ I PREZZI, in fondo ══ */ .prezzi{padding:3.4rem 0} .prezzi h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.1rem);margin:0 0 1.8rem} .schede{display:grid;gap:1.1rem} @media(min-width:820px){.schede{grid-template-columns:1fr 1fr;gap:1.4rem}} .scheda{background:var(--paper-2);border:1px solid var(--rule);border-radius:18px;padding:1.5rem 1.4rem; position:relative;display:flex;flex-direction:column} .scheda.scura{background:#241C15;border-color:#241C15;color:#E7DFD1} /* 🔠 12/09/2026 — Come in home: il nome del piano e la riga sotto non spiccavano. Nome a 1,5rem, riga al corpo. */ .scheda h3{font-family:var(--serif);font-size:1.5rem;line-height:1.2;margin:0 0 .25rem} .scheda.scura h3{color:var(--paper)} .scheda .chi{font-size:var(--t-corpo);color:var(--ink-3);margin:0 0 .9rem} .scheda.scura .chi{color:#A79B8E} /* 🏅 13/09/2026 — LA PASTIGLIA «IL PIÙ SCELTO» È ORO, scelta di Simone sul modellino: https://claude.ai/code/artifact/748999c1-238e-462d-a513-c961858cb00e Ha scelto l'oro chiaro con la scritta scura — 2,22:1 la pastiglia sulla carta, 6,49:1 la scritta — dopo aver visto i quattro modi e i numeri di ognuno. ⚠️ **SOLO QUI E IN HOME.** Sotto le demo la pastiglia resta del colore del mestiere (`var(--brand)` in striscia.css): «sta bene che sia in tinta con la demo», e non si tocca. */ .scheda .stella{position:absolute;top:-.7rem;left:50%;translate:-50% 0;background:#C79A3F;color:#241C15; font-size:var(--t-etichetta);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .7rem;border-radius:999px;white-space:nowrap} .periodo{display:inline-flex;align-self:flex-start;padding:.2rem;border-radius:999px;background:rgba(23,19,15,.07);gap:.15rem} .scheda.scura .periodo{background:rgba(255,255,255,.12)} .periodo button{border:0;background:none;font:inherit;font-size:var(--t-nota);font-weight:700;padding:.3rem .85rem; border-radius:999px;cursor:pointer;color:var(--ink-3)} .scheda.scura .periodo button{color:#B6ABA0} .periodo button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(23,19,15,.12)} /* 🐛 08/09/2026 — LA PASTIGLIA SCELTA RESTAVA GRIGIA sulla scheda scura, e si leggeva male. Trovato da Simone. Non era un colore sbagliato: era una regola che ne vinceva un'altra. «.scheda.scura .periodo button» pesa più di «.periodo button[aria-pressed=true]», quindi il grigio restava anche sulla pastiglia accesa, che ha il fondo chiaro. La home aveva già la riga gemella, le landing no: la stessa cosa scritta in due posti, e uno dei due indietro. */ .scheda.scura .periodo button[aria-pressed="true"]{background:var(--paper);color:var(--ink)} .cifra{font-family:var(--serif);font-weight:700;line-height:1;margin:.9rem 0 .25rem;display:flex;align-items:baseline;gap:.25rem} .cifra b{font-size:clamp(2.2rem,4.4vw,2.8rem)} .cifra span{font-size:var(--t-vicino);font-family:var(--sans);font-weight:600;color:var(--ink-3)} .scheda.scura .cifra span{color:#A79B8E} .sotto-cifra{font-size:var(--t-nota);color:var(--ink-3);min-height:2.4em;margin:0} .scheda.scura .sotto-cifra{color:#B6ABA0} /* 🎨 12/09/2026 — La cifra dentro la nota è colorata, come in home: rosso scuro sulla Vetrina (è il numero dell'annuncio), oro sul Completo. ⚠️ «--red-d»: il rosso chiaro su questa carta non arriva a 4,5:1. */ .sotto-cifra b,.sotto-cifra strong{color:var(--red-d)} .scheda.scura .sotto-cifra b,.scheda.scura .sotto-cifra strong{color:var(--ochre)} .risparmio{display:inline-block;background:rgba(176,132,50,.2);color:#B08432;font-size:.72rem; font-weight:700;padding:.18rem .5rem;border-radius:999px} .scheda ul{list-style:none;margin:1rem 0 1.2rem;padding:0;display:grid;gap:.5rem;font-size:var(--t-vicino);flex:1;align-content:start} .scheda li{position:relative;padding-left:1.3rem;line-height:1.45} /* ✅ 13/09/2026 — Il verde della spunta, chiesto da Simone: quello di prima «non spiccava molto». ⚠️ Su carta chiara più acceso vuol dire MENO contrasto: era al 42% di saturazione con 4,69:1, questo sta al 91% e tiene 4,52:1. Si è alzata la TINTA, non la luce. */ .scheda li::before{content:"\2713";position:absolute;left:0;color:#0A7331;font-weight:700} .scheda.scura li::before{color:#B08432} /* 💊 IL TASTO È UNA PASTIGLIA, larga quanto le sue parole e in mezzo alla scheda — 09/09/2026, chiesto da Simone. Era un rettangolo largo tutta la riga con dentro un testo piccolo: la forma che il progetto ha deciso di non usare più. ⚠️ «max-width:100%» perché su un telefono stretto un'etichetta lunga deve poter andare a capo invece di sbordare. */ .scheda .btn{width:fit-content;max-width:100%;align-self:center;text-align:center; border-radius:999px;padding:.85rem 1.6rem;box-shadow:none;text-wrap:balance} .scheda .btn-pieno{box-shadow:none} .scheda .btn:hover{transform:none;box-shadow:none} .scheda.scura .btn-pieno{background:var(--paper);color:var(--ink)} /* la testata sul telefono: il tasto lungo mandava a capo il marchio */ .top .cta .piccolo{display:none} @media(max-width:700px){ .top{padding:.5rem 0} .top a.marchio{font-size:1.05rem} .top img{width:26px;height:26px} .top .cta{font-size:var(--t-etichetta);padding:.4rem .85rem} .top .cta .grande{display:none} .top .cta .piccolo{display:inline} .fascia{font-size:var(--t-etichetta);padding:.36rem .7rem} .top{padding:.4rem 0} .apertura{padding:1.2rem 0 2.2rem} } /* ══ LA SPUNTA, L'ERRORE E L'ATTESA — 01/09/2026 ══════════════════════════ ⚠️ La spunta è quasi sempre invisibile («interaction-only»): occupa spazio solo quando Cloudflare decide davvero di chiedere qualcosa. Per questo non ha un'altezza fissa — se gliela dessimo, resterebbe un buco vuoto nel modulo per tutti quelli a cui non viene chiesto niente. */ .cf-turnstile{margin:.7rem 0 0} .cf-turnstile:empty{margin:0} .m-errore{ margin:.7rem 0 0; padding:.6rem .7rem; border-radius:8px; background:var(--red-wash,#F7E5DD); color:var(--red); font-size:var(--t-vicino); font-weight:700; line-height:1.4; } /* Le tre righe dell'attesa: si accendono una alla volta. Non è una scena, è quello che sta succedendo davvero — e sono i secondi in cui, senza niente sullo schermo, la gente chiude la pagina. */ /* 🕳️ TRAPPOLA, trovata il 01/09/2026 — vale per SEMPRE, non solo qui. L'attributo «hidden» è una regola del BROWSER, e come tale non vince su niente: basta un «display:grid» scritto da noi e l'elemento resta visibile. È successo con le tre righe dell'attesa del generatore, che dovevano comparire premendo il tasto e invece si leggevano già sotto il modulo — col nome d'esempio dentro, cioè proprio la cosa che avevamo tolto dai campi. ⚠️ Questa riga non si toglie, e va PRIMA di qualunque «display» nostro. */ /* ══ LA CHIUSURA CORTA DOPO LE DOMANDE — 05/09/2026 ══ Non è la chiusura grande: è una riga e un tasto, per chi si è appena letto tutte le obiezioni ed è il più vicino a decidere. */ .chiudi-corta{padding-top:2.2rem;padding-bottom:2.6rem;text-align:center; display:grid;justify-items:center;gap:1.1rem} .chiudi-corta p{max-width:52ch;margin:0;font-size:1.02rem;color:var(--ink-2);line-height:1.6} .chiudi-corta a[href^="mailto"]{color:var(--red);font-weight:700} /* ══ GLI ALTRI QUATTRO MESTIERI, NEL PIÈ DI PAGINA — 11/09/2026 ══ Fino all'11/09 erano riquadri con la fotografia della demo, in una sezione sotto la chiusura. Adesso sono una riga di collegamenti, copiata dalla riga «.mestieri» della home: stesse misure, stessi colori. Il perché sta nello strumento delle landing, sopra piedeMestieri(). */ .mestieri{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule); display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:var(--t-nota)} .mestieri a{color:var(--ink-3);text-decoration:none} .mestieri a:hover{color:var(--red);text-decoration:underline} [hidden]{display:none !important} .attesa{margin-top:1rem; display:grid; gap:.5rem} .attesa-r{ margin:0; padding-left:1.5rem; position:relative; font-size:var(--t-vicino); color:var(--ink-3); opacity:.35; transition:opacity .35s ease, color .35s ease; } .attesa-r::before{ content:""; position:absolute; left:.2rem; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--rule); transition:background .35s ease; } .attesa-r.on{opacity:1; color:var(--ink)} .attesa-r.on::before{background:var(--red)} .attesa-r b{font-weight:700} @media (prefers-reduced-motion: reduce){ .attesa-r{transition:none} } /* ══ L'ARIA DELL'APERTURA SUL TELEFONO ══ ⚠️ La riga «.giu» qui sotto non compare più in pagina: era il collegamento «Qui sotto, l'anteprima del tuo sito ↓», e serviva a raggiungere il telefono disegnato, che dal 31/08 non c'è più. La regola resta perché quello è il posto dove andranno le righe dell'attesa del generatore. Il resto — l'aria tolta sopra — serve ancora: fa arrivare il modulo dentro la prima schermata di un telefono. Rilievo di Simone: sul telefono il modulo riempie lo schermo e dell'anteprima nel telefono non si vede niente, quindi non si sa nemmeno che c'è. Due cose insieme: un po' d'aria tolta sopra, e una riga sotto il tasto che la nomina e ci porta. ⚠️ La riga sparisce appena le due colonne stanno affiancate (940 px): lì l'anteprima si vede da sola e sarebbe rumore. */ .giu{display:none} @media(max-width:939px){ .apertura{gap:1.4rem} .apertura .sottotitolo{margin-top:.7rem} .giu{ display:flex; align-items:center; justify-content:center; gap:.45rem; margin:.7rem 0 0; padding:.5rem; font-size:.88rem; font-weight:700; text-decoration:none; color:var(--red); } .giu span{font-size:1.05rem; line-height:1} .giu:hover{text-decoration:underline} } /* ══ LA LANDING HA LA STESSA CRONISTORIA DELLA HOME — 30/08/2026 ══ un concetto solo → i tre passi → il pannello → l'obiezione → i prezzi. Le obiezioni del mestiere sono scese in fondo, chiuse: in mezzo alla pagina facevano sembrare la landing un questionario. */ .lede{color:var(--ink-2);margin:1.1rem 0 0;max-width:46ch;font-size:var(--t-vicino)} .cercano{padding:3.4rem 0 3rem;text-align:center;max-width:62ch;margin-inline:auto} .cercano h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1.15;margin:0} .cercano p{color:var(--ink-2);margin:1rem 0 0} /* ⚠️ DA QUI, LE REGOLE DEI TRE PASSI A SCHEDE NON SI USANO PIÙ dal 01/09/2026: al loro posto c'è «.passaggi / .scaletta», l'elenco che si compone scorrendo. Restano scritte apposta — mai cancellare CSS a occhio, è già costato una volta — e se un giorno si volesse tornare alle tre schede, la forma è ancora qui. */ .passi{padding:1rem 0 3.2rem} .passi h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.1rem);margin:0 0 1.6rem} .passi-griglia{display:grid;gap:1rem;counter-reset:passo} @media(min-width:820px){.passi-griglia{grid-template-columns:repeat(3,1fr);gap:1.2rem}} .passo{background:var(--paper-2);border:1px solid var(--rule);border-radius:16px;padding:1.3rem 1.2rem} .passo h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .4rem} .passo h3::before{counter-increment:passo;content:"0" counter(passo);display:block; font-family:var(--sans);font-size:.7rem;letter-spacing:.15em;color:var(--ink-3);margin-bottom:.35rem} .passo p{color:var(--ink-2);font-size:.9rem;margin:0;line-height:1.55} .pannello-sez{padding:1rem 0 3.2rem} .pannello-sez h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.1rem);margin:0} /* 🐛 09/09/2026 — IL TITOLO ERA ATTACCATO AL BLOCCO SOTTO, zero pixel in mezzo. Trovato da Simone in una fotografia. La riga «.sotto-h2» è stata tolta l'08/09 e con lei se n'è andata l'aria che teneva. L'aria si dà al BLOCCO e non al titolo: se un giorno quella riga torna, lo spazio non si conta due volte. 📌 La misura è quella degli altri capitoli: 1,8rem, come «.prezzi h2». */ .pannello-sez .pann{margin-top:1.8rem} .sotto-h2{color:var(--ink-2);margin:.6rem 0 1.8rem} .obiezione{max-width:60ch;margin-inline:auto;padding:0 0 3.4rem} .obi-q{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600;margin:0 0 .7rem} .obi-a{color:var(--ink-2);margin:0} /* le domande in fondo: chiuse, si aprono toccandole */ .servizio details{border-bottom:1px solid var(--rule);padding:.9rem 0} .servizio summary{cursor:pointer;font-weight:700;font-size:var(--t-vicino);list-style:none; display:flex;justify-content:space-between;gap:1rem;align-items:baseline} .servizio summary::-webkit-details-marker{display:none} .servizio summary::after{content:"+";color:var(--red);font-weight:700;flex:none} .servizio details[open] summary::after{content:"\2013"} .servizio details p{color:var(--ink-2);margin:.7rem 0 0;font-size:var(--t-vicino);max-width:64ch} /* ══ LE TRE SCHEDE DEL PANNELLO ══ Sul computer si toccano e la schermata accanto cambia; sul telefono ognuna porta già la sua sotto, perché su uno schermo stretto l'immagine che cambia finisce fuori vista proprio mentre la si tocca. */ .pann{display:grid;gap:1.3rem;align-items:start} @media(min-width:900px){.pann{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.2rem}} .pann-scelte{display:grid;gap:.7rem} .pann-scelta{text-align:left;width:100%;background:var(--paper-2);border:1px solid var(--rule); border-radius:14px;padding:1rem 1.1rem;font-family:inherit;cursor:pointer; transition:border-color .18s,background .18s;color:inherit} .pann-scelta h3{font-family:var(--serif);font-size:1.02rem;margin:0 0 .25rem} .pann-scelta p{font-size:var(--t-vicino);color:var(--ink-2);line-height:1.5;margin:0} .pann-scelta[aria-selected="true"]{background:#FBF8F2;border-color:var(--ink)} /* 🐛 09/09/2026 — LA DIDASCALIA STAVA DI FIANCO AL TELEFONO, non sotto. Trovata da Simone in una fotografia. «.pann-vista» è un flex, e un flex mette in RIGA tutto quello che ha dentro: il telefono e la sua didascalia erano due colonne accanto. Serve la colonna, non solo il centrare. */ .pann-vista{display:flex;flex-direction:column;align-items:center;justify-content:flex-start} .pann-vista .tel{width:min(268px,80%)} .pann-foto-mobile{display:none;margin-top:.9rem} .pann-foto-mobile img{display:block;width:min(200px,58%);height:auto;margin-inline:auto; border:1px solid var(--rule);border-radius:12px} /* 🔴 DA QUI IN GIÙ VALE SOLO SOTTO I 900 px — 09/09/2026. ⚠️ Le righe della cornice erano finite FUORI da questo blocco, e valevano anche sul computer: le tre schede si portavano dietro la loro fotografia e la colonna col telefono spariva. Simone se n'è accorto subito. 📌 La lezione: una regola scritta per il telefono che finisce fuori dal suo «@media» non dà nessun errore — cambia semplicemente un'altra pagina. */ @media(max-width:899px){ .pann-scelta{cursor:default} .pann-vista{display:none} /* IL MOCKUP DEVE SEMBRARE UN TELEFONO. Rilievo di Simone: «è ancora un non-telefono, non ha i bordi dello smartphone». Era un'immagine con un bordo sottile: sembrava un ritaglio, non uno schermo. */ .pann-foto-mobile{display:block;width:min(212px,64%);margin:.95rem auto 0; background:linear-gradient(160deg,#2A241C,#151210);border-radius:28px;padding:7px; box-shadow:0 16px 34px -16px rgba(23,19,15,.6),0 0 0 1px rgba(23,19,15,.1)} .pann-foto-mobile img{display:block;width:100%;height:auto;border:0;border-radius:21px; aspect-ratio:9/18.6;object-fit:cover;object-position:top center;background:#fff} /* 🔴 SUL TELEFONO LE TRE SCHEDE SONO TUTTE UGUALI — 09/09/2026. Rilievo di Simone: la prima era bianca e le altre due color crema. Il fondo bianco vuol dire «questa è quella scelta», e sul computer è giusto: si tocca una scheda e la schermata accanto cambia. Sul telefono non si sceglie niente — ogni scheda porta già la SUA fotografia — quindi una diversa dalle altre non dice niente, sembra solo un errore. ⚠️ Serve la stessa specificità di «[aria-selected]», o non vince. */ .pann-scelta,.pann-scelta[aria-selected="true"]{background:#FBF8F2;border-color:var(--rule)} /* Il titolo di una scheda era 16 px in un carattere con le grazie, accanto a un corpo di 16: non si distingueva dal testo sotto. Simone: «quasi illeggibile». */ .pann-scelta h3{font-size:1.28rem;line-height:1.2;margin-bottom:.45rem} } /* ⚠️ RITOCCHI del 30/08/2026, su indicazione di Simone. · i titoletti dei tre passi nel nostro colore mattone · le schede dei prezzi più larghe e basse: quadrate «sono meno carine» · l'occhiello sopra il telefono in alto, per distinguerlo dall'esempio */ .passo h3{color:var(--red)} .passo h3::before{color:var(--ink-3)} /* ⚠️ CORRETTO due volte il 30/08/2026. Prima erano quadrate, poi le avevo allargate — ma Simone le voleva più rettangolari VERTICALMENTE, cioè più strette e alte. Si stringe il contenitore, non la scheda. */ .prezzi .schede{max-width:760px;margin-inline:auto} @media(min-width:820px){ .scheda{padding:1.7rem 1.5rem} .scheda ul{margin:1.1rem 0 1.4rem;gap:.55rem} } .eyebrow-tel{text-align:center;margin-bottom:.6rem} /* ══════════════════════════════════════════════════════════════════════════ L'ORDINE NUOVO DELLA LANDING — 01/09/2026 Simone: «le landing e la home devono seguire questo percorso: cosa offriamo · come lo offriamo · guarda un esempio · quanto costa · l'ultima spinta». Qui ci sono i due pezzi nuovi che quel percorso ha portato. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. COSA OFFRIAMO: una frase sola, grande, con aria intorno ── È il blocco che prima non c'era, e che Simone chiedeva «in stile apple». Poca roba: un occhiello, una frase che riempie lo schermo, una riga sotto. ⚠️ «text-wrap:balance» tiene il titolo in righe di lunghezza simile: senza, una frase lunga finisce con una parola sola sull'ultima riga. */ .manifesto{max-width:70ch;margin-inline:auto;padding:3.4rem 0 3rem;text-align:center; border-top:1px solid var(--rule)} /* 🐛 09/09/2026 — «margin», non «margin-bottom». L'occhiello è un

dentro «.manifesto», quindi «.manifesto p{margin:1.2rem auto 0}» gli dava 19 px di margine SOPRA che nessuno voleva: sembrava staccato dal filo e incollato al titolo. Scrivendo tutti e quattro i margini non resta niente di ereditato. ⚠️ È la trappola delle scorciatoie: «margin: … auto 0» non tocca solo il lato che si aveva in mente, li riscrive tutti. */ /* 🐛 09/09/2026 — L'OCCHIELLO NON ERA CENTRATO, e l'avevo rotto io oggi. Scrivendo «margin:0 0 1rem» per togliergli il margine sopra, ho azzerato anche i margini LATERALI: l'occhiello è un

, quindi «.manifesto p» gli dà «max-width:56ch», e senza «auto» ai lati quel riquadro da 56ch restava incollato a sinistra dentro un contenitore da 70ch. Il testo era centrato dentro il riquadro sbagliato. ⚠️ Due cose insieme: «auto» ai lati, e via il tetto di 56ch — un occhiello non è un paragrafo da leggere, e va sulla stessa larghezza del titolo. */ .manifesto .eyebrow{margin:0 auto 1rem;max-width:none} .manifesto h2{font-family:var(--serif);font-weight:600; font-size:clamp(1.65rem,3.5vw,2.45rem);line-height:1.17;letter-spacing:-.02em; margin:0;text-wrap:balance} .manifesto p{color:var(--ink-2);margin:1.2rem auto 0;max-width:56ch;text-wrap:pretty} /* ⚠️ Sul telefono la riga sotto il titolo va A SINISTRA. Centrata diventa cinque righe frastagliate da tutte e due le parti, e il pubblico di questa pagina ha fra i 40 e i 65 anni: si legge peggio. Il titolo resta centrato. */ @media(max-width:700px){ .manifesto p{text-align:left} /* 🔴 L'occhiello era attaccato alla frase sotto e lontano dal filo sopra. Rilievo di Simone: va alzato, così ha aria sotto e appartiene al filo che separa dal capitolo precedente. */ .manifesto{padding-top:1.5rem} /* 🐛 10/09/2026 — L'OCCHIELLO ANDAVA A SINISTRA SUL TELEFONO. Rilievo di Simone. È un

, e la riga qui sopra manda a sinistra tutti i

del blocco: lui compreso. «text-align:center» qui vince perché la regola ha due classi e l'altra una classe e un tag. */ .manifesto .eyebrow{margin:0 auto 2.2rem;text-align:center} } /* ── 2. I TRE PASSAGGI: un elenco che si compone scorrendo ── Idea di Simone: «un elenco puntato che si compone scorrendo la pagina, con una animazione carina che unisce i tre punti, e l'ultimo con una spunta verde, così a livello di UI comunichiamo la rapidità e la semplicità». ⚠️ La riga che unisce due punti è fatta di DUE pseudo-elementi sovrapposti: «::before» è il binario spento, «::after» è la riga colorata che cresce. Con uno solo non si vedrebbe dove arriverà. ⚠️ Chi ha chiesto meno animazioni vede tutto acceso subito, e il codice della pagina lo sa: la pagina non deve MAI restare a metà. */ .passaggi{padding:.6rem 0 3.4rem} .passaggi h2{font-family:var(--serif);font-weight:600; font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.01em;margin:0} .scaletta{list-style:none;margin:2.1rem 0 0;padding:0;display:grid;gap:1.7rem} .sc-p{position:relative;padding-left:2.9rem} .sc-p h3{font-family:var(--serif);font-size:1.08rem;margin:0 0 .35rem;color:var(--red)} .sc-p p{color:var(--ink-2);font-size:var(--t-vicino);line-height:1.56;margin:0;max-width:44ch} .sc-punto{position:absolute;left:0;top:-.1rem;z-index:2; width:1.8rem;height:1.8rem;border-radius:50%; display:grid;place-items:center; transition:background .22s ease,border-color .22s ease,transform .22s ease} .sc-punto i{grid-area:1/1;font-style:normal;font-weight:700;font-size:var(--t-etichetta);line-height:1; transition:opacity .22s ease,color .22s ease} .sc-ok{font-size:var(--t-vicino)} .sc-p::before,.sc-p::after{content:"";position:absolute;left:calc(.9rem - 1px); top:1.75rem;bottom:-1.75rem;width:2px;z-index:1} .sc-p::before{background:var(--rule)} .sc-p::after{background:var(--red);transform-origin:top} .sc-p:last-child::before,.sc-p:last-child::after{display:none} /* ⚠️ DI PARTENZA L'ELENCO È ACCESO E FINITO. Se il codice non arriva, o se chi guarda ha chiesto meno animazioni, la pagina è comunque completa: un elenco spento e mai acceso sarebbe una pagina rotta. È lo stesso principio della classe «con-comparse» in home. */ .sc-punto{background:var(--red);border-color:var(--red);border:2px solid var(--red)} .sc-n{color:#FFF6EC} .sc-fine .sc-punto{background:#3E6B41;border-color:#3E6B41} .sc-fine .sc-n{opacity:0} .sc-fine .sc-ok{opacity:1;color:#FFF6EC} .sc-p::after{transform:scaleY(1)} /* ══ DA QUI COMANDA LO SCORRIMENTO — 01/09/2026 ═══════════════════════════ Rilievo di Simone: «che corrisponda allo scroll e non che si completi in automatico». Prima l'elenco partiva quando entrava nello schermo e finiva da solo in un secondo, e chi scorreva veloce se lo perdeva: adesso la riga avanza esattamente quanto avanza il dito. 📌 La classe «viva» la mette il codice della pagina. Senza codice, o con «riduci le animazioni» acceso, questo blocco non si accende mai e resta il blocco qui sopra, cioè l'elenco finito. ⚠️ Niente transizione sulla riga: una transizione la farebbe arrivare in ritardo sul dito, ed è proprio quello che Simone non vuole. Le transizioni restano solo sui punti, che non scorrono: si accendono e basta. */ .scaletta.viva .sc-punto{background:var(--paper);border-color:var(--rule)} .scaletta.viva .sc-n{color:var(--ink-3);opacity:1} .scaletta.viva .sc-ok{opacity:0} .scaletta.viva .sc-p::after{transform:scaleY(var(--riempi,0));transition:none} .scaletta.viva .sc-p.on .sc-punto{background:var(--red);border-color:var(--red);transform:scale(1.06)} .scaletta.viva .sc-p.on .sc-n{color:#FFF6EC} .scaletta.viva .sc-fine.on .sc-punto{background:#3E6B41;border-color:#3E6B41} .scaletta.viva .sc-fine.on .sc-n{opacity:0} .scaletta.viva .sc-fine.on .sc-ok{opacity:1;color:#FFF6EC} /* sul computer i tre passaggi stanno in fila, e la riga li unisce di lato */ @media(min-width:820px){ .scaletta{grid-template-columns:repeat(3,1fr);gap:1.9rem} .sc-p{padding-left:0;padding-top:2.8rem} .sc-punto{top:0} .sc-p p{max-width:none} .sc-p::before,.sc-p::after{left:1.9rem;right:-1.9rem;top:calc(.9rem - 1px); bottom:auto;width:auto;height:2px} .sc-p::after{transform-origin:left;transform:scaleX(1)} .scaletta.viva .sc-p::after{transform:scaleX(var(--riempi,0))} } /* ── 3. L'ULTIMA SPINTA, dentro la chiusura scura ── Una riga sola che dice quanto è poco il lavoro: «da fare c'è solo scrivere il nome». ⚠️ Non dice cosa si perde a non farlo. */ .chiudi .spinta{color:var(--paper);font-weight:700;margin:1rem 0 0;max-width:42ch} /* L'etichetta sotto il mockup del pannello — 08/09/2026, al posto della riga di spiegazione che c'era sopra. */ .pann-didascalia{margin-top:.7rem;text-align:center;font-size:var(--t-nota);color:var(--ink-3)} /* ══ SUL TELEFONO SI SCORRE DI LATO, NON IN VERTICALE — 09/09/2026 ═════════ Idea di Simone: invece di impilare le schede una sotto l'altra, se ne mostra UNA sola e le altre si raggiungono scorrendo di lato, coi puntini sotto. ➡️ Chi vuole vederle tutte scorre, chi ha capito prosegue. Su un telefono cinque schede in colonna sono cinque schermate da saltare per arrivare al resto della pagina. ⚠️ FUNZIONA ANCHE SENZA CODICE: lo scorrimento sta tutto qui nel foglio. Il codice aggiunge solo i puntini — se non gira resta un carosello che si scorre col dito, non una pagina rotta. 📌 La scheda è larga l'86%: quel pezzo della scheda dopo che si vede sul bordo è quello che dice «ce n'è un'altra», e lo dice meglio dei puntini. ⚠️ Queste righe vanno DOPO «.esempi-grid» e «.pann-scelte», che sono griglie: stessa specificità, quindi vince chi è scritto per ultimo. */ .punti{display:none} @media(max-width:719px){ .carosello{display:flex;overflow-x:auto;gap:.85rem;padding-bottom:.2rem; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;overscroll-behavior-x:contain} .carosello::-webkit-scrollbar{display:none} .carosello > *{flex:0 0 86%;scroll-snap-align:center;min-width:0} .punti{display:flex;justify-content:center;gap:.55rem;margin-top:1.1rem} .punti button{width:9px;height:9px;padding:0;border:0;border-radius:50%; background:var(--rule);cursor:pointer;transition:background .2s,transform .2s} .punti button[aria-current="true"]{background:var(--ink);transform:scale(1.3)} .punti button:focus-visible{outline:2px solid var(--red);outline-offset:3px} /* ⚠️ La stella «il più scelto» esce sopra la scheda, e un contenitore che scorre di lato taglia quello che esce. */ .schede.carosello{padding-top:.9rem} /* 💶 13/09/2026 — LE SCHEDE PREZZI SONO PIÙ LARGHE DELLE ALTRE CARTE. Dentro c'è «tuonomeattività.urbianslab.com», che per il browser è una parola sola e all'86% arrivava a toccare il bordo destro. Simone: «fa niente se non si vede la parte dell'altro piano, tanto ci sono i dot». ⚠️ E il «break-word» è la rete per i telefoni da 320 px: non fa niente finché la parola ci sta, e la spezza solo quando non c'è altro modo. */ .schede.carosello > *{flex-basis:92%} .schede li{overflow-wrap:break-word} }