/* =========================================================================
NeXeN Cimiteri — le fondamenta.
I colori sono i dodici del Kit di Elementor (`design-system.json`, letti dal
Kit #1023), più i tre che il sito usa davvero e nel Kit non c'erano: il nero
del fondo, il grigio dei collegamenti minori e il rosso della X di NeXeN.
Non si reinventano: se un colore serve e non è qui, si guarda prima il Kit.
La tipografia sta in `token.css`, che è GENERATO. Qui ci sono solo i valori
predefiniti del corpo del testo.
========================================================================= */
:root {
/* I quattro di sistema */
--c-principale: #6EC1E4;
--c-secondario: #54595F;
--c-testo: #7F7F7F;
--c-risalto: #54595F;
/* Gli otto personalizzati */
--c-separatori: #02010121;
--c-sfondo-chiaro: #A5A5A51A;
--c-trasparente: #FFFFFF00;
--c-sfondo-manifesti: #474747;
--c-sfumatura-1: #F7F7F7;
--c-bianco-mezzo: #FFFFFF80;
--c-grigio-social: #E9E9E9;
--c-blu: #005E86;
/* I tre che il sito usa e il Kit non dichiara */
--c-fondo: #000000;
--c-bianco: #FFFFFF;
--c-minore: #BCBCBC;
--c-nexen: #E23440;
/* Il fondo del bottone pieno. ⚠ Non è `--c-testo` e non è un colore nuovo
per gusto: è il grigio più chiaro su cui il bianco arriva a 4,5:1. Il
conto sta accanto a `.bottone`, in fondo a questo file. */
--c-bottone: #767676;
/* La sfumatura della barra in testa, letta dal sito vivo il 4/8/2026 */
--sfumatura-testata: radial-gradient(#000000 0%, #54595F 100%);
/* Misure */
--testata-h: 56px;
--larghezza-max: 1200px;
--passo: 26px;
}
*, *::before, *::after { box-sizing: border-box; }
/* G1 (28/8/2026, ordine di Gabriele n.1) · «lo scorrimento in giù dev'essere
uno scivolamento dolce, non immediato. Stessa cosa per il torna su.»
Le frecce `scrolldown.gif` (`#2`…`#7`, `_conversione/html/16515.html`) e
il torna-su (`href="#top"`, `contenuto.css`) sono ancore vere: il salto
secco viene dal browser che salta all'ancora, non da JavaScript. Una riga
sola, qui, perché vale per tutto il documento — non c'è un'ancora che
debba restare secca.
⚠ Non litiga con i tre moduli di `testata-home.js` che ascoltano
`scroll`: leggono `window.scrollY` a ogni fotogramma con
`requestAnimationFrame`, e uno scorrimento animato dal browser genera
comunque eventi `scroll` progressivi lungo tutta l'animazione — gli stessi
numeri che leggerebbero con un salto secco, solo spalmati su più
fotogrammi. Verificato leggendo i tre moduli (soglia dei 453px, sfumatura
dell'accesso, sfumatura del torna-su): nessuno dei tre assume un salto
istantaneo, tutti ricalcolano da `scrollY` puro. */
html { scroll-behavior: smooth; }
/* Chi ha chiesto di non far muovere le cose deve continuare ad avere il
salto secco: non è un'opinione nostra, è WCAG 2.3.3 e la richiesta che sta
scritta sopra, «rispetta prefers-reduced-motion». */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
html { -webkit-text-size-adjust: 100%; }
/* ⚠ IL CORPO DEL TESTO E QUELLO DEI TITOLI LI DICE IL KIT, NON QUESTO FILE.
(6/8/2026.)
Stavano scritti qui — `font-size: 13px` sul corpo, `Lusitana 500` su tutti i
titoli — e sembrava innocuo perche' il 13px era **giusto**. Non lo era per
due ragioni.
La prima: il Kit alza il corpo a **14px sotto gli 800**, e una riga scritta a
mano non ha la media query. La seconda, che e' costata di piu': con i titoli
senza corpo dichiarato valgono i predefiniti del browser, e quelli sono in
`em`, cioe' **relativi al genitore**. Un `h1` dentro `.stile-primary` (30px)
diventava `2em` = **60px** dove il vivo lo rende a 25.
Adesso li scrive `token.css`, generato dal Kit con `--elementi`. Questo file
viene DOPO nell'ordine di caricamento e pesa uguale (0,0,1), quindi
qualunque cosa ridichiari qui vince: e' il motivo per cui `font-size` e
`font-family` dei titoli se ne sono andati da qui. Restano il margine e
l'interlinea, che il Kit non dichiara. */
/* 🚨 IL FONDO DEL SITO È BIANCO, E LA HOME È L'ECCEZIONE. (15/8/2026.)
Qui c'era `background: var(--c-fondo)`, cioè nero su tutto il sito, e per un
giorno è passata per una scelta. **Non lo era**: era il buco lasciato dal
tema genitore. Il vivo monta `hello-elementor`, il cui `assets/css/reset.css`
dichiara `body { background-color: #fff }`; questo tema non è figlio di
nessuno, quindi quella riga non arrivava più e il nero della home si è esteso
a tutte le 71 pagine.
Letto con `getComputedStyle(document.body)` sul sito vivo, il 15/8/2026, una
pagina per volta — non dedotto:
/termini-uso/ background rgb(255,255,255) color rgb(84,89,95)
/mi-presento…/ background rgb(255,255,255) color rgb(84,89,95)
/resetta-la-password/ background rgb(255,255,255) color rgb(84,89,95)
/accedi…/ background rgb(255,255,255) color rgb(84,89,95)
/?s=manifesto background rgb(255,255,255) color rgb(84,89,95)
/questa-pagina-non-esiste-404/ background rgb(255,255,255)
/ background rgb(0,0,0) color rgb(84,89,95)
Cioè: **una sola pagina su sette ha il fondo nero, ed è la home.** Il nero
delle altre pagine scure del vivo (il 404, i modelli di manifesto) non viene
dal `body`: viene da una SEZIONE dentro la pagina, che si dipinge da sola.
⛔ La home non si muove: `body.home` riprende esattamente il nero di prima. */
body {
margin: 0;
background: var(--c-bianco);
color: var(--c-secondario);
/* 🚨 L'INCHIOSTRO È UNA VARIABILE, PERCHÉ IL FONDO NON È PIÙ UNO SOLO.
(15/8/2026.)
Rimettere il fondo bianco e basta non bastava, ed è la trappola: i titoli
e i collegamenti del contenuto erano scritti `var(--c-bianco)` in quindici
punti di `contenuto.css`, e su fondo bianco fanno **1,00:1** — invisibili.
Una pagina bianca con il testo bianco è peggio di una pagina nera.
Quindi il colore forte del testo non si chiama più «bianco»: si chiama
«inchiostro», e vale quello che deve valere sul fondo che ha sotto.
Le variabili si ereditano, quindi basta ridichiararle sul contenitore
scuro — `body.home`, il 404, `.sezione--scura` — e tutto quello che sta
dentro le segue senza una riga in più.
chiaro inchiostro #54595F su #FFFFFF → 7,07:1 ✓ AA e AAA
scuro inchiostro #FFFFFF su #000000 → 21,0:1 ✓ invariato
`--c-tenue` è il grigio quieto (occhielli, bottoni vuoti): #BCBCBC sul
nero fa 10,4:1, sul bianco farebbe **1,90:1**, e lì diventa #7F7F7F —
4,00:1, che è lo stesso rapporto del testo corrente del vivo, non un
colore nuovo. */
--c-inchiostro: var(--c-secondario);
--c-tenue: var(--c-testo);
/* La famiglia resta qui per il RIPIEGO — `token.css` scrive `"Poppins"` e
basta, e un carattere che non arriva deve cadere su un senza grazie, non
sul serif del browser. Il corpo no: quello e' del Kit. */
font-family: "Poppins", sans-serif;
/* ⚠ 1,5 e non 1,6, ed è misurato sul vivo, non scelto. (6/8/2026.)
`getComputedStyle` su un paragrafo di `la-tua-pubblicita`: `font-size
13px`, `line-height 19.5px`. 19,5 diviso 13 fa **1,5**. L'1,6 era una
scelta nostra, e un decimo di interlinea su una pagina da 24.000
caratteri è un decimo di pagina. */
line-height: 1.5;
overflow-wrap: break-word;
}
/* Le due pagine che sul vivo sono scure davvero, e il perché di ognuna.
`home` — il `body` del vivo è `rgb(0,0,0)`: letto, non scelto.
`error404` — sul vivo il nero è di una sezione dentro la pagina; qui il 404
è un template PHP e la sezione non c'è, quindi lo porta il
`body`. Il risultato a schermo è lo stesso: fondo nero da un
bordo all'altro, «404» bianco. Confrontate le due schermate il
15/8/2026, sono la stessa pagina.
⚠ `error404` è la classe di WordPress e la mettono i due lati: sul vivo il
`body` la porta, da noi anche. Le cinque pagine che esistono solo qui
(informativa-privacy, cookie-policy, benvenuto, messaggi,
complete-registration) NON sono 404 da noi, quindi restano chiare come le
pagine che c'erano già — che è come vanno vestite.
🚨 3/9/2026 (S-PAGINE / V3) — QUESTA RIGA MENTIVA. Il commento sopra
diceva ancora «il 404 è nero come la home», ma il fronte V3 ha cambiato la
404 in una pagina CHIARA (`--ac-foglio`, in `pagine-testo.css` §16):
`body.error404` restava qui dentro col nero della home, e a seconda
dell'ordine di caricamento dei due fogli poteva vincere lui — un cambio
dichiarato in un commento ma non fatto nel CSS, cioè un verde falso.
`error404` esce da questa riga: il mandato di V3 su questo file è
ESATTAMENTE «solo `body.error404`», e la home (`body.home`, sotto) non si
tocca, come sempre. */
body.home {
background: var(--c-fondo);
--c-inchiostro: var(--c-bianco);
--c-tenue: var(--c-minore);
}
/* 🚨 E DEL FONDO DELLA HOME AVEVAMO LETTO META'. (21/8/2026.)
La nota qui sopra dice «il `body` del vivo e' `rgb(0,0,0)`: letto, non
scelto», ed e' vero — ma e' `background-COLOR`. Sul vivo il `body` della home
porta anche una FOTOGRAFIA, il marmo scuro:
body.elementor-page-16515 { background-color:#000000;
background-image:url(.../2021/10/05-background.webp);
background-position:center center; background-size:cover; }
+ `background-attachment: fixed` (misurato con getComputedStyle il 21/8)
Viene dalle impostazioni di pagina di Elementor (`_elementor_page_settings`),
che `_calco/css-scritto-a-mano.md` segna come **mai estratte**: si vede solo
nel foglio `post-16515.css` del vivo. Da noi la meta' nera dell'eroe era un
nero piatto, sul vivo e' marmo.
⚠ Solo `home`: `error404` sul vivo questa fotografia non ce l'ha, e la riga
qui sopra usa la scorciatoia `background`, che azzererebbe l'immagine — per
questo la fotografia sta in una regola sua, dopo. */
body.home {
background-image: url("/wp-content/uploads/2021/10/05-background.webp");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Le 52 pagine dell'editor dei manifesti: una stanza grigia, non una pagina
bianca. Il perché e i pixel che lo dicono stanno in `header.php`, accanto
alla riga che assegna la classe. #FFFFFF su #474747 fa **9,29:1**. */
body.sezione-manifesti--modello {
background: var(--c-sfondo-manifesti);
--c-inchiostro: var(--c-bianco);
--c-tenue: var(--c-minore);
}
img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; }
/* ⚠ I RESPIRI DEI TITOLI E DEI PARAGRAFI SONO MISURATI SUL VIVO. (6/8/2026.)
Erano `0 0 .5em` per i titoli, `1.25` di interlinea e `1em` per i paragrafi:
tre numeri scelti a occhio, e tutti e tre sbagliati. Letti col pannello sul
sito di oggi, su `la-tua-pubblicita`:
h1 font-size 25px line-height 30px (1,2) margin 8px / 16px
h2 font-size 20px line-height 24px (1,2) margin 8px / 16px
p font-size 13px line-height 19.5px margin 0 / 14,4px
Il margine dei titoli è in **px e non in em**: sul vivo un `h1` da 25px e un
`h2` da 20px hanno lo stesso 8/16, cioè il respiro non scala col corpo. In
`em` avremmo dato al titolo grande più aria di quanta ne abbia. */
/* 🚨 CANCELLO DELLO SGUARDO, 30/8/2026 — vedove nei titoli a raffica:
«WEB?» sola, «COMMEMORAZIONE.» sola, «BIOGRAFIA» sola, «...PER» che chiude
la riga su una preposizione. Causa unica su tutto il sito: nessuna regola
diceva al browser come spezzare un titolo su più righe, quindi spezzava
dove capitava (l'ultima parola che non entrava). `text-wrap: balance`
pareggia le righe di UN elemento (non tocca il corpo del testo sotto, che
resta `wrap` normale) senza aggiungere un solo `
` a mano: il browser
sceglie da solo dove andare a capo, cercando righe di lunghezza simile.
Non regredisce dove il titolo sta già su una riga sola: lì non c'è niente
da bilanciare. */
h1, h2, h3, h4, h5, h6 { margin: 8px 0 16px; line-height: 1.2; text-wrap: balance; }
/* Il ripiego delle famiglie che `token.css` scrive senza alternativa.
⚠ `h4` il Kit lo vuole in **Quando**, e il tema non lo ospita — ma nemmeno
il sito vivo lo carica: l'unico carattere di terzi che chiede e' Open Sans,
per Youzify. Quindi sul vivo `h4` cade sul senza grazie di sistema, e qui
deve cadere sullo stesso: senza questa riga cadrebbe sul **serif**, che e'
un'altra cosa. Sono 9 titoli su tutto il sito, e si vedono lo stesso. */
/* 0.21.1 — con i titoli anche quello della finestra dei cookie, che da
`nexen-consenso` 0.1.3 è un ``
invece di un `
`: stesso carattere di prima. */
h1, h2, h3, h5, h6,
.nexen-consenso-modale-titolo { font-family: "Lusitana", serif; }
h4 { font-family: "Quando", sans-serif; }
p { margin: 0 0 .9rem; } /* 14,4px: il valore letto sul vivo, non un `em` a occhio */
ul, ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
/* S-TESTATA-6, 4/9/2026 — LA TESTATA NUOVA È `sticky`, NON PIÙ `fixed`
(ordine di Gabriele: header identico al file di riferimento, che usa
`position:sticky`). Una barra sticky resta nel flusso e si riserva da
sola lo spazio sopra il contenuto: il `padding-top` qui sotto, nato per
compensare una barra `fixed` (tolta dal flusso), sommato a quello
diventerebbe un buco doppio alto quanto la testata su OGNI pagina.
`--testata-h` resta comunque una variabile viva (`testata-nera.css` la
dichiara, 64/67px): la leggono `archivio-civile.css` e
`archivio-civile-scheda.css` per il `top` delle loro barre sticky
secondarie, che non dipende da fixed/sticky della testata. */
.contenuto { padding-top: 0; }
/* 🚨 STORIA, non più vera dal 3/9 (S-TESTATA-2) e dal 4/9 (S-MENU-5) — letta
e tolta il 5/9 (S-TESTATA-6, segnalato da Prometeo: sulla home a 1920 il
titolo dell'eroe finiva sotto la testata). Le due regole che stavano qui
(`body.home .contenuto{padding-top:0}` e, da 1200px,
`margin-top:-60px`) risalgono al 27/8, quando la home aveva un'ALTRA
testata (`template-parts/testata-home.php`, fissa, fuori dal flusso) e
un mega-menu che a 1200px+ obbligava il contenuto a risalire sotto di
lui. Da allora: S-TESTATA-2 (3/9) ha fatto stampare la testata NORMALE
anche in home (comprata nel flusso, non più fuori), S-MENU-5 (4/9) ha
tolto il mega-menu. Nessuna delle due ragioni esiste più — la home oggi
deve comportarsi come ogni altra pagina, ed è per questo che la regola
generale qui sopra (`.contenuto{padding-top:0}`, corretta per la
testata `sticky` di S-TESTATA-6) basta da sola. Con la vecchia
`margin-top:-60px` ancora accesa, la testata sticky (che ora resta nel
flusso e ci vuole il suo spazio) veniva scavalcata dal contenuto tirato
su di 60px: il titolo «I cimiteri d'Italia,» spariva sotto la barra. */
/* La riga che porta al contenuto, per chi naviga con la tastiera. Si vede solo
quando riceve il fuoco: è il primo elemento della pagina, e su un sito con
diciassette voci di menu è la differenza fra usarlo e non usarlo. */
.salta-al-contenuto {
position: absolute;
left: -9999px;
z-index: 100000;
padding: .6em 1em;
background: var(--c-bianco);
color: var(--c-fondo);
text-decoration: none;
}
.salta-al-contenuto:focus { left: 8px; top: 8px; }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Il fuoco si vede. Toglierlo è la cosa che rende un sito inusabile a chi non
ha il mouse, e si toglie quasi sempre per sbaglio.
⚠ `--c-inchiostro` e non `--c-bianco`: un filo bianco su una pagina bianca
non è un fuoco che si vede, è un fuoco tolto. (15/8/2026.) */
/* 🚨 0.21.1, 25/9/2026 — L'ANELLO DOPPIO. Fino alla 0.21.0 qui c'era
`outline: 2px solid var(--c-inchiostro)`: un colore solo, che cambia con
la pagina (`body.home` lo porta a #54595F in `contenuto.css:3006`) e che
sul nero del piede faceva 2,64-2,69:1, sotto il 3:1 chiesto a un indicatore
di fuoco (sguardo della 0.21.0, 22 tasti del piede su ogni pagina). Nessun
colore singolo regge sia sul bianco sia sul nero: l'anello è doppio, un filo
chiaro attaccato al tasto (`box-shadow`) e un filo scuro fuori (`outline`).
Sul chiaro si vede quello scuro (#14150F su #FFFFFF 18,4:1), sul nero quello
chiaro (#F3F4F5 su #14150F 16,7:1). Colori fissi, non `--c-inchiostro`:
l'anello non deve seguire il testo della pagina.
⚠ Un componente che dichiara un suo `box-shadow` a riposo con una classe
perde il filo chiaro (vince la sua regola): resta l'outline scuro. Chi sta
su un fondo scuro e ha un'ombra sua deve dichiarare anche il suo anello. */
:focus-visible {
outline: 2px solid #14150F;
outline-offset: 2px;
box-shadow: 0 0 0 2px #F3F4F5;
}
/* Un bottone, uno solo, per tutto il sito. Le misure vengono dai bottoni dei
popup del sito di oggi: 40px di altezza, testo 15px, fondo #7F7F7F.
🚨 IL FONDO NON È PIÙ #7F7F7F, E IL NUMERO È CALCOLATO. (10/8/2026.)
Bianco su #7F7F7F fa **4,00:1** — sotto il 4,5 che WCAG 2.1 AA chiede a un
testo di 15px — e da fermo il bottone cedeva. Non si vedeva perché il
bottone stava a metà pagina; da oggi «Come ci si arriva» è nel primo
schermo di 117 schede, e quello che si vede per primo è quello che si
misura per primo.
Il conto, con la formula di WCAG (`L = 0,2126R + 0,7152G + 0,0722B` sui
canali linearizzati, contrasto `(L₁+0,05)/(L₂+0,05)`):
#7F7F7F L = 0,21223 bianco su fondo → 1,05 / 0,26223 = **4,00:1** ✗
#767676 L = 0,18116 bianco su fondo → 1,05 / 0,23116 = **4,54:1** ✓
#777777 L = 0,18448 bianco su fondo → 1,05 / 0,23448 = **4,48:1** ✗
Cioè: **118 è il valore più chiaro che passa**, e questo è il minimo che
ripara — un grigio più scuro sarebbe stato più facile e avrebbe cambiato il
bottone più del necessario. `--c-testo` resta #7F7F7F e non si tocca: è il
colore del testo sul nero (5,24:1, AA) e il filo di `.bottone--vuoto`, e
spostarlo per un bottone avrebbe cambiato mezzo sito.
Le due altre misure, verificate insieme a questa:
· **hover e focus** portano il fondo a `--c-secondario` #54595F → **7,07:1**,
invariato: questa riga non li tocca, e il salto da fermo a hover adesso è
più netto di prima, non meno;
· il **bordo del bottone contro il nero** della pagina scende da 5,24:1 a
**4,62:1**, e il minimo per una forma non testuale (WCAG 1.4.11) è 3:1. */
/* 🚨 Censimento del 26/8, secondo giro: 40px e' sotto i 44 della scheda.
`.bottone` e' condiviso — Accedi, Registrati, Contattaci e «Vai al Modulo»
sono lo stesso bottone su pagine diverse, quindi si ripara una volta sola
qui, non pagina per pagina. */
.bottone {
display: inline-block;
min-height: 44px;
padding: .55em 1.4em;
border: 0;
background: var(--c-bottone);
color: var(--c-bianco);
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 1.8;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .18s ease;
}
.bottone:hover, .bottone:focus-visible { background: var(--c-secondario); }
/* La seconda azione di una coppia. Due bottoni pieni affiancati non dicono
quale dei due si preme: questo è lo stesso bottone, svuotato, e resta un
bottone — stessa altezza, stesso corpo, stessa area da toccare. */
.bottone--vuoto {
background: transparent;
box-shadow: inset 0 0 0 1px var(--c-testo);
color: var(--c-tenue);
}
.bottone--vuoto:hover, .bottone--vuoto:focus-visible {
background: transparent;
box-shadow: inset 0 0 0 1px var(--c-inchiostro);
color: var(--c-inchiostro);
}