/* ============================================================ kotlov.info — Design tokens Editorial / Big-4-bio register. Serif headlines + Inter body. Single accent. Warm off-white paper. No gradients. ============================================================ */ /* ---------- Fonts ---------- Loaded from Google Fonts CDN. If shipping offline, swap to local @font-face rules pointing at fonts/*.woff2 (paths reserved). */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:wght@400;600&display=swap"); :root { /* ---------- Color: neutrals (cool, corporate) ---------- */ --bg: #FFFFFF; /* clean white */ --bg-2: #F4F6F8; /* cool light gray, callouts/inputs */ --surface: #FFFFFF; /* cards on bg */ --ink: #0B1220; /* near-black, cool navy tint */ --ink-2: #1F2A3D; /* body — deep slate */ --ink-3: #5A6478; /* meta / labels — slate */ --ink-4: #8B95A7; /* tertiary, disabled */ --rule: #DDE3EB; /* hairline, cool */ --rule-2: #C2CAD6; /* heavier rule */ /* ---------- Color: accent (single) ---------- Default: deep navy. Reads as serious / financial-services on a cool ramp. */ --accent: #1E3A8A; /* deep navy — default */ --accent-ink: #172E6E; /* hover/press */ --accent-bg: #E8ECF6; /* tinted surface, used sparingly */ /* Alternates — uncomment one set to switch */ /* teal: --accent:#0F766E; --accent-ink:#0B5F58; --accent-bg:#E6F1EF; */ /* green: --accent:#166534; --accent-ink:#114F29; --accent-bg:#E7EFE9; */ /* ---------- Color: dark inverted (for the optional Cases section) */ --ink-bg: #0B1220; --ink-bg-2: #14213B; --on-ink: #EEF1F6; /* primary text on ink */ --on-ink-2: #A6B0C2; /* secondary text on ink */ --on-ink-rule: #233149; /* ---------- Type: families ---------- */ --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* ---------- Type: scale ---------- Rule: serif for display + h1/h2; sans for everything else. */ --t-display: 600 64px/1.05 var(--font-serif); /* hero name */ --t-h1: 600 48px/1.1 var(--font-serif); /* section heads */ --t-h2: 600 32px/1.15 var(--font-serif); /* subsections */ --t-h3: 600 20px/1.3 var(--font-sans); /* card titles, sans */ --t-h4: 600 16px/1.4 var(--font-sans); /* small heads */ --t-lead: 400 20px/1.5 var(--font-sans); /* lead paragraph under h1 */ --t-body: 400 16px/1.6 var(--font-sans); /* body */ --t-body-sm: 400 14px/1.55 var(--font-sans); /* small body */ --t-meta: 400 13px/1.5 var(--font-sans); /* meta */ --t-eyebrow: 500 12px/1.2 var(--font-sans); /* uppercase label */ --t-metric: 600 56px/1 var(--font-serif); /* big numbers in metrics */ /* tracking */ --track-eyebrow: 0.12em; --track-tight: -0.01em; --track-display: -0.02em; /* ---------- Spacing (8pt) ---------- */ --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: 160px; /* ---------- Layout ---------- */ --container: 1120px; /* main column max */ --container-narrow: 680px; /* prose / about column */ --container-wide: 1280px; /* very rare, large hero only */ --gutter: 24px; /* desktop gutter */ --gutter-mobile: 20px; /* ---------- Radii ---------- */ --r-0: 0; /* default — editorial */ --r-1: 4px; /* buttons, inputs */ --r-2: 8px; /* portrait card, large containers */ /* ---------- Borders ---------- */ --bw-1: 1px; --bw-2: 2px; /* ---------- Shadows (used at most twice in the design) ---------- */ --shadow-lift: 0 1px 2px rgba(14,17,22,.06), 0 8px 24px rgba(14,17,22,.06); --shadow-sticky: 0 2px 4px rgba(14,17,22,.08), 0 12px 32px rgba(14,17,22,.10); /* ---------- Motion ---------- */ --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; } /* ============================================================ Semantic helpers — apply with classes or `font:` shorthand ============================================================ */ .t-display { font: var(--t-display); letter-spacing: var(--track-display); color: var(--ink); } .t-h1 { font: var(--t-h1); letter-spacing: var(--track-tight); color: var(--ink); } .t-h2 { font: var(--t-h2); letter-spacing: var(--track-tight); color: var(--ink); } .t-h3 { font: var(--t-h3); color: var(--ink); } .t-h4 { font: var(--t-h4); color: var(--ink); } .t-lead { font: var(--t-lead); color: var(--ink-2); } .t-body { font: var(--t-body); color: var(--ink-2); } .t-body-sm { font: var(--t-body-sm); color: var(--ink-2); } .t-meta { font: var(--t-meta); color: var(--ink-3); } .t-eyebrow { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); color: var(--ink-3); text-transform: uppercase; } .t-metric { font: var(--t-metric); letter-spacing: var(--track-display); color: var(--ink); font-variant-numeric: tabular-nums; } /* Inline link */ .link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule-2); transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease), text-decoration-thickness var(--dur-fast) var(--ease); } .link:hover { color: var(--accent); text-decoration-color: var(--accent); text-decoration-thickness: 2px; } /* Hairline divider used under section eyebrows */ .eyebrow-rule { display: inline-block; width: 56px; height: 1px; background: var(--ink); vertical-align: middle; margin-right: 12px; } /* Body resets that pair with this system */ html, body { background: var(--bg); color: var(--ink-2); } body { font: var(--t-body); font-feature-settings: "ss01", "cv11", "tnum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--bg); }