/* Shared VSL page styles. Per-page accent is injected as --accent in the page . */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } :root { --ink: #1c1d20; --muted: #6f7378; --bg: #ffffff; --bg-alt: #f6f6f4; --line: #e3e3e0; --card: #ffffff; --todo: #b4610a; --todo-bg: #fdf4e7; --todo-line: #e8b877; --max: 68rem; } body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; } .narrow { max-width: 46rem; } h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.15; margin: 0; } .hl-text .hl { color: var(--accent-text); } /* A yellow brand can't colour text with its accent, so highlight by painting a marker behind the phrase and keeping the text black. */ .hl-mark .hl { /* Highlighter swipe under the lower third of the text, not a full block: a solid yellow field behind large headline type reads as a mistake. */ background: linear-gradient(transparent 62%, var(--mark, var(--accent)) 62%); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* ---------- placeholder treatment ---------- */ .todo { border: 2px dashed var(--todo-line); background: var(--todo-bg); color: var(--todo); border-radius: 6px; padding: 1.25rem 1.5rem; text-align: left; font-size: 0.92rem; line-height: 1.55; } .todo-label { display: block; margin-bottom: 0.4rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .todo p { margin: 0.4rem 0 0; } .todo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: rgba(0, 0, 0, 0.05); padding: 0.1em 0.35em; border-radius: 3px; } .todo-inline { display: inline; border-bottom: 2px dashed var(--todo-line); background: var(--todo-bg); color: var(--todo); padding: 0 0.25em; font-weight: 500; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* 4.5rem, not 4: the brand mark is 40px and needs room to breathe. */ min-height: 4.5rem; } .nav-logo { font-weight: 600; font-size: 1.05rem; text-decoration: none; color: inherit; letter-spacing: -0.02em; } /* ---------- brand lockup (mark + wordmark) ---------- */ /* Used in the header and the footer. The mark is a fixed square that never shrinks; the wordmark beside it is live text. 40px, not an em multiple of the wordmark: the mark carries a dot grid and three letters, and below roughly 40 both stop reading. That makes it taller than the 4rem nav is used to, so the nav grows to suit rather than the mark shrinking to fit. */ .nav-logo, .footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; } .brand-mark { width: 40px; height: 40px; flex: none; display: block; } /* ---------- buttons ---------- */ .btn { display: inline-block; padding: 0.85rem 1.6rem; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 0.95rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; transition: filter 0.15s ease; } .btn:hover { filter: brightness(0.92); } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .btn-sm { padding: 0.6rem 1.15rem; font-size: 0.88rem; } .btn-lg { padding: 1.05rem 2.2rem; font-size: 1.05rem; } /* ---------- section rhythm ---------- */ section { padding: 4.5rem 0; } section.alt { background: var(--bg-alt); border-block: 1px solid var(--line); } .eyebrow { margin: 0 0 1rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } /* ---------- hero ---------- */ .hero { padding: 4rem 0 2.5rem; text-align: center; } .hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 600; max-width: 44ch; margin: 0 auto; text-wrap: balance; } /* The subhead under the headline. Sized between the h1 and body copy and kept in full ink rather than muted grey: it carries the second half of the promise, so it has to read as part of the headline, not as a caption under it. */ .hero .body { max-width: 40rem; margin: 1rem auto 0; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ink); } .hero .body p { margin: 0 0 0.5rem; } /* ---------- vsl ---------- */ .vsl { padding: 0 0 1.75rem; } .vsl-frame { position: relative; max-width: 52rem; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #000; } .vsl-frame iframe { width: 100%; height: 100%; border: 0; display: block; } /* Self-hosted