/* ============================================================================ BelegGenie — Premium Blue Auth Design System Shared by every page under views/auth/*.html (login, register, verify-email, forgot/reset password). One system instead of seven drifting copies. Theme convention matches the rest of the app: DARK is the default surface, html.light overrides to the light palette (see existing login/register pages and app-shell.css) — same localStorage keys ('bs-theme' / 'theme'). ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } :root{ /* Premium Blue palette — brand spec */ --auth-primary:#2563EB; --auth-primary-hover:#1D4ED8; --auth-secondary:#3B82F6; --auth-accent:#60A5FA; --auth-success:#10B981; --auth-danger:#EF4444; --auth-gradient:linear-gradient(135deg,#2563EB 0%,#3B82F6 100%); --auth-gradient-hover:linear-gradient(135deg,#1D4ED8 0%,#2563EB 100%); /* Dark surface (default) */ --auth-bg-0:#0B1220; --auth-bg-1:#0F172A; --auth-bg-2:#131f38; --auth-card:rgba(15,23,42,0.72); --auth-card-border:rgba(96,165,250,0.16); --auth-text:#F1F5F9; --auth-text-muted:#94A3B8; --auth-input-bg:rgba(255,255,255,0.05); --auth-input-border:rgba(148,163,184,0.18); --auth-divider:rgba(148,163,184,0.14); --auth-radius-sm:10px; --auth-radius:14px; --auth-radius-lg:22px; --auth-ease:cubic-bezier(0.4,0,0.2,1); --auth-ease-spring:cubic-bezier(0.34,1.56,0.64,1); --auth-t:220ms var(--auth-ease); --auth-t-slow:560ms var(--auth-ease); /* Typographic scale — one shared rhythm for every auth page */ --auth-fs-xs:.75rem; /* micro labels, hints */ --auth-fs-sm:.8125rem; /* footnotes, chips */ --auth-fs-base:.9375rem; /* inputs, buttons, body copy */ --auth-fs-md:1rem; /* emphasized body copy */ --auth-fs-lg:1.0625rem; /* subtitle */ --auth-fs-xl:1.5rem; /* card heading */ --auth-fs-2xl:clamp(1.625rem,2.4vw + 1rem,2.375rem); /* hero heading */ /* One control rhythm — inputs, selects and every button share these so their rendered heights line up pixel-for-pixel (font-size + line-height + padding + border, all identical; box-sizing:border-box only matters with an explicit height, so intrinsic height here is purely additive — keep the four values in lockstep instead of hardcoding a height). */ --auth-control-fs:var(--auth-fs-base); --auth-control-lh:1.3; --auth-control-py:13px; --auth-control-border-w:1.5px; } html.light{ --auth-bg-0:#EFF4FF; --auth-bg-1:#F8FAFC; --auth-bg-2:#ffffff; --auth-card:rgba(255,255,255,0.86); --auth-card-border:rgba(37,99,235,0.12); --auth-text:#0F172A; --auth-text-muted:#64748B; --auth-input-bg:rgba(37,99,235,0.035); --auth-input-border:rgba(15,23,42,0.10); --auth-divider:rgba(15,23,42,0.08); } html, body.auth-page{ height:auto; } body.auth-page{ margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px; line-height:1.5; color:var(--auth-text); background: radial-gradient(1200px 700px at 15% -10%, rgba(37,99,235,0.22), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(96,165,250,0.16), transparent 55%), linear-gradient(160deg, var(--auth-bg-0) 0%, var(--auth-bg-1) 55%, var(--auth-bg-2) 100%); position:relative; overflow-x:hidden; transition:background var(--auth-t-slow), color var(--auth-t); } html.light body.auth-page{ background: radial-gradient(1200px 700px at 15% -10%, rgba(37,99,235,0.10), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(96,165,250,0.10), transparent 55%), linear-gradient(160deg, var(--auth-bg-0) 0%, var(--auth-bg-1) 55%, var(--auth-bg-2) 100%); } /* Flex-centers exactly ONE region (the hero+card, or a lone card) without turning itself into a flex row — that was the bug: body used to be `display:flex` directly, so a second top-level block (the pricing section below the login card) became a flex SIBLING and got squeezed into the same row instead of stacking underneath, overflowing the viewport horizontally. Any additional content (e.g. login's pricing section) lives OUTSIDE this wrapper, in normal block flow. */ .auth-center{ position:relative; z-index:1; width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:88px 20px 40px; } /* ── Animated background: floating orbs + drifting particles ─────────────── */ .auth-bg{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .auth-orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; animation:authOrbFloat var(--dur,22s) ease-in-out infinite; } .auth-orb.o1{ width:340px; height:340px; background:radial-gradient(circle,var(--auth-primary),transparent 70%); top:-80px; left:-60px; --dur:24s; } .auth-orb.o2{ width:420px; height:420px; background:radial-gradient(circle,var(--auth-secondary),transparent 70%); bottom:-140px; right:-100px; --dur:28s; animation-delay:-6s; } .auth-orb.o3{ width:260px; height:260px; background:radial-gradient(circle,var(--auth-accent),transparent 70%); top:40%; right:10%; --dur:20s; animation-delay:-11s; opacity:.22; } html.light .auth-orb{ opacity:.18; } @keyframes authOrbFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(40px,-36px) scale(1.06); } } .auth-particle{ position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(96,165,250,.45); animation:authParticleRise var(--dur,14s) linear infinite; } @keyframes authParticleRise{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ transform:translateY(-110vh) translateX(60px); opacity:0; } } /* ── Entrance animations ───────────────────────────────────────────────── */ @keyframes authFadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } } @keyframes authSlideL{ from{ opacity:0; transform:translateX(-36px); } to{ opacity:1; transform:translateX(0); } } @keyframes authSlideR{ from{ opacity:0; transform:translateX(36px); } to{ opacity:1; transform:translateX(0); } } @keyframes authScaleIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } } @keyframes authFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } @keyframes authSpin{ to{ transform:rotate(360deg); } } @keyframes authShake{ 10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); } 30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); } } @keyframes authPulseRing{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.45); } 70%{ box-shadow:0 0 0 16px rgba(16,185,129,0); } 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0); } } @keyframes authCheckDraw{ from{ stroke-dashoffset:48; } to{ stroke-dashoffset:0; } } @keyframes authShimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } } .auth-anim-fadeup{ animation:authFadeUp var(--auth-t-slow) both; } .auth-anim-slidel{ animation:authSlideL var(--auth-t-slow) both; } .auth-anim-slider{ animation:authSlideR var(--auth-t-slow) both; } .auth-anim-scalein{ animation:authScaleIn 640ms var(--auth-ease-spring) both; } .auth-anim-float{ animation:authFloat 5s ease-in-out infinite; } /* ── Layout ─────────────────────────────────────────────────────────────── */ .auth-split{ width:100%; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:center; } .auth-only{ max-width:440px; display:block; } /* ── Hero (right column) ───────────────────────────────────────────────── */ .auth-hero{ display:flex; flex-direction:column; justify-content:center; gap:24px; min-width:0; } .auth-hero-badge{ display:inline-flex; align-items:center; gap:8px; width:fit-content; padding:8px 15px; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.24); border-radius:22px; font-size:var(--auth-fs-sm); font-weight:600; color:var(--auth-secondary); line-height:1.3; } .auth-hero-title{ font-size:var(--auth-fs-2xl); font-weight:800; line-height:1.15; letter-spacing:-0.02em; margin:0; background:var(--auth-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .auth-hero-desc{ font-size:var(--auth-fs-md); color:var(--auth-text-muted); line-height:1.65; max-width:420px; margin:0; } /* ── Single-feature showcase (auto-cycling, one at a time) ─────────────── Replaces the old "show every feature card at once" layout — only one feature is on screen, cross-fading + sliding to the next every few seconds (auth.js: Auth.initShowcase). Fixed min-height reserves space so the card never reflows the page as copy length changes between features. */ .auth-showcase{ background:var(--auth-card); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--auth-card-border); border-radius:var(--auth-radius-lg); padding:28px 26px; margin-top:4px; box-shadow:0 22px 50px rgba(15,23,42,.2); min-height:196px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; } .auth-showcase-item{ display:flex; flex-direction:column; gap:14px; transition:opacity 480ms var(--auth-ease), transform 480ms var(--auth-ease); } .auth-showcase-item.leaving{ opacity:0; transform:translateY(-10px); position:absolute; inset:28px 26px; } .auth-showcase-item.entering{ opacity:0; transform:translateY(10px); } .auth-showcase-item.shown{ opacity:1; transform:translateY(0); } .auth-showcase-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--auth-gradient); box-shadow:0 8px 20px rgba(37,99,235,.35); flex-shrink:0; } .auth-showcase-icon svg{ width:22px; height:22px; color:#fff; } .auth-showcase-title{ font-size:1.05rem; font-weight:700; color:var(--auth-text); margin:0; letter-spacing:-0.005em; } .auth-showcase-desc{ font-size:var(--auth-fs-sm); color:var(--auth-text-muted); line-height:1.55; margin:0; } .auth-showcase-stat{ display:inline-flex; align-items:baseline; gap:6px; margin-top:2px; } .auth-showcase-stat .num{ font-size:1.3rem; font-weight:800; color:var(--auth-secondary); } .auth-showcase-stat .label{ font-size:var(--auth-fs-xs); color:var(--auth-text-muted); font-weight:600; } .auth-showcase-dots{ display:flex; gap:6px; margin-top:20px; } .auth-showcase-dot{ width:6px; height:6px; border-radius:50%; background:var(--auth-input-border); transition:all var(--auth-t-slow); cursor:pointer; border:none; padding:0; } .auth-showcase-dot.active{ width:20px; border-radius:4px; background:var(--auth-gradient); } .auth-trust-row{ display:flex; align-items:center; gap:20px; margin-top:2px; flex-wrap:wrap; } .auth-trust-item{ display:flex; align-items:center; gap:7px; font-size:var(--auth-fs-xs); color:var(--auth-text-muted); font-weight:600; } .auth-trust-item svg{ width:14px; height:14px; color:var(--auth-success); flex-shrink:0; } /* ── Glass card (form column) ──────────────────────────────────────────── */ .auth-card{ background:var(--auth-card); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); border:1px solid var(--auth-card-border); border-radius:var(--auth-radius-lg); padding:40px 36px; position:relative; overflow:hidden; min-width:0; box-shadow:0 24px 70px rgba(0,0,0,.28), 0 0 90px rgba(37,99,235,.07); } .auth-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(96,165,250,.55),transparent); } .auth-logo-wrap{ display:flex; justify-content:center; margin-bottom:20px; } .auth-logo-wrap img{ width:52px; height:52px; border-radius:13px; filter:drop-shadow(0 6px 16px rgba(37,99,235,.35)); transition:transform var(--auth-t); } .auth-logo-wrap img:hover{ transform:scale(1.06) rotate(-2deg); } .auth-title{ font-size:var(--auth-fs-xl); font-weight:800; text-align:center; margin:0 0 8px; line-height:1.25; letter-spacing:-0.01em; } .auth-subtitle{ text-align:center; font-size:var(--auth-fs-base); color:var(--auth-text-muted); margin:0 0 28px; line-height:1.6; } /* ── Form elements ──────────────────────────────────────────────────────── */ .auth-field{ margin-bottom:18px; text-align:left; } .auth-field.row2{ display:flex; gap:14px; } .auth-field.row2 > div{ flex:1; min-width:0; } .auth-field:last-of-type{ margin-bottom:0; } .auth-label{ display:block; font-size:var(--auth-fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--auth-text-muted); margin-bottom:8px; line-height:1.3; } .auth-input-wrap{ position:relative; } .auth-input, .auth-select{ width:100%; padding:var(--auth-control-py) 16px; background:var(--auth-input-bg); border:var(--auth-control-border-w) solid var(--auth-input-border); border-radius:var(--auth-radius-sm); color:var(--auth-text); font-family:inherit; font-size:var(--auth-control-fs); line-height:var(--auth-control-lh); outline:none; transition:border-color var(--auth-t), box-shadow var(--auth-t), background var(--auth-t); } .auth-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; } .auth-select option{ background:var(--auth-bg-1); color:var(--auth-text); } html.light .auth-select option{ background:#fff; } .auth-input::placeholder{ color:var(--auth-text-muted); opacity:.7; } .auth-input:focus, .auth-select:focus{ border-color:var(--auth-primary); background:rgba(37,99,235,.06); box-shadow:0 0 0 4px rgba(37,99,235,.13), 0 0 24px rgba(37,99,235,.10); } .auth-input.has-error{ border-color:var(--auth-danger); animation:authShake 480ms var(--auth-ease); } .auth-input.is-valid{ border-color:var(--auth-success); } .auth-input[type="password"]{ padding-right:46px; } .auth-input:disabled{ opacity:.65; cursor:not-allowed; } .auth-input-icon{ position:absolute; right:13px; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--auth-text-muted); display:flex; padding:3px; transition:color var(--auth-t); background:none; border:none; } .auth-input-icon:hover{ color:var(--auth-primary); } .auth-input-icon svg{ width:18px; height:18px; } .auth-hint{ font-size:var(--auth-fs-xs); color:var(--auth-text-muted); margin-top:6px; line-height:1.4; } .auth-error{ font-size:var(--auth-fs-xs); color:var(--auth-danger); margin-top:6px; min-height:1.3em; font-weight:500; line-height:1.4; } /* Password strength meter */ .auth-strength{ margin-top:10px; } .auth-strength-bars{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:6px; } .auth-strength-bars i{ height:4px; border-radius:3px; background:var(--auth-input-border); transition:background var(--auth-t); } .auth-strength-label{ font-size:var(--auth-fs-xs); font-weight:600; color:var(--auth-text-muted); min-height:1.4em; display:block; } .auth-strength[data-level="1"] .auth-strength-bars i:nth-child(1){ background:var(--auth-danger); } .auth-strength[data-level="1"] .auth-strength-label{ color:var(--auth-danger); } .auth-strength[data-level="2"] .auth-strength-bars i:nth-child(-n+2){ background:#F59E0B; } .auth-strength[data-level="2"] .auth-strength-label{ color:#F59E0B; } .auth-strength[data-level="3"] .auth-strength-bars i:nth-child(-n+3){ background:var(--auth-secondary); } .auth-strength[data-level="3"] .auth-strength-label{ color:var(--auth-secondary); } .auth-strength[data-level="4"] .auth-strength-bars i{ background:var(--auth-success); } .auth-strength[data-level="4"] .auth-strength-label{ color:var(--auth-success); } /* Checkbox */ .auth-checkbox-row{ display:flex; align-items:flex-start; gap:10px; margin:2px 0 22px; font-size:var(--auth-fs-sm); color:var(--auth-text-muted); line-height:1.5; } .auth-checkbox{ appearance:none; width:19px; height:19px; min-width:19px; margin-top:1px; border:1.6px solid var(--auth-input-border); border-radius:6px; background:transparent; cursor:pointer; position:relative; transition:all var(--auth-t); } .auth-checkbox:hover{ border-color:var(--auth-primary); } .auth-checkbox:checked{ background:var(--auth-gradient); border-color:var(--auth-primary); } .auth-checkbox:checked::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800; } .auth-checkbox-row a{ color:var(--auth-primary); font-weight:600; text-decoration:none; } .auth-checkbox-row a:hover{ text-decoration:underline; } /* ── Buttons — same font-size/line-height/vertical-padding/border-width as inputs (see --auth-control-*), so every control lines up at the same height whether it's an ,