*/ /* as the remember-me checkbox, with "Lost your password?" as a */ /* separate sibling
below it. Both the email and password rows also */ /* carry the bare "form-row" class (alongside "woocommerce-form-row"), */ /* so a plain `.form-row` selector would unwrap those too, not just the */ /* checkbox/button row -- confirmed live via a DOM class dump against */ /* bonza-retheme.blz.au. The checkbox/button row is the ONLY one with */ /* JUST "form-row" and no "woocommerce-form-row" alongside it, so */ /* :not(.woocommerce-form-row) is what actually singles it out. */ /* */ /* display:contents "unwraps" that one row so its children (checkbox */ /* label, hidden nonce, submit button) become direct flex items of the */ /* form, sitting alongside the LostPassword paragraph (already a form- */ /* level sibling). The form switches from column to row+wrap so the */ /* checkbox and forgot-password link can sit on one line, with the */ /* submit button on its own line below; the email/password rows get an */ /* explicit full-width flex-basis so they still stack one per line like */ /* they did in column mode. No markup change needed. */ /* */ /* CAUGHT LIVE (claude[bot] PR review, this session): an earlier draft */ /* declared `#customer_login .woocommerce-form-login .form-row` TWICE, */ /* once as `display: contents` and once (further down) as `display: */ /* flex`. The second declaration silently won (same selector, same */ /* specificity, later wins), so the unwrap never actually took effect. */ /* Fixed by keeping exactly one declaration for this selector. */ /* */ /* CAUGHT LIVE (independent code-review audit, this session): the */ /* earlier draft used flex `order` to visually place the checkbox, */ /* forgot-password link and submit button (1, 2, 3). `order` never */ /* changes tab order, which still follows DOM order: checkbox, then */ /* submit button (both originally inside the same
), then the link */ /* (a later sibling). Confirmed live: tabbing from the checkbox lands */ /* on the submit button, skipping the visually-adjacent link, a WCAG */ /* 2.4.3 Focus Order failure on a project with a contractual WCAG 2.2 */ /* AA obligation. Fixed in login-signup-page.js: the "Forgot password?" */ /* paragraph is moved to sit before the submit button in the DOM on */ /* page load, so DOM order matches visual order and `order` is no */ /* longer needed here. Without that script (progressive enhancement), */ /* plain DOM/flex order still produces a valid, just plainer, three- */ /* row layout with no accessibility regression either way. */ /* ------------------------------------------------------------------ */ /* `form.woocommerce-form-login` (type + class), not `.woocommerce-form- * login` alone: the generic `#customer_login form.woocommerce-form` rule * above also carries a type selector, so a class-only override here would * be LESS specific and lose its `flex-direction: column` -- same class of * self-inflicted specificity bug as the card-width fix earlier in this * file. Matched specificity, later-source-order wins as intended. */ #customer_login form.woocommerce-form-login { display: flex; flex-flow: row wrap; align-items: flex-start; } #customer_login .woocommerce-form-login .woocommerce-form-row { flex: 1 0 100%; } #customer_login .woocommerce-form-login .form-row:not(.woocommerce-form-row) { display: contents; } #customer_login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--bonza-font-body); /* Overrides the inherited 700 from the generic "#customer_login form * label" rule above. Figma draws this as regular-weight body text, * same as the equivalent row in the modal (caught by the independent * code-review audit this session). */ font-weight: 400; font-size: 16px; line-height: 20px; color: var(--bonza-login-text); cursor: pointer; } #customer_login .woocommerce-form-login__rememberme input[type='checkbox'] { width: 20px; height: 20px; margin: 0; accent-color: var(--bonza-login-heading); } #customer_login .woocommerce-LostPassword { margin: 0; align-self: center; } #customer_login .woocommerce-LostPassword a { display: inline-flex; align-items: center; min-height: 32px; font-family: var(--bonza-font-body); font-size: 16px; line-height: 20px; color: var(--bonza-login-text); } #customer_login .woocommerce-form-login__submit { flex: 1 0 100%; margin-top: 12px; } /* ------------------------------------------------------------------ */ /* Register form. Woo's native source order (fields, then the */ /* woocommerce_register_form hook output, then submit) already matches */ /* Figma's order closely enough. No reflow needed here. */ /* */ /* CAUGHT LIVE (independent code-review audit, this session, verified */ /* against the real DOM): three corrections to an earlier draft. */ /* 1) There is no newsletter checkbox on this register form at all. */ /* Checked live: zero `input[type=checkbox]` inside */ /* .woocommerce-form-register. An earlier draft assumed the modal's */ /* Klaviyo newsletter checkbox (fired via the same */ /* woocommerce_register_form hook on the modal) would also fire */ /* here, and styled `.woocommerce-form__label-for-checkbox` / */ /* `.woocommerce-form__input-checkbox` for it. Whatever wires that */ /* checkbox to the modal does not fire on this native page form. */ /* Figma draws a checkbox here that this build cannot render */ /* without adding the missing integration, which is outside a */ /* CSS-only ticket's scope. Genuine gap, moved into the file header */ /* gap list below; the two dead rules for it are removed. */ /* 2) WooCommerce actually wraps the registration privacy text in a */ /* DIV (`
...`), not */ /* a bare `
`. The `p.woocommerce-privacy-policy-text` selector */
/* never matched anything live. Fixed to target the div. */
/* 3) WooCommerce 10.9+ injects a `
added 18px under the widget: an empty band above the
* privacy text. 12px + 12px gap = 24px; the
is hidden as on login. */
#customer_login .woocommerce-form-register .bonza-register-newsletter {
margin-bottom: 12px;
}
#customer_login .woocommerce-form-login .cf-turnstile-br,
#customer_login .woocommerce-form-register .cf-turnstile-br {
display: none;
}
/* The Turnstile iframe is a fixed 300px, but below a 444px viewport the card's
* form is narrower than that (192px at 320, 240px at 375, 287px at 428), so the
* widget ran past the card edge on phones. Scale it down in steps so it fits the
* narrowest width of each band. transform, not zoom: WebKit's zoom shrinks the
* box but not the iframe inside it, which cropped the widget. The negative
* margins give back the layout space the scale frees (300px wide, 65px tall).
* Same specificity as the login rule above, and later, so its flex basis yields. */
@media (max-width: 443.98px) {
#customer_login .woocommerce-form .cf-turnstile {
--bonza-turnstile-scale: 0.87;
flex: 0 0 auto;
width: 300px;
max-width: none;
transform: scale(var(--bonza-turnstile-scale));
transform-origin: 0 0;
margin-right: calc((var(--bonza-turnstile-scale) - 1) * 300px);
margin-bottom: calc((var(--bonza-turnstile-scale) - 1) * 65px);
}
}
@media (max-width: 399.98px) {
#customer_login .woocommerce-form .cf-turnstile {
--bonza-turnstile-scale: 0.75;
}
}
@media (max-width: 359.98px) {
#customer_login .woocommerce-form .cf-turnstile {
--bonza-turnstile-scale: 0.64;
}
}
/* Page title: the Figma My Account frames (desktop 36250:90613, tablet 36250:90619,
* mobile 36250:90625) draw no page title, and www.bonza.dog hides its h1 too. The
* h1 stays in the document for headings navigation and screen readers, taken out of
* the layout so the cards sit where Figma puts them. Logged-out account page only. */
body.woocommerce-account:not(.logged-in) .hero-section {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Gap from the header to the top of the cards, per Figma: 84px desktop, 20px tablet,
* 26px mobile. Desktop is the container's 60px plus the 24px column padding; tablet
* and mobile drop the container padding and set the column padding to the design gap. */
@media (max-width: 1199.98px) {
body.woocommerce-account:not(.logged-in) .site-main > .ct-container-full {
padding-top: 0;
}
body.woocommerce-account:not(.logged-in) #customer_login.u-columns {
padding-top: 20px;
}
}
@media (max-width: 689.98px) {
body.woocommerce-account:not(.logged-in) #customer_login.u-columns {
padding-top: 26px;
}
}
/* Password reveal (eye) icon. Figma draws it 20x20, 12px from the field's right
* edge, centred on the 48px field. Blocksy's default is 14x14 at top:13px, which
* sits 4px above centre. A literal top (not 50%) because the register field's
* password-strength meter lands inside the same wrapper once text is typed and
* would shift a percentage. Same mask-icon colour fix as the modal. */
#customer_login .password-input input {
padding-inline-end: 44px;
}
#customer_login .password-input .show-password-input {
width: 20px;
height: 20px;
top: 14px;
background-color: #6e5d84; /* 5.9:1 on the #ffffff input, over the 3:1 UI-component floor */
}
/* Clearfix pseudo-elements on the form become empty flex items and add a
* stray gap before the first item on each line. */
#customer_login form.woocommerce-form-login::before,
#customer_login form.woocommerce-form-login::after {
display: none;
}
/* The unwrapped row keeps its clearfix pseudo-elements (display: table),
* which become empty flex items and push Remember me 12px in from the left. */
#customer_login .woocommerce-form-login .form-row::before,
#customer_login .woocommerce-form-login .form-row::after {
display: none;
}