/* ============================================================
AXIOM PEOPLE — PALETTE OVERRIDE (29 July 2026)
White / slate / sharp-emerald restyle.
HOW TO USE
Add this ONE line immediately before on the pages
listed below, and nothing else:
ADD IT TO:
candidates.html employers.html contact.html
faq.html cookies.html terms.html
privacy.html jobs.html verify.html
TWO PAGES ALSO NEED A BODY CLASS, because they use the same
variable name (--accent) for two different colours:
candidates.html →
employers.html →
DO NOT ADD IT TO:
index.html (already restyled directly)
register-v2.html, profile-questionnaire.html
worth.html, benchmark.html, axiom-people-walkthrough.html
any signed-in platform page — dashboard, search, pipeline,
messages, interviews, vacancies, contract, references,
graduates, crm, admin
Those keep their own palettes deliberately.
TO REVERT: delete the one link line. Nothing else changes.
============================================================ */
:root {
/* surfaces */
--cream: #FFFFFF !important;
--white: #FFFFFF !important;
--bg: #FFFFFF !important;
--bg2: #FFFFFF !important;
--stone: #F8FAFC !important;
/* borders */
--card-border: #E2E8F0 !important;
--line: #E2E8F0 !important;
--border-strong: #CBD5E1;
/* text */
--ink: #020617 !important;
--champ: #020617 !important;
--ink-soft: #334155 !important;
--soft: #334155 !important;
--slate: #64748B !important;
/* emerald family (pages that name it directly) */
--emerald: #059669 !important;
--emerald-deep: #047857 !important;
--emerald-tint: #ECFDF5 !important;
/* gold is unchanged — listed only so it is visible in one place */
--gold: #B9973F;
}
/* Translucent nav bars are hardcoded on these pages, not variables.
privacy.html uses a bare , jobs.html uses header.top. */
nav,
header,
header.top {
background: rgba(255, 255, 255, 0.92) !important;
}
@media (max-width: 880px) {
.nav-links { background: rgba(255, 255, 255, 0.98) !important; }
}
@media (max-width: 768px) {
.nav-links { background: rgba(255, 255, 255, 0.98) !important; }
}
/* Inputs previously sat on the cream fill; on white they need a
tint or they disappear into the card behind them. */
.form-group input,
.form-group select,
.form-group textarea,
.controls input,
.controls select,
.modal input,
.modal select,
.modal textarea {
background: #F8FAFC !important;
}
/* ------------------------------------------------------------
--accent means emerald on the candidate page and teal on the
employer page. The body class disambiguates them.
------------------------------------------------------------ */
body.pal-candidate {
--accent: #059669 !important;
--accent-deep: #047857 !important;
--accent-tint: #ECFDF5 !important;
}
body.pal-employer {
--accent: #0E7490 !important;
--accent-deep: #155E75 !important;
--accent-tint: #ECFEFF !important;
}
/* Large colour bands would read as vivid mid-green/teal at the new
brighter values, so they take the deeper shade instead. */
body.pal-candidate .apf { background: #064E3B !important; }
body.pal-employer .apf-mini { background: #164E63 !important; }
body.pal-employer .membership-panel {
background: linear-gradient(160deg, #155E75 0%, #164E63 100%) !important;
}
/* Icon strokes are inline SVG attributes; CSS still wins. */
body.pal-candidate .card-icon svg { stroke: #047857 !important; }
body.pal-employer .card-icon svg { stroke: #155E75 !important; }
/* ------------------------------------------------------------
Button hierarchy: one solid button per view. On the candidate
and employer pages the gold second button becomes an outline
so the primary action wins. Pages where gold IS the only
button (faq, cookies) are left alone.
------------------------------------------------------------ */
body.pal-candidate .btn-gold,
body.pal-employer .btn-gold {
background: transparent !important;
color: var(--ink) !important;
border: 1.5px solid #CBD5E1 !important;
box-shadow: none !important;
}
body.pal-candidate .btn-gold:hover,
body.pal-employer .btn-gold:hover {
border-color: var(--ink) !important;
background: #F8FAFC !important;
}
/* The identity/confirmation tint keeps its deliberate green-light
tone, with a soft border so it reads as reassurance. */
.compare-card.new,
.apply-note {
background: #ECFDF5 !important;
border-color: #A7F3D0 !important;
}