/** * cmz-account — My Account login restyle (ui-dev, M4). Enqueued ONLY for logged-out visitors * in the My Account context (includes/frontend.php), media=screen — nothing here can leak to * any other page. Loads regardless of the Google toggle (the restyle stands on its own). * * Spec (plan.md + competitor survey): a single centered card, Google button ABOVE the * password fields with an "or" divider, ONE form at a time via login.js's presentation-only * toggle. HARD RULES honoured throughout: * - Both WC forms stay in the DOM unchanged; nothing is hidden by CSS ALONE — the * html.cmz-account-jsok class gates every display:none, so with JS off both forms render * stacked and fully usable (the account-first checkout resume depends on these exact * forms). That class is set by an inline script (includes/frontend.php), NOT by * login.js: a deferred script cannot land before the first paint, which is why both cards * used to flash in (founder, Chrome, 2026-08-16). * - CSS + WC hooks only: no Extra theme edits, no template copies. * - Live markup verified 2026-08-10 (curl of /my-account/): #customer_login > .u-column1 * (login form) + .u-column2 (register form, email-only — "link to set a new password"), * WC's own woocommerce.css / -layout / -smallscreen all still enqueued, so the col2-set * float layout is overridden defensively below. * * Dark mode = :root[data-theme="dark"] attribute (absent in light); --cmz-* tokens with * literal fallbacks everywhere (dark-mode.css may not load). Colours/weights answer * !important per the site policy — Extra's customizer chains (1,3,0) and dark-mode's link * catch-all both reach into page content. */ /* =========================================================================== * 1. Tokens — one set on the WC wrapper, swapped wholesale in dark. * ======================================================================== */ .woocommerce { --cmz-lg-surface: #fff; --cmz-lg-text: #14171a; --cmz-lg-muted: #5c6570; --cmz-lg-heading: #14171a; --cmz-lg-border: rgba( 0, 0, 0, 0.12 ); --cmz-lg-input-bg: #fff; --cmz-lg-input-border: rgba( 0, 0, 0, 0.18 ); /* Button fill: the ratified accent pair (mini-cart, 5.05:1 white-on-#1e7d60). */ --cmz-lg-accent: #1e7d60; --cmz-lg-accent-hover: #1a6d54; --cmz-lg-accent-ink: #fff; /* Text links on the card surface. */ --cmz-lg-link: #1e7d60; --cmz-lg-focus-ring: rgba( 35, 147, 113, 0.22 ); --cmz-lg-shadow: 0 10px 30px rgba( 0, 0, 0, 0.07 ); --cmz-lg-error: #b3261e; --cmz-lg-error-bg: #fdecea; --cmz-lg-error-border: rgba( 179, 38, 30, 0.3 ); --cmz-lg-ok: #1e7d60; --cmz-lg-ok-bg: #e9f6f1; --cmz-lg-ok-border: rgba( 30, 125, 96, 0.3 ); /* Password-strength "weak" band — deliberately NOT the error red: WC labels strength 1 and strength 2 with the SAME "bad" class, and only strength 1 is refused (minimum is 2 — includes/passwords.php). Amber says "weak" without claiming the form is broken. #8a5a00 on white measures ~5.9:1. */ --cmz-lg-warn: #8a5a00; --cmz-lg-warn-bg: #fdf4e3; --cmz-lg-warn-border: rgba( 138, 90, 0, 0.3 ); } :root[data-theme="dark"] .woocommerce { --cmz-lg-surface: var( --cmz-surface, #1f1f22 ); --cmz-lg-text: var( --cmz-text, #c9c6c1 ); --cmz-lg-muted: var( --cmz-muted, #96938e ); --cmz-lg-heading: var( --cmz-heading, #e4e0da ); --cmz-lg-border: rgba( 255, 255, 255, 0.13 ); --cmz-lg-input-bg: var( --cmz-inset, #111113 ); --cmz-lg-input-border: rgba( 255, 255, 255, 0.2 ); --cmz-lg-accent: var( --cmz-accent-fill, #1d7c60 ); --cmz-lg-accent-hover: var( --cmz-accent-fill-hover, #26956f ); --cmz-lg-accent-ink: #fff; --cmz-lg-link: var( --cmz-link, #5dc49e ); --cmz-lg-focus-ring: rgba( 93, 196, 158, 0.25 ); --cmz-lg-shadow: 0 10px 30px rgba( 0, 0, 0, 0.45 ); --cmz-lg-error: #ff7a6b; /* light's #b3261e measures ~3:1 on the dark surface */ --cmz-lg-error-bg: rgba( 255, 122, 107, 0.12 ); --cmz-lg-error-border: rgba( 255, 122, 107, 0.35 ); --cmz-lg-ok: var( --cmz-link, #5dc49e ); --cmz-lg-ok-bg: rgba( 93, 196, 158, 0.12 ); --cmz-lg-ok-border: rgba( 93, 196, 158, 0.35 ); --cmz-lg-warn: #f0b95e; /* light's #8a5a00 is unreadable on the dark surface */ --cmz-lg-warn-bg: rgba( 240, 185, 94, 0.12 ); --cmz-lg-warn-border: rgba( 240, 185, 94, 0.35 ); } /* =========================================================================== * 2. Page frame. This page's Extra layout carries an EMPTY sidebar column (verified on the * live markup) that would center the card on the main column, not the page — reclaim the * width. body.woocommerce-account scopes it to WC account pages, and this stylesheet only * loads on the logged-out ones. * ======================================================================== */ body.woocommerce-account .et_pb_extra_column_main { width: 100% !important; } body.woocommerce-account .et_pb_extra_column_sidebar { display: none; } /* * THE SLAB BEHIND THE CARD (founder, 2026-08-17: "make this grayish background black"). * Extra wraps page content in
and paints it as a content sheet * — style.css `.page article { background:#fff; border-radius:3px; … }`. On a normal page * that sheet IS the content surface; on this page the card is the content, so the sheet is * a second, lighter slab between the card and the page ground. Measured on staging, 1440, * logged out, pixel-sampled beside the card vs. outside the wrapper: * * dark — slab rgb(31,31,34) (dark-mode.css repaints the article --cmz-surface) against a * rgb(22,22,24) (--cmz-bg) ground: the visibly lighter grey block he screenshotted. * light — slab #fff against a #fff #page-container ground: already invisible (body is * #ecf0f5, but page-container covers it full-bleed), so light is a no-op here and * was re-measured after the change to confirm it stayed one flat #fff. * * Dropping the sheet in BOTH themes lets the ground show through — one backdrop colour, * whatever the theme's ground token is. `transparent` rather than a restated colour is the * whole point: no hex to drift out of sync with --cmz-bg, and no dark-scoped twin of this * rule to keep in step. * * The box-shadow line is ARMOUR, not a fix, and is redundant TODAY: Extra's Customizer * inline CSS already sets `box-shadow:none` on `.page article` site-wide, so the computed * shadow is none in both themes before and after this change (verified — the first draft of * this comment claimed a stray shadow and was wrong). It stays only so that a transparent * sheet can never regain an outline around nothing if that Customizer value is ever changed. * * NOTHING MOVES: the article's own padding is 0 (measured) — the page's inset comes from * .post-wrap's `padding: 40px 60px` INSIDE it, which is untouched here — so the card keeps * its exact position. Only the article's paint is removed. * * SPECIFICITY IS LOAD-BEARING, and the playbook's exact trap. dark-mode.css's * `:root[data-theme="dark"] .page article` is (0,3,1) !important — `:root` counts as a * pseudo-class and `[data-theme]` as an attribute, so a plain * `body.woocommerce-account article.hentry` (0,2,2) LOSES to it even with !important. The * #main-content id takes this to (1,2,2) and settles it in both themes at once. * * SCOPE: body.woocommerce-account (WC account pages only) AND this stylesheet is enqueued * only for logged-OUT visitors in the account context (includes/frontend.php, * cmz_account_is_login_context) — so it cannot reach the signed-in account pages, courses, * lessons or the blog, which keep Extra's sheet exactly as it is. Belt and braces: the * selector names no post id, so it survives staging↔prod page-id differences. */ body.woocommerce-account #main-content article.hentry { background: transparent !important; box-shadow: none !important; } /* =========================================================================== * 3. The card(s). Each WC column is styled as the SAME centered card; login.js shows one at * a time. JS off: both render, stacked — two cards, everything usable. * ======================================================================== */ .woocommerce #customer_login { display: block; float: none; width: 100%; max-width: 440px; margin: 24px auto 48px; } /* WC's own layout CSS floats the two columns side by side at ≥768px — retired here. */ .woocommerce #customer_login .u-column1, .woocommerce #customer_login .u-column2 { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; padding: 28px 26px !important; border: 1px solid var( --cmz-lg-border ); border-radius: 14px; background: var( --cmz-lg-surface ) !important; box-shadow: var( --cmz-lg-shadow ); } /* Breathing room between the two stacked cards in the no-JS state… */ .woocommerce #customer_login .u-column2 { margin-top: 24px !important; } /* …removed whenever the toggle owns visibility (only one card renders at a time). Keyed on the head-script class, not on login.js's, so a register-first card never starts 24px low. */ html.cmz-account-jsok .woocommerce #customer_login .u-column2 { margin-top: 0 !important; } /* --------------------------------------------------------------------------- * THE TOGGLE — presentation only, gated on a JS-ONLY signal so JS-off keeps both forms. * * THE GATE IS html.cmz-account-jsok, SET IN — not by login.js. Founder defect * 2026-08-16 (Chrome): login.js is deferred, so until it ran nothing matched and BOTH cards * rendered stacked — a flash on every slow load. A class added by an inline head script lands * before the first paint; a deferred one cannot (includes/frontend.php, * cmz_account_login_head_boot). Do not move this gate back onto a class login.js adds. * * Three states, in cascade order: * 1. JS on, nothing decided yet → login card only. The default for everyone. * 2. JS on + buy-intent cookie → register card, from the head script's hint on , * still before the first paint. * 3. login.js has decided → its data-cmz-show on #customer_login wins outright (it also * knows about failed-registration re-renders, which no cookie * can tell you). * JS off → the class never lands, none of this matches, both cards render and both work. * ------------------------------------------------------------------------ */ /* 1. Default under JS: the login card. */ html.cmz-account-jsok .woocommerce #customer_login .u-column2 { display: none; } /* * 2. The head script's buy-intent hint, honoured only until login.js writes its own attribute. * :has( .u-column2 ) is a GUARD, not decoration: if registration is ever switched off WC * renders no second column, and hiding the first one unguarded would leave the page with no * form at all. A browser without :has() drops these two blocks and falls back to state 1 — * the login card, which is the safe answer. Hence separate blocks: an unsupported selector * must not take any other rule down with it. */ html.cmz-account-jsok[data-cmz-show="register"] .woocommerce #customer_login:not( [data-cmz-show] ):has( .u-column2 ) .u-column1 { display: none; } html.cmz-account-jsok[data-cmz-show="register"] .woocommerce #customer_login:not( [data-cmz-show] ):has( .u-column2 ) .u-column2 { display: block; } /* 3. login.js's decision. Both cases spelled out — these have to UNDO the rules above, so "display: block" is written, never merely left unset. */ html.cmz-account-jsok .woocommerce #customer_login[data-cmz-show="login"] .u-column1 { display: block; } html.cmz-account-jsok .woocommerce #customer_login[data-cmz-show="login"] .u-column2 { display: none; } html.cmz-account-jsok .woocommerce #customer_login[data-cmz-show="register"] .u-column1 { display: none; } html.cmz-account-jsok .woocommerce #customer_login[data-cmz-show="register"] .u-column2 { display: block; } /* * THE FORM ITSELF IS NOT A BOX (M7 founder round — "strange looking on the dark theme"). * MEASURED on staging: form.woocommerce-form computes * border: 1px solid rgb(207, 200, 216); padding: 20px * from the theme's global form styling. On the white card that hairline is nearly invisible; * on the dark card rgb(207,200,216) is a near-WHITE frame drawn around the whole form — * which, because the Google mount renders at woocommerce_login_form_start (inside the form), * reads as a white box around the Google button. It is not the GIS button at all. * The same rule also stole 42px of usable width at every breakpoint (2px border + 40px * padding): inputs measured 344 inside a 440 card. The card owns the padding and the border; * the form is a transparent wrapper. * Scoped to #customer_login on purpose — form.lost_reset_password IS its own card on the * lost/reset pages and declares its own border/padding in section 5. */ .woocommerce #customer_login form { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* * Card titles. WC's own column h2s ("Login" / "Register") are HIDDEN, not removed — the * plugin renders warmer headings inside each form (frontend.php, founder wording: "Welcome * back to Code Maze" / "Getting Started") and this keeps the mechanism untouched. The * :not() keeps our own .cmz-account-card-title (also an h2 inside #customer_login) alive. */ .woocommerce #customer_login h2:not( .cmz-account-card-title ) { display: none !important; } .woocommerce #customer_login h2.cmz-account-card-title { margin: 0 0 18px !important; padding: 0 !important; text-align: center; font-size: 22px !important; line-height: 1.25; font-weight: 700 !important; color: var( --cmz-lg-heading ) !important; text-transform: none !important; letter-spacing: normal !important; } /* * The theme's page header above the card ("My account" + its rule) says nothing a visitor * at the login card needs — founder: "My account text shouldn't be there". This stylesheet * loads ONLY logged-out in the account context, so the logged-in account pages keep their * title untouched. */ .woocommerce-account .entry-title { display: none !important; } /* =========================================================================== * 4. "Continue with Google" mount + the "or" divider (markup from includes/frontend.php, * rendered inside BOTH forms; absent entirely when the kill switch is off). * ======================================================================== */ /* * SHOWN ONLY WHERE SCRIPTING IS ON — and from the FIRST PAINT, on the same head-script class as * the card toggle above (it used to wait for a class login.js added, which is one more thing * that popped in late). The button navigates from a click handler, so with JS off the whole * mount — button, terms notice, "or" divider — stays out of the layout and the password form is * the page's whole story. * * Accepted edge: if scripting is on but login.js itself never arrives (network error), the * button paints and does nothing. That is a strictly smaller failure than the flash: the same * broken load also leaves both cards stacked, and the password form beside it is untouched. * The click is not duplicated into the head script to cover it — one owner for that logic. */ .woocommerce .cmz-account-google { display: none; } html.cmz-account-jsok .woocommerce .cmz-account-google { display: block; margin: 0 0 18px; } /* login.js still hides the mount outright if the markup ever arrives without its URL. */ .woocommerce .cmz-account-google[hidden] { display: none !important; } /* * THE BUTTON IS OURS, AND IT IS A REAL BUTTON (2026-08-16). * * It used to be a wrapper around Google's own button — a cross-origin iframe, scaled to * opacity 0 over our painted "face", serving as the hit target. In Firefox that click did * nothing at all: tracking protection partitions the accounts.google.com frame's storage and * hit-tests transparent cross-origin frames differently. There is no iframe here any more, so * every rule below is about a