/* Self-hosted fonts (mirrored 2026-08-07 from Google Fonts css2 output; licenses: OFL). */
/* latin-ext */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/atkinsonhyperlegible-kUwCgblWmLWQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/atkinsonhyperlegible-56IqUwCgblWm.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/atkinsonhyperlegible-7JIoWQeCbGWn.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/atkinsonhyperlegible-G04pIoWQeCbA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/atkinsonhyperlegible-eiWPRl-uFV24.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/atkinsonhyperlegible-c9dCWPRl-uFQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/fraunces-BTeP2Xz5fU8w.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/fraunces-FTeP2Xz5fU8w.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/fraunces-KxC9TeP2Xz5c.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/fraunces-BTeP2Xz5fU8w.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/fraunces-FTeP2Xz5fU8w.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/fraunces-KxC9TeP2Xz5c.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/poppins-1lFd2JQEl8qw.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/poppins-JlFd2JQEl8qw.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/poppins-7Z1xlFd2JQEk.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ================================================================
ABLEVERSE design system
Brand: #F97316 / #FB923C / #FACC15 / #FFF7ED
Seeker side = yellow (muted). Employer side = orange.
Accessibility is the product: AA+ contrast, huge targets,
reduced motion safe, keyboard first, plain language.
================================================================ */
:root {
/* Brand */
--orange: #F97316;
--orange-soft: #FB923C;
--yellow: #FACC15;
--cream: #FFF7ED;
/* Working tones (contrast safe) */
/* 7.12:1 on cream, 7.56:1 on white. Darkened from #C2410C on 2026-09-04.
THE OLD VALUE WAS 4.88:1 ON CREAM and this is our LINK colour, so every
inline link sat under BR-34's body floor of 7:1 while the accessibility
statement said so out loud: "Some of our orange buttons meet the legal
contrast floor but not yet the enhanced bar we hold ourselves to."
It was never only the buttons.
AND IT FIXED A SECOND CLASS NOBODY HAD ISOLATED: this variable is also a
BACKGROUND in three places with white text on it, and white on #C2410C is
5.18:1 - also under the body floor. Darkening raises that to 7.56:1.
Every other use is non-text - the focus ring, borders, and seven SVG icons
- where BR-35's floor is 3:1. All were passing and all improve. Nothing
regresses: on this palette the variable is only ever ink, border, or a
backdrop for white, and darkening any of those raises contrast. */
--orange-deep: #973209;
--orange-press: #9A3412;
--orange-tint: #FFEDD5; /* employer side wash */
--amber-tint: #FFFBEB; /* seeker side wash */
--yellow-deep: #854D0E; /* seeker accent text, 6.8:1 */
--ink: #1C1917;
--ink-soft: #57534E;
--paper: #FFFFFF;
--line: #F3E4D3;
--shadow: 0 10px 30px rgba(154, 52, 18, 0.08);
--shadow-lift: 0 18px 44px rgba(154, 52, 18, 0.14);
--grad-brand: linear-gradient(135deg, #EA580C 0%, #F97316 45%, #FACC15 100%);
--grad-btn: linear-gradient(135deg, #C2410C, #D14508); /* light end darkened from #EA580C per D-81, 2026-08-28: 4.60:1 vs white, meets the 1.4.6 enhanced bar */
/* Type */
--font-display: "Fraunces", Georgia, serif;
--font-body: "Atkinson Hyperlegible", Verdana, sans-serif;
--font-mark: "Poppins", "Atkinson Hyperlegible", sans-serif;
--radius: 18px;
--radius-lg: 26px;
--container: 1120px;
--focus-ring: 3px solid var(--orange-deep);
}
/* Text size control (a11y toolbar) */
html { font-size: 100%; }
html[data-textsize="1"] { font-size: 112.5%; }
html[data-textsize="2"] { font-size: 125%; }
/* ---------------------------------------------------------------- */
/* Base */
/* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: 110px; }
@media (prefers-reduced-motion: no-preference) {
html:not([data-calm="on"]) { scroll-behavior: smooth; }
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.7;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.15;
margin: 0 0 0.6em;
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 700; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--orange-deep); text-underline-offset: 3px; }
a:hover { color: var(--orange-press); }
:focus-visible {
outline: var(--focus-ring);
outline-offset: 3px;
border-radius: 6px;
}
::selection { background: var(--yellow); color: var(--ink); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--ink);
color: var(--cream);
padding: 14px 22px;
border-radius: 0 0 12px 0;
font-weight: 700;
text-decoration: none;
}
/* BR-8: "a perimeter at least 2 CSS px thick AROUND THE WHOLE CONTROL".
At left:0;top:0 the ring was not around the whole control. The global
:focus-visible rule draws it with outline-offset:3px and a 3px width, so its
outer edge sat at x=-6,y=-6 - off-screen and clipped by the viewport.
Measured in Chromium on 2026-09-04: box x=0 y=0, ring edges left=-6 top=-6,
TWO OF FOUR SIDES INVISIBLE, on the first element a keyboard user reaches,
on all twelve pages. axe never saw it: the link is off-screen until focus.
8px clears the 6px the ring needs and leaves 2px of margin. The radius goes
uniform because a square top-left corner only reads as intentional when the
element is flush into the corner, which it no longer is. */
.skip-link:focus-visible { left: 8px; top: 8px; border-radius: 12px; }
/* CSP note: style-src has no unsafe-inline, so inline style attributes are dead.
Everything must live in this stylesheet. The sprite rule below is what keeps
the icon sprite out of layout (WebKit renders unstyled svg as a 300x150 block). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cta-row { margin-top: 1.6rem; }
.partners-band { background: linear-gradient(180deg, var(--cream), #FFF3E0); }
.fieldset-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset-plain .demo-label { margin-top: 0; }
.footer-blurb { font-size: 0.95rem; }
.footer-gap { margin-top: 1.4rem; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
/* ---------------------------------------------------------------- */
/* Layout utilities */
/* ---------------------------------------------------------------- */
.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.section-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.center { text-align: center; margin-inline: auto; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--orange-deep);
margin-bottom: 1.1rem;
}
.eyebrow::before {
content: "";
width: 26px; height: 3px;
border-radius: 2px;
background: var(--grad-brand);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
content: "";
width: 26px; height: 3px;
border-radius: 2px;
background: var(--grad-brand);
}
.lede { font-size: clamp(1.2rem, 2vw, 1.35rem); color: var(--ink-soft); max-width: 44rem; }
/* ---------------------------------------------------------------- */
/* Buttons and chips */
/* ---------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 54px;
padding: 0.8rem 1.9rem;
border-radius: 999px;
border: 2px solid transparent;
font-family: var(--font-body);
font-size: 1.1875rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn svg { flex: none; }
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: 0 8px 22px rgba(194, 65, 12, 0.28); }
/* WCAG 1.4.6 enhanced (D-81, 2026-08-28). The gradient runs #C2410C (5.18:1 on white) to
#D14508 (4.60:1), so white text at any size on the gradient now meets 4.5:1. The small-button
solid dark end stays for extra headroom. Ratios computed and Ren-approved from rendered
swatches, 2026-08-28. */
/* THE HEADER CTA IS BODY TEXT, NOT LARGE TEXT, AND THAT IS THE WHOLE POINT.
`.btn-small` is `font-size: 1rem` = 16px. WCAG counts bold text as "large"
only from 18.66px, so this button sits under BR-34's BODY floor of 7:1, not
the 4.5:1 large-text floor its big siblings enjoy. On `--orange-deep`
(#C2410C) white measures 5.18:1 - which clears the legal 4.5:1 and misses
our own bar by 1.82. The accessibility statement has been declaring exactly
this, in these words: "Some of our orange buttons meet the legal contrast
floor but not yet the enhanced bar we hold ourselves to."
It ships on ALL TWELVE pages as `btn btn-primary btn-small header-cta`, so
it is the most-seen button on the site.
`--orange-deep` itself is NOT touched: it is used in 23 places - links,
focus rings, icons, borders, chips - and every one of those is a different
contrast question. Darkening the variable to fix one button would move
twenty-two things nobody measured. So the override is scoped to this button
and this button only. */
/* The scoped override this rule carried is GONE, and its removal is the point.
It set #9B3409 because --orange-deep was too light for white text at 16px.
The variable is now #973209 (7.56:1 with white), so the button inherits a
passing colour and the site is back to ONE orange instead of two. A narrower
fix made redundant by the right one should be deleted, not left as a second
source of truth. */
.btn-primary.btn-small { background: var(--orange-deep); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(194, 65, 12, 0.36); }
.btn-sun { background: var(--yellow); color: var(--ink); box-shadow: 0 8px 22px rgba(133, 77, 14, 0.18); }
.btn-sun:hover { background: #F5C400; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.btn-small { min-height: 44px; padding: 0.45rem 1.3rem; font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
html:not([data-calm="on"]) .btn:hover { transform: translateY(-2px); }
}
.chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.05rem;
border-radius: 999px;
background: var(--paper);
border: 1.5px solid var(--line);
font-size: 0.9875rem;
font-weight: 700;
color: var(--ink);
}
.chip svg { width: 18px; height: 18px; color: var(--orange-deep); }
.pill {
display: inline-block;
padding: 0.4rem 1rem;
border-radius: 999px;
font-size: 0.875rem;
font-weight: 700;
}
.pill-peach { background: var(--orange-tint); color: var(--orange-press); }
.pill-sun { background: #FEF3C7; color: var(--yellow-deep); }
.tag-sample {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: var(--ink);
color: var(--cream);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ---------------------------------------------------------------- */
/* Utility bar (accessibility toolbar) */
/* ---------------------------------------------------------------- */
.utility-bar { background: var(--ink); color: var(--cream); font-size: 0.9rem; }
.utility-bar .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-height: 46px;
padding-block: 5px;
flex-wrap: wrap;
}
.utility-note { font-weight: 700; letter-spacing: 0.02em; }
.utility-controls { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* BR-37: 44px is the design goal, 24px the hard floor. These sat at 36px,
inside the band that needs a written reason, and there was none in any
change record. They are also the accessibility controls themselves, which
is the worst place on the site to make someone aim carefully. Raised to the
goal rather than justified at 36. */
.utility-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
padding: 0.2rem 0.8rem;
border-radius: 999px;
border: 1.5px solid rgba(255, 247, 237, 0.45);
background: transparent;
color: var(--cream);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
}
.utility-btn[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.utility-btn:focus-visible { outline-color: var(--yellow); }
/* ---------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 247, 237, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(154, 52, 18, 0.07); }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 78px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
}
.brand-mark { width: 74px; height: 45px; }
.wordmark {
font-family: var(--font-mark);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.02em;
color: var(--orange-deep);
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.main-nav { display: flex; align-items: center; gap: 1.4rem; }
.main-nav a {
font-weight: 700;
font-size: 1.02rem;
color: var(--ink);
text-decoration: none;
padding: 0.4rem 0.1rem;
}
.main-nav a:hover { color: var(--orange-deep); }
/* The nav's own link colour outranks .btn-primary (0,1,1 beats 0,1,0), so the
header CTA was rendering dark ink on deep orange at 3.38:1 and failing 1.4.3
on every page (16.3px bold is not large text, so the bar is 4.5). The button
keeps its own white, measured 5.18:1 on --orange-deep. The hover rule is
overridden for the same reason. */
.main-nav a.btn-primary,
.main-nav a.btn-primary:hover { color: #fff; }
.header-cta { margin-left: 0.4rem; }
/* BR-37 and BR-59: the bars now sit beside the visible word "Menu" instead of
being the whole control. The button is a row; the bars keep their own column
so the open/close animation is unchanged. */
.nav-toggle {
display: none;
flex-direction: row;
align-items: center;
gap: 0.5rem;
min-width: 52px;
height: 52px;
padding: 0 0.85rem;
border: 2px solid var(--ink);
border-radius: 14px;
background: transparent;
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
}
.nav-toggle-bars {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 26px;
flex: none;
}
.nav-toggle-bars span { display: block; height: 3px; border-radius: 2px; background: var(--ink); }
/* The bars used to carry their transition unconditionally, which made the
menu button the one moving thing on the site that ignored both the OS
setting and the Calm control. Every other motion on this stylesheet is
opt-IN through exactly this pair of conditions; this is not a new
pattern, it is the existing one applied to the element that missed it. */
@media (prefers-reduced-motion: no-preference) {
html:not([data-calm="on"]) .nav-toggle-bars span {
transition: transform 0.2s ease, opacity 0.2s ease;
}
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 899px) {
.nav-toggle { display: flex; }
.main-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--cream);
border-bottom: 1px solid var(--line);
box-shadow: 0 24px 40px rgba(154, 52, 18, 0.12);
padding: 0.6rem 1.25rem 1.25rem;
}
.main-nav.is-open { display: flex; }
.main-nav a { padding: 0.9rem 0.25rem; font-size: 1.15rem; border-bottom: 1px solid var(--line); }
.header-cta { margin: 0.9rem 0 0; }
/* BR-6: content pages render fully with JavaScript off.
Under 900px the nav is display:none and the only thing that ever sets
`is-open` is the click handler in app.js. With JavaScript blocked or
failed, all six primary links were unreachable behind a painted, inert
Menu button, with nothing on the page saying so. Measured at 390px:
JS off -> .main-nav display:none, height 0, six links gone.
`html.js` is added by app.js line 10, whose own comment says "blocked or
failed app.js leaves the whole page visible" - so `html:not(.js)` is this
site's existing idiom for the no-JS case, and it needs no new browser
feature the way @media (scripting: none) would. The reveal animations at
line 1312 already use it; the nav simply never got the same gate, and
that asymmetry was the defect.
Static rather than absolute: with no toggle to close it, an overlay
pinned under the header would cover the page it is meant to lead away
from. */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .main-nav {
display: flex;
position: static;
box-shadow: none;
padding: 0.6rem 0 0.4rem;
}
}
/* ---------------------------------------------------------------- */
/* On-this-page strip, homepage only (NAV-UNIFICATION-V1, D-79, */
/* 2026-08-28). Sits under the sticky header but is NOT sticky */
/* itself: it orients once, then scrolls away with the page. */
/* ---------------------------------------------------------------- */
.onpage-strip {
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.onpage-strip .container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.6rem;
padding-block: 0.7rem;
}
.onpage-strip a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.35rem 1.05rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--cream);
color: var(--ink);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
}
.onpage-strip a:hover { color: var(--orange-deep); border-color: var(--orange-soft); background: var(--paper); }
.onpage-strip a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
html[data-contrast="high"] .onpage-strip { background: #FFFFFF; }
html[data-contrast="high"] .onpage-strip a { background: #FFFFFF; border-color: #78716C; }
/* ---------------------------------------------------------------- */
/* Hero */
/* ---------------------------------------------------------------- */
.hero { padding-block: clamp(3.2rem, 7vw, 5.5rem) clamp(3rem, 6vw, 5rem); overflow: clip; }
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
.hero-copy .lede { margin-bottom: 1.6rem; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 320px; }
.hero-art .orbit-mark { width: min(380px, 90%); height: auto; }
.float-chip {
position: absolute;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: 999px;
padding: 0.55rem 1rem;
font-weight: 700;
font-size: 0.95rem;
box-shadow: var(--shadow);
}
.float-chip svg { width: 20px; height: 20px; color: var(--orange-deep); }
.float-chip-1 { top: 2%; left: 0; }
.float-chip-2 { bottom: 10%; right: -2%; }
.float-chip-3 { bottom: -4%; left: 2%; }
@media (prefers-reduced-motion: no-preference) {
html:not([data-calm="on"]) .float-chip { animation: bob 5.5s ease-in-out infinite alternate; }
html:not([data-calm="on"]) .float-chip-2 { animation-delay: 0.8s; }
html:not([data-calm="on"]) .float-chip-3 { animation-delay: 1.6s; }
/* The logo assembles itself: letters rise, the orbit swings around them, then the
head and the spark land. Parts are the real logo's own paths. */
html:not([data-calm="on"]) .orbit-mark .mark-a,
html:not([data-calm="on"]) .orbit-mark .mark-v {
transform-box: fill-box;
transform-origin: center;
animation: mark-rise 0.8s cubic-bezier(0.22, 0.9, 0.28, 1) backwards;
}
html:not([data-calm="on"]) .orbit-mark .mark-a { animation-delay: 0.06s; }
html:not([data-calm="on"]) .orbit-mark .mark-v { animation-delay: 0.24s; }
html:not([data-calm="on"]) .orbit-mark .orbit-ring {
transform-box: view-box;
transform-origin: 50% 50%;
animation: orbit-swing 1.3s cubic-bezier(0.2, 0.85, 0.25, 1) 0.42s backwards;
}
html:not([data-calm="on"]) .orbit-mark .mark-dot {
transform-box: fill-box;
transform-origin: center;
animation: dot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.02s backwards;
}
html:not([data-calm="on"]) .orbit-mark .mark-spark {
transform-box: fill-box;
transform-origin: center;
animation:
spark-land 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.32s backwards,
spark-twinkle 5s ease-in-out 2.4s infinite;
}
html:not([data-calm="on"]) .hero-art .orbit-mark {
animation: mark-float 7s ease-in-out 2.4s infinite alternate;
}
}
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes mark-rise { from { opacity: 0; transform: translateY(26px) scale(0.94); } }
@keyframes orbit-swing { from { opacity: 0; transform: rotate(-155deg) scale(0.5); } }
@keyframes dot-pop { from { transform: scale(0); } }
@keyframes spark-land { from { opacity: 0; transform: scale(0) rotate(-80deg); } }
@keyframes spark-twinkle {
0%, 84%, 100% { transform: scale(1); opacity: 1; }
92% { transform: scale(1.28); opacity: 0.82; }
}
@keyframes mark-float { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
/* Split screen: seekers | employers */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.split-card {
position: relative;
border-radius: var(--radius-lg);
padding: clamp(1.6rem, 3.2vw, 2.4rem);
border: 1.5px solid var(--line);
background: var(--paper);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 0.7rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (prefers-reduced-motion: no-preference) {
html:not([data-calm="on"]) .split-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
.split-card h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 0.2rem; }
.split-card p { color: var(--ink-soft); margin-bottom: 0.4rem; }
.split-card .btn { align-self: flex-start; margin-top: auto; }
.split-note { font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.split-seeker { background: linear-gradient(160deg, var(--amber-tint), #FFF6D9 90%); border-color: #F5E5B8; }
.split-seeker .split-kicker { color: var(--yellow-deep); }
.split-employer { background: linear-gradient(160deg, var(--orange-tint), #FFE3C4 90%); border-color: #F8D9B4; }
.split-employer .split-kicker { color: var(--orange-deep); }
.split-kicker {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.split-kicker svg { width: 20px; height: 20px; }
.trust-row {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: 1.9rem;
}
@media (max-width: 899px) {
.hero { padding-block: 2rem 3rem; }
.hero-grid { grid-template-columns: 1fr; }
.hero-art { display: none; }
.split { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------- */
/* Stats band */
/* ---------------------------------------------------------------- */
.stats-band { background: var(--ink); color: var(--cream); }
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
text-align: center;
}
.stat-number {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.6rem, 6vw, 4.2rem);
line-height: 1;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.stat-label { margin-top: 0.7rem; font-size: 1.02rem; color: #E7E5E4; max-width: 21rem; margin-inline: auto; }
.stats-tagline {
text-align: center;
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
margin: clamp(2.2rem, 5vw, 3rem) auto 0.6rem;
max-width: 34rem;
}
.stats-source { text-align: center; font-size: 0.85rem; color: #A8A29E; margin: 0; }
@media (max-width: 719px) { .stats-grid { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- */
/* Feature sections (seeker / employer) */
/* ---------------------------------------------------------------- */
.side-seeker { background: linear-gradient(180deg, var(--amber-tint), var(--cream)); }
.side-employer { background: linear-gradient(180deg, var(--orange-tint), var(--cream)); }
.side-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.side-grid > .side-copy { position: sticky; top: 120px; }
.feature-list { display: grid; gap: 1.1rem; margin: 1.8rem 0; }
.feature {
display: flex;
gap: 1rem;
align-items: flex-start;
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius);
padding: 1.15rem 1.3rem;
box-shadow: var(--shadow);
}
.feature-icon {
flex: none;
width: 48px;
height: 48px;
border-radius: 14px;
display: grid;
place-items: center;
color: var(--orange-press);
background: var(--orange-tint);
}
.side-seeker .feature-icon { background: #FEF3C7; color: var(--yellow-deep); }
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem; }
.feature p { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }
.support-note {
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 700;
color: var(--ink-soft);
font-size: 1rem;
}
.support-note svg { width: 26px; height: 26px; flex: none; color: var(--orange-deep); }
@media (max-width: 899px) {
/* minmax(0,...) not a bare 1fr: a grid item defaults to min-width:auto, so it
refuses to shrink below its content's min-content width and spills out of
a 320px viewport once the text-size control enlarges the root font. The
two-column rule above already guards this; the single-column rule did not. */
.side-grid { grid-template-columns: minmax(0, 1fr); }
.side-grid > .side-copy { position: static; }
}
/* ---------------------------------------------------------------- */
/* Demo cards (Jordan T. and Brookfield) */
/* ---------------------------------------------------------------- */
.demo-card {
position: relative;
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(1.3rem, 2.6vw, 1.9rem);
box-shadow: var(--shadow-lift);
font-size: 0.98rem;
}
.demo-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; padding-right: 5.2rem; }
.avatar {
flex: none;
width: 56px; height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 700;
font-size: 1.15rem;
background: var(--orange-tint);
color: var(--orange-press);
}
.avatar-sun { background: #FEF3C7; color: var(--yellow-deep); }
.demo-head h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; margin: 0; }
.demo-head p { color: var(--ink-soft); font-size: 0.92rem; margin: 0.1rem 0 0; }
.demo-head .pill { margin-left: auto; flex: none; }
.demo-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1rem; }
.demo-tile {
display: flex;
align-items: center;
gap: 0.65rem;
border-radius: 14px;
padding: 0.8rem 0.9rem;
background: var(--cream);
border: 1px solid var(--line);
}
.demo-tile svg { width: 24px; height: 24px; flex: none; color: var(--orange-press); }
.demo-tile strong { display: block; font-size: 0.92rem; line-height: 1.3; }
.demo-tile span { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.demo-tile-hot { background: var(--orange-tint); border-color: #F8D9B4; }
.demo-label {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 1.1rem 0 0.55rem;
}
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.skill {
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.6rem 0.8rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
font-weight: 700;
font-size: 0.9rem;
}
.dots { display: inline-flex; gap: 4px; }
.dots i {
width: 11px; height: 11px;
border-radius: 50%;
border: 1.5px solid var(--orange-press);
background: transparent;
}
.dots i.on { background: var(--orange-press); }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.media-tile {
border-radius: 12px;
background: var(--cream);
border: 1px solid var(--line);
padding: 0.9rem 0.5rem;
display: grid;
justify-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
text-align: center;
color: var(--ink-soft);
}
.media-tile svg { width: 24px; height: 24px; color: var(--orange-press); }
.endorse {
margin: 1.1rem 0 0;
border-left: 4px solid var(--yellow);
background: var(--cream);
border-radius: 0 12px 12px 0;
padding: 0.85rem 1rem;
}
.endorse p { font-style: italic; margin: 0 0 0.25rem; }
.endorse footer { font-size: 0.82rem; color: var(--ink-soft); font-weight: 700; }
.demo-foot {
display: flex;
align-items: center;
gap: 0.55rem;
margin-top: 1.1rem;
padding-top: 0.9rem;
border-top: 1px solid var(--line);
font-size: 0.88rem;
font-weight: 700;
color: var(--ink-soft);
}
.demo-foot svg { width: 20px; height: 20px; flex: none; color: var(--orange-press); }
/* Brookfield checkboxes and matches */
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.check-chip {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 12px;
border: 1.5px solid var(--line);
padding: 0.55rem 0.7rem;
font-size: 0.85rem;
font-weight: 700;
color: var(--ink-soft);
}
.check-chip svg { width: 19px; height: 19px; flex: none; }
.check-chip.is-on { background: var(--orange-tint); border-color: #F1B98A; color: var(--orange-press); }
.shift-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.shift-row .chip { font-size: 0.85rem; padding: 0.4rem 0.85rem; background: var(--cream); }
.match-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.match-tile {
border: 1.5px solid var(--line);
border-radius: 14px;
padding: 0.95rem 0.5rem;
display: grid;
justify-items: center;
gap: 0.35rem;
text-align: center;
font-size: 0.88rem;
}
.match-tile strong { font-size: 0.95rem; }
.match-tile span { color: var(--ink-soft); font-size: 0.8rem; font-weight: 700; }
.match-tile.is-top { border-color: var(--orange); background: #FFF9F2; box-shadow: 0 6px 18px rgba(249, 115, 22, 0.16); }
.match-tile.is-top span { color: var(--orange-press); }
.match-tile .avatar { width: 44px; height: 44px; font-size: 0.95rem; }
@media (max-width: 479px) {
.check-grid, .media-grid, .match-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.demo-tiles, .skill-grid { grid-template-columns: 1fr; }
.demo-head { padding-right: 0; flex-wrap: wrap; }
.demo-head .pill { margin-left: 0; }
.tag-sample { position: static; display: inline-block; margin-bottom: 0.7rem; }
}
/* ---------------------------------------------------------------- */
/* Federal callout */
/* ---------------------------------------------------------------- */
.fed-callout {
margin-top: clamp(2.5rem, 5vw, 3.6rem);
border-radius: var(--radius-lg);
background: var(--ink);
color: var(--cream);
padding: clamp(1.8rem, 4vw, 3rem);
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(1.2rem, 3vw, 2.2rem);
align-items: center;
}
.fed-callout .stat-number { font-size: clamp(3rem, 7vw, 4.6rem); }
.fed-callout h3 { color: var(--cream); margin-bottom: 0.35rem; }
.fed-callout p { color: #D6D3D1; margin: 0; max-width: 34rem; }
@media (max-width: 899px) { .fed-callout { grid-template-columns: 1fr; text-align: left; } }
/* ---------------------------------------------------------------- */
/* Pricing */
/* ---------------------------------------------------------------- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
margin-top: clamp(2rem, 4vw, 2.8rem);
align-items: stretch;
}
.price-card {
position: relative;
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.8rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
box-shadow: var(--shadow);
}
.price-card.is-featured { border-color: var(--orange); box-shadow: var(--shadow-lift); }
.price-flag {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
/* solid, not the gradient: this label is 12px, so it needs 4.5:1 (see .btn-primary.btn-small) */
background: var(--orange-deep);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3rem 0.9rem;
border-radius: 999px;
white-space: nowrap;
}
.price-name { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; margin: 0; }
.price-amount { font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; line-height: 1.1; }
.price-amount small { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); }
.price-card ul { list-style: none; margin: 0.7rem 0 1.2rem; padding: 0; display: grid; gap: 0.5rem; color: var(--ink-soft); font-size: 0.98rem; }
.price-card li { display: flex; gap: 0.5rem; align-items: flex-start; }
.price-card li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--orange-deep); }
.price-card .btn { margin-top: auto; }
.pricing-note { text-align: center; margin-top: 1.6rem; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 899px) { .pricing-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
/* ---------------------------------------------------------------- */
/* How it works */
/* ---------------------------------------------------------------- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.step-card {
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.8rem 1.6rem;
box-shadow: var(--shadow);
position: relative;
}
.step-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.6rem;
line-height: 1;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
margin-bottom: 0.6rem;
}
.step-card h3 { margin-bottom: 0.3rem; }
.step-card p { color: var(--ink-soft); margin: 0; }
.privacy-line {
margin-top: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-weight: 700;
color: var(--ink-soft);
text-align: center;
}
.privacy-line svg { width: 22px; height: 22px; flex: none; color: var(--orange-deep); }
@media (max-width: 899px) { .steps-grid { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- */
/* Partners / ads */
/* ---------------------------------------------------------------- */
.rates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.rate-card {
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.6rem 1.5rem;
box-shadow: var(--shadow);
}
.rate-card h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.rate-amount { font-family: var(--font-display); font-weight: 700; font-size: 2rem; }
.rate-amount small { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.rate-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0.4rem 0 0; }
.pledge {
margin-top: 1.2rem;
border-radius: var(--radius-lg);
border: 2px dashed var(--orange-soft);
background: #FFF9F2;
padding: 1.5rem 1.7rem;
display: flex;
gap: 1rem;
align-items: flex-start;
}
.pledge svg { width: 30px; height: 30px; flex: none; color: var(--orange-deep); }
.pledge p { margin: 0; font-weight: 700; }
.pledge p span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 1rem; margin-top: 0.2rem; }
.sample-ads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.2rem; }
.ad-tile {
position: relative;
border-radius: var(--radius);
border: 1.5px solid var(--line);
background: var(--paper);
padding: 1.6rem 1rem 1.2rem;
display: grid;
justify-items: center;
gap: 0.5rem;
text-align: center;
box-shadow: var(--shadow);
}
.ad-tile svg { width: 34px; height: 34px; color: var(--orange-deep); }
.ad-tile strong { font-size: 0.98rem; }
.ad-tile span { font-size: 0.8rem; color: var(--ink-soft); }
.ad-tag {
position: absolute;
top: 10px;
right: 10px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--ink-soft);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.12rem 0.5rem;
background: var(--cream);
}
.sample-ads-note { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 899px) { .rates-grid { grid-template-columns: 1fr; } .sample-ads { grid-template-columns: 1fr 1fr; } }
/* ---------------------------------------------------------------- */
/* Mission */
/* ---------------------------------------------------------------- */
.mission-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.founder-card {
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lift);
padding: 2rem 1.8rem;
text-align: center;
}
.founder-mark { width: 124px; height: auto; margin: 0 auto 1rem; }
.founder-card h3 { margin-bottom: 0.3rem; }
.founder-card p { color: var(--ink-soft); font-size: 1rem; }
.jobs-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; }
.jobs-strip .chip { font-size: 0.9rem; background: var(--cream); }
@media (max-width: 899px) { .mission-grid { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- */
/* Waitlist */
/* ---------------------------------------------------------------- */
.waitlist { background: linear-gradient(180deg, var(--cream), var(--amber-tint)); }
.waitlist-box {
max-width: 46rem;
margin-inline: auto;
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lift);
padding: clamp(1.8rem, 4vw, 3rem);
}
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 0.4rem 0 1.4rem; }
.role-card {
position: relative;
border: 2px solid var(--line);
border-radius: var(--radius);
padding: 1rem 0.8rem;
display: grid;
justify-items: center;
gap: 0.4rem;
text-align: center;
font-weight: 700;
font-size: 0.98rem;
cursor: pointer;
background: var(--cream);
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.role-card svg { width: 28px; height: 28px; color: var(--ink-soft); }
.role-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.role-card:has(input:checked) { border-color: var(--orange-deep); background: var(--orange-tint); }
.role-card:has(input:checked) svg { color: var(--orange-press); }
.role-card:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.field input {
width: 100%;
min-height: 56px;
padding: 0.7rem 1.1rem;
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--ink);
background: var(--cream);
border: 2px solid var(--line);
border-radius: 14px;
}
.field input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-color: var(--orange-deep); }
.field-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }
.waitlist-box .btn { width: 100%; }
.form-status { margin-top: 1rem; font-weight: 700; min-height: 1.6em; }
.form-status.is-ok { color: #166534; }
.form-micro { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 599px) { .role-grid { grid-template-columns: 1fr; } .role-card { grid-template-columns: auto 1fr; justify-items: start; text-align: left; display: flex; align-items: center; gap: 0.7rem; } }
/* ---------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #E7E5E4; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.7fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
.footer-brand .wordmark { font-size: 1.35rem; }
.footer-tagline { letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 700; color: var(--orange-soft); margin: 0.6rem 0 1rem; }
/* FAQ */
.faq-list { max-width: 46rem; display: grid; gap: 1.6rem; }
.faq-item h3 { margin-bottom: 0.45rem; }
.faq-item p { margin: 0; }
.site-footer h2 { color: var(--cream); font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.9rem; }
.footer-mail svg { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-right: 0.35em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: #E7E5E4; }
.site-footer a:hover { color: var(--yellow); }
.site-footer a:focus-visible { outline-color: var(--yellow); }
/* Tap-target extension (WCAG 2.2 SC 2.5.8). Footer list links painted at 22px
tall inside a 39.4px row pitch, leaving ~17px of dead space between rows.
inline-block lets each link own its full 30.6px line box, and the invisible
::after overlay extends 8px beyond it on both sides.
What that actually yields, measured on Artemis 2026-08-24 rather than assumed:
adjacent overlays OVERLAP inside the ~8.8px row gap, and since neither carries
a z-index the later link in document order wins the overlap. So an interior
link owns ~39.4px, the full row pitch: about 8px above its paint, and none
below, because the next link's overlay claims the gap from its own box bottom
onward. The last link of each list keeps the full ~47px, since nothing follows
it to take the overlap. Forgiveness is therefore upward only.
39.4px clears SC 2.5.8's 24px AA floor with margin. It does NOT reach the 44px
comfort size, and an earlier note in this file claiming 47px effective height
above that comfort size was wrong. Do not repeat the 47px figure.
No pixel of the column is dead: every point from the first link's overlay to
the last resolves to some link.
Scoped to the stacked footer lists only: links inside prose are exempt from
2.5.8 under the inline exception, and extending those could cover surrounding
text. */
.site-footer ul a { position: relative; display: inline-block; }
.site-footer ul a::after { content: ""; position: absolute; inset: -8px 0; }
.footer-a11y { font-size: 0.95rem; color: #D6D3D1; }
.footer-bottom {
margin-top: clamp(2.2rem, 5vw, 3rem);
padding-top: 1.4rem;
border-top: 1px solid #44403C;
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.9rem;
color: #A8A29E;
}
@media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- */
/* Reveal on scroll */
/* ---------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
/* Reveal animation is JS-gated: app.js adds .js to on startup. If
app.js never runs, no .js class exists, nothing is ever opacity 0, and the
whole page stays visible. CSP blocks inline scripts/styles, so this class
gate is the no-JS fallback. */
@media (prefers-reduced-motion: no-preference) {
html.js:not([data-calm="on"]) .reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
html:not([data-calm="on"]) .reveal.in { opacity: 1; transform: none; }
html:not([data-calm="on"]) .reveal-d1 { transition-delay: 0.1s; }
html:not([data-calm="on"]) .reveal-d2 { transition-delay: 0.2s; }
html:not([data-calm="on"]) .reveal-d3 { transition-delay: 0.3s; }
}
/* ---------------------------------------------------------------- */
/* High contrast mode (a11y toolbar) */
/* ---------------------------------------------------------------- */
html[data-contrast="high"] body { background: #FFFFFF; color: #000000; }
html[data-contrast="high"] .lede,
html[data-contrast="high"] .feature p,
html[data-contrast="high"] .split-card p,
html[data-contrast="high"] .step-card p,
html[data-contrast="high"] .rate-card p,
html[data-contrast="high"] .founder-card p,
html[data-contrast="high"] .form-micro,
html[data-contrast="high"] .ink-soft { color: #292524; }
html[data-contrast="high"] a { color: #9A3412; text-decoration: underline; }
/* The skip link is the first thing a keyboard user reaches, and the rule
above was taking it: `html[data-contrast="high"] a` (0,1,2) outranks
`.skip-link` (0,1,0) on colour only, so it kept its dark background and
took #9A3412 text -- 2.39:1, under the 4.5 floor, on all twelve pages.
axe never saw it because the link is off-screen until focus. */
html[data-contrast="high"] .skip-link { background: #000000; color: #FFFFFF; }
html[data-contrast="high"] .wordmark,
html[data-contrast="high"] .stat-number,
html[data-contrast="high"] .step-num {
background: none;
-webkit-text-fill-color: currentColor;
color: #9A3412;
}
html[data-contrast="high"] .stats-band .stat-number,
html[data-contrast="high"] .fed-callout .stat-number { color: #FACC15; }
html[data-contrast="high"] .site-header { background: #FFFFFF; }
html[data-contrast="high"] .feature,
html[data-contrast="high"] .demo-card,
html[data-contrast="high"] .price-card,
html[data-contrast="high"] .step-card,
html[data-contrast="high"] .rate-card,
html[data-contrast="high"] .ad-tile,
html[data-contrast="high"] .waitlist-box,
html[data-contrast="high"] .split-card,
html[data-contrast="high"] .founder-card { border-color: #78716C; }
html[data-contrast="high"] .stats-band .stat-label { color: #F5F5F4; }
html[data-contrast="high"] .site-footer,
html[data-contrast="high"] .stats-band { color: #F5F5F4; }
html[data-contrast="high"] .btn-primary { background: #7C2D12; }
/* The blanket `html[data-contrast="high"] a { color: #9A3412 }` above is right
on the white page and wrong everywhere the surface brings its own dark
background, because it outranks the surface's own colour the same way
.main-nav a outranks .btn-primary in the default theme. Measured on all ten
pages before this fix: 207 failing nodes in high contrast against 0 in the
default theme. Turning the accessibility control ON made the site
unreadable, worst on the primary button at 1.28:1, which is invisible.
These restore each surface's own foreground. No new colours: #FFFFFF and
#F5F5F4 are already the high-contrast palette's own values. Underline still
distinguishes links from text, so nothing here depends on colour alone
(BR-36). Measured after: 9.37:1 on the button, 16.03:1 in the footer and
stats band, both above the 1.4.6 enhanced bar. */
html[data-contrast="high"] .btn-primary,
html[data-contrast="high"] a.btn-primary:hover { color: #FFFFFF; }
html[data-contrast="high"] .site-footer a,
html[data-contrast="high"] .stats-band a,
html[data-contrast="high"] .utility-bar a { color: #F5F5F4; }
/* The wordmark takes its high-contrast colour from its own rule above, not the
link rule, so the footer's brand lockup stayed at 2.39:1 after the fixes
above. --orange-soft is already the palette's dark-surface orange (the
footer tagline uses it), so the brand stays orange here as D-81 requires
and still measures 7.73:1, above the enhanced bar. */
html[data-contrast="high"] .site-footer .wordmark { color: #FB923C; }
/* ---------------------------------------------------------------- */
/* v2 additions (2026-08-06): name story, proof line, Triple Match, */
/* accessibility band, pilot callout */
/* ---------------------------------------------------------------- */
.name-story {
background: var(--cream);
border-left: 6px solid var(--orange);
border-radius: 14px;
padding: 1.25rem 1.5rem;
margin: 1.4rem 0;
}
.name-story p { margin: 0; font-size: 1.05rem; line-height: 1.7; }
.name-story strong { color: var(--orange-press); }
.proof-line {
margin: 1.4rem 0 0.3rem;
padding: 0.95rem 1.15rem;
background: var(--orange-tint);
border-radius: 12px;
color: var(--orange-press);
font-weight: 700;
line-height: 1.5;
}
.proof-line span {
display: block;
margin-top: 0.3rem;
font-size: 0.82rem;
font-weight: 400;
opacity: 0.85;
}
.tm-wrap { margin-top: clamp(3rem, 7vw, 4.5rem); }
.a11y-band { background: linear-gradient(180deg, var(--paper), var(--cream)); }
.a11y-chips { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1.4rem 0 1.1rem; }
.a11y-invite { font-size: 0.98rem; max-width: 46rem; }
.pilot-callout { margin-bottom: 2.2rem; }
html[data-contrast="high"] .name-story { background: #FFFFFF; border-left-color: #000000; }
html[data-contrast="high"] .name-story strong { color: #9A3412; }
html[data-contrast="high"] .proof-line { background: #FFFFFF; color: #000000; border: 2px solid #000000; }
html[data-contrast="high"] .a11y-band { background: #FFFFFF; }
/* ---------------------------------------------------------------- */
/* Windows High Contrast / forced colors */
/* Gradient-clipped text uses -webkit-text-fill-color: transparent, */
/* and forced-colors mode does not reset that property, so the */
/* wordmark, every stat number, and every step number vanish. */
/* Give them solid system colors when forced colors are active. */
/* ---------------------------------------------------------------- */
@media (forced-colors: active) {
.wordmark,
.stat-number,
.step-num {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: currentColor;
color: CanvasText;
}
}
/* ============================================================
/demo walkthrough page (added 2026-08-21)
Additive only. Every selector below is scoped to a class that
exists nowhere else, so no existing page can be affected.
============================================================ */
.demo-notice {
margin-top: 1.6rem;
padding: 1.1rem 1.25rem;
border: 2px solid var(--sun, #FACC15);
border-radius: 14px;
background: rgba(250, 204, 21, 0.09);
}
.demo-notice-title {
display: flex; align-items: center; gap: 0.55rem;
margin: 0 0 0.4rem; font-weight: 700;
}
.demo-notice-title svg { width: 20px; height: 20px; flex: none; }
.demo-notice p:last-child { margin: 0; }
.demo-aside {
display: flex; gap: 0.8rem; align-items: flex-start;
max-width: 62ch; margin: 1.6rem 0 0;
padding: 1rem 1.15rem;
border-left: 4px solid var(--flame, #F97316);
border-radius: 0 12px 12px 0;
background: rgba(249, 115, 22, 0.06);
}
.demo-aside svg { width: 22px; height: 22px; flex: none; margin-top: 0.15rem; }
.demo-card-employer { margin-top: 1.5rem; }
.req-check { width: 20px; height: 20px; flex: none; }
.req-note { font-size: 0.85rem; opacity: 0.75; margin-left: 0.4rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1rem; }
/* Skill by skill comparison */
.match-table {
max-width: 54rem; margin: 0 auto;
border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 14px; overflow: hidden;
}
.match-row {
display: grid; grid-template-columns: 1.1fr 0.9fr 1.4fr; gap: 0.75rem;
padding: 0.85rem 1rem; align-items: center;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.match-row:first-child { border-top: 0; }
.match-row-head { font-weight: 700; background: rgba(0, 0, 0, 0.04); }
.match-row.is-hit { background: rgba(250, 204, 21, 0.10); }
.match-verdict { max-width: 54rem; margin: 1rem auto 0; text-align: center; }
/* What is shared vs what is not */
.privacy-split {
/* min(17rem, 100%) rather than a bare 17rem: the track minimum is in rem, so
the text-size control scaled it up with the type (17rem is 340px at the
largest step) and the columns grew past a 320px viewport instead of
reflowing. Capping the minimum at the container width lets it always
shrink; the 17rem preference still holds wherever there is room. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
gap: 1rem; max-width: 54rem; margin: 2rem auto 0;
}
.privacy-col { padding: 1.15rem 1.25rem; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.12); }
.privacy-col-shared { background: rgba(250, 204, 21, 0.10); }
.privacy-col-private { background: rgba(249, 115, 22, 0.08); }
.privacy-col h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; }
.privacy-col h3 svg { width: 20px; height: 20px; flex: none; }
.privacy-col ul { list-style: none; margin: 0; padding: 0; }
.privacy-col li { display: flex; gap: 0.55rem; align-items: flex-start; margin-bottom: 0.5rem; }
.privacy-col li svg { width: 18px; height: 18px; flex: none; margin-top: 0.2rem; }
/* Numbered aftercare steps */
.step-list { list-style: none; max-width: 54rem; margin: 0 auto; padding: 0; }
.step-list li { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.step-list h3 { margin: 0 0 0.3rem; }
.step-list p { margin: 0; }
.step-n {
display: flex; align-items: center; justify-content: center;
width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%;
/* WCAG 1.4.3: white numerals on #F97316 measure 2.8:1 and need 4.5:1.
--orange-deep is 5.18:1. Caught on /demo 2026-08-23, before it published. */
background: var(--orange-deep); color: #fff; font-weight: 700;
}
@media (max-width: 34rem) {
.match-row { grid-template-columns: 1fr; gap: 0.2rem; }
/* Keep the header row in the accessibility tree. display:none would strip
the columnheaders and leave screen reader users without column context,
so hide it visually only. The ::before labels below are decorative and
exist purely for sighted mobile users. */
.match-row-head {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.match-row td:nth-child(2)::before { content: "Job needs: "; font-weight: 700; }
.match-row td:nth-child(3)::before { content: "Jordan showed: "; font-weight: 700; }
}
/* Windows High Contrast: keep the tinted panels legible */
@media (forced-colors: active) {
.demo-notice, .demo-aside, .match-table, .privacy-col { border: 1px solid CanvasText; }
.match-row.is-hit, .privacy-col-shared, .privacy-col-private { background: Canvas; }
.step-n { border: 1px solid CanvasText; }
}
/* ---------------------------------------------------------------- */
/* Resource pages: Stories, Companies, Terms (added 2026-08-21) */
/* Additive only. Nothing above this line is modified. */
/* ---------------------------------------------------------------- */
.page-lede { max-width: 46rem; }
.page-back { margin-top: 2.5rem; }
/* The honesty box. Used wherever the page makes a claim about */
/* somebody else, so the reader always knows what the claim is and */
/* is not. Canon: no implied partnerships, no borrowed traction. */
.honesty-note {
background: var(--amber-tint);
border: 1.5px solid var(--line);
border-left: 5px solid var(--yellow-deep);
border-radius: var(--radius);
padding: clamp(1rem, 3vw, 1.5rem);
max-width: 46rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.honesty-note h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.honesty-note p { margin: 0; color: var(--ink-soft); }
.honesty-note p + p { margin-top: 0.7rem; }
.entry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: clamp(1.2rem, 3vw, 1.8rem);
}
.entry-card {
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.2rem, 3vw, 1.7rem);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.entry-card h3 { margin: 0; font-size: 1.2rem; }
.entry-card p { margin: 0; color: var(--ink-soft); }
.entry-where {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--yellow-deep);
margin: 0;
}
.entry-card .entry-source {
margin-top: auto;
padding-top: 0.6rem;
border-top: 1px solid var(--line);
font-size: 0.85rem;
color: var(--ink-soft);
}
/* Plain link lists (rights and resources, terms contents) */
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 46rem; }
.link-list li { padding-left: 0; }
.link-list a { font-weight: 700; }
.link-list span { display: block; color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.2rem; }
/* Footer gained a fourth column when the rights links landed. */
@media (min-width: 900px) {
.footer-grid.footer-grid-4 { grid-template-columns: 1.15fr 0.7fr 0.8fr 1.05fr; }
}
html[data-contrast="high"] .entry-card { border-color: #78716C; }
html[data-contrast="high"] .honesty-note { border-color: #78716C; background: #FFFFFF; }
html[data-contrast="high"] .entry-card p,
html[data-contrast="high"] .entry-card .entry-source,
html[data-contrast="high"] .honesty-note p,
html[data-contrast="high"] .link-list span { color: #292524; }
html[data-contrast="high"] .entry-where { color: #7C2D12; }
/* ---------------------------------------------------------------- */
/* Accessibility statement page (added 2026-08-28). Additive only. */
/* A readable bulleted content list for sub-pages: the existing */
/* .link-list is unbulleted and link-shaped, so this is genuinely */
/* new. Default bullets kept, spacing added for readability. */
/* ---------------------------------------------------------------- */
.statement-list { margin: 0 0 1.1em; padding-left: 1.25em; max-width: 46rem; }
.statement-list li { margin-bottom: 0.5em; }
.statement-list li:last-child { margin-bottom: 0; }
/* .skill-note: the always visible rating anchor wording under each skill
on /demo. Moved here from the page's preview-only style block, since the
production CSP forbids inline styles. Added 2026-08-28, demo publish. */
.skill-note { display: block; font-size: 0.85em; opacity: 0.85; margin-top: 0.25rem; font-weight: 400; }
/* ---------------------------------------------------------------- */
/* A11Y HOTFIX, part 2: the two defects the guard was left red over. */
/* ---------------------------------------------------------------- */
/* 1. THE HIGH-CONTRAST PRIMARY BUTTON, and the cause is not the cascade.
`.btn` transitions `background-color`. Turning High Contrast on changes
`background-color`, which STARTS a transition -- and these buttons sit
inside `.reveal` containers at `opacity: 0`, so the transition is created
and never advances. `getAnimations()` reports a CSSTransition on
background-color, playState "running", currentTime 0, permanently.
A RUNNING TRANSITION IS THE HIGHEST CASCADE ORIGIN -- above author
`!important`. So the computed fill stayed pinned at its start value, which
is transparent, because the default state paints a gradient IMAGE and no
colour. That is why the rule below "did not paint", why the matched styles
and the computed value disagreed, and why an inline `!important` could not
move it either. Nothing was wrong with the specificity.
Proven: with the transition removed the fill computes #7C2D12 immediately,
and the button's real defect appears underneath at 1.28:1 -- the recorded
figure. `.btn-primary:hover` only animates `box-shadow`, so dropping
`background-color` here costs nothing; `.btn-sun` and `.btn-ghost` DO
animate a background on hover and keep the inherited transition. */
.btn-primary { transition: transform 0.18s ease, box-shadow 0.18s ease; }
/* Only now is it safe to set the foreground: the fill is guaranteed to land.
#FFFFFF on #7C2D12 measures 9.37:1. These are the same values PR #14 uses
for BR-34, so this hotfix and the train converge rather than conflict. */
html[data-contrast="high"] .btn-primary,
html[data-contrast="high"] a.btn-primary:hover { color: #FFFFFF; }
/* `.main-nav a` (0,1,1) outranks `.btn-primary` (0,1,0), so the header CTA
needs naming explicitly or it keeps the nav's link colour. */
html[data-contrast="high"] .main-nav a.btn-primary { color: #FFFFFF; }
/* 2. REFLOW AT THE LARGEST TEXT SIZE, 320px.
These track counts were sized for default text. At `data-textsize="2"` the
MIN-CONTENT width of a chip or tile grows past its track and the row can no
longer fit, whatever wrapping is allowed: `.check-chip` is a flex box whose
floor is icon + gap + the longest word + padding, measured at 130px against
a 101px track. Fewer columns is the fix; a bigger number would only move the
breakpoint at which it tips.
WHY IT WAS INVISIBLE. `overflow-x: clip` on html/body makes the excess
UNREACHABLE rather than off-screen, and `documentElement.scrollWidth` still
reads 320 -- so every reflow assertion we had was blind to it. Measure
`body.scrollWidth`.
WHY IT LOOKED LIKE A RUNNER ARTIFACT. Font metrics decide whether it tips:
0px overflow on Windows and macOS, 24px (index) and 8px (jobseekers) on the
Linux CI runner. The runner was right and the laptops were wrong -- Linux
metrics are closer to most visitors' than macOS's are. Fixing the track
counts, not the pixel numbers, is what makes this metric-independent. */
@media (max-width: 419px) {
.check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sample-ads { grid-template-columns: minmax(0, 1fr); }
}
/* Backstop for the other way a box exceeds its track: one long word. This
affects MIN-CONTENT sizing (which `break-word` does not), so it is what
actually lets a grid track shrink. */
.check-chip, .ad-tile, .feature-list li, .side-copy { overflow-wrap: anywhere; }
/* THE MECHANISM BEHIND EVERY REFLOW FAILURE IN THIS FILE, fixed once.
A grid or flex ITEM's automatic minimum size is its MIN-CONTENT width, so an
item that cannot shrink pushes its track wider than the viewport no matter
what the track list says. That is why `minmax(0, 1fr)` keeps having to be
added one rule at a time -- 28 track declarations here still lack it, and
whichever one tips next depends on the visitor's fonts.
`min-width: 0` restores the ability to shrink; text wraps normally and
nothing is clipped. Written with `:where()` so it contributes ZERO
specificity: any existing rule still wins, and this only removes a floor
nothing intended to set. Prefer this over widening track lists, which only
moves the breakpoint at which the same bug returns. */
:where(.hero-grid, .split, .side-grid, .check-grid, .match-grid, .media-grid,
.sample-ads, .steps-grid, .rates-grid, .role-grid, .mission-grid,
.pricing-grid, .stats-grid, .footer-grid, .demo-tiles, .skill-grid,
.fed-callout, .step-list li, .feature-list li) > * { min-width: 0; }
/* A word cannot be laid out narrower than itself. At the largest Text size
"accommodations" in the step list exceeds its own box: the H3's BORDER BOX
ends at 280 and is in bounds, while its inline content runs to 310 past a
305px viewport and is clipped by `overflow-x: clip`. That is content that
cannot be reached -- SC 1.4.10 -- and it is invisible to any assertion that
measures bounding boxes, which is why the node count reads 0 while
body.scrollWidth reads 8px on the runner. The 8px was never a phantom. */
h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote { overflow-wrap: break-word; }
/* `.feature-list` holds `div.feature`, not `li`, so `.feature-list li` in the
rule above matches NOTHING on index.html -- a selector written for a list
that is not a list. `.feature` is a flex box with 1.5px borders sitting in a
grid track, and it stayed 1px past the edge on Linux metrics while measuring
0 on Windows. Naming the elements that actually exist. */
:where(.feature-list, .feature) > * { min-width: 0; }
.feature { min-width: 0; }
/* ================================================================
DESIGN PASS, 2026-09-04 (ledger ableverse/site-design-pass/2026-09-04).
Connor's ask: make the home page read as professional and considered,
and carry only the important improvements to every page. Everything
below is ADDITIVE: it refines surfaces that already exist, removes
nothing, and changes no copy. Where a colour or a new layer touches
text, the block says what was measured and why the ratio stands.
================================================================ */
/* 1. Depth. One flat shadow reads as a template. Two layers, a tight
contact shadow and a soft ambient one in the same warm tint, read as
paper on a desk. The variables are re-declared so every card that
already uses them picks the change up without a per-card rule. */
:root {
--shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 14px 34px -10px rgba(154, 52, 18, 0.14);
--shadow-lift: 0 2px 4px rgba(28, 25, 23, 0.05), 0 26px 60px -14px rgba(154, 52, 18, 0.22);
--hairline: linear-gradient(90deg, #EA580C, #F97316 45%, #FACC15);
--line-strong: #F0DCC6;
}
/* 2. Display type. Fraunces is cut for tight leading at display sizes;
the body face is untouched. The clamp floors do not move, so the
320px reflow measured on 2026-09-04 is unchanged; only the ceilings
rise, and only where the column has room. `text-wrap: pretty` keeps
a paragraph from ending on a single word where the browser supports
it, and is ignored where it does not. */
h1 { font-size: clamp(2.5rem, 5.8vw, 4.25rem); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.95rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.018em; }
p, li, dd { text-wrap: pretty; }
.lede { line-height: 1.6; }
/* 3. The logo joins the wordmark. Before this, the brand mark appeared on
the home page footer and nowhere else: eleven pages carried the
wordmark alone. It is a background image on an empty span rather than
an ![]()
: the mark is decorative beside the wordmark (the link's name is
its aria-label), and markup-rules BR-40 holds ![]()
to the full logo
file. CSP: img-src 'self' governs CSS images, so /brand/ resolves. In
forced-colors mode it may be dropped; the wordmark still names the link. */
.brand-logo {
display: inline-block;
flex: none;
width: 54px;
height: 33px;
background: url(/brand/ableverse-mark.svg) center / contain no-repeat;
}
.site-footer .brand-logo { width: 66px; height: 40px; }
@media (max-width: 599px) { .site-header .brand-logo { width: 44px; height: 27px; } }
/* THE DECORATIVE MARK YIELDS TO THE TEXT, and that order is not a preference.
Measured at 320px on the design pass before this rule existed: the header
brand link grew 177px -> 193px -> 210px across the three text sizes, and
`.nav-toggle-label` ("Menu") crossed the viewport edge by 12px at LARGE and
41px at LARGEST. All twelve pages, both enlarged sizes - a11y-controls read
it as 12 pages losing content and it was right.
The 44px mark is the space that ran out. It is `aria-hidden="true"` and
carries no information: the wordmark beside it IS the brand to a reader, and
to a screen reader the mark was never there at all. So it is dropped exactly
where it costs someone a word, and kept everywhere else.
Hiding it returns the brand link to 153px and the overflow to 0, verified in
a browser at the largest size. SC 1.4.4 asks that text resize to 200% without
loss of content; a logo that pushes a control off-screen is that loss. */
@media (max-width: 599px) {
html[data-textsize="1"] .site-header .brand-logo,
html[data-textsize="2"] .site-header .brand-logo { display: none; }
}
/* 4. Hero atmosphere. The hero sat on the same flat cream as every other
section. From 900px, two soft radial washes sit behind the RIGHT half of
the hero on a pseudo-element under the content. They stop at 48% of the
width, so the eyebrow, headline and lede keep pure cream behind them and
nothing a person reads changes its measured contrast. Off in high
contrast, where the page is white by rule. */
.hero { position: relative; }
.hero > .container { position: relative; z-index: 1; }
@media (min-width: 900px) {
.hero::before {
content: "";
position: absolute;
inset: 0 0 0 48%;
pointer-events: none;
background:
radial-gradient(44% 46% at 66% 38%, rgba(249, 115, 22, 0.16), transparent 70%),
radial-gradient(30% 34% at 94% 6%, rgba(250, 204, 21, 0.24), transparent 70%);
}
}
html[data-contrast="high"] .hero::before { display: none; }
/* 5. Sub-page heroes. Every inner page opens with a headline and a lede on
an empty right half. The brand mark now sits there as a faint watermark
(a pseudo-element, decorative, 10% opacity, right-aligned), so the ten
inner pages share the home page's brand presence. The copy column caps
at 50rem so the headline reads as a column rather than a banner. The
home hero is excluded by :has(.hero-art), which this stylesheet already
relies on for the role cards. Under the watermark's left edge the
background is cream plus 10% orange: #1C1917 text still measures above
13:1 there. Off in high contrast. */
.hero > .container > .hero-copy { max-width: 50rem; }
@media (min-width: 900px) {
.hero:not(:has(.hero-art))::after {
content: "";
position: absolute;
top: 10%;
right: max(1rem, calc((100% - var(--container)) / 2 - 1rem));
width: min(36%, 500px);
aspect-ratio: 791 / 479;
pointer-events: none;
opacity: 0.1;
background: url(/brand/ableverse-mark.svg) center / contain no-repeat;
}
}
html[data-contrast="high"] .hero::after { display: none; }
/* 6. Home hero artwork. A soft halo behind the orbit mark, and the mark now
shows on phones: under 900px .hero-art was display:none, so a phone
visitor never saw the logo anywhere on the home page. It renders at
220px under the copy; the floating chips are positioned for the wide
layout and stay hidden there. The logo assembly animation keeps both of
its motion gates. */
.hero-art::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: min(460px, 108%);
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
background: radial-gradient(closest-side, rgba(250, 204, 21, 0.30), rgba(249, 115, 22, 0.10) 55%, transparent 100%);
}
.hero-art .orbit-mark { position: relative; z-index: 1; }
.hero-art .float-chip { z-index: 2; }
@media (max-width: 899px) {
.hero-art { display: grid; min-height: 0; margin-top: 1.4rem; }
.hero-art .orbit-mark { width: min(220px, 60%); }
.hero-art .float-chip { display: none; }
.hero-art::before { width: 280px; }
}
html[data-contrast="high"] .hero-art::before { display: none; }
/* 7. Cards. A hairline highlight along the top edge and a slightly firmer
border are what separate "paper" from "panel". The high-contrast border
rules earlier in this file are more specific and still win. */
.split-card, .feature, .demo-card, .step-card, .price-card, .rate-card,
.ad-tile, .founder-card, .entry-card, .waitlist-box, .honesty-note {
border-color: var(--line-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--shadow);
}
.demo-card, .founder-card, .waitlist-box {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--shadow-lift);
}
/* A brand accent bar on the three signature panels: the two sample cards
and the waitlist box. Inset from the corners so it clears the radius. */
.waitlist-box { position: relative; }
.demo-card::before, .waitlist-box::before {
content: "";
position: absolute;
top: -1.5px;
left: var(--radius-lg);
right: var(--radius-lg);
height: 4px;
border-radius: 0 0 4px 4px;
background: var(--hairline);
}
/* 8. The dark bands. The stats band and the pilot callout get a soft glow
in their top region and the stats band and footer get a brand hairline.
The glow is a pseudo-element under the content, never an ancestor, and
stays out of the bottom third where the small source line sits. At the
glow's centre the band lightens from #1C1917 to about #3A2418; cream
text there still measures above 9:1 and the stat labels above 8:1. */
.stats-band { position: relative; overflow: hidden; border-top: 4px solid; border-image: var(--hairline) 1; }
.stats-band::before, .fed-callout::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(50% 70% at 88% 0%, rgba(249, 115, 22, 0.20), transparent 65%),
radial-gradient(36% 50% at 4% 0%, rgba(250, 204, 21, 0.10), transparent 65%);
}
.stats-band > .container { position: relative; z-index: 1; }
.fed-callout { position: relative; overflow: hidden; }
.fed-callout > * { position: relative; z-index: 1; }
.site-footer { border-top: 4px solid; border-image: var(--hairline) 1; }
html[data-contrast="high"] .stats-band::before,
html[data-contrast="high"] .fed-callout::before { display: none; }
/* 9. Buttons. An inner highlight on the filled buttons. Fill and text
colours do not change, so every ratio recorded above still stands. The
.btn-primary transition list from the hotfix is not touched. */
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 22px rgba(194, 65, 12, 0.28); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 28px rgba(194, 65, 12, 0.36); }
.btn-sun { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 22px rgba(133, 77, 14, 0.18); }
/* 10. The pledge and the FAQ. A dashed border reads as a placeholder and
the pledge is a promise, so it gets a solid line on a solid warm ground
(solid, not a gradient, so the contrast harness keeps measuring its
text). FAQ entries get hairline dividers so the list reads as an index
rather than a run of headings. */
.pledge { border: 1.5px solid #F3D9A6; background: #FFF8E6; box-shadow: var(--shadow); }
.faq-list { gap: 0; }
.faq-item { padding-block: 1.5rem; border-top: 1px solid var(--line-strong); }
.faq-item:last-child { border-bottom: 1px solid var(--line-strong); }
html[data-contrast="high"] .pledge { background: #FFFFFF; border-color: #78716C; }
/* 11. Small marks. The eyebrow's gradient dash grows to 34px, and the
feature icon tiles take a soft gradient with an inner highlight. Icon
on tile: #9A3412 on #FFDFBF measures 5.6:1, #854D0E on #FDE9A6 5.7:1,
both above the 3:1 non-text floor. */
.eyebrow::before, .eyebrow--center::after { width: 34px; }
.feature-icon { background: linear-gradient(145deg, #FFEDD5, #FFDFBF); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.side-seeker .feature-icon { background: linear-gradient(145deg, #FEF3C7, #FDE9A6); }
/* 12. Form boundaries. The fields and the role cards sat on white with a
#F3E4D3 border, about 1.2:1, so the control's edge was carried by the
cream fill alone. A warm taupe border, #9C876F, measures 3.4:1 on white
and 3.1:1 on cream, which clears SC 1.4.11 for the boundary itself. The
focus ring is unchanged. */
.field input { border-color: #9C876F; box-shadow: inset 0 1px 2px rgba(28, 25, 23, 0.05); }
.role-card { border-color: #9C876F; }
.role-card:has(input:checked) { border-color: var(--orange-deep); }
/* 13. Windows High Contrast keeps background images, so the decorative
layers added above would paint over a forced Canvas. None of them carries
meaning; all of them go. The logo span stays: forced colours leave it
legible and the wordmark names the link regardless. */
@media (forced-colors: active) {
.hero::before, .hero::after, .hero-art::before,
.stats-band::before, .fed-callout::before,
.demo-card::before, .waitlist-box::before { display: none; }
}
/* 15. Desktop alignment (ledger ableverse/site-desktop-alignment/2026-09-05),
from Connor's two screenshots of the live site at desktop width.
(a) The stats band was a three-column grid holding two stats, so the pair
sat off-centre with a third of the band empty, and the labels landed at
different heights because "More than 1 in 4" wraps and "38.1%" does not.
Two centred columns, each stat a bottom-aligned column, so the two labels
share a line and the pair sits under the tagline.
(b) In the seeker and employer sections the COPY column was the sticky
one. It is the tall column, so sticky never engaged, and the short sample
card scrolled off and left the right half of the section empty for the
rest of the read. The card is the sticky one now and follows the reader
down the feature list. The founder card on the mission section had the
same shape and gets the same treatment. BR-9: each card sits in its own
column and never covers a control in the other. Under 900px the grids are
single-column and everything is static, as before. */
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 58rem;
margin-inline: auto;
align-items: end;
}
.stats-grid > * {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.side-grid > .side-copy { position: static; }
.side-grid > .demo-card,
.mission-grid > .founder-card { position: sticky; top: 120px; }
@media (max-width: 899px) {
.side-grid > .demo-card,
.mission-grid > .founder-card { position: static; }
}
@media (max-width: 719px) { .stats-grid { grid-template-columns: minmax(0, 1fr); } }
/* The wider column let "More than 1 in 4" break as "More than 1 in / 4",
a one-character second line, and balanced wrapping chose "More / than 1
in 4" because it minimises the longer line. Measured in Fraunces at 1920px:
1ch = 45px, "More than" = 322px (7.2ch), "than 1 in 4" = 316px, so a 7.5ch
cap takes "More than" on the first line and cannot take "More than 1".
ch scales with the font, so the break holds at every size; "38.1%" is 5ch
and never wraps. */
.stat-number { text-wrap: wrap; max-width: 7.5ch; }
/* 16. The home page's layout standard, applied to every page (ledger
ableverse/site-layout-standard-all-pages/2026-09-05). Connor: "make sure
that's the standard for every single page ... everything is centered and
majority focused on mobile view, but still looks super nice on desktop."
Audited all twelve pages at 1920px. The inner pages broke the standard
in three repeating ways: reading blocks capped at 46rem hugged the left
edge and left the right half of the section empty; a four-card grid on a
three-column track left one card alone on a second row; closing button
rows sat left where the home page centres its closers. Every rule here
is a no-op under its cap width, so phones see the same single column as
before, and the text inside a centred column stays left-aligned, which
is what a screen reader user's sighted colleague reads most easily. */
/* (a) Section heads centre, with the eyebrow dash on both sides, on every
page. The home page already did this for its centred sections; now the
left-hanging ones (partners, accessibility, questions) match. Heads inside
the two-column seeker and employer layouts use .side-copy, not this, and
heroes keep their own left column beside the watermark. */
.section-head { margin-inline: auto; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--grad-brand); }
.section-head .lede { margin-inline: auto; }
/* (b) Every capped reading block becomes a centred column. */
.honesty-note, .faq-list, .link-list, .statement-list, .page-lede,
.a11y-invite, .demo-notice, .demo-aside, .step-list { margin-inline: auto; }
.a11y-chips { justify-content: center; }
/* (c) Prose that sits directly in a section container ran the full 1120px,
which is 130-plus characters a line against BR-42's 80. It becomes the
same 46rem centred column as the head above it. Paragraphs inside cards,
grids and the two-column layouts are not direct children and are not
touched. */
.section > .container > p,
.section > .container > ul,
.section > .container > ol,
.section > .container > blockquote { max-width: 46rem; margin-inline: auto; }
/* (d) Four cards on a three-column track: exactly four become two by two,
centred, by capping the grid so only two 20rem tracks fit. Six cards
(stories, companies) still run three by two. */
.entry-grid:has(> :nth-child(4):last-child) { max-width: 56rem; margin-inline: auto; }
/* (e) Closing rows centre like the home page's own closers. */
.page-back { text-align: center; }
/* (f) The three text pages (accessibility, privacy, terms) are one reading
column inside the hero, the only heroes with an h2 directly in the copy.
The column centres, and the watermark moves up into the corner at a
smaller size so it sits beside the title rather than under body text. */
.hero:has(> .container > .hero-copy > h2) > .container > .hero-copy { margin-inline: auto; }
@media (min-width: 900px) {
.hero:has(> .container > .hero-copy > h2)::after {
width: min(24%, 380px);
top: 2.5rem;
right: max(1rem, calc((100% - var(--container)) / 2 - 3rem));
}
}
/* VALIDATION ERRORS (BR-18, BR-19).
#991B1B clears the 7:1 body-text floor on both grounds this form sits on:
7.83 against the cream and 8.31 against white. Measured, not chosen by eye.
Colour is never the only signal. Every error is a sentence next to its own
field, the field carries aria-invalid, and when more than one fails a
summary names them all. Somebody who cannot see the red loses nothing. */
.field-error {
color: #991B1B;
font-weight: 700;
margin: 0.35rem 0 0;
}
.form-errors {
border: 2px solid #991B1B;
border-radius: 12px;
padding: 0.9rem 1.1rem;
margin: 0 0 1.1rem;
background: #FFFFFF;
}
.form-errors h3 { color: #991B1B; margin: 0 0 0.4rem; font-size: 1rem; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors li + li { margin-top: 0.25rem; }
.form-errors a { color: #991B1B; }
/* The high contrast theme is black on white by design, and the errors join
it rather than keeping a colour that would be the weakest thing there. */
html[data-contrast="high"] .field-error,
html[data-contrast="high"] .form-errors h3,
html[data-contrast="high"] .form-errors a { color: #000000; }
html[data-contrast="high"] .form-errors { border-color: #000000; background: #FFFFFF; }