Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256@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.75rem; --text-label: 0.75rem;
/* ---- 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: 1rem; 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; }}