/* ============================================================ Global "Sun-shine" Orange Button Theme Applies the brand orange (matches the Withdraw page Submit button) to every regular action button across the site. Loaded AFTER Bootstrap so it wins the cascade. Buttons that DO NOT change (kept for safety / clarity): - .btn-danger / .btn-outline-danger (delete / reject) - .btn-secondary / .btn-outline-secondary (cancel / neutral) - .adm-logout-btn (admin sign-out) - .close (modal × close) - .page-link / .pagination .btn (pagination chips) - .badge / .label (status pills, never buttons) - .dropdown-toggle (menu/select chevron toggles) - .btn-link (inline anchor-style buttons) - .navbar-toggler (mobile hamburger) ============================================================ */ :root { --bot-orange-1: #ffb347; /* light/top of gradient (sun-shine) */ --bot-orange-2: #ff7800; /* brand mid */ --bot-orange-3: #e85d00; /* hover/active darker */ --bot-orange-4: #b94600; /* deep press */ --bot-orange-text: #1a1208; --bot-orange-glow: 0 4px 14px rgba(255, 120, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35); --bot-orange-glow-hover: 0 6px 18px rgba(255, 120, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .45); } /* The orange theme — applied to every button + .btn unless excluded. We use a class-level selector list rather than a bare `button` selector so we don't accidentally restyle close/menu/etc. */ .btn:not(.dropdown-toggle):not(.btn-link):not(.close):not(.page-link):not(.navbar-toggler):not(.adm-logout-btn):not(.btn-secondary):not(.btn-outline-secondary), button.btn:not(.dropdown-toggle):not(.btn-link):not(.close):not(.page-link):not(.navbar-toggler):not(.adm-logout-btn):not(.btn-secondary):not(.btn-outline-secondary), input[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary), input[type="button"]:not(.btn-secondary):not(.btn-outline-secondary), input[type="reset"]:not(.btn-secondary):not(.btn-outline-secondary), button[type="submit"]:not(.adm-logout-btn):not(.close):not(.navbar-toggler):not(.dropdown-toggle):not(.page-link):not(.btn-link):not(.btn-secondary):not(.btn-outline-secondary), button[type="button"].submitBtnss { background-image: linear-gradient(180deg, var(--bot-orange-1) 0%, var(--bot-orange-2) 55%, var(--bot-orange-3) 100%) !important; background-color: var(--bot-orange-2) !important; border: 1px solid var(--bot-orange-3) !important; color: var(--bot-orange-text) !important; font-weight: 600 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); box-shadow: var(--bot-orange-glow) !important; transition: filter .15s ease, transform .05s ease, box-shadow .15s ease, background-image .15s ease !important; } .btn:not(.dropdown-toggle):not(.btn-link):not(.close):not(.page-link):not(.navbar-toggler):not(.adm-logout-btn):not(.btn-secondary):not(.btn-outline-secondary):hover, button.btn:not(.dropdown-toggle):not(.btn-link):not(.close):not(.page-link):not(.navbar-toggler):not(.adm-logout-btn):not(.btn-secondary):not(.btn-outline-secondary):hover, input[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary):hover, input[type="button"]:not(.btn-secondary):not(.btn-outline-secondary):hover, input[type="reset"]:not(.btn-secondary):not(.btn-outline-secondary):hover, button[type="submit"]:not(.adm-logout-btn):not(.close):not(.navbar-toggler):not(.dropdown-toggle):not(.page-link):not(.btn-link):not(.btn-secondary):not(.btn-outline-secondary):hover, button[type="button"].submitBtnss:hover { background-image: linear-gradient(180deg, #ffc066 0%, var(--bot-orange-3) 55%, var(--bot-orange-4) 100%) !important; color: var(--bot-orange-text) !important; box-shadow: var(--bot-orange-glow-hover) !important; filter: brightness(1.04); text-decoration: none; } .btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):not(.btn-outline-secondary):not(.adm-logout-btn):not(.close):not(.page-link):not(.dropdown-toggle):not(.btn-link):not(.navbar-toggler):focus, .btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):not(.btn-outline-secondary):not(.adm-logout-btn):not(.close):not(.page-link):not(.dropdown-toggle):not(.btn-link):not(.navbar-toggler).focus, button.btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):not(.btn-outline-secondary):not(.adm-logout-btn):not(.close):not(.page-link):not(.dropdown-toggle):not(.btn-link):not(.navbar-toggler):focus, input[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):focus, input[type="button"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):focus, input[type="reset"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):focus { outline: none !important; box-shadow: var(--bot-orange-glow-hover), 0 0 0 3px rgba(255, 120, 0, .25) !important; } .btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):not(.btn-outline-secondary):not(.adm-logout-btn):not(.close):not(.page-link):not(.dropdown-toggle):not(.btn-link):not(.navbar-toggler):active, .btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):not(.btn-outline-secondary):not(.adm-logout-btn):not(.close):not(.page-link):not(.dropdown-toggle):not(.btn-link):not(.navbar-toggler).active, button.btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):not(.btn-outline-secondary):not(.adm-logout-btn):not(.close):not(.page-link):not(.dropdown-toggle):not(.btn-link):not(.navbar-toggler):active, input[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):active, input[type="button"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):active, input[type="reset"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):active { transform: translateY(1px); background-image: linear-gradient(180deg, var(--bot-orange-3) 0%, var(--bot-orange-4) 100%) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25) !important; } /* Disabled — keep visibly inert, not full-strength orange */ .btn:disabled, .btn.disabled, button.btn:disabled, button.btn.disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, button:disabled { background-image: none !important; background-color: #6b6157 !important; border-color: #514a44 !important; color: #d6cfc8 !important; box-shadow: none !important; cursor: not-allowed !important; opacity: .65 !important; filter: grayscale(.4); } /* ─────────── EXCEPTIONS — destructive / semantic kept original ─────────── */ /* DANGER — delete, reject, block, etc. */ .btn-danger, button.btn-danger, .btn-outline-danger, button.btn-outline-danger { background-image: linear-gradient(180deg, #ff6b6b 0%, #e5392b 100%) !important; background-color: #e5392b !important; border: 1px solid #b91c1c !important; color: #fff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); box-shadow: 0 4px 12px rgba(229, 57, 43, .35), inset 0 1px 0 rgba(255, 255, 255, .3) !important; } .btn-danger:hover, button.btn-danger:hover, .btn-outline-danger:hover, button.btn-outline-danger:hover { background-image: linear-gradient(180deg, #ff8585 0%, #c0271b 100%) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(229, 57, 43, .5), inset 0 1px 0 rgba(255, 255, 255, .35) !important; } /* The admin sidebar "Sign Out" button has its own bespoke style — leave it. */ .adm-logout-btn { background-image: none !important; background-color: rgba(255, 70, 50, 0.10) !important; border: 1px solid rgba(255, 70, 50, 0.25) !important; color: #ff8070 !important; box-shadow: none !important; text-shadow: none !important; font-weight: 500 !important; } .adm-logout-btn:hover { background-image: none !important; background-color: rgba(255, 70, 50, 0.20) !important; color: #fff !important; border-color: rgba(255, 70, 50, 0.5) !important; box-shadow: none !important; } /* Modal × close button — Bootstrap 4 ".close" — keep neutral */ button.close, .close { background-image: none !important; background-color: transparent !important; border: none !important; color: inherit !important; box-shadow: none !important; text-shadow: none !important; font-weight: 700 !important; } button.close:hover, .close:hover { background: transparent !important; box-shadow: none !important; filter: brightness(1.2); } /* Bootstrap pagination chips — not action buttons */ .pagination .page-link, .page-link { background-image: none !important; background-color: #121826 !important; border: 1px solid #334155 !important; color: #94a3b8 !important; box-shadow: none !important; text-shadow: none !important; font-weight: 500 !important; } .pagination .page-link:hover, .page-link:hover { background-image: none !important; background-color: #1e293b !important; color: #fff !important; border-color: #475569 !important; box-shadow: none !important; } .pagination .page-item.active .page-link, .page-item.active .page-link { background-image: linear-gradient(180deg, var(--bot-orange-1) 0%, var(--bot-orange-2) 100%) !important; background-color: var(--bot-orange-2) !important; border-color: var(--bot-orange-3) !important; color: var(--bot-orange-text) !important; font-weight: 700 !important; } /* Bootstrap navbar toggler — not an action button */ button.navbar-toggler { background-image: none !important; background-color: transparent !important; border: 1px solid rgba(255, 255, 255, .15) !important; color: inherit !important; box-shadow: none !important; text-shadow: none !important; }