/* Le schermate di accesso — wp-login.php vestito da Ledea.
Caricato da lep_auth_enqueue() (comps/auth_pages.php) su tutte le schermate di
wp-login.php TRANNE l'accesso «al volo» dentro wp-admin (interim-login), che e'
un riquadro in un iframe e non una pagina.
Origine: «Moduli accesso Ledea v2 — fondo cinetico» di Claude Design, che
consegna il markup con gli stili scritti inline. Qui sono diventati classi, e
soprattutto sono diventati regole che si agganciano al markup di WordPress, che
non possiamo riscrivere: gli id #login, #loginform, #nav, #backtoblog, le classi
.input, .wp-pwd, .notice sono suoi, non nostri.
PREFISSO: le-auth-*, dopo le-hp-*, le-gate-*, le-404-* e le-pt-*.
COLORI: tutti dalle rampe del design system (ledea-theme/assets/css/ledea-ds/),
che arrivano qui perche' questo foglio dipende da lat-style. Nessun esadecimale
scritto a mano: le trasparenze usano le varianti --*-rgb dei token.
TEMA CHIARO FISSO: si usano le rampe (--teal-*, --coral-*, --gray-*, --paper),
che non commutano sotto prefers-color-scheme, e non gli alias semantici, che
invece commutano. Questa pagina e' una composizione voluta di carta chiara su
verde scuro: seguire il tema di sistema ribalterebbe solo la card.
COME SI COSTRUISCE LA CARD: nel disegno la card e' un contenitore solo, con il
lockup sopra e il «Torna a Ledea» sotto, entrambi sul verde. Nel DOM di
WordPress lockup, avvisi, modulo, link in fondo e ritorno al sito sono tutti
fratelli dentro #login, e non c'e' nessun aggancio che permetta di avvolgerne
un pezzo (login_header apre DENTRO #login, login_footer gira DOPO la sua
chiusura: sarebbero tag sbilanciati).
La card e' quindi #login stesso — un elemento solo, che puo' portare fondo,
bordo, angoli e ombra senza cuciture — e i due pezzi che nel disegno stanno
fuori ne escono in position absolute, sopra e sotto. E' l'unico modo per avere
una vera ombra: --shadow-card ha una diffusione negativa (0 20px 50px -30px), e
drop-shadow() la diffusione non la accetta, quindi la strada del filtro su un
gruppo di fratelli non esisteva. */
/* ============================================================
1. Il fondo
============================================================ */
body.login.le-auth {
position: relative;
min-height: 100vh;
min-height: 100dvh;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
/* Il lockup sopra e il piede sotto escono dalla card in position absolute:
non entrano nel flusso, quindi non spingono niente, e l'unica cosa che
impedisce loro di finire fuori schermo e' questo padding.
Per questo NON e' scritto a mano ma calcolato dalle stesse misure che quei
due elementi usano: finche' le quattro variabili qui sotto sono la verita',
l'invariante regge da sola. Con due numeri a mano non reggeva: il lockup
usciva di 6,4px dal bordo alto su una finestra da telefono. */
--le-auth-logo-h: 30px;
--le-auth-logo-gap: 20px;
--le-auth-foot-h: 22px;
--le-auth-foot-gap: 18px;
padding-top: calc(var(--le-auth-logo-h) + var(--le-auth-logo-gap) + 24px);
padding-bottom: calc(var(--le-auth-foot-gap) + 2 * var(--le-auth-foot-h) + 16px);
padding-left: 20px;
padding-right: 20px;
background: var(--teal-900);
font-family: var(--font-body);
}
/* WordPress mette il titolo della schermata in un
prima di #login: e' fuori flusso e non entra nel calcolo del flex, ma la riga
qui sotto lo mette al sicuro anche se un giorno quella classe cambiasse. */
body.login.le-auth > .screen-reader-text {
position: absolute;
}
/* I sette livelli del fondo, stampati da lep_auth_background() dentro #login. Il
contenitore e' fixed con z-index negativo: sta in fondo all'albero sbagliato e
copre lo schermo lo stesso. */
.le-auth-bg {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
/* Le due variabili le scrive js/lap_auth.js seguendo il puntatore. Senza il JS
restano a zero e i livelli stanno fermi: la composizione c'e' comunque. */
.le-auth-bg__layer {
position: absolute;
will-change: transform;
transform: translate3d(
calc(var(--le-auth-px, 0) * var(--le-auth-depth, 1) * -7px),
calc(var(--le-auth-py, 0) * var(--le-auth-depth, 1) * -5px),
0
);
}
.le-auth-bg__glow {
position: absolute;
inset: 0;
background: radial-gradient(72% 56% at 50% 16%, rgba(var(--teal-400-rgb), 0.30), rgba(var(--teal-900-rgb), 0) 72%);
animation: le-auth-glow 16s ease-in-out infinite alternate;
}
.le-auth-bg__layer:has(> .le-auth-bg__glow) {
inset: -6%;
}
.le-auth-bg__blob {
position: absolute;
inset: 0;
border-radius: var(--radius-round);
}
.le-auth-bg__layer--blob-a {
left: 8%;
top: 16%;
width: 220px;
height: 220px;
}
.le-auth-bg__layer--blob-a .le-auth-bg__blob {
background: radial-gradient(circle at 50% 50%, rgba(var(--teal-400-rgb), 0.22), rgba(var(--teal-900-rgb), 0) 70%);
animation: le-auth-float 19s ease-in-out infinite alternate;
}
.le-auth-bg__layer--blob-b {
right: 6%;
bottom: 14%;
width: 180px;
height: 180px;
}
.le-auth-bg__layer--blob-b .le-auth-bg__blob {
background: radial-gradient(circle at 50% 50%, rgba(var(--coral-400-rgb), 0.16), rgba(var(--teal-900-rgb), 0) 70%);
animation: le-auth-float 24s ease-in-out infinite alternate-reverse;
}
/* Le fasce d'onda. La SVG e' larga il 256% e porta l'onda due volte: scorrendo di
-50% la seconda copia arriva dove stava la prima, e il giro non ha giunte. */
.le-auth-bg__band {
left: 0;
right: 0;
overflow: hidden;
}
.le-auth-bg__band svg {
display: block;
width: 256%;
fill: none;
}
.le-auth-bg__band path {
stroke-opacity: 0.2;
}
.le-auth-bg__band--1 { top: 9%; color: var(--teal-400); }
.le-auth-bg__band--1 svg { height: 200px; animation: le-auth-flow 46s linear infinite; }
.le-auth-bg__band--1 path { stroke-opacity: 0.26; }
.le-auth-bg__band--2 { top: 26%; color: var(--teal-100); }
.le-auth-bg__band--2 svg { height: 150px; animation: le-auth-flow-rev 62s linear infinite; }
.le-auth-bg__band--2 path { stroke-opacity: 0.13; }
.le-auth-bg__band--3 { bottom: 22%; color: var(--coral-400); }
.le-auth-bg__band--3 svg { height: 170px; animation: le-auth-flow 34s linear infinite; }
.le-auth-bg__band--3 path { stroke-opacity: 0.18; }
.le-auth-bg__band--4 { bottom: 7%; color: var(--teal-400); }
.le-auth-bg__band--4 svg { height: 180px; animation: le-auth-sway 40s ease-in-out infinite alternate; }
.le-auth-bg__band--4 path { stroke-opacity: 0.14; }
/* Il tracciante: una scheggia di luce che ripercorre l'onda piu' bassa. E' l'unico
elemento del fondo che cambia colore rispetto alla sua fascia. */
.le-auth-bg__band .le-auth-bg__trace {
stroke: var(--teal-200);
stroke-opacity: 0.55;
animation: le-auth-trace 11s linear infinite, le-auth-breathe 11s ease-in-out infinite;
}
/* ============================================================
2. Il contenitore, il lockup e il piede
============================================================ */
/* La card. WordPress da' a #login una larghezza di 320px, un padding dall'alto in
percentuale e nessun fondo: qui diventa il contenitore del disegno.
Il centraggio verticale e' `margin: auto 0` e NON `justify-content: center` sul
body: con il centraggio del flex, una card piu' alta della finestra deborda da
entrambi i lati e la cima diventa irraggiungibile, barra di scorrimento
compresa. Con i margini automatici lo spazio libero si distribuisce solo se ce
n'e'. La schermata di creazione password, con i cinque requisiti e l'indicatore
di WordPress, e' la piu' alta di tutte ed e' esattamente il caso in cui succede. */
body.login.le-auth #login {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 474px;
margin: auto 0;
padding: 32px 32px 26px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
color: var(--gray-800);
font-family: var(--font-body);
font-size: 15px;
}
/* L'ingresso della card sta sui suoi contenuti e NON su #login. Il motivo e' il
fondo: lep_auth_background() puo' stampare i suoi livelli solo dentro #login, e
sono in position fixed. Una trasformazione su un antenato — anche solo i 16px
della salita — rende quell'antenato il blocco contenitore degli elementi fixed
discendenti, e per tutta la durata dell'animazione il fondo resterebbe
imprigionato nella card, per poi saltare a coprire la finestra quando finisce.
Per la stessa ragione #login non deve mai prendere un transform, un filter o un
will-change: transform: creerebbe anche un contesto di impilamento, e il fondo
con z-index -1 finirebbe dietro alla card invece che dietro a tutto. */
body.login.le-auth #login > .le-auth-head,
body.login.le-auth #login > form,
body.login.le-auth #login > #nav {
animation: le-auth-rise .5s var(--ease-standard) both;
}
body.login.le-auth #login > form { animation-delay: .06s; }
body.login.le-auth #login > #nav { animation-delay: .12s; }
/* Il lockup, sopra la card. La variante e' quella con la tile corallo piena e il
lettering chiaro, la stessa che il tema usa in navbar: il fondo qui e' lo stesso
--teal-900. Il file e' una copia di quello del tema, che resta la fonte
canonica (vedi ledea-theme/docs/logo-ledea.md). */
body.login.le-auth #login h1.wp-login-logo {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: var(--le-auth-logo-h);
margin: 0 0 var(--le-auth-logo-gap);
padding: 0;
line-height: 0;
text-align: center;
animation: le-auth-fade .55s var(--ease-standard) both;
}
/* Il collegamento e' a BLOCCO con i margini azzerati, e sono due correzioni
diverse a un difetto solo — la scatola dell'h1 valeva il doppio dell'immagine
e la differenza stava tutta SOTTO il lockup, spingendolo in su fuori schermo:
- `margin: 0 auto` azzera il `margin: 0 auto 25px` che il core mette su
.login h1 a. Il foglio non lo resettava, quindi quei 25px arrivavano intatti;
- `display: block` toglie la linea di base. Da inline-block il collegamento
poggiava sulla base del testo, e sotto restava la discesa dello strut — con
l'h1 a 27,85px di corpo erano altri ~6px.
30px di immagine diventavano cosi' 61,4px di scatola. */
body.login.le-auth #login h1.wp-login-logo a {
display: block;
width: 92px;
height: var(--le-auth-logo-h);
margin: 0 auto;
background-image: url(../images/ledea-lockup-h-on-teal-tile.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-indent: -9999em;
overflow: hidden;
outline-offset: 4px;
}
/* Il ritorno al sito, sotto la card, sul verde. Il foglio precedente lo nascondeva
(visibility: hidden): il disegno lo rivuole, ed e' l'unica uscita da questa
pagina per chi ci e' arrivato per sbaglio.
Esce dalla card come il lockup, ma con top: 100% invece di bottom: 100%. Il
collegamento all'informativa, che WordPress stampa subito dopo e solo se una
pagina privacy e' configurata, si accoda sotto. */
body.login.le-auth #login #backtoblog,
body.login.le-auth #login .privacy-policy-page-link {
position: absolute;
left: 0;
right: 0;
top: 100%;
height: var(--le-auth-foot-h);
}
body.login.le-auth #login #backtoblog {
margin-top: var(--le-auth-foot-gap);
}
/* Il collegamento all'informativa, che il core stampa solo se una pagina privacy
e' configurata, si accoda sotto: la distanza e' la somma delle stesse due
variabili, non un terzo numero da tenere allineato a mano. */
body.login.le-auth #login .privacy-policy-page-link {
margin-top: calc(var(--le-auth-foot-gap) + var(--le-auth-foot-h));
}
body.login.le-auth #backtoblog,
body.login.le-auth .privacy-policy-page-link {
visibility: visible;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 0;
line-height: var(--le-auth-foot-h);
text-align: center;
animation: le-auth-fade .6s var(--ease-standard) .1s both;
}
body.login.le-auth #backtoblog a,
body.login.le-auth .privacy-policy-page-link a {
font: 600 13.5px/1.4 var(--font-body);
color: rgba(var(--paper-rgb), 0.72);
text-decoration: none;
}
body.login.le-auth #backtoblog a:hover,
body.login.le-auth #backtoblog a:focus,
body.login.le-auth .privacy-policy-page-link a:hover,
body.login.le-auth .privacy-policy-page-link a:focus {
color: var(--paper);
text-decoration: underline;
}
/* Il selettore di lingua resta fuori: il sito e' in italiano e il disegno non lo
prevede. Era gia' nascosto dal foglio precedente. */
body.login.le-auth .language-switcher {
display: none;
}
/* ============================================================
3. Il modulo, spogliato
============================================================ */
/* WordPress veste il modulo come una scatola a se': fondo bianco, bordo grigio e
ombra. Dentro la card sarebbe una scatola nella scatola. */
body.login.le-auth #login form {
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
font-weight: 400;
}
/* ============================================================
4. La testata
============================================================ */
.le-auth-head {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 22px;
}
.le-auth-head__eyebrow {
font: 700 12px/1.4 var(--font-body);
letter-spacing: var(--letter-eyebrow);
text-transform: uppercase;
color: var(--teal-600);
}
/* E' un
, non un
: wp-login.php ha gia' i suoi due, quello nascosto
della schermata e quello del lockup. La seconda ragione che c'era all'inizio
— il `h1 { font-weight: 100 !important }` del tema, contro cui una classe non
poteva niente — e' caduta con la ledea-theme#44, che quella regola l'ha tolta.
La ragione semantica pero' basta da sola. */
.le-auth-head__title {
margin: 0;
font: 700 30px/1.15 var(--font-display);
letter-spacing: var(--letter-tight);
color: var(--teal-900);
text-wrap: balance;
}
.le-auth-head__text {
margin: 0;
font: 400 15px/1.6 var(--font-body);
color: var(--gray-600);
text-wrap: pretty;
}
.le-auth-head__wave {
display: block;
margin-top: 4px;
color: var(--coral-400);
}
/* ============================================================
5. Avvisi ed errori
============================================================ */
/* Gli avvisi di WordPress, spogliati del loro aspetto da amministrazione. Il testo
resta il suo: copre casi che il disegno non prevede — troppi tentativi, cookie
bloccati, chiave di reimpostazione scaduta — e riscriverlo a mano vorrebbe dire
perderli. */
body.login.le-auth #login > .notice,
body.login.le-auth #login > .message {
margin: 0;
padding: 0;
background: none;
border: 0;
border-left: 0;
box-shadow: none;
}
body.login.le-auth #login > .notice p,
body.login.le-auth #login > .message p {
margin: 0 0 18px;
padding: 12px 14px;
border-radius: var(--radius-md);
font: 400 14px/1.5 var(--font-body);
background: var(--teal-50);
border: 1px solid var(--teal-100);
color: var(--teal-800);
animation: le-auth-fade .4s var(--ease-standard) both;
}
body.login.le-auth #login > .notice-error p,
body.login.le-auth #login > #login_error p {
background: var(--coral-50);
border-color: var(--coral-100);
color: var(--coral-600);
}
/* :not(.le-auth-btn): la card di esito passa di qui (e' un avviso per il core), e
senza l'esclusione questa regola - 1,3,1 di specificita' - batteva il pieno
a.le-auth-btn--fill: testo teal-800 sottolineato su fondo teal-600. */
body.login.le-auth #login > .notice a:not(.le-auth-btn),
body.login.le-auth #login > .message a:not(.le-auth-btn) {
color: inherit;
font-weight: 700;
text-decoration: underline;
}
/* Alcune versioni del core non avvolgono il testo in un
: allora l'avviso e'
l'elemento stesso, e il vestito va addosso a lui. */
body.login.le-auth #login > .notice:not(:has(p)),
body.login.le-auth #login > .message:not(:has(p)) {
padding: 12px 14px;
margin-bottom: 18px;
border-radius: var(--radius-md);
background: var(--teal-50);
border: 1px solid var(--teal-100);
color: var(--teal-800);
}
/* ============================================================
6. Il modulo: campi ed etichette
============================================================ */
body.login.le-auth #login form p,
body.login.le-auth #login form .user-pass-wrap {
margin: 0 0 16px;
padding: 0;
}
/* Il che il core mette prima del piede del modulo serviva a
chiudere dei float che qui non ci sono piu'. */
body.login.le-auth #login form br.clear {
display: none;
}
body.login.le-auth #login form label {
display: block;
margin-bottom: 6px;
font: 600 13px/1.4 var(--font-body);
color: var(--gray-800);
}
body.login.le-auth #login form .input,
body.login.le-auth #login form input[type="text"],
body.login.le-auth #login form input[type="email"],
body.login.le-auth #login form input[type="password"] {
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 12px 14px;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.4;
color: var(--gray-900);
background: var(--paper);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
box-shadow: none;
outline: none;
transition: border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
body.login.le-auth #login form .input:focus,
body.login.le-auth #login form input[type="text"]:focus,
body.login.le-auth #login form input[type="email"]:focus,
body.login.le-auth #login form input[type="password"]:focus {
border-color: var(--teal-400);
box-shadow: 0 0 0 3px rgba(var(--teal-400-rgb), 0.16);
}
body.login.le-auth #login form ::placeholder {
color: var(--gray-400);
}
/* Il campo password: WordPress ci mette dentro il bottone dell'occhio, in
posizione assoluta. Il padding a destra gli fa spazio.
Il disegno al suo posto ha un «Mostra/Nascondi» a parole, sopra il campo:
spostarlo li' vorrebbe dire riscrivere il markup del core e la sua JS. Resta
l'icona, rivestita. */
body.login.le-auth #login form .wp-pwd {
position: relative;
}
/* L'altezza e' scritta su tutti e due di proposito. .wp-pwd non contiene solo il
campo: ci stanno dentro anche l'indicatore di efficacia, l'avviso del blocco
maiuscole e la spunta «password debole», quindi un height: 100% sul bottone ne
farebbe una striscia alta quanto tutto il blocco. */
body.login.le-auth #login form .wp-pwd .input {
height: 48px;
padding-right: 46px;
}
body.login.le-auth #login form .wp-hide-pw {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 48px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
box-shadow: none;
color: var(--teal-600);
cursor: pointer;
}
body.login.le-auth #login form .wp-hide-pw:hover,
body.login.le-auth #login form .wp-hide-pw:focus {
color: var(--teal-800);
background: none;
border: 0;
box-shadow: none;
}
body.login.le-auth #login form .wp-hide-pw .dashicons {
width: 20px;
height: 20px;
font-size: 20px;
}
/* L'avviso del blocco maiuscole. */
/* Niente flex qui: WordPress stampa questo avviso con un `style="display: none"`
scritto sull'elemento e lo accende dalla sua JS. Uno stile in linea batte sempre
il foglio, quindi un display: flex non arriverebbe mai a valere — e quando la JS
lo accende ci scrive il display che vuole lei. Il contenuto si dispone in linea,
che non dipende dal display del contenitore. */
body.login.le-auth #login form .caps-warning {
margin-top: 8px;
padding: 8px 10px;
border-radius: var(--radius-sm);
background: var(--ochre-50);
border: 1px solid var(--ochre-100);
font: 400 13px/1.4 var(--font-body);
color: var(--ochre-600);
}
body.login.le-auth #login form .caps-warning .caps-icon {
display: inline-block;
vertical-align: -3px;
margin-right: 6px;
}
body.login.le-auth #login form .caps-warning svg {
width: 15px;
height: 16px;
fill: currentColor;
stroke: currentColor;
}
/* «Ricordami». WordPress ci affianca un pulsante di aiuto a comparsa: resta, ma
non deve spingere la riga. */
body.login.le-auth #login form .forgetmenot {
display: flex;
align-items: center;
gap: 8px;
}
body.login.le-auth #login form .forgetmenot label {
margin: 0;
font-weight: 400;
font-size: 14px;
color: var(--gray-800);
}
/* Le spunte le disegniamo per intero, e non e' pigrizia al contrario: e' l'unico
modo per avere lo stesso risultato su ogni versione di WordPress.
Il core disegna il segno di spunta nello ::before, ma NON sempre allo stesso
modo — in certe versioni e' un glifo del font dashicons colorato da `color`, in
altre e' una `content: url("data:image/svg+xml,...")` con il colore cotto dentro
l'immagine, dove `color` non arriva. Il primo tentativo colorava solo quel
`color`, e sulla seconda variante non aveva alcun effetto.
Qui invece si azzera il contenuto del core (`content: ""` batte il suo per
specificita') e la spunta e' un angolo di bordo ruotato, disegnato da noi. Non
dipende ne' dal font dashicons ne' da un'immagine con il colore dentro.
IL CONTRASTO. Il contorno della casella spenta era su --border, cioe' --gray-100
(#D3D1C7), che su --paper (#FBF8F3) misura 1,45:1 — molto sotto il 3:1 che WCAG
1.4.11 chiede al contorno di un componente. La casella era praticamente invisibile
e i due stati non si distinguevano. Ora il contorno e' --gray-400, che misura
3,40:1, e la casella accesa e' un pieno --control-accent con la spunta in --paper:
5,86:1 per la spunta sul pieno, e 5,86:1 fra i due stati. */
body.login.le-auth #login form input[type="checkbox"] {
position: relative;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
width: 18px;
min-width: 18px;
height: 18px;
margin: 0;
padding: 0;
flex: 0 0 auto;
border: 1.5px solid var(--gray-400);
border-radius: 5px;
background: var(--paper);
box-shadow: none;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
body.login.le-auth #login form input[type="checkbox"]:checked {
background: var(--control-accent);
border-color: var(--control-accent);
}
/* La spunta: due lati di un rettangolo ruotati di 45°. Le tre dichiarazioni di
azzeramento servono a coprire entrambe le varianti del core — il glifo dashicons
e l'immagine in data: URI — qualunque delle due sia in uso.
IL CENTRAGGIO non e' fatto con due coordinate misurate a mano — prima erano
`left: 4.5px; top: 1px` e il segno usciva dal centro di 1px a sinistra e 1,8px
in alto — ma agganciando il centro del segno al centro della casella. Cosi'
regge anche se un giorno la casella non fosse piu' 18px.
I 0,71px di correzione sono la sola cosa calcolata, e sono esatti, non a occhio.
L'elemento e' un rettangolo 4x8 di cui si vedono solo il bordo destro e quello
inferiore: l'inchiostro sta tutto nel quadrante in basso a destra, quindi il suo
riquadro NON e' concentrico all'elemento. Ruotato di 45° il riquadro
dell'inchiostro va da -2,83px a +4,24px in verticale rispetto al centro di
rotazione, cioe' il suo centro cade 0,71px piu' in basso: alzando l'elemento di
altrettanto, e' il segno a finire in mezzo. */
body.login.le-auth #login form input[type="checkbox"]::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 4px;
height: 8px;
margin: 0;
border: solid var(--paper);
border-width: 0 2px 2px 0;
transform: translate(-50%, calc(-50% - 0.71px)) rotate(45deg);
opacity: 0;
background: none;
font: 0/0 a;
color: transparent;
}
body.login.le-auth #login form input[type="checkbox"]:checked::before {
opacity: 1;
}
body.login.le-auth #login form input[type="checkbox"]:focus,
body.login.le-auth #login form input[type="checkbox"]:focus-visible {
outline: none;
border-color: var(--teal-400);
box-shadow: 0 0 0 3px rgba(var(--teal-400-rgb), 0.16);
}
body.login.le-auth #login form .wp-tooltip__toggle {
color: var(--gray-400);
}
/* ============================================================
7. Il bottone principale
============================================================ */
body.login.le-auth #login form .submit {
margin: 0;
}
body.login.le-auth #login form input#wp-submit {
box-sizing: border-box;
width: 100%;
float: none;
height: auto;
min-height: 48px;
padding: 13px 20px;
font: 700 15px/1.2 var(--font-body);
text-align: center;
text-shadow: none;
color: var(--primary-text);
background: var(--primary);
border: 1.5px solid var(--primary);
border-radius: var(--radius-md);
box-shadow: none;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
body.login.le-auth #login form input#wp-submit:hover,
body.login.le-auth #login form input#wp-submit:focus {
color: var(--primary-text);
background: var(--primary-hover);
border-color: var(--primary-hover);
}
body.login.le-auth #login form input#wp-submit:focus-visible {
outline: 2px solid var(--teal-200);
outline-offset: 2px;
}
body.login.le-auth #login form input#wp-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ============================================================
8. I link in fondo alla card
============================================================ */
/* Il font-size a zero serve a mangiare il « | » che WordPress mette fra un link e
l'altro, e che il disegno non ha. Il centraggio NON e' un flex proprio per
questo: quel separatore e' un nodo di testo, diventerebbe un elemento
flessibile anonimo e si porterebbe dietro il suo gap anche a larghezza zero. */
body.login.le-auth #login #nav {
margin: 0;
padding: 18px 0 0;
border-top: 1px solid var(--border);
text-align: center;
font-size: 0;
}
body.login.le-auth #login #nav a {
display: inline-block;
margin: 0 7px;
padding: 4px 2px;
font: 700 13.5px/1.4 var(--font-body);
color: var(--teal-800);
text-decoration: none;
border-radius: var(--radius-sm);
}
body.login.le-auth #login #nav a:hover,
body.login.le-auth #login #nav a:focus {
color: var(--teal-900);
text-decoration: underline;
}
/* ============================================================
9. La verifica di sicurezza (Cloudflare Turnstile)
============================================================ */
/* Il widget lo stampa un plugin di terze parti che non sta in questi repo: qui si
veste soltanto lo spazio intorno, e non lo si nasconde mai. Se un giorno quel
plugin non ci fosse piu', queste regole non trovano niente e non fanno danno.
Nel disegno al suo posto c'e' una tessera «Verifica di sicurezza superata»: e'
un segnaposto, il widget vero e' un iframe che si disegna da solo. */
body.login.le-auth #login form .cf-turnstile {
margin: 0 0 16px;
}
body.login.le-auth #login form .cf-turnstile iframe {
border-radius: var(--radius-md);
}
body.login.le-auth #login form .cf-turnstile-br {
display: none;
}
body.login.le-auth #login form .cf-turnstile-failed-text:not(:empty) {
display: block;
margin: 0 0 16px;
font: 600 12.5px/1.4 var(--font-body);
color: var(--coral-600);
}
/* ============================================================
10. Crea utente
============================================================ */
/* Nome e cognome su due colonne, come nel disegno. Sotto i 380px tornano in pila:
due campi da meno di 150px non aiutano nessuno. */
.le-auth-names {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 0 0 16px;
}
@media (max-width: 380px) {
.le-auth-names { grid-template-columns: 1fr; }
}
body.login.le-auth #login form .le-auth-names p {
margin: 0;
}
/* Il consenso. Era una
con due celle, markup ereditato dall'era Leira. */
.le-auth-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 16px;
}
body.login.le-auth #login form .le-auth-consent label {
margin: 0;
font: 400 13.5px/1.55 var(--font-body);
color: var(--gray-800);
text-wrap: pretty;
}
body.login.le-auth #login form .le-auth-consent input[type="checkbox"] {
margin-top: 2px;
}
body.login.le-auth #login form .le-auth-consent a {
color: var(--teal-800);
font-weight: 700;
text-decoration: underline;
}
/* «La conferma della registrazione ti arriverà per email»: WordPress lo mette
sotto i campi, ed e' l'informazione che spiega perche' qui non si sceglie una
password. */
body.login.le-auth #login #reg_passmail {
margin: 0 0 16px;
font: 400 13px/1.5 var(--font-body);
color: var(--gray-600);
text-align: center;
}
/* ============================================================
11. Nuova password
============================================================ */
/* Il bottone «Genera password» non c'e' nel disegno e non lo vogliamo: chiude
ledea-plugin#28. Resta nel DOM, nascosto, perche' la JS del core ci si aggancia
e toglierlo di li' non e' cosa che un plugin possa fare in modo pulito. */
body.login.le-auth #login form .wp-generate-pw {
display: none;
}
body.login.le-auth #login form .user-pass1-wrap,
body.login.le-auth #login form .user-pass2-wrap {
margin: 0 0 16px;
}
body.login.le-auth #login form .user-pass1-wrap p,
body.login.le-auth #login form .user-pass2-wrap p {
margin: 0;
}
/* L'indicatore di WordPress (zxcvbn): misura quanto la password sia indovinabile,
che e' cosa diversa dai requisiti qui sotto. Vale la pena tenerlo perche' e' lui
a sbloccare l'invio insieme alla spunta «password debole». */
body.login.le-auth #login form #pass-strength-result {
box-sizing: border-box;
width: 100%;
margin: 8px 0 0;
padding: 8px 12px;
font: 600 12.5px/1.4 var(--font-body);
text-align: left;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--paper-alt);
color: var(--gray-600);
}
body.login.le-auth #login form #pass-strength-result.short,
body.login.le-auth #login form #pass-strength-result.bad,
body.login.le-auth #login form #pass-strength-result.mismatch {
background: var(--coral-50);
border-color: var(--coral-100);
color: var(--coral-600);
}
body.login.le-auth #login form #pass-strength-result.good {
background: var(--ochre-50);
border-color: var(--ochre-100);
color: var(--ochre-600);
}
body.login.le-auth #login form #pass-strength-result.strong {
background: var(--teal-50);
border-color: var(--teal-100);
color: var(--teal-800);
}
/* I requisiti, spuntati da js/lap_auth.js mentre si digita. Sono gli stessi che
lep_is_password_compliant() applica sul server: una pagina che promette una
regola e ne fa rispettare un'altra e' peggio di una che non promette niente.
Senza JS restano un elenco da leggere, che la regola la dice comunque. */
.le-auth-rules {
list-style: none;
margin: 10px 0 0;
padding: 0;
display: grid;
gap: 5px;
}
.le-auth-rules__item {
display: flex;
align-items: center;
gap: 8px;
font: 400 12.5px/1.4 var(--font-body);
color: var(--gray-600);
}
.le-auth-rules__dot {
flex: 0 0 auto;
width: 14px;
height: 14px;
border-radius: var(--radius-round);
border: 1.5px solid var(--border);
background: var(--paper);
transition: background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.le-auth-rules__item.is-met {
color: var(--teal-800);
}
.le-auth-rules__item.is-met .le-auth-rules__dot {
background: var(--teal-600);
border-color: var(--teal-600);
}
/* Il suggerimento del core, che lep_reset_password_hint() riscrive: qui i
requisiti sono gia' l'elenco qui sopra, quindi resta come nota di servizio. */
body.login.le-auth #login form .description.indicator-hint {
margin: 12px 0 0;
padding: 0;
font: 400 12.5px/1.5 var(--font-body);
color: var(--gray-600);
}
/* La spunta «conferma password debole». NON si nasconde: e' lei a sbloccare
l'invio quando zxcvbn giudica debole una password che pero' i nostri requisiti
li rispetta. Nasconderla lascerebbe l'utente col bottone spento e nessuna
spiegazione. */
body.login.le-auth #login form .pw-weak {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 0 16px;
}
body.login.le-auth #login form .pw-weak label {
margin: 0;
font-weight: 400;
font-size: 13px;
color: var(--gray-800);
}
/* ============================================================
12. Gli stati «fatto»
============================================================ */
/* Il modulo sparisce SOLO quando la card di esito e' davvero a video. La
condizione e' nel CSS e non in una classe sul body proprio per questo: se per
una qualsiasi ragione la card non venisse stampata, quella classe lascerebbe
una pagina con un messaggio e nessun modo di entrare. Cosi' invece si torna al
comportamento predefinito di WordPress, che il modulo lo mostra. */
body.login.le-auth #login:has(.le-auth-done) > form,
body.login.le-auth #login:has(.le-auth-done) > #nav {
display: none;
}
/* L'involucro che il core da' all'avviso — la sua forma cambia fra le versioni, e
per questo il selettore non lo nomina ma lo cerca da dentro — si spoglia del
vestito da avviso: qui la card di esito e' il contenuto della schermata, non una
nota sopra a un modulo. */
body.login.le-auth #login > .notice:has(.le-auth-done),
body.login.le-auth #login > .message:has(.le-auth-done),
body.login.le-auth #login > .notice:has(.le-auth-done) p,
body.login.le-auth #login > .message:has(.le-auth-done) p {
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
animation: none;
}
.le-auth-done {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
animation: le-auth-rise .5s var(--ease-standard) both;
}
/* Il cerchio con la spunta e' disegnato in CSS, con i due pseudo-elementi, e
non con un