@reference "../../../app.css";
/*
* The landing page's tokens and base. The colours point at the app's tokens, so the page
* follows the site theme; the few drawn dark-first re-point under `@variant light`.
* Everything is scoped to `.landing`, so none of it reaches the app. The hairline / iso
* material behind the visuals lives in material.css.
*/
.landing {
/* ---- colour ---- */
--bg: var(--color-background-canvas);
--line: var(--color-border-strong);
--text: var(--color-foreground-default);
--text-3: var(--color-foreground-subtle);
--muted: var(--color-foreground-muted);
/* The dimmed aside of a heading (opaque, so the emboss keeps its strength — a translucent
fill would scale the shadows down with it). */
--fg-dim: var(--color-foreground-placeholder);
--ind-grid: var(--color-background-info-emphasis);
--accent-text: var(--color-foreground-link-info);
--danger: var(--color-foreground-danger);
--focus: var(--color-border-focus);
/* The thread: the line, the rail's knots and the CTA's knot. */
--thread: var(--color-background-info-emphasis);
--hairline: var(--color-border-default);
--emboss-inner-color: #000;
--emboss-inner: 0.24;
--emboss-drop-color: #000;
--emboss-drop: 0.5;
/* ---- type ---- */
--font-display: "TimelessSans", "TimelessSans Fallback", ui-sans-serif, system-ui, sans-serif;
--font-body: var(--font-display);
--font-mono: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Display and section titles step with the breakpoints, as drawn: phones and tablets share
a size, desktop has its own. */
--text-display: 3rem;
/* The CTA steps with the breakpoints, as drawn: 32 on phones, 48 on tablets, 72 on desktop. */
--text-cta: 3rem;
--text-section: 2rem;
--text-menu: 2rem;
--text-body: 0.9375rem;
--text-small: 0.8125rem;
--text-legal: 0.6875rem;
--text-label: 0.625rem;
/* ---- layout ----
One coordinate system for the thread: a rail container's left edge, the thread's x
inside it (--rail-x) and the content's start (--rail-lane). Narrow screens run the
container edge to edge; desktop centres the 1086px column the navbar draws. */
--page-w: 1086px;
--hero-w: 980px;
--content-w: 980px;
--gutter: 20px;
--rail-x: 19px;
--rail-lane: 48px;
--rail-end: 24px;
--section-y: 120px;
--nav-h: 66px;
/* Below the navbar, above a page's title (compare, legal). */
--page-top: 48px;
/* How far art may hang past the page column and still clear the gutter: none until the
screen is wider than the column and both gutters. */
--bleed: max(0px, (100vw - var(--page-w)) / 2 - var(--gutter));
/* ---- motion ---- */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@media (width >= 48rem) {
--text-cta: 3rem;
--rail-x: 30px;
--rail-lane: 64px;
--rail-end: 64px;
/* The gap between the hero's art and its copy. */
--hero-gap: clamp(40px, 7vw, 100px);
}
@media (width >= 64rem) {
--text-cta: 4.5rem;
--text-display: 4.5rem;
--text-section: 2.5rem;
--gutter: 24px;
/* Under the centre of the navbar's logo mark, which starts at the column's edge. */
--rail-x: 17.5px;
/* The content keeps the hero's 980px and ends where the navbar does. */
--rail-lane: calc(var(--page-w) - var(--content-w));
--rail-end: 0px;
--nav-h: 89px;
/* One rhythm from the features down to the CTA: 280px between every two sections. */
--section-y: 140px;
/* Where the hero's copy column starts, measured in a rail container's content box (as
a % of it, so use it in that box's grid or on its direct children): the hero and
the rail share a centre, and the rail's content starts half a lane right of it. */
--hero-split: calc(50% - var(--rail-lane) / 2 + var(--hero-gap) / 2);
}
@variant light {
/* The page in the brightest white, as the app's own pages are. */
--bg: var(--color-background-default);
/* Light-mode headings: both in the muted foreground — the lip 25%, the ledge 12%. */
--emboss-inner-color: var(--color-foreground-muted);
--emboss-inner: 0.25;
--emboss-drop-color: var(--color-foreground-muted);
--emboss-drop: 0.12;
}
}
/* ---- side grids ---- */
/* The hero's side grids, the full height of the page: 1px lines on
a 22px pitch, fading in from the outer edge. Dropped where the page narrows to one column. */
.landing .page-grid {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: 358px;
pointer-events: none;
--grid-line: var(--color-border-default);
background:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 0 0 / 22px 22px,
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / 22px 22px;
mask-image: linear-gradient(to left, rgb(0 0 0 / 73%), transparent 80%);
&.l {
left: -119px;
scale: -1 1;
}
&.r {
right: -108px;
}
@media (width <= 1100px) {
display: none;
}
}
/* ---- base ---- */
.landing {
position: relative;
isolation: isolate;
min-height: 100svh;
overflow-x: clip;
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
font-feature-settings: "cv11", "ss01";
-webkit-font-smoothing: antialiased;
}
@layer base {
.landing {
:where(h1, h2, h3, h4, p, ul, ol) {
margin: 0;
}
:where(a) {
color: inherit;
text-decoration: none;
}
:where(button) {
font: inherit;
color: inherit;
}
:where(:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
::selection {
background: color-mix(in srgb, var(--ind-grid) 45%, transparent);
color: var(--text);
}
}
}
/* ---- type ---- */
.landing {
/* Display headings: TimelessSans over the emboss (EmbossFilter.svelte). The aside is dimmed;
`.l-heading-break` puts it on its own line. */
.l-heading {
font-family: var(--font-display);
font-feature-settings: normal;
font-weight: 420;
letter-spacing: -0.04em;
color: var(--text);
}
.l-heading-display {
font-size: var(--text-display);
line-height: 1;
}
.l-heading-section {
font-size: var(--text-section);
line-height: 1.1;
}
.l-heading :where(.solid, .dim) {
filter: url(#l-emboss);
}
.l-heading .dim {
color: var(--fg-dim);
}
.l-heading-break :where(.solid, .dim) {
display: block;
}
.l-body {
font-size: var(--text-body);
font-weight: 480;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--muted);
}
.l-label {
font-family: var(--font-mono);
font-size: var(--text-label);
line-height: 1.6;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--muted);
}
/* A trimmed line box: its text sits flush with the box (cap to baseline). */
.l-trim {
text-box: trim-both cap alphabetic;
}
.l-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.landing *,
.landing *::before,
.landing *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}