/* Inside the Gates — Design System Tokens, base styles, and component primitives. McKinsey/Bain restrained-advisory aesthetic. */ /* ---------- Type pairing options ---------- Default: Pairing A (Source Serif 4 + Inter Tight) Switchable on Design System page via [data-pairing] on . A — Source Serif 4 + Inter Tight (modern editorial, FT-adjacent) B — Fraunces + IBM Plex Sans (more distinctive, tightly contemporary) -- Fraunces is overused, switching B — GT Sectra-style: PT Serif + Söhne-alt: Public Sans (workhorse advisory) C — Spectral + Inter (humanist serif + neutral sans) */ :root { /* --- Pairing A (default) --- */ --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-sans: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Color: Foundation --- */ --color-ink: #111111; /* primary text */ --color-ink-2: #2A2A2A; /* secondary text */ --color-slate: #5F5E5A; /* brand slate gray */ --color-slate-2: #8A8A86; /* tertiary text, captions */ --color-rule: #D9D7D2; /* hairline rules */ --color-rule-2: #ECEAE5; /* subtle dividers */ --color-paper: #FAF8F4; /* warm off-white background */ --color-paper-2: #F2EFE9; /* secondary surface */ --color-white: #FFFFFF; /* --- Color: Brand --- */ --color-blue: #185FA5; /* brand primary */ --color-blue-deep: #0E3F70; /* hover / dark accent */ --color-blue-soft: #D6E8F7; /* brand light blue */ --color-blue-paper: #EAF2FB; /* tinted surface */ /* --- Color: Editorial extensions --- */ --color-ink-deep: #0A0A0A; /* near-black for hero type */ --color-bottle: #1F3D2E; /* deep green — accent for tags / occasional */ --color-bone: #EFE9DC; /* warm cream for section breaks */ --color-claret: #6B1F2A; /* reserved alert / highlight */ /* --- Spacing scale (4px base) --- */ --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; --s-11: 160px; /* --- Radii (kept tight; advisory aesthetic) --- */ --r-0: 0px; --r-1: 2px; --r-2: 4px; /* --- Layout --- */ --container: 1240px; --container-narrow: 880px; --container-text: 680px; /* --- Type ramp --- */ --fs-eyebrow: 12px; --fs-caption: 13px; --fs-body-sm: 15px; --fs-body: 17px; --fs-lead: 21px; --fs-h6: 18px; --fs-h5: 22px; --fs-h4: 28px; --fs-h3: 36px; --fs-h2: 48px; --fs-h1: 64px; --fs-display: 88px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; } /* ----- Pairing B: PT Serif + Public Sans ----- */ [data-pairing="B"] { --font-serif: "PT Serif", Georgia, "Times New Roman", serif; --font-sans: "Public Sans", "Helvetica Neue", Arial, sans-serif; } /* ----- Pairing C: Spectral + Inter ----- */ [data-pairing="C"] { --font-serif: "Spectral", Georgia, "Times New Roman", serif; --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--color-blue); text-decoration: none; } a:hover { color: var(--color-blue-deep); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Type primitives ---------- */ .serif { font-family: var(--font-serif); } .sans { font-family: var(--font-sans); } .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-blue); line-height: 1; } .eyebrow--slate { color: var(--color-slate); } .eyebrow--ink { color: var(--color-ink); } .display { font-family: var(--font-serif); font-size: var(--fs-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-ink-deep); } .h1 { font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.018em; color: var(--color-ink-deep); text-wrap: balance; } .h2 { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--color-ink-deep); text-wrap: balance; } .h3 { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1.18; letter-spacing: -0.012em; color: var(--color-ink-deep); } .h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink); } .h5 { font-family: var(--font-sans); font-size: var(--fs-h5); font-weight: 600; line-height: 1.3; color: var(--color-ink); } .h6 { font-family: var(--font-sans); font-size: var(--fs-h6); font-weight: 600; line-height: 1.4; color: var(--color-ink); } .lead { font-family: var(--font-serif); font-size: var(--fs-lead); line-height: 1.55; color: var(--color-ink-2); font-weight: 400; } .body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-ink-2); } .body-sm { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--color-ink-2); } .caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--color-slate-2); letter-spacing: 0.01em; } .pull-quote { font-family: var(--font-serif); font-size: 26px; line-height: 1.4; font-style: italic; color: var(--color-ink); border-left: 2px solid var(--color-blue); padding-left: var(--s-5); } /* ---------- Layout primitives ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-left: var(--s-6); padding-right: var(--s-6); } .container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--s-6); padding-right: var(--s-6); } .container--text { max-width: var(--container-text); margin: 0 auto; padding-left: var(--s-6); padding-right: var(--s-6); } .section { padding: var(--s-9) 0; } .section--lg { padding: var(--s-10) 0; } .section--sm { padding: var(--s-7) 0; } .rule { height: 1px; background: var(--color-rule); border: 0; margin: 0; } .rule--ink { background: var(--color-ink); height: 1px; } .rule--blue { background: var(--color-blue); height: 1px; } .rule--thick { height: 2px; background: var(--color-ink); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 14px 24px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; border: 1px solid transparent; border-radius: var(--r-1); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; text-decoration: none; } .btn:hover { text-decoration: none; } .btn--primary { background: var(--color-blue); color: var(--color-white); } .btn--primary:hover { background: var(--color-blue-deep); color: var(--color-white); } .btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); } .btn--secondary:hover { background: var(--color-ink); color: var(--color-white); } .btn--ghost { background: transparent; color: var(--color-blue); padding-left: 0; padding-right: 0; border-radius: 0; } .btn--ghost::after { content: "→"; font-size: 16px; transition: transform 160ms ease; } .btn--ghost:hover::after { transform: translateX(4px); } .btn--ghost:hover { color: var(--color-blue-deep); text-decoration: none; } .btn--lg { padding: 18px 32px; font-size: 16px; } /* ---------- Form ---------- */ .field { display: flex; flex-direction: column; gap: var(--s-2); } .field__label { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-ink); letter-spacing: 0.04em; text-transform: uppercase; } .field__label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-slate-2); margin-left: var(--s-2); } .input, .textarea, .select { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--color-ink); background: var(--color-white); border: 1px solid var(--color-rule); border-radius: var(--r-1); padding: 14px 16px; width: 100%; outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .input:focus, .textarea:focus, .select:focus { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.12); } .textarea { min-height: 140px; resize: vertical; line-height: 1.5; } .select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } /* ---------- Card ---------- */ .card { background: var(--color-white); border: 1px solid var(--color-rule); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); } .card--paper { background: var(--color-paper); } .card--bone { background: var(--color-bone); border-color: transparent; } .card--accent { border-top: 3px solid var(--color-blue); } /* ---------- Tag / pill ---------- */ .tag { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; background: var(--color-blue-paper); color: var(--color-blue-deep); border-radius: var(--r-1); line-height: 1; } .tag--ink { background: var(--color-ink); color: var(--color-white); } .tag--bone { background: var(--color-bone); color: var(--color-ink); } .tag--outline { background: transparent; border: 1px solid var(--color-rule); color: var(--color-slate); } /* ---------- Stat ---------- */ .stat { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--color-ink); } .stat__num { font-family: var(--font-serif); font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: var(--color-ink-deep); font-weight: 400; } .stat__label { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: var(--color-slate); letter-spacing: 0.02em; } /* ---------- Top nav ---------- */ .nav { position: sticky; top: 0; z-index: 10; background: var(--color-paper); border-bottom: 1px solid var(--color-rule); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); } .nav__brand { display: flex; align-items: baseline; gap: 6px; text-decoration: none; } .nav__brand:hover { text-decoration: none; } .nav__brand-the { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--color-blue); text-transform: uppercase; position: relative; top: -2px; } .nav__brand-word { font-family: var(--font-sans); font-size: 18px; font-weight: 800; color: var(--color-ink); letter-spacing: -0.01em; } .nav__links { display: flex; gap: var(--s-7); align-items: center; } .nav__links a { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-ink); text-decoration: none; letter-spacing: 0.01em; } .nav__links a:hover { color: var(--color-blue); text-decoration: none; } .nav__links a.is-active { color: var(--color-blue); } /* ---------- Footer ---------- */ .footer { background: var(--color-ink-deep); color: var(--color-paper); padding: var(--s-9) 0 var(--s-6); } .footer a { color: var(--color-paper); text-decoration: none; } .footer a:hover { color: var(--color-blue-soft); text-decoration: underline; text-underline-offset: 3px; } .footer .caption { color: rgba(250, 248, 244, 0.55); } /* ---------- Utility ---------- */ .flex { display: flex; } .col { display: flex; flex-direction: column; } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-7 { gap: var(--s-7); } .grid { display: grid; gap: var(--s-6); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } .text-blue { color: var(--color-blue); } .text-slate { color: var(--color-slate); } .text-ink { color: var(--color-ink); } .text-white { color: var(--color-white); } .bg-paper { background: var(--color-paper); } .bg-paper-2 { background: var(--color-paper-2); } .bg-bone { background: var(--color-bone); } .bg-blue { background: var(--color-blue); color: var(--color-white); } .bg-blue-soft { background: var(--color-blue-soft); } .bg-ink { background: var(--color-ink-deep); color: var(--color-paper); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { :root { --fs-display: 56px; --fs-h1: 44px; --fs-h2: 34px; --fs-h3: 28px; --fs-h4: 22px; --fs-lead: 18px; } .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } .nav__links { display: none; } .section { padding: var(--s-7) 0; } .section--lg { padding: var(--s-8) 0; } }