/* Theme Name: AIBVC Template: kadence Version: 0.1.0 Text Domain: aibvc Author: AIBVC Description: Child theme di Kadence per aibvc.it — font Nexa, palette e componenti (card circuito, pillole, nastro, barra sottomenu) del restyling da mockup. */ /* ========================================================================= Font Nexa (locali, self-hosted) — vedi immagini/font sito/*.otf Pesi disponibili nel set originale: Thin, Light, Book, Heavy (upright) + Regular e Bold solo in corsivo. Non esiste un Regular/Bold upright: Book fa da 400 upright, Heavy copre 700-900 upright (vedi docs/04). @font-face dichiarati SOLO in theme.json (settings.typography.fontFamilies[0].fontFace), non qui (review #01, minore M4): WP emette quelle regole sia sul front-end sia nel Block Editor a partire da theme.json, la stessa dichiarazione ripetuta anche qui poteva divergere silenziosamente dall'altra copia. I 2 preload dei tagli davvero usati (book/heavy) sono in functions.php (aibvc_preload_fonts). ========================================================================= */ /* ========================================================================= Palette — valori esatti da docs/04-audit-grafico-e-brand.md ========================================================================= */ :root { /* Navy: sfondo/header del sito (mockup, campionato a pixel) */ --aibvc-navy: #00263b; /* Navy scuro per testo su chiaro e per il badge Club Series (PDF loghi) */ --aibvc-navy-deep: #1c1c3a; /* Oro di brand: bordi, dettagli, testo su navy (contrasto 5.64:1, verificato in Python — review #01, minore M6: il commento precedente indicava 5.9:1, valore impreciso; passa comunque AA 4.5:1 per testo normale). La barra sotto-menu usa questo stesso valore (setup-kadence.php, header_bottom_background = AIBVC_COLOR_GOLD, '#ab9b5a'): rimossa la variabile '--aibvc-gold-bar' (#b29d5c) che dichiarava un oro leggermente diverso mai realmente usato da nessuna regola — la barra e' disegnata da Kadence via theme_mod, non da questo foglio di stile (review #01, minore M5). */ --aibvc-gold: #ab9b5a; /* Oro più chiaro per la voce corrente nella barra sotto-menu (contrasto navy/oro-chiaro 9.8:1, verificato in Python — vedi commento sopra .aibvc-submenu-bar più sotto) */ --aibvc-gold-light: #d4c89a; /* Linea separatrice tra le voci della barra sotto-menu: navy semitrasparente su sfondo oro */ --aibvc-submenu-divider: rgba(0, 38, 59, 0.25); /* Colori circuito (mockup, più saturi del PDF loghi — riferimento UI) */ --aibvc-club-series: var(--aibvc-navy-deep); --aibvc-cnt: #00b0c3; --aibvc-pro-tour: #fe6861; --aibvc-tour: #28a583; --aibvc-young-tour: #fd7402; /* Neutri */ --aibvc-white: #ffffff; --aibvc-sand: #f7f6f2; /* Testo */ --aibvc-text: var(--aibvc-navy-deep); /* su sfondo chiaro, 16.5:1 */ --aibvc-text-on-dark: var(--aibvc-white); /* su sfondo navy, 15.7:1 */ } /* ========================================================================= Base ========================================================================= */ body { font-family: "Nexa", sans-serif; font-weight: 400; background-color: var(--aibvc-navy); color: var(--aibvc-text-on-dark); } h1, h2, h3, h4, h5, h6 { font-family: "Nexa", sans-serif; font-weight: 900; } /* ========================================================================= QA 11/09/2026 (docs/09-qa-mockup-vs-staging.md) — causa #1, bloccante: pagina bianca, testo bianco invisibile. Verificato nel DOM dello staging (getComputedStyle): Kadence emette in kadence-global-inline-css la regola ".content-bg, body.content-style-unboxed .site { background: var(--global-palette9) }" che vale SEMPRE quando il body ha la classe "content-style-unboxed" (impostata da setup-kadence.php §10 per eliminare il riquadro "boxed"): non è quindi pilotata dal theme_mod site_background (§2, già navy e infatti il è correttamente navy) ma è una regola Kadence indipendente, con palette9 = #ffffff hardcoded. #wrapper (class "site") risultava percio' bianco sopra un navy, con tutto il testo bianco reso invisibile. Selettore con #wrapper per garantire la specificita' a prescindere dall'ordine di enqueue (il child e' comunque caricato dopo il parent). ========================================================================= */ body.content-style-unboxed #wrapper, #wrapper { background-color: var(--aibvc-navy); } /* ========================================================================= Classi utility .has-{slug}-color / .has-{slug}-background-color per gli slug della palette theme.json (navy, navy-deep, gold, club-series, cnt, pro-tour, tour, young-tour, white, sand). Causa #1 (parte 2): il Block Editor genera normalmente queste classi da theme.json settings.color.palette via wp_enqueue_global_styles(); verificato nel DOM che "global-styles-inline-css" sullo staging contiene solo la palette di default di WordPress (black, cyan-bluish-gray, white, pale-pink…) — Kadence non fonde la palette del child theme.json in quell'output — quindi nessuna delle classi has-navy-background-color ecc. usate in wp/content/*.html esisteva. Stesso !important del markup generato dal core (has-*-color/has-*-background-color), per vincere su qualunque colore di componente Kadence. ========================================================================= */ .has-navy-color { color: var(--aibvc-navy) !important; } .has-navy-background-color { background-color: var(--aibvc-navy) !important; } .has-navy-deep-color { color: var(--aibvc-navy-deep) !important; } .has-navy-deep-background-color { background-color: var(--aibvc-navy-deep) !important; } .has-gold-color { color: var(--aibvc-gold) !important; } .has-gold-background-color { background-color: var(--aibvc-gold) !important; } .has-club-series-color { color: var(--aibvc-club-series) !important; } .has-club-series-background-color { background-color: var(--aibvc-club-series) !important; } .has-cnt-color { color: var(--aibvc-cnt) !important; } .has-cnt-background-color { background-color: var(--aibvc-cnt) !important; } .has-pro-tour-color { color: var(--aibvc-pro-tour) !important; } .has-pro-tour-background-color { background-color: var(--aibvc-pro-tour) !important; } .has-tour-color { color: var(--aibvc-tour) !important; } .has-tour-background-color { background-color: var(--aibvc-tour) !important; } .has-young-tour-color { color: var(--aibvc-young-tour) !important; } .has-young-tour-background-color { background-color: var(--aibvc-young-tour) !important; } .has-white-color { color: var(--aibvc-white) !important; } .has-white-background-color { background-color: var(--aibvc-white) !important; } .has-sand-color { color: var(--aibvc-sand) !important; } .has-sand-background-color { background-color: var(--aibvc-sand) !important; } /* ========================================================================= Ritmo verticale delle sezioni home (docs/09 + terza passata coordinatore: feedback cliente "troppi spazi vuoti"). Scala 8px, 48px desktop / 32px mobile (rivisto in basso rispetto ai 64-96px della prima passata). I gruppi wp:group in wp/content/home-2026.html hanno il padding come stile inline (style="padding-top:...") per il desktop; qui si copre il breakpoint mobile (specificita' via !important, unico modo per scavalcare l'inline senza duplicare il markup per viewport). Margine tra i blocchi (terza passata): oltre al padding di ogni sezione, il DOM mostrava un gap AGGIUNTIVO di 32px tra il bordo di una .aibvc-section e la successiva (misurato con Playwright: chiSiamo.top - hero.bottom = 32px) — un margin-top che WordPress applica di default ai blocchi di primo livello in .entry-content tramite --wp--style--block-gap, non pilotato dal padding inline dei gruppi. Azzerato esplicitamente: la spaziatura tra sezioni e' SOLO quella dei rispettivi padding-top/bottom, altrimenti si somma un doppio spazio. ========================================================================= */ .aibvc-section { margin-top: 0 !important; margin-bottom: 0 !important; } @media (max-width: 600px) { .aibvc-section { padding-top: 32px !important; padding-bottom: 32px !important; } .aibvc-section--hero { padding-top: 0 !important; } } /* ========================================================================= .aibvc-card — card circuito (foto sfondo + overlay + badge + pill + ribbon) ========================================================================= */ /* display:flex column + justify-content:flex-end (terza passata, H3): nel mockup pill e nastro sono ENTRAMBI ancorati al fondo della card, sovrapposti alla foto (pill appena sopra al nastro), non il nastro isolato con la pill in alto sotto al badge. Il badge resta position:absolute (fuori dal flusso flex, resta ancorato in alto a sinistra); pill e nastro diventano figli di flusso normali (position:static) — flex li impila come gruppo in fondo alla card nell'ordine del markup (pill poi nastro), senza dover conoscere in anticipo l'altezza variabile del nastro (dipende dalla lunghezza della didascalia). */ .aibvc-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; min-height: 320px; background-color: var(--aibvc-navy-deep); background-size: cover; background-position: center; color: var(--aibvc-text-on-dark); /* Terza passata: .aibvc-card e' un — Kadence applica text-decoration:underline a TUTTI i link di sito ('link_color' theme_mod, style 'standard', setup-kadence.php §9). Verificato con screenshot Playwright (non riproducibile guardando solo getComputedStyle, e' un comportamento di pittura, non di valore calcolato): il browser disegna la linea di sottolineatura dell'ancestor ATTRAVERSO il testo di pill/nastro anche quando questi hanno gia' text-decoration:none, finche' erano position:absolute restavano "fuori" da quel meccanismo e non si vedeva; ridiventati elementi di flusso (flex, vedi sotto) la sottolineatura e' tornata visibile. Fix alla radice: nessuna sottolineatura sul link stesso. */ text-decoration: none; } /* Focus da tastiera (review #01, importante I9): .aibvc-card e' un a tutta card senza nessuna indicazione nativa di dove si trovi il focus (WCAG 2.4.7). outline-offset negativo perche' la card ha overflow:hidden — un outline positivo verrebbe ritagliato via. */ .aibvc-card:focus-visible { outline: 3px solid var(--aibvc-gold); outline-offset: -3px; } /* Overlay per leggibilità di badge/pill/ribbon sopra la foto */ .aibvc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(0, 38, 59, 0.92) 0%, rgba(0, 38, 59, 0.55) 22%, rgba(0, 38, 59, 0) 45% ); pointer-events: none; } /* Badge tondo con il logo del circuito, overlay in alto a sinistra. Causa #4 (docs/09): cerchio 88px come da mockup (era 64px); i loghi reali caricati (logo-club-series.png ecc.) sono PNG verticali 640x800 con molto spazio vuoto intorno allo scudo — con object-fit:contain restavano minuscoli dentro il cerchio. object-fit:cover riempie il badge ritagliando i margini (lo scudo e' centrato nell'immagine sorgente), come nel mockup dove il logo riempie interamente il cerchio. */ .aibvc-card__badge { position: absolute; z-index: 2; top: 16px; left: 16px; width: 88px; height: 88px; border-radius: 50%; background-color: var(--aibvc-white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; overflow: hidden; } .aibvc-card__badge img, .aibvc-card__badge svg { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================= .aibvc-pill — pillola colorata col nome del circuito Testo navy sulle 4 tinte sature (WCAG AA, vedi docs/04); testo bianco sulla variante Club Series, il cui sfondo è già navy scuro (l'inverso sarebbe illeggibile: navy su navy). ========================================================================= */ /* Terza passata (H3): ripristinata "appena sopra il nastro" (mockup-1) — non piu' ancorata sotto al badge. position:static + align-self:flex-start: fa parte dello stack flex in fondo alla card (vedi .aibvc-card sopra), larghezza naturale (non si allarga come farebbe di default un figlio flex in una colonna con align-items:stretch). */ .aibvc-pill { position: relative; z-index: 2; align-self: flex-start; margin: 0 0 8px 16px; text-decoration: none; display: inline-flex; align-items: center; padding: 5px 16px; border-radius: 999px; font-family: "Nexa", sans-serif; font-weight: 700; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; background-color: var(--aibvc-gold); color: var(--aibvc-text); /* default: navy, WCAG AA */ } .aibvc-pill--club-series { background-color: var(--aibvc-club-series); color: var(--aibvc-text-on-dark); } .aibvc-pill--cnt { background-color: var(--aibvc-cnt); color: var(--aibvc-text); } .aibvc-pill--pro-tour { background-color: var(--aibvc-pro-tour); color: var(--aibvc-text); } .aibvc-pill--tour { background-color: var(--aibvc-tour); color: var(--aibvc-text); } .aibvc-pill--young-tour { background-color: var(--aibvc-young-tour); color: var(--aibvc-text); } /* ========================================================================= .aibvc-ribbon — didascalia su nastro obliquo in basso alla card ========================================================================= */ /* Causa #5 (docs/09): nel mockup il testo del nastro e' Nexa Bold Italic bianco, ~18px (non regular 14px). font-weight 700 + font-style italic seleziona lo @font-face con fontWeight "700" fontStyle "italic" (nexa-bold-italic.woff2, vedi theme.json) — l'unico Bold disponibile nel set Nexa e' upright inesistente, solo il corsivo (docs/04), che e' esattamente quello richiesto qui. */ .aibvc-ribbon { position: relative; z-index: 2; width: 100%; padding: 14px 16px 12px; text-decoration: none; background-color: var(--aibvc-navy); color: var(--aibvc-text-on-dark); font-family: "Nexa", sans-serif; font-weight: 700; font-style: italic; font-size: 1.125rem; line-height: 1.3; clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%); } .aibvc-ribbon strong, .aibvc-ribbon b { font-weight: 700; } /* ========================================================================= .aibvc-hero — variante di badge/pill dentro un wp:cover (hero dei circuiti) Review #01, importante I6: .aibvc-card__badge/.aibvc-pill sono pensati per .aibvc-card (position:relative, badge in alto/pill in basso rispetto a TUTTA la card). Dentro un wp:cover con contentPosition "bottom left" pero' il contenitore piu' vicino con position:relative e' .wp-block-cover__inner-container, che il core dimensiona SOLO quanto basta al contenuto e piazza in basso a sinistra (flex sul .wp-block-cover esterno) — badge/pill assoluti finivano quindi ancorati a quel riquadro piccolo, sovrapposti all'H1 invece che agli angoli dell'immagine. Fix: badge e pill restano in flusso (position:static) DENTRO l'inner-container, che diventa una colonna flex — badge, poi pill, poi h1, nell'ordine gia' presente nel markup (wp/content/aibvc-*.html): badge/pill in alto all'interno del riquadro, titolo subito sotto, mai sovrapposti indipendentemente da quanto testo contiene l'h1. ========================================================================= */ .aibvc-hero .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: flex-start; } .aibvc-hero .aibvc-card__badge, .aibvc-hero .aibvc-pill { position: static; margin: 0 0 12px; } /* ========================================================================= Griglia hero (terza passata, H1/H2): riscritta da wp:columns annidate (flex) a CSS Grid vera su un unico contenitore .aibvc-hero-grid (markup riscritto in wp/content/home-2026.html, un solo wp:html con le 5 card dirette, niente piu' wp:column/wp:spacer). Motivo: con flex-basis su colonne SEPARATE (card grande in una colonna, le 4 piccole in due righe di un'altra wp:columns annidata) non c'e' modo di far combaciare esattamente l'altezza della card grande con "riga1 + gap + riga2" — sono due alberi flex indipendenti. Con CSS Grid: 3 colonne (5fr per la card grande, 3.5fr+3.5fr per le 4 piccole = 7fr totali, stesse proporzioni 5/12-7/12 del mockup) e 2 righe; la card grande occupa grid-column:1 / grid-row:1/span 2 e si STIRA automaticamente (align/justify-items:stretch, default Grid) a coprire esattamente le due righe — nessun calcolo manuale, nessun clamp() approssimato come nella prima passata. Le 4 card piccole non hanno placement esplicito: l'auto-placement del Grid le dispone nelle celle libere in ordine di documento (colonna2/riga1, colonna3/riga1, colonna2/riga2, colonna3/riga2). ========================================================================= */ .aibvc-hero-grid { /* H1 (terza passata): il gruppo .aibvc-section--hero ha layout "constrained" (per centrare le altre sezioni, es. Chi siamo a 760px) — QUALSIASI figlio diretto senza classe alignfull viene comunque limitato a contentSize (1240px, centrato) dal CSS generato da Gutenberg. Prima versione di questa regola (senza !important) non bastava: verificato con Playwright (document.styleSheets) che la regola generata da WP e' `.is-layout-constrained > :where(...) { max-width:...; margin-left:auto !important; margin-right:auto !important }` — il margin e' gia' !important lato WP (vince comunque su un plain override) e il max-width, pur non essendo !important, a specificita' di classe PARI alla nostra (.is-layout-constrained > :where() ha specificita' zero grazie a :where(), quindi la selettore intera vale quanto una sola classe, come la nostra) — a parita' di specificita' vince l'ultima regola nel CSSOM, e quella di WP viene iniettata dopo il nostro style.css. !important su tutti e tre risolve in modo inequivocabile, a prescindere dall'ordine di iniezione. */ max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; display: grid; grid-template-columns: 5fr 3.5fr 3.5fr; grid-template-rows: 1fr 1fr; gap: 8px; } .aibvc-hero-grid .aibvc-card--large { grid-column: 1; grid-row: 1 / span 2; } /* ------------------------------------------------------------------------- Altezze (QA 11/09/2026, richiesta: "tutte della stessa altezza, Club Series grande il doppio, testo compreso"). Il Grid gia' dava alle quattro card piccole la stessa altezza di cella e alla card grande esattamente "riga1 + gap + riga2". Restavano diverse le AREE FOTO: il nastro e' un elemento di flusso in fondo alla card, quindi la foto e' "altezza card meno nastro" — e i nastri erano alti quanto il loro testo (una o due righe a seconda della didascalia), cosi' fra le quattro piccole la foto cambiava da card a card e la foto grande non risultava doppia di nessuna. Fix: si fissa l'altezza del nastro invece di lasciarla al testo. Due righe per le card piccole, quattro per la grande (il doppio, come richiesto, insieme al corpo del testo piu' grande). Con nastro di altezza costante, le quattro foto piccole sono identiche e quella grande sta nel rapporto voluto. Il testo piu' lungo delle due (o quattro) righe viene troncato con i puntini, non sfonda l'altezza. ------------------------------------------------------------------------- */ .aibvc-hero-grid .aibvc-ribbon { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; /* Altezza in px, uguale per tutte e cinque le card, NON in em. Con `calc(2 * 1.3em + 40px)` l'altezza seguiva il font-size del nastro: 87px sulle card piccole (18px) e 97px sulla grande (22px). Il nastro sta in fondo alla card e la foto è "card meno nastro", quindi la foto della Club Series finiva 10px più in alto di quelle di CNT e AIBVC Tour, che pure terminano alla stessa quota. È il disallineamento segnalato il 13/09/2026: i bordi inferiori delle foto. 98px = due righe da 22px con interlinea 1.3 (57.2) + padding 14/12 + i 14 del taglio obliquo. Le card piccole restano con una decina di px di nastro in più sotto il testo: non si vedono, il nastro è una fascia piena. */ min-height: 98px; box-sizing: border-box; } /* Card grande: stesso principio, ma il nastro non va riempito di vuoto — con min-height a quattro righe e una didascalia da due restava meta' nastro navy vuoto (verificato: nastro 154px per due righe di testo). Il "doppio" che serve e' quello della card intera (648px = 320 + 8 + 320, misurato), e il testo piu' grande. Due righe di min-height sul PROPRIO corpo, tre di clamp per le didascalie piu' lunghe. */ .aibvc-hero-grid .aibvc-card--large .aibvc-ribbon { font-size: 1.375rem; /* Altezza ereditata dalla regola sopra: è quella che tiene allineate le foto. Clamp a 2 righe come le altre e non 3: una terza riga a 22px sfonderebbe i 98px e rimetterebbe la foto fuori allineamento, che è esattamente il difetto da togliere. Il "doppio" chiesto per la Club Series resta dov'era: la card intera (648px contro 320) e il corpo del testo più grande. */ } /* ========================================================================= Hook di layout riservati, senza stile proprio (review #01, minore I14). .aibvc-section / .aibvc-section--* (wp/content/*.html): className su ogni wp:group/ wp:cover di sezione, usati oggi solo come hook identificativi per QA/debug (selettori stabili indipendenti dal backgroundColor/padding inline dei blocchi). Nessuna regola CSS li consuma: innocui, ma se restano permanentemente inutilizzati vanno rimossi dal markup la prossima volta che lo si tocca. ========================================================================= */ /* ========================================================================= .aibvc-card__news-item — fallback immagine (terza passata, H5). I 3 articoli piu' recenti non hanno un'immagine in evidenza: il blocco core wp:post-featured-image, verificato nel DOM (Playwright), NON stampa proprio nulla se has_post_thumbnail() e' falso (non arriva nemmeno a chiamare get_the_post_thumbnail(), quindi un filtro su 'post_thumbnail_html' non scatterebbe mai qui) — le card restavano scatole di solo colore (has-navy-deep-background-color, #1c1c3a, gia' corretto rispetto alla palette: non e' un bug di colore, il "viola" percepito nello screenshot era la mancanza totale di immagine). Fallback via CSS puro con :not(:has(img)), niente PHP: quando la card non contiene un tag (nessuna featured image renderizzata), lo pseudo-elemento ::before mostra la foto di default (club-series.jpg, gia' in uso nell'hero) con lo stesso trattamento cover delle card circuito. Se in futuro un articolo avra' una sua immagine in evidenza, :has(img) sara' vero e il fallback sparisce da solo. ========================================================================= */ .aibvc-card__news-item { position: relative; } /* Solo nella riga news della home: sull'archivio (.aibvc-section--elenco) le card sono dodici e la stessa foto ripetuta quattro volte per colonna fa piu' danno che bene — li' la card resta testo su fondo scuro, che si legge meglio. Le tre foto NON stanno qui ma in inc/circuits.php, stampate con aibvc_media_url(): scritte nel CSS erano indirizzi assoluti con dentro /nuovo/, cioe' il sito online caricava le immagini dalla cartella dello staging (visto il 13/09/2026). */ .aibvc-section--news .aibvc-card__news-item:not(:has(img))::before { content: ""; display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-radius: 8px 8px 0 0; } /* ========================================================================= #secondary-navigation — barra oro sotto-menu contestuale (mockup-1/-3.png) Markup reale generato da Kadence (template-parts/header/navigation-2.php + Kadence\Nav_Menus::display_secondary_nav_menu): #secondary-navigation > .secondary-menu-container > ul#secondary-menu.menu > li.menu-item > a. Lo sfondo oro della riga arriva già dal theme_mod header_bottom_background (setup-kadence.php §7): qui si stilano solo voci/separatori/stato corrente. Le voci mostrate (menu secondario oppure figli della sezione primary attiva) sono decise in PHP da inc/submenu-bar.php. Contrasto verificato in Python (luminanza relativa WCAG): - navy testo (#1c1c3a) su oro barra reale (#ab9b5a): 5.93:1 (>= 4.5:1 AA) — ok, nessuna modifica necessaria ai colori esistenti. - navy testo (#1c1c3a) su oro chiaro voce corrente (--aibvc-gold-light, #d4c89a): 9.81:1. ========================================================================= */ #secondary-navigation { min-height: 44px; /* tap target */ display: flex; align-items: center; } #secondary-navigation .secondary-menu-container { width: 100%; overflow-x: auto; /* scroll orizzontale se le voci non ci stanno (mobile) */ -webkit-overflow-scrolling: touch; } /* Causa #8 (docs/09): nel mockup la barra oro e' larga quanto il contenuto (stesso contentSize 1240px di header/hero in home-2026.html), non width:100% del filo del viewport. Il flex di default sul