/* ============================================================================
VKSSP — refreshed neutral-professional theme (institution-agnostic).
Phase: applicant frontend UI pass.
SCOPED under `body.vk-theme` so it can be rolled out screen-by-screen without
touching pages that haven't opted in (zero risk to other screens).
ALL colours are CSS variables — an institution re-themes by overriding the
variables below (no hardcoded colours). Visual/UX only: no markup logic,
field names, async flows or JS behaviour are changed by this file.
Plain CSS transitions only (200–300ms ease) — no animation libraries.
============================================================================ */
:root {
/* ---- Brand-neutral professional palette (override per institution) ---- */
--vk-primary: #2d2a72; /* calm professional indigo (main actions) */
--vk-primary-600: #383592; /* hover */
--vk-primary-700: #211f55; /* pressed / strong */
--vk-accent: #e0457b; /* brand pink, used sparingly as an accent */
--vk-bg: #f4f6f9; /* app background (neutral) */
--vk-surface: #ffffff; /* cards / panels */
--vk-surface-2: #fafbfc; /* inset panels */
--vk-text: #1f2430; /* primary text */
--vk-muted: #6a7283; /* secondary text */
--vk-border: #e4e7ee; /* hairline borders */
--vk-border-strong: #cfd4df; /* input borders */
--vk-success: #1f9d6b;
--vk-danger: #d64550;
--vk-warning: #e8a317;
--vk-radius: 12px;
--vk-radius-sm: 8px;
--vk-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
--vk-shadow: 0 2px 10px rgba(16,24,40,.07);
--vk-shadow-md: 0 10px 28px rgba(16,24,40,.12);
--vk-transition: 220ms ease;
/* focus ring derives from the brand colour so it re-themes per institution */
--vk-focus-ring: 0 0 0 3px color-mix(in srgb, var(--vk-primary) 18%, transparent);
/* ---- Type roles ---- */
--vk-font-sans: 'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
--vk-font-display: 'Fraunces',Georgia,'Times New Roman',serif; /* scholarly serif, headlines only */
/* ---- Landing hero photo (institution-swappable). Set to `none` for a pure gradient hero.
Path is relative to THIS css file (application/assets/css/). ---- */
--vk-hero-image: url("../images/hero-classroom.jpg");
}
/* Scoped variable picked up by navbar.php's inline style (var(--vk-navbar-bg, #ffd3d3)). */
body.vk-theme { --vk-navbar-bg: var(--vk-surface); }
body.vk-theme {
background: var(--vk-bg);
color: var(--vk-text);
-webkit-font-smoothing: antialiased;
}
/* ---- Navbar ---- */
body.vk-theme #header-wrap nav {
border-bottom: 1px solid var(--vk-border);
box-shadow: var(--vk-shadow-sm);
}
/* ---- Page / form shell ---- */
body.vk-theme .content-section { background: var(--vk-bg); }
body.vk-theme .submit-data {
background: var(--vk-surface);
border: 1px solid var(--vk-border);
border-radius: var(--vk-radius);
box-shadow: var(--vk-shadow);
padding: 24px 26px 28px;
}
/* ============================================================================
Step indicator → SEGMENTED PILL TABS (nav-tabs.php renders .breadcrumb > li.completed/.active).
A soft container holds one pill per step: the current step is a filled brand pill with a lift,
completed steps are tinted, upcoming are quiet. Re-skins the legacy arrow-tab markup.
============================================================================ */
body.vk-theme .breadcrumb {
display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px;
list-style: none; background: #f1f2f6; border: 1px solid var(--vk-border);
border-radius: 14px; padding: 6px; margin: 0 0 6px; overflow-x: auto; overflow-y: hidden;
}
body.vk-theme .breadcrumb::-webkit-scrollbar { height: 6px; }
body.vk-theme .breadcrumb::-webkit-scrollbar-thumb { background: var(--vk-border-strong, #cfd4df); border-radius: 6px; }
body.vk-theme .breadcrumb li {
list-style: none; flex: 1 1 auto; min-width: max-content; display: flex; float: none;
}
body.vk-theme .breadcrumb li::before,
body.vk-theme .breadcrumb li::after { content: none !important; } /* drop legacy '/' separators */
body.vk-theme .breadcrumb li a::after,
body.vk-theme .breadcrumb li a::before { content: none !important; display: none !important; border: 0 !important; } /* drop legacy arrow triangles */
body.vk-theme .breadcrumb li a {
display: flex; align-items: center; justify-content: center; gap: 7px;
width: 100%; white-space: nowrap; cursor: default;
padding: 11px 16px; border-radius: 10px; border: 1px solid transparent;
background: transparent !important; color: var(--vk-muted) !important;
font-size: 13px; font-weight: 600; line-height: 1.1; text-decoration: none !important;
transition: background-color var(--vk-transition), color var(--vk-transition), box-shadow var(--vk-transition);
}
body.vk-theme .breadcrumb li a[href] { cursor: pointer; }
body.vk-theme .breadcrumb li a[href]:hover { color: var(--vk-text) !important; background: rgba(255,255,255,.7) !important; }
/* completed: tinted pill + a small tick, brand-coloured text */
/* completed: solid green pill with a white tick (green = done, matching the earlier design) */
body.vk-theme .breadcrumb li.completed a {
background: var(--vk-success) !important; color: #fff !important;
}
body.vk-theme .breadcrumb li.completed a[href]:hover { background: color-mix(in srgb, var(--vk-success) 88%, #000) !important; }
body.vk-theme .breadcrumb li.completed a::before {
content: '' !important; display: inline-block !important; width: 14px; height: 14px; flex: none;
background-repeat: no-repeat; background-position: center; background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
/* active: filled brand pill with a soft lift + white text (paramount look) */
body.vk-theme .breadcrumb li.active a,
body.vk-theme .breadcrumb li.active_edit a {
background: var(--vk-primary) !important; color: #fff !important; font-weight: 700;
box-shadow: 0 8px 16px -7px color-mix(in srgb, var(--vk-primary) 60%, transparent), 0 2px 5px -3px rgba(0,0,0,.18);
}
/* pills sit ON the form card as its header: pull to the card's top edge + a divider below */
body.vk-theme .submit-data .vk-steps-head {
margin: -8px -10px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--vk-border);
}
body.vk-theme .submit-data .vk-steps-head .breadcrumb { margin: 0; }
body.vk-theme .submit-data .vk-steps-head .col-sm-12 { padding: 0; }
body.vk-theme .submit-data .vk-steps-head + .form_title { margin-top: 0; }
/* ---- Section headings (legacy .form_title was a dark navy bar → text went invisible) ---- */
body.vk-theme .form_title {
position: relative;
font-size: 17px; font-weight: 700; color: var(--vk-text) !important;
background: none !important; /* remove the legacy dark bar */
margin: 30px 0 16px; padding: 1px 0 10px 15px; border-radius: 0;
border-bottom: 1px solid var(--vk-border);
}
body.vk-theme .form_title::before { /* gradient accent rail */
content: ''; position: absolute; left: 0; top: 3px; bottom: 11px; width: 4px;
border-radius: 3px; background: linear-gradient(180deg, var(--vk-primary), var(--vk-accent));
}
body.vk-theme .form_title sup,
body.vk-theme .text-danger sup { color: var(--vk-accent); }
/* Required-field asterisk: keep a small gap so it never crowds the label text or the next field. */
body.vk-theme label sup,
body.vk-theme .form-label sup,
body.vk-theme label .text-danger { margin-left: 3px; padding-right: 2px; }
/* AI translation disclaimer bar — non-English applicant screens only. Subtle info style, thin, never alarming. */
.ai-disclaimer-bar {
background: #eef1f6;
color: #5a6472;
font-size: 12px;
line-height: 1.4;
text-align: center;
padding: 5px 14px;
border-bottom: 1px solid #e2e6ee;
}
/* Allow-Edit window banner: amber while the edit window is closing (≤2 days), red once it has closed. */
.vk-edit-banner {
font-size: 13.5px; line-height: 1.45; text-align: center;
padding: 10px 16px; margin: 0 0 14px; border-radius: 8px; border: 1px solid transparent;
}
.vk-edit-banner--warn { background: #fff3cd; color: #7a5b00; border-color: #ffe08a; }
.vk-edit-banner--closed { background: #fdecea; color: #8a1c12; border-color: #f5c2bd; }
body.vk-theme .form_border {
background: var(--vk-surface-2);
border: 1px solid var(--vk-border);
border-radius: var(--vk-radius-sm);
padding: 16px 18px 8px;
}
/* Consent / terms / exceptional TEXT (spans + lists) → one calm body style. These selectors never
match field labels (field grids have no .label-text / list markup), so they're safe. */
body.vk-theme .form_border .label-text,
body.vk-theme .form_border p,
body.vk-theme .form_border ol,
body.vk-theme .form_border ul,
body.vk-theme .form_border li {
font-family: var(--vk-font-sans) !important; font-size: 14px !important; font-weight: 400 !important;
line-height: 1.6; color: var(--vk-text); letter-spacing: 0;
}
/* Acknowledgement LABELS only (those wrapping a checkbox): same body style + hanging indent so the
intro and bullet clauses align in one column. Scoped with :has() so FIELD labels living in these
same .form_border grids are untouched and keep their normal left-aligned field-label style. */
body.vk-theme .form_border label:has(> input[type="checkbox"]) {
font-family: var(--vk-font-sans) !important; font-size: 14px !important; font-weight: 400 !important;
line-height: 1.6; color: var(--vk-text);
display: block; position: relative; padding-left: 28px; margin: 0; cursor: pointer;
}
body.vk-theme .form_border label:has(> input[type="checkbox"]) > input[type="checkbox"] {
position: absolute; left: 0; top: 4px; margin: 0;
}
/* the registry text inserts
between clauses — kill them; spacing comes from list margins */
body.vk-theme .form_border br { display: none; }
body.vk-theme .form_border label li { list-style-position: inside; margin-left: 0; padding-left: 0; }
body.vk-theme .form_border ol,
body.vk-theme .form_border ul { padding-left: 20px; margin: 6px 0 0; }
body.vk-theme .form_border li { margin-bottom: 6px; }
body.vk-theme .form_border a { color: var(--vk-primary); font-weight: 600; }
body.vk-theme .form_border .form-group { margin-bottom: 12px; }
body.vk-theme .form_border input[type="checkbox"] {
width: 16px; height: 16px; accent-color: var(--vk-primary); vertical-align: -3px; margin: 0 9px 0 0; cursor: pointer;
}
/* submit footer — a clean action row with a top divider: Previous on the left, Proceed on the right */
body.vk-theme .vk-form-actions {
margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--vk-border);
}
body.vk-theme .vk-form-actions [align="center"] {
display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
}
body.vk-theme .vk-form-actions a.btn { margin-right: auto; } /* Previous (a link) → far left */
body.vk-theme .vk-form-actions .btn,
body.vk-theme .vk-form-actions input[type="submit"],
body.vk-theme .vk-form-actions button {
min-width: 180px; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: .01em; margin: 0;
}
/* "Previous" (a link) is the secondary action — outline it so "Save and Proceed" stays the primary */
body.vk-theme .vk-form-actions a.btn {
background: transparent !important; color: var(--vk-primary) !important;
border: 1px solid var(--vk-primary) !important; box-shadow: none !important;
}
/* Use background-COLOR on hover (not the `background` shorthand, which resets background-repeat to
`repeat` and tiles the directional arrow SVG across the button). */
body.vk-theme .vk-form-actions a.btn:hover { background-color: color-mix(in srgb, var(--vk-primary) 9%, #fff) !important; }
/* directional cues: ← on Previous (link), → on Save and Proceed (submit). Both drawn as background
images since an can't hold a child icon. */
body.vk-theme .vk-form-actions a.btn {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232d2a72' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: left 16px center !important;
padding-left: 40px;
}
body.vk-theme .vk-form-actions input[type="submit"],
body.vk-theme .vk-form-actions button[type="submit"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 16px center !important;
padding-right: 40px;
}
/* Reviewer view: "Next"/"Close" is an link (the LAST action), so it must point -> not <-
(a forward link, unlike "Previous"). Overrides the generic a.btn left-arrow above. */
body.vk-theme .vk-form-actions [align="center"] > a.btn:last-child {
margin-right: 0 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232d2a72' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") !important;
background-position: right 16px center !important; background-repeat: no-repeat !important; background-size: 16px 16px !important;
padding-left: 24px !important; padding-right: 40px !important;
}
/* mobile: stack full-width, primary (Proceed) on top */
@media (max-width: 560px) {
body.vk-theme .vk-form-actions [align="center"] { flex-direction: column-reverse; gap: 10px; }
body.vk-theme .vk-form-actions .btn { width: 100%; min-width: 0; margin: 0 !important; }
}
/* ---- Data tables (e.g. the family-members grid) ---- */
body.vk-theme .table { border-color: var(--vk-border); margin-bottom: 0; background: var(--vk-surface); }
body.vk-theme .table thead th,
body.vk-theme .table thead td { /* the docs table uses in its */
background: #eef0f5; color: var(--vk-muted); font-weight: 600; font-size: 12.5px;
border: 1px solid var(--vk-border); border-bottom-width: 2px; padding: 10px; vertical-align: middle;
text-transform: none; white-space: nowrap;
}
body.vk-theme .table td, body.vk-theme .table th { border-color: var(--vk-border); }
body.vk-theme .table td { padding: 7px; vertical-align: middle; }
/* Family-members grid: top-align cells so a row stays aligned when an inline error (.validate_id)
appears under a Govt. ID No. field, instead of re-centring the other fields in the taller row. */
body.vk-theme #membersTable td { vertical-align: top; }
body.vk-theme #membersTable .validate_id { display: block; font-size: 12px; line-height: 1.3; margin-top: 4px; }
body.vk-theme .table.table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--vk-border) 16%, #fff); }
body.vk-theme .table .form-control { font-size: 13px; padding: 8px 10px; }
body.vk-theme .table .form-control[readonly],
body.vk-theme #membersTable input[readonly] { background: #eef1f5; }
/* ---- Thank-you / confirmation page ---- */
body.vk-theme .vk-success-badge {
display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px;
border-radius: 50%; background: color-mix(in srgb, var(--vk-success) 14%, #fff); color: var(--vk-success);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--vk-success) 7%, transparent);
}
/* two-column layout: illustration + message (left), details + actions (right) */
body.vk-theme .vk-ty-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center;
max-width: 1060px; margin: 8px auto 0; text-align: left;
}
/* left = a photo hero panel, same treatment as the landing hero (photo under brand gradients, white text) */
body.vk-theme .vk-ty-hero {
position: relative; overflow: hidden; color: #fff; border-radius: var(--vk-radius);
display: flex; flex-direction: column; justify-content: center; gap: 14px;
padding: 48px 44px; min-height: 430px; box-shadow: 0 18px 44px rgba(20,24,40,.16);
background-color: var(--vk-primary-700);
background:
linear-gradient(180deg, transparent 0%, transparent 55%, color-mix(in srgb, var(--vk-primary-700) 60%, transparent) 100%),
linear-gradient(90deg,
color-mix(in srgb, var(--vk-primary-700) 90%, transparent) 0%,
color-mix(in srgb, var(--vk-primary-700) 66%, transparent) 32%,
color-mix(in srgb, var(--vk-primary) 36%, transparent) 64%,
color-mix(in srgb, var(--vk-primary) 10%, transparent) 100%),
radial-gradient(520px 420px at 99% 4%, color-mix(in srgb, var(--vk-accent) 16%, transparent), transparent 56%),
var(--vk-hero-image) center/cover no-repeat,
linear-gradient(157deg, color-mix(in srgb, var(--vk-primary) 88%, #000) 0%, color-mix(in srgb, var(--vk-primary) 52%, #000) 100%);
}
body.vk-theme .vk-ty-hero .vk-thankyou-title { color: #fff !important; }
body.vk-theme .vk-ty-hero .vk-ty-sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0; }
body.vk-theme .vk-ty-detailhead {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--vk-muted); margin: 0 0 12px;
}
body.vk-theme .vk-ty-right .table { margin: 0; }
@media (max-width: 860px) {
body.vk-theme .vk-ty-grid { grid-template-columns: 1fr; gap: 22px; max-width: 520px; }
body.vk-theme .vk-ty-hero { min-height: 300px; padding: 36px 30px; }
}
body.vk-theme .vk-thankyou-title {
font-family: var(--vk-font-display); font-weight: 600; color: var(--vk-text);
font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.01em; line-height: 1.16;
}
body.vk-theme .vk-thankyou-actions { margin-top: 30px; text-align: center; }
body.vk-theme .vk-thankyou-actions .btn {
min-width: 210px; margin: 6px; font-size: 14px; font-weight: 600; text-transform: none;
padding: 12px 24px; border-radius: var(--vk-radius-sm);
}
body.vk-theme .vk-thankyou-actions a.btn-submit:not(.btn-success) {
background: transparent !important; color: var(--vk-primary) !important; border: 1px solid var(--vk-primary) !important;
}
body.vk-theme .vk-thankyou-actions a.btn-submit:not(.btn-success):hover { background: color-mix(in srgb, var(--vk-primary) 9%, #fff) !important; }
body.vk-theme .vk-thankyou-actions .btn-success {
background: var(--vk-success) !important; border-color: var(--vk-success) !important; color: #fff !important; box-shadow: var(--vk-shadow-sm);
}
/* ---- Fields ---- */
body.vk-theme .form-group { margin-bottom: 14px; }
body.vk-theme label { font-size: 13px; font-weight: 600; color: var(--vk-text); margin-bottom: 5px; }
body.vk-theme .form-control,
body.vk-theme .select2-container--default .select2-selection--single {
border: 1px solid var(--vk-border-strong);
border-radius: var(--vk-radius-sm);
min-height: 42px; height: auto; padding: 8px 12px;
font-size: 14px; color: var(--vk-text); background-color: var(--vk-surface);
transition: border-color var(--vk-transition), box-shadow var(--vk-transition);
}
body.vk-theme .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 24px; padding-left: 0; }
body.vk-theme .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
body.vk-theme .form-control:focus,
body.vk-theme .select2-container--default.select2-container--focus .select2-selection--single {
border-color: var(--vk-primary);
box-shadow: var(--vk-focus-ring);
outline: none;
}
body.vk-theme .form-control::placeholder { color: var(--vk-muted); opacity: .85; }
body.vk-theme .form-control[readonly] { background: #eef1f5; color: var(--vk-muted); }
/* ---- Error states ---- */
body.vk-theme .text-danger { color: var(--vk-danger) !important; }
body.vk-theme .form-control.is-invalid,
body.vk-theme .form-control.error,
body.vk-theme .form-control.input-error { border-color: var(--vk-danger); box-shadow: 0 0 0 3px rgba(214,69,80,.14); }
body.vk-theme .fs-12 { font-size: 12px; }
/* ---- Application summary header (App Number / Applicant Name, above the steps card) ---- */
body.vk-theme .jumbotron.content-section { padding-top: 22px !important; } /* tighten the legacy 50px top gap */
body.vk-theme .name_number {
margin: 2px 0 8px; font-family: var(--vk-font-sans); font-size: 16px; font-weight: 700;
color: var(--vk-text); line-height: 1.4; letter-spacing: -.005em;
}
body.vk-theme .name_number b { /* the "Application Number :" / "Applicant Name :" label */
display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
color: var(--vk-muted); margin-bottom: 2px;
}
body.vk-theme .name_number br { display: none; }
/* ---- Status pills ---- */
body.vk-theme .completed_application,
body.vk-theme .pending_appication { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; margin: 0; }
body.vk-theme .completed_application { background: rgba(31,157,107,.12); color: var(--vk-success); }
body.vk-theme .pending_appication { background: rgba(232,163,23,.14); color: #9a6b06; }
/* ---- Loader (replaces the legacy dark-bar + colour-cycling blue square + orbiting dots) ---- */
body.vk-theme .loading {
position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
background: rgba(20, 24, 40, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.vk-theme .loading::before { content: none !important; background: none !important; } /* kill legacy dark radial */
body.vk-theme .loader {
position: relative !important; top: auto !important; left: auto !important; transform: none !important;
width: auto !important; height: auto !important; min-width: 210px; max-width: 340px; margin: 0 !important;
display: block !important; text-align: center;
background: var(--vk-surface); border-radius: 16px; padding: 26px 30px; box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
body.vk-theme .loader .circle { display: none !important; } /* drop the legacy orbiting dots */
/* reuse the legacy .bg div as a clean brand ring spinner; block flow → spinner above, text below */
body.vk-theme .loader .bg {
display: block !important; position: static !important;
width: 44px; height: 44px; margin: 0 auto 14px !important; border-radius: 50%; background: none !important;
border: 4px solid color-mix(in srgb, var(--vk-primary) 16%, #fff); border-top-color: var(--vk-primary);
animation: vk-spin .8s linear infinite !important; box-shadow: none !important;
}
body.vk-theme .loader::after { content: 'Please wait…'; display: block; font-size: 13.5px; font-weight: 600; color: var(--vk-muted); }
/* when a live message is present (e.g. the documents upload "Uploading… X%"), show it in the card
instead of the static text */
body.vk-theme .loader:has(#loader-message)::after { content: none !important; }
body.vk-theme .loader #loader-message {
position: static !important; /* legacy form_new.css sets this absolute → pulled it out of flow */
margin: 0 !important; padding: 0 !important; width: 100%; text-align: center;
font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--vk-muted) !important;
}
body.vk-theme .loader .vk-progress {
width: 210px; max-width: 100%; height: 6px; margin: 12px auto 0;
background: color-mix(in srgb, var(--vk-primary) 12%, #eef0f5); border-radius: 999px; overflow: hidden;
}
body.vk-theme .loader .vk-progress > span {
display: block; height: 100%; width: 0; border-radius: 999px; background: var(--vk-primary); transition: width .2s ease;
}
@keyframes vk-spin { to { transform: rotate(360deg); } }
/* ---- Buttons ---- */
body.vk-theme .btn {
border-radius: var(--vk-radius-sm); font-weight: 600; padding: 9px 18px;
transition: background var(--vk-transition), color var(--vk-transition), border-color var(--vk-transition), box-shadow var(--vk-transition), transform var(--vk-transition);
}
body.vk-theme .btn:active { transform: translateY(1px); }
body.vk-theme .btn-submit, body.vk-theme .btn-primary {
background: var(--vk-primary); border: 1px solid var(--vk-primary); color: #fff;
}
body.vk-theme .btn-submit:hover, body.vk-theme .btn-primary:hover {
background: var(--vk-primary-600); border-color: var(--vk-primary-600); color: #fff; box-shadow: var(--vk-shadow);
}
body.vk-theme .btn-success { background: var(--vk-success); border-color: var(--vk-success); color:#fff; }
body.vk-theme .btn-info { background: var(--vk-accent); border-color: var(--vk-accent); color:#fff; }
body.vk-theme .btn-info:hover, body.vk-theme .btn-success:hover { filter: brightness(.96); box-shadow: var(--vk-shadow); }
body.vk-theme .btn-outline-primary { color: var(--vk-primary); border-color: var(--vk-primary); }
body.vk-theme .btn-outline-primary:hover { background: var(--vk-primary); color:#fff; }
body.vk-theme a.text-primary { color: var(--vk-primary) !important; }
/* ---- Modals (smooth open/close) ---- */
body.vk-theme .modal.fade .modal-dialog { transition: transform var(--vk-transition), opacity var(--vk-transition); transform: translateY(-14px); opacity: 0; }
body.vk-theme .modal.show .modal-dialog { transform: none; opacity: 1; }
body.vk-theme .modal-content { border: 0; border-radius: var(--vk-radius); box-shadow: var(--vk-shadow-md); overflow: hidden; }
body.vk-theme .modal-header { border-bottom: 1px solid var(--vk-border); }
body.vk-theme .modal-footer { border-top: 1px solid var(--vk-border); }
/* ---- Loading overlay (enhances the existing .loading element; does NOT touch the inner .loader animation) ---- */
body.vk-theme .loading {
position: fixed; inset: 0; z-index: 99999;
background: rgba(255,255,255,.72); backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
}
/* reusable spinner + button busy-state (opt-in via classes; no behaviour change) */
body.vk-theme .vk-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--vk-border); border-top-color: var(--vk-primary); animation: vk-spin .7s linear infinite; }
@keyframes vk-spin { to { transform: rotate(360deg); } }
body.vk-theme .btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
body.vk-theme .btn.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); border-top-color: #fff; animation: vk-spin .7s linear infinite; }
/* ---- Mobile responsive ---- */
@media (max-width: 768px) {
body.vk-theme .submit-data { padding: 16px 14px 20px; border-radius: var(--vk-radius-sm); }
/* pills: tighter padding + horizontal scroll so all steps stay reachable on small screens */
body.vk-theme .breadcrumb { gap: 3px; padding: 5px; }
body.vk-theme .breadcrumb li a { padding: 9px 13px; font-size: 12.5px; }
body.vk-theme .form_title { font-size: 15px; }
}
/* ============================================================================
Landing / "Retrieve Your Application" — FULL-PAGE split auth UI (hero | form).
Functional hooks (.check-form, mobile_number, .check-application,
.registration-btn, .otp-verify, .table-div, .loading) are untouched.
============================================================================ */
/* full-page: hide the shared navbar + footer copyright on this screen only.
NOTE: application/includes/navbar.php never closes its |