/** * Orpat — Login / Register screen. * * Full-bleed brand interior + a single centred glassmorphism card. * Loaded only on the logged-out My Account page (see functions.php). * * Layout notes * - The section escapes WoodMart's content container with a 50vw negative-margin * technique so the photograph runs edge to edge without needing a page template. * - Height uses 100svh where supported, so mobile browser chrome cannot clip the card. * - The card is a scroll container in its own right; on very short viewports the * form scrolls inside the glass rather than the whole page jumping. * * Accessibility * - Colour pairs on the glass were chosen for >=4.5:1 against the scrimmed photo. * - Focus rings are always visible (never removed), and the reveal button is a real * button with aria-pressed. * - Honours prefers-reduced-motion and prefers-reduced-transparency. * * Rollback: dequeue 'orpat-auth' in functions.php and delete this file. */ .orpat-auth { --oa-ink: #fbf7f0; --oa-ink-soft: #e4d9c8; --oa-muted: #bdb0a0; --oa-brass: #c9a227; --oa-brass-2: #e2c46a; --oa-line: rgba(255, 255, 255, .16); --oa-glass: rgba(28, 21, 15, .38); --oa-field: rgba(255, 255, 255, .07); --oa-serif: "Fraunces", Georgia, "Times New Roman", serif; --oa-sans: "Jost", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* * Re-point WoodMart's own form tokens for the subtree inside this card. * * WoodMart styles autofilled inputs at style.css:896 with * input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--wd-form-bg) inset } * and --wd-form-bg is white. That inset shadow is the ONLY way to repaint Chrome's * autofill tint, so it cannot simply be overridden with `background` — and because * the shadow is the mechanism, whichever rule wins decides the colour outright. * * Rather than rely on out-specifying every such rule, the variables it reads are * redefined here. WoodMart's own declarations then resolve to the dark palette, * so the card stays correct even where a parent rule wins on cascade order. * Inheritance keeps this scoped to .orpat-auth — no other form is affected. */ --wd-form-bg: #2b211a; --wd-form-color: #fbf7f0; --wd-form-brd-color: rgba(255, 255, 255, .16); --wd-form-brd-color-focus: #e2c46a; --wd-form-placeholder-color: rgba(240, 232, 220, .42); --wd-form-brd-radius: 12px; --wd-form-height: 52px; position: relative; /* escape the theme container: full-bleed without a custom page template */ width: 100vw; margin-inline: calc(50% - 50vw); /* * Fit the section into the space the site chrome leaves, rather than always * claiming a full viewport. * * A flat 100svh here is what forced a scrollbar even on a tall screen: the header, * the page-title band and the footer stack on top of it, so the document was always * chrome + a full viewport. --oa-chrome is measured at runtime by inc/orpat-auth.js * and set on ; it falls back to 0px, which reproduces the old behaviour if the * script does not run. * * min-height (not height) keeps this a floor, so a panel taller than the space * available still grows and the PAGE scrolls — the card is never an inner scroller. */ min-height: calc(100vh - var(--oa-chrome, 0px)); min-height: calc(100svh - var(--oa-chrome, 0px)); display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px); overflow: clip; /* clips the scaled backdrop on both axes WITHOUT becoming a scroll container */ isolation: isolate; color: var(--oa-ink); font-family: var(--oa-sans); } /* ---------------------------------------------------------------- backdrop */ .orpat-auth__bg { position: absolute; inset: 0; z-index: 0; background-image: url("auth-img/orpat-auth-bg.jpg"); background-size: cover; background-position: center right; background-repeat: no-repeat; /* a slow, barely-there drift keeps the still photograph feeling alive */ transform: scale(1.06); animation: orpat-auth-drift 32s ease-in-out infinite alternate; } @keyframes orpat-auth-drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.4%, -1%, 0); } } /* Legibility scrim: darker at the centre where the card sits, so the glass reads without flattening the photograph at the edges. */ .orpat-auth__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 50% 50%, rgba(10, 7, 4, .18) 0%, rgba(10, 7, 4, .42) 58%, rgba(10, 7, 4, .70) 100%), linear-gradient(180deg, rgba(10, 7, 4, .38) 0%, rgba(10, 7, 4, .06) 42%, rgba(10, 7, 4, .52) 100%); } .orpat-auth__inner { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; } /* ------------------------------------------------------------- glass card */ .orpat-auth__card { width: 100%; max-width: 460px; padding: clamp(26px, 4.4vw, 44px) clamp(22px, 4vw, 40px); border-radius: 22px; border: 1px solid var(--oa-line); background: var(--oa-glass); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 32px 80px -28px rgba(0, 0, 0, .78), inset 0 1px 0 rgba(255, 255, 255, .16); /* The card is never its own scroll container: a scrollbar inside the glass looks broken and hides the submit button behind an inner scroll. When the content is taller than the viewport the PAGE scrolls instead (see the min-height rule on .orpat-auth, which relaxes to auto rather than pinning to the viewport). */ animation: orpat-auth-rise .6s cubic-bezier(.22, .9, .3, 1) both; } @keyframes orpat-auth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* a soft brass halo along the top edge — reads as light catching the glass */ .orpat-auth__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(226, 196, 106, .55), rgba(255, 255, 255, 0) 42%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .orpat-auth__card { position: relative; } /* ------------------------------------------------------------------ brand */ .orpat-auth__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .orpat-auth__eyebrow { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--oa-brass-2); white-space: nowrap; } .orpat-auth__rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(226, 196, 106, .6), rgba(255, 255, 255, 0)); } /* --------------------------------------------------------------- switcher */ .orpat-auth__switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 26px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--oa-line); } .orpat-auth__switch-btn { appearance: none; border: 0; cursor: pointer; padding: 11px 10px; border-radius: 999px; background: transparent; color: var(--oa-muted); font-family: var(--oa-sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: color .28s ease, background-color .28s ease, box-shadow .28s ease; } .orpat-auth__switch-btn:hover { color: var(--oa-ink); } .orpat-auth__switch-btn[aria-selected="true"] { color: #1c150f; background: linear-gradient(180deg, var(--oa-brass-2), var(--oa-brass)); box-shadow: 0 6px 18px -8px rgba(226, 196, 106, .8); } /* ------------------------------------------------------------------- copy */ .orpat-auth__title { font-family: var(--oa-serif); font-weight: 600; font-size: clamp(1.7rem, 4.6vw, 2.15rem); line-height: 1.14; letter-spacing: -.01em; color: var(--oa-ink); margin: 0 0 10px; } .orpat-auth__sub { font-size: .92rem; line-height: 1.62; color: var(--oa-ink-soft); margin: 0 0 26px; max-width: 42ch; } /* ----------------------------------------------------------------- fields */ .orpat-auth__form { margin: 0; } .orpat-auth .orpat-field { margin: 0 0 18px; display: block; } .orpat-auth .orpat-field label { display: block; margin-bottom: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--oa-muted); } .orpat-auth .orpat-field label .required { color: var(--oa-brass-2); text-decoration: none; border: 0; } .orpat-auth .orpat-field input[type="text"], .orpat-auth .orpat-field input[type="email"], .orpat-auth .orpat-field input[type="password"] { width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--oa-line); background: var(--oa-field); color: var(--oa-ink); font-family: var(--oa-sans); font-size: 1rem; /* >=16px so iOS Safari never zooms on focus */ line-height: normal; box-shadow: none; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; } .orpat-auth .orpat-field input::placeholder { color: rgba(240, 232, 220, .42); } .orpat-auth .orpat-field input:hover { border-color: rgba(255, 255, 255, .28); } .orpat-auth .orpat-field input:focus, .orpat-auth .orpat-field input:focus-visible { outline: none; border-color: var(--oa-brass-2); background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 3px rgba(226, 196, 106, .26); } /* Chrome autofill would otherwise paint an opaque pale blue over the glass. Superseded by the stronger, !important version near the end of this file — kept here so the base layer is still correct on its own. */ .orpat-auth .orpat-field input:-webkit-autofill, .orpat-auth .orpat-field input:-webkit-autofill:hover, .orpat-auth .orpat-field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--oa-ink); -webkit-box-shadow: 0 0 0 1000px #2b211a inset; caret-color: var(--oa-ink); } /* password reveal */ .orpat-field__pw { position: relative; display: block; } .orpat-field__pw input { padding-right: 52px !important; } .orpat-field__reveal { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: var(--oa-muted); transition: color .2s ease, background-color .2s ease; } .orpat-field__reveal:hover { color: var(--oa-ink); background: rgba(255, 255, 255, .09); } .orpat-field__reveal:focus-visible { outline: 2px solid var(--oa-brass-2); outline-offset: 2px; color: var(--oa-ink); } /* eye glyph drawn in CSS so no icon font or SVG request is needed */ .orpat-field__reveal span { width: 19px; height: 12px; border: 1.6px solid currentColor; border-radius: 51% 51% 51% 51% / 62% 62% 38% 38%; position: relative; } .orpat-field__reveal span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5.4px; height: 5.4px; margin: -2.7px 0 0 -2.7px; border-radius: 50%; background: currentColor; } /* struck-through eye = password currently visible */ .orpat-field__reveal[aria-pressed="true"] span::before { content: ""; position: absolute; top: 50%; left: -3px; right: -3px; height: 1.6px; background: currentColor; transform: rotate(-32deg); } /* ------------------------------------------------- remember / lost password */ .orpat-auth__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 24px; } .orpat-auth .orpat-check { display: inline-flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; font-size: .87rem; color: var(--oa-ink); } .orpat-auth .orpat-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--oa-brass); cursor: pointer; flex: 0 0 auto; } .orpat-auth__link { font-size: .87rem; color: var(--oa-brass-2); text-decoration: none; border-bottom: 1px solid rgba(226, 196, 106, .38); padding-bottom: 1px; transition: color .2s ease, border-color .2s ease; } .orpat-auth__link:hover { color: #fff; border-color: #fff; } /* ----------------------------------------------------------------- button */ .orpat-auth__submit { margin: 0 0 18px; } .orpat-auth .orpat-btn { width: 100%; min-height: 54px; padding: 16px 26px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, var(--oa-brass-2) 0%, var(--oa-brass) 100%); color: #1a140d; font-family: var(--oa-sans); font-size: .84rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; box-shadow: 0 14px 30px -14px rgba(226, 196, 106, .85); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; } .orpat-auth .orpat-btn:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(226, 196, 106, .95); } .orpat-auth .orpat-btn:active { transform: translateY(0); } .orpat-auth .orpat-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* -------------------------------------------------------- alternate action */ .orpat-auth__alt { margin: 0; text-align: center; font-size: .9rem; color: var(--oa-ink-soft); } .orpat-auth__alt a { color: var(--oa-brass-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(226, 196, 106, .45); padding-bottom: 1px; margin-inline-start: 4px; transition: color .2s ease, border-color .2s ease; } .orpat-auth__alt a:hover { color: #fff; border-color: #fff; } .orpat-auth__note { font-size: .87rem; line-height: 1.6; color: var(--oa-muted); margin: 0 0 18px; } .orpat-auth__trust { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; font-size: .76rem; letter-spacing: .04em; color: var(--oa-muted); } /* honeypot stays off-screen but reachable to bots, exactly as core intends */ .orpat-auth__trap { position: absolute !important; left: -999em !important; } /* --------------------------------------------------- WooCommerce notices */ .orpat-auth .woocommerce-error, .orpat-auth .woocommerce-message, .orpat-auth .woocommerce-info { margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--oa-line); background: rgba(0, 0, 0, .34); color: var(--oa-ink); font-size: .87rem; line-height: 1.55; list-style: none; } .orpat-auth .woocommerce-error { border-color: rgba(233, 122, 106, .55); } .orpat-auth .woocommerce-error li { margin: 0; } .orpat-auth .woocommerce-error a, .orpat-auth .woocommerce-message a, .orpat-auth .woocommerce-info a { color: var(--oa-brass-2); } /* ============================== RESPONSIVE ============================== */ /* Tablet and up: a touch more presence */ @media (min-width: 768px) { .orpat-auth__card { max-width: 480px; } } /* Large desktops: bias the card left so the photograph's clock stays visible */ @media (min-width: 1200px) { .orpat-auth__inner { justify-content: flex-start; padding-inline-start: 6vw; } .orpat-auth__card { max-width: 500px; } .orpat-auth__scrim { background: linear-gradient(90deg, rgba(10, 7, 4, .78) 0%, rgba(10, 7, 4, .52) 34%, rgba(10, 7, 4, .12) 60%, rgba(10, 7, 4, .34) 100%), linear-gradient(180deg, rgba(10, 7, 4, .28) 0%, rgba(10, 7, 4, .04) 45%, rgba(10, 7, 4, .40) 100%); } } /* Small phones: the portrait crop frames better than the 16:9 one */ @media (max-width: 767px) { .orpat-auth__bg { background-image: url("auth-img/orpat-auth-bg-mobile.jpg"); background-position: center center; } .orpat-auth { padding: 20px 14px; } .orpat-auth__card { border-radius: 20px; } .orpat-auth__switch-btn { font-size: .76rem; letter-spacing: .04em; padding: 10px 6px; } } /* Very narrow (320px): keep everything inside the viewport */ @media (max-width: 360px) { .orpat-auth { padding: 16px 10px; } .orpat-auth__card { padding: 22px 16px; border-radius: 18px; } .orpat-auth__eyebrow { font-size: .62rem; letter-spacing: .18em; } .orpat-auth__switch-btn { font-size: .7rem; padding: 10px 4px; } .orpat-auth .orpat-btn { letter-spacing: .1em; font-size: .8rem; } } /* Short/landscape phones: drop the full-height centring so the card starts at the top of the section and the page scrolls naturally. */ @media (max-height: 620px) { .orpat-auth { min-height: 0; padding-block: 20px; align-items: flex-start; } } /* ---------------------------------------------------- user preferences */ /* Some users (and Windows "reduce transparency") find blur unreadable. */ @media (prefers-reduced-transparency: reduce) { .orpat-auth__card { background: rgba(24, 18, 13, .95); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .orpat-auth__bg { animation: none; transform: scale(1.04); } .orpat-auth__card { animation: none; } .orpat-auth .orpat-btn, .orpat-auth .orpat-field input, .orpat-auth__switch-btn { transition: none; } .orpat-auth .orpat-btn:hover { transform: none; } } /* Fallback where backdrop-filter is unsupported (older Firefox, some in-app webviews): without this the card would be a flat translucent box and the text could wash out. */ @supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .orpat-auth__card { background: rgba(22, 16, 11, .93); } } /* Windows High Contrast / forced colours */ @media (forced-colors: active) { .orpat-auth__card { border: 1px solid CanvasText; } .orpat-auth .orpat-btn { border: 1px solid ButtonText; } } /* WooCommerce injects its own .show-password-input eye via JS; we ship an accessible button of our own, so hide the duplicate rather than have two toggles stacked. */ .orpat-auth .show-password-input { display: none !important; } /* --------------------------------------------------------------------------- * Specificity guards. * * inc/orpat-premium.css (the site-wide design layer) styles WooCommerce inputs * and buttons with !important for the light/cream pages. Those declarations also * match the fields inside this dark glass card, so they are re-asserted here with * a higher-specificity, auth-scoped selector. Scoped to .orpat-auth only, so no * other WooCommerce form is affected. * ------------------------------------------------------------------------- */ body.orpat-auth-screen .orpat-auth .woocommerce form .form-row input.input-text, body.orpat-auth-screen .orpat-auth .orpat-field input.input-text, body.orpat-auth-screen .orpat-auth .orpat-field input[type="text"], body.orpat-auth-screen .orpat-auth .orpat-field input[type="email"], body.orpat-auth-screen .orpat-auth .orpat-field input[type="password"] { background: var(--oa-field) !important; border: 1px solid var(--oa-line) !important; border-radius: 12px !important; padding: 0 16px !important; height: 52px !important; color: var(--oa-ink) !important; } body.orpat-auth-screen .orpat-auth .orpat-field input.input-text:focus, body.orpat-auth-screen .orpat-auth .orpat-field input[type="text"]:focus, body.orpat-auth-screen .orpat-auth .orpat-field input[type="email"]:focus, body.orpat-auth-screen .orpat-auth .orpat-field input[type="password"]:focus { background: rgba(255, 255, 255, .12) !important; border-color: var(--oa-brass-2) !important; box-shadow: 0 0 0 3px rgba(226, 196, 106, .26) !important; } body.orpat-auth-screen .orpat-auth .orpat-field input[type="password"] { padding-inline-end: 52px !important; } /* Brass submit button — beats the site-wide dark pill button treatment. */ body.orpat-auth-screen .orpat-auth button.orpat-btn, body.orpat-auth-screen .orpat-auth .woocommerce-button.orpat-btn, body.orpat-auth-screen .orpat-auth .woocommerce-Button.orpat-btn { background: linear-gradient(180deg, var(--oa-brass-2) 0%, var(--oa-brass) 100%) !important; color: #1a140d !important; border: 0 !important; border-radius: 999px !important; width: 100% !important; min-height: 54px !important; text-transform: uppercase; } body.orpat-auth-screen .orpat-auth button.orpat-btn:hover { color: #1a140d !important; filter: brightness(1.06); } /* Labels inside the card must stay light on the dark glass. */ body.orpat-auth-screen .orpat-auth .woocommerce form .form-row label, body.orpat-auth-screen .orpat-auth .orpat-field label { color: var(--oa-muted) !important; font-weight: 600; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; } /* The [hidden] attribute is how panels are toggled. A theme rule setting `display` on these elements would defeat it, so enforce it explicitly. */ .orpat-auth .orpat-auth__panel[hidden] { display: none !important; } /* iOS Safari zooms the viewport when a focused input's font-size is under 16px. The site-wide form styling sets 15px, so pin 16px here (auth screen only). */ body.orpat-auth-screen .orpat-auth .orpat-field input[type="text"], body.orpat-auth-screen .orpat-auth .orpat-field input[type="email"], body.orpat-auth-screen .orpat-auth .orpat-field input[type="password"], body.orpat-auth-screen .orpat-auth .woocommerce form .form-row input.input-text { font-size: 16px !important; } /* The site-wide form styling colours .woocommerce-form-login__rememberme a dark grey, which fails contrast on the dark glass (measured 2.01:1). Re-assert the light ink. */ body.orpat-auth-screen .orpat-auth .orpat-check, body.orpat-auth-screen .orpat-auth .orpat-check span, body.orpat-auth-screen .orpat-auth label.woocommerce-form-login__rememberme, body.orpat-auth-screen .orpat-auth label.woocommerce-form-login__rememberme span { color: var(--oa-ink) !important; } /* WooCommerce injects the privacy-policy notice into the register form via woocommerce_register_form. Style it for the dark glass — the default link colour is a dark ink that all but disappears here. */ body.orpat-auth-screen .orpat-auth .woocommerce-privacy-policy-text, body.orpat-auth-screen .orpat-auth .woocommerce-privacy-policy-text p { font-size: .82rem; line-height: 1.6; color: var(--oa-muted) !important; margin: 0 0 20px; } body.orpat-auth-screen .orpat-auth .woocommerce-privacy-policy-text a, body.orpat-auth-screen .orpat-auth .woocommerce-privacy-policy-link { color: var(--oa-brass-2) !important; text-decoration: underline; text-underline-offset: 2px; } body.orpat-auth-screen .orpat-auth .woocommerce-privacy-policy-text a:hover { color: #fff !important; } /* --------------------------------------------------------------------------- * Touch targets (WCAG 2.5.5 / 2.5.8). * * On touch pointers the small controls — remember-me, "Forgot password?", the * panel-swap link and the reveal button — are padded out to a >=44px tap area * without changing how they look. Padding is used rather than min-height so the * visual rhythm of the card is preserved; the extra area is invisible but real. * ------------------------------------------------------------------------- */ @media (pointer: coarse) { body.orpat-auth-screen .orpat-auth .orpat-check { min-height: 44px; align-items: center; } body.orpat-auth-screen .orpat-auth .orpat-check input { width: 22px; height: 22px; } body.orpat-auth-screen .orpat-auth .orpat-auth__link, body.orpat-auth-screen .orpat-auth .orpat-auth__alt a { display: inline-flex; align-items: center; min-height: 44px; } body.orpat-auth-screen .orpat-auth .orpat-field__reveal { width: 44px; height: 44px; } } /* The privacy-policy link sits inline inside a sentence, so it cannot be padded to 44px without breaking the paragraph. Widen its vertical hit area instead — this grows the touch region while leaving the text flow untouched. */ @media (pointer: coarse) { body.orpat-auth-screen .orpat-auth .woocommerce-privacy-policy-text a { display: inline-block; padding-block: 14px; margin-block: -14px; } } /* --------------------------------------------------------------------------- * WooCommerce notices, re-homed inside the card by form-login.php. * Core/theme styles them for light pages, so restate them for the dark glass. * ------------------------------------------------------------------------- */ body.orpat-auth-screen .orpat-auth .orpat-auth__notices { margin-bottom: 20px; } body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-error, body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-message, body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-info { margin: 0 0 10px !important; padding: 13px 16px !important; border-radius: 12px !important; background: rgba(0, 0, 0, .42) !important; color: var(--oa-ink) !important; font-size: .86rem; line-height: 1.55; list-style: none !important; box-shadow: none !important; } body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-error { border: 1px solid rgba(233, 122, 106, .6) !important; border-left: 3px solid #e97a6a !important; } body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-message, body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-info { border: 1px solid rgba(226, 196, 106, .5) !important; border-left: 3px solid var(--oa-brass-2) !important; } body.orpat-auth-screen .orpat-auth .orpat-auth__notices li { margin: 0 !important; padding: 0 !important; } body.orpat-auth-screen .orpat-auth .orpat-auth__notices li::before { display: none !important; } body.orpat-auth-screen .orpat-auth .orpat-auth__notices a { color: var(--oa-brass-2) !important; } /* core sometimes prints a "Return to shop" style button inside a notice */ body.orpat-auth-screen .orpat-auth .orpat-auth__notices .button { display: none !important; } /* --------------------------------------------------------------------------- * reCAPTCHA v2 checkbox (inc/orpat-registration-security.php). * * Google's widget is a fixed 304x78 iframe that cannot be restyled, so instead of * fighting it we give it breathing room and let it scale down on narrow phones — * below ~360px the un-scaled widget would overflow the card. * ------------------------------------------------------------------------- */ body.orpat-auth-screen .orpat-auth .orpat-recaptcha { margin: 0 0 20px; min-height: 78px; } body.orpat-auth-screen .orpat-auth .orpat-recaptcha__noscript { font-size: .84rem; line-height: 1.55; color: var(--oa-brass-2); margin: 0; } @media (max-width: 359px) { body.orpat-auth-screen .orpat-auth .orpat-recaptcha { transform: scale(.86); transform-origin: left top; min-height: 68px; } } /* --------------------------------------------------------------------------- * Field parity — Sign in must match Create account. * * The register panel always renders this template's own markup, whose rows carry * .orpat-field. The login panel does NOT always do so: WoodMart ships * woodmart_login_form() (inc/integrations/woocommerce/template-tags.php) and its * My Account layout builder / Gutenberg "ma-login" block call it directly, emitting * .woocommerce-FormRow / .form-row-username / .form-row-password rows with no * .orpat-field class. Every .orpat-field rule above then misses those inputs and * they fall back to WoodMart's base input rule (style.css ~798: 42px tall, * --wd-form-brd-radius, --wd-form-bg) — which is exactly the height, radius, * border and background mismatch reported against the Create account panel. * * Rather than chase each markup path, the field treatment is restated here keyed * on the form itself. Scoped to .orpat-auth, so no other WooCommerce form moves. * * Rollback: delete this block (everything below this comment). * ------------------------------------------------------------------------- */ /* Row rhythm — matches .orpat-field { margin: 0 0 18px } above. */ body.orpat-auth-screen .orpat-auth .orpat-auth__form .form-row, body.orpat-auth-screen .orpat-auth .woocommerce-form-login .form-row, body.orpat-auth-screen .orpat-auth .woocommerce-form-login .woocommerce-FormRow { margin: 0 0 18px; padding: 0; display: block; } /* Labels — matches the .orpat-field label treatment above. */ body.orpat-auth-screen .orpat-auth .orpat-auth__form .form-row > label, body.orpat-auth-screen .orpat-auth .woocommerce-form-login .form-row > label, body.orpat-auth-screen .orpat-auth .woocommerce-form-login .woocommerce-FormRow > label { display: block; margin-bottom: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--oa-muted) !important; } body.orpat-auth-screen .orpat-auth .woocommerce-form-login .required { color: var(--oa-brass-2) !important; text-decoration: none; border: 0; } /* Inputs — the single source of truth for both panels. */ body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="text"], body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="email"], body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="password"], body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="text"], body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="email"], body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="password"], body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text { width: 100% !important; max-width: 100% !important; height: 52px !important; min-height: 52px !important; padding: 0 16px !important; border: 1px solid var(--oa-line) !important; border-radius: 12px !important; background: var(--oa-field) !important; background-color: var(--oa-field) !important; color: var(--oa-ink) !important; font-family: var(--oa-sans); font-size: 16px !important; /* >=16px so iOS Safari never zooms on focus */ line-height: normal; box-shadow: none !important; vertical-align: middle; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; } body.orpat-auth-screen .orpat-auth .woocommerce-form-login input::placeholder, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input::placeholder { color: rgba(240, 232, 220, .42); opacity: 1; } body.orpat-auth-screen .orpat-auth .woocommerce-form-login input:hover, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input:hover { border-color: rgba(255, 255, 255, .28) !important; } body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="text"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="email"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="password"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="text"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="email"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="password"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:focus { outline: none; border-color: var(--oa-brass-2) !important; background: rgba(255, 255, 255, .12) !important; background-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 0 0 3px rgba(226, 196, 106, .26) !important; } /* Chrome autofill. * * Chrome paints a pale blue/white background on autofilled inputs that ordinary * `background` cannot override — the only way to mask it is a large inset shadow. * The input rules above set `box-shadow: none !important`, which would otherwise * beat that mask and let the blue through (this is exactly the white Sign in field * that was reported), so every declaration here carries !important too. * * :-webkit-autofill covers Chrome/Edge/Safari; :autofill is the standard alias. * The :active state is included because Chrome re-applies the tint on mousedown. */ body.orpat-auth-screen .orpat-auth input:-webkit-autofill, body.orpat-auth-screen .orpat-auth input:-webkit-autofill:hover, body.orpat-auth-screen .orpat-auth input:-webkit-autofill:focus, body.orpat-auth-screen .orpat-auth input:-webkit-autofill:active { -webkit-text-fill-color: var(--oa-ink) !important; -webkit-box-shadow: 0 0 0 1000px #2b211a inset !important; box-shadow: 0 0 0 1000px #2b211a inset !important; background-color: transparent !important; background-image: none !important; border: 1px solid var(--oa-line) !important; caret-color: var(--oa-ink) !important; /* Chrome animates its tint in; a long delay on the transition keeps our mask painted rather than letting the browser fade its own colour back over it. */ transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; } /* Standard alias, in its own rule: an engine that does not know :autofill would discard the whole selector list, taking the -webkit- rule above down with it. */ body.orpat-auth-screen .orpat-auth input:autofill, body.orpat-auth-screen .orpat-auth input:autofill:hover, body.orpat-auth-screen .orpat-auth input:autofill:focus, body.orpat-auth-screen .orpat-auth input:autofill:active { -webkit-text-fill-color: var(--oa-ink) !important; -webkit-box-shadow: 0 0 0 1000px #2b211a inset !important; box-shadow: 0 0 0 1000px #2b211a inset !important; background-color: transparent !important; background-image: none !important; border: 1px solid var(--oa-line) !important; caret-color: var(--oa-ink) !important; /* Chrome animates its tint in; a long delay on the transition keeps our mask painted rather than letting the browser fade its own colour back over it. */ transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; } /* Focused autofilled field keeps the brass ring — the mask shadow and the focus ring must be declared together, since box-shadow is a single property. WoodMart writes this pair in the opposite order (input:focus:-webkit-autofill at style.css:901); the orders are equivalent, but both are listed so the intent is obvious to anyone diffing the two files. */ body.orpat-auth-screen .orpat-auth input:focus:-webkit-autofill, body.orpat-auth-screen .orpat-auth input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #2f251c inset, 0 0 0 3px rgba(226, 196, 106, .26) !important; box-shadow: 0 0 0 1000px #2f251c inset, 0 0 0 3px rgba(226, 196, 106, .26) !important; border-color: var(--oa-brass-2) !important; } body.orpat-auth-screen .orpat-auth input:autofill:focus { -webkit-box-shadow: 0 0 0 1000px #2f251c inset, 0 0 0 3px rgba(226, 196, 106, .26) !important; box-shadow: 0 0 0 1000px #2f251c inset, 0 0 0 3px rgba(226, 196, 106, .26) !important; border-color: var(--oa-brass-2) !important; } /* Password rows: reserve room for the reveal button on whichever markup renders. WoodMart wraps its own field in .password-input and injects .show-password-input; that duplicate toggle is hidden earlier in this file, so only our button sits there. */ body.orpat-auth-screen .orpat-auth .woocommerce-form-login .password-input, body.orpat-auth-screen .orpat-auth .woocommerce-form-register .password-input { position: relative; display: block; } body.orpat-auth-screen .orpat-auth input[type="password"] { padding-inline-end: 52px !important; } /* Submit row — WoodMart's own button carries .btn.btn-accent, not .orpat-btn. */ body.orpat-auth-screen .orpat-auth .woocommerce-form-login .form-row-btn, body.orpat-auth-screen .orpat-auth .orpat-auth__submit { margin: 22px 0 0; } body.orpat-auth-screen .orpat-auth .woocommerce-form-login button.woocommerce-form-login__submit, body.orpat-auth-screen .orpat-auth .woocommerce-form-login .button.btn-accent { background: linear-gradient(180deg, var(--oa-brass-2) 0%, var(--oa-brass) 100%) !important; color: #1a140d !important; border: 0 !important; border-radius: 999px !important; width: 100% !important; min-height: 54px !important; text-transform: uppercase; box-shadow: none !important; } /* WoodMart's login footer (lost password + remember me) — align it with the .orpat-auth__meta row used by this template's own login panel. */ body.orpat-auth-screen .orpat-auth .login-form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 4px; } body.orpat-auth-screen .orpat-auth .login-form-footer, body.orpat-auth-screen .orpat-auth .login-form-footer span, body.orpat-auth-screen .orpat-auth .login-form-footer a { color: var(--oa-ink) !important; } /* Responsive parity: the compact breakpoint earlier in this file shrinks the .orpat-field inputs, so the login-form inputs must shrink with them or the two panels diverge again on small screens. */ @media (max-width: 480px) { body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="text"], body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="email"], body.orpat-auth-screen .orpat-auth .woocommerce-form-login input[type="password"], body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="text"], body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="email"], body.orpat-auth-screen .orpat-auth .woocommerce-form-register input[type="password"], body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text { height: 48px !important; min-height: 48px !important; padding: 0 14px !important; } body.orpat-auth-screen .orpat-auth input[type="password"] { padding-inline-end: 48px !important; } body.orpat-auth-screen .orpat-auth .woocommerce-form-login .form-row, body.orpat-auth-screen .orpat-auth .orpat-auth__form .form-row { margin-bottom: 15px; } } /* Stack the login footer on very narrow screens so "Lost your password?" and the remember-me checkbox never collide at 320px. */ @media (max-width: 360px) { body.orpat-auth-screen .orpat-auth .login-form-footer, body.orpat-auth-screen .orpat-auth .orpat-auth__meta { flex-direction: column; align-items: flex-start; gap: 10px; } } /* --------------------------------------------------------------------------- * Password recovery screens. * * /my-account/lost-password/ — the request form, the set-new-password form (same * endpoint, with a key in the URL) and the "email sent" confirmation. All three are * overridden in woocommerce/myaccount/ to render inside the same glass card as Sign * in and Create account, so the field rules above already reach them via .orpat-field * and .orpat-auth__form. Only the differences from the login card are handled here. * * Rollback: delete this block and the three woocommerce/myaccount/ overrides. * ------------------------------------------------------------------------- */ /* There is no tab strip on these screens, so the title carries the top of the card. */ .orpat-auth--recover .orpat-auth__panel { padding-top: 4px; } /* WooCommerce floats .form-row-first / .form-row-last at 50% width. Core's reset template uses them for the two password fields; the child override switches to form-row-wide, but the classes are re-asserted here so any plugin adding a first/ last row to these forms cannot break the single-column card layout either. */ body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword .form-row-first, body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword .form-row-last, body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword .form-row-wide { float: none !important; width: 100% !important; margin-inline: 0 !important; } body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword .clear { display: none; } /* Core's lost-password template opens with an instruction paragraph. The child override moves that copy into .orpat-auth__sub, but a plugin filtering woocommerce_lost_password_message can still print one — keep it readable. */ body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword > p:not([class]) { font-size: .92rem; line-height: 1.62; color: var(--oa-ink-soft); margin: 0 0 22px; } /* The recovery forms use the same input treatment as login and register. Restated on .woocommerce-ResetPassword so it holds regardless of which markup renders — same reasoning as the login-form parity block above. */ body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="text"], body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="email"], body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="password"], body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input.input-text { width: 100% !important; max-width: 100% !important; height: 52px !important; min-height: 52px !important; padding: 0 16px !important; border: 1px solid var(--oa-line) !important; border-radius: 12px !important; background: var(--oa-field) !important; background-color: var(--oa-field) !important; color: var(--oa-ink) !important; font-family: var(--oa-sans); font-size: 16px !important; line-height: normal; box-shadow: none !important; vertical-align: middle; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; } body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="text"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="email"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="password"]:focus, body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input.input-text:focus { outline: none; border-color: var(--oa-brass-2) !important; background: rgba(255, 255, 255, .12) !important; background-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 0 0 3px rgba(226, 196, 106, .26) !important; } body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input::placeholder { color: rgba(240, 232, 220, .42); opacity: 1; } body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword label { display: block; margin-bottom: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--oa-muted) !important; } body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword .required { color: var(--oa-brass-2) !important; text-decoration: none; border: 0; } /* Brass submit, matching the login and register buttons. */ body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword button.button, body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword button.orpat-btn { background: linear-gradient(180deg, var(--oa-brass-2) 0%, var(--oa-brass) 100%) !important; color: #1a140d !important; border: 0 !important; border-radius: 999px !important; width: 100% !important; min-height: 54px !important; text-transform: uppercase; box-shadow: none !important; } /* WooCommerce's own password-strength meter, if it renders inside the card. */ body.orpat-auth-screen .orpat-auth .woocommerce-password-strength { margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: .78rem; letter-spacing: .04em; background: rgba(255, 255, 255, .06); color: var(--oa-ink); } body.orpat-auth-screen .orpat-auth .woocommerce-password-hint { display: block; margin-top: 6px; font-size: .78rem; line-height: 1.5; color: var(--oa-ink-soft); } /* ------------------------------------------------- confirmation ("check inbox") */ /* Brass tick drawn in CSS — no icon font or extra request, matching how the password-reveal eye is drawn earlier in this file. */ .orpat-auth__tick { display: block; width: 46px; height: 46px; margin: 0 0 20px; border-radius: 50%; border: 1.6px solid var(--oa-brass-2); position: relative; } .orpat-auth__tick::after { content: ""; position: absolute; top: 46%; left: 50%; width: 15px; height: 8px; margin: -6px 0 0 -8px; border-left: 2px solid var(--oa-brass-2); border-bottom: 2px solid var(--oa-brass-2); transform: rotate(-45deg); } /* The confirmation card has no form, so its copy sets the width rather than a field. */ .orpat-auth--recover .orpat-auth__sub { max-width: 46ch; } @media (prefers-reduced-motion: no-preference) { .orpat-auth__tick { animation: orpat-tick-in .45s ease both; } } @keyframes orpat-tick-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } } /* Responsive parity with the login and register fields at the same breakpoint. */ @media (max-width: 480px) { body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="text"], body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="email"], body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input[type="password"], body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input.input-text { height: 48px !important; min-height: 48px !important; padding: 0 14px !important; } .orpat-auth__tick { width: 40px; height: 40px; margin-bottom: 16px; } } /* --------------------------------------------------------------------------- * Title colour guard. * * orpat-premium.css carries `.woocommerce-account h2 { color: var(--o-ink); font-size: * 1.5rem }` for the light account pages. The register panel's heading is an

, so on * the dark glass that rendered near-black on near-black (measured 1.02:1 — invisible) * and shrank the type to 22.5px. * * Asserted here rather than by scoping the rule in orpat-premium.css, so it cannot be * lost if that shared file is regenerated. Applies only inside .orpat-auth. * ------------------------------------------------------------------------- */ body.orpat-auth-screen .orpat-auth h1.orpat-auth__title, body.orpat-auth-screen .orpat-auth h2.orpat-auth__title { color: var(--oa-ink) !important; font-family: var(--oa-serif) !important; font-size: clamp(1.7rem, 4.6vw, 2.15rem) !important; font-weight: 600 !important; line-height: 1.14; margin: 0 0 10px !important; } /* --------------------------------------------------------------------------- * Form + label guards. * * orpat-premium.css styles the account forms as white cards for the light account * pages, with !important: * .woocommerce-account form.login, form.register { background:#fff; border; padding; } * .woocommerce form .form-row label { color: var(--o-ink); } * Inside the dark glass that paints an opaque white panel over the card and renders the * labels near-black on near-black. * * Asserted here (not by scoping the shared file) so the fix cannot be lost if * orpat-premium.css is regenerated. Scoped to .orpat-auth — no other form is affected. * ------------------------------------------------------------------------- */ body.orpat-auth-screen .orpat-auth form.login, body.orpat-auth-screen .orpat-auth form.register, body.orpat-auth-screen .orpat-auth .orpat-auth__form { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; } body.orpat-auth-screen .orpat-auth .woocommerce form .form-row label, body.orpat-auth-screen .orpat-auth form .form-row label, body.orpat-auth-screen .orpat-auth .orpat-field label { color: var(--oa-muted) !important; font-weight: 600 !important; font-size: .72rem !important; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px !important; } /* The two-column account grid must not cage the single centred card. */ body.orpat-auth-screen .orpat-auth .u-columns, body.orpat-auth-screen .orpat-auth .col2-set { display: block !important; max-width: none !important; margin: 0 !important; } /* --------------------------------------------------------------------------- * Short viewports — compress rather than scroll. * * Laptop screens around 700-800px tall, and any window with the browser's own * chrome plus the site header and footer, leave little room. These steps tighten * the vertical rhythm progressively so the card keeps fitting. * * The 860px step only scales spacing and type. The 760px step additionally drops two * pieces of supporting copy: the panel sub-heading (visually hidden, so it is still * announced to screen readers) and the decorative trust line. No form field, label, * link or legal notice is ever hidden — below the last step the page simply scrolls, * which is the intended fallback. * ------------------------------------------------------------------------- */ @media (max-height: 860px) { .orpat-auth { padding-block: clamp(14px, 2vh, 26px); } .orpat-auth__card { padding-block: clamp(18px, 2.4vh, 26px); } .orpat-auth__brand { margin-bottom: 12px; } .orpat-auth__switch { margin-bottom: 15px; } .orpat-auth__title { font-size: clamp(1.3rem, 2.6vh, 1.55rem); margin-bottom: 7px; } .orpat-auth__sub { font-size: .82rem; line-height: 1.5; margin-bottom: 15px; } .orpat-auth .orpat-field { margin-bottom: 11px; } .orpat-auth__meta { margin: 0 0 14px; } .orpat-auth__trust { margin-top: 13px; padding-top: 10px; } } @media (max-height: 760px) { /* The sub-heading is the first thing that can go: the title and the fields already say what the panel is, so on a short screen the paragraph is the cheapest height to reclaim. Hidden visually only — it stays in the DOM for screen readers. */ .orpat-auth__sub { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .orpat-auth__card { padding-block: 16px; } .orpat-auth__title { font-size: 1.3rem; margin-bottom: 12px; } .orpat-auth .orpat-field { margin-bottom: 9px; } .orpat-auth .orpat-field label { margin-bottom: 4px; font-size: .68rem; } .orpat-auth .orpat-field input[type="text"], .orpat-auth .orpat-field input[type="email"], .orpat-auth .orpat-field input[type="password"], body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text, body.orpat-auth-screen .orpat-auth .woocommerce-ResetPassword input.input-text, body.orpat-auth-screen .orpat-auth input[type="text"], body.orpat-auth-screen .orpat-auth input[type="email"], body.orpat-auth-screen .orpat-auth input[type="password"] { height: 42px !important; min-height: 42px !important; } body.orpat-auth-screen .orpat-auth .orpat-btn, body.orpat-auth-screen .orpat-auth button.orpat-btn, body.orpat-auth-screen .orpat-auth .woocommerce-form-login button.woocommerce-form-login__submit { min-height: 42px !important; padding-block: 11px; } /* The trust line is decorative; its border also adds visible height. */ .orpat-auth__trust { display: none; } } /* --------------------------------------------------------------------------- * Close the gap between the header and the card. * * WoodMart wraps page content in .wd-content-layout, which carries * `padding-block: 40px` (parent style.css:5758). On a normal page that is correct * breathing room, but this section is a full-bleed photographic backdrop: the * padding renders as a band of empty page background between the header and the * top of the image, and a matching one below it. * * inc/orpat-premium.css already solves this for the premium landing pages, scoped * to .orpat-premium-page. The auth screens never carried that class, so the same * neutralising is applied here against the body flag they do carry. * * Also drops the page-title / breadcrumb band: it prints "My account" on a light * strip directly above a card whose own heading already says Sign in or Create * account, so it is duplicated chrome sitting in the middle of the artwork. * * Rollback: delete this block. The 40px band and the breadcrumb strip return. * ------------------------------------------------------------------------- */ body.orpat-auth-screen .wd-content-layout, body.orpat-auth-screen .main-page-wrapper { padding-block: 0 !important; margin-block: 0 !important; } /* The container's inline padding would inset the full-bleed section, leaving a sliver of page background down each side of the photograph. */ body.orpat-auth-screen .wd-content-layout.container, body.orpat-auth-screen .main-page-wrapper > .container { max-width: none !important; padding-inline: 0 !important; } /* Breadcrumb / page-title strip — redundant above the card's own heading. */ body.orpat-auth-screen .wd-page-title { display: none !important; } /* --------------------------------------------------------------------------- * Fixes: password-reveal placement, and notice placement within the card. * * 1. The reveal button is absolutely positioned against .orpat-field__pw. On the * register panel WooCommerce injects .woocommerce-password-strength and the * hint INSIDE that same wrapper, so the wrapper grows and `top: 50%` centres * the eye against (input + meter) instead of against the input — the eye then * drifts down beside the strength text. Pin it to the top of the wrapper and * offset by half the input height instead, which is independent of whatever * the meter adds below. * * 2. The buffered notice block is emitted at the very top of the card, above the * brand eyebrow, so an error reads as detached from the form. Order it after * the brand/title with flex order, and give it the same left accent it has on * the login panel. * * Rollback: delete this block. Nothing above it is modified. * ------------------------------------------------------------------------- */ /* 1 — reveal button pinned to the input, not to the grown wrapper. */ body.orpat-auth-screen .orpat-auth .orpat-field__pw, body.orpat-auth-screen .orpat-auth .password-input { position: relative; display: block; } body.orpat-auth-screen .orpat-auth .orpat-field__reveal { top: 26px !important; /* half of the 52px input height */ bottom: auto !important; transform: translateY(-50%) !important; } @media (max-width: 480px) { /* inputs drop to 48px at this breakpoint */ body.orpat-auth-screen .orpat-auth .orpat-field__reveal { top: 24px !important; } } /* The strength meter and hint must clear the reveal button's column so the text never runs under the eye. */ body.orpat-auth-screen .orpat-auth .woocommerce-password-strength, body.orpat-auth-screen .orpat-auth .woocommerce-password-hint { margin-inline-end: 0; padding-inline-end: 16px; } /* 2 — WoodMart styles every notice with an absolutely-positioned icon glyph: * * padding-inline: 65px 30px !important; (reserves the icon column) * ::before { position: absolute; left: 24px; font-family: woodmart-font; } * * The earlier override in this file sets `padding: 13px 16px !important`, but * padding-inline is applied by a later-loading stylesheet at equal specificity * and wins, so the 65px column comes back while the glyph keeps rendering — that * is the dark blob overlapping the notice text, and the reason the box reads as * wider than the card. Remove the glyph and restate the padding as logical * properties so nothing is left to re-apply. * * This is a documented !important case: overriding a theme rule that is itself * !important (see the CSS rules in CLAUDE.md 4.4). */ body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-error::before, body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-message::before, body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-info::before { content: none !important; display: none !important; } body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-error, body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-message, body.orpat-auth-screen .orpat-auth .orpat-auth__notices .woocommerce-info { box-sizing: border-box !important; display: block; width: 100% !important; max-width: 100% !important; padding-block: 13px !important; padding-inline: 16px !important; text-align: start !important; } body.orpat-auth-screen .orpat-auth .orpat-auth__notices { margin: 0 0 24px !important; } /* --------------------------------------------------------------------------- * Login-panel autofill + hover parity. * * The autofill mask earlier in this file is written as * body.orpat-auth-screen .orpat-auth input:-webkit-autofill -> (0,3,1) * but the login-form input rules are * ... .woocommerce-form-login input[type="password"] -> (0,4,1) * Both are !important, so the MORE SPECIFIC login rule wins and its * `box-shadow: none !important` erases the 1000px inset that hides Chrome's pale * blue autofill tint. The register panel escapes this because its autofill rule * is scoped under .orpat-field and matches a different path — which is why only * the login fields render white. * * Restated here at (0,5,1) so the mask outranks the login/register input rules on * both panels. !important throughout for the same reason as the block above: the * rules being overridden are themselves !important. * * Rollback: delete this block. Nothing above it is modified. * ------------------------------------------------------------------------- */ body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:-webkit-autofill, body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:-webkit-autofill:hover, body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:-webkit-autofill:active, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:-webkit-autofill, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:-webkit-autofill:hover, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:-webkit-autofill:active { -webkit-text-fill-color: var(--oa-ink) !important; -webkit-box-shadow: 0 0 0 1000px #2b211a inset !important; box-shadow: 0 0 0 1000px #2b211a inset !important; background-color: transparent !important; background-image: none !important; border: 1px solid var(--oa-line) !important; caret-color: var(--oa-ink) !important; transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; } /* Standard alias in its own rule — an engine that does not know :autofill would otherwise discard the entire selector list above along with it. */ body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:autofill, body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:autofill:hover, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:autofill, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:autofill:hover { -webkit-text-fill-color: var(--oa-ink) !important; -webkit-box-shadow: 0 0 0 1000px #2b211a inset !important; box-shadow: 0 0 0 1000px #2b211a inset !important; background-color: transparent !important; background-image: none !important; border: 1px solid var(--oa-line) !important; caret-color: var(--oa-ink) !important; transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; } /* Focused autofilled field keeps the brass ring. box-shadow is a single property, so the mask and the focus ring must be declared together. */ body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:-webkit-autofill:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #2f251c inset, 0 0 0 3px rgba(226, 196, 106, .26) !important; box-shadow: 0 0 0 1000px #2f251c inset, 0 0 0 3px rgba(226, 196, 106, .26) !important; border-color: var(--oa-brass-2) !important; } body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:autofill:focus, body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:autofill:focus { -webkit-box-shadow: 0 0 0 1000px #2f251c inset, 0 0 0 3px rgba(226, 196, 106, .26) !important; box-shadow: 0 0 0 1000px #2f251c inset, 0 0 0 3px rgba(226, 196, 106, .26) !important; border-color: var(--oa-brass-2) !important; } /* Hover feedback: the input rules set a flat border with no hover state, so the fields read as inert until focused. Lift the border on hover to match the .orpat-field treatment on the register panel. */ body.orpat-auth-screen .orpat-auth .woocommerce-form-login input.input-text:hover:not(:focus), body.orpat-auth-screen .orpat-auth .woocommerce-form-register input.input-text:hover:not(:focus), body.orpat-auth-screen .orpat-auth .orpat-field input:hover:not(:focus) { border-color: rgba(226, 196, 106, .55) !important; background-color: rgba(255, 255, 255, .1) !important; } /* --------------------------------------------------------------------------- * "New to Orpat? / Create an account" — secondary action. * * Previously a plain underlined text link, which read as a footnote next to the * solid brass SIGN IN button and gave a small tap target on mobile. It is the * card's real secondary action, so it becomes a ghost (outlined) button: the same * pill geometry and brass hue as the primary button, but outlined rather than * filled, so the visual hierarchy stays unambiguous — one filled button per card. * * Uses the existing --oa-* tokens only; no new colours are introduced. * * Rollback: delete this block. The markup is unchanged, so the link simply * returns to its underlined text style. * ------------------------------------------------------------------------- */ body.orpat-auth-screen .orpat-auth .orpat-auth__alt { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--oa-line); text-align: center; /* Lead-in text now sits as a label above the button rather than inline with it. */ font-size: .84rem; color: var(--oa-muted); } body.orpat-auth-screen .orpat-auth .orpat-auth__alt a { /* Reset the inherited text-link treatment before restyling as a button. */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-inline-start: 0; padding: 0 22px; border: 1px solid rgba(226, 196, 106, .5); border-bottom: 1px solid rgba(226, 196, 106, .5); border-radius: 999px; background: transparent; color: var(--oa-brass-2); font-family: var(--oa-sans); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .22s ease, border-color .22s ease, color .22s ease; } body.orpat-auth-screen .orpat-auth .orpat-auth__alt a:hover { background: rgba(226, 196, 106, .12); border-color: var(--oa-brass-2); color: var(--oa-ink); } body.orpat-auth-screen .orpat-auth .orpat-auth__alt a:focus-visible { outline: 2px solid var(--oa-brass-2); outline-offset: 3px; } body.orpat-auth-screen .orpat-auth .orpat-auth__alt a:active { background: rgba(226, 196, 106, .18); } @media (max-width: 480px) { body.orpat-auth-screen .orpat-auth .orpat-auth__alt a { min-height: 48px; font-size: .74rem; } }