/* =========================================================================== CHI SIAMO — impaginato --------------------------------------------------------------------------- Secondo foglio del nuovo sistema, dopo la home. Non ridefinisce nulla: carica `impaginato.css` prima di sé e ne riusa griglia (.pg), campi (.field), token, tipografia, `.tick`, `.mini-label`, `.fact`, `.lnk`. Qui vive solo ciò che è proprio di questa pagina. Perché la classe sul resta `impaginato` e non diventa qualcosa di specifico per questa pagina: `impaginato.css` È il sistema del sito intero, e la testata, i token e la griglia devono valere identici su ogni pagina. Un secondo insieme di token divergerebbe al primo ritocco. Le quattro sezioni ereditano il criterio della home: un asse per sezione, campi che si dividono in verticale, nessun elemento posato su un'ascissa che nessun altro usa. =========================================================================== */ /* --------------------------------------------------------------------------- APERTURA — inchiostro pieno saldato alla testata, senza fotografia. Non è la home: qui non c'è un terzo campo verticale, quindi l'inchiostro va da bordo a bordo e il titolo sta sulle prime otto colonne. Più basso dell'hero della home (nessun min-height in vh): è un'intestazione, non una schermata d'apertura. --------------------------------------------------------------------------- */ .impaginato .cs-hero .field--ink { grid-column: bleed-start / bleed-end; } .impaginato .cs-hero-body { grid-column: col 1 / col 9; grid-row: 1; padding-block: var(--s2); } .impaginato .cs-hero-body .tick { margin-bottom: 22px; } .impaginato .cs-hero-body .mini-label { color: var(--imp-orange-lite); display: block; margin-bottom: 14px; } .impaginato .cs-hero-body h1 { color: var(--on-ink); font-size: clamp(2.1rem, 3.6vw, 3.4rem); max-width: 24ch; margin-bottom: 26px; } .impaginato .cs-hero-body .cs-lead { max-width: 52ch; font-size: var(--fs-intro); color: var(--on-ink-2); } /* --------------------------------------------------------------------------- MISSIONE — carta nuda, due paragrafi, nessuna testata. La sezione non ha titolo perché il titolo l'ha già data l'apertura: questi due paragrafi ne sono la continuazione, staccati solo dal cambio di fondo. Stesso asse dell'apertura (col 1), misura più stretta del contenitore: è la MISURA a fare la gerarchia, non un rientro. --------------------------------------------------------------------------- */ .impaginato .cs-mission { padding-block: var(--s3) var(--s2); } .impaginato .cs-mission-body { grid-column: col 1 / col 8; grid-row: 1; } .impaginato .cs-mission-body p { font-size: var(--fs-intro); line-height: 1.65; color: var(--imp-text-mid); max-width: 56ch; } .impaginato .cs-mission-body p + p { margin-top: 22px; } /* --------------------------------------------------------------------------- COME LAVORIAMO — le tre fasi in scala discendente, come i tre punti della home: il metodo È una sequenza, quindi qui la numerazione 01-02-03 è informazione e non ornamento (differenza dai quattro punti di forza sotto, dove è stata tolta). --------------------------------------------------------------------------- */ .impaginato .cs-method { padding-block: var(--s1) var(--s3); } .impaginato .cs-method-head { grid-column: col 1 / col 7; grid-row: 1; } .impaginato .cs-method-head .mini-label { display: block; margin-bottom: 14px; } .impaginato .cs-method-head h2 { max-width: 20ch; margin-bottom: 20px; } .impaginato .cs-method-head .cs-lead { max-width: 48ch; font-size: var(--fs-intro); color: var(--imp-text-mid); } /* Griglia interna e non tre grid-column separati sulla .pg: le tre fasi sono un blocco unico e la diagonale la fanno i margin-top crescenti dentro di esso. Così restano legate anche quando la griglia esterna cambia. */ .impaginato .cs-method-grid { grid-column: col 1 / c-end; grid-row: 2; margin-top: var(--s2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cgap); } .impaginato .cs-method-grid .fact:nth-child(2) { margin-top: var(--s2); } .impaginato .cs-method-grid .fact:nth-child(3) { margin-top: calc(var(--s2) * 2); } /* --------------------------------------------------------------------------- PUNTI DI FORZA — campo pietra con l'angolo interno, come le Prove in home. Quattro righe con filetto, senza numeri: i quattro punti sono paritari e una numerazione imporrebbe una gerarchia che non hanno (stessa scelta già fatta per i servizi in home). Il grassetto iniziale porta il peso. --------------------------------------------------------------------------- */ .impaginato .cs-strengths { padding-block: var(--s2); } .impaginato .cs-strengths .field--stone { grid-column: col 2 / bleed-end; } .impaginato .cs-strengths-head { grid-column: col 3 / col 8; grid-row: 1; } .impaginato .cs-strengths-head .mini-label { display: block; margin-bottom: 14px; } .impaginato .cs-strengths-head h2 { max-width: 20ch; } .impaginato .cs-strengths-list { grid-column: col 3 / c-end; grid-row: 2; margin-top: var(--s2); } /* Il tetto in caratteri sta sulla RIGA, non sul paragrafo dentro di essa: messo sul paragrafo, il filetto della riga restava largo quanto il campo (1023px) mentre il testo si fermava a ~1000, e sporgeva di 300-400px oltre l'ultima parola. Qui il tetto in ch è legittimo — a differenza delle righe prodotto, dove è la cella di griglia a dare la misura — perché questa riga occupa tutta la larghezza del campo e non ha nessun'altra costrizione. */ .impaginato .cs-strength-row { border-top: 1px solid var(--rule-strong); padding-block: 26px; max-width: 72ch; } .impaginato .cs-strength-row p { font-size: var(--fs-corpo); line-height: 1.6; color: var(--imp-text-mid); } .impaginato .cs-strength-row b { font-family: var(--font-display); font-weight: 600; color: var(--ink); } /* --------------------------------------------------------------------------- CITAZIONE — inchiostro, chiude la pagina e si fonde nel footer come la chiusura della home. Fotografia a sinistra, motto a destra: griglia interna a 12 colonne come le righe altrove nel sito, il ritratto occupa cinque colonne, il motto sette. --------------------------------------------------------------------------- */ /* Spazi DIMEZZATI (erano `var(--s3) var(--s2)`, cioè 64px e 48px al massimo): la fotografia è alta 404px e il motto 207, quindi il respiro pieno della scala sopra e sotto un blocco così alto lo staccava dal resto della pagina invece di chiuderla. Scritti come frazione dei token e non come pixel fissi: restano agganciati alla scala e continuano a seguire il viewport nel clamp. */ .impaginato .cs-quote { padding-block: calc(var(--s3) / 2) calc(var(--s2) / 2); } .impaginato .cs-quote .field--ink { grid-column: bleed-start / bleed-end; /* Stesso filetto usato in impaginato.css fra il footer-grid e la riga del copyright: qui segna il confine fra la sezione e il footer, che altrimenti si fondono avendo lo stesso inchiostro di fondo. */ border-bottom: 1px solid rgba(255,255,255,0.08); } .impaginato .cs-quote-body { grid-column: col 1 / c-end; grid-row: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cgap); align-items: start; } .impaginato .cs-quote-author { grid-column: 1 / 6; grid-row: 1 / 3; margin: 0; } /* `height: auto` è obbligatorio: senza, l'attributo height dell' arriva come hint di presentazione e la fotografia si schiaccia (stesso inciampo già corretto sulla foto dei servizi in home). Niente `object-fit` e nessun ritaglio: dentro l'immagine sono stampati nome e qualifica, e tagliarla significherebbe perderli. Niente filtro: sull'inchiostro il blu dello sfondo dello studio resta pieno, non smorzato. */ /* UNICA ECCEZIONE nel sito alla regola «zero border-radius sopra 2px» dichiarata in impaginato.css. Vale QUI e non sulle nove fotografie del team: quelle sono miniature da 140px in una riga d'elenco, questa è un'immagine editoriale da 606×404px che occupa cinque colonne e chiude la pagina — due ruoli diversi, e il commento su `.imp-person` («quadrato, non tondo: il cerchio è un avatar di interfaccia») resta valido per loro. 8px su 606px di larghezza è l'1,3%: si vede come angolo addolcito, non come scheda d'interfaccia. E non altera un pixel dell'immagine — ritaglia la forma, non applica un filtro: negli angoli c'è solo il fondo blu dello studio, il nome stampato sta al centro-destra. */ .impaginato .cs-quote-author img { display: block; width: 100%; height: auto; border-radius: 8px; } /* Il rientro dall'alto allinea la prima riga del motto al nome stampato dentro la foto. In percentuale e non in pixel perché deve seguire la fotografia quando la griglia si allarga o si stringe: il nome comincia al 24,2% dell'altezza dell'immagine; l'altezza è 2/3 della larghezza del ritratto, e il ritratto sta su 5 colonne contro le 7 del motto — 24,2% × 2/3 × 5/7 ≈ 11,5% della larghezza di QUESTO blocco, che è ciò a cui si riferisce una percentuale di padding. I 15px tolti sono lo spazio che la riga lascia sopra le maiuscole. */ .impaginato .cs-quote-body blockquote { grid-column: 6 / 13; grid-row: 1; margin: 0 0 var(--s2); padding-top: calc(11.5% - 15px); } /* Corsivo sul solo motto in citazione, non altrove nel sito. Non è Inter: `fonts/Inter-var-latin.woff2` contiene il solo tondo e nessun asse di inclinazione (verificato: con `slnt` le metriche non cambiano di un pixel), quindi `font-style: italic` su Inter dà un corsivo SINTETICO — il browser inclina meccanicamente il tondo e si vede: aste di spessore disomogeneo e la «a» che resta a due piani. Qui il corsivo è quello di Georgia, disegnato e presente su Windows e macOS senza scaricare nulla — coerente con la scelta di non chiamare font esterni. È l'unico punto del sito con un carattere diverso da Inter: un motto firmato è il posto dove un cambio di voce si legge come intenzionale. Georgia ha occhio medio più grande di Inter: a parità di corpo apparirebbe più grande, per questo la scala scende di circa il 7% rispetto ai titoletti da blocco. */ .impaginato .cs-quote-body blockquote p { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; font-size: clamp(1.2rem, 2.05vw, 1.78rem); line-height: 1.45; font-weight: 400; font-style: italic; color: var(--on-ink); text-wrap: balance; /* Motto CENTRATO nella propria colonna. `text-wrap: balance` era già qui e ora conta di più: su testo centrato righe di lunghezza molto diversa disegnano un profilo a clessidra, e il bilanciamento lo evita. VIA il `text-indent: -0.386em` che stava qui: era la correzione della virgoletta appesa, e serve solo all'allineamento a sinistra — lì la virgoletta occupava spazio sul margine e la prima riga sembrava rientrata rispetto a quelle sotto. Su testo centrato le righe non condividono un margine sinistro, quindi quel difetto non esiste, mentre il rientro negativo sposterebbe la prima riga di mezzo carattere fuori asse — cioè introdurrebbe proprio lo scarto che stiamo togliendo. */ text-align: center; } /* =========================================================================== RESPONSIVE =========================================================================== */ /* --- tablet / desktop stretto --- */ @media (max-width: 1080px) { .impaginato .cs-hero-body { grid-column: col 1 / col 11; } .impaginato .cs-mission-body { grid-column: col 1 / col 10; } .impaginato .cs-method-head { grid-column: col 1 / col 9; } /* Le tre fasi passano a due colonne: la terza scende sotto la prima e la diagonale si azzera, altrimenti resterebbe un dislivello di due gradini dentro una riga di due elementi. */ .impaginato .cs-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s2); } .impaginato .cs-method-grid .fact:nth-child(2), .impaginato .cs-method-grid .fact:nth-child(3) { margin-top: 0; } .impaginato .cs-strengths-head { grid-column: col 3 / col 11; } /* `.cs-quote-body` non si restringe più qui: le due colonne interne (ritratto e motto) hanno già bisogno di tutta la larghezza. */ } /* --- telefono --- */ @media (max-width: 720px) { .impaginato .cs-hero-body { grid-column: col 1 / c-end; padding-block: var(--s2) var(--s2); } .impaginato .cs-hero-body h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); max-width: none; } .impaginato .cs-hero-body .cs-lead { max-width: none; } .impaginato .cs-mission { padding-block: var(--s2); } .impaginato .cs-mission-body { grid-column: col 1 / c-end; } .impaginato .cs-mission-body p { max-width: none; } .impaginato .cs-method { padding-block: var(--s1) var(--s2); } .impaginato .cs-method-head { grid-column: col 1 / c-end; } .impaginato .cs-method-head h2 { max-width: none; } .impaginato .cs-method-head .cs-lead { max-width: none; } /* Una colonna: le fasi diventano tre righe rigate, come i punti di Chi siamo in home sul telefono. Nessun fondo, nessun bordo laterale. */ .impaginato .cs-method-grid { grid-column: col 1 / c-end; grid-template-columns: 1fr; margin-top: var(--s2); } .impaginato .cs-method-grid .fact { border-top: 1px solid var(--rule); padding-top: 24px; } .impaginato .cs-method-grid .fact hr { display: none; } .impaginato .cs-method-grid .fact p { max-width: none; } /* Il campo pietra conserva l'angolo: non tocca il bordo sinistro nemmeno qui, esattamente come le Prove in home. */ .impaginato .cs-strengths { padding-block: var(--s2); } .impaginato .cs-strengths .field--stone { grid-column: bleed-start / bleed-end; margin-left: 20px; } .impaginato .cs-strengths-head, .impaginato .cs-strengths-list { grid-column: col 1 / c-end; padding-left: 20px; } .impaginato .cs-strengths-head h2 { max-width: none; } .impaginato .cs-strength-row { padding-block: 20px; } .impaginato .cs-strength-row p { max-width: none; } .impaginato .cs-quote { padding-block: var(--s2); } /* Sul telefono le due colonne non ci stanno: motto sopra, ritratto sotto. Ordine invertito rispetto al desktop di proposito — la frase è ciò che si legge, la fotografia la firma. */ .impaginato .cs-quote-body { grid-template-columns: 1fr; } .impaginato .cs-quote-body blockquote { grid-column: 1; grid-row: 1; padding-top: 0; } .impaginato .cs-quote-author { grid-column: 1; grid-row: 2; } }