/* Manrope autoospitato (licenza OFL in docs/licenses/manrope-OFL.txt),
invece del `` verso fonts.googleapis.com/fonts.gstatic.com che
entrambe le pagine di accesso caricavano prima: quel link trasmetteva
l'indirizzo IP di ogni visitatore a Google prima ancora di un accesso
riuscito, una trasmissione a terzi non dichiarata in SPECIFICATION.md
§6.3 (m-BR-4 della code review del 15/09/2026, portato al titolare —
Nova Aeg — prima di questa correzione tecnica). File unico, sottoinsieme
latino (l'unico che questo progetto usa: nessun testo cirillico, greco
o vietnamita nell'interfaccia), variabile sull'asse `wght` da 200 a
800 — copre i pesi 400/500/600/700 usati qui con un solo download. */
@font-face {
font-family: "Manrope";
src: url("manrope-latin.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
:root {
--dark: #141413;
--light: #faf9f5;
/* #9a9890 originale: 2.89:1 su sfondo bianco, sotto la soglia AA di 4.5:1
per testo normale (verificato calcolando il contrasto WCAG). Scurito a
5.51:1, mantenendo la stessa tonalità. */
--mid: #6b6960;
--lg: #e4e2d8;
--orange: #023607;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
/* Colonna verticale, uguale sulle due pagine: logo in alto, card al
centro dello spazio che resta, pulsante «Info» in basso. `min-height`, non `height`: su uno schermo basso
la pagina scorre invece di tagliare la card. */
body {
min-height: 100%;
width: 100%;
font-family: "Manrope", sans-serif;
color: var(--dark);
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
}
/* Sfondo statico (M5): il primo aspetto dello sfondo animato come
gradiente CSS — ciò che si vede senza JavaScript e nel primo istante
prima del primo fotogramma. Sta solo su `html`, e `body` è trasparente:
lo sfondo di `body` si dipinge sopra gli elementi a indice di
sovrapposizione negativo, e nasconderebbe il canvas (provato in Chrome
con il valore precedente, `background: #f0eeea` su entrambi). Colori del
primo aspetto: Top #9FBEFF, Mid #F9F4EB, Bottom #FFAFDE. */
html {
background: linear-gradient(to bottom, #9fbeff 0%, #f9f4eb 65%, #ffafde 100%);
}
body {
background: transparent;
}
/* Canvas dello sfondo animato (login-background.js): a tutto schermo,
dietro la card e il pulsante di pausa, che stanno a un livello
superiore. Indice positivo, non negativo: vedi sopra. */
.login-background {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
/* Logo delle pagine di accesso, fuori dalla card e largo quanto la
finestra meno un margine laterale proporzionale, come nel mockup
definitivo. Il PNG è largo 1598 px: abbastanza per non sgranare su uno
schermo largo a densità normale. */
.brand {
position: relative;
z-index: 1;
width: 100%;
padding: clamp(16px, 5vh, 56px) 5vw 0;
}
.brand img {
display: block;
width: 100%;
height: auto;
}
.card {
position: relative;
z-index: 1;
/* Margini automatici sull'asse della colonna: la card sta al centro
dello spazio fra il logo e il piè di pagina. */
margin: auto 0;
width: 100%;
max-width: 340px;
padding: 32px 28px;
background: rgba(255, 255, 255, 0.98);
border-radius: 10px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
h1 {
font-size: 16px;
font-weight: 700;
margin: 0 0 20px;
}
form {
display: flex;
flex-direction: column;
gap: 6px;
}
label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--mid);
margin-top: 12px;
}
input {
font-family: "Manrope", sans-serif;
font-size: 13px;
padding: 9px 10px;
border: 1px solid var(--lg);
border-radius: 6px;
background: var(--light);
color: var(--dark);
outline: none;
}
input:focus {
border-color: var(--orange);
}
/* Comando mostra/nascondi password (M4.2, D24): il campo diventa
posizionato per contenere il pulsante al proprio interno, a destra,
senza sovrapporsi al testo digitato. */
.password-field {
position: relative;
}
.password-field input {
width: 100%;
padding-right: 38px;
}
/* Scavalca la regola `button` di elemento sotto (padding, margin-top,
sfondo verde, testo bianco): qui serve una piccola icona, non un
pulsante di invio. */
.password-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
margin-top: 0;
padding: 4px;
background: none;
border: none;
color: var(--mid);
cursor: pointer;
line-height: 0;
}
/* Senza questa regola, una `display` sulla classe batterebbe l'attributo
`hidden`: è il meccanismo con cui il comando resta invisibile finché
password-toggle.js non lo rivela (vincolo 5 di D24). */
.password-toggle[hidden] {
display: none;
}
/* Pulsante di pausa dello sfondo (M5): in un angolo, sopra il canvas.
Scavalca la regola `button` di elemento (padding, margin-top, sfondo
verde, testo bianco). */
.background-toggle {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 1;
margin-top: 0;
padding: 9px;
background: rgba(255, 255, 255, 0.92);
color: var(--dark);
border: 1px solid var(--lg);
border-radius: 50%;
line-height: 0;
}
/* Come `.password-toggle[hidden]`: una `display` sulla classe batterebbe
l'attributo `hidden`, con cui il pulsante resta invisibile finché lo
script non lo rivela. */
.background-toggle[hidden] {
display: none;
}
/* Un'icona alla volta: le barre della pausa mentre l'animazione scorre, il
triangolo della ripresa quando è ferma. Lo stato lo porta l'attributo
`data-paused`, che lo script imposta insieme all'etichetta. */
.background-toggle .icon-play {
display: none;
}
.background-toggle[data-paused] .icon-pause {
display: none;
}
.background-toggle[data-paused] .icon-play {
display: inline;
}
/* Pulsante «Info» in basso al centro, trasparente: solo il testo sopra lo
sfondo. Scavalca la regola `button` di elemento. */
.page-footer {
position: relative;
z-index: 1;
padding-top: 24px;
}
.info-button {
margin-top: 0;
padding: 8px 14px;
font-size: 16px;
font-weight: 600;
background: none;
color: var(--dark);
}
/* Come `.password-toggle[hidden]`: il pulsante resta invisibile finché
info-dialog.js non lo rivela. */
.info-button[hidden] {
display: none;
}
/* Finestra modale del pulsante «Info». Il `