/* Face Verify — mobile-first biometric UI ("Verified" design system, refreshed) Palette: deep indigo-ink base, bright iris-blue accent, emerald/rose semantics. Dark-first with a light theme (html[data-theme="light"]). oklch tokens mirror frontend/src/styles.css so the whole platform reads as one system. */ :root { --bg-0: oklch(0.14 0.02 260); /* app background (deep ink) */ --bg-1: oklch(0.19 0.02 260); /* surface: cards, pills, inputs */ --bg-2: oklch(0.24 0.02 260); /* elevated / muted track */ --inset: oklch(0.17 0.02 260); /* sunken inputs / rows */ --line: oklch(1 0 0 / 0.08); /* subtle border / divider */ --line-strong: oklch(1 0 0 / 0.16); /* hover / active / focus border */ --txt: oklch(0.98 0.003 250); /* primary text */ --txt-2: oklch(0.7 0.02 258); /* secondary text */ --txt-muted: oklch(0.56 0.02 258); /* placeholders, captions */ --brand: oklch(0.7 0.2 262); /* iris blue — primary / scanner ring */ --brand-2: oklch(0.78 0.15 262); /* light — gradient pair / active glow */ --brand-strong: oklch(0.62 0.2 262); /* pressed / deep fill */ --ok: oklch(0.72 0.17 155); /* success / granted */ --bad: oklch(0.65 0.2 22); /* danger / denied */ --warn: oklch(0.8 0.16 85); /* warning */ --info: oklch(0.7 0.15 230); /* info */ --ring: oklch(0.7 0.2 262 / 0.5); /* focus ring / capture pulse */ --on-brand: oklch(0.14 0.02 260); /* text on the bright primary fill */ --grad: linear-gradient(135deg, var(--brand-2), var(--brand)); --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-2xl: 20px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* Light theme overrides (set data-theme="light" on ) */ html[data-theme="light"] { --bg-0: oklch(0.985 0.003 250); --bg-1: oklch(1 0 0); --bg-2: oklch(0.95 0.008 250); --inset: oklch(0.96 0.008 250); --line: oklch(0.15 0.02 260 / 0.08); --line-strong: oklch(0.15 0.02 260 / 0.16); --txt: oklch(0.15 0.02 260); --txt-2: oklch(0.5 0.02 258); --txt-muted: oklch(0.55 0.02 258); --brand: oklch(0.55 0.22 262); --brand-2: oklch(0.62 0.19 262); --brand-strong: oklch(0.48 0.22 262); --ok: oklch(0.68 0.17 155); --bad: oklch(0.58 0.24 27); --warn: oklch(0.72 0.16 70); --info: oklch(0.58 0.18 250); --ring: oklch(0.55 0.22 262 / 0.3); --on-brand: oklch(1 0 0); --grad: linear-gradient(135deg, var(--brand-2), var(--brand)); } html[data-theme="light"] body { background: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #eaf0f8 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%, color-mix(in oklab, var(--brand) 8%, var(--bg-0)) 0%, var(--bg-0) 62%); color: var(--txt); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .app { width: 100%; max-width: 440px; min-height: 100dvh; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 22px; animation: fade-up .5s var(--ease) both; } /* Top bar */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: 1.02rem; letter-spacing: -0.01em; min-width: 0; } .top-right { flex: none; } /* brand mark becomes a rounded badge tile */ .brand svg { color: var(--brand); } .brand-badge { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; color: var(--brand); background: color-mix(in oklab, var(--brand) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 24%, transparent); flex: none; } .brand-badge 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-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; } .status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: soft-blink 2s var(--ease) infinite; } .status.busy .dot { background: var(--brand); } .status.ok .dot { background: var(--ok); animation: none; } .status.bad .dot { background: var(--bad); animation: none; } .top-right { display: flex; align-items: center; gap: 9px; } .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), transform .12s var(--ease); } .icon-btn:active { transform: scale(.94); } .icon-btn:hover { border-color: color-mix(in oklab, var(--brand) 40%, transparent); color: var(--brand); } /* 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 — muted track, raised surface tab (matches reference) */ .seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 4px; } .seg-btn { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; color: var(--txt-2); font-size: 0.92rem; font-weight: 600; padding: 10px 0; border-radius: var(--radius); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: color .2s var(--ease); } .seg-btn svg { width: 17px; height: 17px; } .seg-btn.is-active { color: var(--txt); } .seg-thumb { position: absolute; z-index: 0; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: var(--bg-1); border-radius: var(--radius); transition: transform .28s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 0 0 1px var(--line); } .seg-thumb.right { transform: translateX(100%); } /* Enroll input */ .enroll-row { display: flex; flex-direction: column; gap: 12px; } .field-group { display: flex; flex-direction: column; gap: 7px; } .micro-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-muted); margin-left: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* styled dashed upload card — the native file input is hidden inside it */ .upload-card { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 14px; background: var(--bg-1); border: 1px dashed var(--line-strong); border-radius: var(--radius); transition: border-color .2s var(--ease); } .upload-card:hover { border-color: color-mix(in oklab, var(--brand) 45%, transparent); } .upload-ico { width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-2); } .upload-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .upload-title { font-size: 0.9rem; font-weight: 500; color: var(--txt); } .upload-sub { font-size: 0.78rem; color: var(--txt-2); } .field { width: 100%; min-height: 50px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-1); color: var(--txt); font-size: 16px; font-family: var(--font); 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); } /* enrolment progress: captured samples become glowing photo thumbnails, the NEXT slot pulses, untaken slots are muted dots (per design) */ .dots { display: flex; gap: 10px; justify-content: center; align-items: center; } .dots:empty { display: none; } /* verify mode: no empty row in the layout flow */ .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); transition: .25s var(--ease); } .dots i.on { background: var(--brand); border-color: transparent; box-shadow: 0 0 12px color-mix(in oklab, var(--brand) 55%, transparent); } .dots i.next { background: color-mix(in oklab, var(--brand) 40%, transparent); border-color: transparent; animation: soft-blink 1.6s var(--ease) infinite; } .dots img.thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand); box-shadow: 0 0 16px color-mix(in oklab, var(--brand) 50%, transparent); animation: soft-snap .4s var(--ease) both; } /* ─── Scanner stage: oval camera + decorative halo / outline / ticks ─── */ .scanner-stage { position: relative; width: 300px; max-width: 84%; aspect-ratio: 7 / 9; margin: 6px auto 2px; display: grid; place-items: center; } /* rotating conic glow behind the oval */ .scan-halo { position: absolute; width: 118%; aspect-ratio: 1; border-radius: 50%; opacity: .7; filter: blur(34px); pointer-events: none; z-index: 0; background: conic-gradient(from 0deg, color-mix(in oklab, var(--brand) 55%, transparent), transparent 40%, color-mix(in oklab, var(--brand) 28%, transparent) 70%, transparent); animation: shimmer-rotate 8s linear infinite; } /* Scanner: the whole camera area IS the oval (front-camera selfie). */ .scanner { position: relative; z-index: 1; width: 100%; height: 100%; background: #05080d; border-radius: 50%; overflow: hidden; border: 4px solid var(--bg-1); box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--brand) 50%, transparent), 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; animation: pulse-ring 2.8s var(--ease) infinite; transition: box-shadow .3s var(--ease); } /* border-radius on the video itself clips it to the ellipse — without this, iOS Safari lets the transformed