/* ScoutKeeper theme layer. * * Everything here is expressed through Bootstrap's own CSS custom properties, so * both light and dark follow automatically from `data-bs-theme` on . * Do not add literal colours — the brand placeholder below is the only one. */ :root { --sk-brand: #2e7d32; /* placeholder green; replace with ScoutKeeper brand colour */ --sk-space-1: .25rem; --sk-space-2: .5rem; --sk-space-3: 1rem; --sk-rail-width: 15rem; } .navbar-brand { color: var(--sk-brand); } /* --- Dimension rail ------------------------------------------------------ */ .sk-rail { position: sticky; top: var(--sk-space-3); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden; } .sk-rail-item { border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--bs-border-color); text-align: left; padding: var(--sk-space-2) .75rem; } .sk-rail-item:last-child { border-bottom: 0; } .sk-rail-item.active { border-left-color: currentColor; } .sk-rail-progress { height: .25rem; } /* --- Criterion cards ----------------------------------------------------- */ .sk-criterion { border-color: var(--bs-border-color); } .sk-criterion:focus-within { border-color: var(--bs-primary-border-subtle); } .sk-anchor { border-left: 2px solid var(--bs-border-color); padding-left: .75rem; } /* Keep focus rings visible for keyboard users on our custom controls. */ .sk-rail-item:focus-visible, .sk-criterion :focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: 2px; } @media (max-width: 991.98px) { .sk-rail { position: static; } } /* --- Evidence upload dropzone ------------------------------------------- */ .sk-dropzone { border: 2px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .sk-dropzone:hover { border-color: var(--bs-primary-border-subtle); background-color: var(--bs-tertiary-bg); } .sk-dropzone-active { border-color: var(--bs-primary); background-color: var(--bs-primary-bg-subtle); } /* ========================================================================= * Accessibility (2026-09-21): WCAG 2.2 AA contrast in BOTH themes, a visible * focus outline, readable minimum sizes, and an opt-in "Larger text" mode. * Checked with axe-core at 1366x768 and 200% zoom. * ========================================================================= */ /* 1. Muted text. Bootstrap's .text-secondary is a fixed mid grey, which is * 3.3:1 on the dark background. Use the theme-aware muted colour instead * (light ~6.9:1, dark ~9:1). */ .text-secondary { color: var(--bs-secondary-color) !important; } /* Brand name: darker green on light, lighter green on dark. */ [data-bs-theme="dark"] { --sk-brand: var(--bs-success-text-emphasis); } /* 3. Dark theme: status colours and outline buttons use the lighter * "emphasis" shades so they reach 4.5:1 on the dark background. */ [data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; } [data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; } [data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; } [data-bs-theme="dark"] .text-warning-emphasis { color: var(--bs-warning-text-emphasis) !important; } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--bs-gray-400); --bs-btn-border-color: var(--bs-gray-500); } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary-text-emphasis); } [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-border-color: var(--bs-danger-text-emphasis); } [data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-border-color: var(--bs-success-text-emphasis); } [data-bs-theme="dark"] .btn-link { --bs-btn-color: var(--bs-primary-text-emphasis); } [data-bs-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand) { color: var(--bs-primary-text-emphasis); } /* 2. Selected dimension in the rail: everything white on the blue, and the * "MNC unmet" note becomes a white pill with dark red text. */ .sk-rail-item.active .text-secondary, .sk-rail-item.active .small { color: var(--bs-white) !important; } .sk-rail-item.active .sk-mnc-unmet { display: inline-block; background: var(--bs-white); color: var(--bs-red) !important; border-radius: 1rem; padding: 0 .5rem; font-weight: 600; } /* 4. Form controls: borders at 3:1 or better, and one clear focus outline. */ .form-control, .form-select, .form-check-input { border-color: var(--bs-secondary); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-check-input { border-color: var(--bs-gray-500); } :focus-visible, .form-control:focus, .form-select:focus, .btn:focus-visible, .sk-rail-item:focus-visible, .sk-criterion :focus-visible { outline: 3px solid var(--bs-primary-text-emphasis) !important; outline-offset: 2px; box-shadow: none !important; } /* 7. Size floor: badges never below 13px (Bootstrap's .75em is 12px). */ .badge { font-size: .8125rem; } /* 6. "Larger text" mode (toggle in the top bar, remembered per browser). * 18px base; "small" text, small buttons and small fields all full size; * bigger click targets. */ html.sk-large { font-size: 112.5%; } html.sk-large .small, html.sk-large small { font-size: 1em; } html.sk-large .badge { font-size: .875rem; padding: .4em .65em; } html.sk-large .btn-sm, html.sk-large .btn-group-sm > .btn { --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: 1rem; min-height: 2.75rem; } html.sk-large .form-control-sm, html.sk-large .form-select-sm { font-size: 1rem; min-height: 2.75rem; padding-top: .45rem; padding-bottom: .45rem; } html.sk-large .table-sm > :not(caption) > * > * { padding: .5rem .5rem; } html.sk-large .sk-rail-item { padding: .75rem 1rem; } /* 8. Narrow screens (and high zoom): the rail becomes a drop-down so the * criteria start at the top of the page. */ .sk-rail-select { display: none; } @media (max-width: 991.98px) { .sk-rail-select { display: block; } #dimension-rail { display: none; } } /* 10. Collapsed assessor review: a one-line summary until opened. */ .sk-review-summary { cursor: pointer; } /* 11. Floating "back to top" / "next criterion" controls. */ .sk-jump { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; display: none; flex-direction: column; gap: .5rem; } .sk-jump.show { display: flex; } .sk-jump .btn { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); } /* Muted text on a light badge stays dark in both themes (the badge is light). */ .text-bg-light.text-secondary { color: var(--bs-gray-700) !important; }