/* Componenti riusabili del design system.
Ogni colore, corpo e spaziatura di sistema viene dai token: qui restano
letterali solo le misure interne di un singolo componente, che non
appartengono a nessuna scala. */
/* ── Bottoni ────────────────────────────────────────────── */
/* Etichette in maiuscoletto e spigolo vivo. La prima direzione aveva bottoni
con etichetta in tondo e angoli appena smussati: leggibili, ma
indistinguibili da quelli di qualunque altro sito.
La spaziatura fra le lettere e' scesa da 0,14em a 0,05em. A 0,14 — la
misura dell'occhiello — un'etichetta come "Prenota la giornata gratuita"
si allargava di una trentina di pixel e il bottone diventava una barra: la
spaziatura serve a far respirare una parola in un'etichetta di dieci
caratteri, non a distendere una frase intera. Il corpo sale invece di un
punto, cosi' l'etichetta resta leggibile ora che e' piu' stretta.
L'occhiello, che di caratteri ne ha davvero pochi, tiene la sua. */
.elic-bottone {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
padding: 1rem 1.6rem;
border: 1px solid transparent;
border-radius: var(--elic-raggio);
font-family: var(--elic-font-testo);
font-size: 0.75rem;
font-weight: var(--elic-peso-etichetta);
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background var(--elic-transizione),
color var(--elic-transizione),
border-color var(--elic-transizione);
}
/* Le varianti piene portano il bordo del proprio fondo, non un filo di un
altro tono: il bordo c'e' — ed e' il motivo per cui esiste la riga
"border: 1px solid transparent" qui sopra — ma serve solo a far quadrare
le misure. Un bottone pieno senza bordo e' due pixel piu' basso e due
piu' stretto di uno di contorno, e affiancati in una coppia di CTA lo si
vede. Dichiarandolo dello stesso colore del fondo, il pieno e il contorno
occupano lo stesso riquadro e non si nota niente.
Il colore va scritto e non lasciato a "transparent": il risultato a
schermo e' identico, perche' il fondo si disegna sotto il riquadro del
bordo, ma su un bordo trasparente basta cambiare in seguito il
background-clip perche' compaia una fessura, e nessuno collegherebbe le
due cose. */
/* L'oro e' il colore dell'azione, e resta lo stesso su carta e su
inchiostro: e' l'unico elemento che attraversa la pagina identico, ed e'
cosi' che si riconosce a colpo d'occhio dove si prosegue.
Di contorno e non pieno. Il blocco d'oro pesava troppo: in una pagina
fatta di bianco, fili sottili e un solo accento, era l'unica campitura
satura oltre alla barra CTA, e se la giocava con lei invece di
accompagnarla. Svuotato resta il colore, che e' cio' che serve a dire
"di qua si prosegue", e sparisce la massa.
La conseguenza va detta: sulla pagina non c'e' piu' nessun bottone pieno
a parte quello scuro sulla fascia d'oro. Il salto fra l'azione principale
e le altre lo fanno adesso il colore e il contorno, non il pieno contro il
vuoto — e' un gradino piu' sottile di prima, ed e' una scelta, non una
svista.
Sul chiaro il filo e' oro scuro e non oro pieno, e stavolta non e' un di
piu': senza campitura il contorno diventa la cosa che identifica il
comando, e il criterio WCAG 1.4.11 gli chiede 3:1. L'oro della palette ne
misura 2,28 contro il bianco, l'oro scuro 5,81 — e l'etichetta, che ora e'
dello stesso colore del filo, ne misura altrettanti. */
.elic-bottone--primario {
background: transparent;
border-color: var(--elic-oro-scuro);
color: var(--elic-oro-scuro);
}
/* Al passaggio si riempie: e' il pieno che era lo stato di riposo, tornato a
fare quello per cui il pieno serve davvero, cioe' rispondere. */
.elic-bottone--primario:hover {
background: var(--elic-oro-scuro);
border-color: var(--elic-oro-scuro);
color: var(--elic-bianco);
}
/* Sul bruno l'oro pieno si puo' usare: li' misura 6,39:1 e non ha bisogno
della gradazione scura, che anzi si spegnerebbe. */
.elic-sezione--scura .elic-bottone--primario {
border-color: var(--elic-oro);
color: var(--elic-oro);
}
.elic-sezione--scura .elic-bottone--primario:hover {
background: var(--elic-oro);
border-color: var(--elic-oro);
color: var(--elic-bruno);
}
/* L'oro pieno. Il "primario" e' oro a contorno e si riempie al passaggio: e'
il bottone normale, quello che accompagna. Questo e' il contrario — pieno da
fermo — e serve dove un'azione deve staccarsi dalle altre che le stanno
accanto, non dal resto della pagina.
Bruno sull'oro e non bianco: misura 6,39:1, mentre il bianco sull'oro si
ferma a 2,2 e sarebbe illeggibile in pieno sole. */
.elic-bottone--oro {
background: var(--elic-oro);
border-color: var(--elic-oro);
color: var(--elic-bruno);
}
.elic-bottone--oro:hover {
background: var(--elic-oro-scuro);
border-color: var(--elic-oro-scuro);
color: var(--elic-bianco);
}
.elic-bottone--scuro {
background: var(--elic-bruno);
border-color: var(--elic-bruno);
color: var(--elic-su-scuro);
}
.elic-bottone--scuro:hover {
background: var(--elic-bruno-2);
border-color: var(--elic-bruno-2);
}
/* Contorno: cambia verso con il fondo. Nella prima direzione esisteva solo
per i fondi scuri, perche' sul chiaro c'era gia' il bottone verde a fare
da secondario. Qui il secondario sul chiaro e' bruno pieno, quindi il
contorno serve a un terzo livello e deve funzionare su entrambe le carte. */
.elic-bottone--contorno {
background: transparent;
border-color: var(--elic-bordo-chiaro);
color: var(--elic-testo);
}
.elic-bottone--contorno:hover {
border-color: var(--elic-bruno);
}
.elic-sezione--scura .elic-bottone--contorno {
border-color: var(--elic-bordo-scuro);
color: var(--elic-su-scuro);
}
.elic-sezione--scura .elic-bottone--contorno:hover {
background: rgba(247, 246, 243, 0.06);
border-color: var(--elic-su-scuro);
}
/* Il bottone di testo e' un link con un filo sotto. Il filo si ispessisce
al passaggio invece di cambiare colore: il colore qui e' gia' l'unico
accento della pagina e non ha una seconda gradazione da spendere.
Resta soltanto dentro le card delle forniture, ed e' li' che il ruolo
torna: e' l'ultima riga di una didascalia, non un comando che sta per
conto suo. Dove invece affiancava un bottone vero — la coppia della hero,
la coda dei dieci passi — e' stato sostituito dal contorno: due comandi
accostati devono avere la stessa forma, altrimenti il secondo non si
legge come un'alternativa al primo ma come una nota a margine. */
.elic-bottone--testo {
padding-inline: 0;
padding-block: 0.4rem;
background: none;
border: 0;
border-bottom: 1px solid currentcolor;
border-radius: 0;
color: var(--elic-oro-scuro);
transition: border-bottom-width var(--elic-transizione),
padding-bottom var(--elic-transizione);
}
/* Il bordo cresce verso il basso e sposterebbe il testo di un pixel: si
toglie quel pixel all'imbottitura, cosi' l'etichetta non balla. */
.elic-bottone--testo:hover {
border-bottom-width: 2px;
padding-bottom: calc(0.4rem - 1px);
}
.elic-sezione--scura .elic-bottone--testo {
color: var(--elic-oro-chiaro);
}
/* Qui stava il timbro: la stessa riga breve dell'occhiello, ma dentro un
rettangolo bordato d'oro. Due grammatiche per la stessa cosa, scelte dal
blocco invece che dal significato — la vetrina timbrava, tutte le altre
fasce sottolineavano. Sono passate all'occhiello, e il timbro non serve
piu' a nessuno.
Il segno d'oro resta uno solo in tutta la pagina: il trattino che precede
l'occhiello, in .elic-occhiello::before dentro base.css. */
/* ── Card ───────────────────────────────────────────────── */
/* Senza riquadro. Il bordo piu' il fondo bianco facevano una scatola, e tre
scatole in fila su una pagina bianca sono il modo piu' rapido per
sembrare un catalogo. Qui la card e' una fotografia con sotto la sua
didascalia, separata da un filo: e' il taglio di una rivista. */
.elic-card {
display: flex;
flex-direction: column;
background: none;
border: 0;
}
.elic-card__media {
aspect-ratio: 4 / 3;
width: 100%;
object-fit: cover;
background: var(--elic-avorio);
}
.elic-card__corpo {
display: grid;
gap: var(--elic-sp-1);
padding-top: var(--elic-sp-2);
margin-top: var(--elic-sp-2);
border-top: 1px solid var(--elic-bordo-chiaro);
}
.elic-sezione--scura .elic-card__corpo {
border-top-color: var(--elic-bordo-scuro);
}
.elic-card__titolo {
font-family: var(--elic-font-display);
font-size: var(--elic-dim-grande);
font-weight: var(--elic-peso-titolo);
line-height: 1.15;
letter-spacing: -0.02em;
}
.elic-card__testo {
max-width: none;
font-size: var(--elic-dim-piccolo);
color: var(--elic-testo-tenue);
}
.elic-sezione--scura .elic-card__testo {
color: var(--elic-su-scuro-tenue);
}
/* ── Barra CTA oro ──────────────────────────────────────── */
/* L'unica fascia d'oro pieno della pagina. Nella prima direzione era una
fra tante superfici colorate; qui, in mezzo a carta e inchiostro, e' un
evento — e per restarlo deve essere l'unica. */
.elic-barra-cta {
background: var(--elic-oro);
color: var(--elic-bruno);
}
/* La barra porta due proposte, non una: due meta' uguali divise da un filo. */
.elic-barra-cta__interno {
display: grid;
gap: var(--elic-sp-3) var(--elic-sp-5);
padding-block: var(--elic-sp-3);
}
/* Dentro ogni meta': la frase e il suo bottone vicini, non agli estremi. Con
space-between su mezza barra da 1360px il bottone finiva lontano dalla
frase a cui risponde, e la coppia si leggeva come due elementi scollegati
invece che come una proposta sola. */
.elic-barra-cta__lato {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--elic-sp-2) var(--elic-sp-3);
}
.elic-barra-cta__testo {
max-width: none;
font-family: var(--elic-font-display);
font-weight: var(--elic-peso-display);
font-size: var(--elic-dim-grande);
letter-spacing: -0.03em;
/* Due righe corte e vicine: l'interlinea da testo corrente le
allontanerebbe come fossero un paragrafo. Qui la coppia deve leggersi
come un blocco solo, quindi vale quella dei titoli. */
line-height: var(--elic-interlinea-titolo);
}
/* ── Le due disposizioni ────────────────────────────────────
Le media query stanno DOPO le regole del componente e non prima. Non e'
pignoleria: hanno la stessa specificita', quindi a decidere e' l'ordine, e
messe sopra perdevano. E' cosi' che la fascia era finita a 605 pixel
invece di 272 — la riga che doveva annullare la base flessibile veniva
riscritta due regole piu' giu' da quella che voleva annullare. */
/* Affiancate, con il filo in mezzo. */
@media (min-width: 60.0625rem) {
.elic-barra-cta__interno {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* La frase puo' restringersi sotto la sua misura naturale: la nota della
prima meta' e' lunga, e senza questo il blocco del testo spingerebbe il
bottone fuori dalla colonna invece di andare a capo.
Vale solo qui. In colonna quel "12rem" non sarebbe piu' una larghezza
di partenza ma un'ALTEZZA di partenza, perche' flex-basis misura
sull'asse principale e l'asse principale cambia con la direzione: e'
esattamente la trappola in cui la fascia era caduta. Tenendo la regola
dentro la disposizione che la richiede, il caso non si presenta. */
.elic-barra-cta__testo {
flex: 1 1 12rem;
min-width: 0;
}
.elic-barra-cta__lato + .elic-barra-cta__lato {
border-inline-start: 1px solid var(--elic-filo-su-oro);
padding-inline-start: var(--elic-sp-5);
/* Il gap della griglia sta fra le colonne e il filo cade sul bordo
della seconda: senza questo margine negativo starebbe attaccato a
lei invece che in mezzo alle due. */
margin-inline-start: calc(var(--elic-sp-5) * -0.5);
}
}
/* Impilate, con il filo che passa da verticale a orizzontale: resta un
divisorio, cambia il verso in cui separa. Il bottone va sotto la frase in
tutte e due le meta': lasciato all'avvolgimento automatico dipendeva dalla
lunghezza del testo, e due proposte gemelle si presentavano in due modi
diversi a mezzo centimetro di distanza. */
@media (max-width: 60rem) {
.elic-barra-cta__lato {
flex-direction: column;
align-items: flex-start;
}
.elic-barra-cta__lato + .elic-barra-cta__lato {
border-top: 1px solid var(--elic-filo-su-oro);
padding-top: var(--elic-sp-3);
}
}
/* Seconda riga della barra: dice quanto costa l'azione, non la ripete. Va a
capo da sola perche' e' un blocco, senza
nel contenuto: la riga la
decide il foglio di stile, non chi scrive il testo.
Qui cambia famiglia e non solo peso: sopra c'e' un serif in corpo grande,
e la stessa frase in Inter piccolo e spaziato si legge come una postilla
invece che come il seguito della domanda. */
.elic-barra-cta__nota {
display: block;
margin-top: 0.5rem;
font-family: var(--elic-font-testo);
font-size: var(--elic-dim-occhiello);
font-weight: var(--elic-peso-etichetta);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.elic-barra-cta__azioni {
display: flex;
flex-wrap: wrap;
gap: var(--elic-sp-1);
align-items: center;
}
/* ── Invito d'oro ───────────────────────────────────────── */
/* Lo stesso oro della barra, ma dentro una colonna invece che al vivo: sta
sotto le cifre del blocco «Testo e cifre» e ne prende la larghezza. La
barra parlava a tutta pagina, questo parla a chi ha appena letto i numeri.
Riquadro e non fascia: qui l'oro non attraversa la pagina, quindi non e'
un evento che la interrompe ma la conclusione di quella colonna. */
.elic-invito {
background: var(--elic-oro);
color: var(--elic-bruno);
/* L'unico angolo tondo del sito: --elic-raggio vale 0 ovunque, e cambiare
il token arrotonderebbe anche i bottoni. Qui la misura e' scritta a
mano apposta. */
border-radius: 0.5rem;
padding: var(--elic-sp-3);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--elic-sp-2) var(--elic-sp-3);
}
/* Stessa voce della barra: display, corpo grande, interlinea da titolo,
perche' domanda e nota vanno lette come un blocco solo. */
.elic-invito__testo {
max-width: none;
flex: 1 1 12rem;
min-width: 0;
font-family: var(--elic-font-display);
font-weight: var(--elic-peso-display);
font-size: var(--elic-dim-grande);
letter-spacing: -0.03em;
line-height: var(--elic-interlinea-titolo);
}
/* La nota dice quanto costa l'azione, non la ripete: va a capo da sola,
perche' la riga la decide il foglio di stile e non chi scrive il testo. */
.elic-invito__nota {
display: block;
margin-top: 0.5rem;
font-family: var(--elic-font-testo);
font-size: var(--elic-dim-occhiello);
font-weight: var(--elic-peso-etichetta);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.elic-invito__azioni {
display: flex;
flex-wrap: wrap;
gap: var(--elic-sp-1);
}
/* In colonna stretta il bottone va sotto la frase in modo dichiarato: lasciato
all'avvolgimento automatico dipenderebbe dalla lunghezza del testo. */
@media (max-width: 30rem) {
.elic-invito {
flex-direction: column;
align-items: flex-start;
}
}
/* Sul fondo oro il contorno del focus resta scuro: l'oro su oro
sparirebbe. Il valore predefinito e' gia' quello giusto, quindi qui
non serve alcuna regola: la nota esiste per evitare che qualcuno la
aggiunga per simmetria con le sezioni scure. */
/* ── Numero in evidenza ─────────────────────────────────── */
.elic-numero {
display: grid;
gap: var(--elic-sp-1);
}
/* Il valore e' inchiostro, non oro. Sembra un passo indietro e non lo e': in
questa palette l'oro e' il colore dell'azione, e un dato non e' un'azione.
A far pesare la cifra ci pensa il filo d'oro che le sta sopra, che e' dove
l'accento torna.
Il primo giro le portava a 72px. Erano le cose piu' grandi della pagina —
piu' del titolo della sezione a cui appartengono — e quattro cifre di
quella taglia in fila, subito sotto la hero, si leggevano prima del titolo
che dovrebbero corredare. A 36px restano evidenti, ma lavorano come dati
al servizio del racconto invece di diventarne il titolo. */
.elic-numero__valore {
font-family: var(--elic-font-display);
font-weight: var(--elic-peso-display);
font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.25rem);
line-height: 0.94;
letter-spacing: -0.04em;
color: var(--elic-testo);
/* Cifre tutte della stessa larghezza: senza, "967" e "5 mesi" non
partono dallo stesso punto ottico e la fila di numeri ondeggia. */
font-variant-numeric: tabular-nums;
}
.elic-sezione--scura .elic-numero__valore {
color: var(--elic-su-scuro);
}
.elic-numero__etichetta {
font-family: var(--elic-font-testo);
font-size: var(--elic-dim-occhiello);
font-weight: var(--elic-peso-etichetta);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.4;
color: var(--elic-testo-tenue);
}
.elic-sezione--scura .elic-numero__etichetta {
color: var(--elic-su-scuro-tenue);
}
/* La fonte del dato: senza, il numero non e' citabile da un motore
generativo e non e' verificabile da un lettore. */
/* Sopra la fascia, in fondo a destra e nel corpo piu' piccolo della scala:
dice da dove vengono i numeri senza mettersi davanti a loro. Sull'avorio
misura 5,09:1, sopra il minimo per il testo piccolo. */
.elic-numero__fonte {
max-width: none;
margin-bottom: var(--elic-sp-2);
font-size: var(--elic-dim-occhiello);
text-align: right;
color: var(--elic-testo-tenue);
}
.elic-sezione--scura .elic-numero__fonte {
color: var(--elic-su-scuro-tenue);
}
/* ── Gruppo di azioni ───────────────────────────────────── */
/* Il contenitore dei bottoni. Nel prototipo esisteva tre volte con tre nomi
diversi — hero, elicoidale, chiusura — e tre volte con le stesse quattro
righe. Qui e' uno solo: i blocchi che allineano diversamente lo dicono
nella propria regola, in blocchi.css, invece di ridichiarare la flexbox.
L'interlinea va azzerata: dentro un paragrafo i bottoni ereditavano
l'interlinea del testo e la riga sotto si staccava di qualche pixel in piu'
di quanto dice il gap. */
.elic-azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--elic-sp-2);
line-height: 1;
margin-top: var(--elic-sp-3);
}
/* ── Tabelle ────────────────────────────────────────────── */
/* Dati confrontabili. Non sono decorazione: una tabella e' cio' che i motori
generativi estraggono piu' volentieri della prosa, ed e' anche il modo in
cui quattro prospetti economici si leggono davvero.
Il contenitore che scorre e' obbligatorio: su un telefono una tabella a
sette colonne non ci sta, e senza di lui e' la PAGINA a scorrere di lato —
che rompe la lettura di tutto il resto per colpa di una sezione sola. */
.elic-tabella {
overflow-x: auto;
margin-block: var(--elic-sp-4);
/* Il bordo dice dove finisce l'area che scorre: senza, sembra che la
tabella sia tagliata. */
border-inline-end: 1px solid var(--elic-bordo-chiaro);
/* L'ombra che dice che si puo' scorrere, e che sparisce quando non c'e'
piu' niente da scoprire.
Sono quattro sfondi sovrapposti: due tappi in tinta ancorati ai bordi
dell'area che scorre, e due ombre ancorate al contenuto. Quando il
contenuto e' fermo a inizio corsa il tappo di sinistra copre la sua
ombra; appena si scorre, l'ombra esce da sotto il tappo. E' l'unico modo
di ottenere l'indizio in CSS puro: senza JavaScript nessuno sa quanto
una scrollbox e' scorsa, ma il background-attachment lo sa.
Su telefono, dove una tabella a sette colonne non ci sta mai, e' l'unica
cosa che distingue una tabella tagliata da una tabella da scorrere. */
background:
linear-gradient(to right, var(--elic-bianco) 30%, rgb(255 255 255 / 0)) left / 3rem 100% no-repeat local,
linear-gradient(to left, var(--elic-bianco) 30%, rgb(255 255 255 / 0)) right / 3rem 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgb(25 20 16 / 0.16), rgb(25 20 16 / 0)) left / 1.25rem 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgb(25 20 16 / 0.16), rgb(25 20 16 / 0)) right / 1.25rem 100% no-repeat scroll;
}
/* Sui fondi non bianchi i due tappi devono essere della carta su cui stanno,
altrimenti si vedono come due strisce chiare in mezzo alla fascia. */
.elic-sezione--chiara .elic-tabella {
background-image:
linear-gradient(to right, var(--elic-avorio) 30%, rgb(245 243 238 / 0)),
linear-gradient(to left, var(--elic-avorio) 30%, rgb(245 243 238 / 0)),
radial-gradient(farthest-side at 0 50%, rgb(25 20 16 / 0.16), rgb(25 20 16 / 0)),
radial-gradient(farthest-side at 100% 50%, rgb(25 20 16 / 0.16), rgb(25 20 16 / 0));
}
/* ── Testo a misura piena ───────────────────────────────── */
/* La fascia si allarga per la tabella, non per la prosa. Il titolo, l'occhiello
e i paragrafi restano alla misura di lettura; la tabella e' l'unica cosa che
la scavalca, ed e' il motivo per cui la misura piena esiste.
L'eccezione va scritta su .elic-tabella e non su table: la tabella non e'
figlia del testo, e' avvolta dal contenitore che scorre — se il tetto cade
sull'involucro, la tabella resta larga quanto una colonna di prosa e si
mette a scorrere di lato pur avendo mille pixel liberi accanto. */
.elic-testo-blocco__piena > :not(.elic-testo),
.elic-testo-blocco__piena .elic-testo > :not(.elic-tabella) {
max-width: var(--elic-larghezza-testo);
}
.elic-testo table {
width: 100%;
min-width: 34rem;
border-collapse: collapse;
font-size: var(--elic-dim-piccolo);
font-variant-numeric: tabular-nums;
}
/* La didascalia sta sopra e si legge come un'intestazione: dice a che cosa si
riferiscono le cifre, e in una pagina con quattro prospetti e' l'unica cosa
che distingue una tabella dall'altra. */
/* Sotto i 40rem la tabella non scorre: si legge una riga alla volta.
Ogni riga diventa una scheda, l'intestazione di riga ne e' il titolo e ogni
valore si porta davanti il nome della propria colonna, che l'intestazione —
qui invisibile — non puo' piu' dare. E' il consiglio del documento di
revisione, ed e' anche la sola forma in cui sette colonne di numeri si
leggono su un telefono: scorrere di lato una tabella economica significa
perdere di vista la riga a cui il numero appartiene.
L'intestazione sparisce alla vista ma non ai lettori di schermo: e' un
ritaglio, non display:none, perche' i ruoli espliciti messi dalla resa
tengono in piedi la tabella anche quando il display cambia. */
@media (max-width: 40rem) {
.elic-tabella {
overflow-x: visible;
border-inline-end: 0;
background: none;
}
.elic-testo .elic-tabella table {
min-width: 0;
}
.elic-tabella thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.elic-testo .elic-tabella tbody tr {
display: block;
padding-block: var(--elic-sp-3);
border-bottom: 1px solid var(--elic-bordo-chiaro);
}
.elic-testo .elic-tabella tbody th {
display: block;
padding: 0 0 var(--elic-sp-2);
border: 0;
font-size: var(--elic-dim-medio);
white-space: normal;
}
.elic-testo .elic-tabella tbody td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--elic-sp-2);
padding: 0.35rem 0;
border: 0;
}
/* Senza etichetta non si stampa niente: `content: attr()` su un attributo
assente rende stringa vuota, e la cella resta un valore allineato a
destra invece di un due punti che introduce il nulla. */
.elic-testo .elic-tabella tbody td::before {
content: attr(data-etichetta);
flex: none;
font-size: var(--elic-dim-occhiello);
font-weight: var(--elic-peso-etichetta);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--elic-testo-tenue);
}
}
.elic-testo caption {
margin-bottom: var(--elic-sp-2);
text-align: start;
font-size: var(--elic-dim-occhiello);
font-weight: var(--elic-peso-etichetta);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--elic-testo-tenue);
}
/* Gruppi dentro un testo: un sottotitolo e un elenco, senza card. */
.elic-testo h3 {
font-size: var(--elic-dim-medio);
}
.elic-testo * + h3 {
margin-top: var(--elic-sp-4);
padding-top: var(--elic-sp-3);
border-top: 1px solid var(--elic-bordo-chiaro);
}
.elic-testo h3 + ul {
margin-top: var(--elic-sp-2);
}
/* Righe separate da divisori leggeri: titolo in grassetto, descrizione sotto. */
.elic-testo .elic-righe,
.elic-testo .elic-spunte {
list-style: none;
padding: 0;
}
.elic-testo .elic-righe li {
padding-block: var(--elic-sp-2);
border-bottom: 1px solid var(--elic-bordo-chiaro);
}
.elic-testo .elic-righe li:first-child {
padding-top: 0;
}
.elic-testo .elic-righe li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.elic-testo .elic-righe strong,
.elic-testo .elic-spunte strong {
display: block;
}
/* Una checklist: una spunta d'oro al posto dei numeri. */
.elic-testo .elic-spunte li {
position: relative;
padding-inline-start: 2rem;
}
.elic-testo .elic-spunte li + li {
margin-top: var(--elic-sp-2);
}
.elic-testo .elic-spunte li::before {
content: "";
position: absolute;
inset-inline-start: 0.15rem;
top: 0.3em;
width: 0.55rem;
height: 0.95rem;
border: solid var(--elic-oro-scuro);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* L'avvertenza sotto una tabella: corpo piccolo, sotto al dato che limita. */
.elic-testo__nota {
font-size: var(--elic-dim-occhiello);
color: var(--elic-testo-tenue);
}
.elic-testo th,
.elic-testo td {
padding: var(--elic-sp-2) var(--elic-sp-2) var(--elic-sp-2) 0;
text-align: start;
border-bottom: 1px solid var(--elic-bordo-chiaro);
vertical-align: baseline;
}
.elic-testo thead th {
border-bottom: 2px solid var(--elic-oro);
font-size: var(--elic-dim-occhiello);
font-weight: var(--elic-peso-etichetta);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--elic-testo-tenue);
white-space: nowrap;
}
/* L'intestazione di riga e' il nome dell'impianto: e' la chiave della riga e
va letta come tale, non come un dato fra gli altri. */
.elic-testo tbody th {
font-weight: var(--elic-peso-rilievo);
white-space: nowrap;
}
.elic-sezione--scura .elic-testo th,
.elic-sezione--scura .elic-testo td {
border-bottom-color: var(--elic-bordo-scuro);
}
/* Il rilievo su un dato da confermare. Non e' un evidenziatore giallo: e' un
filo d'oro a sinistra, come le note di fonte, perche' dice la stessa cosa —
guarda da dove viene questo numero. */
.elic-testo mark {
display: inline-block;
padding: 0.15em 0 0.15em 0.6em;
border-inline-start: 3px solid var(--elic-oro);
background: none;
color: inherit;
font-style: italic;
}
/* ── La conchiglia dei modali ───────────────────────────── */
/* Un