/* ===== site.css: what every page shares, in the prototype's cascade order. Loaded first; page CSS next; chrome.css last.
Sources (v4 prototype): _ds tokens colors, typography, spacing, base (fonts.css dropped: Poppins is never used),
assets/type.css, assets/surface.css, assets/sale-timeline.css, assets/insider-band.css. ===== */
/* ===== fonts ===== */
/* Self-hosted fonts (from the @fontsource-variable packages): Plus Jakarta Sans for headings, Inter for body.
Variable files cover every weight the site uses. No Google Fonts request, no Poppins. */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/inter-latin-wght-normal.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; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'), url(../fonts/inter-latin-ext-wght-normal.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; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800;
src: url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/plus-jakarta-sans-latin-wght-normal.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; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800;
src: url(../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2-variations'), url(../fonts/plus-jakarta-sans-latin-ext-wght-normal.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; }
/* ===== _ds tokens/colors.css ===== */
/* BizDepot color tokens: locked to the two reference pages.
Calm, precise, high-trust. Navy surfaces, a single sky accent used sparingly.
NEVER introduce purple, stock teal, or corporate blue outside these values. */
:root {
/* Navy family: dark surfaces and headings */
--navy: #16293D; /* primary dark surface, headings on light */
--navy-2: #1D3550; /* raised navy panel */
--ink: #0E1D2E; /* deepest: hero + full-bleed dark sections */
/* Sky family: the single accent, used sparingly */
--sky: #69D4ED; /* primary accent: buttons, diamonds, highlights */
--sky-hover: #83DDF1; /* accent hover */
--sky-deep: #1687AC; /* accent text on light, focus rings */
--sky-tint: #EAF9FD; /* faint accent wash */
/* Neutrals */
--paper: #F7FAFB; /* light section background */
--white: #FFFFFF;
--field: #F1F5F8; /* inputs, inset panels */
/* Text + lines */
--text: #24384A; /* body copy */
--text-light: #5E7488; /* secondary, eyebrows, captions */
--line: #E3EAF0; /* borders on light */
--line-dark: #2A455F; /* borders on dark */
--text-on-dark: #C6D8E4;/* body copy on navy/ink */
/* Per-vertical warm accent: one industry per page, small highlights only.
Never replaces sky. HVAC = brick. */
--brick: #B0503F;
/* Danger: validation errors and destructive actions only. A muted red,
distinct from the brick vertical accent, tuned to sit calmly against navy.
Never a bright alarm red. */
--danger: #C0392B;
--danger-tint: #FBEBE9; /* faint danger wash / helper background */
--danger-ring: rgba(192,57,43,.22); /* focus glow on invalid fields */
/* --- Semantic aliases (prefer these in components) --- */
--surface-page: var(--white);
--surface-tint: var(--paper);
--surface-dark: var(--navy);
--surface-darkest: var(--ink);
--surface-input: var(--field);
--text-heading: var(--navy);
--text-body: var(--text);
--text-muted: var(--text-light);
--text-heading-on-dark: var(--white);
--text-body-on-dark: var(--text-on-dark);
--accent: var(--sky);
--accent-hover: var(--sky-hover);
--accent-strong: var(--sky-deep);
--accent-wash: var(--sky-tint);
--border: var(--line);
--border-on-dark: var(--line-dark);
--focus-ring: var(--sky-deep);
--text-danger: var(--danger);
}
/* ===== _ds tokens/typography.css ===== */
/* BizDepot typography tokens.
Headings: Plus Jakarta Sans (tight tracking, -0.015em, line-height 1.16).
Body: Inter, base ~16.5px, line-height 1.66, antialiased.
Fluid scale via clamp: matches the reference pages. */
:root {
--f-head: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* @kind font */
--f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* @kind font */
--f-mono: "Inter", -apple-system, sans-serif; /* @kind font */
/* Fluid heading scale */
--fs-h1: clamp(31px, 4.4vw, 48px); /* @kind font */
--fs-h1-lg: clamp(36px, 4.8vw, 56px); /* @kind font */
--fs-h2: clamp(26px, 3.2vw, 36px); /* @kind font */
--fs-h2-fit: clamp(24px, 2.95vw, 34px); /* @kind font */
--fs-h3: clamp(18px, 1.8vw, 21px); /* @kind font */
--fs-lede: clamp(16.5px, 1.4vw, 18px); /* @kind font */
--fs-body: 16.5px; /* @kind font */
--fs-small: 14px; /* @kind font */
--fs-eyebrow: 11.5px; /* @kind font */
/* Weights */
--fw-body: 400; /* @kind font */
--fw-medium: 500; /* @kind font */
--fw-semibold: 600; /* @kind font */
--fw-bold: 700; /* @kind font */
/* Line + letter */
--lh-heading: 1.16; /* @kind font */
--lh-body: 1.66; /* @kind font */
--ls-heading: -0.015em; /* @kind font */
--ls-eyebrow: 0.1em; /* @kind font */
--measure: 62ch; /* @kind spacing */
}
/* ===== _ds tokens/spacing.css ===== */
/* BizDepot spacing, radius, shadow, and layout tokens. */
:root {
/* Layout */
--wrap: 1080px; /* content max-width */
--wrap-wide: 1160px; /* wider marketing pages */
--gutter: 24px;
/* Standard responsive breakpoints: every component reflows at these,
matching the reference pages. */
--bp-lg: 920px; /* @kind other */ /* nav → menu toggle; 2-col grids stack */
--bp-md: 760px; /* @kind other */ /* footer 4→2 col; split layouts single-col */
--bp-sm: 480px; /* @kind other */ /* small mobile; footer 1 col; sticky CTA */
/* Section rhythm (top/bottom) */
--section-top: clamp(60px, 7vw, 96px); /* @kind spacing */
--section-bottom: clamp(44px, 5vw, 68px); /* @kind spacing */
/* Corner radius */
--r: 12px; /* default */
--r-btn: 10px; /* buttons */
--r-sm: 9px; /* inputs, small chips */
--r-card: 14px; /* large cards 14–20px */
--r-card-lg: 20px;
--r-pill: 100px;
--r-diamond: 2px; /* micro diamond marker corner */
/* Spacing scale */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
/* Shadows */
--shadow: 0 1px 2px rgba(14,29,46,.05), 0 8px 28px -8px rgba(14,29,46,.09);
--shadow-lg: 0 24px 64px -16px rgba(10,22,36,.42);
--shadow-hover: 0 14px 34px -10px rgba(14,29,46,.15);
/* Diamond signature sizing */
--dia-micro: 9px; /* 8–9px micro marker */
--dia-node: 44px; /* functional node */
--dia-watermark: 360px; /* 340–380px atmospheric watermark */
/* Motion */
--ease: cubic-bezier(.2, .7, .3, 1); /* @kind other */
--dur: .16s; /* @kind other */
--reveal-dur: .55s; /* @kind other */
}
/* ===== _ds tokens/base.css ===== */
/* BizDepot base layer: element defaults + the primitive classes used across
every page (.wrap, .btn, .dia, .kicker, headings, .reveal). Built directly
from the two locked reference pages. Consumers get these for free. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--f-body);
color: var(--text-body);
background: var(--surface-page);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--sky-deep); text-decoration: none; }
a:hover { color: var(--sky-hover); }
/* Headings */
h1, h2, h3 {
font-family: var(--f-head);
color: var(--text-heading);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
margin: 0;
}
h1 { font-weight: var(--fw-bold); font-size: var(--fs-h1); }
h2 { font-weight: var(--fw-bold); font-size: var(--fs-h2); }
h3 { font-weight: var(--fw-semibold); font-size: var(--fs-h3); }
h2.fit-line { font-size: var(--fs-h2-fit); }
.lede {
font-size: var(--fs-lede);
max-width: 64ch;
color: var(--text-body);
}
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
/* Layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 28px; }
section { padding: var(--section-top) 0 var(--section-bottom); }
.section-head { margin-bottom: clamp(30px, 3.6vw, 44px); }
.section-head h2 { margin-bottom: 12px; }
/* Surfaces */
.tint { background: var(--surface-tint); }
.on-dark { background: var(--surface-dark); color: var(--text-body-on-dark); }
.on-dark p { color: var(--text-body-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--text-heading-on-dark); }
/* --- The diamond (signature) --- */
/* Micro marker: the primary bullet across the whole site */
.dia {
display: inline-block;
width: var(--dia-micro); height: var(--dia-micro);
background: var(--sky);
border-radius: var(--r-diamond);
transform: rotate(45deg);
flex: none;
}
.dia.navy { background: var(--navy); }
/* Eyebrow / kicker */
.kicker {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-body);
font-weight: var(--fw-semibold);
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sky-deep);
margin-bottom: 16px;
}
.on-dark .kicker, .kicker.on-dark { color: var(--sky); }
/* Primary button */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--f-body);
font-weight: var(--fw-semibold);
font-size: 16px;
text-decoration: none;
padding: 15px 32px;
border: none;
border-radius: var(--r-btn);
background: var(--sky);
color: var(--navy);
cursor: pointer;
box-shadow: 0 2px 10px -2px rgba(30,140,175,.45);
transition: transform var(--dur), box-shadow var(--dur), background var(--dur);
}
.btn:hover {
background: var(--sky-hover);
color: var(--navy);
transform: translateY(-1px);
box-shadow: 0 8px 22px -6px rgba(30,140,175,.5);
}
.btn.ghost {
background: transparent;
color: var(--white);
border: 1px solid rgba(105,212,237,.45);
box-shadow: none;
}
.btn.ghost:hover {
background: rgba(105,212,237,.10);
border-color: var(--sky);
color: var(--sky);
}
/* Visible keyboard focus everywhere */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
button:focus-visible {
outline: 3px solid var(--sky-deep);
outline-offset: 2px;
}
/* Reveal-on-scroll with a no-JS fallback */
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--reveal-dur) ease, transform var(--reveal-dur) ease;
animation: bd-reveal-fallback .01s linear 1.2s forwards;
}
.reveal.in { opacity: 1; transform: none; animation: none; }
@keyframes bd-reveal-fallback { to { opacity: 1; transform: none; } }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.reveal { opacity: 1; transform: none; }
}
/* ===== assets/type.css (Google Fonts @import removed; fonts are self-hosted above) ===== */
/* BizDepot v4: the one type scale. Loaded after the design-system styles on every page.
Desktop: display 84 · h1 54 · h2 40 · h3 26 · card 20 · lede 20 · body 17 · sub 15.5 · small 14 · label 12 (floor)
Headings Plus Jakarta Sans 600, body Inter. Sentence case; the Title Case revert lives in heading-case.css.
There are no eyebrows on this site: .kicker survives only as a legacy token and must not be used above a heading. */
:root {
--f-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
--f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
--t-display: clamp(3rem, 1.5rem + 5.2vw, 5.25rem);
--t-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.375rem);
--t-h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
--t-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
--t-card: 1.25rem;
--t-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
--t-body: 1.0625rem;
--t-sub: 0.96875rem; /* 15.5: compact card copy, rows, helper */
--t-small: 0.875rem; /* 14: meta only; floor for sentences */
--t-label: 0.75rem; /* 12: uppercase labels; floor for everything */
--t-kicker: 0.75rem;
/* design-system tokens follow the same scale */
--fs-h1: var(--t-h1); --fs-h1-lg: var(--t-h1);
--fs-h2: var(--t-h2); --fs-h2-fit: var(--t-h2);
--fs-h3: var(--t-h3);
--fs-lede: var(--t-lede);
--fs-body: var(--t-body);
--fs-small: var(--t-small);
--fs-eyebrow: var(--t-kicker);
}
body { font-family: var(--f-body); font-size: var(--t-body); line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.025em; }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: var(--t-card); line-height: 1.3; letter-spacing: -0.01em; }
.lede { font-size: var(--t-lede); line-height: 1.5; letter-spacing: 0; max-width: 62ch; }
small, .small { font-size: var(--t-small); }
.kicker { font-size: var(--t-kicker); font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; }
/* typeface direction 2a: headings 600, never 700 */
h1, h2, h3, h4, .bd-hero-h1, .bd-hero2-in h1 { font-family: var(--f-head) !important; font-weight: 600 !important; }
h1, .bd-hero-h1 { letter-spacing: -0.03em !important; }
h2 { letter-spacing: -0.025em !important; }
.kicker, .bd-hero2-eyebrow { letter-spacing: .12em !important; }
/* body-text floors: prose is Body; nothing on the site renders below 12px */
p, li, dd, td, blockquote { font-size: var(--t-body); }
.lede { font-size: var(--t-lede); }
label { font-size: var(--t-small) !important; }
/* Phase 1 (2026-10-01): label floor and mobile lede. Delete this block to revert. */
@media (max-width: 600px) { .lede, .bd-hero2-lede { font-size: 1.125rem !important; } } /* 18px: keeps the lede distinct from 17px body on phones */
body { font-size: var(--t-body); } /* root body 17 everywhere (pillars and Insights inherited 16.5 from the old tokens) */
/* ===== assets/surface.css ===== */
/* BizDepot v4: surfaces. Loaded after type.css on every page.
Rule: anything clickable is opaque; anything translucent is information. */
/* ---- Phase 1 tokens (2026-10-01). Each line is one revert. ---- */
:root {
--sky-hover: #83DDF1; /* primary hover (was a #8FE0F2 fallback) */
--accent-on-light: #116E8D; /* accent TEXT on white, paper and sky-tint: 5.77:1 on white */
--sky-deep: #116E8D !important; /* was #1687AC (3.8 to 4.1:1, failed AA as small text: duration chips, tags, inline links).
!important so the per-page :root copies cannot undo it. Delete this line to revert. */
--btn-shadow: 0 1px 2px rgba(14,29,46,.06), 0 8px 24px -10px rgba(14,29,46,.20);
}
/* ---- Buttons: three roles, two sizes, radius 10, never a pill (SITE-SYSTEM.md "Buttons")
Primary .btn sky fill, navy text: the one conversion on the screen
Secondary .btn.white / .ghost solid white on dark or media; .btn.outline = navy outline on light
Tertiary .arrow-link 15.5/600 text + 14px arrow; #116E8D on light, sky on dark (.on-dark)
Sizes .btn = 52px large (heroes, CTA bands, form submits); .btn.m = 42px medium (header always, cards, panels) ---- */
.btn {
display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px;
height: 52px !important; padding: 0 28px !important; border-radius: 10px !important;
font-family: var(--f-body) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important;
background: var(--sky) !important; color: var(--navy) !important; border: 0 !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
box-shadow: var(--btn-shadow) !important;
text-decoration: none !important; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--sky-hover) !important; color: var(--navy) !important; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
/* medium: header, cards, tables, inline actions */
.btn.m, .btn.bd-hd2-cta, .btn.bd-hd2-menu-cta, .bd-hd2-cta, .bd-hd2-menu-cta, .bd-sec-btn, .hd-cta, .btn.sm, .btn.small {
height: 42px !important; padding: 0 20px !important; font-size: 15px !important;
}
.bd-sec-btn { display: inline-flex !important; align-items: center !important; gap: 8px; border-radius: 10px !important; background: var(--sky) !important; color: var(--navy) !important; font-weight: 600 !important; box-shadow: none !important; }
/* header bar over video: dark glass, always wins over the white scrolled state */
.bd-hd2[data-scrolled="false"] { background: var(--glass-dark-bg) !important; border-bottom-color: var(--glass-dark-line) !important; }
/* header CTA is sky over video AND when scrolled: no glass variant */
.bd-hd2[data-scrolled="false"] .bd-hd2-cta, .bd-hd2[data-scrolled="false"] .bd-hd2-cta:hover { background: var(--sky) !important; color: var(--navy) !important; border: 0 !important; }
.bd-hd2[data-scrolled="false"] .bd-hd2-cta:hover { background: var(--sky-hover) !important; }
/* secondary on dark or media: solid white */
.btn.ghost, .btn.glass, .btn.white, .btn.secondary {
background: #FFFFFF !important; color: var(--navy) !important; border: 0 !important;
box-shadow: 0 1px 2px rgba(14,29,46,.18), 0 8px 24px -10px rgba(14,29,46,.5) !important;
}
.btn.ghost:hover, .btn.glass:hover, .btn.white:hover, .btn.secondary:hover { background: var(--paper, #F7FAFB) !important; color: var(--navy) !important; }
/* secondary on light: navy outline */
.btn.outline { background: #FFFFFF !important; color: var(--navy) !important; border: 1.5px solid var(--navy) !important; box-shadow: none !important; }
.btn.outline:hover { background: var(--navy) !important; color: #FFFFFF !important; }
.btn:focus-visible { outline: 3px solid var(--sky-deep) !important; outline-offset: 2px; }
/* plain-page header CTA is sky in every state (matches the DC header) */
header.site[data-scrolled="false"] .hd-cta, header.site[data-scrolled="false"] .hd-cta:hover { background: var(--sky) !important; color: var(--navy) !important; border: 0 !important; }
/* ---- Tertiary: the arrow link ---- */
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-body); font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--accent-on-light); text-decoration: none; }
.arrow-link svg { width: 14px; height: 14px; flex: none; }
.arrow-link:hover { gap: 12px; color: var(--accent-on-light); }
.on-dark .arrow-link, .arrow-link.on-dark { color: var(--sky); }
.on-dark .arrow-link:hover, .arrow-link.on-dark:hover { color: var(--sky-hover); }
/* phones: a 44px tap target (20px line + 12px above and below). The negative margin gives the space back, so nothing moves. */
@media (max-width: 640px) { .arrow-link { padding-block: 12px; margin-block: -12px; } }
/* existing arrow links pinned to the one spec (size and weight; colour stays with their surface) */
.bd-listing-view, .rail-head .view-all, .bd-md-link, .bd-pcard-view { font-size: 15.5px !important; font-weight: 600 !important; }
.rail-head .view-all { color: var(--accent-on-light) !important; }
/* ---- No pill buttons: clickable chips (topic filters) share the 10px control radius ---- */
.ins-topics a { border-radius: 10px !important; }
/* ---- Tags and status pills: information, never a control ---- */
.bd-l3-tag, .cat-tag, span.cat-tag, .bd-listing-new, .bd-listing-cat i { cursor: default; }
.bd-l3-tag:hover { border-color: inherit; }
/* ---- Forms: 16px text so iOS never zooms on focus; inputs share the control radius ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { border-radius: 10px; }
/* ---- Glass: one material, three tints. Never on anything clickable. ---- */
:root {
--glass-filter: blur(24px) saturate(1.7) brightness(1.05);
--glass-frost-bg: rgba(255,255,255,.14); --glass-frost-line: rgba(255,255,255,.30);
--glass-frost-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.12), 0 24px 50px -24px rgba(14,29,46,.6);
--glass-light-bg: rgba(255,255,255,.72); --glass-light-line: rgba(255,255,255,.85);
--glass-light-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3), 0 24px 50px -24px rgba(14,29,46,.45);
--glass-dark-bg: rgba(14,29,46,.22); --glass-dark-line: rgba(255,255,255,.18);
}
.glass-frost { background: var(--glass-frost-bg); border: 1px solid var(--glass-frost-line); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); box-shadow: var(--glass-frost-shadow); color: #fff; border-radius: 14px; }
.glass-light { background: var(--glass-light-bg); border: 1px solid var(--glass-light-line); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); box-shadow: var(--glass-light-shadow); color: var(--navy); border-radius: 14px; }
.glass-dark { background: var(--glass-dark-bg); border-bottom: 1px solid var(--glass-dark-line); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7); color: #fff; }
/* ---- Listing status badge (round 5, 2026-10-08). One component for every page that shows a listing status.
Markup: For sale (is-for-sale | is-finalizing-offers | is-under-loi).
Labels, sentence case: For sale, Finalizing offers, Under LOI. Sold has no badge: a sold listing is shown nowhere (round 6). Information only: never a link, never a hover state.
Placement: on its own it is the hero tag (Listing page, sized like .bd-lx-tag); add .is-ribbon for the card ribbon, which
sits at the top left of a card photo (the photo wrapper must be position:relative, as every .ph already is).
Three muted fills, none blue, each checked for WCAG AA at 13px/600 (MEASURED 2026-10-08):
for sale #1F6E4F deep green, white text 6.17:1 finalizing offers #EDB44E amber, navy text 7.92:1
under LOI #B3531C burnt orange, white text 5.03:1
The small diamond is the site's bullet motif in the text colour. ---- */
:root { --st-for-sale: #1F6E4F; --st-finalizing-offers: #EDB44E; --st-under-loi: #B3531C; }
.bd-status {
display: inline-flex; align-items: center; gap: 8px; flex: none;
font-family: var(--f-body); font-size: 13px; font-weight: 600; line-height: 20px; letter-spacing: 0; text-transform: none; white-space: nowrap;
padding: 7px 12px 7px 11px; border-radius: 9px; border: 0;
color: #FFFFFF; background: var(--st-for-sale); cursor: default;
}
.bd-status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1.5px; background: currentColor; opacity: .8; transform: rotate(45deg); }
.bd-status.is-for-sale { background: var(--st-for-sale); color: #FFFFFF; }
.bd-status.is-finalizing-offers { background: var(--st-finalizing-offers); color: var(--navy, #16293D); }
.bd-status.is-under-loi { background: var(--st-under-loi); color: #FFFFFF; }
/* card ribbon: over the photo, top left, lifted off the image by a soft shadow */
.bd-status.is-ribbon {
position: absolute; top: 12px; left: 12px; z-index: 2;
padding: 5px 10px 5px 9px; line-height: 18px; gap: 7px; border-radius: 8px;
box-shadow: 0 1px 2px rgba(14,29,46,.18), 0 6px 16px -6px rgba(14,29,46,.45);
}
@media (max-width: 640px) { .bd-status.is-ribbon { top: 10px; left: 10px; } }
@media (forced-colors: active) { .bd-status { border: 1px solid CanvasText; } }
/* ---- Seller closing band (founder, 2026-10-13). The one call to action above the footer on every page that asks an owner
to sell: full width on the Current (assets/current.js mounts the canvas; the page must load that script), joined to the
footer, ONE button: "Get a free valuation". No second button, no "Talk to an advisor". Heading and paragraph left, button right;
stacked under 920px. An optional trust line sits under the paragraph. Buyer bands (Insider Network and the like) are not this.
Markup:
---- */
section.bd-cta, .bd-cta { position: relative; overflow: hidden; isolation: isolate; background: var(--ink, #0E1D2E); padding: clamp(72px, 8vw, 112px) 0; color: var(--text-on-dark, #C6D8E4); }
.bd-cta > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.bd-cta-in { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 32px 56px; align-items: center; }
.bd-cta-in h2 { color: var(--white, #FFF); font-size: var(--t-h2); margin: 0 0 14px; max-width: 22ch; text-wrap: balance; }
.bd-cta-in p { margin: 0; color: var(--text-on-dark, #C6D8E4); max-width: 58ch; }
.bd-cta-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 22px !important; font-size: var(--t-sub); font-weight: 600; letter-spacing: .04em; color: #A9C2D3 !important; }
.bd-cta-trust span { white-space: nowrap; }
.bd-cta-trust .dia { width: 5px; height: 5px; background: rgba(105,212,237,.5); }
.bd-cta-act { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 920px) { .bd-cta-in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bd-cta-trust .dia { display: none; } .bd-cta-trust { column-gap: 18px; } }
@media (max-width: 480px) { .bd-cta-act .btn { width: 100%; } }
/* ===== assets/sale-timeline.css ===== */
/* Sale timeline: the one picture of how a sale runs, shared by Home, Sell Your Business and the ten industry pages
(2026-10-12, DECISIONS "one sale timeline sitewide"). Edit the phases here and in each page's markup together.
Read at a glance: two labelled rows. "We do everything else" carries the six phases on a navy bar;
"You do three things" carries the seller's three moments as sky diamonds, placed where they happen.
Desktop: the phases run left to right in equal columns. Narrow: the same list runs top to bottom,
the seller's column on the left and ours on the right.
The markup is one ordered list in time order (phases and the seller's moments interleaved), so the text
reads in order with no CSS and is plain HTML for search engines.
Motion: plays once in view (assets/reveal.js sets data-live). No JavaScript or reduced motion: finished at rest. */
.bd-tl { --tl-navy: var(--navy, #16293D); --tl-sky: var(--sky, #69D4ED); --tl-teal: #116E8D; --tl-line: var(--line, #E3EAF0);
--tl-muted: var(--text-light, #5E7488);
container-type: inline-size; position: relative; background: var(--white, #FFF); border: 1px solid var(--tl-line);
border-radius: 20px; box-shadow: var(--shadow, 0 1px 2px rgba(14,29,46,.05), 0 8px 28px -8px rgba(14,29,46,.09));
padding: clamp(26px, 3.2vw, 44px) clamp(20px, 3.2vw, 44px) clamp(28px, 3.2vw, 44px); color: var(--text, #24384A); font-variant-numeric: tabular-nums lining-nums; }
.bd-tl p { margin: 0; }
.bd-tl-big { font-family: var(--f-head, var(--f-body)); font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -.035em; color: var(--tl-navy); }
.bd-tl-cap { font: 500 17px/1.4 var(--f-body); color: var(--tl-muted); margin-top: 10px !important; }
.bd-tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the row labels: same size and weight, each with the mark it stands for */
.bd-tl-k { display: flex; align-items: center; gap: 12px; font: 500 16px/1.25 var(--f-body); color: var(--tl-muted); }
.bd-tl-k b { display: block; font-family: var(--f-head, var(--f-body)); font-weight: 600; font-size: 21px; letter-spacing: -.015em; color: var(--tl-navy); }
.bd-tl-k i { flex: none; display: block; }
.bd-tl-k-we i { width: 26px; height: 12px; border-radius: 4px; background: var(--tl-navy); }
.bd-tl-k-you i { width: 16px; height: 16px; margin: 0 5px; border-radius: 3px; background: var(--tl-sky); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--white, #FFF), 0 0 0 4.5px var(--tl-teal); }
.bd-tl-list { list-style: none; margin: 0; padding: 0; }
.bd-tl-ph b { display: block; font: 600 16px/1.3 var(--f-body); color: var(--tl-navy); }
.bd-tl-d { display: block; margin-top: 4px; font: 600 14.5px/1.3 var(--f-body); color: var(--tl-teal); }
.bd-tl-p { display: block; margin-top: 6px; font: 400 14px/1.5 var(--f-body); color: var(--tl-muted); }
.bd-tl-you { font: 600 16px/1.3 var(--f-body); color: var(--tl-navy); }
.bd-tl-you::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 3px; background: var(--tl-sky); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--white, #FFF), 0 0 0 4.5px var(--tl-teal); }
/* ---- wide: two rows, phases in six equal columns. (Custom properties live on .bd-tl-grid: a container query cannot style the container itself.) ---- */
.bd-tl-grid { --tl-key: 176px; }
@container (min-width: 900px) {
.bd-tl-grid { display: grid; grid-template-columns: var(--tl-key) minmax(0, 1fr); grid-template-rows: auto auto; margin-top: 40px; }
.bd-tl-k-we { grid-column: 1; grid-row: 1; align-self: end; padding: 0 16px 0 0; margin-bottom: -4px; }
.bd-tl-k-you { grid-column: 1; grid-row: 2; align-self: start; padding: 26px 16px 0 0; }
.bd-tl-k b + span { display: block; }
.bd-tl-list { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: subgrid; }
.bd-tl-ph { grid-row: 1; position: relative; padding: 0 14px 34px 0; }
.bd-tl-ph::after { content: ""; position: absolute; left: 0; right: 3px; bottom: 0; height: 14px; background: var(--tl-navy); }
.bd-tl-ph:first-child::after { border-radius: 7px 0 0 7px; }
.bd-tl-ph:nth-last-child(2)::after { right: 0; border-radius: 0 7px 7px 0; }
.bd-tl-ph.n1 { grid-column: 1; } .bd-tl-ph.n2 { grid-column: 2; } .bd-tl-ph.n3 { grid-column: 3; }
.bd-tl-ph.n4 { grid-column: 4; } .bd-tl-ph.n5 { grid-column: 5; } .bd-tl-ph.n6 { grid-column: 6; }
/* the seller's moments hang off the bar at the line where they happen */
.bd-tl-you { grid-row: 2; position: relative; justify-self: start; padding-top: 50px; white-space: nowrap; transform: translateX(-50%); text-align: center; }
.bd-tl-you::before { position: absolute; left: 50%; top: 18px; margin-left: -8px; }
.bd-tl-you::after { content: ""; position: absolute; left: 50%; top: 0; height: 13px; border-left: 1.5px dashed rgba(17,110,141,.5); }
.bd-tl-you.at2 { grid-column: 2; } .bd-tl-you.at5 { grid-column: 5; }
.bd-tl-you.atend { grid-column: 6; justify-self: end; transform: none; text-align: right; }
.bd-tl-you.atend::before { left: auto; right: 0; margin: 0 -8px 0 0; }
.bd-tl-you.atend::after { left: auto; right: 0; }
}
@container (min-width: 900px) and (max-width: 1060px) {
.bd-tl-grid { --tl-key: 150px; }
.bd-tl-k { gap: 10px; font-size: 14px; white-space: nowrap; }
.bd-tl-k b { font-size: 18px; }
.bd-tl-ph { padding-right: 10px; }
.bd-tl-ph b, .bd-tl-you { font-size: 15px; }
.bd-tl-p { font-size: 13.5px; }
}
/* ---- narrow: top to bottom; you on the left, us on the right ---- */
@container (max-width: 899.98px) {
.bd-tl-grid { --tl-cols: minmax(0, .9fr) 34px minmax(0, 1.25fr); }
.bd-tl-big { font-size: 46px; }
.bd-tl-cap { font-size: 16px; }
.bd-tl-grid { display: grid; grid-template-columns: var(--tl-cols); margin-top: 28px; }
.bd-tl-k { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; padding-bottom: 16px; }
.bd-tl-k b { font-size: 18px; }
.bd-tl-k-you { grid-column: 1; grid-row: 1; align-items: flex-end; text-align: right; }
.bd-tl-k-you i { margin: 3px 3px 0; }
.bd-tl-k-we { grid-column: 3; grid-row: 1; }
.bd-tl-list { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--tl-line); padding-top: 14px; }
.bd-tl-ph, .bd-tl-you { display: grid; grid-template-columns: var(--tl-cols); position: relative; }
.bd-tl-ph > * { grid-column: 3; }
.bd-tl-ph { padding: 4px 0 18px; }
.bd-tl-ph::before { content: ""; grid-column: 2; grid-row: 1 / span 3; justify-self: center; width: 12px; background: var(--tl-navy); margin: -4px 0 -18px; }
.bd-tl-ph:first-child::before { border-radius: 6px 6px 0 0; margin-top: 0; }
.bd-tl-ph:nth-last-child(2)::before { border-radius: 0 0 6px 6px; }
.bd-tl-ph + .bd-tl-ph::before { box-shadow: inset 0 3px 0 var(--white, #FFF); }
.bd-tl-you { align-items: center; padding: 10px 0; text-align: right; }
.bd-tl-you > .bd-tl-yt { grid-column: 1; grid-row: 1; padding-right: 2px; }
.bd-tl-you::before { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; }
.bd-tl-you::after { content: ""; grid-column: 2; grid-row: 1; justify-self: center; align-self: stretch; width: 12px; background: var(--tl-navy); margin: -10px 0; }
.bd-tl-ph:nth-last-child(2)::before { border-radius: 0; }
.bd-tl-you.atend::after { align-self: start; height: 50%; margin: -10px 0 0; border-radius: 0 0 6px 6px; }
}
@container (max-width: 400px) {
.bd-tl-grid { --tl-cols: minmax(0, .82fr) 30px minmax(0, 1.25fr); }
.bd-tl-big { font-size: 40px; }
.bd-tl-k b { font-size: 16.5px; }
.bd-tl-ph b, .bd-tl-you { font-size: 15px; }
}
/* ---- motion: the bar fills phase by phase, then the seller's three moments land ---- */
.bd-js .bd-tl[data-reveal]:not([data-live="true"]) :is(.bd-tl-ph, .bd-tl-you, .bd-tl-k) { opacity: 0; }
.bd-tl[data-live="true"] .bd-tl-k { animation: bd-tl-fade .45s cubic-bezier(.22,.61,.36,1) both; }
.bd-tl[data-live="true"] .bd-tl-k-you { animation-delay: 1.35s; }
.bd-tl[data-live="true"] .bd-tl-ph { animation: bd-tl-fade .45s cubic-bezier(.22,.61,.36,1) calc(var(--n) * 150ms) both; }
.bd-tl[data-live="true"] .bd-tl-ph::after { animation: bd-tl-fill .5s cubic-bezier(.22,.61,.36,1) calc(var(--n) * 150ms) both; }
.bd-tl[data-live="true"] .bd-tl-you { animation: bd-tl-fade .45s cubic-bezier(.22,.61,.36,1) calc(1400ms + var(--k) * 220ms) both; }
.bd-tl[data-live="true"] .bd-tl-you::before { animation: bd-tl-pop .4s cubic-bezier(.22,.61,.36,1) calc(1400ms + var(--k) * 220ms) both; }
@keyframes bd-tl-fade { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes bd-tl-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bd-tl-pop { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
.bd-tl :is(.bd-tl-ph, .bd-tl-you, .bd-tl-k), .bd-tl :is(.bd-tl-ph, .bd-tl-you)::before, .bd-tl .bd-tl-ph::after { animation: none !important; opacity: 1 !important; clip-path: none !important; translate: none !important; scale: none !important; }
}
/* ===== assets/insider-band.css ===== */
/* Insider Network band: the buyer-side ad on Businesses for Sale, the sector pages and the listing page
(2026-10-12; founder: one idea, one picture). Copy left; right, one line-art scene in the Team page's language:
a business signs, and out of the whole network the buyers whose criteria fit light up and hear first.
Plays once in view (assets/reveal.js sets data-live on .inx-fig); no JavaScript or reduced motion: the finished scene. */
.inx { border-radius:24px; background:var(--navy); box-shadow:0 40px 90px -40px rgba(14,29,46,.55); padding:clamp(40px,4.6vw,72px) clamp(26px,3.6vw,64px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(32px,4.5vw,80px); align-items:center; }
.inx-copy h2 { color:var(--white); font-size:var(--t-h2); line-height:1.06; letter-spacing:-.03em; margin:0; max-width:none; text-wrap:balance; }
.inx-copy h2 > span { color:var(--sky); }
.inx-copy > p { color:#C6D8E4; font-size:clamp(16px,1.2vw,18px); line-height:1.6; margin:18px 0 0; max-width:44ch; }
.inx-cta { display:flex; align-items:center; gap:14px 24px; flex-wrap:wrap; margin-top:30px; }
.inx-fig { margin:0; }
.inx-stage { position:relative; }
.inx-art { display:block; width:100%; height:auto; overflow:visible; }
.inx-crowd { fill:none; stroke:#8AA2B5; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.inx-art circle, .inx-art path, .inx-art line { vector-effect:non-scaling-stroke; }
.inx-trails line { stroke:var(--sky); stroke-opacity:.85; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:0 7; }
.inx-co-bg { fill:#1E3A52; stroke:var(--sky); stroke-width:2; }
.inx-co path { fill:none; stroke:var(--white); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.inx-ring { fill:none; stroke:var(--sky); stroke-width:1.5; opacity:0; transform-origin:16px 30px; }
.inx-m-bg { fill:rgba(105,212,237,.16); stroke:var(--sky); stroke-width:1.8; }
.inx-m path, .inx-m g circle { fill:none; stroke:var(--sky); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.inx-caps { display:grid; grid-template-columns:30% minmax(0,1fr); gap:16px; margin-top:18px; }
.inx-caps p { margin:0; font-size:15px; line-height:1.4; }
.inx-caps p:last-child { padding-left:clamp(0px,4%,20px); }
.inx-caps b { display:block; color:var(--white); font-weight:600; }
.inx-caps span { display:block; margin-top:3px; color:var(--sky); }
/* the scene: the crowd fades in, the company appears, three dotted lines draw out, the matching buyers light up.
Then two quiet loops: the dots run toward the buyers and a ring breathes off the company. */
.bd-js .inx-fig[data-reveal]:not([data-live="true"]) :is(.t-fade, .t-pop) { opacity:0; }
.bd-js .inx-fig[data-reveal]:not([data-live="true"]) .t-ln { clip-path:inset(-12px 100% -12px -12px); }
.inx-fig[data-live="true"] .t-fade { animation:inx-fade 420ms cubic-bezier(.22,.61,.36,1) var(--t,0ms) both; }
.inx-fig[data-live="true"] .t-pop { animation:inx-pop 420ms cubic-bezier(.22,.61,.36,1) var(--t,0ms) both; }
.inx-fig[data-live="true"] .t-ln { animation:inx-ln 620ms cubic-bezier(.2,.6,.3,1) var(--t,0ms) both, inx-run 1.4s linear 2600ms infinite; }
.inx-fig[data-live="true"] .inx-ring { animation:inx-ring 3.2s cubic-bezier(.2,.6,.3,1) 2400ms infinite; }
@keyframes inx-fade { from { opacity:0; } to { opacity:1; } }
@keyframes inx-pop { from { opacity:0; scale:.6; } to { opacity:1; scale:1; } }
@keyframes inx-ln { from { clip-path:inset(-12px 100% -12px -12px); } to { clip-path:inset(-12px); } }
@keyframes inx-run { to { stroke-dashoffset:-7; } }
@keyframes inx-ring { 0% { opacity:.55; scale:1; } 70%, 100% { opacity:0; scale:1.9; } }
@media (max-width:1000px) { .inx { grid-template-columns:1fr; } }
@media (max-width:760px) { .inx { border-radius:18px; } .inx-caps p { font-size:14px; } }
@media (prefers-reduced-motion: reduce) {
.inx-fig .t-fade, .inx-fig .t-pop, .inx-fig .t-ln, .inx-fig .inx-ring { animation:none !important; opacity:1 !important; clip-path:none !important; scale:none !important; }
.inx-fig .inx-ring { opacity:0 !important; }
}
/* ===== WordPress: the admin bar pushes the fixed header down for logged-in visitors; the form honeypot and sr text ===== */
.admin-bar .bd-hd2 { top: 32px !important; }
@media (max-width: 782px) { .admin-bar .bd-hd2 { top: 46px !important; } }
@media (max-width: 600px) { .admin-bar .bd-hd2 { top: 0 !important; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed !important; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; overflow: visible; white-space: normal; background: var(--white); color: var(--navy); border-radius: 8px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(14,29,46,.25)); font-weight: 600; text-decoration: none; }
/* Theme form fields (Contact and Home forms): the design system Field's focus and invalid states, which the prototype
set from script, as CSS. Inline styles hold the resting state, so these need !important. */
.bd-field:focus { border-color: var(--sky-deep) !important; box-shadow: 0 0 0 3px rgba(105,212,237,.25) !important; }
.bd-field[aria-invalid="true"] { border-color: var(--danger) !important; }
.bd-field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-ring) !important; }
/* Valuation application (template-parts/form-valuation.php): the line under each question, the chosen answer when the
owner comes back to a step, the step 7 text box, and the survey's turn-away hiding the form's intro line. */
.vf-help { font-size: 14px; line-height: 1.55; color: var(--text-light); margin: -6px 0 14px; }
.hero-form .step-note.vf-help { color: var(--text-light); }
.bd-bk .vf-help { margin: 8px 0 0; }
.revenue-bands button[aria-pressed="true"], .vf-bands button[aria-pressed="true"] { border-color: var(--accent-on-light); background: var(--sky-tint); }
.field textarea, .vf-field textarea { display: block; width: 100%; min-height: 128px; resize: vertical; font-family: var(--f-body); font-size: 16px; line-height: 1.5; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--navy); transition: border-color .15s, box-shadow .15s; }
.field textarea:focus, .vf-field textarea:focus { border-color: var(--accent-on-light); box-shadow: 0 0 0 3px rgba(105,212,237,.25); outline: none; }
.field.is-invalid textarea, .vf-field textarea[aria-invalid="true"] { border-color: var(--danger); }
.bd-bk .vf-field textarea { margin-top: 18px; }
.hero-form:has(.step[data-step="dq2"].is-active) .sub, .syb-form[data-step="dq2"] .vf-sub { display: none; }