/* * dotpath.app — the public pages. * * Hand-written, no build step: three documents that change a few times a year, * and a toolchain for them would be more machine than content. * * The whole page is built out of one physical object: the material test tile. * A grid of squares burnt at rising power and falling speed, numbered along two * axes, on a piece of birch. Every laser operator makes one on the first day, * and this app generates it (`core/gcode/testGrid.ts`). So the palette is birch * and scorch rather than the neon-on-black every CAM tool wears, the structure * is a visible ruled grid, and the imagery is drawn the way the machine draws: * halftone cells, toolpaths, rapids. * * Colours are OKLCH and every neutral is tinted towards the ember hue. Pure * black and pure white are the two colours a burnt surface never contains. */ /* ── type ─────────────────────────────────────────────────────────────────── */ /* Archivo carries the words: an industrial grotesque with real weight at the top of its range, the face of a machine plate rather than a magazine. Azeret Mono carries numbers and machine strings, and nothing else — in this product a number is never localised and never rounded for looks, so it gets a face that says so. Mono for prose would be costume; mono for a feed rate is meaning. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/archivo-latin-wght.woff2') format('woff2'); } @font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/azeret-latin-wght.woff2') format('woff2'); } /* ── the two grounds ──────────────────────────────────────────────────────── */ /* * `system` is resolved in the script and never reaches here: what lands on * is always an explicit `data-theme`. It is the rule the app itself * follows, and for the same reason — a palette split between an attribute and a * `prefers-color-scheme` query is two definitions of every colour, and they * diverge at the first one someone adds. * * Light is the primary reading. A laser writes dark on light, and the material * is the pale thing: this page is the sheet, not the screen. */ :root, :root[data-theme='light'] { color-scheme: light; --paper: oklch(0.972 0.008 79); --paper-2: oklch(0.941 0.012 79); --rule: oklch(0.855 0.016 74); --rule-strong: oklch(0.72 0.024 70); --ink: oklch(0.235 0.021 58); --ink-2: oklch(0.475 0.023 62); --ember: oklch(0.555 0.164 47); --ember-quiet: oklch(0.72 0.108 55); --on-ember: oklch(0.975 0.014 80); --char: oklch(0.235 0.021 58); --on-char: oklch(0.955 0.012 80); --lift: 0.96; } :root[data-theme='dark'] { color-scheme: dark; /* Warm char, not blue-black: the dark here is a scorched surface, and a cold grey ground would put the page back in the neon-CAM lane it came out of. */ --paper: oklch(0.196 0.014 58); --paper-2: oklch(0.253 0.017 58); --rule: oklch(0.343 0.019 60); --rule-strong: oklch(0.46 0.024 62); --ink: oklch(0.936 0.011 82); --ink-2: oklch(0.706 0.019 74); --ember: oklch(0.735 0.152 57); --ember-quiet: oklch(0.56 0.115 50); --on-ember: oklch(0.19 0.03 55); --char: oklch(0.135 0.014 55); --on-char: oklch(0.93 0.012 80); --lift: 1.08; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-size: 1rem; line-height: 1.6; font-synthesis: none; -webkit-font-smoothing: antialiased; } ::selection { background: var(--ember); color: var(--on-ember); } :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; } /* ── the ruled grid the page is built on ──────────────────────────────────── */ .sheet { width: min(100% - 2.5rem, 74rem); margin-inline: auto; } @media (min-width: 60rem) { .sheet { width: min(100% - 5rem, 74rem); } } .band { border-top: 1px solid var(--rule); } .band > .sheet { padding-block: clamp(3.5rem, 8vw, 7rem); } /* ── header ───────────────────────────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); } header .sheet { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; margin-right: auto; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.035em; } .brand svg { display: block; color: var(--ember); } /* * On a narrow screen the header's call to action wraps onto a line of its own * and doubles the height of a bar that is stuck to the top of every scroll. * The hero repeats it two centimetres below, so nothing is lost by dropping it. */ @media (max-width: 30rem) { header .btn { display: none; } } /* ── controls ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.15rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: transparent; color: var(--ink); font: inherit; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1); } .btn:hover { background: var(--paper-2); } .btn-ember { background: var(--ember); border-color: var(--ember); color: var(--on-ember); } .btn-ember:hover { background: var(--ember); filter: brightness(var(--lift)); } .btn-lg { padding: 0.8rem 1.5rem; font-size: 1.0625rem; } /* * Three states, not a toggle: System is a real answer and the one most people * want, so it is on the control rather than hidden behind a long press. The * same three the app offers, spelled the same way. */ .themer { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 2px; overflow: hidden; } .themer button { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1); } .themer button + button { border-left: 1px solid var(--rule-strong); } .themer button:hover { background: var(--paper-2); color: var(--ink); } .themer button[aria-checked='true'] { background: var(--ink); color: var(--paper); } .themer svg { display: block; width: 1rem; height: 1rem; } /* ── mono is for numbers and machine strings, never for prose ─────────────── */ .mono, code, figcaption, .axis { font-family: 'Azeret Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } code { font-size: 0.9em; font-weight: 500; color: var(--ember); background: color-mix(in oklab, var(--ember) 10%, transparent); padding: 0.1em 0.35em; border-radius: 2px; } /* ── hero ─────────────────────────────────────────────────────────────────── */ .hero > .sheet { padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4rem); } h1 { margin: 0 0 1.4rem; font-size: clamp(2.45rem, 7.2vw, 5.5rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 800; max-width: 15ch; text-wrap: balance; } h1 em { font-style: normal; color: var(--ember); } .lede { margin: 0 0 2.25rem; max-width: 54ch; font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); } .actions { display: flex; align-items: center; gap: 0.9rem 1.25rem; flex-wrap: wrap; } .fineprint { margin: 0; font-size: 0.8125rem; color: var(--ink-2); letter-spacing: 0.01em; } /* ── figures ──────────────────────────────────────────────────────────────── */ /* * The screens live in a zero-sized at the top of the document so every * figure can reference them, and it is taken out of flow so it cannot claim a * line box of its own. */ .screens { position: absolute; /* * The dots take their colour from here and not from the figure that uses * them: `currentColor` inside a resolves against the pattern's own * inherited colour, never against the element the fill is applied to. It is * the one thing about patterns that catches everybody once, and the symptom * is a drawing in the body text colour that looks deliberate. */ color: var(--ember); } figure { margin: 0; } .hero-figure { margin-top: clamp(2.5rem, 6vw, 4rem); } /* * Colour inside a figure comes from a class, never from `fill="var(--…)"` on * the element. A presentation attribute is a CSS declaration of the lowest * priority, and whether custom-property substitution reaches one is not * something worth betting a whole drawing on. */ .fig-ember { color: var(--ember); } .fig-cut { stroke: var(--ember); } .fig-lead { stroke: var(--ember-quiet); } .fig-rapid { stroke: var(--ink-2); opacity: 0.85; } .fig-origin { stroke: var(--ember); stroke-width: 1.2; } /* * The source ramp is grey and the dots below it are ember: what goes in is a * photograph, what comes out is a burn. Drawing both in the same colour made * the pair look like one gradient shown twice, which is the opposite of the * point. */ .ramp-start { stop-color: var(--ink); stop-opacity: 0.04; } .ramp-end { stop-color: var(--ink); stop-opacity: 0.92; } figure svg { display: block; width: 100%; height: auto; } .plate { border: 1px solid var(--rule); background: var(--paper-2); padding: clamp(0.75rem, 2.5vw, 1.5rem); } figcaption { margin-top: 0.9rem; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-2); text-transform: none; } .axis { font-size: 8px; font-weight: 500; fill: var(--ink-2); } .tile-grid { stroke: var(--rule-strong); stroke-width: 0.5; fill: none; } /* ── headings and prose ───────────────────────────────────────────────────── */ h2 { margin: 0 0 1rem; font-size: clamp(1.75rem, 3.6vw, 2.65rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 750; max-width: 18ch; text-wrap: balance; } h3 { margin: 0 0 0.35rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; } p { max-width: 68ch; } .band p { color: var(--ink-2); } .intro { font-size: clamp(1rem, 1.7vw, 1.1875rem); color: var(--ink-2); max-width: 58ch; margin: 0; } .intro-tight { margin-bottom: 1.5rem; } /* ── the split: a figure beside its argument ──────────────────────────────── */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (min-width: 56rem) { .split { grid-template-columns: 1.05fr 1fr; } .split.flip > figure { order: 2; } } /* * A heading held to the left with its argument beside it. The bands that are * only prose would otherwise leave half a wide screen empty, and a 68ch column * floating alone in 74rem reads as an unfinished page rather than a quiet one. * The safety notice is the same shape, which is what makes it a system. */ .stated { display: grid; gap: 1rem 3rem; } @media (min-width: 52rem) { .stated { grid-template-columns: 17rem 1fr; align-items: start; } } .stated h2 { margin: 0; font-size: clamp(1.6rem, 2.9vw, 2.25rem); max-width: 14ch; } .stated p:first-child { margin-top: 0; } .stated p:last-child { margin-bottom: 0; } /* ── the capability sheet: a ruled list, not a deck of cards ──────────────── */ .spec { margin: 2.75rem 0 0; border-top: 1px solid var(--rule); } .spec > div { display: grid; gap: 0.15rem 2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--rule); } @media (min-width: 48rem) { .spec > div { grid-template-columns: 3.5rem 15rem 1fr; align-items: baseline; } } .spec .cell { font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 500; color: var(--ember); letter-spacing: 0.02em; } .spec p { margin: 0; font-size: 0.9375rem; } /* ── the safety notice ────────────────────────────────────────────────────── */ .safety { background: var(--char); color: var(--on-char); } .safety > .sheet { padding-block: clamp(2.25rem, 5vw, 3.25rem); display: grid; gap: 1.25rem 3rem; } @media (min-width: 52rem) { .safety > .sheet { grid-template-columns: 16rem 1fr; align-items: start; } } .safety h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--on-char); letter-spacing: -0.03em; } .safety p { margin: 0; color: color-mix(in oklab, var(--on-char) 78%, transparent); max-width: 60ch; } .safety strong { color: var(--ember-quiet); font-weight: 650; } /* ── the browser table ────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; margin-top: 2.25rem; text-align: left; } caption { caption-side: top; text-align: left; padding-bottom: 0.75rem; font-size: 0.8125rem; color: var(--ink-2); } th, td { padding: 0.95rem 1.25rem 0.95rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 0.9375rem; } thead th { padding-top: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom-color: var(--rule-strong); } tbody th { font-weight: 700; white-space: nowrap; width: 1%; } td { color: var(--ink-2); } .verdict { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .verdict::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; } .verdict-yes { color: var(--ember); } .verdict-part { color: var(--ink-2); } .verdict-no { color: var(--ink-2); opacity: 0.65; } /* * On a phone the table stops being a table. Two of its columns are `nowrap` by * necessity, and their combined minimum was wider than a 390px viewport, which * does not clip a table: it widens the whole document, and every other section * on the page starts overflowing for a reason nowhere near where it looks. * Stacking each row removes the minimum instead of hiding it. */ @media (max-width: 40rem) { thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } table, tbody, tbody tr, tbody th, tbody td { display: block; width: auto; } tbody tr { padding-block: 1rem; border-bottom: 1px solid var(--rule); } tbody th, tbody td { padding: 0.1rem 0; border: 0; white-space: normal; } } /* ── closing call ─────────────────────────────────────────────────────────── */ .closer { background: var(--paper-2); } .closer > .sheet { display: grid; gap: 1.75rem; justify-items: start; } .closer h2 { font-size: clamp(2rem, 5vw, 3.25rem); max-width: 16ch; } .closer-note { font-size: 0.75rem; } /* ── footer ───────────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-2); } footer .sheet { padding-block: 2.5rem 3.5rem; display: flex; gap: 0.75rem 2rem; flex-wrap: wrap; align-items: baseline; } footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-left: auto; } a { color: var(--ember); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } footer a { color: var(--ink-2); } footer a:hover { color: var(--ink); } /* ── entrance ─────────────────────────────────────────────────────────────── */ /* * One staggered reveal on the first fold and nothing after it. A tool page that * animates its way down the scroll is asking to be admired; this one is asking * to be read. */ @media (prefers-reduced-motion: no-preference) { .rise { animation: rise 720ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } .rise:nth-child(2) { animation-delay: 70ms; } .rise:nth-child(3) { animation-delay: 140ms; } .hero figure { animation: rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 210ms backwards; } } @keyframes rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } } /* ── legal documents ──────────────────────────────────────────────────────── */ .doc > .sheet { max-width: 46rem; margin-inline: 0; padding-block: clamp(3rem, 7vw, 5rem); } .doc h2 { margin-top: 2.75rem; font-size: 1.25rem; max-width: none; } .doc li { color: var(--ink-2); margin-bottom: 0.4rem; }