/* ============================================================
CaptivaHQ — industry page styles · LIGHT MODE ONLY
Shared by /skilled-trades and /manufacturing: both pages render the
same DOM from js/vertical-selector.js (the class names stay
.trades / .trade-tab / .trade-panel on both, even where the visible
label is "area" — see the DOM contract note in that file), so there
is nothing per-page in here.
Loaded AFTER css/styles.css and leans on it for everything it
already has (.wrap, .btn, .eyebrow, .reveal, .proof, .faqsec, the
modules grid, the video frame, the type scale, radii, shadows).
Only what does not exist yet lives here:
1. the vertical selector (tabs → 2×3 grid on phones, five slots)
2. the registration form + sticky phone CTA
3. the Atlas section layout
4. THE ATLAS LOOP — every keyframe and timing in ONE marked block
Tokens only — no hex, no new palette. Mobile first: written at 375px
and widened from there.
============================================================ */
:root{
/* styles.css ships --c-ai-soft but no --c-ai-line; this is the matching
hairline, derived from the same seed (not a new colour). If the
product's globals.css defines one, copy that formula here instead. */
--c-ai-line: color-mix(in oklch, var(--c-ai) 34%, var(--c-line));
}
/* No anchor offset here on purpose. The Horizon refresh added a site-wide
`[id]{scroll-margin-top:100px}` (140px under 820px, where the nav wraps) in
css/styles.css. A page-local 72px used to sit here and silently overrode it,
landing every in-page anchor underneath the sticky header. */
/* ---------- no hero: the page opens on the selector, whose heading is the h1 ---------- */
.sec-h1{font-size:clamp(32px,4.4vw,54px);font-weight:700}
/* ============================================================
1. VERTICAL SELECTOR (trades / manufacturing areas)
============================================================ */
.trades{container-type:inline-size;container-name:trades;margin-top:26px}
/* -- tab row (desktop / wide) -- */
/* flex-wrap, not overflow: between the phone breakpoint and full desktop
width six labels can be wider than the container, and an overflowing tab
row scrolls the whole PAGE sideways. Wrapping costs nothing at widths where
the row already fits on one line — which is every width /skilled-trades
renders at — and keeps /manufacturing's longer labels on screen. */
.trade-tabs{
display:flex;flex-wrap:wrap;gap:4px;
border-bottom:1px solid var(--c-line-strong);
}
.trade-tab{
--trade:var(--c-ai); /* inline style overrides per trade */
position:relative;flex:1 1 auto;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:48px;padding:12px 14px;margin-bottom:-1px;
font-weight:600;font-size:15px;color:var(--c-fg-2);white-space:nowrap;
border-bottom:3px solid transparent;border-radius:var(--r-2) var(--r-2) 0 0;
transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease);
}
/* colour dot — never the only signal: the label and the active border carry it */
.trade-tab::before{
content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--trade);
box-shadow:0 0 0 3px color-mix(in oklch, var(--trade) 18%, transparent);
}
.trade-tab:hover{color:var(--c-fg-0);background:color-mix(in oklch, var(--trade) 8%, transparent)}
.trade-tab[aria-selected="true"]{
color:color-mix(in oklch, var(--trade) 62%, var(--c-fg-0));
border-bottom-color:var(--trade);
background:color-mix(in oklch, var(--trade) 11%, transparent);
}
.trade-tab:focus-visible{outline:2px solid var(--trade);outline-offset:-2px}
/* -- phones: a 2×3 grid of tap targets, not a 62px-per-tab strip.
Same DOM; the container query on .trades flips the layout. -- */
@container trades (max-width:700px){
.trade-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:none}
.trade-tab{
min-height:56px;margin:0;padding:10px 12px;
justify-content:flex-start;text-align:left;white-space:normal;line-height:1.2;
background:var(--c-bg-1);border:1px solid var(--c-line-strong);border-radius:var(--r-3);
}
.trade-tab[aria-selected="true"]{
border:2px solid var(--trade);padding:9px 11px;
background:color-mix(in oklch, var(--trade) 12%, var(--c-bg-0));
}
}
/* browsers without container queries get the same grid from a media query */
@supports not (container-type:inline-size){
@media (max-width:700px){
.trade-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:none}
.trade-tab{
min-height:56px;margin:0;padding:10px 12px;
justify-content:flex-start;text-align:left;white-space:normal;line-height:1.2;
background:var(--c-bg-1);border:1px solid var(--c-line-strong);border-radius:var(--r-3);
}
.trade-tab[aria-selected="true"]{
border:2px solid var(--trade);padding:9px 11px;
background:color-mix(in oklch, var(--trade) 12%, var(--c-bg-0));
}
}
}
/* -- panels -- */
/* min-height baseline so switching never moves the page; js/vertical-selector.js
refines it to the tallest panel once fonts have landed */
.trade-panels{position:relative;margin-top:22px;min-height:560px}
.trade-panel{--trade:var(--c-ai)}
.trade-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.trade-kicker{
font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--trade);
}
.trade-head h3{
font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.25;
color:var(--c-fg-0);max-width:60ch;text-wrap:pretty;flex:1 1 100%;
}
/* Two stacked two-column rows (change round 01 §1). The old single grid — the
stepper spanning three rows beside docs/roles/atlas with align-items:start —
left a large void wherever one column outran the other. Now each row is its
own two-up and the columns STRETCH to equal height (no align-items:start);
the slack is absorbed inside the shorter slot rather than left under it:
· the two lists distribute their rows (justify-content:space-between)
· .docs-count is pushed to the bottom of its box (margin-top:auto)
· .slot-atlas grows and centres its sentence
DOM order is also the mobile order: steps → mods → docs → roles → atlas. */
.trade-slots{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.trade-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
/* row B's right column holds two slots; atlas takes the slack */
.trade-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.trade-col .slot-atlas{flex:1}
@container trades (max-width:700px){
.trade-row{grid-template-columns:1fr}
}
@supports not (container-type:inline-size){
@media (max-width:700px){
.trade-row{grid-template-columns:1fr}
}
}
.slot{
display:flex;flex-direction:column;
background:var(--c-bg-1);border:1px solid var(--c-line);border-radius:var(--r-4);
padding:18px;box-shadow:var(--sh-card);min-width:0;
}
.slot h4{
font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--c-fg-3);margin-bottom:12px;flex:none;
}
/* slot 1 — "How a job runs": numbered stepper, each step tagged with its module.
flex:1 + space-between lets the list breathe into whatever height the row
settled on; overflow-y is the safety valve the brief asks for, not an
expected state (the row is auto-height, so content normally sizes it). */
.steps{
list-style:none;display:flex;flex-direction:column;justify-content:space-between;
flex:1;min-height:0;overflow-y:auto;
}
.steps li{
position:relative;
display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-areas:"n t" "n m";
column-gap:12px;row-gap:5px;padding:6px 0 14px;
}
.steps li:not(:last-child)::before{
content:"";position:absolute;left:13px;top:36px;bottom:0;width:2px;
background:color-mix(in oklch, var(--trade) 38%, var(--c-line));
}
.step-n{
grid-area:n;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
font-family:var(--f-mono);font-size:12px;font-weight:600;color:oklch(0.99 0 0);
background:var(--trade);box-shadow:0 0 0 4px color-mix(in oklch, var(--trade) 14%, transparent);
margin-top:1px;
}
.step-t{grid-area:t;font-weight:600;font-size:15.5px;line-height:1.3;color:var(--c-fg-0);padding-top:4px}
.mod-tag{
--acc:var(--c-ai);
grid-area:m;justify-self:start;
display:inline-flex;align-items:center;gap:6px;
font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px 3px 7px;border-radius:999px;line-height:1.3;
color:color-mix(in oklch, var(--acc) 72%, var(--c-fg-0));
background:color-mix(in oklch, var(--acc) 12%, transparent);
border:1px solid color-mix(in oklch, var(--acc) 42%, transparent);
}
.mod-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
/* slot 2 — the paperwork, as wrapping pills (change round 01 §3).
Same shape as the role chips so the two slots read as one family, but these
are
s, not buttons: no + affordance, no pointer cursor, no focus ring
and no hover transition — nothing that would suggest they are clickable. */
.docs-stack{
list-style:none;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;
}
.docs-stack li{
padding:7px 13px;border-radius:999px;font-size:14px;line-height:1.2;
min-height:38px;display:inline-flex;align-items:center;
color:var(--c-fg-1);
background:color-mix(in oklch, var(--trade) 7%, var(--c-bg-0));
border:1px solid color-mix(in oklch, var(--trade) 45%, var(--c-line));
}
/* margin-top:auto pins the count to the bottom of the box, so a stretched
docs column absorbs its slack between the pills and the count */
.docs-count{
margin-top:auto;padding-top:14px;
font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.04em;
color:color-mix(in oklch, var(--trade) 70%, var(--c-fg-1));
}
/* slots 3 + 5 — chips that disclose one paragraph (button + region, not a tooltip) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
--acc:var(--trade);
display:inline-flex;align-items:center;gap:7px;
min-height:38px;padding:7px 12px 7px 13px;border-radius:999px;
font-size:14px;font-weight:600;line-height:1.2;color:var(--c-fg-0);text-align:left;
background:var(--c-bg-0);border:1px solid color-mix(in oklch, var(--acc) 45%, var(--c-line));
transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.chip::after{
content:"+";font-family:var(--f-mono);font-size:15px;line-height:1;color:var(--acc);
transition:transform .2s var(--ease);
}
.chip:hover{background:color-mix(in oklch, var(--acc) 8%, var(--c-bg-0));border-color:var(--acc)}
.chip[aria-expanded="true"]{
background:color-mix(in oklch, var(--acc) 14%, var(--c-bg-0));border-color:var(--acc);
color:color-mix(in oklch, var(--acc) 55%, var(--c-fg-0));
}
.chip[aria-expanded="true"]::after{transform:rotate(45deg)}
.chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.chip-core{
font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
padding:2px 6px;border-radius:999px;
color:var(--c-ai);background:color-mix(in oklch, var(--c-ai) 12%, transparent);
border:1px solid color-mix(in oklch, var(--c-ai) 30%, transparent);
}
.chip-detail{
--acc:var(--trade);
margin-top:12px;padding:12px 14px;border-radius:var(--r-3);
background:var(--c-bg-0);border:1px solid var(--c-line);border-left:3px solid var(--acc);
animation:st-disclose .28s var(--ease-out);
}
.chip-detail p{font-size:14.5px;line-height:1.6;color:var(--c-fg-1);text-wrap:pretty}
.chip-detail strong{color:var(--c-fg-0)}
@keyframes st-disclose{from{opacity:0;transform:translateY(-4px)}}
/* slot 5 — "Modules you'd switch on" as a numbered list (change round 01 §2).
Same grammar as .steps — numbered circle, name beside it — but the circle
carries the MODULE's own --chart-* accent, not the trade accent, so colour
still identifies the module. No connecting rule between the numbers: these
are a set, not a sequence, and the numbering is only for scanability. */
.mods-list{
list-style:none;display:flex;flex-direction:column;justify-content:space-between;
flex:1;min-height:0;overflow-y:auto;
}
.mod-row{
--acc:var(--trade);
display:flex;align-items:center;gap:12px;width:100%;
padding:5px 4px 5px 0;border-radius:var(--r-3);text-align:left;
transition:background-color .2s var(--ease);
}
.mod-row .step-n{
background:var(--acc);
box-shadow:0 0 0 4px color-mix(in oklch, var(--acc) 14%, transparent);
margin-top:0;flex:none;
}
.mod-row .step-t{padding-top:0;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.mod-row::after{
content:"+";margin-left:auto;padding-left:8px;
font-family:var(--f-mono);font-size:15px;line-height:1;color:var(--acc);
transition:transform .2s var(--ease);
}
.mod-row:hover{background:color-mix(in oklch, var(--acc) 8%, transparent)}
.mod-row:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mod-row[aria-expanded="true"]{background:color-mix(in oklch, var(--acc) 11%, transparent)}
.mod-row[aria-expanded="true"] .step-t{color:color-mix(in oklch, var(--acc) 40%, var(--c-fg-0))}
.mod-row[aria-expanded="true"]::after{transform:rotate(45deg)}
/* the disclosed paragraph sits inside the
, under its own row */
.mods-list .chip-detail{margin:6px 0 4px 40px}
@container trades (max-width:700px){
.mods-list .chip-detail{margin-left:0}
}
@supports not (container-type:inline-size){
@media (max-width:700px){
.mods-list .chip-detail{margin-left:0}
}
}
/* slot 4 — what Atlas does here: one sentence in a brand-tinted panel */
.slot-atlas{background:var(--c-ai-soft);border-color:var(--c-ai-line);justify-content:center}
.slot-atlas h4{color:var(--c-ai);display:flex;align-items:center;gap:8px}
.slot-atlas h4::before{
content:"";width:10px;height:10px;border-radius:50%;background:var(--g-brand);
box-shadow:0 0 10px color-mix(in oklch, var(--c-ai) 45%, transparent);
}
.slot-atlas p{font-size:16.5px;font-weight:500;line-height:1.5;color:var(--c-fg-0);text-wrap:pretty}
/* ============================================================
1b. EVIDENCE — a KPI row of three federal statistics.
Deliberately NOT a chart: three numbers with their sources is the whole
content, and a bar or a gauge would only decorate it. All three figures
take --c-ai — they are three parts of one argument, not three series, so
hueing them apart would imply categories that do not exist. The comparison
numbers beside them wear text tokens: one accent per tile, or the prose
starts competing with the figure. Citations are bottom-aligned links, not
fine print (see the section comment in the HTML).
============================================================ */
/* The stats ride in the REGISTRATION band, not the trade-selector one: same
--c-bg-1 surface, no hairline between the two sections, so the eye reads
"here is the case, here is the form" as one block. #register keeps the
bottom border and owns the end of the band; the seam padding is trimmed on
both sides so one continuous surface does not read as two stacked ones.
On that band the tiles invert to --c-bg-0 — the same flip .reg makes. */
#evidence{
background:var(--c-bg-1);border-top:1px solid var(--c-line);
padding-bottom:calc(var(--sec-y) * .5);
}
#plans + #register{border-top:0;padding-top:calc(var(--sec-y) * .6)}
.ev{container-type:inline-size;container-name:evidence;margin-top:30px}
.ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ev-tile{
display:flex;flex-direction:column;min-width:0;
background:var(--c-bg-0);border:1px solid var(--c-line);border-radius:var(--r-4);
padding:24px 22px;box-shadow:var(--sh-card);
}
/* baseline-aligned so "Fewer than" sits on the figure's baseline and the three
big numbers still line up across the row */
.ev-num{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px;margin-bottom:14px}
.ev-qual{font-size:clamp(15px,1.15vw,17px);font-weight:600;letter-spacing:-.01em;color:var(--c-fg-2)}
.ev-fig{
font-family:var(--f-sans);font-size:clamp(48px,4.2vw,60px);font-weight:600;
line-height:1;letter-spacing:-.045em;color:var(--c-ai);font-variant-numeric:tabular-nums;
}
.ev-lede{font-size:16px;font-weight:500;line-height:1.45;color:var(--c-fg-1);text-wrap:pretty}
.ev-vs{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--c-fg-2);text-wrap:pretty}
.ev-vs b{font-weight:600;color:var(--c-fg-0);font-variant-numeric:tabular-nums}
.ev-src{
display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
margin-top:auto;padding-top:16px;border-top:1px solid var(--c-line);
font-size:12.5px;line-height:1.45;color:var(--c-fg-3);text-decoration:none;
transition:color .2s var(--ease);
}
.ev-src i{font-style:italic}
.ev-src:hover{color:var(--c-ai)}
.ev-src:hover span:first-child{text-decoration:underline;text-underline-offset:2px}
.ev-src:focus-visible{outline:2px solid var(--c-ai);outline-offset:3px;border-radius:var(--r-2)}
.ev-foot{margin-top:18px;font-size:15px;line-height:1.55;color:var(--c-fg-2);max-width:72ch;text-wrap:pretty}
.ev-foot a{font-weight:600;color:var(--c-ai);text-decoration:none;white-space:nowrap}
.ev-foot a:hover{text-decoration:underline;text-underline-offset:2px}
/* one column on phones, at the same 700px breakpoint the trade selector uses */
@container evidence (max-width:700px){
.ev-grid{grid-template-columns:1fr}
.ev-tile{padding:20px 18px}
}
@supports not (container-type:inline-size){
@media (max-width:700px){
.ev-grid{grid-template-columns:1fr}
.ev-tile{padding:20px 18px}
}
}
/* ============================================================
1c. PRICING — the plans rendered by js/pricing.js (styles in
css/styles.css, .pr-*). Third block of the registration band
(evidence → plans → form on one --c-bg-1 surface). The id is #plans,
not #pricing: css/styles.css paints #pricing as the home page's band.
============================================================ */
#plans{
background:var(--c-bg-1);
padding-top:calc(var(--sec-y) * .6);padding-bottom:calc(var(--sec-y) * .5);
}
#plans .pr-tier,#plans .pr-panel{background:var(--c-bg-0)}
#plans .pr-allot{background:var(--c-bg-1)}
/* ============================================================
2. REGISTRATION FORM (UI only — submit is stubbed, see js/register-form.js)
============================================================ */
#register{background:var(--c-bg-1);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.reg-grid{
display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(24px,4vw,56px);align-items:start;
}
@media (max-width:860px){.reg-grid{grid-template-columns:1fr}}
.reg-copy .lead{max-width:none}
.reg-points{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.reg-points li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--c-fg-1)}
.reg-points li::before{content:"✓";position:absolute;left:0;top:0;color:var(--c-pos-text);font-family:var(--f-mono);font-size:14px}
.reg{
background:var(--c-bg-0);border-radius:var(--r-5);padding:clamp(20px,3vw,30px);
border:1px solid color-mix(in oklch, var(--c-ai) 30%, var(--c-line-strong));
box-shadow:var(--sh-lift);
}
.reg-progress{
font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--c-ai);margin-bottom:14px;
}
.reg-step{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:16px}
.reg-step>legend{
font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--c-fg-0);
padding:0;margin-bottom:4px;float:left;width:100%; /* float: legend sits inside the flex flow */
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
/* radio groups are nested