/* ========================================================================== KYC onboarding — "Sidebar Workspace" design system Shared by letsdial_kyc.html and rozper_kyc.html. Layout: fixed left navigation rail (brand + 7-step nav + progress) next to a scrolling content workspace of stacked step cards. On narrow viewports the rail collapses into a horizontal scrolling strip pinned to the top. Per-entity look is switched entirely through [data-entity] on — both pages share this one file; LetsDial and Rozper get their own palette, sidebar treatment, radius scale and component shapes so they read as two distinct products, not a recolor of one template. Frontend presentation layer. Class names required by kyc-form.js (.panel, .stepper/.step + data-step, #backbtn/#nextbtn/#submitbtn, #kycform, #progfill/#progtext, .field, #sigpad/#id_signature_data/ #sigclear, #id_billing_same_as_main + billing ids, #id_lawsuit_detail / #id_blocked_detail / #id_stir_shaken_plan, #savedmsg) are preserved — see the audit note at the bottom of this file before renaming anything. ========================================================================== */ /* --------------------------------------------------------------------- 1. Tokens — default palette = LetsDial, official brand colors from letsdial.com: primary orange #F2701E, charcoal #1F2937, cream #FAF6F1, status green #10B981. Orange drives active/interactive accents and primary buttons; charcoal anchors strong text/ink; cream is the page surface; green is reserved for success/status only (see the scoped .saved / .success-card .ico overrides near the bottom of this file) — never the whole page. --------------------------------------------------------------------- */ :root{ --ink:#1F2937; --ink-soft:#4b5768; --muted:#6b7280; --line:#e7dfd3; --line-soft:#f2ece3; --page-bg:#FAF6F1; --card:#ffffff; --input-bg:#fbf8f4; --brand:#F2701E; --brand-2:#ff8a3d; --brand-soft:#fbe7d8; --brand-strong:#c7550f; --danger:#d64566; --danger-soft:#fbe8ee; --focus-ring:0 0 0 3px rgba(242,112,30,.18); --rail-bg:#ffffff; --rail-line:#e6ebf2; --rail-ink:#1F2937; --rail-muted:#8592a6; --rail-active-bg:rgba(242,112,30,.08); --rail-active-ink:#1F2937; --rail-width:296px; --rail-width-collapsed:84px; --btn-ink:#F2701E; --btn-ink-hover:#d9601a; --radius-lg:18px; --radius-md:12px; --radius-sm:8px; --radius-pill:999px; --shadow-card:0 1px 2px rgba(31,41,55,.05), 0 16px 32px -12px rgba(31,41,55,.12); --shadow-pop:0 20px 48px -12px rgba(31,41,55,.3); --font: -apple-system, 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif; } /* Rozper — official brand palette, derived directly from rozper.com (deep navy shell, --gold "slot" repointed to the site's actual blue #046bd2 -> cyan #22d3ee CTA/hero gradient, --brand-2 repointed to the site's status green #00d492 for "done"/success). Variable NAMES are left as-is (--gold/--gold-2/--brand-2/etc.) so every rule that already references them updates automatically — only the VALUES changed here. Fully distinct from LetsDial's orange/charcoal/cream identity. */ html[data-entity="rozper"]{ --ink:#0f172a; --ink-soft:#334155; --muted:#64748b; --line:#dbe3ef; --line-soft:#eef2f8; --page-bg:#f5f7fb; --card:#ffffff; --input-bg:#f8fafc; --brand:#172554; --brand-2:#00d492; --brand-soft:#eef1fc; --brand-strong:#0f1b3d; --gold:#046bd2; --gold-2:#22d3ee; --gold-soft:#e6f2fd; --gold-ink:#0554a6; --danger:#c53a55; --danger-soft:#fbe9ee; --focus-ring:0 0 0 3px rgba(4,107,210,.22); --rail-bg:#050b1c; --rail-bg-2:#101c3a; --rail-line:rgba(255,255,255,.08); --rail-ink:#f1f4fb; --rail-muted:#8f9ac2; --rail-active-bg:rgba(255,255,255,.06); --rail-active-ink:#ffffff; --rail-width:308px; --btn-ink:#1c2c52; --btn-ink-hover:#26386a; --radius-lg:16px; --radius-md:10px; --radius-sm:8px; --radius-pill:999px; --shadow-card:0 1px 2px rgba(14,18,36,.04), 0 16px 34px -18px rgba(14,18,36,.18); --shadow-pop:0 22px 50px -18px rgba(14,18,36,.38); } *{ box-sizing:border-box; } html,body{ height:auto; } body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--page-bg); line-height:1.5; -webkit-font-smoothing:antialiased; } em.req{ color:var(--danger); font-style:normal; } a{ color:var(--brand-strong); } /* --------------------------------------------------------------------- 2. App shell — sidebar rail + workspace --------------------------------------------------------------------- */ .app-shell{ min-height:100vh; } /* ---- rail ---- Fixed (not sticky-inside-flex) on desktop: sticky nested in a flex row, combined with the topbar's backdrop-filter, is unreliable across engines at non-1:1 page zoom. Fixed positioning is the same proven approach the .actionbar already uses. Mobile keeps a simple in-flow sticky strip. */ .side-nav{ width:var(--rail-width); background:var(--rail-bg); border-right:1px solid var(--rail-line); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; transition:width .25s ease; } html[data-entity="rozper"] .side-nav{ background:var(--rail-bg); } @media (min-width:981px){ .side-nav{ position:fixed; top:0; left:0; height:100vh; z-index:20; } .workspace{ margin-left:var(--rail-width); transition:margin-left .25s ease; } } .side-nav__brand{ padding:30px 26px 18px; display:flex; align-items:center; gap:12px; } .side-nav__brand img{ height:34px; width:auto; display:block; } .side-nav__brand .wordmark{ font-size:21px; font-weight:800; letter-spacing:.2px; color:var(--rail-ink); } html[data-entity="rozper"] .side-nav__brand .wordmark{ color:#ffffff; font-weight:750; letter-spacing:.3px; } .side-nav__tagline{ padding:0 26px 20px; margin:0; font-size:12.5px; color:var(--rail-muted); font-weight:500; border-bottom:1px solid var(--rail-line); } .side-nav__heading{ padding:20px 26px 6px; margin:0; font-size:11px; font-weight:750; letter-spacing:.11em; text-transform:uppercase; color:var(--rail-muted); } /* stepper = required container class for kyc-form.js */ .stepper{ display:flex; flex-direction:column; gap:2px; padding:6px 14px 10px; flex:1; } .step{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; border:0; background:none; font-family:inherit; cursor:pointer; padding:11px 12px; border-radius:var(--radius-md); color:var(--rail-ink); position:relative; transition:.15s; -webkit-tap-highlight-color:transparent; } .step:hover{ background:var(--rail-active-bg); } .step:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; } .step__index{ flex:0 0 auto; width:34px; height:34px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--line-soft); color:var(--muted); transition:.15s; } /* (Rozper's .step__index default/active/done appearance is fully defined by the .rozper-page .step__index rules in section 8 below — no leftover override needed here.) */ .step__index svg{ width:16px; height:16px; } .step__index .check{ display:none; } .step__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .step__label{ font-size:13.5px; font-weight:650; color:var(--rail-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .step__desc{ font-size:11.5px; color:var(--rail-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .step.active{ background:var(--rail-active-bg); } .step.active .step__index{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; } .step.active .step__label{ color:var(--rail-active-ink); } .step.active::before{ content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--brand),var(--brand-2)); } html[data-entity="rozper"] .step.active::before{ display:none; } .step.done .step__index{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; } .step.done .step__index .glyph{ display:none; } .step.done .step__index .check{ display:block; } .step.done .step__desc{ color:var(--rail-muted); } /* Progress hero — LetsDial only. Sits above "Onboarding Steps" (not pinned to the sidebar bottom). #progfill/#progtext are the exact same JS-required elements kyc-form.js already updates; #progPercent is a presentation-only mirror kept in sync by an isolated inline script in the template — kyc-form.js itself is untouched. */ html[data-entity="letsdial"] .progress-hero{ padding:20px 26px 20px; border-bottom:1px solid var(--rail-line); } html[data-entity="letsdial"] .progress-hero__figure{ display:flex; align-items:baseline; gap:7px; margin-bottom:3px; } html[data-entity="letsdial"] .progress-hero__pct{ font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1; background:linear-gradient(135deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } html[data-entity="letsdial"] .progress-hero__word{ font-size:13px; font-weight:650; color:var(--rail-muted); } html[data-entity="letsdial"] .progress-hero__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; } html[data-entity="letsdial"] .progress-hero__label{ font-size:11px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--rail-muted); } html[data-entity="letsdial"] .progress-hero__step{ font-size:11.5px; font-weight:650; color:var(--rail-ink); } .headprog .track{ height:6px; background:var(--line-soft); border-radius:99px; overflow:hidden; } /* (Rozper's progress track now sits on a light tracker card, not a dark header — its background is set directly by .rozper-page__tracker .track in section 8 below.) */ .headprog .fill{ height:100%; width:14.3%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .35s ease; } /* No glow on the fill — the indigo gradient itself reads clearly against the navy header without an added glow effect. */ /* ---- workspace ---- */ .workspace{ flex:1; min-width:0; } .workspace__topbar{ position:sticky; top:0; z-index:15; background:color-mix(in srgb, var(--page-bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:16px 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .workspace__crumb{ font-size:12.5px; color:var(--muted); font-weight:600; } .workspace__crumb b{ color:var(--ink); font-weight:700; } .workspace__title{ margin:2px 0 0; font-size:18px; font-weight:750; } .workspace__inner{ max-width:860px; margin:0 auto; padding:32px 40px 150px; } .alert{ background:var(--danger-soft); border:1px solid color-mix(in srgb, var(--danger) 30%, transparent); color:var(--danger); padding:13px 16px; border-radius:var(--radius-md); margin-bottom:20px; font-size:13.5px; font-weight:500; } .alert.info{ background:var(--brand-soft); border-color:color-mix(in srgb, var(--brand) 28%, transparent); color:var(--brand-strong); } /* --------------------------------------------------------------------- 3. Panel card --------------------------------------------------------------------- */ .panel{ display:none; } .panel.active{ display:block; animation:rise .3s ease; } @keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } } .panel__card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; } html[data-entity="rozper"] .panel__card{ border:1px solid var(--line); border-top:2px solid var(--gold); } .panel__header{ padding:30px 36px 22px; border-bottom:1px solid var(--line-soft); } .panel__eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-strong); background:var(--brand-soft); padding:6px 13px; border-radius:var(--radius-pill); } .panel__header h2{ margin:14px 0 0; font-size:23px; font-weight:750; letter-spacing:-.01em; } .panel__header p{ margin:5px 0 0; font-size:13.5px; color:var(--muted); } .panel__body{ padding:28px 36px 34px; } /* --------------------------------------------------------------------- 4. Field grid & field component --------------------------------------------------------------------- */ .field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 32px; } .field-grid .field--full{ grid-column:1/-1; } .section-divider{ grid-column:1/-1; display:flex; align-items:center; gap:12px; margin:10px 0 -2px; font-size:11.5px; font-weight:750; text-transform:uppercase; letter-spacing:.09em; color:var(--brand-strong); } .section-divider::after{ content:''; flex:1; height:1px; background:var(--line); } .section-divider:first-child{ margin-top:0; } @media (max-width:680px){ .field-grid{ grid-template-columns:1fr; } } .field{ min-width:0; } .field__label{ display:block; font-size:13px; font-weight:650; margin-bottom:7px; color:var(--ink-soft); } .form-control, .form-select{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14px; color:var(--ink); background:var(--input-bg); font-family:inherit; transition:.15s; } html[data-entity="rozper"] .form-control, html[data-entity="rozper"] .form-select{ border-radius:var(--radius-md); border-color:var(--line); background:var(--input-bg); } html[data-entity="rozper"] .form-control:focus, html[data-entity="rozper"] .form-select:focus{ border-color:var(--gold); background:#fff; box-shadow:var(--focus-ring); } select.form-select{ cursor:pointer; } textarea.form-control{ resize:vertical; min-height:74px; } .form-control::placeholder{ color:#adb7c6; } .form-control:focus, .form-select:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:var(--focus-ring); } .field__help{ margin:6px 0 0; font-size:12px; color:var(--muted); } .field__error{ margin:6px 0 0; font-size:12.5px; color:var(--danger); font-weight:600; } .field.has-error .form-control, .field.has-error .form-select, .field.has-error .form-file{ border-color:var(--danger); } /* checkboxes */ .field--checkbox .check-line{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13.5px; color:var(--ink-soft); font-weight:500; } .field--checkbox .check-line input{ margin-top:2px; width:17px; height:17px; accent-color:var(--brand); flex:0 0 auto; } .choice-grid{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } @media (max-width:680px){ .choice-grid{ grid-template-columns:1fr 1fr; } } .choice-grid .field{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; background:var(--input-bg); } html[data-entity="rozper"] .choice-grid .field{ border-radius:var(--radius-md); border-color:var(--line-soft); } /* yes/no radio */ .field--radio{ grid-column:1/-1; } .field--radio .field__label{ margin-bottom:9px; } .yesno{ display:flex; gap:10px; flex-wrap:wrap; } .yesno label{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); padding:9px 20px; border-radius:var(--radius-pill); cursor:pointer; font-size:13.5px; font-weight:600; background:#fff; color:var(--ink-soft); transition:.15s; } .yesno input{ accent-color:var(--brand); } .yesno label:has(input:checked){ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-strong); } /* certifications */ .certs{ display:grid; gap:12px; } .certs .field{ background:var(--input-bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:15px 17px; } /* file upload */ .field--file .form-file{ width:100%; padding:16px; border:1.5px dashed var(--line); border-radius:var(--radius-md); font-size:13px; background:var(--input-bg); cursor:pointer; color:var(--ink-soft); } .field--file .form-file:hover{ border-color:var(--brand); } .dl-note{ grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; background:var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 26%, transparent); border-radius:var(--radius-md); padding:14px 18px; font-size:13.5px; color:var(--brand-strong); } .dl-note a{ background:var(--brand); color:#fff; text-decoration:none; padding:10px 20px; border-radius:var(--radius-pill); font-weight:650; white-space:nowrap; font-size:13px; } .dl-note a:hover{ background:var(--brand-strong); } /* signature */ .field--signature{ grid-column:1/-1; } .sigpad{ border:1.5px dashed var(--line); border-radius:var(--radius-md); background:#fff; width:100%; height:190px; touch-action:none; cursor:crosshair; } .sigbar{ display:flex; justify-content:space-between; align-items:center; margin-top:9px; } .btn-ghost{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 16px; font-size:12.5px; cursor:pointer; color:var(--muted); font-weight:600; } .field--signature.has-error .sigpad{ border-color:var(--danger); } /* --------------------------------------------------------------------- 5. Action bar (footer nav) --------------------------------------------------------------------- */ .actionbar{ position:fixed; bottom:0; left:var(--rail-width); right:0; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); z-index:40; transition:left .25s ease; } .actionbar .inner{ max-width:860px; margin:0 auto; padding:16px 40px; display:flex; align-items:center; gap:16px; } .grow{ flex:1; min-width:0; display:flex; align-items:center; } .saved{ color:var(--brand-strong); font-size:12.5px; font-weight:650; opacity:0; transition:opacity .3s; display:flex; align-items:center; gap:6px; } .saved.show{ opacity:1; } .btn{ background:var(--btn-ink); color:#fff; border:0; border-radius:var(--radius-pill); padding:13px 28px; font-size:14.5px; font-weight:650; cursor:pointer; transition:.15s; font-family:inherit; } .btn:hover{ background:var(--btn-ink-hover); transform:translateY(-1px); } /* Enterprise button shape: moderate radius, not a giant pill. */ .rozper-page .btn{ border-radius:var(--radius-md); padding:12px 26px; } html[data-entity="rozper"] .btn{ background:var(--gold); color:#ffffff; box-shadow:0 3px 10px -4px rgba(4,107,210,.4); transition:.15s; } html[data-entity="rozper"] .btn:hover{ background:var(--gold-ink); color:#fff; box-shadow:0 5px 14px -4px rgba(4,107,210,.45); transform:translateY(-1px); } html[data-entity="rozper"] .btn.secondary{ background:#fff; color:var(--ink); } html[data-entity="rozper"] .btn.secondary:hover{ background:var(--input-bg); color:var(--ink); box-shadow:none; transform:none; } .rozper-page .btn.secondary{ border-radius:var(--radius-md); } .btn.secondary{ background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none; } .btn.secondary:hover{ background:var(--input-bg); transform:none; } .btn[hidden]{ display:none; } /* --------------------------------------------------------------------- 6b. Collapsible sidebar (LetsDial page only — gated by body.sidebar- collapsed, a class only the LetsDial template ever sets via its own inline script; Rozper never adds this class, so these rules never activate there). Desktop-only: the mobile rail already collapses to a compact horizontal strip below, so the icon-rail toggle is hidden on mobile. --------------------------------------------------------------------- */ .side-nav__toggle{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px 12px; border:0; border-top:1px solid var(--rail-line); background:none; color:var(--rail-muted); cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:650; -webkit-tap-highlight-color:transparent; } .side-nav__toggle:hover{ background:var(--rail-active-bg); color:var(--rail-ink); } .side-nav__toggle svg{ width:16px; height:16px; flex:0 0 auto; transition:transform .25s ease; } body:not(.sidebar-collapsed) .side-nav__toggle svg{ transform:rotate(180deg); } .side-nav__toggle .toggle-label{ white-space:nowrap; } @media (min-width:981px){ body.sidebar-collapsed .side-nav{ width:var(--rail-width-collapsed); } body.sidebar-collapsed .workspace{ margin-left:var(--rail-width-collapsed); } body.sidebar-collapsed .actionbar{ left:var(--rail-width-collapsed); } body.sidebar-collapsed .side-nav__brand{ justify-content:center; padding:24px 10px 14px; } body.sidebar-collapsed .side-nav__brand img{ height:auto; max-width:100%; } body.sidebar-collapsed .side-nav__tagline, body.sidebar-collapsed .side-nav__heading, body.sidebar-collapsed .step__body, body.sidebar-collapsed .side-nav__toggle .toggle-label{ display:none; } /* Progress hero collapses to just the slim bar — a compact visual stand-in for the percentage, per the "collapsed can still represent progress compactly" requirement — rather than disappearing entirely. */ body.sidebar-collapsed .progress-hero{ padding:14px 10px; border-bottom-color:transparent; } body.sidebar-collapsed .progress-hero__figure, body.sidebar-collapsed .progress-hero__meta{ display:none; } body.sidebar-collapsed .step{ justify-content:center; padding:11px 0; gap:0; } body.sidebar-collapsed .step.active::before{ left:0; } } @media (max-width:980px){ .side-nav__toggle{ display:none; } } /* --------------------------------------------------------------------- 7. Responsive — rail collapses to a horizontal top strip --------------------------------------------------------------------- */ @media (max-width:980px){ .side-nav{ position:sticky; top:0; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--rail-line); overflow:visible; padding:0; z-index:20; } .side-nav__brand{ padding:14px 16px 10px; border-bottom:0; } .side-nav__brand .wordmark{ font-size:17px; } .side-nav__tagline, .side-nav__heading{ display:none; } .stepper{ flex-direction:row; overflow-x:auto; padding:0 12px 10px; gap:4px; scrollbar-width:none; } .stepper::-webkit-scrollbar{ display:none; } .step{ flex:0 0 auto; padding:10px 10px; } .step__body{ display:none; } .step.active::before{ left:8px; right:8px; top:auto; bottom:2px; height:3px; width:auto; border-radius:3px; } html[data-entity="letsdial"] .progress-hero{ padding:0 16px 14px; border-bottom:0; } html[data-entity="letsdial"] .progress-hero__meta{ margin-bottom:7px; } .workspace__topbar{ padding:14px 20px; } .workspace__inner{ padding:22px 20px 150px; } .panel__header{ padding:22px 20px 18px; } .panel__body{ padding:20px 20px 26px; } .actionbar{ left:0; } .actionbar .inner{ padding:12px 16px; } } @media (max-width:520px){ .workspace__title{ display:none; } .btn{ padding:12px 20px; font-size:13.5px; } } /* --------------------------------------------------------------------- 8. Rozper — premium DARK enterprise dashboard (Rozper template ONLY) Every rule below is scoped under .rozper-page, a wrapper class that exists only in the Rozper template. The LetsDial template never has this class in its DOM, so nothing here can ever match or affect it — the sidebar layout in sections 2–3 above (.app-shell/.side-nav/ .workspace) is left completely untouched and still serves LetsDial exactly as before. --------------------------------------------------------------------- */ .rozper-page{ min-height:100vh; background:var(--rail-bg); } /* ---- header: dark navy brand bar, gold mark, trust line ---- */ .rozper-page__topbar{ position:sticky; top:0; z-index:31; background:var(--rail-bg); padding:16px 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 18px -16px rgba(4,6,16,.7); } .rozper-page__brand{ display:flex; align-items:center; gap:12px; } .rozper-page__mark{ width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:linear-gradient(150deg,var(--gold-2),var(--gold)); color:#ffffff; font-weight:800; font-size:17px; } .rozper-page__brandtext{ display:flex; flex-direction:column; gap:1px; } .rozper-page__wordmark{ font-size:18px; font-weight:750; letter-spacing:.2px; color:#ffffff; } .rozper-page__tagline{ font-size:11.5px; font-weight:500; color:var(--rail-muted); } .rozper-page__headerright{ display:flex; align-items:center; gap:22px; } .rozper-page__trust{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--rail-muted); } .rozper-page__trust svg{ width:15px; height:15px; color:var(--gold-2); flex:0 0 auto; } .rozper-page__appbadge{ display:flex; align-items:center; gap:10px; padding-left:20px; border-left:1px solid var(--rail-line); } .rozper-page__appbadge-mark{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--brand-2); color:#fff; font-size:11.5px; font-weight:750; letter-spacing:.02em; } .rozper-page__appbadge-text{ display:flex; flex-direction:column; gap:0; line-height:1.3; } .rozper-page__appbadge-text span{ font-size:12.5px; font-weight:700; color:#fff; } .rozper-page__appbadge-text small{ font-size:10.5px; font-weight:500; color:var(--rail-muted); } /* ---- onboarding / progress panel ---- */ .rozper-page__tracker{ position:relative; z-index:5; margin:22px 40px 0; padding:22px 32px 20px; border-radius:var(--radius-lg); background:var(--rail-bg-2); border:1px solid var(--rail-line); box-shadow:var(--shadow-card); } .rozper-page__tracker-title{ display:block; font-size:13px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:#ffffff; margin-bottom:14px; } .rozper-page__tracker .headprog{ margin-bottom:18px; } .rozper-page__tracker .track{ height:4px; background:var(--rail-line); border-radius:99px; } .rozper-page__tracker .fill{ background:linear-gradient(90deg,var(--gold),var(--gold-2)); } .rozper-page__tracker-row{ display:flex; align-items:center; gap:30px; } .rozper-page__tracker-meta{ display:flex; align-items:center; gap:14px; flex:0 0 auto; } .rozper-page__tracker-text{ display:flex; flex-direction:column; gap:1px; } .rozper-page__tracker-step{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rail-muted); } .rozper-page__tracker-pct{ font-size:25px; font-weight:800; letter-spacing:-.01em; color:#ffffff; line-height:1.15; } .rozper-page__tracker-caption{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-2); } /* circular progress ring — a conic-gradient driven by the isolated script from the same #progfill percentage kyc-form.js already computes. */ .rozper-page__ring{ --ring-size:52px; width:var(--ring-size); height:var(--ring-size); border-radius:50%; flex:0 0 auto; background:conic-gradient(var(--gold) 14%, var(--rail-line) 14% 100%); display:grid; place-items:center; position:relative; } .rozper-page__ring::before{ content:''; width:calc(var(--ring-size) - 10px); height:calc(var(--ring-size) - 10px); border-radius:50%; background:var(--rail-bg-2); position:absolute; } .rozper-page__ring span{ position:relative; z-index:1; font-size:11px; font-weight:750; color:#ffffff; } /* horizontal wizard stepper — rounded-square icons (not circles), thin dashed connectors, gold active/progress state, blue "done" state. */ .rozper-page .stepper{ display:flex; flex-direction:row; align-items:flex-start; flex:1 1 auto; gap:0; padding:2px 0 0; min-width:0; overflow-x:auto; overflow-y:visible; scrollbar-width:none; } .rozper-page .stepper::-webkit-scrollbar{ display:none; } .rozper-page .step{ flex:1 1 0; min-width:100px; width:auto; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:8px 8px 6px; border-radius:var(--radius-sm); transition:background .15s ease, box-shadow .15s ease; } .rozper-page .step:hover{ background:var(--rail-active-bg); } /* Connector line uses ::after (not ::before) so it never collides with the sidebar's .step.active::before accent-bar rule, which is display:none for Rozper and would otherwise win on specificity and gap the line. */ .rozper-page .step:not(:first-child)::after{ content:''; position:absolute; top:27px; left:-50%; width:100%; height:0; border-top:1.5px dashed var(--rail-line); z-index:0; } .rozper-page .step.done:not(:first-child)::after{ border-top-color:var(--brand-2); border-top-style:solid; } .rozper-page .step.active:not(:first-child)::after{ border-top-color:var(--gold); border-top-style:solid; } .rozper-page .step__index{ position:relative; z-index:1; width:36px; height:36px; border-radius:11px; background:rgba(255,255,255,.04); border:1.5px solid rgba(79,108,255,.35); color:var(--rail-muted); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; } .rozper-page .step.active .step__index{ background:var(--gold); border-color:var(--gold); color:#ffffff; box-shadow:0 0 0 5px rgba(34,211,238,.18); } .rozper-page .step.done .step__index{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; } .rozper-page .step__body{ align-items:center; gap:1px; } .rozper-page .step__num{ font-size:10px; font-weight:750; letter-spacing:.1em; color:var(--rail-muted); } .rozper-page .step.active .step__num{ color:var(--gold-2); } .rozper-page .step.done .step__num{ color:var(--brand-2); } .rozper-page .step__label{ font-size:12.5px; font-weight:600; color:var(--rail-muted); white-space:nowrap; } .rozper-page .step__desc{ font-size:11px; color:var(--rail-muted); opacity:.65; white-space:nowrap; } .rozper-page .step.active .step__label{ color:#ffffff; font-weight:750; } .rozper-page .step.done .step__label{ color:var(--rail-ink); font-weight:650; } @media (max-width:900px){ .rozper-page__tracker-row{ flex-direction:column; align-items:stretch; gap:16px; } .rozper-page .stepper{ width:100%; } } /* ---- workspace: full-width WHITE form card + white info rail ---- */ .rozper-page__main{ padding:0; } .rozper-page__workspace{ max-width:1180px; margin:0 auto; padding:24px 40px 40px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; } .rozper-page__content{ min-width:0; width:100%; } html[data-entity="rozper"] .panel__card{ min-width:0; } /* Defensive: locks the field grid's tracks to the same "never let intrinsic content force an overflow" rule as the outer workspace grid. */ html[data-entity="rozper"] .field-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } html[data-entity="rozper"] .panel__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:26px 34px 22px; position:relative; } html[data-entity="rozper"] .panel__header::after{ content:''; position:absolute; left:34px; right:34px; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); } .rozper-page__headleft{ display:flex; align-items:flex-start; gap:14px; min-width:0; } .rozper-page__panelicon{ width:44px; height:44px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:linear-gradient(135deg,var(--gold-2),var(--brand-2)); color:#fff; box-shadow:0 3px 8px -3px rgba(15,23,42,.3); } .rozper-page__panelicon svg{ width:20px; height:20px; } html[data-entity="rozper"] .panel__header h2{ margin:0; font-size:20px; } html[data-entity="rozper"] .panel__header p{ margin:4px 0 0; } html[data-entity="rozper"] .panel__eyebrow{ flex:0 0 auto; white-space:nowrap; background:var(--gold-soft); color:var(--gold-ink); } .rozper-page__aside{ display:flex; flex-direction:column; gap:16px; position:sticky; top:24px; } .rozper-page__infocard{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:20px 20px 22px; } .rozper-page__infocard--muted{ background:var(--brand-soft); border-color:transparent; box-shadow:var(--shadow-card); } .rozper-page__infocard-icon{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; margin-bottom:12px; background:var(--gold-soft); color:var(--gold-ink); } .rozper-page__infocard-icon svg{ width:17px; height:17px; } .rozper-page__infocard h3{ margin:0 0 8px; font-size:13.5px; font-weight:750; color:var(--ink); } .rozper-page__infocard p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-soft); } .rozper-page__infocard ul{ margin:0; padding:0 0 0 16px; font-size:12.5px; line-height:1.7; color:var(--ink-soft); } .rozper-page__infocard li{ margin-bottom:2px; } .rozper-page__infocard li:last-child{ margin-bottom:0; } .rozper-page__infocard em.req{ font-style:normal; } /* The action bar is relocated (by the isolated script in the Rozper template) into the currently active step's .panel__card, right after its fields — so it must render in normal document flow there, not pinned to the viewport like the shared/LetsDial .actionbar rule. kyc-form.js only ever looks these buttons up by ID, so moving their container in the DOM does not affect it. */ .rozper-page .actionbar{ position:static; left:auto; right:auto; bottom:auto; z-index:auto; background:transparent; backdrop-filter:none; box-shadow:none; transition:none; } .rozper-page .actionbar .btn.savedraft{ background:#fff; color:var(--brand-strong); border:1.5px solid var(--line); box-shadow:none; } .rozper-page .actionbar .btn.savedraft:hover{ background:var(--brand-soft); color:var(--brand-strong); transform:none; box-shadow:none; } /* #047857, not the flat #00d492 official green, so the small "Draft saved" text keeps AA-readable contrast on a white background. */ .rozper-page .saved{ color:#047857; } /* ---- footer: normal in-flow block (NOT fixed/sticky) ---- */ .rozper-page__footer{ position:static; background:var(--rail-bg); padding:18px 40px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--rail-muted); } .rozper-page__trust--footer svg{ color:var(--gold-2); } @media (max-width:1040px){ .rozper-page__workspace{ grid-template-columns:1fr; max-width:760px; } .rozper-page__aside{ position:static; flex-direction:row; flex-wrap:wrap; } .rozper-page__aside .rozper-page__infocard{ flex:1 1 260px; } } @media (max-width:980px){ .rozper-page__topbar{ padding:14px 20px; } .rozper-page__topbar .rozper-page__trust{ display:none; } .rozper-page__appbadge{ padding-left:0; border-left:0; } .rozper-page__appbadge-text small{ display:none; } .rozper-page__tracker{ margin:16px 20px 0; padding:18px 20px 16px; } .rozper-page__tracker-title{ font-size:12px; } .rozper-page__ring{ --ring-size:40px; } .rozper-page__tracker-pct{ font-size:20px; } .rozper-page__workspace{ padding:20px 20px 20px; } .rozper-page__footer{ padding:14px 20px; } /* The shared mobile rule hides .step__body entirely (built for the LetsDial icon-only strip) — Rozper's top nav still wants labels visible at this width, only descriptions drop away below. */ .rozper-page .step__body{ display:flex; } } @media (max-width:640px){ .rozper-page__tagline{ display:none; } .rozper-page__wordmark{ font-size:16px; } .rozper-page__appbadge-text{ display:none; } .rozper-page .step__desc, .rozper-page .step__num{ display:none; } .rozper-page .step{ min-width:78px; padding-top:6px; } .rozper-page .step__index{ width:30px; height:30px; } .rozper-page .step:not(:first-child)::after{ top:23px; } .rozper-page__aside{ flex-direction:column; } .rozper-page__footer{ flex-direction:column; align-items:flex-start; gap:8px; } html[data-entity="rozper"] .panel__header{ flex-direction:column; gap:10px; } } /* --------------------------------------------------------------------- 9. LetsDial — small visual polish (LetsDial template ONLY) Scoped under html[data-entity="letsdial"] so nothing here can affect Rozper. --------------------------------------------------------------------- */ html[data-entity="letsdial"] body{ overflow-x:hidden; } /* #047857, not the flat #10B981, so the small "Draft saved" text keeps AA-readable contrast on a white background (#10B981 alone is ~2.6:1). */ html[data-entity="letsdial"] .saved{ color:#047857; } /* Cleaner, pixel-consistent input height across text fields and selects (native in some browsers even with identical padding). */ html[data-entity="letsdial"] .form-control, html[data-entity="letsdial"] .form-select{ min-height:44px; } /* Slightly clearer active-step indication in the rail. */ html[data-entity="letsdial"] .step.active .step__index{ box-shadow:0 0 0 3px var(--focus-ring); } /* Tidier top rhythm for section dividers inside a field grid. */ html[data-entity="letsdial"] .section-divider{ margin-top:6px; } /* Bug fix: the shared mobile rule (@media max-width:980px) sets .step{flex:0 0 auto} but never resets the desktop .step{width:100%} rule, so each icon-only mobile step spans nearly the full viewport width and pushes the other 6 off-screen in the scroll strip. Rozper already sets its own width:auto in its scoped top-nav CSS above and is unaffected; this restores the same correct sizing for LetsDial. */ @media (max-width:980px){ html[data-entity="letsdial"] .step{ width:auto; } } /* --------------------------------------------------------------------- 9b. LetsDial — premium wizard redesign (LetsDial template ONLY) Visual-only. The step sequence (Company → Contacts → Compliance → Traffic → Regulatory → Documents → Certification) is the actual DOM order of both the .stepper buttons and the .panel sections, so it is simultaneously the visual order, the Next/Back order (kyc-form.js's cur+1/cur-1 array-index logic) and the step-click order (kyc-form.js reads data-step to pick the target index). --------------------------------------------------------------------- */ /* Step-number eyebrow above each name (needs .step__num in the HTML). */ html[data-entity="letsdial"] .step__body{ gap:2px; } html[data-entity="letsdial"] .step__num{ font-size:10px; font-weight:750; letter-spacing:.12em; color:var(--muted); } html[data-entity="letsdial"] .step.active .step__num, html[data-entity="letsdial"] .step.done .step__num{ color:var(--brand-strong); } /* Refined premium card treatment for the active step: a quiet inset border plus a soft "elevation" shadow (not a translate/lift, which would jostle a vertical list) layered on top of the existing accent bar and icon ring. */ html[data-entity="letsdial"] .step.active{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent), 0 3px 10px -6px color-mix(in srgb, var(--brand) 45%, transparent); } /* Micro-interaction: a very slight rightward nudge on hover for inactive/upcoming rows — tasteful, not a bounce or glow. */ html[data-entity="letsdial"] .step:not(.active):hover{ transform:translateX(1px); } /* Panel cards: a slim single-color brand accent along the top edge. */ html[data-entity="letsdial"] .panel__card{ border-top:3px solid var(--brand); } /* Crisper section-header / workspace typography hierarchy. */ html[data-entity="letsdial"] .panel__header h2{ letter-spacing:-.015em; } html[data-entity="letsdial"] .panel__eyebrow{ letter-spacing:.09em; } html[data-entity="letsdial"] .workspace__crumb{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-strong); } html[data-entity="letsdial"] .workspace__title{ letter-spacing:-.01em; } /* Buttons: slightly firmer premium typography + subtle hover lift. */ html[data-entity="letsdial"] .btn{ letter-spacing:.01em; } html[data-entity="letsdial"] .btn:hover{ box-shadow:0 6px 16px -8px rgba(14,124,143,.35); } /* Inputs: a touch more definition on hover, ahead of focus. */ html[data-entity="letsdial"] .form-control:hover, html[data-entity="letsdial"] .form-select:hover{ border-color:color-mix(in srgb, var(--brand) 35%, var(--line)); } /* Fine divider under each certification card + a touch more section rhythm, for a more considered, less "template" feel. */ html[data-entity="letsdial"] .certs .field{ border-color:var(--line); } html[data-entity="letsdial"] .certs .field:hover{ border-color:color-mix(in srgb, var(--brand) 30%, var(--line)); } /* Mobile: numbers stay readable in the compact icon strip; descriptions already drop there via the shared rule. */ @media (max-width:980px){ html[data-entity="letsdial"] .step__num{ display:none; } } /* ========================================================================== JS-CONTRACT AUDIT — do not rename/remove without updating kyc-form.js: .panel, .stepper, .step (+ data-step 0-6, in DOM order matching panels), #backbtn, #nextbtn, #submitbtn, #kycform, #progfill, #progtext, .field (ancestor of #id_lawsuit_detail, #id_blocked_detail, #id_stir_shaken_plan, #id_billing_name/_email/_phone/_address), #id_billing_same_as_main, #sigpad, #id_signature_data, #sigclear, .field (ancestor of #sigpad), #savedmsg, input[name=...] on every field. ========================================================================== */