/* ============================================================ Freaura — MY ACCOUNT (logged-out) WooCommerce restyle Wireframe: page header → two ivory panels (Sign In / Create Account) side by side, with underline inputs, uppercase labels, filled + ghost buttons. Login/registration flow is unchanged; only visual styling. ============================================================ */ .woocommerce-account .site-content { background: var(--cream); } /* hide the default "My account" entry title (we render our own page header) */ .woocommerce-account .entry-title, .woocommerce-account .ast-archive-description { display: none; } /* safety net: a panel overflowing its grid track (see min-width:0 fix below) should never force page-level horizontal scroll on phones. */ body.woocommerce-account { overflow-x: hidden; } /* Break out of Astra's 1240px container so the header divider spans full width and the panels reach the wireframe's 1100px. */ .woocommerce-account #content .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; } .woocommerce-account #primary, .woocommerce-account #main.site-main, .woocommerce-account .content-area.primary { padding-top: 0 !important; margin-top: 0 !important; } /* ---- page header (shared .frx-page-header look) ---- #1 — the divider must span FULL width. The header sits inside .woocommerce, so we keep .woocommerce full-width (header divider edge-to-edge) and constrain only the .u-columns panels to the wireframe's 1100px. */ .woocommerce-account .frx-account-header { margin: 0 0 5rem; padding: 56px 50px 72px; width: 100%; } /* ---- two-panel layout (wireframe .account) ---- */ .woocommerce-account .woocommerce { max-width: 100%; margin: 0 auto; padding: 0 0 100px; } /* WooCommerce wraps the two forms in .u-columns.col2-set. Use flexible 1fr tracks (fixed px tracks + gap can overflow by a sub-pixel and wrap to a 2nd row, stacking the panels). !important to beat WooCommerce/Astra column rules. */ .woocommerce-account .u-columns.col2-set, .woocommerce-account .woocommerce > .u-columns { /* minmax(0,1fr) forces the two tracks to be EXACTLY equal (plain 1fr lets a wide form stretch its track; grid-auto-flow:column collapsed one track). Two explicit equal tracks in normal row flow = two equal panels. */ display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto; gap: 80px !important; /* panels constrained to 1100px + centered (moved off .woocommerce so the header divider above can be full-width). */ max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 50px; float: none; box-sizing: border-box; } .woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2, .woocommerce-account .u-column1, .woocommerce-account .u-column2 { /* min-width:0 overrides the grid item's default min-width:auto — without it, a panel whose content has a wider min-content (e.g. the stacked 1-column mobile layout) refuses to shrink to the 1fr track and overflows past the right edge instead, which is what made the panel look off-center (flush-left, clipped on the right) on phones. */ width: 100% !important; max-width: none; min-width: 0; float: none; margin: 0; padding: 0; box-sizing: border-box; } /* explicitly place each panel in its column so they can NEVER wrap to a second grid row (sub-pixel rounding was pushing the 2nd panel down). */ .woocommerce-account .u-column1 { grid-column: 1; grid-row: 1; } .woocommerce-account .u-column2 { grid-column: 2; grid-row: 1; } /* ---- panel (wireframe .account-panel: ivory box) ---- Selector matches the `.col2-set .col-1/.col-2` specificity above so the 50px panel padding wins over the width-reset rule. */ .woocommerce-account .col2-set .u-column1, .woocommerce-account .col2-set .u-column2, .woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2 { background: var(--ivory); padding: 50px; border: 0.5px solid var(--line); box-sizing: border-box; /* padding/border must stay inside the 100% grid track, not add to it */ } /* panel heading (wireframe .account-panel h2: Playfair italic 36px) */ .woocommerce-account .u-columns h2 { font-family: var(--font-display); font-style: italic; font-size: 36px; font-weight: 400; margin: 0 0 14px; color: var(--ink); text-transform: none; line-height: 1.1; } /* intro paragraph (wireframe .account-panel p: serif 16px) */ /* #2 + #4 — intro paragraph: small bottom margin so the gap to the first field label is tight (the form's own 24px gap follows). */ .woocommerce-account .frx-account-intro { font-family: var(--font-serif); font-size: 17px; font-weight: 400; color: var(--ink-soft); line-height: 1.7; margin: 0; } /* ---- form (wireframe .contact-form: flex column, gap 24px) ---- Astra adds `body .woocommerce form.login/register { border:1px + padding }` which double-borders the panel and misaligns the fields. Override it (match Astra's `body .woocommerce form.X` specificity) so the form sits flush inside the ivory panel with no border/padding of its own. */ .woocommerce-account form.woocommerce-form-login, .woocommerce-account form.woocommerce-form-register, body .woocommerce-account .woocommerce form.login, body .woocommerce-account .woocommerce form.register { display: flex; flex-direction: column; gap: 24px; border: none !important; padding: 0 !important; margin: 0 !important; background: none !important; width: 100%; box-sizing: border-box; } .woocommerce-account .u-columns .form-row { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; width: 100%; } /* label (wireframe .form-field label: Inter caps 10px) */ .woocommerce-account .u-columns .form-row label:not(.woocommerce-form__label-for-checkbox) { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-soft); margin: 0; font-weight: 400; } /* hide the red "*Required" asterisk suffix (kept for a11y via label text) */ .woocommerce-account .u-columns .form-row .required, .woocommerce-account .u-columns .form-row .optional { color: var(--ink-soft); text-decoration: none; } /* inputs (wireframe .form-field input: underline only, serif 17px) */ .woocommerce-account .u-columns .form-row input.input-text, .woocommerce-account .u-columns .form-row input[type="text"], .woocommerce-account .u-columns .form-row input[type="email"], .woocommerce-account .u-columns .form-row input[type="password"] { background: transparent; border: none; border-bottom: 0.5px solid var(--line); border-radius: 0; padding: 12px 0; width: 100%; font-family: var(--font-serif); font-size: 17px; color: var(--ink); outline: none; transition: border-color 0.3s; box-shadow: none; } .woocommerce-account .u-columns .form-row input:focus { border-color: var(--brass); } /* password field wrapper (WooCommerce wraps the input to show the eye toggle) */ .woocommerce-account .u-columns .woocommerce-password-hint { font-family: var(--font-serif); font-size: 13px; color: var(--ink-soft); } .woocommerce-account .u-columns .password-input { display: block; width: 100%; position: relative; } /* "Remember me" checkbox row */ .woocommerce-account .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .woocommerce-account .woocommerce-form-login__rememberme span { font-weight: 400; } /* helper text under the register email (privacy note) */ .woocommerce-account .u-column2 .woocommerce-privacy-policy-text, .woocommerce-account .u-column2 p:not(.frx-account-intro):not(.form-row) { font-family: var(--font-serif); font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin: 0; } /* ---- buttons ---- */ /* Sign In = filled midnight (wireframe .btn); Create Account = ghost (.btn-ghost) */ .woocommerce-account .woocommerce-form-login button.woocommerce-button, .woocommerce-account .woocommerce-form-login button[name="login"], .woocommerce-account .woocommerce-form-register button.woocommerce-button, .woocommerce-account .woocommerce-form-register button[name="register"] { align-self: flex-start; margin-top: 12px; display: inline-flex; align-items: center; gap: 16px; font-family: var(--font-sans); font-size: 11px; line-height: 1; letter-spacing: 0.4em; text-transform: uppercase; white-space: nowrap; border-radius: 0; padding: 18px 44px; cursor: pointer; transition: background 0.4s, color 0.4s, border-color 0.4s; text-decoration: none; } /* Sign In — filled (submit button only, NOT the password eye toggle) */ .woocommerce-account .woocommerce-form-login button[name="login"] { background: var(--midnight); color: var(--cream); border: 0.5px solid var(--midnight); } .woocommerce-account .woocommerce-form-login button[name="login"]:hover { background: var(--emerald); border-color: var(--emerald); color: var(--cream); } /* Create Account — ghost (submit button only) */ .woocommerce-account .woocommerce-form-register button[name="register"] { background: transparent; color: var(--ink); border: 0.5px solid var(--ink); } .woocommerce-account .woocommerce-form-register button[name="register"]:hover { background: var(--ink); color: var(--cream); } /* arrow after each SUBMIT button (wireframe .btn-arrow) */ .woocommerce-account .woocommerce-form-login button[name="login"]::after, .woocommerce-account .woocommerce-form-register button[name="register"]::after { content: '\2192'; font-size: 16px; line-height: 1; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); } .woocommerce-account .woocommerce-form-login button[name="login"]:hover::after, .woocommerce-account .woocommerce-form-register button[name="register"]:hover::after { transform: translateX(6px); } /* #3 — password "show/hide" toggle → a clean eye icon (not the arrow / not the filled button style). WooCommerce renders it as a bare