/* ================================================================ NewEdgePolicy — Brand Colour Override Logo refresh: May 2026 ------------------------------------------------------------------ Logo blue : #1E52B8 (shield left half + "NewEdge" wordmark) Logo green : #2D8A2D (shield right half + "Policy" wordmark) ------------------------------------------------------------------ Place this AFTER style.css in every page . Zero changes to style.css — easy to revert. ================================================================ */ /* ── 1. CSS custom properties ──────────────────────────────── */ :root { --nep-blue: #1E52B8; --nep-blue-dark: #163EA0; --nep-blue-light: #2A60CB; --nep-blue-pale: #EBF0FB; --nep-green: #2D8A2D; --nep-green-dark: #226622; --nep-green-pale: #EBF5EB; /* Bootstrap 5 primary token override */ --bs-primary: #1E52B8; --bs-primary-rgb: 30, 82, 184; --bs-link-color: #1E52B8; --bs-link-hover-color: #163EA0; } /* ── 2. Background & text utilities ────────────────────────── */ .bg-primary { background-color: var(--nep-blue) !important; } .text-primary { color: var(--nep-blue) !important; } .border-primary { border-color: var(--nep-blue) !important; } .border-start.border-4 { border-color: var(--nep-blue) !important; } /* ── 3. Buttons ─────────────────────────────────────────────── */ .btn-primary { background-color: var(--nep-blue); border-color: var(--nep-blue); color: #fff; } .btn-primary:hover, .btn-primary:focus { background-color: var(--nep-blue-dark); border-color: var(--nep-blue-dark); color: #fff; } .btn-primary:active, .btn-primary.active, .btn-primary:focus-visible { background-color: var(--nep-blue-dark) !important; border-color: var(--nep-blue-dark) !important; box-shadow: 0 0 0 0.25rem rgba(30, 82, 184, 0.35) !important; } .btn-outline-primary { color: var(--nep-blue); border-color: var(--nep-blue); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--nep-blue); border-color: var(--nep-blue); color: #fff; } .btn-outline-primary:active, .btn-outline-primary.active { background-color: var(--nep-blue-dark) !important; border-color: var(--nep-blue-dark) !important; } /* ── 4. Navbar active / hover ───────────────────────────────── */ .nav-link.active, .nav-item .nav-link.active { color: var(--nep-blue) !important; } .nav-link:hover { color: var(--nep-blue-light) !important; } .dropdown-item.active, .dropdown-item:active { background-color: var(--nep-blue); color: #fff; } .dropdown-item:hover { color: var(--nep-blue); } /* ── 5. Badges ──────────────────────────────────────────────── */ .badge.bg-primary { background-color: var(--nep-blue) !important; } .badge.bg-success { background-color: var(--nep-green) !important; } /* ── 6. Table headings ──────────────────────────────────────── */ .table-primary { background-color: var(--nep-blue-pale); } thead.table-primary th, .table-primary > thead > tr > th { background-color: var(--nep-blue) !important; color: #fff !important; } /* ── 7. Accordion (FAQ pages) ───────────────────────────────── */ .accordion-button:not(.collapsed) { color: var(--nep-blue); background-color: var(--nep-blue-pale); } .accordion-button:focus { border-color: rgba(30, 82, 184, 0.3); box-shadow: 0 0 0 0.25rem rgba(30, 82, 184, 0.15); } /* ── 8. Form controls ───────────────────────────────────────── */ .form-control:focus, .form-select:focus { border-color: var(--nep-blue); box-shadow: 0 0 0 0.2rem rgba(30, 82, 184, 0.15); } /* ── 9. Links ───────────────────────────────────────────────── */ a { color: var(--nep-blue); } a:hover { color: var(--nep-blue-dark); } /* Keep white footer links white */ .footer a, .footer .btn-link, .copyright a { color: rgba(255,255,255,0.7); } .footer a:hover, .footer .btn-link:hover { color: #fff; } /* ── 10. Progress bar / spinner ─────────────────────────────── */ .progress-bar { background-color: var(--nep-blue); } .spinner-border.text-primary { color: var(--nep-blue) !important; } /* ── 11. Back-to-top button ─────────────────────────────────── */ .back-to-top { background-color: var(--nep-blue) !important; border-color: var(--nep-blue) !important; } .back-to-top:hover { background-color: var(--nep-blue-dark) !important; } /* ── 12. Retirement plan page brand accents ─────────────────── */ .ret-step-active, .ret-progress-fill { background-color: var(--nep-blue) !important; } .ret-step-active { border-color: var(--nep-blue) !important; } /* ── 13. Green accent (secondary brand colour) ──────────────── */ /* Used on claim-settlement ratio badges, success states, etc. */ .bg-success { background-color: var(--nep-green) !important; } .text-success { color: var(--nep-green) !important; } .border-success { border-color: var(--nep-green) !important; } .badge.bg-success.bg-opacity-10 { background-color: var(--nep-green-pale) !important; color: var(--nep-green) !important; border-color: var(--nep-green) !important; } /* ── 14. FAQ filter button active state ─────────────────────── */ .faq-filter-btn.active { background-color: var(--nep-blue) !important; border-color: var(--nep-blue) !important; color: #fff !important; }