/*
Theme Name: HR Job World
Theme URI: https://www.hrjobworld.com/
Author: Digihify Marketing Solution
Description: Self-contained content-site theme for HR Job World. Carries the brand
palette, header and footer from the static build, with templates for pages,
articles, category archives and the homepage. No page builder, no dependencies.
Companion plugin "HR Job World Setup" imports the content and wires up the menus.
Version: 2.7.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hjw
Tags: blog, content, one-column, custom-menu, custom-logo, editor-style
*/
/* ==========================================================================
HR Job World — hrjobworld.com
Core stylesheet. Built by Digihify Marketing Solution.
No build step required: plain CSS, works on any shared host.
========================================================================== */
:root{
/* --- Refined palette (Aug 2026). Every text/background pair below meets
WCAG AA. The previous coral CTA sat at 2.82:1 and failed. --- */
--navy:#0C2440; /* ink navy — white on it 15.6:1 AAA */
--navy-800:#08192E;
--navy-600:#17436F; /* links — 10.2:1 AAA */
--teal:#0C9B84; /* brand teal — decorative fills, logo */
--teal-btn:#087E6B; /* teal button bg, white text 4.99:1 AA */
--teal-dark:#077A67; /* teal text on white 5.26:1 AA */
--coral:#D2431F; /* action — white text 4.60:1 AA */
--coral-dark:#B8371A; /* hover — 5.83:1 AA */
--coral-soft:#F4623F; /* decorative only, never behind text */
--ink:#0F172A;
--body:#475569;
--muted:#5F6E85; /* was #6B7A90 (4.36:1) — now 5.18:1 AA */
--line:#E3E9F0;
--line-soft:#EEF2F7;
--bg:#FFFFFF;
--bg-soft:#F6F8FB;
--bg-navy-soft:#F2F6FB;
--radius:12px;
--radius-lg:18px;
--radius-pill:999px;
--shadow-sm:0 1px 2px rgba(14,42,71,.06), 0 1px 3px rgba(14,42,71,.05);
--shadow-md:0 4px 12px rgba(14,42,71,.07), 0 2px 4px rgba(14,42,71,.04);
--shadow-lg:0 18px 40px rgba(14,42,71,.10), 0 4px 12px rgba(14,42,71,.05);
--wrap:1240px;
--font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
margin:0; font-family:var(--font); color:var(--body);
font-size:16px; line-height:1.65; background:var(--bg);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy-600); text-decoration:none}
a:hover{color:var(--teal-dark)}
h1,h2,h3,h4,h5{color:var(--ink); font-weight:700; line-height:1.25; margin:0 0 .6em}
h1{font-size:clamp(1.85rem,1.2rem + 2.1vw,2.75rem); letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem); letter-spacing:-.015em}
h3{font-size:1.15rem}
h4{font-size:1rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em; padding-left:1.25em}
li{margin-bottom:.45em}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}
small{font-size:.85rem}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:4px}
/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 20px}
.section{padding:64px 0}
.section-sm{padding:44px 0}
.section-soft{background:var(--bg-soft)}
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stack-sm > * + *{margin-top:.5rem}
.text-center{text-align:center}
.mb-0{margin-bottom:0}
.section-head{max-width:720px; margin-bottom:34px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head p{color:var(--muted); font-size:1.03rem; margin-bottom:0}
.eyebrow{
display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.11em;
text-transform:uppercase; color:var(--teal-dark); margin-bottom:.7rem;
}
/* ---------- buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5em;
padding:12px 24px; border-radius:var(--radius-pill); font-weight:600; font-size:.95rem;
border:1.5px solid transparent; cursor:pointer; transition:.16s ease; text-align:center;
font-family:inherit; line-height:1.3;
}
.btn-navy{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-800); color:#fff}
.btn-teal{background:var(--teal-btn); color:#fff; border-color:var(--teal-btn)}
.btn-teal:hover{background:var(--teal-dark); color:#fff}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy); background:var(--bg-navy-soft); color:var(--navy)}
.btn-white{background:#fff; color:var(--navy); border-color:#fff}
.btn-white:hover{background:var(--bg-soft); color:var(--navy)}
.btn-outline-white{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-outline-white:hover{background:rgba(255,255,255,.12); color:#fff; border-color:#fff}
.btn-lg{padding:15px 32px; font-size:1rem}
.btn-sm{padding:8px 16px; font-size:.85rem}
.btn-block{display:flex; width:100%}
/* ---------- header ---------- */
.site-header{
position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:18px; height:72px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); font-size:1.12rem; letter-spacing:-.02em}
.logo:hover{color:var(--navy)}
.logo svg{display:block; height:34px; width:auto}
.logo-mark{width:34px; height:34px; flex:0 0 34px; display:block}
.logo span.accent{color:var(--teal-dark)}
.site-footer .logo svg{height:30px}
.main-nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.main-nav a{
padding:9px 13px; border-radius:8px; color:var(--ink); font-weight:500; font-size:.94rem;
}
.main-nav a:hover{background:var(--bg-navy-soft); color:var(--navy)}
.main-nav a.is-current{color:var(--navy); font-weight:600; background:var(--bg-navy-soft)}
.header-cta{display:flex; align-items:center; gap:10px; margin-left:10px}
.nav-toggle{
display:none; margin-left:auto; background:none; border:1.5px solid var(--line);
border-radius:9px; width:44px; height:40px; cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{display:block; width:19px; height:2px; background:var(--navy); position:relative}
.nav-toggle span::before,.nav-toggle span::after{
content:''; position:absolute; left:0; width:19px; height:2px; background:var(--navy)
}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
/* dropdown */
.has-drop{position:relative}
.has-drop > a::after{content:'▾'; font-size:.7em; margin-left:5px; opacity:.6}
.drop{
position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
min-width:280px; background:#fff; border:1px solid var(--line);
border-radius:16px; box-shadow:var(--shadow-lg); padding:12px; display:none;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block; padding:9px 12px; border-radius:8px; font-size:.9rem; color:var(--ink)}
.drop a:hover{background:var(--bg-navy-soft); color:var(--navy)}
/* mega panel — three columns of links under one nav item */
.drop-mega{width:min(880px,calc(100vw - 40px)); padding:22px 24px}
.drop-cols{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:26px}
.drop-col h3{
font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
color:var(--muted); margin-bottom:.9em; font-weight:700;
}
.drop-col a{padding:7px 10px; font-size:.88rem}
.drop-col .drop-lead{
display:flex; gap:10px; align-items:flex-start; padding:11px 12px;
border:1px solid var(--line); border-radius:11px; margin-bottom:8px;
}
.drop-col .drop-lead:hover{border-color:var(--navy-600); background:var(--bg-navy-soft)}
.drop-col .drop-lead b{display:block; font-size:.9rem; color:var(--ink)}
.drop-col .drop-lead em{font-style:normal; font-size:.79rem; color:var(--muted); line-height:1.45}
/* ---------- hero ---------- */
.hero{
background:linear-gradient(160deg,var(--navy) 0%,var(--navy-600) 62%,#155E6B 100%);
color:#fff; padding:74px 0 84px; position:relative; overflow:hidden;
}
.hero::after{
content:''; position:absolute; right:-140px; top:-140px; width:460px; height:460px;
border-radius:50%; background:radial-gradient(circle,rgba(15,160,126,.35),transparent 68%);
}
.hero .wrap{position:relative; z-index:2}
.hero h1{color:#fff; max-width:15ch}
.hero-sub{color:rgba(255,255,255,.85); font-size:1.1rem; max-width:60ch; margin-bottom:1.8rem}
.hero-badge{
display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.22); color:#fff; padding:6px 14px 6px 8px;
border-radius:var(--radius-pill); font-size:.8rem; font-weight:600; margin-bottom:1.2rem;
}
.hero-badge b{background:var(--teal); border-radius:var(--radius-pill); padding:2px 9px; font-size:.72rem; letter-spacing:.04em}
.hero-top{display:grid; grid-template-columns:1.08fr .92fr; gap:46px; align-items:center; margin-bottom:28px}
.hero-panel{
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.17);
border-radius:var(--radius-lg); padding:20px; backdrop-filter:blur(6px);
}
.hero-panel h2{
color:#fff; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase;
opacity:.78; margin-bottom:14px; font-weight:700;
}
.mini-job{
display:flex; gap:12px; align-items:center; padding:11px 13px; border-radius:12px;
background:rgba(255,255,255,.95); margin-bottom:10px;
}
.mini-job:last-child{margin-bottom:0}
.mini-job .job-logo{width:38px; height:38px; flex:0 0 38px; font-size:.8rem; border-radius:10px}
.mini-job b{display:block; font-size:.87rem; color:var(--ink); line-height:1.3; font-weight:600}
.mini-job em{font-style:normal; font-size:.77rem; color:var(--muted)}
.mini-job .pill{
margin-left:auto; font-size:.69rem; font-weight:700; color:var(--teal-dark);
background:rgba(15,160,126,.13); padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap;
}
.hero-panel .foot{
display:block; margin-top:13px; font-size:.8rem; color:rgba(255,255,255,.72); text-align:center;
}
.hero-panel .foot:hover{color:#fff}
/* search bar */
.job-search{
background:#fff; border-radius:var(--radius-lg); padding:12px; box-shadow:var(--shadow-lg);
display:grid; grid-template-columns:1fr 1fr auto; gap:10px; max-width:900px;
}
.job-search .field{display:flex; align-items:center; gap:9px; padding:6px 12px; border-radius:10px; background:var(--bg-soft)}
.job-search .field svg{flex:0 0 18px; color:var(--muted)}
.job-search input,.job-search select{
border:0; background:transparent; font-family:inherit; font-size:.95rem; color:var(--ink);
width:100%; padding:8px 0; outline:none;
}
.hero-links{margin-top:20px; display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.hero-links span{color:rgba(255,255,255,.7); font-size:.86rem; margin-right:4px}
.chip{
display:inline-block; padding:6px 14px; border-radius:var(--radius-pill); font-size:.84rem;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff;
}
.chip:hover{background:rgba(255,255,255,.22); color:#fff}
/* page header (interior) */
.page-head{background:var(--bg-navy-soft); border-bottom:1px solid var(--line); padding:34px 0 38px}
.page-head h1{margin-bottom:.35em}
.page-head .lede{font-size:1.05rem; color:var(--body); max-width:75ch; margin-bottom:0}
.breadcrumbs{font-size:.83rem; color:var(--muted); margin-bottom:.9rem}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--navy)}
.breadcrumbs span{margin:0 7px; opacity:.5}
/* ---------- cards ---------- */
.card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
padding:24px; transition:.16s ease;
}
.card:hover{box-shadow:var(--shadow-md); border-color:#D3DEEA}
.cat-card{display:block; color:inherit}
.cat-card:hover{color:inherit; transform:translateY(-2px)}
.cat-card .icon{
width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
background:var(--bg-navy-soft); color:var(--navy-600); margin-bottom:14px; font-size:1.25rem;
}
.cat-card h3{font-size:1.03rem; margin-bottom:.35em}
.cat-card p{font-size:.88rem; color:var(--muted); margin-bottom:.8em}
.cat-card .count{font-size:.8rem; font-weight:700; color:var(--teal-dark)}
/* ---------- job cards ---------- */
.job-list{display:flex; flex-direction:column; gap:14px}
.job-card{
position:relative; background:#fff; border:1px solid var(--line);
border-radius:var(--radius); padding:20px 22px; transition:.16s ease;
}
.job-card:hover{border-color:var(--navy-600); box-shadow:var(--shadow-md)}
.job-card:focus-within{border-color:var(--navy-600); box-shadow:var(--shadow-md)}
.job-card-top{display:flex; gap:16px; align-items:flex-start}
.job-logo{
width:48px; height:48px; flex:0 0 48px; border-radius:11px; display:grid; place-items:center;
background:var(--bg-navy-soft); color:var(--navy); font-weight:800; font-size:1rem; letter-spacing:-.02em;
}
.job-card-text{flex:1; min-width:0}
.job-card h3{font-size:1.08rem; margin-bottom:.2em; color:var(--ink); line-height:1.35}
.job-card h3 a{color:inherit}
/* stretched link: the whole card is one tap target, but the markup stays honest */
.job-card h3 a::after{content:''; position:absolute; inset:0; z-index:1}
.job-card:hover h3 a{color:var(--navy-600)}
.job-company{font-size:.9rem; color:var(--muted); margin:0}
/* the side rail holds the posted date and a real, separately focusable button */
.job-card-side{
display:flex; flex-direction:column; align-items:flex-end; gap:10px;
flex:0 0 auto; position:relative; z-index:2;
}
.job-card-side .btn{white-space:nowrap}
/* facts row — salary is the number people scan for, so it leads visually */
.job-facts{
display:flex; flex-wrap:wrap; gap:6px 18px; margin:13px 0 0; padding:0;
list-style:none; font-size:.87rem; color:var(--body);
}
.job-facts li{display:flex; align-items:center; gap:6px; margin:0}
.job-facts svg{flex:0 0 15px; color:var(--muted)}
.job-facts .job-salary{font-weight:700; color:var(--teal-dark)}
.job-facts .job-salary svg{color:var(--teal-dark)}
.job-meta{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:.85rem; color:var(--body)}
.job-meta em{font-style:normal; color:var(--muted)}
.job-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.tag{
font-size:.75rem; font-weight:600; padding:4px 11px; border-radius:var(--radius-pill);
background:var(--bg-soft); color:var(--body); border:1px solid var(--line-soft);
}
.tag-teal{background:rgba(15,160,126,.1); color:var(--teal-dark); border-color:rgba(15,160,126,.2)}
.tag-navy{background:var(--bg-navy-soft); color:var(--navy-600); border-color:#DCE6F2}
.tag-coral{background:rgba(210,67,31,.09); color:var(--coral-dark); border-color:rgba(210,67,31,.2)}
.job-posted{font-size:.78rem; color:var(--muted); white-space:nowrap}
/* ---------- listing layout ---------- */
.listing{display:grid; grid-template-columns:274px 1fr; gap:34px; align-items:start}
.filters{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px;
position:sticky; top:92px;
}
/* On mobile the sidebar becomes a collapsible drawer instead of a wall of
checkboxes the user has to scroll past to reach a single job. */
.filters > summary{display:none}
.filter-actions{margin-top:20px}
.filter-group{border:0; padding:0; margin:0; min-width:0}
.filter-group + .filter-group{margin-top:22px; padding-top:22px; border-top:1px solid var(--line-soft)}
.filter-group legend{
font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
margin-bottom:.9em; padding:0; font-weight:600; float:left; width:100%;
}
.filter-group legend + *{clear:both}
.filter-group label{display:flex; align-items:center; gap:9px; font-size:.9rem; margin-bottom:9px; cursor:pointer}
.filter-group input[type=checkbox]{width:16px; height:16px; accent-color:var(--teal); flex:0 0 16px}
.results-bar{
display:flex; align-items:center; justify-content:space-between; gap:14px;
margin-bottom:14px; flex-wrap:wrap;
}
/* active filter chips — every applied filter is visible and removable in one tap */
.active-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.active-filters:empty{display:none}
.chip-filter{
display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 14px;
border-radius:var(--radius-pill); background:var(--bg-navy-soft);
border:1px solid #DCE6F2; color:var(--navy); font-size:.83rem; font-weight:600;
}
.chip-filter button{
border:0; background:rgba(12,36,64,.1); color:var(--navy); cursor:pointer;
width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
font-size:.95rem; line-height:1; padding:0; font-family:inherit;
}
.chip-filter button:hover{background:var(--navy); color:#fff}
.chip-clear{
display:inline-flex; align-items:center; padding:6px 14px; border-radius:var(--radius-pill);
background:transparent; border:1px dashed var(--line); color:var(--muted);
font-size:.83rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.chip-clear:hover{border-color:var(--coral); color:var(--coral); border-style:solid}
.results-bar p{margin:0; font-size:.92rem; color:var(--muted)}
.results-title{margin:0; font-size:.92rem; font-weight:400; color:var(--muted); letter-spacing:0; line-height:1.5}
.results-bar strong{color:var(--ink)}
.no-results{
display:none; text-align:center; padding:48px 24px; border:1px dashed var(--line);
border-radius:var(--radius-lg); background:var(--bg-soft);
}
/* ---------- job detail ---------- */
.job-detail{display:grid; grid-template-columns:1fr 330px; gap:38px; align-items:start}
.job-hero{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
margin-bottom:26px;
}
/* key facts sit above the fold instead of being buried in the sidebar */
.job-keyfacts{
display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin:20px 0 0;
padding:0; list-style:none; background:var(--line-soft);
border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
}
.job-keyfacts li{margin:0; padding:13px 16px; background:#fff}
.job-keyfacts span{
display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted); font-weight:700; margin-bottom:3px;
}
.job-keyfacts b{font-size:.93rem; color:var(--ink); font-weight:700}
.job-keyfacts .is-salary b{color:var(--teal-dark)}
.job-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
/* sticky apply bar — mobile only, so the CTA is never scrolled away */
.apply-bar{
display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
border-top:1px solid var(--line); padding:11px 16px calc(11px + env(safe-area-inset-bottom));
gap:12px; align-items:center; box-shadow:0 -4px 18px rgba(12,36,64,.08);
}
.apply-bar .apply-meta{flex:1; min-width:0}
.apply-bar .apply-meta b{
display:block; font-size:.86rem; color:var(--ink); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
}
.apply-bar .apply-meta span{font-size:.78rem; color:var(--teal-dark); font-weight:700}
.job-body h2{font-size:1.25rem; margin-top:2rem}
.job-body h2:first-child{margin-top:0}
.job-aside{position:sticky; top:92px; display:flex; flex-direction:column; gap:18px}
.aside-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px}
.aside-card h3{font-size:.95rem; margin-bottom:1em}
.spec-list{list-style:none; margin:0; padding:0}
.spec-list li{display:flex; justify-content:space-between; gap:14px; font-size:.88rem; padding:9px 0; border-bottom:1px solid var(--line-soft)}
.spec-list li:last-child{border-bottom:0}
.spec-list span{color:var(--muted)}
.spec-list b{color:var(--ink); font-weight:600; text-align:right}
/* ---------- feature / trust ---------- */
.trust-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft); padding:26px 0}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.trust-grid .trust-num{font-size:1.5rem; font-weight:700; color:var(--navy); margin:0 0 .15em; letter-spacing:-.02em; line-height:1.25}
.trust-grid p{font-size:.85rem; color:var(--muted); margin:0}
.feature{display:flex; gap:15px; align-items:flex-start}
.feature .icon{
width:42px; height:42px; flex:0 0 42px; border-radius:11px; display:grid; place-items:center;
background:rgba(15,160,126,.11); color:var(--teal-dark); font-size:1.15rem;
}
.feature h3{font-size:1rem; margin-bottom:.3em}
.feature p{font-size:.9rem; color:var(--muted); margin:0}
/* comparison table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff}
table.tbl{width:100%; border-collapse:collapse; min-width:560px}
table.tbl th,table.tbl td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line-soft); font-size:.92rem}
table.tbl th{background:var(--bg-navy-soft); color:var(--navy); font-weight:700; font-size:.85rem; letter-spacing:.02em}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.yes{color:var(--teal-dark); font-weight:600}
table.tbl td.no{color:var(--muted)}
/* pricing */
.price-card{display:flex; flex-direction:column; height:100%}
.price-card.featured{border-color:var(--navy); box-shadow:var(--shadow-lg); position:relative}
.price-card.featured::before{
content:'Most popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
background:var(--navy); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; padding:5px 14px; border-radius:var(--radius-pill); white-space:nowrap;
}
.price{font-size:2.1rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.1}
.price small{font-size:.85rem; font-weight:500; color:var(--muted); letter-spacing:0}
.price-card ul{list-style:none; padding:0; margin:18px 0 22px; font-size:.9rem}
.price-card ul li{padding-left:26px; position:relative; margin-bottom:.6em}
.price-card ul li::before{content:'✓'; position:absolute; left:0; color:var(--teal); font-weight:800}
.price-card .btn{margin-top:auto}
/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.field-row{display:flex; flex-direction:column; gap:6px}
.field-row.full{grid-column:1/-1}
.field-row label{font-size:.87rem; font-weight:600; color:var(--ink)}
.field-row label .req{color:var(--coral)}
.field-row input,.field-row select,.field-row textarea{
font-family:inherit; font-size:.95rem; color:var(--ink); padding:11px 14px;
border:1.5px solid var(--line); border-radius:10px; background:#fff; width:100%;
}
.field-row textarea{min-height:130px; resize:vertical}
.field-row input:focus,.field-row select:focus,.field-row textarea:focus{border-color:var(--teal); outline:none}
.field-row .hint{font-size:.79rem; color:var(--muted)}
.form-note{font-size:.82rem; color:var(--muted)}
/* Inline submit feedback. Left border rather than a full tinted panel, so the
message reads as a status on the form and not as a new content block.
Colours come from the contrast-checked palette — see BRAND.md. */
.form-notice{grid-column:1/-1; margin:14px 0 0; padding:11px 14px 11px 16px;
border-left:3px solid var(--muted); border-radius:0 6px 6px 0;
background:#F2F6FB; font-size:.86rem; line-height:1.5; color:var(--body)}
.form-notice.is-ok{border-left-color:var(--teal-btn); background:#EEF9F6; color:#0A5A4C}
.form-notice.is-err{border-left-color:var(--coral-dark); background:#FEF3F0; color:#7C2D12}
.form-notice.is-info{border-left-color:var(--navy-600)}
/* ---------- FAQ ---------- */
.faq details{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
padding:0; margin-bottom:12px; overflow:hidden;
}
.faq summary{
padding:17px 22px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none;
display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:.98rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--teal-dark); font-size:1.3rem; font-weight:400; line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq .faq-body{padding:17px 22px; font-size:.94rem}
.faq .faq-body p:last-child{margin-bottom:0}
/* ---------- CTA band ---------- */
.cta-band{
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-600) 100%); color:#fff;
border-radius:var(--radius-lg); padding:44px 46px; display:flex; gap:30px;
align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cta-band h2{color:#fff; margin-bottom:.35em}
.cta-band p{color:rgba(255,255,255,.82); margin:0; max-width:56ch}
.cta-band .actions{display:flex; gap:12px; flex-wrap:wrap}
/* ---------- link cloud ---------- */
.link-cloud{display:flex; flex-wrap:wrap; gap:9px}
.link-cloud a{
font-size:.87rem; padding:7px 15px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff; color:var(--body);
}
.link-cloud a:hover{border-color:var(--navy-600); color:var(--navy-600); background:var(--bg-navy-soft)}
/* ---------- footer ---------- */
.site-footer{background:var(--navy-800); color:rgba(255,255,255,.72); padding:56px 0 0; margin-top:0}
.site-footer h2{color:#fff; font-size:.83rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:1.1em}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:34px}
.site-footer a{color:rgba(255,255,255,.72); font-size:.9rem}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer ul li{margin-bottom:.6em}
.footer-brand .logo{color:#fff; margin-bottom:14px}
.footer-brand p{font-size:.9rem; color:rgba(255,255,255,.6); max-width:38ch}
.footer-contact{font-size:.88rem; line-height:1.75; color:rgba(255,255,255,.66)}
.footer-contact strong{color:#fff; font-weight:600}
.socials{display:flex; gap:10px; margin-top:16px}
.socials a{
width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
background:rgba(255,255,255,.08); color:#fff; font-size:.8rem; font-weight:700;
}
.socials a:hover{background:var(--teal)}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding:20px 0;
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem;
}
.footer-bottom nav{display:flex; gap:18px; flex-wrap:wrap}
/* ---------- utilities ---------- */
.notice{
background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412; border-radius:var(--radius);
padding:14px 18px; font-size:.9rem; margin-bottom:20px;
}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose ul li{margin-bottom:.55em}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:12px; z-index:200; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--shadow-md)}
/* ---------- responsive ---------- */
@media (max-width:1100px){
.drop-mega{width:min(680px,calc(100vw - 32px))}
.drop-cols{grid-template-columns:1fr 1fr}
.job-keyfacts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
.g4{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}
.listing{grid-template-columns:1fr}
.filters{position:static; padding:0; border-radius:var(--radius)}
/* collapsed drawer on small screens */
.filters > summary{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:15px 20px; cursor:pointer; list-style:none; font-weight:600;
color:var(--ink); font-size:.95rem;
}
.filters > summary::-webkit-details-marker{display:none}
.filters > summary::after{content:'+'; font-size:1.4rem; color:var(--teal-dark); line-height:1}
.filters[open] > summary::after{content:'\2013'}
.filters[open] > summary{border-bottom:1px solid var(--line-soft)}
.filters > summary .filter-count{
margin-left:auto; margin-right:6px; background:var(--navy); color:#fff;
border-radius:var(--radius-pill); font-size:.72rem; padding:2px 9px; font-weight:700;
}
.filters > summary .filter-count:empty{display:none}
.filters .filter-group{padding:20px}
.filters .filter-group + .filter-group{margin-top:0; padding-top:20px}
.job-detail{grid-template-columns:1fr}
.job-aside{position:static}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.job-search{grid-template-columns:1fr}
.hero-top{grid-template-columns:1fr; gap:26px}
.hero-panel{display:none}
.trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
.nav-toggle{display:flex}
.main-nav{
display:none; position:absolute; top:72px; left:0; right:0; background:#fff;
border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
padding:12px 20px 20px; gap:2px; box-shadow:var(--shadow-lg); max-height:calc(100vh - 72px); overflow:auto;
}
.main-nav.open{display:flex}
.main-nav a{padding:11px 12px}
.drop{position:static; display:block; box-shadow:none; border:0; padding:0 0 0 12px; min-width:0}
.drop a{font-size:.87rem; padding:7px 12px}
.has-drop > a::after{display:none}
.header-cta{margin:12px 0 0; flex-direction:column; align-items:stretch}
.header-cta .btn{width:100%}
}
@media (max-width:820px){
.apply-bar{display:flex}
body:has(.apply-bar){padding-bottom:78px}
}
@media (max-width:620px){
.drop-cols{grid-template-columns:1fr}
.job-keyfacts{grid-template-columns:1fr 1fr}
.job-card-top{flex-wrap:wrap}
.job-card-side{
flex-direction:row; align-items:center; justify-content:space-between;
width:100%; order:9; margin-top:14px; padding-top:14px;
border-top:1px solid var(--line-soft);
}
.job-card-side .btn{flex:0 0 auto}
.section{padding:46px 0}
.g2,.g3,.g4{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.cta-band{padding:30px 24px}
.trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media print{
.site-header,.site-footer,.job-aside,.cta-band{display:none}
body{font-size:12pt}
}
/* ==========================================================================
BLOG — "HR Insights"
Article layout, table of contents, post cards. Colours are the same
contrast-checked tokens as the rest of the site; see BRAND.md.
========================================================================== */
/* Alternating band, used between an article and its related posts. */
.section-alt{background:var(--bg-soft, #F2F6FB); border-top:1px solid var(--line)}
/* Category / hub chips. Distinct from .chip, which is white-on-transparent
for dark hero backgrounds and would be invisible here. */
.chip-row{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px}
.chip-cat{
display:inline-block; padding:7px 15px; border-radius:var(--radius-pill);
font-size:.83rem; font-weight:500; color:var(--navy-600);
background:#EEF3FA; border:1px solid #DCE6F2;
}
.chip-cat:hover{background:var(--navy); border-color:var(--navy); color:#fff}
/* ---------- post cards ---------- */
.post-card{display:flex; flex-direction:column; gap:9px; padding:24px}
.post-card h3{font-size:1.06rem; line-height:1.35; margin:0; color:var(--ink)}
.post-card p{margin:0; font-size:.9rem; color:var(--body); flex:1}
.post-card:hover h3{color:var(--navy-600)}
.post-cat{
align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.07em;
text-transform:uppercase; color:var(--teal-dark);
}
.post-meta{font-size:.8rem; color:var(--muted)}
/* ---------- article header ---------- */
.post-head{background:var(--bg-navy-soft); border-bottom:1px solid var(--line); padding:38px 0 34px}
.post-head h1{margin:.12em 0 .3em; max-width:22ch}
.post-head .lede{max-width:62ch; color:var(--body)} /* explicit: never inherit a hero colour */
.post-byline{display:flex; align-items:center; gap:13px; margin:22px 0 0; font-size:.9rem}
.post-byline .avatar{
flex:0 0 42px; width:42px; height:42px; border-radius:50%;
display:grid; place-items:center; font-size:.82rem; font-weight:700;
background:var(--navy); color:#fff;
}
/* The second flex item carries BOTH lines. Previously the name, a
and the
date sat directly in the flex container, so flex laid them out as three items
in one row — the name and the date on the same misaligned line, with a 13px
gap where the line break should have been. */
.post-byline-text{display:block; line-height:1.45}
.post-byline-text strong{display:block; color:var(--ink); font-weight:700}
.post-byline-text .post-meta{display:block}
/* ---------- table of contents ---------- */
.toc{
margin:0 0 34px; padding:20px 24px; border-radius:10px;
background:#F2F6FB; border:1px solid #DCE6F2;
}
.toc-title{font-size:.74rem !important; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted); margin:0 0 11px !important}
.toc ol{margin:0; padding-left:19px; font-size:.92rem}
.toc li{margin-bottom:6px; color:var(--body)}
.toc li:last-child{margin-bottom:0}
/* The TOC lives inside .post-body, whose "underline every link" rule has
equal specificity and appears later. Qualify these so a numbered list of
headings does not render as six underlined lines. */
.post-body .toc a{color:var(--navy-600); text-decoration:none}
.post-body .toc a:hover{text-decoration:underline}
.toc .toc-sub{margin-left:14px; font-size:.87rem; list-style:circle}
/* ---------- article body ---------- */
.post-body{padding:44px 0 20px}
.post-body > h2{font-size:1.42rem; line-height:1.3; margin:2em 0 .55em; color:var(--navy)}
.post-body > h2:first-of-type{margin-top:0}
.post-body > h3{font-size:1.09rem; margin:1.7em 0 .45em; color:var(--ink)}
.post-body p{font-size:1.02rem; line-height:1.72; margin:0 0 1.15em; color:var(--body)}
.post-body ul,.post-body ol{margin:0 0 1.3em; padding-left:24px}
.post-body li{font-size:1.02rem; line-height:1.68; margin-bottom:.55em; color:var(--body)}
.post-body li::marker{color:var(--teal-dark)}
.post-body strong{color:var(--ink); font-weight:600}
.post-body a{color:var(--navy-600); text-decoration:underline; text-underline-offset:2px}
.post-body a:hover{color:var(--coral-dark)}
/* A button placed in prose is still an , and the blanket underline above
turned every call to action inside page or article content into an underlined
pill. Buttons and arrow links opt out. */
.post-body a.btn,.page-content a.btn,.composed a.btn,
.post-body a.link-arrow,.page-content a.link-arrow,.composed a.link-arrow{text-decoration:none}
.post-body a.btn:hover,.page-content a.btn:hover,.composed a.btn:hover{text-decoration:none}
.post-body a.link-arrow:hover,.page-content a.link-arrow:hover,
.composed a.link-arrow:hover{text-decoration:underline}
.page-content a.btn,.post-body a.btn,.composed a.btn{color:var(--cta-ink)}
.page-content a.btn:hover,.post-body a.btn:hover,.composed a.btn:hover{color:var(--cta-ink)}
.post-body code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
background:#F2F6FB; border:1px solid #E3E9F0; border-radius:4px; padding:1px 5px;
}
.post-body hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}
/* Pull-quote. Left rule rather than a tinted panel, so it reads as emphasis
inside the article rather than as a separate block. */
.post-body blockquote{
margin:1.8em 0; padding:4px 0 4px 22px; border-left:3px solid var(--teal);
}
.post-body blockquote p{
font-size:1.08rem; line-height:1.6; color:var(--ink); font-style:italic; margin:0 0 .6em;
}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body .table-wrap{margin:0 0 1.6em; overflow-x:auto}
.post-body table{width:100%; border-collapse:collapse; font-size:.93rem}
.post-body th,.post-body td{
padding:10px 13px; text-align:left; border:1px solid var(--line); vertical-align:top;
}
.post-body th{background:#F2F6FB; color:var(--navy); font-weight:600; font-size:.86rem}
.post-body td{color:var(--body)}
/* ---------- hub cross-links at the end of a post ---------- */
.post-hubs{margin:42px 0 0; padding-top:26px; border-top:1px solid var(--line)}
.post-hubs-title{
font-size:.74rem !important; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted); margin:0 0 13px !important;
}
.post-hubs .chip-row{margin-bottom:0}
@media (max-width:640px){
.post-body{padding:30px 0 12px}
.post-body > h2{font-size:1.24rem}
.post-head h1{max-width:none}
}
/* Centred hero, used by the content-mode homepage. The portal hero was a two
column layout with a job panel on the right; without that panel a left
aligned hero leaves half the band empty at desktop widths. */
.hero-centred{text-align:center}
.hero-centred .wrap{max-width:860px}
.hero-centred h1{margin-left:auto; margin-right:auto; max-width:16ch}
.hero-centred .hero-sub{margin-left:auto; margin-right:auto; max-width:60ch}
.hero-centred .hero-actions{
display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 0;
}
.hero-centred .hero-note{
margin:20px 0 0; font-size:.87rem; color:rgba(255,255,255,.72);
}
@media (max-width:560px){
.hero-centred h1{max-width:none}
.hero-centred .hero-actions .btn{width:100%}
}
/* ==========================================================================
WordPress-specific additions.
Everything above is the static build's stylesheet, unchanged. Everything
below exists because WordPress emits markup the static generator never did.
========================================================================== */
/* --- core alignment + block output --- */
.page-content > *{max-width:100%}
.alignwide{max-width:min(1100px,100%); margin-left:auto; margin-right:auto}
.alignfull{max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw}
.aligncenter{margin-left:auto; margin-right:auto}
.alignleft{float:left; margin:0 1.4rem 1rem 0}
.alignright{float:right; margin:0 0 1rem 1.4rem}
.wp-caption-text,.wp-element-caption{font-size:.86rem; color:var(--muted); margin-top:.5rem}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
/* Block-editor content inherits the article typography so pages and posts match. */
.page-content h2{margin-top:2.2rem}
.page-content h3{margin-top:1.6rem}
.page-content ul,.page-content ol{padding-left:1.3em}
.page-content table{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.95rem}
.page-content th,.page-content td{border:1px solid var(--line); padding:.7rem .85rem; text-align:left; vertical-align:top}
.page-content th{background:var(--bg-soft); font-weight:600; color:var(--ink)}
.page-content blockquote{margin:1.8rem 0; padding:.2rem 0 .2rem 1.2rem; border-left:3px solid var(--teal); color:var(--ink)}
.page-content a{text-decoration:underline; text-underline-offset:2px}
/* --- homepage pieces the static build rendered inline --- */
.hero-note{margin-top:1rem; font-size:.92rem; color:rgba(255,255,255,.82)}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:1.4rem}
.centred{text-align:center}
.section-navy{background:var(--navy); color:#fff}
.section-navy h2{color:#fff}
.section-navy p{color:rgba(255,255,255,.86); max-width:62ch; margin-left:auto; margin-right:auto}
.section-head-h2{font-size:1.15rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:1.2rem}
.link-arrow{font-weight:600}
/* --- card meta line, which WordPress can populate and the static build could not --- */
.post-card-meta{display:block; margin-top:.7rem; font-size:.84rem; color:var(--muted)}
/* --- pagination --- */
.pagination{display:flex; gap:8px; justify-content:center; margin-top:2.4rem; flex-wrap:wrap}
.pagination .page-numbers{
display:inline-flex; align-items:center; justify-content:center;
min-width:40px; height:40px; padding:0 12px;
border:1px solid var(--line); border-radius:var(--radius);
color:var(--navy-600); font-weight:600; font-size:.95rem;
}
.pagination .page-numbers:hover{border-color:var(--teal); color:var(--teal-dark)}
.pagination .page-numbers.current{background:var(--navy); border-color:var(--navy); color:#fff}
.pagination .dots{border:0}
/* --- search form --- */
.search-form{display:flex; gap:8px; margin-top:1.6rem}
.search-form label{flex:1}
.search-form .search-field{
width:100%; padding:.7rem .9rem; border:1px solid var(--line);
border-radius:var(--radius); font:inherit; color:var(--ink);
}
.search-form .search-field:focus{outline:3px solid var(--teal); outline-offset:1px}
.search-form .search-submit{
padding:.7rem 1.1rem; border:0; border-radius:var(--radius);
background:var(--navy); color:#fff; font:inherit; font-weight:600; cursor:pointer;
}
.search-form .search-submit:hover{background:var(--navy-800)}
/* --- admin bar offset so the sticky header does not hide under it --- */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
/* --- live jobs module ---------------------------------------------------
Rendered by the HR Job World Setup plugin from the job board's sitemap.
Deliberately a list, not a card grid: these are pointers to another site,
and dressing them up as rich local listings would misrepresent where the
vacancy actually lives.
---------------------------------------------------------------------- */
.jobs-module .job-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
@media (min-width:760px){.jobs-module .job-list{grid-template-columns:1fr 1fr}}
.jobs-module .job-row a{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:14px 16px; background:#fff; border:1px solid var(--line);
border-radius:var(--radius); color:var(--ink); font-weight:600; line-height:1.35;
transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.jobs-module .job-row a:hover{
border-color:var(--teal); box-shadow:var(--shadow-sm); transform:translateY(-1px); color:var(--ink);
}
.jobs-module .job-row a:focus-visible{outline:3px solid var(--teal); outline-offset:2px}
.jobs-module .job-title{flex:1; font-size:.98rem}
.jobs-module .job-exp{
flex:0 0 auto; font-size:.78rem; font-weight:600; letter-spacing:.02em;
color:var(--teal-dark); background:#E8F6F3; border-radius:var(--radius-pill);
padding:.25rem .6rem; white-space:nowrap;
}
.jobs-module .jobs-note{margin-top:.7rem; font-size:.86rem; color:var(--muted)}
/* ==========================================================================
Component styles for the WordPress-only pieces.
Everything above is the static site's stylesheet, which was built, reviewed
and served live. Nothing below overrides its layout, container widths, section
padding or heading alignment — those are the parts I broke by "improving" them
without being able to see the result. These rules only style markup the static
build never had.
========================================================================== */
/* --- CTA colour: coral to brand teal -------------------------------------- */
.main-nav .header-cta .btn,
.main-nav .header-cta .btn:hover,
.main-nav .header-cta .btn:focus{color:#fff}
/* --- navy band ------------------------------------------------------------ */
.section-navy{background:var(--navy); color:#fff}
.section-navy h2,.section-navy h3{color:#fff}
.section-navy p{color:rgba(255,255,255,.86)}
.section-navy .card{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18)}
.centred{text-align:center}
.link-arrow{font-weight:600}
/* --- breadcrumbs ---------------------------------------------------------- */
.breadcrumbs{border-bottom:1px solid var(--line-soft); background:#fff}
.breadcrumbs ol{list-style:none; margin:0; padding:11px 0; display:flex; flex-wrap:wrap;
gap:.35rem .5rem; font-size:.84rem; color:var(--muted)}
.breadcrumbs li{display:flex; align-items:center; gap:.5rem}
.breadcrumbs li + li::before{content:"/"; color:var(--line)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--teal-dark)}
.breadcrumbs [aria-current="page"]{color:var(--ink); font-weight:600}
/* --- live jobs list ------------------------------------------------------- */
.jobs-module .job-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
@media (min-width:760px){.jobs-module .job-list{grid-template-columns:1fr 1fr}}
.jobs-module .job-row a{display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
color:var(--ink); font-weight:600; line-height:1.35}
.jobs-module .job-row a:hover{border-color:var(--teal); box-shadow:var(--shadow-sm); color:var(--ink)}
.jobs-module .job-title{flex:1; font-size:.98rem}
.jobs-module .job-exp{flex:0 0 auto; font-size:.78rem; font-weight:600; color:var(--teal-dark);
background:#E8F6F3; border-radius:var(--radius-pill); padding:.25rem .6rem; white-space:nowrap}
.jobs-module .jobs-note{margin-top:.7rem; font-size:.86rem; color:var(--muted)}
/* --- browse grids --------------------------------------------------------- */
.browse-grid{list-style:none; margin:0; padding:0; display:grid; gap:10px;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.browse-grid a{display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:12px 15px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
color:var(--ink); font-weight:600; font-size:.94rem}
.browse-grid a:hover{border-color:var(--teal); color:var(--ink)}
.browse-grid .browse-arrow{color:var(--teal-dark); flex:0 0 auto}
/* --- empty state ---------------------------------------------------------- */
.empty-state{border:1px dashed var(--line); border-radius:var(--radius-lg);
padding:28px 24px; text-align:center; background:var(--bg-soft)}
.empty-state h3{margin-bottom:.5rem}
.empty-state p{color:var(--body); max-width:52ch; margin-left:auto; margin-right:auto}
/* --- direct answer + FAQ -------------------------------------------------- */
.answer-lead{font-size:1.06rem; color:var(--ink)}
.faq details{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:#fff}
.faq summary{cursor:pointer; padding:15px 18px; font-weight:600; color:var(--ink);
list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--teal-dark); font-size:1.25rem; flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0; padding:0 18px 16px; color:var(--body)}
/* --- four-up grid, reviews ------------------------------------------------ */
.grid.g4{display:grid; gap:22px; grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid.g4{grid-template-columns:1fr}}
.benefit-grid h3{font-size:1.02rem; margin-bottom:.4rem}
.benefit-grid p{font-size:.94rem; margin:0}
.review-card blockquote{margin:0 0 1rem; padding:0; border:0}
.review-card blockquote p{font-size:1rem; color:var(--ink); margin:0}
.review-card figcaption{font-size:.88rem; color:var(--muted)}
.review-flag{display:block; font-size:.78rem; color:var(--coral-dark); font-style:normal; font-weight:600}
/* --- inline CTA band ------------------------------------------------------ */
.cta-band{display:flex; align-items:center; justify-content:space-between; gap:24px;
flex-wrap:wrap; padding:26px; background:var(--navy); color:#fff; border-radius:var(--radius-lg)}
.cta-band h3{color:#fff; margin-bottom:.4rem; font-size:1.15rem}
.cta-band p{color:rgba(255,255,255,.86); margin:0; max-width:56ch; font-size:.96rem}
.cta-band-actions{display:flex; gap:10px; flex-wrap:wrap; flex:0 0 auto}
@media (max-width:700px){.cta-band{flex-direction:column; align-items:stretch}
.cta-band-actions .btn{width:100%}}
/* --- featured images ------------------------------------------------------ */
.post-card .card-media{display:block; margin:-18px -18px 14px;
border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; aspect-ratio:16/9; background:var(--bg-soft)}
.post-card .card-media img{width:100%; height:100%; object-fit:cover; display:block}
.post-hero{margin:0 0 2rem}
.post-hero img{width:100%; height:auto; border-radius:var(--radius-lg); display:block}
.post-hero figcaption{margin-top:.6rem; font-size:.86rem; color:var(--muted); text-align:center}
/* --- cookie bar ----------------------------------------------------------- */
.cookie-bar{position:fixed; left:0; right:0; bottom:0; z-index:60;
background:var(--navy); color:#fff; box-shadow:0 -6px 24px rgba(12,36,64,.18)}
.cookie-inner{display:flex; align-items:center; justify-content:space-between;
gap:18px; padding:14px 20px; flex-wrap:wrap}
.cookie-bar p{margin:0; font-size:.92rem; color:rgba(255,255,255,.9); max-width:70ch}
.cookie-bar a{color:#fff; text-decoration:underline}
.cookie-actions{display:flex; gap:10px; flex:0 0 auto}
@media (max-width:620px){.cookie-inner{flex-direction:column; align-items:stretch}
.cookie-actions .btn{flex:1}}
/* --- blog rail ------------------------------------------------------------ */
@media (min-width:900px){
.blog-rail{display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start}
.rail{position:sticky; top:96px}
}
.rail h3{font-size:1rem; margin-bottom:.7rem}
.rail ul{list-style:none; margin:0 0 1.6rem; padding:0}
.rail li{margin-bottom:.6rem; font-size:.93rem; line-height:1.45}
/* --- pagination and search form ------------------------------------------- */
.pagination{display:flex; gap:8px; justify-content:center; margin-top:2.4rem; flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center;
min-width:40px; height:40px; padding:0 12px; border:1px solid var(--line);
border-radius:var(--radius); color:var(--navy-600); font-weight:600; font-size:.95rem}
.pagination .page-numbers.current{background:var(--navy); border-color:var(--navy); color:#fff}
.search-form{display:flex; gap:8px; margin-top:1.6rem}
.search-form label{flex:1}
.search-form .search-field{width:100%; padding:.7rem .9rem; border:1px solid var(--line);
border-radius:var(--radius); font:inherit}
.search-form .search-submit{padding:.7rem 1.1rem; border:0; border-radius:var(--radius);
background:var(--navy); color:#fff; font:inherit; font-weight:600; cursor:pointer}
/* --- admin bar offset ----------------------------------------------------- */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
/* --------------------------------------------------------------------------
Loose prose on a section-composed page.
Hub pages, the browse indexes and the homepage emit their content raw, so each
shortcode can render a full-width band with its own container. Anything the
editor typed OUTSIDE a shortcode — an intro paragraph, a list — has no
container at all and renders flush to the viewport edge, running under the
scrollbar with no gutter. That is what it was doing on /hr-jobs-by-category/.
Only stray top-level elements are constrained. `.composed > section` is
untouched, so the bands stay full width.
-------------------------------------------------------------------------- */
.composed > p,
.composed > ul,
.composed > ol,
.composed > h2,
.composed > h3,
.composed > h4,
.composed > blockquote,
.composed > figure,
.composed > table{max-width:var(--wrap); margin-left:auto; margin-right:auto;
padding-left:20px; padding-right:20px}
/* Loose prose immediately after the page-head band needs its own breathing room —
it has no section padding to inherit. */
.composed > p:first-child,
.composed > ul:first-child,
.composed > ol:first-child,
.composed > h2:first-child,
.composed > h3:first-child{margin-top:40px}
.composed > p:last-child,
.composed > ul:last-child,
.composed > ol:last-child{margin-bottom:40px}
/* Loose prose that follows a band needs its own top margin — the band's padding
sits inside the band, so without this the heading butts straight up against the
edge of the grey. Sections that follow loose prose are fine; they bring their
own padding-top. */
.composed > section + p,
.composed > section + h2,
.composed > section + h3,
.composed > section + h4,
.composed > section + ul,
.composed > section + ol,
.composed > section + blockquote,
.composed > section + table{margin-top:44px}
/* --------------------------------------------------------------------------
Footer: five columns, not four.
The static site's footer had four (brand, disciplines, insights, company). The
WordPress footer adds a fifth — HR jobs by location — but the grid template was
never updated, so the fifth column wrapped onto a second row underneath the
brand and left a wide empty gap beside it.
Brand column stays widest because it carries the blurb; the two job-link
columns are the narrowest because their items are short.
-------------------------------------------------------------------------- */
.footer-grid{grid-template-columns:1.35fr 1.05fr 1.05fr 1.3fr 1fr; gap:28px}
@media (max-width:1100px){
/* Two columns, with the brand spanning the full width above them. Five items
over three columns strands "Company" alone on a third row; four link columns
over two rows fills exactly. */
.footer-grid{grid-template-columns:repeat(2,1fr); gap:28px 40px}
.footer-brand{grid-column:1 / -1; margin-bottom:8px}
.footer-brand p{max-width:60ch}
}
@media (max-width:640px){
.footer-grid{grid-template-columns:1fr}
.footer-brand{grid-column:auto}
}
/* Editor-only notice above unverified placeholder reviews. Deliberately loud —
it should be impossible to mistake the placeholder section for live content. */
.review-notice{background:#FFF4E5; border:1px solid #F5C77E; color:#6B4A12;
border-radius:var(--radius); padding:.7rem .9rem; font-size:.88rem; margin-bottom:22px}
/* ==========================================================================
CALLS TO ACTION — one button, everywhere.
What was wrong: `.btn-primary` was declared twice (coral, then teal) and then
re-declared white inside `.hero`, `.section-navy`, `.cta-band` and
`.cookie-bar`. So the same class rendered teal on white sections and white on
navy ones — the site had no single recognisable action colour, which is what
read as "odd even".
The reason for those overrides was real: the old muted teal (#087E6B) sat too
close to the navy to be visible on a navy band. The fix is not more overrides,
it is one colour that works on both.
BRAND TEAL #0C9B84 WITH NAVY TEXT. Measured, not guessed:
navy text on teal fill 4.50:1 AA for body-size text
teal fill on white bg 3.48:1 AA for non-text UI contrast
teal fill on navy bg 4.50:1 clearly a button on the dark bands
White text on this teal is only 3.48:1 and fails, which is why the label is
navy rather than white. It also happens to be the logo colour, so the CTA and
the mark now agree.
Hover brightens rather than darkens — on a navy band a darker hover reads as
the button receding. #14C39A keeps navy text at 6.93:1.
========================================================================== */
:root{
--cta:#0C9B84;
--cta-hover:#14C39A;
--cta-ink:#0C2440;
}
.btn-primary,
.hero .btn-primary,
.section-navy .btn-primary,
.cta-band .btn-primary,
.cookie-bar .btn-primary,
.header-cta .btn-primary,
.main-nav .btn-primary{
background:var(--cta);
color:var(--cta-ink);
border-color:var(--cta);
font-weight:700;
}
.btn-primary:hover,
.hero .btn-primary:hover,
.section-navy .btn-primary:hover,
.cta-band .btn-primary:hover,
.cookie-bar .btn-primary:hover,
.header-cta .btn-primary:hover,
.main-nav .btn-primary:hover{
background:var(--cta-hover);
border-color:var(--cta-hover);
color:var(--cta-ink);
}
/* The legacy variants from the static build. Nothing in the theme uses them any
more, but aliasing rather than deleting means a stray one in hand-written page
content still matches the rest of the site instead of reintroducing coral. */
.btn-teal,.btn-navy,.btn-white{
background:var(--cta); color:var(--cta-ink); border-color:var(--cta); font-weight:700;
}
.btn-teal:hover,.btn-navy:hover,.btn-white:hover{
background:var(--cta-hover); border-color:var(--cta-hover); color:var(--cta-ink);
}
/* Secondary. A ghost button genuinely has to follow its background or it becomes
invisible — but it does that through `currentColor`, so there is one rule for
light surfaces and one for dark, not five ad-hoc overrides. */
.btn-ghost{
background:transparent;
color:var(--navy);
border-color:currentColor;
opacity:.85;
}
.btn-ghost:hover{
background:rgba(12,36,64,.06);
color:var(--navy);
opacity:1;
}
.hero .btn-ghost,
.section-navy .btn-ghost,
.cta-band .btn-ghost,
.cookie-bar .btn-ghost,
.btn-outline-white{
color:#fff;
border-color:currentColor;
background:transparent;
opacity:.9;
}
.hero .btn-ghost:hover,
.section-navy .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.cookie-bar .btn-ghost:hover,
.btn-outline-white:hover{
background:rgba(255,255,255,.14);
color:#fff;
opacity:1;
}
/* Focus ring picks up the CTA colour so keyboard users get the same visual
language as hover. */
.btn:focus-visible{outline:3px solid var(--cta-hover); outline-offset:3px}
/* ---------- job finder ----------
Master-detail, like Hays: list left, preview right. Filtering happens in the
browser against roles already on the page, so there is no loading state to
design for and no new URL for Google to crawl. */
.finder-controls{
display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px;
margin:0 0 22px; align-items:end;
}
.finder-field{display:flex; flex-direction:column; gap:6px}
.finder-field > span{
font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
color:var(--muted);
}
.finder-field input,.finder-field select{
width:100%; padding:11px 13px; font:inherit; font-size:.94rem; color:var(--ink);
background:#fff; border:1px solid var(--line); border-radius:9px;
}
.finder-field input:focus,.finder-field select:focus{
outline:2px solid var(--teal-dark); outline-offset:1px; border-color:transparent;
}
.finder-count{font-size:.85rem; color:var(--muted); margin:0 0 12px}
.finder-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:24px; align-items:start}
.finder-list{
list-style:none; margin:0; padding:0;
max-height:640px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius-lg);
background:#fff;
}
.finder-item{border-bottom:1px solid var(--line-soft)}
.finder-item:last-child{border-bottom:0}
/* The HTML hidden attribute is display:none in the UA stylesheet, and ANY author
rule that sets display beats it. Without this the filter updates the count but
every row stays on screen — which looks like the filter is simply broken. */
.finder-item[hidden]{display:none}
.finder-item-link{
display:flex; flex-direction:column; gap:6px; padding:15px 18px;
text-decoration:none; border-left:3px solid transparent;
}
.finder-item-link:hover{background:var(--bg-navy-soft)}
.finder-item.is-selected .finder-item-link{
background:var(--bg-navy-soft); border-left-color:var(--teal-dark);
}
.finder-item-title{color:var(--navy-600); font-weight:600; font-size:.97rem; line-height:1.35}
.finder-meta{display:flex; gap:14px; font-size:.82rem; color:var(--muted)}
.finder-detail{
position:sticky; top:96px; max-height:calc(100vh - 130px); overflow-y:auto; padding:26px 28px;
border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff;
}
.fd-title{margin:0 0 18px; font-size:1.22rem; line-height:1.3; color:var(--ink)}
.fd-rows{margin:0 0 22px; display:grid; grid-template-columns:auto 1fr; gap:10px 20px}
.fd-row{display:contents}
.fd-rows dt{
font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
color:var(--muted); margin:0;
}
.fd-rows dd{margin:0; font-size:.94rem; color:var(--body)}
.fd-summary{
margin:0 0 20px; font-size:.93rem; line-height:1.6; color:var(--body);
padding-top:18px; border-top:1px solid var(--line-soft);
}
.fd-actions{margin:0 0 14px}
.fd-note{margin:0; font-size:.84rem; color:var(--muted)}
.finder-empty{margin:18px 0 0; color:var(--muted)}
@media (max-width:1100px){
.finder-controls{grid-template-columns:repeat(2,1fr)}
}
/* Below this the preview pane is dropped entirely and each row is a plain link
to the board — a pane on a phone means scrolling past the whole list to reach
it, which is worse than simply opening the job. */
@media (max-width:900px){
.finder-layout{grid-template-columns:1fr}
.finder-detail{display:none !important}
.finder-list{max-height:none}
}
@media (max-width:560px){
.finder-controls{grid-template-columns:1fr}
}