/* * GreatIfe Alumni — shared design tokens + component overrides. * Source of truth: the approved design mockup (greatife-design-direction.html). * Layered over Bootstrap 5.3 (kept for grid/utilities) and brand-colors.css * (kept for legacy references) — load this file LAST in so its rules win. * * Linked from all 3 shells (public, auth, dashboard/admin). * * Dark mode: dashboard/admin only, via :root[data-theme="dark"]. That attribute * is set by JS that only ever runs in includes/header.php's own script (see the * toggle in includes/footer.php) -- the public/auth shells never load it, so this * selector can never match there. Deliberately NOT a @media (prefers-color-scheme) * block, which would apply everywhere including the public site and break the * "public site is light-only, permanently" decision. */ @import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap'); :root { --bg: #ffffff; --surface: #f5f7fa; --surface-muted: #e9eef4; --border: #e1e6ed; --text: #122540; --text-muted: #5c6b80; --primary: #0e3a63; --primary-deep: #082741; --primary-tint: #e9eef4; --on-primary: #ffffff; --accent: #9c6f19; --accent-bright: #edbc54; --accent-tint: #fbf1dc; --on-accent: #0a1f36; --success: #2f7a4f; --success-tint: #e3f2e9; --warning: #a86a17; --warning-tint: #f8ecd9; --danger: #b3392c; --danger-tint: #f8e3e0; --radius-sm: 2px; --radius-md: 4px; --shadow: 0 1px 2px rgba(18, 37, 64, 0.06); --font-display: 'Zilla Slab', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Bootstrap's own --bs-primary/--bs-info were never overridden, so every .text-primary/.bg-primary/.border-primary/.text-info/.bg-info utility class site-wide (used throughout admin/dashboard pages, not just pages this engagement has rebuilt) was still rendering Bootstrap's stock bright blue (#0d6efd) and cyan (#0dcaf0) -- exactly the "sky blue" showing up in places like the contact page's sidebar icons. Overriding both here fixes it everywhere at once instead of patching every individual .text-primary usage across dozens of files. --bs-info remapped to a neutral slate instead of another blue, since "no sky blue or a shade of it anywhere" ruled out just picking a different blue. Dark-mode's own --primary (a deliberately lighter blue, for contrast on dark backgrounds) is left untouched -- that's a functional necessity, not stray Bootstrap default. */ --bs-primary: var(--primary); --bs-primary-rgb: 14, 58, 99; --bs-info: #5c6b80; --bs-info-rgb: 92, 107, 128; } :root[data-theme="dark"] { --bg: #12141d; --surface: #1a1d29; --surface-muted: #232735; --border: #323649; --text: #e8eaf2; --text-muted: #9199b3; --primary: #5b9bd8; --primary-deep: #7fb2e6; --primary-tint: #1b2e48; --on-primary: #0a1f36; --accent: #edbc54; --accent-bright: #edbc54; --accent-tint: #fbf1dc; --on-accent: #241a03; --success: #6fd196; --success-tint: #16301f; --warning: #f0b95f; --warning-tint: #332510; --danger: #f08a7c; --danger-tint: #361d18; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --bs-primary: var(--primary); --bs-primary-rgb: 91, 155, 216; --bs-info: #9199b3; --bs-info-rgb: 145, 153, 179; } /* ---------- Base ---------- */ body { font-family: var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); text-wrap: balance; } a { color: var(--primary); } a:hover { color: var(--primary-deep); } /* ---------- Buttons ---------- Navy carries structure and primary actions; gold is reserved for small, deliberate accents — not the default action color. */ .btn { border-radius: var(--radius-sm); font-weight: 600; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .btn-primary:hover, .btn-primary:focus { background: var(--primary-deep); border-color: var(--primary-deep); color: var(--on-primary); transform: none; box-shadow: none; } .btn-outline-primary { background: transparent; border-color: var(--primary); color: var(--primary); } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); } .btn-secondary { background: var(--surface-muted); border-color: var(--border); color: var(--text); } .btn-secondary:hover, .btn-secondary:focus { background: var(--border); border-color: var(--border); color: var(--text); transform: none; box-shadow: none; } .btn-accent { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--on-accent); } .btn-accent:hover, .btn-accent:focus { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: none; box-shadow: none; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); } .card:hover { transform: none; } .card-header { background: var(--surface-muted); border-bottom: 1px solid var(--border); color: var(--text); } /* ---------- Alerts ---------- */ .alert { border-radius: var(--radius-sm); border: 1px solid transparent; } .alert-success { background: var(--success-tint); border-color: var(--success); color: var(--success); } .alert-warning { background: var(--warning-tint); border-color: var(--warning); color: var(--warning); } .alert-danger { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); } .alert-info { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); } /* ---------- Badges ---------- */ .badge-primary { background: var(--primary); color: var(--on-primary); } .badge-secondary { background: var(--surface-muted); color: var(--text); } .badge-accent { background: var(--accent-tint); color: var(--on-accent); } /* ---------- Forms ---------- */ .form-label { font-weight: 600; font-size: 13px; color: var(--text); } .form-control, .form-select, .input-group-text { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-tint); } .form-text { color: var(--text-muted); } /* Native site-wide — see includes/footer.php and includes/public-footer.php) restyled onto the design tokens. Default theme's classes are overridden directly here rather than loading the separate select2-bootstrap-5-theme package. ---------- */ .select2-container--default .select2-selection--single { height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 7px 12px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.4; padding: 0; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); font-weight: 500; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 8px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-muted) transparent transparent transparent; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--text-muted) transparent; } .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--primary); } .select2-container--default .select2-selection--multiple { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-height: 38px; padding: 3px 6px; } .select2-container--default.select2-container--open .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--primary); } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--primary-tint); border: none; border-radius: 6px; color: var(--primary); font-size: 12.5px; font-weight: 600; padding: 3px 8px; margin: 3px 4px 3px 0; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--primary); margin-right: 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--primary-deep); } .select2-dropdown { border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(23,28,44,0.16); overflow: hidden; } .select2-search--dropdown { padding: 8px; } .select2-search--dropdown .select2-search__field { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; } .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--primary); } .select2-results__option { font-size: 13.5px; padding: 8px 12px; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--surface-muted); color: var(--text); } .select2-container--default .select2-results__option[aria-selected=true] { background: var(--primary-tint); color: var(--primary); font-weight: 700; }