/* ============================================================================ theme.css - Light modernization pass over the default Bootstrap 5 look. Loaded AFTER site.css (which vendors in raw Bootstrap source plus a handful of old custom rules) and Security_Access8.styles.css, so these rules win the cascade without having to hunt through an 11,000+ line vendored file. Scope: refine spacing/typography/color/shadows/radius on the existing Bootstrap 5 components already used everywhere (cards, buttons, badges, tables, forms, nav) - NOT a redesign. Operational color meanings (green Check In, amber Check Out, badge colors per visit type) are left alone on purpose - staff scan these by color at the gate, changing them would hurt more than the visual refresh helps. Mobile/tablet-first: gate staff are assumed to be on a phone or tablet as often as a desktop, so touch target sizing and table readability on narrow screens get real weight here, not just desktop polish. ============================================================================ */ :root { /* Core palette - a deeper, more confident blue than Bootstrap's stock #0d6efd, paired with a cool neutral gray page background instead of stark white so cards/tables have visual separation without needing a border on every single one. */ --sga-navy: #10243D; --sga-primary: #1B4B73; --sga-primary-hover: #163C5C; --sga-primary-soft: #E8F0F7; --sga-accent: #0E9384; --sga-bg: #F3F5F8; --sga-surface: #FFFFFF; --sga-text: #1F2937; --sga-text-muted: #64748B; --sga-border: #E2E8F0; --sga-border-strong: #CBD5E1; --sga-radius-sm: 8px; --sga-radius: 12px; --sga-radius-lg: 16px; --sga-shadow-sm: 0 1px 2px rgba(16, 36, 61, 0.06), 0 1px 3px rgba(16, 36, 61, 0.06); --sga-shadow: 0 2px 8px rgba(16, 36, 61, 0.08), 0 1px 3px rgba(16, 36, 61, 0.06); --sga-shadow-md: 0 8px 24px rgba(16, 36, 61, 0.10); /* Minimum comfortable touch target per WCAG/Apple/Material guidance. */ --sga-touch-target: 44px; } /* FIX: site.css defines its own --bs-primary/--bs-primary-rgb at :root as a teal (#0d98ba) - that's what every Bootstrap utility class built on the CSS variable (.bg-primary, .text-primary, .border-primary) actually reads, completely separately from the .btn-primary/.btn-outline-primary overrides below (those are older, fully hardcoded-hex Bootstrap component CSS, not variable-based - see the comment on those rules). Without this, .btn-primary buttons would show the new navy while .bg-primary cards/badges (Reports dashboard stat cards, Visitor balance cards) kept showing the old teal - two different "primary" colors on the same page. Overriding the variable here makes every var-based Bootstrap component pick up the new navy automatically, on top of (not instead of) the hardcoded-component overrides further down. */ :root { --bs-primary: #1B4B73; --bs-primary-rgb: 27, 75, 115; } /* ---------------------------------------------------------------------------- Base / typography -------------------------------------------------------------------------- */ body { background-color: var(--sga-bg); color: var(--sga-text); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--sga-navy); font-weight: 700; letter-spacing: -0.01em; } /* FIX: a heading inside a dark/colored section (e.g. the marketing home page's bg-dark "Let's Get In Touch!" section) normally gets its white color only by INHERITING it from the ancestor's .text-white/.bg-dark/.bg-primary class - it has no .text-white of its own. Inheritance is the weakest way to get a value in CSS, so the plain `h2 { color: ... }` rule above was winning over it, turning the heading near-invisible (dark navy text on a near-black background). This resets color back to `inherit` specifically for headings inside any of these known colored containers, so they fall back to whatever the container itself specifies (white, in all current cases) instead of the navy default. Any heading that already carries its own explicit text-white class (most of them, e.g. the masthead h1) was never affected - a class selector always beats a plain element selector regardless of source order, so this is only a safety net for the ones that don't. */ .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white .h1, .text-white .h2, .text-white .h3, .text-white .h4, .text-white .h5, .text-white .h6, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark .h1, .bg-dark .h2, .bg-dark .h3, .bg-dark .h4, .bg-dark .h5, .bg-dark .h6, .bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6, .bg-primary .h1, .bg-primary .h2, .bg-primary .h3, .bg-primary .h4, .bg-primary .h5, .bg-primary .h6, .bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6, .bg-success .h1, .bg-success .h2, .bg-success .h3, .bg-success .h4, .bg-success .h5, .bg-success .h6, .bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6, .bg-danger .h1, .bg-danger .h2, .bg-danger .h3, .bg-danger .h4, .bg-danger .h5, .bg-danger .h6, .bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5, .bg-secondary h6, .bg-secondary .h1, .bg-secondary .h2, .bg-secondary .h3, .bg-secondary .h4, .bg-secondary .h5, .bg-secondary .h6, /* Bootstrap's own colored buttons (.btn-primary etc.) set white text via their own component rule, not a .text-white utility class someone would remember to add - the stat-card-btn pattern on the Reports dashboard IS a