/* ============================================================================ Pagine di lavoro: stile condiviso da tutte le pagine /lavori//. Si carica DOPO fonts.css, tokens.css, style.css e assets/css/motion.r1.css, che è il foglio del movimento comune: qui restano solo le classi caso-* e le poche cose che il file condiviso non può sapere (la maschera dell'h1, che sta sopra la piega, i riempimenti di bottone fuori palette, e dalla rev 6 il modulo e il piede nella forma della homepage nuova). File pubblico: nei commenti nessun nome di cliente. Tutto ciò che serve solo alla revisione sta in anteprima.css, non qui. Rev 8 (2026-09-14), docs/lavori.md sezione 19. Sette richieste del committente, e quattro toccano questo file: l'occhiello sotto la lead ....... .caso-apertura__categoria più aria prima della chiusura ... .caso-mod + .sezione--tenue i due disegni si muovono ........ blocco 3 bis del MOVIMENTO la copertina ritagliata meglio .. .caso-copertina img (80% e 5/4) Le altre tre stanno nel markup: via il bottone dell'apertura, via la tavola in tipografia (e con lei le sue regole, uscite da qui), e la slide del naming riesportata dal PDF con il refuso corretto alla fonte. Rev 7 (2026-09-13), docs/lavori.md sezione 18. La pagina resta quella di UN lavoro solo, fatta di moduli opzionali uno per servizio. Cambiano tre cose: i moduli scendono da nove a SETTE (e-commerce e assistenza IT entrano dentro «Sviluppo web»); i due servizi che non hanno materiale da mostrare non hanno più una schermata finta ma un DISEGNO in pagina; e la chiusura, il modulo di contatto, il piede e i bottoni sono la home NEL CSS e non solo nel markup, con le regole copiate verbatim e marcate in due riquadri. Cosa chiede il committente, e dove sta: chiusura e piede identici ...... i due riquadri «COPIATO VERBATIM» via la maschera dalla chiusura . niente .mask sul .titolo-giga (markup) la tavola anche in fotografia .. .caso-figura--pagina (rev 8: resta lei sola) la griglia del profilo ......... img demo-profilo + .caso-elenco--ritmo il profilo in alto ............. .caso-esterno dentro .caso-testa desktop e telefono insieme ..... .caso-riga--schermo-telefono e-commerce e IT dentro il web .. .caso-sub, .caso-minuto strategia in cima .............. ordine del markup (nessuna regola) performance disegnato .......... .caso-disegno + .caso-annuncio funnel disegnato, non a imbuto . .caso-tempo Uscite in questo giro, con il markup che le usava: la classe `.riempi` sui bottoni (la forma del riempimento sta dentro `.bottone`, come sulla home) e la maschera tipografica del titolo di chiusura (sulla home non c'è, e qui tagliava le discendenti). Uscite nel giro precedente: la banda dell'invito di mezzo (.caso-invito*), il blocco d'uscita (.caso-uscita*), la figura più stretta del materiale costruito (.caso-figura--minore). Uscite nei giri precedenti: la costola e la griglia dello schedario, la riga esplicativa di modulo, lo sfondamento a destra, il ripiego a `span 4`, l'elenco degli spunti della chiusura, il link secondario accanto all'invito dell'apertura, i token del movimento, le pillole dell'apertura, la tessera a proporzione libera, le tre figure disegnate, la mappa dei servizi, la citazione, i crediti, le briciole, il bollo di riproduzione, la griglia a sei colonne, il details del perimetro, le card degli altri lavori, le celle dei numeri, il fondo alternato di modulo. Non sono in archivio qui: stanno in git e nella specifica. ========================================================================== */ /* ── Quello che resta di locale ─────────────────────────────────────────────── I token del movimento non stanno più qui: --m-micro, --m-corto, --m-lungo, --m-reveal, --e-out, --e-inout e --e-posa arrivano da assets/css/motion.r1.css, che a 💎 M2 diventa il sistema comune. Le due hairline restano perché il file condiviso non le porta ancora: sono candidate a tokens.css insieme agli altri, e finché non ci sono lì vivono qui. */ :root { --hairline: #E2E2E2; --hairline-forte: #CFCFCF; /* La misura unica della pagina. È quella della homepage nuova (demo-motion/demo.r1.css, `--d-max: 1240px`) e non quella della landing (1400): un testo su 1400 px è una riga da leggere girando la testa, e la pagina nuova ha già deciso che 1240 è la misura di casa. */ --misura: 1240px; /* ⚠️ Rev 6: arriva il bordo dei campi, che docs/rev3-motion.md aveva lasciato fuori di proposito («la pagina dei lavori non ha campi da compilare; se un giorno ne avrà, il conto si rifà sul fondo che c'è, non si eredita il numero»). Il conto rifatto: #8A8A8A sta a 3,45:1 sul bianco del campo e a 3,31:1 sul --bianco-sporco della fascia di chiusura. Tutti e due sopra il 3:1 che WCAG 1.4.11 chiede al contorno di un comando. */ --bordo-campo: #8A8A8A; } /* Testata sticky: il focus e le ancore non finiscono sotto (WCAG 2.4.11). */ html { scroll-padding-top: 6rem; } /* Testo per il solo lettore di schermo. Serve all'avviso «si apre in una nuova scheda» (WCAG 3.2.5): la home nuova quel target lo mette senza dirlo, e qui la deroga si paga con una riga di markup invece che con un buco. `clip-path` e non `clip`: `clip` è deprecato e in alcuni motori disattiva la pronuncia dell'elemento invece di nasconderlo soltanto. */ .fuori-schermo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ═══════════════════════════════════════════════════════ LA MISURA ═════════ Una sola, e ci si allinea tutto: la testata, il corpo della pagina e il piede. Con la testata a 1400 e il contenuto a 1240 il logo starebbe 80 px più a sinistra del titolo, che è il genere di disallineamento che si sente senza saperlo nominare. */ .caso-corpo, .testata__interno, .pie > .contenitore { width: min(var(--misura), 100% - var(--gutter) * 2); margin-inline: auto; } /* Il passo fra le sezioni è quello della homepage nuova, var(--s-6), non lo --s-7 di style.css: qui i moduli sono nove e un passo da 176 px fra l'ultimo e la chiusura aprirebbe un buco che sembra la fine della pagina. */ .sezione { padding-block: var(--s-6); } /* ══════════════════════════════════════════════════════════ LA TESTATA ═════ Rev 6: è quella della homepage nuova (demo-motion/demo.r1.css:239-291), non quella di style.css. Le regole stanno qui e non lì per la stessa ragione del modulo: style.css è condiviso con la landing, che ha la testata di prima, e riscriverla da lì cambierebbe una pagina che nessuno ha chiesto di cambiare. Al merge del 22/09 si decide una volta sola quale delle due vince. Quattro cose cambiano rispetto a style.css, e si vedono tutte: — la barra ha un'altezza dichiarata (72 px) invece di dipendere dal logo; — il logo scende da `clamp(160px, 15vw, 215px)` a 148 px fissi; — il filo sotto non è un `border-bottom` sempre presente ma un `::after` che si accende in dissolvenza quando la pagina si stacca: un bordo che appare e scompare sposta di 1 px tutto il contenuto sotto, un pseudo-elemento no; — le voci di menu perdono il maiuscoletto spaziato e tornano testo normale a 15 px, col filetto in `currentColor` e non in viola. Le due classi di stato le mette assets/js/motion.r1.js sull'elemento con `data-testata`; senza JavaScript la testata resta ferma e visibile. */ :root { --d-testata: 72px; } .testata { z-index: 40; background: rgba(255, 255, 255, 0.88); border-bottom: 0; transition: transform 240ms var(--e-inout); } .testata::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--hairline); opacity: 0; transition: opacity var(--m-micro) linear; } .testata--staccata::after { opacity: 1; } .testata--nascosta { transform: translateY(-100%); } .testata__interno { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3); min-height: var(--d-testata); padding-block: 0; } .testata__logo { margin-right: auto; display: block; } .testata__logo img { width: 148px; height: auto; } .testata__nav { gap: var(--s-3); } .testata__nav a { font-size: 0.9375rem; font-weight: var(--w-normal); letter-spacing: normal; text-transform: none; padding-block: 0.35em; } .testata__nav a::after { background: currentColor; height: 1.5px; transition: transform var(--m-corto) var(--e-out); } /* Sulla home la voce della sezione in cui ti trovi resta marcata, e `aria-current` lo dice anche a voce. Qui la regola c'è ma non si accende: una pagina di lavoro non È nessuna delle quattro sezioni della home, e marcarne una direbbe il falso. Resta scritta perché il giorno che una pagina di lavoro avrà una sua voce di menu, il disegno c'è già. */ .testata__nav a[aria-current="true"] { color: var(--viola-testo); } .testata__nav a[aria-current="true"]::after { transform: scaleX(1); opacity: 0.45; } /* ╔══════════════════════════════════════════════════════════════════════════╗ ║ COPIATO VERBATIM DA prezzemolostudio/public/demo-motion/demo.r1.css ║ ║ Rev 7 (2026-09-13), docs/lavori.md sezione 18. ║ ║ ║ ║ DA DOVE VIENE. Le regole di questo riquadro e quelle del riquadro ║ ║ gemello in fondo al file (chiusura, modulo, piede) sono la copia ║ ║ letterale di `demo.r1.css`, riga per riga, con i loro commenti ║ ║ originali. Non sono state riscritte, adattate né «migliorate»: se una ║ ║ differisce da lì è un errore, non una scelta. ║ ║ ║ ║ PERCHÉ CI SONO. Nella rev 6 la chiusura e il piede erano stati copiati ║ ║ nel MARKUP ma non nel CSS, e il risultato è il difetto che il ║ ║ committente ha visto per primo: «hai solo copiato il testo, ma la ║ ║ grandezza è rimasta la vecchia». `style.css` — condiviso con la landing ║ ║ e caricato prima di questo file — porta un `.titolo-giga` a `--t-giga` ║ ║ (fino a 160 px) e un `.bottone` a 1,125rem con padding 15/30, mentre la ║ ║ home ha 5,5rem e 0,95rem con padding 0,85/1,6em. Stesso testo, stesse ║ ║ classi, altra pagina. ║ ║ ║ ║ DOVE FINIRANNO. ⚠️ A 💎 M2 (merge del 22/09) queste regole VANNO ║ ║ PROMOSSE NEL SISTEMA COMUNE, una volta sola, e sparite da qui. Oggi non ║ ║ possono stare in `style.css`: quel file è condiviso con la landing, che ║ ║ ha ancora la forma vecchia, e riscriverlo da qui cambierebbe una pagina ║ ║ che nessuno ha chiesto di cambiare. La duplicazione è il prezzo di non ║ ║ toccare un file condiviso mentre due rami lavorano in parallelo, ed è ║ ║ lo stesso patto già scritto in docs/rev3-motion.md per i token. ║ ║ ║ ║ UNA CONSEGUENZA DA SAPERE, non un effetto collaterale nascosto: ║ ║ `.bottone--pieno` della home è `--viola` con testo bianco (4,57:1), ║ ║ quello di `style.css` era `--viola-testo` (5,81:1). Tutti e due passano ║ ║ il 4,5:1 di WCAG 1.4.3 per il testo normale, e il bottone è testo ║ ║ normale in grassetto. Si adotta il valore della home perché la ║ ║ richiesta è che i due blocchi siano lo stesso blocco; se un domani la ║ ║ soglia va alzata, si alza in un posto solo, e quel posto è la home. ║ ╚══════════════════════════════════════════════════════════════════════════╝ */ /* ── BOTTONI (demo.r1.css:178-235) ───────────────────────────────────────── Pill radius 100px, bordo 1px, fondo trasparente: è la sola forma tonda ammessa dal marchio. */ .bottone { position: relative; overflow: clip; display: inline-flex; align-items: center; justify-content: center; padding: 0.85em 1.6em; border: 1.5px solid currentColor; border-radius: var(--raggio-pill); font-weight: var(--w-bold); font-size: 0.95rem; text-decoration: none; color: var(--nero); background: transparent; cursor: pointer; transition: background-color var(--m-micro) var(--e-inout), color var(--m-micro) var(--e-inout), border-color var(--m-micro) var(--e-inout); } .bottone--piccolo { padding: 0.6em 1.2em; font-size: 0.875rem; } .bottone--pieno { background: var(--viola); border-color: var(--viola); color: #fff; } .bottone__t { position: relative; z-index: 1; display: block; } /* Il riempimento sale da sinistra e il testo resta leggibile per tutta la transizione. Il roll-up del riferimento, con l'etichetta che esce e l'eco che entra, a metà strada mostra due mezze parole: su una CTA è il momento in cui la persona sta decidendo se cliccare, e non è il momento di togliere le parole. */ .bottone { isolation: isolate; } .bottone::before { content: ""; position: absolute; inset: 0; /* Dietro il contenuto: quando il testo non sta dentro uno span, come nel tasto Invia, un riempimento sopra lo copriva del tutto. */ z-index: -1; border-radius: inherit; background: var(--viola); transform: scaleX(0); transform-origin: left; transition: transform var(--m-medio) var(--e-inout); } .bottone:hover::before, .bottone:focus-visible::before { transform: scaleX(1); } .bottone:hover, .bottone:focus-visible { color: #fff; border-color: var(--viola); } /* Il bottone pieno fa il contrario: il fondo scuro entra sopra il violet. */ .bottone--pieno::before { background: #4B3F71; } .bottone--pieno:hover, .bottone--pieno:focus-visible { border-color: #4B3F71; } /* ⚠️ `--m-medio` (350ms) è l'unico token che la home usa qui e che `docs/rev3-motion.md` aveva lasciato fuori di proposito, perché da loro non lo usava nessun altro. Con il riempimento copiato verbatim serve, e viene dichiarato qui con il valore che ha lì. Senza, il `transition` cadrebbe sul valore iniziale e il riempimento comparirebbe di colpo. */ :root { --m-medio: 350ms; } /* ── TIPOGRAFIA (demo.r1.css:148-176) ────────────────────────────────────── Come per l'hero, la scala di --t-giga è tarata su una colonna piena: qui i titoloni stanno in metà griglia accanto al modulo, e «Prezzemolo» a quella misura uscirebbe dalla colonna e finirebbe sopra i campi. */ .titolo-giga { font-size: clamp(2.25rem, 0.5rem + 5.2vw, 5.5rem); font-weight: var(--w-light); line-height: var(--lh-stretta); letter-spacing: var(--ls-stretta); } .titolo-giga strong { font-weight: var(--w-bold); } .titolo-giga em { font-style: italic; font-weight: var(--w-light); } .occhiello { font-size: var(--t-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--viola-testo); margin: 0 0 var(--s-2); } .lead { font-size: var(--t-lead); line-height: 1.35; max-width: 46ch; } .corpo { max-width: 62ch; } .corpo--tenue { color: var(--testo-tenue); } /* ⚠️ NON è una regola della home: è la riga che rimette il ritmo dei paragrafi della home dentro un blocco che qui vive in mezzo a `style.css`. Lì `p { margin: 0 0 var(--s-2) }` è una regola di base del foglio intero; qui una regola di base cambierebbe anche i micro paragrafi dei moduli, che non c'entrano. Quindi è ristretta al blocco copiato, e il risultato dentro la chiusura è identico. Lo stesso vale per il tetto di `.corpo--tenue`, che in `style.css` scende a `--t-small` e sulla home resta a 1rem. */ .contatti .lead, .contatti .corpo { margin: 0 0 var(--s-2); } .contatti .corpo--tenue { font-size: var(--t-body); } /* Fine del riquadro copiato. Il gemello sta in fondo al file. */ /* ══════════════════════════════════════════════════════════ APERTURA ═══════ Tre cose sole: copertina, titolo, invito. Un invito, non due. */ /* A tutta larghezza fino a 1440px, poi centrata in una banda da 1440: i file sono larghi 1440 e la soglia dell'ingrandimento è 1441, non 1600. Il numero sta anche nel `sizes` della copertina in index.html, e i due si muovono insieme. */ .caso-copertina { margin: 0 0 var(--s-4); background: var(--bianco-sporco); } .caso-copertina img { display: block; width: 100%; max-width: 1440px; margin-inline: auto; height: clamp(480px, 72vh, 800px); object-fit: cover; /* ⚠️ Rev 8, RICHIESTA DEL COMMITTENTE: «si tagliano troppo le ragazze in basso lasciando vedere solo le gambe». Era vero e il conto lo spiega: il file è 1440×900, la banda a 1440 px è alta 648, quindi si tagliano 252 px in verticale; con `40%` ne uscivano 101 dall'alto e 151 dal basso, e in questo scatto le persone sono distese CON LE GAMBE IN ALTO — le teste e le mani stanno in basso, fra 768 e 864 px. Il taglio dal basso toglieva esattamente le persone e lasciava in quadro le gambe. `80%`: il taglio si sposta in alto (202 px dall'alto, 50 dal basso), le tre allieve entrano intere con le mani sulla barra, e dell'arco resta la curva invece del soffitto. Fra l'arco e le persone si tengono le persone: il soffitto si vede lo stesso nella fotografia del team, più avanti. Il file non si tocca: il ritaglio 16/10 è giusto, sbagliato era dove lo si tagliava. (L'originale è un verticale 4312×6468, quindi un ritaglio nuovo sarebbe possibile: non serve.) */ object-position: center 80%; } /* ⚠️ Sotto i 1000 px il problema si capovolge, ed è più grave. Un'altezza in `vh` su una colonna stretta non taglia in verticale, INGRANDISCE: a 390 px la banda è alta 608, la fotografia va scalata a 973 px di larghezza e se ne vede il 40%, cioè un pezzo di persona a 2,5×. Qui la copertina prende una PROPORZIONE invece di un'altezza: 5/4 a 390 px sono 312 px di banda, la fotografia si vede tutta in verticale e il taglio resta orizzontale e piccolo (il 22%, che è la riflessione nello specchio a sinistra). È la stessa immagine, letta alla misura del telefono invece che alla misura di un desktop rimpicciolito. `max-height: 70vh` è la cintura per le finestre basse e larghe (un tablet coricato): lì la proporzione tornerebbe a fare una banda più alta dello schermo, e il taglio verticale riprende con l'`object-position` di sopra. */ @media (max-width: 999.98px) { .caso-copertina img { height: auto; aspect-ratio: 5 / 4; max-height: 70vh; } } /* Regola unica per tutte le pagine di lavoro: il nome più lungo della home deve stare in 280px utili a 320px di larghezza. */ .caso-titolo { font-size: clamp(2rem, 1rem + 5.5vw, 7rem); font-weight: var(--w-light); line-height: .95; letter-spacing: var(--ls-stretta); overflow-wrap: break-word; margin: 0 0 var(--s-4); } .caso-titolo strong { font-weight: var(--w-bold); } .caso-titolo em { font-style: italic; font-weight: var(--w-light); } /* ⚠️ Rev 8: in questa riga c'era l'invito, adesso c'è la CATEGORIA. L'occhiello «Reformer pilates · Roseto degli Abruzzi» era sopra il titolo e il committente l'ha mandato sotto: la prima cosa che si legge deve essere il nome del cliente. Il posto scelto è sotto la LEAD e non sotto il titolo, e la ragione è che sotto il titolo la categoria si rimetterebbe in mezzo fra il nome e la frase che lo spiega — la stessa interruzione di prima, dieci centimetri più in basso. Sotto la lead l'ordine diventa: chi è, cosa gli abbiamo fatto, in che mestiere. Il posto libero è quello che lascia il bottone uscito nello stesso giro, e qui sta il guadagno: da 1060 px in su la categoria sta sulla stessa riga della lead, allineata a destra sulla stessa base, quindi la pagina non si allunga di una riga. Sotto i 1060 px tornano incolonnate, e la categoria resta comunque l'ultima cosa dell'apertura. */ @media (min-width: 1060px) { .caso-apertura__coda { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); } .caso-apertura__coda .lead { flex: 1 1 24rem; margin-bottom: 0; } .caso-apertura__coda .caso-apertura__categoria { flex: 0 0 auto; } } /* L'occhiello di base ha un margine sotto, perché di solito introduce quello che viene dopo. Qui non introduce niente: è l'ultima riga dell'apertura. */ .caso-apertura__categoria { margin: 0; } .caso-apertura { padding-bottom: var(--s-5); } /* ═══════════════════════════════════════════════════════════ I MODULI ══════ Un modulo è una sezione con una testa e il suo contenuto. Niente altro. Il passo fra i moduli è quello che la homepage nuova mette fra le sezioni, var(--s-6): 112 px a 1440 e 56 a 390. */ /* Dentro il modulo il passo è uno solo, 32 px, e vale fra la testa e la prima figura come fra due figure. ⚠️ Il passo è un `gap` e non un `margin-top` sul fratello: `.caso-figura` azzera i propri margini con lo shorthand, ha la stessa specificità di una regola `.caso-mod > * + *` e viene dopo, quindi glielo mangerebbe. Col gap non c'è ordine che tenga. */ .caso-mod { display: grid; gap: var(--s-4); padding-block-start: var(--s-6); } .caso-figura + .caso-nota { margin: var(--s-2) 0 0; } /* ⚠️ Rev 8, RICHIESTA DEL COMMITTENTE: «la sezione è appiccicata al modulo di contatto che segue». Era vero, e il conto dice perché: fra due moduli il passo è il `padding-block-start: var(--s-6)` del modulo che arriva, ma la chiusura non è un modulo, è una FASCIA CON UN FONDO. Il suo `--s-6` sta dentro la fascia, quindi il bordo del colore cominciava esattamente dove finiva l'ultima riga della linea del tempo: zero pixel di bianco fra le due. Il valore non è scelto, è preso dal ritmo che c'è già: lo stesso `--s-6` che separa due moduli, messo fuori dalla fascia. Sopra la fascia c'è il passo fra due sezioni, dentro c'è il passo della fascia — che è esattamente come la homepage nuova separa due sezioni (fondo di una, testa dell'altra), e qui non si vedeva perché i moduli hanno il padding da un lato solo. È scritta sul fratello e non sulla classe della chiusura perché è una regola di RITMO fra due blocchi, non una proprietà della chiusura: una pagina di caso che finisse con un altro blocco tenue avrebbe lo stesso problema. */ .caso-mod + .sezione--tenue { margin-block-start: var(--s-6); } /* ── La testa di modulo ──────────────────────────────────────────────────── Due cose, non tre: il nome del servizio (identico a quello della home) e il micro paragrafo, tetto 32 parole. Da 1000 px in su stanno affiancati e allineati in basso, come la homepage nuova fa con il titolo di sezione e la colonna che lo accompagna. */ .caso-testa { display: grid; gap: var(--s-2); } @media (min-width: 1000px) { .caso-testa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-6); } } .caso-mod__titolo { font-size: clamp(2rem, 1.2rem + 2.6vw, 4rem); font-weight: var(--w-bold); line-height: var(--lh-media); letter-spacing: var(--ls-stretta); margin: 0; } .caso-mod__micro { margin: 0; font-size: var(--t-body); line-height: var(--lh-larga); max-width: 46ch; color: var(--testo-tenue); } /* ── Le note di onestà ───────────────────────────────────────────────────── NON sono didascalie: non dicono cosa si vede, dicono cosa non è vero. ⚠️ Rev 6: NON SI VEDONO PIÙ IN PAGINA. Il committente ha chiesto che «questa pagina è un esempio costruito da noi» esca dalle didascalie visibili. Nel markup restano, con `class="caso-nota solo-anteprima" hidden`: le accende l'interruttore dei codici, che è spento di default. Non è un cavillo: il controllo di conformità del deploy continua a trovarle dov'erano (per ogni `img` col prefisso `demo-` la sezione deve avere una `.caso-nota` con la parola «esempio»), e chi giudica l'anteprima le legge accendendo l'interruttore. Le cifre inventate restano dichiarate dentro l'immagine e nell'`alt`. Questa regola resta perché la nota resta un elemento della pagina: su una pagina di caso vero, senza anteprima.css, resta nascosta — e lì non serve, perché non c'è niente di costruito da dichiarare. */ .caso-nota { max-width: 62ch; font-size: var(--t-small); color: var(--testo-tenue); } /* ── Il collegamento esterno, dove non fa concorrenza a un invito ────────── Il rimando al profilo o al sito del cliente sta in coda alla sezione a cui appartiene, in forma sobria, dove è un fatto e non una seconda strada. ⚠️ Rev 6, deroga del committente alla regola «niente target=_blank» di docs 3.1: i link ai profili e ai siti DEI CLIENTI si aprono in una scheda nuova, con `rel="noopener"` e con l'avviso `.fuori-schermo`. La freccia è `aria-hidden`: dice la stessa cosa a chi vede, senza ripeterla a voce. */ .caso-esterno { margin: var(--s-2) 0 0; font-size: var(--t-small); color: var(--testo-tenue); } .caso-esterno a { text-underline-offset: .2em; } /* ═══════════════════════════════════ QUELLO CHE È SCRITTO, SI SCRIVE ═══════ Un componente solo, tre tagli. `.caso-elenco` è una colonna di righe separate da un filetto, e ogni riga porta da uno a tre pezzi: un numero facoltativo, un termine, una riga di spiegazione facoltativa. Da lì escono: --fasi il piano del modulo «strategia»: numero, titolo, una riga. È l'intero modulo, perché quel servizio non produce file da mostrare e una schermata finta di un fascicolo che non esiste si vede che è finta. --prova la colonna che accompagna la schermata dei moduli costruiti: termine e una riga, tre voci. Si adatta a un altro cliente cambiando solo il testo: nessuna misura del componente dipende da quante voci ci sono o da quanto sono lunghe. */ .caso-elenco { list-style: none; margin: 0; padding: 0; } .caso-elenco > li { position: relative; padding-block: var(--s-2); } /* Il filetto è un ::before e non un `border-top` perché deve poter entrare in scena: il bordo non si anima senza far saltare il layout, un pseudo-elemento in scaleX sì. È lo STESSO gesto del filetto che si colora sotto un campo del modulo (`.campo::after`), non un movimento nuovo: la pagina ha un solo vocabolario e questa è una parola che già usa. */ .caso-elenco > li::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--hairline-forte); transform-origin: left; transition: transform var(--m-lungo) var(--e-out); } .caso-elenco__t { display: block; } .caso-elenco__d { display: block; } /* ⚠️ Rev 8: `--parole`, `.caso-tavola` e `.caso-tavola__titolo` SONO USCITI DA QUI. Erano la tavola delle parole chiave ricostruita in tipografia, che la rev 6 aveva montato per togliere dalla pagina un refuso che stava dentro una fotografia. Il refuso adesso è corretto alla fonte (il testo del PDF è testo vero: si è corretta la parola e si è riesportata la pagina), quindi la fotografia non ha più niente di sbagliato in quadro e il committente ha scelto lei. Due varianti della stessa tavola erano un confronto da decidere, non un contenuto: decisa, una delle due esce. Sta in git, non in archivio qui. */ /* --fasi: il numero non è un elenco puntato travestito. È `aria-hidden` perché l'ordine lo porta già `
    `, e a voce «zero uno Prima il nome» sarebbe rumore. `tabular-nums` così le cifre stanno incolonnate. */ /* Tre colonne da 760 px in su, due sotto: il numero non prende mai una riga sua, o quattro mosse diventano dodici righe su un telefono. Il posto dei tre pezzi si scrive esplicitamente, così il cambio di griglia è una riga sola. */ .caso-elenco--fasi > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s-2); row-gap: var(--s-1); padding-block: var(--s-3); } .caso-elenco--fasi .caso-elenco__n { grid-area: 1 / 1; } .caso-elenco--fasi .caso-elenco__t { grid-area: 1 / 2; } .caso-elenco--fasi .caso-elenco__d { grid-area: 2 / 2; } @media (min-width: 760px) { .caso-elenco--fasi > li { grid-template-columns: 5rem minmax(0, 1.15fr) minmax(0, 1fr); align-items: baseline; column-gap: var(--s-4); } .caso-elenco--fasi .caso-elenco__d { grid-area: 1 / 3; } } .caso-elenco--fasi .caso-elenco__n { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); font-weight: var(--w-light); line-height: var(--lh-media); letter-spacing: var(--ls-stretta); color: var(--testo-tenue); font-variant-numeric: tabular-nums; } .caso-elenco--fasi .caso-elenco__t { font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); font-weight: var(--w-bold); line-height: var(--lh-media); letter-spacing: var(--ls-stretta); } .caso-elenco--fasi .caso-elenco__d { font-size: var(--t-body); line-height: var(--lh-larga); color: var(--testo-tenue); } /* --prova: la colonna scritta accanto alla schermata. Da 1000 px in su si stira all'altezza della figura e le tre voci si distribuiscono: così i filetti scandiscono la stessa altezza dell'immagine invece di ammucchiarsi in cima lasciando un buco sotto. */ .caso-elenco--prova { display: grid; } .caso-elenco--prova > li { display: grid; gap: 6px; padding-block: var(--s-3); } /* Un gradino sopra il corpo del testo, non due: la colonna accompagna la schermata e non le fa concorrenza, ma a 16 px scompariva accanto a una figura larga 725. */ .caso-elenco--prova .caso-elenco__t { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem); font-weight: var(--w-bold); line-height: var(--lh-media); letter-spacing: var(--ls-stretta); } .caso-elenco--prova .caso-elenco__d { font-size: var(--t-small); line-height: var(--lh-larga); color: var(--testo-tenue); } @media (min-width: 1000px) { .caso-elenco--prova { align-content: space-between; } } /* Sotto i 1000 px la colonna scende sotto la schermata e non ha più un'altezza da riempire: lì il passo si stringe, perché quello che su desktop è respiro accanto a una figura, su telefono è solo pagina in più. */ @media (max-width: 999.98px) { .caso-elenco--prova > li { padding-block: var(--s-2); } } /* Rev 7: la colonna di prova può portare un numero, e lo porta solo dove il numero serve a legare la riga a un segno del disegno accanto (il modulo 06: 01, 02, 03 sono gli stessi tre bolli disegnati sugli anelli). È `aria-hidden` nel markup, perché a voce «zero uno chi passa davanti» sarebbe rumore e l'ordine lo porta già `
      `. Dove il numero non c'è, niente cambia: è una riga di griglia che non viene occupata. */ .caso-elenco--prova .caso-elenco__n { display: block; font-size: var(--t-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow); color: var(--viola-testo); font-variant-numeric: tabular-nums; } /* ── --ritmo: come si tiene un profilo ───────────────────────────────────── Rev 7, modulo 04. Il committente ha chiesto di far vedere «il ritmo del lavoro (piano editoriale, cadenza, formati)» senza inventare numeri di risultato. È la colonna scritta che sta accanto alla griglia del profilo, e porta il corpo di `.caso-tempo`, non quello di `.caso-elenco--prova`: lì la colonna accompagna una schermata larga e non le fa concorrenza, qui è il contenuto principale del modulo accanto a un telefono stretto, e a 14 px sarebbe una didascalia lunga. Si distribuisce sull'altezza della figura per la stessa ragione di --prova: tre voci ammucchiate in cima a una colonna alta 615 px lasciano un buco. */ .caso-elenco--ritmo > li { padding-block: var(--s-3); } .caso-elenco--ritmo .caso-elenco__t { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.75rem); font-weight: var(--w-bold); line-height: var(--lh-media); letter-spacing: var(--ls-stretta); } .caso-elenco--ritmo .caso-elenco__d { margin-top: 6px; font-size: var(--t-body); line-height: var(--lh-larga); color: var(--testo-tenue); max-width: 52ch; } @media (min-width: 1000px) { .caso-elenco--ritmo { display: grid; align-content: space-between; } } /* ── Il sottotitolo dentro un modulo ─────────────────────────────────────── Rev 7. Da quando tre servizi stanno in una sezione sola (05 Sviluppo web), il modulo ha bisogno di dire dove comincia un pezzo nuovo senza aprire un secondo titolo grande: due `h2` a 64 px nella stessa sezione sarebbero due sezioni. È un `h3` in forma di occhiello, cioè il segno più piccolo che la pagina ha già. Il livello di intestazione resta corretto per chi naviga per titoli: h1 → h2 del modulo → h3 del pezzo. */ .caso-sub { margin: 0 0 var(--s-3); } /* ── Il blocco piccolo ───────────────────────────────────────────────────── Rev 7, l'assistenza IT dentro «Sviluppo web». Il committente: «non merita una sezione grande: una riga o un blocco piccolo». È un servizio che si compra fidandosi, non guardando, e un modulo con titolo, micro paragrafo e schermata finta gli dava il peso di un progetto. Un filetto, un'etichetta e una riga. */ .caso-minuto { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--hairline-forte); } @media (min-width: 760px) { .caso-minuto { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; } } .caso-minuto__titolo { margin: 0; } .caso-minuto__testo { margin: 0; font-size: var(--t-body); line-height: var(--lh-larga); color: var(--testo-tenue); max-width: 62ch; } /* ═════════════════════════════ QUELLO CHE SI DISEGNA, SI DISEGNA ═══════════ Rev 7, moduli 06 e 07. Il committente ha chiesto di far vedere quei due servizi «con i mezzi del disegno, non con una schermata inventata»: le due schermate finte (`demo-annuncio`, `demo-email`) sono uscite da public/. Le forme sono due e sono diverse apposta — «non farli uguali»: .caso-disegno + .caso-annuncio 06: una mappa di SPAZIO (a chi arriva) più l'annuncio smontato in tipografia .caso-tempo 07: una riga di TEMPO (cosa arriva, quando) Nessuna delle due porta un numero, e non è una rinuncia: un numero qui sarebbe inventato, e la pagina ne ha già abbastanza di dichiarato. ========================================================================= */ /* ── Il disegno in SVG ───────────────────────────────────────────────────── L'SVG sta nel markup e non in un file: è quindici elementi, cambia colore col resto della pagina perché usa i token, e un file in più sarebbe una riga in più nell'elenco dei condivisi del deploy per 700 byte. Il quadro ha lo stesso bordo e lo stesso fondo tenue di una figura, perché nella riga sta al posto di una figura: se galleggiasse nel bianco la riga sembrerebbe sbilanciata. */ .caso-disegno { margin: 0; border: 1px solid rgba(17, 17, 17, .06); background: var(--bianco-sporco); } .caso-disegno svg { display: block; width: 100%; height: auto; } .d-anello { fill: none; stroke: var(--hairline-forte); stroke-width: 1; } .d-raggio { stroke: var(--hairline-forte); stroke-width: 1; } .d-centro { fill: var(--viola); } /* I bolli hanno il fondo del quadro, non il bianco: appoggiati sull'anello devono interromperlo, e un bianco su fondo tenue si vedrebbe come un alone. */ .d-bollo { fill: var(--bianco-sporco); stroke: var(--nero); stroke-width: 1.2; } .d-num { fill: var(--nero); font-family: var(--font); font-size: 14px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; } .d-eti { fill: var(--testo-tenue); font-family: var(--font); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; } /* La presa del mouse su un anello. Un tratto da un pixel non si punta: queste sono le stesse tre circonferenze con un tratto trasparente spesso 26, e `pointer-events: stroke` dice che a raccogliere il puntatore è la fascia del tratto e non il disco dentro — altrimenti la presa dell'anello più largo coprirebbe le altre due. ⚠️ `fill: none` non è pulizia: un `` senza `fill` dichiarato è NERO, e tre dischi neri coprirebbero il disegno. Nessun `f-` da stilare qui: le regole del fuoco nominano `.d-anello`, `.d-bollo` e `.d-num`, mai la classe di gruppo da sola, quindi la presa resta trasparente qualunque cosa succeda. */ .d-presa { fill: none; stroke: transparent; stroke-width: 26; pointer-events: stroke; } /* ── L'annuncio smontato ─────────────────────────────────────────────────── Quattro pezzi, ognuno con l'etichetta di che mestiere fa. Non è il facsimile di un annuncio: è l'annuncio aperto, che è la cosa che un cliente nuovo non ha mai visto e che spiega perché un annuncio costa. Si adatta a un altro cliente cambiando quattro righe di testo e zero misure. */ .caso-annuncio__p { display: grid; gap: 6px; padding-block: var(--s-3); border-top: 1px solid var(--hairline); } @media (min-width: 760px) { .caso-annuncio__p { grid-template-columns: 20rem minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; } } .caso-annuncio__e { font-size: var(--t-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--testo-tenue); } .caso-annuncio__t { font-size: var(--t-lead); font-weight: var(--w-light); line-height: 1.35; max-width: 42ch; } .caso-annuncio__g { font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); font-weight: var(--w-bold); line-height: var(--lh-media); letter-spacing: var(--ls-stretta); } /* Il bottone è disegnato, non è un comando: non è un