/* dRdN — the estate's two-mode palette. * * Every colour in this file is declared once, in the token blocks below, and * referenced by custom property everywhere else. No hex literal appears at a * usage site: that is the CSS analogue of the constants rule the Go side * follows, and it is what makes the dark mode a six-line override rather than * a second stylesheet. * * Light is the base. Dark redefines only the tokens, never the rules. */ :root { --surface: #ffffff; --surface-alt: #f5f5f7; --ink: #1d1d1f; --ink-muted: #6e6e73; --hairline: #d2d2d7; --accent: #0071e3; --accent-hover: #0077ed; --on-accent: #ffffff; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --measure: 34rem; --page-max: 62rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); --rhythm: clamp(3.5rem, 9vw, 6.5rem); --radius: 0.75rem; --radius-pill: 980px; } /* Dark has three states, not two. The default is the system scheme; an * explicit choice stamps data-theme on and must win in BOTH directions, * which is why the media query excludes data-theme="light" and the same tokens * are declared again for data-theme="dark". A palette declared only inside the * media query would leave the toggle unable to force dark on a light machine. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #000000; --surface-alt: #1c1c1e; --ink: #f5f5f7; --ink-muted: #a1a1a6; --hairline: #48484a; --accent: #0a84ff; --accent-hover: #409cff; --on-accent: #ffffff; } } :root[data-theme="dark"] { --surface: #000000; --surface-alt: #1c1c1e; --ink: #f5f5f7; --ink-muted: #a1a1a6; --hairline: #48484a; --accent: #0a84ff; --accent-hover: #409cff; --on-accent: #ffffff; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: var(--rhythm); } section + section { border-top: 1px solid var(--hairline); } h1, h2, h3 { margin: 0; letter-spacing: -0.022em; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } /* Hero ------------------------------------------------------------------ */ .hero { display: grid; gap: 1.75rem; justify-items: start; padding-block: clamp(4rem, 11vw, 8rem); } .hero__lockup { width: min(19rem, 70vw); height: auto; } .hero__headline { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); font-weight: 650; line-height: 1.06; } .hero__subline { max-width: var(--measure); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); color: var(--ink-muted); } /* The revenue curve. The only saturated element on the page: the accent is * spent here and on the button, and nowhere else. */ .curve { width: 100%; max-width: 30rem; height: auto; margin-top: 0.5rem; overflow: visible; } .curve__axis { stroke: var(--hairline); stroke-width: 1; } .curve__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; } .curve__drop { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 4; } .curve__peak { fill: var(--accent); } .curve__label { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.01em; } /* How it works ---------------------------------------------------------- */ .section__heading { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 640; margin-bottom: 2.25rem; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: step; } .step { background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.5rem; } .step__number { counter-increment: step; display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.75rem; } .step__number::before { content: "Step " counter(step); } .step__title { font-size: 1.0625rem; font-weight: 640; margin-bottom: 0.375rem; } .step__body { color: var(--ink-muted); font-size: 0.9375rem; } /* Offer ----------------------------------------------------------------- */ .offer__body { max-width: var(--measure); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); margin-bottom: 2rem; } .cta { display: inline-block; padding: 0.8125rem 1.75rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 1.0625rem; font-weight: 600; text-decoration: none; } .cta:hover { background: var(--accent-hover); } .cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Case studies ---------------------------------------------------------- */ .studies { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; } .study { background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.5rem; } .study__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.625rem; margin-bottom: 0.25rem; } .study__name { font-size: 1.0625rem; font-weight: 640; } /* Fiction is labelled as fiction. The badge is muted rather than loud, but * it is never optional: see the is_demo column. */ .study__badge { padding: 0.125rem 0.5rem; border: 1px solid var(--hairline); border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .study__meta { color: var(--ink-muted); font-size: 0.8125rem; letter-spacing: 0.01em; margin-bottom: 1rem; } .study__figure { display: flex; align-items: baseline; gap: 0.5rem; color: var(--ink-muted); font-size: 0.875rem; } .study__n { color: var(--accent); font-size: 2.25rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1; } .study__cost { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 550; } .study__narrative { margin-top: 0.875rem; color: var(--ink-muted); font-size: 0.9375rem; } .studies__empty { color: var(--ink-muted); max-width: var(--measure); } /* Intake form ----------------------------------------------------------- */ .hero--compact { padding-block: clamp(2.5rem, 6vw, 4rem); gap: 1.25rem; } .hero__home { display: inline-block; line-height: 0; } .hero__headline--sm { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); } .form { display: grid; gap: 1.5rem; max-width: var(--measure); } .field { display: grid; gap: 0.4375rem; } .field__label { font-size: 0.9375rem; font-weight: 600; } .field__input { width: 100%; padding: 0.6875rem 0.875rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface-alt); color: var(--ink); font-family: inherit; font-size: 1rem; } .field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .field__input--file { padding: 0.625rem; font-size: 0.9375rem; } .field__hint { color: var(--ink-muted); font-size: 0.8125rem; } .notice { max-width: var(--measure); margin-bottom: 2rem; padding: 0.875rem 1.125rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface-alt); font-size: 0.9375rem; } .notice--error { border-left: 3px solid var(--accent); } /* The intake's unavailable state. Muted rather than alarming: nothing has gone wrong for the visitor, and the notice still carries a way forward. */ .notice--muted { border-left: 3px solid var(--hairline); } .notice__title { font-weight: 600; margin-bottom: 0.375rem; } .notice__body { color: var(--ink-muted); } .reference__label { color: var(--ink-muted); font-size: 0.875rem; margin-bottom: 0.375rem; } .reference__id code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 1.0625rem; color: var(--accent); overflow-wrap: anywhere; } /* Topnav ----------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2; padding: 0.625rem 1rem; background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius); } .skip-link:focus { left: var(--gutter); top: 0.5rem; } .site-nav { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--hairline); } .site-nav__inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); padding-block: 0.625rem; } .site-nav__brand { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: auto; text-decoration: none; color: var(--ink); } /* Both lockups are in the document; the palette in force shows exactly one. This is what makes the swap follow the CHOSEN theme rather than only the system one — an is opaque to the page's custom properties, so the file has to be picked rather than recoloured. */ .lockup { display: block; width: auto; height: 1.75rem; } .lockup--dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lockup--light { display: none; } :root:not([data-theme="light"]) .lockup--dark { display: block; } } :root[data-theme="dark"] .lockup--light { display: none; } :root[data-theme="dark"] .lockup--dark { display: block; } .site-nav__wordmark { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); } .nav-menu { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .nav-link { color: var(--ink-muted); text-decoration: none; font-size: 0.9375rem; } .nav-link:hover, .nav-link:focus-visible { color: var(--ink); } /* The collapse is CSS only: a visually hidden checkbox drives a sibling. */ .nav-toggle__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 0.25rem; width: 2.5rem; height: 2.5rem; padding: 0.5rem; border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer; } .nav-toggle__bar { display: block; height: 2px; border-radius: 2px; background: var(--ink); } .nav-toggle__input:focus-visible + .nav-toggle { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 40rem) { .nav-toggle { display: flex; } .nav-menu { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding-block: 0.5rem; } .nav-toggle__input:checked ~ .nav-menu { display: flex; } .nav-item { width: 100%; } .nav-link { display: block; width: 100%; padding-block: 0.5rem; } } /* Theme toggle ----------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); cursor: pointer; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--ink); } .theme-toggle[hidden] { display: none; } .theme-toggle__icon { width: 1.125rem; height: 1.125rem; fill: currentColor; } .theme-toggle__rays { stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* Show the icon for the theme you would switch TO, in all three states. */ .theme-toggle__icon--sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: block; } :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; } } :root[data-theme="dark"] .theme-toggle__icon--sun { display: block; } :root[data-theme="dark"] .theme-toggle__icon--moon { display: none; } /* Footer ----------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--hairline); padding-block: 2.5rem; color: var(--ink-muted); font-size: 0.875rem; } .site-footer__built { color: var(--ink); margin-bottom: 0.25rem; }