/* ═══════════════════════════════════════════════════════════════════ pagine.css · quello che serve solo alle pagine interne ─────────────────────────────────────────────────────────────────── La home è un percorso: cinque postazioni che si attraversano. Le pagine interne sono un'altra cosa — ci si va per **leggere**, e chi ci arriva ha già deciso di volerne sapere di più. Quindi qui non si inventa un secondo linguaggio: si usa lo stesso di `banco.css` — la superficie che cambia luce, i due registri, la ceralacca come unico accento, i fili tirati a mano — e si aggiunge solo quello che sulla home non serviva: i passi numerati, le due colonne del «chi fa cosa», la colonna di chi risponde nel listino. ⚠️ Questo foglio si carica DOPO banco.css e non lo riscrive mai: aggiunge classi nuove. Se un giorno una regola qui dentro dovesse sovrascriverne una di là, vuol dire che la modifica va fatta di là. ═══════════════════════════════════════════════════════════════════ */ /* ── l'apertura di una pagina interna ───────────────────────────── Più bassa dell'insegna della home: lì si entra, qui si è già entrati. Il titolo parte subito, senza la banda del video. */ .ba-apertura { padding-top: calc(var(--ba-respiro) + 4.5rem); } .ba-apertura .ba-display { max-width: 15ch; } /* il marchio della testata torna a casa */ .ba-marchio-casa { display: inline-flex; position: relative; } /* Con la testata stretta il marchio è alto 38 px: l'area sensibile cresce fino a 44 e oltre, il disegno no (15/09). */ .ba-marchio-casa::before { content: ''; position: absolute; inset: -.4rem -.3rem; } /* la voce del menù su cui stai */ .ba-testata nav a[aria-current="page"] { color: var(--ba-luce-testo); } .ba-testata.ba-chiara nav a[aria-current="page"] { color: var(--ba-inchiostro); } /* ── i passi numerati ───────────────────────────────────────────── Tre momenti in fila, col numero in Bodoni grande e il filo che li lega. Non è una «timeline»: è un elenco che sa di essere in ordine. */ .ba-passi { list-style: none; margin: clamp(2.2rem, 5vh, 3.4rem) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ba-filo-vivo); } .ba-passi li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); padding-block: clamp(1.4rem, 3vh, 2.1rem); border-bottom: 1px solid var(--ba-filo-vivo); } @media (max-width: 640px) { .ba-passi li { grid-template-columns: 1fr; gap: .5rem; } } /* ── due colonne: quello che arriva fatto, quello che resta a te ─── ⚠️ Nessun bordo intorno alle colonne. Due riquadri affiancati diventano subito «noi contro voi»; due elenchi sotto due etichette restano quello che sono, cioè una divisione del lavoro detta chiara. */ .ba-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2rem, 4vh, 3rem); } @media (max-width: 800px) { .ba-due { grid-template-columns: 1fr; gap: 2.4rem; } } .ba-due .ba-fatti { margin-top: .9rem; } /* ── la colonna «chi risponde» nel listino delle norme ──────────── La riga del listino qui porta tre cose: la voce, cosa comporta, e **chi ci mette la firma**. Quest'ultima in corsivo e sottovoce: è una nota, non una colonna di prezzi. */ .ba-riga-chi { font-family: var(--ba-display); font-style: italic; font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height: 1.4; color: var(--ba-ink-3); white-space: nowrap; text-align: right; transition: color .55s ease-in-out; } @media (max-width: 860px) { .ba-riga-chi { grid-column: 1 / -1; text-align: left; margin-top: .4rem; } } /* ── un elenco di domande scomode ───────────────────────────────── Domanda in Bodoni, risposta sotto. Nessun accordion: se una domanda vale la pena di essere scritta, vale la pena di essere letta senza doverci cliccare sopra. */ .ba-scomode { display: grid; gap: 0; margin-top: clamp(2rem, 4vh, 3rem); border-top: 1px solid var(--ba-filo-vivo); } /* ⚠️ LA DOMANDA A SINISTRA, LA RISPOSTA ACCANTO. Prima erano tre blocchi impilati, domanda sopra e risposta sotto, tutti a filo sinistro su 44% della larghezza: due terzi di riga vuoti per tutta la sezione, e l'occhio che entra sempre nello stesso punto per la settima volta di fila. Affiancandole non si aggiunge una parola e si guadagnano tre cose: la banda si usa tutta, la domanda resta ferma come un'intestazione mentre l'occhio scende sulla risposta, e — la più importante — **si vede al volo che le domande sono tre**, che era il punto del titolo. Prima bisognava scorrere per scoprirlo. Sotto i 900 px torna impilata: due colonne su un telefono farebbero una domanda per riga e una risposta a scala. */ .ba-scomoda { padding-block: clamp(1.6rem, 3.4vh, 2.3rem); border-bottom: 1px solid var(--ba-filo-vivo); display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 3rem); align-items: start; } .ba-scomoda-d { font-family: var(--ba-display); font-weight: 500; line-height: 1.12; font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; max-width: 20ch; transition: color .55s ease-in-out; } .ba-scomoda-r { margin: 0; max-width: 58ch; font-size: clamp(1.02rem, 1.1vw, 1.12rem); line-height: 1.7; color: var(--ba-ink-2); transition: color .55s ease-in-out; } @media (max-width: 900px) { .ba-scomoda { grid-template-columns: 1fr; gap: .7rem; } .ba-scomoda-d { max-width: 26ch; } } .ba-scomoda-r b { color: var(--ba-ink-forte); font-weight: 600; } /* ── la fila delle altre pagine, in fondo ─────────────────────────── */ .ba-altrove { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(2.4rem, 5vh, 3.6rem); border-top: 1px solid var(--ba-filo-vivo); } @media (max-width: 800px) { .ba-altrove { grid-template-columns: 1fr; } } .ba-altrove a { display: block; padding: clamp(1.4rem, 3vh, 2rem) clamp(1.2rem, 2.4vw, 2rem) clamp(1.4rem, 3vh, 2rem) 0; text-decoration: none; border-bottom: 1px solid var(--ba-filo-vivo); } .ba-altrove a + a { border-left: 1px solid var(--ba-filo-vivo); padding-left: clamp(1.2rem, 2.4vw, 2rem); } @media (max-width: 800px) { .ba-altrove a + a { border-left: 0; padding-left: 0; } } .ba-altrove-voce { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-ink-3); margin-bottom: .5rem; transition: color .55s ease-in-out; } .ba-altrove-tit { display: block; font-family: var(--ba-display); font-weight: 500; line-height: 1.05; font-size: clamp(1.3rem, 2.2vw, 1.8rem); transition: color .35s; } /* ⚠️ Le tre porte in fondo sono la navigazione VERA fra le cinque pagine, e cambiavano solo il colore del titolo. Ora la cella prende un velo di carta e il titolo fa mezzo passo verso chi legge: è lo stesso gesto di `.ba-porta`, che allarga il passo verso la freccia. Un sito che ha un solo modo di dire «questo si clicca» lo deve usare dappertutto. */ .ba-altrove a { transition: background-color .3s ease, border-color .55s ease-in-out; } .ba-altrove a:hover { background: rgba(255, 253, 247, .5); } html.ba-scuro .ba-altrove a:hover, html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-altrove a:hover { background: rgba(246, 242, 231, .045); } .ba-altrove-tit { transition: color .35s, transform .35s cubic-bezier(.16, 1, .3, 1); } .ba-altrove a:hover .ba-altrove-tit { color: var(--ba-accento); transform: translateX(.35rem); } /* stati di partenza della regia, gemelli di quelli in banco.css */ html.mv .ba-passi li, html.mv .ba-colonna, html.mv .ba-scomoda, html.mv .ba-altrove a { opacity: 0; } /* ═══════════════════════════════════════════════════════════════════ L'OROLOGIO · la forma della pagina «Il sito» ─────────────────────────────────────────────────────────────────── ⚠️ Le quattro pagine interne erano identiche: apertura scura, tre postazioni chiare, «Parliamone», e dentro sempre gli stessi tre mattoni — titolo, paragrafo, elenco puntato. Erano schede informative, e una scheda si può leggere in qualunque ordine: è esattamente il motivo per cui non raccontavano niente. Qui la pagina ha una forma sua: **le ore**. Una sera qualsiasi seguita scena per scena, con l'ora in Bodoni sulla colonna di sinistra e il filo che le lega. Non è una «timeline»: è che l'ordine dei fatti conta, e la forma lo dice prima delle parole. ═══════════════════════════════════════════════════════════════════ */ .ba-ore { display: grid; gap: 0; margin: clamp(2.4rem, 5vh, 3.6rem) 0 0; } .ba-ora { display: grid; grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2.2rem); padding-bottom: clamp(2.2rem, 5vh, 3.6rem); } .ba-ora:last-child { padding-bottom: 0; } /* l'ora: giorno sopra piccolo, cifra sotto in Bodoni, allineati a destra contro il filo — come su un registro tenuto a mano */ .ba-ora-quando { text-align: right; } /* ── l'ora cammina (22/09/2026, idea di Luciano) ───────────────── L'ora resta a metà schermo mentre la sua scena scorre, e il pallino sta sulla cifra: così è il pallino a percorrere il filo, e l'ora scende con lui. Finita la scena l'ora si ferma in fondo e se ne va con lei — sticky vive dentro la sua area di griglia, cioè la scena. ⚠️ il pallino stava sulla scena (::before in cima): ora sta sulla cifra, che è l'unica cosa che si muove. */ @media (min-width: 641px) { .ba-ora-quando { position: sticky; top: calc(50vh - 2.2rem); align-self: start; } .ba-ora-n { position: relative; } .ba-ora-n::after { content: ''; position: absolute; top: 50%; margin-top: -3.5px; right: calc(-1 * clamp(1rem, 2.4vw, 2.2rem) - 4px); width: 7px; height: 7px; border-radius: 50%; background: var(--ba-accento); box-shadow: var(--ba-alone); transition: background-color .55s ease-in-out, box-shadow .7s ease-out, transform .45s cubic-bezier(.16,1,.3,1); } html.mv .ba-ora-n::after { background: var(--ba-ink-3); box-shadow: none; transform: scale(.72); } html.mv .ba-ora.ba-passata .ba-ora-n::after { background: var(--ba-accento); box-shadow: var(--ba-alone); transform: scale(1); } } .ba-ora-giorno { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-ink-3); margin-bottom: .25rem; transition: color .55s ease-in-out; } .ba-ora-n { display: block; font-family: var(--ba-display); font-weight: 500; line-height: 1; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ba-accento); font-variant-numeric: tabular-nums; transition: color .55s ease-in-out; } /* ═══════════════════════════════════════════════════════════════════ IL FILO DEL TEMPO ─────────────────────────────────────────────────────────────────── Questa pagina racconta **una sera**, dalle 21:40 alle 10:04. Il filo verticale coi pallini c'era già, ma era una riga di CSS ferma e tutte e sette le ore erano rosse dal primo istante: la pagina mostrava il tempo invece di farlo passare. Adesso il filo **si tira mentre scendi**, il pallino si accende quando la sua ora arriva a metà schermo e la cifra in Bodoni passa da grigia a rossa in quel momento. È l'unico posto del sito dove lo scorrimento *è* la metafora — scendere è la sera che avanza — ed era l'unico posto dove lo scorrimento non era usato. ⚠️ Lo stato di partenza è ACCESO, e lo spegne `html.mv`. Così senza JS, o con il movimento ridotto, la pagina è quella di sempre: tutte le ore leggibili e il filo intero. Un effetto che, mancando, lascia il buio è un effetto rotto. ⚠️ Il filo si tira in `transform: scaleY`, non in `height`: la seconda ricalcolerebbe il layout a ogni fotogramma di una riga alta quattrocento pixel. */ .ba-ora-scena { position: relative; padding-left: clamp(1.1rem, 2.4vw, 2rem); border-left: 1px solid var(--ba-filo-vivo); } .ba-ora:last-child .ba-ora-scena { border-left-color: transparent; } /* ── il segno del tempo (22/09/2026) ───────────────────────────── Luciano: «troppo una riga che si riempie con i puntini». Adesso il tratto è una scia, piena al pallino e sempre più tenue verso dove è partito — come l'inchiostro che asciuga — e il pallino ha un alone caldo invece di essere un bollo piatto. Le due misure si dichiarano sugli elementi e non su :root: nelle sezioni scure l'accento cambia, e una variabile risolta in cima alla pagina resterebbe quella chiara. */ .ba-ora-scena, .ba-ora-n, .ba-gesto, .ba-gesto-n, .ba-spartito, .ba-spartito-pallino, .ba-voce-filo { --ba-scia: linear-gradient(to bottom, color-mix(in srgb, var(--ba-accento) 0%, transparent) 0%, color-mix(in srgb, var(--ba-accento) 22%, transparent) 40%, color-mix(in srgb, var(--ba-accento) 70%, transparent) 85%, var(--ba-accento) 100%); --ba-alone: 0 0 0 4px color-mix(in srgb, var(--ba-accento) 13%, transparent), 0 0 18px 5px color-mix(in srgb, var(--ba-accento) 34%, transparent); } /* il tratto acceso, sopra la traccia spenta */ .ba-ora-scena::after { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--ba-scia); transform-origin: top center; transform: scaleY(1); } .ba-ora:last-child .ba-ora-scena::after { display: none; } html.mv .ba-ora-scena::after { transform: scaleY(0); } html.mv .ba-ora .ba-ora-n, html.mv .ba-ora .ba-ora-giorno { color: var(--ba-ink-3); } html.mv .ba-ora.ba-passata .ba-ora-scena::after { transform: scaleY(1); transition: transform 1.15s cubic-bezier(.16,1,.3,1); } /* col pallino che cammina il tratto acceso arriva fin dove è lui: --corsa lo scrive banco.js a ogni fotogramma di scorrimento */ html.mv.ba-corsa .ba-ora.ba-passata .ba-ora-scena::after { transform: scaleY(var(--corsa, 1)); transition: none; } html.mv .ba-ora.ba-passata .ba-ora-n { color: var(--ba-accento); } html.mv .ba-ora.ba-passata .ba-ora-giorno { color: var(--ba-ink-3); } .ba-ora-tit { font-family: var(--ba-display); font-weight: 500; line-height: 1.08; font-size: clamp(1.4rem, 2.5vw, 2.05rem); margin: 0 0 .7rem; max-width: 22ch; } .ba-ora-tit em { font-style: italic; } .ba-ora-testo { margin: 0 0 .9rem; max-width: 54ch; font-size: clamp(1.02rem, 1.1vw, 1.12rem); line-height: 1.7; color: var(--ba-ink-2); transition: color .55s ease-in-out; } .ba-ora-testo:last-child { margin-bottom: 0; } .ba-ora-testo b { color: var(--ba-ink-forte); font-weight: 600; } @media (max-width: 640px) { .ba-ora { grid-template-columns: 1fr; gap: .7rem; } .ba-ora-quando { text-align: left; } .ba-ora-n { display: inline; } .ba-ora-giorno { display: inline; margin-right: .6rem; } .ba-ora-scena { border-left: 0; padding-left: 0; } } /* ── la lastra: il pezzo di schermo di quel momento ─────────────── Non uno «screenshot»: quattro righe di quello che si vede davvero, composte in tipografia. Stessa carta e stesso raggio della scheda che si apre sotto le foto nella home — è lo stesso oggetto. */ .ba-lastra { margin: 0 0 1rem; max-width: 27rem; background: var(--ba-foglio); border-radius: 7px; padding: clamp(.9rem, 2vw, 1.15rem) clamp(1rem, 2.2vw, 1.35rem); box-shadow: 0 1px 2px rgba(33,30,25,.06), 0 12px 30px -18px rgba(33,30,25,.4); color: var(--ba-inchiostro); } .ba-lastra-occhio { margin: 0 0 .55rem; font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ba-ceralacca); } .ba-lastra-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-top: 1px solid rgba(33,30,25,.1); font-size: .95rem; line-height: 1.35; } .ba-lastra-riga:first-of-type { border-top: 0; } .ba-lastra-riga span { color: var(--ba-bruno); } .ba-lastra-riga b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ba-lastra-tot { margin-top: .3rem; padding-top: .55rem; border-top: 1px solid rgba(33,30,25,.28); font-weight: 600; } .ba-lastra-tot b { font-family: var(--ba-display); font-size: 1.3rem; } .ba-lastra-nota { margin: .6rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--ba-bruno); font-style: italic; font-family: var(--ba-display); } .ba-lastra-si .ba-lastra-tot b { color: #2f6b3a; } /* ⚠️ solo il totale: se tutte le cifre sono verdi, quella che deve rassicurare — lo zero da incassare — non si distingue più dalle altre e la scena perde il suo punto. */ .ba-lastra-scelto { background: rgba(142,42,29,.07); border-radius: 4px; padding-inline: .4rem; margin-inline: -.4rem; } /* ── la svolta ──────────────────────────────────────────────────── Una pagina che racconta deve avere un punto in cui quello che credevi cambia. Qui è una riga sola, larga, senza niente intorno. */ .ba-svolta { max-width: 26ch; } /* ⚠️ i titoli delle sezioni-racconto vanno stretti: a piena larghezza «La bottega è chiusa da cinque ore.» andava a capo lasciando «ore.» da sola su una riga, che in Bodoni a 90 px è un incidente. */ #la-sera > .ba-largo > .ba-display, #consegna > .ba-largo > .ba-display { max-width: 19ch; } html.mv .ba-ora { opacity: 0; } /* ── la lastra va nel margine, non nel discorso ──────────────────── ⚠️ Prima la lastra stava in mezzo al paragrafo e la scena occupava una colonna sola: su uno schermo largo restava mezza pagina vuota a destra, e il racconto sembrava una nota a piè di pagina lunga otto schermate. Qui il parlato tiene la colonna e **la prova sta a fianco**, come lo scontrino appoggiato accanto al registro. Le scene senza lastra restano strette apposta: sono i respiri. */ @media (min-width: 1000px) { .ba-ora-scena:has(.ba-lastra) { display: grid; /* ⚠️ non `1fr`: con la colonna elastica la lastra veniva spinta contro il bordo destro del contenitore e restava un vuoto di tre dita fra il discorso e la sua prova. Due colonne misurate e `justify-content: start` le tengono vicine, e quello che avanza a destra diventa margine di stampa invece che buco. */ grid-template-columns: minmax(0, 33rem) minmax(0, 21rem); justify-content: start; column-gap: clamp(1.6rem, 3.2vw, 2.6rem); row-gap: 0; } .ba-ora-scena:has(.ba-lastra) > .ba-ora-tit { grid-column: 1 / -1; } .ba-ora-scena:has(.ba-lastra) > .ba-ora-testo { grid-column: 1; max-width: 46ch; } /* ⚠️ righe 2→100 con `row-gap:0`: la lastra deve poter stare a fianco di uno o due paragrafi senza sapere quanti sono, e senza che le righe implicite vuote aprano voragini. */ .ba-ora-scena:has(.ba-lastra) > .ba-lastra { grid-column: 2; grid-row: 2 / 100; align-self: start; margin: 0; max-width: none; } /* ── il discorso sta a metà della sua prova (22/09/2026) ────────── Luciano: con le foto alte il testo restava in cima e sotto si apriva un vuoto lungo quanto mezzo schermo. Ora titolo e paragrafi stanno al centro della lastra; l'ora e il pallino camminano lungo il filo (vedi sopra). Come: la riga ha cinque binari — molla, titolo, paragrafo, paragrafo, molla — e la scena li eredita in subgrid, così l'ora (che sta fuori dalla scena) si mette sul binario del titolo senza sapere quanto è alta la foto. Le scene hanno al massimo due paragrafi. ⚠️ il pallino passa dalla scena al titolo: sulla scena resterebbe in cima, lontano dall'ora. */ .ba-ora:has(.ba-lastra) { grid-template-rows: 1fr auto auto auto 1fr; row-gap: 0; } .ba-ora:has(.ba-lastra) > .ba-ora-quando { grid-column: 1; grid-row: 1 / 6; margin: 0; } .ba-ora-scena:has(.ba-lastra) { grid-column: 2; grid-row: 1 / 6; grid-template-rows: subgrid; } .ba-ora-scena:has(.ba-lastra) > .ba-ora-tit { grid-column: 1; grid-row: 2; align-self: start; } .ba-ora-scena:has(.ba-lastra) > .ba-ora-testo { grid-row: 3; } .ba-ora-scena:has(.ba-lastra) > .ba-ora-testo ~ .ba-ora-testo { grid-row: 4; } .ba-ora-scena:has(.ba-lastra) > .ba-lastra { grid-row: 1 / 6; align-self: center; } } /* ═══════════════════════════════════════════════════════════════════ LO SDOPPIAMENTO · la forma della pagina «Il sistema» ─────────────────────────────────────────────────────────────────── La cosa da capire in questa pagina è una sola, e non è un elenco: **da una bottega ne nascono tante.** Un elenco puntato non lo dice; un disegno che si biforca sì. Quindi qui la forma è la biforcazione, e il testo le sta intorno invece che al posto suo. ═══════════════════════════════════════════════════════════════════ */ .ba-sdoppia { display: grid; justify-items: center; margin-top: clamp(2.4rem, 5vh, 3.6rem); } .ba-ceppo { background: var(--ba-foglio); border-radius: 7px; text-align: center; padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(1.6rem, 3.4vw, 2.4rem); box-shadow: 0 1px 2px rgba(33,30,25,.06), 0 12px 30px -18px rgba(33,30,25,.4); color: var(--ba-inchiostro); max-width: 24rem; } .ba-ceppo-voce { margin: 0 0 .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-ceralacca); } .ba-ceppo-nome { margin: 0; font-family: var(--ba-display); font-weight: 500; line-height: 1.08; font-size: clamp(1.5rem, 2.6vw, 2rem); } .ba-ceppo-nota { margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ba-bruno); } /* i rami: tre tratti tirati a mano dal ceppo verso le tre botteghe */ .ba-rami { width: 100%; max-width: 56rem; height: clamp(3.5rem, 7vh, 5.5rem); display: block; } .ba-rami path { fill: none; stroke: var(--ba-filo-vivo); stroke-width: 1.4; } .ba-gemme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); width: 100%; max-width: 56rem; } @media (max-width: 720px) { .ba-gemme { grid-template-columns: 1fr; gap: .8rem; } .ba-rami { height: 2.5rem; } } .ba-gemma { background: var(--ba-foglio); border-radius: 7px; text-align: center; padding: clamp(1rem, 2.2vw, 1.35rem) clamp(.9rem, 2vw, 1.2rem); box-shadow: 0 1px 2px rgba(33,30,25,.06); color: var(--ba-inchiostro); border-top: 3px solid var(--tinta, var(--ba-ceralacca)); } .ba-gemma-voce { margin: 0 0 .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ba-bruno); } .ba-gemma-nome { margin: 0; font-family: var(--ba-display); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.15; color: var(--ba-bruno); } /* ── lo spartito: un elenco solo, con due padroni ────────────────── ⚠️ Prima erano due colonne affiancate, e due colonne affiancate si leggono come «noi contro voi». Qui c'è **una linea sola in mezzo** e ogni voce sta dalla parte di chi la fa: si legge a zig-zag, e la divisione del lavoro si vede prima di essere letta. */ .ba-spartito { margin-top: clamp(2rem, 4vh, 3rem); } .ba-spartito-testa { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 clamp(1rem, 2.6vw, 2.2rem); padding-bottom: .9rem; border-bottom: 1px solid var(--ba-filo-vivo); } .ba-spartito-testa span:first-child { text-align: right; } .ba-spartito-testa span { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-accento); transition: color .55s ease-in-out; } .ba-voce { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 clamp(1rem, 2.6vw, 2.2rem); align-items: center; padding-block: clamp(.75rem, 1.8vh, 1.05rem); } .ba-voce-filo { /* ⚠️ colonna 2 dichiarata: nelle righe di destra il filo è il primo figlio nel DOM e senza questo finiva in colonna 1, dove si allargava a barra grigia sopra metà pagina. */ grid-column: 2; /* ⚠️ non `--ba-filo-vivo`: a .16 di opacità il filo centrale spariva e restavano dei pallini sospesi nel vuoto. Ma il colore deve comunque seguire la luce, quindi si prende l'inchiostro terziario e lo si smorza — non un grigio scritto a mano. */ background: var(--ba-ink-3); opacity: .38; position: relative; align-self: stretch; } .ba-voce-filo::before { content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 7px; height: 7px; border-radius: 50%; background: var(--ba-accento); /* l'anello di fondo stacca il pallino dal filo che gli passa dietro */ box-shadow: 0 0 0 3px var(--ba-fondo-ora, transparent); transition: background-color .55s ease-in-out; } .ba-voce p { margin: 0; font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.55; color: var(--ba-ink-2); transition: color .55s ease-in-out; } .ba-voce p b { color: var(--ba-ink-forte); font-weight: 600; } .ba-voce-madre p { grid-column: 1; text-align: right; } .ba-voce-tua p { grid-column: 3; text-align: left; } /* IL PALLINO CHE CAMMINA SUL FILO (22/09/2026) — lo stesso di «Il sito» e «L'app», chiesto da Luciano. Qui non c'è un numero da tenere fermo: c'è la linea in mezzo. Un pallino la percorre stando a metà schermo, il tratto rosso arriva fin dove è lui (--corsa, da banco.js) e i pallini delle voci si accendono quando lui ci passa sopra. ⚠️ il pallino è un elemento alto zero e sticky in cima allo spartito: così cammina solo dentro lo spartito e si ferma in fondo. ⚠️ il filo di base passa dalle righe (una per voce) allo spartito intero, dietro a tutto: se restasse sulle righe, grigio a .38 di opacità, velerebbe il rosso. Con z-index 0 lo spartito tiene i suoi -1 davanti allo sfondo della sezione. Solo con il motore acceso. */ .ba-spartito-pallino { display: none; } @media (min-width: 721px) { html.mv.ba-corsa .ba-spartito { position: relative; z-index: 0; } html.mv.ba-corsa .ba-spartito::before, html.mv.ba-corsa .ba-spartito::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; z-index: -1; } /* la traccia svanisce ai due capi invece di finire tagliata */ html.mv.ba-corsa .ba-spartito::before { background: var(--ba-ink-3); opacity: .3; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); } html.mv.ba-corsa .ba-spartito::after { background: var(--ba-scia); transform-origin: top center; transform: scaleY(var(--corsa, 0)); } html.mv.ba-corsa .ba-voce-filo { background: transparent; opacity: 1; } /* le voci: un punto d'inchiostro finché il pallino non arriva, poi una perla rossa con il suo alone, più piccola di quella che cammina */ html.mv.ba-corsa .ba-voce-filo::before { background: var(--ba-ink-3); scale: .42; opacity: .7; box-shadow: none; transition: background-color .5s ease-in-out, scale .6s cubic-bezier(.16,1,.3,1), opacity .5s ease-out, box-shadow .8s ease-out; } html.mv.ba-corsa .ba-voce.ba-passata .ba-voce-filo::before { background: var(--ba-accento); scale: .86; opacity: 1; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ba-accento) 30%, transparent); } html.mv.ba-corsa .ba-spartito-pallino { display: block; position: sticky; top: 50vh; height: 0; z-index: 1; opacity: clamp(0, calc(var(--corsa, 0) * 60), 1); } html.mv.ba-corsa .ba-spartito-pallino::before { content: ''; position: absolute; left: 50%; top: 0; translate: -50% -50%; width: 8px; height: 8px; border-radius: 50%; background: var(--ba-accento); box-shadow: var(--ba-alone); } } @media (max-width: 720px) { .ba-spartito-testa { display: none; } .ba-voce { grid-template-columns: 3px minmax(0, 1fr); gap: 0 1rem; } .ba-voce-filo { grid-column: 1; } .ba-voce-madre p, .ba-voce-tua p { grid-column: 2; text-align: left; } /* sul telefono la posizione non basta più a dire di chi è: lo dice una parola */ .ba-voce-madre p::before, .ba-voce-tua p::before { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ba-accento); margin-bottom: .2rem; } .ba-voce-madre p::before { content: 'La meccanica'; } .ba-voce-tua p::before { content: 'Il tuo negozio'; } } /* ── le due firme in fondo al patto ─────────────────────────────── Le norme non sono un elenco di funzioni: sono un impegno, e un impegno finisce con chi ci mette il nome. */ .ba-firme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3.5rem); margin-top: clamp(2.4rem, 5vh, 3.4rem); } @media (max-width: 640px) { .ba-firme { grid-template-columns: 1fr; gap: 2rem; } } .ba-firma { padding-top: .8rem; border-top: 1px solid var(--ba-filo-vivo); } .ba-firma-nome { margin: 0 0 .2rem; font-family: var(--ba-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.9vw, 1.45rem); color: var(--ba-ink); transition: color .55s ease-in-out; } .ba-firma-per { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ba-ink-3); transition: color .55s ease-in-out; } html.mv .ba-ceppo, html.mv .ba-gemma, html.mv .ba-voce, html.mv .ba-firma { opacity: 0; } /* ═══════════════════════════════════════════════════════════════════ IL TELEFONO COMANDA · la forma della pagina «L'app» ─────────────────────────────────────────────────────────────────── Sei cose fatte da un telefono, scritte come sei righe di elenco, restano sei righe di elenco. Qui invece **il telefono sta fermo** a metà schermo e sono i sei gesti a scorrergli accanto: quando un gesto arriva al centro, lo schermo diventa quello. È la stessa informazione, ma la si guarda invece di leggerla. ⚠️ `position: sticky` sul telefono funziona SOLO perché su html e body c'è `overflow-x: clip` e non `hidden`: `hidden` crea un contenitore di scorrimento e lo sticky muore in silenzio. ═══════════════════════════════════════════════════════════════════ */ .ba-mano { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vh, 3rem); } .ba-mano-fermo { position: sticky; top: 22vh; justify-self: center; } /* ⚠️ Il telefono deve stare nella finestra. Su uno schermo basso — un telefono tenuto in orizzontale, un portatile con la finestra corta — era alto 576px contro 430 di finestra, e il fondo dello schermo non si vedeva mai. La larghezza si ricava dall'altezza che resta sotto il suo `top`; sugli schermi normali vince ancora il 266. Senza `svh` la regola è invalida e resta quella di `banco.css`. */ .ba-mano-fermo .ba-telefono { width: min(266px, 64vw, calc((100svh - 22vh - 1.5rem) * 9 / 19.5)); } .ba-gesti { display: grid; gap: 0; } .ba-gesto { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.4rem, 3vh, 2.2rem); border-top: 1px solid var(--ba-filo-vivo); } .ba-gesto:first-child { border-top: 0; } .ba-gesto-n { font-family: var(--ba-display); font-weight: 500; line-height: 1; font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: var(--ba-accento); margin: 0 0 .6rem; font-variant-numeric: tabular-nums; transition: color .55s ease-in-out; } .ba-gesto-tit { font-family: var(--ba-display); font-weight: 500; line-height: 1.08; font-size: clamp(1.5rem, 2.8vw, 2.25rem); margin: 0 0 .7rem; max-width: 20ch; } .ba-gesto-tit em { font-style: italic; } .ba-gesto-testo { margin: 0; max-width: 48ch; font-size: clamp(1.02rem, 1.1vw, 1.12rem); line-height: 1.7; color: var(--ba-ink-2); transition: color .55s ease-in-out; } .ba-gesto-testo b { color: var(--ba-ink-forte); font-weight: 600; } /* IL GESTO ACCESO ───────────────────────────────────────────── Non si spengono gli altri: si accende questo. Prima i gesti fuori fuoco scendevano a opacità .34, cioè 1,6:1 sul testo — illeggibili per chi legge avanti, e in bottega controluce. Adesso restano tutti pieni, e lo stato lo dice il numero, che prende la ceralacca. IL FILO DEI GESTI (22/09/2026) — lo stesso orologio di «Il sito», chiesto da Luciano. I sei gesti stanno su un filo verticale; il numero resta a metà schermo mentre il suo gesto scorre, col pallino sopra, e il tratto rosso arriva fin dove è il pallino (--corsa, da banco.js). Prima c'era un filo orizzontale che si tirava sopra il gesto acceso: due segni diversi per la stessa idea su due pagine. ⚠️ sticky vive nell'area di griglia: il numero deve occupare tutte le righe del gesto, se no non ha dove camminare. Solo dove il telefono sta di fianco: in verticale i gesti sono un elenco, e non c'è niente da indicare. Senza motore niente classe, e i numeri restano tutti accesi, col filo intero. */ @media (min-width: 901px) { .ba-gesto { position: relative; display: grid; justify-content: normal; grid-template-columns: 3rem minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 2rem; border-top: 0; } .ba-gesto-n { grid-column: 1; grid-row: 1 / 5; align-self: start; margin: 0; text-align: right; position: sticky; top: calc(50vh - .85rem); } .ba-gesto-tit { grid-column: 2; grid-row: 2; } .ba-gesto-testo { grid-column: 2; grid-row: 3; } /* il filo: la traccia spenta sotto, il tratto acceso sopra */ .ba-gesto::before, .ba-gesto::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(4rem - .5px); width: 1px; } .ba-gesto::before { background: var(--ba-filo-vivo); } .ba-gesto::after { background: var(--ba-scia); transform-origin: top center; transform: scaleY(1); } html.mv.ba-corsa .ba-gesto::after { transform: scaleY(var(--corsa, 0)); } /* il pallino sta sul numero, a metà del varco fra numero e testo */ .ba-gesto-n::after { content: ""; position: absolute; top: 50%; margin-top: -3.5px; right: calc(-1rem - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--ba-accento); box-shadow: var(--ba-alone); transition: background-color .55s ease-in-out, box-shadow .7s ease-out, transform .45s cubic-bezier(.16,1,.3,1); } html.mv .ba-gesto .ba-gesto-n { color: var(--ba-ink-3); } html.mv .ba-gesto.ba-acceso .ba-gesto-n { color: var(--ba-accento); } html.mv .ba-gesto .ba-gesto-n::after { background: var(--ba-ink-3); box-shadow: none; transform: scale(.72); } html.mv .ba-gesto.ba-acceso .ba-gesto-n::after { background: var(--ba-accento); box-shadow: var(--ba-alone); transform: scale(1); } } @media (max-width: 900px) { .ba-mano { grid-template-columns: 1fr; gap: 1.5rem; } /* ⚠️ Niente `sticky` sul telefono in verticale. Ci avevo provato, e su uno schermo da 390 il telefono disegnato restava appiccicato sopra i gesti e li copriva: la fotografia di un telefono incollata sopra il testo, su un telefono vero. Qui sta fermo in cima alla sezione e i sei gesti si leggono come un elenco numerato — che sul palmo di una mano è la forma giusta. */ .ba-mano-fermo { position: static; order: -1; margin: 0 auto clamp(1.4rem, 4vh, 2.4rem); } .ba-gesto { min-height: 0; } } /* ═══════════════════════════════════════════════════════════════════ IL CONTO CHE SI SOMMA · la forma della pagina «Quanto costa» ─────────────────────────────────────────────────────────────────── Un listino dei prezzi risponde a «quanto costa» e si ferma lì. La domanda vera che uno si fa è un'altra — «quanto mi costa in tutto, e rispetto a cosa» — e a quella non risponde una cifra: risponde **un conto che si somma sotto gli occhi**, con accanto la stessa somma fatta all'altro modo. È l'unico posto del sito dove due colonne di numeri sono la cosa giusta, perché il punto è proprio il confronto. ═══════════════════════════════════════════════════════════════════ */ .ba-bilancio { margin-top: clamp(2.2rem, 5vh, 3.4rem); } /* ⚠️ RIFATTA. Prima le righe erano gli ANNI e le colonne le due strade, con le cifre cumulate: «2.480 dopo due» si legge come il costo del secondo anno, non come il totale. Luciano: «di questa sezione non capisco nulla, e se non la capisco io figurati un macellaio». Adesso le righe sono le DUE STRADE e le colonne due sole domande — quanto ogni mese, quanto in tre anni. Un macellaio ragiona a mese: «70 contro 600» si capisce senza leggere niente. */ .ba-bilancio-testa, .ba-anno { /* ⚠️ tre colonne di cifre, non due. Contro un'agenzia la differenza sta quasi tutta nell'avviamento (5.000 contro 800), e col solo «ogni mese» sparirebbe: servono tutte e tre le domande. L'assistenza d'agenzia a 80 €/mese è il minimo detto da Luciano. */ display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2.4vw, 2.2rem); align-items: baseline; } /* l'ipotesi non è un paragrafo prima della tabella: è la sua didascalia */ .ba-ipotesi { margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; font-size: clamp(.98rem, 1.05vw, 1.06rem); line-height: 1.5; color: var(--ba-ink-2); transition: color .55s ease-in-out; } .ba-ipotesi b { color: var(--ba-ink-forte); font-weight: 600; } .ba-ipotesi-voce { font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-accento); flex: none; transition: color .55s ease-in-out; } /* la riga dell'altra strada: accesa tutta, non una cifra sola */ .ba-anno-strada { margin: 0; } .ba-anno-detto { margin: .35rem 0 0; max-width: 34ch; font-size: .95rem; line-height: 1.5; color: var(--ba-ink-3); transition: color .55s ease-in-out; } .ba-riga-loro .ba-anno-somma { color: var(--ba-accento); } .ba-bilancio-testa { padding-bottom: .8rem; border-bottom: 1px solid var(--ba-filo-vivo); } .ba-bilancio-testa span { font-size: .78rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ba-ink-3); transition: color .55s ease-in-out; } .ba-anno { padding-block: clamp(1rem, 2.4vh, 1.5rem); border-bottom: 1px solid var(--ba-filo-vivo); } .ba-anno-quando { margin: 0; font-family: var(--ba-display); font-weight: 500; line-height: 1.1; font-size: clamp(1.1rem, 1.9vw, 1.45rem); color: var(--ba-ink); transition: color .55s ease-in-out; } .ba-anno-somma { font-family: var(--ba-display); font-weight: 600; line-height: 1.04; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ba-ink); transition: color .55s ease-in-out; } /* la colonna dell'altro modo è l'unica cosa accesa del confronto */ .ba-anno-somma small { display: block; font-family: var(--ba-testo); font-weight: 400; font-size: max(.32em, .6875rem); letter-spacing: .16em; text-transform: uppercase; color: var(--ba-ink-3); margin-top: .35rem; line-height: 1.4; } .ba-bilancio .ba-anno-somma small { display: none; } @media (max-width: 720px) { .ba-bilancio-testa { display: none; } /* senza testata le cifre perdevano il nome della colonna: lo portano con sé */ .ba-bilancio .ba-anno-somma small { display: block; } .ba-bilancio .ba-anno-somma { font-size: clamp(1.25rem, 5.6vw, 1.6rem); } .ba-anno { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .8rem; } /* ⚠️ il nome della strada sta dentro un div: è il div a dover prendere tutta la riga, o la descrizione si stringe in un terzo di schermo */ .ba-anno > div:first-child { grid-column: 1 / -1; margin-bottom: .5rem; } } /* la riga della differenza: fuori dalla tabella, perché è la risposta. ⚠️ ED È L'UNICO POSTO DEL SITO CHE SI TAGLIA. Il gesto migliore del progetto è «il colpo» della home — la ceralacca che si **apre** con un `clip-path` invece di sfumare: un bordo netto che passa, cioè il mestiere. Ed era usato una volta sola in cinque pagine. Qui il distacco fra le due strade non compare e non sale: viene **ritagliato via dalla tabella**, dopo mezzo secondo di silenzio, mentre la cifra si conta da sola. È la sottrazione fatta davanti a chi guarda. ⚠️ Perché qui e non sulle fotografie di apertura, dove sarebbe più vistoso: là la fotografia è l'elemento più grande della prima schermata, quello su cui si misura il tempo di caricamento percepito, e coprirlo per un secondo si paga. Questo sta sotto la piega e non costa niente. */ .ba-scarto { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; } html.mv .ba-scarto { opacity: 0; } .ba-scarto-cifra { font-family: var(--ba-display); font-weight: 600; line-height: 1; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.02em; color: var(--ba-accento); font-variant-numeric: tabular-nums; transition: color .55s ease-in-out; } .ba-scarto-detto { margin: 0; max-width: 30ch; font-size: clamp(1.02rem, 1.1vw, 1.12rem); line-height: 1.6; color: var(--ba-ink-2); transition: color .55s ease-in-out; } /* ⚠️ l'obiezione contro sé stessi, subito sotto il numero che fa comodo. Un confronto che non dice dove zoppica è pubblicità. */ .ba-controcanto { margin-top: clamp(1.4rem, 3vh, 2rem); padding-left: clamp(1rem, 2vw, 1.4rem); border-left: 2px solid var(--ba-accento); max-width: 52ch; font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.65; color: var(--ba-ink-2); transition: color .55s ease-in-out, border-color .55s ease-in-out; } .ba-controcanto b { color: var(--ba-ink-forte); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════ IL FRONTESPIZIO · l'apertura smette di essere un titolo ─────────────────────────────────────────────────────────────────── ⚠️ Il difetto, detto da Luciano: «due titoli incolonnati sulla sinistra uno dopo l'altro senza gerarchia specifica». Era vero, e la causa è che il claim della pagina e il titolo della prima sezione erano **lo stesso oggetto tipografico** — stesso Bodoni, stesso corpo, stessa colonna, uno sotto l'altro. Due cose uguali di fila non fanno gerarchia: fanno un elenco. La cura non è più animazione: sono due mosse di composizione. ① Il claim resta al corpo pieno e il titolo di sezione **scende di un gradino**, così fra i due c'è un rapporto invece di un pari. ② L'apertura diventa un **frontespizio**: alta quanto lo schermo, il claim al centro dell'altezza, il numero del capitolo sopra e **l'emblema della pagina** a destra — che è anche il modo di riempire la mezza pagina vuota che restava a destra. ═══════════════════════════════════════════════════════════════════ */ /* ① il gradino di gerarchia. ⚠️ Sì, questa riscrive `.ba-display` di banco.css, ed è l'unica eccezione alla regola scritta in cima a questo foglio: vale **solo** per le pagine interne, perché solo qui c'è un claim di pagina sopra i titoli di sezione. Sulla home il titolo di sezione È il titolo più grande, e deve restare com'è. */ h2.ba-display { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: .96; letter-spacing: -.025em; } /* ⚠️ Qui stavano l'emblema in colonna a destra e il numero di capitolo. Bocciati: l'incisione dentro un riquadro restava decorazione appoggiata di fianco al titolo, non composizione. Al loro posto c'è la fotografia a tutto schermo, più sotto. Il gradino di gerarchia qui sopra invece resta: quello serviva e serve ancora. */ /* ═══════════════════════════════════════════════════════════════════ LE FILIGRANE, UNA PER PAGINA ─────────────────────────────────────────────────────────────────── ⚠️ Prima la bilancia stava su quattro pagine su cinque e la mannaia su tutte e cinque: le filigrane, che dovrebbero dare a ogni pagina la sua aria, davano a tutte la stessa. Nella libreria comprata ce ne sono 239 — tenerne due in circolazione era solo pigrizia. Qui la classe dice **il posto**, non l'oggetto: `-corpo` è il vuoto a destra di una sezione lunga, `-chiusa` è l'angolo del congedo. La misura la porta ogni pagina con `--fil-largo`, perché un mattarello lungo e un paiolo tondo non possono essere larghi uguale. Le regole di sempre valgono ancora: enormi, tagliate dal bordo, una sola per sezione, mai due adiacenti. ⚠️ E lo sbordo è una variabile, non una costante: `-18vw` va bene a una figura coricata e larga un metro di schermo, ma una lama stretta e alta con lo stesso sbordo finisce **interamente fuori schermo** e non se ne accorge nessuno. Lo porta la pagina in `--fil-fuori`. ⚠️ **L'inchiostro deve essere uniforme.** È la regola che ha bocciato i coltelli: nella libreria comprata hanno tutti il manico nero pieno e la lama a tratteggio fine, e al 5% di opacità si vede solo il manico — un ovale scuro senza nome in un angolo, che non legge come coltello e legge come macchia. Non è questione di copertura media (0,38: alta ma trattabile): è la **varianza** dentro la stessa figura. Una filigrana vuole densità costante, come le bestie, il tritacarne, la bilancia. L'ho visto solo alzando l'opacità a 0,55 e togliendo la maschera: a velo di lavoro sembrava che la filigrana fosse fuori posto, e invece era esattamente dove doveva stare. ⚠️ E il posto decide anche **di che famiglia** è la figura, perché otto oggetti giusti senza una regola restano otto oggetti: il corpo porta un **attrezzo** (tritacarne, bilancia, lama, mannaia), la chiusa porta una **bestia** (gallo, mucca, maiale, montone). Non è simmetria per bellezza: le quattro bestie sono anche le incisioni più fini della libreria (0,12–0,20 di copertura), cioè proprio quello che vuole un congedo su fondo scuro, dove il tratto è ribaltato in chiaro e ogni pieno pesa il doppio. ⚠️ E ne è arrivata una terza, che vale più di tutte le altre: la figura deve **appartenere al mestiere**. Al primo giro avevo pescato dal pacco *Kitchen Tools* e sono uscite brocca, casseruola, mattarello, imbuto, paiolo, barattolo: attrezzi da cucina in un sito per macellai. Nessuno di quei sei oggetti sta dietro un bancone. Il vocabolario giusto è corto e si dice in una riga — tritacarne, coltelli, mannaia, tagliere, bilancia, e le bestie. Se l'oggetto non è in quella riga, non entra, per bello che sia il tratto. ═══════════════════════════════════════════════════════════════════ */ /* ⚠️ ENORMI, o non esistono. Al primo giro le avevo messe larghe 24–56rem e sono sparite: al 6% di opacità una figura che occupa un terzo di schermo non è una filigrana, è una macchia che non si vede. La vecchia bilancia della home è larga **74rem** e sborda di 16vw — è quella la misura giusta, e sta scritta in banco.css dall'inizio («ENORMI E TAGLIATE, escono dal bordo della postazione»). Ho applicato la regola nuova dimenticando quella vecchia. ⚠️ E il velo si tara sull'oggetto: un mattarello è due righe di contorno, un paiolo è una superficie piena. Stessa opacità = uno sparisce e l'altro pesa. */ /* ⚠️ Ed è il **lato lungo** a dover essere enorme, non la larghezza. Sulla home la bilancia è larga 74rem, ma il tritacarne è larga 40rem e la mannaia 30rem — e sono giuste tutte tre, perché in altezza misurano 55rem e 76rem. Confrontare le larghezze di una figura coricata e di una in piedi è esattamente l'errore che aveva fatto sparire le filigrane: la misura da tenere fra 55 e 76rem è il lato lungo. Un coltello (7:1) va quindi largo un metro di schermo. ⚠️ E un coltello coricato è una fascia orizzontale, non una filigrana: va **ruotato**, o legge come un righello. Per questo la rotazione ora c'è anche qui e non solo nella chiusa — sempre in `rotate`, che è un canale a sé e non litiga con la parallasse che la regia scrive in `transform`. */ /* ⚠️ Il centraggio NON si può scrivere in `translate`. La parallasse della regia anima `yPercent`, che per GSAP è la stessa trasformazione: la prima cosa che fa è azzerare `translate`, e il `translate: 0 -50%` che stava qui non ha mai avuto effetto — la figura restava appesa mezza altezza sotto il centro e la mangiava il bordo della postazione. Un difetto che nelle misure non si vede (l'immagine c'è, è caricata, ha l'opacità giusta) e si vede solo guardando. Ora la quota sta in `--fil-ancora` e la applica la regia dentro la sua stessa animazione, dove nessuno la può sovrascrivere. La `rotate` invece sopravvive: GSAP la rilegge e la rimette dentro `transform` da sé. */ .ba-fil-corpo { --fil-ancora: -50; right: var(--fil-fuori, -18vw); top: 50%; width: min(104vw, var(--fil-largo, 76rem)); rotate: var(--fil-storta, 0deg); opacity: var(--fil-velo, .07); } .ba-fil-chiusa { right: var(--fil-fuori, -10vw); top: 24%; width: min(64vw, var(--fil-largo, 34rem)); rotate: var(--fil-storta, 9deg); opacity: var(--fil-velo, .075); } /* ⚠️ Sul buio la stessa opacità pesa di più: l'incisione è ribaltata in tratto chiaro, e il chiaro su nero si vede più del nero su crema. Il velo va smorzato, o la filigrana della chiusa si mette a competere col titolo invece di stargli dietro. */ html.ba-scuro .ba-fil-corpo, html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-fil-corpo, html.ba-scuro .ba-fil-chiusa, html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-fil-chiusa { opacity: calc(var(--fil-velo, .075) * .78); } /* ⚠️ Anche in verticale la misura è il LATO LUNGO, e qui il `180vw` fisso lo dimenticava: è una larghezza, e una larghezza non dice quanto è alta una figura. Una lama 1:6,5 a 180vw di un telefono diventava alta **4597 px — cinque schermi e mezzo**, e la mannaia 1889. Nessun errore, nessuna immagine rotta: solo una filigrana che sul telefono non era più una filigrana. Ora le due figure in piedi portano la loro misura in `--fil-largo-tel`, e il `max-height` fa da rete a tutte. ⚠️ Il `max-height` da solo NON ricalcola la larghezza: accorcia la scatola e la figura si schiaccia. La proporzione la tiene `object-fit:contain` su `.ba-filigrana` (banco.css). */ @media (max-width: 860px) { .ba-fil-corpo { right: var(--fil-fuori-tel, -40vw); top: 42%; width: var(--fil-largo-tel, 180vw); max-height: 128vh; opacity: calc(var(--fil-velo, .07) * .85); } .ba-fil-chiusa { right: var(--fil-fuori-tel, -22vw); width: var(--fil-largo-tel, 96vw); max-height: 96vh; opacity: calc(var(--fil-velo, .075) * .85); } } /* ═══════════════════════════════════════════════════════════════════ DUE ALTERNATIVE ALLA HERO DELLE PAGINE INTERNE — da scegliere ─────────────────────────────────────────────────────────────────── Il frontespizio col numero di capitolo e l'emblema in colonna è stato bocciato: l'incisione stava in un riquadro a destra e restava decorazione appoggiata, non composizione. Qui sotto due strade diverse fra loro. Quella che resta si porta via l'altra. ═══════════════════════════════════════════════════════════════════ */ /* ── A · LA FOTOGRAFIA ───────────────────────────────────────────── La direzione lo dice da agosto e non l'avevamo mai fatto sulle interne: «se una fotografia non merita mezzo schermo, non merita la pagina». Qui ne merita uno intero. La fotografia sborda a destra, il velo la spegne verso sinistra, e il claim sta sulla carta piena — nessun riquadro, nessuna cornice. */ /* ⚠️ 84vh e non 92: con una hero altissima e sorgenti da 1500×1105 il ritaglio mangia un quarto dell'immagine e il soggetto diventa una macro astratta — elegante, ma su un sito di macelleria non si capisce più cosa si sta guardando. */ .ba-ap-foto { position: relative; overflow: hidden; min-height: min(84vh, 56rem); } /* ⚠️ `display:block`: la griglia a due colonne del frontespizio vale ancora su `.ba-apertura`, e senza annullarla il testo si trovava una colonna da duecento pixel — una parola per riga. */ /* ⚠️ 38rem e non 44: la colonna del testo arrivava al 55% dello schermo, quindi il velo doveva restare opaco fin lì e della fotografia sopravviveva un terzo scarso — con le fotografie di reportage, che hanno il soggetto al centro, restava un fantasma. Colonna più stretta, velo più corto, immagine viva. */ .ba-ap-foto > .ba-largo { display: block; max-width: min(38rem, 100%); } /* ⚠️ 12ch: con la colonna più stretta il titolo andava a capo lasciando un «Il» orfano in fondo alla riga. Stringendo la misura il verso si spezza dove vuole la frase, non dove capita. */ .ba-ap-foto .ba-display { max-width: 12ch; } /* ⚠️ Il margine per la parallasse. La fotografia scorre più piano del testo che le sta sopra (±5% di sé), e a `inset:0` esatto quel movimento scoprirebbe una striscia di carta in cima o in fondo. Il 12% in più, mezzo sopra e mezzo sotto, è il minimo che copre. */ .ba-ap-fondo { position: absolute; inset: 0; top: -6%; bottom: auto; width: 100%; height: 112%; object-fit: cover; z-index: 0; /* ⚠️ il fuoco in una variabile, non in `object-position` scritto inline: uno stile inline batte le media query, e sul telefono il ritaglio da schermo largo inquadrava lo sfondo sfocato invece del pezzo di carne. In verticale il soggetto va ricentrato. */ object-position: var(--fuoco, 68% 50%); } @media (max-width: 860px) { .ba-ap-fondo { object-position: var(--fuoco-tel, 55% 50%); } } /* ⚠️ Due veli, ed entrambi CHIARI. Il primo tentativo scuriva la fascia in cima, com'è giusto quando il marchio è in negativo — ma su fondo chiaro la regia scambia il marchio in nero e schiarisce il menù, e quel velo scuro finiva a lavorare contro tutt'e due: nero su grigio sporco. Qui il velo in cima **schiarisce**, e la testata scura ci si legge sopra. Il secondo, obliquo, libera la colonna del testo. */ .ba-ap-velo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: /* ⚠️ IL TAGLIO IN BASSO. La fotografia finiva di netto sul bordo della sezione: una riga bianca dritta in mezzo alla pagina, che è esattamente il difetto che le filigrane evitano sbordando. Qui si dissolve nella carta, e la cucitura con la sezione dopo non si vede più. */ linear-gradient(180deg, rgba(245,242,234,0) 72%, rgba(245,242,234,.72) 88%, var(--ba-marmo) 100%), linear-gradient(96deg, var(--ba-marmo) 0%, var(--ba-marmo) 26%, rgba(245,242,234,.7) 44%, rgba(245,242,234,0) 66%); } @media (max-width: 860px) { .ba-ap-foto { min-height: 0; } /* ⚠️ In verticale la fotografia va CONFINATA in una fascia. Lasciandola a `inset:0` copriva tutta la sezione — fotografia più testo, quasi millequattrocento pixel — e nella schermata se ne vedeva solo la fetta in cima, che è lo sfondo sfocato. Il soggetto restava fuori campo, e nessuna `object-position` poteva rimediare. */ .ba-ap-fondo, .ba-ap-velo { top: 0; height: 52vh; bottom: auto; } .ba-ap-velo { background: linear-gradient(180deg, rgba(245,242,234,.9) 0%, rgba(245,242,234,0) 22%), linear-gradient(180deg, rgba(245,242,234,0) 58%, var(--ba-marmo) 97%); } /* ⚠️ Il margine alto dell'apertura (respiro + 4,5rem) si sommava a questi 48vh: fra la foto e il titolo restavano 150-180px di carta vuota su tutte e quattro le pagine. In verticale lo spazio lo decide solo la fascia della foto, e il testo parte dove la foto sta già sfumando nella carta. */ .ba-apertura.ba-ap-foto { padding-top: 0; } .ba-ap-foto > .ba-largo { padding-top: calc(52vh - 1.25rem); } } /* La variante «claim nudo» è stata scartata a favore della fotografia: era più pulita, ma restava una pagina di solo testo. */ /* ── il motto ────────────────────────────────────────────────────── Una frase che vale da sola non va sepolta in mezzo a un paragrafo: esce dalla colonna del testo, prende il corpo del Bodoni e si porta dietro la sua spiegazione. Serve anche a rompere il muro grigio — tre paragrafi di fila nella stessa colonna sono la cosa che fa smettere di leggere. */ .ba-motto { margin: 0 0 1rem; max-width: 17ch; padding-top: clamp(.9rem, 2vh, 1.3rem); border-top: 2px solid var(--ba-accento); font-family: var(--ba-display); font-weight: 500; line-height: 1.06; font-size: clamp(1.6rem, 3vw, 2.5rem); color: var(--ba-ink); transition: color .55s ease-in-out, border-color .55s ease-in-out; } .ba-motto em { font-style: italic; font-weight: 400; color: var(--ba-accento); } .ba-motto-sotto { margin: 0; max-width: 46ch; font-size: clamp(1.02rem, 1.1vw, 1.12rem); line-height: 1.7; color: var(--ba-ink-2); transition: color .55s ease-in-out; } .ba-motto-sotto b { color: var(--ba-ink-forte); font-weight: 600; } /* ── la hero scura ───────────────────────────────────────────────── Due delle fotografie sono scure di loro (il ceppo, il bancone): sotto il velo chiaro diventerebbero una poltiglia grigia. Prendono il velo nero e il testo in chiaro. Non è una seconda estetica: è la stessa, con la luce dall'altra parte — ed è anche il modo di non far assomigliare le quattro aperture fra loro. */ .ba-ap-scura .ba-ap-velo { background: linear-gradient(180deg, rgba(22,19,14,0) 70%, rgba(22,19,14,.78) 88%, var(--ba-notte) 100%), linear-gradient(96deg, var(--ba-notte) 0%, var(--ba-notte) 26%, rgba(22,19,14,.68) 44%, rgba(22,19,14,0) 68%); } @media (max-width: 860px) { .ba-ap-scura .ba-ap-velo { background: linear-gradient(180deg, rgba(22,19,14,.9) 0%, rgba(22,19,14,0) 22%), linear-gradient(180deg, rgba(22,19,14,0) 56%, var(--ba-notte) 97%); } } /* ═══════════════════════════════════════════════════════════════════ ① LA CODA CHE NON RESTA ORFANA ─────────────────────────────────────────────────────────────────── ⚠️ Misurato: `.ba-testo` è largo 433 px dentro un contenitore di 1.216 — il **36%**. Non è un difetto della misura (46 caratteri è quella che si legge bene): è che accanto non c'è niente. E il salto è violento proprio dove un oggetto a piena larghezza — lo spartito, il listino, la scala — è seguito da un paragrafo solo: da 1.216 a 433 in una riga, e l'occhio ci legge un buco a forma di L. La regola: **un paragrafo da solo non chiude mai una sezione larga.** O ha qualcosa a fianco (il motto), o si aggancia a una colonna dell'oggetto che lo precede, o diventa il piede di quell'oggetto. ═══════════════════════════════════════════════════════════════════ */ /* ── si aggancia alla colonna destra dell'oggetto sopra ──────────── Smette di essere un blocco orfano e diventa la didascalia di quella colonna. `--stacco` perché ogni griglia ha il suo scarto: nello spartito la colonna destra parte a 50% + il gap; in `.ba-due` a 50% + metà gap. */ .ba-coda-destra { margin-left: calc(50% + var(--stacco, 1.1rem)); max-width: 46ch; } @media (max-width: 800px) { .ba-coda-destra { margin-left: 0; } } /* ── il piede di un oggetto: una riga sola, larga quanto lui ─────── Con un filo sopra, così si legge come parte dell'oggetto e non come un paragrafo rimasto indietro. */ .ba-piede-oggetto { margin: clamp(1.1rem, 2.4vh, 1.6rem) 0 0; padding-top: clamp(.9rem, 2vh, 1.3rem); border-top: 1px solid var(--ba-filo-vivo); display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem clamp(1rem, 2.4vw, 2rem); font-size: clamp(1.02rem, 1.1vw, 1.12rem); line-height: 1.6; color: var(--ba-ink-2); transition: color .55s ease-in-out, border-color .55s ease-in-out; } .ba-piede-oggetto b { color: var(--ba-ink-forte); font-weight: 600; } .ba-piede-oggetto .ba-piede-voce { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-accento); flex: none; transition: color .55s ease-in-out; } /* ═══════════════════════════════════════════════════════════════════ ② IL RESPIRO, TARATO INVECE CHE FISSO ─────────────────────────────────────────────────────────────────── Misurato: fra la coda di una sezione e la testa della successiva c'erano 211–302 px — su uno schermo da 900, un terzo di schermata di nulla, e sommato al 36% orizzontale faceva il vuoto a L. L'aria SOPRA un titolo serve: è quella che lo stacca. Quella SOTTO l'ultimo paragrafo no — è già seguita da quella sopra della sezione dopo, e le due si sommano. Qui il piede scende a 0,62 del respiro e il totale fra due sezioni passa da ~212 a ~170. ⚠️ Seconda (e ultima) eccezione dichiarata alla regola «pagine.css non riscrive banco.css»: vale SOLO per le pagine interne. La home è un percorso e il suo passo largo è giusto così; queste si leggono. */ .ba-postazione { padding-bottom: calc(var(--ba-respiro) * .62); } /* la chiusa tiene il suo piede pieno: sotto non c'è più niente */ .ba-chiusa { padding-bottom: var(--ba-respiro); } /* ═══════════════════════════════════════════════════════════════════ ③ LA TESTATA PRENDE UN FONDO ─────────────────────────────────────────────────────────────────── ⚠️ La testata è fissa, alta 103 px e trasparente: il testo le scorre sotto e quando lei riappare ci collide — nella schermata di Luciano «Il corriere, se decidi di spedire» finiva dentro «IL SISTEMA». Un velo sfumato, che segue la luce come tutto il resto. ⚠️ E il velo che la hero si metteva in cima **sparisce**: adesso è un doppione, e due sfumature sovrapposte schiariscono troppo. Una sola sfumatura, sulla testata, che funziona su ogni sezione e non solo sull'apertura. */ .ba-testata::before { content: ''; position: absolute; inset: -1px 0 auto; height: 210%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(245,242,234,.96) 0%, rgba(245,242,234,.72) 38%, rgba(245,242,234,0) 100%); transition: background .55s ease-in-out; } html.ba-scuro .ba-testata::before { background: linear-gradient(180deg, rgba(22,19,14,.96) 0%, rgba(22,19,14,.72) 38%, rgba(22,19,14,0) 100%); } /* ═══════════════════════════════════════════════════════════════════ ④ I BERSAGLI DA TOCCARE ─────────────────────────────────────────────────────────────────── Misurati: le porte erano alte 34 px e le voci del menù 19. Sotto i 44 raccomandati, e questo sito si usa col pollice, spesso con le mani non pulite. L'altezza cresce solo nell'area sensibile: il filo sotto la porta resta dov'era, la testata non si alza (comanda il marchio, che è alto 52). */ /* ⚠️ `.ba-testata nav a` e `.ba-porta` stanno ora in `banco.css`: la home non carica questo foglio, e lì le porte restavano alte 32px. */ .ba-altrove a { min-height: 44px; } /* ═══════════════════════════════════════════════════════════════════ LE POSTAZIONI FERME ─────────────────────────────────────────────────────────────────── Una tabella di allergeni o un perimetro contrattuale non guadagna niente da sei decimi di attesa: si legge, non si guarda arrivare. Chi dichiara `data-fermo` tiene il titolo animato — quella è la voce della pagina — e il contenuto fermo e leggibile dal primo istante. ⚠️ E qui non basta toglierli dalla regia: `html.mv` li nasconde in CSS, e senza qualcuno che li rianimi resterebbero a zero per sempre. Questa regola è più specifica di quelle che nascondono (tre classi contro due) e sta in coda al foglio che si carica per ultimo: vince in tutti e due i modi, senza un solo `!important`. */ html.mv [data-fermo] .ba-mossa, html.mv [data-fermo] .ba-display, html.mv [data-fermo] .ba-etichetta, html.mv [data-fermo] .ba-testo, html.mv [data-fermo] .ba-porte, html.mv [data-fermo] .ba-riga, html.mv [data-fermo] .ba-fatti li, html.mv [data-fermo] .ba-conto-detto, html.mv [data-fermo] .ba-gradino, html.mv [data-fermo] .ba-scheda, html.mv [data-fermo] .ba-piede, html.mv [data-fermo] .ba-passi li, html.mv [data-fermo] .ba-colonna, html.mv [data-fermo] .ba-scomoda, html.mv [data-fermo] .ba-altrove a, html.mv [data-fermo] .ba-ora, html.mv [data-fermo] .ba-ceppo, html.mv [data-fermo] .ba-gemma, html.mv [data-fermo] .ba-voce, html.mv [data-fermo] .ba-firma, html.mv [data-fermo] .ba-anno { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════ IL PERNO: UNA SEZIONE PER PAGINA, E SI VEDE ─────────────────────────────────────────────────────────────────── Misurando l'ingresso di tutte e 23 le sezioni veniva fuori che **23 titoli su 23 partivano dalla stessa x** (86 px) e **19 su 19 avevano lo stesso corpo** (58 px). Zero gerarchia dentro la pagina: l'occhio entrava sempre nello stesso punto e faceva sempre lo stesso viaggio, sette volte di fila. Non servono quattro misure: ne servono **due**. Il perno è la sezione in cui quello che credevi cambia — una per pagina — e prende il corpo grande, il respiro doppio e la piena larghezza. ⚠️ `.ba-perno` e non `.ba-svolta`: quel nome era già del *titolo* di `il-sito`, e usarlo qui avrebbe stretto la sezione a 26ch senza che nessuno capisse perché. Il nome si cerca nel foglio prima di usarlo. ⚠️ E questa è la terza (e ultima) eccezione dichiarata alla regola «pagine.css non riscrive banco.css»: vale SOLO per le pagine interne e SOLO sulla sezione marcata. */ .ba-perno { padding-top: calc(var(--ba-respiro) * 1.35); padding-bottom: calc(var(--ba-respiro) * 1.2); } .ba-perno > .ba-largo > h2.ba-display { font-size: clamp(2.9rem, 5.8vw, 5rem); line-height: .94; letter-spacing: -.03em; max-width: 20ch; } /* ⚠️ Il titolo del perno di `il-sito` porta anche `.ba-svolta`, che lo stringe a 26ch: lì la misura più stretta la vuole la frase, ed è quella che vince — la riga qui sopra non deve allargarla. */ .ba-perno > .ba-largo > h2.ba-display.ba-svolta { max-width: 26ch; } @media (max-width: 860px) { .ba-perno { padding-top: calc(var(--ba-respiro) * 1.1); padding-bottom: var(--ba-respiro); } .ba-perno > .ba-largo > h2.ba-display { font-size: clamp(2.4rem, 9vw, 3.4rem); } } /* ═══════════════════════════════════════════════════════════════════ LA MOSSA: un capoverso dentro una sezione lunga ─────────────────────────────────────────────────────────────────── Nasce fondendo `avviamento` e `canone` di «quanto costa». Erano due sezioni che si somigliavano — stessa altezza, stesso ingresso, stesso oggetto a righe — e dicevano **un argomento solo**: cosa paghi una volta, cosa paghi ogni mese. Spezzarlo in due dava alla pagina due battute identiche di fila; unito dà un blocco lungo, e una pagina di sette sezioni tutte alte uguale comincia a respirare. La mossa è un gradino sotto il titolo di sezione e sopra il testo: dice «qui comincia l'altra metà» senza far ripartire l'ingresso. */ .ba-mossa { font-family: var(--ba-display); font-weight: 500; line-height: 1.1; font-size: clamp(1.6rem, 2.9vw, 2.4rem); letter-spacing: -.015em; margin: clamp(3rem, 7vh, 5rem) 0 .9rem; max-width: 24ch; transition: color .55s ease-in-out; } .ba-mossa em { font-style: italic; color: var(--ba-accento); } .ba-mossa-voce { display: block; font-family: var(--ba-testo); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-ink-3); margin-bottom: .6rem; letter-spacing: .16em; } /* ⚠️ La prima mossa non deve staccarsi dal testo che la introduce quanto la seconda: lì il salto sarebbe un buco. */ .ba-mossa:first-of-type { margin-top: clamp(2.2rem, 5vh, 3.4rem); } html.mv .ba-mossa { opacity: 0; } /* ═══════════════════════════════════════════════════════════════════ IL CONFINE: DENTRO E FUORI, SU DUE COLONNE ─────────────────────────────────────────────────────────────────── Era la quinta tabella a righe di una pagina che ne aveva già quattro — etichetta a sinistra, valore a destra, cinque volte — e a quel punto si impastavano tutte in un unico lungo registro. Ma la domanda che si fa un macellaio è binaria: **è compreso o no?** Due colonne rispondono in tre secondi; cinque righe da leggere una per una, no. ⚠️ Il taglio verticale in mezzo è la stessa riga da 1px di tutto il progetto, e sul telefono sparisce: lì le colonne si impilano e a dividerle basta il salto di respiro. */ .ba-confine { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4.5vw, 4rem); margin-top: clamp(2.2rem, 5vh, 3.2rem); border-top: 1px solid var(--ba-filo-vivo); } .ba-lato { padding-top: clamp(1.4rem, 3vh, 2rem); } .ba-lato-fuori { border-left: 1px solid var(--ba-filo-vivo); padding-left: clamp(2rem, 4.5vw, 4rem); } .ba-lato-voce { margin: 0 0 1.2rem; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-ink-3); transition: color .55s ease-in-out; } .ba-lato-dentro .ba-lato-voce { color: var(--ba-accento); } .ba-lato-elenco { margin: 0; padding: 0; list-style: none; } .ba-lato-elenco li { margin: 0 0 1.15rem; padding-left: 1.1rem; position: relative; font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.62; color: var(--ba-ink-2); transition: color .55s ease-in-out; } .ba-lato-elenco li:last-child { margin-bottom: 0; } .ba-lato-elenco li::before { content: ''; position: absolute; left: 0; top: .72em; width: 5px; height: 1px; background: var(--ba-ink-3); transition: background-color .55s ease-in-out; } .ba-lato-dentro .ba-lato-elenco li::before { background: var(--ba-accento); width: 9px; } .ba-lato-elenco b { color: var(--ba-ink-forte); font-weight: 600; } @media (max-width: 800px) { .ba-confine { grid-template-columns: 1fr; gap: 0; } .ba-lato-fuori { border-left: 0; padding-left: 0; border-top: 1px solid var(--ba-filo-vivo); margin-top: clamp(2rem, 4vh, 2.6rem); } } /* ═══════════════════════════════════════════════════════════════════ I PERMESSI: CHI PUÒ COSA ─────────────────────────────────────────────────────────────────── Era l'unica sezione del corpo, in tutto il progetto, senza un oggetto da guardare: due colonne di elenchi puntati sul marmo. E parla di **permessi**, che è una cosa che si disegna benissimo — una riga per gesto e due colonne di segni si legge in tre secondi, due elenchi da confrontare a memoria no. ⚠️ Il segno del «no» è un trattino, non una croce: qui non c'è niente di negato, c'è una cosa che sta da un'altra parte. Una croce rossa su un elenco di funzioni fa sembrare mutilato il prodotto che stai vendendo. */ .ba-permessi { margin-top: clamp(2.2rem, 5vh, 3.2rem); border-top: 1px solid var(--ba-filo-vivo); } .ba-permessi-testa, .ba-permesso { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 7.5rem; gap: clamp(1rem, 2.4vw, 2rem); align-items: baseline; padding: clamp(.95rem, 2vh, 1.25rem) 0; border-bottom: 1px solid var(--ba-filo-vivo); } .ba-permessi-testa { padding-bottom: .7rem; border-bottom-color: transparent; } .ba-permessi-chi { font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ba-ink-3); text-align: center; transition: color .55s ease-in-out; } .ba-permesso-cosa { font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.5; color: var(--ba-ink-2); transition: color .55s ease-in-out; } .ba-permesso-cosa b { color: var(--ba-ink-forte); font-weight: 600; } .ba-permesso-n { font-family: var(--ba-display); font-weight: 500; color: var(--ba-accento); margin-right: .5rem; font-variant-numeric: tabular-nums; } .ba-permesso-si, .ba-permesso-no { text-align: center; font-size: 1.05rem; line-height: 1.5; transition: color .55s ease-in-out; } .ba-permesso-si { color: var(--ba-accento); } .ba-permesso-no { color: var(--ba-ink-3); } /* ⚠️ In verticale le colonne devono restare larghe almeno quanto la parola più lunga dell'intestazione. A 3,4rem «OPERATORE» sbordava e le due voci si toccavano — «OPERATORE SOLO TU» tutto attaccato, che letto di fretta sembra una terza colonna. Il 15/09 il corpo è salito da 9,6 a 11 px, il minimo che si legge in piedi col telefono in mano: servono 4,8rem, e al testo della riga restano 171 px. */ @media (max-width: 640px) { .ba-permessi-testa, .ba-permesso { grid-template-columns: minmax(0, 1fr) 4.8rem 4.8rem; gap: .55rem; } .ba-permessi-chi { font-size: .6875rem; letter-spacing: .04em; } .ba-permesso-cosa { font-size: .98rem; line-height: 1.45; } } html.mv .ba-permesso { opacity: 0; } /* ═══════════════════════════════════════════════════════════════════ LA LASTRA: una fotografia a piena banda, fra due sezioni ─────────────────────────────────────────────────────────────────── Misurando quanto di ogni pagina fosse «qualcosa da guardare» invece che testo su carta, «il sistema» dava **1,3%**: 5.696 px di pagina e, sotto la prima schermata, una sola figura alta 63 px. Era quello il motivo per cui scorrendo le pagine sembravano un documento. La lastra non è decorazione: è **una pausa**. Sta fra due sezioni e dà la rincorsa a quella dopo — fotografia (silenzio), poi il titolo grande del perno. ⚠️ NIENTE CORNICE, e piena banda. La regola opposta vale per gli screenshot (`.ba-prova`), che vanno incorniciati e mai a tutta larghezza: uno screenshot a piena banda si legge come un sito rotto, una fotografia incorniciata si legge come una foto stock. ⚠️ Sta FUORI dalle postazioni, non dentro: dentro dovrebbe scavalcare il padding con margini negativi, e al primo cambio di `--ba-margine` si scollerebbe. E stando fuori non porta `data-luce`, quindi non tocca la regia della luce: la lastra sta ferma mentre il fondo passa da una sezione all'altra. ⚠️ E NON entra in scena. È l'unica cosa della pagina che non arriva: una fotografia a tutta larghezza che compare è un evento, e questa deve essere una pausa. Si muove solo di parallasse. */ .ba-lastra-foto { position: relative; margin: 0; overflow: hidden; height: clamp(17rem, 33vw, 32.5rem); background: var(--ba-notte); } .ba-lastra-foto.ba-lastra-magra { height: clamp(9rem, 17.5vw, 17.5rem); } /* ⚠️ Lo stesso margine in altezza delle fotografie di apertura: la parallasse muove l'immagine del ±5% di sé, e a `inset:0` esatto quel movimento scoprirebbe una striscia di carta in cima o in fondo. */ .ba-lastra-foto img { position: absolute; inset: 0; top: -6%; bottom: auto; width: 100%; height: 112%; object-fit: cover; object-position: var(--fuoco, 50% 50%); } @media (max-width: 860px) { .ba-lastra-foto { height: clamp(13rem, 46vw, 20rem); } .ba-lastra-foto.ba-lastra-magra { height: clamp(7.5rem, 26vw, 11rem); } .ba-lastra-foto img { top: 0; height: 100%; object-position: var(--fuoco-tel, var(--fuoco, 50% 50%)); } } /* ═══════════════════════════════════════════════════════════════════ LA PROVA: uno screenshot, e va incorniciato ─────────────────────────────────────────────────────────────────── Il contrario della lastra. Uno screenshot senza bordo non si legge come «ecco il negozio», si legge come «qui il sito è rotto»: manca il segnale che quello è un altro schermo dentro questo. La cornice è quel segnale, ed è il filo da 1px di tutto il progetto. ⚠️ Sta DENTRO la postazione, a larghezza del contenitore. Una prova a piena banda perde la didascalia e diventa un fondale. */ .ba-prova { margin: clamp(2.4rem, 5vh, 3.6rem) 0 0; } .ba-prova-riquadro { border: 1px solid var(--ba-filo-vivo); background: rgba(255, 253, 247, .5); padding: clamp(.5rem, 1vw, .9rem); } html.ba-scuro .ba-prova-riquadro, html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-prova-riquadro { background: rgba(246, 242, 231, .035); } .ba-prova-riquadro img { width: 100%; height: auto; display: block; } .ba-prova figcaption { margin-top: .85rem; max-width: 46ch; font-size: .95rem; line-height: 1.55; color: var(--ba-ink-3); transition: color .55s ease-in-out; } /* ⚠️ UNA CLASSE NASCOSTA DA `html.mv` VA IN TRE POSTI, NON IN UNO: qui, nella lista `RIVELA` di `banco.js` che la riaccende, e nella lista dei «ciechi» dello strumento che controlla. Oggi ne ho saltato uno per due volte di fila — la prima con `data-fermo`, la seconda con questa — e il difetto è invisibile a tutto tranne che a guardare la pagina: nessun errore, nessuna immagine rotta, solo un rettangolo di carta grande come mezzo schermo dove doveva esserci la prova. */ html.mv .ba-prova { opacity: 0; } /* ═══════════════════════════════════════════════════════════════════ LA RITTA: una fotografia verticale, nel terzo che era vuoto ─────────────────────────────────────────────────────────────────── ⚠️ Nasce da un errore. Quattordici delle venti fotografie di Beppe sono **verticali**, salvate come file 2880×1920 con il flag EXIF di rotazione — e per un giro le ho ritagliate tutte a banda orizzontale, cioè coricate. La lezione che resta è più larga del difetto: una fotografia verticale in una banda larga si taglia a fetta e si spreca. Se il soggetto è in piedi, sta in piedi. E qui risolve anche un secondo problema: `#operatori` apriva con un paragrafo largo il 36% del contenitore e due terzi di riga vuoti. Adesso quel vuoto lo occupa la mano che lavora, ed è il soggetto della sezione — «quando dietro al banco non sei solo». ⚠️ Niente cornice, come tutte le fotografie: la cornice è degli screenshot. */ /* ⚠️ E QUI C'ERA UN BUCO, ed è quello che ha fatto perdere la pazienza al committente dopo dodici giri di verifica puliti. Mettendo la fotografia (alta 480px) accanto a un paragrafo di quattro righe (alto 170), il resto della colonna restava **vuoto per 400px** — e nessuno strumento se ne accorgeva, perché un buco non è un guasto. Le misure vedono quello che c'è, non quello che manca. La cura non è imbottire: è **mettere accanto alla fotografia qualcosa di alto quanto lei**. La griglia dei permessi stava sotto e ora sta lì, e la colonna di sinistra arriva in fondo da sola. ⚠️ `align-items: stretch` e la fotografia che riempie: così le due colonne finiscono insieme comunque, anche se un domani il testo cambia lunghezza. Un pareggio che dipende dal conteggio delle righe non è un pareggio, è una coincidenza. */ .ba-affianco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: stretch; margin-top: clamp(1.2rem, 2.5vh, 1.8rem); } .ba-affianco-corpo > .ba-testo:first-child { margin-top: 0; } .ba-affianco-corpo > .ba-permessi { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); } .ba-ritta { margin: 0; position: relative; min-height: 18rem; } .ba-ritta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 46%; display: block; } @media (max-width: 900px) { .ba-affianco { grid-template-columns: 1fr; } /* in verticale la fotografia torna al suo verso e va DOPO il testo: impilata, non c'è nessun pareggio da tenere. */ .ba-ritta { max-width: 22rem; min-height: 0; aspect-ratio: 4/5; order: 2; margin-top: clamp(1.6rem, 3.5vh, 2.4rem); } .ba-affianco-corpo { order: 1; } } html.mv .ba-ritta { opacity: 0; } /* ═══════════════════════════════════════════════════════════════════ LO SCHERMO VERO ─────────────────────────────────────────────────────────────────── Le schermate disegnate del telefono erano mockup di un prodotto che **esiste già**: mostrare un finto quando hai il vero è precisamente il difetto che tutto questo giro sta curando. Stessa cornice, stesso posto, contenuto vero. ⚠️ La cornice è `aspect-ratio: 9/19.5`, cioè esattamente uno screenshot iPhone intero (1170×2532). Le catture arrivate erano **ritagliate** (2007–2346 px): rimesse in quota **riempiendo sotto** col colore di fondo dell'app, non tagliando ai lati — tagliare i lati di uno screenshot mangia i bordi dell'interfaccia, che è la cosa che dice «questo è un telefono». ⚠️ E niente cornice qui dentro: la cornice ce l'ha già il telefono. È l'eccezione alla regola di `.ba-prova`, ed è dichiarata. */ .ba-quadretto-vero { padding: 0; } .ba-quadretto-vero img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ⚠️ La lastra dell'orologio, quando dentro c'è la cosa VERA. Il cesto disegnato delle 21:47 era un mockup del configuratore — che esiste, e di cui adesso c'è la cattura. Stessa misura, stesso posto, contenuto vero: la cornice della lastra la porta già il blocco, quindi qui si toglie solo il padding e si lascia entrare l'immagine. ⚠️ E i tre tagli del cesto vero (fesa, ossobuco, salsiccia) non sono quelli che il disegno elencava: il racconto in prosa non li nomina, quindi non c'è niente da riallineare — ma se un giorno la prosa li nominasse, andrebbero tenuti d'accordo. */ .ba-lastra-vera { padding: 0; overflow: hidden; margin: 0 0 clamp(1rem, 2.4vh, 1.5rem); } .ba-lastra-vera img { width: 100%; height: auto; display: block; } /* ═══════════════════════════════════════════════════════════════════ LA CONCLUSIONE: il distacco e la sua obiezione, affiancati ─────────────────────────────────────────────────────────────────── Il controcanto onesto — «una piattaforma ti porta clienti che non avevi, io no» — stava **sotto** il numero grande, e sotto lasciava 480px di riga vuota a destra. Ora sta **accanto**, ed è meglio anche per ragioni che non c'entrano col vuoto: la regola del progetto dice che la controbiezione va scritta accanto al numero che fa comodo, non dopo. Sotto si legge come una postilla; a fianco si legge come onestà. ⚠️ La cifra e la sua spiegazione restano incollate: il distacco è un oggetto solo, e va tenuto insieme mentre l'obiezione lo affianca. */ .ba-conclusione { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.6rem); align-items: start; margin-top: clamp(1.6rem, 3.5vh, 2.4rem); } .ba-conclusione .ba-scarto { margin-top: 0; } .ba-conclusione .ba-controcanto { margin-top: 0; } @media (max-width: 960px) { .ba-conclusione { grid-template-columns: 1fr; gap: clamp(1.4rem, 3vh, 2rem); } } /* LA LUCE SENZA MOTORE: le regole scure di questo foglio portano il loro gemello nello stesso elenco (vedi `banco.css`) */ /* la sfumatura sotto la testata sta a z-index -1 dentro il suo contesto, cioè SOPRA il fondo della testata: senza motore deve essere quella scura, come il fondo pieno che la testata porta in quel caso */ html:not(.ba-luce) .ba-testata::before{ background: linear-gradient(180deg, rgba(22,19,14,.96) 0%, rgba(22,19,14,.72) 38%, rgba(22,19,14,0) 100%); } /* ── la prova del Banco, nell'apertura di «L'app» ─────────────────── Il bottone porta a tagliomaestro.it/prova/. Accanto, solo su schermo largo e col mouse, il QR: chi legge dal computer prova col telefono, che è dove il Banco si usa. Dal telefono il QR non serve a niente. */ .ba-assaggio { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.4rem); flex-wrap: wrap; margin-top: 2.2rem; } .ba-assaggio-qr { display: none; margin: 0; align-items: center; gap: .9rem; } .ba-assaggio-qr[hidden] { display: none !important; } @media (min-width: 861px) and (hover: hover) and (pointer: fine) { .ba-assaggio-qr { display: flex; } } /* il fondo del codice resta chiaro anche di notte: un QR al contrario molti telefoni non lo leggono */ .ba-assaggio-codice { width: 116px; height: 116px; padding: 9px; background: #fbf9f4; border: 1px solid var(--ba-filo-vivo); border-radius: 4px; } .ba-assaggio-codice svg { display: block; width: 100%; height: 100%; } .ba-assaggio-codice svg path, .ba-assaggio-codice svg rect[fill="black"] { fill: #211e19; } .ba-assaggio-qr figcaption { font-size: .8rem; line-height: 1.35; color: var(--ba-ink-2); }