/* ============================================================ Avian Careers — Theme layer (loaded after ui-refresh.css) 1) Light-mode polish: cards, tables, chips, pagination. 2) Full dark mode driven by html[data-theme="dark"]: re-points the ui-refresh tokens, then patches every hardcoded surface (bootstrap + per-view styles). The toggle lives in the header; the pre-paint script in sets data-theme before CSS applies (no flash). ============================================================ */ /* --------------------------------------------------------- Shared semantic tokens (both themes read these) --------------------------------------------------------- */ :root { --panel: #ffffff; /* card / panel surface */ --panel-2: #f7f8fa; /* inset surface (code samples, table heads) */ --panel-border: var(--hairline); --chip-bg: #eef2f7; --chip-text: #334155; --row-hover: #f4f8fd; --row-stripe: #f8fafc; --you-row: #fff8e1; /* "your row" highlight in standings */ --amber-bg: #fff7ed; --amber-border: #fed7aa; --amber-text: #9a3412; --code-bg: #f6f8fa; --code-border: #e1e4e8; color-scheme: light; } /* --------------------------------------------------------- LIGHT POLISH — modern panels (kills the 2010 gray boxes) --------------------------------------------------------- */ .job-detail { background: var(--panel) !important; border: 1px solid var(--panel-border) !important; border-bottom: 1px solid var(--panel-border) !important; /* kill 3px blue bar */ border-radius: var(--r-lg) !important; box-shadow: var(--shadow-1); } .job-detail-left, .blog-listing-left { background: var(--panel) !important; border: 1px solid var(--panel-border) !important; border-radius: var(--r-lg) !important; } /* Tables — hairline rows, quiet header, hover highlight */ .table { color: var(--body); } .table th, .table td { border-color: var(--hairline-2) !important; vertical-align: middle; } .table thead th { border-bottom: 1px solid var(--hairline) !important; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .table-striped tbody tr:nth-of-type(odd) { background: var(--row-stripe); } .job-detail .table-hover tbody tr:hover, .job-detail .table tbody tr:hover { background: var(--row-hover); } /* Label chips (BS3 classes still in markup; BS4 dropped them) */ .label { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; background: var(--chip-bg); color: var(--chip-text); } .label-default { background: var(--chip-bg); color: var(--chip-text); } .label-info { background: #e0f2fe; color: #075985; } .label-success { background: #dcfce7; color: #166534; } .label-warning { background: #fef3c7; color: #92400e; } .label-danger { background: #fee2e2; color: #991b1b; } /* Pagination — quiet chips, accent active (was blue-on-blue) */ .pagination { gap: 4px; flex-wrap: wrap; } .pagination li a { background: var(--panel) !important; color: var(--body) !important; border: 1px solid var(--panel-border) !important; border-radius: var(--r-md) !important; padding: 6px 12px !important; font-weight: 600 !important; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .pagination li a:hover { background: var(--accent-tint) !important; color: var(--accent-700) !important; border-color: var(--accent-tint-2) !important; } .pagination li.active a { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } /* btn-default (BS3 class, unstyled under BS4) — neutral outline button */ .btn-default { background: var(--panel); color: var(--ink); border: 1px solid var(--panel-border); border-radius: var(--r-md); font-weight: 600; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .btn-default:hover { background: var(--accent-tint); color: var(--accent-700); border-color: var(--accent-tint-2); } /* --------------------------------------------------------- THEME TOGGLE button (header) --------------------------------------------------------- */ .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--panel-border); border-radius: 50%; color: var(--muted); cursor: pointer; vertical-align: middle; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .theme-toggle:hover { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-tint-2); } .theme-toggle .tt-sun { display: none; } html[data-theme="dark"] .theme-toggle .tt-sun { display: inline; } html[data-theme="dark"] .theme-toggle .tt-moon { display: none; } /* ============================================================ DARK THEME ============================================================ */ html[data-theme="dark"] { /* re-point ui-refresh tokens — flips every tokenized component */ --accent: #4da3f7; --accent-600: #77b8f9; /* hover = lighter in dark */ --accent-700: #a8d0fb; --accent-tint: rgba(77,163,247,.14); --accent-tint-2: rgba(77,163,247,.28); --ink: #e8eef7; --body: #c3cee0; --muted: #8fa1ba; --hairline: #253349; --hairline-2:#1e2a3f; --surface: #0b1220; --surface-2: #0f1729; --surface-3: #0a1526; /* footer */ --cta: #22c55e; --cta-600: #4ade80; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 10px rgba(0,0,0,.5); --shadow-3: 0 4px 18px rgba(0,0,0,.5); --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(77,163,247,.6); /* semantic tokens */ --panel: #111b2e; --panel-2: #0d1526; --panel-border: #253349; --chip-bg: #1d2a40; --chip-text: #c3cee0; --row-hover: #16233a; --row-stripe: #0e1930; --you-row: rgba(245,158,11,.14); --amber-bg: rgba(245,158,11,.12); --amber-border: rgba(245,158,11,.35); --amber-text: #fbbf24; --code-bg: #0d1526; --code-border: #253349; color-scheme: dark; } /* ---- Base surfaces (ui-refresh hardcodes these) ---- */ html[data-theme="dark"] body { background: var(--surface) !important; color: var(--body) !important; } html[data-theme="dark"] ::selection { background: rgba(77,163,247,.35); color: #fff; } html[data-theme="dark"] #header { background: rgba(11,18,32,.88) !important; border-bottom: 1px solid var(--hairline) !important; } html[data-theme="dark"] #header.header-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.5) !important; } /* Hero / breadcrumb bands (hardcoded light gradients in ui-refresh) */ html[data-theme="dark"] #intro, html[data-theme="dark"] #intro:not(.front-intro-section) { background: linear-gradient(180deg, #0d1526 0%, var(--surface) 100%) !important; } html[data-theme="dark"] #intro::before { opacity: .18; } /* Section tint bands + account area */ html[data-theme="dark"] .section-bg, html[data-theme="dark"] #departments, html[data-theme="dark"] #about { background: var(--surface-2) !important; } /* Sections with hardcoded light backgrounds in style.css */ html[data-theme="dark"] #how-it-works, html[data-theme="dark"] #news-section, html[data-theme="dark"] #home-custom-content, html[data-theme="dark"] .front-intro-section { background: var(--surface) !important; } html[data-theme="dark"] #about .about-container .content, html[data-theme="dark"] #about .about-container .icon-box, html[data-theme="dark"] #about .about-container .icon-box .icon { background: var(--panel) !important; } /* Logo is a light-background image — frame it as a deliberate white chip */ html[data-theme="dark"] #header .logo img { background: #fff; padding: 3px 6px; border-radius: 8px; } /* Footer — keep dark navy, add separation line */ html[data-theme="dark"] #footer { border-top: 1px solid var(--hairline) !important; } /* ---- Bootstrap components ---- */ html[data-theme="dark"] .table { color: var(--body); } html[data-theme="dark"] .table th, html[data-theme="dark"] .table td { border-color: var(--hairline-2) !important; } html[data-theme="dark"] .table thead th { color: var(--muted); } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: var(--row-stripe); } html[data-theme="dark"] .text-muted { color: var(--muted) !important; } html[data-theme="dark"] hr { border-color: var(--hairline); } html[data-theme="dark"] pre, html[data-theme="dark"] code, html[data-theme="dark"] kbd { background: var(--code-bg); color: var(--body); } html[data-theme="dark"] .form-control, html[data-theme="dark"] #about .form-control, html[data-theme="dark"] select.form-control, html[data-theme="dark"] textarea.form-control { background: var(--panel-2) !important; border-color: var(--panel-border) !important; color: var(--ink) !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] #about .form-control::placeholder { color: var(--muted) !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] #about .form-control:focus { border-color: var(--accent) !important; } html[data-theme="dark"] .input-group-btn .btn { border-color: var(--panel-border); } html[data-theme="dark"] .modal-content { background: var(--panel); color: var(--body); border: 1px solid var(--panel-border); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--hairline-2); } html[data-theme="dark"] .close { color: var(--ink); text-shadow: none; } html[data-theme="dark"] .dropdown-menu { background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--shadow-2); } html[data-theme="dark"] .dropdown-item { color: var(--body); } html[data-theme="dark"] .dropdown-item:hover { background: var(--row-hover); color: var(--ink); } html[data-theme="dark"] .list-group-item { background: var(--panel); border-color: var(--hairline-2); color: var(--body); } html[data-theme="dark"] .card { background: var(--panel); border-color: var(--panel-border); } /* Alerts — translucent tints, readable light text */ html[data-theme="dark"] .alert-success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #86efac; } html[data-theme="dark"] .alert-info { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.35); color: #7dd3fc; } html[data-theme="dark"] .alert-warning { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-text); } html[data-theme="dark"] .alert-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #fca5a5; } html[data-theme="dark"] .alert a { color: inherit; text-decoration: underline; } /* Chips in dark */ html[data-theme="dark"] .label-info { background: rgba(56,189,248,.16); color: #7dd3fc; } html[data-theme="dark"] .label-success { background: rgba(34,197,94,.16); color: #86efac; } html[data-theme="dark"] .label-warning { background: rgba(245,158,11,.16); color: #fcd34d; } html[data-theme="dark"] .label-danger { background: rgba(239,68,68,.16); color: #fca5a5; } /* btn-default in dark */ html[data-theme="dark"] .btn-default { background: var(--panel); color: var(--body); border-color: var(--panel-border); } html[data-theme="dark"] .btn-default:hover { background: var(--accent-tint); color: var(--accent-700); border-color: var(--accent-tint-2); } /* keep CTA buttons on solid green with white text (dark hover lightens) */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .main-nav .btn-primary, html[data-theme="dark"] #about .btn-success, html[data-theme="dark"] #intro .intro-info .btn-get-started { color: #04220f !important; } /* ---- ui-refresh hardcoded patches ---- */ html[data-theme="dark"] .account-area-left { background: var(--panel) !important; } html[data-theme="dark"] #about .dropify-wrapper { border-color: var(--panel-border) !important; background: var(--panel-2) !important; } html[data-theme="dark"] .account-no-content-box[style*="yellow"], html[data-theme="dark"] .job-detail.account-no-content-box { background: var(--amber-bg) !important; border-color: var(--amber-border) !important; color: var(--amber-text) !important; } html[data-theme="dark"] .account-box form .form-group-account h5 { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-text) !important; } html[data-theme="dark"] .quiz-attempt-info-timer { background: var(--amber-bg) !important; color: var(--amber-text) !important; } html[data-theme="dark"] .quiz-attempt-info-question-counter { background: var(--accent-tint) !important; color: var(--accent-700) !important; } html[data-theme="dark"] .lp3d { background: linear-gradient(180deg, #101b30 0%, #0d1729 100%); } html[data-theme="dark"] .account-area-left a[style*="yellow"] { background: var(--amber-bg) !important; color: var(--amber-text) !important; box-shadow: inset 0 0 0 1px var(--amber-border); } @media (max-width: 991px) { html[data-theme="dark"] .account-area-left { background: rgba(13,21,38,.97) !important; } html[data-theme="dark"] .acct-menu-toggle span { background: var(--ink); } } /* ---- Per-view patches (inline