/* Neural Jobs — dark theme and brand overlay.
*
* Loaded last, via the settings.header_css field, so no vendor Blade file is
* edited and a JobPilot upgrade cannot clobber it. Everything here is an
* override of the compiled Tailwind/CSS the script ships.
*
* The markup hardcodes colours as Tailwind arbitrary values — tw-bg-[#F1F2F4],
* tw-text-[#18191C] — rather than semantic tokens, so they cannot be re-themed
* by changing a variable. There are only 11 of them across ~2,000 uses though,
* and Tailwind types each by property, so mapping them precisely is tractable.
* That mapping is the bulk of this file.
*/
:root {
/* Palette generated by Astryx, Meta's open-source design system (MIT), from
* the Neural Jobs brand violet as the HCT seed:
*
* npx astryx theme build neuralJobs.ts --out neural-jobs-theme.css
* defineTheme({name:'neural-jobs',
* color:{accent:'#6D5DFB', neutralStyle:'cool', contrast:'standard'}})
*
* Source theme lives in deploy/astryx/. Only the dark side of each
* light-dark() pair is taken, flattened to :root — the shipped theme.css
* also carries an @scope block, a CSS reset and overrides for React
* components this site does not have, none of which belong here.
*
* Why not the hand-picked palette this replaces: its text contrast was
* actually fine, but its borders were 1.33:1 — effectively invisible.
* Astryx guarantees generated text >= 4.5:1 on its surface and
* --color-border-emphasized >= 3:1, measured here at 3.06:1.
*/
/* Astryx --color-background-body */
--nj-bg: #121017;
/* Astryx --color-background-surface / -card */
--nj-surface: #1C1B21;
/* Astryx --color-background-popover */
--nj-surface-2: #312F36;
/* Two borders, used for different jobs — getting this wrong is what made
* the first pass look like a Christmas tree. Astryx ships both and means
* them differently:
*
* --nj-border structure. Cards, pills, dividers. A hairline that
* separates without announcing itself. This is the
* default and should be the overwhelming majority.
* --nj-border-strong affordance. Inputs, focus rings, things you can
* act on. Astryx's --color-border-emphasized, held
* at >= 3:1 because a form field genuinely must be
* perceivable.
*
* The first version used the emphasized one everywhere — 25 uses against
* 2 — so every card and every pill drew an equally loud outline and the
* page had no hierarchy left. WCAG's 3:1 applies to UI you must perceive,
* not to decorative card edges. */
--nj-border: rgba(242, 239, 249, .07);
--nj-border-strong: #6A6673;
--nj-border-soft: rgba(242, 239, 249, .05);
/* Astryx --color-text-primary / -secondary. Their --color-text-disabled
* (#605C69) is deliberately NOT used for muted body text: at 2.63:1 it is
* below AA, which is correct for a disabled control and wrong for a job's
* location and dates. Those use text-secondary at 7.44:1. */
--nj-text: #E4E1EA;
--nj-text-mid: #ADA9B7;
--nj-text-mut: #ADA9B7;
/* The brand violet stays the fill for buttons, with white on top (4.56:1).
* Astryx tone-shifts --color-accent to #CEBCFF on dark because it treats
* accent as a foreground; that value is right for accent *text* (9.98:1
* on surface) and is used as such below. */
--nj-accent: #6D5DFB;
--nj-accent-hi: #CEBCFF;
--nj-accent-dim: color-mix(in srgb, #6D5DFB 22%, transparent);
--nj-cyan: #22D3EE;
--nj-success: #34D399;
--nj-success-bg: rgba(52, 211, 153, .12);
/* Astryx radius scale */
--nj-radius: 12px; /* --radius-element */
--nj-radius-lg: 18px; /* --radius-container */
--nj-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}
body, button, input, select, textarea { font-family: var(--nj-font); }
.card, .tw-card, .jobcardStyle1, .job-card { border-radius: var(--nj-radius); }
/* ---------- the border default -----------------------------------------
* ROOT CAUSE of the "everything is outlined" look.
*
* CSS's initial value for border-color is `currentColor`. Tailwind's preflight
* normally overrides that with a neutral default — but JobPilot ships
* `corePlugins: {preflight: false}`, so it never does. Every element that sets
* a border-width without a border-color therefore draws its border in the TEXT
* colour. Once the text was inverted to light for the dark theme, 524 elements
* on /jobs alone started outlining themselves in #ADA9B7.
*
* No !important: this is a default, and every specific rule below still wins.
*/
*, *::before, *::after { border-color: var(--nj-border); }
/* ---------- ground ---------- */
html, body {
background: var(--nj-bg) !important;
color: var(--nj-text) !important;
color-scheme: dark;
}
body, p, span, div, li, td, th, label, small {
border-color: var(--nj-border);
}
/* The script paints several wrappers white further down the cascade. */
.rt-main-wrapper, main, section, .container, .container-fluid,
.tw-bg-white, .bg-white, .card, .tw-card {
background-color: transparent;
}
.card, .tw-card, .rt-card, .panel, .widget {
background-color: var(--nj-surface) !important;
border-color: var(--nj-border) !important;
color: var(--nj-text);
}
/* ---------- the 11 hardcoded values ----------
Split by property because Tailwind emits one class per property, and
#F1F2F4 alone is used as a background, a border and a text colour. */
.tw-bg-\[\#F1F2F4\] { background-color: var(--nj-surface) !important; }
.tw-border-\[\#F1F2F4\] { border-color: var(--nj-border) !important; }
.tw-text-\[\#F1F2F4\] { color: var(--nj-text) !important; }
.tw-text-\[\#18191C\] { color: var(--nj-text) !important; }
.tw-bg-\[\#18191C\] { background-color: var(--nj-surface-2) !important; }
.tw-text-\[\#191F33\] { color: var(--nj-text) !important; }
.tw-bg-\[\#191F33\] { background-color: var(--nj-surface-2) !important; }
.tw-text-\[\#474C54\] { color: var(--nj-text-mid) !important; }
.tw-text-\[\#767F8C\] { color: var(--nj-text-mut) !important; }
.tw-text-\[\#0A65CC\] { color: var(--nj-accent-hi) !important; }
.tw-bg-\[\#0A65CC\] { background-color: var(--nj-accent) !important; }
.tw-border-\[\#0A65CC\] { border-color: var(--nj-accent) !important; }
.tw-bg-\[\#E7F0FA\] { background-color: var(--nj-accent-dim) !important; }
.tw-text-\[\#E7F0FA\] { color: var(--nj-accent-hi) !important; }
.tw-text-\[\#0BA02C\] { color: var(--nj-success) !important; }
.tw-bg-\[\#E7F6EA\] { background-color: var(--nj-success-bg) !important; }
.tw-border-\[\#C8CCD1\] { border-color: var(--nj-border) !important; }
.tw-text-\[\#C8CCD1\] { color: var(--nj-text-mut) !important; }
.tw-border-\[\#E4E5E8\] { border-color: var(--nj-border) !important; }
.tw-bg-\[\#E4E5E8\] { background-color: var(--nj-border-soft) !important; }
/* ---------- header ---------- */
header, .rt-header, .header-area, .navbar {
background-color: var(--nj-surface) !important;
border-bottom: 1px solid var(--nj-border);
}
/* The blue search bar under the nav. */
.rt-header-search, .header-search-area, .tw-bg-\[\#0A65CC\].rt-search {
background: linear-gradient(90deg, #171E2E 0%, #131926 100%) !important;
}
header a, .navbar a { color: var(--nj-text-mid); }
header a:hover, .navbar a:hover, header a.active, .navbar a.active { color: var(--nj-accent-hi); }
/* ---------- brand wordmark ----------
No logo image is set (settings.light_logo / dark_logo are NULL), so the
header falls back to the text "Jobpilot". Replaced in CSS so no vendor
template is touched; swap for a real ![]()
once artwork exists. */
.rt-logo, .navbar-brand, .site-logo, a.logo {
font-weight: 700;
letter-spacing: -.02em;
}
.rt-logo span, .navbar-brand span, .site-logo span { color: var(--nj-text) !important; }
/* ---------- forms ---------- */
input, select, textarea, .form-control, .nice-select, .tw-input {
background-color: var(--nj-surface-2) !important;
border-color: var(--nj-border-strong) !important;
color: var(--nj-text) !important;
}
input::placeholder, textarea::placeholder { color: var(--nj-text-mut) !important; }
input:focus, select:focus, textarea:focus, .form-control:focus {
border-color: var(--nj-accent) !important;
box-shadow: 0 0 0 3px var(--nj-accent-dim) !important;
}
select option { background: var(--nj-surface-2); color: var(--nj-text); }
/* ---------- buttons ---------- */
.btn-primary, .rt-btn-primary, button.tw-bg-\[\#0A65CC\], a.tw-bg-\[\#0A65CC\] {
background-color: var(--nj-accent) !important;
border-color: var(--nj-accent) !important;
color: #fff !important;
}
.btn-primary:hover, .rt-btn-primary:hover { background-color: var(--nj-accent-hi) !important; }
/* ---------- job cards ---------- */
.jobcardStyle1, .job-card, .rt-single-job {
background-color: var(--nj-surface) !important;
border: 1px solid var(--nj-border) !important;
transition: border-color .15s ease, transform .15s ease;
}
.jobcardStyle1:hover, .job-card:hover, .rt-single-job:hover {
border-color: var(--nj-accent) !important;
transform: translateY(-2px);
}
/* Company logo placeholders read as bright white squares on dark. */
.jobcardStyle1 img, .rt-single-icon-box img, .company-logo img {
background: var(--nj-surface-2);
border: 1px solid var(--nj-border);
border-radius: 8px;
}
/* ---------- footer ---------- */
footer, .rt-footer, .footer-area {
background-color: #080B12 !important;
border-top: 1px solid var(--nj-border);
color: var(--nj-text-mut);
}
footer a, .rt-footer a { color: var(--nj-text-mut); }
footer a:hover, .rt-footer a:hover { color: var(--nj-accent-hi); }
footer h1, footer h2, footer h3, footer h4, footer h5 { color: var(--nj-text) !important; }
/* ---------- odds and ends ---------- */
hr, .divider { border-color: var(--nj-border) !important; }
.breadcrumb, .rt-breadcrumb, .page-header {
background-color: var(--nj-surface) !important;
border-bottom: 1px solid var(--nj-border);
}
.pagination .page-link {
background: var(--nj-surface-2); border-color: var(--nj-border); color: var(--nj-text-mid);
}
.pagination .page-item.active .page-link {
background: var(--nj-accent); border-color: var(--nj-accent); color: #fff;
}
.cc-window, .cookie-consent, #cookieconsent {
background: var(--nj-surface) !important; color: var(--nj-text) !important;
border: 1px solid var(--nj-border);
}
::selection { background: var(--nj-accent); color: #fff; }
/* ---------- vendor class selectors -------------------------------------
The arbitrary-value overrides above only reach colours written into the
markup. These are painted by the compiled stylesheet against named classes,
which out-specify a bare `section {}` rule — found by walking the rendered
DOM for light computed backgrounds rather than by reading the CSS. */
section.banner-section,
div.counter-area,
.cta-section, .category-section, .how-it-works {
background-color: transparent !important;
}
.jobsearchBox, .search-box, .auto-results-wrapper,
.n-header--top, form.shadow, .dropdown-menu, .nice-select .list {
background-color: var(--nj-surface) !important;
border-color: var(--nj-border) !important;
color: var(--nj-text) !important;
}
.dropdown-menu .dropdown-item, .nice-select .option { color: var(--nj-text-mid) !important; }
.dropdown-menu .dropdown-item:hover, .nice-select .option:hover,
.nice-select .option.selected {
background-color: var(--nj-surface-2) !important;
color: var(--nj-text) !important;
}
.btn-light, a.btn-light, button.btn-light {
background-color: var(--nj-surface-2) !important;
border-color: var(--nj-border) !important;
color: var(--nj-text) !important;
}
.btn-light:hover { background-color: var(--nj-border) !important; }
/* Pale-violet icon tiles behind the category and stat blocks. */
.icon-72, .icon-64, .icon-56 {
background-color: var(--nj-accent-dim) !important;
border: 1px solid var(--nj-border);
}
/* Cookie-consent widget ships its own light palette. */
.c-bn { background-color: var(--nj-surface-2) !important; color: var(--nj-text) !important; }
.c-bn.c-p-bn { background-color: var(--nj-accent) !important; color: #fff !important; }
.c-bl, .b-ex, #c-bns, #cc_div .c-bl {
background-color: var(--nj-surface) !important;
color: var(--nj-text) !important;
}
.c-tg { background-color: var(--nj-border) !important; }
#cc_div, #cm, #s-inr, #s-bl {
background-color: var(--nj-surface) !important;
color: var(--nj-text) !important;
border: 1px solid var(--nj-border);
}
#cm p, #cm h2, #s-bl p, #s-bl h2 { color: var(--nj-text-mid) !important; }
/* Headings inherit the vendor's near-black otherwise. */
h1, h2, h3, h4, h5, h6 { color: var(--nj-text); }
/* Illustrations are line art drawn for a white page. Softened rather than
hidden — inverting them would recolour the brand violet inside the art. */
.banner-section img, .hero img, .illustration img { opacity: .92; }
/* ---------- text scale -------------------------------------------------
The templates lean on a light-theme grey scale (.text-gray-900 = #18191C
through .text-gray-500) far more than on the arbitrary values. On a dark
ground these render near-invisible — the hero H1 was #18191C on #0B0F17.
Inverted here so the intended hierarchy survives. */
.text-gray-900, .text-gray-800 { color: var(--nj-text) !important; }
.text-gray-700, .text-gray-600 { color: var(--nj-text-mid) !important; }
.text-gray-500, .text-gray-400 { color: var(--nj-text-mut) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--nj-text) !important; }
h1 a, h2 a, h3 a, h4 a { color: inherit !important; }
/* Bare links inherit the vendor's dark grey. */
a { color: var(--nj-text-mid); }
a:hover { color: var(--nj-accent-hi); }
/* .text-primary resolves to a dark violet that fails on this ground. */
.text-primary, a.text-primary,
.popular-category-item, .most-popular-wrap, a.cc-link {
color: var(--nj-accent-hi) !important;
}
.popular-category-item:hover, .most-popular-wrap:hover { color: var(--nj-cyan) !important; }
.loacton, .location, .job-location { color: var(--nj-text-mut) !important; }
/* Muted body copy inside cards. */
.card p, .tw-card p, .jobcardStyle1 p { color: var(--nj-text-mid); }
/* ---------- header bar -------------------------------------------------
The vendor paints the search strip with the primary colour, which mapped to
a full-width violet band. On a dark ground that reads as a stray light
block, and it fought the violet in the wordmark. Dark surface instead —
the accent is reserved for things you can click. */
.n-header--bottom, .header-bottom, .rt-header-bottom,
header .tw-bg-\[\#0A65CC\], .n-header--bottom.tw-bg-\[\#0A65CC\] {
background-color: var(--nj-surface) !important;
border-bottom: 1px solid var(--nj-border);
}
/* Keep the accent on actual controls. */
.btn-primary, .rt-btn-primary, button[type="submit"].tw-bg-\[\#0A65CC\] {
background-color: var(--nj-accent) !important;
}
/* The hero heading is .text-gray-900 inside a section the vendor styles for a
white page; raise specificity so it wins wherever it appears. */
section h1, section h2, .banner-section h1, .banner-content h1,
h1.text-gray-900, h2.text-gray-900, h3.text-gray-900 {
color: var(--nj-text) !important;
}
/* Breadcrumb strip: vendor paints it light-on-light for a white page. */
.breadcrumb-area, .rt-breadcrumb, .page-title-area, .inner-banner {
background-color: var(--nj-surface) !important;
border-bottom: 1px solid var(--nj-border);
}
.breadcrumb-area h1, .breadcrumb-area h2, .breadcrumb-area span,
.breadcrumb-area a, .breadcrumb li, .breadcrumb a, .breadcrumb-item,
.breadcrumb-item.active, .page-title-area h1 {
color: var(--nj-text) !important;
}
.breadcrumb a:hover { color: var(--nj-accent-hi) !important; }
/* .text-primary.active out-specifies a bare .text-primary rule, so the active
nav item and the breadcrumb kept the vendor's dark violet (#584BC9) — which
is close to unreadable on this ground. Matched at equal specificity. */
a.text-primary.active, .text-primary.active,
.menu-item a.active, .breadcrumb .active, li.menu-item a.text-primary {
color: var(--nj-accent-hi) !important;
}
/* The breadcrumb band sits on a light-grey vendor background. */
.breadcrumb-wrapper, .rt-breadcrumb-area, .page-header-area,
div.container > ul.menu-active-classes { color: var(--nj-text-mid) !important; }
.menu-item, .menu-item a { color: var(--nj-text-mid) !important; }
.menu-item a:hover { color: var(--nj-accent-hi) !important; }
/* The breadcrumb band on every inner page. Found by walking the DOM, not by
guessing: it is `.breadcrumbs.style-two`, so `.breadcrumb-area`,
`.rt-breadcrumb` and `.page-title-area` all missed it — and because the
text had already been inverted to light, the band was light-on-light. */
.breadcrumbs, .breadcrumbs.style-two {
background-color: var(--nj-surface) !important;
border-bottom: 1px solid var(--nj-border-soft);
}
.breadcrumbs a, .breadcrumbs span, .breadcrumbs p, .breadcrumbs .f-size-18 {
color: var(--nj-text) !important;
}
.breadcrumbs a:hover { color: var(--nj-accent-hi) !important; }
/* noUi-slider paints its value tooltips black; on the filter panel's dark
surface those were the only remaining unreadable text on the page. */
.noUi-tooltip {
background: var(--nj-surface-2) !important;
color: var(--nj-text) !important;
border: 1px solid var(--nj-border) !important;
}
.noUi-target { background: var(--nj-surface-2) !important; border-color: var(--nj-border) !important; }
.noUi-connect { background: var(--nj-accent) !important; }
.noUi-handle { background: var(--nj-text) !important; border-color: var(--nj-border) !important; }
/* ---------- specificity backstop ---------------------------------------
The vendor's app.css declares `.n-header--top { background:#fff!important }`
and, despite header_css being last in , its sheet resolves AFTER this
one. At equal specificity and equal !important, the later rule wins — so the
top nav bar stayed white with light text on it (1.7:1).
Prefixing with `body` outranks a bare class and settles it. Applied only to
the selectors observed losing, not blanket-applied. */
body .n-header--top,
body .n-header--top.relative,
body div.n-header--bottom,
body .jobsearchBox,
body .search-box,
body .auto-results-wrapper,
body .breadcrumbs,
body .breadcrumbs.style-two {
background-color: var(--nj-surface) !important;
}
body .n-header--top a,
body .n-header--top .menu-item a { color: var(--nj-text-mid) !important; }
body .n-header--top a:hover,
body .n-header--top a.active,
body .n-header--top .text-primary.active { color: var(--nj-accent-hi) !important; }
/* "Popular Tag" links sat at 3.25:1 — under AA for text this size. */
body .popular-tag a, body .tag-list a, body .popular-tags a,
body a.tag, body .job-tags a {
color: var(--nj-text-mid) !important;
}
body .popular-tag a:hover, body .tag-list a:hover { color: var(--nj-accent-hi) !important; }
/* The popular-search chips are bare inside .tw-popular-search — no class
of their own, so the earlier .popular-tag guess never matched. */
body .tw-popular-search a { color: var(--nj-text-mid) !important; }
body .tw-popular-search a:hover { color: var(--nj-accent-hi) !important; }
/* .text-gray-500 landed at 4.34:1 — just under AA for body text. Astryx's
text-secondary is the right token here and clears it at 7.44:1. */
body .text-gray-500, body footer .text-gray-500, body .col-lg-6 {
color: var(--nj-text-mid) !important;
}
/* ---------- calm the surfaces -----------------------------------------
Elevation and spacing should carry the structure; outlines are a last
resort. Everything below walks back the uniform 3:1 outline the first
pass put on every element. */
/* Cards: separate by tone, not by line. */
.card, .tw-card, .rt-card, .panel, .widget,
.jobcardStyle1, .job-card, .rt-single-job,
.company-card, .candidate-card, .employer-card {
border: 1px solid var(--nj-border) !important;
box-shadow: none !important;
}
.jobcardStyle1:hover, .job-card:hover, .rt-single-job:hover,
.company-card:hover, .employer-card:hover {
/* Restrained hover: lift the surface, tint the edge. No violet outline. */
background-color: var(--nj-surface-2) !important;
border-color: rgba(242, 239, 249, .14) !important;
transform: none;
}
/* Pills and meta chips — "Information Technology", "160 Open Job", tags.
These were carrying the same weight as the card that contains them. */
.tw-rounded-full, .badge, .chip, .tag, .pill,
[class*="tw-rounded-[3px]"], [class*="tw-rounded-md"] {
border-color: var(--nj-border) !important;
}
/* Dividers should be barely there. */
hr, .divider, .tw-divide-y > * + *,
.breadcrumbs, .n-header--top, .n-header--bottom, header {
border-color: var(--nj-border) !important;
}
/* Placeholder company logos are a light PNG on a dark card — the brightest
thing on the page and attached to every single row. Knock them back until
there is real artwork. */
.jobcardStyle1 img[src*="default"], .rt-single-icon-box img[src*="default"],
.company-logo img[src*="default"], img[src*="backend/image/default"],
img[alt="logo"][src*="default"] {
filter: grayscale(1) brightness(.42) contrast(.85);
opacity: .55;
background: var(--nj-surface-2);
border: 1px solid var(--nj-border);
border-radius: 10px;
}
/* Buttons: only the primary action gets the accent. Secondary recedes. */
.btn-secondary, .btn-outline, .btn-light, a.btn-light, button.btn-light {
background-color: transparent !important;
border-color: var(--nj-border) !important;
color: var(--nj-text-mid) !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-light:hover {
background-color: var(--nj-surface-2) !important;
border-color: var(--nj-border-strong) !important;
color: var(--nj-text) !important;
}
/* Focus stays loud — that one has to be. */
:focus-visible { outline: 2px solid var(--nj-accent) !important; outline-offset: 2px; }
/* The search panel above listing pages. `.top-content` and its two unclassed
child wrappers are painted white by the vendor; on a dark page that block
was the loudest thing on screen once the card borders were calmed. */
body .top-content,
body .top-content > div,
body .top-content > div > div {
background-color: var(--nj-surface) !important;
border-color: var(--nj-border) !important;
}
body .top-content input,
body .top-content select {
background-color: var(--nj-surface-2) !important;
border-color: var(--nj-border) !important;
}
/* Last two loud edges, both set by named vendor classes rather than the
arbitrary-value classes handled earlier:
.btn-outline-light drew a near-white #F8F9FA outline
#E4E5E8 the vendor's light grey, on .row wrappers and selects
Everything still bright after this is deliberate: the accent on primary
buttons, and --nj-border-strong on form fields. */
body .btn-outline-light,
body a.btn-outline-light,
body button.btn-outline-light {
border-color: var(--nj-border) !important;
color: var(--nj-text-mid) !important;
}
body .btn-outline-light:hover {
background-color: var(--nj-surface-2) !important;
border-color: var(--nj-border-strong) !important;
color: var(--nj-text) !important;
}
body .row, body div.row, body .form-select, body select.form-select,
body .form-control, body .input-group, body .input-group-text {
border-color: var(--nj-border) !important;
}
/* but a focused field should still read as focused */
body .form-control:focus, body .form-select:focus {
border-color: var(--nj-accent) !important;
}
/* Final stragglers: the vertical divider inside the search panel (#EDEFF5)
and the select outline (#E4E5E8). After this the only bright edges left on
the page are the accent on primary buttons and the focus ring — both
deliberate. */
body .search-col, body [class*="search-col"],
body .col-lg-5.search-col {
border-color: var(--nj-border) !important;
}
body select, body select.form-select, body .form-select,
body .nice-select, body .select2-container--default .select2-selection {
border-color: var(--nj-border) !important;
}
/* ---------- job-list card (homepage Recent Jobs, and /jobs list) --------
The horizontal card component uses named classes the arbitrary-value map
never touched. `.post-main-title` links resolved to #191F33 — lum 31,
effectively invisible on the dark ground. This is the "titles not visible"
report. */
body .post-main-title,
body .post-main-title a,
body .job-title, body .job-title a {
color: var(--nj-text) !important;
font-weight: 600 !important;
}
body .post-main-title a:hover { color: var(--nj-accent-hi) !important; }
/* Card meta row (location / salary / date) — keep it quiet but legible. */
body .post-meta, body .job-meta, body .rt-list .list-meta,
body .rt-list li .card-body span { color: var(--nj-text-mut); }
/* ---------- search forms --------------------------------------------------
The hero and page search fields read as flat dark slots. Give them a
defined surface, comfortable height, and a real focus ring so they feel
like inputs rather than gaps. */
body .jobsearchBox,
body .banner-section .search-box,
body .rt-header-search {
background-color: var(--nj-surface) !important;
border: 1px solid var(--nj-border) !important;
border-radius: var(--nj-radius-lg) !important;
}
body .jobsearchBox input,
body .banner-section input[type="text"],
body .search-box input,
body input.form-control,
body input[name="keyword"],
body input[name="location"],
body input[name="search"] {
background-color: var(--nj-surface-2) !important;
border: 1px solid var(--nj-border) !important;
border-radius: var(--nj-radius) !important;
color: var(--nj-text) !important;
min-height: 48px;
padding-left: 14px;
}
body .jobsearchBox input::placeholder,
body .search-box input::placeholder,
body input.form-control::placeholder { color: var(--nj-text-mut) !important; }
body .jobsearchBox input:focus,
body .search-box input:focus,
body input.form-control:focus,
body input[name="keyword"]:focus,
body input[name="location"]:focus {
border-color: var(--nj-accent) !important;
box-shadow: 0 0 0 3px var(--nj-accent-dim) !important;
outline: none !important;
}
/* The "Find Job Now" primary button in the hero search. */
body .jobsearchBox .btn,
body .banner-section button[type="submit"],
body .search-box .btn-primary {
background-color: var(--nj-accent) !important;
border-color: var(--nj-accent) !important;
color: #fff !important;
border-radius: var(--nj-radius) !important;
min-height: 48px;
font-weight: 600;
}
body .jobsearchBox .btn:hover,
body .search-box .btn-primary:hover { background-color: var(--nj-accent-hi) !important; }
/* The nav "Jobs" dropdown pill and the keyword box beside it in the header. */
body .rt-header .form-select,
body header select,
body header .nice-select {
background-color: var(--nj-surface-2) !important;
border-color: var(--nj-border) !important;
color: var(--nj-text) !important;
}
/* ---------- text-gray scale: WIN against late-loading vendor bundles ------
The job-details page (and others) load a Vite page bundle AFTER header_css.
The vendor's `.text-gray-900 { color:#18191C !important }` there ties my
earlier un-prefixed override on specificity AND !important, so source order
decided and the vendor won — leaving the Job Overview values (Full Time,
Any, 8+ Years, the posted date) invisible dark-on-dark.
Prefixing with `body` raises specificity to (0,1,1), which beats a later
(0,1,0) rule regardless of load order. */
body .text-gray-900, body .text-gray-800 { color: var(--nj-text) !important; }
body .text-gray-700, body .text-gray-600 { color: var(--nj-text-mid) !important; }
body .text-gray-500, body .text-gray-400, body .text-gray-300 { color: var(--nj-text-mut) !important; }
body .text-gray-10 { color: var(--nj-text) !important; }
/* The job-detail sidebar widgets (Job Overview) specifically. */
body .single-jSidebarWidget .text-gray-900,
body .single-jSidebarWidget span,
body .iconbox-content span.d-block { color: var(--nj-text) !important; }
body .single-jSidebarWidget .text-gray-500,
body .iconbox-content .text-uppercase { color: var(--nj-text-mut) !important; }
/* ---------- header search widget (Jobs dropdown + icon + keyword) ---------
As shipped in the dark theme this reads as broken: the category