/* * Sign in — the delivered design, applied to the theme's login override. * * Source: design/sign-in/sign-in.css, against docs/sign-in-redesign-brief.md. * Changed on install, for the same reasons as the My Account design: * * 1. Scoped to `body.woocommerce-account:not(.logged-in)`. The design styles * `.woocommerce` as its shell, and that class is on the cart, checkout, shop * and account screens too. `:not(.logged-in)` also keeps it off the signed-in * account pages, whose own stylesheet lays `.woocommerce` out as a two-column * grid — without it the two would fight and load order would decide the winner. * 2. `:root` became the same scope, so the design's tokens stay on this screen. * 3. `body`, `a` and `*` rules dropped; the theme already sets those. * 4. `--serif` / `--sans` point at the theme's `--font-display` / `--font-body`. * The design named the right faces this time — Cormorant Garamond and Outfit — * but naming them twice means two places to change them later. */ /* Xyvira Luxe — sign in. ONE STEP. The customer types a number and taps once; MSG91's widget then opens its own modal and owns the code entry, resend timer and change-number link. We are called with exposeMethods:false, so that screen cannot be reached from this CSS and is deliberately not styled here. Two kinds of rule: .x-* ours. Free to restructure. .woocommerce-* WooCommerce's. Class names used exactly; field names untouched. No JavaScript beyond the OTP provider's own. Every state below is a class or an attribute the server or the OTP script already sets. TYPEFACES: Cormorant Garamond (display) and Outfit (body) — what the site self-hosts. Do not substitute Instrument Serif or Jost; an earlier brief named those in error and they fall back to Georgia and Helvetica. ------------------------------------------------------------------------------- */ body.woocommerce-account:not(.logged-in){ --green:#123023; --green-mid:#1C4632; --green-dark:#0E2A1E; --cream:#F7F4EE; --cream-2:#EFE9DD; --cream-ink:#F4EDDF; --accent:#B98F42; --accent-hi:#DCBB74; --accent-soft:#E2C68A; --accent-ink:#7E5320; --accent-wash:#FDF3EA; --err:#A8563C; --line:rgba(18,48,35,.1); --serif:var(--font-display); --sans:var(--font-body); --pad:clamp(18px,3vw,28px); --gutter:clamp(12px,4vw,40px); } /* ---------- shell ---------- One column: this screen has no account navigation, so there is no sidebar to balance against. The card is capped at a form's natural measure and centred. */ body.woocommerce-account:not(.logged-in) .woocommerce{max-width:34rem;margin-inline:auto;padding:clamp(18px,3vw,32px) var(--gutter); display:flex;flex-direction:column;gap:12px} /* ---------- WOO: notices ---------- Printed on every load, empty until a login fails, so :empty must remove it from the flex flow — otherwise it contributes a gap on the normal case. */ body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:empty{display:none} body.woocommerce-account:not(.logged-in) .woocommerce-error{margin:0;list-style:none;padding:15px 17px;border-radius:14px; background:rgba(168,86,60,.09);border:1px solid rgba(168,86,60,.34);color:#8A4630; font-size:14.5px;line-height:1.55} body.woocommerce-account:not(.logged-in) .woocommerce-error li + li{margin-top:6px} body.woocommerce-account:not(.logged-in) .woocommerce-error a{color:#8A4630;border-bottom:1px solid rgba(138,70,48,.45)} body.woocommerce-account:not(.logged-in) .x-login{display:flex;flex-direction:column;gap:12px} /* ---------- OURS: the phone card ---------- Self-contained by design. Nothing of ours threads through WooCommerce's form, so this block could be printed at woocommerce_before_customer_login_form unchanged if the screen is ever handed back to the plugin. */ body.woocommerce-account:not(.logged-in) .x-login__card{background:#fff;border:1px solid var(--line);border-radius:20px; padding:var(--pad);display:flex;flex-direction:column;gap:14px} body.woocommerce-account:not(.logged-in) .x-login__eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent-ink)} body.woocommerce-account:not(.logged-in) .x-login__title{font-family:var(--serif);font-weight:500;font-size:clamp(32px,8vw,44px); line-height:1;margin:-6px 0 0;letter-spacing:-.01em} body.woocommerce-account:not(.logged-in) .x-login__lead{margin:0;font-size:15.5px;line-height:1.6;color:rgba(18,48,35,.78); font-weight:300;max-width:42ch} body.woocommerce-account:not(.logged-in) .x-login__field{display:flex;flex-direction:column;gap:7px} body.woocommerce-account:not(.logged-in) .x-login__field label{font-size:12px;letter-spacing:.04em;color:rgba(18,48,35,.78)} /* The +91 is content, not a disabled affordance, so it sits at full ink. */ body.woocommerce-account:not(.logged-in) .x-login__tel{display:flex;align-items:center;background:#FCFBF8; border:1px solid rgba(18,48,35,.2);border-radius:12px;padding-left:16px;min-height:56px} body.woocommerce-account:not(.logged-in) .x-login__tel:focus-within{border-color:var(--green);background:#fff; box-shadow:0 0 0 3px rgba(18,48,35,.07)} body.woocommerce-account:not(.logged-in) .x-login__cc{flex:0 0 auto;font-size:16px;color:rgba(18,48,35,.88)} /* ⚠ 16px FLOOR — Safari zooms into any input below 16px on focus and does not zoom back out, stranding the customer on a magnified, sideways-scrolling form. This is the one type size on the page that is not a design choice. */ body.woocommerce-account:not(.logged-in) #xl-login-phone{flex:1;min-width:0;border:0;background:transparent;outline:none; padding:16px 16px 16px 10px;font-family:inherit;font-size:16px;letter-spacing:.02em; font-variant-numeric:tabular-nums;color:var(--green)} body.woocommerce-account:not(.logged-in) #xl-login-phone::placeholder{color:rgba(18,48,35,.45)} body.woocommerce-account:not(.logged-in) .x-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px; padding:14px 24px;border-radius:999px;border:0;font-family:inherit;font-size:13.5px; letter-spacing:.06em;text-transform:uppercase;cursor:pointer; transition:background .2s ease,filter .2s ease} /* Gold takes dark ink — a white label on this fill drops below 4.5:1. */ body.woocommerce-account:not(.logged-in) .x-btn--accent{background:linear-gradient(135deg,var(--accent-hi),var(--accent)); color:var(--green)} body.woocommerce-account:not(.logged-in) .x-btn--accent:hover{filter:brightness(1.08)} body.woocommerce-account:not(.logged-in) .x-login__submit{width:100%;min-height:56px;font-size:14px} /* Disabled while the SMS is in flight. A flat fill rather than opacity, so the label keeps its contrast instead of fading to grey on cream. */ body.woocommerce-account:not(.logged-in) .x-login__submit:disabled{background:rgba(18,48,35,.16);color:rgba(18,48,35,.62); cursor:not-allowed;filter:none} /* ---------- the status line ---------- One

. JS writes the text and adds .is-error or nothing, so there are exactly two designed appearances plus empty. Empty is the default and must not reserve space. */ body.woocommerce-account:not(.logged-in) .x-login__status{margin:-6px 0 0;font-size:13.5px;line-height:1.5;font-weight:300; display:flex;align-items:flex-start;gap:8px} body.woocommerce-account:not(.logged-in) .x-login__status:empty{display:none} /* No class = in progress ("Sending code…"). Quiet, and clearly not a failure. */ body.woocommerce-account:not(.logged-in) .x-login__status{color:rgba(18,48,35,.78)} body.woocommerce-account:not(.logged-in) .x-login__status::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:6px; border-radius:999px;background:var(--accent)} /* .is-error covers validation, a missing script, a cancelled modal and an unknown number — four different causes, one appearance, because the customer's next move is the same in all of them: fix the number or use a password. */ body.woocommerce-account:not(.logged-in) .x-login__status.is-error{color:#8A4630} body.woocommerce-account:not(.logged-in) .x-login__status.is-error::before{background:var(--err)} /* Revealed by the

needs no script, so it survives the no-JS case that makes the phone button useless. */ body.woocommerce-account:not(.logged-in) .x-login__details{background:#fff;border:1px solid var(--line);border-radius:20px; overflow:hidden} body.woocommerce-account:not(.logged-in) .x-login__details > summary{list-style:none;cursor:pointer;padding:17px var(--pad); min-height:56px;display:flex;align-items:center;gap:10px;font-size:14px; color:rgba(18,48,35,.82);background:#fff;border-bottom:1px solid transparent; transition:background .2s ease,color .2s ease} body.woocommerce-account:not(.logged-in) .x-login__details > summary::-webkit-details-marker{display:none} body.woocommerce-account:not(.logged-in) .x-login__details > summary::after{content:"+";margin-left:auto;font-size:19px; line-height:1;opacity:.5} body.woocommerce-account:not(.logged-in) .x-login__details[open] > summary{border-bottom-color:var(--line)} body.woocommerce-account:not(.logged-in) .x-login__details[open] > summary::after{content:"\2013"} body.woocommerce-account:not(.logged-in) .x-login__details > summary:hover{background:var(--cream-2)} /* ---------- WOO's form ---------- Field names, nonce and name="login" are fixed. Classes are Woo's too, matched exactly. form-row-wide is a float class in Woo's stylesheet; the grid below neutralises it without !important because nothing here is floated left and right as a pair — every row is full width on this form. */ body.woocommerce-account:not(.logged-in) .x-login__form{padding:var(--pad);display:grid;gap:14px} body.woocommerce-account:not(.logged-in) .x-login__form .form-row{margin:0;padding:0;float:none;width:auto;display:flex; flex-direction:column;gap:7px} body.woocommerce-account:not(.logged-in) .x-login__form label{font-size:12px;letter-spacing:.04em;color:rgba(18,48,35,.78)} body.woocommerce-account:not(.logged-in) .x-login__form .required{color:var(--err);text-decoration:none} body.woocommerce-account:not(.logged-in) .x-login__form .input-text{width:100%;min-height:54px;background:#FCFBF8; border:1px solid rgba(18,48,35,.2);border-radius:12px;padding:15px 17px; font-family:inherit;font-size:16px;color:var(--green);outline:none} body.woocommerce-account:not(.logged-in) .x-login__form .input-text:focus{border-color:var(--green);background:#fff; box-shadow:0 0 0 3px rgba(18,48,35,.07)} /* WooCommerce's own eye toggle, added by its script. Styled, not replaced — and it is the one thing here that stops working without JS, which is why the field is perfectly usable without it. */ body.woocommerce-account:not(.logged-in) .password-input{position:relative;display:flex;flex-direction:column} body.woocommerce-account:not(.logged-in) .password-input .input-text{padding-right:52px} body.woocommerce-account:not(.logged-in) .show-password-input{position:absolute;top:50%;right:17px;transform:translateY(-50%); width:22px;height:22px;cursor:pointer;border:0;background:none;padding:0} body.woocommerce-account:not(.logged-in) .show-password-input::after{content:"";position:absolute;inset:0; background:currentColor;color:rgba(18,48,35,.55); -webkit-mask:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")} body.woocommerce-account:not(.logged-in) .show-password-input.display-password::after{color:var(--green)} /* Remember me and Log in share a row. The checkbox is a 44px target in its own right, so the label is padded rather than the input resized. */ body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme{flex-direction:row !important;align-items:center; gap:10px;min-height:44px;font-size:14px;color:rgba(18,48,35,.82);cursor:pointer} body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input{width:20px;height:20px;accent-color:#123023; margin:0;cursor:pointer} body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit{width:100%;min-height:54px;padding:15px 24px; border-radius:999px;border:0;background:var(--green);color:var(--cream-ink); font-family:inherit;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase; cursor:pointer;transition:background .2s ease} body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit:hover{background:var(--green-mid)} /* ---------- Lost your password? ---------- KEPT, but reworded and qualified. It is the only recovery route for staff and for customers who deliberately set a password, so removing it would leave them with nothing. But for an OTP-created account it mails @phone.invalid, which does not exist — so it is named as an EMAIL reset rather than a general one, and the note beneath sends the majority back to the phone route. The wording is a gettext change; the class, the URL and the markup are WooCommerce's, unchanged. */ body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword{margin:0;font-size:13.5px} body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a{color:rgba(18,48,35,.78); border-bottom:1px solid rgba(18,48,35,.28);padding-bottom:1px} body.woocommerce-account:not(.logged-in) .x-login__lostnote{margin:-8px 0 0;font-size:12.5px;line-height:1.55; color:rgba(18,48,35,.7);font-weight:300}