/** * Shared page styles for every experiment. * * Each idea themes itself by overriding the custom properties in :root via the * `theme` block in its config.yaml (rendered into the page by base.html). That * keeps one stylesheet to maintain while letting each landing page read as its * own product — important, because a visitor who senses a template farm * converts worse, which would corrupt the demand signal we are trying to read. * * Overridable per idea: --accent, --accent-ink, --ink, --surface, --surface-alt, * --display-font, --body-font, --radius. */ :root { /* Palette. Deliberately not the default AI cream-and-terracotta: a cool slate ground with a single saturated accent, so the CTA is the only loud thing on the page. */ --ink: #14181f; --ink-soft: #5b6472; /* 5.0:1 on white and 4.5:1 on the pathway ground, so it clears WCAG AA everywhere it is used. The previous #8d96a4 was 2.99:1 — a real failure, and it carried the CTA note, form hints and the footer, which is exactly the small text people already struggle with. */ --ink-faint: #66707f; --surface: #ffffff; --surface-alt: #f5f7f9; --line: #e3e8ed; --accent: #1f6feb; --accent-ink: #ffffff; --accent-soft: #eaf1fe; --danger: #b42318; --display-font: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif; --body-font: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif; --radius: 10px; --radius-lg: 16px; /* A single spacing scale keeps rhythm consistent across ideas whose copy length varies wildly. */ --s1: 0.5rem; --s2: 0.875rem; --s3: 1.25rem; --s4: 2rem; --s5: 3rem; --s6: 4.5rem; --s7: 7rem; /* ONE container width for the whole page. Every section uses --wrap and nothing overrides it, so all content shares a single left edge — the hero, the cards, the form and the FAQ line up down the page. (Earlier revisions gave the hero, pathway and FAQ their own narrower caps, which produced four different left edges and read as broken.) --measure caps running prose at a readable line length WITHOUT moving it: it constrains width only, never centres. */ --measure: 46rem; --wrap: 78rem; /* Standalone prose pages (privacy, thanks) have no cards or form to line up with, so they narrow the container itself rather than capping each block. On the landing page every section uses --wrap so the left edge is shared; --measure does the line-length work there. */ --wrap-narrow: 54rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Set on , not just : without it the root inherits the UA default (Times New Roman), which shows up in font audits and in any element that escapes the body cascade. */ font-family: var(--body-font); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--body-font); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--display-font); line-height: 1.15; letter-spacing: -0.021em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: var(--accent); } img { max-width: 100%; height: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Visible keyboard focus everywhere — the form is the product, and it must be completable without a mouse. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ── Layout ───────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; /* Generous gutters at desktop so content isn't glued to the viewport edge on wide screens, tight ones on mobile where every pixel counts. */ padding-inline: clamp(var(--s3), 5vw, var(--s5)); } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding-block: var(--s6); /* Clear the sticky header when an anchor link jumps here, otherwise the heading lands underneath it. */ scroll-margin-top: 5.5rem; } .section--tint { background: var(--surface-alt); } /* Dark band. Rather than restyling each child, this re-points the surface and ink tokens for its whole subtree, so cards, borders, list markers and body copy all invert with one rule and any new component inherits it for free. Two calibrations that matter: the text is off-white (#e8edf3) not pure white, which is easier to read at length, and the accent is lightened, because a mid-tone accent tuned for white loses contrast on a dark ground. */ .section--dark { --surface: #151b24; --surface-alt: #1b222d; --ink: #f2f5f8; --ink-soft: #a8b3c2; --ink-faint: #8794a5; --line: #2c3644; --accent: #38bdf8; --accent-soft: #17303f; --accent-ink: #0b1118; background: #151b24; color: var(--ink); } .section--dark .section__heading, .section--dark .card__heading, .section--dark .steps__heading { color: var(--ink); } /* On the dark ground a bordered card disappears; a slightly raised surface reads as a card without needing a heavy outline. */ .section--dark .card { background: var(--surface-alt); border-color: var(--line); } .section--center { text-align: center; } .section__heading { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: var(--s3); } .section__lede { max-width: var(--measure); color: var(--ink-soft); font-size: 1.125rem; margin-bottom: var(--s3); } .section--center .section__lede { margin-inline: auto; } /* ── Header ───────────────────────────────────────────────────────────── */ /* Sticky, with a translucent ground so content scrolling under it stays legible. The CTA is the only thing on the page that must always be reachable, which is what earns the sticky treatment. */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: var(--s3); min-height: 4.5rem; } .site-header__brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--display-font); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } .site-header__logo { display: block; width: 30px; height: 30px; border-radius: 7px; } /* Anchor links to the sections below. On a one-page site these double as a contents list, so a visitor can see what is on offer without scrolling. */ .site-nav { display: none; align-items: center; gap: var(--s4); margin-inline: auto; } .site-nav__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; text-decoration: none; padding-block: 0.5rem; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .site-nav__link:hover { color: var(--ink); border-bottom-color: var(--accent); } .site-header__cta { margin-left: auto; } /* Below this the links would crowd the CTA, which matters more. */ @media (min-width: 56rem) { .site-nav { display: flex; } .site-header__cta { margin-left: 0; } } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { padding-block: clamp(var(--s5), 9vw, var(--s7)) var(--s6); } /* Two columns once there is room for the visual beside the copy. Below that it stacks, copy first, because on a phone the headline has to do the work. */ .hero__inner { display: grid; gap: var(--s5); align-items: center; } @media (min-width: 62rem) { .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: var(--s6); } } /* ── Hero demo panel ──────────────────────────────────────────────────── */ /* Styled to read as Claude specifically, not a generic terminal: the warm parchment ground, the clay accent and the serif display face are what make the panel recognisable at a glance. That recognition IS the point, because the pitch is "this runs in the AI you already have" and a cold blue console communicated the opposite. Colours are held locally rather than as page tokens so a dark section or a differently-themed idea cannot alter them. */ .demo { --claude-bg: #f5f4ee; --claude-panel: #ffffff; --claude-ink: #2b2926; --claude-ink-soft: #5c584f; /* Darkened from the first pass: the lighter warm greys read right but came in at 3.5:1, under WCAG AA. These clear 4.9:1 on the panel ground and still sit in the same warm family. */ --claude-ink-faint: #6f6960; --claude-line: #e3e0d6; --claude-accent: #ad4f2d; background: var(--claude-bg); border: 1px solid var(--claude-line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(43, 41, 38, 0.05), 0 20px 50px rgba(43, 41, 38, 0.13); } .demo__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; background: #efede4; border-bottom: 1px solid var(--claude-line); } .demo__dot { width: 9px; height: 9px; border-radius: 50%; background: #d6d2c6; } /* Serif, because Claude's own wordmark is set in one. It is the single strongest recognition cue in the panel. */ .demo__title { margin-left: 0.5rem; color: var(--claude-ink); font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; } .demo__body { padding: 1.25rem 1.35rem 1.4rem; } /* Sentence case, not the uppercase tracking of a log viewer: Claude labels its turns like a conversation. */ .demo__label { color: var(--claude-ink-faint); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 0.35rem; } .demo__label--answer { margin-top: var(--s3); color: var(--claude-accent); } /* The visitor's question sits in a bubble; the answer runs as plain prose. That asymmetry is how Claude actually renders a conversation. */ .demo__ask { display: inline-block; background: var(--claude-panel); border: 1px solid var(--claude-line); border-radius: 12px; padding: 0.65rem 0.85rem; color: var(--claude-ink); font-size: 0.95rem; line-height: 1.5; } .demo__answer { color: var(--claude-ink); font-size: 0.95rem; line-height: 1.62; } /* Cited records. Left rule in the clay accent, echoing how Claude sets off a quoted or referenced block. */ .demo__records { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 0.5rem; } .demo__record { display: grid; gap: 0.15rem; padding: 0.65rem 0.8rem; background: var(--claude-panel); border: 1px solid var(--claude-line); border-left: 3px solid var(--claude-accent); border-radius: 8px; } .demo__record-title { color: var(--claude-ink); font-size: 0.875rem; font-weight: 600; } .demo__record-meta { color: var(--claude-ink-soft); font-size: 0.82rem; font-variant-numeric: tabular-nums; } .demo__source { color: var(--claude-ink-faint); font-size: 0.73rem; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } .demo__note { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--claude-line); color: var(--claude-ink-faint); font-size: 0.76rem; } /* The heading and sub-copy constrain their own line length below; the hero column itself is set by the grid above. */ .hero__eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 0.35rem 0.7rem; border-radius: 100px; margin-bottom: var(--s3); } .hero__heading { /* Slightly smaller ceiling than before: the hero is now a column beside the demo panel rather than the full page width. */ font-size: clamp(2.1rem, 4.6vw, 3.15rem); font-weight: 700; max-width: 18ch; } .hero__sub { margin-top: var(--s3); font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-soft); max-width: var(--measure); } .hero__actions { margin-top: var(--s4); } .hero__cta-note { margin-top: var(--s2); /* Bumped from 0.9rem. This line sets the expectation for the whole conversion ("four questions, under a minute") and it was the smallest text in the hero, which is backwards. */ font-size: 0.95rem; color: var(--ink-faint); } .hero__trust { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); list-style: none; margin: var(--s5) 0 0; padding: 0; font-size: 0.9rem; color: var(--ink-soft); } .hero__trust li { position: relative; padding-left: 1.1rem; } /* A tick rather than a bullet: these are claims, not a list. */ .hero__trust li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.28rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-block; font-family: var(--body-font); font-size: 1rem; font-weight: 600; line-height: 1; padding: 0.85rem 1.4rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { filter: brightness(0.93); } .btn--primary:disabled { opacity: 0.6; cursor: default; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink-faint); } .btn--lg { font-size: 1.0625rem; padding: 1.05rem 1.9rem; } .btn--sm { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; padding: 0.65rem 1.1rem; } /* ── Content blocks ───────────────────────────────────────────────────── */ .painlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); max-width: var(--measure); } .painlist li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); } .painlist li::before { content: "—"; position: absolute; left: 0; color: var(--accent); } /* Two columns at desktop rather than auto-fit. auto-fit packs as many as will fit, which leaves an orphan on the second row for any even count that isn't a multiple of three — four cards became 3+1. Two columns is stable for the 2-6 cards an idea realistically has, and gives the body copy room to breathe. */ .cards { display: grid; grid-template-columns: 1fr; gap: var(--s3); } @media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } /* An odd final card spans the full width instead of sitting half-empty. */ .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s3); } .section--tint .card { background: var(--surface); } .card__icon { display: block; font-size: 1.5rem; margin-bottom: var(--s1); } .card__heading { font-size: 1.1rem; margin-bottom: var(--s1); } .card__body { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } /* Numbered because these genuinely are a sequence — the order is the meaning. */ .steps__item { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s3); align-items: start; } /* Breathing room between steps — they are separate moments in a sequence, not rows in a table. */ .steps { gap: var(--s4); } .steps__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.95rem; } .steps__heading { /* Same size as .card__heading: both are h3 doing the same job. 1.05 vs 1.1 was an arbitrary difference that put two values on the type scale where one belongs. */ font-size: 1.1rem; margin-bottom: 0.15rem; } .steps__body { color: var(--ink-soft); font-size: 0.975rem; } /* A statement of the thesis, not a testimonial. With no byline the quotation marks and citation bar would be misleading, so this is set as a pull-quote: larger type, an accent rule above it, no speech marks. */ /* ── Coverage ─────────────────────────────────────────────────────────── */ /* CSS columns rather than grid: the region lists are wildly different lengths (Australia has nine portals, New Zealand one), and a grid row is as tall as its tallest cell, so the short regions left a large hole and pushed the last one onto its own row. Columns let each region flow to its natural height. */ .coverage { columns: 3 13rem; column-gap: var(--s4); margin-top: var(--s4); } .coverage__region { /* Keep a region's heading with its list rather than splitting mid-column. */ break-inside: avoid; margin-bottom: var(--s4); } /* Labels the list as examples rather than the boundary of what we cover. */ .coverage__subheading { margin-top: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); color: var(--ink-faint); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .coverage__name { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); padding-bottom: var(--s1); margin-bottom: var(--s2); border-bottom: 1px solid var(--line); } .coverage__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .coverage__portal { color: var(--ink-soft); font-size: 0.925rem; line-height: 1.4; } .coverage__note { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); max-width: var(--measure); color: var(--ink-faint); font-size: 0.875rem; } /* ── Quote ────────────────────────────────────────────────────────────── */ /* Keeps the page's shared left edge. Width is capped on .quote__text, not here: `ch` on the container resolves against the BODY font size, while the quote renders at up to 1.9rem, so a 30ch container produced a line barely a dozen words wide and left the quote as a tall ribbon in a sea of white. The cap belongs on the element whose font size it is measuring. */ .quote { margin: 0; padding-left: var(--s4); border-left: 3px solid var(--accent); } .quote__text { font-family: var(--display-font); /* 26em at the rendered size: ~55 characters, a proper display measure. */ max-width: 26em; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.36; letter-spacing: -0.015em; text-wrap: balance; } .quote__by { margin-top: var(--s2); color: var(--ink-faint); font-size: 0.925rem; } /* Constrain the whole list, not just the answers. The divider rules are drawn on the questions, so leaving the list full-width ran each rule far past the text it separates and left a long empty tail on the right. A rule should frame the content, not the container. */ .faq { margin: 0; max-width: var(--measure); } .faq__q { font-weight: 600; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); } .faq__a { margin: var(--s1) 0 0; color: var(--ink-soft); /* Answers are the longest prose on the page; without a cap they run the full container width and become genuinely hard to read. */ max-width: var(--measure); } /* ── Prose (legal pages) ──────────────────────────────────────────────── */ .prose h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: var(--s3); } /* A heading belongs to the text BELOW it, so the gap above must be clearly larger than the gap below. Legal pages are long; that asymmetry is what lets someone scan for the section they want. */ .prose h2 { font-size: 1.2rem; margin-top: var(--s5); margin-bottom: var(--s2); } .prose p { color: var(--ink-soft); margin-bottom: var(--s2); max-width: var(--measure); } /* ── Generated SEO pages ──────────────────────────────────────────────── */ /* These share the landing page's shell but have no hero visual: the demo panel belongs to the pitch, and repeating it on 251 pages would make the set read as one page duplicated. Copy carries these pages instead. */ .hero--seo { padding-block: clamp(var(--s5), 7vw, var(--s6)) var(--s5); } /* Single column at every width, overriding the two-column rule that kicks in at 62rem for the landing hero. */ .hero__inner--single { grid-template-columns: minmax(0, 1fr); } @media (min-width: 62rem) { .hero__inner--single { grid-template-columns: minmax(0, 1fr); } } /* Body copy on a generated page is the reason a visitor stays. Capping the measure keeps it readable, but a single 736px column inside a 1248px wrap left the right half of the page visibly empty, which reads as a broken layout rather than a deliberate one. Two columns at desktop use the space and keep each line short. */ .page-seo .prose p { margin-bottom: var(--s3); } @media (min-width: 62rem) { .page-seo .prose { columns: 2; column-gap: var(--s5); /* The cap belongs to the container now; per-paragraph caps would fight the column widths and reintroduce the ragged right edge. */ max-width: none; } .page-seo .prose p { max-width: none; /* Never split a paragraph across the column break. */ break-inside: avoid; } .page-seo .prose p:first-child { margin-top: 0; } } .section__heading--sm { font-size: clamp(1.1rem, 2vw, 1.3rem); margin-bottom: var(--s2); } /* Internal links to sibling pages. Two columns of short links where there is room, so a block of six does not push the footer off a phone screen. */ .linklist { list-style: none; display: grid; gap: var(--s1) var(--s4); max-width: var(--measure); } @media (min-width: 44rem) { .linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .linklist a { color: var(--ink-soft); text-decoration-color: var(--line); text-underline-offset: 0.2em; } .linklist a:hover { color: var(--accent); text-decoration-color: currentColor; } /* ── Thanks page ──────────────────────────────────────────────────────── */ .thanks__prompt { margin: var(--s4) 0 var(--s2); color: var(--ink-soft); } /* ── Footer ───────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--line); background: var(--surface-alt); padding-block: var(--s5) var(--s3); margin-top: 0; } .site-footer__inner { display: grid; gap: var(--s4); padding-bottom: var(--s4); } @media (min-width: 46rem) { .site-footer__inner { /* Brand block gets the wider column; link groups sit beside it. */ grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s5); } } .site-footer__wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--display-font); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); } .site-footer__blurb { margin-top: var(--s2); max-width: 26em; color: var(--ink-soft); font-size: 0.925rem; } .site-footer__heading { font-family: var(--body-font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s2); } .site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; } .site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0; color: var(--ink-soft); font-size: 0.925rem; text-decoration: none; } .site-footer__links a:hover { color: var(--accent); text-decoration: underline; } .site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); } .site-footer__legal { color: var(--ink-faint); font-size: 0.875rem; } .site-footer__sep { padding-inline: 0.5rem; opacity: 0.6; } /* Padded to a usable tap target. These were 16px tall, well under the 44px minimum, and the privacy link is the one a cautious visitor reaches for on a phone right before deciding whether to hand over their email. */ .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0.15rem; color: var(--ink-faint); } /* A breath between two heavy sections, not a full stop. Half the vertical padding of a normal section so the quote reads as punctuation in the page's rhythm rather than another block competing for attention. */ .section--pause { padding-block: var(--s5); } /* Date line on the legal pages. Small and quiet, but it has to be visible: "last updated" is the first thing anyone checks on a policy. */ .prose__meta { /* Sits under the intro paragraph, so it needs its own space rather than the negative pull it had, which jammed it against the text above. */ margin-top: var(--s2); margin-bottom: var(--s5); color: var(--ink-faint); font-size: 0.875rem; } .prose ul { max-width: var(--measure); color: var(--ink-soft); margin-bottom: var(--s2); padding-left: 1.15rem; } .prose li { margin-bottom: 0.4rem; } /* The legal and thank-you pages get branding and a way home, but not the landing page's sticky behaviour: its anchor links point at sections that do not exist here, and a sticky bar over a long document just costs reading space. */ .site-header--simple { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }