/* =========================================================================== AITERTC — Tipografia I caratteri della piattaforma congressi portati sul sito. Space Grotesk per i titoli grandi (H1, H2), IBM Plex Sans per tutto il resto. Sono gli stessi file .woff2 che serve https://www.aitertc.it/piattaforma_congressi/ : due facce dello stesso ente che si somigliano invece di sembrare due siti comprati da fornitori diversi. ## Come si accende e si spegne NON si commenta questo file, e non si cambia niente qui dentro per accendere o spegnere. Si fa da Aspetto → AITERTC Impostazioni → Tipografia: - «Space Grotesk sui titoli»: spento / solo H1-H2 / tutti da H1 a H6 - «IBM Plex Sans sul testo»: una casella Le scelte del pannello mettono o tolgono le classi sul , e tutto torna com'era senza rigenerare niente. Le classi sono a strati: «-titoli» copre H1 e H2, «-tutti» aggiunge da H3 in giu' e arriva solo con la terza scelta. ## Su quale variabile si agisce, e perche' non basta quella di The7 The7 espone --the7-h1-font-family e compagnia, e la prima versione di questo file si limitava a ridichiarare quelle. Non cambiava niente, ed e' stato visibile solo provandolo sul sito vero: style.css del tema figlio le sovrascrive TUTTE a 'Inter' (righe 227 e 252-257) e poi dichiara body, .entry-content, ... { font-family: var(--aitertc-font-family) !important } h1, h2, ..., .wf-container h6 { font-family: var(--aitertc-font-family) !important } Il carattere del sito lo decide quindi --aitertc-font-family, non le variabili di The7. E' quella che si ridichiara qui. Ridichiarare una variabile funziona anche contro un !important: l'!important protegge la dichiarazione «font-family: var(...)», ma il valore della variabile viene risolto sull'elemento, dove vince la nostra. L'unico punto dove serve !important e' separare H1-H2 dal resto: quella regola mette lo stesso carattere su tutti e sei i livelli con !important, e per staccarne due bisogna rispondere sullo stesso piano. Il selettore parte da «html body» per avere specificita' 0,1,2 contro lo 0,1,1 di «.wf-container h1»: senza, sarebbe un pareggio deciso dall'ordine di caricamento, che e' un equilibrio troppo fragile per lasciarcelo. ## Licenze Space Grotesk e IBM Plex Sans sono entrambi SIL Open Font License 1.1: si possono ospitare sul proprio server, anche per un sito che raccoglie quote associative. =========================================================================== */ /* ---------------------------------------------------------------- caratteri I file sono divisi in «latin» e «latin-ext» e ognuno dichiara il proprio unicode-range: il browser scarica il secondo solo se in pagina compare un carattere che sta li' dentro. Su un sito in italiano quasi mai. font-display: swap — il testo si legge subito col carattere di sistema e viene sostituito quando il file arriva. L'alternativa e' una pagina bianca per qualche decimo di secondo, che e' peggio. Sono variabili (un solo file per tutti i pesi da 500 a 700), per questo font-weight dichiara un intervallo e non un numero. -------------------------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; src: url('../font/SpaceGrotesk-var-latin.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: 'Space Grotesk'; src: url('../font/SpaceGrotesk-var-latin-ext.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB; } @font-face { font-family: 'Plex'; src: url('../font/IBMPlexSans-var-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212; } @font-face { font-family: 'Plex'; src: url('../font/IBMPlexSans-var-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB; } /* ------------------------------------------------------------------ titoli Tutti e sei i livelli. All'inizio erano solo H1 e H2, per la regola generale che un carattere da display sui titoli piccoli si legge peggio. Contando come stanno le cose su questo sito la regola non si applica: H5 e H6 non compaiono da nessuna parte, e l'H3 non e' affatto un titoletto — e' il titolo delle card degli articoli, 317 volte sul solo archivio del blog, fra i 18 e i 28 px. Lasciarlo in Inter voleva dire un archivio intero di titoli in un carattere e l'intestazione della pagina, appena sopra, in un altro. Resta piccolo il solo H4, che sta nella colonna laterale: per quello si rinuncia alla stretta di spaziatura, vedi sotto. -------------------------------------------------------------------------- */ html body.aitertc-tipo-titoli h1, html body.aitertc-tipo-titoli h2 { font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif !important; } /* Da H3 in giu' solo con la scelta «Tutti i titoli». */ html body.aitertc-tipo-titoli-tutti h3, html body.aitertc-tipo-titoli-tutti h4, html body.aitertc-tipo-titoli-tutti h5, html body.aitertc-tipo-titoli-tutti h6 { font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif !important; } /* Space Grotesk ha l'occhio piu' grande e le lettere piu' larghe di Inter: alla stessa misura in px un titolo occupa piu' riga. Si stringe appena la spaziatura invece di rimpicciolire il corpo, cosi' le misure gia' impostate nel pannello di The7 restano quelle che sono. La stretta vale solo dove il titolo e' grande. Sotto i venti e rotti pixel una spaziatura negativa smette di far ordine e comincia a impastare le lettere: gli H4 di questo sito stanno nella colonna laterale e sono piccoli, quindi restano a spaziatura normale. */ html body.aitertc-tipo-titoli h1, html body.aitertc-tipo-titoli h2 { letter-spacing: -0.015em; } html body.aitertc-tipo-titoli-tutti h3 { letter-spacing: -0.008em; } /* Le variabili di The7 si allineano lo stesso: le usano alcune regole del tema padre che non passano da quella con !important. Tutti e sei i livelli stanno QUI e non nello strato «testo»: i titoli sono affare di questo interruttore, il testo di quell'altro. Tenerli divisi evita che i due blocchi si contendano le stesse variabili — hanno la stessa specificita', e vincerebbe semplicemente quello scritto piu' in basso. */ body.aitertc-tipo-titoli { --the7-h1-font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --the7-h2-font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; } body.aitertc-tipo-titoli-tutti { --the7-h3-font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --the7-h4-font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --the7-h5-font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --the7-h6-font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; } /* --------------------------------------------------------------- testo Qui basta ridichiarare --aitertc-font-family: da quella dipendono il corpo del testo, i widget, le card dei componenti e — non essendoci una variabile separata per i titoli — anche gli H3-H6, che e' quello che si vuole. Il menu segue: lasciarlo in Roboto mentre tutto il resto cambia sarebbe una dimenticanza, non una scelta. -------------------------------------------------------------------------- */ body.aitertc-tipo-testo { --aitertc-font-family: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; --aitertc-font-family-menu: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; --the7-base-font-family: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; /* Gli H3-H6 non stanno piu' qui: sono passati allo strato «titoli», che ora copre tutti e sei i livelli. Con l'interruttore dei titoli spento seguono comunque il corpo del testo, perche' la regola di style.css li manda su --aitertc-font-family, ridichiarata qui sopra. */ /* Il menu ha variabili sue, tutte di The7: --aitertc-font-family-menu qui sopra NON lo governa. Il testo delle voci sta in uno che legge --the7-menu-font-family, ed e' per questo che alla prima prova il menu era rimasto in Roboto mentre tutto il resto era gia' cambiato. Le voci «-caption-» restano fuori: quelle The7 le ha su Arial, che e' una scelta diversa e non il valore di serie che stiamo sostituendo. */ --the7-menu-font-family: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; --the7-mobile-menu-font-family: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; --the7-mega-menu-title-font-family: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; --the7-mega-menu-desc-font-family: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; --the7-additional-menu-elements-font-family: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; --the7-mobile-menu-microwidgets-font-family: 'Plex', -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Il banner dei cookie non segue: la sua CSS di marchio dichiara «font-family:Inter …!important» a mano. Non lo si insegue da qui — sarebbe un !important contro un altro !important su un elemento che appartiene a un plugin. Se un giorno il testo passa stabilmente a Plex, la cosa giusta e' correggere quella riga alla fonte perche' legga --aitertc-font-family. */ /* I widget AITERTC che dichiarano un carattere proprio restano come sono: il monospaziato dei solari, del tabellone e delle targhette degli allegati e' una scelta, non un residuo. */