/* Theme Name: Wifidom Theme URI: https://www.wifidom.com/ Author: Allnet Italia Author URI: https://www.allnet-italia.it/ Description: Tema a blocchi del sito vetrina Wifidom. Si occupa solo di presentazione: il modello dei contenuti, i lead e le registrazioni ai corsi vivono nel plugin Wifidom Core. Requires at least: 7.0 Tested up to: 7.1 Requires PHP: 8.3 Version: 0.1.0 License: Proprietary Text Domain: wifidom Tags: full-site-editing, block-patterns, translation-ready, accessibility-ready, wide-blocks */ /* * Questo file contiene solo cio' che theme.json non sa esprimere. * Regole: nessun valore letterale (si consumano le custom properties dei preset), * nessun !important, nessun selettore discendente oltre due livelli — il markup * dei blocchi core cambia fra versioni di WordPress e un selettore profondo si * rompe a un aggiornamento a caso. * * I token arrivano con il modulo design-system (T5-T9): finche' design.md non * e' compilato, qui non deve comparire nulla. */ /* ========================================================================== 1. Padding orizzontale responsive theme.json non sa esprimere un breakpoint: dichiara i due valori come token e qui si scambia quello attivo. Il padding di root di WordPress consuma --wp--custom--padding--x, quindi ridefinirlo su :root basta. Breakpoint del progetto: 1024px (tablet) e 680px (mobile). `:root:root` E' DOPPIO APPOSTA, e non e' un refuso. Il core dichiara lo stesso token su `:root` — stessa specificita', 0,1,0 — e a parita' vince chi viene DOPO. Sul front end il tema viene dopo e vinceva; NELL'EDITOR l'ordine e' rovesciato, gli stili del tema entrano PRIMA di quelli globali, e questa regola restava inerte: a 660px di tela il padding misurava 40 invece di 20. Raddoppiare il selettore porta a 0,2,0 e chiude il pareggio in tutti e due i posti, senza `!important` e senza duplicare la regola per l'editor. ========================================================================== */ @media (max-width: 680px) { :root:root { --wp--custom--padding--x: var(--wp--custom--padding--x-mobile); } } /* ========================================================================== 1-bis. Involucro e contenuto si toccano ========================================================================== */ /* Il core emette, dal `blockGap` di root di theme.json: :where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--50) } e i figli diretti di `.wp-site-blocks` sono header, main e footer. Risultato: DUE spazi da 24px, header->main e main->footer, che nessuna sezione ha chiesto. Non si corregge in theme.json: `styles.spacing.blockGap` e' il gap PREDEFINITO di ogni layout del tema — gruppi, colonne, griglie — e azzerarlo li' appiattirebbe tutti gli spazi del sito per sistemarne due. Si corregge qui, e basta una classe: la regola del core ha specificita' ZERO, perche' `:where()` non contribuisce e `*` nemmeno. `.wp-site-blocks > *` pesa 0,1,0 e vince. E' la trappola 5 al contrario — di solito e' il core a battere il tema, qui e' il core ad aver scritto una regola che si lascia battere apposta. Ogni sezione porta il proprio padding verticale: fra un involucro e l'altro non ci va nulla. */ .wp-site-blocks > * { margin-block-start: 0; } /* ========================================================================== 2. Fuoco visibile WCAG 2.2 SC 2.4.7 e 2.4.11. theme.json non esprime :focus-visible. L'outline usa il primario: 9.72:1 su base, 8.98:1 su surface — molto oltre il 3:1 richiesto per un indicatore di fuoco. ========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary); outline-offset: var(--wp--custom--focus--offset); } /* Sulle sezioni in negativo l'outline scuro sparisce: si inverte in bianco. `.wifidom-negativo` MANCAVA, dal modulo `pages`, e se n'e' accorto il modulo `vocabolario` il 2026-10-09: nei cover la classe del colore sta sullo dell'overlay, non sulla sezione — la stessa ragione per cui esiste `.wifidom-negativo` — quindi il link «Inicio» delle briciole di OGNI pagina interna aveva l'anello `primary` su `contrast`, 1.66:1 contro i 3:1 di WCAG 1.4.11. `verifica-tema` controlla che l'anello ci sia, non che si veda. */ .has-contrast-background-color :focus-visible, .has-primary-background-color :focus-visible, .wifidom-negativo :focus-visible, .is-style-scuro :focus-visible { outline-color: var(--wp--preset--color--base); } /* E torna `primary` nelle card chiare dentro una sezione scura: bianco su bianco non si vede. Modulo `vocabolario`, M2 — trovato scrivendo la FAQ, non misurando. */ .is-style-scuro .is-style-card :focus-visible { outline-color: var(--wp--preset--color--primary); } /* ========================================================================== 3. Varianti di bottone theme.json copre solo il bottone predefinito. La variante "contorno" e' lo stile di blocco nativo del core, quindi non serve registrarne uno nuovo. ========================================================================== */ .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) { background-color: transparent; border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); /* Il core impone a questo stile un padding in em, diverso da quello che theme.json da' al bottone pieno: affiancati risultavano alti 39px e 49px. Trovato in browser misurando le due posizioni verticali. */ padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); } .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background-color: var(--wp--preset--color--surface-tint); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-hover); } /* I link dentro una sezione in negativo. `styles.elements.link` di theme.json da' loro il primario, che su `contrast` sta a **1.66:1**: illeggibile. Misurato in P3 sulle briciole dell'hero. ATTENZIONE: questa regola NON raggiunge un `core/cover`. In un cover la classe del colore sta sullo dell'overlay, non sulla sezione, quindi il contenuto non e' discendente di un elemento `.has-*-background-color`. I cover si vestono per classe propria — vedi `.wifidom-hero-interior` piu' sotto. */ .has-contrast-background-color a:not(.wp-element-button), .has-primary-background-color a:not(.wp-element-button) { color: var(--wp--preset--color--on-dark); } .has-contrast-background-color a:not(.wp-element-button):hover, .has-primary-background-color a:not(.wp-element-button):hover { color: var(--wp--preset--color--base); } /* Bottoni dentro una sezione in negativo: il primario passa al secondario, perche' il primario su fondo scuro non si distingue. */ .has-contrast-background-color .wp-element-button, .has-primary-background-color .wp-element-button, .wifidom-negativo .wp-element-button, .is-style-scuro .wp-element-button { background-color: var(--wp--preset--color--secondary); border-color: var(--wp--preset--color--secondary); } .has-contrast-background-color .wp-element-button:hover, .has-primary-background-color .wp-element-button:hover, .wifidom-negativo .wp-element-button:hover, .is-style-scuro .wp-element-button:hover { background-color: var(--wp--preset--color--secondary-strong); border-color: var(--wp--preset--color--secondary-strong); } /* Il bottone a contorno su fondo scuro. TRE livelli di discendenza, contro la regola dei due: il selettore del core per lo stile a contorno ne usa gia' due, e batterlo richiede il terzo. E' l'unico punto del tema dove succede. `design.md` §5 vuole il bordo a `rgba(255,255,255,.6)`; qui e' `base`, cioe' bianco pieno. Motivo: .6 sarebbe un valore letterale e servirebbe un token nuovo, e il bianco pieno da' piu' contrasto — WCAG 1.4.11 chiede >= 3:1 per il bordo di un controllo. Deviazione dichiarata. */ .wifidom-negativo .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background), .is-style-scuro .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) { background-color: transparent; border-color: var(--wp--preset--color--base); color: var(--wp--preset--color--base); } .wifidom-negativo .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover, .is-style-scuro .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background-color: rgba(255, 255, 255, 0.12); border-color: var(--wp--preset--color--base); color: var(--wp--preset--color--base); } /* Un `core/cover` non porta la classe del colore su di se': sta sullo dell'overlay. Quindi ne' i link ne' l'eyebrow ricadono nelle regole generali delle sezioni in negativo, e i cover si vestono per classe propria. Vale per ogni cover del tema, e da qui in avanti sono due. */ /* `.wifidom-negativo` E' L'AGGANCIO DEI COVER SCURI, e nasce dopo la terza volta. In un `core/cover` la classe del colore sta sullo `` dell'overlay, non sulla sezione: nessuna delle regole `.has-contrast-background-color ...` lo raggiunge. Le prime due volte ho aggiunto il nome del pattern alla lista dei selettori — link dell'hero, poi eyebrow della card. Alla terza (il bottone dell'hero della home, che rendeva `primary` su fondo scuro) la lista sarebbe diventata la regola. Ora i cover scuri portano `wifidom-negativo`, e tutto ciò che vale per una sezione in negativo si aggancia anche a quello. */ .wifidom-negativo a:not(.wp-element-button), .is-style-scuro a:not(.wp-element-button) { color: inherit; } .wifidom-negativo a:not(.wp-element-button):hover, .is-style-scuro a:not(.wp-element-button):hover { color: var(--wp--preset--color--base); } .wifidom-negativo .is-style-eyebrow, .is-style-scuro .is-style-eyebrow { color: var(--wp--preset--color--accent-light); } /* ========================================================================== 4. Stili di blocco del tema Registrati in functions.php. L'eyebrow non puo' stare in theme.json: e' una combinazione di dimensione, peso, spaziatura e maiuscolo che nessun preset singolo esprime. ========================================================================== */ .is-style-eyebrow { color: var(--wp--preset--color--secondary-strong); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 600; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; } /* Su fondo scuro il teal scurito non si legge: 1.55:1 su contrast. */ .has-contrast-background-color .is-style-eyebrow, .has-primary-background-color .is-style-eyebrow { color: var(--wp--preset--color--accent-light); } /* L'etichetta maiuscola non dichiara un colore: lo prende dal blocco, cosi' la stessa forma tipografica funziona su fondo chiaro e su fondo scuro senza un'eccezione per ciascuno. */ .is-style-label { font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .is-style-dato { font-size: var(--wp--preset--font-size--dato); font-weight: 700; line-height: 1; } .is-style-card { background-color: var(--wp--preset--color--base); border: var(--wp--custom--border--width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--50); } .is-style-card:hover { border-color: var(--wp--preset--color--secondary); box-shadow: var(--wp--preset--shadow--card); } /* La card di rimando — `grid-enlaces`, modulo `vocabolario`. Il link e' il titolo, e il suo `::after` steso rende cliccabile la card intera: qui funziona perche' la card e' un gruppo, posizionato, e `inset: 0` arriva ai suoi bordi. Nelle card fotografiche no — vedi il loro blocco, piu' sotto. Il fuoco si disegna sulla card e non sul titolo, per la stessa ragione delle card fotografiche: un anello attorno a due righe di testo dentro un riquadro cliccabile dice male dov'e' il bersaglio. */ .wifidom-card-enlace { position: relative; } .wifidom-card-enlace h3 a::after { content: ""; inset: 0; position: absolute; } .wifidom-card-enlace:focus-within { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary); outline-offset: var(--wp--custom--focus--offset); } .wifidom-card-enlace h3 a:focus-visible { outline: none; } /* In una sezione scura l'anello sta FUORI dalla card, cioe' sul fondo scuro. */ .is-style-scuro .wifidom-card-enlace:focus-within { outline-color: var(--wp--preset--color--base); } /* La scheda del referente — `cta-referente`. La foto e' un ritratto quadrato e piccolo, non una foto di sezione: 120px bastano a riconoscere una persona, e a tutta larghezza la card sarebbe per due terzi una faccia. */ .wifidom-referente .wp-block-image.wifidom-media { border-radius: 50%; max-width: 120px; } /* Lo SFONDO di una sezione del vocabolario: nessuno stile = chiaro, `alternato`, `scuro`. Modulo `vocabolario`, D3. E' UNO STILE DI BLOCCO, non `backgroundColor`, perche' lo scuro non e' un fondo: e' un fondo PIU' i colori di tutto quello che ci sta sopra. Con l'attributo, scurire una sezione voleva dire cambiare anche il colore di ogni titolo e di ogni paragrafo attenuato — `franja-datos` e `hero-interior` lo fanno blocco per blocco. Un agente che cambia solo il fondo scrive testo scuro su fondo scuro. Qui lo scuro e' un punto solo, e due stili sullo stesso blocco si escludono: una sezione «alternata e scura» non si puo' scrivere. Link, bottoni ed eyebrow li veste gia' il blocco 3, insieme a `wifidom-negativo`. Qui restano i titoli e il testo, che nei cover hanno sempre avuto un `textColor` esplicito e quindi nessuna regola. */ .wp-block-group.is-style-alternato { background-color: var(--wp--preset--color--surface); } .wp-block-group.is-style-scuro { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-dark); } /* 0,1,1 contro lo 0,1,0 di `:root :where(h1, …)` che theme.json genera per `elements.heading`: vince per specificita', quindi anche nell'editor, dove l'ordine dei fogli e' rovesciato (vedi functions.php, add_editor_styles). */ .is-style-scuro :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--base); } /* Il core stampa le classi dei colori con `!important`: si batte solo con un altro `!important` piu' specifico. `muted` su `contrast` sarebbe 2.9:1. */ .is-style-scuro .has-muted-color { color: var(--wp--preset--color--on-dark-muted) !important; } /* LE CARD RESTANO CHIARE. Una card ha fondo `base` suo, quindi dentro una sezione scura e' un'isola chiara, e i colori vanno rimessi come fuori. Senza, il titolo di una card diventava bianco su bianco. */ .is-style-scuro .is-style-card { color: var(--wp--preset--color--contrast); } .is-style-scuro .is-style-card :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--contrast); } .is-style-scuro .is-style-card .has-muted-color { color: var(--wp--preset--color--muted) !important; } .is-style-scuro .is-style-card a:not(.wp-element-button) { color: var(--wp--preset--color--primary); } .is-style-scuro .is-style-card .is-style-eyebrow { color: var(--wp--preset--color--secondary-strong); } /* ========================================================================== 5. Ancore sotto un header sticky WCAG 2.2 SC 2.4.11: dopo un errore il fuoco va su un campo che finirebbe coperto dall'header. Vale per i due wrapper dei form, che sono il bersaglio dell'ancora nel percorso senza JavaScript. ========================================================================== */ :target, .wifidom-formulario, .wifidom-inscripcion-cerrada { /* Il token e' l'altezza del contenuto dell'header; il bordo inferiore aggiunge il suo pixel, e occlude come il resto. Misurato: 72 + 1 = 73px reali. */ scroll-margin-top: calc( var(--wp--custom--header--height) + var(--wp--custom--border--width) ); } /* ========================================================================== 6. Form di wifidom-core Il plugin genera il markup e zero CSS: il 100% dell'aspetto e' qui. Inventario degli agganci e degli stati: docs/design/ANALISI-form.md. Le regole a tre livelli sotto .wifidom-* sono ammesse: quel markup e' nostro (sta nel plugin, che possiamo modificare), non markup di blocchi core che cambia fra versioni di WordPress. ========================================================================== */ /* --- 6.1 Il campo esca. BLOCCANTE. Nel plugin ha aria-hidden e tabindex="-1" ma nessuna regola CSS: senza questa, in pagina si vede un'etichetta "No rellenes este campo" con un campo sotto, e chi lo compila si vede l'invio respinto senza spiegazione. */ .wifidom-hp { border: 0; clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* --- 6.2 Il contenitore */ .wifidom-formulario { margin-inline: auto; max-width: var(--wp--style--global--content-size); } /* L'iscrizione ha una veste propria: e' un'azione, non un modulo di contatto. Il plugin le mette la classe aggiuntiva .wifidom-inscripcion apposta. */ .wifidom-inscripcion { background-color: var(--wp--preset--color--surface); border: var(--wp--custom--border--width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--60); } /* --- 6.3 La griglia dei campi Due colonne su desktop, una sotto i 680px. Il markup e' una sequenza di

fratelli, quindi i conteggi dispari lasciano un buco: si accetta l'asimmetria, perche' riordinare romperebbe l'ordine di tabulazione. */ .wifidom-campos { display: grid; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); grid-template-columns: repeat(2, minmax(0, 1fr)); } .wifidom-campo { margin: 0; } .wifidom-campo--ancho { grid-column: 1 / -1; } @media (max-width: 680px) { .wifidom-campos { grid-template-columns: minmax(0, 1fr); } } /* --- 6.4 Etichette e controlli Etichetta sopra il controllo: e' la struttura naturale del markup ed e' quella che regge la dilatazione del portoghese (+20-30%). Il bordo dei campi usa line-strong (3.60:1), non line (1.27:1): WCAG 2.2 SC 1.4.11 chiede >= 3:1 fra il bordo di un controllo e lo sfondo. E' una deviazione deliberata da design.md §5, registrata in audit-CP0. */ .wifidom-campo label { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 600; margin-bottom: var(--wp--preset--spacing--20); } /* L'asterisco di obbligatorieta' e' dentro la label e non ha una classe: serve un selettore ad attributo. */ .wifidom-campo label span[aria-hidden="true"] { color: var(--wp--custom--state--error); } .wifidom-campo :where(input, select, textarea) { background-color: var(--wp--preset--color--base); border: var(--wp--custom--border--width) solid var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--control); /* Senza questo il controllo sfonda la cella della griglia di 34px: WordPress non dichiara box-sizing globalmente, quindi width:100% piu' padding piu' bordo eccedono la colonna. Trovato in browser, non era visibile nel CSS. */ box-sizing: border-box; color: var(--wp--preset--color--contrast); font-family: inherit; font-size: var(--wp--preset--font-size--body); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); width: 100%; } .wifidom-campo :where(input, select, textarea):focus { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--custom--focus--halo); outline: none; } .wifidom-campo :where(input, select, textarea):focus-visible { box-shadow: var(--wp--custom--focus--halo); outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary); outline-offset: 0; } .wifidom-campo textarea { line-height: 1.6; min-height: 8rem; resize: vertical; } /* --- 6.5 Errore sul campo [aria-invalid="true"] e' l'unico segnale che il plugin mette sul controllo. WCAG SC 1.4.1: il colore non basta. I segnali sono tre: bordo piu' spesso, sfondo, e il testo che il plugin scrive nello span. Il bordo usa width-strong, che vale 2px e non 1.5px: verificato in Chrome che un bordo di 1.5px viene reso 1px sia a 1x sia a 2x, quindi un campo in errore sarebbe risultato dello stesso spessore di uno sano. */ .wifidom-campo [aria-invalid="true"] { background-color: var(--wp--custom--state--error-surface); border-color: var(--wp--custom--state--error); border-width: var(--wp--custom--border--width-strong); } .wifidom-campo-error { color: var(--wp--custom--state--error); display: block; font-size: var(--wp--preset--font-size--small); font-weight: 500; margin-top: var(--wp--preset--spacing--20); } .wifidom-campo-error:empty { display: none; } /* --- 6.6 Consensi Sono due, separati, e nessuno pre-spuntato: e' conformita', non layout. La checkbox e' allineata alla prima riga del testo, non centrata sul blocco, perche' la frase va a capo (e in portoghese va a capo di piu'). 1.5rem = 24px e' il minimo di WCAG 2.2 SC 2.5.8: la nativa e' ~13px. */ .wifidom-consentimiento { align-items: flex-start; display: flex; font-size: var(--wp--preset--font-size--small); gap: var(--wp--preset--spacing--30); line-height: 1.5; margin-top: var(--wp--preset--spacing--40); } .wifidom-consentimiento input[type="checkbox"] { accent-color: var(--wp--preset--color--primary); flex: 0 0 auto; height: 1.5rem; margin: 0; width: 1.5rem; } /* --- 6.7 Riga del bottone Il submit e' .wp-element-button, quindi eredita da theme.json. Serve solo lo stato "spento", che il JS del plugin usa durante l'invio: e' l'unico segnale che qualcosa sta succedendo. */ .wifidom-acciones { margin-top: var(--wp--preset--spacing--50); } .wifidom-acciones button[disabled] { cursor: progress; opacity: 0.6; } /* --- 6.8 Messaggio d'esito. BLOCCANTE. Il

viene stampato a ogni rendering, vuoto finche' non c'e' un esito: se lo stile gli desse sfondo senza condizione, sotto ogni bottone Enviar comparirebbe un rettangolo colorato vuoto. Lo stile sta solo sulle classi di stato. */ .wifidom-form-estado { margin-top: var(--wp--preset--spacing--40); } .wifidom-form-estado:where(.is-ok, .is-error) { border-left: var(--wp--custom--border--width-strong) solid; border-radius: var(--wp--custom--radius--control); font-size: var(--wp--preset--font-size--small); padding: var(--wp--preset--spacing--40); } .wifidom-form-estado.is-ok { background-color: var(--wp--custom--state--success-surface); border-left-color: var(--wp--custom--state--success); color: var(--wp--custom--state--success); } .wifidom-form-estado.is-error { background-color: var(--wp--custom--state--error-surface); border-left-color: var(--wp--custom--state--error); color: var(--wp--custom--state--error); } /* --- 6.9 Iscrizione non possibile Il plugin manda tutti e tre gli avvisi con .is-error, e "Curso finalizado" in rosso comunica un guasto che non c'e'. Non si puo' distinguere lo stato dal CSS, ma il contenitore .wifidom-inscripcion-cerrada si', quindi lo vestiamo in tono neutro senza toccare il plugin. */ .wifidom-inscripcion-cerrada .wifidom-form-estado.is-error { background-color: var(--wp--custom--state--notice-surface); border-left-color: var(--wp--custom--state--notice); color: var(--wp--custom--state--notice); } /* L'hero della home: due colonne asimmetriche e il pannello notizie. Il rapporto `1.2fr .8fr` viene dalla bozza e il layout `grid` del core non lo esprime: `columnCount` fa solo colonne uguali. Sotto i 1024 il collasso e' quello di `wifidom-griglia-2`, cioe' una colonna. */ .wifidom-hero-home-griglia { grid-template-columns: 1.2fr 0.8fr; } /* Il pannello e' un riquadro sul fondo scuro: si stacca con un bordo a bassa opacita', lo stesso token del divisore del footer. */ .wifidom-hero-noticias { border: var(--wp--custom--border--width) solid var(--wp--custom--border--on-dark); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--50); } /* Le voci del query loop: una riga per notizia, separate da un filo. */ .wifidom-hero-noticias-lista .wp-block-post-template { gap: 0; } .wifidom-hero-noticias-lista .wp-block-post-template > li + li { border-top: var(--wp--custom--border--width) solid var(--wp--custom--border--on-dark); margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--40); } /* ========================================================================== 6-bis. Gli altri blocchi di wifidom-core, vestiti La sezione 6 veste il form. Questi quattro blocchi — calendario, corsi in evidenza, fabbricanti, scheda corso — rendevano un markup che NESSUNO vestiva: ventuno classi senza una regola, trovate facendo l'inventario in P9. Fra queste due sono STILI DI BLOCCO che il plugin stampa e si aspetta dal tema, `is-style-wifidom-card` e `is-style-wifidom-tag`: la stessa forma di dipendenza dei preset `h-2` e `h-3`, e lo stesso silenzio se manca. Non si registrano con `register_block_style()`: il plugin le applica da se', e registrarle le offrirebbe anche nell'editor su blocchi qualunque. La griglia del plugin ha una convenzione SUA — `wifidom-grid--3` e `--4` — diversa dalla nostra `wifidom-griglia-N`. Non si tocca la logica del plugin, quindi si aggancia la stessa regola di collasso a entrambi i nomi: un solo comportamento, due nomi. ========================================================================== */ .wifidom-grid { display: grid; gap: var(--wp--preset--spacing--50); list-style: none; margin: 0; padding: 0; } .wifidom-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wifidom-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Lo stile di card che il plugin pretende: le stesse scelte di `is-style-card`, perche' una card del plugin e una card del tema che si vedono nella stessa pagina devono essere la stessa cosa. */ .is-style-wifidom-card { background-color: var(--wp--preset--color--base); border: var(--wp--custom--border--width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--50); } .is-style-wifidom-card:hover { border-color: var(--wp--preset--color--secondary); box-shadow: var(--wp--preset--shadow--card); } /* Il tag del tipo di formazione: un chip. Non dichiara un colore di testo per lo stesso motivo di `is-style-label` — cosi' funziona anche su fondo scuro. */ .is-style-wifidom-tag { background-color: var(--wp--preset--color--surface-tint); border-radius: var(--wp--custom--radius--chip); display: inline-block; font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.1em; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30); text-transform: uppercase; } /* Un tag vuoto non si stampa: senza tipo di formazione il plugin rende il paragrafo comunque, e un chip vuoto e' un rettangolo che non dice niente. */ .is-style-wifidom-tag:empty { display: none; } /* ========================================================================== 6-quinquies. Il campo di ricerca di `core/search` Compare in tre viste di `system-views`: il 404, la ricerca senza risultati e l'elenco vuoto. E' l'unico controllo di form che non viene da `wifidom-core`. ========================================================================== */ /* Il bordo sta sull'INVOLUCRO, non sull'input: con `button-inside` il core mette input e bottone dentro un contenitore, e un bordo per pezzo darebbe due cornici. `line-strong` (3.60:1) e non `line` (1.27:1), per SC 1.4.11 — la stessa deviazione deliberata dei campi del form. */ .wifidom-ricerca .wp-block-search__inside-wrapper { background-color: var(--wp--preset--color--base); border: var(--wp--custom--border--width) solid var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--control); padding: 0; } /* IL FUOCO VA SULL'INVOLUCRO, ED E' UNA CORREZIONE OBBLIGATA, non una preferenza. Il core dichiara :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus { outline: none } che pesa 0,2,0 — mentre la regola generale del tema, riga 48, e' `:where(a, button, input, …):focus-visible`, e `:where()` contribuisce ZERO alla specificita': pesa 0,1,0 e perde. Misurato nel foglio SERVITO il 2026-08-26: l'input della ricerca era l'unico elemento tabulabile del sito senza indicatore di fuoco, `outline: 3px none`. Il core toglie l'anello all'input perche' si aspetta che lo disegni l'involucro: qui glielo si disegna. Trappola 5, e trappola 11 — l'anello su un ANTENATO e' un indicatore valido per SC 2.4.7, e `percorsoTastiera()` risale. */ .wifidom-ricerca .wp-block-search__inside-wrapper:focus-within { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--custom--focus--halo); outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary); outline-offset: var(--wp--custom--focus--offset); } .wifidom-ricerca .wp-block-search__input { background-color: transparent; border: 0; color: var(--wp--preset--color--contrast); font-family: inherit; font-size: var(--wp--preset--font-size--body); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); } /* ========================================================================== 6-bis. La scheda del fabbricante — `single-wifidom_fabricante` Tre regole, e tutte e tre esistono per la stessa ragione: un binding puo' riempire un attributo, non puo' TOGLIERE un blocco. Quando il dato manca il blocco esce comunque, e a farlo sparire e' il CSS. ========================================================================== */ /* Il logo non e' un'immagine di copertina: sta alla sua altezza naturale e non allarga niente. Stesso motivo della regola su `.wifidom-fabricante-logo`. */ .wifidom-ficha-fabricante-logo img { height: auto; max-height: var(--wp--preset--spacing--100); max-width: 100%; object-fit: contain; width: auto; } /* ========================================================================== 6-quater. Il dettaglio del corso — `single-wifidom_curso` ========================================================================== */ /* Il collasso lo porta `wifidom-griglia-2` (2 -> 1 a 1024, tabella dell'audit §7): qui si dichiara solo il RAPPORTO, come fa `wifidom-hero-home-griglia`. `minmax(0, …)` e non `2fr 1fr` per la ragione misurata in C2: `fr` non scende sotto il min-content, e un'immagine nel contenuto terrebbe aperta la colonna. */ .wifidom-detalle-curso-griglia { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } /* L'aside sticky. I blocchi core non espongono `position: sticky` se non per l'header di primo livello — audit §3 — quindi la regola sta qui. `align-self: start` NON E' OPZIONALE: senza, l'elemento della griglia si stira all'altezza della riga, non gli resta spazio per scorrere, e sticky non ha alcun effetto senza produrre nessun errore. Il `top` e' derivato, non i 96px della bozza: altezza dell'header piu' il suo bordo piu' una spaziatura del sistema. Se l'header cambia altezza, l'aside la segue. */ .wifidom-detalle-curso-aside { align-self: start; position: sticky; top: calc( var(--wp--custom--header--height) + var(--wp--custom--border--width) + var(--wp--preset--spacing--50) ); } /* ========================================================================== 6-ter. L'hero della scheda corso — `single-wifidom_curso` Stessa ragione delle regole qui sopra: un binding riempie un attributo, non toglie un blocco. Qui il blocco da togliere e' una COPPIA — etichetta piu' valore — e l'etichetta non e' mai vuota: senza questa regola un corso senza luogo mostrerebbe «Lugar» e nient'altro. ========================================================================== */ .wifidom-hero-curso-dato:has(.wifidom-hero-curso-valore:empty) { display: none; } /* E se nessuno dei tre dati ha un valore, il contenitore si chiude con loro. */ .wifidom-hero-curso-dati:not(:has(.wifidom-hero-curso-valore:not(:empty))) { display: none; } /* I badge dell'hero stanno su fondo scuro: il chip prende il suo fondo dal token chiaro, che li' sparirebbe. `wifidom-negativo` non arriva a `is-style-wifidom-tag` perche' quella regola dichiara gia' il proprio `background-color`. */ .wifidom-hero-curso .is-style-wifidom-tag { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-dark); } /* Un bottone il cui URL viene da un meta ASSENTE esce con `href=""`, cioe' un link alla pagina corrente: misurato il 2026-08-26 su Marca Epsilon. Un link che non porta da nessuna parte e' anche una tappa di tabulazione che non fa niente, quindi si toglie dal flusso e dall'albero di accessibilita' insieme. */ .wifidom-ficha-fabricante-enlaces .wp-block-button__link[href=""], .wifidom-ficha-fabricante-enlaces .wp-block-button__link:not([href]) { display: none; } /* E se nessuno dei due bottoni ha un URL, resta un contenitore flex vuoto che si porta dietro il proprio spazio. `:not(:has(…))` lo chiude. */ .wifidom-ficha-fabricante-enlaces:not(:has(.wp-block-button__link[href]:not([href=""]))) { display: none; } .wifidom-curso-meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); } /* Il calendario: una riga per corso, data a sinistra. */ .wifidom-calendario-mes + .wifidom-calendario-mes { margin-top: var(--wp--preset--spacing--70); } .wifidom-calendario-lista { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; } .wifidom-calendario-fila { align-items: baseline; border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--line); display: flex; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--40) 0; } /* La data e' una colonna fissa: incolonnata, si legge come un calendario. */ .wifidom-calendario-fecha { color: var(--wp--preset--color--primary); flex: 0 0 auto; font-size: var(--wp--preset--font-size--small); font-weight: 600; min-width: var(--wp--preset--spacing--90); text-transform: uppercase; } .wifidom-calendario-titulo { display: block; } .wifidom-calendario-meta { color: var(--wp--preset--color--muted); display: block; font-size: var(--wp--preset--font-size--small); margin-top: var(--wp--preset--spacing--10); } /* I fabbricanti: `design.md` §8 vuole un contenitore di altezza fissa con il logo centrato e mai ritagliato. Finche' i loghi non ci sono il blocco rende il NOME, e il contenitore vale ugualmente: e' quello che tiene la fila allineata. */ .wifidom-fabricante { display: flex; } .wifidom-fabricante-enlace { align-items: center; background-color: var(--wp--preset--color--base); border: var(--wp--custom--border--width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--control); display: flex; justify-content: center; min-height: var(--wp--preset--spacing--80); padding: var(--wp--preset--spacing--30); text-align: center; width: 100%; } .wifidom-fabricante-enlace:hover { border-color: var(--wp--preset--color--secondary); } /* Il logo e il nome si INCOLONNANO: con `display: flex` e nessuna direzione stavano affiancati, che non e' la card di nessuna bozza. Non si vedeva finche' nessun marchio aveva un'immagine in evidenza — cioe' fino alle fixture di C2. */ .wifidom-fabricante-enlace { flex-direction: column; gap: var(--wp--preset--spacing--20); } /* L'immagine non deve allargare la traccia della griglia. `1fr` e' `minmax(auto, 1fr)` e `auto` non scende sotto il min-content: senza `max-width`, un logo da 300px teneva aperte quattro colonne su un viewport da 1200 e la pagina sfondava di 412px. Misurato il 2026-08-26, e invisibile prima perche' il logo non esisteva. */ .wifidom-fabricante-logo { height: auto; max-height: var(--wp--preset--spacing--80); max-width: 100%; object-fit: contain; width: auto; } .wifidom-fabricante-nombre { font-size: var(--wp--preset--font-size--small); font-weight: 600; } /* La sezione «marchi associati» delle pagine di area E' il blocco del plugin, senza un gruppo che lo avvolga — ed e' voluto: se il titolo stesse in un `core/heading` del pattern sopravviverebbe al blocco, e su una pagina senza area resterebbe un'intestazione che introduce il vuoto. Il blocco esce prima di stampare il proprio titolo, quindi la sezione sparisce per intero. Conseguenza: l'allineamento lo deve fare questa regola, perche' non c'e' un layout `constrained` che lo faccia. Full-bleed con il padding di root, e i figli incolonnati a `contentSize`: e' quello che `has-global-padding` fa per gli altri. */ .wifidom-sezione-marcas { padding-block: var(--wp--preset--spacing--100); padding-inline: var(--wp--custom--padding--x); } .wifidom-sezione-marcas > * { margin-inline: auto; max-width: var(--wp--style--global--content-size); } /* La scheda dati di `wifidom/ficha-curso`, vestita in C10. P9 la lasciava scoperta di proposito: e' il dettaglio del corso, cioe' `single-wifidom_curso`, che appartiene a `cpt-views`. E' l'unico blocco del plugin che il tema veste da zero: gli altri tre portano gia' una classe sorella che li copre — `is-style-wifidom-card` sulla card di un corso, `wifidom-grid--3` e `--4` sulle due liste. Misurato in C10 sul foglio SERVITO, non dedotto dai nomi: sette classi su undici non hanno una regola propria e non devono averla. L'elenco di chi copre chi e' nella regola J di `check-i18n.php`. */ .wifidom-ficha { background-color: var(--wp--preset--color--surface); border: var(--wp--custom--border--width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--50); } .wifidom-ficha-lista { margin: 0; } /* Etichetta a sinistra, valore a destra, e un divisore fra le righe ma non sopra la prima. Il `

` porta un margine sinistro di 40px dal foglio del browser: senza azzerarlo il valore non arriva mai al bordo destro. */ .wifidom-ficha-fila { align-items: baseline; border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--line); display: flex; gap: var(--wp--preset--spacing--30); justify-content: space-between; padding-block: var(--wp--preset--spacing--30); } .wifidom-ficha-fila:first-child { border-top: 0; padding-top: 0; } .wifidom-ficha-fila dt { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); } .wifidom-ficha-fila dd { font-weight: 600; margin: 0; text-align: right; } .wifidom-ficha-nota { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin-block: var(--wp--preset--spacing--30) 0; } /* ========================================================================== 6-sexies. La tira di loghi che scorre Sostituisce la griglia statica il 2026-08-27. Zero JavaScript: `transform` piu' `@keyframes`, animato sul compositore. ========================================================================== */ /* Il taglio, e la ragione per cui la tira esce dal contenitore: una fila che scorre dentro 1200px sembra una casella, non un flusso — i loghi devono entrare e uscire dai bordi della finestra. L'uscita la fa `align: full` sul blocco, non un margine negativo scritto qui: con `useRootPaddingAwareAlignments` il core sa gia' quanto togliere, e un margine mio si sarebbe sommato al suo. Provato: con il margine negativo il taglio restava a 1200, perche' il layout `constrained` del genitore rimette `margin-inline: auto`. `overflow: hidden` e' anche cio' che impedisce alla pista — larga 2216px — di allargare la pagina. */ .wifidom-marquee { overflow: hidden; } /* La pista NON dichiara `display`. Il layout flex glielo da' il core dagli attributi del blocco, e una regola del tema su una classe sola perderebbe comunque contro `body .is-layout-flex`, che pesa 0,1,1 — la trappola 5, pagata in S3. Qui si aggiunge solo cio' che il core non tocca: la larghezza e l'animazione. */ .wifidom-marquee-pista { width: max-content; } .wifidom-marquee-logo img { height: var(--wp--preset--spacing--70); max-width: none; width: auto; } /* Il 50% e' esatto perche' la pista contiene la sequenza DUE volte: a meta' corsa il fotogramma coincide con quello di partenza, e la giuntura non esiste. */ @keyframes wifidom-scorri { to { transform: translateX(-50%); } } /* ========================================================================== 7. Movimento design.md §9: nessuna animazione legata allo scroll. Le transizioni su hover e focus rispettano prefers-reduced-motion. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* Lo scorrimento della tira loghi sta QUI, non fuori: cosi' chi ha chiesto meno movimento non lo riceve affatto, invece di riceverlo e vederselo fermare. La durata e' proporzionata a dodici loghi: lenta abbastanza da leggerli. */ .wifidom-marquee-pista { animation: wifidom-scorri 40s linear infinite; } /* 🔴 IL FERMO IN HOVER NON SODDISFA WCAG 2.2.2, ed e' una deviazione DICHIARATA, non una dimenticanza. Il criterio (Livello A) chiede un MECCANISMO per fermare cio' che si muove da solo oltre i 5 secondi: l'hover copre il mouse, non la tastiera ne' il tocco. Decisione del committente il 2026-08-27, presa sapendolo. `:focus-within` e' l'aggiunta che non costa nulla: chi tabula dentro i loghi lo ferma. Non e' un meccanismo ai sensi del criterio — non c'e' un comando da trovare — ma e' meglio del solo hover, e per un utente da tastiera cambia. */ .wifidom-marquee:hover .wifidom-marquee-pista, .wifidom-marquee:focus-within .wifidom-marquee-pista { animation-play-state: paused; } .wp-element-button, .is-style-card, .is-style-wifidom-card, .wifidom-fabricante-enlace, .wifidom-persona, .wifidom-campo :where(input, select, textarea) { transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast); } /* La comparsa della CTA: 300ms, `design.md` §9. */ .wifidom-card-foto-cta { transition: opacity var(--wp--custom--transition--medium); } /* * Lo zoom dell'immagine: 550ms, `design.md` §9, che e' esattamente * `transition--slow`. Il bersaglio e' l'immagine di fondo del cover, che * ESISTE SOLO QUANDO C'E' UNA FOTO: oggi le bozze non ne hanno nessuna, * quindi questa regola non e' verificabile — ed e' dichiarata come tale nel * task P7, non lasciata a sembrare verificata. */ .wifidom-card-foto .wp-block-cover__image-background { transition: transform var(--wp--custom--transition--slow); } .wifidom-card-foto:hover .wp-block-cover__image-background { transform: scale( 1.04 ); } } @media (prefers-reduced-motion: reduce) { /* Senza movimento la pista e' una fila ferma: si manda a capo e si centra, o meta' dei loghi resterebbe fuori dal taglio. E la COPIA sparisce, o si leggerebbero sei marchi due volte. */ .wifidom-marquee-pista { flex-wrap: wrap; justify-content: center; width: auto; } .wifidom-marquee-gruppo.is-copia { display: none; } } /* ========================================================================== 8. Footer Il layout grid del core da' 4 colonne uguali; il design vuole la prima piu' larga, e un collasso 4 → 2 → 1 che il core non esprime. Tre regole. ========================================================================== */ .wifidom-footer-colonne { border-bottom: var(--wp--custom--border--width) solid var(--wp--custom--border--on-dark); grid-template-columns: 1.5fr 1fr 1fr 1fr; } @media (max-width: 1024px) { .wifidom-footer-colonne { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .wifidom-footer-colonne { grid-template-columns: 1fr; } } /* Gli elenchi del footer sono navigazione, non prosa: via i punti e il rientro. */ .wifidom-footer-elenco { list-style: none; padding-left: 0; } /* I link del footer non hanno una regola propria: la copre quella generale delle sezioni in negativo (sezione 3), perche' il footer e' `has-contrast-background-color`. Le due regole che stavano qui erano identiche a quelle, ed e' stato P3 a generalizzarle - una regola per pattern sarebbe diventata diciannove regole. */ /* ========================================================================== 9. Header Sticky e solido sempre — design.md §6: non trasparente sopra l'hero, che e' la richiesta che trasformerebbe un template part in due. L'altezza e' imposta dal token, non lasciata al contenuto: e' lo stesso valore che serve allo scroll-margin-top delle ancore, e se le due cose divergono il campo che riceve il fuoco dopo un errore finisce sotto l'header. ========================================================================== */ /* Il logo del sito sta DENTRO l'altezza dell'header, qualunque file venga caricato. L'altezza dell'header e' un token e non il contenuto — la sticky, lo `scroll-margin-top` e il `top` dell'aside della scheda corso la usano — quindi un logo alto la spingerebbe fuori misura e tre cose si muoverebbero insieme. Sostituisce `core/site-title` dal 2026-08-27, per decisione del committente: il marchio e' un'immagine, non il nome del sito scritto. */ .wifidom-header .wp-block-site-logo img { /* ALTEZZA DEFINITA, non `auto` con un tetto. Il logo del sito e' un SVG, e un SVG senza `width`/`height` intrinseci — WordPress non sa leggerli da un SVG, quindi i metadati dell'allegato sono vuoti — con `height: auto` e `width: auto` collassa a ZERO. Misurato il 2026-08-27: 0x0, e nell'HTML sembrava tutto a posto. Con un'altezza definita e la larghezza automatica, il `viewBox` fa il resto e qualunque proporzione entra. */ height: calc(var(--wp--custom--header--height) - var(--wp--preset--spacing--30)); max-width: 100%; width: auto; } .wifidom-header { border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--line); } /* LO STICKY VA SULL'INVOLUCRO DEL TEMPLATE PART, NON SU `.wifidom-header`. Un elemento `sticky` si muove dentro il proprio GENITORE, e il genitore di `.wifidom-header` e' il `
`, alto esattamente quanto l'header: 73px. Nessuno spazio per scorrere, quindi l'header se ne andava con la pagina — e non c'era nessun errore, solo un header che non si fermava. Misurato il 2026-08-27: a `scrollY` 600 l'header stava a `top: -600`. Valeva anche PRIMA di togliere il tag annidato: verificato ripristinando il codice di allora. `design.md` §6 chiede «sticky e solido sempre» dal principio, e non lo e' MAI STATO. Nessuna verifica lo guardava — si misurava che l'header esistesse, non che restasse. L'involucro invece e' figlio diretto di `.wp-site-blocks`, quindi il suo genitore e' la pagina intera: li' lo spazio per scorrere c'e'. Si usa il tag e non una classe perche' e' WordPress a generare quell'elemento, e non gli si puo' dare una classe dal template. */ .wp-site-blocks > header { position: sticky; top: 0; z-index: 50; } .wifidom-header > .wp-block-group { align-items: center; min-height: var(--wp--custom--header--height); } /* La voce di menu della pagina corrente. Il bordo inferiore non e' decorativo: e' il secondo segnale che WCAG 1.4.1 chiede, perche' il colore da solo non basta. */ .wifidom-nav .wp-block-navigation-item.current-menu-item > a, .wifidom-nav .wp-block-navigation-item.current-menu-ancestor > a { border-bottom: var(--wp--custom--border--width-strong) solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); font-weight: 600; } /* Il selettore di lingua e' un