/* ============================================================================ Auth pages design system — login / register / forgot / reset / verify. Loaded standalone (no header.php), so we re-declare any tokens we use instead of relying on whatz-ui.css. Inter + JetBrains Mono come from the Google Fonts in each auth file's . ============================================================================ */ :root { --au-brand: #1bca3f; --au-brand-2: #92df48; --au-brand-dark: #117a26; --au-brand-soft: rgba(27, 202, 63, 0.12); --au-brand-grad: linear-gradient(120deg, #92df48 0%, #1bca3f 100%); --au-brand-grad-2: linear-gradient(135deg, #4ade80 0%, #16a34a 60%, #117a26 100%); --au-ink: #0f172a; --au-ink-2: #1e293b; --au-ink-soft: #475569; --au-muted: #94a3b8; --au-line: rgba(255, 255, 255, 0.10); --au-line-strong: rgba(255, 255, 255, 0.18); --au-glass: rgba(15, 23, 42, 0.55); --au-card-bg: rgba(255, 255, 255, 0.97); --au-danger: #ef4444; --au-info: #60a5fa; --au-shadow: 0 30px 90px -25px rgba(0, 0, 0, 0.55); --au-radius: 22px; --au-radius-inner: 14px; --au-ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body.auth-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--au-ink); background: #050b18; /* Lock the page to the viewport — the card sizes to fit and any tall form content scrolls inside the right pane (not the whole page). */ height: 100vh; max-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.008em; } /* ============================================================================ Animated background — gradient + floating blobs + dot grid overlay ============================================================================ */ .au-bg { position: fixed; inset: 0; z-index: -2; background: radial-gradient(at 12% 18%, rgba(27, 202, 63, 0.22), transparent 38%), radial-gradient(at 88% 80%, rgba(146, 223, 72, 0.18), transparent 42%), radial-gradient(at 50% 50%, rgba(56, 189, 248, 0.06), transparent 60%), linear-gradient(135deg, #050b18 0%, #0f172a 55%, #050b18 100%); } .au-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0); background-size: 28px 28px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); } .au-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; animation: au-drift 22s ease-in-out infinite; } .au-blob.b1 { width: 520px; height: 520px; background: var(--au-brand); top: -160px; left: -120px; } .au-blob.b2 { width: 420px; height: 420px; background: var(--au-brand-2); bottom: -140px; right: -90px; animation-delay: -8s; } .au-blob.b3 { width: 340px; height: 340px; background: #38bdf8; top: 38%; right: 22%; animation-delay: -14s; opacity: 0.32; } @keyframes au-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 40px) scale(0.94); } } /* ============================================================================ Main card — two-pane layout for login, single-pane for the other pages ============================================================================ */ .au-card { width: 100%; max-width: 1080px; max-height: calc(100vh - 32px); /* respect the 16px body padding either side */ background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--au-line-strong); border-radius: var(--au-radius); box-shadow: var(--au-shadow); overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; animation: au-card-in 0.7s var(--au-ease) both; } .au-card.is-narrow { max-width: 460px; grid-template-columns: 1fr; } @keyframes au-card-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ----- Brand panel (left side on desktop) ----- */ .au-panel { background: linear-gradient(135deg, #051b0a 0%, #0a2912 45%, #0c1b22 100%); color: #fff; padding: 30px 32px 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; } .au-panel::before { /* subtle brand glow at top-left */ content: ""; position: absolute; top: -180px; left: -120px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(27, 202, 63, 0.45) 0%, transparent 60%); filter: blur(20px); pointer-events: none; } .au-panel-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; margin-bottom: 28px; } .au-panel-brand img { height: 38px; width: auto; display: block; } .au-panel-brand .au-brand-name { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; background: linear-gradient(120deg, #d3f5be 0%, #fff 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .au-panel-body { position: relative; z-index: 1; flex: 1; } .au-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--au-brand-2); background: rgba(146, 223, 72, 0.12); border: 1px solid rgba(146, 223, 72, 0.30); padding: 5px 11px; border-radius: 999px; margin-bottom: 18px; } .au-eyebrow .au-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--au-brand); box-shadow: 0 0 0 0 rgba(27, 202, 63, 0.55); animation: au-pulse 1.6s ease infinite; } @keyframes au-pulse { 0% { box-shadow: 0 0 0 0 rgba(27, 202, 63, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(27, 202, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(27, 202, 63, 0); } } .au-headline { font-size: 28px; line-height: 1.14; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 12px; color: #fff; } .au-headline em { font-style: normal; background: linear-gradient(120deg, #92df48 10%, #1bca3f 60%, #4ade80 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .au-subhead { font-size: 13.5px; line-height: 1.55; color: rgba(226, 232, 240, 0.85); margin: 0 0 18px; max-width: 38ch; } /* ----- Animated chat preview + lead-capture loop ----- The whole `.au-chat` runs an 8s loop that visualises: (a) customer sends an inbound message (b) instance shows "sending..." typing dots (c) auto-reply goes out (d) customer confirms (e) a "+ 1 lead captured" toast pops out to the side then everything fades back to start. Pure CSS, no JS needed. ----------------------------------------------------------- */ .au-chat { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; padding: 12px 14px; backdrop-filter: blur(6px); margin-bottom: 16px; position: relative; } .au-chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 10px; } .au-chat-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--au-brand-grad); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; } .au-chat-name { font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.1; } .au-chat-sub { font-size: 10.5px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; line-height: 1; } .au-chat-sub .au-chat-online { display: inline-block; width: 6px; height: 6px; background: var(--au-brand); border-radius: 50%; margin-right: 4px; vertical-align: middle; animation: au-pulse 1.6s ease infinite; } /* "Send progress" bar inside the chat header — emulates the gateway dispatching the auto-reply to the WhatsApp servers. */ .au-send-progress { margin-left: auto; width: 64px; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; position: relative; } .au-send-progress::after { content: ""; position: absolute; inset: 0; background: var(--au-brand-grad); transform: translateX(-100%); animation: au-send-bar 8s ease-in-out infinite; } .au-bubbles { display: flex; flex-direction: column; gap: 6px; min-height: 138px; position: relative; } .au-bubble { max-width: 80%; padding: 7px 11px; border-radius: 13px; font-size: 12.5px; line-height: 1.4; opacity: 0; animation: au-bubble-cycle 8s var(--au-ease) infinite; } .au-bubble.in { align-self: flex-start; background: rgba(255, 255, 255, 0.95); color: #0f172a; border-bottom-left-radius: 4px; } .au-bubble.out { align-self: flex-end; background: var(--au-brand-grad); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 12px -4px rgba(27, 202, 63, 0.5); } .au-bubble.is-typing { padding: 6px 10px; } .au-bubble:nth-child(1) { animation-delay: 0s; } .au-bubble:nth-child(2) { animation-delay: 1.0s; } .au-bubble:nth-child(3) { animation-delay: 2.2s; } .au-bubble:nth-child(4) { animation-delay: 4.0s; } .au-bubble .au-typing { display: inline-flex; align-items: center; gap: 3px; padding: 3px 2px; } .au-bubble .au-typing span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); animation: au-type 1.2s ease-in-out infinite; } .au-bubble .au-typing span:nth-child(2) { animation-delay: 0.2s; } .au-bubble .au-typing span:nth-child(3) { animation-delay: 0.4s; } /* "Lead captured" toast — slides in over the chat at ~5s and fades out. Repeats with the 8s parent loop so the user sees one lead per cycle. */ .au-lead-toast { position: absolute; bottom: 4px; right: 8px; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(146, 223, 72, 0.45); border-radius: 12px; box-shadow: 0 14px 32px -12px rgba(27, 202, 63, 0.55); opacity: 0; transform: translateY(10px) scale(0.94); animation: au-lead-toast 8s ease-in-out infinite; animation-delay: 5.2s; z-index: 2; } .au-lead-toast .au-lead-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--au-brand-grad); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0; } .au-lead-toast .au-lead-title { font-size: 11.5px; font-weight: 800; color: #fff; letter-spacing: -0.1px; line-height: 1.1; } .au-lead-toast .au-lead-sub { font-size: 10px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; line-height: 1; } .au-lead-toast .au-lead-counter { margin-left: 4px; background: rgba(146, 223, 72, 0.18); border: 1px solid rgba(146, 223, 72, 0.40); color: #d1fae5; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.3px; } @keyframes au-type { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-3px); opacity: 1; } } /* Each bubble fades in, lingers, and stays visible until the loop resets. */ @keyframes au-bubble-cycle { 0% { opacity: 0; transform: translateY(8px) scale(0.96); } 7%, 90% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-4px); } } @keyframes au-send-bar { 0%, 14% { transform: translateX(-100%); } 35% { transform: translateX(0); } 55% { transform: translateX(0); } 65%, 100% { transform: translateX(110%); } } @keyframes au-lead-toast { 0%, 50% { opacity: 0; transform: translateY(10px) scale(0.94); } 58% { opacity: 1; transform: translateY(0) scale(1); } 78% { opacity: 1; transform: translateY(0) scale(1); } 92%, 100% { opacity: 0; transform: translateY(-6px) scale(0.98); } } /* ----- Stat trio (social proof) ----- */ .au-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; } .au-stat { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 10px 10px; text-align: center; transition: transform 0.3s var(--au-ease), border-color 0.3s var(--au-ease); } .au-stat:hover { transform: translateY(-2px); border-color: rgba(146, 223, 72, 0.30); } .au-stat-val { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; color: #fff; margin-bottom: 2px; } .au-stat-val em { font-style: normal; background: linear-gradient(120deg, #92df48, #4ade80); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .au-stat-label { font-size: 11px; color: rgba(255, 255, 255, 0.55); font-weight: 600; letter-spacing: 0.3px; } .au-panel-foot { margin-top: 22px; position: relative; z-index: 1; font-size: 12px; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; gap: 6px; } .au-panel-foot i { font-size: 12px; } /* ============================================================================ Form pane (right side on desktop, full-width on mobile) ============================================================================ */ .au-form { background: var(--au-card-bg); padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; position: relative; /* If the form is taller than the card (e.g. signup with 6 fields on a short viewport), scroll inside the form pane instead of the page. */ overflow-y: auto; max-height: calc(100vh - 32px); } .au-form::-webkit-scrollbar { width: 6px; } .au-form::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; } .au-card.is-narrow .au-form { padding: 26px 26px; } /* Tab switcher (sign in / sign up) */ .au-tabs { display: inline-flex; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 4px; border-radius: 12px; margin-bottom: 24px; position: relative; gap: 2px; } .au-tab { border: 0; background: transparent; padding: 8px 18px; font-size: 13.5px; font-weight: 700; color: var(--au-ink-soft); cursor: pointer; border-radius: 9px; transition: color 0.18s var(--au-ease); font-family: inherit; } .au-tab.is-active { background: var(--au-brand-grad); color: #fff; box-shadow: 0 4px 12px -4px rgba(27, 202, 63, 0.5); } .au-tab:not(.is-active):hover { color: var(--au-ink); } /* Pane (a sign-in or sign-up panel inside .au-form). Cross-fade. */ .au-pane { display: none; animation: au-pane-in 0.45s var(--au-ease) both; } .au-pane.is-active { display: block; } @keyframes au-pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .au-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 4px; color: var(--au-ink); } .au-sub { font-size: 13.5px; color: var(--au-ink-soft); margin: 0 0 18px; line-height: 1.5; } /* Floating-label input */ .au-field { position: relative; margin-bottom: 11px; } .au-field.is-half { display: inline-block; width: calc(50% - 6px); vertical-align: top; } .au-field.is-half:nth-child(odd) { margin-right: 12px; } .au-field input, .au-field select { width: 100%; height: 46px; padding: 16px 14px 4px 42px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 13.5px; font-weight: 500; font-family: inherit; color: var(--au-ink); background: #fff; transition: border-color 0.2s var(--au-ease), box-shadow 0.2s var(--au-ease); outline: none; } .au-field input::placeholder { color: transparent; } .au-field input:hover, .au-field select:hover { border-color: #cbd5e1; } .au-field input:focus, .au-field select:focus { border-color: var(--au-brand); box-shadow: 0 0 0 4px rgba(27, 202, 63, 0.15); } .au-field label { position: absolute; left: 42px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #94a3b8; font-weight: 500; pointer-events: none; transition: all 0.18s var(--au-ease); background: transparent; padding: 0 4px; } .au-field input:focus + label, .au-field input:not(:placeholder-shown) + label, .au-field select:focus + label, .au-field select:not([value=""]) + label { top: 8px; transform: translateY(0); font-size: 10.5px; font-weight: 700; color: var(--au-brand-dark); text-transform: uppercase; letter-spacing: 0.4px; } .au-field .au-ficon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 15px; pointer-events: none; transition: color 0.18s var(--au-ease); } .au-field input:focus ~ .au-ficon { color: var(--au-brand); } .au-field .au-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; background: transparent; border: 0; color: #94a3b8; cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.18s var(--au-ease), background 0.18s var(--au-ease); } .au-field .au-pw-toggle:hover { color: var(--au-brand); background: var(--au-brand-soft); } .au-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; } .au-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--au-ink-soft); cursor: pointer; user-select: none; font-weight: 500; } .au-check input { width: 16px; height: 16px; accent-color: var(--au-brand); } .au-link { color: var(--au-brand-dark); text-decoration: none; font-weight: 600; font-size: 13px; transition: color 0.15s var(--au-ease); cursor: pointer; } .au-link:hover { color: var(--au-brand); text-decoration: underline; } /* CTA button */ .au-btn { width: 100%; height: 46px; background: var(--au-brand-grad); color: #fff; border: 0; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.18s var(--au-ease), box-shadow 0.18s var(--au-ease); box-shadow: 0 8px 22px -8px rgba(27, 202, 63, 0.6); position: relative; overflow: hidden; font-family: inherit; letter-spacing: -0.01em; } .au-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); transition: left 0.55s var(--au-ease); } .au-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(27, 202, 63, 0.7); } .au-btn:hover:not(:disabled)::before { left: 100%; } .au-btn:disabled { opacity: 0.6; cursor: wait; transform: none; } .au-btn.is-ghost { background: #fff; color: var(--au-ink); border: 1.5px solid #e2e8f0; box-shadow: none; } .au-btn.is-ghost:hover:not(:disabled) { border-color: var(--au-brand); color: var(--au-brand-dark); background: var(--au-brand-soft); } .au-btn .au-spinner { display: none; width: 16px; height: 16px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: au-spin 0.8s linear infinite; } .au-btn.is-loading .au-label { opacity: 0; } .au-btn.is-loading .au-spinner { display: inline-block; position: absolute; } @keyframes au-spin { to { transform: rotate(360deg); } } /* Success / error states — used by the auth-page button state machine. */ .au-btn.is-success { background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); box-shadow: 0 8px 22px -8px rgba(34, 197, 94, 0.55); cursor: default; } .au-btn.is-success:hover { transform: none; } .au-btn.is-error { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); box-shadow: 0 8px 22px -8px rgba(239, 68, 68, 0.55); animation: au-btn-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } .au-btn.is-error:hover { transform: none; } @keyframes au-btn-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { .au-btn.is-error { animation: none; } } .au-switch { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--au-ink-soft); font-weight: 500; } .au-switch a { color: var(--au-brand-dark); font-weight: 700; text-decoration: none; margin-left: 4px; cursor: pointer; } .au-switch a:hover { text-decoration: underline; } /* Inline status banners (success / error / info) — used by static pages */ .au-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; font-weight: 500; } .au-banner i { font-size: 18px; flex-shrink: 0; margin-top: 1px; } .au-banner.is-success { background: rgba(27, 202, 63, 0.08); border: 1px solid rgba(27, 202, 63, 0.25); color: #117a26; } .au-banner.is-success i { color: var(--au-brand); } .au-banner.is-error { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); color: #991b1b; } .au-banner.is-error i { color: var(--au-danger); } .au-banner.is-info { background: rgba(96, 165, 250, 0.08); border: 1px solid rgba(96, 165, 250, 0.25); color: #1e3a8a; } .au-banner.is-info i { color: var(--au-info); } /* Logo for the narrow / standalone variants */ .au-narrow-logo { text-align: center; margin-bottom: 22px; } .au-narrow-logo img { height: 48px; } .au-narrow-logo .au-narrow-name { display: block; margin-top: 8px; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -0.3px; } /* ============================================================================ Responsive — collapse the brand panel below the form on mobile, then hide it entirely on the smallest screens. ============================================================================ */ @media (max-width: 960px) { .au-card { grid-template-columns: 1fr; max-width: 520px; } .au-panel { padding: 26px 28px; min-height: 0; } .au-headline { font-size: 24px; } .au-chat { display: none; } /* keep mobile fast and uncluttered */ .au-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { body.auth-body { padding: 0; align-items: stretch; } .au-card { border-radius: 0; min-height: 100vh; border: 0; box-shadow: none; } .au-panel { padding: 22px 22px; } .au-form { padding: 28px 22px; } .au-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .au-stat-val { font-size: 16px; } .au-headline { font-size: 22px; } .au-field.is-half { display: block; width: 100%; margin-right: 0 !important; } } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }