/** * Noir Portfolio — base layer. * * Loaded after tokens.css, theme-noir.css and reset.css. Everything here reads * `--vc-*`; no literal colour or duration appears in this template, so a buyer * rebrands by editing tokens and nothing on the page misses the memo. * * Template-local values that are layout, not design — a measure, a gutter, the * display scale — are declared once here as `--noir-*` so the sections share * them. * * The art direction is brutalist editorial: display type sized off the * viewport rather than off a ramp, hard rules instead of shadows, square * corners, full-bleed bands that alternate between the two noir surfaces. * Three rules carry most of it — the display scale below, `.shell`, and * `[data-vc-surface]`. */ /** * Geist, self-hosted, with the system stack kept behind it in the same * declaration — not as a separate rule. If the woff2 fails to load, is still * loading, or the codepoint falls outside the subset, the browser walks this * list; a fallback in its own rule would never be reached. * * Overriding the token rather than the rules that use it is the whole point: * every component reads `--vc-font-sans`, so these lines re-typeset the page. * The @font-face blocks are in src/styles/fonts.css, which is synced — change * the face here, not there. * * `--vc-font-display` is headline-only and defined in tokens.css as an alias * of the body face. Pointing it at Anton is what separates the two roles: a * template that drops the Anton woff2 loses its headlines to Geist and stays * legible, because the fallback stack behind it is condensed-first — the * headline gets narrower, not four lines longer. */ :root { --vc-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --vc-font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; --vc-font-display: "Anton", "Haettenschweiler", "Arial Narrow", Impact, var(--vc-font-sans); } :root { /** * The gutter is the only horizontal constraint left. There is no shell * width: the page runs edge to edge and the gutter is deliberately small, * because display type that stops short of the window is display type doing * half its job. * * Body copy is still capped — by `--noir-measure`, on the paragraphs * themselves. Full-bleed is an instruction about the band, not about the * line length inside it. */ --noir-gutter: var(--vc-space-4); --noir-measure: 34rem; /* 2px, not 1px. A hairline is a whisper between two bands this loud, and it disappears entirely where a cream section meets a near-black one. */ --noir-rule: 2px; --noir-header-h: 3.75rem; /** * The display scale. * * Sized off the viewport, not off `--vc-text-*`. The token ramp tops out at * 3rem because it exists to size interfaces; these are posters, and a poster * that steps between breakpoints re-measures every glyph mid-animation — * liquid-headline and drip-type both split their headline into per-character * boxes and read those boxes back. `clamp()` is continuous, so they measure * once. * * The preferred terms are what fill the window: 18vw puts the hero at about * thirteen characters to a line at desktop width, 10vw puts a section title * on one or two. The floors keep a 320px phone readable; the ceilings stop a * 2560px monitor from rendering a single word per screen. */ --noir-display-hero: clamp(4rem, 18vw, 16rem); --noir-display-section: clamp(3rem, 10vw, 8rem); /* This rung is the only one set inside a box — card titles live in a card, and a 320px card has about 244px of inner width. Anton is condensed enough that `COUNTERWEIGHT` fits there at the 2rem floor; a wider display face would not, which is what `overflow-wrap` in work.css is there for. */ --noir-display-sub: clamp(2rem, 5vw, 4rem); --noir-display-stat: clamp(3rem, 8vw, 6.5rem); /* Display type is set tighter than solid — at 256px the default 1.15 opens a gap you could park the next section in. 0.88 is the floor now that every display string is uppercase: caps have no descenders, so the clearance 0.86 was buying for a `g` is clearance nothing needs. */ --noir-display-leading: 0.88; /* Anton is already condensed, so the fit is the face's own. -0.01em closes the caps just enough to read as one mass without pulling the counters in `O` and `G` shut, which is what happens past about -0.03em. */ --noir-display-tracking: -0.01em; /** * The rhythm around a display heading, shared by every band so the hero, * the section heads and the contact block all measure the same. * * The eyebrow is a ruled masthead line, so the gap under it is the gap under * the rule — tighter than the one below the heading, which has to separate * two different voices rather than a label from its subject. */ --noir-head-gap: var(--vc-space-6); --noir-sub-gap: var(--vc-space-7); /** * One padding for every band, rather than a base value and a wider one past * 64rem. The old pair stepped 96px → 128px at exactly one width; this is * continuous, ends higher, and means a section's air is the same instruction * everywhere it is asked for. * * In rem rather than the px the brief names — identical at the default root * size, but it keeps scaling if a visitor has set a larger one, which px * would not. */ --noir-band: clamp(6rem, 12vw, 10rem); } @media (min-width: 48rem) { :root { --noir-gutter: var(--vc-space-6); --noir-header-h: 4.25rem; } } html { scroll-behavior: smooth; /* Anchors land below the fixed header rather than under it. */ scroll-padding-top: calc(var(--noir-header-h) + var(--vc-space-4)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { /* Horizontal-handoff pins and translates; without this a sub-pixel overhang gives the whole page a sideways scrollbar on narrow screens. */ overflow-x: hidden; background: var(--vc-bg); color: var(--vc-ink); } /** * The paint gate. * * Every string on this page arrives from content/site.config.js, so the markup * is empty until main.js has run. Painting that empty skeleton first and the * copy a moment later is a page-wide layout shift — measurably so: it is worth * about 0.18 of cumulative layout shift on a throttled phone, which is most of * a Lighthouse performance score. * * So the inline script in sets `data-hydrating` and main.js clears it, * with a `load` listener as the backstop if main.js never runs. The window * between the two is a few milliseconds of blank, against a skeleton that had * no text in it anyway. * * With JavaScript disabled the inline script never runs, the attribute is * never set, and this rule never applies. The