/* ═══════════════════════════════════════════════════════════════ Algo Trading Pro — Custom Auth Pages v1.0 ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap'); :root { --auth-bg: #0a1628; --auth-bg2: #111d35; --auth-blue: #2563eb; --auth-blue-d: #1d4ed8; --auth-blue-l: #eff6ff; --auth-green: #16a34a; --auth-green-l: #f0fdf4; --auth-red: #dc2626; --auth-red-l: #fef2f2; --auth-card: #fff; --auth-border: #e2e8f0; --auth-text: #0f172a; --auth-muted: #64748b; --auth-subtle: #94a3b8; --auth-input-bg: #f8fafc; --r: 14px; --rsm: 8px; --shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 20px 50px -10px rgba(0,0,0,.18); } *, *::before, *::after { box-sizing: border-box; } /* ── Page wrapper ────────────────────────────────────────────── */ .atp-auth-wrap { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px 48px; } /* Optional: if your theme wraps the page in a very narrow container, add this class to the via the theme or a page template: */ body.atp-auth-fullpage { background: linear-gradient(135deg, #0a1628 0%, #1a2f5a 50%, #0e1e3d 100%); min-height: 100vh; } body.atp-auth-fullpage .atp-auth-wrap { min-height: 100vh; } /* ── Card ────────────────────────────────────────────────────── */ .atp-auth-card { background: var(--auth-card); border-radius: var(--r); box-shadow: var(--shadow); padding: 40px 36px 36px; width: 100%; max-width: 440px; position: relative; } /* Accent bar on top */ .atp-auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb); background-size: 200% 100%; animation: auth-shimmer 3s linear infinite; } @keyframes auth-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Logo / header ───────────────────────────────────────────── */ .atp-auth-logo { text-align: center; margin-bottom: 28px; } .atp-auth-logo-icon { font-size: 2.6em; line-height: 1; margin-bottom: 10px; } .atp-auth-title { font-size: 1.35em; font-weight: 800; color: var(--auth-text); margin: 0 0 5px; line-height: 1.2; } .atp-auth-subtitle { font-size: .85em; color: var(--auth-muted); margin: 0; } /* ── Notices ─────────────────────────────────────────────────── */ .atp-auth-notice { padding: 11px 14px; border-radius: var(--rsm); font-size: .85em; line-height: 1.5; margin-bottom: 18px; } .atp-auth-notice.err { background: var(--auth-red-l); color: #7f1d1d; border: 1px solid #fecaca; } .atp-auth-notice.ok { background: var(--auth-green-l); color: #14532d; border: 1px solid #bbf7d0; } /* ── Form ────────────────────────────────────────────────────── */ .atp-auth-form { display: flex; flex-direction: column; gap: 16px; } .atp-field-group { display: flex; flex-direction: column; gap: 5px; } .atp-field-label-row { display: flex; justify-content: space-between; align-items: baseline; } .atp-field-label { font-size: .8em; font-weight: 600; color: var(--auth-muted); text-transform: uppercase; letter-spacing: .5px; } .atp-field-label .req { color: var(--auth-red); font-weight: 700; } .atp-field-label .atp-optional { color: var(--auth-subtle); font-weight: 400; text-transform: none; } .atp-field-link { font-size: .8em; color: var(--auth-blue); text-decoration: none; } .atp-field-link:hover { text-decoration: underline; } /* Input with icon wrapper */ .atp-field-wrap { position: relative; display: flex; align-items: center; } .atp-field-icon { position: absolute; left: 12px; font-size: .9em; pointer-events: none; line-height: 1; top: 50%; transform: translateY(-50%); } .atp-field-input { width: 100%; padding: 11px 40px 11px 38px; border: 1.5px solid var(--auth-border); border-radius: var(--rsm); font-family: inherit; font-size: .92em; color: var(--auth-text); background: var(--auth-input-bg); transition: border-color .15s, box-shadow .15s; outline: none; } .atp-field-input:focus { border-color: var(--auth-blue); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .atp-field-input::placeholder { color: var(--auth-subtle); } .atp-field-input.input-err { border-color: var(--auth-red); } .atp-field-hint { font-size: .77em; color: var(--auth-muted); margin-top: 2px; } /* Password toggle */ .atp-pw-toggle { position: absolute; right: 10px; background: none; border: none; cursor: pointer; color: var(--auth-subtle); padding: 4px; display: flex; align-items: center; border-radius: 4px; transition: color .15s; } .atp-pw-toggle:hover { color: var(--auth-blue); } /* Password strength */ .atp-pw-strength { height: 4px; background: var(--auth-border); border-radius: 4px; overflow: hidden; margin-top: 6px; } .atp-pw-strength-fill { height: 100%; border-radius: 4px; transition: width .3s ease, background .3s; width: 0%; } .atp-pw-strength-label { font-size: .76em; font-weight: 600; margin-top: 3px; } .strength-weak .atp-pw-strength-fill { width: 25%; background: #ef4444; } .strength-fair .atp-pw-strength-fill { width: 50%; background: #f97316; } .strength-good .atp-pw-strength-fill { width: 75%; background: #eab308; } .strength-strong .atp-pw-strength-fill { width:100%; background: #22c55e; } .strength-weak .atp-pw-strength-label { color: #ef4444; } .strength-fair .atp-pw-strength-label { color: #f97316; } .strength-good .atp-pw-strength-label { color: #eab308; } .strength-strong .atp-pw-strength-label { color: #22c55e; } /* Password match */ .atp-pw-match { font-size: .77em; font-weight: 600; margin-top: 3px; } .atp-pw-match.match { color: var(--auth-green); } .atp-pw-match.no-match { color: var(--auth-red); } /* Remember me */ .atp-field-check-row { display: flex; align-items: center; } .atp-check-label { display: flex; align-items: center; gap: 8px; font-size: .86em; color: var(--auth-muted); cursor: pointer; user-select: none; } .atp-check-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--auth-blue); cursor: pointer; } /* ── Submit button ───────────────────────────────────────────── */ .atp-auth-btn { width: 100%; padding: 13px 20px; border: none; border-radius: var(--rsm); background: linear-gradient(135deg, var(--auth-blue) 0%, #1d4ed8 100%); color: white; font-family: inherit; font-size: .95em; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s, transform .1s, box-shadow .15s; box-shadow: 0 4px 14px rgba(37,99,235,.35); margin-top: 4px; letter-spacing: .2px; } .atp-auth-btn:hover:not(:disabled) { opacity: .92; box-shadow: 0 6px 20px rgba(37,99,235,.4); transform: translateY(-1px); } .atp-auth-btn:active:not(:disabled) { transform: translateY(0); } .atp-auth-btn:disabled { opacity: .6; cursor: not-allowed; } /* ── Google auth ─────────────────────────────────────────────── */ .atp-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--auth-muted); font-size: .78em; text-transform: uppercase; letter-spacing: .08em; } .atp-auth-divider::before, .atp-auth-divider::after { content: ''; flex: 1; height: 1px; background: #dbe4f0; } .atp-google-auth { display: flex; flex-direction: column; gap: 10px; } .atp-google-btn-wrap { width: 100%; min-height: 44px; } .atp-google-btn-wrap > div { width: 100% !important; } .atp-google-helper { margin: 0; text-align: center; font-size: .8em; color: var(--auth-muted); } .atp-google-status { min-height: 18px; font-size: .8em; text-align: center; color: #2563eb; } .atp-google-status.is-error { color: #dc2626; } .atp-google-status.is-success { color: #0f766e; } /* Spinner inside button */ .btn-spinner { width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; animation: auth-spin .65s linear infinite; flex-shrink: 0; } @keyframes auth-spin { to { transform: rotate(360deg); } } /* ── Footer link ─────────────────────────────────────────────── */ .atp-auth-footer-link { text-align: center; font-size: .84em; color: var(--auth-muted); margin: 18px 0 0; } .atp-auth-footer-link a { color: var(--auth-blue); font-weight: 600; text-decoration: none; } .atp-auth-footer-link a:hover { text-decoration: underline; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 480px) { .atp-auth-card { padding: 28px 20px 24px; } }