/* ========================================================================== auth.css · Login / Register / OTP screens These pages deliberately do NOT load bootstrap.css or global.css: they have no site header/footer, so every style they need lives here. That keeps the auth flow fast (no 250KB of unused CSS) and free of the `!important` theme overrides in global.css. Light theme follows the site convention: . ========================================================================== */ :root { --a-bg: #07070c; --a-glow-1: rgba(255, 65, 108, .20); --a-glow-2: rgba(112, 84, 255, .16); --a-surface: rgba(19, 19, 28, .82); --a-surface-2: rgba(255, 255, 255, .045); --a-surface-3: rgba(255, 255, 255, .08); --a-border: rgba(255, 255, 255, .10); --a-border-hi: rgba(255, 255, 255, .20); --a-text: #f5f6f8; --a-text-2: rgba(255, 255, 255, .66); --a-text-3: rgba(255, 255, 255, .44); --a-accent: #ff416c; --a-accent-2: #ff4b2b; --a-accent-soft: rgba(255, 65, 108, .12); --a-ok: #22c55e; --a-ok-soft: rgba(34, 197, 94, .12); --a-ok-line: rgba(34, 197, 94, .34); --a-warn: #f59e0b; --a-err: #f87171; --a-err-soft: rgba(248, 113, 113, .12); --a-err-line: rgba(248, 113, 113, .38); --a-r-lg: 22px; --a-r: 14px; --a-r-sm: 10px; --a-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85); --a-ring: 0 0 0 3px rgba(255, 65, 108, .18); } html[data-theme="light"] { --a-bg: #f4f5f9; --a-glow-1: rgba(255, 65, 108, .14); --a-glow-2: rgba(99, 102, 241, .10); --a-surface: #ffffff; --a-surface-2: #f4f5f7; --a-surface-3: #eaecf1; --a-border: #e4e6ec; --a-border-hi: #cfd3dc; --a-text: #171a21; --a-text-2: #5b6472; --a-text-3: #8b93a1; --a-accent: #e5386a; --a-accent-2: #ee4123; --a-accent-soft: rgba(229, 56, 106, .09); --a-ok: #16a34a; --a-ok-soft: rgba(22, 163, 74, .10); --a-ok-line: rgba(22, 163, 74, .28); --a-warn: #b45309; --a-err: #dc2626; --a-err-soft: rgba(220, 38, 38, .08); --a-err-line: rgba(220, 38, 38, .26); --a-shadow: 0 18px 50px -28px rgba(16, 24, 40, .35); --a-ring: 0 0 0 3px rgba(229, 56, 106, .15); } /* --------------------------------------------------------------- base ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: var(--a-bg); color: var(--a-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--a-accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; } svg { flex: 0 0 auto; } .a-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------- layout ---- */ .a-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh; } .a-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 18% 12%, var(--a-glow-1), transparent 62%), radial-gradient(55% 50% at 88% 88%, var(--a-glow-2), transparent 60%), var(--a-bg); } /* Brand / value panel — desktop only. */ .a-aside { display: none; position: relative; padding: 48px 52px; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--a-border); background: linear-gradient(160deg, rgba(255, 65, 108, .10), transparent 42%), var(--a-surface); overflow: hidden; } .a-aside::after { content: ''; position: absolute; right: -120px; bottom: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, var(--a-glow-1), transparent 68%); pointer-events: none; } /* ------------------------------------------------------- brand elements ---- */ .a-brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--a-text); text-decoration: none; } .a-brand:hover { text-decoration: none; } .a-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); box-shadow: 0 8px 20px -8px rgba(255, 65, 108, .7); } .a-aside-body { position: relative; z-index: 1; max-width: 420px; margin: 40px 0; } .a-aside-body h2 { margin: 0 0 12px; font-size: 2rem; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; } .a-aside-body h2 span { background: linear-gradient(90deg, var(--a-accent), var(--a-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .a-aside-body > p { margin: 0 0 30px; color: var(--a-text-2); } .a-perks { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .a-perks li { display: flex; gap: 13px; align-items: flex-start; } .a-perks .a-perk-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--a-accent); background: var(--a-accent-soft); border: 1px solid var(--a-border); } .a-perks strong { display: block; font-size: .92rem; font-weight: 600; } .a-perks small { color: var(--a-text-2); font-size: .82rem; line-height: 1.45; } .a-aside-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .78rem; color: var(--a-text-3); } .a-aside-foot span { display: inline-flex; align-items: center; gap: 6px; } /* ---------------------------------------------------------- main column ---- */ .a-main { display: flex; flex-direction: column; padding: 20px 18px 40px; } .a-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 440px; margin: 0 auto 18px; } .a-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--a-border); border-radius: 11px; background: var(--a-surface-2); color: var(--a-text-2); cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .a-icon-btn:hover { color: var(--a-accent); border-color: var(--a-border-hi); } .a-icon-btn > span { display: grid; place-items: center; } /* Show the icon for the theme you would switch *to*. */ .a-icon-btn > .a-theme-light { display: none; } html[data-theme="light"] .a-icon-btn > .a-theme-light { display: grid; } html[data-theme="light"] .a-icon-btn > .a-theme-dark { display: none; } .a-back { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 500; color: var(--a-text-2); } .a-back:hover { color: var(--a-accent); text-decoration: none; } /* ------------------------------------------------------------------ card ---- */ .a-card { width: 100%; max-width: 440px; margin: auto; padding: 30px 26px; border: 1px solid var(--a-border); border-radius: var(--a-r-lg); background: var(--a-surface); box-shadow: var(--a-shadow); backdrop-filter: blur(18px); } .a-card-brand { display: flex; justify-content: center; margin-bottom: 22px; } .a-head { margin-bottom: 24px; } .a-head h1 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; } .a-head p { margin: 0; font-size: .89rem; color: var(--a-text-2); } /* Step chip: "Step 2 of 2" */ .a-step { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 11px; border: 1px solid var(--a-border); border-radius: 999px; background: var(--a-surface-2); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--a-text-2); } .a-step b { color: var(--a-accent); } /* ---------------------------------------------------------------- alerts ---- */ .a-alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--a-r); border: 1px solid transparent; font-size: .85rem; line-height: 1.5; } .a-alert svg { margin-top: 2px; } .a-alert a { font-weight: 600; text-decoration: underline; } .a-alert-err { background: var(--a-err-soft); border-color: var(--a-err-line); color: var(--a-err); } .a-alert-ok { background: var(--a-ok-soft); border-color: var(--a-ok-line); color: var(--a-ok); } .a-alert-info { background: var(--a-surface-2); border-color: var(--a-border); color: var(--a-text-2); } .a-alert-err a { color: var(--a-err); } .a-alert-ok a { color: var(--a-ok); } /* ---------------------------------------------------------------- fields ---- */ .a-field { margin-bottom: 17px; } .a-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; } .a-field label, .a-label { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 600; color: var(--a-text-2); } .a-field-row label { margin-bottom: 0; } .a-input-wrap { position: relative; } .a-input-wrap > svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--a-text-3); pointer-events: none; transition: color .2s; } .a-input { width: 100%; padding: 13px 15px 13px 44px; border: 1px solid var(--a-border); border-radius: var(--a-r); background: var(--a-surface-2); color: var(--a-text); font-family: inherit; font-size: .97rem; transition: border-color .2s, background .2s, box-shadow .2s; outline: none; -webkit-appearance: none; appearance: none; } .a-input::placeholder { color: var(--a-text-3); } .a-input:hover:not(:focus) { border-color: var(--a-border-hi); } .a-input:focus { border-color: var(--a-accent); background: var(--a-surface-3); box-shadow: var(--a-ring); } .a-input-wrap:focus-within > svg { color: var(--a-accent); } .a-input.has-toggle { padding-right: 46px; } /* Autofill: Chrome's own fill can otherwise turn a dark-field white. */ .a-input:-webkit-autofill, .a-input:-webkit-autofill:hover, .a-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--a-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--a-surface-2) inset !important; box-shadow: 0 0 0 1000px var(--a-surface-2) inset !important; caret-color: var(--a-text) !important; background-color: transparent !important; transition: background-color 99999s ease-out 0s; } /* Invalid state is driven by PHP / JS, never by :invalid alone, so an untouched empty field is not painted red on first paint. */ .a-field.is-invalid .a-input { border-color: var(--a-err); background: var(--a-err-soft); } .a-field.is-invalid .a-input-wrap > svg { color: var(--a-err); } .a-hint, .a-error { display: block; margin-top: 7px; font-size: .76rem; line-height: 1.45; } .a-hint { color: var(--a-text-3); } .a-error { display: none; color: var(--a-err); font-weight: 500; } .a-field.is-invalid .a-error { display: block; } .a-field.is-invalid .a-hint { display: none; } .a-ok-note { display: none; margin-top: 7px; font-size: .76rem; font-weight: 500; color: var(--a-ok); } .a-field.is-valid .a-ok-note, .a-ok-note.is-on { display: flex; align-items: center; gap: 5px; } /* Inline status line under the referral box (server-rendered and JS-updated) */ .a-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .76rem; font-weight: 500; line-height: 1.4; } .a-note b { font-weight: 700; } .a-note-ok { color: var(--a-ok); } .a-note-bad { color: var(--a-warn); } .a-note svg { flex: none; } /* Password reveal button */ .a-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--a-text-3); cursor: pointer; transition: color .2s, background .2s; } .a-toggle:hover { color: var(--a-accent); background: var(--a-accent-soft); } .a-toggle .a-eye-off { display: none; } .a-toggle[aria-pressed="true"] .a-eye-off { display: block; } .a-toggle[aria-pressed="true"] .a-eye-on { display: none; } /* Caps Lock heads-up (a top password-support ticket) */ .a-caps { display: none; align-items: center; gap: 7px; margin-top: 7px; font-size: .76rem; font-weight: 500; color: var(--a-warn); } .a-caps.is-on { display: flex; } /* -------------------------------------------------------------- strength ---- */ .a-strength { display: none; margin-top: 10px; } .a-strength.is-on { display: block; } .a-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .a-bars i { height: 4px; border-radius: 99px; background: var(--a-surface-3); transition: background .25s; } .a-strength-note { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: .74rem; color: var(--a-text-3); } .a-strength-note b { font-weight: 600; } .a-strength[data-score="1"] .a-bars i:nth-child(-n+1), .a-strength[data-score="2"] .a-bars i:nth-child(-n+2), .a-strength[data-score="3"] .a-bars i:nth-child(-n+3), .a-strength[data-score="4"] .a-bars i { background: currentColor; } .a-strength[data-score="1"] { color: var(--a-err); } .a-strength[data-score="2"] { color: var(--a-warn); } .a-strength[data-score="3"] { color: #3b82f6; } .a-strength[data-score="4"] { color: var(--a-ok); } .a-strength .a-bars { color: inherit; } .a-strength-note b { color: currentColor; } /* -------------------------------------------------------------- checkbox ---- */ .a-check { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; color: var(--a-text-2); cursor: pointer; } .a-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--a-accent); cursor: pointer; } .a-check a { font-weight: 600; } .a-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } /* --------------------------------------------------- plan choice (signup) ---- */ .a-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .a-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .a-choice label { display: block; margin: 0; padding: 13px 14px; border: 1px solid var(--a-border); border-radius: var(--a-r); background: var(--a-surface-2); color: var(--a-text-2); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; } .a-choice label strong { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: .89rem; font-weight: 600; color: var(--a-text); } .a-choice label small { display: block; font-size: .74rem; line-height: 1.4; } .a-choice input:checked + label { border-color: var(--a-accent); background: var(--a-accent-soft); box-shadow: var(--a-ring); } .a-choice input:focus-visible + label { outline: 2px solid var(--a-accent); outline-offset: 2px; } /* --------------------------------------------------------------- buttons ---- */ .a-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 18px; border: 1px solid transparent; border-radius: var(--a-r); font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; transition: transform .18s, box-shadow .18s, background .2s, border-color .2s, opacity .2s; } .a-btn:hover { text-decoration: none; } .a-btn-primary { color: #fff; background: linear-gradient(90deg, var(--a-accent), var(--a-accent-2)); box-shadow: 0 10px 26px -12px rgba(255, 65, 108, .75); } .a-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgba(255, 65, 108, .85); } .a-btn-ghost { color: var(--a-text); background: var(--a-surface-2); border-color: var(--a-border); } .a-btn-ghost:hover:not(:disabled) { border-color: var(--a-border-hi); background: var(--a-surface-3); color: var(--a-text); } .a-btn:disabled { opacity: .62; cursor: not-allowed; transform: none; box-shadow: none; } .a-btn-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: .84rem; font-weight: 600; color: var(--a-accent); cursor: pointer; } .a-btn-link:disabled { color: var(--a-text-3); cursor: not-allowed; } .a-spin { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: a-spin .7s linear infinite; } @keyframes a-spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------------- divider ---- */ .a-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; } .a-or::before, .a-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--a-border); } .a-or span { flex: 0 0 auto; font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-text-3); } /* ------------------------------------------------------------- otp screen ---- */ .a-otp { width: 100%; padding: 15px 12px; border: 1px solid var(--a-border); border-radius: var(--a-r); background: var(--a-surface-2); color: var(--a-text); font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 600; text-align: center; letter-spacing: .42em; text-indent: .42em; transition: border-color .2s, background .2s, box-shadow .2s; outline: none; -webkit-appearance: none; appearance: none; } .a-otp::placeholder { color: var(--a-text-3); font-weight: 400; letter-spacing: .3em; } .a-otp:focus { border-color: var(--a-accent); background: var(--a-surface-3); box-shadow: var(--a-ring); } .a-otp::-webkit-outer-spin-button, .a-otp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* "Sent to n•••@mail.com" chip with a change-email escape hatch */ .a-sentto { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; padding: 11px 13px; border: 1px solid var(--a-border); border-radius: var(--a-r); background: var(--a-surface-2); font-size: .84rem; color: var(--a-text-2); } .a-sentto strong { color: var(--a-text); font-weight: 600; word-break: break-all; } .a-timer { margin-top: 9px; font-size: .78rem; text-align: center; color: var(--a-text-3); } .a-timer b { color: var(--a-text-2); font-variant-numeric: tabular-nums; } .a-timer.is-expired { color: var(--a-err); } .a-resend { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: .84rem; color: var(--a-text-2); } /* ------------------------------------------------------------------- foot ---- */ .a-foot { margin-top: 22px; text-align: center; font-size: .88rem; color: var(--a-text-2); } .a-login-help { margin: 13px 0 0; text-align: center; font-size: .78rem; line-height: 1.55; color: var(--a-text-2); } .a-login-help strong { color: var(--a-text); font-weight: 600; } .a-login-help a { color: var(--a-accent); font-weight: 600; } .a-foot a { font-weight: 600; } .a-trust { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 26px; font-size: .74rem; color: var(--a-text-3); } .a-legal { margin: 14px 0 0; font-size: .74rem; line-height: 1.5; text-align: center; color: var(--a-text-3); } /* ------------------------------------------------------------- responsive ---- */ @media (min-width: 992px) { .a-shell { grid-template-columns: 1.02fr .98fr; align-items: start; } .a-aside { display: flex; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; } .a-main { padding: 24px 30px 34px; } .a-card { max-width: 460px; padding: 34px 32px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .a-card-brand { display: none; } .a-topbar { max-width: 460px; } } @media (max-width: 380px) { .a-card { padding: 26px 18px; } .a-choice { grid-template-columns: 1fr; } .a-otp { font-size: 1.25rem; letter-spacing: .3em; text-indent: .3em; } } /* iOS zooms the page when a focused input is under 16px. */ @media (max-width: 991px) { .a-input, .a-otp { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .a-btn-primary:hover:not(:disabled) { transform: none; } }