/** * Checkie Sign-in System - Shared Design Tokens * * Canonical values for the whole frontend, as documented in VISUAL_AUDIT.md * and STYLE_GUIDE.md. Loaded by partials/all/header.php and by pages that * build their own . Section stylesheets reference these instead of * hard-coding colours, radii and shadows. * * @copyright 2026 Checkie Ltd */ :root { /* Brand */ --ck-purple: #411640; --ck-purple-light: #5a1f59; --ck-purple-lighter: #6b2869; --ck-purple-border: #8a4088; --ck-purple-tint: rgba(65, 22, 64, 0.04); --ck-gold: #dcb933; --ck-gold-hover: #c4a52d; /* hover on light backgrounds */ --ck-gold-bright: #ffdc57; /* hover on dark backgrounds */ --ck-accent: #9f1ae2; --ck-accent-hover: #8716c0; --ck-accent-active: #7f15b5; /* Semantic states (Bootstrap 5 palette) */ --ck-success: #198754; --ck-success-hover: #157347; --ck-danger: #dc3545; --ck-danger-hover: #bb2d3b; --ck-warning: #ffc107; --ck-warning-hover: #ffca2c; --ck-info: #0dcaf0; --ck-orange: #fd7e14; /* Person-type chips */ --ck-staff: #0b5ed7; --ck-visitor: #157347; --ck-student: #ffca2c; /* Icon/indicator states */ --ck-state-on: #00cf00; --ck-state-off: #989898; /* Neutral surfaces & text */ --ck-surface: #f5f5f5; --ck-surface-header: #ededed; --ck-surface-plain: #f4f4f4; --ck-border-light: #e9ecef; --ck-border-input: #ced4da; --ck-border-table: #ddd; --ck-text-muted: #6c757d; --ck-text-empty: #888; /* Dark-mode surfaces & text */ --ck-dark-surface: #212529; --ck-dark-panel: #393939; --ck-dark-input: #171717; --ck-dark-border: #5f5f5f; --ck-dark-border-strong: #555; --ck-dark-text-muted: #adb5bd; --ck-dark-placeholder: #9d9d9d; /* Typography */ --ck-font: 'Quicksand', sans-serif; /* Radii */ --ck-radius-sm: 0.35rem; /* buttons, inputs, chips, general controls */ --ck-radius-md: 0.5rem; /* modals, previews */ --ck-radius-lg: 12px; /* stat/insight cards, settings panels */ --ck-radius-xl: 16px; /* login card */ --ck-radius-pill: 999px; /* pills, badges */ /* Elevation */ --ck-shadow-rest: 0 6px 14px rgba(0, 0, 0, 0.12); --ck-shadow-raised: 0 12px 26px rgba(0, 0, 0, 0.18); --ck-shadow-pressed: inset 0 4px 8px rgba(0, 0, 0, 0.18); --ck-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.15); --ck-shadow-card-dark: 0 4px 24px rgba(0, 0, 0, 0.35); --ck-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.25); --ck-shadow-menu: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Focus */ --ck-focus-ring: 0 0 0 3px rgba(159, 26, 226, 0.35); } /* * Keyboard focus indicator. The app suppresses the default outlines and * Bootstrap focus shadows for pointer users; :focus-visible restores a * visible ring for keyboard navigation only. */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--ck-focus-ring) !important; } /* Shared utility classes for inline-style extraction */ .ck-pointer { cursor: pointer; } .ck-link-dark { color: #000; } .ck-link-light { color: #fff; } .ck-fw-semibold { font-weight: 600; } .loader-logo { max-width: 320px; position: fixed; left: calc(50% - 160px); top: 100px; } .loader-spinner-pos { position: fixed; left: calc(50% - 33px); top: 225px; } .loader-unavailable-pos { position: fixed; left: calc(50% - 127px); top: 225px; } .loader-link-white { color: #fff; } .loader-center-pos { position: relative; top: 225px; margin: auto; text-align: center; } .camera-viewfinder { margin-top: 15px; border-radius: 1.25rem; } .camera-viewfinder-backdrop { margin-top: 15px; max-width: 100%; border-radius: 1.25rem; } .ck-hidden { display: none; } /* * Deliberate override of Bootstrap's .modal-header/.modal-footer * display:flex; wins only because this sheet loads after * bootstrap.min.css (see VISUAL_AUDIT.md D-M2 before reworking). */ .ck-d-block { display: block; } .ck-inline-block { display: inline-block; } .ck-float-right { float: right; } .ck-float-left { float: left; } .ck-text-center { text-align: center; } .ck-text-gold { color: var(--ck-gold); } .ck-text-red { color: red; } .ck-text-sm { font-size: 0.8rem; } .ck-fs-12r { font-size: 1.2rem; } .ck-fs-16 { font-size: 16px; } .ck-m-auto { margin: auto; } .ck-td-middle { vertical-align: middle; } .ck-opacity-full { opacity: 1; } .ck-maxw-200 { max-width: 200px; } .ck-maxw-320 { max-width: 320px; } .ck-no-underline { text-decoration: none; } .ck-no-bullet { list-style-type: none; } .ck-bg-black { background-color: #000; } .ck-bg-purple { background-color: var(--ck-purple); } .ck-link-plain-bold { color: #000; text-decoration: none; font-weight: bold; } .loader-alert-icon { margin-top: .5rem; } .loader-error-pos { position: fixed; left: calc(50% - 26px); top: 225px; } .support-need-label { font-weight: bold; margin-bottom: 1rem; } .support-qr { width: 200px; height: 200px; background-color: #fff; margin: 10px; } .support-modal-scroll { max-height: 83vh; overflow-y: auto; } .support-needs-title { margin-top: 30px; font-weight: bold; font-size: 1.2rem; } .support-contact-note { margin-top: 40px; font-size: 1rem; } .support-bluesky-logo { max-height: 36px; margin-bottom: 10px; } .ck-list-tight-top { margin: 6px 0 0 0; } .ck-mt-5px { margin-top: 5px; } .global-notification-title { text-align: center; } /* * Deliberate override of Bootstrap's .card-body padding (1rem); ties on * specificity, wins because this sheet loads after bootstrap.min.css. */ .global-notification-body { padding: 1rem 2rem; } /* * Deliberate override of Bootstrap's .form-check padding-left; ties on * specificity, wins because this sheet loads after bootstrap.min.css. */ .photo-admin-tile { padding-left: 0px; margin-left: 1rem; } .photo-admin-thumb { cursor: pointer; padding: 5px; max-width: 120px; max-height: 100px; background-image: url(https://assets.checkie.org/assets/img/logobg.webp); border-radius: 0.35em; }