/* === Bootstrap v4.6 Primary Color Override for #420978 === */ /* Core brand color */ :root { --primary: #420978; --primary-hover: #350760; /* Slightly darker for hover states */ --primary-active: #2a0548; /* Deeper shade for active states */ --primary-disabled: #7a4ca4; /* Lighter for disabled */ } /* Buttons */ .btn-primary { color: #fff; background-color: var(--primary); border-color: var(--primary); } .btn-primary:hover { color: #fff; background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:focus, .btn-primary.focus { color: #fff; background-color: var(--primary-hover); border-color: var(--primary-hover); box-shadow: 0 0 0 0.2rem rgba(66, 9, 120, 0.5); } .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: var(--primary-active); border-color: var(--primary-active); } .btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: var(--primary-disabled); border-color: var(--primary-disabled); } /* Links marked as .text-primary or .btn-link.btn-primary */ a.text-primary, .text-primary { color: var(--primary) !important; } a.text-primary:hover, .text-primary:hover { color: var(--primary-hover) !important; } /* Background utility classes */ .bg-primary { background-color: var(--primary) !important; } /* Border utilities */ .border-primary { border-color: var(--primary) !important; } /* Badges */ .badge-primary { color: #fff; background-color: var(--primary); } /* Alerts */ .alert-primary { color: #fff; background-color: var(--primary); border-color: var(--primary-active); } /* Pagination */ .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); } .page-link { color: var(--primary); } .page-link:hover { color: var(--primary-hover); } /* Progress bars */ .progress-bar.bg-primary { background-color: var(--primary) !important; } /* List groups */ .list-group-item-primary { color: #fff; background-color: var(--primary); } /* Tables */ .table-primary, .table-primary > th, .table-primary > td { background-color: rgba(66, 9, 120, 0.15); } /* Custom form controls focus ring */ .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--primary); background-color: var(--primary); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(66, 9, 120, 0.25); }