/* ==========================================================================
* Monogo_UnilayerLoginStyles - shared auth-page styles.
*
* Loaded on four pages via layout XML:
* customer_account_login.xml (/customer/account/login)
* customer_account_create.xml (/customer/account/create)
* customer_account_forgotpassword.xml (/customer/account/forgotpassword)
* customer_account_logoutsuccess.xml (/customer/account/logoutSuccess)
*
* Each of those layouts adds `monogo-auth-page` to via
* ``. The bulk of
* the rules below scope to `body.monogo-auth-page:not(.page-monogo-customerauth-embed)` so the floating-
* label inputs, password toggle, primary buttons, validation
* messages and required-field affordances stay identical across all
* three surfaces — same affordance the iframe modal uses, same
* tokens Monogo_UnilayerCheckout uses.
*
* Login-only rules (the two-column grid, CMS-driven marketing copy,
* benefits list, in-form forgot-password link, …) stay scoped to
* `body.customer-account-login:not(.page-monogo-customerauth-embed)` so they don't leak onto the other
* auth pages.
*
* Selectors are deliberately prefixed with `body.` so they outrank
* Luma's `styles-l.css` (loaded after this file) — for example
* Luma's `.login-container .block.block-customer-login { float: right }`
* is (0,3,0) and we beat it with (0,4,0) without resorting to
* `!important` on every property.
*
* Embed-chrome guard (`:not(.page-monogo-customerauth-embed)`):
* the auth-iframe modal renders /customer/account/login (and friends)
* through Monogo_UnilayerCustomerAuth's chrome-strip handle. The
* iframe body carries `page-monogo-customerauth-embed` along with our
* `monogo-auth-page` class, so without an explicit exclusion the two
* stylesheets fight over the same form. We resolve this with two
* independent defences:
*
* 1. Primary — this asset is removed from the embed page's
* via `view/frontend/layout/monogo_customerauth_embed_chrome.xml`
* in this module (a `` against this exact
* asset URL).
*
* 2. Belt-and-braces — every base selector below carries a
* `:not(.page-monogo-customerauth-embed)` guard so that even if
* FPC serves a cached variant of the embed page where the
* remove didn't take effect (handle merge order edge case,
* module-sequence regression, etc.), no rule from this file
* can match.
* ========================================================================== */
/* --------------------------------------------------------------------------
* @font-face — ProximaNova brand typeface (5 weights, woff2 + woff)
* --------------------------------------------------------------------------
* Files live in `app/code/Monogo/UnilayerLoginStyles/view/frontend/web/fonts/`
* and are reused cross-module by `Monogo_UnilayerAccountDashboard::dashboard.css`
* (which loads them via a relative URL — single browser cache hit across
* the auth flow → customer dashboard navigation, no duplicate download).
*
* Format strategy:
* - woff2 first (~58 KB / weight, ~97 % browser support including Safari 12+)
* - woff fallback (~93 KB / weight) for older browsers
* - eot / ttf intentionally NOT shipped (eot = legacy IE only;
* ttf would double the payload without adding browser coverage)
*
* font-display: swap → text paints immediately with the system fallback,
* then swaps to ProximaNova when the font is ready. No FOIT (flash of
* invisible text), small FOUT (flash of unstyled text) accepted as a
* brand-typography trade-off.
*
* Weight mapping:
* 400 → ProximaNova-Regular (body, paragraphs, default text)
* 500 → ProximaNova-Medium (labels, secondary emphasis)
* 600 → ProximaNova-Semibold (buttons, headings, strong)
* 700 → ProximaNova-Bold (h1-h2, accent CTAs)
* 800 → ProximaNova-Extrabld (auth chrome bar headlines, the only 800 use)
*
* Italic, Light (300) intentionally NOT shipped — no current rule
* declares them; if a future rule needs italic, the browser will
* synthesise oblique from the Regular face (acceptable for sporadic
* / in native Magento messages). Adding the italic faces is a
* 4-line addition in this file plus 4 woff2/woff pairs in /fonts.
* (Story 31 D25a, 2026-05-15.)
* -------------------------------------------------------------------------- */
@font-face {
font-family: ProximaNova;
src: url('../fonts/ProximaNova-Regular.woff2') format('woff2'),
url('../fonts/ProximaNova-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ProximaNova;
src: url('../fonts/ProximaNova-Medium.woff2') format('woff2'),
url('../fonts/ProximaNova-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ProximaNova;
src: url('../fonts/ProximaNova-Semibold.woff2') format('woff2'),
url('../fonts/ProximaNova-Semibold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ProximaNova;
src: url('../fonts/ProximaNova-Bold.woff2') format('woff2'),
url('../fonts/ProximaNova-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ProximaNova;
src: url('../fonts/ProximaNova-Extrabld.woff2') format('woff2'),
url('../fonts/ProximaNova-Extrabld.woff') format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
* Design Tokens (mirrored from Monogo_UnilayerCheckout)
* Declared on the body so every descendant — including widget blocks
* (Name, Dob, Telephone, Country, …) Magento injects via PHP — inherits.
* -------------------------------------------------------------------------- */
body.monogo-auth-page:not(.page-monogo-customerauth-embed) {
--muc-color-primary: #000;
--muc-color-bg: #fff;
--muc-color-surface: #F4F4F4;
--muc-color-border: #e5e5e5;
--muc-color-border-input: #ccc;
--muc-color-text: #111;
--muc-color-text-secondary: #6b6b6b;
--muc-color-text-muted: #999;
--muc-color-success: #2e7d32;
--muc-color-error: #d32f2f;
--muc-color-link: #0066cc;
/* Brand font stack — ProximaNova preferred, gracefully degrades through
the modern UI / system fonts. The `@font-face` block ABOVE :root
activates ProximaNova in 5 weights (400/500/600/700/800) loaded
from `Monogo_UnilayerLoginStyles::fonts/` and reused cross-module
by `Monogo_UnilayerAccountDashboard::dashboard.css` (which loads
the same files via a relative URL — single browser-cache hit
across auth flow → customer dashboard navigation).
Stack mirrored across `Monogo_UnilayerLoginStyles::login.css` and
`Monogo_UnilayerAccountDashboard::dashboard.css` so login,
register, forgot, post-login and customer dashboard all render
with one consistent typeface. (Story 31 D25 + D25a.) */
--muc-font-family: ProximaNova, ui-sans-serif, system-ui,
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--muc-font-size-xs: 11px;
--muc-font-size-sm: 12px;
--muc-font-size-base: 14px;
--muc-font-size-md: 16px;
--muc-font-size-lg: 20px;
--muc-font-size-heading: 32px;
--muc-line-height: 1.5;
--muc-border-radius: 0;
--muc-transition-speed: 300ms;
--muc-input-height: 48px;
--muc-button-height: 52px;
--muc-gutter: 80px;
}
/* --------------------------------------------------------------------------
* Auth-page chrome bars (top + bottom)
*
* The shared `monogo_unilayerloginstyles_auth_chrome` layout handle
* (see monogo_unilayerloginstyles_auth_chrome.xml) removes the global
* `header.container` and `footer-container` on every auth surface
* (/login, /create, /forgotpassword) and replaces them with two
* full-bleed `
` strips wrapped in CMS blocks:
*
*
…CMS monogo_auth_topbar…
* …form…
*
…CMS monogo_auth_bottombar…
*
* The strips are pure decoration — solid black background, large
* uppercase white headline centred horizontally. Default seeded copy
* is "(in development)" until the merchant edits the CMS blocks in
* admin. Both strips share the same visual treatment so they read as
* a matching pair of marketing bookends around the form.
*
* `body.monogo-auth-chrome` is the body class the shared handle adds
* — scoping every rule to it means these styles only render on the
* three pages that pulled the handle in, and they vanish automatically
* the moment another page mistakenly imports this CSS.
*
* Iframe context is excluded via `:not(.page-monogo-customerauth-embed)`
* even though monogo_customerauth_embed_chrome.xml removes the strips
* outright — belt-and-braces in case FPC serves a stale variant.
* -------------------------------------------------------------------------- */
/* When the auth chrome handle is active, Luma's `.page-wrapper`
sometimes still reserves vertical room for the removed
header.container (paddings declared at the wrapper level rather
than the header itself). Clamp it to 0 so the top strip really
sits at the very top of the viewport. Same for the bottom edge. */
body.monogo-auth-chrome:not(.page-monogo-customerauth-embed) .page-wrapper {
padding-top: 0;
padding-bottom: 0;
}
/* --------------------------------------------------------------------------
* Page-level reset
*
* Zeroes Luma's default `.page-main` padding so the form / hero / two
* column grid below render edge-to-edge inside our auth chrome wrapper.
*
* Scope deliberately EXCLUDES `.customer-account-login` — the login
* screen keeps Luma's native `.page-main` gutter so the two-column
* grid (sign-in + register) inherits the same horizontal breathing
* room the rest of the storefront uses, and so 3rd-party blocks
* (Mageplaza social-login, reCAPTCHA, Persistent remember-me) that
* read `.page-main` paddings keep aligning with the form. The /create
* and /forgotpassword pages still get padding zero because they
* manage their own gutters: /create through the full-width hero +
* inner two-column container (with its own 24px padding), and
* /forgotpassword through `.page-title-wrapper` + single-column
* form, both centred with auto margins.
* -------------------------------------------------------------------------- */
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .columns .column.main {
padding: 0;
width: 100%;
max-width: none;
float: none;
}
/* Single-column wrapper used by /create and /forgotpassword. Both
pages render the form directly inside `.column.main` with no
`.login-container` siblings, so we centre and cap it here.
`.customer-account-login` opts out (overridden by the grid below). */
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .columns .column.main > .form,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .columns .column.main > form {
box-sizing: border-box;
width: 100%;
max-width: 480px;
margin: 48px auto 72px;
padding: 0 24px;
font-family: var(--muc-font-family);
font-size: var(--muc-font-size-base);
line-height: var(--muc-line-height);
color: var(--muc-color-text);
}
@media (max-width: 768px) {
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .columns .column.main > .form,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .columns .column.main > form {
margin: 16px auto 48px;
}
}
/* --------------------------------------------------------------------------
* Floating-label underline inputs (mirror Monogo_UnilayerCustomerAuth
* embed.css). Same affordance the iframe modal uses on firstname /
* email / password fields:
*
* - .field reserves a 16px top pad so the floated label has room.
* - .label sits absolutely positioned over the input as a placeholder
* substitute in the rest state.
* - On focus or when the input carries a value, `:has()` +
* `:placeholder-shown` translates the label up and scales it down.
* - Companion `floating-labels.js` primes inputs with `placeholder=" "`
* so `:placeholder-shown` resolves on Magento templates that ship
* without a placeholder attribute.
* -------------------------------------------------------------------------- */
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .fieldset {
margin: 0 0 16px;
padding: 0;
border: 0;
}
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .fieldset > .legend {
margin: 0 0 16px;
padding: 0;
border: 0;
font-family: var(--muc-font-family);
font-size: var(--muc-font-size-lg);
font-weight: 700;
color: var(--muc-color-text);
}
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .fieldset > .legend + br {
display: none;
}
/* Hide structural fieldset legends on the register page. The auth
iframe modal does the same (its register screen renders the form
as a single flat list without "Personal Information" / "Sign-in
Information" / "Address Information" headings) — keeping parity
with that surface. Magento ships the legends inside