/* =========================================================================== IMPAGINATO — il foglio di sistema, caricato da `header.php` su OGNI pagina --------------------------------------------------------------------------- Un file solo, in quest'ordine: prima lo STRATO DI FONDO (font, reset, testata, piè di pagina), poi il SISTEMA editoriale (griglia, campi di colore, token, tipografia, componenti condivisi), poi i MODULI. UN FILE SOLO perché serve a tutte le pagine senza eccezioni: qualsiasi confine interno a questo strato non risparmia una richiesta a nessuno e nasconde le dipendenze (font, token, moduli condivisi). Restano distinti solo i fogli che variano per pagina: `home.css` (1), `chi-siamo.css` (1), `interne.css` (16), `contatti.css` (1), `riservata.css` (5), `legal.css` (2). ATTENZIONE — `--font-display` punta a Plus Jakarta Sans, quindi tutti gli h1/h2/h3 del sito sono in Plus Jakarta Sans, non in Inter. I due @font-face caricano i caratteri in locale: nessuna chiamata a fonts.googleapis.com, quindi nessun trasferimento di dati verso terzi. QUI NON VIVE L'IMPAGINAZIONE DI NESSUNA PAGINA: le sezioni della home sono in `css/home.css`. =========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/Inter-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../fonts/PlusJakartaSans-var-latin.woff2') format('woff2'); } :root { --charcoal: #333D47; --charcoal-2: #4A5560; --orange: #F2682A; --orange-2: #FF7D3D; --gray: #71747B; --gray-light: #C9CBCE; --bg: #FFFFFF; --bg-alt: #F6F6F7; --text: #333D47; --text-mid: #5C6570; --border: rgba(51, 61, 71, 0.1); --radius: 10px; --radius-lg: 18px; --shadow: 0 10px 30px rgba(51, 61, 71, 0.08); --container: 1180px; --font-body: 'Inter', sans-serif; --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif; } /* --------------------------------------------------------------------------- RESET E TIPOGRAFIA DI BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--charcoal); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } /* Ripiego per le sezioni che non dichiarano un proprio spazio verticale. Nel sistema `impaginato` ogni sezione `.pg` lo dichiara, quindi questa regola non si vede quasi mai — ma resta come rete di sicurezza. */ section { padding: 76px 0; } /* --------------------------------------------------------------------------- TESTATA --------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 84px; } .logo { flex-shrink: 0; margin-right: 32px; } .logo img { height: 34px; width: auto; } .main-nav { display: flex; align-items: center; gap: 30px; flex-shrink: 0; } .main-nav a { font-size: 0.92rem; font-weight: 500; color: var(--charcoal); white-space: nowrap; transition: color 0.2s ease; position: relative; } .main-nav a:hover, .main-nav a.on { color: var(--orange); } .header-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .icon-link { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--charcoal-2); white-space: nowrap; } .icon-link:hover { color: var(--orange); } .icon-link svg { width: 18px; height: 18px; } /* Menu dell'area riservata in testata, al posto del link "Area riservata" quando si è già collegati: `
` nativo, nessun JavaScript. Compare SOLO a utente connesso: un controllo automatico delle classi effettivamente usate, fatto senza autenticarsi, lo dichiarerebbe morto. */ .riservata-menu { position: relative; } .riservata-menu summary { cursor: pointer; list-style: none; } .riservata-menu summary::-webkit-details-marker { display: none; } .riservata-menu[open] summary { color: var(--orange); } .riservata-menu-panel { position: absolute; top: calc(100% + 14px); right: 0; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; } .riservata-menu-panel a { padding: 10px 12px; border-radius: 6px; font-size: 0.9rem; font-weight: 500; color: var(--charcoal); white-space: nowrap; } .riservata-menu-panel a:hover { background: var(--bg-alt); color: var(--orange); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; } /* --------------------------------------------------------------------------- PIÈ DI PAGINA --------------------------------------------------------------------------- */ .site-footer { /* #1E252C è lo stesso inchiostro della chiusura della home. Il valore sta qui e non in una regola `.impaginato` separata, che ogni pagina soddisfa e che quindi sovrascriverebbe sempre questa. Letterale e non `var(--ink)`: quel token è dichiarato dentro `.impaginato` e questo è lo strato di fondo, che non deve dipenderne. */ background: #1E252C; color: rgba(255,255,255,0.65); padding: 64px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); } /* `width: auto` NON è ridondante, ed è quello che mancava. Gli attributi `width`/`height` sul tag valgono come suggerimenti di stile: `height: 58px` qui sotto sovrascrive il suggerimento dell'altezza, ma senza dichiarare la larghezza resta in vigore quella dell'attributo (400px), che `max-width:100%` stringe alla colonna — 352px — mentre l'altezza è bloccata a 58. Risultato: marchio schiacciato, rapporto 6,07 invece di 2,96. `.logo img` in testata non ne soffriva perché la larghezza automatica l'ha sempre dichiarata. */ .footer-brand img { height: 58px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); } .footer-brand p { font-size: 0.88rem; max-width: 260px; } /* LINKEDIN — il marchio nei suoi colori, su una piastrella bianca. Il campo bianco non è un vezzo grafico: il blu LinkedIn #0A66C2 sul fondo del piè di pagina (--ink, #1E252C) sta a 2,72:1. Un logo è formalmente esente dai minimi di contrasto WCAG — l'eccezione per i logotipi — quindi non è una violazione, ma a quel rapporto il marchio si vede male, che è esattamente l'opposto del motivo per cui si usa il colore originale invece del bianco. Su piastrella: il segno sta a 5,69:1 sul bianco e la piastrella a 15,48:1 sul fondo. È anche la presentazione che le linee guida LinkedIn prescrivono quando il fondo non offre contrasto sufficiente. Gli angoli arrotondati sono dentro il tracciato ufficiale (~2,3px a questa misura), quindi non violano il limite di 2px del sistema per scelta nostra: è la forma del marchio di un terzo, non un nostro elemento. NON usa `.icon-link`: quella classe eredita il colore del testo e passa all'arancione al passaggio del mouse, cosa che su un marchio altrui non si fa. */ .footer-social { display: inline-flex; margin-top: 20px; } .footer-social svg { width: 28px; height: 28px; display: block; } .footer-social .ls-campo { fill: #fff; } .footer-social .ls-segno { fill: #0A66C2; } /* Al passaggio del mouse si scurisce la piastrella, non il marchio: il blu resta quello esatto. */ .footer-social:hover .ls-campo { fill: #E4EAF0; } .footer-social:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* Stessa icona, sul fondo chiaro delle card persona (persone.php): qui il badge blu con il segno bianco è il marchio standard, non serve la piastrella di contrasto che serve invece sul footer scuro. */ .impaginato .person-linkedin { display: inline-flex; vertical-align: middle; margin-left: 8px; transition: opacity .2s ease; } .impaginato .person-linkedin svg { width: 18px; height: 18px; display: block; } .impaginato .person-linkedin .ls-campo { fill: #0A66C2; } .impaginato .person-linkedin .ls-segno { fill: #fff; } .impaginato .person-linkedin:hover { opacity: .75; } .impaginato .person-linkedin:focus-visible { outline: 2px solid var(--imp-orange); outline-offset: 3px; } .footer-col h4 { font-family: var(--font-body); color: #fff; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; } .footer-col ul { display: grid; gap: 10px; } .footer-col a { font-size: 0.88rem; } .footer-col a:hover { color: var(--orange); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.8rem; flex-wrap: wrap; gap: 12px; } .footer-bottom a:hover { color: var(--orange); } /* --------------------------------------------------------------------------- NAVIGAZIONE SU SCHERMI STRETTI — la barra diventa menu a tendina --------------------------------------------------------------------------- */ .nav-only-mobile { display: none; } @media (max-width: 1200px) { .header-actions .icon-link, .header-actions .riservata-menu { display: none; } .nav-toggle { display: flex; } .main-nav { position: absolute; top: 84px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px; display: none; } .main-nav.open { display: flex; } .main-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); } .main-nav a.nav-only-mobile { display: block; } .main-nav a.nav-cta { margin-top: 12px; border-bottom: none; text-align: center; background: var(--orange); color: #fff; border-radius: 999px; font-weight: 600; } } /* --------------------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { section { padding: 64px 0; } .footer-grid { grid-template-columns: 1fr; } } /* =========================================================================== IMPAGINATO — la base del sistema --------------------------------------------------------------------------- Fondamenta del sistema di impaginazione editoriale di tutto il sito: griglia, campi di colore, token, tipografia e componenti condivisi. Ogni pagina carica questo foglio PRIMA del proprio e ne riusa tutto. Qui NON vivono le sezioni di nessuna pagina. Quelle della home stavano qui per un motivo solo cronologico (la home fu costruita per prima, mentre le fondamenta venivano scritte) e sono state spostate in `css/home.css`: erano 12,7 KB su 17,9 di regole, cioè il 71%, che diciassette pagine su diciotto si scaricavano senza poterle usare. Il criterio ora è uno per tutte: qui il SISTEMA, nel foglio di pagina la sua IMPAGINAZIONE. Due componenti che NASCONO nelle sezioni della home restano qui perché sono condivisi: `.fact` (anche in chi-siamo) e `.imp-person` (anche in persone). TUTTO è circoscritto a `body.impaginato`, che è la classe di ogni pagina del sito: i vecchi prototipi che non erano passati a questo sistema (index-old.php, index-v2.php, styleguide.php) sono stati eliminati nella pulizia dei materiali non usati, quindi la circoscrizione oggi non esclude più nessuna pagina — ma va mantenuta, perché nella prima parte di QUESTO foglio ci sono regole non circoscritte (reset, testata, piè di pagina) che valgono per il documento intero, e la separazione fra le due cose va mantenuta leggibile. Il principio: la pagina NON è una pila di fasce con il contenuto incolonnato dentro un contenitore centrato. È un impaginato su griglia continua a 12 colonne dove: - i campi di colore si dividono in VERTICALE (non in orizzontale); - un campo non tocca il bordo sinistro (angolo visibile in pagina); - gli stacchi verticali percepiti variano secondo la scala --s1..--s4; - tre sezioni consecutive non hanno alcun cambio di fondo. Nota su ciò che è stato tolto rispetto all'impianto iniziale, perché il criterio è uno solo e vale anche per il futuro: un elemento posato su un asse che nessun altro usa, o separato dal resto da spazio senza motivo, si legge come errore e non come scelta. Per questo sono spariti la piastra dei marchi, il gradino sul bordo della chiusura, i filetti verticali di settori e loghi, il payoff in testo e il quinto gradino della scala verticale. Fondi in tutta la pagina: 4 (inchiostro, carta, pietra, una fotografia). Zero box-shadow. Zero border-radius sopra 2px — con UNA eccezione, il ritratto della citazione in chi-siamo.php (8px): è l'unica fotografia editoriale a piena colonna del sito, mentre le miniature del team restano a spigolo vivo. Motivazione per esteso in `css/chi-siamo.css`, sulla regola `.cs-quote-author img`. Se un domani nascesse una seconda eccezione, allora la regola va riscritta invece di collezionare deroghe. =========================================================================== */ .impaginato { /* --- misure di griglia --- */ --gut: clamp(16px, 2.2vw, 40px); /* margine esterno, FISSO: fa cadere le linee bleed-* sui bordi esatti */ --rail: clamp(0px, 5.2vw, 84px); /* corsia delle etichette, a sinistra */ --cgap: clamp(12px, 1.3vw, 24px); /* --- ritmo verticale --- Quattro gradini, da 24 a 84px. Il quinto è stato rimosso perché restava senza impieghi: era l'apertura di Chi siamo, dove il cambio di colore annuncia già il confine e quello spazio si leggeva come vuoto. Ciò che rende leggibile il ritmo non è l'ampiezza massima ma il RAPPORTO fra stacchi grandi e piccoli: sommandosi fra sezioni contigue i valori tendono a livellarsi, e in una prima taratura gli stacchi percepiti stavano tutti fra 213 e 285px — variazione 1,34x, cioè nessuna. La scala è volutamente compressa rispetto a un impianto editoriale classico, e i gradini grandi sono tagliati più dei piccoli: è lì che lo spazio fra bordo del blocco e testo si legge come vuoto da scorrere. */ --s1: clamp(24px, 2.6vw, 36px); --s2: clamp(32px, 3.3vw, 48px); --s3: clamp(44px, 4.3vw, 64px); --s4: clamp(56px, 5.3vw, 84px); /* --- scala tipografica --- Sei gradini, uno per RUOLO: la regola del sistema è che due elementi con la stessa funzione hanno la stessa misura, sempre. Prima questi valori erano scritti a mano 59 volte in sei fogli, tenuti insieme solo da un commento che invitava a ricordarsene — e quel commento si era già rotto (elencava una classe che non esisteva più). Definiti qui una volta sola, "se cambi una misura cambiale tutte" smette di essere una richiesta a un umano e diventa una conseguenza automatica. I nomi dicono il ruolo, non la dimensione: se un domani le annotazioni dovessero diventare più grandi dell'etichetta, il nome resta giusto. Fuori dalla scala, di proposito: i titoli (clamp legati alla larghezza, perché devono respirare col viewport) e quattro misure isolate, ognuna unica nel suo ruolo e quindi senza famiglia da tenere allineata — `.prod-row .name b` 1.5rem (nome di prodotto sull'inchiostro), `.pg-legal-body h2` 1.5rem (sezione di un testo legale lungo), `.manifesto` 1.3rem solo su telefono, `.form-feedback h2` 1.4rem. Se una di queste smette di essere unica, diventa un token — è quello che è appena successo a `--fs-riga` qui sotto, nato perché il titolo di riga era scritto con due clamp diversi in due fogli. Nota che 1.5rem compare sia fra le misure isolate sia come tetto di `--fs-riga`: è una coincidenza di valore, non di ruolo, e non va unificata. Fuori da questa scala restano anche le misure della TESTATA e del PIÈ DI PAGINA (0.8, 0.82, 0.86, 0.88, 0.9, 0.92rem, nella prima parte del foglio): sono la famiglia propria della cornice e ci restano di proposito. [Correzione: qui c'era scritto che quelle regole "non possono usare questi token perché non sono circoscritte a `.impaginato`". È FALSO — le variabili CSS si ereditano, e testata e piè di pagina sono discendenti di `body.impaginato`, che è la classe di tutte e 18 le pagine che rendono HTML. Leggerebbero i token senza problemi.] Non lo fanno per una ragione diversa: dei sei valori solo `0.92rem` della navigazione coincide con un token (`--fs-etichetta`), e collegarlo sarebbe PEGGIO. Una voce di menu e una micro-etichetta in maiuscoletto hanno la stessa misura per coincidenza, non lo stesso ruolo: legarle vorrebbe dire che il giorno in cui si cambia la dimensione delle etichette si ridimensiona di nascosto anche la navigazione. Un token vale per un RUOLO, non per un valore. Gli altri cinque non corrispondono a nessun gradino, e forzarli sulla scala cambierebbe l'aspetto di barra e footer su tutte le pagine per un guadagno solo concettuale. */ /* REGOLA D'USO DI QUESTA SCALA: per cambiare la misura di un ruolo si sposta il TOKEN, non la singola regola. Alzare una regola per volta fa divergere lo stesso ruolo fra pagine — il testo di una riga d'elenco a una misura in home e a un'altra nelle interne — e rompe la proporzione titolo/testo di riga, che vale 1,50 su tutte le pagine con righe. Il corpo non si muove da solo: con lui vanno sotto-titoli e titoletti, altrimenti un nome di persona finisce a mezzo pixel dal proprio testo e non si legge più come titolo. Le misure della cornice (testata e piè di pagina) restano fuori da questa famiglia, come scritto sopra. */ --fs-nota: .85rem; /* annotazioni, didascalie, controlli minori */ --fs-etichetta: .92rem; /* maiuscoletto spaziato e dati secchi */ --fs-corpo: 1.12rem; /* corpo di riga, scheda, testo lungo */ /* Coincide con `--fs-corpo` da quando il corpo è salito: sul sito l'apertura di una fascia e il testo di una riga si leggono alla stessa misura, e forzare un gradino di differenza avrebbe voluto dire alzare tutti i sommari e rimisurarne le righe su ogni pagina. I due token restano distinti perché i RUOLI sono distinti: se un domani si vuole un'introduzione più grande, si cambia questo e non si tocca il corpo. */ --fs-intro: 1.12rem; /* riga di apertura di una fascia */ --fs-sottotitolo: 1.3rem; /* sotto-titoli compatti */ --fs-titoletto: 1.4rem; /* titoletti di blocco */ /* Titolo di una riga in un elenco (righe servizio in home, righe prodotto e servizio nelle pagine interne). Cresce col viewport perché una riga larga regge un titolo più grande, ma non scende sotto il titoletto di blocco. UN SOLO CLAMP per home e pagine interne: il ruolo è lo stesso, e dargli un valore locale su una pagina è esattamente il difetto per cui questo token esiste. NON vale per `.prod-row .name b`: quello è un nome di famiglia di prodotti, e resta alla sua misura isolata (1.75rem). Muovere questo token non muove il layout: la colonna della descrizione è sempre la più alta e detta lei l'altezza della riga, quindi un titolo che passa da una a due righe non sposta niente. */ --fs-riga: clamp(1.5rem, 2.1vw, 1.68rem); /* --- densità delle righe (NON token: indice) --- Lo spazio fra il filetto di una riga e il suo testo è scritto come valore fisso nel foglio di ciascuna riga, e resta così di proposito: qui, a differenza della scala tipografica, ogni RUOLO ha UNA misura sola, e i valori coincidono già dove i ruoli coincidono. Le differenze non sono sbavature, sono densità: l'indice prodotti è il più arioso perché è ciò che l'azienda vende, la striscia dei settori è compatta perché è una battuta fra due sezioni ampie. Unificarle appiattirebbe una gerarchia voluta. Quello che serviva era un indice, perché sei valori senza nome non danno nessuna guida a chi aggiunge una riga domani — ed è così che nasce il settimo valore. Desktop / telefono: 44 / 26 `.prod-row` indice prodotti (home) 34 / 24 `.serv-row` righe servizio (home) 34 / 24 `.pg-row` righe di contenuto (pagine interne) 30 / 22 `.sect-row` striscia settori (home) 26 / 22 `.cli-row` loghi clienti (home) 26 / 20 `.cs-strength-row` punti di forza (chi siamo) 22 / — `.cert-rows` certificazioni (home) 22 / — `.contact-block` blocchi sedi (contatti) 20 / — `.imp-person` riga persona (home, persone) Una riga nuova prende uno di questi, non un valore nuovo. Se serve davvero un settimo, allora la scala va ripensata — non estesa. */ /* --- altezze legate al viewport (parametrizzate: così si possono neutralizzare in blocco per catturare la pagina intera) --- */ --hero-h: calc(88svh - 92px); --people-h: 86svh; /* --- superfici --- */ --paper: #FFFFFF; --stone: #E7E5E1; /* warm-neutral; variante fredda pronta: #E4E7E9 */ --ink: #1E252C; /* --- inchiostri --- */ --imp-text: #3B454F; --imp-text-mid: #5C6570; --imp-gray: #5C6570; --on-ink: #F4F1EC; /* off-white caldo, non #FFF */ --on-ink-2: rgba(244, 241, 236, .68); /* --- filetti --- */ --rule: rgba(30, 37, 44, .16); --rule-strong: rgba(30, 37, 44, .30); --rule-dark: rgba(244, 241, 236, .26); /* --- accento --- */ --imp-orange: #F2682A; /* marchio: bottoni, filetti, un punto fermo */ --imp-orange-ink: #C9501C; /* arancione come TESTO PICCOLO su carta (AA) */ --imp-orange-ink-stone: #A14016; /* variante più scura: stesso testo su campo pietra (AA) */ --imp-orange-lite: #FF8A4F; /* arancione come testo su inchiostro */ background: var(--paper); color: var(--imp-text); /* `clip` e non `hidden`: `hidden` su body crea un contenitore di scorrimento e rompe gli elementi position:sticky. */ overflow-x: clip; } /* --------------------------------------------------------------------------- LA GRIGLIA — unica, condivisa, senza max-width I due gutter sono a larghezza fissa, quindi tutto lo spazio libero va alle 12 colonne 1fr e le linee bleed-start / bleed-end cadono esattamente sui bordi del viewport a qualunque larghezza. Linee disponibili: bleed-start · rail-start · c-start · col 1…col 13 · c-end · bleed-end (`col 13` coincide con `c-end`, così gli span fino in fondo sono espliciti) --------------------------------------------------------------------------- */ .impaginato .pg { position: relative; /* contenitore di riferimento per i campi */ display: grid; width: 100%; column-gap: var(--cgap); grid-template-columns: [bleed-start] var(--gut) [rail-start] var(--rail) [c-start] repeat(12, [col] minmax(0, 1fr)) [col c-end] var(--gut) [bleed-end]; } /* Il ritmo verticale è assegnato sezione per sezione: la regola globale `section { padding: 76px 0 }` non vale in questa pagina. */ .impaginato section { padding: 0; } /* I campi di colore sono grid item in position:absolute — il loro blocco contenitore è l'area di griglia in cui sono collocati. Così coprono tutta l'altezza della sezione anche con righe implicite, senza il bug di `grid-row: 1 / -1` (che su griglie implicite collassa a una riga sola). Vengono prima nel DOM e hanno z-index 0: il contenuto dipinge sopra. */ .impaginato .field { position: absolute; /* left/right espliciti: un elemento in posizione assoluta collocato in un'area di griglia NON la riempie da solo — con left/right automatici collassa alla larghezza del contenuto, cioè a zero. */ left: 0; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none; } .impaginato .field--ink { background: var(--ink); } .impaginato .field--stone { background: var(--stone); } /* Tutto il contenuto sta sopra i campi. Solo `position: relative`, senza z-index: un elemento posizionato con z-index automatico dipinge nello stesso livello di z-index:0 seguendo l'ordine del DOM — e i campi vengono prima. Mettere qui `z-index: 1` annullerebbe gli z-index più alti delle sovrapposizioni, perché questo selettore ha specificità maggiore. */ .impaginato .pg > *:not(.field) { position: relative; } /* --------------------------------------------------------------------------- TIPOGRAFIA — il cambio di voce lo fa il PESO (max 600), non un serif --------------------------------------------------------------------------- */ .impaginato h1, .impaginato h2, .impaginato h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); text-wrap: balance; } .impaginato h1 { font-size: clamp(2.1rem, 4.6vw, 4.1rem); line-height: 1.04; } .impaginato h2 { font-size: clamp(1.7rem, 2.9vw, 2.6rem); } .impaginato h3 { font-size: var(--fs-titoletto); } .impaginato p { text-wrap: pretty; } /* Etichetta di corsia e micro-etichette. Tutte le etichette in maiuscoletto spaziato del sito stanno su UNA misura sola — la stessa del colophon dell'apertura: sono lo stesso registro (maiuscoletto spaziato, dato secco) e vederle di corpo diverso si notava. Qui c'era un elenco dei posti da aggiornare a mano in caso di modifica (`.pg-row .tag`, `.imp-person .role`, `.contact-role`, `.users-table th`, `.tag-ruolo`…): era la sola cosa che tenesse allineate diciotto copie dello stesso numero sparse in cinque fogli, e si era già rotto — elencava una classe cancellata. Ora la misura è `--fs-etichetta`, definita una volta in cima a questo foglio: cambiarla lì la cambia dappertutto. */ .impaginato .rail-label, .impaginato .mini-label { font-size: var(--fs-etichetta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--imp-gray); line-height: 1.5; } .impaginato .rail-label { grid-column: rail-start / c-start; } /* filetto d'apertura */ .impaginato .tick { display: block; width: 24px; height: 2px; background: var(--imp-orange); border: 0; } /* --------------------------------------------------------------------------- AZIONI — un solo bottone pieno per schermata, il resto è testo con freccia --------------------------------------------------------------------------- */ /* Il pulsante pieno. `font-family` e `line-height` sono dichiarati ESPLICITAMENTE e non lasciati all'eredità: `.btn-solid` sta su 8 `` e su 5 `