/* ==========================================================================
LeaderScale — Light theme layer
Loaded AFTER tokens.css and site.css. Purely additive.
Remove the to this file and the `lightmode` class on and the
site returns to the original dark build with nothing else changed.
THE RULE (Colum review July 29 2026, revised with Mike the same evening):
dark header, footer, every page hero, .section--soft
light plain .section, .section--tight, the .band CTA before the footer,
AND every rounded card inside them (light gray fill, dark ink)
Every dark-to-light seam is a hard edge with a 1px emerald hairline. The
cross-fades from the first pass are gone. They read as blur, not gradient.
WHEN JOSH'S STYLE SHEET ARRIVES: every light value lives in the one block
marked LIGHT SURFACE RAMP below. Swap those hex values and nothing else.
========================================================================== */
/* --------------------------------------------------------------------------
1. LIGHT SURFACE RAMP — the only place light values are declared
-------------------------------------------------------------------------- */
body.lightmode {
/* Surfaces. Cool off-white page, light gray cards, white form fields. Each
step carries the navy family's blue cast, so the light sections read as
the same brand rather than generic SaaS white. */
--lm-bg: #F5F8FC; /* page */
--lm-surface: #E8EDF5; /* cards, panels, callout boxes */
--lm-surface-2: #CBD5E4; /* raised elements, inactive signal track. Needs
real separation from the card, or the unlit
signal segments vanish. */
--lm-field: #FFFFFF; /* form fields, so inputs read as inputs on gray */
/* Text. --lm-text is the brand kit's Background/Inverse navy, used as ink.
Worst case is the gray card: 15.2 / 6.7 / 4.8. All clear AA. */
--lm-text: #0F172B;
--lm-text-dim: #44526B;
--lm-text-dimmer: #5A6880;
--lm-line: rgba(15, 23, 43, .13);
--lm-line-strong: rgba(15, 23, 43, .22);
/* Semantic colors darkened for legibility as TEXT on light. The signal
colors themselves never change. Emerald/500 reads 2.3:1 on light, so
green text drops to Emerald/800, which is in the brand ramp already. */
--lm-green-fg: #006045; /* Emerald/800 — 6.5:1 on the gray card */
--lm-blue-fg: #2B5FD9; /* 4.8:1 */
--lm-red-fg: #AE3714; /* 5.3:1 */
--lm-amber-fg: #7E5A12; /* 5.3:1 */
--lm-green-wash: rgba(0, 188, 125, .12);
--lm-green-edge: rgba(0, 150, 102, .34);
--lm-red-wash: rgba(242, 96, 60, .14);
/* The hairline marking every dark-to-light seam. One value, four seams.
Solid on purpose. A semi-transparent green composites down against the
dark side and disappears, so the rule has to be opaque to read on both.
Emerald/600 sits between the CTA green and the deep gradient green.
Set this to a neutral like rgba(15,23,43,.18) to mute the seams. */
--lm-seam: #009966;
}
/* --------------------------------------------------------------------------
2. WHICH SECTIONS GO LIGHT
Plain .section, .section--tight, and the closing .band. Cards inside them
inherit this context, so they go light gray with dark ink automatically.
-------------------------------------------------------------------------- */
body.lightmode .section:not(.section--soft),
body.lightmode .section--tight:not(.section--soft),
body.lightmode .band {
--bg: var(--lm-bg);
--bg-soft: var(--lm-field);
--surface: var(--lm-surface);
--surface-2: var(--lm-surface-2);
--text: var(--lm-text);
--text-dim: var(--lm-text-dim);
--text-dimmer: var(--lm-text-dimmer);
--line: var(--lm-line);
--line-strong: var(--lm-line-strong);
--green-fg: var(--lm-green-fg);
--blue-fg: var(--lm-blue-fg);
--red-fg: var(--lm-red-fg);
--amber-fg: var(--lm-amber-fg);
--green-wash: var(--lm-green-wash);
--green-edge: var(--lm-green-edge);
--red-wash: var(--lm-red-wash);
--shadow-panel: 0 1px 2px rgba(15, 23, 43, .05), 0 14px 34px -22px rgba(15, 23, 43, .20);
background: var(--bg);
color: var(--text);
}
/* Cards on a light page need a real edge, because the fill difference alone
is subtle. Hairline plus a whisper of shadow, nothing heavier. */
body.lightmode :is(
.section:not(.section--soft),
.section--tight:not(.section--soft),
.band
) :is(
.panel, .card, .symptoms,
.path, .direct div,
.mstep, .compare__col, .rung,
.rim__panel, .rimstat,
.inv-card, .founder-card, .member,
.shift, .cp, .filter-box, .quote-card, .layer
) {
border-color: var(--lm-line);
box-shadow: 0 1px 2px rgba(15, 23, 43, .05), 0 12px 30px -22px rgba(15, 23, 43, .22);
}
/* --------------------------------------------------------------------------
3. HARD SEAMS
A 1px emerald hairline at every dark-to-light boundary. It reads against
both sides, which a neutral line cannot do. Retune all four seams by
changing --lm-seam, or set it to a neutral rgba to make them disappear.
-------------------------------------------------------------------------- */
body.lightmode .hero,
body.lightmode .page-hero { border-bottom: 1px solid var(--lm-seam); }
body.lightmode .section--soft {
border-top: 1px solid var(--lm-seam);
border-bottom: 1px solid var(--lm-seam);
}
/* The band is usually the last light section before the dark footer. Pages
without a band (investors) end on a plain .section, so seam that too. */
body.lightmode .band { border-bottom: 1px solid var(--lm-seam); }
body.lightmode main > :last-child:is(.section, .section--tight):not(.section--soft) {
border-bottom: 1px solid var(--lm-seam);
}
body.lightmode .site-footer { border-top: 0; }
/* --------------------------------------------------------------------------
4. ACCENT TEXT PICKS UP THE CONTEXTUAL COLOR
Each rule falls back to the original token, so dark sections are untouched.
-------------------------------------------------------------------------- */
body.lightmode .eyebrow,
body.lightmode .arrow,
body.lightmode .card__k,
body.lightmode .band h2 em,
body.lightmode .shift__cap,
body.lightmode .mstep__n,
body.lightmode .mstep__tag,
body.lightmode .inv-card span,
body.lightmode .member__mono,
body.lightmode .founder-card__links a,
body.lightmode .verdict__label--green,
body.lightmode .rung:last-child span,
body.lightmode .layer--us .layer__job,
body.lightmode .layer--us .layer__role,
body.lightmode .layer--us .layer__tools span,
body.lightmode .axis__col--us .axis__arrow,
body.lightmode .verdict__line b,
body.lightmode .post__more,
body.lightmode .form-done,
body.lightmode .chain li:last-child,
body.lightmode .tstat__num,
body.lightmode .rim__num,
body.lightmode .step__n,
body.lightmode .chain li i,
body.lightmode .foot-col a:hover {
color: var(--green-fg, var(--green));
}
body.lightmode .eyebrow--blue,
body.lightmode .arrow--blue,
body.lightmode .card__k--blue,
body.lightmode .fit,
body.lightmode .pane .fit {
color: var(--blue-fg, var(--blue));
}
body.lightmode .eyebrow--dim { color: var(--text-dimmer); }
body.lightmode .tags span {
color: var(--green-fg, var(--green));
background: var(--green-wash);
border-color: var(--green-edge);
}
/* Rules, tracks and borders keep the true brand green. Only text darkens. */
body.lightmode .tstat__rule {
background: linear-gradient(90deg, var(--green), var(--green-deep));
}
/* Avatar circles keep their dark gradient, so their initials stay white. */
body.lightmode .who__av { color: #ECF1F8; }
/* --------------------------------------------------------------------------
5. BUTTONS AND FORM FIELDS
Primary stays solid Emerald/500 with dark ink, 7.6:1, unchanged everywhere.
-------------------------------------------------------------------------- */
body.lightmode :is(
.section:not(.section--soft),
.section--tight:not(.section--soft),
.band
) .btn--ghost {
color: var(--lm-text);
border-color: var(--lm-line-strong);
background: var(--lm-field);
}
body.lightmode :is(
.section:not(.section--soft),
.section--tight:not(.section--soft),
.band
) .btn--ghost:hover {
color: var(--lm-green-fg);
border-color: var(--lm-green-fg);
}
/* ---- The HubSpot embed --------------------------------------------------
HubSpot generates