/* ====================================================================== * Onboarding conversion layer for the logged-out My Account surface. * * Loads ONLY on the login / register / lost-password page (enqueued from * account_login.php, gated to acc_login_is_active(), declared as a dependency * of the `acc-funds` bundle so it always cascades AFTER assets/style.css). * * This file NEVER restyles the base login card — that lives in style.css and * is left untouched. Here we only style the extra conversion chrome added in * account_login.php: * - .acc-login-hero-benefits quantified value pills under the hero * - .acc-login-reassure security/no-risk line next to the submit CTA * - .acc-login-secondary low-friction "browse services" secondary CTA * * Everything is scoped to body.acc-login-page so it can never leak into the * signed-in account UI. Mobile-first, no layout shift, reduced-motion aware, * with visible focus states and token fallbacks (var(--x, #hex)). * ====================================================================== */ /* ---------------------------------------------------------------------- * Two-tab auth control ("Log in" / "Register"). Built by account-login.js, * which re-parents WooCommerce's untouched login & register columns into * accessible tabpanels. This block styles ONLY the wrapper it injects — the * form cards themselves keep their base styling from style.css. * ------------------------------------------------------------------- */ body.acc-login-page .acc-auth{ max-width:480px; margin:0 auto; } /* The emptied WooCommerce .u-columns container after its columns are moved. */ body.acc-login-page .u-columns.acc-auth-consumed{ display:none !important; } /* ---------------------------------------------------------------------- * Anti-FOUC cloak + skeleton (canonical copy). The SAME rules ship inline in * account_login.php's wp_head critical CSS so the skeleton paints on the very * first frame — before this stylesheet arrives — with no flash of WooCommerce's * raw stacked #customer_login. account-login.js re-parents the columns into tabs * and adds `acc-login-ready` in one synchronous tick; the cloak lifts flash-free. * All gated on html.acc-login-js so no-JS (and the server failsafe) never cloak. * ------------------------------------------------------------------- */ .acc-login-skeleton{ display:none; } html.acc-login-js body.acc-login-page:not(.acc-login-ready) #customer_login{ display:none !important; } html.acc-login-js body.acc-login-page:not(.acc-login-ready) .acc-login-skeleton{ display:block; max-width:480px; margin:0 auto; } .acc-skel-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 18px; padding:5px; background:#eef0f5; border:1px solid var(--line,#ececf1); border-radius:16px; } .acc-skel-tabs span{ height:42px; border-radius:12px; } .acc-skel-tabs span:first-child{ background:var(--card,#fff); box-shadow:0 4px 12px rgba(20,22,30,.09); } .acc-skel-card{ background:var(--card,#fff); border:1px solid var(--line,#ececf1); border-radius:22px; padding:26px 24px 22px; box-shadow:0 10px 32px rgba(20,22,30,.07); } .acc-skel-lbl{ height:12px; width:38%; border-radius:6px; margin:0 0 8px; } .acc-skel-field{ height:50px; border-radius:14px; margin:0 0 16px; } .acc-skel-btn{ height:52px; border-radius:14px; margin:22px 0 0; } .acc-skel-tabs span:last-child, .acc-skel-lbl, .acc-skel-field, .acc-skel-btn{ background:linear-gradient(100deg,#eef0f3 30%,#e5e8ed 50%,#eef0f3 70%); background-size:200% 100%; animation:acc-skel-shimmer 1.25s ease-in-out infinite; } @keyframes acc-skel-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } } /* Segmented tablist. */ body.acc-login-page .acc-auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 18px; padding:5px; background:#eef0f5; border:1px solid var(--line,#ececf1); border-radius:16px; } body.acc-login-page .acc-auth-tab{ appearance:none; -webkit-appearance:none; border:0; margin:0; padding:12px 14px; border-radius:12px; background:transparent; color:var(--muted-2,#5b616b); font-size:14.5px; font-weight:800; line-height:1.1; letter-spacing:-.005em; cursor:pointer; transition:background .16s, color .16s, box-shadow .16s, transform .12s; } body.acc-login-page .acc-auth-tab:hover{ color:var(--ink,#16161c); } body.acc-login-page .acc-auth-tab.is-active{ background:var(--card,#fff); color:var(--red,#f80031); box-shadow:0 4px 12px rgba(20,22,30,.09); } body.acc-login-page .acc-auth-tab:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,110,64,.32); } body.acc-login-page .acc-auth-tab.is-active:focus-visible{ box-shadow:0 4px 12px rgba(20,22,30,.09), 0 0 0 3px rgba(255,110,64,.32); } /* Panels. Each wraps one WooCommerce column (heading + untouched form). The * per-column

is redundant once the tab labels the panel — hide it. */ body.acc-login-page .acc-auth-panel[hidden]{ display:none; } body.acc-login-page .acc-auth-panel:focus{ outline:none; } body.acc-login-page .acc-auth-panel .u-columns h2, body.acc-login-page .acc-auth-panel > .u-column1 > h2, body.acc-login-page .acc-auth-panel > .u-column2 > h2, body.acc-login-page .acc-auth-panel > .col-1 > h2, body.acc-login-page .acc-auth-panel > .col-2 > h2{ position:absolute; width:1px;height:1px; margin:-1px;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; } /* Gentle reveal when a panel becomes active. */ body.acc-login-page .acc-auth-panel.is-active{ animation:acc-auth-fade .18s ease; } @keyframes acc-auth-fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } /* ---------------------------------------------------------------------- * Register password strength — subtle, non-blocking. Four bars that fill and * warm from red → coral → amber → green, plus a live-announced label. * ------------------------------------------------------------------- */ body.acc-login-page .acc-pw-strength{ display:flex; align-items:center; gap:10px; margin:9px 2px 0; } body.acc-login-page .acc-pw-bars{ display:flex; gap:5px; flex:1 1 auto; min-width:0; } body.acc-login-page .acc-pw-bars i{ flex:1 1 0; height:5px; border-radius:999px; background:#e4e6ec; transition:background .18s; } body.acc-login-page .acc-pw-strength-label{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--muted-2,#5b616b); min-width:56px; text-align:right; } body.acc-login-page .acc-pw-strength[data-level="1"] .acc-pw-bars i.is-on{ background:var(--red,#f80031); } body.acc-login-page .acc-pw-strength[data-level="2"] .acc-pw-bars i.is-on{ background:var(--orange,#ff6e40); } body.acc-login-page .acc-pw-strength[data-level="3"] .acc-pw-bars i.is-on{ background:#e0a400; } body.acc-login-page .acc-pw-strength[data-level="4"] .acc-pw-bars i.is-on{ background:var(--green-3,#1f7a46); } body.acc-login-page .acc-pw-strength[data-level="1"] .acc-pw-strength-label{ color:var(--red,#f80031); } body.acc-login-page .acc-pw-strength[data-level="2"] .acc-pw-strength-label{ color:#c2531f; } body.acc-login-page .acc-pw-strength[data-level="3"] .acc-pw-strength-label{ color:#9a7100; } body.acc-login-page .acc-pw-strength[data-level="4"] .acc-pw-strength-label{ color:var(--green-3,#1f7a46); } /* ---------------------------------------------------------------------- * Quantified value pills — the concrete WHY, above the fold, centred under * the hero sub. Small, scannable, brand-tinted icons. * ------------------------------------------------------------------- */ body.acc-login-page .acc-login-hero-benefits{ list-style:none; margin:14px 0 2px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; max-width:560px; } body.acc-login-page .acc-login-hero-benefits li{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; background:var(--card,#fff); border:1px solid var(--line,#ececf1); box-shadow:0 3px 10px rgba(20,22,30,.05); font-size:13px; font-weight:700; line-height:1; color:var(--ink,#16161c); } body.acc-login-page .acc-login-hero-benefits li svg{ flex:0 0 auto; color:var(--red,#f80031); } /* ---------------------------------------------------------------------- * Near-submit reassurance — a calm trust line inside the form card, right by * the primary CTA. Neutral for login; green-tinted "no risk" for register. * ------------------------------------------------------------------- */ body.acc-login-page form .acc-login-reassure{ display:flex; align-items:center; gap:9px; margin:14px 0 0; padding:10px 13px; border-radius:12px; background:#f7f8fb; border:1px solid var(--line,#ececf1); font-size:12.5px; font-weight:600; line-height:1.45; color:var(--muted-2,#5b616b); } body.acc-login-page form .acc-login-reassure-ico{ flex:0 0 auto; display:inline-flex; color:var(--green-3,#1f7a46); } body.acc-login-page form .acc-login-reassure-ico svg{ display:block; } body.acc-login-page form .acc-login-reassure--join{ background:#f4faf6; border-color:#d6efdf; } /* ---------------------------------------------------------------------- * Secondary CTA — captures the not-yet-ready visitor with a low-commitment * path to browse and start an order. Ghost pill that warms to brand on hover. * ------------------------------------------------------------------- */ body.acc-login-page .acc-login-secondary{ max-width:760px; margin:22px auto 0; padding:0 4px; text-align:center; } body.acc-login-page .acc-login-secondary-link{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:999px; background:var(--card,#fff); border:1.5px solid var(--line,#ececf1); color:var(--ink,#16161c); font-size:14px; font-weight:700; line-height:1.1; text-decoration:none; box-shadow:0 4px 14px rgba(20,22,30,.05); transition:border-color .15s, box-shadow .15s, transform .14s, color .15s; } body.acc-login-page .acc-login-secondary-link svg{ flex:0 0 auto; color:var(--red,#f80031); transition:transform .15s; } body.acc-login-page .acc-login-secondary-link:hover{ border-color:#ffd3c7; color:var(--red,#f80031); transform:translateY(-1px); box-shadow:0 8px 20px rgba(248,0,49,.12); } body.acc-login-page .acc-login-secondary-link:hover svg{ transform:translateX(3px); } body.acc-login-page .acc-login-secondary-link:focus-visible{ outline:2px solid transparent; outline-offset:2px; box-shadow:0 0 0 3px rgba(255,110,64,.28); } /* ---------------------------------------------------------------------- * Mobile. * ------------------------------------------------------------------- */ @media (max-width:760px){ body.acc-login-page .acc-login-hero-benefits{ gap:7px; } body.acc-login-page .acc-login-hero-benefits li{ font-size:12.5px; padding:7px 11px; } body.acc-login-page .acc-login-secondary{ margin-top:16px; } body.acc-login-page .acc-login-secondary-link{ width:100%; justify-content:center; } body.acc-login-page .acc-auth{ max-width:100%; } body.acc-login-page .acc-auth-tab{ padding:12px 10px; font-size:14px; } html.acc-login-js body.acc-login-page:not(.acc-login-ready) .acc-login-skeleton{ max-width:100%; } } /* ---------------------------------------------------------------------- * Respect reduced-motion. * ------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ body.acc-login-page .acc-login-secondary-link, body.acc-login-page .acc-login-secondary-link svg{ transition:none; } body.acc-login-page .acc-login-secondary-link:hover{ transform:none; } body.acc-login-page .acc-login-secondary-link:hover svg{ transform:none; } body.acc-login-page .acc-auth-tab{ transition:none; } body.acc-login-page .acc-auth-panel.is-active{ animation:none; } body.acc-login-page .acc-pw-bars i{ transition:none; } .acc-skel-tabs span:last-child, .acc-skel-lbl, .acc-skel-field, .acc-skel-btn{ animation:none; } }