/* ============================================================ CARE PROFESSIONALS : TYPOGRAPHY & UI SYSTEM (shared) Single source for tokens and shared components. Used by: Account registration wizard, completion screen and the shared Upload CV pop-up (interim + company environment). Reference: "Care Professionals Typography & UI System" doc, 6 Aug 2026 (draft for sign-off). Section numbers below (1.x-8) mirror that doc. Fix problems here, never per page. Font: Montserrat everywhere on screen, Arial fallback only. Spacing scale: 8 / 12 / 16 / 20 / 24 / 32px. Cards pad 24px. ============================================================ */ :root { --cp-green: #0B8A24; --cp-green-hover: #0A7A20; --cp-green-light: #EAF1E8; --cp-bg: #FAFDF8; /* page/section background: lightest tint of the green family, near white */ --cp-offwhite: #ECE8E3; /* warm accent surface + dividers */ --cp-grey: #7D9C96; --cp-blue: #5491B8; /* accent only: links. Never structural. */ --cp-black: #261F2B; --cp-body: #333333; --cp-muted: #666666; --cp-white: #FFFFFF; --cp-line: #ECE8E3; --cp-line-strong: #DED8D1; --cp-neutral-border: rgba(38,31,43,0.22); --cp-neutral-border-hover: rgba(38,31,43,0.32); --cp-util-green-border: #C2DDC7; --cp-util-green-hover: #E0EBDD; --cp-red: #B42318; --cp-red-border: #E7B9B4; --cp-red-hover: #FBEDEB; --cp-overlay: rgba(38,31,43,0.28); --cp-radius-btn: 14px; --cp-radius-card: 18px; --cp-radius-flush: 8px; } /* ---------- Typography ---------- */ /* Montserrat only: legacy sheets (style.css body/p, SomeTemplatePages.css h6) and old inline styles still declare Arial. Pages that must be 100% Montserrat put .cp-font on (or any wrapper); icon-font elements are excluded so FontAwesome/glyphicons keep rendering. Icon ::before rules declare their own font-family, so pseudo-element icons are unaffected either way. */ .cp-font, .cp-font *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not(.glyphicon) { font-family: "Montserrat", Arial, sans-serif !important; } .cp-scope { font-family: "Montserrat", Arial, sans-serif; color: var(--cp-body); line-height: 1.6; } .cp-scope h1, .cp-scope h2, .cp-scope h3 { text-transform: none !important; letter-spacing: 0 !important; color: var(--cp-black); margin: 0; font-family: "Montserrat", Arial, sans-serif; } .cp-scope h1 { font-size: 28px; line-height: 1.2; font-weight: 700; } .cp-scope h2 { font-size: 22px; line-height: 1.25; font-weight: 700; } .cp-scope h3 { font-size: 18px; line-height: 1.3; font-weight: 700; } .cp-scope p { margin: 0 0 16px; } .cp-lead { font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--cp-black); } .cp-muted { font-size: 13px; color: var(--cp-muted); } .cp-scope a, .cp-link { color: var(--cp-blue); text-decoration: underline; font-weight: 500; } .cp-kicker { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--cp-green-light); color: var(--cp-green); font-size: 13px; font-weight: 600; line-height: 1; } .cp-body { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--cp-body); } /* Neutral pill label (raisin on warm off-white) */ .cp-label { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--cp-offwhite); color: var(--cp-black); font-size: 12px; font-weight: 600; line-height: 1; } .cp-list li::marker { color: var(--cp-green); } /* ---------- Buttons (doc section 3) ---------- Four types: primary, secondary, ghost, utility. Short labels are a modifier, not a type. Max one primary + one secondary per context; ghost is the quiet dismiss action. Red is always light/outline. */ .cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600; line-height: 1 !important; height: 44px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--cp-radius-btn) !important; cursor: pointer; white-space: nowrap; text-decoration: none !important; text-transform: none !important; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease; } .cp-btn:hover { transform: translateY(-1px); text-decoration: none; } .cp-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(11,138,36,0.20); } .cp-btn:disabled, .cp-btn.is-disabled, .cp-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; transform: none; } .cp-btn svg { width: 16px; height: 16px; flex: 0 0 16px; display: block; } .cp-btn-primary { min-width: 168px; background: var(--cp-green) !important; color: var(--cp-white) !important; border-color: var(--cp-green) !important; } .cp-btn-primary:hover, .cp-btn-primary:focus { background: var(--cp-green-hover) !important; border-color: var(--cp-green-hover) !important; color: var(--cp-white) !important; } .cp-btn-secondary { min-width: 168px; background: var(--cp-white) !important; color: var(--cp-green) !important; border-color: var(--cp-green) !important; } .cp-btn-secondary:hover { background: var(--cp-green-light) !important; } /* Short-label modifier (OK / Yes / No): modifier on primary or secondary */ .cp-btn--short { min-width: 96px !important; font-weight: 500; padding: 0 18px; } .cp-btn-ghost { background: var(--cp-white) !important; color: var(--cp-black) !important; border-color: var(--cp-neutral-border) !important; padding: 0 20px; } .cp-btn-ghost:hover { background: var(--cp-offwhite) !important; border-color: var(--cp-neutral-border-hover) !important; color: var(--cp-black) !important; } .cp-btn-utility { height: 36px; min-width: 140px; padding: 0 18px; font-size: 14px !important; font-weight: 500; border-width: 1px; } .cp-btn-utility-neutral { background: var(--cp-white) !important; color: var(--cp-black) !important; border-color: var(--cp-neutral-border) !important; } .cp-btn-utility-neutral:hover { background: var(--cp-offwhite) !important; border-color: var(--cp-neutral-border-hover) !important; color: var(--cp-black) !important; } .cp-btn-utility-green { background: var(--cp-green-light) !important; color: var(--cp-green) !important; border-color: var(--cp-util-green-border) !important; } .cp-btn-utility-green:hover { background: var(--cp-util-green-hover) !important; } /* delete / stop: never a filled red button */ .cp-btn-utility-red { background: var(--cp-white) !important; color: var(--cp-red) !important; border-color: var(--cp-red-border) !important; } .cp-btn-utility-red:hover { background: var(--cp-red-hover) !important; } .cp-btn-icon { width: 44px; height: 44px; padding: 0; min-width: auto; background: transparent !important; color: var(--cp-black) !important; border-color: transparent !important; } .cp-btn-icon:hover { background: var(--cp-offwhite) !important; } .cp-btn-icon--bordered { border-color: var(--cp-neutral-border) !important; } /* ---------- Inputs ---------- */ .cp-field { margin: 0 0 20px; } .cp-field > label { display: block; font-size: 14px; font-weight: 600; color: var(--cp-black); margin: 0 0 8px; text-transform: none !important; } .cp-input, .cp-select, .cp-textarea { width: 100%; padding: 0 16px; border: 1px solid var(--cp-neutral-border); border-radius: var(--cp-radius-btn); background: var(--cp-white); font-family: "Montserrat", Arial, sans-serif; font-size: 15px; color: var(--cp-body); } .cp-input, .cp-select { height: 44px; } .cp-textarea { padding: 12px 16px; line-height: 1.6; resize: vertical; min-height: 88px; } .cp-input::placeholder, .cp-textarea::placeholder { color: #9AA0A6; } .cp-input:focus, .cp-select:focus, .cp-textarea:focus { outline: none; border-color: var(--cp-green); box-shadow: 0 0 0 3px rgba(11,138,36,0.12); } .cp-counter { font-size: 12px; color: var(--cp-muted); margin-top: 6px; } .cp-help { font-size: 14px; color: var(--cp-muted); margin-top: 6px; } .cp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } @media (max-width: 640px) { .cp-grid-2 { grid-template-columns: 1fr; } } /* ---------- Cards ---------- */ .cp-card { background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); padding: 24px; } .cp-card--warm { background: var(--cp-offwhite); } .cp-note { background: var(--cp-green-light); border-radius: var(--cp-radius-flush); padding: 12px 16px; font-size: 14px; color: var(--cp-black); margin: 0 0 20px; } /* ============================================================ TABLES (doc section 5) Headers raisin 600 (sentence case), cells 14-15px, light row borders, hover light green. Name column truncates with an ellipsis (put the full name in title=""). ============================================================ */ .cp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; } .cp-table th, .cp-table td { text-align: left; padding: 14px 16px; white-space: nowrap; } .cp-table thead th { font-size: 13px; font-weight: 600; color: var(--cp-black); border-bottom: 2px solid var(--cp-line-strong); } .cp-table tbody td { border-bottom: 1px solid var(--cp-line); } .cp-table tbody tr:hover td { background: var(--cp-green-light); } .cell-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--cp-black); } /* Admin variant (data-dense overviews): horizontal scroll inside the card while the first (name) column stays sticky. Wrap the table in a .cp-card with overflow-x:auto. */ .cp-table--admin { min-width: 820px; } .cp-table--admin th:first-child, .cp-table--admin td:first-child { position: sticky; left: 0; z-index: 2; background: var(--cp-white); border-right: 1px solid var(--cp-line); } /* Public variant (simple overviews such as vacancies): a normal table on laptop; on a narrow CARD (container query, not screen width) each row becomes a standalone label:value card and the outer table card is dropped so the cards stand free. Every value cell needs data-label="..." for the stacked label. */ .cp-table-scope { container-type: inline-size; } @container (max-width: 520px) { .cp-table-card--public { background: transparent; border: none; border-radius: 0; overflow: visible; } .cp-table--public thead { display: none; } .cp-table--public, .cp-table--public tbody { display: block; width: 100%; } .cp-table--public tr { display: block; background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); padding: 4px 18px; margin: 0 0 12px; } .cp-table--public td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; white-space: normal; text-align: right; border-bottom: 1px solid var(--cp-line); } .cp-table--public tr td:last-child { border-bottom: none; } .cp-table--public td::before { content: attr(data-label); font-weight: 600; color: var(--cp-black); text-align: left; } .cp-table--public .cell-name { max-width: none; white-space: normal; overflow: visible; } } /* ============================================================ PAGE WIDTHS (doc section 7, provisional) Keep widths consistent; no page-specific widths. ============================================================ */ /* Public pages */ .cp-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; } /* ============================================================ WIZARD SHELL ============================================================ */ /* Inner pages (Account / Registration) — doc section 7 */ .cp-inner { width: 100%; max-width: 980px; margin: 80px auto 96px; padding: 0 18px; } .cp-wizard-bg { background: var(--cp-bg); } .wiz-head { margin-bottom: 32px; } .wiz-head .cp-kicker { margin-bottom: 16px; } .wiz-head h1 { margin-bottom: 12px; } /* Stepper: desktop */ .cp-stepper { margin: 0 0 32px; } .cp-stepper-track { list-style: none; margin: 0; padding: 0; display: flex; } .cp-step { flex: 1 1 0; position: relative; min-width: 0; margin: 0; } .cp-step:not(:first-child)::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--cp-neutral-border); z-index: 0; } .cp-step.is-done::before, .cp-step.is-active::before { background: var(--cp-green); } .cp-step-btn { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 0 4px; cursor: pointer; font-family: inherit; } .cp-step.is-locked .cp-step-btn { cursor: not-allowed; } .cp-step-marker { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-white); border: 2px solid var(--cp-neutral-border); color: var(--cp-muted); font-size: 14px; font-weight: 600; line-height: 1; transition: background-color .15s, border-color .15s, box-shadow .15s; } .cp-step-marker svg { width: 15px; height: 15px; } .cp-step.is-active .cp-step-marker { border-color: var(--cp-green); color: var(--cp-green); box-shadow: 0 0 0 4px var(--cp-green-light); } .cp-step.is-done .cp-step-marker { background: var(--cp-green); border-color: var(--cp-green); color: var(--cp-white); } /* Steps know three states only: done (green check), active, neutral. There is deliberately no red/error step state. */ .cp-step-label { font-size: 12.5px; font-weight: 500; color: var(--cp-muted); line-height: 1.3; text-align: center; } .cp-step.is-active .cp-step-label { color: var(--cp-black); font-weight: 600; } .cp-step.is-done .cp-step-label { color: var(--cp-black); } .cp-step-btn:focus-visible { outline: none; } .cp-step-btn:focus-visible .cp-step-marker { box-shadow: 0 0 0 4px rgba(11,138,36,0.25); } /* Stepper: mobile condensed */ .cp-stepper-mobile { display: none; margin: 0 0 24px; } .cp-stepper-mobile .cp-mrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .cp-stepper-mobile .count { font-size: 13px; font-weight: 600; color: var(--cp-muted); } .cp-stepper-mobile .title { font-size: 15px; font-weight: 600; color: var(--cp-black); } .cp-progress { height: 6px; border-radius: 999px; background: var(--cp-offwhite); overflow: hidden; } .cp-progress > span { display: block; height: 100%; background: var(--cp-green); border-radius: 999px; transition: width .25s ease; } @media (max-width: 640px) { .cp-stepper { display: none; } .cp-stepper-mobile { display: block; } } /* Panels */ .cp-step-panel { display: none; } .cp-step-panel.is-active { display: block; } .cp-panel-head { margin-bottom: 20px; } .cp-panel-head h2 { margin-bottom: 8px; } .cp-panel-head p { margin: 0; color: var(--cp-body); } .cp-import-row { display: flex; justify-content: flex-end; margin: 0 0 20px; } @media (max-width: 640px) { .cp-import-row { justify-content: stretch; } .cp-import-row .cp-btn { width: 100%; } } .cp-wizard-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; } .cp-wizard-nav.end { justify-content: flex-end; } @media (max-width: 520px) { .cp-wizard-nav { flex-direction: column-reverse; } .cp-wizard-nav .cp-btn { width: 100%; } } /* File select */ .cp-file { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .cp-file .name { flex: 1 1 220px; min-width: 0; height: 44px; display: flex; align-items: center; padding: 0 16px; border: 1px dashed var(--cp-neutral-border); border-radius: var(--cp-radius-btn); background: var(--cp-white); color: var(--cp-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-file .name.has-file { color: var(--cp-black); border-style: solid; } /* Photo */ .cp-photo { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .cp-photo .preview { width: 88px; height: 88px; border-radius: 999px; background: var(--cp-offwhite); border: 1px solid var(--cp-line); display: flex; align-items: center; justify-content: center; color: var(--cp-grey); flex: 0 0 auto; overflow: hidden; } .cp-photo .preview svg { width: 34px; height: 34px; } /* Radio pills (frequency / vast-interim / skill levels) */ .cp-fieldblock { margin: 0 0 24px; } .cp-fieldblock > .q { font-size: 14px; font-weight: 600; color: var(--cp-black); margin: 0 0 10px; } /* Rate blocks */ .rate-block { margin-top: 8px; } .rate-block[hidden] { display: none; } /* Tag checkboxes */ .cp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .cp-tags li { margin: 0; display: inline-block; } .cp-tags input { position: absolute; opacity: 0; width: 0; height: 0; } .cp-tags label { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--cp-neutral-border); border-radius: 999px; background: var(--cp-white); color: var(--cp-black); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s; user-select: none; } .cp-tags label::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 15px; font-weight: 600; color: var(--cp-muted); line-height: 1; flex: 0 0 auto; /* keep the +/check indicator vertically centered even when a legacy rule knocks the label out of flex layout */ align-self: center; vertical-align: middle; } .cp-tags input:checked + label { border-color: var(--cp-green); background: var(--cp-green); color: var(--cp-white); } .cp-tags input:checked + label::before { content: ""; color: var(--cp-white); background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; } .cp-tags input:focus-visible + label { box-shadow: 0 0 0 3px rgba(11,138,36,0.25); } /* Skill level rows */ .cp-skill-levels { margin-top: 20px; display: flex; flex-direction: column; gap: 0; } .cp-skill-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--cp-line); } .cp-skill-row:last-child { border-bottom: none; } .cp-skill-row .name { font-weight: 600; color: var(--cp-black); flex: 0 0 auto; } .cp-skill-row .levels { display: flex; gap: 8px; flex-wrap: wrap; } /* Preferences accordions */ .cp-pref { margin: 0 0 32px; } .cp-pref > h3 { margin: 0 0 16px; } .cp-acc { border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); overflow: hidden; background: var(--cp-white); } .cp-acc-item { border-bottom: 1px solid var(--cp-line); } .cp-acc-item:last-child { border-bottom: none; } .cp-acc-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; cursor: pointer; } .cp-acc-head input { position: absolute; opacity: 0; width: 0; height: 0; } .cp-acc-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--cp-neutral-border); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: all .15s; } .cp-acc-box svg { width: 12px; height: 12px; } .cp-acc-title { font-weight: 600; color: var(--cp-black); flex: 1 1 auto; } .cp-acc-count { font-size: 13px; color: var(--cp-muted); } .cp-acc-body { padding: 4px 18px 18px; display: none; } .cp-acc-item.is-open .cp-acc-body { display: block; } .cp-acc-head input:checked ~ .cp-acc-box { background: var(--cp-green); border-color: var(--cp-green); color: var(--cp-white); } .cp-acc-sub { font-size: 13px; font-weight: 600; color: var(--cp-black); margin: 8px 0; } /* ---------- Completion screen ---------- */ .cp-complete { text-align: center; max-width: 640px; margin: 24px auto; padding: 40px 32px; } .complete-check { width: 64px; height: 64px; border-radius: 999px; background: var(--cp-green-light); color: var(--cp-green); /* block-level flex + auto margins: the icon always gets its own centred row, even on masters where innerCustom.css turns headings into inline-flex */ display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .complete-check svg { width: 30px; height: 30px; } .cp-complete .cp-kicker { margin: 0 0 16px; } /* innerCustom.css (account masters) sets h1 { display: inline-flex; text-transform: uppercase; } which pulls the title up next to the check icon - force the design layout: icon row, title row */ .cp-complete h1 { display: block; text-transform: none; margin: 0 0 16px; } .cp-complete .cp-lead { margin: 0 0 16px; } .cp-complete p { color: var(--cp-body); } .complete-cta { margin-top: 28px; } .complete-cta .cp-btn { min-width: 220px; } /* ============================================================ CV PARSE LOADER (ported from PlanetInterim's PICvPreloader, restyled with the CP tokens). Full-screen overlay with an animated "document scan" card, shown while an uploaded CV is being sent to and parsed by CV-Transformer. Markup + the CPCvPreloader JS module live in the shared upload control (Account/Controls/InterimRegistrationTwoCVControl.ascx). ============================================================ */ .cp-cv-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(250,253,248,0.84); backdrop-filter: saturate(120%) blur(6px); z-index: 99999; padding: 18px; box-sizing: border-box; } .cp-cv-overlay.is-open { display: flex; } .cp-cv-card { width: min(420px, 100%); background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); box-shadow: 0 16px 46px rgba(0,0,0,0.12); padding: 22px 20px 18px; box-sizing: border-box; text-align: center; position: relative; overflow: hidden; } .cp-cv-accent { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--cp-green-hover), var(--cp-green)); } .cp-cv-icon-wrap { display: flex; justify-content: center; margin-top: 4px; } .cp-cv-icon-shell { width: 128px; height: 144px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(250,253,248,0.75); border: 1px solid var(--cp-line); box-shadow: 0 10px 28px rgba(0,0,0,0.06); transform: translateZ(0); } /* Full .cp-cv-overlay chain + !important on the margins: on the company pages the loader renders inside a Bootstrap modal, where ".cp-modal-skin .modal-body p { margin: 0 0 16px !important; }" would otherwise flatten these (as would the generic .cp-scope p rule on the wizard) */ .cp-cv-overlay .cp-cv-card .cp-cv-title { margin: 14px 0 6px !important; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--cp-black); } .cp-cv-overlay .cp-cv-card .cp-cv-sub { margin: 0 0 14px !important; font-size: 13px; line-height: 19px; color: var(--cp-muted); } .cp-cv-hints { display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .cp-cv-pill { font-weight: 600; font-size: 12px; line-height: 16px; color: var(--cp-body); background: var(--cp-green-light); border: 1px solid var(--cp-util-green-border); border-radius: 999px; padding: 7px 10px; } .cp-cv-pill b { font-weight: 700; color: var(--cp-green); } .cp-cv-overlay .cp-cv-card .cp-cv-foot { margin: 26px 0 0 !important; font-size: 12px; line-height: 18px; color: var(--cp-muted); } /* document-scan animation: green line sweeps down the sheet */ #cpScanLine { fill: var(--cp-green); transform-origin: 50% 0%; animation: cpScanMove 1.35s ease-in-out infinite; } @keyframes cpScanMove { 0% { transform: translateY(0); opacity: 0.95; } 10% { opacity: 1; } 100% { transform: translateY(78px); opacity: 0.95; } } #cpScanGlow { fill: var(--cp-green); animation: cpGlowPulse 1.35s ease-in-out infinite; opacity: 0.7; } @keyframes cpGlowPulse { 0% { opacity: 0.35; } 50% { opacity: 0.6; } 100% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { #cpScanLine, #cpScanGlow { animation: none !important; } } /* ============================================================ MODAL / POP-UP (doc section 6) One shared modal look. Two implementations: 1. .cp-modal-overlay / .cp-modal below: the standalone system for new markup. Behaviour (open/close via X, secondary button, overlay click and Escape) lives in /js/cp-ui.js — include it and use data-cp-modal-open / data-cp-modal-overlay / data-cp-modal / data-cp-modal-close attributes. 2. .cp-modal-skin further down: the same look applied to the legacy Bootstrap modals that Web Forms pages already have. 680px default width; never a fixed height, content scrolls. ============================================================ */ .cp-modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px 16px; background: var(--cp-overlay); overflow-y: auto; z-index: 9999; } .cp-modal-overlay.is-open { display: flex; } .cp-modal { width: 100%; max-width: 680px; background: var(--cp-white); border-radius: var(--cp-radius-card); box-shadow: 0 20px 60px rgba(38,31,43,0.18); overflow: hidden; font-family: "Montserrat", Arial, sans-serif; color: var(--cp-body); } .cp-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 20px; border-bottom: 1px solid var(--cp-line); } /* Sentence case always: the !importants beat the legacy uppercase h1/h2 rules (style.css, SomeTemplatePages.css) that would otherwise win. */ .cp-modal-title { font-size: 22px !important; line-height: 1.25; font-weight: 700; color: var(--cp-black) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; } .cp-modal-body { padding: 24px 28px; font-size: 16px; line-height: 1.6; color: var(--cp-body); } .cp-modal-body p { margin: 0 0 16px; } .cp-modal-body p:last-child { margin: 0; } /* ValidationSummary bullet lists rendered inside a CP modal */ .cp-modal-body ul { list-style: none; margin: 0; padding: 0; text-align: left; overflow-wrap: break-word; } /* validation items are body text: spec body size, not a smaller footnote */ .cp-modal-body li { font-size: 16px; margin-bottom: 6px; } .cp-modal-body li:last-child { margin-bottom: 0; } .cp-modal-footer { display: flex; justify-content: flex-end; gap: 16px; padding: 20px 28px 24px; border-top: 1px solid var(--cp-line); flex-wrap: wrap; } @media (max-width: 520px) { .cp-modal-footer { flex-direction: column-reverse; } .cp-modal-footer .cp-btn { width: 100%; } } /* ============================================================ BOOTSTRAP MODAL RESKIN (.cp-modal-skin on the .modal element) One shared look for every pop-up: Upload CV, cv gate, validation summaries, import confirmations. ============================================================ */ /* Vertical position: style.css centres every Bootstrap 3 modal against an inline-block strut (.modal:before) of 60% height (30% <=800px), which parks the dialog around the upper third of the screen. A full-height strut gives true vertical centring for CP pop-ups. Harmless on Bootstrap 5 pages: without style.css the pseudo-element has no content and never renders. */ .modal.cp-modal-skin::before { height: 100%; } .cp-modal-skin .modal-dialog { vertical-align: middle; } .cp-modal-skin .modal-content, .cp-modal-skin .modal-validations { font-family: "Montserrat", Arial, sans-serif; border: none; border-radius: var(--cp-radius-card) !important; box-shadow: 0 20px 60px rgba(38,31,43,0.18); padding: 0 !important; overflow: hidden; color: var(--cp-body); } .cp-modal-skin .modal-header, .cp-modal-skin .modal-validations-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--cp-line); background: var(--cp-white); } .cp-modal-skin .modal-header h1, .cp-modal-skin .modal-header h2, .cp-modal-skin .modal-header .modal-title, .cp-modal-skin .modal-validations-header h1, .cp-modal-skin .modal-validations-header .modal-title { font-size: 22px !important; line-height: 1.25; font-weight: 700; color: var(--cp-black) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0; padding: 0 !important; font-family: "Montserrat", Arial, sans-serif; } .cp-modal-skin .modal-header .close, .cp-modal-skin .modal-validations-header .close, .cp-modal-skin .modal-header .btn-close { position: static !important; margin: -6px -8px 0 auto !important; width: 36px; height: 36px; border: none; border-radius: var(--cp-radius-flush); background-color: transparent; color: var(--cp-black); font-size: 22px; line-height: 1; opacity: .7; padding: 0 !important; } .cp-modal-skin .modal-header .close:hover, .cp-modal-skin .modal-header .btn-close:hover { background-color: var(--cp-offwhite); opacity: 1; } .cp-modal-skin .modal-body { padding: 24px 28px !important; margin: 0 !important; font-size: 16px; line-height: 1.6; color: var(--cp-body); } .cp-modal-skin .modal-body p { margin: 0 0 16px !important; } .cp-modal-skin .modal-body p:last-child { margin-bottom: 0 !important; } .cp-modal-skin .modal-footer, .cp-modal-skin .modal-footer1 { padding: 20px 28px 24px !important; border-top: 1px solid var(--cp-line); background: var(--cp-white); } /* Kill legacy button colours inside a CP modal: no blue, no uppercase */ .cp-modal-skin .btn { font-family: "Montserrat", Arial, sans-serif !important; text-transform: none !important; border-radius: var(--cp-radius-btn) !important; font-size: 15px !important; font-weight: 600; box-shadow: none; } .cp-modal-skin .btn-blue, .cp-modal-skin .btn-green { background-color: var(--cp-green) !important; border-color: var(--cp-green) !important; color: var(--cp-white) !important; } .cp-modal-skin .btn-blue:hover, .cp-modal-skin .btn-blue:focus, .cp-modal-skin .btn-green:hover, .cp-modal-skin .btn-green:focus { background-color: var(--cp-green-hover) !important; border-color: var(--cp-green-hover) !important; } .cp-modal-skin .btn-grey { background-color: var(--cp-white) !important; border: 1.5px solid var(--cp-neutral-border) !important; color: var(--cp-black) !important; } .cp-modal-skin .btn-grey:hover { background-color: var(--cp-offwhite) !important; } .cp-modal-skin .text-danger { color: var(--cp-red) !important; } /* ============================================================ LEGACY CONTROL RESKIN, scoped to .cp-wizard Skins the existing Web Forms controls (inputs, ks-cboxtags, radio lists, multiple-select, validators) to the CP system without touching their behaviour. ============================================================ */ .cp-wizard label, .cp-wizard .control-label { display: block; font-size: 14px; font-weight: 600; color: var(--cp-black); text-transform: none !important; font-family: "Montserrat", Arial, sans-serif; margin: 15px 0 7px; } .cp-wizard .form-control, .cp-wizard select, .cp-wizard textarea.form-control { width: 100%; padding: 8px 16px; border: 1px solid var(--cp-neutral-border); border-radius: var(--cp-radius-btn); background: var(--cp-white); font-family: "Montserrat", Arial, sans-serif; font-size: 15px; color: var(--cp-body); box-shadow: none; height: auto; min-height: 44px; } .cp-wizard .form-control:focus, .cp-wizard select:focus, .cp-wizard textarea.form-control:focus { outline: none; border-color: var(--cp-green); box-shadow: 0 0 0 3px rgba(11,138,36,0.12); } .cp-wizard input[type="text"]:not(.form-control):not(.cp-input):not(.ms-search input), .cp-wizard input[type="tel"]:not(.form-control):not(.cp-input) { padding: 8px 16px; border: 1px solid var(--cp-neutral-border); border-radius: var(--cp-radius-btn); background: var(--cp-white); font-family: "Montserrat", Arial, sans-serif; font-size: 15px; color: var(--cp-body); min-height: 44px; } .cp-wizard .help-block, .cp-wizard .text-danger { font-family: "Montserrat", Arial, sans-serif; } .cp-wizard .text-danger { color: var(--cp-red) !important; font-size: 13px; } /* Legacy tag checkboxes (regions / sectors / functions) -> CP pills */ .cp-wizard ul.ks-cboxtags { list-style: none; padding: 5px 0 20px; margin: 0; } .cp-wizard ul.ks-cboxtags li { display: inline-block; } /* the native checkbox stays in the DOM for the postback but is never shown: the pill label is the entire visible control */ .cp-wizard ul.ks-cboxtags li input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .cp-wizard ul.ks-cboxtags li label { display: inline-flex !important; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--cp-neutral-border); border-radius: 999px !important; background: var(--cp-white); color: var(--cp-black); font-size: 14px; font-weight: 500; margin: 5px 5px 5px 0; cursor: pointer; white-space: normal; transition: all .15s; user-select: none; } /* crisp SVG plus/check instead of the FontAwesome glyphs */ .cp-wizard ul.ks-cboxtags li label::before { font-family: inherit !important; font-weight: 600; content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 15px; color: var(--cp-muted); line-height: 1; padding: 0; transition: none; } .cp-wizard ul.ks-cboxtags li input[type="checkbox"]:checked + label { border: 1px solid var(--cp-green) !important; background-color: var(--cp-green) !important; color: var(--cp-white) !important; } .cp-wizard ul.ks-cboxtags li input[type="checkbox"]:checked + label::before { content: "" !important; transform: none !important; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; } .cp-wizard ul.ks-cboxtags li input[type="checkbox"]:focus + label { border: 1px solid var(--cp-green); box-shadow: 0 0 0 3px rgba(11,138,36,0.25); } /* Legacy radio lists (alerts frequency, vast/interim, skill levels) -> CP pills */ /* Hide the raw radio inputs (kept focusable for a11y). Used to live in an inline