/** * 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; }