/* =============================================================================
VERDISSIMO — la pagina di accesso
-----------------------------------------------------------------------------
Veste wp-login.php con i colori, i caratteri e le forme del tema. Non e' un
vezzo: questa pagina e' l'unica porta d'ingresso al sito finche' dura la
manutenzione, e il cliente ci arriva dal pulsante ACCEDI della pagina
pubblica. Passare da una fotografia di parete verde a un logo di WordPress
su fondo grigio e' un salto che fa pensare di essere finiti altrove.
Si carica SOLO su wp-login.php, da inc/login.php: il pannello di
amministrazione non lo vede e non va toccato.
Perche' un foglio a parte e non main.css:
- main.css e' 200 KB di catalogo, schede e carrello. Qui serve un decimo.
- main.css e' scritto a @layer. Il foglio del core non ha layer, quindi
qualunque regola dentro un layer perderebbe contro di lui a prescindere
dalla specificita'. Qui si scrive fuori dai layer, apposta.
Le regole battono il foglio `login` del core alzando la specificita' di un
gradino (`body.login ...` invece di `.login ...`). Se un aggiornamento di
WordPress cambiasse i selettori, il peggio che succede e' che la pagina
torna a somigliare a quella del core: nessuna funzione si rompe.
I caratteri e la fotografia sono gli stessi file del tema, dichiarati qui
una seconda volta perche' main.css non e' in pagina. Nessuna copia: stessi
indirizzi, stessa cache.
@package Verdissimo
============================================================================= */
/* -----------------------------------------------------------------------------
1. CARATTERI
Solo le facce `latin`: qui si leggono sei parole in italiano. I `latin-ext`
del tema restano fuori, non c'e' niente che li faccia scattare.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 200 600;
font-display: swap;
src: url("../fonts/jost-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../fonts/inter-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* -----------------------------------------------------------------------------
2. TOKEN
Il sottoinsieme di main.css che serve qui. Gli stessi valori: se il tema
cambia colore, questa pagina va aggiornata insieme.
-------------------------------------------------------------------------- */
body.login {
--forest: #1F4A2C;
--forest-2: #163720;
--fern: #3C7A4B;
--sage: #A9BFA2;
--clay: #A4553F;
--paper: #FBF9F4;
--paper-3: #FFFFFF;
--ink: #1C231C;
--ink-2: #58604F;
--ink-3: #8B9284;
--line-2: color-mix(in oklab, var(--sage) 66%, var(--paper));
--forest-hover: color-mix(in oklab, var(--forest) 82%, #000);
--ring: 0 0 0 3px color-mix(in oklab, var(--fern) 28%, transparent);
--font-display: 'AlgerBlanche', 'Alger Blanche', 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--r-1: 4px; --r-3: 14px; --r-pill: 999px;
--sh-3: 0 20px 44px rgb(16 26 18 / 0.34), 0 4px 10px rgb(16 26 18 / 0.18);
--ease: cubic-bezier(0.22, 0.68, 0.16, 1);
--dur: 0.24s;
/* Altezza del marchio: la stessa proporzione della testata del sito. */
--logo-h: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
}
/* -----------------------------------------------------------------------------
3. LA PAGINA
Stessa parete verde della pagina di manutenzione, ma il velo e' diverso: li'
il testo sta a sinistra e il gradiente scende in diagonale, qui il pannello
sta in mezzo e il buio va concentrato al centro. Non e' decorazione — senza,
marchio e collegamenti finiscono su chiazze di fotografia chiara.
-------------------------------------------------------------------------- */
body.login {
display: grid;
place-content: center;
justify-items: center;
gap: 1.75rem;
min-block-size: 100svh;
margin: 0;
padding: clamp(1.5rem, 1rem + 3vw, 3rem) 1.15rem;
font-family: var(--font-body);
color: var(--paper);
background-color: var(--forest-2);
background-image:
radial-gradient(125% 95% at 50% 44%,
rgb(10 22 13 / 0.9) 0%, rgb(10 22 13 / 0.78) 52%, rgb(10 22 13 / 0.62) 100%),
url("../img/hero-parete-1440.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* Le versioni moderne della fotografia, dove il browser le sa leggere: un
terzo del peso a parita' di resa. Il .jpg qui sopra resta il ripiego. */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
body.login {
background-image:
radial-gradient(125% 95% at 50% 44%,
rgb(10 22 13 / 0.9) 0%, rgb(10 22 13 / 0.78) 52%, rgb(10 22 13 / 0.62) 100%),
image-set(
url("../img/hero-parete-1920.avif") type("image/avif"),
url("../img/hero-parete-1920.webp") type("image/webp"),
url("../img/hero-parete-1440.jpg") type("image/jpeg"));
}
}
/* -----------------------------------------------------------------------------
4. IL MARCHIO
Il core stampa con il logo a fondino.
Il collegamento diventa la maschera del nostro vettoriale — lo stesso file
della testata del sito — e la sigla SRL arriva da ::after, perche' il filtro
`login_headertext` accetta solo testo e non markup.
-------------------------------------------------------------------------- */
/*
* Perche' NON e' un flex, come lo e' il lock-up nel tema.
*
* Nel tema il marchio e' uno vuoto: non avendo testo dentro, la sua
* linea di base coincide col bordo inferiore e la sigla ci si appoggia. Qui il
* collegamento CONTIENE il testo "Verdissimo SRL" — serve agli screen reader e
* non si puo' togliere — spinto fuori campo da text-indent ma ancora in linea:
* allineando alla base, "SRL" si appoggiava alla riga del testo nascosto, che
* sta piu' in alto del disegno. Da qui il disallineamento.
*
* La regola che risolve e' vecchia quanto il CSS: un `inline-block` con
* overflow diverso da `visible` ha per linea di base il proprio bordo
* inferiore. Il bordo inferiore del riquadro e' esattamente dove appoggiano le
* maiuscole del vettoriale, quindi la sigla torna sulla stessa riga.
*
* Vale pero' solo in un contesto inline: da elemento di un flex quella regola
* non si applica. Percio' qui si impagina in linea e si centra col testo.
*/
body.login h1.wp-login-logo {
display: block;
margin: 0 0 1.5rem;
padding: 0;
text-align: center;
line-height: 1;
color: var(--paper);
}
body.login h1.wp-login-logo a {
display: inline-block;
vertical-align: baseline;
block-size: var(--logo-h);
inline-size: calc(var(--logo-h) * 6.2231); /* proporzione del vettoriale */
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px; /* il nome resta agli screen reader */
color: var(--paper); /* il core dipinge i link di grigio */
background-color: currentColor;
background-image: none; /* via il logo del core */
-webkit-mask: url("../img/verdissimo.svg") left center / contain no-repeat;
mask: url("../img/verdissimo.svg") left center / contain no-repeat;
transition: opacity var(--dur) var(--ease);
}
body.login h1.wp-login-logo a:hover,
body.login h1.wp-login-logo a:focus,
body.login h1.wp-login-logo a:active { color: var(--paper); opacity: 0.78; }
body.login h1.wp-login-logo a:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 6px;
}
body.login h1.wp-login-logo::after {
content: "SRL";
font-family: var(--font-display);
font-size: calc(var(--logo-h) * 0.7);
font-weight: 400;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.82;
/* Lo stacco dal marchio: nel flex lo dava `gap`, in linea lo da' il margine.
Quello di coda toglie la spaziatura della tracking dopo la L. */
margin-inline: 0.45rem -0.14em;
}
/* -----------------------------------------------------------------------------
5. IL PANNELLO
-------------------------------------------------------------------------- */
body.login #login {
inline-size: min(100%, 24.5rem);
margin: 0;
padding: 0;
}
body.login form {
margin: 0;
padding: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
overflow: visible;
background: var(--paper);
border: 1px solid color-mix(in oklab, #fff 26%, transparent);
border-radius: var(--r-3);
box-shadow: var(--sh-3);
color: var(--ink);
}
body.login form p { margin-block: 0 1rem; }
body.login form p:last-of-type { margin-block-end: 0; }
body.login form label,
body.login .user-pass-wrap label {
display: block;
margin-block-end: 0.35rem;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
color: var(--ink-2);
}
/* -----------------------------------------------------------------------------
6. I CAMPI
Stessa faccia dei campi di cassa e account: fondo bianco, filetto salvia,
angoli quasi vivi. Il corpo scende dai 24px del core a una misura da
modulo — 24px su un campo largo 20rem sembra un titolo, non un dato.
-------------------------------------------------------------------------- */
body.login form .input,
body.login form input[type="text"],
body.login form input[type="email"],
body.login form input[type="password"] {
display: block;
inline-size: 100%;
min-inline-size: 0;
margin: 0;
padding: 0.7rem 0.85rem;
background: var(--paper-3);
border: 1px solid var(--line-2);
border-radius: var(--r-1);
box-shadow: none;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.45;
color: var(--ink);
outline: 0;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.login form .input:focus,
body.login form input[type="text"]:focus,
body.login form input[type="email"]:focus,
body.login form input[type="password"]:focus {
border-color: var(--fern);
box-shadow: var(--ring);
}
/* Il campo password ospita il pulsante dell'occhio: il riempimento a destra
gli fa spazio, altrimenti il testo digitato ci finisce sotto. */
body.login form .wp-pwd { position: relative; }
body.login form .password-input { padding-inline-end: 2.9rem; }
body.login form .wp-hide-pw {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.9rem;
block-size: auto;
padding: 0;
background: none;
border: 0;
border-radius: var(--r-1);
color: var(--ink-3);
box-shadow: none;
cursor: pointer;
transition: color var(--dur) var(--ease);
}
body.login form .wp-hide-pw:hover { color: var(--forest); background: none; }
body.login form .wp-hide-pw:focus-visible {
outline: 2px solid var(--fern);
outline-offset: -2px;
background: none;
}
body.login form .wp-hide-pw .dashicons { font-size: 20px; inline-size: 20px; block-size: 20px; }
/* -----------------------------------------------------------------------------
7. RICORDAMI
Nel core galleggia a sinistra del pulsante. Qui il pulsante e' a tutta
larghezza, quindi la spunta torna a essere una riga come le altre.
-------------------------------------------------------------------------- */
body.login form .forgetmenot {
float: none;
display: flex;
align-items: center;
gap: 0.5rem;
margin-block: 0 1.25rem;
font-size: 0.8125rem;
line-height: 1.4;
}
body.login form .forgetmenot label {
display: inline;
margin: 0;
font-size: 0.8125rem;
font-weight: 400;
color: var(--ink-2);
}
body.login form input[type="checkbox"] {
inline-size: 1rem;
block-size: 1rem;
margin: 0;
accent-color: var(--forest);
border-color: var(--line-2);
}
body.login form input[type="checkbox"]:focus-visible {
outline: 2px solid var(--fern);
outline-offset: 2px;
}
/* Il fumetto d'aiuto del core: solo il colore dell'icona, il resto funziona. */
body.login form .wp-tooltip__toggle { color: var(--ink-3); }
body.login form .wp-tooltip__toggle:hover { color: var(--forest); }
/* -----------------------------------------------------------------------------
8. IL PULSANTE
Lo stesso di .btn--solid nel tema: pillola verde bosco, maiuscoletto
spaziato, il sollevamento di due pixel al passaggio del mouse.
-------------------------------------------------------------------------- */
body.login form .submit { margin: 0; }
body.login .button-primary,
body.login #wp-submit {
float: none;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 100%;
block-size: auto;
padding: 0.9em 1.5em;
background: var(--forest);
border: 1px solid var(--forest);
border-radius: var(--r-pill);
box-shadow: none;
color: #fff;
text-shadow: none;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.login .button-primary:hover,
body.login #wp-submit:hover {
background: var(--forest-hover);
border-color: var(--forest-hover);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgb(16 26 18 / 0.28);
}
body.login .button-primary:active,
body.login #wp-submit:active { transform: none; }
body.login .button-primary:focus-visible,
body.login #wp-submit:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 3px;
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
body.login .button-primary:hover,
body.login #wp-submit:hover { transform: none; }
}
/* -----------------------------------------------------------------------------
9. I COLLEGAMENTI SOTTO IL PANNELLO
Sono sopra la fotografia, non sopra la carta: vanno chiari, non grigi.
-------------------------------------------------------------------------- */
body.login #nav,
body.login #backtoblog {
margin: 0;
padding: 0;
text-align: center;
font-size: 0.8125rem;
}
body.login #nav { margin-block-start: 1.25rem; }
body.login #backtoblog { margin-block-start: 0.5rem; }
body.login #nav a,
body.login #backtoblog a {
color: color-mix(in oklab, #fff 84%, var(--sage));
text-decoration: none;
border-block-end: 1px solid transparent;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
color: #fff;
border-block-end-color: color-mix(in oklab, #fff 55%, transparent);
}
body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 3px;
border-radius: 3px;
}
/* -----------------------------------------------------------------------------
10. IL CAMBIO LINGUA
Resta — il negozio sara' bilingue e il pannello anche — ma smette di
sembrare l'elemento piu' importante della pagina.
-------------------------------------------------------------------------- */
body.login .language-switcher { margin: 0; }
body.login .language-switcher form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
body.login .language-switcher label {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin: 0;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in oklab, #fff 72%, var(--sage));
}
body.login .language-switcher select {
inline-size: auto;
min-inline-size: 0;
max-inline-size: 11rem;
padding: 0.4rem 0.6rem;
background: color-mix(in oklab, #fff 12%, transparent);
border: 1px solid color-mix(in oklab, #fff 34%, transparent);
border-radius: var(--r-1);
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--paper);
}
/* Le voci della tendina le disegna il sistema operativo: su fondo chiaro
servono scure, altrimenti restano bianche su bianco. */
body.login .language-switcher select option { color: var(--ink); background: var(--paper-3); }
body.login .language-switcher .button {
padding: 0.4rem 0.9rem;
background: none;
border: 1px solid color-mix(in oklab, #fff 34%, transparent);
border-radius: var(--r-pill);
box-shadow: none;
color: var(--paper);
text-shadow: none;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
block-size: auto;
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.login .language-switcher .button:hover {
background: color-mix(in oklab, #fff 14%, transparent);
border-color: #fff;
color: #fff;
}
/* -----------------------------------------------------------------------------
11. AVVISI ED ERRORI
Il bordo di sinistra dice il tono: terracotta se qualcosa non va, felce se
e' una conferma. Sono gli stessi due colori del negozio.
-------------------------------------------------------------------------- */
body.login .notice,
body.login .message,
body.login #login_error {
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
background: var(--paper-3);
border: 1px solid var(--line-2);
border-inline-start: 4px solid var(--fern);
border-radius: var(--r-1);
box-shadow: none;
font-size: 0.875rem;
line-height: 1.55;
color: var(--ink);
}
body.login #login_error { border-inline-start-color: var(--clay); }
body.login .notice a,
body.login .message a,
body.login #login_error a { color: var(--fern); }
/* -----------------------------------------------------------------------------
12. SCHERMI STRETTI
-------------------------------------------------------------------------- */
@media (max-width: 30rem) {
body.login { gap: 1.25rem; }
body.login #login { inline-size: 100%; }
/* Su 390 px la tendina larga mandava "Cambia" a capo da sola. */
body.login .language-switcher select { max-inline-size: 8.5rem; }
}