/* ═══════════════════════════════════════════════════════════════════════════ site.css, the house stylesheet for calebsargeant.com Source of truth: docs/design-system.md. Every token name, class name and animation below is specified there. If a name here disagrees with that document, that document wins and this file is the bug. Order: tokens, reset/base, primitives, components (in design-system.md section 3 order), animations, responsive, reduced motion, print. assets/print.css is a different stylesheet for a different job: it dresses templates/print/* for the PDF renderer. The @media print block at the foot of this file only has to make the *site* pages printable from a browser. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens ───────────────────────────────────────────────────────────── */ :root { /* ground */ --ink: #080B10; --ink-2: #0D131B; --ink-3: #121A24; --line: rgba(255, 255, 255, 0.075); --line-2: rgba(255, 255, 255, 0.14); /* text */ --fg: #EAF2F8; --fg-dim: #9FB3C4; --fg-mute: #748A9F; /* AA on --ink/--ink-2/--ink-3: 5.52 / 5.22 / 4.90 */ /* accent: "signal" */ --sig: #38E1FF; --sig-2: #4C6FFF; --sig-ink: #7FEAFF; --sig-wash: rgba(56, 225, 255, 0.08); --grad-sig: linear-gradient(120deg, var(--sig), var(--sig-2)); /* status */ --live: #4ADE80; --warn: #FBBF24; --crit: #F87171; /* type */ --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --tracking-kicker: 0.24em; --tracking-display: -0.035em; /* geometry */ --maxw: 1180px; --radius-card: 20px; --radius-panel: 14px; --radius-btn: 11px; --radius-chip: 7px; /* Not part of the published token set: motion and depth. These are theme independent on purpose, so they never need a second definition below. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --dur: 220ms; --dur-slow: 520ms; --shadow-1: 0 1px 2px rgba(8, 11, 16, 0.18), 0 10px 30px rgba(8, 11, 16, 0.14); --shadow-2: 0 2px 8px rgba(8, 11, 16, 0.24), 0 28px 64px rgba(8, 11, 16, 0.22); color-scheme: dark; } /* The light theme redefines the listed names and nothing else. Any colour that exists only here would be undefined in dark, which is why the block above carries every base definition. */ :root[data-theme="light"] { --ink: #F7FAFC; --ink-2: #FFFFFF; --ink-3: #EEF3F8; --line: rgba(8, 11, 16, 0.10); --line-2: rgba(8, 11, 16, 0.18); --fg: #0B1219; --fg-dim: #44586B; --fg-mute: #596E82; /* AA on --ink/--ink-2/--ink-3: 5.04 / 5.28 / 4.73 */ --sig: #0891B2; --sig-2: #3B4FE0; --sig-ink: #0E7490; color-scheme: light; } /* Honour the OS preference only while the reader has not chosen. An explicit data-theme="dark" has to keep winning here, hence the :not() guard. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ink: #F7FAFC; --ink-2: #FFFFFF; --ink-3: #EEF3F8; --line: rgba(8, 11, 16, 0.10); --line-2: rgba(8, 11, 16, 0.18); --fg: #0B1219; --fg-dim: #44586B; --fg-mute: #596E82; /* AA on --ink/--ink-2/--ink-3: 5.04 / 5.28 / 4.73 */ --sig: #0891B2; --sig-2: #3B4FE0; --sig-ink: #0E7490; color-scheme: light; } } /* ── 2. Reset and base ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { /* The ambient layer sits at z-index -1, so the page ground has to be painted by rather than propagated up from , or the layer disappears underneath it. */ background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* sticky nav must not cover an anchor target */ } body { background: transparent; color: var(--fg); font-family: var(--font-display); font-size: 16px; line-height: 1.6; font-weight: 400; min-height: 100svh; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Ambient telemetry ground: two low-alpha signal glows, a 1px grid at roughly 2% and a vignette that keeps the grid from reaching the corners. Built from the accent tokens with color-mix so it re-tints itself in the light theme instead of needing a second definition. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(130% 95% at 50% 6%, transparent 0%, transparent 52%, var(--ink) 100%), linear-gradient(to right, color-mix(in srgb, var(--line) 30%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--line) 30%, transparent) 1px, transparent 1px), radial-gradient(46vmax 34vmax at 8% -8%, color-mix(in oklab, var(--sig) 15%, transparent) 0%, transparent 68%), radial-gradient(42vmax 32vmax at 94% 4%, color-mix(in oklab, var(--sig-2) 14%, transparent) 0%, transparent 68%); background-size: 100% 100%, 54px 54px, 54px 54px, 100% 100%, 100% 100%; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: clamp(40px, 7vw, 76px); line-height: 0.98; letter-spacing: var(--tracking-display); font-weight: 700; } h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.028em; } h3 { font-size: clamp(19px, 1.8vw, 22px); } h4 { font-size: 16px; } p { text-wrap: pretty; } a { color: var(--sig-ink); text-decoration-color: color-mix(in srgb, var(--sig) 45%, transparent); text-underline-offset: 3px; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); } a:hover { color: var(--sig); text-decoration-color: currentColor; } img, svg, canvas, video { display: block; max-width: 100%; } svg { height: auto; } ul, ol { padding-left: 1.15em; } li { margin-block: 0.28em; } li::marker { color: var(--fg-mute); } strong, b { font-weight: 600; color: var(--fg); } hr { border: 0; border-top: 1px solid var(--line); margin-block: 32px; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 0.1em 0.4em; color: var(--sig-ink); } pre { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 18px 20px; overflow-x: auto; } pre code { background: none; border: 0; padding: 0; color: inherit; } kbd { font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 6px; color: var(--fg-dim); background: var(--ink-3); border: 1px solid var(--line-2); border-bottom-width: 2px; } table { width: 100%; border-collapse: collapse; font-size: 15px; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); } th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-dim); font-weight: 600; } tbody tr:nth-child(even) { background: var(--ink-3); } blockquote { border-left: 2px solid var(--sig); padding-left: 18px; color: var(--fg-dim); } details summary { cursor: pointer; } /* The accessibility floor: one visible ring, in the accent, on everything that takes focus. Outline (not box-shadow) so it follows the border radius and survives forced-colors mode. */ :focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; } ::selection { background: var(--sig); color: var(--ink); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--ink); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--fg-mute); } /* ── 3. Layout primitives ────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 32px; } .section { padding: 88px 0; } .section + .section { padding-top: 0; } .section-head { max-width: 640px; margin-bottom: 40px; } .section-head h2 { margin-top: 12px; } .section-head .lead, .section-head p { margin-top: 14px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .kicker { justify-content: center; } .lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--fg-dim); max-width: 62ch; } .grid-2, .grid-3 { display: grid; gap: 22px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .panel { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 22px 24px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .panel:hover { border-color: var(--line-2); } .card { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px 26px 28px; isolation: isolate; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* The hairline brightens and a soft accent glow blooms behind the card. The glow has to sit well outside the border box: the card background is opaque, so anything inset behind it is simply covered up. */ .card::after { content: ""; position: absolute; inset: -26px; border-radius: calc(var(--radius-card) + 26px); z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(58% 52% at 50% 34%, color-mix(in oklab, var(--sig) 30%, transparent) 0%, transparent 72%); filter: blur(14px); transition: opacity var(--dur-slow) var(--ease); } .card:hover, .card:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sig) 32%, var(--line-2)); box-shadow: var(--shadow-2); } .card:hover::after, .card:focus-within::after { opacity: 1; } .card h3 { letter-spacing: -0.024em; } .card > * + * { margin-top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .mono { font-family: var(--font-mono); font-feature-settings: "liga" 0; } .grad-text { background: var(--grad-sig); -webkit-background-clip: text; background-clip: text; color: transparent; /* Safari falls back to the solid colour without the prefixed fill. */ -webkit-text-fill-color: transparent; } /* Both of these only do anything once site.js has run: the palette needs JS to open, and the theme toggle needs JS to write data-theme. Without it they are dead controls, so they are not offered. */ html:not(.js) [data-theme-toggle], html:not(.js) [data-cmdk-open] { display: none; } /* Present in base.html for keyboard users; only visible while focused. */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 400; padding: 10px 16px; border-radius: var(--radius-btn); background: var(--ink-2); border: 1px solid var(--sig); color: var(--fg); text-decoration: none; transform: translateY(-160%); transition: transform var(--dur) var(--ease); } .skip-link:focus, .skip-link:focus-visible { /* base.html gives this .sr-only as well, so focus has to undo every part of the clip, not just the transform, or the link "appears" as a 1px box. */ transform: none; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; } /* home.html heads each focus card with a 24px line icon. It inherits the card's text colour by default, which reads as a second paragraph rather than a mark. */ .card-icon { color: var(--sig); margin-bottom: 16px; } /* ── 4. Nav ──────────────────────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); } /* JS adds .solid past 24px of scroll. Backdrop blur only once it is solid, so the hero canvas is not blurred through an invisible bar at rest. */ .site-nav.solid { background: color-mix(in srgb, var(--ink) 78%, transparent); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom-color: var(--line); } .nav-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 14px 32px; display: flex; align-items: center; gap: 22px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--fg); text-decoration: none; white-space: nowrap; } .brand::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grad-sig); box-shadow: 0 0 0 3px var(--sig-wash); flex: none; } .brand:hover { color: var(--fg); } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; list-style: none; padding: 0; } .nav-links li { margin: 0; } .navlink { position: relative; display: inline-block; padding: 8px 12px; border-radius: var(--radius-chip); font-size: 14px; color: var(--fg-dim); text-decoration: none; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .navlink:hover { color: var(--fg); background: var(--sig-wash); } .navlink.active { color: var(--fg); } .navlink.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad-sig); } .nav-actions { display: flex; align-items: center; gap: 8px; } /* Injected by JS, so it only exists on the enhanced page. Below 820px the enhanced nav collapses; the plain nav simply wraps and stays usable. 820 and not 760 because the full link row stops fitting at about 790, and it matches the width site.js uses to force the menu shut on resize. */ .nav-toggle { display: none; position: relative; flex: none; /* it is the last item in the row: never let it shrink */ width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-btn); background: var(--ink-2); color: var(--fg); cursor: pointer; } /* The bars are drawn by the button itself when the JS injects no children, and by the children when it does. :has() picks the right one at runtime. */ .nav-toggle:not(:has(*))::before, .nav-toggle:not(:has(*))::after, .nav-toggle > span { content: ""; position: absolute; left: 50%; width: 17px; height: 1.5px; margin-left: -8.5px; border-radius: 2px; background: currentColor; transition: transform var(--dur) var(--ease), opacity 140ms linear; } .nav-toggle:not(:has(*))::before { top: 14px; } .nav-toggle:not(:has(*))::after { top: 24px; } .nav-toggle > span:nth-child(1) { top: 13px; } .nav-toggle > span:nth-child(2) { top: 19px; } .nav-toggle > span:nth-child(3) { top: 25px; } /* .menu-open may land on the nav or on the body; accept either. */ .site-nav.menu-open .nav-toggle:not(:has(*))::before, body.menu-open .nav-toggle:not(:has(*))::before { transform: translateY(5px) rotate(45deg); } .site-nav.menu-open .nav-toggle:not(:has(*))::after, body.menu-open .nav-toggle:not(:has(*))::after { transform: translateY(-5px) rotate(-45deg); } .site-nav.menu-open .nav-toggle > span:nth-child(1), body.menu-open .nav-toggle > span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .site-nav.menu-open .nav-toggle > span:nth-child(2), body.menu-open .nav-toggle > span:nth-child(2) { opacity: 0; transform: scaleX(0.2); } .site-nav.menu-open .nav-toggle > span:nth-child(3), body.menu-open .nav-toggle > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .brand-name { font-weight: 600; } /* The toggle ships both icons and shows one. site.js writes data-theme-state on the button; before it runs the media query picks the right one, so the button is never a sun and a moon at the same time. */ .icon-sun, .icon-moon { grid-area: 1 / 1; } [data-theme-toggle] { display: inline-grid; place-items: center; } .icon-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .icon-sun { display: none; } :root:not([data-theme="dark"]) .icon-moon { display: block; } } :root[data-theme="light"] .icon-sun { display: none; } :root[data-theme="light"] .icon-moon { display: block; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } /* Once site.js has run its attribute is the authority, whatever the OS says. */ [data-theme-state="dark"] .icon-sun { display: block; } [data-theme-state="dark"] .icon-moon { display: none; } [data-theme-state="light"] .icon-sun { display: none; } [data-theme-state="light"] .icon-moon { display: block; } /* ── 4b. Language switcher and suggestion banner ─────────────────────────── */ /* The switcher is server-rendered, one real per locale, and works with JS off. site.js only adds data-short, aria-current and a memory of the choice. Styled as a segmented control because a language is a state you are in, not an action you take. */ .lang-switch { display: inline-flex; align-items: center; flex: none; gap: 2px; margin: 0; padding: 2px; list-style: none; border: 1px solid var(--line-2); border-radius: var(--radius-chip); background: color-mix(in srgb, var(--ink-2) 60%, transparent); } /* Rendered as a