/* FlexData Auth — front-end stylesheet Brand: FlexData blue (#4F6DF5), consistent with the rest of the FlexData platform. Scoped entirely under .fd-auth-root so dark mode never leaks outside the auth pages. NOTE (perf): this page intentionally uses the OS/browser's native font stack instead of a webfont. A login/register page is the very first thing a new visitor waits on, and an @import'd Google Fonts stylesheet is a render-blocking external round trip (DNS + TLS + fetch) before any text can paint — on a slow connection that alone can cost several hundred ms. System fonts render instantly and, on each visitor's own device, already look native/professional rather than "themed". */ /* Minimal reset — this page loads with zero theme CSS, so nothing else normalizes default browser margins/box-sizing for us. */ html, body { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; } /* Defensive: since wp_head()/wp_footer() are called here (for SEO plugin compatibility — see class-fd-auth-seo-pages.php), any other site-wide snippet hooked on those actions now runs on this page too. One such snippet (the sitewide "fdxh" header/drawer nav) adds a class to via JS that forces top padding meant to make room for a floating header bar it renders elsewhere — a bar that never actually appears here, since this page never calls wp_body_open(). The result was empty reserved space at the top of the page with nothing filling it. This page owns its own full-viewport layout unconditionally, so these rules use two classes (higher specificity than the single-class rules that set the padding) to win regardless of CSS source order — not dependent on this stylesheet loading after the offending one. */ html.fdxh-active, html.fdxh-js-active, body.fdxh-active.fd-standalone-body, body.fdxh-js-active.fd-standalone-body { padding-top: 0 !important; margin-top: 0 !important; } .fd-auth-root { --fd-bg-grad-start: #FFFFFF; --fd-bg-grad-end: #F6F8FC; --fd-card-bg: #FFFFFF; --fd-card-border: #E5EAF2; --fd-text-primary: #0F172A; --fd-text-muted: #64748B; --fd-text-faint: #94A3B8; --fd-input-bg: #FFFFFF; --fd-input-border: #E5EAF2; --fd-accent-1: #4F6DF5; --fd-accent-1-hover: #3F5AE0; --fd-accent-2: #7B2FF7; --fd-error-bg: #FEF2F2; --fd-error-border: #EF4444; --fd-error-text: #B91C1C; --fd-success-bg: #F0FDF4; --fd-success-border: #22C55E; --fd-success-text: #15803D; --fd-header-border: #EEF1F6; --fd-shadow: 0 8px 30px rgba(15, 23, 42, 0.07); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--fd-text-primary); background: linear-gradient(180deg, var(--fd-bg-grad-start) 0%, var(--fd-bg-grad-end) 100%); min-height: 100vh; display: flex; flex-direction: column; transition: background 0.35s ease, color 0.35s ease; } .fd-auth-root.fd-dark { --fd-bg-grad-start: #0B1120; --fd-bg-grad-end: #060A14; --fd-card-bg: #10182B; --fd-card-border: #1F2A44; --fd-accent-1-hover: #6580F8; --fd-text-primary: #F1F5F9; --fd-text-muted: #94A3B8; --fd-text-faint: #64748B; --fd-input-bg: #0B1120; --fd-input-border: #263252; --fd-error-bg: rgba(239, 68, 68, 0.12); --fd-error-border: #EF4444; --fd-error-text: #FCA5A5; --fd-success-bg: rgba(34, 197, 94, 0.12); --fd-success-border: #22C55E; --fd-success-text: #86EFAC; --fd-header-border: #1B2338; --fd-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .fd-auth-root * { box-sizing: border-box; } /* ─── HEADER ──────────────────────────────────────────────────────────── */ .fd-auth-header { border-bottom: 1px solid var(--fd-header-border); transition: border-color 0.35s ease; } .fd-auth-header-inner { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; } .fd-logo-link { display: inline-flex; align-items: center; text-decoration: none; } .fd-logo { height: 26px; width: auto; display: none; } .fd-auth-root:not(.fd-dark) .fd-logo-light { display: block; } .fd-auth-root.fd-dark .fd-logo-dark { display: block; } .fd-theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--fd-card-border); background: transparent; color: var(--fd-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .fd-theme-toggle:hover { color: var(--fd-accent-1); border-color: var(--fd-accent-1); } .fd-theme-toggle svg { width: 19px; height: 19px; } .fd-icon-moon { display: none; } .fd-auth-root.fd-dark .fd-icon-sun { display: none; } .fd-auth-root.fd-dark .fd-icon-moon { display: block; } /* ─── GUEST CHECKOUT LINK (login + register only) ───────────────────── Flattened from a boxed/highlighted callout to a single quiet line — still the same link and destination, just no longer competing visually with the card below it. */ .fd-guest-banner-wrap { width: 100%; max-width: 440px; margin: 16px auto 0; padding: 0 20px; text-align: center; } .fd-guest-banner { display: inline-flex; align-items: center; gap: 6px; color: var(--fd-text-muted); font-size: 13px; text-decoration: none; transition: color 0.2s ease; } .fd-guest-banner:hover { color: var(--fd-accent-1); } .fd-guest-banner-text { display: inline-flex; align-items: baseline; gap: 5px; } .fd-guest-banner-title { font-weight: 600; color: inherit; } .fd-guest-banner-sub { color: inherit; opacity: 0.8; } .fd-guest-banner-arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--fd-accent-1); transition: transform 0.2s ease; } .fd-guest-banner:hover .fd-guest-banner-arrow { transform: translateX(2px); } /* ─── MAIN / CARD ─────────────────────────────────────────────────────── */ .fd-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .fd-auth-card { position: relative; background: var(--fd-card-bg); border: 1px solid var(--fd-card-border); border-radius: 20px; padding: 36px; max-width: 420px; width: 100%; box-shadow: var(--fd-shadow); overflow: hidden; transition: background 0.35s ease, border-color 0.35s ease; } /* ─── PAGE LOAD ENTRANCE ───────────────────────────────────────────────── Kept intentionally brief and opacity-only — a large slide/scale entrance reads as "template animation"; a fast plain fade reads as instant. */ .fd-fade-slide-in { animation: fdCardIn 0.18s ease-out; } @keyframes fdCardIn { from { opacity: 0; } to { opacity: 1; } } /* ─── TITLE / SUBTITLE ─────────────────────────────────────────────────── */ .fd-title { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25; margin: 0 0 8px; color: var(--fd-text-primary); } .fd-subtitle { font-size: 14px; color: var(--fd-text-muted); line-height: 1.55; margin: 0 0 24px; } /* ─── FORM FIELDS ─────────────────────────────────────────────────────── */ .fd-form { display: block; } .fd-field { margin-bottom: 16px; } .fd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fd-field label { display: block; font-size: 13px; font-weight: 600; color: var(--fd-text-muted); margin-bottom: 7px; } .fd-field-optional { font-weight: 500; color: var(--fd-text-faint); text-transform: none; letter-spacing: 0; } .fd-input-wrap { position: relative; } .fd-field input[type="text"], .fd-field input[type="email"], .fd-field input[type="password"], .fd-field input[type="tel"] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--fd-input-border); background: var(--fd-input-bg); background-image: none; color: var(--fd-text-primary); font-size: 15px; line-height: 1.4; font-family: inherit; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease; } .fd-field input:focus { outline: none; box-shadow: none; border-color: var(--fd-accent-1); } .fd-field input::placeholder { color: var(--fd-text-faint); } .fd-field-hint { display: block; font-size: 12.5px; margin-top: 6px; min-height: 16px; color: var(--fd-text-muted); transition: color 0.2s ease; } .fd-field-hint.fd-hint-error { color: var(--fd-error-border); } .fd-field-hint.fd-hint-ok { color: var(--fd-success-border); } .fd-pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--fd-text-faint); padding: 4px; display: flex; } .fd-pw-toggle:hover { color: var(--fd-accent-1); } .fd-pw-toggle svg { width: 19px; height: 19px; } /* ─── ROW / CHECKBOX / LINKS ──────────────────────────────────────────── */ .fd-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 8px; } .fd-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fd-text-muted); cursor: pointer; } .fd-checkbox input { accent-color: var(--fd-accent-1); width: 16px; height: 16px; } .fd-link-muted { font-size: 13.5px; color: var(--fd-accent-1); text-decoration: none; font-weight: 600; } .fd-link-muted:hover { opacity: 0.8; } /* ─── SUBMIT BUTTON ───────────────────────────────────────────────────── Flat, solid brand blue rather than a glowing gradient pill — still unmistakably FlexData's color, but reads as a plainly-coded app button instead of a marketing-template one. */ .fd-submit-btn { width: 100%; background: var(--fd-accent-1); color: #fff; padding: 13px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background-color 0.15s ease, opacity 0.15s ease; } .fd-submit-btn:hover { background: var(--fd-accent-1-hover); } .fd-submit-btn:active { opacity: 0.9; } .fd-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .fd-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: fdSpin 0.8s linear infinite; display: none; } .fd-submit-btn.fd-loading .fd-spinner { display: inline-block; } @keyframes fdSpin { to { transform: rotate(360deg); } } /* ─── SWITCH TEXT ─────────────────────────────────────────────────────── */ .fd-switch-text { text-align: center; font-size: 13.5px; color: var(--fd-text-muted); margin: 26px 0 0; } .fd-switch-link { color: var(--fd-accent-1); font-weight: 700; text-decoration: none; } .fd-switch-link:hover { opacity: 0.8; } /* ─── INLINE MESSAGE (no-JS fallback, shown briefly before toast fires) ── */ .fd-inline-message { padding: 13px 15px; border-radius: 12px; font-size: 14px; margin-bottom: 20px; text-align: left; } .fd-inline-message.fd-error { background: var(--fd-error-bg); border-left: 4px solid var(--fd-error-border); color: var(--fd-error-text); } .fd-inline-message.fd-success { background: var(--fd-success-bg); border-left: 4px solid var(--fd-success-border); color: var(--fd-success-text); } /* ─── TOASTS ───────────────────────────────────────────────────────────── */ .fd-toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; width: 92%; max-width: 400px; pointer-events: none; } .fd-toast { background: var(--fd-card-bg); border: 1px solid var(--fd-card-border); border-left: 4px solid var(--fd-accent-1); color: var(--fd-text-primary); padding: 14px 16px; border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,0.15); font-size: 14px; animation: fdToastIn 0.3s cubic-bezier(0.16,1,0.3,1); } .fd-toast.fd-toast-error { border-left-color: var(--fd-error-border); } .fd-toast.fd-toast-success { border-left-color: var(--fd-success-border); } .fd-toast.fd-toast-out { animation: fdToastOut 0.25s ease forwards; } @keyframes fdToastIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fdToastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } } /* ─── FOOTER ───────────────────────────────────────────────────────────── */ .fd-auth-footer { text-align: center; padding: 18px 20px 28px; font-size: 12.5px; color: var(--fd-text-faint); } /* ─── OTP INPUT BOXES ──────────────────────────────────────────────────── */ .fd-otp-boxes { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; justify-content: center; gap: clamp(6px, 2.5vw, 12px); margin: 10px 0 28px; width: 100%; } .fd-otp-box { flex: 0 0 auto; width: clamp(40px, 12vw, 56px); height: clamp(40px, 12vw, 56px); aspect-ratio: 1 / 1; text-align: center; font-size: clamp(17px, 4.5vw, 22px); font-weight: 700; line-height: 1; border-radius: 14px; border: 1px solid var(--fd-input-border); background: var(--fd-input-bg); color: var(--fd-text-primary); font-family: inherit; padding: 0; margin: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; } .fd-otp-box:focus { outline: none; border-color: var(--fd-accent-1); box-shadow: 0 0 0 3px rgba(79, 109, 245, 0.15); transform: translateY(-1px); } @media (max-width: 340px) { .fd-otp-boxes { gap: 5px; } .fd-otp-box { width: 38px; height: 38px; font-size: 16px; } } /* ─── RESEND CODE ──────────────────────────────────────────────────────── */ .fd-resend-form { text-align: center; margin-top: 20px; } .fd-resend-btn { background: none; border: none; color: var(--fd-accent-1); font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; padding: 6px; } .fd-resend-btn:hover { opacity: 0.8; } .fd-resend-btn:disabled { color: var(--fd-text-faint); cursor: not-allowed; opacity: 1; } /* ─── SUCCESS ICON (replaces the old pill "Success" badge) ────────────── A plain centered check-circle reads as a purpose-built app state rather than a reused label component — used on the reset-password success view. */ .fd-success-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--fd-success-bg); color: var(--fd-success-border); display: flex; align-items: center; justify-content: center; margin: 0 0 18px; } .fd-success-icon svg { width: 26px; height: 26px; } /* ─── RESPONSIVE ───────────────────────────────────────────────────────── */ @media (max-width: 480px) { .fd-auth-card { padding: 26px 20px; border-radius: 18px; } .fd-auth-main { padding: 24px 16px; } .fd-field-row { grid-template-columns: 1fr; } .fd-title { font-size: 23px; } .fd-guest-banner-wrap { padding: 0 16px; margin-top: 14px; } } /* ─── TWO-STEP REGISTRATION WIZARD (NEW, v2.4) ──────────────────────────── Reuses existing tokens (--fd-accent-*, --fd-success-*, --fd-input-*), the existing .fd-otp-box / .fd-resend-btn styles from the forgot-password flow above, and the existing .fd-fade-slide-in entrance animation for phase transitions — nothing new introduced for those pieces. */ .fd-reg-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; } .fd-reg-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .fd-reg-step-dot { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--fd-input-bg); border: 1.5px solid var(--fd-input-border); color: var(--fd-text-faint); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .fd-reg-step-check { width: 14px; height: 14px; display: none; } .fd-reg-step-label { font-size: 12.5px; font-weight: 600; color: var(--fd-text-faint); white-space: nowrap; transition: color 0.25s ease; } .fd-reg-step-line { flex: 1 1 auto; height: 2px; min-width: 16px; background: var(--fd-input-border); border-radius: 2px; transition: background 0.3s ease; } .fd-reg-step-line.fd-reg-step-line-complete { background: var(--fd-success-border); } .fd-reg-step-active .fd-reg-step-dot { border-color: transparent; background: var(--fd-accent-1); color: #fff; } .fd-reg-step-active .fd-reg-step-label { color: var(--fd-text-primary); } .fd-reg-step-complete .fd-reg-step-dot { border-color: transparent; background: var(--fd-success-border); color: #fff; } .fd-reg-step-complete .fd-reg-step-num { display: none; } .fd-reg-step-complete .fd-reg-step-check { display: block; } .fd-reg-step-complete .fd-reg-step-label { color: var(--fd-success-text); } .fd-reg-phase-hidden { display: none; } .fd-phase-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--fd-text-primary); } .fd-reg-verified-note { display: flex; align-items: center; gap: 8px; background: var(--fd-success-bg); border: 1px solid var(--fd-success-border); color: var(--fd-success-text); padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-bottom: 20px; } .fd-reg-verified-note svg { width: 16px; height: 16px; flex-shrink: 0; } @media (max-width: 380px) { .fd-reg-steps { gap: 6px; margin-bottom: 22px; } .fd-reg-step { gap: 6px; } .fd-reg-step-dot { width: 22px; height: 22px; font-size: 11px; } .fd-reg-step-label { font-size: 11px; } }