/* critical.css Design tokens + reset + above-the-fold styles. Loaded render-blocking on purpose — everything else is deferred in main.css. Theme: dark is the default (:root). Light is an override via [data-theme="light"], toggled on . Both live here rather than a separate dark.css so the theme never costs an extra request or flashes on load. */ /* ---------- Design tokens ---------- */ :root { /* Dark (default). Neutrals are warm — pure blue-grays read cold/dated. */ --bg: #111110; --surface: #1a1a18; --text: #eceae7; --text-muted: #a8a49e; --border: #2a2926; --accent: #6ea8fe; --accent-strong: #4d8bff; /* A light red that reads on the dark background. Light theme overrides it below. */ --error: #ff8a8a; /* Fluid type scale — responsive with no media queries. */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --titleFontSize: clamp(1.5rem, 2.6vw, 2.25rem); --bodyFontSize: 1rem; /* Spacing */ --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; --maxWidth: 60rem; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: 'Noto Sans Mono', ui-monospace, Consolas, monospace; } [data-theme="light"] { --bg: #fbfaf9; --surface: #f2f0ed; --text: #1c1b19; --text-muted: #5c5852; --border: #dedbd6; --accent: #2563c9; --accent-strong: #1b4fa8; /* Darker red for contrast on the off-white background (the dark pastel fails WCAG here). */ --error: #b3261e; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img, picture, svg { display: block; max-width: 100%; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--bodyFontSize); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; } /* Keyboard users must get the same affordance as mouse users. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Layout primitives ---------- */ .container { width: 100%; max-width: var(--maxWidth); margin-inline: auto; padding-inline: 1rem; } /* Narrower measure for reading-heavy pages (About), so lines don't run too wide to scan. */ .container--prose { max-width: 42rem; } section { padding: var(--sectionPadding); } /* ---------- Section rhythm: topper / title / text ---------- These live in critical.css rather than main.css because the first section's heading is above the fold on every page. Deferring them would flash unstyled text on first paint. The admin layout reuses them too. */ .topper { display: block; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--topperFontSize); font-weight: 700; color: var(--accent); } .title { font-size: var(--titleFontSize); margin-bottom: 1rem; } /* The page's one h1. Bigger than .title, which is for section headings. */ .header { font-size: var(--headerFontSize); font-weight: 900; margin-bottom: 1rem; } .text { color: var(--text-muted); max-width: 46rem; } /* Consecutive body paragraphs need a gap; the reset zeroes

margins. Adjacent-sibling so single .text uses (under a heading, in a card) aren't pushed down. */ .text + .text { margin-top: 1.25rem; } /* ---------- Skip link (a11y) ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; padding: 0.75rem 1rem; background: var(--surface); color: var(--text); z-index: 100; } .skip-link:focus { left: 0; } /* ---------- Buttons (above the fold: header CTA + hero CTAs) ---------- In critical.css, not main.css: the header quote button and the hero CTAs paint above the fold, so deferring the style flashed an unstyled button. inline-block matters because .button is used on , where vertical padding on an inline box overflows the line instead of expanding it. admin.css keeps its own copy; it's a separate stylesheet. */ .button { display: inline-block; background: var(--accent-strong); color: #fff; border: none; border-radius: 6px; padding: 0.75rem 1.5rem; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; } .button:hover, .button:focus-visible { background: var(--accent); color: #fff; } .button--lg { padding: 0.9rem 1.75rem; font-size: 1.05rem; } /* ---------- Header (above the fold, sticky) ---------- Sticky so the quote CTA is on screen the whole way down every page, which is the single highest-leverage CTA placement for a service site: one action, always reachable. */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); /* Solid background: content scrolls underneath a sticky header, so a transparent one would let text bleed through. Slightly translucent with a blur where the browser supports it. */ background: var(--bg); } @supports (backdrop-filter: blur(8px)) { .site-header { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); } } .site-nav { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: var(--maxWidth); margin-inline: auto; padding: 0.75rem 1rem; } .site-nav__brand { font-weight: 700; color: var(--text); text-decoration: none; } /* ---------- Services dropdown (

/) ---------- Sits next to the brand. The menu is absolutely positioned so opening it doesn't push the header taller or shove the CTA around. */ .nav-menu { margin-left: 2rem; position: relative; } .nav-menu__label { color: var(--text-muted); font-weight: 600; cursor: pointer; list-style: none; /* Firefox marker */ padding: 0.25rem 0; } /* Kill the default disclosure triangle and draw our own caret, so the control matches the rest of the nav rather than showing the browser's marker. */ .nav-menu__label::-webkit-details-marker { display: none; } .nav-menu__label::after { content: ""; display: inline-block; margin-left: 0.4rem; border: 0.3rem solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: middle; } .nav-menu[open] .nav-menu__label::after { transform: rotate(180deg); } .nav-menu__label:hover, .nav-menu[open] .nav-menu__label { color: var(--text); } .nav-menu__list { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 12rem; display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 25%); } .nav-menu__list a { display: block; padding: 0.5rem 0.75rem; border-radius: 6px; color: var(--text-muted); text-decoration: none; font-weight: 600; } .nav-menu__list a:hover, .nav-menu__list a:focus-visible { background: var(--bg); color: var(--text); } /* A plain top-level nav link (About, later Blog), styled to match the dropdown label. */ .site-nav__link { color: var(--text-muted); text-decoration: none; font-weight: 600; margin-left: 1.5rem; } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--text); } .site-nav__cta { margin-left: auto; /* A comfortable tap target on mobile; the research floor is ~44px and this clears it. */ padding-block: 0.6rem; } /* An anchored jump (e.g. the skip link, or a future #hash) must not land under the sticky header. scroll-margin pushes the target down by the header's height. */ :target { scroll-margin-top: 5rem; } /* On narrow screens the nav wraps so the brand and Services sit on the top row and the CTA drops to a full-width second row, rather than three things crushed onto one line. The dropdown menu is absolutely positioned, so it opens over the content either way. */ @media (max-width: 34rem) { .site-nav { flex-wrap: wrap; } .nav-menu { margin-left: 1.25rem; } .site-nav__cta { order: 3; width: 100%; margin-left: 0; text-align: center; } } /* ---------- Lede (above the fold on every public page) ---------- In critical.css because it's the first thing painted. The hero image inside it is the LCP element on a project page, so its box has to be styled before first paint or the layout shifts when the image lands. */ .section--lede .lede__text { margin-bottom: 1.5rem; } .lede__meta { color: var(--accent); font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 1rem; } .hero { margin-top: 2.5rem; } .hero img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; }