/* ============================================================================= lucamonticelli.it — DESIGN TOKEN Fonte unica di verità per colore, tipografia, spazio, ritmo e superfici. Nessun valore cromatico o tipografico va scritto altrove: se serve un colore nuovo, si aggiunge qui e si motiva. Tre livelli, in quest'ordine: 1. PRIMITIVI valori grezzi, senza significato d'uso 2. SEMANTICI ruoli ("il fondo", "il testo secondario") 3. REGISTRI rimappano i semantici per zona del sito I componenti leggono SOLO il livello semantico. ========================================================================== */ /* --- nota sullo scarto di impaginazione da caratteri -------------------------- Ho provato ripieghi calibrati con size-adjust e override di ascendente e discendente su sorgenti local(). Misurato nel browser: la registrazione avviene, ma size-adjust NON viene applicato ai font local() — chiesto il 99%, ottenuto lo 0,14%. Ho tolto il codice invece di lasciarlo lì a non fare nulla. Scarto residuo misurato: 27px, cioè una riga di testo, causato dal paragrafo di presentazione che con il ripiego va a capo una volta in più. Il CLS reale misurato in caricamento è 0; la soglia «buono» è 0,1. Se lo scarto dovesse contare davvero, la soluzione vera non è size-adjust ma ospitare i caratteri sul proprio server con preload e font-display:optional: niente scambio, niente scarto. Da valutare quando si passa al Plesk. */ /* ------------------------------------------------------------------ 1. PRIMITIVI */ :root{ /* --- carta e inchiostro (impianto Rassegna) ------------------------------ */ --lm-carta: #F7F5F0; /* fondo pagina */ --lm-carta-alta: #FFFDF8; /* schede e superfici sollevate */ --lm-carta-cava: #EFEBE2; /* fasce alternate, incassi */ --lm-inchiostro: #1A1815; /* testo primario — 16.3:1 su carta */ --lm-inchiostro-2: #413B32; /* testo di lettura — 10.2:1 su carta */ --lm-grigio: #6E675B; /* testo terziario — 5.1:1 su carta */ --lm-filetto: #D8D2C6; /* filetti portanti */ --lm-filetto-tenue: #E8E3D8; /* filetti di separazione interna */ --lm-notte: #191612; /* fascia scura dentro la rassegna */ --lm-notte-testo: #F2EEE6; /* — 15.6:1 sulla fascia scura */ /* --- rampa ruggine: unica famiglia d'accento del sito -------------------- Una sola identità cromatica a tre temperature: fredda e profonda in rassegna, calda e accesa in Reparto Scorie. Ogni gradino ha un uso preciso, dettato dal contrasto misurato (WCAG 2.1 AA). */ --lm-ruggine-700: #A8421F; /* Scorie su carta chiara — 5.56:1 */ --lm-ruggine-600: #9E3B2E; /* accento della rassegna — 6.18:1 su carta */ --lm-ruggine-500: #C8552F; /* SOLO titoli grandi su fondo scuro — 4.26:1 (soglia 3.0) */ --lm-ruggine-400: #D2633F; /* testo e bottoni su fondo scuro — 4.97:1 */ --lm-ruggine-200: #C98A7E; /* etichette sulla fascia scura — 6.37:1 */ /* --- registro Reparto Scorie --------------------------------------------- */ --lm-scorie-fondo: #15120F; --lm-scorie-superficie:#1E1A15; --lm-scorie-testo: #EDE7DB; /* — 15.2:1 */ --lm-scorie-testo-2: #C7BEAF; /* — 10.1:1 */ --lm-scorie-grigio: #948A7B; /* — 5.5:1 */ --lm-scorie-filetto: #302A23; --lm-scorie-nero: #150F0C; /* testo sopra i bottoni ruggine — 5.06:1 */ /* --- stati di servizio ---------------------------------------------------- */ --lm-positivo: #2E6A4F; --lm-attenzione: #8A5B14; --lm-errore: #A32B22; /* --- famiglie tipografiche ------------------------------------------------ CONGELATO: Archivo per i titoli, Archivo per la lettura. Un carattere solo. Bodoni Moda era la scelta precedente ed e' stata abbandonata per una ragione misurata, non di gusto: il suo rapporto fra altezza della x e altezza della maiuscola e' 0,613, contro lo 0,766 di Archivo. A parita' di corpo mostrava un quarto di minuscola in meno, e le aste sottilissime del didone sparivano sotto i 25px — cioe' proprio nei titoli delle schede e nella colonna «I piu' letti», che stanno a 24,8 e 17px. Confrontata con Libre Franklin (0,716) e Chivo (0,745) sulla homepage reale, alle tre larghezze, con i testi veri: Archivo vince sulla leggibilita' immediata, era gia' nel progetto, e nessuna delle tre spostava una riga di impaginazione. Vedi docs/tipografia.md. UN CARATTERE SOLO NON APPIATTISCE, se il peso fa il lavoro: la gerarchia la fa lo stacco 700 contro 400, piu' netto di quanto Bodoni 500 desse contro Archivo 400. Per questo --lm-peso-titolo e' 700 e non 500: un grottesco a 500 resta magro dove un didone a 500 pesava gia' per contrasto. --lm-fam-lettura e' DELIBERATAMENTE separato e resta scambiabile. Se sulla pagina articolo la lettura lunga risultasse scomoda, si puo' introdurre un serif per il solo corpo del testo senza toccare titoli ne' identita': basta il filtro lm_fam_lettura in inc/tipografia.php, oppure una riga qui. */ --lm-fam-titolo: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --lm-fam-lettura: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --lm-fam-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --lm-fam-manifesto:"Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif; /* solo registro Scorie */ --lm-fam-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* --- scala tipografica ---------------------------------------------------- Terza maggiore (1.25) sui gradini bassi, fluida su quelli alti. I gradini 0–2 restano fissi: il testo di lettura non deve ballare. */ --lm-passo-000: 0.6875rem; /* 11px — etichette, occhielli */ --lm-passo-00: 0.8125rem; /* 13px — didascalie, metadati */ --lm-passo-0: 0.9375rem; /* 15px — interfaccia */ --lm-passo-1: 1.0625rem; /* 17px — testo compatto, schede */ --lm-passo-2: 1.1875rem; /* 19px — corpo dell'articolo */ --lm-passo-3: clamp(1.3rem, 0.95rem + 0.9vw, 1.55rem); --lm-passo-4: clamp(1.6rem, 1.05rem + 1.7vw, 2.1rem); --lm-passo-5: clamp(2rem, 1.15rem + 2.7vw, 2.95rem); /* titolo articolo */ --lm-passo-6: clamp(2.5rem, 1.25rem + 4.1vw, 3.85rem); /* apertura homepage */ --lm-passo-7: clamp(3rem, 1.3rem + 5.9vw, 5.25rem); /* manifesto Scorie */ /* --- scala legata al CONTENITORE, non al viewport --------------------------- Quando il titolo d'apertura vive in una colonna affiancata all'immagine, la larghezza del viewport non dice nulla: la colonna resta sui 450px anche su uno schermo da 1920. Le unita' cqi misurano il contenitore. Il coefficiente non e' scelto a occhio, ed e' stato ritarato sulla misura. La taratura originale partiva dall'avanzamento di Bodoni Moda, 0,4549 em per carattere sui titoli reali dell'archivio: il ritorno a capo sulle parole (piu' text-wrap:balance) riempie le righe circa all'87%, il calcolo teorico dava 24 caratteri per riga, la resa effettiva ne dava 18, e un titolo da 71 caratteri finiva in quattro righe invece di tre. Passando ad Archivo 700 il coefficiente NON e' stato ritoccato, ed e' stato verificato che non serve: Archivo avanza il 3% in piu' per carattere, ma nessuno dei titoli dell'archivio cambia numero di righe. Misurato sul sito reale a 1280, 768 e 375, confrontando le altezze con quelle di Bodoni: titolo principale 77px, apertura 112px, scheda lunga 91px, «piu' letti» 41px — identiche prima e dopo. Coefficienti verificati contando le righe sui titoli veri: 8cqi -> circa 24 caratteri per riga effettivi 7cqi -> circa 27, per i titoli oltre i 70 caratteri Risultato sui titoli d'archivio (mediana 40, massimo 86): 1-3 righe nel caso normale, 4 solo per gli eccezionali. */ --lm-passo-apertura: clamp(1.4rem, 8cqi, 2.6rem); --lm-passo-apertura-lungo: clamp(1.3rem, 7cqi, 2.3rem); /* oltre 70 caratteri */ /* --- interlinea e crenatura ---------------------------------------------- */ --lm-int-stretta: 1.04; /* titoli grandi */ --lm-int-media: 1.22; /* titoli piccoli, occhielli */ --lm-int-lettura: 1.68; /* corpo dell'articolo */ --lm-int-ui: 1.5; --lm-cren-titolo: -0.012em; --lm-cren-etichetta: 0.17em; /* --- pesi ---------------------------------------------------------------- */ /* 700 e non 500: con un grottesco il peso e' l'unico strumento di gerarchia, visto che titoli e testo condividono la famiglia. Con Bodoni bastava il 500 perche' il contrasto fra aste e grazie faceva peso da solo. Il registro Scorie lo riporta a 400, perche' Anton ha un peso unico. */ --lm-peso-titolo: 700; --lm-peso-testo: 400; --lm-peso-medio: 500; --lm-peso-forte: 600; /* --- spazio: griglia di 4px, ritmo editoriale ----------------------------- */ --lm-sp-1: 0.25rem; --lm-sp-2: 0.5rem; --lm-sp-3: 0.75rem; --lm-sp-4: 1rem; --lm-sp-5: 1.5rem; --lm-sp-6: 2rem; --lm-sp-7: 3rem; --lm-sp-8: 4.5rem; --lm-sp-9: 6.5rem; /* --- misure ---------------------------------------------------------------- */ /* Colonna di lettura, calibrata sul CORPO DEL TESTO (19px, --lm-passo-2). Due avvertenze imparate misurando: 1) ch misura la cifra zero, piu' stretta del carattere medio: in Archivo 55ch danno circa 67 caratteri per riga, non 55. 2) ch si risolve rispetto al corpo dell'elemento su cui e' scritto. Lo stesso token dentro una traccia di griglia (che eredita 17px) valeva 594px, sull'elemento di testo (19px) 664px: due misure diverse. Per questo il vincolo si applica in UN SOLO posto, sull'elemento di lettura, e la griglia lo lascia decidere a lui. */ --lm-misura: 55ch; /* circa 67 caratteri per riga a 19px */ --lm-misura-stretta: 52ch; /* sommari, citazioni */ --lm-larghezza: 1280px; /* gabbia editoriale */ --lm-larghezza-stretta: 760px; /* pagine di testo lungo */ --lm-grondaia: clamp(1.25rem, 4vw, 2.75rem); --lm-colonna-fianco: 300px; /* colonna "I più letti di sempre" */ --lm-colonna-dati: 150px; /* colonna dei dati nella pagina articolo */ /* --lm-figura-max non ha un valore qui: lo scrive il PHP in linea, con la larghezza naturale dell'allegato, per impedire che un'immagine piccola venga ingrandita. Senza valore il fallback nelle regole vale 100%. */ /* --- superfici: la rassegna usa filetti, non ombre ------------------------- */ --lm-raggio-0: 0; --lm-raggio-1: 2px; --lm-raggio-2: 3px; --lm-bordo: 1px; --lm-bordo-forte: 2px; --lm-bordo-testata: 3px; /* doppio filetto sotto la testata */ --lm-ombra-0: none; --lm-ombra-1: 0 1px 2px rgba(26,24,21,.06); --lm-ombra-2: 0 14px 34px -20px rgba(26,24,21,.42); --lm-ombra-libro: 0 18px 44px rgba(0,0,0,.55); /* --- movimento ------------------------------------------------------------- */ --lm-tempo-1: 120ms; --lm-tempo-2: 220ms; --lm-curva: cubic-bezier(.2,.6,.3,1); /* --- punti di rottura (documentati: le media query non leggono le variabili) s 480px · m 768px · l 1024px · xl 1280px */ } /* ------------------------------------------------------------------ 2. SEMANTICI */ /* I componenti usano esclusivamente questi. Cambiando registro cambiano loro, non il CSS dei componenti. */ :root{ --lm-fondo: var(--lm-carta); --lm-superficie: var(--lm-carta-alta); --lm-superficie-cava: var(--lm-carta-cava); --lm-testo: var(--lm-inchiostro); --lm-testo-2: var(--lm-inchiostro-2); --lm-testo-3: var(--lm-grigio); --lm-riga: var(--lm-filetto); --lm-riga-tenue: var(--lm-filetto-tenue); --lm-accento: var(--lm-ruggine-600); /* occhielli, filetti d'accento */ --lm-accento-testo: var(--lm-ruggine-600); /* link e testo d'accento */ --lm-accento-solido: var(--lm-ruggine-600); /* fondo dei bottoni */ --lm-su-accento: var(--lm-carta); /* testo sopra il bottone */ --lm-font-titolo: var(--lm-fam-titolo); --lm-font-lettura: var(--lm-fam-lettura); --lm-font-ui: var(--lm-fam-ui); --lm-titolo-peso: var(--lm-peso-titolo); --lm-titolo-cren: var(--lm-cren-titolo); --lm-titolo-trasf: none; /* Scorie lo porta a uppercase */ --lm-raggio: var(--lm-raggio-1); --lm-ombra-scheda: var(--lm-ombra-0); /* la rassegna separa con filetti */ --lm-densita: 1; /* moltiplicatore di spazio verticale per registro */ } /* ------------------------------------------------------------------ 4. CARATTERE DI LETTURA Unico punto di scambio rimasto aperto. La classe la mette inc/tipografia.php su : i primitivi vanno sovrascritti dove il livello semantico e' dichiarato, cioe' su :root — su non avrebbe alcun effetto. Vedi docs/token-registri.md. */ .lettura-serif{ --lm-fam-lettura: "Libre Caslon Text", Georgia, "Times New Roman", serif; --lm-font-lettura: var(--lm-fam-lettura); }