/* ============================================ THEME VARIABLES Dark = default Light = applied when ============================================ */ /* DARK THEME (default) */ :root { --bg-main: #0d1117; --bg-top: #1f2937; --bg-bottom: #1d4ed8; --card-bg: rgba(31, 41, 55, 0.75); --card-bg-hover: rgba(31, 41, 55, 0.9); --border-subtle: rgba(148, 163, 184, 0.25); --text-main: #e5e7eb; --text-muted: #9ca3af; --btn-grad-start: #2563eb; --btn-grad-end: #4f46e5; --btn-shadow: rgba(37, 99, 235, 0.4); --btn-shadow-hover: rgba(37, 99, 235, 0.55); --error-bg: rgba(239, 68, 68, 0.12); --error-border: rgba(239, 68, 68, 0.4); --error-text: #f87171; } /* LIGHT THEME */ html.light-theme { --bg-main: #ffffff; --bg-top: #e8eef7; /* soft light slate */ --bg-bottom: #d6e4ff; /* soft light blue */ --card-bg: rgba(255, 255, 255, 0.75); --card-bg-hover: rgba(255, 255, 255, 0.9); --border-subtle: rgba(0, 0, 0, 0.08); --text-main: #1f2937; --text-muted: #6b7280; --btn-grad-start: #3b82f6; --btn-grad-end: #6366f1; --btn-shadow: rgba(59, 130, 246, 0.25); --btn-shadow-hover: rgba(59, 130, 246, 0.35); --error-bg: #fee2e2; --error-border: #fecaca; --error-text: #b91c1c; } /* ============================================ LOGIN PAGE STYLES (theme-aware) ============================================ */ /* Background (same structure as pricing page) */ .login-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top left, var(--bg-top) 0, transparent 50%), radial-gradient(circle at bottom right, var(--bg-bottom) 0, transparent 55%), var(--bg-main); } /* Center wrapper */ .login-center { width: 100%; max-width: 420px; padding: 20px; } /* Card (glassmorphism) */ .login-card { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 16px; backdrop-filter: blur(14px); padding: 32px 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); color: var(--text-main); } /* Header */ .login-header h2 { margin: 0; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); } .login-header p { margin: 6px 0 24px; font-size: 0.9rem; color: var(--text-muted); } /* Fields */ .login-fields dx\:BootstrapTextBox { margin-bottom: 20px; } /* Button */ .login-btn { width: 100% !important; border-radius: 10px !important; padding: 10px 0 !important; font-weight: 600 !important; font-size: 1rem !important; background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)) !important; border: none !important; color: #fff !important; box-shadow: 0 12px 30px var(--btn-shadow) !important; } .login-btn:hover { filter: brightness(1.08); box-shadow: 0 16px 36px var(--btn-shadow-hover) !important; } /* Error box */ .login-error { margin-top: 18px; padding: 10px 14px; min-height: 34px; border-radius: 10px; background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); font-size: 0.85rem; display: flex; align-items: center; } /* Mobile */ @media (max-width: 480px) { .login-card { padding: 24px 20px; } .login-header h2 { font-size: 1.6rem; } } #tbLogin, #tbPass { margin-top: 5px; margin-bottom: 5px; }