/*! * KeptSafe — Bootstrap 5.3 theme (v4) * Load AFTER bootstrap.min.css. Fonts: Manrope (headings) + Inter (body) from Google Fonts. * Light is the default; dark mode via . */ :root, [data-bs-theme="light"] { /* ---- Brand tokens ---- */ --ks-ink: #16263F; /* primary */ --ks-ink-600: #24406B; /* hover / secondary brand */ --ks-ink-300: #8FB0E8; /* primary on dark surfaces */ --ks-ember: #F07B2C; /* accent: fills behind dark text only */ --ks-ember-700: #C2410C; /* ember as text on white (5.2:1) */ --ks-mist: #EEF2F8; /* tinted surface */ --ks-charcoal: #1D2127; /* body text */ --ks-slate: #5C6570; /* muted text (5.9:1 on white) */ --ks-line: #E1E4E8; /* ---- Compliance status (reserved: never used for branding) ---- */ --ks-pass: #237A36; --ks-critical: #C92A2A; --ks-noncritical: #E8A200; /* use dark text on it */ --ks-nonconformance: #6741D9; --ks-untested: #6B7280; /* ---- Bootstrap mapping ---- */ --bs-primary: var(--ks-ink); --bs-primary-rgb: 22, 38, 63; --bs-primary-text-emphasis: var(--ks-ink); --bs-primary-bg-subtle: var(--ks-mist); --bs-primary-border-subtle: #C9D4E6; --bs-success: var(--ks-pass); --bs-success-rgb: 35, 122, 54; --bs-danger: var(--ks-critical); --bs-danger-rgb: 201, 42, 42; --bs-warning: var(--ks-noncritical); --bs-warning-rgb: 232, 162, 0; --bs-secondary-color: var(--ks-slate); --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-body-color: var(--ks-charcoal); --bs-body-bg: #FFFFFF; --bs-tertiary-bg: #F4F5F7; --bs-border-color: var(--ks-line); --bs-border-radius: .5rem; --bs-border-radius-lg: .75rem; --bs-link-color: var(--ks-ink-600); --bs-link-color-rgb: 36, 64, 107; --bs-link-hover-color: var(--ks-ink); --bs-link-hover-color-rgb: 22, 38, 63; --bs-focus-ring-color: rgba(240, 123, 44, .45); /* ember focus ring: visible on navy and white */ --bs-heading-color: var(--ks-ink); } [data-bs-theme="dark"] { --bs-primary: var(--ks-ink-300); --bs-primary-rgb: 143, 176, 232; --bs-primary-text-emphasis: var(--ks-ink-300); --bs-primary-bg-subtle: #1B2D4A; --bs-primary-border-subtle: #2C4470; --bs-body-color: #E6EAF0; --bs-body-bg: #0E1726; --bs-tertiary-bg: #131F33; --bs-secondary-bg: #172238; --bs-border-color: #26344D; --bs-secondary-color: #9AA5B4; --bs-link-color: var(--ks-ink-300); --bs-link-color-rgb: 143, 176, 232; --bs-link-hover-color: #B9CDF0; --bs-heading-color: #F2F4F8; --ks-mist: #131F33; } /* ---- Typography ---- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: "Manrope", "Inter", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; } /* ---- Buttons ---- */ .btn-primary { --bs-btn-bg: var(--ks-ink); --bs-btn-border-color: var(--ks-ink); --bs-btn-hover-bg: var(--ks-ink-600); --bs-btn-hover-border-color: var(--ks-ink-600); --bs-btn-active-bg: #0F1B2E; --bs-btn-active-border-color: #0F1B2E; --bs-btn-disabled-bg: var(--ks-ink); --bs-btn-disabled-border-color: var(--ks-ink); --bs-btn-focus-shadow-rgb: 240, 123, 44; } [data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0E1726; --bs-btn-bg: var(--ks-ink-300); --bs-btn-border-color: var(--ks-ink-300); --bs-btn-hover-color: #0E1726; --bs-btn-hover-bg: #B9CDF0; --bs-btn-hover-border-color: #B9CDF0; --bs-btn-active-color: #0E1726; --bs-btn-active-bg: #B9CDF0; } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-focus-shadow-rgb: 240, 123, 44; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-color: #0E1726; --bs-btn-active-color: #0E1726; } /* Accent: one per screen, for the main "send / go" moment */ .btn-accent { --bs-btn-color: var(--ks-charcoal); --bs-btn-bg: var(--ks-ember); --bs-btn-border-color: var(--ks-ember); --bs-btn-hover-color: var(--ks-charcoal); --bs-btn-hover-bg: #F39150; --bs-btn-hover-border-color: #F39150; --bs-btn-active-color: var(--ks-charcoal); --bs-btn-active-bg: #E06A1B; --bs-btn-active-border-color: #E06A1B; --bs-btn-focus-shadow-rgb: 22, 38, 63; --bs-btn-font-weight: 600; } /* ---- Components ---- */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ks-ember); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); } .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); } [data-bs-theme="dark"] .nav-pills { --bs-nav-pills-link-active-color: #0E1726; } .pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); } .progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); } .navbar-ks { background: var(--ks-ink); --bs-navbar-color: rgba(255,255,255,.8); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-brand-color: #fff; } [data-bs-theme="dark"] .navbar-ks { background: #0A1220; border-bottom: 1px solid var(--bs-border-color); } [data-bs-theme="dark"] .card { --bs-card-bg: #131F33; } [data-bs-theme="dark"] .list-group { --bs-list-group-bg: transparent; } .bg-mist { background-color: var(--ks-mist) !important; } .text-ember { color: var(--ks-ember-700) !important; } [data-bs-theme="dark"] .text-ember { color: var(--ks-ember) !important; } /* ---- Compliance status badges (always pair colour with a text label) ---- */ .badge-status { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; font-size: .75em; padding: .35em .7em; border-radius: 999px; color: #fff; } .badge-status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; opacity: .85; } .badge-status.pass { background: var(--ks-pass); } .badge-status.critical { background: var(--ks-critical); } .badge-status.noncritical { background: var(--ks-noncritical); color: var(--ks-charcoal); } .badge-status.nonconformance { background: var(--ks-nonconformance); } .badge-status.untested { background: var(--ks-untested); } /* ---- Lists: active item uses brand Ink (Bootstrap default is blue) ---- */ .list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); } [data-bs-theme="dark"] .list-group { --bs-list-group-active-color: #0E1726; } /* ---- Tables placed edge-to-edge in a card line up with the card's padding (card-body, card-header, tabs) ---- */ .card > .table-responsive > .table > :not(caption) > * > :first-child, .card > .table > :not(caption) > * > :first-child { padding-left: var(--bs-card-spacer-x, 1rem); } .card > .table-responsive > .table > :not(caption) > * > :last-child, .card > .table > :not(caption) > * > :last-child { padding-right: var(--bs-card-spacer-x, 1rem); } /* ---- Workflow status badges (quotes, jobs, POs, invoices) ---- Tinted pill + icon + label. Deliberately different from the SOLID compliance status badges above, so a workflow state can never be mistaken for a defect. All text pairs >= 5.9:1 (light) / 7.2:1 (dark). */ .qs { display: inline-flex; align-items: center; gap: .35em; padding: .3em .75em; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; } .qs .bi { font-size: .95em; line-height: 1; } .qs-draft { background: #F1F3F5; color: #495057; border-color: #DEE2E6; } .qs-awaiting { background: #FFF3BF; color: #6B4E00; border-color: #FFD43B; } .qs-sent { background: #E7F0FF; color: #1B4B9B; border-color: #B6CCF5; } .qs-viewed { background: #E3F6F5; color: #0B5F5C; border-color: #9FDCD7; } .qs-approved { background: #E6F4EA; color: #1D5E2B; border-color: #B7DFC0; } .qs-declined { background: #F3ECE8; color: #6B3E26; border-color: #DCC9BE; } .qs-expired { background: #FFFFFF; color: #5C6570; border: 1px dashed #ADB5BD; } .qs-revised { background: #FFEFE3; color: #8F3A0A; border-color: #F7C29B; } [data-bs-theme="dark"] .qs-draft { background: #2A3140; color: #D0D5DD; border-color: #3A4458; } [data-bs-theme="dark"] .qs-awaiting { background: #3D3410; color: #FFE58A; border-color: #6B5A14; } [data-bs-theme="dark"] .qs-sent { background: #1B2E52; color: #B6CCF5; border-color: #2C4470; } [data-bs-theme="dark"] .qs-viewed { background: #123B3A; color: #9FE3DE; border-color: #1E5856; } [data-bs-theme="dark"] .qs-approved { background: #163A22; color: #A9DDB5; border-color: #245A34; } [data-bs-theme="dark"] .qs-declined { background: #3A2A22; color: #E6C8B8; border-color: #5A4034; } [data-bs-theme="dark"] .qs-expired { background: transparent; color: #9AA5B4; border-color: #4A5568; } [data-bs-theme="dark"] .qs-revised { background: #40260F; color: #FFC9A3; border-color: #6B3F1A; } /* ---- Count bubbles (tabs, nav items) ---- */ .count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .4rem; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; background: var(--bs-secondary-bg); color: var(--bs-body-color); } .count[hidden] { display: none !important; } .count-attention { background: #FFF3BF; color: #6B4E00; } .nav-pills .nav-link { display: inline-flex; align-items: center; gap: .45rem; } .nav-pills .nav-link.active .count { background: #fff; color: var(--ks-ink); } [data-bs-theme="dark"] .nav-pills .nav-link.active .count { background: #0E1726; color: var(--ks-ink-300); }