/* ===================================================================== * WonderLab Account Suite — login / register / lost-password forms. * * Built on the same design tokens as the CartFlow checkout so the brand * reads as one continuous experience from /my-account/ to /cart/ to /checkout/. * * Design tokens * terra #851625 accent / primary * terra-dk #5E0F1A hover, active * terra-mid #E8A9B8 hover stroke * terra-lt #F7E8EC * terra-pale #FDF4F6 panel wash * ivory #FFFBF1 page background * ink #2E2E2E primary copy * ink-soft #8C7678 secondary copy / placeholders * rule-dark rgba(133,22,37,0.18) input border * * Font: Geologica (loaded by Divi parent / cartflow), system fallback. * Inputs: 44px, 8px radius, 3px terra focus ring. * ===================================================================== */ :root { --was-terra: #851625; --was-terra-dk: #5e0f1a; --was-terra-mid: #e8a9b8; --was-terra-lt: #f7e8ec; --was-terra-pale: #fdf4f6; --was-ivory: #fffbf1; --was-ivory-dark: #f7f0e6; --was-ink: #2e2e2e; --was-ink-mid: #5a4a4c; --was-ink-soft: #8c7678; --was-rule: rgba(133, 22, 37, 0.10); --was-rule-dark: rgba(133, 22, 37, 0.18); --was-radius-sm: 4px; --was-radius: 8px; --was-radius-lg: 14px; --was-red: #b83232; --was-green: #2e7d32; } /* --------------------------------------------------------------------- * Shell — applies on any non-logged-in My Account page + the dedicated * lost-password page. The plugin adds `wl-account-body` to on * those pages so we can take Divi's section chrome out of the equation. * --------------------------------------------------------------------- */ body.wl-account-body, body.wl-account-body .woocommerce, body.wl-account-body .woocommerce-account { background: var(--was-ivory) !important; color: var(--was-ink); font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.wl-account-body #page-container { background: var(--was-ivory) !important; } /* Center the WC content + take Divi's column system out of the equation */ body.wl-account-body #main-content { display: flex !important; justify-content: center !important; align-items: flex-start !important; min-height: 60vh !important; padding: 28px 24px 48px !important; background: var(--was-ivory) !important; } /* Layout overrides scoped to the Divi section / row / column that * actually contains our WC shortcode. The JS decorator (see * was_print_divi_host_decorator in styles-frontend.php) walks the * ancestor chain and tags those wrappers `.was-acc-ancestor`, so the * rules below NEVER apply to sibling Divi modules on the same page. */ body.wl-account-body .was-acc-ancestor { width: 100% !important; max-width: 100% !important; float: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Override Divi's `.et_pb_text_2.et_pb_text { padding: 40px !important }` * — but ONLY on the specific Divi text module hosting our card (tagged * `.was-acc-host`). Other Divi text modules on the same page keep their * native padding. */ body.wl-account-body .was-acc-host { padding: 20px !important; max-width: 100% !important; width: 100% !important; } body.wl-account-body .was-acc-host .et_pb_text_inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } body.wl-account-body #main-content h1, body.wl-account-body #main-content .page-title { display: none !important; } body.wl-account-body .woocommerce { display: block !important; width: 480px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; float: none !important; box-sizing: border-box !important; padding: 0 !important; } body.wl-account-body #main-footer { width: 100% !important; display: block !important; clear: both !important; float: none !important; } /* --------------------------------------------------------------------- * Card shell * --------------------------------------------------------------------- */ .wl-acc-card { background: #fff; border: 1px solid var(--was-rule); border-radius: var(--was-radius-lg); padding: 36px 36px 32px; box-shadow: 0 1px 0 var(--was-rule), 0 24px 48px -32px rgba(94, 15, 26, 0.18); /* Pin to the parent's width so sign-in / register / lost-password all * render at identical 480px regardless of how much content they carry. */ width: 100%; box-sizing: border-box; /* Cap to parent so a flex blowout in a child (e.g. the Remember-me * row) can't push the card past the viewport. Note: NOT using * `overflow: hidden` here so the intl-tel-input country dropdown and * the flatpickr calendar can still overflow the card visually. */ max-width: 100%; min-width: 0; } .wl-acc-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--was-terra); margin-bottom: 10px; } .wl-acc-title { color: var(--was-ink); font-size: 1.65rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; margin: 0 0 4px 0; } /* When there's no subtitle row underneath, the title needs its own bottom-margin so the form below doesn't crowd it. */ .wl-acc-title--alone { margin-bottom: 26px; } .wl-acc-title em { color: var(--was-terra); font-style: italic; font-weight: 400; } .wl-acc-subtitle { font-size: 0.92rem; color: var(--was-ink-soft); margin: 0 0 28px 0; line-height: 1.55; } /* --------------------------------------------------------------------- * Form rows / inputs / labels — mirror cartflow checkout exactly * --------------------------------------------------------------------- */ .wl-acc-card .form-row, .wl-acc-card p.form-row, .wl-acc-card .woocommerce-form-row { width: 100% !important; margin: 0 0 1.1rem !important; padding: 0 !important; float: none !important; clear: both !important; box-sizing: border-box !important; } .wl-acc-card label { display: block !important; font-size: 0.82rem !important; font-weight: 600 !important; color: var(--was-ink) !important; margin-bottom: 6px !important; letter-spacing: 0 !important; line-height: 1.4 !important; text-transform: none !important; } .wl-acc-card label .required { color: var(--was-red) !important; margin-left: 3px !important; font-weight: 700; text-decoration: none; } .wl-acc-card input.input-text, .wl-acc-card input[type="text"], .wl-acc-card input[type="email"], .wl-acc-card input[type="password"], .wl-acc-card input[type="tel"], .wl-acc-card input[type="date"], .wl-acc-card select { width: 100% !important; height: 44px !important; padding: 0 14px !important; background: #fff !important; border: 1px solid var(--was-rule-dark) !important; border-radius: var(--was-radius) !important; color: var(--was-ink) !important; font-family: inherit !important; font-size: 0.95rem !important; line-height: 1.4 !important; transition: border-color 0.2s, box-shadow 0.2s !important; box-sizing: border-box !important; -webkit-appearance: none; appearance: none; min-height: unset !important; } .wl-acc-card select { padding-right: 36px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23851625' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 10px 7px !important; cursor: pointer !important; } .wl-acc-card input:hover, .wl-acc-card select:hover { border-color: var(--was-terra-mid) !important; } .wl-acc-card input:focus, .wl-acc-card select:focus { border-color: var(--was-terra) !important; box-shadow: 0 0 0 3px rgba(133, 22, 37, 0.12) !important; outline: none !important; } .wl-acc-card .woocommerce-invalid input.input-text, .wl-acc-card .woocommerce-invalid select { border-color: var(--was-red) !important; } /* --------------------------------------------------------------------- * Two-column row helper (Gender + DOB on register) * --------------------------------------------------------------------- */ .wl-acc-card .custom-reg-row { display: flex !important; gap: 16px; margin: 0 0 1.1rem !important; } .wl-acc-card .custom-reg-row > * { flex: 1 1 0; margin: 0 !important; min-width: 0; } @media (max-width: 480px) { .wl-acc-card .custom-reg-row { flex-direction: column; gap: 0; } .wl-acc-card .custom-reg-row > * { margin-bottom: 1.1rem !important; } } /* --------------------------------------------------------------------- * Checkboxes (Remember me / marketing opt-in) * --------------------------------------------------------------------- */ .wl-acc-card .woocommerce-form__label-for-checkbox, .wl-acc-card label.woocommerce-form-login__rememberme { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 0.9rem !important; font-weight: 500 !important; color: var(--was-ink) !important; cursor: pointer !important; text-transform: none !important; letter-spacing: 0 !important; } .wl-acc-card .woocommerce-form__input-checkbox, .wl-acc-card input[type="checkbox"] { width: 16px !important; height: 16px !important; min-height: unset !important; accent-color: var(--was-terra) !important; cursor: pointer !important; flex-shrink: 0 !important; margin: 0 !important; } /* --------------------------------------------------------------------- * Primary submit button — same spec as cartflow's wl-btn-next * --------------------------------------------------------------------- */ .wl-acc-card button.button, .wl-acc-card .button[type="submit"], .wl-acc-card .wl-acc-submit { width: 100% !important; height: 48px !important; background: var(--was-terra) !important; color: #fff !important; border: none !important; border-radius: var(--was-radius) !important; font-family: inherit !important; font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: none !important; cursor: pointer !important; box-shadow: none !important; text-shadow: none !important; transition: background 0.18s ease, transform 0.18s ease !important; padding: 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; line-height: 1 !important; } .wl-acc-card button.button:hover, .wl-acc-card .button[type="submit"]:hover, .wl-acc-card .wl-acc-submit:hover { background: var(--was-terra-dk) !important; } .wl-acc-card button.button:active, .wl-acc-card .button[type="submit"]:active, .wl-acc-card .wl-acc-submit:active { transform: translateY(1px); } /* --------------------------------------------------------------------- * Remember-me + Forgot-password on one row (login card) * --------------------------------------------------------------------- */ .wl-acc-card .wl-acc-row-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 1.1rem; flex-wrap: wrap; /* Prevent the flex container from demanding intrinsic content * width — without min-width: 0 a long Remember-me label or a long * "Forgot password?" link can stretch the parent .wl-acc-card past * the viewport on a narrow phone, which makes the card render at a * subtly wider width than the lost-password / register cards. */ min-width: 0; max-width: 100%; } .wl-acc-card .wl-acc-row-split > * { min-width: 0; max-width: 100%; } .wl-acc-card .wl-acc-row-split label.woocommerce-form-login__rememberme { margin: 0 !important; } .wl-acc-card .wl-acc-inline-link { color: var(--was-terra) !important; font-size: 0.85rem !important; text-decoration: none !important; font-weight: 500; white-space: nowrap; } .wl-acc-card .wl-acc-inline-link:hover { text-decoration: underline !important; } /* --------------------------------------------------------------------- * Helpers (Lost-your-password link, privacy text, errors) * --------------------------------------------------------------------- */ .wl-acc-card .lost_password, .wl-acc-card .woocommerce-LostPassword { margin: 6px 0 0; text-align: right; } .wl-acc-card .lost_password a, .wl-acc-card .woocommerce-LostPassword a { color: var(--was-terra) !important; font-size: 0.85rem !important; text-decoration: none !important; font-weight: 500; } .wl-acc-card .lost_password a:hover, .wl-acc-card .woocommerce-LostPassword a:hover { text-decoration: underline !important; } .wl-acc-card .woocommerce-privacy-policy-text { font-size: 0.78rem !important; color: var(--was-ink-soft) !important; margin: 10px 0 18px !important; line-height: 1.55 !important; } .wl-acc-card .woocommerce-privacy-policy-text a { color: var(--was-terra) !important; text-decoration: none !important; } .wl-acc-card .woocommerce-privacy-policy-text a:hover { text-decoration: underline !important; } /* Global notice — non-field-specific errors like "Invalid credentials". * * WC renders these notices via the `woocommerce_before_customer_login_form` * hook, which fires OUTSIDE our `.wl-acc-card` shell on the login screen. * So we target both placements (inside the card, and anywhere on a * wl-account-body page) and constrain the width to the card's max so the * notice doesn't span the whole page above it. */ body.wl-account-body .woocommerce-notices-wrapper, body.wl-account-body ul.woocommerce-error, body.wl-account-body .woocommerce-error, .wl-acc-card .woocommerce-error, .wl-acc-card .woocommerce-notices-wrapper > ul.woocommerce-error, .wl-acc-card .was-error-box { background: #fdf0f0 !important; border: 1px solid rgba(184, 50, 50, 0.18) !important; border-left: 3px solid var(--was-red) !important; color: var(--was-ink) !important; border-radius: var(--was-radius-sm) !important; padding: 12px 16px !important; margin: 0 auto 16px !important; list-style: none !important; font-size: 0.88rem !important; line-height: 1.5 !important; max-width: 480px !important; width: 100% !important; box-sizing: border-box !important; font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } body.wl-account-body .woocommerce-error li, body.wl-account-body ul.woocommerce-error li, .wl-acc-card .woocommerce-error li, .wl-acc-card .was-error-box li { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; list-style: none !important; color: var(--was-ink) !important; font-size: 0.88rem !important; line-height: 1.5 !important; } /* WC sticks a "Showing notice" prefix icon on some themes; hide it. */ body.wl-account-body .woocommerce-error::before, .wl-acc-card .woocommerce-error::before { display: none !important; } /* Wrapper that WC sometimes outputs to hold a

Login / Register