/* ============================================================ Marilao Admin — brand token layer for the Bootstrap/Sneat pages ============================================================ WHY THIS FILE EXISTS The 7 EMS/employer_*.php pages inline their own and load sneat's vendor/css/core.css directly. They never see EMS/partials/page_head.php, and therefore never load assets/css/tr-design.css. Loading the full tr-design.css there would drop its global reset on top of Bootstrap's reboot and reflow those pages, so instead they load this: the same brand scale plus a narrow Bootstrap bridge, and nothing else. The --mrl-* block below is duplicated verbatim from assets/css/tr-design.css. Keep the two in sync. Load order on employer pages: AFTER vendor/css/core.css. ============================================================ */ :root { --mrl-brand-50: #fff1f6; --mrl-brand-100: #ffe4ed; --mrl-brand-200: #fecbdd; --mrl-brand-300: #fd9cbc; --mrl-brand-400: #fb6598; --mrl-brand-500: #fb2f78; --mrl-brand-600: #fc186e; --mrl-brand-700: #d70f5b; --mrl-brand-800: #ac1049; --mrl-brand-900: #8d1140; --mrl-brand-rgb: 252, 24, 110; --mrl-surface: #ffffff; --mrl-surface-muted: #f8fafc; --mrl-border: #e2e8f0; --mrl-border-strong: #cbd5e1; --mrl-page-bg: #f1f5f9; --mrl-text: #0f172a; --mrl-text-muted: #64748b; --mrl-text-subtle: #94a3b8; --mrl-radius: 8px; --mrl-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ── Bootstrap 5 bridge ── Only re-colours; no layout, no reset. data-bs-* behaviour untouched. */ :root { --bs-primary: #fc186e; --bs-primary-rgb: 252, 24, 110; --bs-link-color: #fc186e; --bs-link-hover-color: #d70f5b; --bs-body-font-family: var(--mrl-font); --bs-body-color: var(--mrl-text); --bs-body-bg: var(--mrl-page-bg); --bs-border-radius: var(--mrl-radius); } .btn-primary { --bs-btn-bg: var(--mrl-brand-600); --bs-btn-border-color: var(--mrl-brand-600); --bs-btn-hover-bg: var(--mrl-brand-700); --bs-btn-hover-border-color: var(--mrl-brand-700); --bs-btn-active-bg: var(--mrl-brand-800); --bs-btn-active-border-color: var(--mrl-brand-800); --bs-btn-disabled-bg: var(--mrl-brand-300); --bs-btn-disabled-border-color: var(--mrl-brand-300); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-focus-shadow-rgb: var(--mrl-brand-rgb); } .btn-outline-primary { --bs-btn-color: var(--mrl-brand-700); --bs-btn-border-color: var(--mrl-brand-600); --bs-btn-hover-bg: var(--mrl-brand-600); --bs-btn-hover-border-color: var(--mrl-brand-600); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--mrl-brand-700); --bs-btn-active-border-color: var(--mrl-brand-700); --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: var(--mrl-brand-rgb); } .bg-primary { background-color: var(--mrl-brand-600) !important; } .text-primary { color: var(--mrl-brand-700) !important; } .border-primary { border-color: var(--mrl-brand-600) !important; } .bg-label-primary { background-color: var(--mrl-brand-50) !important; color: var(--mrl-brand-700) !important; } .badge.bg-primary { background-color: var(--mrl-brand-600) !important; } .form-control:focus, .form-select:focus { border-color: var(--mrl-brand-400); box-shadow: 0 0 0 0.2rem rgba(var(--mrl-brand-rgb), 0.18); } .form-check-input:checked { background-color: var(--mrl-brand-600); border-color: var(--mrl-brand-600); } .form-check-input:focus { border-color: var(--mrl-brand-400); box-shadow: 0 0 0 0.2rem rgba(var(--mrl-brand-rgb), 0.18); } a { color: var(--mrl-brand-600); } a:hover { color: var(--mrl-brand-700); } ::selection { background: var(--mrl-brand-200); color: var(--mrl-text); } /* ── Employer portal chrome ── The employer pages carry a small self-contained stylesheet using --d6-* names inherited from the d6 branch. Those declarations live in each page's inline