il markup sarebbe invalido. E' la
stessa ragione per cui sulla Longevity il comando delle 6 card e' un
cerchio e non la card intera (CLAUDE.md §7.5). Il livello del titolo lo
sceglie chi compone, in base a dove sta nell'albero: h3 se l'accordion
segue un h2, h4 se segue un h3.
L'attributo data-lc-accordion sul contenitore E' il gate che accende
js/accordion.js (vedi loader.php). Toglierlo spegne il JavaScript.
ATTRIBUTI ARIA COME UNICA FONTE DI VERITA':
aperto => comando aria-expanded="true" + pannello aria-hidden="false"
chiuso => comando aria-expanded="false" + pannello aria-hidden="true"
Il CSS mostra e nasconde su [aria-hidden] e gira il segno su
[aria-expanded]. Il JavaScript non tocca mai style.display: inline style
e CSS non possono divergere se solo uno dei due comanda. E' il contratto
gia' in uso nel tema (custom-php/accordion/accordion.php).
PERCHE' IL PANNELLO CHIUSO E' display:none E NON UN'ALTEZZA A ZERO.
Le alternative animabili (altezza 0, grid 0fr) lasciano il contenuto nel
flusso: i link dentro un pannello chiuso resterebbero raggiungibili col
tab, e chi naviga da tastiera finirebbe dentro pannelli che non vede. Su
una pagina con settanta accordion sarebbero decine di bersagli fantasma.
Il prezzo e' che la chiusura scatta; l'apertura invece e' morbida, con
un'animazione sul contenuto che non tocca l'ordine di tabulazione.
SEO: il testo dei pannelli e' nel DOM SERVITO anche da chiusi — si
verifica con curl, non da DevTools (CLAUDE.md §12). Google lo indicizza.
Cio' che sarebbe una violazione vera e' il contrario: contenuto iniettato
dal JavaScript dopo il caricamento.
========================================================================= */
.lc-page .lc-acc {
display: grid;
gap: 10px;
}
/* --- Due colonne da 992px --------------------------------------------
Un accordion di ventiquattro voci in colonna singola e' una lista di
ventiquattro righe alte 56px: due schermate di desktop per leggere solo i
titoli. Su due colonne si abbracciano con un'occhiata.
⚠️ align-items: start NON e' facoltativo. Senza, le due voci di una riga
si stirano alla stessa altezza, e aprendone una si allunga anche la
vicina — che resta vuota, con il bordo che scende per niente.
Le colonne le decide chi compone, con il modificatore: le FAQ restano a
una colonna perche' stanno in una colonna di lettura stretta e su due
sarebbero righe da 40 caratteri. */
@media (min-width: 992px) {
.lc-page .lc-acc--due {
grid-template-columns: repeat(2, 1fr);
align-items: start;
gap: 12px 16px;
}
}
.lc-page .lc-acc-voce {
background: var(--lc-bianco);
border: 1px solid var(--lc-bordo);
border-radius: var(--lc-raggio-piccolo);
overflow: hidden;
}
/* Il titolo non deve portare la propria scala tipografica: qui e' solo il
contenitore semantico del comando, e la misura la da' l'etichetta. */
#top .lc-page .lc-acc-titolo {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.lc-page .lc-acc-comando {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
min-height: 56px;
padding: 16px 18px;
text-align: left;
cursor: pointer;
}
.lc-page .lc-acc-comando:hover {
background: var(--lc-fondo-tenue);
}
.lc-page .lc-acc-etichetta {
color: var(--lc-blu);
font-size: 16px;
font-weight: 600;
line-height: 1.35;
}
/* --- Il segno di apertura -----------------------------------------------
Cerchio PIENO e non un contorno: un cerchio vuoto legge come ornamento,
uno pieno come pulsante. Il fondo e' il blu e non l'azzurro perche'
quest'ultimo su fondo chiaro da' ~2,5:1, sotto il 3:1 che la WCAG 1.4.11
chiede agli elementi di interfaccia (CLAUDE.md §7.4). */
.lc-page .lc-acc-segno {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 999px;
background: var(--lc-blu);
color: var(--lc-bianco);
font-size: 20px;
line-height: 1;
transform: rotate(90deg);
transition: transform var(--lc-durata) var(--lc-curva);
}
.lc-page .lc-acc-comando[aria-expanded="true"] .lc-acc-segno {
transform: rotate(-90deg);
}
/* --- Il pannello ---------------------------------------------------------
DUE MECCANISMI SOVRAPPOSTI, e l'ordine conta.
1. BASE — display:none quando chiuso. Scatta, ma e' sicuro ovunque e
soprattutto toglie il contenuto dall'ordine di tabulazione: senza,
i link dentro un pannello chiuso resterebbero raggiungibili col tab e
chi naviga da tastiera finirebbe dentro pannelli che non vede. Su
questa pagina sarebbero decine di bersagli invisibili.
2. MORBIDO — dentro @supports, per i browser che sanno animare
content-visibility. La transizione e' su grid-template-rows da 0fr a
1fr, che e' il solo modo di animare verso un'altezza "auto" senza
misurarla in JavaScript; content-visibility con allow-discrete tiene
il contenuto fuori dal tab order da chiuso E lo lascia visibile
mentre collassa — senza, la chiusura sparirebbe di colpo a meta'
corsa, come succedeva alle FAQ della Longevity (CLAUDE.md §8.4).
⚠️ IL @supports NON E' DECORATIVO: un browser che conosce grid ma non sa
animare content-visibility terrebbe il pannello a 0fr per sempre, cioe'
invisibile anche da aperto. Con la query, dove il meccanismo non c'e' si
resta al display:none e l'apertura torna istantanea.
⚠️ Serve un figlio con overflow:hidden — qui .lc-acc-corpo. Senza, il
contenuto deborda dalla riga di griglia alta 0 e si vede lo stesso. */
.lc-page .lc-acc-pannello[aria-hidden="true"] {
display: none;
}
@supports (content-visibility: hidden) and (transition-behavior: allow-discrete) {
.lc-page .lc-acc-pannello {
display: grid;
grid-template-rows: 0fr;
content-visibility: hidden;
transition:
grid-template-rows var(--lc-durata) var(--lc-curva),
content-visibility var(--lc-durata) allow-discrete;
}
/* annulla il display:none di sopra: qui a chiudere e' la riga a 0fr */
.lc-page .lc-acc-pannello[aria-hidden="true"] {
display: grid;
}
.lc-page .lc-acc-pannello[aria-hidden="false"] {
grid-template-rows: 1fr;
content-visibility: visible;
}
.lc-page .lc-acc-pannello > * {
overflow: hidden;
}
/* L'animazione di comparsa non serve piu': ora si muove l'altezza. */
.lc-page .lc-acc-pannello[aria-hidden="false"] .lc-acc-corpo {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.lc-page .lc-acc-pannello {
transition: none;
}
}
/* Il separatore rientra di 18px per lato invece di attraversare tutta la
card: il margine sul corpo, non il padding, cosi' la riga si ferma dove
comincia il testo. */
.lc-page .lc-acc-corpo {
margin: 0 18px;
padding: 16px 0 20px;
border-top: 1px solid var(--lc-bordo-tenue);
}
.lc-page .lc-acc-corpo > * + * {
margin-top: 14px;
}
/* Il Reboot da' ai 1rem di margine sotto: sull'ultimo si somma al
padding del pannello e lo spazio in fondo diventa 36px invece di 20.
Le pagine migrate non hanno il problema perche' azzerano quel margine
nei loro fogli; qui si toglie una volta per il componente. */
.lc-page .lc-acc-corpo > :last-child,
.lc-page .lc-acc-corpo > :last-child > :last-child {
margin-bottom: 0;
}
.lc-page .lc-acc-pannello[aria-hidden="false"] .lc-acc-corpo {
animation: lc-acc-apre var(--lc-durata) var(--lc-curva);
}
@keyframes lc-acc-apre {
from {
opacity: 0;
transform: translateY(-6px);
}
}
@media (prefers-reduced-motion: reduce) {
.lc-page .lc-acc-segno {
transition: none;
}
.lc-page .lc-acc-pannello[aria-hidden="false"] .lc-acc-corpo {
animation: none;
}
}
/* --- Accordion nativo con -------------------------------------
Alternativa senza JavaScript, per gli accordion che devono restare aperti
se lo script non parte. Le pagine gia' online la usano per le FAQ e per
le 4 fasi cliniche, con l'attributo `open` NEL MARKUP.
L'animazione richiede interpolate-size per poter arrivare ad `auto`, piu'
content-visibility con allow-discrete: e' quest'ultima riga a rendere
fluida anche la CHIUSURA, senza il contenuto sparisce di colpo mentre
l'altezza sta ancora animando (CLAUDE.md §8.4).
⚠️ IL @supports NON E' DECORATIVO: un browser che conosce block-size:0 ma
non sa animare ::details-content collasserebbe il pannello per sempre —
contenuto invisibile anche da aperto. Con la query, dove il meccanismo
non c'e' non si collassa niente e si torna all'apertura istantanea.
⚠️ COME SI VERIFICA: le sonde JavaScript (getAnimations, campionamento
con setTimeout) dicono il falso quando la tab non e' in primo piano — la
timeline non avanza e sembra che non funzioni niente. L'unico modo
affidabile e' guardare: si porta la durata a 10 secondi con una regola
temporanea, si clicca davvero e si cattura lo schermo a meta' corsa. */
@supports selector(details::details-content) and (interpolate-size: allow-keywords) {
.lc-page {
interpolate-size: allow-keywords;
}
.lc-page .lc-dettaglio::details-content {
block-size: 0;
overflow: hidden;
transition: block-size var(--lc-durata) var(--lc-curva),
content-visibility var(--lc-durata) allow-discrete;
}
.lc-page .lc-dettaglio[open]::details-content {
block-size: auto;
}
}