/* ══════════════════════════════════════════════════════════════════════
HACKAJOB-DERIVED THEME — blog + company directory
----------------------------------------------------------------------
The palette AND the geometry of hackajob.com/talent/blog, both read
off the live page with getComputedStyle at a 1440 viewport — not
sampled from a screenshot, which is colour-managed and lies by a few
points, and cannot be measured for grid tracks at all.
Loaded AFTER site.css, so it overrides at equal specificity. It stays
a separate opt-in file so that the pages built to this reference carry
it and the rest of the site keeps its own look — the theme is a
deliberate choice per page, not a sitewide repaint.
MEASURED — COLOUR
ground #1c1c1c warm near-black, not a navy
card #2c2c2c
ink on light #141414 muted #656565 / #6e6e6e
green #1ef596 meta, tags, bylines
blue #465af1 chips and links (deep #1032cf)
hero cyan #a5f5fb · hero pink #ffbeff
type Space Grotesk 400/500/700
MEASURED — GEOMETRY (the part a screenshot cannot give you)
container max-width 1140, padding 20 → 1100 of content
hero grid 530px + 530px, gap 40, align center
h1 88px / 92.4px / 700 ← was 60 here
hero copy headline only. NO lead paragraph.
featured 1100 wide; meta strip 45 tall; then image 545×308
beside content 550 wide
three-up cards 347 wide, gap 30
card meta 12/20 · image FULL BLEED, no inset · content 20
count "301 posts" 14px #6e6e6e, no mono, no uppercase
pagination 16px #6e6e6e
CTA panels padding 40, border-radius 0 0 60px
TWO DELIBERATE DEPARTURES
· Their green is #1ef596, Nebryx's --brand is #2fe39b. Two points
apart, same job, so the brand token stays ours — swapping it
changes nothing visible while making the action colour a copy.
To take theirs, set --bl-green to #1ef596; it is wired already.
· Their hero art is a 438×469 photograph with object-fit:fill.
Ours is a drawing with its own proportions, so it keeps them
rather than being squeezed into their crop.
══════════════════════════════════════════════════════════════════════ */
body.nx{
--bl-ground:#1c1c1c;
--bl-card:#2c2c2c;
--bl-ink:#141414;
--bl-mu:#6e6e6e;
--bl-green:#2fe39b; /* theirs: #1ef596 */
--bl-blue:#465af1;
--bl-blue-dp:#1032cf;
--bl-cyan:#a5f5fb;
--bl-pink:#ffbeff;
/* /jobs is on a newer sheet than /companies and /blog: a slightly
different green, and two greys the older pages never use. */
--jb-green:#2fe39b; /* theirs: #1ef398 */
--jb-field:#242424;
--jb-line:#393939;
--jb-hair:#272929;
/* 1140 with 20 of padding is 1100 of content — every number below is
measured against that column, so it has to come first. */
--max:1140px;
--gut:20px;
}
/* ── the opening ───────────────────────────────────────────────────── */
body.nx .hero-blog{background:var(--bl-ground);padding-bottom:clamp(40px,5vw,72px);}
/* Flat. Their opening has no gradient mesh, and the blooms the rest of
this site uses are the loudest thing separating the two. */
body.nx .hero-blog .hero-bg{background:none;}
body.nx .hero-blog .hero-in{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:40px;align-items:center;
}
body.nx .hero-blog h1{
margin:16px 0 0;max-width:none;
font-size:clamp(44px,6.1vw,88px);line-height:1.05;
font-weight:700;letter-spacing:-.01em;
}
/* Their headline runs two flat colours, one per line — not a gradient.
The word-splitter wraps each word in its own inline-block, so the
colour has to be restated on .word or only the first one takes it. */
body.nx .hero-blog h1,
body.nx .hero-blog h1 .word{
color:var(--bl-cyan);background:none;-webkit-text-fill-color:currentColor;
}
body.nx .hero-blog h1 em,
body.nx .hero-blog h1 em .word{
background:none;-webkit-background-clip:border-box;background-clip:border-box;
color:var(--bl-pink);-webkit-text-fill-color:var(--bl-pink);
}
/* Their hero is a headline and a picture, full stop. The standfirst is
hidden rather than deleted: the markup lives in a file this theme does
not own, and it still serves the page description and any reader who
turns stylesheets off. */
body.nx .hero-blog .lead{display:none;}
body.nx .hero-art{border-radius:0;box-shadow:none;}
/* ── filters ───────────────────────────────────────────────────────── */
body.nx .btools{align-items:center;margin-bottom:18px;}
body.nx .bchips{max-width:727px;}
body.nx .bchip{
border-radius:100px;padding:5px 12px;font-size:14px;font-weight:500;
color:var(--bl-blue);border-color:var(--bl-blue);background:transparent;
}
body.nx .bchip:hover{background:rgba(70,90,241,.08);border-color:var(--bl-blue-dp);}
body.nx .bchip.on{background:var(--bl-blue);border-color:var(--bl-blue);color:#fff;}
body.nx .bcount{
margin:0 0 12px;font-family:inherit;font-size:14px;font-weight:400;
letter-spacing:normal;text-transform:none;color:var(--bl-mu);
}
body.nx .bsearch input{border-radius:0;border-color:#d8dde4;color:var(--bl-ink);}
/* ── the cards ─────────────────────────────────────────────────────
Square, and the picture runs edge to edge. Those two together are
what separates an editorial card from a SaaS card — a 16px radius
with the image inset by 16px reads as a dashboard tile. */
body.nx .bfeat,
body.nx .bcard,
body.nx .bcta > div{
background:var(--bl-card);border:0;border-radius:0;
--acc:var(--bl-green);
}
body.nx .bfeat:hover,
body.nx .bcard:hover{transform:none;box-shadow:none;outline:1px solid var(--bl-green);}
body.nx .bstrip{
padding:12px 20px;background:transparent;border-bottom:0;
font-family:inherit;font-size:13px;font-weight:400;letter-spacing:normal;
color:var(--bl-green);
}
body.nx .bpanel{border-radius:0;}
body.nx .btags,
body.nx .by{color:var(--bl-green);font-weight:400;font-size:13px;}
body.nx .by{padding-top:14px;}
body.nx .bgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;}
body.nx .bcard .bpanel{margin:0;} /* full bleed */
body.nx .bbody{padding:20px;}
body.nx .bcard h3{margin:0 0 4px;font-size:16px;font-weight:500;line-height:1.4;color:#fff;}
/* the one that leads: meta across the top, then picture beside copy */
body.nx .bfeat{margin-bottom:30px;}
body.nx .bfeat-in{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:0;padding:0;align-items:center;
}
body.nx .bfeat-txt{padding:20px;}
body.nx .bfeat h2{margin:0 0 10px;font-size:22px;font-weight:500;line-height:1.25;color:#fff;}
body.nx .bfeat p{margin:0 0 12px;font-size:15px;line-height:1.6;color:#b9bfc7;}
/* ── pagination ────────────────────────────────────────────────────── */
body.nx .bpage{gap:4px;}
body.nx .bpage button{
border-radius:0;border:0;font-size:16px;font-weight:400;color:var(--bl-mu);
}
body.nx .bpage button:hover:not([disabled]){color:var(--bl-ink);background:transparent;}
body.nx .bpage button.on{
background:var(--bl-green);color:var(--bl-ink);font-weight:500;
}
/* ── the closing panels ────────────────────────────────────────────
The one flourish in their whole system: a single 60px corner,
bottom-right, on an otherwise square panel. */
body.nx .band-dark{background:var(--bl-ground);}
body.nx .bcta{gap:24px;}
body.nx .bcta > div{padding:40px;border-radius:0 0 60px 0;}
body.nx .bcta h2{color:#fff;font-weight:500;}
body.nx .bcta p{color:#b9bfc7;}
body.nx .sticky-cta{background:var(--bl-ground);border-top-color:var(--bl-card);}
body.nx .sticky-cta b{color:var(--bl-green);}
/* ── one article ───────────────────────────────────────────────────── */
body.nx .post h1{font-size:clamp(32px,4.4vw,48px);line-height:1.05;letter-spacing:-.01em;}
body.nx .post-tags,
body.nx .post-back{color:var(--bl-blue);}
body.nx .post-meta{font-family:inherit;font-size:14px;letter-spacing:normal;color:var(--bl-mu);}
body.nx .post-rule{border-top-color:#e2e6ea;}
body.nx .post-banner{border-radius:0;}
body.nx .post .gbody h2{font-size:24px;font-weight:700;line-height:1.6;}
body.nx .post .gbody h3{font-size:22px;font-weight:500;}
body.nx .post .gbody a{color:var(--bl-blue);}
body.nx .post .gbody blockquote{border-left-color:var(--bl-blue);}
body.nx .more-h{font-weight:500;}
@media (max-width:860px){
body.nx .hero-blog .hero-in{grid-template-columns:minmax(0,1fr);}
}
/* ══════════════════════════════════════════════════════════════════════
THE COMPANY DIRECTORY
----------------------------------------------------------------------
Measured off hackajob.com/companies at 1440, same method:
ground #1c1c1c on every section, top to bottom
container max-width 1360, padding 20 → 1320 of content
hero flex: 672 of copy left, a 350×350 square right
h1 82 / 700 / lh 92.66 / #ffbeff ← pink, not white
standfirst 19.2 / 400 / lh 30.72 / #ffffff
search 672×52, radius 8, 1px #465af1, transparent, white text
label above it: 14 / 500, 8px clear
listing three columns of 427, gap 20
card #2c2c2c, padding 40, radius 0 0 60px 0, 20 below
logo 80×80
name 19.2 / 600 / #ffbeff
button 18 / 300 / #1ef596, 2px solid #1ef596, pad 8/16, radius 0
The 60px bottom-right corner is the same flourish the blog's closing
panels use — one rounded corner on an otherwise square card is the
whole signature of this system.
══════════════════════════════════════════════════════════════════════ */
body.nx .dir{background:var(--bl-ground);color:#fff;}
body.nx .dir .wrap{max-width:1360px;padding-inline:20px;}
/* ── the opening ───────────────────────────────────────────────────── */
body.nx .dir-hero{padding:calc(var(--nav) + clamp(24px,3vw,48px)) 0 clamp(40px,5vw,64px);}
body.nx .dir-hero-in{
display:flex;gap:clamp(24px,4vw,60px);align-items:flex-start;
justify-content:space-between;
}
body.nx .dir-copy{flex:1 1 672px;max-width:672px;}
body.nx .dir-hero h1{
margin:0 0 16px;max-width:none;
font-size:clamp(40px,5.7vw,82px);line-height:1.13;font-weight:700;
letter-spacing:-.01em;color:var(--bl-pink);
background:none;-webkit-text-fill-color:var(--bl-pink);
}
body.nx .dir-hero .lead{
margin:0;max-width:none;font-size:19.2px;font-weight:400;line-height:30.72px;color:#fff;
}
body.nx .dir-art{flex:0 0 350px;width:350px;height:350px;display:block;border-radius:0;}
body.nx .dir-search{margin-top:32px;max-width:672px;}
body.nx .dir-search > span{
display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:#fff;
}
body.nx .dir-search .field{position:relative;}
body.nx .dir-search input{
width:100%;height:52px;padding:12px 50px 12px 16px;
border:1px solid var(--bl-blue);border-radius:8px;
background:transparent;color:#fff;font:inherit;font-size:16px;
}
body.nx .dir-search input::placeholder{color:#8b93a1;}
body.nx .dir-search input:focus{outline:2px solid var(--bl-blue);outline-offset:1px;}
body.nx .dir-search .ico{
position:absolute;right:16px;top:50%;transform:translateY(-50%);
color:var(--bl-blue);pointer-events:none;
}
/* ── the listing ───────────────────────────────────────────────────── */
body.nx .dir-list{padding:0 0 clamp(48px,6vw,88px);}
body.nx .dir-count{
margin:0 0 20px;font-size:14px;font-weight:400;color:#9aa2ad;
}
body.nx .dir-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px;
}
body.nx .dir-card{
display:flex;flex-direction:column;padding:40px;
background:var(--bl-card);border:0;border-radius:0 0 60px 0;
color:#fff;text-decoration:none;
}
body.nx .dir-logo{
width:80px;height:80px;display:grid;place-items:center;overflow:hidden;
background:#1c1c1c;border-radius:0;margin-bottom:20px;
}
body.nx .dir-logo img{width:100%;height:100%;object-fit:cover;display:block;}
body.nx .dir-logo b{font-size:28px;font-weight:700;color:var(--bl-pink);}
body.nx .dir-card h2{
margin:0 0 6px;font-size:19.2px;font-weight:600;line-height:1.3;color:var(--bl-pink);
}
body.nx .dir-meta{
margin:0 0 14px;font-size:15px;font-weight:300;line-height:1.5;color:#c4cad3;
}
body.nx .dir-about{
margin:0 0 20px;font-size:15px;font-weight:300;line-height:1.55;color:#9aa2ad;
}
body.nx .dir-open{
margin:0 0 20px;font-size:15px;font-weight:400;color:var(--bl-green);
}
/* Their outline button: 2px, square, and the label sits on the accent
rather than on a fill. */
body.nx .dir-btn{
align-self:flex-start;margin-top:auto;padding:8px 16px;
border:2px solid var(--bl-green);border-radius:0;background:transparent;
color:var(--bl-green);font-size:18px;font-weight:300;line-height:1;
text-decoration:none;transition:background .15s,color .15s;
}
body.nx .dir-btn:hover{background:var(--bl-green);color:var(--bl-ink);}
body.nx .dir-empty{
padding:40px;background:var(--bl-card);border-radius:0 0 60px 0;
}
body.nx .dir-empty h2{margin:0 0 8px;font-size:19.2px;font-weight:600;color:var(--bl-pink);}
body.nx .dir-empty p{margin:0;font-size:15px;font-weight:300;line-height:1.6;color:#9aa2ad;}
@media (max-width:900px){
body.nx .dir-hero-in{flex-direction:column;}
body.nx .dir-art{flex:0 0 auto;width:100%;max-width:350px;height:auto;aspect-ratio:1;}
}
/* ── the nav over a dark opening ────────────────────────────────────
site.css flips the bar to its light-on-dark tokens for `.hero-dark`
via :has(). This page's opening is `.dir-hero`, so the bar kept its
dark ink and the whole menu disappeared into the ground. Stated here
rather than added to site.css's selector so that opting into this
theme brings its own nav handling with it — one , nothing else
to remember. */
body.nx:has(.dir-hero) .nav,
body.nx:has(.up-hero) .nav,
body.nx:has(.roles-hero) .nav{--nav-fg:#e8edf6;--nav-mark:var(--brand);}
body.nx:has(.dir-hero) .wordmark .wm-rest,
body.nx:has(.up-hero) .wordmark .wm-rest,
body.nx:has(.roles-hero) .wordmark .wm-rest{opacity:0;}
body.nx:has(.dir-hero) .wordmark .wm-alt,
body.nx:has(.up-hero) .wordmark .wm-alt,
body.nx:has(.roles-hero) .wordmark .wm-alt{opacity:1;}
body.nx:has(.dir-hero) .burger,
body.nx:has(.up-hero) .burger,
body.nx:has(.roles-hero) .burger{border-color:rgba(255,255,255,.22);}
/* ── pagination, and the two panels that close the page ─────────────
Measured off hackajob.com/companies at 1440:
section #1c1c1c, padding 40 0
row grid 648 + 648, gap 24 (= the 1320 column)
panel #2c2c2c, padding 40, radius 0 0 60px 0
heading 37.6 / 700 / lh 60.16 / #ffffff
body 16 / 400 / lh 25.6 / #ffffff
button green fill, #1c1c1c label, 16/500, 0 24 pad, h44,
radius 100px ← a pill, unlike every other control here
pager current page: green fill, #1c1c1c, 0 12 pad, radius 8
the rest: white 16/500 */
body.nx .dir-page{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:40px;
}
body.nx .dir-page button{
min-width:36px;height:36px;padding:0 12px;border:0;border-radius:8px;
background:transparent;color:#fff;cursor:pointer;
font:inherit;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;
}
body.nx .dir-page button:hover:not([disabled]){color:var(--bl-green);}
body.nx .dir-page button.on{background:var(--bl-green);color:var(--bl-ground);}
body.nx .dir-page button[disabled]{opacity:.4;cursor:default;}
body.nx .dir-page .gap{color:#6e6e6e;}
body.nx .dir-cta{padding:40px 0 clamp(56px,7vw,96px);}
body.nx .dir-cta-row{
display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;
}
body.nx .dir-cta-box{
padding:40px;background:var(--bl-card);border-radius:0 0 60px 0;color:#fff;
}
body.nx .dir-cta-box h2{
margin:0 0 12px;font-size:clamp(26px,2.9vw,37.6px);line-height:1.2;
font-weight:700;letter-spacing:-.01em;color:#fff;
}
body.nx .dir-cta-box p{
margin:0 0 24px;font-size:16px;font-weight:400;line-height:25.6px;color:#fff;
}
body.nx .dir-cta-box .pill{
display:inline-flex;align-items:center;height:44px;padding:0 24px;
border:0;border-radius:100px;background:var(--bl-green);color:var(--bl-ground);
font-size:16px;font-weight:500;text-decoration:none;
}
body.nx .dir-cta-box .pill:hover{background:#5eead4;}
/* The page closes on the same ground it opened on. Nebryx already ships
.foot-dark for exactly this — the footer's own tokens flip, so every
link, rule and address inside it repaints without a single override
here. Only the wordmark has to be swapped: the dark-ink PNG is
invisible on #1c1c1c. */
body.nx .foot-dark{background:var(--bl-ground);}
body.nx .foot-dark .foot-mark img{content:url('/brand/nebryx-mint.png');}
/* ══════════════════════════════════════════════════════════════════════
LIVE ROLES
----------------------------------------------------------------------
Measured off hackajob.com/jobs at 1440. Worth knowing: this page is on
a NEWER design than /companies and /blog — the cards are rounded and
outlined rather than square and filled, and the green is a shade off
(#1ef398 against #1ef596). Both are reproduced as measured rather than
reconciled, because the difference is theirs, not a reading error.
container max-width 1280, padding 32 → 1216 of content
h1 56 / 700 / lh 58.8 / #ffffff
gradient linear-gradient(135deg,#1ef398 0%,#465af1 100%) on text
lead 19 / 400 / lh 30.4
input 514×48, #242424 on 1px #393939, radius 10, 15px
button 96×48, green fill, #1c1c1c label, 15/600, radius 12
steps 28px circle, #242424 on 1px #393939, green 11/600
layout grid 260 + 924, gap 32
rail title 15/600 · option 14/400 pad 6 0 · count 13/400
row padding 20, radius 16, 1px rgba(255,255,255,.14), gap 14
logo white, padding 6, radius 9, 1px #393939
title 19 / 700 · org 14 / 400 · posted 13 / 400
cta border-top 1px #272929, padding-top 14
apply green fill, 14/600, 0 20 pad, radius 12
pager current green on #1c1c1c radius 8; rest white at .6
══════════════════════════════════════════════════════════════════════ */
/* `.roles`, not `.jobs`: site.css already uses `.jobs` for the setup
step's list of confirmed employers, and a page-level class landing on
that rule shrank this whole page to its 620px max-width. `roles` is
the word the API and the models use anyway. */
body.nx .roles{background:var(--bl-ground);color:#fff;}
body.nx .roles .wrap{max-width:1280px;padding-inline:32px;}
/* ── the opening ───────────────────────────────────────────────────── */
body.nx .roles-hero{padding:calc(var(--nav) + clamp(20px,2.5vw,40px)) 0 clamp(28px,3vw,44px);}
body.nx .roles-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:#cdd3db;
}
body.nx .roles-eyebrow::before{
content:'';width:7px;height:7px;border-radius:50%;background:var(--jb-green);
}
body.nx .roles-hero h1{
margin:18px 0 0;max-width:none;
font-size:clamp(34px,3.9vw,56px);line-height:1.05;font-weight:700;
letter-spacing:-.01em;color:#fff;background:none;-webkit-text-fill-color:#fff;
}
body.nx .roles-hero h1 em{
font-style:normal;
background:linear-gradient(135deg,var(--jb-green) 0%,var(--bl-blue) 100%);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
body.nx .roles-hero .lead{
margin:18px 0 0;max-width:633px;
font-size:19px;font-weight:400;line-height:30.4px;color:#fff;
}
body.nx .roles-search{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
body.nx .roles-search input{
flex:0 1 514px;min-width:220px;height:48px;padding:12px 16px;
border:1px solid var(--jb-line);border-radius:10px;
background:var(--jb-field);color:#fff;font:inherit;font-size:15px;
}
body.nx .roles-search input::placeholder{color:#8b93a1;}
body.nx .roles-search input:focus{outline:2px solid var(--jb-green);outline-offset:1px;}
body.nx .roles-search button{
height:48px;padding:0 22px;border:1px solid transparent;border-radius:12px;
background:var(--jb-green);color:var(--bl-ground);cursor:pointer;
font:inherit;font-size:15px;font-weight:600;
}
body.nx .roles-search button:hover{background:#5eead4;}
body.nx .roles-steps{
display:flex;flex-wrap:wrap;gap:28px;margin-top:26px;
padding-top:22px;border-top:1px solid var(--jb-hair);
}
body.nx .roles-steps li{display:flex;align-items:center;gap:10px;font-size:16px;color:#fff;}
body.nx .roles-steps b{
flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;
background:var(--jb-field);border:1px solid var(--jb-line);
font-family:var(--mono);font-size:11px;font-weight:600;color:var(--jb-green);
}
/* ── filters beside results ────────────────────────────────────────── */
body.nx .roles-layout{
display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;
padding-bottom:clamp(56px,7vw,96px);align-items:start;
}
body.nx .roles-rail h2{
margin:0 0 14px;font-size:15px;font-weight:600;line-height:1.1;color:#fff;
}
body.nx .roles-rail fieldset{border:0;padding:0;margin:0 0 22px;}
body.nx .roles-rail legend{
padding:0;margin-bottom:6px;font-size:13px;font-weight:600;color:#9aa2ad;
}
body.nx .roles-opt{
display:flex;align-items:center;gap:9px;padding:6px 0;
font-size:14px;line-height:1.3;color:#fff;cursor:pointer;
}
body.nx .roles-opt input{accent-color:var(--jb-green);width:15px;height:15px;}
body.nx .roles-opt .n{margin-left:auto;font-size:13px;color:#9aa2ad;font-variant-numeric:tabular-nums;}
body.nx .roles-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:16px;font-size:16px;color:#fff;
}
body.nx .roles-toolbar select{
height:36px;padding:0 10px;border:1px solid var(--jb-line);border-radius:10px;
background:var(--jb-field);color:#fff;font:inherit;font-size:14px;
}
/* ── one role ──────────────────────────────────────────────────────── */
body.nx .roles-rows{display:grid;gap:14px;list-style:none;margin:0;padding:0;}
body.nx .job-row{
display:flex;flex-direction:column;gap:14px;padding:20px;
border:1px solid rgba(255,255,255,.14);border-radius:16px;background:transparent;
transition:border-color .16s;
}
body.nx .job-row:hover{border-color:var(--jb-green);}
body.nx .job-row__head{display:flex;gap:14px;align-items:flex-start;}
body.nx .fj-logo{
flex:none;width:46px;height:46px;display:grid;place-items:center;padding:6px;
background:#fff;border:1px solid var(--jb-line);border-radius:9px;overflow:hidden;
}
body.nx .fj-logo b{font-size:18px;font-weight:700;color:var(--bl-ground);}
body.nx .job-row__title{margin:0;font-size:19px;font-weight:700;line-height:1.3;color:#fff;}
body.nx .job-row__title a{color:inherit;text-decoration:none;}
body.nx .job-row__title a:hover{text-decoration:underline;}
body.nx .job-row__org{margin:2px 0 0;font-size:14px;font-weight:400;color:#c4cad3;}
body.nx .job-row__posted{margin-left:auto;flex:none;font-size:13px;color:#9aa2ad;}
body.nx .job-row__meta{
display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;color:#c4cad3;
}
body.nx .salary-chip{
padding:3px 10px;border-radius:999px;background:rgba(47,227,155,.12);
border:1px solid rgba(47,227,155,.35);color:var(--jb-green);font-size:13px;font-weight:500;
}
body.nx .job-row__summary{
margin:0;font-size:14px;line-height:1.55;color:#9aa2ad;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.nx .job-row__skills{display:flex;flex-wrap:wrap;gap:8px;}
body.nx .skill-chip{
padding:3px 10px;border-radius:999px;border:1px solid var(--jb-line);
background:var(--jb-field);color:#c4cad3;font-size:13px;
}
body.nx .job-row__cta{
display:flex;gap:10px;align-items:center;flex-wrap:wrap;
padding-top:14px;border-top:1px solid var(--jb-hair);
}
body.nx .job-row__cta .apply{
height:38px;display:inline-flex;align-items:center;padding:0 20px;
border:1px solid transparent;border-radius:12px;cursor:pointer;
background:var(--jb-green);color:var(--bl-ground);
font:inherit;font-size:14px;font-weight:600;text-decoration:none;
}
body.nx .job-row__cta .apply[disabled]{opacity:.5;cursor:default;}
body.nx .job-row__cta .view{
height:38px;display:inline-flex;align-items:center;padding:0 16px;
border:1px solid var(--jb-line);border-radius:12px;
color:#fff;font-size:14px;text-decoration:none;
}
body.nx .job-row__cta .view:hover{border-color:#fff;}
body.nx .roles-empty{
padding:40px;border:1px solid var(--jb-line);border-radius:16px;
}
body.nx .roles-empty h2{margin:0 0 8px;font-size:19px;font-weight:700;color:#fff;}
body.nx .roles-empty p{margin:0;font-size:14px;line-height:1.6;color:#9aa2ad;}
@media (max-width:900px){
body.nx .roles-layout{grid-template-columns:minmax(0,1fr);}
}
/* ══════════════════════════════════════════════════════════════════════
UPSKILL
----------------------------------------------------------------------
Measured off hackajob.com/talent/upskill at 1440.
hero #1c1c1c ground, h1 90 / 700 / #a5f5fb
rows white, padding 54 0, flex gap 40,
text column 463 · art 525, sides alternating
h2 68 / 500 / lh 65.96 / #1c1c1c
body 18 / 300 / lh 24.84
button 18 / 500, padding 8 20, radius 8, 2px border
dark band #1c1c1c, h3 60 / 500 / #ffffff, quote 24 / 300 / 30.96
card #2c2c2c, padding 50, radius 0
closing bar white, h3 60 / 500 / #1c1c1c
══════════════════════════════════════════════════════════════════════ */
body.nx .up-hero{
background:var(--bl-ground);color:#fff;
padding:calc(var(--nav) + clamp(28px,3.4vw,56px)) 0 clamp(36px,4vw,64px);
}
body.nx .up-hero .hero-bg{background:none;}
body.nx .up-hero h1{
margin:0;max-width:none;
font-size:clamp(48px,6.3vw,90px);line-height:1.03;font-weight:700;
letter-spacing:-.01em;color:var(--bl-cyan);
background:none;-webkit-text-fill-color:var(--bl-cyan);
}
body.nx .up-hero .lead{margin:18px 0 0;max-width:52ch;font-size:19px;color:#c4cad3;}
/* ── a row of prose beside a picture, sides alternating ───────────── */
body.nx .up-row{background:#fff;padding:clamp(36px,4vw,54px) 0;}
body.nx .up-grid{
display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:space-between;
}
body.nx .up-text{flex:1 1 463px;max-width:560px;}
body.nx .up-art{flex:1 1 480px;max-width:525px;}
body.nx .up-art img,
body.nx .up-art svg{width:100%;height:auto;display:block;border-radius:0;}
/* Every second row turns round. `row-reverse` rather than `order`, so the
reading order in the markup stays text-then-picture on a phone, where
the flex direction collapses to a column. */
body.nx .up-row:nth-of-type(even) .up-grid{flex-direction:row-reverse;}
body.nx .up-row h2{
margin:0 0 18px;
font-size:clamp(30px,4.7vw,68px);line-height:.97;font-weight:500;
letter-spacing:-.02em;color:var(--bl-ground);text-wrap:balance;
}
body.nx .up-row p{
margin:0 0 16px;font-size:18px;font-weight:300;line-height:24.84px;color:var(--bl-ground);
}
body.nx .up-btn{
display:inline-block;margin-top:8px;padding:8px 20px;border-radius:8px;
border:2px solid var(--bl-ground);background:transparent;color:var(--bl-ground);
font-size:18px;font-weight:500;line-height:1;text-decoration:none;
}
body.nx .up-btn:hover{background:var(--bl-ground);color:#fff;}
/* ── the dark band ─────────────────────────────────────────────────── */
body.nx .up-dark{background:var(--bl-ground);color:#fff;padding:clamp(48px,6vw,88px) 0;}
body.nx .up-dark h2{
margin:0 0 12px;
font-size:clamp(30px,4.2vw,60px);line-height:.96;font-weight:500;
letter-spacing:-.02em;color:#fff;text-wrap:balance;
}
body.nx .up-dark .lead{margin:0 0 32px;font-size:19px;font-weight:300;color:#c4cad3;}
/* the six weights, as a bar each — the numbers come from matching.py */
body.nx .up-weights{display:grid;gap:14px;max-width:660px;}
body.nx .up-weight{display:grid;grid-template-columns:150px 1fr 48px;gap:14px;align-items:center;}
body.nx .up-weight span{font-size:15px;font-weight:300;color:#fff;}
body.nx .up-weight .track{height:10px;border-radius:999px;background:rgba(255,255,255,.12);}
body.nx .up-weight .fill{height:100%;border-radius:999px;background:var(--bl-green,#2fe39b);}
body.nx .up-weight b{
font-size:15px;font-weight:500;color:var(--bl-green,#2fe39b);
text-align:right;font-variant-numeric:tabular-nums;
}
body.nx .up-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
body.nx .up-card{
padding:clamp(28px,3.4vw,50px);background:var(--bl-card);border-radius:0;
display:flex;flex-direction:column;
}
body.nx .up-card h3{margin:0 0 12px;font-size:24px;font-weight:500;color:#fff;}
body.nx .up-card p{margin:0 0 22px;font-size:16px;font-weight:300;line-height:1.55;color:#c4cad3;}
body.nx .up-card .up-btn{
margin-top:auto;align-self:flex-start;
border-color:var(--bl-green,#2fe39b);color:var(--bl-green,#2fe39b);
}
body.nx .up-card .up-btn:hover{background:var(--bl-green,#2fe39b);color:var(--bl-ground);}
/* ── the closing bar ───────────────────────────────────────────────── */
body.nx .up-ctabar{background:#fff;padding:clamp(40px,5vw,72px) 0;}
body.nx .up-ctabar .wrap{
display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
}
body.nx .up-ctabar h2{
margin:0;max-width:20ch;
font-size:clamp(28px,4.2vw,60px);line-height:.96;font-weight:500;
letter-spacing:-.02em;color:var(--bl-ground);
}
@media (max-width:820px){
body.nx .up-weight{grid-template-columns:120px 1fr 44px;}
body.nx .up-row:nth-of-type(even) .up-grid{flex-direction:row;}
}
/* ══════════════════════════════════════════════════════════════════════
ARIA — the employer product page
----------------------------------------------------------------------
Measured off hackajob.com/employer at 1440. The one structural
surprise: this page is WHITE end to end, where /blog, /companies,
/jobs and /upskill are all dark or part-dark. So the nav keeps its
default dark ink here and needs no :has() flip.
container max-width 1210, padding 15 → 1180 of content
hero centred. eyebrow 14/500 · h1 80 / 700 / lh 88
split padding 60 0, flex gap 80, text column 505,
art 463×376 radius 8, sides alternating
split h2 42 / 700 / lh 50.4, gradient-filled
split p 16 / 400 / lh 22.4
compare list items 16 / 400 / lh 22.4, 34px of icon gutter
══════════════════════════════════════════════════════════════════════ */
body.nx .aria{background:#fff;}
body.nx .aria .wrap{max-width:1210px;padding-inline:15px;}
/* ── the opening, centred ──────────────────────────────────────────── */
body.nx .aria-hero{
position:relative;overflow:hidden;isolation:isolate;
background:#fff;text-align:center;
padding:calc(var(--nav) + clamp(28px,3.4vw,56px)) 0 clamp(32px,4vw,60px);
}
/* The aqua wash behind the opening. Two 490px circles of #a5f5fb blurred
220px, one off the left edge and one off the right — measured on the
reference, and missed when this block was first written, which is why
the hero read flat white against theirs. Same device as .promo__frame
and .post__blob: circles under an overflow-clipped parent, never a
background gradient, because a gradient cannot fall off the edge.
The wrap is lifted above them; nothing else here needs a z-index. */
body.nx .aria-hero::before,
body.nx .aria-hero::after{
content:"";position:absolute;z-index:0;
width:490px;height:490px;border-radius:50%;
background:var(--bl-cyan);filter:blur(220px);pointer-events:none;
}
body.nx .aria-hero::before{top:80px;left:-216px;}
body.nx .aria-hero::after{top:425px;right:-216px;}
body.nx .aria-hero > .wrap{position:relative;z-index:1;}
@media (max-width:767px){
body.nx .aria-hero::before,
body.nx .aria-hero::after{width:320px;height:320px;filter:blur(150px);}
}
/* The label is a pill with gradient TEXT inside it — measured as
linear-gradient(90deg,#1ef398,#465af1) with background-clip:text and
no fill of its own. The pill around it is a hairline, not a chip. */
body.nx .aria-hero .eyebrow{
display:inline-block;margin:0 0 18px;padding:5px 14px;border-radius:999px;
border:1px solid var(--edge);background:var(--paper);
font-family:inherit;font-size:14px;font-weight:500;letter-spacing:normal;
text-transform:none;
background-image:none;
}
body.nx .aria-hero .eyebrow span{
background:linear-gradient(90deg,var(--jb-green) 0%,var(--bl-blue) 100%);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
/* The second phrase of the headline carries the same gradient. */
body.nx .aria-hero h1 em{
font-style:normal;
background:linear-gradient(90deg,var(--jb-green) 55%,var(--bl-blue) 92%);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
body.nx .aria-hero h1{
margin:0 auto;max-width:15ch;
font-size:clamp(36px,5.6vw,80px);line-height:1.1;font-weight:700;
letter-spacing:-.02em;color:var(--bl-ground);text-wrap:balance;
}
body.nx .aria-hero .lead{
margin:22px auto 0;max-width:62ch;
font-size:18px;font-weight:400;line-height:1.55;color:#3f4753;
}
body.nx .aria-hero .aria-cta{
display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;
}
/* The three lines under the opening. The reference puts scale metrics
here — 60% net-new, 9x conversion, live in days — as small ticked
labels at 12/500, not as big stat blocks. Ours say how the scorer is
BUILT rather than how big it is, because the second kind of claim
would be invented. */
body.nx .aria-checks{
display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
margin-top:clamp(22px,2.6vw,34px);
}
body.nx .aria-check{
display:inline-flex;align-items:center;gap:6px;
padding:5px 14px;border-radius:999px;
border:1px solid var(--edge);background:var(--paper);
font-size:12px;font-weight:500;line-height:1.33;color:var(--bl-ground);
}
body.nx .aria-check::before{
content:'';flex:none;width:13px;height:13px;background:var(--brand-dp);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* The media block under the opening: a 4px gradient rim, achieved by
padding a gradient-filled parent — not a border-image, which cannot
round its corners consistently across engines. */
body.nx .aria-media{
margin-top:clamp(30px,3.6vw,52px);padding:4px;border-radius:37px;
background:linear-gradient(90deg,var(--jb-green) 0%,var(--bl-blue) 100%);
}
body.nx .aria-media img{
display:block;width:100%;height:auto;border-radius:33px;background:#f7f9fb;
}
/* The primary button on this page is gradient-filled. */
body.nx .aria-hero .btn-primary,
body.nx .aria-split .btn-primary{
background:linear-gradient(88.63deg,var(--jb-green) 1%,var(--bl-cyan) 176%);
border:2px solid transparent;color:var(--bl-ground);
padding:8px 20px;border-radius:8px;font-size:18px;font-weight:500;
}
body.nx .aria-hero .btn:not(.btn-primary),
body.nx .aria-split .btn:not(.btn-primary){
background:transparent;border:2px solid var(--bl-ground);color:var(--bl-ground);
padding:8px 20px;border-radius:8px;font-size:18px;font-weight:500;
}
/* ── a centred section head ────────────────────────────────────────── */
body.nx .aria-intro{background:#fff;padding:clamp(36px,4.4vw,64px) 0;text-align:center;}
body.nx .aria-intro .eyebrow{
display:block;margin-bottom:14px;font-family:inherit;font-size:16px;font-weight:500;
letter-spacing:normal;text-transform:none;color:#5a6779;
}
body.nx .aria-intro h2{
margin:0 auto 16px;max-width:20ch;
font-size:clamp(28px,3.4vw,48px);line-height:1.1;font-weight:700;
letter-spacing:-.02em;color:var(--bl-ground);text-wrap:balance;
}
body.nx .aria-intro p{
margin:0 auto;max-width:70ch;font-size:16px;font-weight:400;line-height:22.4px;color:#3f4753;
}
/* ── prose beside a picture, sides alternating ─────────────────────── */
body.nx .aria-split{background:#fff;padding:clamp(36px,4.4vw,60px) 0;}
body.nx .aria-split__in{
display:flex;flex-wrap:wrap;gap:clamp(32px,5.6vw,80px);align-items:center;
justify-content:space-between;
}
body.nx .aria-split__text{flex:1 1 505px;max-width:505px;}
body.nx .aria-split__art{flex:1 1 420px;max-width:463px;}
body.nx .aria-split__art img,
body.nx .aria-split__art svg{width:100%;height:auto;display:block;border-radius:8px;}
body.nx .aria-split:nth-of-type(even) .aria-split__in{flex-direction:row-reverse;}
body.nx .aria-split .eyebrow{
display:block;margin-bottom:12px;font-family:inherit;font-size:16px;font-weight:500;
letter-spacing:normal;text-transform:none;
background:linear-gradient(120deg,var(--bl-blue) 0%,#0b9a68 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.nx .aria-split h2{
margin:0 0 16px;
font-size:clamp(26px,3vw,42px);line-height:1.2;font-weight:700;
letter-spacing:-.02em;color:var(--bl-ground);text-wrap:balance;
}
body.nx .aria-split p{
margin:0 0 14px;font-size:16px;font-weight:400;line-height:22.4px;color:#3f4753;
}
body.nx .aria-split .aria-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
/* ── the two columns that argue with each other ────────────────────── */
body.nx .aria-why{background:#fff;padding:clamp(36px,4.4vw,60px) 0;}
body.nx .aria-why__cols{
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:clamp(20px,2.6vw,36px);margin-top:clamp(26px,3vw,42px);
}
body.nx .aria-col{
padding:clamp(24px,2.8vw,36px);border-radius:var(--r);
border:1px solid var(--edge);background:var(--paper);
}
body.nx .aria-col--ours{border-color:color-mix(in srgb,var(--brand-dp) 40%,var(--edge));}
body.nx .aria-col h3{
margin:0 0 18px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--bl-ground);
}
body.nx .aria-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
body.nx .aria-col li{
position:relative;padding-left:34px;
font-size:16px;font-weight:400;line-height:22.4px;color:#3f4753;
}
body.nx .aria-col li::before{
content:'';position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
}
/* A cross for the old way, a tick for ours — masked SVG rather than an
icon font, so the two columns cannot drift out of vertical alignment
and the marks inherit their colour from the rule that sets them. */
body.nx .aria-col--theirs li::before{
background:#d97070;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
body.nx .aria-col--ours li::before{
background:var(--brand-dp);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
@media (max-width:820px){
body.nx .aria-split:nth-of-type(even) .aria-split__in{flex-direction:row;}
}
/* ── the partner strip ─────────────────────────────────────────────
Measured: label 18/500, track on a 40s linear infinite marquee.
The track is duplicated in the markup and translated by exactly -50%,
so the second copy is under the cursor at the moment the first one
leaves — that is what makes the loop seamless rather than snapping.
The copy is aria-hidden so a screen reader reads the list once. */
body.nx .strip{background:#fff;padding:clamp(28px,3.4vw,48px) 0;}
body.nx .strip p{
margin:0 0 22px;text-align:center;
font-size:18px;font-weight:500;color:var(--bl-ground);
}
body.nx .strip__win{
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
body.nx .strip__track{
display:flex;width:max-content;align-items:center;gap:clamp(36px,4.4vw,64px);
animation:strip-marquee 40s linear infinite;
}
body.nx .strip__win:hover .strip__track{animation-play-state:paused;}
body.nx .strip__item{
display:flex;align-items:center;gap:10px;flex:none;
font-size:19px;font-weight:600;letter-spacing:-.02em;color:#8c96a3;
white-space:nowrap;
}
body.nx .strip__item .dot{
width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
background:var(--paper-3);color:#6b7480;font-size:12px;font-weight:700;
}
@keyframes strip-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* A strip that slides forever is the kind of motion that makes some
people ill. Stopped, not hidden: the names still read. */
@media (prefers-reduced-motion:reduce){
body.nx .strip__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}
body.nx .strip__win{-webkit-mask-image:none;mask-image:none;}
}
/* ── the framed picture beside a split ─────────────────────────────
Three nested boxes, measured:
.aria-frame 545 wide, 40px of offset on the inner side
.aria-frame__card 505×418, white, 1px #e8e8e8, radius 12, pad 20,
shadow rgba(103,103,103,.08) 0 2px 4px
the image itself 463×376, radius 8
The tint behind it is a soft blob, one hue per row. */
body.nx .aria-frame{position:relative;flex:1 1 505px;max-width:545px;}
body.nx .aria-frame::before{
content:'';position:absolute;z-index:0;inset:-8% -6% -10% -6%;
border-radius:50%;filter:blur(46px);opacity:.55;
}
body.nx .aria-frame--pink::before{
background:radial-gradient(60% 60% at 60% 40%,#f0c8f5 0%,transparent 70%),
radial-gradient(55% 55% at 30% 70%,#c9c2f7 0%,transparent 72%);
}
body.nx .aria-frame--violet::before{
background:radial-gradient(60% 60% at 55% 40%,#cfc6f8 0%,transparent 70%),
radial-gradient(55% 55% at 25% 70%,#e3d3f7 0%,transparent 72%);
}
body.nx .aria-frame--aqua::before{
background:radial-gradient(60% 60% at 40% 40%,#a9eee6 0%,transparent 70%),
radial-gradient(55% 55% at 70% 70%,#bfe4f7 0%,transparent 72%);
}
/* The card is 505 inside a 545 holder, pushed to the outer edge — the
reference gets the same 40px offset with padding on the inner side.
Doing it as an auto margin keeps it correct when the row flips. */
body.nx .aria-frame__card{
position:relative;z-index:1;max-width:505px;
padding:20px;border-radius:12px;
background:#fff;border:1px solid #e8e8e8;
box-shadow:rgba(103,103,103,.08) 0 2px 4px 0;
}
body.nx .aria-frame--pink .aria-frame__card{margin-left:auto;} /* art sits right */
body.nx .aria-frame--aqua .aria-frame__card{margin-right:auto;} /* art sits left */
body.nx .aria-frame--violet .aria-frame__card{margin-left:auto;} /* art sits right */
body.nx .aria-frame__card img,
body.nx .aria-frame__card svg{
display:block;width:100%;height:auto;border-radius:8px;
}
/* ── the same frame with a rim, as /employer/right-to-work draws it ──
The soft blob above sits BEHIND the card, so on white it barely
reads. This modifier swaps it for the device `.esplit__frame` uses:
an oversized circle clipped by the card itself, blurred, sitting
under the picture. Measured there and reused verbatim — 400×400,
blur 50, top -22.6, and the circle pushed off the card's outer edge.
A modifier rather than a change to .aria-frame, because this frame
is shared with /employer/how-it-works and that page was not asked to
move. Adding --rim there is a one-word edit if it should.
The side follows the same nth-of-type parity that flips the row, so
the colour always lands on the outer edge — away from the prose —
however the rows alternate. */
body.nx .aria-frame--rim::before{display:none;} /* the soft blob steps aside */
body.nx .aria-frame--rim .aria-frame__card{overflow:hidden;}
body.nx .aria-frame--rim .aria-frame__card::before{
content:'';position:absolute;z-index:1;
width:400px;height:400px;border-radius:50%;filter:blur(50px);top:-22.6px;
}
body.nx .aria-split:nth-of-type(odd) .aria-frame--rim .aria-frame__card::before{right:-102px;}
body.nx .aria-split:nth-of-type(even) .aria-frame--rim .aria-frame__card::before{left:-74px;}
body.nx .aria-frame--rim.aria-frame--pink .aria-frame__card::before{
background:linear-gradient(87deg,#ffbeff 0%,#465af1 100%);
}
body.nx .aria-frame--rim.aria-frame--aqua .aria-frame__card::before{
background:linear-gradient(90deg,#1ef398 0%,#465af1 100%);
}
body.nx .aria-frame--rim.aria-frame--violet .aria-frame__card::before{
background:linear-gradient(87deg,#c9c2f7 0%,#465af1 100%);
}
/* the picture rides above the circle, not under it */
body.nx .aria-frame--rim .aria-frame__card img,
body.nx .aria-frame--rim .aria-frame__card svg{position:relative;z-index:2;}
/* ── the two columns, as cards ─────────────────────────────────────
Measured: card 544 wide, padding 40 20, radius 8, and a vertical
fade from transparent through rgba(244,244,244,.7) to #fafafa.
The eyebrow and the card heading are both gradient-filled text —
orange for the old way, brand green→blue for ours. */
body.nx .aria-compare{
display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:32px;margin-top:clamp(26px,3vw,42px);
}
body.nx .aria-cardw{padding:0;border-radius:10px;}
/* Ours gets the rim; the other card gets a hairline, so the pair reads
as a recommendation rather than as two neutral options. */
body.nx .aria-cardw--ours{
padding:2px;
background:linear-gradient(120deg,var(--jb-green) 0%,var(--bl-blue) 100%);
}
body.nx .aria-cardw--theirs{border:1px solid var(--edge);}
body.nx .aria-card{
padding:40px 20px;border-radius:8px;background:#fff;
background-image:linear-gradient(rgba(255,255,255,0) 0%,rgba(244,244,244,.7) 50%,#fafafa 100%);
height:100%;
}
body.nx .aria-card .eyebrow{
display:block;margin-bottom:10px;
font-family:inherit;font-size:16px;font-weight:400;letter-spacing:normal;
text-transform:none;
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
body.nx .aria-cardw--theirs .eyebrow{
background-image:linear-gradient(90deg,#ff4a00 0%,rgba(255,74,0,.7) 100%);
}
body.nx .aria-cardw--ours .eyebrow{
background-image:linear-gradient(90deg,var(--jb-green) 0%,var(--bl-blue) 100%);
}
body.nx .aria-card h3{
margin:0 0 20px;font-size:24px;font-weight:700;line-height:1.25;
letter-spacing:-.01em;color:var(--bl-ground);text-wrap:balance;
}
body.nx .aria-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
body.nx .aria-card li{
position:relative;padding-left:34px;
font-size:16px;font-weight:400;line-height:22.4px;color:#3f4753;
}
body.nx .aria-card li::before{
content:'';position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
}
body.nx .aria-cardw--theirs li::before{
background:#ff4a00;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
body.nx .aria-cardw--ours li::before{
background:var(--brand-dp);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ── the pull-quote card ───────────────────────────────────────────
Measured: frame 20px of padding at radius 60, card inside at radius
50 with 60/40 of padding, quote 32/700 on a 768 measure. Same rim
trick as the hero media — a padded gradient parent, not border-image,
which cannot round its corners consistently. */
body.nx .aria-quote{background:#fff;padding:clamp(36px,4.4vw,64px) 0;}
body.nx .aria-quote__frame{
padding:20px;border-radius:60px;
background:linear-gradient(120deg,#c9c2f7 0%,var(--jb-green) 55%,#a9eee6 100%);
}
body.nx .aria-quote__card{
padding:clamp(32px,4.2vw,60px) clamp(20px,2.8vw,40px);
border-radius:50px;background:#fff;text-align:center;
}
body.nx .aria-quote__text{
margin:0 auto;max-width:768px;
font-size:clamp(20px,2.3vw,32px);line-height:1.28;font-weight:700;
letter-spacing:-.02em;color:var(--bl-ground);text-wrap:balance;
}
body.nx .aria-quote__by{
display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;
margin-top:28px;
}
body.nx .aria-quote__by b{font-size:16px;font-weight:700;color:var(--bl-ground);}
body.nx .aria-quote__by span{font-size:14px;font-weight:400;color:#5a6779;}
/* ── the role roller ───────────────────────────────────────────────
A gradient-rimmed card: a fixed phrase on the left, and on the right
a column of roles that steps upward, the centred one lit.
The window is masked top and bottom so items fade rather than being
clipped mid-letter, and the track holds a second copy of the list so
the wrap has something to step into. The step itself is JS, not a CSS
animation, because the centre item has to be marked as it arrives and
CSS has no way to select "whichever child is currently centred". */
body.nx .roll{background:#fff;padding:clamp(28px,3.4vw,52px) 0;}
body.nx .roll__frame{
padding:2px;border-radius:26px;
background:linear-gradient(110deg,#7fd8cf 0%,#a9c4ef 52%,#c3b6ee 100%);
}
body.nx .roll__card{
display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);align-items:center;
padding:clamp(26px,3.4vw,48px) clamp(22px,3.4vw,56px);
border-radius:24px;background:#fff;
}
body.nx .roll__lead{flex:0 1 auto;}
body.nx .roll__lead b{
display:block;font-size:clamp(20px,2.2vw,28px);font-weight:700;
letter-spacing:-.02em;color:var(--bl-ground);
}
body.nx .roll__lead .btn{margin-top:14px;}
body.nx .roll__win{
flex:1 1 320px;position:relative;overflow:hidden;
height:170px; /* five rows of 34 */
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 32%,#000 68%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 32%,#000 68%,transparent 100%);
}
body.nx .roll__track{
list-style:none;margin:0;padding:0;
/* .4s, measured off the reference: its motion bursts run 0.817→1.217,
0.400 apart, and repeat every 1.900. Velocity peaks in the first
50ms and decays to about a fifth of that by the end, which is an
ease-out rather than an ease-in-out. */
transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
body.nx .roll__track.is-snapping{transition:none;}
body.nx .roll__track li{
height:34px;display:flex;align-items:center;
font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.01em;
color:#c3c9d2;transition:color .35s ease;white-space:nowrap;
}
body.nx .roll__track li a{color:inherit;text-decoration:none;}
body.nx .roll__track li.is-on{color:var(--brand-dp);}
body.nx .roll__track li.is-on a:hover{text-decoration:underline;}
/* Stopped, not hidden: the list still reads, and it becomes an ordinary
set of links to the guides behind each name. */
@media (prefers-reduced-motion:reduce){
body.nx .roll__win{height:auto;-webkit-mask-image:none;mask-image:none;}
body.nx .roll__track{transition:none;transform:none !important;}
body.nx .roll__track li{color:var(--bl-ground);}
body.nx .roll__track li.is-dupe{display:none;}
}
@media (max-width:620px){
body.nx .roll__card{flex-direction:column;align-items:flex-start;}
}
/* ── the arriving arc ──────────────────────────────────────────────
Measured off the reference's ATS section:
section white, padding 60 0
heading 48 / 700 / lh 57.6, centred
body 20 / 400 / lh 28, 800 wide
window 1120 × 350, overflow hidden — it clips a circle so only
the top cap of it shows as an arc
circle 789 × 789, radius 100%,
radial-gradient(circle, rgba(green,0), rgba(green,.3) 70%),
rotate 360deg over 30s, linear, infinite
tile 122px, white, radius 13.32, shadow rgba(89,102,113,.12) 0 0 35.51
The whole trick is that ONE element rotates. The tiles are children
of the circle, so they orbit with it and tilt as they travel — no
per-tile animation, and nothing to keep in step. */
body.nx .arc{background:#fff;padding:clamp(36px,4.4vw,60px) 0;text-align:center;}
body.nx .arc h2{
margin:0 auto 16px;max-width:22ch;
font-size:clamp(28px,3.6vw,48px);line-height:1.2;font-weight:700;
letter-spacing:-.02em;color:var(--bl-ground);text-wrap:balance;
}
body.nx .arc > .wrap > p{
margin:0 auto;max-width:800px;
font-size:clamp(16px,1.5vw,20px);font-weight:400;line-height:1.4;color:#3f4753;
}
body.nx .arc__win{
position:relative;overflow:hidden;
max-width:1120px;height:350px;margin:clamp(20px,2.6vw,40px) auto 0;
}
body.nx .arc__circle{
position:absolute;left:50%;top:0;width:789px;height:789px;margin-left:-394.5px;
border-radius:100%;
background:radial-gradient(circle,rgba(47,227,155,0),rgba(47,227,155,.3) 70%);
animation:arc-spin 30s linear infinite;
}
@keyframes arc-spin{to{transform:rotate(360deg)}}
/* Each tile is placed by its own angle, then pushed out to the rim.
--a is set per tile in the markup, which keeps the maths in one
place and the CSS free of nine near-identical rules. */
body.nx .arc__tile{
position:absolute;left:50%;top:50%;width:122px;height:122px;
margin:-61px 0 0 -61px;
display:grid;place-items:center;
background:#fff;border-radius:13.32px;
box-shadow:rgba(89,102,113,.12) 0 0 35.51px 0;
transform:rotate(var(--a)) translateY(-394px);
}
/* The card tilts with the orbit — that is the look — but its FACE must
not. The reference can tilt its tiles because they carry logos you
recognise at any angle; ours carry words, and a word at 40 degrees is
not a word any more.
So the face runs the same rotation backwards: it cancels the static
--a and the circle's live 360, leaving the content upright at every
moment of the orbit. Custom properties inherit, so --a is readable
inside the keyframe. */
body.nx .arc__face{
display:grid;place-items:center;gap:8px;
animation:arc-unspin 30s linear infinite;
}
@keyframes arc-unspin{
from{transform:rotate(calc(-1 * var(--a)));}
to {transform:rotate(calc(-1 * var(--a) - 360deg));}
}
body.nx .arc__tile .ico{width:34px;height:34px;color:var(--bl-ground);}
body.nx .arc__tile b{
font-size:10.5px;font-weight:600;letter-spacing:.02em;color:#5a6779;
white-space:nowrap;
}
/* A slow orbit is ambient rather than informative, so stopping it costs
nothing. Stopped, the arc is still a picture of the same eight routes. */
@media (prefers-reduced-motion:reduce){
body.nx .arc__circle{animation:none;}
/* The face's counter-rotation only makes sense against a spin. With
the orbit stopped it still has to cancel the static angle. */
body.nx .arc__face{animation:none;transform:rotate(calc(-1 * var(--a)));}
}
@media (max-width:760px){
body.nx .arc__win{height:230px;}
body.nx .arc__circle{width:600px;height:600px;margin-left:-300px;}
body.nx .arc__tile{width:92px;height:92px;margin:-46px 0 0 -46px;
transform:rotate(var(--a)) translateY(-300px);}
body.nx .arc__tile .ico{width:26px;height:26px;}
body.nx .arc__tile b{font-size:9px;}
}
/* ══ PROMO BAND ═════════════════════════════════════════════════════
The closing card on hackajob.com/employer (.promo-band), measured off
the live page at a 1440 viewport.
The "gradient rim" is not a border and not a border-image. It is a grey
frame with `overflow:hidden` holding two 621px circles blurred by 100px,
pinned to opposite corners, with the white card sitting on top at a
higher z-index. The colour you see in the corners is the part of each
blob the card does not cover. That is why the rim is soft at the top and
bottom and saturated at the two corners — a stroked gradient border
cannot do that, which is what the earlier .band here was doing.
MEASURED
section padding-block 60, white
frame padding 20 · radius 60 · #e8e8e8 · overflow hidden
blobs 621×621 · radius 50% · blur(100px)
::before bottom 38 left -240 #1ef398 → #465af1
::after top 41 right -165 #465af1 → #ffbeff
card padding 60 · radius 50 · white · z-index 2
avatar row flex centre · gap 4 · padding-bottom 16 · image 32px
h2 48/700 · line-height 1.1 · centre · measure 575
highlight #1ef398 → #465af1, clipped to the text
desc 20/1.4 · measure 800 · rgba(28,28,28,.7) · pad-top 30
buttons pad-top 40 · gap 20 · 18/500 · pad 8 20 · radius 8
ONE DEPARTURE
Their frame is 1360 wide because their container is 1400. Ours rides
in the page's own .wrap (1100 of content), so the band lines up with
every other section on the page instead of bulging past them — which
is exactly what theirs does on their page. The blobs are anchored to
the corners rather than at their measured `left`, so the composition
survives the narrower frame at any width. */
body.nx .promo{padding-block:60px;background:#fff;}
body.nx .promo__frame{
position:relative;overflow:hidden;
padding:20px;border-radius:60px;background:#e8e8e8;
}
body.nx .promo__frame::before,
body.nx .promo__frame::after{
content:"";position:absolute;z-index:1;
width:621px;height:621px;border-radius:50%;
filter:blur(100px);
}
body.nx .promo__frame::before{
background:linear-gradient(90deg,#1ef398 0%,#465af1 100%);
bottom:38px;left:-240px;
}
body.nx .promo__frame::after{
background:linear-gradient(90deg,#465af1 0%,#ffbeff 100%);
top:41px;right:-165px;
}
body.nx .promo__card{
position:relative;z-index:2;
padding:60px;border-radius:50px;background:#fff;
}
/* Aria's mark. 32px is the reference's size and it is deliberately small:
the card is the agent's, so the avatar is a signature rather than a
portrait. */
body.nx .promo__images{
display:flex;justify-content:center;gap:4px;padding-bottom:16px;
}
body.nx .promo__image{display:block;width:32px;height:32px;max-width:32px;}
body.nx .promo__title{max-width:575px;margin-inline:auto;}
body.nx .promo__title h2{
margin:0;font-size:48px;font-weight:700;line-height:1.1;text-align:center;
/* Not a flat colour: the ink itself runs to 80% across the line, which
is what keeps the second half from competing with the highlight. */
background-image:linear-gradient(90deg,#1c1c1c 0%,rgba(28,28,28,.8) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
body.nx .promo__hi{
background-image:linear-gradient(90deg,#1ef398 0%,#465af1 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
body.nx .promo__content{padding-top:30px;}
body.nx .promo__desc{
max-width:800px;margin-inline:auto;text-align:center;
font-size:20px;line-height:1.4;font-weight:400;color:rgba(28,28,28,.7);
}
body.nx .promo__desc p{margin:0;}
body.nx .promo__buttons{
padding-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:20px;
}
body.nx .promo__btn{
display:inline-block;padding:8px 20px;text-align:center;
border-radius:8px;font-size:18px;line-height:1.4;font-weight:500;
border:2px solid transparent;transition:.3s;
}
body.nx .promo__btn--fill{
background:linear-gradient(88.63deg,#1ef398 1.17%,#a5f5fb 176.09%);
color:#1c1c1c;
}
body.nx .promo__btn--fill:hover{filter:brightness(1.1);}
body.nx .promo__btn--line{border-color:#1c1c1c;color:#1c1c1c;}
body.nx .promo__btn--line:hover{background:#1c1c1c;color:#fff;}
@media (max-width:767px){
body.nx .promo__frame{padding:12px;}
body.nx .promo__card{padding:40px 20px;}
body.nx .promo__title h2{font-size:32px;}
body.nx .promo__content{padding-top:20px;}
body.nx .promo__desc{font-size:18px;}
/* Their mobile blobs move inward so the colour still lands on a much
narrower frame instead of sitting entirely off-canvas. */
body.nx .promo__frame::before{bottom:266px;left:-352px;}
body.nx .promo__frame::after{top:239px;right:-100px;}
body.nx .promo__btn{width:100%;}
}
/* ══ PILL EYEBROW ═══════════════════════════════════════════════════
Shared by the two sections below. A bordered pill with a soft drop
shadow and the label in indigo — the gradient runs out at 19.69%, so
in practice only the first word or two carries the fade. Measured, not
guessed; a flat #465af1 is visibly different on a long label. */
body.nx .pill-eyebrow{
display:inline-block;padding:8px 16px;
border:1px solid #ddd;border-radius:40px;
box-shadow:rgba(0,0,0,.1) 0 4px 12px;
font-size:14px;font-weight:500;line-height:1.15;
background-image:linear-gradient(90deg,#465af1 0%,rgba(70,90,241,.8) 19.69%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* The card surface both sections use: not a flat tint but a vertical
wash that starts fully transparent, so a card reads as lifting off the
page rather than sitting as a grey box on it. */
body.nx .qa__row,
body.nx .res__inner-card{
border:1px solid #eee;border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(244,244,244,.7) 50%,#fafafa 100%);
}
/* ══ Q&A ════════════════════════════════════════════════════════════
.emp-faq on hackajob.com/employer, measured at 1440.
section padding-block 60 · white
container max-width 800 · padding-inline 15
header max-width 575 · centred
h2 48/700 · line-height 1.2
list padding-top 60
row · radius 24 · padding 19 · +16 between
question 20/500 · #1c1c1c · width calc(100% - 24px)
toggle 24×24 · rotate(45deg) when open (a + becoming an ×)
panel padding-top 32 · 16/1.4 · rgba(28,28,28,.7)
/ rather than a JS accordion: it opens with the
keyboard, it is in the a11y tree for free, and Ctrl-F finds text
inside a closed panel in Chrome. */
body.nx .qa{padding-block:60px;background:#fff;}
body.nx .qa__container{max-width:800px;margin:0 auto;padding-inline:15px;}
body.nx .qa__header{max-width:575px;margin:0 auto;text-align:center;}
body.nx .qa__title{padding-top:16px;}
body.nx .qa__title h2{
margin:0;font-size:48px;font-weight:700;line-height:1.2;text-align:center;
background-image:linear-gradient(90deg,#1c1c1c 0%,rgba(28,28,28,.7) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
body.nx .qa__list{padding-top:60px;}
body.nx .qa__row{padding:19px;}
body.nx .qa__row + .qa__row{margin-top:16px;}
body.nx .qa__summary{
display:flex;flex-wrap:nowrap;align-items:center;
cursor:pointer;list-style:none;
}
body.nx .qa__summary::-webkit-details-marker{display:none;}
body.nx .qa__q{width:calc(100% - 24px);}
body.nx .qa__q h3{
margin:0;font-size:20px;font-weight:500;line-height:1.3;color:#1c1c1c;
}
body.nx .qa__toggle{
width:24px;height:24px;flex:none;
display:flex;align-items:center;justify-content:center;
transition:transform .2s;color:#1c1c1c;
}
body.nx .qa__row[open] .qa__toggle{transform:rotate(45deg);}
body.nx .qa__toggle .ico{width:24px;height:24px;}
body.nx .qa__panel{padding-top:32px;}
body.nx .qa__panel p{
margin:0;font-size:16px;font-weight:400;line-height:1.4;color:rgba(28,28,28,.7);
}
body.nx .qa__panel p + p{margin-top:12px;}
body.nx .qa__panel a{color:var(--bl-blue);text-decoration:underline;}
/* Same inline-code treatment the guides use, so a file path named in an
answer looks like a file path and not like emphasis. */
body.nx .qa__panel code{
font-family:var(--mono);font-size:.9em;padding:1px 5px;border-radius:5px;
background:var(--paper-2);border:1px solid var(--edge);color:var(--ink);
}
/* The rotation is the affordance, so it is the one thing that must not
vanish. Stopping the transition keeps the open/closed state readable
without animating it. */
@media (prefers-reduced-motion:reduce){
body.nx .qa__toggle{transition:none;}
}
@media (max-width:767px){
body.nx .qa__title h2{font-size:32px;}
}
/* ══ RESOURCES ══════════════════════════════════════════════════════
.resources on the same page, measured at 1440.
section padding-block 60 · white · centred
inner max-width 1120
h2 48/700 · line-height 1.208 · measure 575
display padding-top 60
row flex wrap · margin-inline -12 · row-gap 24 · left aligned
card 33.33% · padding-inline 12 (50% ≤991 · 100% ≤767)
card inner padding 40 · radius 24 · full height
icon 40×40
title 24/700 · line-height 1
details padding-top 16 · 16/1.4 · rgba(28,28,28,.7)
button padding-top 40 · 18/500 · 2px outline · radius 8
Percentage widths with padding gutters rather than grid + gap: it is
what the reference does, and `height:100%` on the inner card is what
makes three cards of unequal copy line up at the bottom. */
body.nx .res{padding-block:60px;background:#fff;text-align:center;}
body.nx .res__inner{max-width:1120px;margin-inline:auto;}
body.nx .res__title{padding-top:16px;}
body.nx .res__title h2{
margin-inline:auto;max-width:575px;
font-size:48px;line-height:1.208;font-weight:700;
background-image:linear-gradient(90deg,#1c1c1c 0%,rgba(28,28,28,.8) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
body.nx .res__display{padding-top:60px;}
body.nx .res__row{
display:flex;flex-wrap:wrap;margin-inline:-12px;row-gap:24px;text-align:left;
}
body.nx .res__card{width:33.3333%;padding-inline:12px;}
/* The reference lays this out as plain blocks, which lines the three
buttons up only because all three of its descriptions run to the same
two lines. Ours don't, so the card is a flex column and the button is
pushed down by margin-top:auto instead. align-items stays at the
default `stretch` on purpose: the button row has to be full width for
the mobile rule below (`a{width:100%}`) to have anything to fill. */
body.nx .res__inner-card{
height:100%;padding:40px;
display:flex;flex-direction:column;
}
/* MEASURED off res-signup.svg on the reference: a 38.667 rounded square
inside a 40px box, rx 4.667, stroke 1.333, and both the frame AND the
glyph painted with the same horizontal #1EF398 → #465AF1 sweep. The
interior is `fill="none"` — a hairline frame, not a filled chip, so
the card's own wash shows through it.
The frame is an