/* ========================================================================== Interview Portal — Design System v3 "Warm Editorial" Spec: /DESIGN.md. Bootstrap 5 stays for grid + utilities; everything here re-skins it. Two personalities, ONE token ramp: WORKSPACE (default) ink on warm paper, hairline rules, bare numerals, radii 4–6px, ember accent, dense. WARM (.ip-warm) candidate portal / landing / careers / client portal / offer signing / booking / assessment taking. Same ramp, violet accent, radii 12–16px, soft borders plus one small shadow, comfortable spacing. ── HOW TO USE THIS FILE (agents 2 + 3 read this) ─────────────────────────── 1. SCOPE. Put `class="ip-warm"` on (or on any wrapper) for every candidate-facing / public surface. It flips --ip-accent to violet and --ip-r-* to the large set; every component below already reads those, so cards, buttons, inputs and badges soften automatically. Do NOT add .ip-warm to workspace screens. 2. NEVER hardcode a colour. Everything comes from a token, and every token has a dark value. `{% brand_style %}` overrides --ip-brand / --ip-accent on :root, and because --ip-accent is declared as `var(--ip-brand, )` a white-label colour always wins — so never write a literal accent hex anywhere. 3. lime/mint/peach are BACKGROUND-ONLY tokens. Never text, never an icon colour, never a button fill. ── CLASS INVENTORY ──────────────────────────────────────────────────────── Scope / layout .ip-warm body scope: violet accent + large radii (above) .ip-shell .ip-main .ip-main--full workspace shell + content column .ip-sidebar the ink nav rail (220px, lg+ only) .ip-sidebar__brand/__nav/__foot rail regions .ip-nav .ip-nav__label .ip-nav__link .ip-nav__count .ip-nav__note .ip-nav__link.is-active 2px ember left bar (never a filled pill) .ip-nav__link--locked .ip-nav__lock paid-feature upsell row .ip-rail-plan plan badge + trial countdown block at rail bottom .ip-topbar .ip-topbar__title slim workspace top bar .ip-navbar .ip-navbar__inner/__links/__link/__collapse light public bar .ip-content padded content well (max 1400px) .ip-page-head h1 + lede + right-hand actions .ip-brand .ip-brand__mark logo lockup; mark honours the brand Surfaces .ip-section bordered panel, no shadow in the workspace .ip-section--tight smaller padding .ip-section--flush zero padding (wrap a table in this) .ip-section__head title row with optional right-hand action .ip-auth-card centred paper card for auth + error pages .ip-auth-wrap the centring wrapper for .ip-auth-card .ip-bento unequal auto-fit tile grid (KPI rows, landing) .ip-bento__tile one tile: 1px rule, --ip-r-xl, no heavy shadow .ip-bento__tile--lime / --mint / --peach / --ink background-block tiles .ip-bento__tile--wide / --tall span 2 columns / 2 rows .ip-kpi .ip-kpi__label/__value/__trend numeric tile innards Data .ip-table-wrap overflow-x:auto container (REQUIRED around tables) .ip-table sticky hairline header, rule-separated rows; add .text-end / .ip-num to numeric cells .ip-num tabular-nums, right aligned .ip-badge + --neutral/--accent/--success/--warning/--danger/--info/--light .ip-fit + --high/--mid/--low/--none bare numeral + "FIT" label (::after) .ip-skillbar 5-segment match bar; set style="--n:0..5" .ip-skillbar__label the name beside it .ip-meta-dot "·" separator between inline meta bits .ip-eyebrow small-caps section label .ip-lede .ip-muted body lede / secondary text Board .ip-board horizontally scrolling hairline column set .ip-board__col/__head/__title/__count/__hint/__body .ip-card paper candidate card, 1px rule, no shadow .ip-card__name/__meta/__actions .ip-avatar square initials chip (optional on cards) Flow .ip-stepper labelled dots joined by a 2px rule; wraps at 360px li.is-done / li.is-current / li.is-future + a inside each li .ip-step__here "You are here" chip on the current step .ip-slideover right overlay: scrim + 480px panel, shadow-pop, Escape + scrim click + focus trap (JS in base.html) .ip-slideover__scrim/__panel/__head/__title/__body/__foot open it from any control with data-ip-slideover="#panel-id" close it from inside with data-ip-slideover-close .ip-empty .ip-empty__icon .ip-empty__title (+ .ip-empty--sm) empty states .ip-toasts .ip-toast + --success/--error/--warning/--info .ip-spinner .ip-skeleton .ip-busy loading affordances Kept from v2 (restyled, same names): .ip-ring, .ip-exam-bar, .ip-timer, .ip-progress, .ip-question, .ip-option, .ip-hero, .ip-pill, .ip-feature, .ip-step, .ip-band, .ip-plan, .ip-footer, .ip-file-row, .ip-pill-check, .ip-filters, .ip-review, .ip-stage-picker, .ip-icon-btn, .ip-form-fields. Hard rules: transitions ≤180ms on transform/opacity/colour only; no backdrop-filter; no horizontal body overflow at 360px; focus rings stay. ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root { /* Paper / ink ramp — warm neutrals */ --ip-paper-50: #FDFBF8; --ip-paper-100: #FAF7F2; --ip-paper-200: #F3EEE6; --ip-paper-300: #EAE3D8; --ip-ink-900: #141210; --ip-ink-700: #35302B; --ip-ink-500: #55504A; --ip-ink-300: #8B847B; --ip-rule: #E3DCD1; --ip-rule-strong: #D3C9BA; /* Accents. Ember = workspace, violet = .ip-warm. Lime/mint/peach are background blocks only — never text, never a fill for a control. */ --ip-ember-600: #E14E14; --ip-ember-500: #FF5A1F; --ip-ember-100: #FFE8DC; --ip-violet-600: #5A49E8; --ip-violet-500: #6D5DF6; --ip-violet-100: #EFEBFF; --ip-lime-block: #C6F24E; --ip-mint-block: #DFF5EC; --ip-peach-block: #FFE8D6; /* Semantic */ --ip-green-600: #137A4C; --ip-amber-600: #A85B00; --ip-red-600: #B3261E; --ip-blue-600: #0D6D8A; --ip-green-100: #E1F2E9; --ip-amber-100: #FBEEDC; --ip-red-100: #FBE7E5; --ip-blue-100: #E2F1F6; /* Effective accent. --ip-brand is injected by {% brand_style %} and always wins; the fallback is the surface default (ember here, violet on .ip-warm). */ --ip-accent: var(--ip-brand, var(--ip-ember-500)); --ip-accent-600: var(--ip-brand, var(--ip-ember-600)); --ip-accent-soft: var(--ip-ember-100); --ip-accent-line: color-mix(in srgb, var(--ip-accent) 34%, transparent); --ip-accent-on: #FFFFFF; /* text colour on top of a solid accent fill */ /* Type */ --ip-font-head: "Bricolage Grotesque", "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ip-font-body: "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ip-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ip-fs-display: 2.5rem; /* 40 */ --ip-fs-h1: 1.75rem; /* 28 */ --ip-fs-h2: 1.25rem; /* 20 */ --ip-fs-h3: 1.0625rem; /* 17 */ --ip-fs-body: 0.9375rem; /* 15 */ --ip-fs-sm: 0.8125rem; /* 13 */ --ip-fs-label: 0.6875rem; /* 11 */ --ip-tracking-head: -0.03em; --ip-tracking-label: 0.06em; /* Shape & depth */ --ip-r-sm: 4px; --ip-r-md: 6px; --ip-r-lg: 12px; --ip-r-xl: 16px; --ip-shadow-card: 0 1px 2px rgba(20, 18, 16, .05); --ip-shadow-pop: 0 8px 24px -6px rgba(20, 18, 16, .18); --ip-scrim: rgba(20, 18, 16, .32); /* Surface-scoped radii: the workspace set by default, large under .ip-warm */ --ip-r-control: var(--ip-r-sm); --ip-r-surface: var(--ip-r-md); --ip-r-tile: var(--ip-r-lg); /* 8px space scale */ --ip-1: 0.25rem; /* 4 */ --ip-2: 0.5rem; /* 8 */ --ip-3: 0.75rem; /* 12 */ --ip-4: 1rem; /* 16 */ --ip-5: 1.5rem; /* 24 */ --ip-6: 2rem; /* 32 */ --ip-7: 3rem; /* 48 */ --ip-8: 4rem; /* 64 */ /* Chrome metrics */ --ip-sidebar-w: 220px; --ip-topbar-h: 52px; /* The ink nav rail keeps its own pair of tokens: it is a solid dark panel in BOTH themes, so it cannot be derived from --ip-ink-900 (which inverts). */ --ip-rail-bg: #141210; --ip-rail-raised: #23201C; --ip-rail-fg: #F5F1EA; --ip-rail-dim: #A9A199; --ip-rail-rule: #2E2924; /* ---- Semantic surface aliases (also the v2 names, kept so that every template in the repo keeps working against the new ramp) ---- */ --ip-bg: var(--ip-paper-100); --ip-surface: var(--ip-paper-50); --ip-surface-2: var(--ip-paper-200); --ip-surface-3: var(--ip-paper-300); --ip-sidebar: var(--ip-rail-bg); --ip-ink: var(--ip-ink-900); --ip-ink-soft: var(--ip-ink-700); --ip-muted: var(--ip-ink-500); --ip-line: var(--ip-rule); --ip-line-strong: var(--ip-rule-strong); --ip-success: var(--ip-green-600); --ip-success-soft: var(--ip-green-100); --ip-warning: var(--ip-amber-600); --ip-warning-soft: var(--ip-amber-100); --ip-danger: var(--ip-red-600); --ip-danger-soft: var(--ip-red-100); --ip-info: var(--ip-blue-600); --ip-info-soft: var(--ip-blue-100); /* v2 radius + shadow names still referenced by feature-app templates */ --ip-radius-sm: var(--ip-r-sm); --ip-radius: var(--ip-r-md); --ip-radius-lg: var(--ip-r-lg); --ip-shadow-xs: var(--ip-shadow-card); --ip-shadow-sm: var(--ip-shadow-card); --ip-shadow: var(--ip-shadow-pop); --ip-shadow-lg: var(--ip-shadow-pop); --ip-slate-400: var(--ip-ink-300); /* ---- Bootstrap mapping ---- */ --bs-primary: var(--ip-accent); --bs-primary-rgb: 255, 90, 31; --bs-body-bg: var(--ip-paper-100); --bs-body-color: var(--ip-ink-900); --bs-body-font-family: var(--ip-font-body); --bs-body-font-size: var(--ip-fs-body); --bs-body-line-height: 1.6; --bs-border-color: var(--ip-rule); --bs-border-color-translucent: var(--ip-rule); --bs-border-radius: var(--ip-r-control); --bs-border-radius-sm: var(--ip-r-sm); --bs-border-radius-lg: var(--ip-r-surface); --bs-link-color: var(--ip-accent-600); --bs-link-color-rgb: 225, 78, 20; --bs-link-hover-color: var(--ip-accent-600); --bs-secondary-color: var(--ip-ink-500); --bs-tertiary-bg: var(--ip-paper-200); --bs-secondary-bg: var(--ip-paper-200); --bs-emphasis-color: var(--ip-ink-900); --bs-heading-color: var(--ip-ink-900); } /* Warm scope: candidate portal, landing, careers, client portal, offers, booking, assessment taking. Violet accent + the large radius set. */ .ip-warm { --ip-accent: var(--ip-brand, var(--ip-violet-500)); --ip-accent-600: var(--ip-brand, var(--ip-violet-600)); --ip-accent-soft: var(--ip-violet-100); --ip-r-control: var(--ip-r-lg); --ip-r-surface: var(--ip-r-lg); --ip-r-tile: var(--ip-r-xl); --bs-primary: var(--ip-accent); --bs-primary-rgb: 109, 93, 246; --bs-link-color: var(--ip-accent-600); --bs-link-color-rgb: 90, 73, 232; --bs-border-radius: var(--ip-r-lg); --bs-border-radius-lg: var(--ip-r-xl); background: var(--ip-paper-100); } /* --- 1b. Dark mode ------------------------------------------------------- */ /* Declared twice on purpose: once for the OS preference (unless the reader has explicitly chosen light) and once for the explicit toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --ip-paper-50: #0F0D0C; --ip-paper-100: #12100E; --ip-paper-200: #1A1714; --ip-paper-300: #241F1A; --ip-ink-900: #F5F1EA; --ip-ink-700: #D8D1C7; --ip-ink-500: #A8A099; --ip-ink-300: #7C746B; --ip-rule: #2A2621; --ip-rule-strong: #3A342D; --ip-ember-600: #FF8A5C; --ip-ember-500: #FF7A45; --ip-ember-100: #3A2015; --ip-violet-600: #A497FF; --ip-violet-500: #8C7DFF; --ip-violet-100: #241F45; --ip-lime-block: #A8CC3C; --ip-mint-block: #16342A; --ip-peach-block: #3A2618; --ip-green-600: #52C48D; --ip-amber-600: #E2A652; --ip-red-600: #F08A80; --ip-blue-600: #6BC4DF; --ip-green-100: #103023; --ip-amber-100: #33260F; --ip-red-100: #351815; --ip-blue-100: #0E2B34; --ip-accent-on: #1B0E07; --ip-rail-bg: #0A0908; --ip-rail-raised: #1B1815; --ip-rail-fg: #EDE7DE; --ip-rail-dim: #9A928A; --ip-rail-rule: #241F1A; --ip-shadow-card: 0 1px 2px rgba(0, 0, 0, .5); --ip-shadow-pop: 0 8px 24px -6px rgba(0, 0, 0, .62); --ip-scrim: rgba(4, 3, 3, .58); --bs-primary-rgb: 255, 122, 69; --bs-link-color-rgb: 255, 138, 92; --bs-emphasis-color: #FFFFFF; } } :root[data-bs-theme="dark"] { --ip-paper-50: #0F0D0C; --ip-paper-100: #12100E; --ip-paper-200: #1A1714; --ip-paper-300: #241F1A; --ip-ink-900: #F5F1EA; --ip-ink-700: #D8D1C7; --ip-ink-500: #A8A099; --ip-ink-300: #7C746B; --ip-rule: #2A2621; --ip-rule-strong: #3A342D; --ip-ember-600: #FF8A5C; --ip-ember-500: #FF7A45; --ip-ember-100: #3A2015; --ip-violet-600: #A497FF; --ip-violet-500: #8C7DFF; --ip-violet-100: #241F45; --ip-lime-block: #A8CC3C; --ip-mint-block: #16342A; --ip-peach-block: #3A2618; --ip-green-600: #52C48D; --ip-amber-600: #E2A652; --ip-red-600: #F08A80; --ip-blue-600: #6BC4DF; --ip-green-100: #103023; --ip-amber-100: #33260F; --ip-red-100: #351815; --ip-blue-100: #0E2B34; --ip-accent-on: #1B0E07; --ip-rail-bg: #0A0908; --ip-rail-raised: #1B1815; --ip-rail-fg: #EDE7DE; --ip-rail-dim: #9A928A; --ip-rail-rule: #241F1A; --ip-shadow-card: 0 1px 2px rgba(0, 0, 0, .5); --ip-shadow-pop: 0 8px 24px -6px rgba(0, 0, 0, .62); --ip-scrim: rgba(4, 3, 3, .58); --bs-primary-rgb: 255, 122, 69; --bs-link-color-rgb: 255, 138, 92; --bs-emphasis-color: #FFFFFF; } /* --- 2. Base ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { background: var(--ip-paper-100); color: var(--ip-ink-900); font-family: var(--ip-font-body); font-size: var(--ip-fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ip-font-head); font-weight: 700; letter-spacing: var(--ip-tracking-head); color: var(--ip-ink-900); line-height: 1.15; } h1, .h1 { font-size: var(--ip-fs-h1); font-weight: 800; } h2, .h2 { font-size: var(--ip-fs-h2); } h3, .h3 { font-size: var(--ip-fs-h3); } h4, .h4, h5, .h5, h6, .h6 { font-size: 0.9375rem; letter-spacing: -0.015em; } a { color: var(--ip-accent-600); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--ip-accent-600); } hr { border-color: var(--ip-rule); opacity: 1; } code, kbd, pre, samp { font-family: var(--ip-font-mono); } ::selection { background: var(--ip-accent-soft); color: var(--ip-ink-900); } :focus-visible { outline: 2px solid var(--ip-accent); outline-offset: 2px; } .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--ip-accent); outline-offset: 2px; box-shadow: none; } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ip-accent); box-shadow: 0 0 0 3px var(--ip-accent-soft); } .ip-muted { color: var(--ip-ink-500); } .text-muted { color: var(--ip-ink-500) !important; } .text-body-secondary { color: var(--ip-ink-500) !important; } .ip-lede { font-size: 1.0625rem; line-height: 1.6; color: var(--ip-ink-700); max-width: 60ch; } .ip-eyebrow, .ip-label { font-size: var(--ip-fs-label); font-weight: 600; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-500); margin: 0 0 var(--ip-2); font-family: var(--ip-font-body); } .ip-num { font-variant-numeric: tabular-nums; text-align: right; } /* --- 3. Forms & buttons -------------------------------------------------- */ .form-control, .form-select { background: var(--ip-paper-50); border: 1px solid var(--ip-rule-strong); border-radius: var(--ip-r-control); color: var(--ip-ink-900); padding: 0.4375rem 0.625rem; font-size: var(--ip-fs-body); transition: border-color .15s ease, box-shadow .15s ease; } textarea.form-control { min-height: 5rem; } .form-control::placeholder { color: var(--ip-ink-300); } .form-control:disabled, .form-select:disabled { background: var(--ip-paper-200); color: var(--ip-ink-300); } .form-label { font-size: var(--ip-fs-sm); font-weight: 600; margin-bottom: var(--ip-1); color: var(--ip-ink-700); } .form-text { color: var(--ip-ink-500); font-size: var(--ip-fs-sm); } .form-check-input { border-color: var(--ip-rule-strong); background-color: var(--ip-paper-50); } .form-check-input:checked { background-color: var(--ip-accent); border-color: var(--ip-accent); } .form-check-label { color: var(--ip-ink-700); } .input-group-text { background: var(--ip-paper-200); border-color: var(--ip-rule-strong); color: var(--ip-ink-500); border-radius: var(--ip-r-control); } /* Django-rendered field wrappers (forms that loop over fields) */ .ip-form-fields > div + div { margin-top: var(--ip-4); } .ip-form-fields > div > label { display: block; font-size: var(--ip-fs-sm); font-weight: 600; margin-bottom: var(--ip-1); color: var(--ip-ink-700); } .btn { --bs-btn-border-radius: var(--ip-r-control); --bs-btn-padding-y: 0.4375rem; --bs-btn-padding-x: 0.875rem; --bs-btn-font-size: var(--ip-fs-sm); --bs-btn-font-weight: 600; font-family: var(--ip-font-body); letter-spacing: 0; transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; } .btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.625rem; --bs-btn-font-size: var(--ip-fs-sm); } .btn-lg { --bs-btn-padding-y: 0.625rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: var(--ip-r-surface); } /* Solid accent — the ONE primary action on a screen. */ .btn-primary { --bs-btn-bg: var(--ip-accent); --bs-btn-border-color: var(--ip-accent); --bs-btn-color: var(--ip-accent-on); --bs-btn-hover-bg: var(--ip-accent-600); --bs-btn-hover-border-color: var(--ip-accent-600); --bs-btn-hover-color: var(--ip-accent-on); --bs-btn-active-bg: var(--ip-accent-600); --bs-btn-active-border-color: var(--ip-accent-600); --bs-btn-active-color: var(--ip-accent-on); --bs-btn-disabled-bg: var(--ip-accent); --bs-btn-disabled-border-color: var(--ip-accent); --bs-btn-disabled-color: var(--ip-accent-on); } /* Everything else: a 1px rule. */ .btn-outline-secondary { --bs-btn-color: var(--ip-ink-700); --bs-btn-border-color: var(--ip-rule-strong); --bs-btn-bg: var(--ip-paper-50); --bs-btn-hover-bg: var(--ip-paper-200); --bs-btn-hover-border-color: var(--ip-ink-300); --bs-btn-hover-color: var(--ip-ink-900); --bs-btn-active-bg: var(--ip-paper-300); --bs-btn-active-border-color: var(--ip-ink-300); --bs-btn-active-color: var(--ip-ink-900); --bs-btn-disabled-color: var(--ip-ink-300); --bs-btn-disabled-border-color: var(--ip-rule); --bs-btn-disabled-bg: var(--ip-paper-200); } .btn-outline-primary { --bs-btn-color: var(--ip-accent-600); --bs-btn-border-color: var(--ip-accent-line); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--ip-accent-soft); --bs-btn-hover-border-color: var(--ip-accent); --bs-btn-hover-color: var(--ip-accent-600); --bs-btn-active-bg: var(--ip-accent-soft); --bs-btn-active-border-color: var(--ip-accent); --bs-btn-active-color: var(--ip-accent-600); } .btn-outline-success { --bs-btn-color: var(--ip-green-600); --bs-btn-border-color: color-mix(in srgb, var(--ip-green-600) 40%, transparent); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--ip-green-100); --bs-btn-hover-border-color: var(--ip-green-600); --bs-btn-hover-color: var(--ip-green-600); --bs-btn-active-bg: var(--ip-green-100); --bs-btn-active-border-color: var(--ip-green-600); --bs-btn-active-color: var(--ip-green-600); --bs-btn-disabled-color: var(--ip-ink-300); --bs-btn-disabled-border-color: var(--ip-rule); } .btn-outline-danger { --bs-btn-color: var(--ip-red-600); --bs-btn-border-color: color-mix(in srgb, var(--ip-red-600) 40%, transparent); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--ip-red-100); --bs-btn-hover-border-color: var(--ip-red-600); --bs-btn-hover-color: var(--ip-red-600); --bs-btn-active-bg: var(--ip-red-100); --bs-btn-active-border-color: var(--ip-red-600); --bs-btn-active-color: var(--ip-red-600); --bs-btn-disabled-color: var(--ip-ink-300); --bs-btn-disabled-border-color: var(--ip-rule); } .btn-secondary { --bs-btn-bg: var(--ip-ink-900); --bs-btn-border-color: var(--ip-ink-900); --bs-btn-color: var(--ip-paper-50); --bs-btn-hover-bg: var(--ip-ink-700); --bs-btn-hover-border-color: var(--ip-ink-700); --bs-btn-hover-color: var(--ip-paper-50); --bs-btn-active-bg: var(--ip-ink-700); --bs-btn-active-color: var(--ip-paper-50); } .btn-link { --bs-btn-color: var(--ip-ink-700); --bs-btn-hover-color: var(--ip-accent-600); text-decoration: none; font-weight: 600; } .ip-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; flex: 0 0 auto; line-height: 1; } .ip-icon-btn.btn-sm { width: 1.875rem; height: 1.875rem; } /* 40px tap targets on the comfortable surfaces + on touch widths */ .ip-warm .btn { --bs-btn-padding-y: 0.5625rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: var(--ip-fs-body); } .ip-warm .btn-sm { --bs-btn-padding-y: 0.375rem; --bs-btn-padding-x: 0.75rem; --bs-btn-font-size: var(--ip-fs-sm); } .ip-warm .ip-icon-btn { width: 2.5rem; height: 2.5rem; } @media (max-width: 575.98px) { .btn:not(.btn-sm) { --bs-btn-padding-y: 0.5625rem; min-height: 40px; } } /* --- 4. App shell -------------------------------------------------------- */ .ip-shell { min-height: 100vh; } /* The ink nav rail. */ .ip-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--ip-sidebar-w); background: var(--ip-rail-bg); color: var(--ip-rail-fg); border-right: 1px solid var(--ip-rail-rule); flex-direction: column; z-index: 1030; } .ip-sidebar__brand { display: flex; align-items: center; gap: var(--ip-2); padding: var(--ip-4) var(--ip-4) var(--ip-3); border-bottom: 1px solid var(--ip-rail-rule); min-height: var(--ip-topbar-h); } .ip-sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: var(--ip-3) 0; } .ip-sidebar__foot { border-top: 1px solid var(--ip-rail-rule); padding: var(--ip-2) var(--ip-3) var(--ip-3); } /* The offcanvas reuses the same aside markup — paint it the same. */ .offcanvas.offcanvas-start { background: var(--ip-rail-bg); color: var(--ip-rail-fg); border: 0; } .offcanvas.offcanvas-start .btn-close { filter: invert(1) grayscale(100%) brightness(220%); } .ip-brand { display: flex; align-items: center; gap: var(--ip-2); font-family: var(--ip-font-head); font-weight: 800; letter-spacing: var(--ip-tracking-head); font-size: 0.9375rem; color: inherit; text-decoration: none; min-width: 0; } .ip-brand:hover { text-decoration: none; color: inherit; } .ip-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ip-brand__mark { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: var(--ip-r-sm); background: var(--ip-accent); color: var(--ip-accent-on); font-size: 0.875rem; } .ip-sidebar .ip-brand, .offcanvas-start .ip-brand { color: var(--ip-rail-fg); } .ip-nav { list-style: none; padding: 0; margin: 0; } .ip-nav__label { font-size: var(--ip-fs-label); font-weight: 600; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-rail-dim); padding: var(--ip-4) var(--ip-4) var(--ip-1); } .ip-nav__label:first-child { padding-top: var(--ip-1); } .ip-nav__link { display: flex; align-items: center; gap: var(--ip-2); padding: 0.4375rem var(--ip-4); font-size: var(--ip-fs-sm); font-weight: 600; color: var(--ip-rail-fg); text-decoration: none; border-left: 2px solid transparent; transition: background-color .15s ease, color .15s ease; } .ip-nav__link:hover { background: var(--ip-rail-raised); color: #fff; text-decoration: none; } .ip-nav__link i { font-size: 0.9375rem; color: var(--ip-rail-dim); flex: 0 0 auto; } .ip-nav__link:hover i { color: var(--ip-rail-fg); } /* Active = a 2px ember left bar, never a filled pill. */ .ip-nav__link.is-active { background: var(--ip-rail-raised); border-left-color: var(--ip-accent); color: #fff; } .ip-nav__link.is-active i { color: var(--ip-accent); } .ip-nav__count { margin-left: auto; font-size: var(--ip-fs-label); font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-rail-dim); } .ip-nav__note { color: var(--ip-rail-dim) !important; } .ip-nav__link--locked { color: var(--ip-rail-dim); } .ip-nav__link--locked:hover { color: var(--ip-rail-fg); } .ip-nav__lock { margin-left: auto; display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.625rem; font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; padding: 0.05rem 0.3rem; border: 1px solid var(--ip-rail-rule); border-radius: var(--ip-r-sm); color: var(--ip-rail-dim); } .ip-nav__lock i { font-size: 0.5625rem !important; color: inherit !important; } /* Plan badge + trial countdown pinned to the bottom of the rail. */ .ip-rail-plan { margin: 0 0 var(--ip-2); padding: var(--ip-2) var(--ip-3); border: 1px solid var(--ip-rail-rule); border-radius: var(--ip-r-sm); background: var(--ip-rail-raised); } .ip-rail-plan__label { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-rail-dim); } .ip-rail-plan__row { display: flex; align-items: baseline; gap: var(--ip-2); } .ip-rail-plan__name { font-family: var(--ip-font-head); font-weight: 800; font-size: 0.875rem; letter-spacing: var(--ip-tracking-head); color: var(--ip-rail-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ip-rail-plan__days { font-size: var(--ip-fs-label); color: var(--ip-rail-dim); font-weight: 600; } .ip-rail-plan__cta { margin-left: auto; font-size: var(--ip-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ip-tracking-label); color: var(--ip-accent); text-decoration: none; white-space: nowrap; } .ip-rail-plan__cta:hover { color: var(--ip-accent); text-decoration: underline; } .ip-sidebar .form-select, .offcanvas-start .form-select { background: var(--ip-rail-raised); border-color: var(--ip-rail-rule); color: var(--ip-rail-fg); } .ip-sidebar .btn-outline-secondary, .offcanvas-start .btn-outline-secondary { --bs-btn-color: var(--ip-rail-fg); --bs-btn-bg: var(--ip-rail-raised); --bs-btn-border-color: var(--ip-rail-rule); --bs-btn-hover-bg: #302B26; --bs-btn-hover-border-color: var(--ip-rail-dim); --bs-btn-hover-color: #fff; --bs-btn-active-bg: #302B26; --bs-btn-active-color: #fff; } .ip-main { margin-left: var(--ip-sidebar-w); min-width: 0; } .ip-main--full { margin-left: 0; } .ip-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: var(--ip-2); height: var(--ip-topbar-h); padding: 0 var(--ip-5); background: var(--ip-paper-100); border-bottom: 1px solid var(--ip-rule); } .ip-topbar__title { font-family: var(--ip-font-head); font-weight: 700; font-size: var(--ip-fs-sm); letter-spacing: var(--ip-tracking-head); margin: 0; min-width: 0; } .ip-content { padding: var(--ip-5); max-width: 1440px; } .ip-page-head { display: flex; flex-wrap: wrap; gap: var(--ip-3); align-items: flex-end; justify-content: space-between; padding-bottom: var(--ip-4); margin-bottom: var(--ip-5); border-bottom: 1px solid var(--ip-rule); } .ip-page-head > div { min-width: 0; } .ip-page-head h1 { font-size: var(--ip-fs-h1); margin: 0 0 var(--ip-1); } .ip-page-head p { margin: 0; color: var(--ip-ink-500); font-size: var(--ip-fs-sm); } .ip-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--ip-2); } /* Light top bar for candidate / public surfaces. */ .ip-navbar { background: var(--ip-paper-50); border-bottom: 1px solid var(--ip-rule); position: sticky; top: 0; z-index: 1020; } .ip-navbar__inner { display: flex; align-items: center; gap: var(--ip-3); min-height: 56px; padding: var(--ip-2) 0; } .ip-navbar__links { display: flex; align-items: center; gap: var(--ip-1); } .ip-navbar__link { padding: var(--ip-1) var(--ip-3); border-radius: var(--ip-r-control); font-size: var(--ip-fs-sm); font-weight: 600; color: var(--ip-ink-700); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .ip-navbar__link:hover { background: var(--ip-paper-200); color: var(--ip-ink-900); text-decoration: none; } .ip-navbar__link.is-active { color: var(--ip-accent-600); background: var(--ip-accent-soft); } .ip-navbar__collapse { display: flex; flex-direction: column; gap: var(--ip-1); padding: var(--ip-2) 0 var(--ip-3); border-top: 1px solid var(--ip-rule); } .ip-navbar__collapse .ip-navbar__link { padding: var(--ip-2) var(--ip-3); } /* --- 5. Surfaces --------------------------------------------------------- */ .ip-section { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); padding: var(--ip-5); } .ip-section--tight { padding: var(--ip-4); } .ip-section--flush { padding: 0; overflow: hidden; } .ip-warm .ip-section { box-shadow: var(--ip-shadow-card); } .card { --bs-card-bg: var(--ip-paper-50); --bs-card-border-color: var(--ip-rule); --bs-card-border-radius: var(--ip-r-surface); --bs-card-cap-bg: transparent; } .card-header { background: transparent; border-bottom-color: var(--ip-rule); font-weight: 700; font-family: var(--ip-font-head); letter-spacing: var(--ip-tracking-head); padding: var(--ip-3) var(--ip-4); } .ip-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ip-3); margin-bottom: var(--ip-4); padding-bottom: var(--ip-3); border-bottom: 1px solid var(--ip-rule); } .ip-section__head h2 { font-size: var(--ip-fs-h3); margin: 0; } /* Centred paper card for auth + error pages. */ .ip-auth-wrap { display: flex; flex-direction: column; align-items: center; padding: var(--ip-6) var(--ip-3) var(--ip-7); } .ip-auth-wrap > * { width: 100%; max-width: 25rem; } .ip-auth-brand { display: flex; justify-content: center; margin-bottom: var(--ip-5); } .ip-auth-brand .ip-brand { font-size: 1.0625rem; } .ip-auth-brand .ip-brand__mark { width: 2rem; height: 2rem; font-size: 1rem; } .ip-auth-card { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-lg); box-shadow: var(--ip-shadow-card); padding: var(--ip-6) var(--ip-5); } .ip-auth-card h1 { font-size: var(--ip-fs-h2); margin: 0 0 var(--ip-1); } .ip-auth-card > p:first-of-type { color: var(--ip-ink-500); font-size: var(--ip-fs-sm); } .ip-auth-foot { margin: var(--ip-5) 0 0; text-align: center; font-size: var(--ip-fs-sm); color: var(--ip-ink-500); line-height: 1.9; } /* Bento: unequal auto-fit grid. One tile may carry a *-block background. */ .ip-bento { display: grid; gap: var(--ip-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .ip-bento--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } /* Unequal 5-column row: 1 + 2 (a --wide tile) + 1 + 1 fits one line on desktop. */ @media (min-width: 992px) { .ip-bento--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .ip-bento__tile { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-tile); padding: var(--ip-4) var(--ip-4) var(--ip-5); display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; transition: border-color .15s ease; } a.ip-bento__tile:hover { border-color: var(--ip-rule-strong); color: inherit; text-decoration: none; } .ip-bento__tile--wide { grid-column: span 2; } .ip-bento__tile--tall { grid-row: span 2; } /* Background-block tiles. A block keeps its hue in BOTH themes, so the ink ramp is re-pointed locally rather than fought with per-element overrides — every descendant reads --ip-ink-* and therefore stays legible on the block. */ .ip-bento__tile--lime { background: var(--ip-lime-block); border-color: transparent; --ip-ink-900: #141210; --ip-ink-700: #221F1A; --ip-ink-500: #33302A; --ip-ink-300: #44403A; color: var(--ip-ink-900); } .ip-bento__tile--mint { background: var(--ip-mint-block); border-color: transparent; } .ip-bento__tile--peach { background: var(--ip-peach-block); border-color: transparent; } .ip-bento__tile--ink { background: var(--ip-rail-bg); border-color: transparent; --ip-ink-900: var(--ip-rail-fg); --ip-ink-700: var(--ip-rail-fg); --ip-ink-500: var(--ip-rail-dim); --ip-ink-300: var(--ip-rail-dim); color: var(--ip-ink-900); } @media (max-width: 575.98px) { .ip-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Two even columns beat a lopsided span on a phone. */ .ip-bento__tile--wide, .ip-bento__tile--tall { grid-column: auto; grid-row: auto; } .ip-bento__tile { padding: var(--ip-3) var(--ip-3) var(--ip-4); } } .ip-kpi { display: flex; flex-direction: column; min-width: 0; } .ip-kpi__label { font-size: var(--ip-fs-label); font-weight: 600; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-500); } .ip-kpi__value { font-family: var(--ip-font-head); font-size: var(--ip-fs-display); font-weight: 800; letter-spacing: var(--ip-tracking-head); line-height: 1; margin: var(--ip-3) 0 var(--ip-1); color: var(--ip-ink-900); font-variant-numeric: tabular-nums; } .ip-kpi__trend { font-size: var(--ip-fs-sm); color: var(--ip-ink-500); margin-top: auto; } .ip-kpi__trend .up { color: var(--ip-green-600); font-weight: 700; } .ip-kpi__trend .down { color: var(--ip-red-600); font-weight: 700; } /* --- 6. Tables ----------------------------------------------------------- */ /* No card box, no shadow: a hairline rule under a sticky header. */ .ip-table-wrap { overflow-x: auto; overflow-y: visible; max-width: 100%; -webkit-overflow-scrolling: touch; } .ip-table { margin: 0; width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ip-fs-sm); } .ip-table > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--ip-paper-50); font-size: var(--ip-fs-label); font-weight: 600; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-500); text-align: left; white-space: nowrap; padding: var(--ip-2) var(--ip-3); border-bottom: 1px solid var(--ip-rule-strong); } .ip-table > thead > tr > th.text-end, .ip-table > thead > tr > th.ip-num { text-align: right; } .ip-table > tbody > tr > td { padding: var(--ip-3); border-bottom: 1px solid var(--ip-rule); vertical-align: middle; color: var(--ip-ink-900); background: transparent; } .ip-table > tbody > tr:last-child > td { border-bottom: 0; } .ip-table > tbody > tr:hover > td { background: var(--ip-paper-200); } .ip-table > tbody > tr.table-active > td { background: var(--ip-accent-soft); } .ip-table td.text-end, .ip-table td.ip-num { text-align: right; font-variant-numeric: tabular-nums; } .ip-table td .btn { white-space: nowrap; } .ip-table a { font-weight: 600; } .table { --bs-table-bg: transparent; --bs-table-color: var(--ip-ink-900); --bs-table-border-color: var(--ip-rule); --bs-table-hover-bg: var(--ip-paper-200); --bs-table-hover-color: var(--ip-ink-900); --bs-table-striped-bg: var(--ip-paper-200); --bs-table-active-bg: var(--ip-accent-soft); } .ip-access-links .ip-table > tbody > tr > td { padding: var(--ip-2) var(--ip-3); } /* --- 7. Badges, fit numeral, skill bars ---------------------------------- */ .ip-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.4375rem; border: 1px solid var(--ip-rule); border-radius: var(--ip-r-sm); font-size: var(--ip-fs-label); font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; white-space: nowrap; max-width: 100%; background: var(--ip-paper-200); color: var(--ip-ink-700); } .ip-badge--neutral { background: var(--ip-paper-200); color: var(--ip-ink-700); border-color: var(--ip-rule); } .ip-badge--light { background: transparent; color: var(--ip-ink-500); border-color: var(--ip-rule); } .ip-badge--accent { background: var(--ip-accent-soft); color: var(--ip-accent-600); border-color: var(--ip-accent-line); } .ip-badge--success { background: var(--ip-green-100); color: var(--ip-green-600); border-color: color-mix(in srgb, var(--ip-green-600) 30%, transparent); } .ip-badge--warning { background: var(--ip-amber-100); color: var(--ip-amber-600); border-color: color-mix(in srgb, var(--ip-amber-600) 30%, transparent); } .ip-badge--danger { background: var(--ip-red-100); color: var(--ip-red-600); border-color: color-mix(in srgb, var(--ip-red-600) 30%, transparent); } .ip-badge--info { background: var(--ip-blue-100); color: var(--ip-blue-600); border-color: color-mix(in srgb, var(--ip-blue-600) 30%, transparent); } .badge { font-weight: 700; border-radius: var(--ip-r-sm); padding: 0.1875rem 0.4375rem; font-size: var(--ip-fs-label); } .text-bg-secondary, .text-bg-light { background: var(--ip-paper-200) !important; color: var(--ip-ink-700) !important; } .text-bg-success { background: var(--ip-green-100) !important; color: var(--ip-green-600) !important; } .text-bg-danger { background: var(--ip-red-100) !important; color: var(--ip-red-600) !important; } .text-bg-warning { background: var(--ip-amber-100) !important; color: var(--ip-amber-600) !important; } .text-bg-info { background: var(--ip-blue-100) !important; color: var(--ip-blue-600) !important; } .text-bg-primary { background: var(--ip-accent-soft) !important; color: var(--ip-accent-600) !important; } .text-bg-dark { background: var(--ip-ink-900) !important; color: var(--ip-paper-50) !important; } .text-success { color: var(--ip-green-600) !important; } .text-danger { color: var(--ip-red-600) !important; } .text-warning { color: var(--ip-amber-600) !important; } .text-primary { color: var(--ip-accent-600) !important; } /* Fit score: a large bare numeral with a tiny FIT label beneath. The label is generated, so every existing `86` gains it without a markup change. */ .ip-fit { display: inline-flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; line-height: 1; font-family: var(--ip-font-head); font-weight: 800; font-size: 1.625rem; letter-spacing: var(--ip-tracking-head); font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; } .ip-fit::after { content: "FIT"; display: block; margin-top: 0.2rem; font-family: var(--ip-font-body); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-500); } .ip-fit--high { color: var(--ip-green-600); } .ip-fit--mid { color: var(--ip-amber-600); } .ip-fit--low { color: var(--ip-ink-300); } .ip-fit--none { color: var(--ip-ink-300); } /* Skill match: 5 segments, not a continuous bar. Set style="--n:3". */ .ip-skillbar { display: inline-grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 4.5rem; vertical-align: middle; } .ip-skillbar > i, .ip-skillbar > span { display: block; height: 6px; border-radius: 1px; background: var(--ip-rule); font-style: normal; } .ip-skillbar[style*="--n:1"] > :nth-child(-n + 1), .ip-skillbar[style*="--n:2"] > :nth-child(-n + 2), .ip-skillbar[style*="--n:3"] > :nth-child(-n + 3), .ip-skillbar[style*="--n:4"] > :nth-child(-n + 4), .ip-skillbar[style*="--n:5"] > :nth-child(-n + 5) { background: var(--ip-green-600); } .ip-skillbar-row { display: flex; align-items: center; gap: var(--ip-3); font-size: var(--ip-fs-sm); padding: var(--ip-1) 0; } .ip-skillbar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ip-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: var(--ip-r-sm); background: var(--ip-paper-200); border: 1px solid var(--ip-rule); font-family: var(--ip-font-head); font-weight: 800; font-size: var(--ip-fs-sm); color: var(--ip-ink-700); text-transform: uppercase; } /* --- 8. Empty states ----------------------------------------------------- */ .ip-empty { text-align: center; padding: var(--ip-7) var(--ip-4); color: var(--ip-ink-500); } .ip-empty__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--ip-3); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-md); background: var(--ip-paper-200); color: var(--ip-ink-500); font-size: 1.25rem; } .ip-empty__title { font-family: var(--ip-font-head); font-weight: 800; font-size: var(--ip-fs-h3); letter-spacing: var(--ip-tracking-head); color: var(--ip-ink-900); margin-bottom: var(--ip-2); } .ip-empty p { margin: 0 auto var(--ip-4); max-width: 30rem; font-size: var(--ip-fs-sm); } .ip-empty p:last-child { margin-bottom: 0; } .ip-empty--sm { padding: var(--ip-5) var(--ip-3); } /* --- 9. Kanban board ----------------------------------------------------- */ /* Columns separated by 1px rules; cards are paper with a rule and no shadow. */ .ip-board { display: flex; align-items: stretch; gap: 0; overflow-x: auto; overflow-y: visible; padding-bottom: var(--ip-2); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-md); background: var(--ip-paper-50); -webkit-overflow-scrolling: touch; } .ip-board__col { flex: 0 0 288px; max-width: 288px; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--ip-rule); } .ip-board__col:last-child { border-right: 0; } .ip-board__head { display: flex; align-items: center; gap: var(--ip-2); padding: var(--ip-2) var(--ip-3); background: var(--ip-paper-200); border-bottom: 1px solid var(--ip-rule); position: sticky; top: 0; z-index: 1; } .ip-board__title { font-size: var(--ip-fs-label); font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Bare count, per spec — no pill. */ .ip-board__count { margin-left: auto; font-family: var(--ip-font-head); font-weight: 800; font-size: var(--ip-fs-sm); color: var(--ip-ink-500); font-variant-numeric: tabular-nums; } .ip-board__hint { font-size: var(--ip-fs-label); color: var(--ip-ink-500); padding: var(--ip-2) var(--ip-3); border-bottom: 1px solid var(--ip-rule); background: var(--ip-paper-50); } .ip-board__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--ip-2); padding: var(--ip-3); } .ip-card { position: relative; background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-sm); padding: var(--ip-3); box-shadow: none; transition: border-color .15s ease; overflow: visible; } .ip-card:hover { border-color: var(--ip-rule-strong); } .ip-card:focus-within { border-color: var(--ip-rule-strong); } .ip-card__name { font-family: var(--ip-font-head); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.015em; line-height: 1.25; word-break: break-word; } .ip-card__name a { color: var(--ip-ink-900); text-decoration: none; } .ip-card__name a:hover { color: var(--ip-accent-600); } .ip-card__meta { color: var(--ip-ink-500); font-size: var(--ip-fs-label); line-height: 1.5; } .ip-card__actions { display: flex; align-items: center; gap: var(--ip-1); margin-top: var(--ip-3); padding-top: var(--ip-2); border-top: 1px solid var(--ip-rule); } .ip-card .ip-review { margin-top: var(--ip-3); padding-top: var(--ip-3); border-top: 1px solid var(--ip-rule); } .ip-review { max-width: 100%; } .ip-review textarea, .ip-review select { max-width: 100%; } .ip-stage-picker { display: flex; gap: var(--ip-1); align-items: center; } .ip-stage-picker select { min-width: 0; } .ip-filters { display: flex; flex-wrap: wrap; gap: var(--ip-2); align-items: flex-end; } .ip-filters select, .ip-filters input { min-width: 9rem; } @media (max-width: 575.98px) { .ip-board__col { flex-basis: 82vw; max-width: 82vw; } } /* --- 10. Stage stepper --------------------------------------------------- */ /* Labelled dots joined by a 2px rule. Wraps at 360px with no dangling tail: the connector is drawn on the dot's row, not after the last item. */ .ip-stepper { /* A fixed column count per breakpoint is what keeps the connectors honest: the rule is drawn leftwards from each dot and suppressed on the first item of every ROW, so a wrapped stepper never trails a dangling connector. */ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--ip-4); list-style: none; padding: 0; margin: 0 0 var(--ip-3); } .ip-stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--ip-2); text-align: center; min-width: 0; font-size: var(--ip-fs-label); font-weight: 600; letter-spacing: 0.01em; color: var(--ip-ink-500); padding: 0 var(--ip-1); } .ip-stepper li::before { content: ""; position: absolute; top: 0.625rem; right: 50%; left: -50%; height: 2px; background: var(--ip-rule); z-index: 0; } .ip-stepper li:nth-child(6n + 1)::before { display: none; } .ip-stepper li.is-done::before, .ip-stepper li.is-current::before { background: var(--ip-green-600); } .ip-stepper .ip-step__dot { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid var(--ip-rule-strong); background: var(--ip-paper-50); color: transparent; font-size: 0.6875rem; line-height: 1; } .ip-stepper li.is-done { color: var(--ip-ink-700); } .ip-stepper li.is-done .ip-step__dot { background: var(--ip-green-600); border-color: var(--ip-green-600); color: #fff; } .ip-stepper li.is-current { color: var(--ip-ink-900); font-weight: 700; } .ip-stepper li.is-current .ip-step__dot { border-color: var(--ip-accent); box-shadow: 0 0 0 3px var(--ip-accent-soft); background: var(--ip-paper-50); } .ip-stepper li.is-future .ip-step__dot { border-color: var(--ip-ink-300); } .ip-stepper__name { display: block; max-width: 100%; overflow-wrap: anywhere; } .ip-step__here { display: inline-block; padding: 0.05rem 0.3rem; border-radius: var(--ip-r-sm); background: var(--ip-accent); color: var(--ip-accent-on); font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ip-tracking-label); white-space: nowrap; } @media (max-width: 991.98px) { .ip-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ip-stepper li:nth-child(6n + 1)::before { display: block; } .ip-stepper li:nth-child(4n + 1)::before { display: none; } } @media (max-width: 575.98px) { .ip-stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ip-stepper li:nth-child(4n + 1)::before { display: block; } .ip-stepper li:nth-child(3n + 1)::before { display: none; } } @media (max-width: 359.98px) { .ip-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ip-stepper li:nth-child(3n + 1)::before { display: block; } .ip-stepper li:nth-child(2n + 1)::before { display: none; } } /* --- 11. Slide-over ------------------------------------------------------ */ /* Right-hand overlay with a scrim. 480px, shadow-pop, Escape + scrim click and a focus trap (behaviour lives in base.html). */ .ip-slideover { position: fixed; inset: 0; z-index: 1080; } .ip-slideover[hidden] { display: none !important; } .ip-slideover__scrim { position: absolute; inset: 0; background: var(--ip-scrim); opacity: 0; transition: opacity .18s ease; } .ip-slideover__panel { position: absolute; inset: 0 0 0 auto; width: min(480px, 100vw); display: flex; flex-direction: column; background: var(--ip-paper-100); border-left: 1px solid var(--ip-rule-strong); box-shadow: var(--ip-shadow-pop); transform: translateX(100%); transition: transform .18s ease; } .ip-slideover.is-open .ip-slideover__scrim { opacity: 1; } .ip-slideover.is-open .ip-slideover__panel { transform: translateX(0); } .ip-slideover__head { display: flex; align-items: flex-start; gap: var(--ip-3); padding: var(--ip-4) var(--ip-5); border-bottom: 1px solid var(--ip-rule); background: var(--ip-paper-50); } .ip-slideover__title { font-family: var(--ip-font-head); font-weight: 800; font-size: var(--ip-fs-h3); letter-spacing: var(--ip-tracking-head); margin: 0; min-width: 0; } .ip-slideover__sub { display: block; margin-top: 0.125rem; font-family: var(--ip-font-body); font-size: var(--ip-fs-label); font-weight: 600; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-500); } .ip-slideover__body { flex: 1 1 auto; overflow-y: auto; padding: var(--ip-5); } .ip-slideover__foot { padding: var(--ip-3) var(--ip-5); border-top: 1px solid var(--ip-rule); background: var(--ip-paper-50); } body.ip-slideover-open { overflow: hidden; } /* --- 12. Toasts, alerts, loading ---------------------------------------- */ .ip-toasts { position: fixed; top: calc(var(--ip-topbar-h) + var(--ip-3)); right: var(--ip-4); z-index: 1090; width: min(24rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: var(--ip-2); } .ip-toast { display: flex; align-items: flex-start; gap: var(--ip-2); background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-left: 3px solid var(--ip-accent); border-radius: var(--ip-r-sm); box-shadow: var(--ip-shadow-pop); padding: var(--ip-3); font-size: var(--ip-fs-sm); } .ip-toast i { font-size: 0.9375rem; line-height: 1.4; color: var(--ip-accent-600); } .ip-toast--success { border-left-color: var(--ip-green-600); } .ip-toast--success i { color: var(--ip-green-600); } .ip-toast--error, .ip-toast--danger { border-left-color: var(--ip-red-600); } .ip-toast--error i, .ip-toast--danger i { color: var(--ip-red-600); } .ip-toast--warning { border-left-color: var(--ip-amber-600); } .ip-toast--warning i { color: var(--ip-amber-600); } .ip-toast__body { flex: 1 1 auto; min-width: 0; color: var(--ip-ink-900); } .ip-toast .btn-close { --bs-btn-close-focus-shadow: none; font-size: 0.625rem; } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } } .alert { border-radius: var(--ip-r-sm); border: 1px solid var(--ip-rule); padding: var(--ip-3) var(--ip-4); font-size: var(--ip-fs-sm); background: var(--ip-paper-200); color: var(--ip-ink-900); } .alert-warning { background: var(--ip-amber-100); color: var(--ip-amber-600); border-color: color-mix(in srgb, var(--ip-amber-600) 30%, transparent); } .alert-danger { background: var(--ip-red-100); color: var(--ip-red-600); border-color: color-mix(in srgb, var(--ip-red-600) 30%, transparent); } .alert-success { background: var(--ip-green-100); color: var(--ip-green-600); border-color: color-mix(in srgb, var(--ip-green-600) 30%, transparent); } .alert-info { background: var(--ip-blue-100); color: var(--ip-blue-600); border-color: color-mix(in srgb, var(--ip-blue-600) 30%, transparent); } .alert a { color: inherit; text-decoration: underline; font-weight: 700; } .htmx-indicator { opacity: 0; transition: opacity .15s ease; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } .ip-busy.htmx-request { opacity: .55; pointer-events: none; transition: opacity .15s ease; } .ip-spinner { display: inline-block; width: 0.875rem; height: 0.875rem; border: 2px solid var(--ip-rule-strong); border-top-color: var(--ip-accent); border-radius: 50%; animation: ip-spin .7s linear infinite; vertical-align: -0.125em; } @keyframes ip-spin { to { transform: rotate(360deg); } } .ip-skeleton { background: var(--ip-paper-200); border-radius: var(--ip-r-sm); min-height: 0.75rem; animation: ip-pulse 1.4s ease-in-out infinite; } @keyframes ip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* --- 13. Score ring (analytics / assessment result) --------------------- */ .ip-ring { --ip-ring-value: 0; --ip-ring-color: var(--ip-accent); position: relative; display: grid; place-items: center; width: 8rem; height: 8rem; border-radius: 50%; background: conic-gradient(var(--ip-ring-color) calc(var(--ip-ring-value) * 1%), var(--ip-paper-200) 0); margin-inline: auto; } .ip-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--ip-paper-50); border: 1px solid var(--ip-rule); } .ip-ring__inner { position: relative; z-index: 1; text-align: center; line-height: 1.15; } .ip-ring__value { font-family: var(--ip-font-head); font-size: 1.75rem; font-weight: 800; letter-spacing: var(--ip-tracking-head); font-variant-numeric: tabular-nums; } .ip-ring__unit { font-size: var(--ip-fs-label); color: var(--ip-ink-500); } /* --- 14. Assessment taking ---------------------------------------------- */ .ip-exam-bar { position: sticky; top: 0; z-index: 1020; background: var(--ip-paper-50); border-bottom: 1px solid var(--ip-rule); padding-top: var(--ip-3); } .ip-exam-bar__row { display: flex; align-items: center; gap: var(--ip-3); padding-bottom: var(--ip-3); } .ip-exam-bar__title { min-width: 0; } .ip-exam-bar__title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ip-timer { font-family: var(--ip-font-mono); font-weight: 600; padding: 0.25rem 0.625rem; border-radius: var(--ip-r-sm); border: 1px solid var(--ip-rule); background: var(--ip-paper-200); font-variant-numeric: tabular-nums; } .ip-timer.is-low { background: var(--ip-red-100); border-color: var(--ip-red-600); color: var(--ip-red-600); } .ip-progress { height: 3px; background: var(--ip-rule); margin-top: var(--ip-3); } .ip-progress__bar { height: 100%; background: var(--ip-accent); width: 0; transition: width .18s ease; } .ip-question { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); padding: var(--ip-5); margin-bottom: var(--ip-4); } .ip-question__num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--ip-r-sm); background: var(--ip-paper-200); border: 1px solid var(--ip-rule); font-size: var(--ip-fs-label); font-weight: 700; color: var(--ip-ink-500); } .ip-option { display: flex; gap: var(--ip-2); align-items: flex-start; padding: var(--ip-3); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-control); margin-bottom: var(--ip-2); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; min-height: 40px; } .ip-option:hover { border-color: var(--ip-rule-strong); background: var(--ip-paper-200); } .ip-option:has(input:checked) { border-color: var(--ip-accent); background: var(--ip-accent-soft); } .ip-option input { margin-top: 0.2rem; flex: 0 0 auto; } /* --- 15. Landing / marketing -------------------------------------------- */ .ip-hero { padding: var(--ip-8) 0 var(--ip-7); } .ip-hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: var(--ip-tracking-head); margin-bottom: var(--ip-4); } .ip-pill { display: inline-flex; align-items: center; gap: var(--ip-2); padding: 0.25rem 0.625rem; border-radius: 999px; border: 1px solid var(--ip-rule); background: var(--ip-paper-200); font-size: var(--ip-fs-label); font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-700); } .ip-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ip-green-600); } .ip-feature { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-tile); padding: var(--ip-5); height: 100%; transition: border-color .15s ease; } .ip-feature:hover { border-color: var(--ip-rule-strong); } .ip-feature__icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--ip-r-md); background: var(--ip-accent-soft); color: var(--ip-accent-600); font-size: 1.125rem; margin-bottom: var(--ip-3); } .ip-feature h3 { font-size: var(--ip-fs-h3); margin-bottom: var(--ip-2); } .ip-feature p { color: var(--ip-ink-500); font-size: var(--ip-fs-sm); margin: 0; } .ip-step { display: flex; gap: var(--ip-3); align-items: flex-start; } .ip-step__n { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: var(--ip-r-sm); background: var(--ip-ink-900); color: var(--ip-paper-50); font-family: var(--ip-font-head); font-weight: 800; font-size: var(--ip-fs-sm); } .ip-step h3 { font-size: var(--ip-fs-h3); margin-bottom: var(--ip-1); } .ip-step p { color: var(--ip-ink-500); font-size: var(--ip-fs-sm); margin: 0; } .ip-band { padding: var(--ip-7) 0; } .ip-band--alt { background: var(--ip-paper-200); border-block: 1px solid var(--ip-rule); } .ip-plan { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-tile); padding: var(--ip-5); height: 100%; display: flex; flex-direction: column; } .ip-plan.is-current { border-color: var(--ip-accent); box-shadow: 0 0 0 3px var(--ip-accent-soft); } .ip-plan__name { font-family: var(--ip-font-head); font-weight: 800; font-size: var(--ip-fs-h3); } .ip-plan__price { font-family: var(--ip-font-head); font-size: 2rem; font-weight: 800; letter-spacing: var(--ip-tracking-head); margin: var(--ip-3) 0 var(--ip-1); } .ip-plan__price span { font-size: var(--ip-fs-sm); font-weight: 400; color: var(--ip-ink-500); } .ip-plan__list { list-style: none; padding: 0; margin: var(--ip-4) 0; display: grid; gap: var(--ip-2); font-size: var(--ip-fs-sm); } .ip-plan__list li { display: flex; gap: var(--ip-2); align-items: flex-start; color: var(--ip-ink-700); } .ip-plan__list i { color: var(--ip-green-600); margin-top: 0.15rem; } .ip-plan__cta { margin-top: auto; } .ip-footer { border-top: 1px solid var(--ip-rule); background: var(--ip-paper-200); padding: var(--ip-6) 0; font-size: var(--ip-fs-sm); color: var(--ip-ink-500); } .ip-footer a { color: var(--ip-ink-700); } /* --- 16. Misc ------------------------------------------------------------ */ .ip-meta-dot::before { content: "·"; margin: 0 0.4em; color: var(--ip-rule-strong); } .list-group-item { background: var(--ip-paper-50); border-color: var(--ip-rule); color: var(--ip-ink-900); } .offcanvas { background: var(--ip-paper-50); color: var(--ip-ink-900); } .modal-content { background: var(--ip-paper-50); border-color: var(--ip-rule); border-radius: var(--ip-r-surface); box-shadow: var(--ip-shadow-pop); } .modal-header, .modal-footer { border-color: var(--ip-rule); } .dropdown-menu { --bs-dropdown-bg: var(--ip-paper-50); --bs-dropdown-border-color: var(--ip-rule); --bs-dropdown-border-radius: var(--ip-r-md); --bs-dropdown-link-color: var(--ip-ink-700); --bs-dropdown-link-hover-bg: var(--ip-paper-200); --bs-dropdown-link-hover-color: var(--ip-ink-900); --bs-dropdown-link-active-bg: var(--ip-accent-soft); --bs-dropdown-link-active-color: var(--ip-accent-600); --bs-dropdown-divider-bg: var(--ip-rule); --bs-dropdown-padding-y: var(--ip-1); box-shadow: var(--ip-shadow-pop); font-size: var(--ip-fs-sm); } .dropdown-item { border-radius: var(--ip-r-sm); padding: 0.375rem var(--ip-3); } .dropdown-header { font-size: var(--ip-fs-label); text-transform: uppercase; letter-spacing: var(--ip-tracking-label); color: var(--ip-ink-500); } .nav-tabs { --bs-nav-tabs-border-color: var(--ip-rule); --bs-nav-link-color: var(--ip-ink-500); --bs-nav-tabs-link-active-color: var(--ip-ink-900); --bs-nav-tabs-link-active-bg: var(--ip-paper-50); --bs-nav-tabs-link-active-border-color: var(--ip-rule) var(--ip-rule) var(--ip-paper-50); font-size: var(--ip-fs-sm); font-weight: 600; } .progress { background: var(--ip-paper-200); } .progress-bar { background: var(--ip-accent); } .ip-file-row { display: flex; align-items: center; gap: var(--ip-2); padding: var(--ip-2) var(--ip-3); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-control); background: var(--ip-paper-200); font-size: var(--ip-fs-sm); min-width: 0; } .ip-file-row__icon { color: var(--ip-ink-500); flex: 0 0 auto; } .ip-file-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ip-pill-choices { display: flex; flex-wrap: wrap; gap: var(--ip-2); } .ip-pill-check { display: inline-flex; align-items: center; gap: var(--ip-2); padding: 0.375rem 0.75rem; min-height: 36px; border: 1px solid var(--ip-rule-strong); border-radius: var(--ip-r-control); background: var(--ip-paper-50); font-size: var(--ip-fs-sm); font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .ip-pill-check:hover { border-color: var(--ip-accent); } .ip-pill-check:has(input:checked) { border-color: var(--ip-accent); background: var(--ip-accent-soft); color: var(--ip-accent-600); } .ip-pill-check:has(input:focus-visible) { outline: 2px solid var(--ip-accent); outline-offset: 2px; } /* --- 17. Responsive ------------------------------------------------------ */ @media (max-width: 991.98px) { .ip-sidebar { display: none; } .ip-main { margin-left: 0; } .ip-content { padding: var(--ip-4); } .ip-topbar { padding: 0 var(--ip-4); } } @media (max-width: 575.98px) { .ip-content { padding: var(--ip-3); } .ip-topbar { padding: 0 var(--ip-3); } .ip-section { padding: var(--ip-4); } .ip-auth-card { padding: var(--ip-5) var(--ip-4); } .ip-page-head { align-items: flex-start; } .ip-page-head h1 { font-size: 1.375rem; } .ip-page-head__actions { width: 100%; } .ip-toasts { top: auto; bottom: var(--ip-3); right: var(--ip-3); left: var(--ip-3); width: auto; } .ip-hero { padding: var(--ip-6) 0 var(--ip-5); } .ip-band { padding: var(--ip-6) 0; } .ip-ring { width: 7rem; height: 7rem; } .ip-kpi__value { font-size: 2rem; } .ip-slideover__head, .ip-slideover__body, .ip-slideover__foot { padding-inline: var(--ip-4); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ========================================================================== === Candidate & public surfaces (agent 2) === Landing bento, candidate application cards, and the standalone token-link pages (careers, client portal, offer signing, booking, video recording). Everything below is scoped to .ip-warm or to an agent-2-only class, uses only the tokens declared above, and has no colour of its own. ========================================================================== */ /* --- A. Bootstrap components on the standalone warm pages ---------------- The token-link templates (client portal, offers, booking, video) are plain Bootstrap markup that predates the design system. Re-point the components they use rather than rewriting every element, so they inherit the warm ramp in both themes. */ .ip-warm .card { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-tile); box-shadow: var(--ip-shadow-card); color: var(--ip-ink-900); /* the radius is ours, so header/footer corners must be clipped to match */ overflow: hidden; } .ip-warm .card-body { padding: var(--ip-5); } .ip-warm .card-header, .ip-warm .card-footer { background: var(--ip-paper-100); border-color: var(--ip-rule); color: var(--ip-ink-700); padding: var(--ip-3) var(--ip-5); } .ip-warm .card-header strong { font-family: var(--ip-font-head); letter-spacing: -0.01em; } .ip-warm .alert { border: 1px solid var(--ip-rule); border-left: 3px solid var(--ip-ink-300); border-radius: var(--ip-r-surface); background: var(--ip-paper-200); color: var(--ip-ink-900); padding: var(--ip-3) var(--ip-4); font-size: var(--ip-fs-body); } .ip-warm .alert-success { background: var(--ip-green-100); border-left-color: var(--ip-green-600); } .ip-warm .alert-danger { background: var(--ip-red-100); border-left-color: var(--ip-red-600); } .ip-warm .alert-warning { background: var(--ip-amber-100); border-left-color: var(--ip-amber-600); } .ip-warm .alert-info { background: var(--ip-blue-100); border-left-color: var(--ip-blue-600); } .ip-warm .alert-light, .ip-warm .alert-secondary { background: var(--ip-paper-200); } .ip-warm .alert a { color: var(--ip-accent-600); } /* Bootstrap .badge.text-bg-* on the warm pages, mapped onto .ip-badge looks. */ .ip-warm .badge { display: inline-flex; align-items: center; gap: var(--ip-1); font-family: var(--ip-font-body); font-size: var(--ip-fs-label); font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 999px; border: 1px solid var(--ip-rule); background: var(--ip-paper-200) !important; color: var(--ip-ink-700) !important; } .ip-warm .badge.text-bg-success { background: var(--ip-green-100) !important; color: var(--ip-green-600) !important; border-color: color-mix(in srgb, var(--ip-green-600) 30%, transparent); } .ip-warm .badge.text-bg-danger { background: var(--ip-red-100) !important; color: var(--ip-red-600) !important; border-color: color-mix(in srgb, var(--ip-red-600) 30%, transparent); } .ip-warm .badge.text-bg-warning { background: var(--ip-amber-100) !important; color: var(--ip-amber-600) !important; border-color: color-mix(in srgb, var(--ip-amber-600) 30%, transparent); } .ip-warm .badge.text-bg-info { background: var(--ip-blue-100) !important; color: var(--ip-blue-600) !important; border-color: color-mix(in srgb, var(--ip-blue-600) 30%, transparent); } .ip-warm .badge.text-bg-primary { background: var(--ip-accent-soft) !important; color: var(--ip-accent-600) !important; border-color: var(--ip-accent-line); } .ip-warm .list-group { border-radius: var(--ip-r-tile); overflow: hidden; } .ip-warm .list-group-item { background: var(--ip-paper-50); border-color: var(--ip-rule); color: var(--ip-ink-900); padding: var(--ip-4); } .ip-warm .list-group-item-action:hover, .ip-warm .list-group-item-action:focus { background: var(--ip-paper-200); color: var(--ip-ink-900); } .ip-warm .progress { background: var(--ip-paper-300); border-radius: 999px; } .ip-warm .progress-bar { background: var(--ip-accent); color: var(--ip-accent-on); font-weight: 700; } .ip-warm .btn-success { --bs-btn-bg: var(--ip-green-600); --bs-btn-border-color: var(--ip-green-600); --bs-btn-color: var(--ip-paper-50); --bs-btn-hover-bg: color-mix(in srgb, var(--ip-green-600) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ip-green-600) 86%, #000); --bs-btn-hover-color: var(--ip-paper-50); --bs-btn-active-bg: color-mix(in srgb, var(--ip-green-600) 80%, #000); --bs-btn-active-color: var(--ip-paper-50); } .ip-warm .btn-danger { --bs-btn-bg: var(--ip-red-600); --bs-btn-border-color: var(--ip-red-600); --bs-btn-color: var(--ip-paper-50); --bs-btn-hover-bg: color-mix(in srgb, var(--ip-red-600) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ip-red-600) 86%, #000); --bs-btn-hover-color: var(--ip-paper-50); --bs-btn-active-bg: color-mix(in srgb, var(--ip-red-600) 80%, #000); --bs-btn-active-color: var(--ip-paper-50); } .ip-warm .text-danger { color: var(--ip-red-600) !important; } .ip-warm .text-success { color: var(--ip-green-600) !important; } .ip-warm .text-warning { color: var(--ip-amber-600) !important; } .ip-warm dl dt { color: var(--ip-ink-500); font-weight: 600; } .ip-warm dl dd { color: var(--ip-ink-900); } /* A centred standalone panel: offer signing, booking, video, thank-you pages. */ .ip-standalone { max-width: 58rem; margin-inline: auto; } .ip-standalone--narrow { max-width: 34rem; } .ip-standalone--wide { max-width: 72rem; } /* Public / token-link page header: brand lockup, title, one line of context. */ .ip-pubhead { border-bottom: 1px solid var(--ip-rule); background: var(--ip-paper-50); padding: var(--ip-4) 0; margin-bottom: var(--ip-6); } .ip-pubhead__inner { display: flex; align-items: center; gap: var(--ip-3); flex-wrap: wrap; } .ip-pubhead__logo { max-height: 40px; width: auto; border-radius: var(--ip-r-sm); } .ip-pubhead h1 { font-size: var(--ip-fs-h2); margin: 0; } .ip-pubhead p { margin: 0; color: var(--ip-ink-500); font-size: var(--ip-fs-sm); } .ip-pubfoot { border-top: 1px solid var(--ip-rule); margin-top: var(--ip-7); padding: var(--ip-5) 0; color: var(--ip-ink-500); font-size: var(--ip-fs-sm); } /* Big reassuring outcome mark (booked / submitted / expired). */ .ip-outcome { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto var(--ip-4); border-radius: 50%; font-size: 1.5rem; background: var(--ip-paper-200); border: 1px solid var(--ip-rule); color: var(--ip-ink-700); } .ip-outcome--success { background: var(--ip-green-100); border-color: transparent; color: var(--ip-green-600); } .ip-outcome--danger { background: var(--ip-red-100); border-color: transparent; color: var(--ip-red-600); } .ip-outcome--warning { background: var(--ip-amber-100); border-color: transparent; color: var(--ip-amber-600); } @media (min-width: 992px) { .ip-sticky-aside { position: sticky; top: var(--ip-4); } } /* Small-caps definition rows (offer summary, job facts). */ .ip-factlist { display: grid; gap: var(--ip-3); margin: 0; } .ip-factlist > div { display: grid; gap: 0.125rem; } .ip-factlist dt { font-size: var(--ip-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ip-tracking-label); color: var(--ip-ink-500); } .ip-factlist dd { margin: 0; font-weight: 600; color: var(--ip-ink-900); } /* --- B. Landing bento ---------------------------------------------------- */ .ip-lp-hero { display: grid; gap: var(--ip-5); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; } @media (max-width: 991.98px) { .ip-lp-hero { grid-template-columns: minmax(0, 1fr); } } .ip-lp-hero h1 { font-size: clamp(2.125rem, 5.4vw, 3.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin: 0 0 var(--ip-4); max-width: 22ch; } .ip-lp-hero h1 .accent { color: var(--ip-accent-600); } .ip-lp-hero .ip-lede { margin-bottom: var(--ip-5); max-width: 46ch; } .ip-lp-ctas { display: flex; flex-wrap: wrap; gap: var(--ip-3); } .ip-lp-ctas .btn { min-height: 46px; } /* "GST invoices · Data in India · WhatsApp updates" */ .ip-signals { display: flex; flex-wrap: wrap; gap: var(--ip-2) var(--ip-4); margin: var(--ip-5) 0 0; padding: 0; list-style: none; font-size: var(--ip-fs-sm); color: var(--ip-ink-500); } .ip-signals li { display: inline-flex; align-items: center; gap: var(--ip-2); } .ip-signals i { color: var(--ip-green-600); font-size: 0.875rem; } .ip-lp-side { display: grid; gap: var(--ip-3); align-content: start; } /* Price block — a lime tile. The tile re-points the ink ramp, so the numeral is ink-on-lime, never lime-on-lime. */ .ip-price { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ip-3); } .ip-price__amount { font-family: var(--ip-font-head); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ip-ink-900); } .ip-price__amount small { font-size: var(--ip-fs-body); font-weight: 700; letter-spacing: 0; } .ip-price__note { font-size: var(--ip-fs-sm); font-weight: 600; color: var(--ip-ink-700); margin: var(--ip-2) 0 0; } .ip-price__mark { font-size: 2rem; line-height: 1; opacity: .5; color: var(--ip-ink-900); } /* Live-looking pipeline preview tile. */ .ip-preview__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ip-2); margin-bottom: var(--ip-3); } .ip-preview__cols { display: grid; gap: var(--ip-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } .ip-preview__col { min-width: 0; } .ip-preview__coltitle { font-size: var(--ip-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ip-tracking-label); color: var(--ip-ink-500); padding-bottom: var(--ip-2); border-bottom: 1px solid var(--ip-rule); margin-bottom: var(--ip-2); } .ip-mini { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-md); padding: var(--ip-2) var(--ip-3); margin-bottom: var(--ip-2); min-width: 0; } .ip-mini__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ip-2); } .ip-mini__name { font-weight: 700; font-size: var(--ip-fs-sm); } .ip-mini__score { font-family: var(--ip-font-head); font-weight: 800; font-size: var(--ip-fs-sm); font-variant-numeric: tabular-nums; color: var(--ip-green-600); } .ip-mini__meta { color: var(--ip-ink-500); font-size: var(--ip-fs-label); } .ip-mini--soft { background: var(--ip-accent-soft); border-color: var(--ip-accent-line); } /* Trust logo strip — wordmarks, not images. */ .ip-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ip-4) var(--ip-7); } .ip-trust span { font-family: var(--ip-font-head); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ip-ink-300); } .ip-trust span:nth-child(2) { font-style: italic; letter-spacing: -0.01em; } .ip-trust span:last-child { border: 1px solid var(--ip-rule-strong); border-radius: 999px; padding: 0.25rem 0.875rem; font-size: var(--ip-fs-sm); } /* Three-step strip: numbered columns split by hairlines. */ .ip-steps { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-xl); background: var(--ip-paper-50); overflow: hidden; } .ip-steps > * { padding: var(--ip-5); border-left: 1px solid var(--ip-rule); min-width: 0; } .ip-steps > *:first-child { border-left: 0; } @media (max-width: 767.98px) { .ip-steps { grid-template-columns: minmax(0, 1fr); } .ip-steps > * { border-left: 0; border-top: 1px solid var(--ip-rule); padding: var(--ip-4); } .ip-steps > *:first-child { border-top: 0; } } .ip-warm .ip-plan { border-radius: var(--ip-r-xl); } .ip-plan__price .ip-plan__inr { font-variant-numeric: tabular-nums; } /* --- C. Candidate portal application cards ------------------------------- */ .ip-appcard { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-xl); box-shadow: var(--ip-shadow-card); padding: var(--ip-5); margin-bottom: var(--ip-4); min-width: 0; } .ip-appcard__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ip-2) var(--ip-3); } .ip-appcard__head > div { min-width: 0; flex: 1 1 16rem; } .ip-appcard__title { font-size: var(--ip-fs-h2); margin: 0 0 var(--ip-1); } .ip-appcard__meta { margin: 0; color: var(--ip-ink-500); font-size: var(--ip-fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ip-1); } .ip-appcard__meta i { font-size: 0.8125rem; margin-right: 0.2rem; } .ip-appcard__flow { margin-top: var(--ip-5); } .ip-appcard__foot { margin-top: var(--ip-5); padding-top: var(--ip-4); border-top: 1px solid var(--ip-rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ip-3); } .ip-appcard--closed { background: var(--ip-paper-100); box-shadow: none; } .ip-appcard--closed .ip-appcard__title { color: var(--ip-ink-500); } /* The one prominent action on the page: an assessment that is due. */ .ip-duecard { border-radius: var(--ip-r-xl); padding: var(--ip-5); margin-bottom: var(--ip-5); background: var(--ip-lime-block); border: 1px solid transparent; --ip-ink-900: #141210; --ip-ink-700: #221F1A; --ip-ink-500: #33302A; --ip-ink-300: #44403A; color: var(--ip-ink-900); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ip-4); } .ip-duecard h2 { font-size: var(--ip-fs-h1); margin: var(--ip-2) 0 var(--ip-1); color: var(--ip-ink-900); } .ip-duecard p { margin: 0; color: var(--ip-ink-700); font-size: var(--ip-fs-sm); } .ip-duecard__body { min-width: 0; flex: 1 1 20rem; } .ip-duecard__actions { display: flex; flex-wrap: wrap; gap: var(--ip-2); } .ip-duecard .ip-pill { background: rgba(255, 255, 255, .55); border-color: rgba(20, 18, 16, .18); color: var(--ip-ink-900); } .ip-duecard .ip-pill .dot { background: var(--ip-ink-900); } .ip-duecard .ip-signals { margin-top: var(--ip-3); color: var(--ip-ink-700); } .ip-duecard .ip-signals i { color: var(--ip-ink-700); } /* Interview-scheduled chip: solid ink, with the join link inside it. */ .ip-joinchip { display: inline-flex; align-items: center; gap: var(--ip-2); background: var(--ip-rail-bg); color: var(--ip-rail-fg); border-radius: 999px; padding: 0.4375rem 0.875rem; font-size: var(--ip-fs-sm); font-weight: 600; min-height: 40px; max-width: 100%; text-decoration: none; } a.ip-joinchip:hover { background: var(--ip-rail-raised); color: var(--ip-rail-fg); text-decoration: none; } .ip-joinchip i { color: var(--ip-accent); } .ip-joinchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Compact "recommended for you" rows. */ .ip-reco { display: grid; gap: var(--ip-2); } .ip-reco__row { display: flex; align-items: center; gap: var(--ip-3); padding: var(--ip-3) var(--ip-4); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-lg); background: var(--ip-paper-50); min-width: 0; } .ip-reco__row > div { min-width: 0; flex: 1 1 auto; } .ip-reco__title { font-weight: 700; display: block; } @media (max-width: 575.98px) { .ip-appcard { padding: var(--ip-4); border-radius: var(--ip-r-lg); } .ip-appcard__title { font-size: var(--ip-fs-h3); } .ip-appcard__foot { flex-direction: column; align-items: stretch; } .ip-appcard__foot > * { width: 100%; } .ip-duecard { padding: var(--ip-4); border-radius: var(--ip-r-lg); } .ip-duecard h2 { font-size: var(--ip-fs-h2); } .ip-duecard__actions, .ip-duecard__actions .btn { width: 100%; } .ip-joinchip { width: 100%; justify-content: center; } .ip-lp-ctas { flex-direction: column; align-items: stretch; } .ip-lp-ctas .btn { width: 100%; } .ip-preview__cols { grid-template-columns: minmax(0, 1fr); } .ip-trust { gap: var(--ip-3) var(--ip-5); } } /* --- D. Assessment taking, warm ----------------------------------------- */ /* Inside a container the bar reads as a card, not a half-width rule. */ .ip-warm .ip-exam-bar { top: var(--ip-3); background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-xl); box-shadow: var(--ip-shadow-pop); padding: var(--ip-4) var(--ip-5) 0; overflow: hidden; } .ip-warm .ip-exam-bar__row { padding-bottom: var(--ip-4); } .ip-warm .ip-exam-bar .ip-progress { margin: 0 calc(var(--ip-5) * -1); } .ip-warm .ip-timer { border-radius: 999px; padding: 0.3125rem 0.75rem; } .ip-warm .ip-progress { height: 4px; border-radius: 999px; overflow: hidden; } .ip-warm .ip-question { border-radius: var(--ip-r-xl); box-shadow: var(--ip-shadow-card); } .ip-warm .ip-question legend { font-size: 1.0625rem; } .ip-warm .ip-question__num { border-radius: 999px; width: 1.75rem; height: 1.75rem; background: var(--ip-accent-soft); border-color: var(--ip-accent-line); color: var(--ip-accent-600); margin-right: var(--ip-3); } .ip-warm .ip-option { padding: var(--ip-3) var(--ip-4); min-height: 48px; gap: var(--ip-3); align-items: center; border-radius: var(--ip-r-lg); } .ip-warm .ip-option input { margin-top: 0; } .ip-exam-bar__count { font-variant-numeric: tabular-nums; white-space: nowrap; } .ip-exam-bar + .ip-standalone { margin-top: var(--ip-6); } @media (max-width: 575.98px) { .ip-warm .ip-question { padding: var(--ip-4); } .ip-exam-bar__row { flex-wrap: wrap; } .ip-exam-bar__title h1 { font-size: 1rem; } } /* --- E. Careers public site --------------------------------------------- The careers shell sets --ip-brand from the site's own brand colour, so the accent (buttons, links, chips) follows the tenant's brand automatically. These classes keep the historical cx-* names the templates already use. */ .cx-hero { padding: var(--ip-7) 0; background: var(--ip-paper-200); border-bottom: 1px solid var(--ip-rule); position: relative; } .cx-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--ip-accent) 16%, transparent), transparent 62%); pointer-events: none; } .cx-hero > * { position: relative; } .cx-hero h1 { font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.035em; margin: 0; } .cx-hero__brand { display: inline-flex; align-items: center; gap: var(--ip-3); margin-bottom: var(--ip-4); text-decoration: none; font-family: var(--ip-font-head); font-weight: 700; color: var(--ip-ink-900); } .cx-hero__brand:hover { color: var(--ip-ink-900); text-decoration: none; } .cx-logo { max-height: 48px; width: auto; background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-md); padding: 0.25rem 0.5rem; } .cx-card { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-xl); box-shadow: var(--ip-shadow-card); transition: border-color .15s ease; } .cx-card:hover { border-color: var(--ip-accent); } .cx-muted { color: var(--ip-ink-500); } .cx-btn { background: var(--ip-accent); color: var(--ip-accent-on); border: 1px solid var(--ip-accent); font-weight: 600; } .cx-btn:hover, .cx-btn:focus { background: var(--ip-accent-600); border-color: var(--ip-accent-600); color: var(--ip-accent-on); filter: none; } .cx-chip { display: inline-flex; align-items: center; border: 1px solid var(--ip-rule); border-radius: 999px; padding: 0.125rem 0.625rem; font-size: var(--ip-fs-sm); color: var(--ip-ink-700); background: var(--ip-paper-100); } .cx-preview-flag { background: var(--ip-amber-100); color: var(--ip-amber-600); border-bottom: 1px solid color-mix(in srgb, var(--ip-amber-600) 40%, transparent); text-align: center; font-size: var(--ip-fs-sm); font-weight: 600; padding: var(--ip-2); } .cx-prose { max-width: 52rem; color: var(--ip-ink-700); } .cx-prose h2, .cx-prose h3 { margin-top: var(--ip-5); } .cx-prose ul, .cx-prose ol { padding-left: 1.25rem; } .cx-filters { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-xl); padding: var(--ip-4); } /* --- F. Video recording, warm ------------------------------------------- */ .vid-head { position: sticky; top: 0; z-index: 1020; background: var(--ip-paper-50); border-bottom: 1px solid var(--ip-rule); padding: var(--ip-3) 0; } .vid-stage { max-width: 44rem; margin: 0 auto; } .vid-preview { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ip-rail-bg); border-radius: var(--ip-r-xl); border: 1px solid var(--ip-rule); } .vid-placeholder { border: 1px dashed var(--ip-rule-strong); border-radius: var(--ip-r-xl); padding: var(--ip-6) var(--ip-4); background: var(--ip-paper-200); } .vid-timer { font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; font-size: 2.25rem; font-weight: 700; color: var(--ip-ink-900); } .vid-big { width: 100%; padding: var(--ip-4); font-size: 1.0625rem; border-radius: var(--ip-r-lg); min-height: 52px; } .vid-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; margin-right: .35rem; animation: vid-pulse 1s infinite; } @keyframes vid-pulse { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .vid-dot { animation: none; } } @media (max-width: 575.98px) { .vid-timer { font-size: 1.75rem; } } /* === Feature app screens (agent 3) ======================================= */ /* Billing, analytics, talent, video, clients, offers, careers settings, integrations, marketplace, partners, notifications and scheduling. Every rule below uses tokens declared in section 1 — no literal colours, no new token names. Nothing here re-defines a rule owned by another agent. */ /* -- Compact filter / action toolbar ------------------------------------- */ /* A form of filters that sits above a table. Fields keep their own labels in the small-caps label style; the bar itself is a hairline strip, not a card. */ .ip-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ip-3); padding: var(--ip-3) var(--ip-4); margin-bottom: var(--ip-4); background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); } .ip-toolbar__field { display: flex; flex-direction: column; gap: var(--ip-1); min-width: 0; flex: 1 1 10rem; } .ip-toolbar__field--grow { flex: 2 1 16rem; } .ip-toolbar__field--narrow { flex: 0 1 7.5rem; } .ip-toolbar__field > label { font-size: var(--ip-fs-label); font-weight: 600; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-500); margin: 0; } .ip-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--ip-2); margin-left: auto; } .ip-toolbar .form-control, .ip-toolbar .form-select { min-width: 0; width: 100%; } @media (max-width: 575.98px) { .ip-toolbar { padding: var(--ip-3); } .ip-toolbar__field, .ip-toolbar__field--grow, .ip-toolbar__field--narrow { flex: 1 1 100%; } .ip-toolbar__actions { margin-left: 0; width: 100%; } .ip-toolbar__actions .btn { flex: 1 1 auto; } } /* -- Usage meters (billing quotas, import progress) ---------------------- */ /* Set the fill with style="--pct:0..100". Bands: accent under 80, amber at 80+, red at 100. The bar is a hairline trough, never a rounded pill. */ .ip-meter-row { display: grid; gap: var(--ip-1); min-width: 0; } .ip-meter-row + .ip-meter-row { margin-top: var(--ip-4); } .ip-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ip-2); font-size: var(--ip-fs-sm); } .ip-meter__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .ip-meter__value { font-variant-numeric: tabular-nums; color: var(--ip-ink-500); white-space: nowrap; } .ip-meter { display: block; width: 100%; height: 6px; background: var(--ip-paper-300); border-radius: var(--ip-r-sm); overflow: hidden; } .ip-meter__fill { display: block; height: 100%; width: calc(var(--pct, 0) * 1%); max-width: 100%; background: var(--ip-accent); border-radius: inherit; transition: width .18s ease; } .ip-meter--warn .ip-meter__fill { background: var(--ip-amber-600); } .ip-meter--warn .ip-meter__value { color: var(--ip-amber-600); font-weight: 700; } .ip-meter--over .ip-meter__fill { background: var(--ip-red-600); } .ip-meter--over .ip-meter__value { color: var(--ip-red-600); font-weight: 700; } .ip-meter__note { font-size: var(--ip-fs-sm); color: var(--ip-ink-500); margin: 0; } .ip-meter--warn .ip-meter__note { color: var(--ip-amber-600); } .ip-meter--over .ip-meter__note { color: var(--ip-red-600); } .ip-meter-grid { display: grid; gap: var(--ip-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .ip-meter-grid .ip-meter-row + .ip-meter-row { margin-top: 0; } /* -- Key/value detail lists (profiles, offer terms, response meta) -------- */ .ip-kv { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr; margin: 0; font-size: var(--ip-fs-sm); } .ip-kv > dt { padding: var(--ip-2) var(--ip-3) var(--ip-2) 0; border-top: 1px solid var(--ip-rule); color: var(--ip-ink-500); font-weight: 600; } .ip-kv > dd { padding: var(--ip-2) 0; margin: 0; border-top: 1px solid var(--ip-rule); min-width: 0; overflow-wrap: anywhere; } .ip-kv > dt:first-child, .ip-kv > dt:first-child + dd { border-top: 0; } @media (max-width: 575.98px) { .ip-kv { grid-template-columns: 1fr; } .ip-kv > dd { border-top: 0; padding-top: 0; } } /* -- Hairline row lists (replaces Bootstrap list-group-flush) ------------ */ .ip-list { list-style: none; padding: 0; margin: 0; } .ip-list > li { display: flex; flex-wrap: wrap; gap: var(--ip-2); align-items: baseline; justify-content: space-between; padding: var(--ip-3) 0; border-top: 1px solid var(--ip-rule); min-width: 0; } .ip-list > li:first-child { border-top: 0; padding-top: 0; } .ip-list > li:last-child { padding-bottom: 0; } .ip-list__main { min-width: 0; flex: 1 1 12rem; } .ip-list__title { font-weight: 600; } .ip-list__meta { display: block; color: var(--ip-ink-500); font-size: var(--ip-fs-sm); } .ip-list__aside { flex: 0 0 auto; display: flex; gap: var(--ip-2); align-items: center; } /* -- Chip rows (skills, tags, event names) ------------------------------- */ .ip-chips { display: flex; flex-wrap: wrap; gap: var(--ip-1); align-items: center; min-width: 0; } /* -- Event timeline / audit trail ---------------------------------------- */ .ip-timeline { list-style: none; padding: 0; margin: 0; } .ip-timeline > li { position: relative; padding: 0 0 var(--ip-4) var(--ip-5); border-left: 1px solid var(--ip-rule); min-width: 0; } .ip-timeline > li:last-child { padding-bottom: 0; border-left-color: transparent; } .ip-timeline > li::before { content: ""; position: absolute; left: -4px; top: 0.4rem; width: 7px; height: 7px; border-radius: 50%; background: var(--ip-paper-50); border: 1px solid var(--ip-rule-strong); } .ip-timeline > li.is-done::before { background: var(--ip-green-600); border-color: var(--ip-green-600); } .ip-timeline > li.is-accent::before { background: var(--ip-accent); border-color: var(--ip-accent); } .ip-timeline__title { font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--ip-2); align-items: baseline; } .ip-timeline__when { color: var(--ip-ink-500); font-size: var(--ip-fs-sm); font-weight: 400; } .ip-timeline__body { color: var(--ip-ink-700); font-size: var(--ip-fs-sm); margin: var(--ip-1) 0 0; overflow-wrap: anywhere; } /* -- Two-pane split (video review: player beside transcript) ------------- */ .ip-split { display: grid; gap: var(--ip-4); align-items: start; } @media (min-width: 992px) { .ip-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } } .ip-split__media { min-width: 0; } .ip-split__media video { width: 100%; display: block; background: var(--ip-paper-300); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); } .ip-split__aside { min-width: 0; } .ip-transcript { max-height: 18rem; overflow-y: auto; font-size: var(--ip-fs-sm); color: var(--ip-ink-700); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-family: var(--ip-font-body); } /* -- Monospace panel for secrets, feeds and sample requests -------------- */ .ip-code { display: block; overflow-x: auto; padding: var(--ip-3); margin: 0; background: var(--ip-paper-200); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); font-family: var(--ip-font-mono); font-size: var(--ip-fs-sm); color: var(--ip-ink-700); line-height: 1.55; } .ip-code code { color: inherit; background: none; } .ip-code--wrap { white-space: pre-wrap; overflow-wrap: anywhere; } /* -- Sub-navigation pills (integrations, partners tabs) ------------------ */ .nav-pills { gap: var(--ip-1); border-bottom: 1px solid var(--ip-rule); padding-bottom: var(--ip-2); margin-bottom: var(--ip-5); flex-wrap: wrap; } .nav-pills .nav-link { border-radius: var(--ip-r-control); padding: 0.3125rem var(--ip-3); font-size: var(--ip-fs-sm); font-weight: 600; color: var(--ip-ink-500); } .nav-pills .nav-link:hover { background: var(--ip-paper-200); color: var(--ip-ink-900); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ip-accent-soft); color: var(--ip-accent-600); } /* -- Pagination ---------------------------------------------------------- */ .pagination { gap: var(--ip-1); flex-wrap: wrap; } .page-link { border: 1px solid var(--ip-rule); border-radius: var(--ip-r-control); background: var(--ip-paper-50); color: var(--ip-ink-700); font-size: var(--ip-fs-sm); font-weight: 600; padding: 0.25rem var(--ip-3); } .page-link:hover { background: var(--ip-paper-200); color: var(--ip-ink-900); border-color: var(--ip-rule-strong); } .page-item.disabled .page-link { background: transparent; color: var(--ip-ink-300); border-color: var(--ip-rule); } .page-item.active .page-link { background: var(--ip-accent); border-color: var(--ip-accent); color: var(--ip-accent-on); } /* -- Plan cards: the card grid around .ip-plan --------------------------- */ .ip-plan-grid { display: grid; gap: var(--ip-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: stretch; } .ip-plan-grid > .ip-plan { height: 100%; } .ip-plan__head { display: flex; flex-wrap: wrap; gap: var(--ip-2); align-items: center; } /* -- Segmented interval switch (monthly / yearly) ------------------------ */ .ip-switch { display: inline-flex; padding: 2px; gap: 2px; background: var(--ip-paper-200); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-control); } .ip-switch > a { padding: 0.1875rem var(--ip-3); border-radius: var(--ip-r-sm); font-size: var(--ip-fs-sm); font-weight: 600; color: var(--ip-ink-500); text-decoration: none; white-space: nowrap; } .ip-switch > a:hover { color: var(--ip-ink-900); } .ip-switch > a.is-active { background: var(--ip-paper-50); border: 1px solid var(--ip-rule-strong); padding: 0.125rem calc(var(--ip-3) - 1px); color: var(--ip-ink-900); } .ip-switch__note { font-weight: 400; color: var(--ip-ink-500); } /* -- Week grid (scheduling) --------------------------------------------- */ .ip-week { display: grid; gap: var(--ip-2); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 576px) { .ip-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ip-week__day { border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); background: var(--ip-paper-50); padding: var(--ip-2) var(--ip-3) var(--ip-3); min-width: 0; } .ip-week__day.is-today { border-color: var(--ip-accent); } .ip-week__date { display: flex; flex-wrap: wrap; gap: var(--ip-1); align-items: baseline; font-size: var(--ip-fs-label); font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-500); padding-bottom: var(--ip-2); border-bottom: 1px solid var(--ip-rule); margin-bottom: var(--ip-2); } .ip-week__day.is-today .ip-week__date { color: var(--ip-accent-600); } .ip-week__slot { border-left: 2px solid var(--ip-accent-line); padding-left: var(--ip-2); font-size: var(--ip-fs-sm); min-width: 0; overflow-wrap: anywhere; } .ip-week__slot + .ip-week__slot { margin-top: var(--ip-2); } .ip-week__slot strong { display: block; } .ip-week__none { font-size: var(--ip-fs-sm); color: var(--ip-ink-300); } /* -- Availability window chip with its inline remove control ------------- */ .ip-window { display: inline-flex; align-items: center; gap: var(--ip-1); padding: 0.125rem var(--ip-1) 0.125rem var(--ip-2); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-control); background: var(--ip-paper-50); font-size: var(--ip-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .ip-window form { margin: 0; display: inline-flex; } .ip-window button { border: 0; background: none; padding: 0 var(--ip-1); line-height: 1; color: var(--ip-ink-300); font-size: 0.875rem; cursor: pointer; } .ip-window button:hover { color: var(--ip-red-600); } /* -- Toggle cell in the notification channel matrix ---------------------- */ .ip-toggle-cell { text-align: center; } .ip-toggle { min-width: 3.25rem; border-radius: var(--ip-r-control); font-size: var(--ip-fs-label); font-weight: 700; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; padding: 0.1875rem var(--ip-2); border: 1px solid var(--ip-rule); background: var(--ip-paper-50); color: var(--ip-ink-500); } .ip-toggle:hover { border-color: var(--ip-rule-strong); color: var(--ip-ink-900); } .ip-toggle[aria-pressed="true"] { background: var(--ip-green-100); border-color: color-mix(in srgb, var(--ip-green-600) 40%, transparent); color: var(--ip-green-600); } /* -- Live preview frame (careers site, offer letter) --------------------- */ .ip-preview { border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); background: var(--ip-paper-50); padding: var(--ip-4); min-height: 6rem; overflow-x: auto; } .ip-preview > :last-child { margin-bottom: 0; } .ip-preview-frame { width: 100%; height: 32.5rem; border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); background: var(--ip-paper-50); display: block; } /* -- Analytics chrome ---------------------------------------------------- */ /* The dataviz palette (--series-*, --viz-text*, --viz-grid) is declared in analytics/_viz_style.html and is deliberately untouched: only the card, heading and empty-state chrome around the canvases is restyled here. */ .viz-card { background: var(--ip-paper-50); border: 1px solid var(--ip-rule); border-radius: var(--ip-r-surface); padding: var(--ip-4); height: 100%; min-width: 0; } .viz-card h2 { font-family: var(--ip-font-head); font-size: var(--ip-fs-h3); font-weight: 700; letter-spacing: var(--ip-tracking-head); margin: 0; } .viz-card__sub { color: var(--ip-ink-500); font-size: var(--ip-fs-sm); margin: var(--ip-1) 0 var(--ip-3); } .viz-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ip-3); } .viz-card__head > div { min-width: 0; } .viz-empty { color: var(--ip-ink-500); font-size: var(--ip-fs-sm); background: var(--ip-paper-200); border: 1px dashed var(--ip-rule-strong); border-radius: var(--ip-r-surface); padding: var(--ip-5) var(--ip-4); text-align: center; } .viz-kpi__label { font-size: var(--ip-fs-label); font-weight: 600; letter-spacing: var(--ip-tracking-label); text-transform: uppercase; color: var(--ip-ink-500); margin: 0 0 var(--ip-1); } .viz-kpi__value { font-family: var(--ip-font-head); font-size: 1.75rem; font-weight: 800; letter-spacing: var(--ip-tracking-head); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ip-ink-900); } .viz-canvas { position: relative; height: 260px; min-width: 0; } @media print { .ip-sidebar, .ip-topbar, .ip-page-head__actions, .ip-toolbar, .viz-noprint { display: none !important; } .ip-main { margin-left: 0 !important; } .ip-content { padding: 0 !important; max-width: none !important; } } /* Row-header cells: several feature tables use for the first column (analytics, notifications, availability). Agent 1's .ip-table styles only thead th and tbody td, so give the body's header cells the same box. */ .ip-table > tbody > tr > th { padding: var(--ip-3); border-bottom: 1px solid var(--ip-rule); font-family: var(--ip-font-body); font-size: var(--ip-fs-body); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ip-ink-900); text-align: left; vertical-align: middle; background: none; } .ip-table > tbody > tr:last-child > th { border-bottom: 0; } .ip-table > tbody > tr:hover > th { background: var(--ip-paper-200); } .viz-card > .ip-table-wrap { margin-top: var(--ip-1); } .ip-table > tbody > tr.is-warn > td, .ip-table > tbody > tr.is-warn > th { background: var(--ip-amber-100); } .ip-kv > dt code { overflow-wrap: anywhere; } .ip-section__head h3 { font-size: var(--ip-fs-h3); margin: 0; } /* A row rendered by an include rather than an

(scheduling interview_row). */ .ip-list__row { padding: var(--ip-3) 0; border-top: 1px solid var(--ip-rule); } .ip-list__row:first-of-type { border-top: 0; padding-top: 0; } /* Inline code: Bootstrap's default is a magenta that reads as a link on paper. */ :not(pre) > code { color: var(--ip-ink-700); background: none; } .alert :not(pre) > code, .ip-nav :not(pre) > code { color: inherit; } /* Colour inputs render as a full-width bar under .form-control; make them a swatch. */ input[type="color"].form-control { width: 3.5rem; min-width: 3.5rem; height: 2.25rem; padding: 0.1875rem; cursor: pointer; } /* Buttons appended to an input group: the faint accent rule disappears against the field's own border, so give the seam a full-strength edge. */ .input-group > .btn-outline-primary { --bs-btn-border-color: var(--ip-rule-strong); } .input-group > .btn-outline-primary:hover { --bs-btn-hover-border-color: var(--ip-accent); }