/* ============================================================ auth.css — premium mobile sign-in. Built on the design tokens in assets/css/styles.css. Light by default; theme-boot.js adds `dark` to when the shared mx-theme preference asks for it. ============================================================ */ :root { --ma-bg: var(--paper); --ma-card: #ffffff; --ma-ink: var(--ink); --ma-soft: var(--ink-soft); --ma-faint: var(--ink-faint); --ma-line: var(--line); --ma-accent: var(--green); } body.ma-body.dark { --ma-bg: var(--dark); --ma-card: var(--dark-2, #122318); --ma-ink: var(--dark-text); --ma-soft: var(--dark-soft); --ma-faint: var(--dark-soft); --ma-line: var(--dark-line); --ma-accent: var(--glow); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body.ma-body { min-height: 100%; } body.ma-body { margin: 0; background: radial-gradient(120% 60% at 50% -10%, rgba(28,124,84,0.10), transparent 60%), var(--ma-bg); color: var(--ma-ink); font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; min-height: 100dvh; display: flex; flex-direction: column; } body.ma-body.dark { background: radial-gradient(120% 60% at 50% -10%, rgba(63,167,118,0.16), transparent 60%), var(--ma-bg); } .ma-top { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 0; } .ma-brand { display: inline-flex; align-items: center; font-family: var(--font-serif); font-size: 1.28rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ma-ink); text-decoration: none; } .ma-brand .x { color: var(--ma-accent); font-style: italic; } .ma-top__guest { min-height: 44px; font-size: 0.84rem; font-weight: 500; color: var(--ma-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: var(--radius-sm); background: var(--paper-2); border: 1px solid var(--ma-line); transition: color 0.16s var(--ease), border-color 0.16s var(--ease); } .ma-top__guest:hover, .ma-top__guest:active { color: var(--ma-ink); border-color: var(--ma-accent); } .ma-top__guest svg { width: 13px; height: 13px; stroke: currentColor; transition: transform 0.15s ease; } .ma-top__guest:active svg { transform: translateX(2px); } .ma-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0px)); } .ma-card { width: 100%; max-width: 420px; margin: 0 auto; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: var(--radius-lg); padding: 28px 22px; box-shadow: var(--shadow-lg); animation: maIn 0.45s var(--ease); } @keyframes maIn { from { opacity: 0; transform: translateY(14px); } } .ma-title { font-family: var(--font-serif); font-weight: 500; font-size: 1.65rem; margin: 0 0 6px; letter-spacing: -0.01em; } .ma-sub { color: var(--ma-soft); font-size: 0.92rem; margin: 0 0 22px; line-height: 1.5; } /* segmented control */ .ma-mode { position: relative; display: flex; background: rgba(22,32,26,0.06); border-radius: 999px; padding: 4px; margin-bottom: 22px; } body.dark .ma-mode { background: rgba(255,255,255,0.08); } .ma-mode__opt { position: relative; z-index: 1; flex: 1; border: 0; background: none; border-radius: 999px; padding: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: var(--ma-soft); cursor: pointer; transition: color 0.25s var(--ease); } .ma-mode__opt.is-on { color: var(--ma-ink); } .ma-mode__pill { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: var(--ma-card); border-radius: 999px; box-shadow: var(--shadow-sm); transition: transform 0.28s var(--ease); } .ma-mode[data-mode="signup"] .ma-mode__pill { transform: translateX(100%); } /* fields */ .ma-field { margin-bottom: 15px; } .ma-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ma-soft); margin-bottom: 7px; } .ma-label-row { display: flex; align-items: center; justify-content: space-between; } .ma-field input { width: 100%; box-sizing: border-box; font-size: 16px; font-family: var(--font-sans); color: var(--ma-ink); background: var(--ma-bg); border: 1.5px solid var(--ma-line); border-radius: var(--radius-sm); padding: 14px 15px; outline: none; transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .ma-field input:focus { border-color: var(--ma-accent); box-shadow: 0 0 0 3px rgba(28,124,84,0.14); } body.dark .ma-field input:focus { box-shadow: 0 0 0 3px rgba(63,167,118,0.2); } .ma-input-wrap { position: relative; } .ma-input-wrap input { padding-right: 46px; } .ma-eye, .ma-uname-status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .ma-eye { width: 44px; height: 44px; right: 4px; background: none; border: 0; color: var(--ma-faint); cursor: pointer; display: grid; place-items: center; padding: 0; } .ma-eye svg { width: 20px; height: 20px; } .ma-hint { font-size: 0.76rem; color: var(--ma-faint); margin: 6px 2px 0; } .ma-hint.is-good { color: var(--ma-accent); } .ma-hint.is-bad { color: #b4553f; } /* "already signed in" notice — the quiet twin of .ma-error, shown when Get Started brings a live session to the create-account form. */ .ma-note { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; /* tinted from --ma-accent, not a fixed green: the page's accent (and its dark variant) already recolours the text, and a green box around blue text is the one combination this note must never produce */ background: color-mix(in srgb, var(--ma-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ma-accent) 24%, transparent); color: var(--ma-accent); font-size: 0.8rem; line-height: 1.45; } .ma-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } .ma-note__txt { flex: 1; min-width: 0; } .ma-note b { font-weight: 600; } /* its own row, indented past the icon — there is no width on a phone to put a link beside two lines of text */ .ma-note__go { flex: 1 1 100%; margin: 2px 0 0 25px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--ma-accent); text-decoration: underline; text-underline-offset: 3px; } .ma-forgot { min-height: 44px; background: none; border: 0; color: var(--ma-accent); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0 2px; } /* username status dot */ .ma-uname-status { width: 9px; height: 9px; border-radius: 50%; background: transparent; transition: background 0.2s; } .ma-uname-status[data-state="good"] { background: var(--ma-accent); } .ma-uname-status[data-state="bad"] { background: #b4553f; } .ma-uname-status[data-state="checking"] { background: var(--amber); animation: maBlink 1s infinite; } @keyframes maBlink { 50% { opacity: 0.3; } } /* password strength */ .ma-pwmeter { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .ma-pwmeter { height: 5px; } .ma-pwbar { display: block; height: 5px; width: 0; background: var(--amber); border-radius: 999px; flex: 0 0 auto; transition: width 0.3s var(--ease), background 0.3s; max-width: 120px; } .ma-pwmeter small { font-size: 0.74rem; color: var(--ma-faint); } /* terms */ .ma-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--ma-soft); margin: 4px 0 18px; line-height: 1.45; } .ma-terms input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ma-accent); flex: 0 0 auto; } .ma-terms a { color: var(--ma-accent); } /* submit */ .ma-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--ma-accent); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 15px; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(28,124,84,0.5); transition: transform 0.12s var(--ease), box-shadow 0.2s; } .ma-submit:active { transform: translateY(1px); } .ma-submit:disabled { opacity: 0.7; } .ma-submit svg { width: 19px; height: 19px; } .ma-submit--soft { background: var(--ma-bg); color: var(--ma-ink); border: 1.5px solid var(--ma-line); box-shadow: none; } .ma-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: maSpin 0.7s linear infinite; } @keyframes maSpin { to { transform: rotate(360deg); } } .ma-swap { text-align: center; font-size: 0.88rem; color: var(--ma-soft); margin: 18px 0 0; } .ma-swap button, .linkish { background: none; border: 0; color: var(--ma-accent); font-weight: 600; font-size: inherit; font-family: inherit; cursor: pointer; padding: 0; } /* error */ .ma-error { display: flex; align-items: center; gap: 9px; background: rgba(180,85,63,0.1); border: 1px solid rgba(180,85,63,0.3); color: #b4553f; border-radius: var(--radius-sm); padding: 11px 13px; font-size: 0.86rem; margin-bottom: 16px; } .ma-error svg { width: 18px; height: 18px; flex: 0 0 auto; } .is-shake { animation: maShake 0.4s; } @keyframes maShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } } /* code inputs */ .ma-code { display: flex; gap: 8px; justify-content: space-between; margin: 8px 0 20px; } .ma-code input { width: 100%; aspect-ratio: 1; text-align: center; font-size: 1.4rem; font-weight: 600; font-family: var(--font-mono); color: var(--ma-ink); background: var(--ma-bg); border: 1.5px solid var(--ma-line); border-radius: 12px; outline: none; transition: border-color 0.15s; } .ma-code input.is-filled, .ma-code input:focus { border-color: var(--ma-accent); } .ma-code.is-bad input { border-color: #b4553f; animation: maShake 0.4s; } /* success check */ .ma-check { width: 56px; height: 56px; border-radius: 50%; background: var(--mint); color: var(--green); display: grid; place-items: center; margin: 0 auto 16px; } body.dark .ma-check { background: rgba(63,167,118,0.16); color: var(--glow); } .ma-check svg { width: 28px; height: 28px; } #success-card, #verify-card { text-align: center; } #verify-card .ma-code { text-align: left; } .ma-desktop { text-align: center; margin: 22px 0 0; } .ma-desktop a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ma-faint); font-size: 0.82rem; text-decoration: none; } /* toasts (reuse app style) */ #toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { pointer-events: auto; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 10px 18px; font-size: 0.86rem; box-shadow: var(--shadow-md); } /* ============ on-screen keyboard ============ assets/js/keyboard-inset.js publishes --kb-inset: the part of the keyboard the browser did NOT take off the viewport by itself. It is 0 in Safari and Chrome, which shrink the viewport and scroll the focused field into view on their own, and it is the whole keyboard inside an in-app WebView (Instagram, Facebook, TikTok), which reports nothing at all and lets the keys land on top of the form. Reserving that height at the foot of the page does two things: the centred card is centred in what is actually visible, and the field has somewhere to scroll to — which is where the script puts it. */ body.kb-open { padding-bottom: var(--kb-inset, 0px); } body.kb-open .ma-main { justify-content: flex-start; }