/* ============================================================================ kyc-verify.desktop.css — DESKTOP / TABLET · light-2026 (loaded via link media ≥768) ---------------------------------------------------------------------------- Full desktop RELAYOUT of the KYC wizard. Mobile Source-of-Truth lives in kyc-verify.css and is NEVER touched here (this file only loads at ≥768 via the attribute). No JS/HTML/UX changes — skin + layout only. Direction reference (approved): modules/account/pages/account-hub.css + modules/member/assets/css/profile.desktop.css → • canvas #F4F5F7 · cards WHITE · neutral hairline #E8EAEF · soft shadow • radius 18-20 · ink #181A1D · secondary #565C64 · orange accent sparingly Activates only beside the shared AppShell sidebar (body.ptshell). ============================================================================ */ /* light-2026 palette (local, desktop-only) */ :root{ --l26-canvas:#F4F5F7; --l26-surface:#fff; --l26-line:#E8EAEF; --l26-line-2:#F0F1F4; --l26-ink:#181A1D; --l26-ink-2:#565C64; --l26-muted:#8A9099; --l26-fill:#F7F8FA; --l26-shadow:0 22px 48px -30px rgba(20,25,35,.28); --l26-shadow-sm:0 18px 44px -30px rgba(20,25,35,.22); } /* desktop navigates via the shared AppShell → the mobile in-page back button goes */ .page-header .ib{display:none} @media (min-width:768px){ body.ptshell{background:var(--l26-canvas)} /* ---- comfortable, centred wizard column ------------------------------------ .page-header · .steps · .slabels are body-level siblings before main.page; centre them all on the same reading column so the flow reads as one piece. */ body.ptshell .page-header, body.ptshell .steps, body.ptshell .slabels, body.ptshell main.page{max-width:680px;margin-inline:auto} /* ---- page title: sticky mobile bar → quiet light-2026 page heading -------- */ body.ptshell .page-header{ position:static;background:transparent;border-bottom:none; backdrop-filter:none;padding:2px 4px 0; } body.ptshell .page-header .hd{padding:0} body.ptshell .page-header .htitle{ font-family:var(--fd);font-weight:600;font-size:23px;color:var(--l26-ink);letter-spacing:-.2px; } /* ---- progress: join .steps + .slabels into ONE white progress card -------- */ body.ptshell .steps{ background:var(--l26-surface);border:1px solid var(--l26-line);border-bottom:none; border-radius:18px 18px 0 0; padding:22px 30px 15px;margin-top:16px; box-shadow:var(--l26-shadow); } body.ptshell .slabels{ display:flex;justify-content:space-between; background:var(--l26-surface);border:1px solid var(--l26-line);border-top:none; border-radius:0 0 18px 18px; padding:0 30px 16px; box-shadow:var(--l26-shadow); } /* dots + connectors → neutral track, orange active, green done */ body.ptshell .sdot{ width:34px;height:34px;font-size:14px; background:#EEF0F4;color:var(--l26-muted);border:none; box-shadow:inset 0 0 0 1px rgba(20,25,35,.04); } body.ptshell .sdot.on{ background:linear-gradient(140deg,var(--sun),var(--sun-deep));color:#fff; box-shadow:0 9px 18px -8px rgba(239,95,6,.6); } body.ptshell .sdot.done{ background:var(--leaf);color:#fff; box-shadow:0 9px 18px -10px rgba(30,158,106,.55); } body.ptshell .sline{background:var(--l26-line);height:3px;margin:0 8px;border-radius:3px} body.ptshell .sline.on{background:linear-gradient(90deg,var(--sun),var(--sun-deep))} /* labels: fixed-width cells distributed to sit under their dots */ body.ptshell .slabels span{ width:70px;flex:0 0 auto;text-align:center; font-size:11.5px;line-height:1.35;color:var(--l26-muted); } body.ptshell .slabels span.on{color:var(--sun-deep);font-weight:600} /* ---- content column: single active step at a time → no inter-card gaps. 0 horizontal padding so step-card edges line up with the progress card above (both span the centred column; cards carry their own inner padding). */ body.ptshell main.page{padding:0 0 52px;margin-top:16px} body.ptshell main.page > .card, body.ptshell main.page > .step, body.ptshell main.page > .kstate{margin-top:0} /* ---- wizard step cards: white · neutral hairline · soft shadow ------------ */ body.ptshell main.page > .card{ background:var(--l26-surface);border:1px solid var(--l26-line);border-radius:20px; box-shadow:var(--l26-shadow);padding:28px 30px; } /* step heading + lead paragraph */ body.ptshell .card .title, body.ptshell .step .title{font-size:20px;color:var(--l26-ink);margin-bottom:8px} body.ptshell .sp{font-size:14px;color:var(--l26-ink-2);margin-bottom:22px} /* ---- STEP 1 · camera viewport: modern light framing ---------------------- */ body.ptshell .cam{ border-radius:16px;border:1px solid var(--l26-line); box-shadow:0 1px 3px rgba(20,25,35,.06),0 14px 32px -20px rgba(20,25,35,.25); } /* readable hint: dark navy text (was #2B5CB8 blue-on-light-blue → same hue, washed out) */ body.ptshell .kyc-camhint{ background:#EEF4FF;border:1px solid #CFE0FB;color:#173A6C; } body.ptshell .kyc-camhint svg{color:#2B5CB8} body.ptshell .idstatus{color:#3B4550} /* ---- primary CTA: orange (the one place accent belongs) + hover ----------- */ body.ptshell .pbtn{ border-radius:14px;height:52px; transition:transform .12s ease,box-shadow .12s ease,filter .12s ease; } body.ptshell .pbtn:hover{filter:brightness(1.03);box-shadow:0 16px 30px -14px rgba(239,95,6,.75)} /* secondary buttons → quiet light-2026 outline */ body.ptshell .gbtn{ border:1px solid var(--l26-line);background:var(--l26-surface);color:var(--l26-ink-2); border-radius:12px;transition:background .12s,border-color .12s; } body.ptshell .gbtn:hover{background:var(--l26-fill);border-color:#DDE0E6} /* ---- STEP 2 · review: captured-card preview + soft inputs ----------------- */ body.ptshell .idpreview-card{border-color:var(--l26-line);box-shadow:0 14px 32px -22px rgba(20,25,35,.35)} body.ptshell .idpreview-redo{ border:1px solid var(--l26-line);color:var(--l26-ink-2);border-radius:12px; } body.ptshell .idpreview-redo:hover{background:var(--l26-fill)} body.ptshell .field label{color:var(--l26-ink-2)} body.ptshell .frow{gap:14px} body.ptshell .inp{ background:var(--l26-fill);border:1px solid var(--l26-line);border-radius:12px; padding:13px 15px;color:var(--l26-ink); transition:border-color .12s,box-shadow .12s,background .12s; } body.ptshell .inp:focus{background:#fff;border-color:var(--sun-deep);box-shadow:0 0 0 3px rgba(242,86,11,.12)} /* keep the JS-driven filled / error states legible above the soft base */ body.ptshell .inp.filled{background:#F1FBF5;border-color:#CBEBD9} body.ptshell .inp.err{background:#FDECEA;border-color:var(--red)} /* ---- STEP 3 · 360° face scan: neutral track on the white card ------------- */ body.ptshell .facering .track{stroke:#EDEFF3} body.ptshell .facering .cvid{box-shadow:0 10px 26px -16px rgba(20,25,35,.4)} body.ptshell .dots i{background:#EDEFF3} body.ptshell .facesub{color:var(--l26-muted)} /* ---- STEP 4 · legal agreement: keep the official navy identity, but reframe the outer document as a clean light-2026 surface + roomier reading area --- */ body.ptshell .doc{ border:1px solid var(--l26-line);border-radius:20px; box-shadow:0 22px 52px -30px rgba(20,25,35,.32); } body.ptshell .agmt{height:300px} /* ---- STEP 5 · success ---------------------------------------------------- */ body.ptshell .done h2{color:var(--l26-ink);font-size:24px} body.ptshell .done p{color:var(--l26-ink-2)} body.ptshell .donebox{ border:1px solid var(--l26-line);border-radius:16px;box-shadow:var(--l26-shadow-sm); } body.ptshell .dstat{color:var(--l26-ink-2)} /* ---- status gate (loading / verified / pending / rejected) ---------------- */ body.ptshell .kstate{ background:var(--l26-surface);border:1px solid var(--l26-line);border-radius:20px; box-shadow:var(--l26-shadow);padding:42px 34px 34px; } body.ptshell .kstate.loading{padding:52px 34px} body.ptshell .kstate .kst-ttl{color:var(--l26-ink)} body.ptshell .kstate .kst-msg{color:var(--l26-ink-2)} body.ptshell .kstate .kst-meta{background:var(--l26-fill);border-color:var(--l26-line)} body.ptshell .kstate .kst-meta b{color:var(--l26-ink)} body.ptshell .kstate .kst-spin{border-color:#EDEFF3;border-top-color:var(--sun)} } /* ≥1024: hold the wizard at its comfortable width, add side breathing room */ @media (min-width:1024px){ body.ptshell .page-header, body.ptshell .steps, body.ptshell .slabels, body.ptshell main.page{max-width:700px} }