/* ═══════════════════════════════════════════════════════════════════
VECTOR DESIGN SYSTEM — "Signal" v2
vectorba.com · single source of truth
Load AFTER any page-level style block so the overrides below win:
the page's own style element first, then this file's link element.
(No literal tag markup in this comment — it would terminate an
enclosing style element if this file is ever inlined.)
Page CSS keeps its own layout (grids, spacing, one-off components).
This file owns: color, type, buttons, surfaces, radii, motion.
═══════════════════════════════════════════════════════════════════ */
:root{
/* ── neutral ramp (cool, near-black) ───────────────────────────── */
--n-950:#08090B; --n-900:#0B0D10; --n-850:#101216;
--n-800:#161A20; --n-750:#1C2027; --n-700:#232830;
--n-600:#2E343E; --n-500:#454C57; --n-400:#7A828F;
--n-300:#A8B0BC; --n-200:#CBD1DA; --n-100:#E6EAEF; --n-50:#F2F5F9;
/* ── semantic ──────────────────────────────────────────────────── */
--canvas:var(--n-950);
--surface:var(--n-850);
--surface-2:var(--n-800);
--line:var(--n-700);
--line-soft:#15181D;
--text:var(--n-50);
--text-2:var(--n-300);
--text-3:var(--n-400);
--accent:#5B8CFF;
--accent-bright:#7AA2FF;
--accent-dim:rgba(91,140,255,.14);
--accent-line:rgba(91,140,255,.32);
--on-accent:var(--n-950); /* dark text on accent — 6.3:1 AA */
--ok:#4ADE9B; /* data/score only, never chrome */
--warn:#FFB454;
/* ── LEGACY BRIDGE ─────────────────────────────────────────────────
The pre-v2 pages reference these seven names throughout their own
CSS. Repointing them here converts every page's color in one move,
with zero markup changes. Do not add new usages — use the semantic
names above. Delete this block once no page references them. */
--bg:var(--canvas);
--bg-warm:var(--surface);
--bg-vector:var(--surface);
--ink:var(--text);
--muted:var(--text-2);
--rule:var(--line);
--accent-dark:var(--accent-bright);
--green:var(--ok);
/* ── type ──────────────────────────────────────────────────────── */
--font-display:"Inter Tight","Helvetica Neue",Arial,sans-serif;
--font-body:"Inter","Helvetica Neue",Arial,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--t-display:clamp(42px,6.2vw,78px);
--t-h1:clamp(34px,4.4vw,54px);
--t-h2:clamp(25px,2.9vw,36px);
--t-h3:19px;
--t-lede:clamp(17px,1.6vw,20px);
--t-body:16px;
--t-sm:14.5px;
--t-micro:11.5px;
/* ── space · radius · motion ───────────────────────────────────── */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
--s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
--r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px;
--ease:cubic-bezier(.16,1,.3,1);
--dur-fast:150ms; --dur:400ms;
--maxw:1120px;
color-scheme:dark;
}
/* ═══ BASE ═══════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--canvas);color:var(--text)}
body{
margin:0;
font-family:var(--font-body);
font-size:var(--t-body);
line-height:1.55;font-weight:400;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--on-accent)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
/* ── ambient field ───────────────────────────────────────────────
Add as the first
child of , and ensure the page wrapper is position:relative
with z-index:1 (handled below for .wrap / .page / .shell). */
.field{position:fixed;inset:0;pointer-events:none;z-index:0}
.field::before{
content:"";position:absolute;top:-20%;left:50%;transform:translateX(-50%);
width:min(1400px,140vw);height:900px;
background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(91,140,255,.13),transparent 70%);
filter:blur(20px);
}
.field::after{
content:"";position:absolute;inset:0;
background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
background-size:80px 80px;
mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 78%);
-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 78%);
opacity:.9;
}
.wrap,.page,.shell{position:relative;z-index:1}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6)}
/* ═══ TYPE ═══════════════════════════════════════════════════════
Fraunces is retired. Everything display-weight is Inter Tight. */
h1,h2,h3,h4,.mark,.tier-price,.metric .num,.d-value,.m-value,
.method-num,.pillar-num,.domain-num,.card-num,.tier-name{
font-family:var(--font-display);
font-weight:500;
letter-spacing:-.025em;
}
h1{font-size:var(--t-h1);line-height:1.02;letter-spacing:-.035em;max-width:16ch}
h2{font-size:var(--t-h2);line-height:1.08;max-width:20ch}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em}
/* The old italic-serif-in-terracotta emphasis becomes a quiet tonal
shift — same emphasis, none of the boutique-editorial signal. */
h1 em,h2 em,h3 em,.mark em{
font-style:normal;
font-weight:500;
color:var(--text-3);
}
h1 em{color:var(--n-500)}
p{color:var(--text-2)}
p strong,li strong{color:var(--text);font-weight:500}
a{color:inherit}
.lede,.section-intro,.callout-sub,.lead-line,.desc{
font-size:var(--t-lede);line-height:1.5;color:var(--text-2);max-width:44ch;
}
.lede strong{color:var(--text);font-weight:500}
/* ── mono labels: every eyebrow, kicker, and metric caption ─────── */
.meta,.section-label,.rail-label,.kicker,.role,.cat-label,.label,
.nav-label,.programs-label,.tier-includes,.d-label,.m-label,
.trust,.stats,.member-stats,.tl-week,.r-eyebrow{
font-family:var(--font-mono)!important;
font-size:var(--t-micro)!important;
font-weight:500!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
color:var(--text-3)!important;
}
.meta,.section-label,.rail-label,.kicker{color:var(--text-3)!important}
.role,.tl-week,.method-num,.pillar-num,.domain-num,.card-num{color:var(--accent)!important}
.trust span,.stats .sep,.member-stats .sep,.fine .sep,.sep{color:var(--n-600)}
/* ── eyebrow (v2 name for .meta / .section-label) ────────────────── */
.eyebrow{
font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;
letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
}
.eyebrow .dot{width:4px;height:4px;border-radius:var(--r-full);
background:var(--accent);flex:0 0 auto}
.eyebrow .sep{color:var(--n-600)}
/* ═══ HEADER ═════════════════════════════════════════════════════ */
header{
border-bottom:1px solid var(--line-soft)!important;
border-top:0;
}
/* v2 sticky header — opt in by wrapping contents in .bar */
header:has(.bar){
position:sticky;top:0;z-index:50;
background:rgba(8,9,11,.72);backdrop-filter:blur(14px);
}
.bar{
max-width:var(--maxw);margin:0 auto;padding:var(--s-4) var(--s-6);
display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.mark svg{display:block;flex:0 0 auto}
.mark span{color:var(--text-3);font-weight:450}
/* header nav needs flex here too — it moved out of the page style blocks */
header nav,.bar nav{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.mark{font-size:16.5px;letter-spacing:-.02em}
.mark a{text-decoration:none;color:var(--text)}
.mark em{color:var(--text-3)}
nav a,nav.top a{
font-size:var(--t-sm);color:var(--text-2);text-decoration:none;
transition:color var(--dur-fast);
}
nav a:hover,nav.top a:hover{color:var(--text)}
/* ═══ BUTTONS ════════════════════════════════════════════════════
Two only. Primary is dark-on-accent: white on #5B8CFF is 3.16:1
and fails AA; near-black is 6.3:1 and passes. */
.btn,.btn-nav,nav a.btn-nav,.btn-outline,.btn-large{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-body);font-weight:500;font-size:var(--t-sm);
padding:11px 18px;border-radius:var(--r-sm);
text-decoration:none;border:1px solid transparent;white-space:nowrap;
transition:background var(--dur-fast),border-color var(--dur-fast),
color var(--dur-fast),transform var(--dur-fast);
}
.btn,.btn-large{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn:hover,.btn-large:hover{background:var(--accent-bright);border-color:var(--accent-bright);transform:translateY(-1px)}
.btn-large{padding:14px 24px;font-size:15.5px}
.btn-nav,nav a.btn-nav{background:var(--accent);color:var(--on-accent);border-color:var(--accent);
padding:8px 14px;font-size:13.5px}
.btn-nav:hover,nav a.btn-nav:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line)}
.btn-outline:hover{border-color:var(--n-500);background:var(--surface)}
/* v2 explicit names — prefer these on new markup */
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-bright);border-color:var(--accent-bright);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--n-500);background:var(--surface)}
.btn-sm{padding:8px 14px;font-size:13.5px}
/* secondary was an underlined text link — too weak to read as an action */
.btn-secondary,a.btn-secondary{
display:inline-flex;align-items:center;gap:8px;
background:transparent;color:var(--text);border:1px solid var(--line);
border-radius:var(--r-sm);padding:11px 18px;
font-size:var(--t-sm);font-weight:500;text-decoration:none;
transition:border-color var(--dur-fast),background var(--dur-fast);
}
.btn-secondary:hover,a.btn-secondary:hover{border-color:var(--n-500);background:var(--surface);border-bottom-color:var(--n-500)}
.link,.link-cta,.linkedin,.go,.cta-inline{
color:var(--accent);text-decoration:none;font-weight:500;font-size:var(--t-sm);
border-bottom:0;transition:color var(--dur-fast);
}
.link:hover,.link-cta:hover,.linkedin:hover,.go:hover{color:var(--accent-bright);border-bottom-color:transparent}
.cta-row,.hero-cta{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
/* ═══ SURFACES ═══════════════════════════════════════════════════
The old pattern was 1px-gap grids on a rule-colored background,
producing hairline boxes. On dark that reads as noise, so cards
become real surfaces with radius. */
.cards,.card-grid,.method-grid,.pillars-grid,.domains-grid,
.tiers-grid,.testimonials-grid,.fit-grid,.does,.assessment-grid{
background:transparent!important;
border:0!important;
gap:var(--s-3)!important;
}
.card,.method-card,.pillar,.domain-card,.tier,.testimonial,
.rec-card,.item,.does div,.assess-col,.path{
background:var(--surface)!important;
border:1px solid var(--line)!important;
border-radius:var(--r-md);
transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
a.card:hover,.card:hover,.method-card:hover,.pillar:hover,.domain-card:hover,
.tier:hover,.rec-card:hover,.item:hover,.does div:hover,.path:hover{
border-color:var(--accent-line)!important;
background:var(--surface-2)!important;
}
a.card:hover,.does div:hover{transform:translateY(-2px)}
.tier.featured{border-color:var(--accent-line)!important;background:var(--surface-2)!important}
.card p,.method-card p,.pillar p,.domain-card p,.item p{font-size:var(--t-sm);color:var(--text-2)}
/* ── chips ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{
font-size:13.5px;color:var(--text-2);
background:transparent!important;
border:1px solid var(--line)!important;
border-radius:var(--r-full)!important;
padding:6px 12px!important;
}
a.chip:hover{color:var(--text);border-color:var(--accent-line)!important;background:var(--accent-dim)!important}
/* ── closing bands ───────────────────────────────────────────────── */
.close,.big-cta,.final,.callout,.partners,.bridge,.guarantee-list,
.associates-invite,.report-cta{
position:relative;overflow:hidden;
background:linear-gradient(160deg,var(--surface-2),var(--n-900))!important;
border:1px solid var(--line)!important;
border-radius:var(--r-lg);
padding:clamp(36px,5vw,64px);
}
.close::before,.big-cta::before,.final::before{
content:"";position:absolute;top:-60%;right:-10%;width:600px;height:600px;
background:radial-gradient(circle,rgba(91,140,255,.16),transparent 65%);
pointer-events:none;
}
.close > *,.big-cta > *,.final > *{position:relative}
.associates-invite,.partners{padding:var(--s-6)}
.note,.method-note,.trips-note,.tiers-footnote,.closing,.closing-line,
.quote-note,.who,.fine{
font-size:var(--t-sm);color:var(--text-3);
}
/* ── rules, tables, lists ────────────────────────────────────────── */
.bands,.band,.timeline,.tl-step,.results-list,.tier-table,.trips-list,
.constraints,.item{border-color:var(--line)!important}
hr{border:0;border-top:1px solid var(--line)}
table{border-collapse:collapse}
th,td{border-color:var(--line)!important}
/* ── photography ─────────────────────────────────────────────────
The headshots were shot warm for a cream page. Graded so they sit
on the dark canvas instead of glowing orange. */
.person-photo img,.team-photo img,.attr-photo img,.testimonial img{
filter:grayscale(1) contrast(1.05) brightness(.95);
border:1px solid var(--line);
border-radius:var(--r-md);
}
.attr-photo img,.testimonial figcaption img{border-radius:var(--r-full)}
/* ── blockquotes ─────────────────────────────────────────────────── */
blockquote{color:var(--text-2);font-style:normal}
.testimonial blockquote{font-size:var(--t-sm);line-height:1.6}
.name{color:var(--text);font-weight:500}
/* ═══ FOOTER ═════════════════════════════════════════════════════ */
footer{border-top:1px solid var(--line)!important;color:var(--text-3);font-size:13.5px}
footer a{color:var(--text-3);text-decoration:none;transition:color var(--dur-fast)}
footer a:hover{color:var(--text)}
.footer-brand p{color:var(--text-3);font-size:13.5px}
/* ═══ MOTION ═════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(14px);
transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ═══ RESPONSIVE ═════════════════════════════════════════════════ */
@media (max-width:600px){
nav .hide-sm{display:none}
.mark em{display:none}
.close,.big-cta,.final,.callout{padding:var(--s-6)}
}
/* ═══ FRAUNCES SWEEP ═════════════════════════════════════════════
Every selector across the 13 pages that declared Fraunces. With
the font no longer loaded these would fall back to Georgia serif,
so they are repointed explicitly. Delete a line once its page's
own CSS has been cleaned up. */
.assess-col .cat-label,.assess-col h3,.big-cta h2,.callout h2,.callout p.lead-line,.card h3,.card-num,.contact a.email,.contact h3,.cta a.book,.cta h3,.cta-repeat h2,.delta-block .d-caption,.delta-block .d-value,.disc-row .d-name,.disc-row .d-score,.domain-card h3,.domain-num,.fit-grid h3,.hero .kicker,.hero h1,.item h2,.mark,.metric .m-value,.outcomes li::before,.pair h3,.path .path-title,.person h3,.pillar h3,.pillar-num,.rec-card h3,.report-hero blockquote,.results-list li::before,.tier-name,.tier-positioning,.tier-price,.tl-step h3,.trip-name,.trip-year,.trips-footnote,.two-x h1,.who .closing,details.faq summary,h1,h2,h2.section-h,h3,h4,section h2,section.final h2,section.pillars h2,section.report-cta h2,section.shape h2,section.tiers h2,section.trips h2,section.who h2{
font-family:var(--font-display)!important;
font-style:normal!important;
}
.report-hero blockquote,.trips-footnote,.tier-positioning,.callout p.lead-line{
font-family:var(--font-body)!important;
}
/* wide tables scroll rather than blow out the viewport */
@media (max-width:700px){
.tier-table,.comparison,.scorecard{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* Heading emphasis: page CSS set several of these to accent, others
inherited grey — inconsistent across pages. One rule, everywhere.
Accent stays reserved for actions (max 4 per viewport). */
h1 em,h2 em,h3 em,h1 i,h2 i{color:var(--n-500)!important;font-style:normal!important}
.mark em{color:var(--text-3)!important}
/* ═══ WORDMARK ═══════════════════════════════════════════════════
The header logo is the SVG wordmark, applied as a CSS mask rather
than an ![]()
so it inherits currentColor — one file serves dark,
a future light mode, and the hover state. Markup:
Vector
The .sr-only text is what screen readers and search engines read;
the mask is decorative. */
.mark .logo{
display:block;
height:20px;
width:calc(20px * 4.453); /* wordmark aspect ratio */
background-color:currentColor;
-webkit-mask:url("/images/vector-wordmark.svg") no-repeat center/contain;
mask:url("/images/vector-wordmark.svg") no-repeat center/contain;
flex:0 0 auto;
}
.mark{color:var(--text);transition:color var(--dur-fast)}
.mark:hover{color:var(--text-2)}
.mark .chev{flex:0 0 auto}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (max-width:600px){ .mark .logo{height:18px;width:calc(18px * 4.453)} }