/* ==========================================================================
HumanSide — Shared Design System
thehumansideof.us | Foundations + Leading With Purpose landing pages
One stylesheet. Mobile-first (designed at 375px). No framework.
FONTS: the page must include (see CSS-CONTRACT.md):
--font-display uses Fraunces ITALIC, high optical size (high-contrast),
weight 500 — the PP Eiko Medium Italic stand-in.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
:root{
/* color — aligned to HumanSide official brand deck (CLIENT-BRAND.md §1) */
--cobalt:#1059E5; --cobalt-700:#0A3FA8; --cobalt-100:#D9ECFE;
--cream:#FDF8F1; --cream-100:#FEFBF7; --cream-200:#F8F0E0;
--dark:#272727; --teal:#00BDC9; --yellow:#FFDC22; --orange:#FA6A3A; --black:#000000;
--green:#1F9D55; --red:#D44438; --logo-grey:#888888;
/* text-safe (WCAG 1.4.3) ink variants for TEXT on light/cream surfaces.
Keep the base tokens above for non-text accents (borders, dividers, icons).
--teal-ink #0B6A73 : 5.91:1 on --cream, 6.17:1 on --cream-100
--logo-grey-ink #666666 : 5.37:1 on --cream, 5.61:1 on --cream-100, 4.83:1 on --cream-200
--red-ink #B42318 : 6.42:1 on --cream-100, 6.15:1 on --cream */
--teal-ink:#0B6A73; --logo-grey-ink:#666666; --red-ink:#B42318;
/* type */
--font-body:'Poppins',-apple-system,'Segoe UI',Roboto,sans-serif;
--font-display:'Playfair Display','Georgia',serif; /* HumanSide brand accent — use ITALIC + medium weight only */
/* spacing — 8pt grid */
--s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;
--s8:64px; --s10:80px; --s12:96px; --s16:128px;
/* radius */
--r-card:16px; --r-pill:9999px; --r-input:8px; --r-modal:24px;
/* motion */
--m-fast:150ms ease-out; --m-default:250ms ease-in-out;
--m-slow:400ms cubic-bezier(.4,0,.2,1);
/* containers */
--c-narrow:720px; --c-default:1080px; --c-wide:1280px;
/* derived */
--shadow-card:0 1px 2px rgba(39,39,39,.04), 0 4px 16px rgba(39,39,39,.06);
--shadow-hover:0 4px 8px rgba(39,39,39,.06), 0 12px 32px rgba(39,39,39,.12);
--shadow-nav:0 1px 0 rgba(39,39,39,.06), 0 2px 12px rgba(39,39,39,.05);
--ring-cobalt:0 0 0 2px var(--cream), 0 0 0 4px var(--cobalt);
--nav-h:64px;
--sticky-bar-h:44px; /* mobile sticky CTA height: 44px clears the WCAG 2.5.5 touch-target floor (was 40px) */
}
/* --------------------------------------------------------------------------
2. RESET / BASE
-------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
font-family:var(--font-body);
font-weight:400;
font-size:16px;
line-height:1.6;
color:var(--dark);
background:var(--cream);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
/* skip link — first focusable element */
.skip-link{
position:absolute;left:var(--s3);top:-100px;z-index:1000;
background:var(--cobalt);color:var(--cream-100);
padding:var(--s2) var(--s4);border-radius:var(--r-input);
font-weight:600;transition:top var(--m-fast);
}
.skip-link:focus{top:var(--s3);text-decoration:none}
/* --------------------------------------------------------------------------
3. TYPE SCALE (mobile-first; @768 upscale)
Families: --font-display = Fraunces italic 500 (always italic, never bold).
Poppins = everything else.
-------------------------------------------------------------------------- */
.display-xl,.display-l,.display-m,.display-s{
color:var(--dark);
letter-spacing:-0.02em;
}
.display-xl{ /* H1 hero only */
font-family:var(--font-body);
font-weight:700;
font-size:40px;
line-height:1.1;
}
.display-l{ /* section H2 */
font-family:var(--font-body);
font-weight:700;
font-size:32px;
line-height:1.1;
}
.display-m{ /* H3 */
font-family:var(--font-body);
font-weight:700;
font-size:24px;
line-height:1.1;
}
.display-s{ /* card title, FAQ Q */
font-family:var(--font-body);
font-weight:700;
font-size:20px;
line-height:1.2;
letter-spacing:normal;
}
.body-l{font-size:18px;line-height:1.6;font-weight:400}
.body-m{font-size:16px;line-height:1.6;font-weight:400}
.body-s{font-size:14px;line-height:1.6;font-weight:400}
/* Muted ink: #5b5b5b was ~4.3:1 on --cream-200 #F2EBDB (borderline fail).
#565656 clears 4.5:1 on --cream, --cream-100 and --cream-200 while still
reading as muted against the body ink. */
.text-muted{color:#565656}
.lead{font-size:18px;line-height:1.6;color:#3a3a3a}
@media (min-width:768px){
.display-xl{font-size:72px}
.display-l{font-size:56px}
.display-m{font-size:36px}
.display-s{font-size:24px}
.body-l,.lead{font-size:20px}
}
/* --- MIXED-HEADLINE HELPERS (signature move) ---------------------------- */
/* .h-em = Fraunces italic 500 emphasis phrase (always italic, never bold) */
/* .h-caps = Poppins Bold ALL CAPS phrase */
.h-em{
font-family:var(--font-display);
font-style:italic;
font-weight:500;
letter-spacing:0; /* serif italic reads tighter; reset the -0.02 inheritance */
}
.h-caps{
font-family:var(--font-body);
font-weight:700;
text-transform:uppercase;
font-style:normal;
letter-spacing:0.01em; /* subtle tracking for ALL-CAPS legibility */
}
/* --------------------------------------------------------------------------
4. LAYOUT — containers, section padding, backgrounds
-------------------------------------------------------------------------- */
.container-narrow,.container-default,.container-wide{
width:100%;margin-inline:auto;padding-inline:var(--s4);
}
.container-narrow{max-width:calc(var(--c-narrow) + (2 * var(--s4)))}
.container-default{max-width:calc(var(--c-default) + (2 * var(--s4)))}
.container-wide{max-width:calc(var(--c-wide) + (2 * var(--s4)))}
@media (min-width:768px){
.container-narrow,.container-default,.container-wide{padding-inline:var(--s6)}
}
/* Section padding (kills dead space): mobile 64 / tablet 80 / desktop 96 */
.section{padding-block:var(--s8)}
@media (min-width:768px){.section{padding-block:var(--s10)}}
@media (min-width:1024px){.section{padding-block:var(--s12)}}
.section--hero{padding-block:var(--s10)} /* 1.5x rhythm */
@media (min-width:768px){.section--hero{padding-block:var(--s12)}}
@media (min-width:1024px){.section--hero{padding-block:var(--s16)}}
.section--footer{padding-block:var(--s8)} /* 1.25x rhythm vs base */
@media (min-width:768px){.section--footer{padding-block:var(--s10)}}
/* Anchor jump targets must clear the 64px sticky nav (and the mobile sticky bar
when present). Without this, in-page #anchors land hidden behind the header. */
.section[id],
[id]{scroll-margin-top:calc(var(--nav-h, 64px) + var(--s4))}
/* extra offset on mobile when the urgency bar pushes the nav down */
body.has-sticky-bar [id]{
scroll-margin-top:calc(var(--nav-h, 64px) + var(--sticky-bar-h, 44px) + var(--s4));
}
@media (min-width:768px){
body.has-sticky-bar [id]{scroll-margin-top:calc(var(--nav-h, 64px) + var(--s4))}
}
/* Cream tone section backgrounds (alternate for adjacent sections) */
.bg-cream{background:var(--cream)}
.bg-cream-100{background:var(--cream-100)}
.bg-cream-200{background:var(--cream-200)}
/* Full-bleed cobalt section (framework + mid-page band) */
.bg-cobalt{
background:var(--cobalt);
color:var(--cream-100);
}
.bg-cobalt .display-xl,.bg-cobalt .display-l,
.bg-cobalt .display-m,.bg-cobalt .display-s{color:var(--cream-100)}
.bg-cobalt .h-em{color:#fff}
.bg-cobalt .eyebrow{color:var(--cream-100)}
.bg-cobalt a{color:#fff}
/* Dark footer */
.bg-dark{
background:var(--dark);
color:#d6d6d6;
}
.bg-dark .display-xl,.bg-dark .display-l,
.bg-dark .display-m,.bg-dark .display-s{color:var(--cream-100)}
.bg-dark a{color:#d6d6d6}
.bg-dark a:hover{color:var(--cream-100)}
/* simple stack/flow + grid helpers (so page HTML stays lean) */
.stack > * + *{margin-top:var(--s4)}
.stack-sm > * + *{margin-top:var(--s2)}
.stack-lg > * + *{margin-top:var(--s6)}
.center-text{text-align:center}
.measure{max-width:62ch}
.measure-narrow{max-width:48ch}
.grid{display:grid;gap:var(--s4)}
@media (min-width:768px){
.grid-2{grid-template-columns:repeat(2,1fr)}
/* grid-3 runs on a 6-track grid (each card spans 2) so a final partial row
can be centered. Full rows (3 cards = 6 tracks) are unaffected. */
.grid-3{grid-template-columns:repeat(6,1fr)}
.grid-3 > *{grid-column:span 2}
/* 1 trailing card (total 3n+1): center it (start at track 3). */
.grid-3 > :last-child:nth-child(3n+1){grid-column:3 / span 2}
/* 2 trailing cards (total 3n+2): center the pair (tracks 2-3 and 4-5). */
.grid-3 > :last-child:nth-child(3n+2){grid-column:4 / span 2}
.grid-3 > :nth-last-child(2):nth-child(3n+1){grid-column:2 / span 2}
/* .arc-path's absolute .arc-path__line span is out of grid flow but still
counts for :nth-child, shifting the orphan math by one and exiling the
3rd session card to a centered second row. A 3-card journey row is a
full row; never orphan-center its last card. */
.grid-3.arc-path > :last-child:nth-child(3n+1){grid-column:span 2}
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
.grid-4{grid-template-columns:repeat(4,1fr)}
}
/* --------------------------------------------------------------------------
5. BUTTONS (pill, Poppins Bold ALL CAPS, touch target >=44px)
-------------------------------------------------------------------------- */
.btn-primary,.btn-secondary,.btn-tertiary{
display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
font-family:var(--font-body);font-weight:700;
font-size:14px;line-height:1;letter-spacing:0.05em;text-transform:uppercase;
min-height:44px;padding:14px var(--s5);
border-radius:var(--r-pill);border:2px solid transparent;
text-decoration:none;text-align:center;
transition:background-color var(--m-fast), color var(--m-fast),
transform var(--m-fast), border-color var(--m-fast);
}
@media (min-width:768px){
.btn-primary,.btn-secondary,.btn-tertiary{font-size:16px}
}
.btn-primary:hover,.btn-secondary:hover,.btn-tertiary:hover{text-decoration:none}
.btn-primary{background:var(--cobalt);color:var(--cream-100);border-color:var(--cobalt)}
.btn-primary:hover{background:var(--cobalt-700);border-color:var(--cobalt-700);transform:scale(1.02)}
.btn-primary:active{transform:scale(.99)}
.btn-primary:focus-visible{outline:none;box-shadow:var(--ring-cobalt)}
.btn-secondary{background:transparent;color:var(--cobalt);border-color:var(--cobalt)}
.btn-secondary:hover{background:var(--cobalt-100)}
.btn-secondary:active{background:var(--cobalt-100);transform:scale(.99)}
.btn-secondary:focus-visible{outline:none;box-shadow:var(--ring-cobalt)}
.btn-tertiary{
background:transparent;color:var(--cobalt);border-color:transparent;
padding-inline:var(--s2);min-height:44px;
}
.btn-tertiary .icon{transition:transform var(--m-fast)}
.btn-tertiary:hover{text-decoration:underline}
.btn-tertiary:hover .icon{transform:translateX(4px)}
.btn-tertiary:focus-visible{outline:none;box-shadow:var(--ring-cobalt);border-radius:var(--r-input)}
/* on-cobalt / on-dark button color flips */
.bg-cobalt .btn-primary,.bg-dark .btn-primary{background:var(--cream-100);color:var(--cobalt);border-color:var(--cream-100)}
.bg-cobalt .btn-primary:hover,.bg-dark .btn-primary:hover{background:#fff;border-color:#fff}
.bg-cobalt .btn-primary:focus-visible,.bg-dark .btn-primary:focus-visible{box-shadow:0 0 0 2px var(--cobalt),0 0 0 4px var(--cream-100)}
.bg-cobalt .btn-secondary{color:var(--cream-100);border-color:var(--cream-100)}
.bg-cobalt .btn-secondary:hover{background:rgba(255,255,255,.12)}
.bg-cobalt .btn-tertiary{color:var(--cream-100)}
.btn-block{display:flex;width:100%}
.btn-group{display:flex;flex-wrap:wrap;gap:var(--s3)}
/* icon sizing inside buttons / inline */
.icon{width:24px;height:24px;flex:none;stroke-width:1.5}
.icon-sm{width:20px;height:20px}
/* --------------------------------------------------------------------------
6. EYEBROW
teal on breathing sections, cobalt on dense/hero — set per spec via modifier
-------------------------------------------------------------------------- */
.eyebrow{
display:inline-block;
font-family:var(--font-body);font-weight:600;
font-size:12px;line-height:1.2;letter-spacing:0.1em;text-transform:uppercase;
color:var(--teal-ink); /* text-safe teal (1.4.3); base --teal stays for accents */
margin-bottom:var(--s3);
}
@media (min-width:768px){.eyebrow{font-size:14px}}
.eyebrow--cobalt{color:var(--cobalt)}
.eyebrow--teal{color:var(--teal-ink)} /* WCAG 1.4.3: 5.91:1 on cream vs 2.18:1 for raw --teal */
/* On cobalt/dark bands the eyebrow already inverts to cream via §4 rules. */
/* --------------------------------------------------------------------------
7. TRUST ROW
-------------------------------------------------------------------------- */
.trust-row{text-align:center}
.trust-row__label{
font-family:var(--font-body);font-weight:600;
font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
color:var(--logo-grey-ink);margin-bottom:var(--s3); /* WCAG 1.4.3: text ink, 5.37:1 on cream */
}
.trust-row__logos{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:var(--s6);
}
@media (min-width:768px){.trust-row__logos{gap:var(--s10)}}
.trust-row__logo{
color:var(--logo-grey);
font-weight:700;font-size:22px;letter-spacing:0.01em;
opacity:.85;
}
.trust-row__logo svg{height:32px;width:auto;fill:var(--logo-grey)}
@media (min-width:768px){
.trust-row__logo{font-size:28px}
.trust-row__logo svg{height:40px}
}
/* Real logo STRIP image (single bitmap of all wordmarks, e.g.
assets/img/real/logo-strip-trustedby.png). Renders 32px tall on mobile,
40px tall on >=768px, width auto. Greyscale-by-default so a mixed-color
logo sheet reads as one calm trust row; `.trust-row__strip--color` opts
out of the greyscale treatment. Always give the ![]()
real alt text. */
.trust-row__strip{
height:32px;width:auto;max-width:100%;
display:block;margin-inline:auto;
filter:grayscale(1);opacity:.85;
}
@media (min-width:768px){.trust-row__strip{height:40px}}
.trust-row__strip--color{filter:none;opacity:1}
/* Text roster line beneath the strip (authority list, e.g.
"Trusted by teams at Google, Nike, WHOOP, Disney, ... and more"). */
.trust-row__roster{
margin-top:var(--s3);
font-size:14px;font-weight:500;line-height:1.5;
color:var(--logo-grey-ink); /* WCAG 1.4.3 text ink, 5.37:1 on cream */
max-width:56ch;margin-inline:auto;
}
/* small inline proof chips (awards / years) */
.proof-chips{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}
.proof-chip{
display:inline-flex;align-items:center;gap:var(--s2);
background:var(--cream-200);color:var(--dark);
border-radius:var(--r-pill);padding:var(--s2) var(--s3);
font-size:14px;font-weight:600;
}
/* On a cobalt section a translucent-white chip needs pure white text to
clear WCAG 1.4.3 (cream-100 over white .14/cobalt is only 4.48:1;
#fff lifts it to 4.58:1). */
.bg-cobalt .proof-chip{color:#fff}
/* Risk-reversal one-liner under a primary CTA (refund / no-commitment copy).
Quiet, reassuring, optional leading shield/check .icon inside. */
.risk-reversal{
display:flex;align-items:flex-start;gap:var(--s2);
margin-top:var(--s3);max-width:52ch;
font-size:14px;line-height:1.5;color:var(--logo-grey-ink); /* WCAG ink */
}
.risk-reversal svg{
flex:0 0 auto;width:18px;height:18px;margin-top:2px;
color:var(--teal-ink);stroke-width:1.5;
}
.center-text .risk-reversal,.risk-reversal--center{margin-inline:auto;justify-content:center;text-align:left}
/* Tax note: lower-page CPA-safe block ("A note for your CFO or tax advisor").
Calm bordered card with a clear disclaimer slot. Not a warning color. */
.tax-note{
border:1px solid var(--cream-200);
background:var(--cream-100);
border-left:3px solid var(--cobalt);
border-radius:var(--r-input);
padding:var(--s4);max-width:62ch;
}
.tax-note__title{font-weight:700;font-size:16px;margin-bottom:var(--s2);color:var(--dark)}
.tax-note__body{font-size:14px;line-height:1.6;color:var(--dark)}
.tax-note__disclaimer{
margin-top:var(--s3);font-size:13px;line-height:1.5;font-style:italic;
color:var(--logo-grey-ink); /* WCAG ink, 5.61:1 on cream-100 */
}
/* --------------------------------------------------------------------------
8. CARD
-------------------------------------------------------------------------- */
.card{
background:var(--cream-100);
border:1px solid var(--hairline);
border-radius:var(--r-card);
padding:var(--s4);
box-shadow:var(--shadow-card);
}
@media (min-width:768px){.card{padding:var(--s5)}}
.card__icon{
display:inline-flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:var(--r-input);
background:var(--cobalt-100);color:var(--cobalt);
margin-bottom:var(--s3);
}
.card__icon svg{width:24px;height:24px;stroke-width:1.5}
.card__title{margin-bottom:var(--s2)}
/* interactive variant only */
.card--hover{transition:box-shadow var(--m-default), transform var(--m-default)}
.card--hover:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.card--cobalt{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.card--feature{border-color:var(--cobalt);box-shadow:var(--shadow-hover)}
/* stat block (e.g. 7 / 30 / 5 / Live) */
.stat{text-align:center}
.stat__num{
font-family:var(--font-display);font-style:italic;font-weight:500;
font-size:48px;line-height:1;color:var(--cobalt);
}
@media (min-width:768px){.stat__num{font-size:64px}}
.stat__label{
font-weight:600;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;
color:var(--dark);margin-top:var(--s2);
}
.bg-cobalt .stat__num{color:#fff}
/* Cited-stat attribution: small, muted source tag that follows a proof stat
(e.g. "(BCG, 2025)" / "(BCG, 10-20-70 principle)"). Inline by default so it
can sit at the end of the stat sentence; add it as a block for its own line.
Uses the WCAG-safe grey ink so it stays legible on cream surfaces. */
.stat-cite{
font-size:13px;font-weight:500;line-height:1.4;
color:var(--logo-grey-ink); /* 5.37:1 on cream */
font-style:normal;
}
@media (min-width:768px){.stat-cite{font-size:14px}}
.bg-cobalt .stat-cite,.bg-dark .stat-cite{color:var(--cream-100)}
/* --------------------------------------------------------------------------
8b. TESTIMONIAL (quote card with optional real headshot)
A .card that carries a circular avatar headshot above/beside the
attribution. Drop a real ![]()
in for a named
reviewer (e.g. Kelsey Kates / Google); omit it for text-only quotes.
-------------------------------------------------------------------------- */
.testimonial__quote{
font-size:18px;line-height:1.6;color:var(--dark);
}
@media (min-width:768px){.testimonial__quote{font-size:20px}}
/* attribution row: avatar + name/title, vertically centered */
.testimonial__cite{
display:flex;align-items:center;gap:var(--s3);
margin-top:var(--s4);
font-style:normal; /* override blockquote/cite italics */
}
.testimonial__avatar{
flex:0 0 auto;
width:48px;height:48px;border-radius:var(--r-pill);
object-fit:cover;display:block;
border:2px solid var(--cream-200);
background:var(--cream-200); /* graceful tint before the image paints */
}
@media (min-width:768px){.testimonial__avatar{width:56px;height:56px}}
.testimonial__name{font-weight:700;font-size:15px;color:var(--dark);line-height:1.3}
.testimonial__role{font-size:14px;color:var(--logo-grey-ink);line-height:1.4} /* WCAG ink */
.bg-cobalt .testimonial__quote,.bg-cobalt .testimonial__name{color:var(--cream-100)}
.bg-cobalt .testimonial__role{color:var(--cream-100)}
.bg-cobalt .testimonial__avatar{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.14)}
/* --------------------------------------------------------------------------
9. BADGES
-------------------------------------------------------------------------- */
.badge-yellow{
display:inline-flex;align-items:center;gap:var(--s2);
background:var(--yellow);color:var(--dark);
border-radius:var(--r-pill);padding:var(--s2) var(--s4);
font-family:var(--font-body);font-weight:600;
font-size:12px;letter-spacing:0.1em;text-transform:uppercase;line-height:1.2;
}
@media (min-width:768px){.badge-yellow{font-size:14px}}
.badge-tm{ /* small trademark badge for framework names */
display:inline-flex;align-items:center;gap:var(--s2);
background:var(--cobalt-100);color:var(--cobalt-700);
border-radius:var(--r-pill);padding:var(--s1) var(--s3);
font-weight:600;font-size:13px;
}
/* --------------------------------------------------------------------------
10. FORM FIELDS
-------------------------------------------------------------------------- */
.field{margin-bottom:var(--s4)}
.field__label{
display:block;font-weight:600;font-size:14px;
color:var(--dark);margin-bottom:var(--s2);
}
.field__label .req{color:var(--red);margin-left:2px}
.field__hint{font-size:14px;color:#5b5b5b;margin-top:var(--s1)}
.field__control,
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
width:100%;
font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--dark);
background:var(--cream-100);
border:1px solid var(--cream-200);
border-radius:var(--r-input);
padding:14px var(--s3);
min-height:48px;
transition:border-color var(--m-fast), box-shadow var(--m-fast);
-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:96px;resize:vertical;padding-top:var(--s3)}
.field select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23272727' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right var(--s3) center;
padding-right:var(--s8);
}
.field__control:focus,
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;
border-color:var(--cobalt);
box-shadow:0 0 0 3px var(--cobalt-100);
}
/* error state */
.field.is-error .field__control,
.field.is-error input,.field.is-error select,.field.is-error textarea{
border-color:var(--red);
}
.field.is-error .field__control:focus,
.field.is-error input:focus,.field.is-error select:focus,.field.is-error textarea:focus{
box-shadow:0 0 0 3px rgba(212,68,56,.18);
}
.field__error{
display:none;font-size:14px;line-height:1.5;color:var(--red-ink); /* WCAG 1.4.3: 6.42:1 on cream-100 */
margin-top:var(--s2);
}
.field.is-error .field__error{display:block}
.form-row{display:grid;gap:0}
@media (min-width:560px){.form-row{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.form-consent{font-size:14px;color:#5b5b5b}
/* form success (replaces form) */
.form-success{
display:none;text-align:center;padding:var(--s4) 0;
}
.form-success.is-active{display:block}
.form-success__icon{
display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;border-radius:var(--r-pill);
background:rgba(31,157,85,.12);color:var(--green);margin-bottom:var(--s3);
}
/* generic form-level error */
.form-error{
display:none;background:rgba(212,68,56,.08);border:1px solid var(--red);
color:var(--red-ink);border-radius:var(--r-input);padding:var(--s3); /* text ink (1.4.3): 5.76:1 on tint */
font-size:14px;margin-bottom:var(--s4);
}
.form-error.is-active{display:block}
/* --------------------------------------------------------------------------
11. MODAL / POPUP
-------------------------------------------------------------------------- */
.modal{
position:fixed;inset:0;z-index:900;
display:none;align-items:center;justify-content:center;
padding:var(--s4);
}
.modal.is-open{display:flex}
.modal__backdrop{
position:absolute;inset:0;
background:rgba(39,39,39,.6);
opacity:0;transition:opacity 200ms ease;
}
.modal.is-open .modal__backdrop{opacity:1}
.modal__panel{
position:relative;z-index:1;
width:100%;max-width:480px;max-height:calc(100dvh - var(--s8));
overflow-y:auto;-webkit-overflow-scrolling:touch;
background:var(--cream-100);
border-radius:var(--r-modal);
padding:var(--s6) var(--s5);
box-shadow:0 24px 64px rgba(39,39,39,.28);
transform:scale(.95);opacity:0;
transition:transform 200ms ease, opacity 200ms ease;
}
@media (min-width:768px){.modal__panel{padding:var(--s6)}}
.modal.is-open .modal__panel{transform:scale(1);opacity:1}
.modal__close{
position:absolute;top:var(--s3);right:var(--s3);z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:var(--r-pill);
background:transparent;border:none;color:var(--dark);
transition:background-color var(--m-fast);
}
.modal__close:hover{background:var(--cream-200)}
.modal__close:focus-visible{outline:none;box-shadow:var(--ring-cobalt)}
.modal__close svg{width:24px;height:24px;stroke-width:1.5}
.modal__title{margin-bottom:var(--s2);padding-right:var(--s8)}
.modal__intro{color:#3a3a3a;margin-bottom:var(--s4)}
/* mobile = full-screen overlay */
@media (max-width:559px){
.modal{padding:0}
.modal__panel{
max-width:none;min-height:100dvh;max-height:none;
border-radius:0;padding:var(--s8) var(--s4) var(--s6);
}
}
/* body scroll-lock helper (set by JS) */
body.is-locked{overflow:hidden}
/* --------------------------------------------------------------------------
12. ACCORDION (single-open)
-------------------------------------------------------------------------- */
.accordion{border-top:1px solid var(--cream-200)}
.accordion__item{border-bottom:1px solid var(--cream-200)}
.accordion__trigger{
display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
width:100%;text-align:left;
background:transparent;border:none;
padding:var(--s4) 0;min-height:44px;color:var(--dark);
}
.accordion__trigger:hover .accordion__q{color:var(--cobalt)}
.accordion__trigger:focus-visible{outline:none;box-shadow:var(--ring-cobalt);border-radius:var(--r-input)}
.accordion__q{
font-family:var(--font-body);font-weight:700;font-size:20px;line-height:1.2;
}
@media (min-width:768px){.accordion__q{font-size:24px}}
.accordion__chevron{
flex:none;width:24px;height:24px;color:var(--cobalt);
transition:transform var(--m-fast);
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron{transform:rotate(180deg)}
/* .js-scoped so no-JS visitors get readable, expanded answers (JS adds [hidden]
+ collapse behavior at init; without JS neither exists). */
.js .accordion__panel{
overflow:hidden;height:0;
opacity:0;
transition:height var(--m-default), opacity var(--m-default);
}
/* R-053 note: closed panels use the global [hidden]{display:none!important}
rule (see §"hidden" utility). The old .accordion__panel[hidden]{display:block}
override here was dead (lost to !important) and its "keep measurable" comment
was wrong; JS open() removes [hidden] first, forces layout at height:0 via a
scrollHeight read, then animates, so no measurable-while-hidden rule is needed. */
.accordion__trigger[aria-expanded="true"] + .accordion__panel{opacity:1}
.accordion__answer{padding:0 0 var(--s4);color:#3a3a3a;max-width:68ch}
/* --------------------------------------------------------------------------
13. STEPPER + live total
-------------------------------------------------------------------------- */
.stepper{display:inline-flex;align-items:center;gap:var(--s3)}
.stepper__btn{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:var(--r-pill);
background:var(--cobalt);color:var(--cream-100);border:none;
transition:background-color var(--m-fast), transform var(--m-fast), opacity var(--m-fast);
}
.stepper__btn:hover{background:var(--cobalt-700)}
.stepper__btn:active{transform:scale(.95)}
.stepper__btn:focus-visible{outline:none;box-shadow:var(--ring-cobalt)}
.stepper__btn:disabled{background:var(--cream-200);color:var(--logo-grey);cursor:not-allowed}
.stepper__btn svg{width:20px;height:20px;stroke-width:2}
.stepper__value{
min-width:2ch;text-align:center;
font-family:var(--font-body);font-weight:700;font-size:24px;color:var(--dark);
}
.price-total{
font-family:var(--font-body);font-weight:700;letter-spacing:-0.02em;
font-size:40px;line-height:1.1;color:var(--cobalt);
transition:opacity var(--m-fast);
}
@media (min-width:768px){.price-total{font-size:52px}}
.price-total.is-updating{opacity:0} /* fade-update only, no number tween */
.price-unit{font-size:16px;color:#5b5b5b;font-style:normal;font-family:var(--font-body)}
/* --------------------------------------------------------------------------
14. COUNTDOWN
DD : HH : MM (no seconds)
-------------------------------------------------------------------------- */
.countdown{display:inline-flex;align-items:center;gap:var(--s2)}
.countdown__cell{
display:flex;flex-direction:column;align-items:center;
background:var(--cobalt-100);border-radius:var(--r-input);
padding:var(--s2) var(--s3);min-width:56px;
}
.countdown__num{
font-family:var(--font-body);font-weight:700;
font-size:28px;line-height:1;color:var(--cobalt);
font-variant-numeric:tabular-nums;
}
@media (min-width:768px){.countdown__num{font-size:36px}}
.countdown__unit{
font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
color:var(--cobalt-700);margin-top:var(--s1);
}
.countdown__sep{
font-family:var(--font-body);font-weight:700;font-size:28px;color:var(--teal);
align-self:flex-start;line-height:1;padding-top:var(--s2);
}
@media (min-width:768px){.countdown__sep{font-size:36px}}
/* on cobalt band, invert cells to readable contrast */
.bg-cobalt .countdown__cell{background:rgba(255,255,255,.14)}
.bg-cobalt .countdown__num{color:#fff}
.bg-cobalt .countdown__unit{color:#fff}
.bg-cobalt .countdown__sep{color:var(--yellow)}
/* EXPIRED state: JS sets data-expired on the .countdown when the target passes.
Hide the 00:00:00 cells/separators and show the data-expired-text message
instead, so an elapsed cohort never reads as a live "all zeros" timer. */
.countdown[data-expired] .countdown__cell,
.countdown[data-expired] .countdown__sep{display:none}
.countdown[data-expired]{
flex-wrap:wrap;
background:var(--cobalt-100);border-radius:var(--r-input);
padding:var(--s2) var(--s4);
}
.countdown[data-expired]::after{
content:attr(data-expired-text);
font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1.4;
color:var(--cobalt-700);
}
.bg-cobalt .countdown[data-expired]{background:rgba(255,255,255,.14)}
.bg-cobalt .countdown[data-expired]::after{color:var(--cream-100)}
/* PENDING (pre-JS / no-JS) default. Author ships the .countdown WITH
data-countdown-pending set in the static markup so the timer never
flashes a bare "00:00:00" before JS runs (or at all when JS is off).
While pending, hide the cells/separators and show data-pending-text
("Counting down to August 13"). JS removes data-countdown-pending the
moment it writes the first real values, revealing the live cells.
Same visual treatment as the expired message so the two states match. */
.countdown[data-countdown-pending] .countdown__cell,
.countdown[data-countdown-pending] .countdown__sep{display:none}
.countdown[data-countdown-pending]{
flex-wrap:wrap;
background:var(--cobalt-100);border-radius:var(--r-input);
padding:var(--s2) var(--s4);
}
.countdown[data-countdown-pending]::after{
content:attr(data-pending-text);
font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1.4;
color:var(--cobalt-700);
}
.bg-cobalt .countdown[data-countdown-pending]{background:rgba(255,255,255,.14)}
.bg-cobalt .countdown[data-countdown-pending]::after{color:var(--cream-100)}
/* --------------------------------------------------------------------------
15. SEATS LINE (honest capacity)
-------------------------------------------------------------------------- */
.seats{
display:inline-flex;align-items:center;gap:var(--s2);
font-weight:600;font-size:16px;color:var(--dark);
}
.seats svg{width:20px;height:20px;color:var(--cobalt);stroke-width:1.5}
.seats__remaining{color:var(--cobalt-700)} /* only used when data-seats-remaining fed */
/* --------------------------------------------------------------------------
16. STICKY MOBILE BAR: mobile only, fixed ABOVE nav. No pulse/animation.
Foundations: single-text urgency bar ("COHORT 1 STARTS AUGUST 13").
LWP: label + APPLY action ("Leading With Purpose" -> application modal).
The LWP AI-assessment sidebar pill is fixed to the BOTTOM, so it never
overlaps this top bar.
-------------------------------------------------------------------------- */
.sticky-bar{
display:flex;align-items:center;justify-content:center;gap:var(--s2);
position:fixed;top:0;left:0;right:0;z-index:850;
height:var(--sticky-bar-h);
background:var(--yellow);color:var(--dark);
font-weight:700;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;
text-align:center;padding-inline:var(--s3);
border:none;width:100%;
}
.sticky-bar:hover{text-decoration:none}
/* LWP label + action variant: space the program name and the APPLY pill apart.
min-width:0 lets the label actually shrink + ellipsize inside the flex row
(without it, a flex item refuses to go below its content width and would
shove the price pill / action off-screen at 360-390px). The price pill and
action are flex:none so they stay fully visible while the label clips. */
.sticky-bar__label{
flex:1 1 auto;min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
text-align:left;
}
.sticky-bar:has(.sticky-bar__action){justify-content:space-between}
.sticky-bar__action{
display:inline-flex;align-items:center;gap:var(--s1);
flex:0 0 auto;
background:var(--dark);color:var(--yellow);
border-radius:var(--r-pill);padding:4px var(--s3);
font-size:13px;letter-spacing:0.06em;
}
.sticky-bar__action svg{width:16px;height:16px}
/* Price pill that sits beside the label (LWP) stays fully visible, never clipped. */
.sticky-bar__price{
flex:0 0 auto;
display:inline-block;padding:1px 8px;border-radius:9999px;
background:var(--cobalt);color:var(--cream-100);
font-weight:700;font-size:12px;letter-spacing:0;
}
/* At very narrow widths trim gap/padding so the label keeps maximum room. */
@media (max-width:400px){
.sticky-bar{gap:var(--s1);padding-inline:var(--s2);font-size:12px}
.sticky-bar__action{padding:4px var(--s2);font-size:12px}
}
@media (min-width:768px){.sticky-bar{display:none}}
/* when sticky bar present, nudge nav + body down on mobile */
body.has-sticky-bar .site-nav{top:var(--sticky-bar-h)}
@media (min-width:768px){body.has-sticky-bar .site-nav{top:0}}
/* --------------------------------------------------------------------------
17. SITE NAV + mobile drawer
-------------------------------------------------------------------------- */
.site-nav{
position:sticky;top:0;z-index:800;
background:var(--cream-100);
box-shadow:var(--shadow-nav);
}
.site-nav__inner{
display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
min-height:var(--nav-h);
}
.site-nav__logo{display:inline-flex;align-items:center;color:var(--dark)}
.site-nav__logo svg{height:28px;width:auto}
.site-nav__links{display:none;align-items:center;gap:var(--s5)}
.site-nav__link{
font-weight:600;font-size:15px;color:var(--dark);
}
.site-nav__link:hover{color:var(--cobalt);text-decoration:none}
.site-nav__cta{display:none}
@media (min-width:900px){
.site-nav__links{display:flex}
.site-nav__cta{display:inline-flex}
.site-nav__toggle{display:none}
}
.site-nav__toggle{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border:none;background:transparent;color:var(--dark);
border-radius:var(--r-input);
}
.site-nav__toggle:focus-visible{outline:none;box-shadow:var(--ring-cobalt)}
.site-nav__toggle svg{width:28px;height:28px;stroke-width:1.5}
/* mobile drawer */
.nav-drawer{
position:fixed;inset:0;z-index:870;display:none;
}
.nav-drawer.is-open{display:block}
.nav-drawer__backdrop{
position:absolute;inset:0;background:rgba(39,39,39,.5);
opacity:0;transition:opacity var(--m-default);
}
.nav-drawer.is-open .nav-drawer__backdrop{opacity:1}
.nav-drawer__panel{
position:absolute;top:0;right:0;height:100dvh;width:min(82vw,360px);
background:var(--cream-100);
padding:var(--s6) var(--s4);
box-shadow:-8px 0 32px rgba(39,39,39,.18);
transform:translateX(100%);transition:transform var(--m-default);
display:flex;flex-direction:column;gap:var(--s4);overflow-y:auto;
}
.nav-drawer.is-open .nav-drawer__panel{transform:translateX(0)}
.nav-drawer__close{
align-self:flex-end;
width:44px;height:44px;border:none;background:transparent;color:var(--dark);
border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;
}
.nav-drawer__close:focus-visible{outline:none;box-shadow:var(--ring-cobalt)}
.nav-drawer__link{
font-weight:600;font-size:20px;color:var(--dark);padding:var(--s2) 0;
}
.nav-drawer__link:hover{color:var(--cobalt);text-decoration:none}
@media (prefers-reduced-motion:reduce){
.nav-drawer__panel{transition:none}
.nav-drawer__backdrop{transition:none}
}
/* --------------------------------------------------------------------------
19. CALENDAR EMBED placeholder
-------------------------------------------------------------------------- */
.calendar-embed{
border:1px dashed var(--cobalt);
background:linear-gradient(135deg,var(--cream-100),var(--cobalt-100));
border-radius:var(--r-card);
padding:var(--s6) var(--s4);
text-align:center;
}
.calendar-embed__icon{
display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;border-radius:var(--r-pill);
background:var(--cobalt-100);color:var(--cobalt);margin-bottom:var(--s3);
}
.calendar-embed__icon svg{width:28px;height:28px;stroke-width:1.5}
.calendar-embed__title{font-weight:700;font-size:18px;margin-bottom:var(--s2)}
.calendar-embed__note{color:#5b5b5b;font-size:14px;margin-bottom:var(--s4);max-width:42ch;margin-inline:auto}
/* --------------------------------------------------------------------------
20. EDITORIAL PLACEHOLDER (image slots)
warm cream-cast gradient + soft grain + tiny italic caption.
Use: ...caption...
-------------------------------------------------------------------------- */
.ph{
position:relative;overflow:hidden;
border-radius:var(--r-card);
background:
radial-gradient(120% 120% at 18% 12%, var(--cream-100) 0%, rgba(255,252,246,0) 55%),
radial-gradient(120% 120% at 88% 90%, var(--cobalt-100) 0%, rgba(229,237,252,0) 60%),
linear-gradient(135deg, var(--cream-200) 0%, var(--cream) 48%, var(--cream-100) 100%);
border:1px solid var(--cream-200);
display:flex;align-items:flex-end;
isolation:isolate;
}
/* soft grain/texture via inline SVG noise (data URI) */
.ph::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
opacity:.5;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
/* faint editorial mark (crossed corner lines) so it reads "intentional" not "broken" */
.ph::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg stroke='%230F58E5' stroke-width='0.4' opacity='0.10'%3E%3Cpath d='M0 0 L100 100'/%3E%3Cpath d='M100 0 L0 100'/%3E%3C/g%3E%3C/svg%3E");
}
.ph__caption{
position:relative;z-index:1;
width:100%;
font-family:var(--font-display);font-style:italic;font-weight:500;
font-size:13px;color:#7a715c;
padding:var(--s3);
background:linear-gradient(to top, rgba(251,247,239,.85), rgba(251,247,239,0));
}
/* aspect ratios */
.ph-3-2{aspect-ratio:3 / 2}
.ph-1-1{aspect-ratio:1 / 1}
.ph-16-9{aspect-ratio:16 / 9}
.ph-4-5{aspect-ratio:4 / 5}
/* portrait avatar variant */
.ph--portrait{max-width:320px}
/* --------------------------------------------------------------------------
21. SCROLL REVEAL (one-shot via IntersectionObserver)
-------------------------------------------------------------------------- */
/* NO-JS GUARD: the hidden start state is scoped to .js (added by the head hook
before paint). If JS fails or is disabled, .reveal content is fully visible
instead of being permanently stuck at opacity:0. */
.js .reveal{
opacity:0;transform:translateY(16px);
transition:opacity var(--m-slow), transform var(--m-slow);
will-change:opacity, transform;
}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
/* stagger hooks (JS sets --reveal-delay; class kept for non-JS authoring) */
.js .reveal[style*="--reveal-delay"]{transition-delay:var(--reveal-delay)}
/* --------------------------------------------------------------------------
22. FOOTER bits
-------------------------------------------------------------------------- */
.footer-grid{display:grid;gap:var(--s6)}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.4fr}}
.footer-heading{
font-weight:600;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;
color:var(--logo-grey-ink);margin-bottom:var(--s3); /* text ink (1.4.3) for light-surface footers */
}
/* On the dark footer the ink is too low-contrast; raise it to a readable grey.
#ababab on --dark (#272727) = 6.51:1 (raw --logo-grey was only 4.21:1). */
.bg-dark .footer-heading,
.bg-dark .trust-row__label{color:#ababab}
.footer-links li + li{margin-top:var(--s2)}
.social-row{display:flex;gap:var(--s3)}
.social-row a{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:var(--r-pill);
background:rgba(255,255,255,.06);color:#d6d6d6;
}
.social-row a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.social-row svg{width:20px;height:20px}
.footer-legal{
margin-top:var(--s6);padding-top:var(--s4);
border-top:1px solid rgba(255,255,255,.12);
font-size:13px;color:#9a9a9a;
}
/* --------------------------------------------------------------------------
23. UTILITY
-------------------------------------------------------------------------- */
.visually-hidden{
position:absolute!important;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap;border:0;
}
.tm{font-size:0.7em;vertical-align:super;line-height:0}
.mt-0{margin-top:0}.mt-4{margin-top:var(--s4)}.mt-6{margin-top:var(--s6)}
.mb-0{margin-bottom:0}.mb-3{margin-bottom:var(--s3)}.mb-4{margin-bottom:var(--s4)}
.flow-tight{line-height:1.5}
.divider{height:1px;background:var(--cream-200);border:0;margin-block:var(--s6)}
.bg-cobalt .divider,.bg-dark .divider{background:rgba(255,255,255,.14)}
[hidden]{display:none!important}
/* --------------------------------------------------------------------------
24. INDEX / CHOOSER page
-------------------------------------------------------------------------- */
.chooser{min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
.chooser__cards{display:grid;gap:var(--s4)}
@media (min-width:768px){.chooser__cards{grid-template-columns:1fr 1fr}}
.chooser__card{
display:block;background:var(--cream-100);
border:1px solid var(--cream-200);border-radius:var(--r-card);
padding:var(--s6);box-shadow:var(--shadow-card);
transition:box-shadow var(--m-default), transform var(--m-default);
color:var(--dark);
}
.chooser__card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);text-decoration:none}
/* --------------------------------------------------------------------------
25. REDUCED MOTION — disable ALL motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:0.001ms!important;
animation-iteration-count:1!important;
transition-duration:0.001ms!important;
scroll-behavior:auto!important;
}
.reveal{opacity:1!important;transform:none!important}
.btn-primary:hover,.card--hover:hover{transform:none}
}
/* ==========================================================================
26. V2 UPGRADE COMPONENTS (animated hero + trust band + monogram avatars)
Appended for the v2 redesign (REDESIGN-BRIEF.md). Self-contained; does not
restyle any existing class. Every animation is transform/opacity only and
honors prefers-reduced-motion (the global block in §25 already neutralizes
transition/animation durations; the explicit guards below disable the
non-essential motion outright).
========================================================================== */
/* --- 26a-split. CLEAN SPLIT HERO: text panel | contained team-photo card ---
A true two-column split: the copy sits on solid cream (always 100% legible,
NEVER over the photo), beside a contained, rounded media card holding the
authentic team photo. Because the card is contained (~600px wide), the source
image renders at high effective pixel density = crisp, with none of the
full-bleed upscaling softness that made the edge-to-edge version look soft.
The card holds a still ![]()
by default; an autoplay, muted, looping