/* ========================================================================== DARK MODE STYLESHEET Load AFTER style.css. Toggle by adding/removing the "dark-only" class on (e.g. document.documentElement.classList.toggle('dark-only')). Persist the user's choice in localStorage and re-apply the class before paint (small inline script in ) to avoid a flash of light mode. ========================================================================== */ html.dark-only { /* ---------------- Core color overrides ---------------- */ --bs-primary: #41B9EA !important; --bs-primary-rgb: 65, 185, 234 !important; --bs-secondary: #9aa4af !important; --bs-success: #2fbf71 !important; --bs-info: #22d3ee !important; --bs-warning: #f0a63c !important; --bs-danger: #ef5464 !important; --bs-orange: #ff8a4d !important; --bs-green: #14a3a3 !important; --bs-sea-green: #52d8cf !important; --bs-brown: #a8814f !important; --bs-purple: #9169ff !important; --bs-pink: #ff66d1 !important; --bs-navyBlue: #6f8fe0 !important; --bs-darkblue: #e7ecf5 !important; /* used as an "accent/text" color a lot in light mode, flip to light */ --bs-whatsapp: #33e07a !important; --bs-timy: #f5983f !important; --bs-zkt: #8fdc55 !important; --bs-white: #10151d !important; /* inverted: "white" surfaces become dark surfaces */ --bs-wwhite: #161c26 !important; --bs-black: #f5f7fa !important; --bg-dark: #0b0e14 !important; --bs-yellow: #d9c34f !important; --bs-cyanblue: #3fd0ec !important; --bs-bg-light: #161c26 !important; /* Light variants become subtle tinted-dark surfaces */ --bs-primary-light: #1b2c36 !important; --bs-secondary-light: #232830 !important; --bs-success-light: #163527 !important; --bs-info-light: #123946 !important; --bs-warning-light: #3a2f16 !important; --bs-danger-light: #3a1c22 !important; --bs-orange-light: #3a2718 !important; --bs-green-light: #123534 !important; --bs-sea-green-light: #123634 !important; --bs-brown-light: #2c2418 !important; --bs-purple-light: #241c3a !important; --bs-pink-light: #3a1c33 !important; --bs-navyBlue-light: #1c2436 !important; --bs-darkblue-light: #232830 !important; --bs-whatsapp-light: #123522 !important; --bs-timy-light: #3a2c18 !important; --bs-zkt-light: #22301a !important; --bs-dark-light: #1a1f28 !important; --bs-yellow-light: #35301a !important; --bs-cyanblue-light: #12313a !important; /* Structural / semantic tokens */ --bs-link-color: #e7ecf5 !important; --bs-link-hover-color: var(--bs-primary) !important; --bs-hover-color: #1b2230 !important; --bs-active-color: #1b2230 !important; --bs-deactive-color: #2a1a1c !important; --bs-sub-text-color: #9aa4af !important; --bs-card-color: #9aa4af !important; --bs-text-light: #6b7482 !important; --bs-user-image: #16303c !important; --bs-border-color: #262c38 !important; --bs-btn-bg: var(--bs-primary) !important; --bs-btn-border-color: var(--bs-primary) !important; --bs-btn-hover-bg: var(--bs-primary) !important; --bs-btn-hover-border-color: var(--bs-primary) !important; --bs-btn-active-bg: var(--bs-primary) !important; --bs-btn-active-border-color: var(--bs-primary) !important; --bs-btn-disabled-bg: var(--bs-primary) !important; --bs-btn-disabled-border-color: var(--bs-primary) !important; --bs-grdnt-primary: linear-gradient(-10deg, #0b0e14 0%, #1c4a63 100%); --bs-grdnt-primary-light: linear-gradient(-10deg, rgba(11, 14, 20, 0.6) 0%, rgba(65, 185, 234, 0.35) 100%); color-scheme: dark; } /* ============================== Base ============================== */ html.dark-only body { background-color: #0b0e14 !important; color: #dfe4ea !important; } html.dark-only hr { border-top: 2px solid rgba(255, 255, 255, 0.12); } html.dark-only .card { background-color: #10151d !important; color: #dfe4ea !important; border-color: #232a36 !important; } html.dark-only .dropdown-menu { background-color: #10151d !important; color: #dfe4ea !important; border-color: #232a36 !important; } html.dark-only .dropdown-item { color: #dfe4ea !important; } html.dark-only .dropdown-item:hover, html.dark-only .dropdown-item:focus { background-color: #1b2230 !important; color: #fff !important; } /* ============================== Text ============================== */ html.dark-only .text-dark, html.dark-only .text-body { color: #e7ecf5 !important; } html.dark-only .text-muted, html.dark-only .sub-text-light { color: var(--bs-text-light) !important; } /* ============================== Buttons ============================== */ html.dark-only .btn-secondary-light { color: #e7ecf5 !important; } html.dark-only .btn-dark-light { background-color: var(--bs-dark-light) !important; color: #e7ecf5 !important; border-color: var(--bs-dark-light); } html.dark-only .btn-dark { background-color: #e7ecf5 !important; color: #10151d !important; border-color: #e7ecf5; } html.dark-only .btn-dark:hover { background-color: var(--bs-dark-light) !important; color: #e7ecf5 !important; } html.dark-only .btn-side-menu { color: #e7ecf5; border-color: #e7ecf5; } html.dark-only .btn-side-menu.active { background: #1b2c36 !important; color: #fff; } html.dark-only .btn-side-menu:before { background-color: #1b2230; } html.dark-only .btn-tab-pill { color: #e7ecf5; } html.dark-only .btn-tab-pill.active, html.dark-only .btn-tab-pill:hover, html.dark-only .btn-tab-pill:focus-visible { background-color: #1b2c36; color: #fff; border-color: #1b2c36; } html.dark-only .btn-transparent { border: 1px solid #232a36; color: #dfe4ea; } html.dark-only .btn-transparent:hover, html.dark-only .btn-transparent:active, html.dark-only .btn-transparent:focus-visible, html.dark-only .btn-transparent.show { background-color: #1b2230 !important; border: 1px solid #232a36; } html.dark-only .btn-outline-primary, html.dark-only .btn-outline-orange, html.dark-only .btn-outline-green, html.dark-only .btn-outline-brown, html.dark-only .btn-outline-pink, html.dark-only .btn-outline-navyBlue { --bs-btn-hover-color: #10151d; } html.dark-only .btn-outline-purple { --bs-btn-hover-color: #fff !important; } /* ============================== Forms ============================== */ html.dark-only .form-control, html.dark-only .form-select, html.dark-only .search-box input, html.dark-only .search-box select, html.dark-only .otp-input { background-color: #161c26 !important; color: #e7ecf5 !important; border-color: #262c38 !important; } html.dark-only .form-control::placeholder { color: #6b7482 !important; } html.dark-only .form-control:focus, html.dark-only .form-select:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px var(--bs-primary-light) !important; background-color: #161c26 !important; color: #e7ecf5 !important; } html.dark-only .form-check-label { color: #dfe4ea; } html.dark-only .search-box { background: #10151d !important; } html.dark-only .otp-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px var(--bs-primary-light); } html.dark-only .placeholder-input { background: #262c38 !important; } html.dark-only .shimmer { background-color: #1a2028 !important; } html.dark-only .shimmer::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); } /* ============================== Links / pills ============================== */ html.dark-only a .pill-link { color: #dfe4ea; border: 1px solid #262c38; } html.dark-only a .pill-link::after { background: #10151d; } html.dark-only .quick-tag { color: var(--bs-sub-text-color); background: #161c26; border: 1px solid #262c38; } html.dark-only .quick-tag:hover { color: var(--bs-primary); border-color: var(--bs-primary); background: var(--bs-primary-light); } html.dark-only .topic-pill { color: var(--bs-sub-text-color); background: #161c26; border: 1px solid #262c38; } html.dark-only .topic-pill:hover, html.dark-only .topic-pill.active { color: var(--bs-primary); border-color: var(--bs-primary); background: var(--bs-primary-light); } html.dark-only .active-chip { background: var(--bs-primary-light); color: var(--bs-primary); } /* ============================== Job listing / filter sidebar ============================== */ html.dark-only .filter-sidebar { background: #10151d; border: 1px solid #232a36; } html.dark-only .filter-sidebar .sidebar-hd, html.dark-only .filter-group { border-bottom: 1px solid #232a36; } html.dark-only .filter-count { color: var(--bs-sub-text-color); background: #161c26; } html.dark-only .form-select { border-color: #262c38; } html.dark-only .btn-view { background: transparent; border: 1px solid #262c38; color: var(--bs-sub-text-color); } html.dark-only .btn-view.active { background: var(--bs-primary); color: #10151d; border-color: var(--bs-primary); } html.dark-only .job-card { background: #10151d; border: 1px solid #232a36 !important; color: #dfe4ea; } html.dark-only .job-card:hover { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px var(--bs-primary-light) !important; color: #dfe4ea; } html.dark-only .job-card.featured { border-color: var(--bs-primary) !important; } html.dark-only .featured-badge { background: #4a5158; color: #fff; } html.dark-only .company-logo { border: 1px solid #262c38; color: #fff; } /* ============================== Dialog / Offcanvas ============================== */ html.dark-only dialog { background-color: #10151d !important; color: #dfe4ea; } html.dark-only dialog::backdrop { background: rgba(0, 0, 0, 0.65); } html.dark-only .offcanvas-backdrop { background-color: #00000030 !important; } html.dark-only .offcanvas.offcanvas-bottom { background-color: #10151d !important; box-shadow: -4px 0px 33px 0px #00000060; } html.dark-only .bottom-canvas, html.dark-only .end-canvas { color: #dfe4ea; } html.dark-only .bottom-canvas-header, html.dark-only .bottom-canvas-footer, html.dark-only .end-canvas-header, html.dark-only .end-canvas-footer { border-color: #232a36; } /* ============================== Contact / success states ============================== */ html.dark-only .success-circle { background: var(--bs-primary-light); color: var(--bs-primary); } html.dark-only .social-btn { background: var(--bs-primary-light); color: var(--bs-primary); } html.dark-only .social-btn:hover { background: var(--bs-primary); color: #10151d; } /* ============================== Scrollbars ============================== */ html.dark-only .scrollable::-webkit-scrollbar-track, html.dark-only .scrollable-sm::-webkit-scrollbar-track { background: #1b2230; } html.dark-only .scrollable::-webkit-scrollbar-thumb, html.dark-only .scrollable-sm::-webkit-scrollbar-thumb { background: var(--bs-primary); } html.dark-only .scrollable::-webkit-scrollbar-thumb:hover, html.dark-only .scrollable-sm::-webkit-scrollbar-thumb:hover { background: var(--bs-secondary); } html.dark-only .scrollable::-webkit-scrollbar-corner, html.dark-only .scrollable-sm::-webkit-scrollbar-corner { background: #10151d; } /* ============================== Misc ============================== */ html.dark-only .bg-wwhite { background-color: #10151d !important; } html.dark-only .bg-active { background: var(--bs-active-color); } html.dark-only .bg-deactive { background: var(--bs-deactive-color); } html.dark-only .bg-blur { background: rgba(15, 18, 24, 0.55) !important; } html.dark-only .blr-bg-white { background: rgba(16, 21, 29, 0.6); } html.dark-only .border-green { border-color: var(--bs-green) !important; } html.dark-only .border-warning { border-color: var(--bs-warning) !important; } html.dark-only button.border-dashed-primary { border: 1px dashed var(--bs-primary) !important; } html.dark-only .rating > label { color: #3a4150; } html.dark-only .liquid-track { background: #1a2028; border: 1px solid #262c38; } /* Sidebar (matches existing collapse rules, dark surfaces) */ html.dark-only .sideMenuTooltip { background-color: #10151d; color: #dfe4ea; box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 29px 0px; } /* Images that need to stay legible on dark backgrounds (logos, icons authored for light backgrounds) */ html.dark-only img.invert-on-dark { filter: invert(1) brightness(1.1); } html.dark-only .list-group { --bs-list-group-color: #ffffff !important; --bs-list-group-bg: var(--bs-white) !important; } html.dark-only .bg-white { --bs-bg-opacity: 1; background-color: var(--bs-white) !important; } html.dark-only .card.light-blue { background-color: rgb(238 243 255 / 10%) !important; } html.dark-only .card.light-green { background-color: rgb(237 251 242 / 10%) !important; } html.dark-only .card.light-purple { background-color: rgb(244 238 254 / 10%) !important; } html.dark-only .bg-dark { background-color: var(--bs-white) !important; color: unset !important; } html.dark-only .btn-close { --bs-btn-close-bg: none !important; } html.dark-only .table { --bs-table-color: var(--bs-black) !important; --bs-table-bg: transparent !important; } html.dark-only .bg-dark-light { background-color: var(--bs-dark-light) !important; color: var(--bs-black) !important; } html.dark-only .bg-light { --bs-bg-opacity: 1; background-color: transparent !important; } html.dark-only .bg-transparent { --bs-bg-opacity: 1; background-color: transparent !important; color: var(--bs-black) !important; border-color: var(--bs-secondary-light) !important; } html.dark-only .card.bg-transparent { background: transparent !important; } html.dark-only .ts-wrapper { --ts-bg: #212529; --ts-border: #495057; --ts-text: #f8f9fa; --ts-placeholder: #adb5bd; --ts-hover: #343a40; } html.dark-only .ts-control { background: var(--ts-bg); border-color: var(--ts-border); color: var(--ts-text); } html.dark-only .ts-control input { color: var(--ts-text); } html.dark-only .ts-control input::placeholder { color: var(--ts-placeholder); } html.dark-only .ts-dropdown { background: var(--ts-bg); border-color: var(--ts-border); color: var(--ts-text); } html.dark-only .ts-dropdown .option { color: var(--ts-text); } html.dark-only .ts-dropdown .option:hover, html.dark-only .ts-dropdown .option.active { background: var(--ts-hover); color: #fff; } html.dark-only .ts-control .item { background: var(--ts-hover); color: var(--ts-text); } html.dark-only .bg-darkblue.light { background-color: var(--bs-white) !important; } html.dark-only .offcanvas { color: var(--bs-black) !important; background-color: var(--bs-white) !important; } html.dark-only .bottom-nav .bottom-nav-item.center-item { color: var(--bs-white) !important; } html.dark-only .bottom-nav { background-color: var(--bs-white) !important; } html.dark-only .bottom-nav .bottom-nav-item { color: var(--bs-black) !important; } html.dark-only .offcanvas-xl { color: var(--bs-black) !important; background-color: var(--bs-white) !important; } @media (min-width: 1200px) { html.dark-only .offcanvas-xl { color: var(--bs-black) !important; background-color: transparent !important; } }