/* Face Verify — mobile-first dark biometric UI ("Verified" design system) Palette: deep ink base, iris-violet accent, emerald/rose semantics. */ :root { --bg-0: #0B1020; /* app background (deep ink navy) */ --bg-1: #141B2D; /* surface: cards, pills, inputs */ --bg-2: #1C2538; /* elevated: dots, chips */ --line: rgba(148,163,184,.14); /* subtle border / divider */ --line-strong: rgba(148,163,184,.30); /* hover/active/focus border */ --txt: #EAF0F8; /* primary text */ --txt-2: #9AA8BD; /* secondary text */ --txt-muted: #67768D; /* placeholders, captions */ --brand: #8B7CF6; /* iris violet — primary / scanner ring */ --brand-2: #A78BFA; /* light violet — gradient pair / active glow */ --brand-strong: #6D4DE6; /* pressed / deep fill */ --ok: #34D399; /* success / granted */ --bad: #FB7185; /* danger / denied */ --warn: #FBBF24; /* warning */ --info: #38BDF8; /* info */ --ring: rgba(139,124,246,.45); /* focus ring / capture pulse */ --on-brand: #FFFFFF; /* text on violet fills */ --grad: linear-gradient(135deg, var(--brand-2), var(--brand)); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Light theme overrides (set data-theme="light" on ) */ html[data-theme="light"] { --bg-0: #F5F8FC; --bg-1: #FFFFFF; --bg-2: #EEF3F9; --line: rgba(15,23,42,.10); --line-strong: rgba(15,23,42,.20); --txt: #0F1B2D; --txt-2: #51607A; --txt-muted: #7C8AA0; --brand: #6D4DE6; --brand-2: #7C5CF5; --brand-strong: #5B3FD6; --ok: #059669; --bad: #E11D48; --warn: #D97706; --info: #2563EB; --ring: rgba(109,77,230,.30); --on-brand: #FFFFFF; --grad: linear-gradient(135deg, var(--brand-2), var(--brand)); } html[data-theme="light"] body { background: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #e6edf6 60%); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { background: radial-gradient(120% 80% at 50% -10%, #0e1726 0%, var(--bg-0) 60%); color: var(--txt); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .app { max-width: 440px; min-height: 100dvh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; } /* Top bar */ .topbar { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 1.05rem; } .brand svg { color: var(--brand); } .status { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-1); border: 1px solid var(--line); color: var(--txt-2); font-size: 0.78rem; font-weight: 500; padding: 6px 11px; border-radius: 999px; } .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(139,124,246,.20); } .top-right { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 38px; height: 38px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line); color: var(--txt-2); display: grid; place-items: center; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); } .icon-btn:active { transform: scale(.94); } .icon-btn:hover { border-color: var(--line-strong); color: var(--txt); } /* keyboard focus rings (token-driven) */ .btn:focus-visible, .seg-btn:focus-visible, .icon-btn:focus-visible, .field:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Segmented control */ .seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-1); border: 1px solid var(--line); border-radius: 999px; padding: 4px; } .seg-btn { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; color: var(--txt-2); font-size: 0.95rem; font-weight: 600; padding: 11px 0; border-radius: 999px; min-height: 44px; transition: color .2s var(--ease); } .seg-btn.is-active { color: var(--on-brand); } .seg-thumb { position: absolute; z-index: 0; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: var(--grad); border-radius: 999px; transition: transform .28s var(--ease); box-shadow: 0 4px 14px rgba(167,139,250,.28); } .seg-thumb.right { transform: translateX(100%); } /* Enroll input */ .enroll-row { display: flex; flex-direction: column; gap: 12px; } .field { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); color: var(--txt); font-size: 16px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field::placeholder { color: var(--txt-muted); } .field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } .dots { display: flex; gap: 8px; justify-content: center; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); transition: .25s var(--ease); } .dots i.on { background: var(--grad); border-color: transparent; transform: scale(1.15); } /* Scanner: the whole camera area IS the oval (front-camera selfie). */ .scanner { position: relative; width: 74%; max-width: 300px; aspect-ratio: 4 / 5; margin: 10px auto 2px; background: #05080d; border-radius: 50%; /* full ellipse — sleek face oval */ overflow: hidden; border: 3px solid var(--brand); box-shadow: 0 0 0 6px rgba(139,124,246,.10), 0 14px 40px rgba(0,0,0,.55), 0 0 26px rgba(139,124,246,.24) inset; display: flex; align-items: center; justify-content: center; transition: box-shadow .3s var(--ease), border-color .3s var(--ease); } /* border-radius on the video itself clips it to the ellipse — without this, iOS Safari lets the transformed