/* ============================================================ ACCOUNT — accesso e registrazione (utente non loggato) Layout Academy: schermata piena divisa a metà, form da un lato e fotografia dall'altro. Si vede una schermata per volta. Markup: woocommerce/myaccount/form-login.php + AccountPageController, che aggiunge a la classe .hornoi-login-page. JS: assets/js/login.js (scambio immediato fra accesso e registrazione). ============================================================ */ .hornoi-login-page { --auth-ink: #0e0e0e; --auth-body: #5a564f; --auth-muted: #8a8580; --auth-line: rgba(14, 14, 14, .2); --auth-cream: #f5f4f2; --auth-disp: 'Space Grotesk', sans-serif; --auth-font: 'Jost', sans-serif; } /* ============================================================ IMPIANTO ============================================================ */ .mca-auth { /* Full-bleed: la pagina account non ha container, ma se il contenuto finisse dentro un blocco a larghezza vincolata la schermata resterebbe comunque a tutta pagina. L'overflow-x nascosto su body (general.css) neutralizza la barra di scorrimento inclusa in 100vw. */ width: 100vw; margin-left: calc(50% - 50vw); font-family: var(--auth-font); color: var(--auth-ink); } /* Una schermata per volta: la classe la mette il PHP, il JS la sposta. */ .mca-auth__screen { display: none; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-height, 83px) - var(--topbar-h, 40px)); } .mca-auth__screen.is-active { display: grid; } /* ── Colonna del form ────────────────────────────────────── */ .mca-auth__panel { display: flex; align-items: center; justify-content: center; padding: 70px 44px; } .mca-auth__inner { width: 100%; max-width: 440px; } .mca-auth__eyebrow { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--auth-muted); } .hornoi-login-page .mca-auth__title { font-family: var(--auth-disp); font-weight: 600; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; margin: 14px 0 0; color: var(--auth-ink); } .mca-auth__lead { margin: 14px 0 0; font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--auth-body); } /* ── Colonna con la foto ─────────────────────────────────── */ .mca-auth__media { position: relative; overflow: hidden; background: var(--auth-ink); } .mca-auth__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; opacity: .9; } .mca-auth__media--start img { object-position: center; opacity: .7; } .mca-auth__media-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 14, 14, .9), rgba(14, 14, 14, .15)); } .mca-auth__media--start .mca-auth__media-veil { background: linear-gradient(to top, rgba(14, 14, 14, .92), rgba(14, 14, 14, .2)); } .mca-auth__quote { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 54px 48px; } .mca-auth__quote blockquote { margin: 0; max-width: 440px; font-family: var(--auth-disp); font-size: 30px; line-height: 1.25; font-weight: 500; font-style: italic; color: #fff; } .mca-auth__quote figcaption { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-top: 18px; } .mca-auth__perks { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 54px 48px; list-style: none; display: flex; flex-direction: column; gap: 14px; max-width: 480px; } .mca-auth__perks li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 300; color: #fff; } .mca-auth__perks span { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--auth-ink); display: flex; align-items: center; justify-content: center; font-size: 10px; } /* ============================================================ FORM I selettori di woocommerce.css vestono .form-row e .input-text con tre classi: qui il prefisso .hornoi-login-page basta a vincere. ============================================================ */ .mca-auth__form { margin-top: 32px; } /* woocommerce.css imposta `.form-row-first/-last { width: 47%; float: left }`: dentro la griglia il float è inerte, ma quel 47% stringerebbe il campo a metà della propria colonna. Qui ogni riga riempie la cella che le assegna la griglia. */ .hornoi-login-page .mca-auth__form .form-row, .hornoi-login-page .mca-auth__form .form-row-first, .hornoi-login-page .mca-auth__form .form-row-last { display: block; width: 100%; float: none; margin: 0 0 16px; padding: 0; } /* Nome e cognome affiancati (form-row-first / -last di WooCommerce). */ .mca-auth__form--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 30px; } .hornoi-login-page .mca-auth__form--grid > * { grid-column: 1 / -1; } .hornoi-login-page .mca-auth__form--grid > .form-row-first { grid-column: 1 / 2; } .hornoi-login-page .mca-auth__form--grid > .form-row-last { grid-column: 2 / 3; } .hornoi-login-page .mca-auth__form label { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--auth-muted); font-weight: 400; } .hornoi-login-page .mca-auth__form .required { color: var(--auth-muted); text-decoration: none; border: 0; } .hornoi-login-page .mca-auth__form input[type="text"], .hornoi-login-page .mca-auth__form input[type="email"], .hornoi-login-page .mca-auth__form input[type="tel"], .hornoi-login-page .mca-auth__form input[type="password"], .hornoi-login-page .mca-auth__form select { width: 100%; padding: 15px 18px; border: 1px solid var(--auth-line); border-radius: 10px; background: #fff; font-family: var(--auth-font); font-size: 15px; line-height: 1.3; color: var(--auth-ink); outline: none; transition: border-color .25s ease, box-shadow .25s ease; } .hornoi-login-page .mca-auth__form input::placeholder { color: #b4b0aa; } .hornoi-login-page .mca-auth__form input:focus, .hornoi-login-page .mca-auth__form select:focus { border-color: var(--auth-ink); box-shadow: 0 0 0 3px rgba(14, 14, 14, .06); } /* Ricordami + password dimenticata */ .mca-auth__options { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .hornoi-login-page .mca-auth__options label { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 300; letter-spacing: normal; text-transform: none; color: var(--auth-body); cursor: pointer; } .hornoi-login-page .mca-auth__options input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--auth-ink); } .mca-auth__lost { font-size: 14px; color: var(--auth-body); text-decoration: underline; } .mca-auth__lost:hover { color: var(--auth-ink); } /* Pulsante primario */ .hornoi-login-page .mca-auth__submit { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 6px; padding: 18px 24px; border: 0; border-radius: 100px; background: var(--auth-ink); color: #fff; font-family: var(--auth-disp); font-size: 13.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .3s ease; } .hornoi-login-page .mca-auth__submit:hover { background: #333; color: #fff; } .mca-auth__note { margin: 0 0 16px; font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--auth-body); } /* Privacy policy stampata da WooCommerce dentro il form. */ .hornoi-login-page .woocommerce-privacy-policy-text p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; font-weight: 300; color: var(--auth-body); } /* Riga "Non hai ancora un account?" */ .mca-auth__switch { margin: 32px 0 0; font-size: 14.5px; font-weight: 300; color: var(--auth-body); } .mca-auth__switch a { color: var(--auth-ink); text-decoration: underline; } /* ============================================================ NOTICE Lo stile arriva da notices.css: qui basta togliere il margine laterale e tenerle sopra il titolo. ============================================================ */ .mca-auth .woocommerce-message, .mca-auth .woocommerce-info, .mca-auth .woocommerce-error, .mca-auth .woocommerce-notices-wrapper { margin-left: 0; margin-right: 0; margin-bottom: 24px; } /* ============================================================ PASSWORD DIMENTICATA / REIMPOSTA Schermate stampate dai template originali di WooCommerce: qui ricevono lo stesso vestito, centrate su fondo crema. ============================================================ */ .hornoi-login-page .woocommerce-ResetPassword, .hornoi-login-page .woocommerce-ResetPassword + p, .hornoi-login-page .lost_reset_password { max-width: 460px; margin-left: auto; margin-right: auto; } .hornoi-login-page .lost_reset_password { padding: 40px 0 90px; } /* WooCommerce mette le due password affiancate (form-row-first/last, float al 47%): in una colonna da 460px vanno una sotto l'altra. */ .hornoi-login-page .lost_reset_password .form-row { display: block; float: none; width: 100%; margin: 0 0 16px; } .hornoi-login-page .lost_reset_password label { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--auth-muted); } .hornoi-login-page .lost_reset_password input[type="text"], .hornoi-login-page .lost_reset_password input[type="password"] { width: 100%; padding: 15px 18px; border: 1px solid var(--auth-line); border-radius: 10px; font-family: var(--auth-font); font-size: 15px; outline: none; } /* Solo il pulsante di invio: il form contiene anche l'occhio "mostra password" (button.show-password-input), che WooCommerce disegna già come icona dentro il campo e non va vestito da pillola. */ .hornoi-login-page .lost_reset_password button[type="submit"], .hornoi-login-page .lost_reset_password .button { display: flex; align-items: center; justify-content: center; width: 100%; padding: 18px 24px; border: 0; border-radius: 100px; background: var(--auth-ink); color: #fff; font-family: var(--auth-disp); font-size: 13.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 991.98px) { .mca-auth__screen.is-active { grid-template-columns: 1fr; min-height: 0; } .mca-auth__panel { padding: 56px 32px 64px; order: 1; } /* La foto sotto il form, alta quanto basta per leggere citazione e vantaggi: a schermo stretto il form deve venire prima. */ .mca-auth__media { order: 2; min-height: 380px; } .mca-auth__quote, .mca-auth__perks { padding: 40px 32px; } .mca-auth__quote blockquote { font-size: 24px; } } @media (max-width: 575.98px) { .mca-auth__panel { padding: 40px 20px 52px; } .hornoi-login-page .mca-auth__title { font-size: 34px; } .hornoi-login-page .lost_reset_password { padding-left: 20px; padding-right: 20px; } .mca-auth__form--grid { grid-template-columns: 1fr; } .hornoi-login-page .mca-auth__form--grid > .form-row-first, .hornoi-login-page .mca-auth__form--grid > .form-row-last { grid-column: 1 / -1; } .mca-auth__media { min-height: 300px; } .mca-auth__quote, .mca-auth__perks { padding: 32px 20px; } .mca-auth__quote blockquote { font-size: 21px; } }