/* ==========================================================================
IAB — foglio di base
--------------------------------------------------------------------------
Le regole di sistema, scritte una volta sola. I componenti non le
ripetono: quando un caso deve comportarsi diversamente si ESCLUDE dalla
regola generale (:not, selettore più preciso), non la si sovrascrive.
Le regole di base sono quelle CHIARE. Le fasce .is-navy sono l'eccezione
che le ribalta. Tutti i valori arrivano da theme.json (--wp--preset--*,
--wp--custom--*): qui non si scrivono colori né misure a mano.
Ordine: 1 globali · 2 fasce scure · 3 occhiello · 4 bottoni ·
5 titolo di sezione · 6 header · 7 footer ·
8 guscio delle pagine (fasce, testata, chiusura) ·
9 componenti (dalla 0.7.0; l'articolo dalla 0.8.0, l'archivio
dalla 0.9.0, la consulenza dalla 0.10.0, come lavoro dalla
0.11.0, contatti dalla 0.12.0, visione e chi sono dalla 0.16.0,
formazione dalla 0.17.0, eventi dalla 0.18.0) ·
10 movimento ridotto (sempre in fondo)
========================================================================== */
/* --------------------------------------------------------------------------
1. GLOBALI
-------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Titoli: "pretty" evita la parola sola sull'ultima riga senza accorciare
le righe. Mai "balance": manda a capo prima del bordo (misurato: la prima
riga passa dal 99% al 66% della colonna). */
h1, h2, h3 { text-wrap: pretty; }
/* Elenchi del contenuto. Il pallino è del colore del testo: su fondo chiaro
il giallo non si legge. Nelle fasce scure diventa giallo (sezione 2). */
.wp-block-list li + li { margin-top: var(--wp--preset--spacing--12); }
ol.wp-block-list > li::marker {
font-family: var(--wp--preset--font-family--space-grotesk);
font-weight: 700;
color: var(--wp--preset--color--contrast);
}
/* REGOLA UNICA DEI LINK DI TESTO: mai sottolineati a riposo, sottolineatura
di 2px a 0.4em al passaggio. I bottoni sono esclusi (.wp-element-button).
Il colore del link sta in theme.json. Le eccezioni che restano
sottolineate anche a riposo (corpo degli articoli, risposte delle domande
frequenti) si scrivono nei loro template escludendole da qui. */
a:where(:not(.wp-element-button)) {
text-decoration: none;
text-underline-offset: 0.4em;
}
a:where(:not(.wp-element-button)):hover {
text-decoration-line: underline;
text-decoration-thickness: 2px;
}
/* ANELLO DI FOCUS. Sul chiaro è navy pieno; nelle fasce scure è giallo
(sezione 2). Il contorno trasparente resta per la modalità ad alto
contrasto di Windows, che non mostra le ombre. */
:focus-visible {
outline: 2px solid transparent;
outline-offset: 0;
box-shadow: var(--wp--custom--focus-ring-on-base);
}
a:where(:not(.wp-element-button)):focus-visible { border-radius: var(--wp--custom--radius--3); }
/* --------------------------------------------------------------------------
2. FASCE SCURE — l'eccezione che ribalta le regole chiare
Il colore del testo sta sulla fascia, mai sul body.
-------------------------------------------------------------------------- */
.is-navy { background-color: var(--wp--preset--color--contrast); }
.is-navy--mid { background-color: var(--wp--custom--color--navy-800); }
.is-navy,
.is-navy--mid { color: var(--wp--custom--color--on-contrast-muted); }
.is-navy :is(h1, h2, h3, h4, h5, h6),
.is-navy--mid :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--base); }
.is-navy a:where(:not(.wp-element-button)),
.is-navy--mid a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--base); }
/* Testi che in theme.json hanno un colore proprio pensato per il bianco:
senza questa riga resterebbero grigi su navy, illeggibili. */
.is-navy :is(.wp-element-caption, .wp-block-post-date),
.is-navy--mid :is(.wp-element-caption, .wp-block-post-date) { color: var(--wp--custom--color--on-contrast-muted); }
.is-navy ul.wp-block-list > li::marker,
.is-navy--mid ul.wp-block-list > li::marker { color: var(--wp--preset--color--accent); }
.is-navy ol.wp-block-list > li::marker,
.is-navy--mid ol.wp-block-list > li::marker { color: var(--wp--preset--color--base); }
.is-navy :focus-visible,
.is-navy--mid :focus-visible { box-shadow: var(--wp--custom--focus-ring); }
/* Deroga: riga chiara sotto l'ultima fascia quando la precede un'altra
fascia dello stesso tono (per esempio prima del footer). Si aggiunge a
mano dove serve, non è una proprietà di nessun componente. */
.is-last { border-bottom: 1px solid var(--wp--custom--color--on-contrast-border); }
/* --------------------------------------------------------------------------
3. OCCHIELLO — etichetta breve sopra il titolo, trattino giallo
Stile di blocco "Occhiello" per paragrafo e titolo (functions.php).
-------------------------------------------------------------------------- */
.is-style-eyebrow {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--12);
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
}
.is-style-eyebrow::before {
content: "";
flex: none;
width: var(--wp--custom--dash--eyebrow-width);
height: var(--wp--custom--dash--eyebrow-height);
background: var(--wp--preset--color--accent);
}
.is-style-eyebrow.has-text-align-center { justify-content: center; }
.is-navy .is-style-eyebrow,
.is-navy--mid .is-style-eyebrow { color: var(--wp--preset--color--accent); }
/* --------------------------------------------------------------------------
4. BOTTONI — due varianti
Pieno giallo (lo stile predefinito del blocco: colori, bordo, raggio e
spaziature stanno in theme.json) e a contorno.
Al passaggio: sollevamento di 2px più cambio di fondo. Nessuna ombra.
-------------------------------------------------------------------------- */
/* box-sizing: senza, i bottoni che non stanno dentro un blocco Bottone
(Contatti nell'header, il bottone della ricerca) sommano padding e bordo
all'altezza minima e diventano alti 76px invece di 48. */
.wp-block-button__link,
.wp-element-button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
white-space: nowrap;
text-decoration: none;
transition:
background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}
.wp-block-button__link:hover,
.wp-element-button:hover { transform: translateY(-2px); }
/* A contorno. Il selettore ripete .wp-block-button perché lo stile di
WordPress per questa variante ha la stessa forza e verrebbe prima. */
.wp-block-button.is-style-outline > .wp-block-button__link {
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
border: 2px solid var(--wp--preset--color--contrast);
background-color: transparent;
color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.is-navy .wp-block-button.is-style-outline > .wp-block-button__link,
.is-navy--mid .wp-block-button.is-style-outline > .wp-block-button__link {
border-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--base);
}
.is-navy .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.is-navy--mid .wp-block-button.is-style-outline > .wp-block-button__link:hover {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
}
/* --------------------------------------------------------------------------
5. TITOLO DI SEZIONE — un corpo solo, ovunque
Qualunque h2 preceduto dall'occhiello, e il titolo della chiusura.
Non riguarda il nome della pagina nelle testate: quello è l'h1.
-------------------------------------------------------------------------- */
/* Esclusa la striscia accanto al modulo di /contatti/ (.iab-aside): lì il
titolo è un titoletto, non il titolo della sezione (dalla 0.12.0). */
.is-style-eyebrow + h2:where(:not(.iab-aside > *)),
.iab-cta h2 {
margin-block-start: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--h-1);
letter-spacing: var(--wp--custom--letter-spacing--display);
}
/* --------------------------------------------------------------------------
6. HEADER — marchio, menu a sette voci, bottone Contatti
Markup in patterns/header.php. Porta la classe .is-navy, quindi testi,
link e anello di focus giallo arrivano dalla sezione 2 senza ripeterli.
-------------------------------------------------------------------------- */
/* Niente scroll-padding-top sull'html: provato il 24/09, faceva saltare la
pagina di 450px quando si arriva all'intestazione con il tasto Tab. Le
ancore non ne hanno bisogno: scendendo verso un'ancora l'intestazione si
nasconde da sola. */
/* La striscia attaccata in cima è il contenitore di WordPress attorno
all'header. Resta attaccata anche senza JavaScript. */
.wp-block-template-part:has(> .iab-header) {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 50;
}
/* Nessuna striscia bianca fra l'header e la prima fascia: WordPress mette
24px (lo spazio fra blocchi) fra le parti della pagina. Vale per tutti i
template, come la regola gemella del footer (sezione 7). */
.wp-block-template-part:has(> .iab-header) + * { margin-block-start: 0; }
/* Dietro l'intestazione, navy. Quando rientra dall'alto, il posto che
occupa in cima alla pagina resta scoperto per un istante: risalendo in
fretta Chrome arriva in cima prima che lo script la rimetta a posto, e
si vedeva una striscia bianca (trovato da Ivo, 0.6.0 e 0.6.1). Un fondo
navy grande quanto l'intestazione, fermo in cima alla pagina, fa sì che
lo scoperto sia dello stesso colore. Non dipende dalla velocità. */
.wp-site-blocks {
background-image: linear-gradient(var(--wp--preset--color--contrast), var(--wp--preset--color--contrast));
background-repeat: no-repeat;
background-size: 100% var(--wp--custom--header--height);
}
/* Sotto i 600px la barra dell'amministratore non segue lo scorrimento */
@media (max-width: 600px) {
.admin-bar .wp-block-template-part:has(> .iab-header) { top: 0; }
}
/* Scompare scendendo, ricompare risalendo (assets/js/header.js).
Da visibile NON ha trasformazioni: una trasformazione farebbe da cornice
al menu a tutto schermo, che resterebbe chiuso dentro l'intestazione. */
.iab-sticky {
transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
.iab-sticky.is-hidden { transform: translateY(-100%); }
.iab-sticky.is-instant { transition: none; }
.iab-header {
--iab-logo-mark: var(--wp--preset--color--accent);
--iab-logo-accent: var(--wp--preset--color--base);
padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
line-height: var(--wp--custom--line-height--ui);
}
.iab-header__inner {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--24);
max-width: var(--wp--style--global--wide-size);
height: var(--wp--custom--header--height);
margin-inline: auto;
}
.iab-header__mark { margin-right: auto; line-height: 0; }
.iab-mark { display: block; width: auto; height: var(--wp--custom--header--mark); }
.iab-nav__list {
display: flex;
gap: var(--wp--preset--spacing--24);
margin: 0;
padding: 0;
list-style: none;
}
.iab-nav__list a {
display: block;
padding-block: var(--wp--preset--spacing--8);
white-space: nowrap;
}
/* VOCE CORRENTE — sottolineatura gialla di 3px a 0.4em. Vale per la pagina
esatta (aria-current="page") e per la sezione (aria-current="true"). */
.iab-nav__list a[aria-current] {
text-decoration-line: underline;
text-decoration-color: var(--wp--preset--color--accent);
text-decoration-thickness: 3px;
}
/* Il bottone Contatti è pieno: sulla sua pagina prende un anello chiaro */
.iab-header__cta[aria-current] { box-shadow: var(--wp--custom--ring-current); }
/* I due bottoni del menu a scomparsa: nascosti finché lo schermo è largo */
.iab-nav__toggle {
display: none;
align-items: center;
min-height: var(--wp--custom--icon-button);
padding: 0 var(--wp--preset--spacing--16);
border: 1px solid var(--wp--custom--color--on-contrast-muted);
border-radius: var(--wp--custom--radius--pill);
background: transparent;
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 600;
line-height: 1;
cursor: pointer;
}
/* MENU A SCOMPARSA sotto i 945px: sette voci più il bottone non stanno in
una riga. Solo con JavaScript: senza, le voci restano in vista. */
@media (max-width: 944.98px) {
.iab-header.has-js .iab-nav__toggle { display: inline-flex; }
.iab-header.has-js .iab-nav__panel { display: none; }
.iab-header.has-js .iab-nav__panel.is-open {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--32);
position: fixed;
inset: 0;
z-index: 100;
overflow-y: auto;
padding: var(--wp--preset--spacing--24);
background-color: var(--wp--preset--color--contrast);
}
.iab-nav__close { align-self: flex-end; }
.iab-nav__panel.is-open .iab-nav__list {
flex-direction: column;
gap: var(--wp--preset--spacing--4);
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--h-1);
font-weight: 600;
}
/* senza JavaScript le voci vanno a capo invece di uscire dallo schermo */
.iab-header:not(.has-js) .iab-header__inner { flex-wrap: wrap; height: auto; padding-block: var(--wp--preset--spacing--16); }
.iab-header:not(.has-js) .iab-nav__list { flex-wrap: wrap; column-gap: var(--wp--preset--spacing--16); }
}
@media (max-width: 781.98px) {
.iab-header__cta.wp-element-button {
min-height: var(--wp--custom--icon-button);
padding-inline: var(--wp--preset--spacing--16);
}
}
/* Con il menu aperto la pagina sotto non scorre */
.iab-menu-open { overflow: hidden; }
/* --------------------------------------------------------------------------
7. FOOTER — quattro colonne e riga legale
Markup in patterns/footer.php. Anche lui porta .is-navy.
Colonne 1.6 / 1 / 1 / 1 sopra i 1024px, Contatti allineata a destra.
-------------------------------------------------------------------------- */
/* Nessuna striscia bianca fra l'ultima sezione e il footer */
.wp-block-template-part:has(> .iab-footer) { margin-block-start: 0; }
.iab-footer {
--iab-logo-mark: var(--wp--preset--color--accent);
--iab-logo-accent: var(--wp--preset--color--base);
padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
}
.iab-footer__grid,
.iab-footer__legal {
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
}
.iab-footer__grid {
display: grid;
gap: var(--wp--preset--spacing--48);
padding-block: var(--wp--preset--spacing--64);
}
@media (min-width: 600px) {
.iab-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.iab-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.iab-footer__contact { justify-self: end; text-align: right; }
}
.iab-footer ul { margin: 0; padding: 0; list-style: none; }
.iab-footer__col ul { display: grid; gap: var(--wp--preset--spacing--8); }
/* Titoli delle colonne: maiuscolo piccolo giallo, senza trattino (il
trattino è dell'occhiello, che apre una sezione). */
.iab-footer h2 {
margin: 0 0 var(--wp--preset--spacing--16);
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
/* Il lockup: marchio più CONSULTING, un SVG solo (assets/images/iab-lockup.svg) */
.iab-lockup { display: inline-block; line-height: 0; }
.iab-lockup__svg { display: block; width: auto; height: var(--wp--custom--logo--footer); }
.iab-footer__brand p {
max-width: var(--wp--custom--measure--brand);
margin: var(--wp--preset--spacing--16) 0 0;
}
/* Profili social: superficie cliccabile, quindi al passaggio si solleva e
il contorno si rinforza. Mai fondo giallo (decisioni.md, sezione 9). */
/* .iab-footer ripetuto: la regola degli elenchi del footer (margin: 0) è
più forte e toglierebbe lo stacco dalla descrizione */
.iab-footer .iab-footer__social {
display: flex;
gap: var(--wp--preset--spacing--12);
margin-top: var(--wp--preset--spacing--24);
}
.iab-footer__social a {
display: grid;
place-items: center;
width: var(--wp--custom--icon-button);
height: var(--wp--custom--icon-button);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--pill);
transition:
border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}
.iab-footer__social a:hover {
border-color: var(--wp--preset--color--base);
transform: translateY(-2px);
}
.iab-footer__social svg { width: var(--wp--preset--font-size--body-lg); height: var(--wp--preset--font-size--body-lg); }
.iab-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
padding-block: var(--wp--preset--spacing--24);
border-top: 1px solid var(--wp--custom--color--on-contrast-border);
font-size: var(--wp--preset--font-size--caption);
}
/* "Cookie" nella riga legale (dalla 0.30.0): è un bottone, perché riapre
le scelte sui cookie invece di portare a una pagina, ma si presenta come
gli altri link della riga. */
.iab-footer__cookie {
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--wp--preset--color--base);
font: inherit;
text-underline-offset: 0.4em;
cursor: pointer;
}
.iab-footer__cookie:hover {
text-decoration-line: underline;
text-decoration-thickness: 2px;
}
.iab-footer__cookie[hidden] { display: none; }
/* --------------------------------------------------------------------------
8. GUSCIO DELLE PAGINE — fasce, testata, chiusura
templates/page.html: header, contenuto della pagina, footer. Tutto il
resto si compone nell'editor con i blocchi pronti della categoria "IAB"
(patterns/). Regole scritte sulla struttura, non su classi da ricordare:
una FASCIA è un blocco Gruppo a tutta larghezza messo direttamente nel
contenuto della pagina. Stessi selettori nell'editor (.is-root-container),
così si scrive vedendo la pagina vera. Le stesse regole valgono per le
fasce scritte nel template dell'articolo (.iab-single, dalla 0.8.0), in
quelli dell'archivio (.iab-listing, dalla 0.9.0) e in quello della
pagina non trovata (.iab-service, dalla 0.24.0).
-------------------------------------------------------------------------- */
/* Le fasce respirano 64px sopra e sotto, e il loro contenuto arriva alla
larghezza piena del sito (1200px) invece che ai 42rem del contenitore:
i testi brevi sotto i titoli vanno sempre a tutta pagina. */
:where(.wp-block-post-content, .is-root-container, .iab-single, .iab-listing, .iab-service) > :where(.wp-block-group.alignfull) {
--wp--style--global--content-size: var(--wp--style--global--wide-size);
padding-block: var(--wp--preset--spacing--64);
}
/* Fra una fascia e l'altra lo spazio è 0: il cambio di tono è il confine.
Lo spazio fra blocchi (24px) resta DENTRO le fasce. */
.wp-block-post-content > .alignfull,
.is-root-container > .alignfull,
.iab-single > .alignfull,
.iab-listing > .alignfull,
.iab-service > .alignfull { margin-block: 0; }
/* TESTATA delle pagine di secondo livello — una regola per tutte.
Un h1 solo su due righe: la prima (in grassetto nell'editor) è il nome
della pagina, maiuscolo giallo col trattino; la seconda è la riga
descrittiva in bianco attenuato, che porta le parole che si cercano.
Sotto, il sommario: un paragrafo solo, a tutta pagina. */
.iab-page-head h1 {
font-size: var(--wp--preset--font-size--h-2);
color: var(--wp--custom--color--on-contrast-muted);
}
.iab-page-head h1 strong {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--24);
margin-block-end: var(--wp--preset--spacing--12);
font-size: var(--wp--preset--font-size--page-title);
font-weight: 700;
line-height: var(--wp--custom--line-height--display);
letter-spacing: var(--wp--custom--letter-spacing--caps);
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
.iab-page-head h1 strong::before {
content: "";
flex: none;
width: var(--wp--custom--dash--title-width);
height: var(--wp--custom--dash--title-height);
background: var(--wp--preset--color--accent);
}
@media (max-width: 599.98px) {
.iab-page-head h1 strong::before { width: var(--wp--custom--dash--title-width-small); }
}
.iab-page-head h1 + p {
margin-block-start: var(--wp--preset--spacing--32);
font-size: var(--wp--preset--font-size--lead);
line-height: var(--wp--custom--line-height--lead);
color: var(--wp--preset--color--base);
text-wrap: pretty;
}
/* CHIUSURA della pagina — centrata, più stretta (44rem). Il titolo ha già
la sua regola (sezione 5). Su desktop i bottoni si rovesciano, così il
giallo resta a destra come nelle altre chiusure. Solo se il giallo c'è:
la chiusura di /contatti/ ha due bottoni a contorno, e si leggono
nell'ordine in cui sono scritti (dalla 0.12.0). */
.iab-cta {
--wp--style--global--content-size: var(--wp--custom--measure--cta);
text-align: center;
}
.iab-cta .is-style-eyebrow { justify-content: center; }
.iab-cta h2 + p {
margin-block-start: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--body-lg);
}
.iab-cta .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--32); }
@media (min-width: 782px) {
.iab-cta .wp-block-buttons:has(> .wp-block-button:not(.is-style-outline)) { flex-direction: row-reverse; }
}
/* --------------------------------------------------------------------------
9. COMPONENTI — dalla 0.7.0, nati con la home
Ogni componente è un blocco normale di WordPress (Gruppo, Colonne,
Elenco, Citazione, Immagine) con una classe: la struttura si compone
nell'editor, il disegno sta qui. I blocchi pronti sono in patterns/.
Nomi da fondamenta-css.md, sezioni 3 e 4.
-------------------------------------------------------------------------- */
/* INTRODUZIONE DI SEZIONE — il paragrafo sotto il titolo, a tutta pagina */
.iab-lead-in {
font-size: var(--wp--preset--font-size--lead);
line-height: var(--wp--custom--line-height--lead);
text-wrap: pretty;
}
.is-navy .iab-lead-in,
.is-navy--mid .iab-lead-in { color: var(--wp--preset--color--base); }
/* Dopo il titolo di sezione il testo sta a 16px, i bottoni a 32. Solo
dentro i componenti della home: il corpo degli articoli ha le sue. */
:is(.iab-centered, .iab-media, .iab-about, .iab-tile-group) h2 + *,
.is-style-eyebrow + h2 + .iab-lead-in { margin-block-start: var(--wp--preset--spacing--16); }
:is(.iab-centered, .iab-media, .iab-about) * + .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--32); }
/* FASCIA CENTRATA — i testi a 44rem come la chiusura, le griglie e i
caroselli a tutta larghezza (sono "larghi" nell'editor). Centrato su
1200px il testo farebbe righe da 140 caratteri. */
.iab-centered {
--wp--style--global--content-size: var(--wp--custom--measure--cta);
text-align: center;
}
.iab-centered .is-style-eyebrow { justify-content: center; }
/* HERO — blocco Copertina con video, velo navy, testo sopra.
Porta anche .is-navy: testi, bottoni e anello di focus arrivano da lì. */
.wp-block-cover.iab-hero {
min-height: calc(100svh - var(--wp--custom--header--height) - var(--wp-admin--admin-bar--height, 0px));
padding: var(--wp--preset--spacing--96) var(--wp--style--root--padding-right) var(--wp--preset--spacing--96) var(--wp--style--root--padding-left);
--wp--style--global--content-size: var(--wp--custom--measure--hero);
text-align: center;
}
/* Il velo: senza, il testo bianco sul video non si legge */
.wp-block-cover.iab-hero.alignfull > .wp-block-cover__background.has-background-dim {
opacity: 1;
background-color: transparent;
background-image: var(--wp--custom--hero--veil);
}
.iab-hero .wp-block-cover__video-background { object-position: 50% 42%; }
.iab-hero__slogan {
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--display-m);
font-weight: 700;
line-height: var(--wp--custom--line-height--heading);
letter-spacing: var(--wp--custom--letter-spacing--caps);
text-transform: uppercase;
text-wrap: pretty;
/* Giallo: eccezione dichiarata alla regola del testo giallo (04j),
scelta di Ivo; sopra il velo navy il contrasto è alto. */
color: var(--wp--preset--color--accent);
}
.iab-hero h1 {
margin-block-start: var(--wp--preset--spacing--8);
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--h-2);
font-weight: 400;
line-height: var(--wp--custom--line-height--ui);
}
.iab-hero__foot { margin-block-start: var(--wp--preset--spacing--64); }
.iab-hero__foot .wp-block-buttons { margin-block-end: var(--wp--preset--spacing--24); }
.iab-hero__areas {
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
}
/* I puntini fra le aree (04g): lo span lo mette functions.php. */
.iab-hero__sep { margin-inline: var(--wp--preset--spacing--12); }
@media (max-width: 599.98px) {
.iab-hero__areas { display: none; }
}
/* Da 782px: la hero lascia vedere una striscia della fascia loghi, il
titolo sta al centro e bottone e aree scendono in fondo. */
@media (min-width: 782px) {
.wp-block-cover.iab-hero {
min-height: calc(100svh - var(--wp--custom--header--height) - var(--wp--custom--hero--peek) - var(--wp-admin--admin-bar--height, 0px));
padding-block: var(--wp--preset--spacing--24);
}
.iab-hero > .wp-block-cover__inner-container {
align-self: stretch;
display: grid;
grid-template-rows: 1fr auto auto 1fr;
}
.iab-hero__slogan { grid-row: 2; }
.iab-hero h1 { grid-row: 3; }
.iab-hero__foot { grid-row: 4; align-self: end; margin-block-start: var(--wp--preset--spacing--48); }
}
/* FASCIA LOGHI — .iab-marquee. Senza script (e nell'editor) i loghi
stanno fermi su più righe; assets/js/componenti.js li mette in fila,
duplica la fila e la fa scorrere (.is-running). */
.iab-marquee {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--wp--preset--spacing--32) var(--wp--preset--spacing--64);
padding: var(--wp--preset--spacing--32) var(--wp--style--root--padding-right) var(--wp--preset--spacing--32) var(--wp--style--root--padding-left);
overflow: hidden;
}
.iab-marquee .wp-block-image { flex: none; margin: 0; }
/* Loghi tutti dello stesso grigio chiaro, qualunque sia il colore del file */
.iab-marquee img {
display: block;
width: auto;
height: var(--wp--custom--marquee--logo-height);
filter: brightness(0) invert(1);
opacity: var(--wp--custom--marquee--logo-opacity);
}
/* Con lo script: la fila che scorre e, all'estremità destra, il bottone di
pausa (dalla 0.30.0, 05e). */
.iab-marquee.is-running {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--16);
padding-inline: 0 var(--wp--style--root--padding-right);
}
.iab-marquee.is-running > .iab-marquee__viewport { flex: 1; min-width: 0; }
.iab-marquee.is-stopped .iab-marquee__track { animation-play-state: paused; }
.iab-marquee__viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.iab-marquee__track {
display: flex;
width: max-content;
animation: iab-marquee var(--wp--custom--marquee--duration) linear infinite;
}
.iab-marquee.is-paused .iab-marquee__track,
.iab-marquee:focus-within .iab-marquee__track { animation-play-state: paused; }
.iab-marquee__list {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--64);
padding-inline-end: var(--wp--preset--spacing--64);
}
@keyframes iab-marquee { to { transform: translateX(-50%); } }
/* IMMAGINE E TESTO — .iab-media (home, "La mia visione"). Blocco Colonne:
sotto i 782px l'immagine va sopra. */
.wp-block-columns.iab-media { gap: var(--wp--preset--spacing--48); }
@media (min-width: 782px) {
.wp-block-columns.iab-media { gap: var(--wp--preset--spacing--64); }
}
.iab-media p:not(.is-style-eyebrow) { font-size: var(--wp--preset--font-size--body-lg); }
:is(.iab-media, .iab-about, .iab-event-strip) .wp-block-image { margin: 0; }
:is(.iab-media, .iab-about, .iab-event-strip) .wp-block-image img {
width: 100%;
border-radius: var(--wp--custom--radius--6);
}
/* RIQUADRI DELLE AREE — .iab-tile-group / .iab-tiles. Le voci sono un
Elenco con un link ciascuna: tutto il riquadro è il link. */
.iab-tile-group { margin-block-start: var(--wp--preset--spacing--48); }
.iab-tile-group + .iab-tile-group { margin-block-start: var(--wp--preset--spacing--32); }
.iab-tile-group__label {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 600;
}
.iab-tile-group__label::after {
content: "";
flex: 1;
height: 1px;
background: var(--wp--custom--color--on-contrast-border);
}
.iab-tile-group .iab-tile-group__label + .iab-tiles { margin-block-start: var(--wp--preset--spacing--16); }
.iab-tiles {
display: grid;
gap: var(--wp--preset--spacing--16);
padding: 0;
list-style: none;
}
@media (min-width: 600px) {
.iab-tiles { grid-template-columns: repeat(3, 1fr); }
}
.wp-block-list.iab-tiles > li { margin: 0; }
.iab-tiles a {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--16);
height: 100%;
box-sizing: border-box;
padding: var(--wp--preset--spacing--24);
border: 1px solid transparent;
border-radius: var(--wp--custom--radius--10);
background: var(--wp--custom--color--navy-700);
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--h-3);
font-weight: 600;
line-height: var(--wp--custom--line-height--heading);
transition:
border-color var(--wp--custom--duration--base) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
/* pallino, non trattino: le aree sono un elenco */
.iab-tiles a::before {
content: "";
flex: none;
width: var(--wp--custom--dot);
height: var(--wp--custom--dot);
border-radius: 50%;
background: var(--wp--preset--color--accent);
}
/* superficie cliccabile: si solleva e il contorno diventa giallo, mai il
fondo (regola di sistema 3) */
.iab-tiles a:hover {
text-decoration-line: none;
transform: translateY(-2px);
border-color: var(--wp--preset--color--accent);
}
/* RIQUADRI CON TRATTINO — .iab-boxes / .iab-box. Non cliccabili: non si
muovono. In home "A chi mi rivolgo". (In /formazione/ gli ambiti non
li usano: sono righe .iab-do, deciso nella 03k.) */
.iab-boxes {
display: grid;
gap: var(--wp--preset--spacing--24);
text-align: start;
}
.iab-centered .iab-boxes,
.iab-lead-in + .iab-boxes { margin-block-start: var(--wp--preset--spacing--48); }
@media (min-width: 782px) {
.iab-boxes { grid-template-columns: repeat(3, 1fr); }
}
.iab-boxes > .iab-box {
margin: 0;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
background: var(--wp--custom--color--box-bg);
}
.iab-box::before {
content: "";
display: block;
width: var(--wp--custom--dash--box-width);
height: var(--wp--custom--dash--box-height);
background: var(--wp--preset--color--accent);
}
.iab-boxes .iab-box > h3 { margin-block-start: var(--wp--preset--spacing--24); }
.iab-box > h3 + p { margin-block-start: var(--wp--preset--spacing--12); }
/* CAROSELLO A FUOCO — .iab-focus, usato da .iab-requests (casi) e
.iab-quotes (testimonianze). Senza script è una fila che scorre a mano.
Con lo script (.is-ready): scheda centrale nitida, laterali sfocate e
rimpicciolite, cliccabili; trattini di posizione sotto. */
.iab-requests { --iab-card: var(--wp--custom--focus--card); }
.iab-quotes { --iab-card: var(--wp--custom--focus--quote); }
@media (min-width: 782px) {
.iab-requests { --iab-card: var(--wp--custom--focus--card-wide); }
.iab-quotes { --iab-card: var(--wp--custom--focus--quote-wide); }
}
.iab-centered .iab-focus,
.iab-lead-in + .iab-focus { margin-block-start: var(--wp--preset--spacing--48); }
.iab-focus {
position: relative;
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--iab-card);
gap: var(--wp--preset--spacing--24);
padding: var(--wp--preset--spacing--8) calc((100% - var(--iab-card)) / 2);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.iab-focus::-webkit-scrollbar { display: none; }
.iab-focus > * {
margin: 0;
scroll-snap-align: center;
}
.iab-focus.is-ready > * {
opacity: var(--wp--custom--focus--dim);
filter: blur(var(--wp--custom--focus--blur));
transform: scale(var(--wp--custom--focus--scale));
cursor: pointer;
transition:
opacity var(--wp--custom--duration--base) var(--wp--custom--easing--out),
filter var(--wp--custom--duration--base) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--base) var(--wp--custom--easing--out),
border-color var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
.iab-focus.is-ready > .is-active {
opacity: 1;
filter: none;
transform: none;
cursor: auto;
}
/* I trattini di posizione (li crea lo script) */
.iab-dots {
display: flex;
justify-content: center;
gap: var(--wp--preset--spacing--8);
margin-block-start: var(--wp--preset--spacing--32);
}
.iab-dots button {
width: var(--wp--custom--focus--dot-width);
height: var(--wp--preset--spacing--24);
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.iab-dots button::after {
content: "";
display: block;
height: var(--wp--custom--focus--dot-height);
background: var(--wp--custom--color--on-contrast-border);
transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}
.iab-dots button[aria-current="true"]::after { background: var(--wp--preset--color--accent); }
.iab-focus ~ .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--48); }
/* La scheda del caso. Numero progressivo e "Leggi il caso" li mette il
tema (contatore CSS e functions.php): nell'editor si scrive solo il
titolo, con il link. Il link copre tutta la scheda. */
.iab-requests { counter-reset: iab-request; }
.iab-request {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--wp--preset--spacing--32);
min-height: var(--wp--custom--focus--request-height);
box-sizing: border-box;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
counter-increment: iab-request;
}
.iab-request::before {
content: counter(iab-request, decimal-leading-zero);
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 700;
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
color: var(--wp--preset--color--accent);
}
.iab-request > * { margin: 0; }
.iab-request h3 a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--wp--custom--radius--10);
}
.iab-request h3 a:hover { text-decoration-line: none; }
.iab-request h3 a:focus-visible { box-shadow: none; }
.iab-request:has(a:focus-visible) { box-shadow: var(--wp--custom--focus-ring); }
.iab-request__cta {
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 600;
color: var(--wp--preset--color--base);
}
/* superficie cliccabile: la scheda a fuoco si solleva e il contorno si
rinforza */
.iab-focus:not(.is-ready) > .iab-request:hover,
.iab-focus > .iab-request.is-active:hover {
transform: translateY(-2px);
border-color: var(--wp--custom--color--on-contrast-muted);
}
.iab-request:hover .iab-request__cta { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
/* La testimonianza: un blocco Citazione */
.wp-block-quote.iab-quote {
box-sizing: border-box;
height: 100%;
margin: 0;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
font-size: var(--wp--preset--font-size--body);
font-weight: 400;
}
.wp-block-quote.iab-quote p {
font-size: var(--wp--preset--font-size--h-3);
line-height: var(--wp--custom--line-height--ui);
color: var(--wp--preset--color--base);
text-wrap: pretty;
}
.wp-block-quote.iab-quote cite {
display: block;
margin-block-start: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--body-sm);
font-style: normal;
font-weight: 400;
}
/* CHI SONO CON IL RITRATTO — .iab-about (Colonne: testo 6, ritratto 5 a
destra). I dati d'esperienza (.iab-stats) tolti nella 04g. */
.wp-block-columns.iab-about { gap: var(--wp--preset--spacing--48); }
@media (min-width: 782px) {
.wp-block-columns.iab-about { gap: var(--wp--preset--spacing--64); }
.iab-about > .wp-block-column { flex-grow: 6; }
.iab-about > .iab-about__portrait { flex-grow: 5; order: 2; }
}
/* width: 100% insieme al margine automatico, o il riquadro si stringe al
contenuto (regola di sistema) */
.iab-about__portrait .wp-block-image {
width: 100%;
max-width: var(--wp--custom--measure--portrait);
margin-inline-start: auto;
}
.iab-about h2 + .iab-about__role { margin-block-start: var(--wp--preset--spacing--8); }
.iab-about__role {
font-size: var(--wp--preset--font-size--body-lg);
font-weight: 600;
}
/* PROSSIMO EVENTO — .iab-event-strip. Una riga sola dentro una fascia
navy. Senza copertina, le colonne diventano due. */
.iab-event-strip {
display: grid;
gap: var(--wp--preset--spacing--16);
padding: var(--wp--preset--spacing--24);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
background: var(--wp--custom--color--navy-700);
text-align: start;
}
.iab-focus ~ .iab-event-strip { margin-block-start: var(--wp--preset--spacing--64); }
.iab-event-strip > * { margin: 0; }
/* Il bottone resta al centro della riga anche dentro una fascia centrata:
la regola dello stacco sopra i bottoni (.iab-centered * + .wp-block-buttons)
lo spingeva in basso di 32px (04j). */
.iab-event-strip > .wp-block-buttons { margin-block-start: 0; }
@media (min-width: 782px) {
.iab-event-strip {
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--wp--preset--spacing--32);
}
.iab-event-strip:has(> .wp-block-image) { grid-template-columns: var(--wp--custom--event--strip-media) 1fr auto; }
}
.iab-event-strip__body > * { margin: 0; }
.iab-event-strip__label {
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
.iab-event-strip__body .iab-event-strip__title {
margin-block-start: var(--wp--preset--spacing--8);
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--h-3);
font-weight: 600;
line-height: var(--wp--custom--line-height--heading);
color: var(--wp--preset--color--base);
}
.iab-event-strip__body .iab-event-strip__meta {
margin-block-start: var(--wp--preset--spacing--4);
font-size: var(--wp--preset--font-size--body-sm);
}
/* COLLEGAMENTO ESTERNO — la freccetta che functions.php aggiunge ai
bottoni che portano fuori dal sito */
.iab-external { margin-inline-start: var(--wp--preset--spacing--8); }
/* ==========================================================================
ARTICOLO — dalla 0.8.0, templates/single.html
Unico template su fondo chiaro: le regole di base sono già quelle chiare.
Colonna di lettura (38rem) e colonna di servizio (17rem) sopra i 1024px;
sotto, la colonna di servizio scende dopo la firma.
Poi la fascia "Altri casi" (fondo subtle) e la fascia finale (.iab-cta).
========================================================================== */
.iab-single > .iab-article {
padding: var(--wp--preset--spacing--48) var(--wp--style--root--padding-right) var(--wp--preset--spacing--96) var(--wp--style--root--padding-left);
}
.iab-article__grid { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.iab-article__grid > * { margin-block: 0; }
.iab-article__main,
.iab-article__side { max-width: var(--wp--custom--measure--article); margin-inline: auto; }
.iab-article__grid > .iab-article__side { margin-block-start: var(--wp--preset--spacing--48); }
@media (min-width: 1024px) {
.iab-article__grid {
display: grid;
grid-template-columns: minmax(0, var(--wp--custom--measure--article)) var(--wp--custom--measure--side);
column-gap: var(--wp--preset--spacing--64);
justify-content: center;
align-items: start;
}
.iab-article__main,
.iab-article__side { max-width: none; margin-inline: 0; }
/* La colonna di servizio resta ferma mentre si legge. Quando
l'intestazione ricompare (si risale), scende di quanto serve per non
finirci sotto. */
.iab-article__grid > .iab-article__side {
position: sticky;
top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--32));
transition: top var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
body:has(.iab-sticky:not(.is-hidden)) .iab-article__grid > .iab-article__side {
top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--header--height) + var(--wp--preset--spacing--32));
}
}
/* Briciole di pane: Casi / Area */
.iab-breadcrumb {
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
color: var(--wp--preset--color--muted);
}
.iab-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); margin: 0; padding: 0; list-style: none; }
.iab-breadcrumb li { margin: 0; }
.iab-breadcrumb li:not(:last-child)::after {
content: var(--separator, "/");
margin-inline-start: var(--wp--preset--spacing--8);
color: var(--wp--custom--color--border);
}
.iab-breadcrumb a:where(:not(.wp-element-button)) { color: inherit; }
/* Testata: area, titolo, sommario (il campo Riassunto) */
.iab-article__main > .iab-article__head { margin-block-start: var(--wp--preset--spacing--32); }
.iab-article__head > * { margin-block: 0; }
.is-style-eyebrow a:where(:not(.wp-element-button)) { color: inherit; }
.iab-article__head > .iab-article__title {
margin-block-start: var(--wp--preset--spacing--16);
/* page-title e non display-m (mockup): su telefono display-m scende a
24px, sotto i titoli di sezione del testo (28px). Da 1200px in su
sono uguali, 36px. */
font-size: var(--wp--preset--font-size--page-title);
font-weight: 700;
letter-spacing: var(--wp--custom--letter-spacing--display);
}
.iab-article__head > .iab-article__standfirst {
margin-block-start: var(--wp--preset--spacing--24);
font-size: var(--wp--preset--font-size--h-3);
line-height: var(--wp--custom--line-height--lead);
text-wrap: pretty;
}
.iab-article__standfirst p { margin: 0; }
/* Immagine di apertura: l'immagine in evidenza, larga quanto il testo */
.iab-article__main > .iab-article__figure { margin-block-start: var(--wp--preset--spacing--48); }
.iab-article__figure img { border-radius: var(--wp--custom--radius--6); }
/* CORPO — .iab-prose, cioè il testo scritto nell'editor. Le stesse regole
valgono dentro l'editor degli articoli (.post-type-post .is-root-container),
così si scrive vedendo l'articolo vero. */
.iab-article__main > .iab-prose {
margin-block-start: var(--wp--preset--spacing--48);
font-size: var(--wp--preset--font-size--body-xl);
text-wrap: pretty;
}
.post-type-post .is-root-container {
--wp--style--global--content-size: var(--wp--custom--measure--article);
font-size: var(--wp--preset--font-size--body-xl);
text-wrap: pretty;
}
:is(.iab-prose, .post-type-post .is-root-container) > h2 { margin-block-start: var(--wp--preset--spacing--64); }
:is(.iab-prose, .post-type-post .is-root-container) > h3 { margin-block-start: var(--wp--preset--spacing--48); }
:is(.iab-prose, .post-type-post .is-root-container) > :is(h2, h3) + * { margin-block-start: var(--wp--preset--spacing--16); }
:is(.iab-prose, .post-type-post .is-root-container) strong { font-weight: 600; color: var(--wp--preset--color--contrast); }
/* Eccezione alla regola dei link (sezione 1): in un testo lungo i link
restano sottolineati anche a riposo, 1px; al passaggio 2px. */
:is(.iab-prose, .post-type-post .is-root-container) a:where(:not(.wp-element-button)) {
text-decoration-line: underline;
text-decoration-thickness: 1px;
}
:is(.iab-prose, .post-type-post .is-root-container) a:where(:not(.wp-element-button)):hover { text-decoration-thickness: 2px; }
/* "In breve" — la risposta completa, subito. Esce dal ritmo del corpo:
fondo appena grigio e filetto giallo. */
.iab-summary {
padding: var(--wp--preset--spacing--32);
border-inline-start: var(--wp--custom--dash--box-height) solid var(--wp--preset--color--accent);
border-radius: 0 var(--wp--custom--radius--10) var(--wp--custom--radius--10) 0;
background-color: var(--wp--preset--color--subtle);
}
@media (max-width: 599.98px) {
.iab-summary { padding: var(--wp--preset--spacing--24); }
}
.iab-summary > * { margin-block: 0; }
.iab-summary > h2 {
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
text-transform: uppercase;
}
.iab-summary > h2 + * { margin-block-start: var(--wp--preset--spacing--12); }
.iab-summary > p + p { margin-block-start: var(--wp--preset--spacing--16); }
/* La citazione del cliente: parole sue, firmata con ruolo e settore */
:is(.iab-prose, .post-type-post .is-root-container) > .wp-block-quote {
margin-block-start: var(--wp--preset--spacing--48);
margin-inline: 0;
padding: 0 0 0 var(--wp--preset--spacing--32);
border: 0;
border-inline-start: var(--wp--custom--dash--eyebrow-height) solid var(--wp--custom--color--border);
font-size: inherit;
font-style: normal;
font-weight: 400;
}
:is(.iab-prose, .post-type-post .is-root-container) > .wp-block-quote + * { margin-block-start: var(--wp--preset--spacing--48); }
:is(.iab-prose, .post-type-post .is-root-container) > .wp-block-quote p {
margin: 0;
font-size: var(--wp--preset--font-size--h-3);
line-height: var(--wp--custom--line-height--ui);
color: var(--wp--preset--color--contrast);
}
:is(.iab-prose, .post-type-post .is-root-container) > .wp-block-quote cite {
display: block;
margin-block-start: var(--wp--preset--spacing--12);
font-size: var(--wp--preset--font-size--body-sm);
font-style: normal;
color: var(--wp--preset--color--muted);
}
/* Firma — chiude l'articolo */
.iab-article__main > .iab-byline {
display: grid;
gap: var(--wp--preset--spacing--24);
align-items: center;
margin-block-start: var(--wp--preset--spacing--48);
padding-block-start: var(--wp--preset--spacing--32);
border-top: 1px solid var(--wp--custom--color--border);
}
@media (min-width: 600px) {
.iab-article__main > .iab-byline { grid-template-columns: calc(var(--wp--preset--spacing--48) * 2) 1fr; }
}
.iab-byline > *,
.iab-byline__text > * { margin-block: 0; }
.iab-byline__photo { width: calc(var(--wp--preset--spacing--48) * 2); }
.iab-byline__photo img { border-radius: var(--wp--custom--radius--10); }
.iab-byline__name {
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--h-3);
font-weight: 600;
line-height: var(--wp--custom--line-height--heading);
color: var(--wp--preset--color--contrast);
}
.iab-byline__text > .iab-byline__role {
margin-block-start: var(--wp--preset--spacing--8);
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
color: var(--wp--preset--color--muted);
}
/* COLONNA DI SERVIZIO */
.iab-article__side {
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
}
.iab-article__side > *,
.iab-article__side > * > * { margin-block: 0; }
.iab-article__side .iab-side__label {
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.iab-article__side > .iab-side__title {
margin-block-start: var(--wp--preset--spacing--8);
padding-block-end: var(--wp--preset--spacing--24);
border-bottom: 1px solid var(--wp--custom--color--border);
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--body);
font-weight: 600;
line-height: var(--wp--custom--line-height--heading);
color: var(--wp--preset--color--contrast);
}
.iab-article__side > .iab-facts { margin-block-start: var(--wp--preset--spacing--24); }
.iab-facts__label { color: var(--wp--preset--color--muted); }
.iab-facts > .iab-facts__value {
margin-block-end: var(--wp--preset--spacing--16);
font-weight: 600;
color: var(--wp--preset--color--contrast);
}
.iab-facts > .iab-facts__value:last-child { margin-block-end: 0; }
.iab-article__side > :is(.iab-side-next, .iab-side-links) {
margin-block-start: var(--wp--preset--spacing--24);
padding-block-start: var(--wp--preset--spacing--24);
border-top: 1px solid var(--wp--custom--color--border);
}
.iab-side-next > .wp-block-query { margin-block-start: var(--wp--preset--spacing--12); }
.iab-side-next .wp-block-post-template > li { margin: 0; }
.iab-side-next__title {
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--body);
font-weight: 600;
line-height: var(--wp--custom--line-height--heading);
}
.iab-side-next .iab-side-next__meta { margin-block-start: var(--wp--preset--spacing--8); color: var(--wp--preset--color--muted); }
.iab-article__side > .iab-side-links { display: grid; gap: var(--wp--preset--spacing--12); }
.iab-side-links a { font-weight: 600; }
/* ALTRI CASI — fascia chiara, schede della stessa area */
.iab-single > .iab-related { background-color: var(--wp--preset--color--subtle); }
.iab-related > .wp-block-query { margin-block-start: var(--wp--preset--spacing--48); }
.iab-related > .iab-related__more { margin-block-start: var(--wp--preset--spacing--48); }
/* LA SCHEDA DELL'ARTICOLO — .iab-card, qui e nell'archivio. Il titolo può
essere h2 (archivio) o h3 (qui): il CSS vale per tutti e due
(fondamenta-css.md, sezione 5). Tutta la scheda è il link del titolo;
l'area resta cliccabile per conto suo, sopra. */
.iab-cards { display: grid; gap: var(--wp--preset--spacing--24); }
/* Tre colonne da 782px nella fascia "Altri casi" (tre schede). L'archivio
ha la sua griglia, più sotto: escluso da qui, non sovrascritto. */
@media (min-width: 782px) {
.iab-cards:not(.iab-cards--archive) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.iab-cards > li { margin: 0; }
.iab-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--16);
box-sizing: border-box;
height: 100%;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--border);
border-radius: var(--wp--custom--radius--10);
background-color: var(--wp--preset--color--base);
transition:
border-color var(--wp--custom--duration--base) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
.iab-card > * { margin-block: 0; }
.iab-card:hover { border-color: var(--wp--preset--color--contrast); transform: translateY(-2px); }
.iab-card > .iab-card__area { position: relative; z-index: 1; }
.iab-card :is(h2, h3) { font-size: var(--wp--preset--font-size--h-3); }
.iab-card :is(h2, h3) a:where(:not(.wp-element-button)) { color: inherit; }
.iab-card :is(h2, h3) a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--wp--custom--radius--10);
}
.iab-card :is(h2, h3) a:hover { text-decoration-line: none; }
.iab-card :is(h2, h3) a:focus-visible { box-shadow: none; }
.iab-card:has(:is(h2, h3) a:focus-visible) { box-shadow: var(--wp--custom--focus-ring-on-base); }
.iab-card__excerpt { font-size: var(--wp--preset--font-size--body-sm); line-height: var(--wp--custom--line-height--ui); }
.iab-card__excerpt p { margin: 0; }
.iab-card > .iab-card__cta {
margin-block-start: auto;
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 600;
color: var(--wp--custom--color--link);
}
.iab-card__cta::after { content: " →"; }
.iab-card:hover .iab-card__cta { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
/* ==========================================================================
ARCHIVIO — dalla 0.9.0, templates/home.html (/articoli/) e
templates/category.html (/argomenti//). Stesso disegno.
Fondo chiaro come gli articoli: testata bianca, lista su subtle, fascia
finale navy intermedio (.iab-cta, sezione 8). Le fasce seguono le
regole della sezione 8 (.iab-listing).
========================================================================== */
/* TESTATA — occhiello navy col trattino, titolo, sommario a tutta pagina.
Il titolo ha la misura e il peso di quello dell'articolo (page-title,
700): il titolo di pagina è uno solo in tutto il sito. */
.iab-archive-head > * { margin-block: 0; }
.iab-archive-head > h1 {
margin-block-start: var(--wp--preset--spacing--16);
font-weight: 700;
letter-spacing: var(--wp--custom--letter-spacing--display);
}
.iab-archive-head > .iab-archive-head__lead {
margin-block-start: var(--wp--preset--spacing--24);
font-size: var(--wp--preset--font-size--lead);
line-height: var(--wp--custom--line-height--lead);
text-wrap: pretty;
}
.iab-archive-head__lead p { margin: 0; }
.iab-archive-head__lead p + p { margin-block-start: var(--wp--preset--spacing--16); }
/* LA LISTA — fondo subtle, schede bianche */
.iab-listing > .iab-archive { background-color: var(--wp--preset--color--subtle); }
.iab-archive > * { margin-block: 0; }
.iab-archive > .iab-archive__query { margin-block-start: var(--wp--preset--spacing--32); }
/* FILTRI — link veri agli archivi delle aree. Superfici cliccabili: al
passaggio si sollevano e il contorno diventa navy, mai fondo giallo.
La voce corrente è piena, navy. */
.iab-filters ul { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); margin: 0; padding: 0; list-style: none; }
.iab-filters li { margin: 0; }
.iab-filters a,
.iab-pagination :is(a, .page-numbers) {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid var(--wp--custom--color--border);
border-radius: var(--wp--custom--radius--pill);
background-color: var(--wp--preset--color--base);
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
color: var(--wp--preset--color--contrast);
transition:
border-color var(--wp--custom--duration--base) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
.iab-filters a { min-height: 40px; padding: 0 var(--wp--preset--spacing--16); }
.iab-filters a:hover,
.iab-pagination a:hover {
border-color: var(--wp--preset--color--contrast);
text-decoration-line: none;
transform: translateY(-2px);
}
.iab-filters a[aria-current],
.iab-pagination [aria-current] {
border-color: var(--wp--preset--color--contrast);
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.iab-filters a[aria-current]:hover { transform: none; }
/* Le schede: una colonna, due da 600px, tre da 1024px. Qui sono fino a
dodici: tre colonne a 800px farebbero titoli di due parole per riga. */
@media (min-width: 600px) {
.iab-cards--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.iab-cards--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* NUMERI DI PAGINA — compaiono dal tredicesimo caso. Solo numeri e
frecce, senza la parola "Pagina". */
.iab-archive__query > .iab-pagination {
gap: var(--wp--preset--spacing--8);
margin-block-start: var(--wp--preset--spacing--64);
}
.iab-pagination > * { margin: 0; }
.iab-pagination .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); }
.iab-pagination :is(a, .page-numbers) { min-width: 44px; min-height: 44px; padding: 0 var(--wp--preset--spacing--12); }
.iab-pagination .page-numbers.dots { border-color: transparent; background-color: transparent; }
.iab-pagination [class*="-arrow"] { margin: 0; }
/* USCITA VERSO L'AREA — solo negli archivi delle aree: senza, l'archivio
di un'area è un vicolo cieco. */
.iab-archive > .iab-area-out {
display: grid;
gap: var(--wp--preset--spacing--24);
align-items: center;
margin-block-start: var(--wp--preset--spacing--64);
padding-block-start: var(--wp--preset--spacing--48);
border-top: 1px solid var(--wp--custom--color--border);
}
@media (min-width: 782px) {
.iab-archive > .iab-area-out { grid-template-columns: minmax(0, 1fr) auto; }
}
.iab-area-out > *,
.iab-area-out > div > * { margin-block: 0; }
.iab-area-out h2 { font-size: var(--wp--preset--font-size--h-3); }
.iab-area-out h2 + p {
margin-block-start: var(--wp--preset--spacing--8);
font-size: var(--wp--preset--font-size--body-sm);
color: var(--wp--preset--color--muted);
}
/* ==========================================================================
CONSULENZA — dalla 0.10.0: /consulenza/ e le sei pagine area.
Nessun template proprio: page.html e blocchi pronti ("Consulenza IAB",
"Area Management"...), composti da inc/aree.php. Tutte le fasce sono
scure e seguono le regole della sezione 8.
========================================================================== */
/* TESTATA DELL'AREA — la testata di sempre (sezione 8), più l'immagine
4:3 a sinistra e i segnali a destra. Blocco Colonne: sotto i 782px
l'immagine va sopra, come in "Immagine e testo" della home. */
.iab-page-head > .iab-split { margin-block: var(--wp--preset--spacing--48) 0; }
.wp-block-columns.iab-split { gap: var(--wp--preset--spacing--32); }
@media (min-width: 782px) {
.wp-block-columns.iab-split { gap: var(--wp--preset--spacing--64); }
}
.iab-split .wp-block-image { margin: 0; }
.iab-split .wp-block-image img {
width: 100%;
border-radius: var(--wp--custom--radius--6);
}
/* I segnali: un paragrafo in più con un elenco sotto, niente riquadro.
Il pallino è quello degli elenchi, giallo sul navy (sezione 2). */
.iab-signals > p { font-size: var(--wp--preset--font-size--body-xl); }
.iab-signals > ul { font-size: var(--wp--preset--font-size--body-lg); }
/* UN CASO REALE — il dato in un riquadro a sinistra, il racconto a destra.
I due link stanno in fondo alla colonna, così si allineano al bordo
basso del riquadro qualunque sia la lunghezza del testo. */
.is-style-eyebrow + h2 + .iab-case { margin-block: var(--wp--preset--spacing--48) 0; }
.wp-block-columns.iab-case { gap: var(--wp--preset--spacing--32); }
@media (min-width: 782px) {
.wp-block-columns.iab-case { gap: var(--wp--preset--spacing--64); }
}
/* Il riquadro prende sempre il tono opposto alla fascia che lo contiene */
.iab-case .iab-figure {
box-sizing: border-box;
height: 100%;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
}
.is-navy .iab-figure { background-color: var(--wp--custom--color--navy-800); }
.is-navy--mid .iab-figure { background-color: var(--wp--preset--color--contrast); }
.iab-case .iab-figure > * { margin: 0; }
.iab-case .iab-figure > * + * {
margin-block-start: var(--wp--preset--spacing--12);
font-size: var(--wp--preset--font-size--body-sm);
}
.iab-figure__num {
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--display-m);
font-weight: 700;
line-height: var(--wp--custom--line-height--display);
letter-spacing: var(--wp--custom--letter-spacing--display);
color: var(--wp--preset--color--base);
}
.iab-case__text { display: flex; flex-direction: column; }
.iab-case__text > p { font-size: var(--wp--preset--font-size--body-lg); }
.iab-case__text > .iab-case__links {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
margin-block-start: var(--wp--preset--spacing--32);
font-weight: 600;
}
@media (min-width: 782px) {
.iab-case__text > .iab-case__links {
margin-block-start: auto;
padding-block-start: var(--wp--preset--spacing--32);
}
}
.iab-case__links a::after { content: " →"; }
/* ESEMPI DI INTERVENTO — una lista unica: su ogni riga l'intervento e cosa
faccio. Righe alternate di tono opposto alla fascia, pallino giallo.
Nessun riquadro e nessun movimento: le voci non sono cliccabili. Ogni
riga ha le stesse due colonne (5 / 7), quindi le colonne sono dritte da
una riga all'altra. */
.iab-lead-in + .iab-do-list { margin-block-start: var(--wp--preset--spacing--32); }
.iab-do-list > .iab-do {
display: grid;
gap: var(--wp--preset--spacing--12);
margin-block: 0;
padding: var(--wp--preset--spacing--24);
}
.is-navy--mid .iab-do:nth-child(odd) { background-color: var(--wp--preset--color--contrast); }
.is-navy .iab-do:nth-child(odd) { background-color: var(--wp--custom--color--navy-800); }
@media (min-width: 782px) {
.iab-do-list > .iab-do {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: var(--wp--preset--spacing--64);
padding-inline: var(--wp--preset--spacing--32);
}
}
.iab-do-list .iab-do > * { margin: 0; }
.iab-do > h3 {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--h-3);
}
.iab-do > h3::before {
content: "";
flex: none;
width: var(--wp--custom--dot);
height: var(--wp--custom--dot);
border-radius: 50%;
background: var(--wp--preset--color--accent);
}
/* DOMANDE FREQUENTI — .iab-faq sulla fascia è il gancio dei dati
strutturati; la griglia è .iab-faq__grid. Due colonne da 782px, testo
sempre visibile. */
.iab-faq > .iab-faq__grid {
display: grid;
gap: var(--wp--preset--spacing--48);
margin-block-start: var(--wp--preset--spacing--48);
}
@media (min-width: 782px) {
.iab-faq > .iab-faq__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--wp--preset--spacing--64);
}
}
.iab-faq__grid > .iab-faq__item,
.iab-faq__grid .iab-faq__item > * { margin: 0; }
.iab-faq__item > h3 { font-size: var(--wp--preset--font-size--h-3); }
.iab-faq__grid .iab-faq__item > h3 + * { margin-block-start: var(--wp--preset--spacing--12); }
/* Eccezione alla regola dei link (sezione 1): dentro una risposta il link
si deve vedere senza passarci sopra, come nel corpo degli articoli. */
.iab-faq__grid a:where(:not(.wp-element-button)) {
text-decoration-line: underline;
text-decoration-thickness: 1px;
}
.iab-faq__grid a:where(:not(.wp-element-button)):hover { text-decoration-thickness: 2px; }
/* LE SEI AREE in coda alla pagina area (le scrive il tema). Quella
corrente è gialla e non è un link: sul navy il giallo si legge. */
.iab-faq > .iab-areas {
margin-block-start: var(--wp--preset--spacing--64);
padding-block-start: var(--wp--preset--spacing--24);
border-top: 1px solid var(--wp--custom--color--on-contrast-border);
}
.iab-areas ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
}
@media (max-width: 781.98px) {
.iab-areas ul { justify-content: flex-start; }
}
.iab-areas li { margin: 0; }
.iab-areas a:where(:not(.wp-element-button)) { color: var(--wp--custom--color--on-contrast-muted); }
.iab-areas a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--base); }
.iab-areas [aria-current] {
font-weight: 600;
color: var(--wp--preset--color--accent);
}
/* LE TESSERE DI /consulenza/ — due gruppi nella stessa fascia; l'etichetta
gialla (un h2 con lo stile Occhiello) sostituisce il titolo. */
.iab-area-group + .iab-area-group { margin-block-start: var(--wp--preset--spacing--64); }
.iab-area-group > .iab-area-grid { margin-block-start: var(--wp--preset--spacing--32); }
.iab-area-grid {
display: grid;
gap: var(--wp--preset--spacing--24);
}
/* Tre colonne solo da 1024px: a 800 le tessere sarebbero larghe 230px,
con tre parole per riga (come le schede dell'archivio). Sotto, una. */
@media (min-width: 1024px) {
.iab-area-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--preset--spacing--32);
}
}
.iab-area-grid > .iab-area-card {
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 0;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
transition:
border-color var(--wp--custom--duration--base) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
.iab-area-grid .iab-area-card > * { margin: 0; }
.iab-area-card > h3 { font-size: var(--wp--preset--font-size--h-2); }
/* Tutta la tessera è il link del nome. Solo sul sito: nell'editor la
copertura impedirebbe di cliccare sui testi per cambiarli. */
body:not(.editor-styles-wrapper) .iab-area-card h3 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--wp--custom--radius--10);
}
.iab-area-card h3 a:hover { text-decoration-line: none; }
.iab-area-card h3 a:focus-visible { box-shadow: none; }
.iab-area-card:has(h3 a:focus-visible) { box-shadow: var(--wp--custom--focus-ring); }
.iab-area-grid .iab-area-card > .iab-area-card__line {
margin-block-start: var(--wp--preset--spacing--12);
font-size: var(--wp--preset--font-size--body-lg);
color: var(--wp--preset--color--base);
}
.iab-area-grid .iab-area-card > ul {
margin-block-start: var(--wp--preset--spacing--24);
padding-inline-start: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--body-sm);
}
.iab-area-card li + li { margin-block-start: var(--wp--preset--spacing--8); }
/* "Vai all'area" lo aggiunge il tema. In fondo, così le tre tessere di
una riga chiudono alla stessa quota. */
.iab-area-grid .iab-area-card > .iab-area-card__go {
margin-block-start: auto;
padding-block-start: var(--wp--preset--spacing--32);
font-weight: 600;
color: var(--wp--preset--color--base);
}
.iab-area-card__go::after { content: " →"; }
/* superficie cliccabile: si solleva e il contorno diventa giallo, mai il
fondo (regola di sistema 3), come i riquadri delle aree in home */
.iab-area-grid > .iab-area-card:hover,
.iab-area-grid > .iab-area-card:focus-within {
transform: translateY(-2px);
border-color: var(--wp--preset--color--accent);
}
.iab-area-card:hover .iab-area-card__go { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
/* ==========================================================================
COME LAVORO — dalla 0.11.0: /come-lavoro/.
Nessun template proprio: page.html e il blocco pronto "Come lavoro IAB",
composto da inc/come-lavoro.php. Sei fasce scure; l'ultima (domande
frequenti) ha il tono del footer e porta .is-last.
========================================================================== */
/* IL METODO — lo stesso .iab-split della testata delle aree: immagine 4:3
a sinistra, testo a destra. Qui allineato in alto e sotto il titolo di
sezione. */
.is-style-eyebrow + h2 + .iab-split { margin-block: var(--wp--preset--spacing--48) 0; }
.iab-split__text > p { font-size: var(--wp--preset--font-size--body-lg); }
/* I TRE MODELLI — riquadri NON cliccabili: nessun sollevamento, nessun
contorno che cambia (regola di sistema). Il fondo va dal più chiaro al
navy del marchio; sul navy intermedio le luminosità sono 62, 45 e 29,
due scalini uguali. Il primo è il punto di contrasto più debole della
pagina (testo attenuato 6,2:1): non va schiarito oltre. */
.iab-lead-in + .iab-models { margin-block-start: var(--wp--preset--spacing--48); }
.iab-models {
display: grid;
gap: var(--wp--preset--spacing--24);
}
.iab-models > .iab-model {
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 0;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--model--border-1);
border-radius: var(--wp--custom--radius--10);
background-color: var(--wp--custom--model--bg-1);
}
.iab-models > .iab-model:nth-child(2) {
border-color: var(--wp--custom--model--border-2);
background-color: var(--wp--custom--model--bg-2);
}
.iab-models > .iab-model:nth-child(3) {
border-color: var(--wp--custom--model--border-3);
background-color: var(--wp--preset--color--contrast);
}
.iab-models .iab-model > * { margin: 0; }
.iab-models .iab-model > h3 {
margin-block-start: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--h-2);
}
.iab-models .iab-model > .iab-model__claim {
margin-block-start: var(--wp--preset--spacing--8);
font-size: var(--wp--preset--font-size--body-lg);
color: var(--wp--preset--color--base);
}
.iab-models .iab-model__claim + p { margin-block-start: var(--wp--preset--spacing--16); }
/* Il piede è agganciato in fondo: i tre filetti stanno alla stessa quota */
.iab-models .iab-model > .iab-model__foot {
margin-block-start: auto;
padding-block-start: var(--wp--preset--spacing--32);
font-size: var(--wp--preset--font-size--body-sm);
}
/* Sopra i 1024px i tre riquadri condividono le righe (subgrid): nome,
riga, testo e piede partono alla stessa quota nei tre riquadri, e così i
tre filetti "Ingaggio", anche quando i testi hanno lunghezze diverse. */
@media (min-width: 1024px) {
.iab-models {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(5, auto);
column-gap: var(--wp--preset--spacing--32);
row-gap: 0;
}
.iab-models > .iab-model {
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
row-gap: 0;
align-content: start;
}
.iab-models .iab-model > .iab-model__foot { margin-block-start: 0; }
}
.iab-model__foot > * { margin-block: 0; }
.iab-model__foot > .iab-model__label {
margin-block-end: var(--wp--preset--spacing--4);
padding-block-start: var(--wp--preset--spacing--24);
border-top: 1px solid var(--wp--custom--color--on-contrast-border);
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
.iab-model__foot > .iab-model__price {
margin-block-start: var(--wp--preset--spacing--8);
font-weight: 600;
color: var(--wp--preset--color--base);
}
.iab-models + .iab-models__note {
margin-block-start: var(--wp--preset--spacing--32);
font-size: var(--wp--preset--font-size--body-sm);
}
/* I QUATTRO PASSAGGI — .iab-steps. In verticale: l'ordine è l'unica
lettura possibile, e su telefono il disegno non cambia. Pallino numerato
(contatore CSS), linea gialla fra un pallino e il successivo, ultimo
pallino pieno: è il disegno fermo, quello che si vede senza script,
nell'editor e con il movimento ridotto. */
.iab-lead-in + .iab-steps { margin-block-start: var(--wp--preset--spacing--48); }
.iab-steps {
display: grid;
gap: var(--wp--preset--spacing--32);
counter-reset: iab-step;
}
.iab-steps > .iab-step {
position: relative;
margin: 0;
padding-inline-start: calc(var(--wp--custom--step--size) + var(--wp--preset--spacing--24));
counter-increment: iab-step;
}
.iab-steps .iab-step > * { margin: 0; }
.iab-steps > .iab-step::before {
content: counter(iab-step);
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: grid;
place-items: center;
box-sizing: border-box;
width: var(--wp--custom--step--size);
height: var(--wp--custom--step--size);
border: 2px solid var(--wp--preset--color--accent);
border-radius: 50%;
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--body);
font-weight: 700;
line-height: 1;
color: var(--wp--preset--color--accent);
}
.iab-steps > .iab-step:last-child::before {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--contrast);
}
/* La linea: parte 6px sotto il pallino e si ferma 6px sopra il successivo */
.iab-steps > .iab-step:not(:last-child)::after,
.iab-step > .iab-spark {
content: "";
position: absolute;
top: calc(var(--wp--custom--step--size) + var(--wp--custom--step--inset));
bottom: calc(var(--wp--custom--step--inset) - var(--wp--preset--spacing--32));
left: calc(var(--wp--custom--step--size) / 2 - 1px);
width: 2px;
}
.iab-steps > .iab-step:not(:last-child)::after { background-color: var(--wp--custom--step--line); }
.iab-step > h3 {
font-size: var(--wp--preset--font-size--h-3);
line-height: var(--wp--custom--step--size);
}
/* il testo resta alla misura di lettura: a 1200px la riga sarebbe il doppio */
.iab-steps .iab-step > h3 + p {
max-width: var(--wp--custom--measure--article);
margin-block-start: var(--wp--preset--spacing--8);
}
/* LA SCINTILLA — .iab-spark (la aggiunge functions.php, la fa partire
assets/js/componenti.js con .is-running). Un passaggio solo: ogni pallino
si accende e si spegne mentre la scintilla scende al successivo;
l'ultimo si accende e resta acceso. Un passo dura --duration--step
(3,2 s): quattro passaggi, undici secondi. Il nome è di sistema perché
la riuserà la linea del tempo di /chi-sono/. */
.iab-steps > .iab-step:last-child > .iab-spark { display: none; }
.iab-spark { pointer-events: none; }
.iab-spark::before {
content: "";
position: absolute;
top: 0;
left: calc((2px - var(--wp--custom--step--spark)) / 2);
width: var(--wp--custom--step--spark);
height: var(--wp--custom--step--spark);
margin-block-start: calc(var(--wp--custom--step--spark) / -2);
border-radius: 50%;
background-color: var(--wp--preset--color--base);
box-shadow: var(--wp--custom--step--spark-glow);
opacity: 0;
}
.iab-spark::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2px;
height: var(--wp--custom--step--trail);
margin-block-start: calc(var(--wp--custom--step--trail) * -1);
background-image: linear-gradient(to bottom, transparent, var(--wp--custom--step--trail-color));
opacity: 0;
}
.iab-steps > .iab-step:nth-child(2) { --iab-i: 1; }
.iab-steps > .iab-step:nth-child(3) { --iab-i: 2; }
.iab-steps > .iab-step:nth-child(4) { --iab-i: 3; }
.iab-steps > .iab-step:nth-child(5) { --iab-i: 4; }
.iab-steps > .iab-step:nth-child(6) { --iab-i: 5; }
.iab-steps.is-running > .iab-step:not(:last-child)::before {
animation: iab-step-glow var(--wp--custom--duration--step) linear calc(var(--iab-i, 0) * var(--wp--custom--duration--step)) both;
}
.iab-steps.is-running > .iab-step:last-child::before {
animation: iab-step-glow-last calc(var(--wp--custom--duration--step) * 0.375) linear calc(var(--iab-i, 0) * var(--wp--custom--duration--step)) both;
}
.iab-steps.is-running .iab-spark::before,
.iab-steps.is-running .iab-spark::after {
animation: iab-spark calc(var(--wp--custom--duration--step) / 2) linear calc((var(--iab-i, 0) + 0.5) * var(--wp--custom--duration--step)) both;
}
@keyframes iab-step-glow {
0% { background-color: transparent; color: var(--wp--preset--color--accent); box-shadow: 0 0 0 0 transparent; }
12%, 50% { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); box-shadow: var(--wp--custom--step--halo); }
92%, 100% { background-color: transparent; color: var(--wp--preset--color--accent); box-shadow: 0 0 0 0 transparent; }
}
@keyframes iab-step-glow-last {
0% { background-color: transparent; color: var(--wp--preset--color--accent); }
25%, 100% { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }
}
@keyframes iab-spark {
0% { top: 0; opacity: 0; }
10%, 90% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
/* DOMANDE FREQUENTI con le due uscite della pagina in fondo. Su desktop
il giallo va a destra, come nelle chiusure. */
.iab-faq > .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--64); }
@media (min-width: 782px) {
.iab-faq > .wp-block-buttons { flex-direction: row-reverse; }
}
/* ==========================================================================
CONTATTI — dalla 0.12.0 (mockup 06)
Il modulo è di Contact Form 7, ma il markup lo scrive il tema
(inc/contatti.php) con le classi del sito, e il foglio di stile del
plugin non si carica. Qui c'è anche il poco che quel foglio faceva di
necessario (i testi per i soli lettori di schermo, i campi nascosti).
========================================================================== */
/* MODULO + STRISCIA — .iab-form-layout. 7fr / 5fr sopra i 1024px: qui il
testo è l'appoggio del modulo. Sotto, la striscia scivola sotto il
modulo: chi è su telefono è arrivato qui per scrivere. */
.iab-lead-in + .iab-form-layout { margin-block-start: var(--wp--preset--spacing--48); }
.iab-form-layout {
display: grid;
gap: var(--wp--preset--spacing--48);
align-items: start;
}
.iab-form-layout > * { margin: 0; min-width: 0; }
@media (min-width: 1024px) {
.iab-form-layout {
grid-template-columns: 7fr 5fr;
gap: var(--wp--preset--spacing--64);
}
}
/* Quello che faceva il foglio del plugin, e serve */
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip-path: inset(50%);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
white-space: nowrap;
}
.wpcf7 .hidden-fields-container { display: none; }
/* la trappola per lo spam (functions.php): fuori dallo schermo, non
display:none, perché alcuni programmi saltano i campi nascosti così */
:is(.wpcf7, .iab-subscribe) .iab-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.wpcf7-form-control-wrap { display: block; position: relative; }
/* IL MODULO — .iab-form. Un passo solo. Le coppie di campi su due colonne
sopra i 782px: dentro la colonna i campi restano sopra i 300px. */
.iab-form { display: grid; gap: var(--wp--preset--spacing--24); }
.iab-form__row { display: grid; gap: var(--wp--preset--spacing--24); }
@media (min-width: 782px) {
.iab-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.iab-field { display: grid; gap: var(--wp--preset--spacing--8); align-content: start; }
.iab-field > label,
.iab-form__options > legend {
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
color: var(--wp--preset--color--base);
}
/* si marca il facoltativo, non l'obbligatorio */
.iab-field > label > span,
.iab-form__options > legend > span {
font-weight: 400;
color: var(--wp--custom--color--on-contrast-muted);
}
.iab-field :is(input, select, textarea) {
box-sizing: border-box;
width: 100%;
min-height: 48px;
margin: 0;
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
border: 1px solid var(--wp--custom--field--border);
border-radius: var(--wp--custom--radius--6);
background-color: var(--wp--custom--field--bg);
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--body);
line-height: var(--wp--custom--line-height--ui);
transition:
border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}
.iab-field :is(input, select, textarea):hover { border-color: var(--wp--custom--field--border-hover); }
.iab-field :is(input, select, textarea):focus {
outline: 2px solid transparent;
border-color: var(--wp--preset--color--accent);
background-color: var(--wp--custom--field--bg-focus);
}
.iab-field textarea {
min-height: var(--wp--custom--field--textarea);
resize: vertical;
line-height: var(--wp--custom--line-height--body);
}
/* l'esempio dentro il campo è un aiuto, non un'etichetta: più basso del
testo scritto, e ripetuto in breve nella riga sotto il campo */
.iab-field textarea::placeholder {
color: var(--wp--custom--field--placeholder);
font-style: italic;
opacity: 1;
}
/* la freccia della tendina disegnata qui: quella di sistema su fondo scuro
resta nera su alcuni browser e sparisce */
.iab-field select {
appearance: none;
padding-inline-end: var(--wp--preset--spacing--48);
background-image:
linear-gradient(45deg, transparent 50%, var(--wp--custom--color--on-contrast-muted) 50%),
linear-gradient(135deg, var(--wp--custom--color--on-contrast-muted) 50%, transparent 50%);
background-position:
calc(100% - var(--wp--preset--spacing--24)) 50%,
calc(100% - var(--wp--preset--spacing--16) - 2px) 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
cursor: pointer;
}
.iab-field select option {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.iab-field > .iab-field__hint {
margin: 0;
font-size: var(--wp--preset--font-size--caption);
}
/* AVVISI. Giallo e non rosso: la tavolozza ha due colori, e il rosso
entrerebbe nel sito solo per dire "hai sbagliato". Il controllo
dell'email (assets/js/moduli.js) è un suggerimento; l'avviso del
plugin su un campo mancante è un errore. Stesso colore, stesso posto. */
.iab-field > .iab-field__check,
.wpcf7-not-valid-tip {
display: block;
margin: 0;
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
color: var(--wp--preset--color--accent);
}
.wpcf7-not-valid-tip { margin-block-start: var(--wp--preset--spacing--8); }
.iab-field > .iab-field__check[hidden] { display: none; }
.iab-field__check button {
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--wp--preset--color--base);
font: inherit;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.3em;
cursor: pointer;
}
.iab-field.is-warned input,
.iab-field .wpcf7-not-valid { border-color: var(--wp--preset--color--accent); }
/* LE SPUNTE E IL CONSENSO. Le spunte stanno dopo i campi di contatto:
si concedono dopo aver dato i propri dati, non prima. */
.iab-form__options {
min-width: 0;
margin: 0;
padding: var(--wp--preset--spacing--24) 0 0;
border: 0;
border-block-start: 1px solid var(--wp--custom--color--on-contrast-border);
}
.iab-form__options > legend {
float: left; /* così il filetto sopra resta un filetto, e la legenda sta sotto */
width: 100%;
margin-block-end: var(--wp--preset--spacing--12);
padding: 0;
}
.iab-form__options .wpcf7-form-control-wrap { clear: both; }
.iab-form__options .wpcf7-checkbox {
display: grid;
gap: var(--wp--preset--spacing--12);
}
.iab-form .wpcf7-list-item { display: block; margin: 0; }
.iab-form .wpcf7-list-item > label {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--wp--preset--spacing--12);
align-items: start;
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
cursor: pointer;
}
.iab-form .wpcf7-list-item input {
width: var(--wp--custom--field--check);
height: var(--wp--custom--field--check);
margin: 1px 0 0;
accent-color: var(--wp--preset--color--accent);
cursor: pointer;
}
.iab-form__consent a:where(:not(.wp-element-button)) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
.iab-form__consent a:where(:not(.wp-element-button)):hover { text-decoration-thickness: 2px; }
/* L'INVIO. Il bottone è giallo perché porta .wp-element-button; mentre
parte, si attenua. La rotellina del plugin non serve. */
.iab-form__send { margin-block-start: var(--wp--preset--spacing--8); }
.iab-form__send .wpcf7-submit { border: 0; cursor: pointer; }
.iab-form .wpcf7-spinner { display: none; }
.wpcf7-form.submitting .wpcf7-submit {
opacity: 0.6;
cursor: progress;
}
/* LA RISPOSTA DEL PLUGIN (campi mancanti, invio fallito, spam) sotto il
modulo; dopo l'invio riuscito il modulo sparisce e resta la conferma. */
.wpcf7 form .wpcf7-response-output {
margin: var(--wp--preset--spacing--24) 0 0;
padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-inline-start: 4px solid var(--wp--preset--color--accent);
border-radius: var(--wp--custom--radius--6);
font-size: var(--wp--preset--font-size--body-sm);
color: var(--wp--preset--color--base);
}
.wpcf7 form:is(.init, .resetting, .submitting, .sent) .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output:empty { display: none; }
.iab-form__done { display: none; }
.wpcf7 form.sent > .iab-form { display: none; }
.wpcf7 form.sent > .iab-form__done {
display: block;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-inline-start: 4px solid var(--wp--preset--color--accent);
border-radius: var(--wp--custom--radius--10);
background-color: var(--wp--custom--color--box-bg);
}
.iab-form__done > h3 { font-size: var(--wp--preset--font-size--h-2); }
.iab-form__done > p { margin-block-start: var(--wp--preset--spacing--12); }
/* LA STRISCIA ACCANTO AL MODULO — .iab-aside. Non cliccabile: non si
muove. Il titolo è un titoletto (h-3): la sezione 5 lo esclude. */
.iab-aside {
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
background-color: var(--wp--custom--color--box-bg);
}
.iab-aside > * { margin: 0; }
.iab-aside > .is-style-eyebrow + h2 {
margin-block-start: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--h-3);
}
@media (max-width: 599.98px) {
.iab-aside { padding: var(--wp--preset--spacing--24); }
}
/* I QUATTRO PASSAGGI IN VERSIONE SECCA — .iab-flow. Un componente a sé, non
una variante di .iab-steps: pallino più piccolo (28px), nessuna
scintilla, mezza riga di testo, e il pallino pieno è il PRIMO ("sei
qui"), non l'ultimo ("è qui che si lavora"). Stessa linea gialla. */
.iab-aside > .iab-flow { margin-block-start: var(--wp--preset--spacing--24); }
.iab-flow {
display: grid;
gap: var(--wp--preset--spacing--24);
counter-reset: iab-flow;
}
.iab-flow > .iab-flow__step {
position: relative;
margin: 0;
padding-inline-start: calc(var(--wp--custom--flow--size) + var(--wp--preset--spacing--16));
counter-increment: iab-flow;
}
.iab-flow .iab-flow__step > * { margin: 0; }
.iab-flow > .iab-flow__step::before {
content: counter(iab-flow);
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: grid;
place-items: center;
box-sizing: border-box;
width: var(--wp--custom--flow--size);
height: var(--wp--custom--flow--size);
border: 2px solid var(--wp--preset--color--accent);
border-radius: 50%;
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 700;
line-height: 1;
color: var(--wp--preset--color--accent);
}
.iab-flow > .iab-flow__step:first-child::before {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--contrast);
}
/* Il pallino 1 pulsa tre volte quando il riquadro entra nello schermo, poi
resta fermo e pieno (dalla 0.14.0; dalla 0.15.0 lento come i pallini di
/come-lavoro/, 3,2 s a pulsazione, da pieno a vuoto e di nuovo pieno,
con un alone più largo). Tre volte e non in ciclo: accanto a un modulo da
compilare un movimento continuo tirerebbe l'occhio. Dura quasi dieci
secondi senza un comando per fermarla: deroga scelta da Ivo, come la
fascia loghi. Parte con .is-running (assets/js/componenti.js); col
movimento ridotto no. */
@keyframes iab-pulse {
0%, 100% { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); box-shadow: 0 0 0 0 transparent; }
25% { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); box-shadow: var(--wp--custom--flow--halo); }
60% { background-color: transparent; color: var(--wp--preset--color--accent); box-shadow: 0 0 0 0 transparent; }
}
.iab-flow.is-running > .iab-flow__step:first-child::before {
animation: iab-pulse var(--wp--custom--duration--pulse) ease-in-out 3;
}
/* la linea: parte 6px sotto il pallino e si ferma 6px sopra il successivo */
.iab-flow > .iab-flow__step:not(:last-child)::after {
content: "";
position: absolute;
top: calc(var(--wp--custom--flow--size) + var(--wp--custom--step--inset));
bottom: calc(var(--wp--custom--step--inset) - var(--wp--preset--spacing--24));
left: calc(var(--wp--custom--flow--size) / 2 - 1px);
width: 2px;
background-color: var(--wp--custom--step--line);
}
.iab-flow__step > h3 {
font-size: var(--wp--preset--font-size--body);
line-height: var(--wp--custom--flow--size);
}
.iab-flow__step > h3 + p { font-size: var(--wp--preset--font-size--body-sm); }
.iab-aside > .iab-aside__note {
margin-block-start: var(--wp--preset--spacing--32);
padding-block-start: var(--wp--preset--spacing--24);
border-block-start: 1px solid var(--wp--custom--color--on-contrast-border);
font-size: var(--wp--preset--font-size--body-sm);
}
.iab-aside__note > * { margin: 0; }
.iab-aside__note > * + * { margin-block-start: var(--wp--preset--spacing--8); }
/* ==========================================================================
VISIONE E CHI SONO — dalla 0.16.0 (mockup 08): /visione/ e /chi-sono/.
Nessun template proprio: page.html e i blocchi pronti "Visione IAB" e
"Chi sono IAB" (inc/visione.php, inc/chi-sono.php). Tutte le fasce sono
scure e seguono le regole della sezione 8.
========================================================================== */
/* IMMAGINE A DESTRA — .iab-split--reverse. Nel codice l'immagine viene
prima, così sotto i 782px sta sopra il testo in tutti e due i casi; da
782px in su passa a destra. */
@media (min-width: 782px) {
.iab-split--reverse > .wp-block-column:first-child { order: 2; }
}
/* IL RITRATTO — .iab-split__portrait: verticale 3:4, 420px al massimo e
agganciato al bordo destro; sotto i 782px 320px, centrato, così non
occupa uno schermo intero prima del testo. width: 100% insieme al
margine automatico, o il riquadro si stringe al contenuto (regola di
sistema). */
.iab-split__portrait .wp-block-image {
width: 100%;
max-width: var(--wp--custom--measure--portrait-small);
margin-inline: auto;
}
@media (min-width: 782px) {
.iab-split__portrait .wp-block-image {
max-width: var(--wp--custom--measure--portrait-page);
margin-inline-end: 0;
}
}
/* LE TAPPE — .iab-timeline. Un componente a sé, non una variante di
.iab-steps: la linea sta al centro e i testi si alternano a sinistra e
a destra. Stessi pallini numerati, stessa linea gialla, stessa scintilla
(.iab-spark) e stesso script. Sotto i 782px la linea torna a sinistra e
i testi tutti a destra, come i passaggi: due colonne strette non si
leggono. Disegno fermo (senza script, nell'editor, col movimento
ridotto): l'ultimo pallino pieno. */
.is-style-eyebrow + h2 + .iab-timeline { margin-block-start: var(--wp--preset--spacing--48); }
.iab-timeline {
display: grid;
gap: var(--wp--preset--spacing--32);
counter-reset: iab-tl;
}
.iab-timeline > .iab-tl-item {
position: relative;
margin: 0;
padding-inline-start: calc(var(--wp--custom--step--size) + var(--wp--preset--spacing--24));
counter-increment: iab-tl;
}
.iab-timeline .iab-tl-item > * { margin: 0; }
.iab-timeline > .iab-tl-item::before {
content: counter(iab-tl);
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: grid;
place-items: center;
box-sizing: border-box;
width: var(--wp--custom--step--size);
height: var(--wp--custom--step--size);
border: 2px solid var(--wp--preset--color--accent);
border-radius: 50%;
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--body);
font-weight: 700;
line-height: 1;
color: var(--wp--preset--color--accent);
}
.iab-timeline > .iab-tl-item:last-child::before {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--contrast);
}
/* la linea: parte 6px sotto il pallino e si ferma 6px sopra il successivo */
.iab-timeline > .iab-tl-item:not(:last-child)::after,
.iab-tl-item > .iab-spark {
content: "";
position: absolute;
top: calc(var(--wp--custom--step--size) + var(--wp--custom--step--inset));
bottom: calc(var(--wp--custom--step--inset) - var(--wp--preset--spacing--32));
left: calc(var(--wp--custom--step--size) / 2 - 1px);
width: 2px;
}
.iab-timeline > .iab-tl-item:not(:last-child)::after { background-color: var(--wp--custom--step--line); }
.iab-timeline > .iab-tl-item:last-child > .iab-spark { display: none; }
.iab-tl-item > h3 {
font-size: var(--wp--preset--font-size--h-3);
line-height: var(--wp--custom--step--size);
}
.iab-timeline .iab-tl-item > h3 + p {
max-width: var(--wp--custom--measure--article);
margin-block-start: var(--wp--preset--spacing--8);
}
/* Da 782px: pallino e linea al centro, tappe dispari a sinistra (testo
allineato verso la linea), pari a destra. */
@media (min-width: 782px) {
.iab-timeline > .iab-tl-item:nth-child(odd) {
padding-inline: 0 calc(50% + var(--wp--custom--step--size) / 2 + var(--wp--preset--spacing--32));
text-align: right;
}
.iab-timeline > .iab-tl-item:nth-child(even) {
padding-inline: calc(50% + var(--wp--custom--step--size) / 2 + var(--wp--preset--spacing--32)) 0;
}
.iab-timeline > .iab-tl-item::before { left: calc(50% - var(--wp--custom--step--size) / 2); }
.iab-timeline > .iab-tl-item:not(:last-child)::after,
.iab-tl-item > .iab-spark { left: calc(50% - 1px); }
.iab-timeline > .iab-tl-item:nth-child(odd) > h3 + p { margin-inline-start: auto; }
}
/* La scintilla: stessa animazione dei quattro passaggi, un passo per tappa
(3,2 s). I ritardi vengono dalla posizione della tappa, fino a dieci. */
.iab-timeline > .iab-tl-item:nth-child(2) { --iab-i: 1; }
.iab-timeline > .iab-tl-item:nth-child(3) { --iab-i: 2; }
.iab-timeline > .iab-tl-item:nth-child(4) { --iab-i: 3; }
.iab-timeline > .iab-tl-item:nth-child(5) { --iab-i: 4; }
.iab-timeline > .iab-tl-item:nth-child(6) { --iab-i: 5; }
.iab-timeline > .iab-tl-item:nth-child(7) { --iab-i: 6; }
.iab-timeline > .iab-tl-item:nth-child(8) { --iab-i: 7; }
.iab-timeline > .iab-tl-item:nth-child(9) { --iab-i: 8; }
.iab-timeline > .iab-tl-item:nth-child(10) { --iab-i: 9; }
.iab-timeline.is-running > .iab-tl-item:not(:last-child)::before {
animation: iab-step-glow var(--wp--custom--duration--step) linear calc(var(--iab-i, 0) * var(--wp--custom--duration--step)) both;
}
.iab-timeline.is-running > .iab-tl-item:last-child::before {
animation: iab-step-glow-last calc(var(--wp--custom--duration--step) * 0.375) linear calc(var(--iab-i, 0) * var(--wp--custom--duration--step)) both;
}
.iab-timeline.is-running .iab-spark::before,
.iab-timeline.is-running .iab-spark::after {
animation: iab-spark calc(var(--wp--custom--duration--step) / 2) linear calc((var(--iab-i, 0) + 0.5) * var(--wp--custom--duration--step)) both;
}
/* RICONOSCIMENTI — .iab-cols-2: due colonne di testo, un titolo e un
elenco ciascuna. Non riusa .iab-faq, che è il gancio dei dati
strutturati FAQPage. */
.is-style-eyebrow + h2 + .iab-cols-2 { margin-block-start: var(--wp--preset--spacing--48); }
.iab-cols-2 {
display: grid;
gap: var(--wp--preset--spacing--48);
}
@media (min-width: 782px) {
.iab-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--wp--preset--spacing--64);
}
}
.iab-cols-2 > .iab-cols-2__col { margin: 0; }
.iab-cols-2__col > * { margin-block: 0; }
.iab-cols-2__col > h3 { font-size: var(--wp--preset--font-size--h-3); }
.iab-cols-2__col > h3 + ul { margin-block-start: var(--wp--preset--spacing--16); }
.iab-cols-2__col strong {
font-weight: 600;
color: var(--wp--preset--color--base);
}
/* REFERENZE — .iab-logos: loghi FERMI in griglia (in home scorrono, qui
no: le due fasce si distinguono, e ferme non chiedono un comando di
pausa). Due gruppi, clienti ed enti, ognuno con il suo titolo. Loghi
tutti dello stesso grigio chiaro, come la fascia della home. */
.is-style-eyebrow + h2 + .iab-logos-group,
.iab-logos-group + .iab-logos-group { margin-block-start: var(--wp--preset--spacing--48); }
.iab-logos-group > * { margin-block: 0; }
.iab-logos-group > h3 { font-size: var(--wp--preset--font-size--h-3); }
.iab-logos-group > h3 + .iab-logos { margin-block-start: var(--wp--preset--spacing--24); }
.iab-logos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--16);
}
@media (min-width: 600px) {
.iab-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.iab-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.iab-logos > .wp-block-image {
display: grid;
place-items: center;
box-sizing: border-box;
aspect-ratio: var(--wp--custom--logos--ratio);
margin: 0;
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--6);
}
.iab-logos img {
display: block;
width: auto;
max-width: 100%;
height: var(--wp--custom--marquee--logo-height);
object-fit: contain;
filter: brightness(0) invert(1);
opacity: var(--wp--custom--marquee--logo-opacity);
}
/* LE RECENSIONI — una riga scritta a mano e il link alla scheda Google,
sotto i loghi dopo un filetto. Nessun dato di Google salvato nel sito. */
.iab-logos-group + .iab-reviews {
margin-block-start: var(--wp--preset--spacing--48);
padding-block-start: var(--wp--preset--spacing--32);
border-block-start: 1px solid var(--wp--custom--color--on-contrast-border);
}
.iab-reviews {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
}
.iab-reviews > * { margin: 0; }
.iab-reviews__count {
font-size: var(--wp--preset--font-size--lead);
line-height: var(--wp--custom--line-height--lead);
color: var(--wp--preset--color--base);
}
.iab-reviews__count strong {
font-family: var(--wp--preset--font-family--space-grotesk);
font-weight: 700;
}
/* ==========================================================================
FORMAZIONE — dalla 0.17.0 (mockup 09): /formazione/. Nessun template
proprio: page.html e il blocco pronto "Formazione IAB"
(inc/formazione.php). Tutte le fasce sono scure e seguono le regole
della sezione 8; i componenti sono quelli già scritti (.iab-do-list,
.iab-split, .iab-cta, .iab-faq).
========================================================================== */
/* GLI AMBITI — non hanno regole proprie: sono .iab-do-list / .iab-do, le
righe di "Come intervengo" delle pagine area (sezione 9, consulenza).
Niente riquadri: sono il disegno delle cose cliccabili (03k). */
/* LA RIGA SOTTO IL BOTTONE DELLA CHIUSURA — .iab-cta__hint: dice che cosa
si riceve dal modulo. Piccola e attenuata: è una nota di servizio, non
compete con il bottone. Due classi, o vince lo stacco di 24px di
WordPress (sezione 9). */
.iab-cta .iab-cta__hint {
margin-block-start: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--body-sm);
}
/* ==========================================================================
EVENTI — dalla 0.18.0 (mockup 10): /eventi/, e la riga "Prossimo evento"
in home e in fondo agli articoli. Nessun template proprio: page.html e il
blocco pronto "Eventi IAB" (inc/eventi.php). Le voci non si scrivono
nell'editor: le compone il tema dalle schede del menu Eventi, dentro tre
segnaposto (.iab-events-slot--next, .iab-events-slot--past,
.iab-subscribe-slot). Tutte le fasce sono scure (sezione 8).
========================================================================== */
/* I SEGNAPOSTO — si vedono solo nell'editor: sul sito il tema li sostituisce
con gli eventi e con il modulo. Contorno tratteggiato: dice "qui arriva
qualcosa", non "scrivi qui". */
.iab-events-slot--next,
.iab-events-slot--past,
.iab-subscribe-slot {
padding: var(--wp--preset--spacing--24);
border: 1px dashed var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
font-size: var(--wp--preset--font-size--body-sm);
}
/* I DUE GRUPPI — "In programma" ed "Eventi passati", dentro una fascia sola.
L'etichetta gialla è l'h2 e sostituisce il titolo (la stessa eccezione di
/consulenza/). Due o tre classi, o vince lo stacco di 24px di WordPress. */
.iab-calendar .iab-group + .iab-group { margin-block-start: var(--wp--preset--spacing--64); }
.iab-group > .is-style-eyebrow + .iab-lead-in { margin-block-start: var(--wp--preset--spacing--16); }
.iab-group > .iab-lead-in + .iab-events-slot,
.iab-group > .iab-lead-in + .iab-events-slot--next,
.iab-group > .iab-lead-in + .iab-events-slot--past { margin-block-start: var(--wp--preset--spacing--32); }
/* LA VOCE EVENTO — .iab-events / .iab-event. Su telefono impilata: la
copertina in cima, poi la data, che è il dato per cui si apre la pagina.
Da 1024px in riga: copertina, data, contenuto, bottone. In riga con flex
e non con una griglia fissa: una voce senza copertina o senza bottone non
lascia colonne vuote. Fra 782 e 1024px le quattro colonne non ci stanno:
copertina e data a sinistra, il bottone scende sotto il testo.
NON SI SOLLEVA al passaggio: dentro c'è un bottone, il riquadro non è
cliccabile e non deve sembrarlo. Si muove solo il bottone. */
.iab-events {
display: grid;
gap: var(--wp--preset--spacing--16);
margin: 0;
padding: 0;
list-style: none;
}
.iab-event {
display: grid;
gap: var(--wp--preset--spacing--16);
padding: var(--wp--preset--spacing--24);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
background: var(--wp--custom--color--box-bg);
}
.iab-event > * { margin: 0; }
@media (min-width: 782px) and (max-width: 1023.98px) {
.iab-event {
grid-template-columns: var(--wp--custom--event--date) minmax(0, 1fr);
align-items: start;
column-gap: var(--wp--preset--spacing--24);
}
.iab-event--img { grid-template-columns: var(--wp--custom--event--media) var(--wp--custom--event--date-img) minmax(0, 1fr); }
.iab-event > :is(.iab-event__media, .iab-event__date) { grid-row: span 2; }
.iab-event > .wp-block-buttons { grid-column: -2; }
}
@media (min-width: 1024px) {
.iab-event {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--32);
}
.iab-event > .iab-event__date { flex: 0 0 var(--wp--custom--event--date); }
.iab-event > .iab-event__body { flex: 1 1 0; min-width: 0; }
.iab-event > .wp-block-buttons { flex: none; }
.iab-event--img { gap: var(--wp--preset--spacing--24); }
.iab-event--img > .iab-event__media { flex: 0 0 var(--wp--custom--event--media); }
.iab-event--img > .iab-event__date { flex-basis: var(--wp--custom--event--date-img); }
}
/* la copertina 16:9, larga quanto la colonna */
.iab-event__media img,
.iab-event-strip__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--wp--custom--radius--6);
}
/* la data: il numero del giorno in giallo (il caso ammesso: numeri delle
schede), il mese sotto in maiuscolo attenuato */
.iab-event__date time { display: block; }
.iab-event__day {
display: block;
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--display-m);
font-weight: 700;
line-height: 1;
letter-spacing: var(--wp--custom--letter-spacing--display);
color: var(--wp--preset--color--accent);
}
.iab-event__month {
display: block;
margin-block-start: var(--wp--preset--spacing--4);
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 600;
line-height: 1;
letter-spacing: var(--wp--custom--letter-spacing--caps);
text-transform: uppercase;
color: var(--wp--custom--color--on-contrast-muted);
}
.iab-event__body > * { margin: 0; }
.iab-event .iab-event__title {
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--h-3);
font-weight: 600;
line-height: var(--wp--custom--line-height--heading);
color: var(--wp--preset--color--base);
}
.iab-event__body > .iab-event__desc {
margin-block-start: var(--wp--preset--spacing--8);
font-size: var(--wp--preset--font-size--body-sm);
}
/* luogo, orario, prezzo: il punto medio fra l'uno e l'altro lo mette il
CSS, così non finisce nel testo copiato */
.iab-event__body > .iab-event__meta {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--12);
margin-block-start: var(--wp--preset--spacing--12);
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
}
.iab-event__meta span + span::before {
content: "·";
margin-inline-end: var(--wp--preset--spacing--12);
}
.iab-event__price {
font-weight: 600;
color: var(--wp--preset--color--base);
}
/* l'etichetta del format: non è un bottone e non è cliccabile */
.iab-tag {
display: inline-block;
margin-block-end: var(--wp--preset--spacing--8);
padding: var(--wp--custom--event--tag-pad) var(--wp--preset--spacing--8);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--3);
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--caps);
text-transform: uppercase;
color: var(--wp--custom--color--on-contrast-muted);
}
/* IL PROSSIMO APPUNTAMENTO — .iab-event--lead: fondo più chiaro, data e
titolo più grandi. È il più vicino, sempre: lo decide la data. */
.iab-event--lead {
padding: var(--wp--preset--spacing--32);
background: var(--wp--custom--color--navy-700);
}
.iab-event--lead .iab-event__day { font-size: var(--wp--custom--event--lead-day); }
.iab-event--lead .iab-event__title { font-size: var(--wp--preset--font-size--h-2); }
.iab-event--lead .iab-event__body > .iab-event__desc { font-size: var(--wp--preset--font-size--body); }
.iab-event__flag {
display: block;
margin-block-end: var(--wp--preset--spacing--12);
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
@media (min-width: 782px) and (max-width: 1023.98px) {
.iab-event--lead { grid-template-columns: var(--wp--custom--event--lead-date) minmax(0, 1fr); }
.iab-event--lead.iab-event--img { grid-template-columns: var(--wp--custom--event--media) var(--wp--custom--event--lead-date) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
.iab-event--lead > .iab-event__date { flex-basis: var(--wp--custom--event--lead-date); }
.iab-event--lead.iab-event--img { gap: var(--wp--preset--spacing--32); }
.iab-event--lead.iab-event--img > .iab-event__media { flex-basis: var(--wp--custom--event--lead-media); }
}
/* GLI EVENTI PASSATI — .iab-event--past: la stessa voce senza copertina e
senza bottone, in riga fra due filetti. Data in bianco attenuato invece
che gialla: i due elenchi si distinguono anche scorrendo in fretta. */
.iab-events--past { gap: 0; }
.iab-event--past {
padding-block: var(--wp--preset--spacing--16);
padding-inline: 0;
border-width: 0 0 1px;
border-radius: 0;
background: transparent;
}
.iab-event--past:last-child { border-bottom-width: 0; }
.iab-event--past .iab-event__day {
font-size: var(--wp--preset--font-size--h-2);
color: var(--wp--custom--color--on-contrast-muted);
}
.iab-event--past .iab-event__title { font-size: var(--wp--preset--font-size--body-lg); }
/* da 600px la data sta accanto al testo anche sul telefono in orizzontale:
impilata, ogni voce passata occuperebbe mezzo schermo */
@media (min-width: 600px) and (max-width: 1023.98px) {
.iab-event--past {
grid-template-columns: var(--wp--custom--event--date) minmax(0, 1fr);
column-gap: var(--wp--preset--spacing--24);
align-items: start;
}
}
/* LE ANNATE — .iab-year-group, a tendina (, nessuno script).
Deroga dichiarata alla regola del testo sempre visibile: i passati non
intercettano ricerche e occuperebbero tre schermate. */
.iab-year-group { border-block-start: 1px solid var(--wp--custom--color--on-contrast-border); }
.iab-year-group:last-child { border-block-end: 1px solid var(--wp--custom--color--on-contrast-border); }
.iab-year-group > summary {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--12);
padding-block: var(--wp--preset--spacing--24);
cursor: pointer;
list-style: none;
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--h-3);
font-weight: 600;
line-height: var(--wp--custom--line-height--heading);
color: var(--wp--preset--color--base);
}
.iab-year-group > summary::-webkit-details-marker { display: none; }
.iab-year-group > summary::after {
content: "";
flex: none;
width: var(--wp--custom--event--chevron);
height: var(--wp--custom--event--chevron);
margin-inline-start: auto;
border-right: 2px solid var(--wp--preset--color--accent);
border-bottom: 2px solid var(--wp--preset--color--accent);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
.iab-year-group[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.iab-year-group__count {
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--body-sm);
font-weight: 400;
color: var(--wp--custom--color--on-contrast-muted);
}
.iab-year-group > .iab-events { padding-block-end: var(--wp--preset--spacing--24); }
/* LO STATO VUOTO — quando non c'è niente in programma. Il testo sta nel
tema (inc/eventi.php): il giorno in cui servirà nessuno avrà voglia di
inventarlo. */
.iab-empty {
margin: 0;
padding: var(--wp--preset--spacing--32);
border: 1px dashed var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
font-size: var(--wp--preset--font-size--body-lg);
color: var(--wp--preset--color--base);
text-wrap: pretty;
}
/* LA LISTA DEGLI AVVISI — .iab-subscribe, nella chiusura (dalla 0.20.0).
Il modulo lo scrive il tema (inc/eventi.php); Brevo tiene
la lista. Due campi: email e consenso. I campi hanno il disegno di quelli
di /contatti/ (.iab-field), allineati a sinistra dentro la chiusura
centrata. Il bottone è giallo perché porta .wp-element-button. */
.iab-cta > .iab-subscribe,
.iab-cta > .iab-subscribe__done {
box-sizing: border-box;
width: 100%;
max-width: var(--wp--custom--event--form);
margin-inline: auto;
margin-block-start: var(--wp--preset--spacing--32);
text-align: start;
}
.iab-subscribe { display: grid; gap: var(--wp--preset--spacing--16); }
.iab-subscribe__row { display: grid; gap: var(--wp--preset--spacing--12); }
@media (min-width: 600px) {
.iab-subscribe__row { grid-template-columns: minmax(0, 1fr) auto; }
}
.iab-subscribe .iab-subscribe__send {
min-height: 48px;
border: 0;
white-space: nowrap;
cursor: pointer;
}
.iab-subscribe.is-sending .iab-subscribe__send {
opacity: 0.6;
cursor: progress;
}
.iab-subscribe__email.is-warned input { border-color: var(--wp--preset--color--accent); }
.iab-subscribe__consent {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--wp--preset--spacing--12);
align-items: start;
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
cursor: pointer;
}
.iab-subscribe__consent input {
width: var(--wp--custom--field--check);
height: var(--wp--custom--field--check);
margin: 1px 0 0;
accent-color: var(--wp--preset--color--accent);
cursor: pointer;
}
.iab-subscribe__consent a:where(:not(.wp-element-button)) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
.iab-subscribe__consent a:where(:not(.wp-element-button)):hover { text-decoration-thickness: 2px; }
/* l'errore dell'invio: giallo, come gli avvisi di /contatti/ */
.iab-subscribe > .iab-subscribe__error {
margin: 0;
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
color: var(--wp--preset--color--accent);
}
.iab-subscribe > .iab-subscribe__error[hidden] { display: none; }
/* la conferma prende il posto del modulo, come in /contatti/ */
.iab-cta > .iab-subscribe__done {
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-inline-start: 4px solid var(--wp--preset--color--accent);
border-radius: var(--wp--custom--radius--10);
background-color: var(--wp--custom--color--box-bg);
font-size: var(--wp--preset--font-size--body-lg);
color: var(--wp--preset--color--base);
text-wrap: pretty;
}
.iab-subscribe__done:focus { outline: none; }
.iab-cta > :is(.iab-subscribe, .iab-subscribe__done) + .iab-cta__hint { margin-block-start: var(--wp--preset--spacing--24); }
/* LA RIGA "PROSSIMO EVENTO" IN FONDO AGLI ARTICOLI — dentro la fascia
finale, sopra l'invito, come in home. Esclusa dalle regole dei bottoni
della chiusura (stacco di 32px). */
.iab-cta > .iab-event-strip { margin-block-end: var(--wp--preset--spacing--64); }
.iab-cta .iab-event-strip > .wp-block-buttons { margin-block-start: 0; }
.iab-cta .iab-event-strip + .is-style-eyebrow { margin-block-start: 0; }
/* ==========================================================================
PAGINE DI TESTO — dalla 0.26.0: /privacy/ e ogni pagina fatta solo di
testo (blocco pronto "Pagina di testo IAB"). La testata, poi una fascia
chiara con la classe .iab-prose: lo stesso disegno del corpo degli
articoli (sezione ARTICOLO, "CORPO"), quindi lo stesso nome. Qui solo
quello che la fascia cambia: il corpo del testo. La larghezza resta
quella delle fasce (1200px), allineata alla testata: scelta di Ivo nella
03m, contro la colonna di lettura degli articoli (38rem) che era la
proposta, per coerenza con le altre pagine.
========================================================================== */
:is(.wp-block-post-content, .is-root-container) > .iab-prose.alignfull {
font-size: var(--wp--preset--font-size--body-xl);
text-wrap: pretty;
}
/* ==========================================================================
RIFLESSIONI — dalla 0.28.0: la rubrica Società (blocco pronto
"Riflessione IAB"). Frasi, fascia finale e archivio li cambia
functions.php; qui solo il riquadro nuovo.
========================================================================== */
/* "Una domanda aperta" — chiude la riflessione. Fondo navy: è l'opposto di
"In breve" (fondo chiaro, in apertura), e chi scorre lo riconosce come la
fine del testo. La domanda è scritta grande, come la citazione nei casi.
Non si muove: non è cliccabile. */
.iab-question {
padding: var(--wp--preset--spacing--32);
border-radius: var(--wp--custom--radius--10);
background-color: var(--wp--preset--color--contrast);
color: var(--wp--custom--color--on-contrast-muted);
}
@media (max-width: 599.98px) {
.iab-question { padding: var(--wp--preset--spacing--24); }
}
:is(.iab-prose, .post-type-post .is-root-container) > .iab-question { margin-block-start: var(--wp--preset--spacing--48); }
.iab-question > * { margin-block: 0; }
.iab-question > h2 {
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
line-height: var(--wp--custom--line-height--ui);
letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
.iab-question > h2 + * { margin-block-start: var(--wp--preset--spacing--16); }
.iab-question > p + p { margin-block-start: var(--wp--preset--spacing--16); }
.iab-question > p:first-of-type {
font-family: var(--wp--preset--font-family--space-grotesk);
font-size: var(--wp--preset--font-size--h-3);
font-weight: 600;
line-height: var(--wp--custom--line-height--heading);
color: var(--wp--preset--color--base);
}
.iab-question :is(a:where(:not(.wp-element-button)), strong) { color: var(--wp--preset--color--base); }
.iab-question :focus-visible { box-shadow: var(--wp--custom--focus-ring); }
/* ==========================================================================
PAUSA E COOKIE — dalla 0.30.0 (chat 05e)
========================================================================== */
/* IL BOTTONE DI PAUSA — .iab-pause, lo crea componenti.js per la fascia
loghi e per il video della hero. Stesso disegno delle icone social del
piè di pagina: cerchio, contorno chiaro sottile, simbolo bianco. Al
passaggio il contorno si rinforza e si solleva (superficie cliccabile).
L'anello di focus è quello giallo delle fasce scure. */
.iab-pause,
.iab-consent__close {
flex: none;
display: grid;
place-items: center;
box-sizing: border-box;
width: var(--wp--custom--icon-button);
height: var(--wp--custom--icon-button);
margin: 0;
padding: 0;
border: 1px solid var(--wp--custom--color--on-contrast-muted);
border-radius: var(--wp--custom--radius--pill);
background: transparent;
color: var(--wp--preset--color--base);
cursor: pointer;
transition:
border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}
.iab-pause:hover,
.iab-consent__close:hover {
border-color: var(--wp--preset--color--base);
transform: translateY(-2px);
}
.iab-pause svg,
.iab-consent__close svg { width: 16px; height: 16px; }
/* nella hero: angolo in basso a destra, solo dove il video c'è (da 782px) */
.iab-hero > .iab-hero__pause {
position: absolute;
right: var(--wp--style--root--padding-right);
bottom: var(--wp--preset--spacing--24);
z-index: 2;
}
@media (max-width: 781.98px) {
.iab-hero > .iab-hero__pause { display: none; }
}
/* IL BANNER DEI COOKIE — .iab-consent (inc/pubblicita.php). Un riquadro in
basso a sinistra che non copre la pagina: si legge e si naviga anche
senza rispondere. Sotto i 600px occupa la parte bassa dello schermo, a
tutta larghezza. Fondo navy-700, un tono più chiaro del navy delle
pagine, così si stacca anche sopra le fasce scure. I due bottoni hanno
lo stesso stile, a contorno (decisione della 05e): nessuno dei due
spinge più dell'altro. */
.iab-consent {
position: fixed;
left: var(--wp--preset--spacing--24);
bottom: var(--wp--preset--spacing--24);
z-index: 60; /* sopra l'intestazione (50), sotto il menu aperto (100) */
box-sizing: border-box;
width: calc(100% - 2 * var(--wp--preset--spacing--24));
max-width: 34rem;
max-height: calc(100vh - 2 * var(--wp--preset--spacing--24));
overflow-y: auto;
padding: var(--wp--preset--spacing--32);
border: 1px solid var(--wp--custom--color--on-contrast-border);
border-radius: var(--wp--custom--radius--10);
background-color: var(--wp--custom--color--navy-700);
font-size: var(--wp--preset--font-size--body-sm);
line-height: var(--wp--custom--line-height--ui);
}
.iab-consent[hidden],
.iab-consent__view[hidden] { display: none; }
@media (max-width: 599.98px) {
.iab-consent {
left: 0;
bottom: 0;
width: 100%;
max-width: none;
max-height: 85vh;
padding: var(--wp--preset--spacing--24) var(--wp--style--root--padding-right) var(--wp--preset--spacing--24) var(--wp--style--root--padding-left);
border-width: 1px 0 0;
border-radius: var(--wp--custom--radius--10) var(--wp--custom--radius--10) 0 0;
}
}
.iab-consent > .iab-consent__close {
position: absolute;
top: var(--wp--preset--spacing--12);
right: var(--wp--preset--spacing--12);
}
.iab-consent__view > * { margin: 0; }
.iab-consent__view > * + * { margin-block-start: var(--wp--preset--spacing--12); }
.iab-consent .iab-consent__title {
padding-inline-end: var(--wp--preset--spacing--48); /* spazio per la X */
font-size: var(--wp--preset--font-size--h-3);
line-height: var(--wp--custom--line-height--heading);
}
.iab-consent a:where(:not(.wp-element-button)) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
.iab-consent a:where(:not(.wp-element-button)):hover { text-decoration-thickness: 2px; }
.iab-consent__view > .iab-consent__actions {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--12);
margin-block-start: var(--wp--preset--spacing--24);
}
/* il bottone a contorno del sito, ripetuto qui perché non è un blocco */
.iab-consent__btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 48px;
margin: 0;
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
border: 2px solid var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--pill);
background-color: transparent;
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: var(--wp--preset--font-size--body);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
transform var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}
.iab-consent__btn:hover {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
transform: translateY(-2px);
}
/* le righe del pannello "Gestisci cookie" */
.iab-consent__rows { margin-block-start: var(--wp--preset--spacing--16); }
.iab-consent__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wp--preset--spacing--16);
padding-block: var(--wp--preset--spacing--16);
border-block-start: 1px solid var(--wp--custom--color--on-contrast-border);
}
.iab-consent__row-text > * { display: block; }
.iab-consent__row-text > strong {
margin-block-end: var(--wp--preset--spacing--4);
font-weight: 600;
color: var(--wp--preset--color--base);
}
.iab-consent__fixed {
flex: none;
font-size: var(--wp--preset--font-size--caption);
font-weight: 600;
color: var(--wp--preset--color--accent);
}
/* l'interruttore: spento a contorno, acceso giallo (fondo, mai testo) */
.iab-consent__switch {
position: relative;
flex: none;
box-sizing: border-box;
width: 48px;
height: 28px;
margin: 0;
padding: 0;
border: 1px solid var(--wp--custom--color--on-contrast-muted);
border-radius: var(--wp--custom--radius--pill);
background-color: transparent;
cursor: pointer;
transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}
.iab-consent__switch::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--wp--preset--color--base);
transition: left var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}
.iab-consent__switch[aria-checked="true"] {
border-color: var(--wp--preset--color--accent);
background-color: var(--wp--preset--color--accent);
}
.iab-consent__switch[aria-checked="true"]::after {
left: 24px;
background-color: var(--wp--preset--color--contrast);
}
/* --------------------------------------------------------------------------
10. MOVIMENTO RIDOTTO — un blocco solo, in fondo, per tutto ciò che si muove
Chi aggiunge un movimento nuovo aggiunge qui il suo selettore.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.wp-block-button__link:hover,
.wp-element-button:hover,
.iab-tiles a:hover,
.iab-focus:not(.is-ready) > .iab-request:hover,
.iab-focus > .iab-request.is-active:hover,
.iab-card:hover,
.iab-area-grid > .iab-area-card:hover,
.iab-area-grid > .iab-area-card:focus-within,
.iab-filters a:hover,
.iab-pagination a:hover,
.iab-subscribe button[type="submit"]:hover,
.iab-footer__social a:hover,
.iab-pause:hover,
.iab-consent__close:hover,
.iab-consent__btn:hover { transform: none; }
.iab-consent__switch,
.iab-consent__switch::after { transition: none; }
.iab-sticky { transition: none; }
.iab-marquee__track { animation: none; }
.iab-focus.is-ready > *,
.iab-tiles a,
.iab-area-grid > .iab-area-card,
.iab-dots button::after { transition: none; }
.iab-steps.is-running *,
.iab-timeline.is-running * { animation: none; }
/* i passaggi di /come-lavoro/: disegno fermo, linea gialla piena */
.iab-steps.is-running > .iab-step:not(:last-child)::before,
.iab-steps.is-running > .iab-step:last-child::before,
.iab-steps.is-running .iab-spark::before,
.iab-steps.is-running .iab-spark::after { animation: none; }
.iab-steps > .iab-step:not(:last-child)::after { background-color: var(--wp--preset--color--accent); }
.iab-year-group > summary::after { transition: none; }
/* il pallino 1 dei passaggi brevi di /contatti/: fermo e pieno */
.iab-flow.is-running > .iab-flow__step:first-child::before { animation: none; }
/* la linea del tempo di /chi-sono/: disegno fermo, linea gialla piena */
.iab-timeline.is-running > .iab-tl-item:not(:last-child)::before,
.iab-timeline.is-running > .iab-tl-item:last-child::before,
.iab-timeline.is-running .iab-spark::before,
.iab-timeline.is-running .iab-spark::after { animation: none; }
.iab-timeline > .iab-tl-item:not(:last-child)::after { background-color: var(--wp--preset--color--accent); }
}