/*
* I RAGGI QUI ERANO SCRITTI A MANO, E SONO RIMASTI INDIETRO
*
* Quando gli angoli del sito si sono aperti — schede a 20, contenitori a 28,
* pulsanti a pastiglia — questo foglio non se n'e' accorto: dichiarava 4, 6,
* 8, 9, 10 e 12 pixel a numero fisso, e l'area clienti e' rimasta l'unico
* posto squadrato di tutto il sito.
*
* Adesso usa i token come gli altri fogli. Non e' pignoleria di ordine: un
* valore scritto a mano e' un valore che il giorno del cambio nessuno trova.
*/
/**
* Area clienti, accesso e pagine di servizio di WooCommerce.
*
* COSA C'ERA
* ----------
* Niente. Il foglio del commercio copriva catalogo, carrello e checkout;
* l'accesso e l'area clienti uscivano con l'aspetto predefinito di
* WooCommerce dentro il nostro header e il nostro footer — e si vedeva:
* il titolo «Accedi» rientrato di duecento pixel rispetto al modulo, campi di
* sistema, un occhio della password grande come un pulsante, e sotto
* millecento pixel di vuoto prima del footer.
*
* Sono le pagine in cui una persona mette la propria email e la propria
* password. Se sembrano un'altra cosa rispetto al resto del sito, la domanda
* che si fa non e' «e' bello?», e' «sono sul sito giusto?».
*/
/* =======================================================================
IL VUOTO PRIMA DEL FOOTER
=======================================================================
Blocksy tiene il contenitore alto almeno quanto la finestra, per non
lasciare il footer a mezz'aria sulle pagine corte. Su carrello vuoto e
accesso — dove il contenuto e' quattrocento pixel — quella riserva diventa
**millecento pixel di bianco**, e la pagina sembra rotta invece che breve.
La riserva serve ancora: senza, il footer risalirebbe fino a meta' schermo.
Ma va data al contenuto, non al vuoto: il contenuto si centra in cio' che
resta della finestra, e il footer torna al suo posto in fondo.
======================================================================= */
.woocommerce-account #main-container,
.woocommerce-cart #main-container,
.woocommerce-checkout #main-container,
.woocommerce-order-received #main-container {
min-height: 0;
}
.woocommerce-account .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
min-height: 0;
}
/* =======================================================================
LA PAGINA DI ACCESSO
======================================================================= */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce.ct-woo-unauthorized {
/* `max-width` esplicito: Blocksy stringe la pagina di accesso a 750 px con
`.ct-woo-unauthorized`, e una `width` non basta a batterla. A 750 px le
due colonne diventano due colonnine e la tabella degli ordini va a capo
su ogni cella. */
/* Stessa formula e stesso margine di `.st-container`: l'area cliente non
e' un sito diverso. */
width: min(100% - 2 * var(--st-container-margine), var(--st-container));
max-width: none;
margin-inline: auto;
padding-block: 48px 72px;
}
/* Il titolo della pagina e il modulo su due assi diversi erano la cosa piu'
evidente: «Accedi» rientrava di duecento pixel perche' ereditava il
contenitore del tema padre mentre il modulo aveva il suo. */
.woocommerce-account .entry-title,
.woocommerce-account .page-title,
/* Il titolo dell'area cliente si vede.
Era nascosto: sulla bacheca c'era il saluto a fare da intestazione, e
sembrava un doppione. Ma il saluto sta **solo** sulla bacheca — su «I tuoi
ordini», «Indirizzi» e «I tuoi dati» non c'era piu' niente, e quest'ultima
si apriva su un campo «Nome *» senza una riga che dicesse dove si fosse.
Il titolo dice il nome della sezione, lo stesso della voce di menu. */
.woocommerce-account .st-page__title {
margin: var(--st-space-6, 64px) 0 0;
}
.st-accesso {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
gap: 56px;
align-items: start;
}
.st-accesso__intro { padding-top: 6px; }
.st-accesso__eyebrow {
margin: 0 0 10px;
font-size: var(--st-fs-micro, 13px); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--st-copper-text, var(--st-copper));
}
.st-accesso__titolo {
margin: 0 0 16px;
font-family: var(--st-font-display);
font-size: clamp(2rem, 3.4vw, 2.75rem);
font-weight: 600; line-height: 1.1; letter-spacing: -.01em;
color: var(--st-charcoal);
}
.st-accesso__testo {
margin: 0 0 28px; max-width: 44ch;
font-size: var(--st-fs-lead, 18px); line-height: 1.65; color: var(--st-muted);
}
.st-accesso__punti { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.st-accesso__punti li {
display: flex; align-items: flex-start; gap: 12px;
font-size: var(--st-fs-ui, 15px); line-height: 1.5; color: var(--st-charcoal);
}
.st-accesso__punti .st-icon { color: var(--st-copper); flex: 0 0 auto; margin-top: 2px; }
/* La scatola del modulo: bianca su avorio, un filo di ombra. E' l'unico
elemento della pagina che chiede qualcosa, e deve sembrarlo. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
margin: 0;
padding: 32px;
background: var(--st-white);
border: 1px solid var(--st-border-soft, #E9E5DF);
border-radius: var(--st-r-scheda, 20px);
box-shadow: 0 8px 30px rgba(47, 50, 54, .07);
}
.woocommerce-account .woocommerce-form-login::before {
content: attr(data-titolo);
}
/* =======================================================================
I CAMPI — gli stessi ovunque: accesso, checkout, indirizzi, preventivo
======================================================================= */
.woocommerce form .form-row,
.woocommerce-page form .form-row { margin: 0 0 20px; padding: 0; }
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce-account label {
display: block; margin-bottom: 8px;
font-size: var(--st-fs-small, 14px); font-weight: 600;
color: var(--st-charcoal);
}
.woocommerce form .form-row .required { color: var(--st-copper-text, var(--st-copper)); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce .select2-container .select2-selection--single {
width: 100%;
min-height: 52px;
padding: 0 16px;
font-family: var(--st-font-body);
font-size: var(--st-fs-ui, 15px);
color: var(--st-charcoal);
background: var(--st-white);
border: 1.5px solid var(--st-border, #DED8D0);
border-radius: var(--st-r-campo, 12px);
box-shadow: none;
transition: border-color var(--st-transition), box-shadow var(--st-transition);
}
.woocommerce form .form-row textarea { min-height: 130px; padding: 14px 16px; line-height: 1.6; }
/* Il fuoco e' rame con un anello, non il contorno azzurro del browser: e'
l'unico punto in cui il sistema operativo entrava nella tavolozza. */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus {
border-color: var(--st-copper);
outline: none;
box-shadow: 0 0 0 3px rgba(var(--st-copper-rgb, 180, 90, 23), .18);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
border-color: var(--st-error, #A53A32);
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
border-color: var(--st-success, #477255);
}
/* L'occhio della password era grande come un pulsante e a filo del bordo. */
.woocommerce .password-input, .woocommerce .show-password-input { position: relative; display: block; }
.woocommerce .show-password-input {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
width: 40px; height: 40px;
display: grid; place-items: center;
color: var(--st-muted); cursor: pointer;
}
.woocommerce .show-password-input::after { font-size: 16px; }
/* La casella «Ricordami» e i consensi: quadrato vero, non un carattere. */
.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
display: flex !important; align-items: center; gap: 10px;
font-weight: 500 !important;
cursor: pointer;
}
.woocommerce-form__input-checkbox,
.woocommerce-form-login__rememberme input[type="checkbox"] {
width: 20px; height: 20px; margin: 0; flex: 0 0 auto;
accent-color: var(--st-copper);
}
/* =======================================================================
I PULSANTI — uno solo pieno per schermata
======================================================================= */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px;
padding: 0 30px;
font-family: var(--st-font-body);
font-size: var(--st-fs-ui, 15px); font-weight: 600; letter-spacing: .03em;
line-height: 1;
color: #fff;
background: var(--st-copper);
border: 1.5px solid var(--st-copper);
border-radius: var(--st-r-pieno, 999px);
text-decoration: none;
text-transform: none;
transition: background var(--st-transition), border-color var(--st-transition),
color var(--st-transition), transform var(--st-transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
background: var(--st-copper-dark);
border-color: var(--st-copper-dark);
color: #fff;
transform: translateY(-1px);
}
/* Il secondario e' bordato, non pieno: due pulsanti pieni sulla stessa riga
sono due decisioni con lo stesso peso, cioe' nessuna decisione. */
.woocommerce a.button.st-btn--secondario,
.woocommerce .woocommerce-Button--next,
.woocommerce a.woocommerce-button--previous {
background: none; color: var(--st-charcoal); border-color: var(--st-border-strong);
}
.woocommerce a.button.st-btn--secondario:hover {
background: var(--st-ivory); color: var(--st-copper-text, var(--st-copper)); border-color: var(--st-copper);
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit { width: 100%; margin-top: 8px !important; }
.woocommerce-LostPassword {
margin: 16px 0 0; font-size: var(--st-fs-small, 14px);
}
.woocommerce-LostPassword a { color: var(--st-muted); text-underline-offset: 3px; }
.woocommerce-LostPassword a:hover { color: var(--st-copper-text, var(--st-copper)); }
/* =======================================================================
GLI AVVISI — informano, non allarmano
======================================================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
display: flex; align-items: flex-start; gap: 14px;
margin: 0 0 28px;
padding: 18px 22px;
border: 1px solid var(--st-border-soft, #E9E5DF);
border-left: 3px solid var(--st-copper);
border-radius: var(--st-r-scheda, 20px);
background: var(--st-ivory);
font-size: var(--st-fs-ui, 15px);
color: var(--st-charcoal);
list-style: none;
}
.woocommerce-error { border-left-color: var(--st-error, #A53A32); background: #FCF4F3; }
.woocommerce-message { border-left-color: var(--st-success, #477255); background: #F3F7F4; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; min-height: 44px; padding: 0 20px; }
/* =======================================================================
L'AREA CLIENTI
======================================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account.logged-in .woocommerce {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 40px;
align-items: start;
}
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li + li { margin-top: 2px; }
.woocommerce-MyAccount-navigation a {
position: relative;
display: block;
padding: 13px 16px;
font-size: var(--st-fs-ui, 15px); font-weight: 600;
color: var(--st-charcoal); text-decoration: none;
border-radius: var(--st-r-scheda, 20px);
transition: background var(--st-transition), color var(--st-transition);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--st-ivory); }
.woocommerce-MyAccount-navigation .is-active a {
background: var(--st-copper-soft, #F9F2EC);
color: var(--st-copper-text, var(--st-copper));
}
/*
* LA BARRETTA DELLA VOCE CORRENTE STAVA QUI, ED E' LA CAUSA DEL DIFETTO
*
* Era un `::before` in posizione assoluta largo tre pixel. Un elemento ha un
* solo `::before`: da quando le voci hanno un'icona — disegnata anche lei sul
* `::before` — sulla voce **corrente** vinceva questa regola, e il glifo
* veniva strappato fuori dal flusso e appiattito contro il bordo sinistro,
* sotto l'etichetta.
*
* Si vedeva su una voce su sei, ed e' il motivo per cui e' sopravvissuto: chi
* guarda una barra laterale guarda dove sta andando, non dove si trova gia'.
*
* La barretta adesso e' un'ombra interna, piu' in basso in questo foglio:
* `box-shadow` non occupa nessuno pseudo-elemento, quindi non toglie il posto
* a niente — ne' all'icona di oggi ne' a cio' che qualcuno aggiungera' domani.
*
* La regola da ricordare: un pseudo-elemento e' una risorsa unica, e usarlo
* per una decorazione di stato significa prenotarlo contro tutto il resto,
* compreso cio' che disegna un tema che non abbiamo scritto noi.
*/
/* «Esci» non e' una voce come le altre: si stacca in fondo. */
.woocommerce-MyAccount-navigation--link--customer-logout { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--st-border-soft, #E9E5DF); }
.woocommerce-MyAccount-navigation--link--customer-logout a { color: var(--st-muted); font-weight: 500; }
.woocommerce-MyAccount-content {
padding: 32px;
background: var(--st-white);
border: 1px solid var(--st-border-soft, #E9E5DF);
border-radius: var(--st-r-scheda, 20px);
}
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
margin: 0 0 18px;
font-family: var(--st-font-display);
font-size: 1.4rem; font-weight: 600; color: var(--st-charcoal);
}
/* =======================================================================
LE TABELLE — ordini, download, righe del carrello
======================================================================= */
.woocommerce table.shop_table {
width: 100%;
margin: 0 0 26px;
border: 1px solid var(--st-border-soft, #E9E5DF);
border-radius: var(--st-r-scheda, 20px);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.woocommerce table.shop_table th {
padding: 14px 18px;
font-size: var(--st-fs-micro, 13px); font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
text-align: left;
color: var(--st-muted);
background: var(--st-ivory);
border-bottom: 1px solid var(--st-border-soft, #E9E5DF);
}
.woocommerce table.shop_table td {
padding: 16px 18px;
font-size: var(--st-fs-ui, 15px);
border-top: 1px solid var(--st-border-soft, #E9E5DF);
vertical-align: middle;
}
.woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }
.woocommerce table.shop_table .woocommerce-orders-table__cell-order-actions .button { min-height: 42px; padding: 0 18px; font-size: var(--st-fs-small, 14px); }
.woocommerce mark, .woocommerce .order-status { background: none; color: inherit; font-weight: 600; }
/* =======================================================================
IL CARRELLO VUOTO — un solo asse
=======================================================================
Titolo a sinistra, testo centrato, pulsante a sinistra: tre allineamenti
diversi in quattrocento pixel di altezza. Adesso e' una colonna sola,
centrata, con una larghezza di lettura.
======================================================================= */
.st-empty,
.woocommerce .cart-empty ~ *,
.woocommerce-cart .cart-empty {
text-align: center;
}
.st-empty {
max-width: 46ch;
margin-inline: auto;
padding-block: 8px 24px;
display: grid;
justify-items: center;
gap: 14px;
}
.st-empty__lead {
margin: 0;
font-family: var(--st-font-display);
font-size: var(--st-fs-h3);
font-weight: 600; line-height: 1.2; color: var(--st-charcoal);
}
.st-empty__text { margin: 0; font-size: var(--st-fs-lead, 18px); line-height: 1.6; color: var(--st-muted); }
.st-empty .button,
.st-empty .st-btn { margin-top: 6px; }
.woocommerce-cart .return-to-shop { text-align: center; margin-top: 8px; }
/* =======================================================================
TABLET E TELEFONO
======================================================================= */
@media (max-width: 1023px) {
.st-accesso { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.woocommerce-MyAccount-navigation ul {
display: flex; gap: 6px; overflow-x: auto;
padding-bottom: 6px; scrollbar-width: none;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.woocommerce-MyAccount-navigation li + li { margin-top: 0; }
.woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
.woocommerce-MyAccount-navigation a { white-space: nowrap; border: 1px solid var(--st-border-soft, #E9E5DF); }
.woocommerce-MyAccount-navigation--link--customer-logout { margin-top: 0 !important; padding-top: 0; border-top: 0; }
}
@media (max-width: 620px) {
.woocommerce-account .woocommerce { padding-block: 30px 48px; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-MyAccount-content { padding: 22px 18px; }
/* Le tabelle diventano blocchi: una tabella a scorrimento orizzontale su
un telefono si legge male e si tocca peggio. */
.woocommerce table.shop_table thead { display: none; }
.woocommerce table.shop_table tr { display: block; padding: 12px 0; border-top: 1px solid var(--st-border-soft, #E9E5DF); }
.woocommerce table.shop_table td {
display: flex; justify-content: space-between; gap: 16px;
padding: 8px 16px; border: 0; text-align: right;
}
.woocommerce table.shop_table td::before {
content: attr(data-title);
font-size: var(--st-fs-small, 14px); font-weight: 600; color: var(--st-muted);
text-align: left;
}
}
/* --- il blocco «non hai un account» ------------------------------------ */
.st-accesso__ospite {
margin-top: 32px; padding-top: 26px;
border-top: 1px solid var(--st-border-soft, #E9E5DF);
}
.st-accesso__ospite-titolo {
margin: 0 0 6px;
font-family: var(--st-font-display);
font-size: 1.15rem; font-weight: 600; color: var(--st-charcoal);
}
.st-accesso__ospite p { margin: 0 0 12px; font-size: var(--st-fs-small, 14px); line-height: 1.6; color: var(--st-muted); max-width: 42ch; }
.st-accesso__ospite-link {
display: inline-flex; align-items: center; min-height: 44px;
font-size: var(--st-fs-small, 14px); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--st-copper-text, var(--st-copper));
text-decoration: none;
}
.st-accesso__ospite-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.st-account__titolo {
margin: 0 0 20px !important;
font-family: var(--st-font-display);
font-size: 1.5rem !important; font-weight: 600; color: var(--st-charcoal);
}
/*
* QUATTRO FIGLI IN UNA GRIGLIA DA DUE COLONNE
*
* `.st-accesso` non contiene solo l'introduzione e il modulo: WooCommerce ci
* mette in mezzo il contenitore degli avvisi e un `Accedi
`. Quattro
* figli in due colonne davano una scacchiera — introduzione a sinistra,
* titolo a destra, modulo sotto a sinistra — e a schermo sembrava che il
* modulo fosse finito fuori posto.
*
* Gli avvisi prendono tutta la riga e vanno in cima, dove si leggono. Il
* titolo del modulo sparisce: l'introduzione ha gia' l'H1, e «Accedi» scritto
* due volte a dieci centimetri di distanza non aggiunge niente — resta sul
* pulsante, che e' dove serve.
*/
.st-accesso > .woocommerce-notices-wrapper { grid-column: 1 / -1; order: -1; }
.st-accesso > h2 { display: none; }
.st-accesso > .woocommerce-form-login,
.st-accesso > .woocommerce-form-register,
.st-accesso > .u-columns { align-self: start; }
/* Il modulo si allinea in alto con l'introduzione, non a meta' pagina. */
.st-accesso { align-items: start; }
/*
* IL CONTENITORE DI BLOCKSY, LARGO QUANTO IL NOSTRO
*
* La griglia veniva 750 px su una finestra da 1440: non era il nostro
* `max-width`, era quello del tema padre — `.ct-container` tiene le pagine
* strette perche' pensate per il testo. L'accesso e l'area clienti non sono
* un articolo: hanno due colonne e delle tabelle, e a 750 px la tabella degli
* ordini va a capo su ogni cella.
*
* Si allarga **solo** su queste pagine: le altre continuano ad avere la
* misura da lettura, che per un testo e' quella giusta.
*/
.woocommerce-account #main-container > .ct-container,
.woocommerce-cart #main-container > .ct-container,
.woocommerce-checkout #main-container > .ct-container,
.woocommerce-account .ct-container,
.woocommerce-cart .ct-container,
.woocommerce-checkout .ct-container,
.woocommerce-account .entry-content,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
max-width: none;
width: 100%;
padding-inline: 0;
}
/* Blocksy scrive `max-width: 750px` su `.ct-woo-unauthorized` da una fonte che
vince comunque — foglio caricato dopo, o stile in linea. E' l'unico
`!important` di questo foglio, e sta qui perche' l'alternativa era copiare
il template di WooCommerce per togliere una classe: molto piu' fragile, su
una pagina dove si digita una password. */
.woocommerce-account .woocommerce.ct-woo-unauthorized { max-width: none !important; }
/* ==================================================================== *
* ACCEDI — due colonne, fotografia a filo, modulo centrato
*
* Era testo a sinistra e una scheda a destra su fondo bianco: una pagina di
* servizio, non una porta d'ingresso. E l'occhio della password misurava 44 px
* dentro un campo da 52 — l'«icona enorme».
*
* La specifica 06 vuole la fotografia a filo del bordo sinistro e il modulo
* centrato nella meta' destra. La fotografia non e' decorazione: dice che
* dietro l'account c'e' un prodotto, e su una pagina che chiede una password
* e' l'unica cosa che rassicura.
* ==================================================================== */
@media (min-width: 981px) {
.woocommerce-account:not(.logged-in) .st-accesso {
display: grid;
grid-template-columns: 46% minmax(0, 1fr);
align-items: stretch;
gap: 0;
/* A filo del bordo sinistro: si esce dal contenitore con un margine
negativo calcolato, invece di spostare il contenitore. */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
min-height: 620px;
}
.woocommerce-account:not(.logged-in) .st-accesso__intro {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 56px clamp(32px, 6vw, 96px);
background: var(--st-p-crema, #FAF6F1);
overflow: hidden;
}
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
align-self: center;
justify-self: center;
width: min(510px, 100%);
margin: 0;
padding: 56px 24px;
border: 0;
box-shadow: none;
background: none;
}
}
/* --- l'occhio della password ------------------------------------------ *
*
* WooCommerce lo disegna come un blocco quadrato dentro il campo. A 44 px in
* un campo alto 52 riempiva il campo e sembrava un pulsante messo li' per
* sbaglio — e' l'icona che il cliente ha chiamato enorme.
*
* L'area toccabile resta 44 (WCAG), ma il **segno** scende a 18: cresce cio'
* che si preme, non cio' che si vede.
*/
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
width: 44px;
height: 44px;
top: 50%;
right: 4px;
transform: translateY(-50%);
display: grid;
place-items: center;
background: none;
border: 0;
cursor: pointer;
}
/*
* L'OCCHIO NON E' UN CARATTERE NE' UNO SFONDO: E' UNA MASCHERA
*
* Ho provato a rimpicciolirlo tre volte — `font-size`, poi un'immagine di
* sfondo, poi spegnendo la maschera — e non cambiava niente. Il motivo l'ha
* detto solo un controllo sul punto esatto dello schermo: quel pulsante ha un
* **colore di fondo** blu-grigio ritagliato da una `mask-image` a forma di
* occhio, con `mask-size: auto`, cioe' disegnata alla dimensione naturale del
* file. Non c'era niente da rimpicciolire nel testo, e il mio sfondo veniva
* ritagliato via.
*
* Si lavora con quel meccanismo invece che contro: si tiene la maschera e le
* si da' una misura. `!important` sulle due proprieta' che il tema padre
* dichiara — e solo su quelle — perche' la sua regola vince per specificita' e
* non e' raggiungibile da un foglio figlio senza riscriverne il selettore, che
* al prossimo aggiornamento cambierebbe.
*
* L'area toccabile resta 44 px: cresce cio' che si preme, non cio' che si
* vede.
*/
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
font-size: 0;
-webkit-mask-size: 18px 18px !important;
mask-size: 18px 18px !important;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--st-p-debole, #726C64) !important;
background-image: none;
opacity: .8;
}
.woocommerce form .show-password-input:hover,
.woocommerce-page form .show-password-input:hover { opacity: 1; }
/* Password mostrata: il segno passa al rame. */
.woocommerce form .show-password-input.display-password,
.woocommerce-page form .show-password-input.display-password {
background-color: var(--st-p-rame, #B45A17) !important;
opacity: 1;
}
.woocommerce form .show-password-input:focus-visible {
outline: 2px solid var(--st-p-rame, #B45A17);
outline-offset: -2px;
border-radius: var(--st-r-campo, 12px);
}
/* --- i campi ------------------------------------------------------------ */
.woocommerce-form-login .woocommerce-form-row { margin-bottom: 18px; }
.woocommerce-form-login label {
display: block;
margin-bottom: 8px;
font-size: .8125rem;
font-weight: 500;
color: var(--st-p-inchiostro, #23201D);
}
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"] {
width: 100%;
height: 52px;
padding: 0 14px;
border: 1px solid var(--st-p-riga, #EAE4DC);
border-radius: var(--st-r-campo, 8px);
font-size: .875rem;
}
.woocommerce-form-login input:focus-visible {
border-color: var(--st-p-rame, #B45A17);
outline: 2px solid var(--st-p-rame, #B45A17);
outline-offset: 1px;
}
.woocommerce-form-login .woocommerce-form-login__submit {
width: 100%;
height: 56px;
margin: 6px 0 0;
border-radius: var(--st-r-campo, 8px);
background: var(--st-p-rame, #B45A17);
color: #fff;
font-size: .875rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.woocommerce-form-login .woocommerce-form-login__rememberme { font-size: .8125rem; }
.woocommerce-form-login .lost_password { margin-top: 14px; font-size: .8125rem; }
/* --- la colonna di presentazione ---------------------------------------- */
.st-accesso__punti { display: grid; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; }
.st-accesso__punti li { display: flex; align-items: flex-start; gap: 12px; font-size: .875rem; line-height: 1.5; }
.st-accesso__punti svg { flex: none; width: 20px; height: 20px; color: var(--st-p-rame, #B45A17); }
/* ====================================================================
* ACCESSO CON UN FORNITORE ESTERNO
*
* Compare solo se le credenziali esistono: senza, questo foglio non trova
* niente da vestire e la pagina resta quella di prima.
*
* Il pulsante e' bianco con il bordo, non rame: non e' un'azione nostra, e
* vestirla dei nostri colori la farebbe sembrare tale. Il marchio del
* fornitore resta nei suoi colori — e' l'unico punto del sito dove un colore
* fuori tavolozza e' corretto, perche' e' l'identita' di qualcun altro ed e'
* cio' che rende il pulsante credibile.
* ==================================================================== */
.st-social {
display: grid;
gap: 10px;
margin: 0 0 22px;
}
.st-social__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 0 18px;
border: 1px solid var(--st-p-riga, #DED8D0);
border-radius: var(--st-r-scheda, 20px);
background: #fff;
color: var(--st-p-inchiostro, #23201D);
font-size: .9375rem;
font-weight: 500;
text-decoration: none;
transition: border-color .16s ease, background .16s ease;
}
.st-social__btn:hover,
.st-social__btn:focus-visible {
border-color: var(--st-p-rame, #B45A17);
background: var(--st-p-rame-tenue, #FBF1E8);
color: var(--st-p-inchiostro, #23201D);
}
.st-social__btn svg { flex: 0 0 18px; }
/* Il separatore fra le due strade: una riga con la parola in mezzo, che dice
«da qui in giu' si fa nell'altro modo» senza scriverlo. */
.st-social__oppure {
position: relative;
margin: 4px 0 0;
text-align: center;
}
.st-social__oppure::before {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 1px;
background: var(--st-p-riga, #DED8D0);
}
.st-social__oppure span {
position: relative;
padding: 0 12px;
background: #fff;
font-size: .8125rem;
color: var(--st-p-debole, #726C64);
}
/* ====================================================================
* LE DUE PORTE: ACCEDI E REGISTRATI
*
* Un modulo per schermata, e accanto la ragione per cui conviene un account.
* La colonna di destra non e' riempitivo: chi esita davanti a una
* registrazione esita perche' non sa cosa ci guadagna, e la risposta va messa
* dove nasce la domanda.
* ==================================================================== */
.st-accesso2 { padding-block: 56px 72px; }
.st-accesso2__griglia {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 56px;
align-items: start; /* le due colonne cominciano insieme e non si stirano */
max-width: 940px;
margin-inline: auto;
}
.st-accesso2__titolo {
margin: 0 0 8px;
font-family: var(--st-font-display, Georgia, serif);
font-size: var(--st-fs-h2);
line-height: 1.15;
color: var(--st-p-inchiostro, #23201D);
}
.st-accesso2__sottotitolo {
margin: 0 0 26px;
max-width: 46ch;
color: var(--st-p-grigio, #6F6A64);
}
.st-accesso2__form { display: grid; gap: 18px; }
.st-campo { display: grid; gap: 6px; margin: 0; }
.st-campo label {
font-size: .875rem;
font-weight: 500;
color: var(--st-p-inchiostro, #23201D);
}
.st-campo label span { color: var(--st-p-rame-testo, #AE4C0B); }
.st-campo input {
width: 100%;
min-height: 46px;
padding: 0 14px;
border: 1px solid var(--st-p-riga, #DED8D0);
border-radius: var(--st-r-campo, 12px);
background: #fff;
font-size: 1rem;
color: var(--st-p-inchiostro, #23201D);
}
.st-campo input:focus-visible {
border-color: var(--st-p-rame, #B45A17);
outline: 2px solid var(--st-p-rame, #B45A17);
outline-offset: 1px;
}
.st-campo__aiuto {
font-size: .8125rem;
line-height: 1.45;
color: var(--st-p-debole, #726C64);
}
.st-accesso2__riga {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0;
font-size: .875rem;
}
.st-ricorda { display: inline-flex; align-items: center; gap: 8px; }
.st-accesso2__altra {
margin: 4px 0 0;
font-size: .875rem;
color: var(--st-p-grigio, #6F6A64);
}
.st-accesso2__altra a {
color: var(--st-p-rame-testo, #AE4C0B);
font-weight: 500;
}
/* ------------------------------------------------ la colonna del perche' */
/* La coda «a cosa serve l'account» era una scheda in crema con il suo bordo
arrotondato. In una colonna stretta accanto a una fotografia a tutta altezza
diventava un secondo blocco che compete col modulo — cioe' con la ragione
della pagina. Le regole che la disegnavano stanno ora piu' in basso, insieme
al resto dello schermo diviso, e la rendono tre righe quiete.
Chi non vuole un account deve comunque sapere che puo' comprare lo stesso:
nasconderlo trasformerebbe la registrazione in un pedaggio, e un pedaggio si
aggira andandosene. */
/* Lo stato «da configurare», che vede solo un amministratore. */
.st-social--daconfigurare .st-social__btn {
opacity: .55;
cursor: not-allowed;
}
.st-social__nota {
margin: 8px 0 0;
padding: 10px 12px;
border-left: 2px solid var(--st-p-rame, #B45A17);
background: var(--st-p-rame-tenue, #FBF1E8);
font-size: .75rem;
line-height: 1.5;
color: var(--st-p-grigio, #6F6A64);
}
@media (max-width: 860px) {
.st-accesso2__griglia { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* --------------------------------------------- i campi della registrazione */
/* Nome e cognome stanno sulla stessa riga: sono due meta' della stessa cosa, e
incolonnarli fa sembrare il modulo lungo il doppio di quanto sia. */
.st-campi-coppia {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 520px) {
.st-campi-coppia { grid-template-columns: 1fr; }
}
/* «facoltativo» va detto sull'etichetta, non lasciato intuire dall'assenza
dell'asterisco: chi compila un modulo non fa l'inventario di cosa manca. */
.st-campo__facolt {
margin-left: 6px;
font-size: .75rem;
font-weight: 400;
color: var(--st-p-debole, #726C64);
}
/* ------------------------------------------------------------ il consenso
*
* Riquadro proprio, staccato dai campi: non e' un dato da inserire, e' una
* dichiarazione da fare. Trattarlo come gli altri campi lo fa spuntare senza
* leggerlo — che e' esattamente cio' che rende inutile chiederlo.
*/
.st-consenso {
margin: 4px 0 0;
padding: 14px 16px;
border: 1px solid var(--st-p-riga, #DED8D0);
border-radius: var(--st-r-scheda, 20px);
background: var(--st-p-crema, #FAF6F1);
}
.st-consenso label {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: start;
margin: 0;
font-size: .8125rem;
line-height: 1.5;
color: var(--st-p-grigio, #6F6A64);
cursor: pointer;
}
.st-consenso input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--st-p-rame, #B45A17);
}
.st-consenso a {
color: var(--st-p-rame-testo, #AE4C0B);
text-decoration: underline;
text-underline-offset: 2px;
}
/* L'informativa che WooCommerce stampa da sola: resta, ma smette di sembrare
un paragrafo di contenuto in mezzo al modulo. */
.st-accesso2 .woocommerce-privacy-policy-text p {
margin: 0;
font-size: .8125rem;
line-height: 1.5;
color: var(--st-p-debole, #726C64);
}
/* Il pulsante di un fornitore non ancora collegato: si vede, si preme, e
risponde in italiano invece di mandare su una schermata d'errore altrui.
Nessuno stato «disabilitato» a vista — sarebbe una promessa scritta due
volte, prima con il pulsante e poi con la sua negazione. */
.st-social__btn--apple svg { flex: 0 0 18px; }
/* L'avviso in cima al modulo: informa, non allarma. Fondo crema e filetto
rame — non e' successo niente di grave, una strada e' chiusa e le altre no. */
.st-avviso {
margin: 0 0 22px;
padding: 14px 16px;
border-left: 3px solid var(--st-p-rame, #B45A17);
border-radius: 6px;
background: var(--st-p-rame-tenue, #FBF1E8);
font-size: .875rem;
line-height: 1.5;
color: var(--st-p-inchiostro, #23201D);
}
/* ====================================================================
* L'AREA CLIENTE, RIFATTA
*
* Com'era: la bacheca di WooCommerce — tre righe di prosa con dentro tre
* collegamenti che descrivono a parole il menu che sta gia' a sinistra — e
* sotto tre pastiglie con dei numeri. L'elenco ordini era la tabella di serie:
* numero, data, stato, totale.
*
* Il difetto non era la grafica, era l'ordine delle domande. Chi entra nella
* propria area cliente ne ha una sola in testa — «a che punto e' il mio
* ordine?» — e trovava per prima cosa un indice.
*
* Adesso: saluto, l'ordine piu' recente col suo stato scritto grande, e sotto
* una griglia di scorciatoie con i numeri gia' dentro. E' l'impianto di
* Amazon, e non per imitazione: e' l'unico che regge quando le sezioni sono
* sei e nessuna e' la piu' importante per tutti.
*
* Le fotografie sono la seconda decisione. Su questo catalogo un ordine non e'
* «il numero 1043»: e' «quella bianca del soggiorno». Senza l'immagine, per
* riconoscere il proprio ordine bisogna aprirli uno per uno.
* ==================================================================== */
/* --- il saluto -------------------------------------------------------- */
.st-conto__saluto { margin: 0 0 24px; }
.st-conto__ciao {
margin: 0 0 4px;
font-family: var(--st-font-display, inherit);
font-size: 1.75rem;
line-height: 1.2;
color: var(--st-p-inchiostro, #23201D);
}
.st-conto__sotto {
max-width: 62ch;
margin: 0;
font-size: .9375rem;
line-height: 1.6;
color: var(--st-p-grigio, #6F6A64);
}
.st-conto__eti {
display: block;
margin: 0 0 10px;
font-size: .75rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--st-p-rame-testo, #AE4C0B);
}
/* --- l'ordine piu' recente -------------------------------------------- */
.st-conto__ultimo {
margin: 0 0 26px;
padding: 20px 22px;
background: #fff;
border: 1px solid var(--st-p-riga, #EAE4DC);
border-radius: var(--st-r-grande, 12px);
}
.st-conto__ultimo-testa {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 16px;
}
.st-conto__ultimo-testa .st-conto__eti { margin: 0; }
.st-conto__ultimo-corpo {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
}
/* Le miniature si sovrappongono di poco: si legge «sono piu' d'una» senza che
la fila occupi la larghezza di una fila. */
.st-conto__miniature { display: flex; }
.st-conto__mini {
display: grid;
place-items: center;
width: 62px;
height: 62px;
flex: none;
overflow: hidden;
border: 2px solid #fff;
border-radius: var(--st-r-scheda, 20px);
background: var(--st-p-sabbia, #F4F0EB);
}
.st-conto__mini + .st-conto__mini { margin-left: -14px; }
.st-conto__mini img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.st-conto__mini--piu {
font-size: .8125rem;
font-weight: 600;
color: var(--st-p-grigio, #6F6A64);
background: var(--st-p-crema, #FAF6F1);
}
.st-conto__ultimo-nome {
margin: 0 0 4px;
font-size: .9375rem;
font-weight: 600;
line-height: 1.4;
color: var(--st-p-inchiostro, #23201D);
}
.st-conto__ultimo-meta {
margin: 0 0 2px;
font-size: .8125rem;
color: var(--st-p-debole, #726C64);
}
.st-conto__ultimo-totale {
margin: 0;
font-size: 1.0625rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--st-p-inchiostro, #23201D);
}
.st-conto__ultimo-azioni {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
text-align: center;
}
.st-conto__link {
font-size: .8125rem;
color: var(--st-p-rame-testo, #AE4C0B);
text-decoration: none;
}
.st-conto__link:hover { text-decoration: underline; }
/* --- la pastiglia di stato -------------------------------------------- *
*
* Fondo tenue e testo saturo. Le parole sono le nostre, non quelle di
* WooCommerce: «in lavorazione» e «in sospeso» per chi compra sono la stessa
* cosa, e non lo sono per il negozio.
*/
.st-stato {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
font-size: .75rem;
font-weight: 600;
letter-spacing: .01em;
white-space: nowrap;
}
.st-stato::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.st-stato--ok { background: #EAF3EC; color: #2F6B4F; }
.st-stato--corso { background: #FBF0E3; color: #9A6018; }
.st-stato--attesa { background: #EAF0F6; color: #2F5680; }
.st-stato--ko { background: #FCEBEA; color: #A02622; }
.st-stato--off { background: #F1EFEC; color: #6F6A64; }
/* --- la griglia delle scorciatoie ------------------------------------- */
.st-conto__griglia {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin: 0 0 26px;
}
.st-conto__scheda {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--st-p-riga, #EAE4DC);
border-radius: var(--st-r-grande, 12px);
text-decoration: none;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.st-conto__scheda:hover {
border-color: #DCCFC0;
box-shadow: 0 8px 20px -14px rgba(35, 32, 29, .4);
transform: translateY(-1px);
}
.st-conto__scheda-icona {
display: grid;
place-items: center;
width: 42px;
height: 42px;
flex: none;
border-radius: 50%;
background: var(--st-p-rame-tenue, #FBF1E8);
color: var(--st-p-rame-testo, #AE4C0B);
}
.st-conto__scheda-testo { min-width: 0; }
.st-conto__scheda-testo strong {
display: block;
font-size: .9375rem;
font-weight: 600;
color: var(--st-p-inchiostro, #23201D);
}
.st-conto__scheda-testo > span {
display: block;
margin-top: 2px;
font-size: .8125rem;
line-height: 1.45;
color: var(--st-p-debole, #726C64);
}
/* Il numero e' l'informazione: «Preferiti» e «Preferiti 7» sono due schermate
diverse, e saperlo cambia se ci si entra. A zero resta, in grigio: dice
«nessuno ancora», che e' un'informazione anche quella. */
.st-conto__scheda-n {
min-width: 30px;
padding: 3px 9px;
border-radius: 999px;
background: var(--st-p-rame-tenue, #FBF1E8);
color: var(--st-p-rame-testo, #AE4C0B);
font-size: .8125rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
}
.st-conto__scheda-n.is-vuoto {
background: var(--st-p-riga-chiara, #F2EDE6);
color: var(--st-p-debole, #726C64);
}
/* --- le richieste aperte ---------------------------------------------- */
.st-conto__aperti { margin-top: 28px; }
/* --- l'elenco degli ordini -------------------------------------------- */
.st-ordini {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 16px;
}
.st-ordine {
background: #fff;
border: 1px solid var(--st-p-riga, #EAE4DC);
border-radius: var(--st-r-grande, 12px);
overflow: hidden;
}
/* La riga di servizio in cima, su fondo crema: e' la stessa che usa Amazon, e
funziona perche' separa i **dati dell'ordine** da cio' che c'e' dentro
senza bisogno di un titolo che lo dica. */
.st-ordine__testa {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 26px;
padding: 14px 18px;
background: var(--st-p-crema, #FAF6F1);
border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}
/* `> span`, non `span`: l'etichetta e' figlia diretta del campo, mentre dentro
il `` del totale WooCommerce annida altri `span` — fra cui quello
del simbolo di valuta. Con il selettore largo il simbolo diventava un
blocco, e «65,28 €» usciva su due righe con l'euro piccolo e grigio sotto
la cifra: sembrava un carattere avanzato, non un importo. */
.st-ordine__campo > span {
display: block;
font-size: .6875rem;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--st-p-debole, #726C64);
}
.st-ordine__campo strong {
display: block;
margin-top: 2px;
font-size: .875rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--st-p-inchiostro, #23201D);
}
/* Il numero d'ordine va a destra: serve per parlare con l'assistenza, non per
riconoscere l'ordine — quello lo fanno la data e le fotografie. */
.st-ordine__campo--numero { margin-left: auto; text-align: right; }
.st-ordine__stato { flex: 0 0 auto; }
.st-ordine__corpo {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 20px;
padding: 18px;
}
.st-ordine__righe {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 14px;
}
.st-ordine__riga {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
align-items: center;
gap: 14px;
}
.st-ordine__foto {
display: grid;
place-items: center;
width: 72px;
height: 72px;
overflow: hidden;
border-radius: var(--st-r-scheda, 20px);
background: var(--st-p-sabbia, #F4F0EB);
}
.st-ordine__foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.st-ordine__nome {
display: block;
font-size: .9375rem;
font-weight: 600;
line-height: 1.4;
color: var(--st-p-inchiostro, #23201D);
text-decoration: none;
}
a.st-ordine__nome:hover { color: var(--st-p-rame-testo, #AE4C0B); }
/* Le misure ordinate: il motivo per cui si torna qui fra due anni. */
.st-ordine__misure {
display: block;
margin-top: 4px;
font-size: .8125rem;
line-height: 1.45;
color: var(--st-p-debole, #726C64);
}
.st-ordine__azioni {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 170px;
}
.st-ordini__pagine {
display: flex;
gap: 10px;
margin-top: 22px;
}
/* --- su schermo stretto ----------------------------------------------- *
*
* Le tre colonne dell'ordine recente e le due della scheda ordine si
* incolonnano. I pulsanti diventano larghi quanto la scheda: su un telefono
* un pulsante stretto in fondo a una scheda larga e' un bersaglio in mezzo al
* nulla.
*/
@media (max-width: 720px) {
.st-conto__ciao { font-size: 1.4rem; }
.st-conto__ultimo-corpo {
grid-template-columns: 1fr;
gap: 14px;
}
.st-conto__ultimo-azioni { flex-direction: row; align-items: center; }
.st-conto__ultimo-azioni .st-btn { flex: 1 1 auto; }
.st-conto__griglia { grid-template-columns: 1fr; }
.st-ordine__testa { gap: 16px; padding: 12px 14px; }
.st-ordine__campo--numero { margin-left: 0; text-align: left; }
.st-ordine__stato { flex: 1 1 100%; }
.st-ordine__corpo { grid-template-columns: 1fr; padding: 14px; }
.st-ordine__azioni { flex-direction: row; min-width: 0; }
.st-ordine__azioni .st-btn { flex: 1 1 auto; justify-content: center; }
.st-ordine__riga { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
.st-ordine__foto { width: 56px; height: 56px; }
}
/* ====================================================================
* LA COLONNA DELL'AREA CLIENTE NON E' UNA COLONNA DI LETTURA
*
* Il blocco di WooCommerce arrivava largo **820 pixel**, dentro una pagina da
* 1440: menu a sinistra 260, contenuto 520, e trecento pixel vuoti per lato.
*
* Non era un errore dell'area cliente: era la misura di lettura che
* `pagine.css` applica al contenuto di ogni pagina — sessantacinque battute
* per riga, giusta per la guida alle misure e per le condizioni di vendita.
* L'area cliente pero' non e' un testo da leggere: e' un pannello, con dentro
* schede affiancate e fotografie. La regola giusta, applicata alla cosa
* sbagliata.
*
* Qui si dichiara la larghezza del pannello. La prosa dentro le schede resta
* corta perche' le schede sono strette, non perche' lo sia la pagina.
* ==================================================================== */
/* Il selettore non chiede la parentela diretta: fra `.entry-content` e il
blocco di WooCommerce il tema di base infila i propri involucri, e quanti
siano cambia da una versione all'altra. Una regola che dipende da quel
conteggio si rompe a un aggiornamento senza che nessuno colleghi le due
cose. */
/* La misura di lettura la impone `pagine.css` con
`.page .entry-content > *:not(.alignwide):not(.alignfull)` — due classi e
un elemento. Una regola con due sole classi perde, e il pannello restava
largo 820. Si scrive l'eccezione **almeno precisa quanto la regola**: e' la
quarta volta in questo progetto, ed e' sempre lo stesso inciampo.
Vale su tutti i figli diretti e non solo su `.woocommerce`, perche' fra i
due il tema di base infila involucri propri, e quanti siano cambia da una
versione all'altra. */
/* La larghezza e' quella del sito, non una sua. Era 1120 px contro i 1336 del
catalogo: chi passava dalle schede al proprio account vedeva la pagina
restringersi di duecento pixel senza che fosse successo niente, con la
tabella degli ordini compressa e spazio vuoto ai lati. */
.woocommerce-account.page .entry-content > *:not(.alignfull),
.woocommerce-account .woocommerce {
width: min(100% - 2 * var(--st-container-margine, 24px), var(--st-container, 1336px));
max-width: none;
margin-inline: auto;
}
.woocommerce-account.logged-in .woocommerce {
grid-template-columns: 250px minmax(0, 1fr);
gap: 34px;
}
/* --- la voce corrente del menu --------------------------------------- *
*
* Era un rettangolo rame pieno con il testo bianco, alto quanto le altre voci
* e largo tutta la colonna: il blocco piu' pesante della pagina messo sulla
* voce **dove si e' gia'**, cioe' l'unica delle sette che non porta da
* nessuna parte.
*
* Il rame resta, sul filo verticale e sul testo. La regola sta qui e non piu'
* su in questo stesso foglio perche' quella lassu' perdeva: `.is-active a` e'
* meno preciso della regola che il tema di base applica alle sue voci attive.
* Un'eccezione va scritta precisa almeno quanto la regola che corregge.
*/
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a:hover {
background: var(--st-p-rame-tenue, #FBF1E8);
color: var(--st-p-rame-testo, #AE4C0B);
}
.woocommerce-account .woocommerce-MyAccount-navigation li > a {
display: flex;
align-items: center;
gap: 10px;
min-height: 46px;
}
/* Su schermo stretto il menu diventa una fila che scorre, e la colonna sparisce:
una barra laterale su un telefono e' meta' schermo occupata da un indice. */
@media (max-width: 860px) {
.woocommerce-account.logged-in .woocommerce {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ====================================================================
* LA NAVIGAZIONE DELL'AREA CLIENTE, RIFATTA
*
* IL DIFETTO: DUE `::before` SULLO STESSO ELEMENTO
* ------------------------------------------------
* Il tema di base disegna l'icona di ogni voce con un `::before` mascherato.
* Noi disegnavamo la barretta della voce corrente **con lo stesso `::before`**:
* un elemento ha un pseudo-elemento solo, quindi sulla voce attiva le due cose
* si contendevano lo stesso spazio e l'icona usciva schiacciata contro la
* barra, tagliata a meta'.
*
* Si vedeva **solo sulla voce attiva**, cioe' su una voce su sei, ed e' il
* motivo per cui era sopravvissuto: chi guarda una schermata guarda dove sta
* andando, non dove si trova gia'.
*
* La regola da ricordare: un pseudo-elemento e' una risorsa unica. Se lo si
* usa per una decorazione di stato, si sta occupando il posto di qualunque
* altra cosa che quel selettore disegni — compreso cio' che disegna un tema
* che non abbiamo scritto noi.
*
* COSA C'E' ADESSO
* ----------------
* Le icone sono nostre, non piu' quelle del tema di base: stessa griglia di 24
* e stesso tratto delle icone del sito, cosi' la barra laterale dell'area
* cliente e la testata parlano la stessa lingua. Stanno in una pastiglia tonda
* che si accende in rame sulla voce corrente.
*
* La barretta della voce corrente e' un'ombra interna: `box-shadow` non occupa
* ne' `::before` ne' `::after`, quindi non toglie il posto a niente e non lo
* togliera' a cio' che qualcuno aggiungera' domani.
* ==================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation {
padding: 8px;
background: #fff;
border: 1px solid var(--st-p-riga, #EAE4DC);
border-radius: var(--st-r-grande, 12px);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: grid;
gap: 2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
/* Il filo fra una voce e l'altra spariva sotto la voce evidenziata e lasciava
un gradino: si disegna sul contenitore della voce successiva, non sotto la
precedente. */
.woocommerce-account .woocommerce-MyAccount-navigation li + li { border-top: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li > a {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 8px 12px;
border-radius: var(--st-r-campo, 12px);
font-size: .9375rem;
font-weight: 500;
color: var(--st-p-inchiostro, #23201D);
text-decoration: none;
transition: background-color .16s ease, color .16s ease;
}
/*
* L'ICONA DEL TEMA DI BASE SI SPEGNE, LA NOSTRA SI ACCENDE
*
* Non si nasconde e basta: si riusa lo stesso `::before` cambiandogli
* maschera, misura e colore. Nasconderlo e aggiungere un `::after` avrebbe
* lasciato in giro un pseudo-elemento vuoto e un'icona in una posizione che
* nessuna delle due regole controlla davvero.
*
* NIENTE PASTIGLIA TONDA DIETRO IL GLIFO, E IL PERCHE' E' TECNICO
* ---------------------------------------------------------------
* Il primo tentativo metteva il fondo tondo sul `::before` e il disegno su un
* `::after`. Non funziona, per due ragioni che si scoprono solo guardando:
*
* in un contenitore `flex` lo `::after` e' l'**ultimo** elemento della riga,
* quindi finiva dopo l'etichetta invece che sopra la pastiglia — e nessun
* margine negativo lo riporta indietro in modo affidabile quando l'etichetta
* cambia lunghezza;
*
* e comunque `mask` ritaglia **tutto** cio' che l'elemento disegna, ombre
* comprese: non c'e' modo di avere il cerchio pieno e il tratto mascherato
* sullo stesso elemento.
*
* Un glifo solo, del colore del testo, si accende in rame sulla voce corrente
* insieme all'etichetta. Costa un elemento invece di due e non ha modi di
* rompersi.
*/
/*
* NE' `.woocommerce-account` DAVANTI, NE' `li` IN MEZZO
*
* Questa regola porta la maschera predefinita, e per fare il suo mestiere deve
* **perdere** contro le maschere per voce che stanno sotto. Le une valgono
* `(0,1,2)`: una classe, l'elemento `a`, lo pseudo-elemento.
*
* Scritta com'era — `.woocommerce-account .woocommerce-MyAccount-navigation
* li > a::before` — questa valeva `(0,3,3)` e vinceva su tutto: dandole una
* maschera predefinita, le sette icone sono diventate sette cerchi identici.
*
* Togliere il prefisso non e' bastato: restava `(0,1,3)`, perche' quel `li`
* in mezzo e' un selettore di elemento e conta. Un solo carattere di
* differenza fra una regola che perde e una che vince — ed e' la ragione per
* cui la specificita' si conta, non si stima.
*
* Ora vale `(0,1,2)` come le altre, e a parita' decide l'ordine nel foglio:
* chi viene dopo vince. La predefinita resta quindi solo sulle voci per cui
* nessuno ha disegnato un glifo — che e' esattamente il suo mestiere.
*/
.woocommerce-MyAccount-navigation a::before {
content: '';
flex: none;
width: 21px;
height: 21px;
/* Il colore lo porta il testo: cosi' il glifo segue lo stato della voce —
inchiostro a riposo, rame quando e' corrente o puntata — senza una
seconda regola per ogni icona. */
background: currentColor;
border-radius: 0;
box-shadow: none;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
/*
* LA MASCHERA PREDEFINITA, CHE NON C'ERA
*
* Questa regola disegna un quadrato pieno di 21 px e si affida alla
* maschera della voce per ritagliarlo. Se la maschera manca — perche'
* qualcuno aggiunge un endpoint e dimentica la sua icona — non si vede
* un'icona sbagliata: si vede **il quadrato**, un blocco di colore pieno
* in mezzo a sei glifi di linea. E' successo con «Metodi di pagamento».
*
* Un cerchio vuoto come base rende quel caso invisibile a chi guarda e
* ovvio a chi lo cerca: la voce resta allineata alle altre, e chi apre il
* foglio capisce subito che li' manca un disegno.
*/
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3C/svg%3E");
}
/* Le maschere, una per voce. Sono gli stessi disegni di `st_icon()`: stessa
griglia di 24, stesso tratto, stessi terminali arrotondati. */
.woocommerce-MyAccount-navigation-link--dashboard > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v9h-11z'/%3E%3Cpath d='M13.5 9.5h3.4l2.6 2.9v3.1h-6z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v9h-11z'/%3E%3Cpath d='M13.5 9.5h3.4l2.6 2.9v3.1h-6z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--preferiti > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4C10.3 19.1 4.4 15 4.4 10.3A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.6 2.7c0 4.7-5.9 8.8-7.6 10.1Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4C10.3 19.1 4.4 15 4.4 10.3A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.6 2.7c0 4.7-5.9 8.8-7.6 10.1Z'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--preventivi > a::before,
.woocommerce-MyAccount-navigation-link--configurazioni > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 15.6V9.2a1.6 1.6 0 0 1 1.6-1.6h14.4a1.6 1.6 0 0 1 1.6 1.6v6.4a1.6 1.6 0 0 1-1.6 1.6H4.8a1.6 1.6 0 0 1-1.6-1.6Z'/%3E%3Cpath d='M7.2 7.6v3.2M10.4 7.6v4.6M13.6 7.6v3.2M16.8 7.6v4.6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 15.6V9.2a1.6 1.6 0 0 1 1.6-1.6h14.4a1.6 1.6 0 0 1 1.6 1.6v6.4a1.6 1.6 0 0 1-1.6 1.6H4.8a1.6 1.6 0 0 1-1.6-1.6Z'/%3E%3Cpath d='M7.2 7.6v3.2M10.4 7.6v4.6M13.6 7.6v3.2M16.8 7.6v4.6'/%3E%3C/svg%3E");
}
/* Le cuffie con il microfono, cioe' lo stesso disegno di `st_icon('support')`
che porta la bolla d'aiuto: chi ha visto la bolla riconosce la voce nel
menu senza doverla leggere. */
.woocommerce-MyAccount-navigation-link--richieste > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 13.5V12a7.5 7.5 0 0 1 15 0v1.5'/%3E%3Cpath d='M4.5 13h2a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V13Z'/%3E%3Cpath d='M19.5 13h-2a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V13Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 13.5V12a7.5 7.5 0 0 1 15 0v1.5'/%3E%3Cpath d='M4.5 13h2a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V13Z'/%3E%3Cpath d='M19.5 13h-2a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V13Z'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-6 6.5-11a6.5 6.5 0 1 0-13 0C5.5 15 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-6 6.5-11a6.5 6.5 0 1 0-13 0C5.5 15 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.7'/%3E%3Cpath d='M4.8 20.2a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.7'/%3E%3Cpath d='M4.8 20.2a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
}
/* Metodi di pagamento: la carta, con la banda magnetica. Mancava del tutto —
era la voce che si vedeva come un quadrato pieno. */
.woocommerce-MyAccount-navigation-link--payment-methods > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.2' width='18.8' height='13.6' rx='2.4'/%3E%3Cpath d='M2.6 9.9h18.8'/%3E%3Cpath d='M6 14.6h3.4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.2' width='18.8' height='13.6' rx='2.4'/%3E%3Cpath d='M2.6 9.9h18.8'/%3E%3Cpath d='M6 14.6h3.4'/%3E%3C/svg%3E");
}
/* Download: c'e' solo se il negozio vende qualcosa di scaricabile, ma se un
giorno lo fara' l'icona esiste gia'. */
.woocommerce-MyAccount-navigation-link--downloads > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v10.8'/%3E%3Cpath d='m7.6 10.2 4.4 4.4 4.4-4.4'/%3E%3Cpath d='M4.6 19.6h14.8'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v10.8'/%3E%3Cpath d='m7.6 10.2 4.4 4.4 4.4-4.4'/%3E%3Cpath d='M4.6 19.6h14.8'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5H6.5A1.5 1.5 0 0 0 5 6v12a1.5 1.5 0 0 0 1.5 1.5H14'/%3E%3Cpath d='M16.5 8.5 20 12l-3.5 3.5M20 12h-9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5H6.5A1.5 1.5 0 0 0 5 6v12a1.5 1.5 0 0 0 1.5 1.5H14'/%3E%3Cpath d='M16.5 8.5 20 12l-3.5 3.5M20 12h-9'/%3E%3C/svg%3E");
}
/* --- gli stati --------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation li > a:hover {
background: var(--st-p-crema, #FAF6F1);
color: var(--st-p-rame-testo, #AE4C0B);
}
/*
* La voce corrente.
*
* La barretta e' un'ombra interna e non un pseudo-elemento: `box-shadow` non
* occupa ne' `::before` ne' `::after`, quindi non toglie il posto all'icona —
* che e' esattamente l'errore che questa riga corregge.
*/
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a:hover {
background: var(--st-p-rame-tenue, #FBF1E8);
color: var(--st-p-rame-testo, #AE4C0B);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--st-p-rame, #B45A17);
}
.woocommerce-account .woocommerce-MyAccount-navigation li > a:focus-visible {
outline: 2px solid var(--st-p-rame, #B45A17);
outline-offset: -2px;
}
/* «Esci» non e' una voce come le altre: si stacca in fondo e resta grigia
finche' non la si punta. Una voce che chiude una sessione non deve avere lo
stesso richiamo di una che apre una pagina. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 8px !important;
padding-top: 8px;
border-top: 1px solid var(--st-p-riga-chiara, #F2EDE6);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a {
color: var(--st-p-debole, #726C64);
font-weight: 500;
}
/* --- su schermo stretto ------------------------------------------------ *
*
* La colonna diventa una fila che scorre. Le pastiglie restano: sono il modo
* piu' rapido di riconoscere una voce quando il testo scorre via di lato.
*/
@media (max-width: 860px) {
.woocommerce-account .woocommerce-MyAccount-navigation {
padding: 6px;
overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
.woocommerce-account .woocommerce-MyAccount-navigation li > a {
white-space: nowrap;
padding: 8px 14px 8px 10px;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 0 !important;
padding-top: 0;
border-top: 0;
border-left: 1px solid var(--st-p-riga-chiara, #F2EDE6);
padding-left: 6px;
margin-left: 4px;
}
}
/* ==========================================================================
LE RICHIESTE DI ASSISTENZA NELL'AREA CLIENTE
==========================================================================
Stessa lingua degli ordini — scheda bianca, filo chiaro, pastiglia di stato
in alto a destra — e non e' pigrizia grafica: ordini, preventivi,
configurazioni e richieste sono quattro modi di avere una cosa in corso con
il negozio, e a occhio devono somigliarsi. Inventare una terza grafica per
la quarta cosa fa sembrare che sia un pezzo di un altro sito.
La pastiglia `.st-stato` e' quella degli ordini, riusata: e' definita piu'
in alto in questo stesso foglio, e i colori li sceglie `Fronte::tinta()`.
========================================================================== */
.st-richieste {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
.st-richiesta {
position: relative;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--st-p-riga, #EAE4DC);
border-radius: var(--st-r-scheda, 10px);
box-shadow: var(--st-ombra-scheda, 0 1px 2px rgba(35, 32, 29, .04));
}
.st-richiesta__testa {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.st-richiesta__codice {
font-size: .9375rem;
font-weight: 700;
/* I numeri di richiesta si leggono a colpo d'occhio e si confrontano con
quelli scritti nell'email: a larghezza fissa restano incolonnati e due
codici diversi non sembrano lunghi uguali. */
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
color: var(--st-p-inchiostro, #23201D);
text-decoration: none;
}
.st-richiesta__codice:hover { color: var(--st-p-rame-testo, #AE4C0B); }
.st-richiesta__oggetto {
margin: 0 0 8px;
font-size: .9375rem;
line-height: 1.55;
color: #4A443E;
}
.st-richiesta__meta {
margin: 0;
font-size: .8125rem;
line-height: 1.5;
color: #6E655C;
}
.st-richiesta__apri {
display: inline-block;
margin-top: 12px;
font-size: .875rem;
font-weight: 600;
color: var(--st-p-rame-testo, #AE4C0B);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.st-richiesta__apri:hover { color: var(--st-p-rame-scuro, #93470F); }
/* --- quando non c'e' ancora niente ------------------------------------ *
*
* Lo stato vuoto qui non e' un'assenza da giustificare: nessuna richiesta
* aperta e' una buona notizia. Il testo lo dice, e offre la strada per la
* volta in cui invece servira'.
*/
.st-richieste__vuoto {
padding: 28px 24px;
text-align: center;
background: var(--st-p-crema, #FAF6F1);
border: 1px solid var(--st-p-riga, #EAE4DC);
border-radius: var(--st-r-grande, 12px);
}
.st-richieste__vuoto h3 {
margin: 0 0 8px;
font-family: var(--st-font-display, 'Cormorant Garamond', Georgia, serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--st-p-inchiostro, #23201D);
}
.st-richieste__vuoto p {
max-width: 46ch;
margin: 0 auto 18px;
font-size: .9375rem;
line-height: 1.65;
color: #4A443E;
}
.st-richieste__nuova { margin: 16px 0 0; }
@media (max-width: 600px) {
.st-richiesta { padding: 14px 15px; }
/* Codice e pastiglia vanno a capo invece di stringersi: su schermi
stretti la pastiglia schiacciata mandava lo stato a due righe dentro
un'altezza da una riga sola, e il testo usciva tagliato. */
.st-richiesta__testa {
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
}
}
/* =======================================================================
* ACCESSO E REGISTRAZIONE: LA FOTOGRAFIA ACCANTO AL MODULO
*
* Due pagine di due campi e un pulsante. La fotografia a fianco non e'
* decorazione: ricorda cosa si sta comprando a chi e' arrivato qui da un
* carrello, che e' il momento in cui si abbandona di piu'.
* ===================================================================== */
/* ==========================================================================
ACCEDI E REGISTRATI — SCHERMO DIVISO, IMMAGINE FERMA
==========================================================================
COSA C'ERA PRIMA, E PERCHE' NON REGGEVA
---------------------------------------
Due colonne in una griglia, con la fotografia in `sticky`. Su «Accedi»
passava; su «Registrati» no. Il modulo ha undici campi, la pagina cresceva
a 2293 px, e la fotografia — alta al massimo 900 — finiva a meta' strada
lasciando sotto di se' **milletrecento pixel di fondo vuoto**. Sopra e
sotto scorrevano intestazione e piede del negozio, con quindici uscite
offerte a chi era arrivato per fare una cosa sola.
COME FUNZIONA ORA
-----------------
La fotografia e' `fixed` sulla meta' sinistra: non si muove mai, occupa
sempre tutta l'altezza, e non esiste altezza di modulo che possa metterla
in difficolta'. La colonna di destra sta nel **flusso normale** con un
margine sinistro del 50%: scorre la pagina, e siccome a sinistra non c'e'
niente che scorra, scorre solo il modulo.
Si poteva fare anche con `overflow: auto` su un pannello. E' peggio: uno
scorrimento annidato rompe il ritorno in cima del browser, litiga con la
tastiera che si apre sul telefono, e su iOS lascia la barra dell'indirizzo
a meta'. Il flusso normale non ha nessuno di questi difetti.
========================================================================== */
.st-accesso2 { padding-block: 0; }
.st-accesso2__scena {
display: block;
min-height: 100vh;
min-height: 100dvh;
}
.st-accesso2__foto {
position: fixed;
inset: 0 50% 0 0;
overflow: hidden;
background: var(--st-p-crema, #FAF6F1);
z-index: 0;
}
.st-accesso2__foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Un velo dal basso: lega la frase alla fotografia. La leggibilita' non la
garantisce lui ma la targa qui sotto — misurato, sulla finestra illuminata
il contrasto scendeva a 1,53:1 e per coprirlo col solo velo sarebbe servito
un altro 45% di nero, cioe' spegnere la fotografia per una riga di testo. */
.st-accesso2__foto::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 42%;
background: linear-gradient(to top,
rgba(14, 16, 18, .38) 0%,
rgba(14, 16, 18, .15) 55%,
rgba(14, 16, 18, 0) 100%);
pointer-events: none;
}
.st-accesso2__frase {
position: absolute;
z-index: 1;
left: clamp(24px, 3.4vw, 48px);
right: clamp(24px, 6vw, 90px);
bottom: clamp(28px, 3.4vw, 48px);
margin: 0;
padding: 14px 18px 14px 16px;
border-radius: var(--st-r-campo, 12px);
background: rgba(14, 16, 18, .58);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
border-left: 2px solid var(--st-copper, #B65532);
font-family: var(--st-font-display, inherit);
font-size: var(--st-fs-lead);
line-height: 1.4;
color: #fff;
}
/* La colonna che scorre. Fondo pieno: sotto c'e' la fotografia in posizione
fissa, e senza un fondo opaco si vedrebbe attraverso. */
.st-accesso2__lato {
position: relative;
z-index: 1;
margin-left: 50%;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--st-p-carta, #FFFDFB);
padding: clamp(28px, 3.2vw, 52px) clamp(22px, 3.6vw, 64px) clamp(32px, 3.6vw, 56px);
}
.st-accesso2__lato .st-accesso2__griglia {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
max-width: 27rem;
width: 100%;
/* `auto` sopra e sotto centra il modulo quando la colonna e' piu' alta di
lui — su «Accedi» avanza mezzo schermo — e sparisce da solo quando non
c'e' spazio, senza tagliare niente in cima come farebbe `center`. */
margin: auto;
}
/* --- il marchio e la via d'uscita, al posto dell'intestazione --- */
.st-accesso2__cima {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 4px;
}
.st-accesso2__marchio { display: inline-flex; align-items: center; }
/* Il lockup e' impilato — segno sopra, parola sotto — e sotto i cinquanta
pixel le due parti si schiacciano l'una sull'altra. E' la stessa altezza
che usa l'intestazione del sito. */
.st-accesso2__marchio img { height: 52px; width: auto; display: block; }
.st-accesso2__ritorno {
font-size: .875rem;
color: var(--st-p-fumo, #6E6862);
text-decoration: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .15s ease;
}
.st-accesso2__ritorno:hover,
.st-accesso2__ritorno:focus-visible { color: var(--st-copper, #B65532); }
/* --- la coda: perche' un account, e il minimo legale --- */
.st-accesso2__perche {
margin: 0;
padding-top: 22px;
border-top: 1px solid var(--st-p-filo, #E7E1D9);
background: none;
}
.st-accesso2__perche h2 {
font-size: var(--st-fs-micro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--st-p-fumo, #6E6862);
font-weight: 600;
margin: 0 0 12px;
}
.st-accesso2__perche ul {
margin: 0 0 14px;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
.st-accesso2__perche li {
display: block;
font-size: .875rem;
line-height: 1.5;
color: var(--st-p-fumo, #6E6862);
padding-left: 16px;
position: relative;
}
.st-accesso2__perche li::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--st-copper, #B65532);
}
.st-accesso2__ospite {
margin: 0;
font-size: .8125rem;
line-height: 1.5;
color: var(--st-p-fumo, #6E6862);
}
.st-accesso2__piede {
margin: 26px 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
font-size: var(--st-fs-micro);
color: var(--st-p-fumo, #6E6862);
}
.st-accesso2__piede a { color: inherit; text-decoration: none; }
.st-accesso2__piede a:hover,
.st-accesso2__piede a:focus-visible { color: var(--st-copper, #B65532); text-decoration: underline; }
@media (max-width: 900px) {
/* Su telefono la fotografia non puo' restare ferma: mezzo schermo occupato
da un'immagine mentre si compila un modulo con la tastiera aperta non
lascia spazio a niente. Torna una fascia in cima, alta quanto basta a
dire dove si e' arrivati. */
.st-accesso2__scena { min-height: 0; }
.st-accesso2__foto {
position: relative;
inset: auto;
height: clamp(170px, 32vw, 240px);
}
.st-accesso2__frase {
font-size: .95rem;
left: var(--st-container-margine, 20px);
right: var(--st-container-margine, 20px);
bottom: 16px;
padding: 11px 14px;
}
.st-accesso2__lato {
margin-left: 0;
min-height: 0;
padding: 26px var(--st-container-margine, 20px) 40px;
}
.st-accesso2__lato .st-accesso2__griglia { max-width: 30rem; }
.st-accesso2__marchio img { height: 44px; }
}
/* La fascia di benvenuto con la fotografia dietro. Stessa regola del resto del
sito: la fotografia e' chiara, quindi il testo resta inchiostro e il velo
schiarisce. La meta' bassa della fotografia e' uniforme di proposito —
e' li' che si appoggiano i riquadri dei conteggi. */
.st-conto__saluto--foto {
position: relative;
overflow: hidden;
border-radius: var(--st-r-scheda, 20px);
padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(28px, 3.4vw, 44px);
margin-bottom: 28px;
}
.st-conto__sfondo { position: absolute; inset: 0; z-index: 0; }
.st-conto__sfondo img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.st-conto__sfondo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(94deg,
rgba(247, 244, 239, .90) 0%,
rgba(247, 244, 239, .78) 30%,
rgba(247, 244, 239, .46) 56%,
rgba(247, 244, 239, .24) 78%,
rgba(247, 244, 239, .18) 100%);
}
.st-conto__saluto--foto > .st-conto__ciao,
.st-conto__saluto--foto > .st-conto__sotto { position: relative; z-index: 1; }
.st-conto__saluto--foto > .st-conto__sotto { max-width: 46ch; }
/* =======================================================================
* L'AREA CLIENTI, ALLINEATA ALLA TAVOLA
*
* La tavola tiene il menu a sinistra come una colonna di voci con icona, la
* corrente con il fondo terracotta chiaro. Le schede della bacheca sono
* riquadri bianchi con filetto, il titolo serif e il richiamo in coda.
* ===================================================================== */
/* Il menu: la voce corrente si riconosce dal fondo, non dal grassetto. Il
grassetto e' l'unico segnale che sparisce a colpo d'occhio quando le voci
sono sette e tutte della stessa lunghezza. */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation li a {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 14px;
border-radius: var(--st-r-campo, 12px);
font-size: 14px;
color: var(--st-text, #15181B);
text-decoration: none;
transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--st-p-crema, #FAF6F1); }
.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a {
background: color-mix(in srgb, var(--st-copper, #B65532) 10%, transparent);
color: var(--st-copper-text, #B45431);
font-weight: 500;
}
/* I titoli delle sezioni della bacheca: serif, come ogni titolo del sito. */
.st-conto__griglia h2,
.woocommerce-MyAccount-content h2 {
font-family: var(--st-font-display, Georgia, serif);
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
font-weight: 500;
letter-spacing: -.008em;
color: var(--st-p-inchiostro, #15181B);
}
/* Le tabelle degli ordini: la riga si legge, non si decifra. Il numero
d'ordine e l'importo sono le due colonne che si cercano, e sono le uniche
due in cifre allineate. */
.woocommerce-orders-table td,
.woocommerce-orders-table th { font-size: 14px; }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
font-weight: 500;
color: var(--st-p-inchiostro, #15181B);
text-decoration: none;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-total,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
font-variant-numeric: tabular-nums;
}
/*
* IL BOTTONE CHE CHIUDE IL MODULO
*
* Era alto 40 px: cinque di riempimento sopra e sotto attorno a una riga di
* testo. Sotto i 44 px il bersaglio e' piu' piccolo del polpastrello che deve
* colpirlo, e su queste due pagine e' l'unico gesto che conta — chi lo manca
* non ritenta tre volte, se ne va.
*
* Si alza il riempimento invece di imporre solo un'altezza minima, cosi' il
* testo resta centrato anche se un giorno andasse a capo.
*/
.st-accesso2__form .st-button--block,
.st-accesso2__form button[type="submit"] {
min-height: 48px;
padding-block: 12px;
}
/* Anche i pulsanti del fornitore, che stanno sopra il modulo e si toccano
con lo stesso dito. */
.st-accesso2 .st-social__btn {
min-height: 48px;
}
/* =======================================================================
L'AREA CLIENTI USA LA LARGHEZZA DEL SITO
=======================================================================
Il tema padre incapsula l'area clienti in `.ct-woo-account` con un
`max-width` di 1120 px. Il resto del sito ne usa 1336: la stessa persona
che passa dal catalogo al proprio account vedeva la pagina restringersi di
duecento pixel senza motivo, con la tabella degli ordini compressa mentre
ai lati restava spazio vuoto.
La colonna del menu passa da 220 a 264 px per una ragione precisa: a 220
«Metodi di pagamento» andava a capo, e quella voce diventava alta il doppio
delle altre — l'unica storta in una fila di sette.
======================================================================= */
.woocommerce-account.logged-in .woocommerce.ct-woo-account {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 40px;
align-items: start;
}
.woocommerce-account .ct-acount-nav {
width: auto;
max-width: none;
}
/* L'etichetta piu' lunga — «Metodi di pagamento» — vuole circa 250 px fra
icona, spazio e riempimento. La colonna gliene da' 300: e' l'unico numero
che conta qui, e sotto quella soglia la voce va a capo e diventa alta il
doppio delle altre.
Il `nowrap` che avevo messo prima era la scorciatoia sbagliata: impediva il
capo ma non allargava niente, e l'etichetta usciva dal riquadro bianco
invece di andare a capo dentro. Fra le due, andare a capo era il male
minore — ma non serve nessuno dei due se lo spazio c'e'. */
.woocommerce-MyAccount-navigation a {
display: flex;
align-items: center;
gap: 12px;
}
@media (max-width: 900px) {
/* Sotto i 900 il menu torna sopra il contenuto, a tutta larghezza: due
colonne in mezzo schermo lascerebbero al contenuto meno spazio del
menu che lo indicizza. */
.woocommerce-account.logged-in .woocommerce.ct-woo-account {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
/* Qui invece il capo serve: la barra scorre in orizzontale e le etichette
intere la farebbero uscire dallo schermo. */
}
/* =======================================================================
RIFINITURE DELL'AREA CLIENTE
===================================================================== */
/* La colonna della navigazione riempie la sua colonna.
Misurato: la griglia le assegna 300 px e il riquadro ne occupava 270,
perche' Blocksy aggiunge 30 px di margine destro **dentro** la colonna, in
piu' ai 40 di distacco della griglia. Il risultato erano 70 px fra le due
colonne e un menu piu' stretto della sua colonna: a occhio si legge come un
allineamento sbagliato, e non si capisce da dove venga. Il distacco lo
decide la griglia, una volta sola. */
.woocommerce-account .ct-acount-nav { margin-inline-end: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; }
/* Sette riquadri in due colonne lasciano l'ultimo da solo con mezza riga
vuota accanto. Quando sono dispari, l'ultimo si prende la riga intera:
diventa una scelta invece di un avanzo. */
.st-conto__scheda:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* «Modifica password» era un `fieldset` con il bordo di serie del browser —
un filetto sottile interrotto dalla scritta — dentro una pagina fatta di
schede con angoli tondi. E' l'unico elemento del sito disegnato da nessuno.
La `legend` diventa un titolo di sezione dentro il riquadro: `float` piu'
larghezza piena e' il modo di far comportare una `legend` come un blocco
senza toglierla dal documento, dove serve a dire a chi non vede lo schermo
che i tre campi sotto vanno insieme. */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
margin: 32px 0 0;
padding: 22px 24px 24px;
border: 1px solid var(--st-p-riga, #EAE4DC);
border-radius: var(--st-r-scheda, 12px);
background: var(--st-p-avorio, #F7F4EF);
}
.woocommerce-account .woocommerce-EditAccountForm fieldset > legend {
float: left;
width: 100%;
/* Il browser da' alla `legend` un margine suo, che la spostava sedici
pixel a sinistra delle etichette dei campi che introduce. */
margin: 0;
padding: 0 0 4px;
font-family: var(--st-font-display, Georgia, serif);
font-size: 1.15rem;
font-weight: 500;
line-height: 1.2;
color: var(--st-p-inchiostro, #15181B);
}
/* Il `float` della `legend` va chiuso, se no il primo campo le sale accanto. */
.woocommerce-account .woocommerce-EditAccountForm fieldset > legend + * { clear: both; }
/* La spedizione dentro la scheda dell'ordine, fra la merce e i comandi.
E' la riga per cui questa pagina si riapre: si legge prima dei pulsanti. */
.st-ordine__spedizioni {
/* Il corpo della scheda e' una griglia a due colonne — merce a sinistra,
comandi a destra. La spedizione le attraversa entrambe: schiacciata in
una colonna stringeva il nome del prodotto a tre righe per fare posto a
due numeri che non hanno bisogno di stare li'. */
grid-column: 1 / -1;
margin: 14px 0 0;
padding: 12px 14px;
list-style: none;
background: var(--st-p-avorio, #F7F4EF);
border-radius: var(--st-r-campo, 12px);
display: grid;
gap: 8px;
}
.st-ordine__spedizioni li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
margin: 0;
font-size: .9rem;
}
.st-ordine__corriere {
font-size: .68rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--st-muted, #6F6B66);
}
/* Il numero e' un numero: cifre a passo fisso, si ricopia senza perdere il segno. */
.st-ordine__spedizioni strong {
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
color: var(--st-p-inchiostro, #15181B);
}
.st-ordine__spedizioni a {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Il totale nella testata della scheda non si spezza fra la cifra e il segno.
Usciva «65,28» su una riga e «€» su quella dopo: due righe per un importo,
e il simbolo che sembrava un carattere avanzato.
La causa non era la mancanza di `nowrap` — c'era, e non bastava: i campi
della testata sono voci di un flex con `flex: 0 1 auto`, quindi si
**restringono** sotto la loro larghezza naturale, e la casella del totale
finiva larga 45 px per un importo che ne chiede 48. Si toglie il permesso di
restringersi, che e' la causa; il `nowrap` resta come cintura. */
.st-ordine__testa .st-ordine__campo { flex: 0 0 auto; }
.st-ordine__testa .woocommerce-Price-amount {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}