/* * Inter, declared here because this is now the only stylesheet every page loads. * * It used to come from site-shell.css, which carried the @font-face for the * whole site. Removing that shell took the declaration with it, so ten pages -- * the home page among them -- asked for "Inter" against a font nobody had * registered and quietly fell back to Segoe UI. The wordmark is where that is * most obvious, but it was every character on those pages. * * Copied verbatim from site-shell.css: one variable file covering 100-900, and * font-display: swap so the text is readable while it loads. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); } /* * The light home page. * * Everything else on this site is one pinned dark theme -- data-theme="dark" is * a static attribute on and several tests assert it. This page is the * exception, so it does not borrow the shared shell's tokens: site-shell.css * defines its palette on .hd and .ft, and a light page pulling those in would * be fighting a dark variable set for every colour it wanted. The header and * footer here are their own components under an hx- prefix, which is also what * keeps test/header-navigation.test.js and tools/sync-site-shell.py away from * them -- they find pages by class="hd-nav", and this page has none. * * The hero is the mockup. Every section below it is the live home page's * content, so the job of the rest of this file is to say the same things in a * light palette: the same two-column blocks, the same five- and four-card * runs, the same big dashboard figure, the same numbered lists. * * Fonts: Inter is self-hosted and already on the site. The display serif and * the handwritten accents come from Google Fonts, which the CSP allows * (style-src fonts.googleapis.com, font-src fonts.gstatic.com). Both have real * fallbacks, because a headline is not worth a blank page. */ /* * Declared on every root the chrome can hang from, not just .hx. The home page * is .hx from down; on the other pages only the header, the footer, the * utility strip and the search dialog are hx components, and each has to be * able to resolve these on its own. */ .hx, .hx-util, .hx-hd, .hx-backdrop, .hx-ft, .hx-search, .hx-sticky-cta, /* The upgrade confirmation is appended to by pricing.js. On the home page that is inside .hx, but a is cheap to declare here and this is the same lesson as .hx-to-top below -- one page moving the section would otherwise leave the sheet resolving its surface and ink to nothing. */ .hx-upgrade, /* The back-to-top button is a child of , outside every wrapper above. On the home page that is still inside .hx, but on the pages whose body is .support-page or .doc-page it is not -- and there it resolved --hx-green-deep and --hx-mint-line to nothing, so the button wore the page's own ink and lost its shadow entirely. */ .hx-to-top { /* Ground and ink. The off-white is warm and slightly green rather than grey, which is what stops a page this empty reading as unfinished. */ --hx-ground: #f4f7f1; --hx-ground-2: #eef3ea; --hx-surface: #fff; --hx-ink: #16241c; --hx-ink-2: #2c3f34; --hx-body: #47574e; /* 4.88:1 on the ground and 5.28:1 on white. It was #6b7a71, which measured 4.14 against the mint-soft card fill and 4.18 against the ground -- under the 4.5 that 13px captions, figure captions and the footer's small print need, and those are most of what this token colours. */ --hx-muted: #616f67; --hx-green: #0a8a45; --hx-green-deep: #06753a; --hx-green-dark: #17381f; --hx-green-darker: #102817; --hx-green-bright: #45e39a; --hx-mint: #e4f1e8; --hx-mint-soft: #eff7f1; --hx-mint-line: #d4e7da; --hx-line: #e1e8df; /* * A frame for a screenshot, which --hx-line cannot be. * * --hx-line is a divider between two tinted surfaces and is right for that. * Around a screenshot it fails: several of these are captures with a white * or near-white background sitting on a white card, so the border measured * 1.18:1 against the image own corner pixel and the picture bled into the * card with no edge at all. This is the same hue, dark enough to read as a * hairline at 1px without becoming a rule in its own right. */ --hx-frame: #c2d1c6; --hx-line-soft: #ecf1ea; --hx-shadow-card: 0 12px 34px -20px rgba(18, 52, 34, .26); --hx-shadow-lift: 0 24px 60px -28px rgba(18, 52, 34, .3); --hx-shadow-pill: 0 14px 40px -22px rgba(18, 52, 34, .34); /* * Four display steps, because there were nine. * * Every heading carried its own clamp() and they landed within a few pixels * of each other: h2 at 46, 48, 50 and 52, h3 at 24, 36, 37 and 39. Sizes * that close do not read as a hierarchy -- they read as the same size drawn * slightly wrong. These are the four steps that were actually in use, named * once so a heading picks a level rather than inventing one. */ --hx-h-section: clamp(34px, 3.6vw, 54px); /* the six section heads */ --hx-h-band: clamp(30px, 3.2vw, 46px); /* privacy, about, the closing call */ --hx-h-sub: clamp(27px, 2.7vw, 38px); /* photo blocks, the video, plan names */ --hx-h-card: 24px; /* inside a card */ --hx-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* * The same family as the body, self-hosted, no second request. * * This was a display serif -- Instrument, then Fraunces -- which is a look * this design no longer wants. One typeface across the page is the minimal * position, and the hierarchy comes from size and weight instead of from a * change of voice. It also drops a render-blocking Google Fonts stylesheet: * Inter is already preloaded as a woff2 on every page, so the headline now * paints in its final face rather than swapping into one. */ --hx-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --hx-script: "Caveat", "Segoe Script", "Bradley Hand", cursive; color: var(--hx-body); font-family: var(--hx-sans); font-size: 16px; line-height: 1.6; } /* Only a page that is entirely this design paints the ground. Elsewhere the * page's own stylesheet owns its background, and the chrome sits on top. */ .hx { background: var(--hx-ground); } :where(.hx, .hx-util, .hx-hd, .hx-ft, .hx-search, .hx-sticky-cta, .hx-upgrade) *, :where(.hx, .hx-util, .hx-hd, .hx-ft, .hx-search, .hx-sticky-cta, .hx-upgrade) *::before, :where(.hx, .hx-util, .hx-hd, .hx-ft, .hx-search, .hx-sticky-cta, .hx-upgrade) *::after { box-sizing: border-box; } /* * Every base reset is wrapped in :where(), and this is the whole reason. * * Written as ".hx p", ".hx figure", ".hx ul", ".hx h1" these are a class plus a * type -- specificity (0,1,1) -- and a component class is (0,1,0). The reset * won every time, so a component could not set its own margin at all: * * .hx-month-art { margin: 54px auto 0 } -> 0, so the figure sat hard left * .hx-steps-art { margin: 54px auto 0 } -> 0, off-centre by 365px * .hx-card-art { margin-bottom: 18px } -> 0, image touching its own text * .hx-hero-lead, .hx-trust, .hx-hero-note, .hx-client-list, .hx-steps, * .hx-life-list, .hx-plans-note, .hx-watch-note -> all 0 * * Eleven of twelve margins on the page, which is why the vertical rhythm read * as broken and the two big screenshots looked misplaced. The headings had the * same problem in a quieter way: .hx-display asks for weight 500 and a 1.06 * line, and ".hx h1, .hx h2..." was holding them at 600 and 1.1. * * :where() contributes nothing to specificity, so these land at (0,0,1) -- still * ahead of the browser's own stylesheet, which is all a reset needs to beat, * and now behind every component class, which is what a reset should be. */ /* * The browser keeps an 8px margin on unless something says otherwise, * and nothing here did. The utility strip, the header and the footer are all * full-bleed, so that margin showed as a pale gutter down both sides of the * dark bar and a pale band above it -- the page looked inset by 8px on three * sides. * * It belongs in this file rather than on .hx because the chrome is on all * twenty-four pages while only two of them are .hx, and this is the only * stylesheet every one of them loads. */ body { margin: 0; } :where(.hx, .hx-util, .hx-hd, .hx-ft, .hx-search, .hx-sticky-cta) img { display: block; max-width: 100%; } /* * * As ".hx a" this was specificity (0,1,1) -- a class and a type -- and every * single-class component rule below is (0,1,0), so the reset won. The visible * result was that every button written as a link took the body's ink instead * of its own colour: the hero's call to action and all three pricing buttons * rendered #47574e on #17381f, which is 1.69:1 and effectively unreadable. * The