, so the menu opens, closes and is keyboard-operable with no
* JavaScript at all — the same reason the FAQ is markup now. It sits in the
* bar as a small capsule beside the CTA, and shares the CTA's vertical
* padding rather than a fixed height, so the two align however the type
* scale is retuned.
*/
.lang {
position: relative;
}
.lang__summary {
display: flex;
align-items: center;
gap: var(--s-2);
padding: 0.8em var(--s-4);
border: var(--border);
border-radius: var(--r-pill);
font-size: var(--t-small);
font-weight: 500;
line-height: 1;
color: color-mix(in srgb, var(--c-ink) 58%, transparent);
cursor: pointer;
/* The default disclosure triangle, removed in both dialects: the caret in
the markup replaces it, because that one can rotate. */
list-style: none;
transition:
color var(--d-fast) linear,
background var(--d-fast) linear,
border-color var(--d-fast) linear;
}
.lang__summary::-webkit-details-marker {
display: none;
}
/* Open is a state, hover is feedback, and here they look the same on purpose:
both mean "this control is live", and the caret says which one you are in. */
.lang__summary:hover,
.lang[open] .lang__summary {
background: var(--c-panel);
border-color: var(--c-line-strong);
color: var(--c-ink);
}
/* Two letters, so they are set apart rather than read as a word. */
.lang__code {
letter-spacing: 0.06em;
}
.lang__caret {
inline-size: 10px;
block-size: 6px;
transition: transform var(--d-base) var(--e-in-out);
}
.lang[open] .lang__caret {
transform: rotate(180deg);
}
/* Hangs from the end of the capsule rather than its start: the switcher is the
last thing before the page edge, and a menu growing rightward from a control
that is already there leaves the viewport. */
.lang__menu {
position: absolute;
inset-block-start: calc(100% + var(--s-2));
inset-inline-end: 0;
z-index: 1;
min-inline-size: 12ch;
padding: var(--s-2);
border: var(--border);
border-radius: var(--r-md);
background: var(--c-canvas);
box-shadow: var(--shadow-lift);
list-style: none;
animation: lang-menu-in var(--d-base) var(--e-out) both;
}
.lang__link {
display: block;
padding: var(--s-2) var(--s-3);
border-radius: var(--r-sm);
font-size: var(--t-small);
white-space: nowrap;
text-decoration: none;
color: var(--c-ink-soft);
transition:
color var(--d-fast) linear,
background var(--d-fast) linear;
}
.lang__link:hover {
background: var(--c-panel);
color: var(--c-ink);
}
/* The language you are already reading. Filled rather than outlined, because
unlike the nav there is no second kind of "current" here to confuse it with. */
.lang__link[aria-current='true'] {
background: var(--c-accent-soft);
color: var(--c-accent-deep);
}
@keyframes lang-menu-in {
from {
opacity: 0;
transform: translateY(-4px);
}
}
/* ------------------------------------------- the same choice in the drawer */
/* The drawer has room to show the languages outright, and a reader who has
already opened one disclosure should not have to open a second one inside
it. Same links, laid flat. */
.lang-row {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.lang-row__link {
padding: var(--s-2) var(--s-4);
border: var(--border);
border-radius: var(--r-pill);
font-size: var(--t-small);
text-decoration: none;
color: var(--c-ink-soft);
}
.lang-row__link[aria-current='true'] {
background: var(--c-accent-soft);
border-color: transparent;
color: var(--c-accent-deep);
}
@media (prefers-reduced-motion: reduce) {
.lang__menu {
animation: none;
}
.lang__caret {
transition: none;
}
}
/* ----------------------------------------------------------------- footer */
.footer {
background: var(--c-canvas);
color: var(--c-ink);
padding-block: var(--s-8) var(--s-6);
}
.footer__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-6);
padding-block-end: var(--s-7);
}
/* The footer wordmark sits alone without the nav's mark or the "logo tbc"
note, so it needs its own slightly larger setting. */
.footer__logo .logo-slot__word {
font-size: 1.4rem;
}
.footer__links {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-6);
}
.footer__link {
font-size: var(--t-small);
color: var(--c-muted);
text-decoration: none;
transition: color var(--d-base) var(--e-in-out);
}
.footer__link:hover {
color: var(--c-ink);
}
/* Set in the mono, like every other piece of hard fact on this site — a code,
a date, an address. It is a fact, not a call to action, so it does not get a
button's weight. */
.footer__mail {
/* .mono uppercases everything it touches, which is right for a code and
wrong for an address: an email is written the way it is written, and
INFO@TOOLSSYNC.COM reads as shouting rather than as a fact. */
text-transform: none;
font-size: var(--t-small);
color: var(--c-muted);
text-decoration-color: var(--c-line-strong);
transition: color var(--d-base) var(--e-in-out);
}
.footer__mail:hover {
color: var(--c-accent);
text-decoration-color: currentcolor;
}
.footer__social {
display: flex;
gap: var(--s-3);
}
.footer__social-link {
display: grid;
place-items: center;
inline-size: 36px;
block-size: 36px;
border: 1px solid var(--c-line);
border-radius: 50%;
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
color: var(--c-muted);
transition:
border-color var(--d-base) var(--e-in-out),
color var(--d-base) var(--e-in-out);
}
.footer__social-link:hover {
border-color: var(--c-accent);
color: var(--c-accent);
}
.footer__legal {
border-block-start-color: var(--c-line);
}
/* The legal row sits between the copyright and the descriptor rather than
among the section links: nobody browses to a privacy policy, they go looking
for it, and it is found faster next to the copyright than buried in a list
of marketing destinations. */
.footer__legal-links {
display: flex;
gap: var(--s-4);
}
.footer__link--legal {
font-size: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
/* Social slots with no account behind them yet. They are spans, not links, so
they must not invite a click they cannot honour. */
.footer__social-link[data-placeholder] {
opacity: 0.4;
cursor: default;
}
@media (max-width: 860px) {
/* The descriptor is the first thing to go: the copyright and the privacy
link both have to stay reachable, a tagline does not. */
.footer__legal-tag {
display: none;
}
}
@media (max-width: 700px) {
.footer__inner {
flex-direction: column;
align-items: flex-start;
}
}
/* =============================================================================
Small screens: the chrome stops eating the page.
The strip and the navigation are both sticky, which is right on a desktop
where they total 140px of a 900px window. On a phone the strip's one line
becomes five and the pair takes 208px of an 844px viewport — a quarter of
every screen, permanently, for a strapline and a menu button. At 360px it is
seven lines and 34%.
So below the width where the strip still fits on one line, it stops being
sticky. It is an opening remark, not a control: read once at the top, then
out of the way. The navigation keeps its place, because that IS a control.
========================================================================== */
@media (max-width: 900px) {
.strip {
position: static;
}
/* With nothing pinned above it, the bar sits against the top of the
viewport rather than below a strip that is no longer there. */
.nav {
inset-block-start: 0;
}
/* The hide-on-scroll transform moved the bar by its own height plus the
strip's; the strip is no longer part of that stack. */
.nav[data-hidden='true'] {
transform: translateY(calc(-100% - 8px));
}
/*
* Everything that pins itself below the chrome has to agree with the chrome
* about how tall it is. --strip-height is written to :root by nav.js as an
* inline style, so a stylesheet cannot override it — but --pin-top is ours,
* and redefining it here re-points every sticky offset on the site at once.
*/
:root {
--pin-top: 6rem;
}
}
/*
* The strip stacks before it gets desperate.
*
* Side by side, the message and the link share one row — so as the screen
* narrows, the message keeps its half and wraps instead. At 320px that meant
* nine lines filling 77% of the first screen, a wall of green before the
* reader had seen the company name.
*
* Stacked, the sentence gets the full width and settles into three lines. The
* link goes underneath, where it is also a bigger target than it was squeezed
* into a corner.
*/
@media (max-width: 480px) {
.strip__inner {
flex-direction: column;
align-items: flex-start;
gap: var(--s-2);
}
}
/* ==== assets/css/sections/hero.css ==== */
/* =============================================================================
Hero.
The sentence is the artwork. The convergence field sits in its own column
beside the supporting copy rather than floating across the whole hero — an
overlay put "One connected workflow" straight on top of the headline.
========================================================================== */
.hero {
position: relative;
/*
* Exactly one screen, chrome included.
*
* The hero was 781px tall and started 140px down, so its last 21px sat below
* the fold: the sheet line was cut in half and the first screen looked like
* it had been cropped rather than composed. Subtracting the strip and the
* navigation from the viewport makes the section end where the screen does.
*
* svh, not vh: on a phone vh is the height WITHOUT the browser's own chrome,
* so a vh-sized hero is always taller than what you can actually see.
* --strip-rest-height is the strip's uncompacted height, which is what is on
* screen when the hero is.
*/
min-block-size: calc(100svh - var(--strip-rest-height, 49px) - 5.7rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(var(--s-5), 2.4vw, var(--s-7));
padding-block: clamp(1.25rem, 2vw, 1.75rem);
overflow: clip;
/* A soft wash behind the headline so the first screen is not flat canvas.
Two very low-opacity radial pools, warm on the left where the "scattered"
idea lives and green on the right where it resolves. */
background:
radial-gradient(
70ch 50ch at 12% 18%,
color-mix(in srgb, var(--c-clay-soft) 60%, transparent),
transparent 70%
),
radial-gradient(
60ch 45ch at 88% 78%,
color-mix(in srgb, var(--c-accent-soft) 55%, transparent),
transparent 70%
),
var(--c-canvas);
}
/*
* Two columns, both starting on the same line.
*
* `align-items: start` is the whole fix for the scatter. This was a flex column
* holding a full-width headline over a row whose align-items was `center`: the
* copy was centred against a sphere half again its height, which left 147px of
* empty between the headline and the lead and made the two read as unrelated
* blocks. Now the words are one column and the sphere is the other, and the top
* of the sphere lines up with the top of the eyebrow.
*/
.hero__inner {
position: relative;
z-index: var(--z-raised);
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
align-items: start;
gap: clamp(var(--s-6), 4vw, var(--s-8));
}
.hero__eyebrow {
color: var(--c-muted);
}
.hero__title {
display: flex;
flex-direction: column;
letter-spacing: -0.04em;
}
.hero__line {
display: block;
}
/* The count ticks up on load — the sentence's own small joke, and the first
sign that numbers on this page move rather than sit. */
.hero__count {
display: inline-block;
min-inline-size: 1.6ch;
color: var(--c-clay);
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------- the foot */
.hero__words {
display: flex;
flex-direction: column;
/* Eyebrow, headline, lead and buttons. The lead and the buttons sit closer to
the headline than to each other's neighbours, so the four read as one
paragraph of page rather than as four stacked things. */
gap: clamp(var(--s-4), 1.6vw, var(--s-5));
}
.hero__words .hero__lead {
margin-block-start: clamp(var(--s-3), 1vw, var(--s-4));
}
.hero__words .hero__actions {
margin-block-start: clamp(var(--s-3), 1.2vw, var(--s-5));
}
.hero__lead {
max-inline-size: 42ch;
}
.hero__actions {
gap: var(--s-3);
}
/* The pair needs 605px of a 595px column at 1440. Ten pixels of padding is a
cheaper fix than wrapping the primary action onto its own line. */
.hero__actions .btn {
padding-inline: var(--s-5);
}
.hero__sheet {
position: relative;
z-index: var(--z-raised);
color: var(--c-muted);
}
/* ------------------------------------------------------------------ field */
/*
* One centred stack: the sphere, its caption, then the voucher. The wrapper
* owns --progress, because the caption sits outside the field and still has to
* fade on the same clock as the icons inside it.
*
* This column used to hold 8.5rem of padding open at the bottom for a coupon
* absolutely positioned in its corner. That padding was what squeezed the field
* into a 243px letterbox — and since the sphere's radius is bounded by the
* SHORT side of the field, a letterbox field is a flattened sphere. In the flow
* the voucher needs no reserved space, so the sphere gets it back.
*/
.hero__visual {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-4);
--progress: 0;
}
/*
* An explicit height sized against the viewport's HEIGHT, not its width.
*
* Not an aspect ratio: with `aspect-ratio` and a max-block-size the capped
* height fed back into the width and the field collapsed to a square inside a
* much wider column. And not a width-based height either — that is why the
* hero once did not fit: on a 1440x800 laptop the field still asked for the
* height it takes on a 1440x1200 monitor, and the sheet line underneath it fell
* off the screen. Tying it to vh gives the space back on exactly the screens
* that are short of it.
*/
.hero__field {
position: relative;
inline-size: 100%;
block-size: clamp(10rem, 36vh, 24rem);
/* How much of the field the sphere's two axes are allowed to use. Read by
icon-cloud.js — see the note there for why they live out here. */
--cloud-radius-x: 0.40;
--cloud-radius-y: 0.43;
}
/* =============================================================================
The icon cloud.
Sixteen logos on a slowly rotating sphere — the tools a business already
runs on, all in the air at once. It replaced the scattered-chips
convergence, and inherited that composition's job: as the reader scrolls it
contracts toward the middle and hands over to "One connected workflow"
below.
Geometry is written by icon-cloud.js as inline transforms, so there is
deliberately no positional CSS here — only the things the stylesheet should
own: size, cursor, and how the whole field behaves when motion is reduced.
========================================================================== */
.cloud {
position: absolute;
inset: 0;
/* Grab-to-spin. `touch-action: none` is what stops a horizontal drag on a
phone being stolen by the page scroller mid-gesture. */
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.cloud[data-grabbing='true'] {
cursor: grabbing;
}
.cloud__icon {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
/* Width and height are written per icon by icon-cloud.js, which sizes each
logo to the same optical AREA rather than the same box — see the note
there. The custom property is only the fallback for the first frame. */
inline-size: var(--cloud-icon-size, 40px);
block-size: var(--cloud-icon-size, 40px);
object-fit: contain;
/* The transform is rewritten every frame from JS; promoting the layer once
keeps the browser from re-uploading each texture as it moves. */
will-change: transform, opacity;
pointer-events: none;
/* Dragging an ![]()
natively picks it up as a file, which would abort the
spin the moment the pointer moved. */
-webkit-user-drag: none;
}
/* The caption under the sphere.
It fades on the same clock as the icons — by the time the core pill lands,
the line that set the problem up has stepped out of the way of the line that
answers it. */
/*
* Centred under the sphere, on the same axis.
*
* It was left-aligned against the column's edge while the sphere sat centred
* 280px away, and capped at `100% - 11rem` purely to dodge the coupon in the
* corner. With the coupon in the flow there is nothing to dodge, so the line
* can sit where it belongs: directly beneath the object it captions.
*/
.hero__caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35em;
margin: 0;
max-inline-size: 30rem;
text-align: center;
font-size: var(--t-small);
color: var(--c-muted);
opacity: calc(1 - clamp(0, var(--progress) * 1.6, 1));
pointer-events: none;
}
.hero__caption-line {
text-wrap: balance;
}
/* Present but quiet, and it brightens when the sphere is actually grabbable:
a permanent instruction would read as a manual, this reads as a nudge. */
.hero__hint {
color: var(--c-muted);
opacity: 0.5;
transition: opacity var(--d-base) var(--e-out);
}
.hero__visual:hover .hero__hint {
opacity: 1;
}
/* Nothing to drag without a pointer, so the hint would be a lie. */
@media (hover: none) {
.hero__hint {
display: none;
}
}
/* The thing everything collapses into. Appears only in the last third of the
sequence, so the convergence has somewhere to arrive. */
.hero__core {
/* One arrival curve, named once and reused by the ring below, so the two
cannot be tuned apart by accident. */
--in: clamp(0, calc((var(--progress) - 0.58) * 3.2), 1);
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
padding: 0.7em 1.2em;
border: 1px solid var(--c-accent);
border-radius: var(--r-pill);
background: var(--c-accent-soft);
color: var(--c-accent-deep);
white-space: nowrap;
box-shadow: 0 2px 18px color-mix(in srgb, var(--c-accent) 18%, transparent);
opacity: var(--in);
transform: translate(-50%, -50%) scale(calc(0.88 + var(--in) * 0.12));
}
/* A single ring pulses out of the core as it lands. */
.hero__core::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid var(--c-accent);
opacity: calc(clamp(0, (var(--progress) - 0.75) * 4, 1) * 0.5);
transform: scale(calc(1 + clamp(0, (var(--progress) - 0.75) * 4, 1) * 0.28));
}
@media (max-width: 900px) {
.hero__inner {
grid-template-columns: minmax(0, 1fr);
}
/*
* One column, so the field is now as wide as the whole shell while still
* capped at 20rem tall — a far wider letterbox than the two-column field it
* replaces. The sphere is bounded by the SHORT axis, so at the desktop
* factors its silhouette overshot the column on both sides. Narrower axes
* hold it inside, and it still fills the field: a wider box, same object.
*/
.hero__field {
max-block-size: 20rem;
--cloud-radius-x: 0.34;
--cloud-radius-y: 0.30;
}
}
@media (prefers-reduced-motion: reduce) {
.cloud {
cursor: default;
}
.cloud__icon {
will-change: auto;
}
/* Painted once and left alone, so the sphere still reads as a composition
rather than disappearing for anyone who has asked motion to stop. The core
label is shown outright, because there is no convergence to reveal it. */
.hero__core {
--in: 1;
}
/* The core label is shown outright, so the line that sets up the problem
would be sitting underneath the line that answers it. */
.hero__caption {
opacity: 0;
}
}
/* =============================================================================
Short viewports.
The hero is one screen by construction, so on a laptop that is 800px or less
the type and the spacing have to give rather than the composition spilling
past the fold. Everything still reads; it reads smaller.
========================================================================== */
@media (max-height: 860px) {
.hero {
gap: var(--s-4);
padding-block: var(--s-4);
}
/* The sphere gives back a little of its height on a short laptop. At 36vh a
1366x768 screen pushed the sheet line 14px below the fold, and the hero is
one screen by construction. */
.hero__field {
block-size: clamp(10rem, 32vh, 24rem);
}
.hero__title {
font-size: clamp(1.9rem, 3.4vw, 3.1rem);
}
.hero__inner {
gap: var(--s-5) clamp(var(--s-6), 5vw, var(--s-9));
}
}
@media (max-height: 720px) {
.hero__lead {
font-size: var(--t-small);
}
/* The caption is the first thing to go: the sphere still argues on its own,
and the drag hint is a nicety rather than a route to anything. */
.hero__caption {
display: none;
}
}
/* ==== assets/css/sections/friction.css ==== */
/* =============================================================================
"This is how work usually starts" — the scattered mess.
Nodes are placed on a deterministic scatter rather than a timeline, and the
connecting lines accumulate as the section is read, so the composition gets
visibly busier without anything moving fast.
========================================================================== */
.friction__field {
position: relative;
/* Aspect-ratio rather than a fixed height so the scatter keeps its
proportions across viewports and never causes layout shift. */
aspect-ratio: 1000 / 620;
min-block-size: 340px;
margin-block: var(--s-6);
--progress: 0;
}
.friction__wires {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
overflow: visible;
}
.friction__wire {
fill: none;
stroke: var(--c-clay);
opacity: 0.5;
stroke-width: 1;
stroke-dasharray: var(--len, 300);
/* Each line has its own delay window inside the section's progress, so they
arrive in sequence instead of all at once. */
stroke-dashoffset: calc(
var(--len, 300) * (1 - clamp(0, (var(--progress) - var(--at, 0)) * 4, 1))
);
opacity: 0.75;
}
/* The last few connections are the ones that make it feel out of hand. */
.friction__wire--late {
stroke: var(--c-stop);
stroke-dasharray: 3 4;
opacity: calc(clamp(0, (var(--progress) - var(--at, 0)) * 4, 1) * 0.7);
}
.friction__nodes {
position: absolute;
inset: 0;
}
.friction__node {
position: absolute;
translate: -50% -50%;
inline-size: max-content;
max-inline-size: 15rem;
opacity: 0;
transform: translateY(10px) scale(0.96);
transition:
opacity var(--d-slow) var(--e-out),
transform var(--d-slow) var(--e-out);
}
.friction__node[data-visible='true'] {
opacity: 1;
transform: none;
}
/* Each node borrows the operational-object language at miniature scale: a mono
source label above a short line of the actual message. */
.friction__card {
display: flex;
flex-direction: column;
gap: 0.3em;
padding: 0.55em 0.7em;
background: var(--c-canvas);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
box-shadow: var(--shadow-card);
}
/* The source label is the loudest part of each node: it names who is holding
the information at that moment, which is the whole point of the diagram. */
/* The icon leads the source label, so a node's artifact is readable at a
glance before the text is. */
.friction__source {
display: flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-clay-deep);
}
.friction__source .icon {
inline-size: 1.15em;
block-size: 1.15em;
vertical-align: 0;
opacity: 0.85;
}
.friction__text {
font-size: var(--t-small);
line-height: 1.35;
letter-spacing: -0.005em;
}
/* Shape cues so the eight nodes are distinguishable at a glance without icons
that would need explaining. */
.friction__card[data-kind='message'] {
border-end-start-radius: 2px;
}
.friction__card[data-kind='sheet'] {
background-image: linear-gradient(var(--c-line) 1px, transparent 1px);
background-size: 100% 1.35em;
background-position: 0 1.9em;
}
.friction__card[data-kind='paper'] {
border-style: dashed;
}
.friction__card[data-kind='barcode'] {
border-inline-start: 3px double var(--c-ink);
}
.friction__card[data-kind='approval'] {
border-color: var(--c-clay);
}
.friction__card[data-kind='invoice'] {
border-block-end-width: 3px;
}
/* --------------------------------------------------------------- the turn */
.friction__turn {
display: grid;
gap: var(--s-7);
margin-block-start: var(--s-8);
}
.friction__statement {
max-inline-size: 18ch;
}
.friction__resolve {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--s-7) var(--grid-gap);
align-items: start;
padding-block-start: var(--s-7);
border-block-start: var(--border-strong);
}
@media (max-width: 900px) {
.friction__resolve {
grid-template-columns: minmax(0, 1fr);
}
}
/* On small screens the scatter becomes an offset vertical sequence: still not a
plain list, but readable in one column. */
@media (max-width: 760px) {
.friction__field {
aspect-ratio: auto;
min-block-size: 0;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.friction__wires {
display: none;
}
.friction__nodes {
position: static;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.friction__node {
/* Alternating indent keeps the sense of a process wandering across the
business rather than marching down a list.
*
* Capped as a percentage as well as a length, because on the narrowest
* phones a fixed 1.5rem step eats a third of the column. And the cap is
* SUBTRACTED from the width: a plain `max-inline-size: 100%` measures the
* containing block, not the space left after the margin, so the deepest
* card overhung the screen edge by exactly its own indent. */
--indent: min(calc(var(--stagger-indent, 0) * 1.5rem), 12%);
position: static;
translate: none;
margin-inline-start: var(--indent);
max-inline-size: calc(100% - var(--indent));
}
}
/* ==== assets/css/sections/rail.css ==== */
/* =============================================================================
The rail — horizontal storytelling.
One job travelling through the whole business, laid out left to right while
the page scrolls down. The reader is pushing the job along the line: the
scroll IS the conveyor.
IMPORTANT — the cascade is deliberately inverted here.
The DEFAULT styles below are the vertical layout: stations stacked down a
datum line, no pin, no horizontal movement, everything readable. The pinned
horizontal treatment is layered on top only when rail.js sets
`data-pinned="true"`, which it does only on a wide viewport with motion
allowed.
Written this way round, every failure mode lands somewhere good: no JS, a
thrown error, a narrow screen, or reduced motion all leave the reader with
the plain vertical sequence instead of a pinned region they cannot scroll
past. Nothing inside is focusable, so the pin can never trap a keyboard.
========================================================================== */
.rail {
position: relative;
background: var(--c-canvas);
color: var(--c-ink);
padding-block: var(--section-y);
--progress: 0;
}
.rail__pin {
display: flex;
flex-direction: column;
gap: var(--s-5);
}
/* ------------------------------------------------------------------- head */
/* An explicit two-track grid rather than flex space-between: the title column
is allowed to shrink (minmax 0) so a long heading wraps instead of pushing
the counter out of the section. */
.rail__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: var(--s-4) var(--s-6);
}
.rail__title {
max-inline-size: 18ch;
/* Belt and braces: never let a single long word overflow the column. */
overflow-wrap: break-word;
}
@media (max-width: 720px) {
.rail__head {
grid-template-columns: minmax(0, 1fr);
}
}
.rail__station-of {
gap: var(--s-1);
font-variant-numeric: tabular-nums;
}
.rail__station-now {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1;
color: var(--c-accent);
}
/* --------------------------------------------------- default: vertical -- */
.rail__viewport {
position: relative;
margin-block: var(--s-7);
}
/* The datum: a drawing's dimension rule, and the one continuous thing on the
page. Vertical by default, running down the left of the stations. */
.rail__datum {
position: absolute;
inset-block: 0;
inset-inline-start: var(--s-5);
inline-size: 1px;
background: var(--c-line);
}
/* Accent fills the datum as far as the job has travelled. */
.rail__datum::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-start: 0;
block-size: calc(var(--progress) * 100%);
background: var(--c-accent);
}
.rail__track {
display: flex;
flex-direction: column;
gap: var(--s-6);
}
.rail__station {
position: relative;
/* Start padding clears the datum and its tick. The end padding is the page's
own gutter, so a stacked card lines up with every other block on the page
instead of running under the screen edge — which is what it did at every
width below the pinned layout, most visibly on a phone. */
padding-inline-start: var(--s-8);
padding-inline-end: var(--grid-gutter);
}
.rail__body {
display: flex;
flex-direction: column;
gap: var(--s-3);
}
/* The tick where this station meets the datum. */
.rail__tick {
position: absolute;
inset-block-start: var(--s-5);
inset-inline-start: var(--s-5);
inline-size: 9px;
block-size: 9px;
border-radius: 50%;
border: 1px solid var(--c-line-strong);
background: var(--c-canvas);
translate: -50% -50%;
transition:
background var(--d-base) var(--e-in-out),
border-color var(--d-base) var(--e-in-out),
scale var(--d-base) var(--e-snap);
}
.rail__station[data-state='done'] .rail__tick,
.rail__station[data-state='now'] .rail__tick {
background: var(--c-accent);
border-color: var(--c-accent);
}
.rail__station[data-state='now'] .rail__tick {
scale: 1.6;
}
/* The stem joining a card to its tick. Only meaningful in the horizontal
layout, where the card sits away from the datum. */
.rail__stem {
display: none;
}
.rail__index {
color: var(--c-muted);
transition: color var(--d-base) var(--e-in-out);
}
.rail__station[data-state='done'] .rail__index,
.rail__station[data-state='now'] .rail__index {
color: var(--c-accent);
}
/* The record each station leaves behind — the "one source of truth" argument
made by accumulation rather than by a claim. */
.rail__record {
display: flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-muted);
}
.rail__record::before {
content: '';
inline-size: 5px;
block-size: 5px;
border-radius: 1px;
background: var(--c-accent);
flex: none;
}
.rail__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
color: var(--c-muted);
}
/* The scroll hint only makes sense when the rail is actually horizontal. */
.rail__hint {
display: none;
}
/* =============================================================================
Pinned horizontal treatment — applied only when rail.js opts in.
========================================================================== */
.rail[data-pinned='true'] {
/* Length of the pin, set by rail.js from the station count so adding a
station lengthens the journey rather than speeding it up. */
block-size: var(--rail-length, 400vh);
padding-block: 0;
--rail-travel: 0px;
}
.rail[data-pinned='true'] .rail__pin {
position: sticky;
inset-block-start: 0;
block-size: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
/* The track inside is deliberately `max-content` wide (~3300px). Without an
explicit column, this grid's implicit `auto` column sizes to that
max-content and the head's centred .shell resolves 100% against 3300px —
which pushed the title ~900px right and clipped it off screen. */
grid-template-columns: minmax(0, 1fr);
/* The middle row must be allowed to shrink. A grid row of `1fr` still gets an
automatic minimum of its content, so the full-height stations pushed the
grid past 100vh and `overflow: clip` cut the bottom row of cards off. */
grid-template-rows: auto minmax(0, 1fr) auto;
/* The information strip is permanent and never hides, so the pinned head has
to start below it or the title sits underneath. The nav does hide on the
way down, which is exactly the behaviour this section wants. */
padding-block: calc(var(--strip-height, 44px) + var(--s-4)) var(--s-4);
gap: var(--s-4);
overflow: clip;
}
.rail[data-pinned='true'] .rail__viewport {
margin-block: 0;
display: flex;
align-items: stretch;
overflow: clip;
/* Belt and braces with the explicit tracks above: a grid item's automatic
minimum size is its content, in both axes. */
min-inline-size: 0;
min-block-size: 0;
}
/* Horizontal datum, spanning the visible viewport rather than the track, so
the fill reads as overall progress through the journey. */
.rail[data-pinned='true'] .rail__datum {
inset-block: auto;
inset-block-start: 50%;
inset-inline: 0;
inline-size: auto;
block-size: 1px;
translate: 0 -0.5px;
}
.rail[data-pinned='true'] .rail__datum::after {
inset-block: 0;
inset-inline-start: 0;
inline-size: calc(var(--progress) * 100%);
block-size: auto;
}
.rail[data-pinned='true'] .rail__track {
flex-direction: row;
align-items: stretch;
gap: clamp(var(--s-6), 4vw, var(--s-8));
padding-inline: var(--grid-gutter);
min-inline-size: max-content;
/* The entire horizontal movement, on the compositor. */
transform: translate3d(calc(var(--progress) * var(--rail-travel) * -1), 0, 0);
will-change: transform;
}
/* Full-height stations split into equal halves. Because every station is the
same height, the 50% mark lines up with the datum on all of them — a card
with fewer rows than its neighbour must not drag its tick off the line. */
.rail[data-pinned='true'] .rail__station {
inline-size: clamp(15rem, 21vw, 19rem);
flex: none;
block-size: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
/* The pinned track carries the gutter itself — see .rail__track above. */
padding-inline: 0;
}
/* Stations alternate above and below the line — a timeline drawing rather than
a row of cards, and it lets twice as many fit in the same width. */
.rail[data-pinned='true'] .rail__station:nth-child(odd) .rail__body {
grid-row: 1;
justify-content: flex-end;
padding-block-end: var(--s-5);
}
.rail[data-pinned='true'] .rail__station:nth-child(even) .rail__body {
grid-row: 2;
justify-content: flex-start;
padding-block-start: var(--s-5);
}
/* Each half of a station is one viewport-half tall, which on a short laptop
screen is not much. The card is compacted inside the rail so both rows stay
fully visible rather than the lower one being clipped by the pin. */
.rail[data-pinned='true'] .rail__body {
gap: var(--s-2);
min-block-size: 0;
}
.rail[data-pinned='true'] .rail__card .obj__head {
padding: var(--s-2) var(--s-3);
}
.rail[data-pinned='true'] .rail__card .obj__body {
padding: var(--s-3);
gap: var(--s-2);
}
.rail[data-pinned='true'] .rail__tick {
inset-block-start: 50%;
inset-inline-start: var(--s-5);
}
.rail[data-pinned='true'] .rail__stem {
display: block;
position: absolute;
inset-inline-start: var(--s-5);
inline-size: 1px;
block-size: var(--s-6);
background: var(--c-line);
}
.rail[data-pinned='true'] .rail__station:nth-child(odd) .rail__stem {
inset-block-end: 50%;
}
.rail[data-pinned='true'] .rail__station:nth-child(even) .rail__stem {
inset-block-start: 50%;
}
/* Stations the job has not reached sit back; the current one comes forward.
Opacity and scale only — no layout is touched during the scroll. */
.rail[data-pinned='true'] .rail__card,
.rail[data-pinned='true'] .rail__record {
transition:
opacity var(--d-slow) var(--e-out),
scale var(--d-slow) var(--e-out);
}
.rail[data-pinned='true'] .rail__card {
opacity: 0.32;
scale: 0.97;
}
.rail[data-pinned='true'] .rail__record {
opacity: 0;
}
.rail[data-pinned='true'] .rail__station[data-state='done'] .rail__card {
opacity: 0.75;
scale: 1;
}
.rail[data-pinned='true'] .rail__station[data-state='now'] .rail__card {
opacity: 1;
scale: 1;
}
.rail[data-pinned='true'] .rail__station[data-state='done'] .rail__record,
.rail[data-pinned='true'] .rail__station[data-state='now'] .rail__record {
opacity: 1;
}
/* The hint fades once the reader has clearly understood the mechanism. */
.rail[data-pinned='true'] .rail__hint {
display: inline-flex;
align-items: center;
gap: var(--s-2);
opacity: clamp(0, calc(1 - var(--progress) * 6), 1);
transition: opacity var(--d-base) linear;
}
.rail__hint-arrow {
animation: rail-nudge 2.4s var(--e-in-out) infinite;
}
@keyframes rail-nudge {
0%,
60%,
100% {
transform: translateX(0);
}
30% {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.rail__hint-arrow {
animation: none;
}
}
/* ==== assets/css/sections/stack.css ==== */
/* =============================================================================
Stack calculator.
Centred and single-column, following the reference calculator's shape: a
framing note, then two questions, then one big number. The app tiles are logo
slots that reveal their name and per-user price on hover or focus.
========================================================================== */
.stack-section {
background:
radial-gradient(
80ch 40ch at 50% 0%,
color-mix(in srgb, var(--c-tint-clay) 90%, transparent),
transparent 65%
),
var(--c-canvas-sunk);
text-align: center;
}
.stack-section .section-head {
align-items: center;
margin-block-end: var(--s-6);
}
.stack-section .eyebrow {
justify-content: center;
}
.stack-section .title {
max-inline-size: 22ch;
margin-inline: auto;
}
/* ------------------------------------------------------------------- note */
/* The framing statement, set as a card with an accent hairline across the top
so it reads as a note from us rather than body copy. */
.stack__note {
position: relative;
max-inline-size: 62ch;
margin: 0 auto var(--s-8);
padding: var(--s-5) var(--s-6);
background: var(--c-canvas);
border: var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
font-size: var(--t-lead);
line-height: 1.55;
color: var(--c-ink-soft);
}
.stack__note::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 3px;
background: linear-gradient(
90deg,
transparent,
var(--c-accent),
var(--c-clay),
transparent
);
}
.stack__note strong {
color: var(--c-ink);
font-weight: 600;
}
/* ------------------------------------------------------------------ steps */
.stack__step {
margin-block-end: var(--s-8);
}
.stack__question {
font-size: clamp(1.35rem, 2.4vw, 1.9rem);
font-weight: 550;
letter-spacing: -0.022em;
line-height: 1.2;
}
.stack__aside {
margin-block-start: var(--s-2);
font-size: var(--t-small);
color: var(--c-muted);
}
/* ------------------------------------------------------------- app tiles */
.stack__apps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
gap: var(--s-3);
max-inline-size: 62rem;
margin: var(--s-6) auto 0;
}
/* A square tile holding a logo slot. Nothing is printed on the face — the
identity is revealed on hover and focus, which keeps the grid calm. */
.app-tile {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
padding: var(--s-4);
background: var(--c-canvas);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
transition:
background var(--d-base) var(--e-in-out),
border-color var(--d-base) var(--e-in-out),
transform var(--d-base) var(--e-snap),
box-shadow var(--d-base) var(--e-out);
}
.app-tile:hover,
.app-tile:focus-visible {
border-color: var(--c-line-strong);
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.app-tile[aria-pressed='true'] {
background: var(--c-accent-soft);
border-color: var(--c-accent);
}
/* A tick in the corner, so selection is legible without relying on fill alone. */
.app-tile[aria-pressed='true']::after {
content: '';
position: absolute;
inset-block-start: 8px;
inset-inline-end: 8px;
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: var(--c-accent);
}
/* The placeholder standing in for a real logo. Dashed, like every other
placeholder on the page, so it is obviously not final artwork. */
.app-tile__slot {
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
border: 1px dashed var(--c-line-strong);
border-radius: var(--r-md);
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.06em;
color: var(--c-muted);
transition:
border-color var(--d-base) var(--e-in-out),
color var(--d-base) var(--e-in-out);
}
.app-tile[aria-pressed='true'] .app-tile__slot {
border-style: solid;
border-color: var(--c-accent);
color: var(--c-accent-deep);
}
/* Once a real logo is supplied in data/apps.js it replaces the slot. Unselected
tiles desaturate it so the grid stays quiet until you choose. */
/*
* A landscape box, not a square one.
*
* The supplied logos are two different kinds of asset: square icon marks
* (Slack, Asana, Drive) and wide wordmarks (Monday is 5.4:1, Wrike 5:1). In a
* 40x40 box `contain` fits a wordmark to its WIDTH, so Monday rendered about
* seven pixels tall beside Slack's forty. A 72x40 box caps the square marks at
* 40 exactly as before, and gives the wordmarks nearly twice the height.
*
* When square icon marks replace the wordmarks this rule needs no change —
* they will simply cap on height like the others.
*/
.app-tile__logo {
inline-size: 100%;
max-inline-size: 72px;
block-size: 40px;
object-fit: contain;
filter: grayscale(1);
opacity: 0.55;
transition:
filter var(--d-base) var(--e-in-out),
opacity var(--d-base) var(--e-in-out);
}
.app-tile:hover .app-tile__logo,
.app-tile:focus-visible .app-tile__logo,
.app-tile[aria-pressed='true'] .app-tile__logo {
filter: none;
opacity: 1;
}
/* The reveal: name and price, on hover or keyboard focus. Sits above the tile
on its own layer so it is never clipped by the grid. */
.app-tile__reveal {
position: absolute;
inset-block-end: calc(100% + 8px);
inset-inline-start: 50%;
translate: -50% 0;
z-index: var(--z-raised);
display: flex;
flex-direction: column;
gap: 1px;
padding: var(--s-2) var(--s-3);
background: var(--c-ink);
color: var(--c-canvas);
border-radius: var(--r-md);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition:
opacity var(--d-fast) var(--e-out),
transform var(--d-fast) var(--e-out);
}
/* The little pointer under the bubble. */
.app-tile__reveal::after {
content: '';
position: absolute;
inset-block-start: 100%;
inset-inline-start: 50%;
translate: -50% -2px;
border: 4px solid transparent;
border-block-start-color: var(--c-ink);
}
.app-tile:hover .app-tile__reveal,
.app-tile:focus-visible .app-tile__reveal {
opacity: 1;
transform: none;
}
.app-tile__name {
font-size: var(--t-micro);
font-weight: 600;
}
.app-tile__price {
font-family: var(--font-mono);
font-size: var(--t-nano);
color: var(--c-accent-on-dark);
}
/* ----------------------------------------------------------------- slider */
.stack__slider {
max-inline-size: 34rem;
margin: var(--s-6) auto 0;
}
.stack__slider .slider__value {
justify-content: center;
}
/* ----------------------------------------------------------------- result */
.stack__result {
max-inline-size: 34rem;
margin-inline: auto;
padding: var(--s-7) var(--s-6);
background: var(--c-canvas);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lift);
transition: border-color var(--d-slow) var(--e-in-out);
}
/* The panel warms up once there is something to show. */
[data-has-selection='true'] .stack__result {
border-color: var(--c-accent);
}
.stack__result-label {
color: var(--c-muted);
text-transform: none;
letter-spacing: 0.02em;
}
.stack__figure {
margin-block: var(--s-3) var(--s-2);
font-size: clamp(3rem, 8vw, 5rem);
line-height: 1;
letter-spacing: -0.045em;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--c-clay);
transition: color var(--d-slow) var(--e-in-out);
}
.stack__count {
color: var(--c-muted);
text-transform: none;
letter-spacing: 0.02em;
}
.stack__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-4);
margin-block-start: var(--s-6);
padding-block-start: var(--s-5);
border-block-start: var(--border);
}
.stack__meta dt {
color: var(--c-muted);
}
.stack__meta dd {
margin: 0;
margin-block-start: var(--s-1);
font-size: 1.5rem;
font-weight: 500;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
/* The annual figure is the one that lands, so it carries the accent. */
.stack__meta div:last-child dd {
color: var(--c-accent);
}
.stack__disclaimer {
max-inline-size: 60ch;
margin: var(--s-5) auto 0;
font-size: var(--t-small);
font-style: italic;
color: var(--c-muted);
line-height: 1.5;
}
/* ---------------------------------------------------------------- message */
.stack__message {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-5);
max-inline-size: 60ch;
margin: var(--s-9) auto 0;
padding-block-start: var(--s-8);
border-block-start: var(--border-strong);
}
.stack__message .prose {
text-align: center;
}
@media (max-width: 620px) {
.stack__apps {
grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}
/* Tooltips are useless on touch, where there is no hover — the accessible
name still carries the detail for assistive tech. */
.app-tile__reveal {
display: none;
}
}
/* ==== assets/css/sections/catalogue.css ==== */
/* =============================================================================
Digitise catalogue.
An index page, not a feature grid: a dense multi-column list where the sheer
length is the argument. The oversized category numeral anchors each panel.
========================================================================== */
.catalogue__tabs {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
padding-block-end: var(--s-6);
border-block-end: var(--border-strong);
}
/* Reserve the tallest panel's height so switching category doesn't bounce the
page. min-height is set from the longest list rather than measured in JS. */
.catalogue__panels {
min-block-size: 34rem;
}
.catalogue__panel[hidden] {
display: none;
}
.catalogue__panel {
padding-block-start: var(--s-7);
display: grid;
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
gap: var(--s-7) clamp(var(--s-6), 5vw, var(--s-9));
align-items: start;
}
.catalogue__aside {
display: flex;
flex-direction: column;
gap: var(--s-4);
position: sticky;
inset-block-start: calc(var(--strip-height, 44px) + 5.5rem);
}
.catalogue__num {
color: var(--c-line-strong);
line-height: 0.8;
}
.catalogue__count {
font-variant-numeric: tabular-nums;
}
/* The list itself — three columns on desktop, so the eye takes in the volume at
once rather than scrolling through it. */
.catalogue__list {
columns: 3;
column-gap: clamp(var(--s-5), 3vw, var(--s-8));
column-rule: var(--border);
}
.catalogue__item {
break-inside: avoid;
display: flex;
align-items: baseline;
gap: var(--s-3);
padding-block: 0.55em;
border-block-end: var(--border);
font-size: var(--t-small);
color: var(--c-ink-soft);
transition: color var(--d-base) var(--e-in-out);
}
/* A hairline tick that fills on hover — the list should feel checkable. */
.catalogue__item::before {
content: '';
flex: none;
inline-size: 6px;
block-size: 6px;
border: 1px solid var(--c-line-strong);
border-radius: 1px;
transition:
background var(--d-base) var(--e-in-out),
border-color var(--d-base) var(--e-in-out);
}
.catalogue__item:hover {
color: var(--c-ink);
}
.catalogue__item:hover::before {
background: var(--c-accent);
border-color: var(--c-accent);
}
@media (max-width: 1080px) {
.catalogue__list {
columns: 2;
}
}
@media (max-width: 900px) {
.catalogue__panel {
grid-template-columns: minmax(0, 1fr);
}
.catalogue__aside {
position: static;
}
}
@media (max-width: 560px) {
.catalogue__list {
columns: 1;
}
}
/* ------------------------------------------------------------ custom panel */
/* The fourth category has no list — it is an invitation, so it gets a
completely different composition from the other three. */
.catalogue__custom {
grid-column: 2;
display: flex;
flex-direction: column;
gap: var(--s-6);
align-items: start;
padding: clamp(var(--s-6), 4vw, var(--s-8));
border: 1px dashed var(--c-line-strong);
border-radius: var(--r-lg);
background: var(--c-canvas-sunk);
}
.catalogue__custom-title {
max-inline-size: 20ch;
}
@media (max-width: 900px) {
.catalogue__custom {
grid-column: 1;
}
}
/* =============================================================================
Family colour.
Each of the four workflow families carries its own hue, set on the panel and
inherited by the numeral, the icon and the list ticks. This is categorical
colour doing a job — telling manufacturing from warehouse at a glance — not
decoration, which is why it appears here and almost nowhere else.
========================================================================== */
.catalogue__panel {
--family: var(--c-accent);
--family-soft: var(--c-accent-soft);
}
.catalogue__panel[data-family='warehouse'] {
--family: var(--c-slate);
--family-soft: var(--c-slate-soft);
}
.catalogue__panel[data-family='office'] {
--family: var(--c-ochre);
--family-soft: var(--c-ochre-soft);
}
.catalogue__panel[data-family='custom'] {
--family: var(--c-clay);
--family-soft: var(--c-clay-soft);
}
.catalogue__num {
color: var(--family);
opacity: 0.28;
}
.catalogue__aside .icon-well {
color: var(--family);
border-color: color-mix(in srgb, var(--family) 35%, transparent);
background: var(--family-soft);
}
.catalogue__item:hover::before {
background: var(--family);
border-color: var(--family);
}
.catalogue__custom {
border-color: color-mix(in srgb, var(--family) 45%, transparent);
background: color-mix(in srgb, var(--family-soft) 55%, var(--c-canvas));
}
/* The active tab picks up its family colour rather than flat ink, so the tab
row previews the palette of the panel it opens. */
.catalogue__tabs .tab[aria-selected='true'] {
background: var(--tab-family, var(--c-ink));
border-color: var(--tab-family, var(--c-ink));
}
/* ==== assets/css/sections/transform.css ==== */
/* =============================================================================
Before / after transformation (Animation B).
The first dark section on the page. Twelve steps on the left collapse into
five on the right; steps sharing a merge key slide together and fade, so the
reduction reads as consolidation rather than deletion.
========================================================================== */
.transform {
background: var(--c-canvas);
color: var(--c-ink);
--progress: 0;
}
.transform__controls {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
padding-block-end: var(--s-6);
border-block-end: 1px solid var(--c-line);
}
.transform__stage {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(var(--s-5), 3.5vw, var(--s-8));
padding-block: var(--s-6);
position: relative;
}
/* A single hairline between the two columns — the seam the work crosses. */
.transform__stage::before {
content: '';
position: absolute;
inset-block: var(--s-6);
inset-inline-start: 50%;
inline-size: 1px;
background: var(--c-line);
}
/* Grid children default to min-width:auto, which lets a long step label push
the column wider than its track and overflow the section. */
.transform__column {
min-inline-size: 0;
}
.transform__column-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
padding-block-end: var(--s-3);
border-block-end: 1px solid var(--c-line);
margin-block-end: var(--s-5);
color: var(--c-muted);
}
.transform__count {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: var(--c-ink);
}
.transform__list {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
/* ------------------------------------------------------------ before step */
.transform__step {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: 0.42em 0.75em;
/* Clay marks the before side throughout the page. */
border: 1px solid color-mix(in srgb, var(--c-clay) 45%, transparent);
border-radius: var(--r-sm);
background: var(--c-canvas-sunk);
font-size: var(--t-small);
transform-origin: top;
transition:
opacity var(--d-slow) var(--e-in-out),
transform var(--d-slow) var(--e-in-out),
border-color var(--d-slow) var(--e-in-out),
margin var(--d-slow) var(--e-in-out);
}
/* Steps that merge into an existing one collapse upward and fade. Height is
animated via margin + scaleY so no layout is measured per frame. */
.transform__step[data-merged='true'] {
opacity: 0;
transform: translateY(-8px) scaleY(0.4);
margin-block-end: calc(var(--s-2) * -1 - 2.6em);
pointer-events: none;
}
.transform__step-label {
min-inline-size: 0;
}
.transform__friction {
flex: none;
}
/* ------------------------------------------------------------- after step */
.transform__after-step {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: 0.5em 0.8em;
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
background: transparent;
font-size: var(--t-small);
opacity: 0.25;
transform: translateX(-6px);
transition:
opacity var(--d-slow) var(--e-out),
transform var(--d-slow) var(--e-out),
border-color var(--d-slow) var(--e-out),
background var(--d-slow) var(--e-out);
}
.transform__after-step[data-active='true'] {
opacity: 1;
transform: none;
border-color: var(--c-accent);
background: var(--c-accent-soft);
}
.transform__foot {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s-5) var(--s-7);
align-items: start;
padding-block-start: var(--s-5);
border-block-start: 1px solid var(--c-line);
}
.transform__impact {
display: flex;
flex-direction: column;
gap: var(--s-2);
color: var(--c-ink-soft);
}
.transform__impact li {
display: flex;
gap: var(--s-3);
font-size: var(--t-small);
}
.transform__impact li::before {
content: '→';
color: var(--c-accent);
flex: none;
}
@media (max-width: 860px) {
.transform__stage {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-7);
}
/* The seam becomes horizontal so the two columns still read as one crossing. */
.transform__stage::before {
inset: auto 0 auto 0;
inset-block-start: 50%;
inline-size: auto;
block-size: 1px;
}
.transform__foot {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==== assets/css/sections/factory.css ==== */
/* =============================================================================
Manufacturing section.
Three operational objects showing situations a factory actually has to
handle. The linear production flow lives in the rail section instead, so this
section is not a second diagram of the same sequence.
========================================================================== */
/* ------------------------------------------------------------------ cases */
.factory__cases {
margin-block-start: var(--s-7);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-gap);
}
@media (max-width: 980px) {
.factory__cases {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 660px) {
.factory__cases {
grid-template-columns: minmax(0, 1fr);
}
}
.factory__case .obj__body {
gap: var(--s-4);
}
/* The replenishment chain reveals link by link once the card is in view. */
.factory__chain {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
padding-block-start: var(--s-3);
border-block-start: var(--border);
}
.factory__chain > * {
opacity: 0;
transform: translateX(-4px);
transition:
opacity var(--d-base) var(--e-out),
transform var(--d-base) var(--e-out);
transition-delay: calc(var(--link-index, 0) * 130ms);
}
.factory__chain[data-run='true'] > * {
opacity: 1;
transform: none;
}
.factory__chain-arrow {
color: var(--c-line-strong);
font-size: 0.75rem;
}
/* ---------------------------------------------------------------- states */
.factory__states {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
padding-block-start: var(--s-3);
border-block-start: var(--border);
}
.factory__state {
padding: 0.25em 0.6em;
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-muted);
transition:
background var(--d-base) var(--e-in-out),
color var(--d-base) var(--e-in-out),
border-color var(--d-base) var(--e-in-out);
}
.factory__state[data-done] {
color: var(--c-ink-soft);
border-color: var(--c-line-strong);
}
.factory__state[data-current] {
background: var(--c-stop);
border-color: var(--c-stop);
color: #fbfbf7;
}
.factory__reason {
color: var(--c-stop);
text-transform: none;
letter-spacing: 0.02em;
}
/* --------------------------------------------------------------- decision */
.factory__decision {
display: flex;
gap: var(--s-2);
padding-block-start: var(--s-3);
border-block-start: var(--border);
}
/* The quality card resolves to Pass once it has been on screen a moment — the
decision is shown being made, not just listed. */
.factory__decision .tag[data-chosen='true'] {
background: var(--c-accent-soft);
color: var(--c-accent-deep);
}
.factory__decision .tag[data-chosen='false'] {
opacity: 0.4;
}
/* ==== assets/css/sections/warehouse.css ==== */
/* =============================================================================
Warehousing section.
An abstract bin map in CSS grid (no 3D warehouse, no isometric clichés) beside
a handheld scanner. The scanner is the artwork — it is the interface the
warehouse team would actually hold.
========================================================================== */
/*
* The pinned track.
*
* Only above 900px, where the map and the handheld sit side by side and the
* pair is short enough to hold still on screen. Below that they stack into a
* column taller than the viewport, where pinning would park a tall element
* against the top and leave a screen of nothing under it — so the track
* collapses to its natural height and the sequence runs as the stage scrolls
* past, which motion.js falls back to on its own.
*/
.warehouse__track {
position: relative;
}
@media (min-width: 900px) {
.warehouse__track {
min-block-size: var(--warehouse-length, 200vh);
}
/* Centred in whatever the viewport has left, rather than parked under the
nav with a third of a screen of nothing beneath it. --stage-h is written
by warehouse.js; the max() keeps it clear of the strip and nav on short
windows, where centring would slide it up underneath them. */
.warehouse__stage {
position: sticky;
inset-block-start: max(
var(--pin-top),
calc((100vh - var(--stage-h, 28rem)) / 2)
);
}
}
.warehouse__stage {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.8fr);
gap: clamp(var(--s-6), 5vw, var(--s-9));
align-items: start;
margin-block: var(--s-7);
}
@media (max-width: 900px) {
.warehouse__stage {
grid-template-columns: minmax(0, 1fr);
}
}
/* -------------------------------------------------------------------- map */
.warehouse__map {
display: flex;
flex-direction: column;
gap: var(--s-5);
padding: clamp(var(--s-5), 3vw, var(--s-7));
border: var(--border);
border-radius: var(--r-lg);
background: var(--c-canvas-sunk);
}
.warehouse__zones {
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.warehouse__zone {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.warehouse__zone-label {
color: var(--c-muted);
}
/* Exactly four, not auto-fill. auto-fill sized the tracks to whatever the
column happened to be and left the last bay empty whenever the count and the
fit disagreed; a rack has a fixed number of bays, so the grid should too. */
.warehouse__bins {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-2);
}
@media (max-width: 520px) {
.warehouse__bins {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.warehouse__bin {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s-3) var(--s-2);
border: 1px solid var(--c-line);
border-radius: var(--r-xs);
background: var(--c-canvas);
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-muted);
text-align: center;
transition:
background var(--d-base) var(--e-in-out),
border-color var(--d-base) var(--e-in-out),
color var(--d-base) var(--e-in-out);
}
/* Fill level, drawn as a bar at the base of the bin rather than a number. */
.warehouse__bin::after {
content: '';
position: absolute;
inset-inline: 3px;
inset-block-end: 3px;
block-size: 3px;
border-radius: 1px;
background: var(--c-line-strong);
transform: scaleX(var(--fill, 0));
transform-origin: left;
transition: transform 900ms var(--e-out);
}
.warehouse__bin[data-state='stored'] {
border-color: var(--c-line-strong);
color: var(--c-ink-soft);
}
.warehouse__bin[data-state='active'] {
border-color: var(--c-accent);
background: var(--c-accent-soft);
color: var(--c-accent-deep);
}
.warehouse__bin[data-state='active']::after {
background: var(--c-accent);
}
.warehouse__legend {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
padding-block-start: var(--s-4);
border-block-start: var(--border);
}
.warehouse__legend span {
display: inline-flex;
align-items: center;
gap: var(--s-2);
}
.warehouse__key {
inline-size: 10px;
block-size: 10px;
border: 1px solid var(--c-line);
border-radius: 2px;
}
/* An empty bin is the outline alone — stated explicitly so the legend's three
states are all defined in one place rather than one relying on the default. */
.warehouse__key--empty {
background: transparent;
}
.warehouse__key--stored {
border-color: var(--c-line-strong);
background: var(--c-panel);
}
.warehouse__key--active {
border-color: var(--c-accent);
background: var(--c-accent-soft);
}
/* ---------------------------------------------------------------- scanner */
.warehouse__scanner {
position: sticky;
inset-block-start: calc(var(--strip-height, 44px) + 6rem);
}
.scanner {
display: flex;
flex-direction: column;
border: 1px solid var(--c-line-strong);
border-radius: var(--r-lg);
background: var(--c-canvas);
overflow: hidden;
box-shadow: var(--shadow-lift);
}
.scanner__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s-3) var(--s-4);
border-block-end: var(--border);
color: var(--c-muted);
}
.scanner__screen {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: var(--s-6) var(--s-5);
background: var(--c-dark);
color: var(--c-dark-ink);
min-block-size: 11rem;
overflow: hidden;
}
.scanner__prompt {
color: var(--c-dark-muted);
}
.scanner__code {
font-family: var(--font-mono);
animation: scanner-code var(--d-slow) var(--e-out);
font-size: clamp(1.5rem, 3vw, 2rem);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.scanner__confirm {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: var(--ls-micro);
text-transform: uppercase;
color: var(--c-accent-on-dark);
opacity: 0;
transform: translateY(4px);
transition:
opacity var(--d-slow) var(--e-out),
transform var(--d-slow) var(--e-out);
/* Lands after the beam has swept, so the tick reads as the RESULT of the
scan rather than as something that happened alongside it. */
transition-delay: 1800ms;
}
.scanner__screen[data-confirmed='true'] .scanner__confirm {
opacity: 1;
transform: none;
}
.scanner__tick {
display: grid;
place-items: center;
inline-size: 16px;
block-size: 16px;
border-radius: 50%;
border: 1px solid currentcolor;
font-size: var(--t-nano);
}
/* A single sweep on each scan. Runs once per step, not continuously. */
.scanner__beam {
position: absolute;
inset-inline: 0;
block-size: 2px;
background: linear-gradient(
90deg,
transparent,
var(--c-accent-on-dark),
transparent
);
opacity: 0;
inset-block-start: 0;
}
/* 1.6s, not 620ms. A real handheld takes a beat to read a label, and at the old
speed the sweep was over before the eye found it — the section's one moment
of "something just happened" was invisible. Slow enough to notice, still only
once per scan. */
.scanner__screen[data-scanning='true'] .scanner__beam {
animation: scanner-sweep 2600ms var(--e-in-out);
}
@keyframes scanner-code {
from {
opacity: 0;
translate: 0 6px;
}
}
@keyframes scanner-sweep {
0% {
opacity: 0;
transform: translateY(0);
}
12% {
opacity: 0.9;
}
82% {
opacity: 0.9;
}
100% {
opacity: 0;
transform: translateY(11rem);
}
}
.scanner__steps {
display: flex;
flex-direction: column;
}
.scanner__step {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-block-start: var(--border);
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-muted);
transition: color var(--d-base) var(--e-in-out);
}
.scanner__step-dot {
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
border: 1px solid var(--c-line-strong);
flex: none;
transition:
background var(--d-base) var(--e-in-out),
border-color var(--d-base) var(--e-in-out);
}
.scanner__step[data-done='true'] {
color: var(--c-ink-soft);
}
.scanner__step[data-done='true'] .scanner__step-dot {
background: var(--c-accent);
border-color: var(--c-accent);
}
.scanner__step[data-active='true'] {
color: var(--c-accent-deep);
}
/* ---------------------------------------------------------------- journey */
.warehouse__journey {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
padding-block: var(--s-6);
border-block: var(--border-strong);
}
.warehouse__leg {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 0.5em 0.9em;
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: var(--ls-micro);
text-transform: uppercase;
color: var(--c-muted);
transition:
background var(--d-base) var(--e-in-out),
border-color var(--d-base) var(--e-in-out),
color var(--d-base) var(--e-in-out);
}
.warehouse__leg[data-done='true'] {
border-color: var(--c-accent);
background: var(--c-accent-soft);
color: var(--c-accent-deep);
}
@media (max-width: 900px) {
.warehouse__scanner {
position: static;
}
.scanner {
max-inline-size: 26rem;
}
}
@media (prefers-reduced-motion: reduce) {
.scanner__screen[data-scanning='true'] .scanner__beam {
animation: none;
}
}
/* ==== assets/css/sections/follow.css ==== */
/* =============================================================================
Follow the job.
The section that closes the "for manufacturing" / "for warehousing" pair. It
replaced two photographs — one at the foot of each — that were decorative:
a floor and an aisle, captioned, sitting after the argument rather than
making it. One object that carries both sections is a stronger close than
two pictures that carry neither.
Left: the five moments, in words, as buttons.
Right: the same five moments as a stack of cards that deals itself.
The story is deliberately the SAME job the rail near the top of the page
carries — order SO-4471, three hundred units for Ashgrove Ltd. The rail shows
it as records; this shows it as places. A reader who has scrolled past both
should recognise the codes.
========================================================================== */
.follow__inner {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
align-items: center;
gap: clamp(var(--s-6), 5vw, var(--s-9));
}
.follow__words {
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.follow__lead {
max-inline-size: var(--measure);
}
/* ------------------------------------------------------------------- steps */
/*
* The story in words.
*
* This is not a legend for the animation, it is the argument: five moments,
* each with the record it produced. It reads on its own with the stack removed,
* with motion off, and to a screen reader — and it is the keyboard route into a
* stack that would otherwise only answer to a mouse.
*/
.follow__steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border-block-start: var(--border);
}
.follow__step {
inline-size: 100%;
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr) auto;
align-items: baseline;
gap: var(--s-3);
padding-block: var(--s-3);
padding-inline: 0;
text-align: start;
background: none;
border: 0;
border-block-end: var(--border);
color: var(--c-muted);
cursor: pointer;
font: inherit;
transition:
color var(--d-base) var(--e-out),
background-color var(--d-base) var(--e-out);
}
.follow__step:hover {
color: var(--c-ink);
}
/* The current moment. Not a highlight for its own sake: it is the only thing
tying the words to whichever card is at the front. */
.follow__step[aria-current='true'] {
color: var(--c-ink);
}
.follow__step-index {
font-size: var(--t-nano);
letter-spacing: var(--ls-micro);
color: var(--c-line-strong);
transition: color var(--d-base) var(--e-out);
}
.follow__step[aria-current='true'] .follow__step-index {
color: var(--c-accent);
}
.follow__step-name {
font-size: var(--t-body);
}
.follow__step[aria-current='true'] .follow__step-name {
font-weight: 500;
}
.follow__step-code {
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: var(--ls-micro);
color: var(--c-muted);
font-variant-numeric: tabular-nums;
}
.follow__step[aria-current='true'] .follow__step-code {
color: var(--c-accent);
}
/* A rule that fills in under the current step, so the eye can find it without
the row changing size and shunting the four below it. */
.follow__step {
position: relative;
}
.follow__step::after {
content: '';
position: absolute;
inset-block-end: -1px;
inset-inline-start: 0;
block-size: 1px;
inline-size: 0;
background: var(--c-accent);
transition: inline-size var(--d-slow) var(--e-out);
}
.follow__step[aria-current='true']::after {
inline-size: 100%;
}
/* ------------------------------------------------------------------- stack */
/*
* The stage.
*
* A fixed aspect box so the section's height never depends on where the cards
* happen to be mid-swap, and the perspective lives here rather than on the
* cards, so all five share one vanishing point. `overflow: clip` on the inline
* axis alone would still let the falling card show; it is not clipped at all,
* because the fall is the move.
*/
.follow__stage {
position: relative;
aspect-ratio: 5 / 4;
perspective: 1100px;
perspective-origin: 45% 45%;
/* How far apart the cards sit. Read by cardswap.js — the offsets are a
responsive question and this is where this project answers those.
--swap-turn is the angle the cards are presented at, and it is a rotateY
rather than the original's skewY. Both tilt a card; only the rotation is a
real one. The skew shears, so the codes and names came out slanted like a
rendering fault, where a rotation is foreshortened by the perspective above
and stays true. --swap-skew is still read, so the original shear can be put
back with a number, but it is off. */
/* Scaled, not fixed. The card's width is the stage minus this fan four times
over, so a constant offset that reads well at 1920 eats the card alive on a
narrow one: at a flat 74px the card had collapsed to 170px by 1024, with
the record squeezed and the photograph a stamp. */
--swap-dx: clamp(30px, 4.6vw, 74px);
--swap-dy: clamp(28px, 3.6vw, 58px);
--swap-turn: -19;
--swap-skew: 0;
}
/*
* Every card is placed on the same point and separated only by its transform,
* so the stack stays concentric whatever the card size. The size is set here
* rather than in script: a card is a piece of layout.
*/
.swapcard {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
/* The stage has to hold the front card AND the fan of the four behind it.
--swap-span is that fan, written by cardswap.js, which is the only side
that knows the card count. The floor keeps the record readable when the
subtraction gets aggressive on a narrow phone. */
inline-size: max(11rem, min(100% - var(--swap-span, 0px), 25rem));
margin: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--c-line-strong);
border-radius: var(--r-md);
background: var(--c-panel);
box-shadow: var(--shadow-card);
transform-style: preserve-3d;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
cursor: pointer;
transition:
border-color var(--d-base) var(--e-out),
box-shadow var(--d-base) var(--e-out);
}
/* The card at the front is the one being read, so it is the one that is lit. */
.swapcard[data-front='true'] {
border-color: var(--c-accent);
box-shadow: var(--shadow-lift);
}
.follow__stage:hover .swapcard[data-front='true'] {
border-color: var(--c-accent-deep);
}
.swapcard__shot {
position: relative;
aspect-ratio: 4 / 3;
background: var(--c-canvas-sunk);
}
.swapcard__shot img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
/* The placeholder fills the shot exactly, so dropping the photograph in changes
nothing about the card's size. */
.swapcard__ph {
position: absolute;
inset: 0;
border: 0;
border-radius: 0;
gap: var(--s-1);
padding: var(--s-4);
}
/* Same reasoning as the foot: in the few millimetres of a card that show behind
the front one, a stray half-glyph of the brief reads as breakage. The hatch
stays, so the edge still looks like a card. Once the photographs land there is
no .ph here at all and this rule stops applying to anything. */
.swapcard[data-front='false'] .swapcard__ph > * {
opacity: 0;
transition: opacity var(--d-slow) var(--e-out);
}
/*
* The foot is the record the moment produced: a code and a name, set the way
* every other record on this site is set. It is what makes the photograph
* evidence rather than decoration.
*/
/*
* Only the front card's record is legible.
*
* The cards behind show a few millimetres of their right edge, and with the
* text left in that sliver was the tail of a code — "…B", "…41" — which reads
* as something clipped rather than as a stack. The bar itself stays, so the
* edge still has the card's structure in it, and the record fades up as its
* card arrives.
*/
.swapcard__foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-block-start: var(--border);
background: var(--c-canvas);
}
.swapcard__foot > * {
transition: opacity var(--d-slow) var(--e-out);
}
.swapcard[data-front='false'] .swapcard__foot > * {
opacity: 0;
}
.swapcard__name {
font-size: var(--t-small);
font-weight: 500;
color: var(--c-ink);
}
.swapcard__code {
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: var(--ls-micro);
color: var(--c-accent);
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------- narrower */
/*
* One column earlier than the rest of the page collapses.
*
* Two columns leave the stage under 480px below about 1200px, and the stage has
* to hold a card AND the fan of four behind it — so the card was being squeezed
* long before the type was. Given the whole width the stack has room again, and
* the stage is capped so it does not sprawl across a tablet.
*/
@media (max-width: 1100px) {
.follow__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-7);
}
/* Words and stack share one column and one width, so the step rows do not
run the full shell while the stack sits centred under them — which read as
two different layouts stacked on each other rather than one. */
.follow__words {
inline-size: min(100%, 38rem);
justify-self: center;
}
/* The stack needs less room to lean into when it is not beside a column of
type, and a shallower angle keeps the rearmost card legible. */
.follow__stage {
aspect-ratio: 4 / 3;
/* An explicit width, and justify-self rather than an auto margin. Every
child here is absolutely positioned, so the moment the auto margin took
the grid item off stretch its shrink-to-fit width was zero — the stage
measured 0x0, the cards were placed around a point at the far left of the
page, and the whole stack landed outside the section. */
inline-size: min(100%, 38rem);
justify-self: center;
--swap-dx: clamp(30px, 5.4vw, 56px);
--swap-dy: clamp(28px, 4.4vw, 48px);
--swap-turn: -16;
}
}
@media (max-width: 560px) {
.follow__stage {
aspect-ratio: 1 / 1;
--swap-dx: 30px;
--swap-dy: 28px;
--swap-turn: -13;
inline-size: 100%;
}
.follow__step {
grid-template-columns: 2rem minmax(0, 1fr);
row-gap: var(--s-1);
}
/* The code drops under the name rather than being squeezed against it. */
.follow__step-code {
grid-column: 2;
}
}
/* -------------------------------------------------------- reduced motion */
/*
* No stack. The cards become a plain list, every one readable at once.
*
* A frozen three-quarter stack would be a still of an animation, and only its
* front card could be read — which is not the story, it is one fifth of it.
* cardswap.js clears the inline transforms it would otherwise have written.
*/
@media (prefers-reduced-motion: reduce) {
.follow__stage {
aspect-ratio: auto;
perspective: none;
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.swapcard {
position: relative;
inset: auto;
inline-size: 100%;
transform: none;
will-change: auto;
cursor: default;
border-color: var(--c-line-strong);
box-shadow: var(--shadow-card);
}
/* Every card is being read here, so every record and brief has to be
legible. */
.swapcard[data-front='false'] .swapcard__foot > *,
.swapcard[data-front='false'] .swapcard__ph > * {
opacity: 1;
}
}
/* ==== assets/css/sections/explorer.css ==== */
/* =============================================================================
Workflow explorer — the small diagnostic.
Options on the left, a proposed shape on the right. Kept deliberately light:
this is a conversation starter, not a lead-capture step.
========================================================================== */
/* Shares the sunk ground with the stack calculator: the two sections that are
instruments rather than reading sit on the same surface. */
.explorer {
background: var(--c-canvas-sunk);
}
.explorer__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(var(--s-6), 5vw, var(--s-9));
align-items: start;
}
@media (max-width: 900px) {
.explorer__body {
grid-template-columns: minmax(0, 1fr);
}
}
/*
* The line list.
*
* Each row carries a single --effect between 0 and 1, written by line-list.js
* from the cursor's vertical distance. Everything below derives from that one
* value, which is what keeps the colour, the shift, the rule and the number
* moving as one gesture instead of four transitions easing separately.
*
* The left gutter is the rule's runway: it has to be reserved in the layout,
* because a rule that grew by pushing the text would relayout the column on
* every frame.
*/
.explorer__options {
display: flex;
flex-direction: column;
padding-inline-start: var(--rule-length, 56px);
}
/* Full-width rows rather than buttons in a grid, so the list reads like a set
of honest admissions. */
.explorer__option {
--effect: 0;
--rule-length: 56px;
position: relative;
display: flex;
align-items: baseline;
gap: var(--s-4);
inline-size: 100%;
padding: var(--s-5) var(--s-3);
text-align: start;
border-block-end: var(--border);
font-size: clamp(1rem, 1.5vw, 1.15rem);
/* From muted toward the accent as the cursor arrives. */
color: color-mix(
in srgb,
var(--c-accent-deep) calc(var(--effect) * 100%),
var(--c-ink-soft)
);
/* Transform, not padding: the row slides toward the reader without the
column relaying out beneath it. */
transform: translateX(calc(var(--effect) * 14px));
cursor: pointer;
}
/* A faint accent wash follows the cursor down the column, so the row under it
looks pressable before it is pressed. */
.explorer__option:not([aria-checked='true']) {
background: linear-gradient(
to right,
color-mix(in srgb, var(--c-accent-soft) calc(var(--effect) * 55%), transparent),
transparent 70%
);
}
.explorer__option:first-child {
border-block-start: var(--border);
}
/* The rule reaching out of the gutter. It starts short and grows with
proximity, so the column reads as a scale being tracked. */
.explorer__rule {
position: absolute;
inset-block-start: 50%;
inset-inline-start: calc(-1 * var(--rule-length));
inline-size: var(--rule-length);
block-size: 1px;
transform-origin: left center;
transform: translateY(-50%) scaleX(calc(0.42 + var(--effect) * 0.58));
background: color-mix(
in srgb,
var(--c-accent) calc(var(--effect) * 100%),
var(--c-line-strong)
);
}
/* A short static tick between rows, centred on the border. It gives the
gutter a rhythm so the growing rule has something to measure against. */
.explorer__option:not(:last-child)::after {
content: '';
position: absolute;
inset-block-end: -1px;
inset-inline-start: calc(-1 * var(--rule-length));
inline-size: calc(var(--rule-length) * 0.38);
block-size: 1px;
background: var(--c-line);
}
.explorer__index {
flex: none;
color: var(--c-muted);
opacity: calc(0.5 + var(--effect) * 0.5);
}
.explorer__label {
flex: 1;
}
@media (max-width: 620px) {
/* The gutter is a luxury at phone width; the rule tucks in behind the row
rather than eating a third of the line length. */
.explorer__options {
padding-inline-start: var(--s-5);
}
.explorer__option {
--rule-length: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.explorer__option {
transform: none;
}
}
/* The chosen row. An accent fill behind it and a solid rule beside it, so the
answer you picked is obvious from across the page rather than a shade of
grey away from the ones you did not. */
.explorer__option[aria-checked='true'] {
color: var(--c-accent-deep);
font-weight: 500;
background: linear-gradient(
to right,
var(--c-accent-soft),
color-mix(in srgb, var(--c-accent-soft) 25%, transparent) 78%,
transparent
);
}
.explorer__option[aria-checked='true'] .explorer__index {
color: var(--c-accent-deep);
opacity: 1;
}
/* The arrow. This is what says the row is a control: a list of sentences with
no affordance reads as copy, and nobody clicks copy. It is always present so
the row is obviously clickable at rest, and slides in as you approach. */
.explorer__arrow {
flex: none;
margin-inline-start: auto;
color: var(--c-accent);
opacity: calc(0.3 + var(--effect) * 0.7);
transform: translateX(calc(var(--effect) * 6px));
}
.explorer__option[aria-checked='true'] .explorer__arrow {
opacity: 1;
}
/* ----------------------------------------------------------------- output */
.explorer__output {
position: sticky;
inset-block-start: calc(var(--strip-height, 44px) + 6rem);
padding: clamp(var(--s-5), 3vw, var(--s-7));
border: var(--border);
border-radius: var(--r-lg);
/* Raised off the section's sunk ground so the answer panel reads as the
output of the control beside it. */
background: var(--c-canvas);
min-block-size: 22rem;
display: flex;
flex-direction: column;
gap: var(--s-5);
}
/* Content swaps are cross-faded by toggling this class, so the panel never
flashes empty between selections. */
.explorer__content {
display: flex;
flex-direction: column;
gap: var(--s-5);
opacity: 1;
transform: none;
transition:
opacity var(--d-base) var(--e-out),
transform var(--d-base) var(--e-out);
}
.explorer__content[data-swapping='true'] {
opacity: 0;
transform: translateY(6px);
}
.explorer__reading {
font-size: var(--t-lead);
line-height: 1.4;
letter-spacing: -0.018em;
text-wrap: pretty;
}
.explorer__proposal {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding-block-start: var(--s-5);
border-block-start: var(--border);
}
.explorer__step {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 0.65em 0.9em;
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
background: var(--c-canvas-sunk);
font-size: var(--t-small);
opacity: 0;
transform: translateY(6px);
animation: explorer-step-in var(--d-slow) var(--e-out) forwards;
animation-delay: calc(var(--step-index, 0) * 90ms);
}
@keyframes explorer-step-in {
to {
opacity: 1;
transform: none;
}
}
.explorer__step-index {
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: 0.08em;
color: var(--c-accent);
flex: none;
}
.explorer__note {
font-size: var(--t-small);
color: var(--c-muted);
text-wrap: pretty;
}
.explorer__cta {
margin-block-start: auto;
padding-block-start: var(--s-5);
border-block-start: var(--border);
}
@media (max-width: 900px) {
.explorer__output {
position: static;
min-block-size: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.explorer__step {
animation: none;
opacity: 1;
transform: none;
}
}
/* ==== assets/css/sections/approach.css ==== */
/* =============================================================================
Approach + implementation.
Three quieter, type-led sections. They share this file because they share one
idea: numbered sequence as the composition, no cards.
========================================================================== */
/* --------------------------------------------------------------- approach */
.approach__stages {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-7) var(--grid-gap);
padding-block: var(--s-8);
}
.approach__stage {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding-block-start: var(--s-5);
border-block-start: var(--border-strong);
}
.approach__stage .icon-well {
margin-block-end: var(--s-2);
}
/* The numeral is the graphic. Set in the outline colour so it recedes behind
the heading rather than competing with it. */
.approach__num {
font-size: clamp(3rem, 6vw, 5.5rem);
color: var(--c-line-strong);
}
@media (max-width: 860px) {
.approach__stages {
grid-template-columns: minmax(0, 1fr);
}
}
/* The miniature process map: tangled paths on the left resolving to parallel
ones on the right, drawn as the section scrolls. */
.approach__map {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding-block-start: var(--s-6);
border-block-start: var(--border);
--progress: 0;
}
.approach__map svg {
inline-size: 100%;
block-size: auto;
}
.approach__path {
fill: none;
stroke: var(--c-line-strong);
stroke-width: 1.25;
stroke-dasharray: var(--len, 600);
stroke-dashoffset: calc(var(--len, 600) * (1 - var(--progress)));
}
.approach__path--clean {
stroke: var(--c-accent);
}
.approach__map-label {
text-align: end;
}
/* --------------------------------------------------------- implementation */
.implementation__steps {
display: flex;
flex-direction: column;
border-block-start: var(--border-strong);
}
/* A stepped indent: each row starts slightly further in than the last, so the
list visibly narrows — the messy process becoming a clean one. */
.implementation__step {
display: grid;
grid-template-columns: 11rem minmax(0, 1fr);
gap: var(--s-4) var(--s-6);
align-items: baseline;
padding-block: var(--s-6);
border-block-end: var(--border);
padding-inline-start: calc(var(--step-indent, 0) * 1.6rem);
transition: padding-inline-start var(--d-slow) var(--e-out);
}
/* The icon and the step number travel together in the left column. */
.implementation__lead {
display: flex;
align-items: center;
gap: var(--s-4);
}
.implementation__index {
color: var(--c-accent);
}
.implementation__step .prose {
grid-column: 2;
max-inline-size: 54ch;
}
@media (max-width: 720px) {
.implementation__step {
grid-template-columns: minmax(0, 1fr);
padding-inline-start: 0;
}
.implementation__step .prose {
grid-column: 1;
}
}
/* ==== assets/css/sections/economics.css ==== */
/* =============================================================================
Economics — the bill, itemised.
This section closes the argument, so it has to make one. What was here
before did not: a grid of twenty-four abstract squares, twenty-two "proven"
and two "custom", deliberately unlabelled because the copy beside it promised
not to claim a percentage. It was artwork built to avoid saying something,
which is the definition of decoration.
The replacement says the thing directly, and says it in the object language
the rest of the site already speaks: two bills, side by side. An agency's
itemises itself line by line and only ONE of those lines is the build. Ours
has four and all four are. No figure is claimed anywhere — the LENGTH of the
two lists is the whole argument, which keeps the section's promise intact
while making its point far harder than a percentage would.
The ground moved off --c-tint-clay too. It was the only clay-grounded
section on a page that otherwise runs green and canvas, which is why it read
as belonging to a different site.
========================================================================== */
/* ------------------------------------------------------------------- bills */
.bills {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(var(--s-5), 3vw, var(--s-7));
align-items: start;
margin-block: var(--s-8);
}
/*
* One bill. Deliberately the same object as the rail's records and the
* follow section's cards: a head with a code, ruled rows, a foot that totals.
* A reader who has come down the page has been reading this shape all along.
*/
.bill {
display: flex;
flex-direction: column;
border: var(--border);
border-radius: var(--r-md);
background: var(--c-canvas);
overflow: hidden;
}
/*
* The agency's bill is the state of things, not the proposal, so it stays in
* the page's plain register: no accent anywhere on it except the one row that
* is actually the build. It is also the taller of the two by three rows, and
* that height is doing the arguing, so nothing else on it should compete.
*/
.bill--via {
border-color: var(--c-line);
background: var(--c-canvas-sunk);
}
.bill--via .bill__head {
background: var(--c-panel);
}
/* Ours is the one being argued for, so it is the one that is lit. */
.bill--direct {
border-color: var(--c-accent);
}
.bill__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
border-block-end: var(--border);
background: var(--c-canvas-sunk);
}
.bill--direct .bill__head {
border-block-end-color: var(--c-accent);
background: var(--c-accent-soft);
}
.bill__who {
font-size: var(--t-micro);
letter-spacing: var(--ls-micro);
text-transform: uppercase;
color: var(--c-muted);
}
.bill--direct .bill__who {
color: var(--c-accent);
}
/*
* The running count.
*
* It counts LINES, not money — it ticks up as the rows land, so the number is
* only ever a description of what is already on screen. That is what keeps it
* on the right side of the section's promise: nothing here is a price.
*/
.bill__count {
font-size: var(--t-micro);
letter-spacing: var(--ls-micro);
color: var(--c-muted);
font-variant-numeric: tabular-nums;
}
.bill--direct .bill__count {
color: var(--c-accent);
}
.bill__lines {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
/*
* A ruled docket that gets written on, rather than rows that appear.
*
* The row itself — its rule, its height — is there from the start; only the
* writing arrives. This matters more than it sounds: with the whole row fading
* in, our bill sat as a large empty bordered box for the two seconds the
* agency's took to itemise, and an empty box reads as something failing to
* load. Two ruled dockets, one visibly shorter than the other, make the
* argument the instant the section is on screen — and then ink themselves in.
*/
.bill__line {
--in: 0;
display: flex;
align-items: baseline;
gap: var(--s-3);
padding: var(--s-3) var(--s-5);
border-block-end: var(--border);
font-size: var(--t-small);
color: var(--c-muted);
}
.bill__label {
opacity: var(--in);
transform: translateX(calc((1 - var(--in)) * -0.4rem));
transition:
opacity var(--d-base) var(--e-out),
transform var(--d-base) var(--e-out);
}
.bill__line:last-child {
border-block-end: 0;
}
/*
* The line that is actually the work.
*
* On the agency bill exactly one row carries this, and it is the last to land —
* so the reader watches six lines of coordination stack up before the build
* finally arrives. On our bill every row carries it. That contrast is the
* argument, and it is made without a single number.
*/
.bill__line[data-build] {
color: var(--c-ink);
font-weight: 500;
}
.bill__line[data-build]::before {
content: '';
inline-size: 6px;
block-size: 6px;
flex: none;
align-self: center;
border-radius: 50%;
background: var(--c-accent);
transform: scale(var(--in));
transition: transform var(--d-slow) var(--e-snap);
}
/* Coordination rows get the same slot, empty, so every label starts on one
vertical line whether or not it is preceded by a dot. */
.bill__line:not([data-build])::before {
content: '';
inline-size: 6px;
flex: none;
}
.bill__foot {
--in: 0;
padding: var(--s-4) var(--s-5);
border-block-start: var(--border);
background: var(--c-canvas-sunk);
}
/* Same reasoning as the rows: the totalling strip is part of the docket, the
total written on it is not. */
.bill__foot > * {
opacity: var(--in);
transition: opacity var(--d-slow) var(--e-out);
}
.bill--direct .bill__foot {
border-block-start-color: var(--c-accent);
background: var(--c-accent-soft);
}
.bill__total {
margin: 0;
font-size: var(--t-small);
color: var(--c-ink);
}
.bill--direct .bill__total {
font-weight: 500;
}
/* --------------------------------------------------------------- signature */
/*
* Three marks, not three faces.
*
* The photographs live on the About page and belong there; this is a section
* about a model, and turning it into a team section would change the subject
* at the exact moment the argument lands. Three marks say the same thing and
* stay about the work.
*/
.bill__sign {
display: flex;
align-items: center;
gap: var(--s-3);
margin: var(--s-3) 0 0;
padding-block-start: var(--s-3);
border-block-start: 1px solid var(--c-accent);
font-size: var(--t-small);
color: var(--c-muted);
}
.bill__marks {
display: inline-flex;
gap: 4px;
flex: none;
}
.bill__marks i {
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: var(--c-accent);
transform: scale(var(--in, 1));
transition: transform var(--d-slow) var(--e-snap);
transition-delay: calc(var(--mark-i, 0) * 90ms);
}
/* ------------------------------------------------------------- the seven */
/*
* The seven steps, short.
*
* They were a tall numbered list down the left of this section, which gave
* seven lines of prominence to the method at the moment the reader wants the
* conclusion. As a single run of chips they still say what the build is made
* of, in a fifth of the height, under the argument rather than beside it.
*/
.seven {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.seven__step {
display: inline-flex;
align-items: baseline;
gap: var(--s-2);
padding: var(--s-2) var(--s-4);
border: var(--border);
border-radius: var(--r-pill);
background: var(--c-canvas);
font-size: var(--t-small);
color: var(--c-muted);
white-space: nowrap;
}
.seven__step .mono {
font-size: var(--t-nano);
letter-spacing: var(--ls-micro);
color: var(--c-line-strong);
}
/* The last one is the handover, which is the only step the client experiences
as an event rather than as work going on. */
.seven__step--end {
border-color: var(--c-accent);
color: var(--c-ink);
}
.seven__step--end .mono {
color: var(--c-accent);
}
.economics__seven {
display: flex;
flex-direction: column;
gap: var(--s-4);
padding-block-start: var(--s-7);
border-block-start: var(--border);
}
.economics__seven-title {
margin: 0;
color: var(--c-muted);
font-size: var(--t-micro);
letter-spacing: var(--ls-micro);
text-transform: uppercase;
}
/* --------------------------------------------------------------- closing */
.economics__notes {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(var(--s-6), 5vw, var(--s-9));
align-items: start;
margin-block-start: var(--s-8);
}
.economics__lines {
list-style: none;
margin: 0;
padding: 0;
}
.economics__lines li {
padding-block: var(--s-3);
border-block-end: var(--border);
}
.economics__lines li:last-child {
border-block-end: 0;
}
/* ---------------------------------------------------------------- narrower */
@media (max-width: 900px) {
/*
* The bills stack rather than shrink. Side by side under about 900px each
* one is too narrow for its rows to hold a line, and a bill that wraps every
* row is no longer a list of lines — which is the one thing this section
* needs it to be.
*/
.bills {
grid-template-columns: minmax(0, 1fr);
}
.economics__notes {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-6);
}
}
/* ---------------------------------------------------------- reduced motion */
/*
* Everything present, nothing staged. The argument is the two lists next to
* each other; the staging only controls the order they are read in, so with
* motion off the reader simply gets both at once.
*/
@media (prefers-reduced-motion: reduce) {
.bill__line,
.bill__foot {
--in: 1;
}
.bill__label,
.bill__foot > * {
transform: none;
transition: none;
}
.bill__line[data-build]::before,
.bill__marks i {
transform: none;
transition: none;
}
}
/* ==== assets/css/sections/foundation.css ==== */
/* =============================================================================
"The software underneath" — the Odoo section.
The quietest section on the page. Previously it ran a very long paragraph
down a narrow left column with the module chips stranded at the top right and
a large dead area beneath — the layout gave a short aside the proportions of
a major section. It is now a compact band: heading and copy on a comfortable
measure, the chips directly under the copy they describe.
========================================================================== */
.foundation {
background: var(--c-tint-green);
padding-block: clamp(4rem, 7vw, 6.5rem);
}
.foundation__inner {
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
gap: var(--s-6) clamp(var(--s-7), 6vw, var(--s-10));
align-items: start;
max-inline-size: 78rem;
}
/* The eyebrow and heading sit in the left column as a title block; the copy and
chips run down the right. That keeps the paragraph on a readable measure
without leaving a column of empty space beside it. */
.foundation__lede {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.foundation__body {
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.foundation__body .prose {
max-inline-size: 58ch;
}
.foundation__claim {
font-size: var(--t-lead);
line-height: 1.5;
color: var(--c-ink);
padding-inline-start: var(--s-5);
border-inline-start: 2px solid var(--c-accent);
}
/* A quiet row of module labels — small, unemphasised, explicitly not a logo
wall. Sits directly beneath the sentence that introduces it. */
/*
* Eight fixed columns and a four-column fallback is what this was, and both
* clipped: `minmax(0, 1fr)` lets a track shrink below its own content, and
* MANUFACTURING set in uppercase mono at 0.08em needs about 7rem. At 1024px it
* was losing 47px of itself, and at 320px, 48px.
*
* Flex-wrap rather than a grid, for two reasons a grid could not give at once.
* A flex item's automatic minimum is its min-content, so a label can never be
* clipped again whatever the container does — the row wraps instead. And the
* items grow, so every row fills completely: eight blocks across a grid's
* auto-fit tracks came out five and three with two empty cells trailing, which
* is a poor look for something captioned as a layer.
*/
.foundation__blocks {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.foundation__block {
/* Grow into the row, from a basis wide enough for the longest label. */
flex: 1 1 7.25rem;
display: grid;
place-items: center;
padding: 0.7em 0.4em;
text-align: center;
background: var(--c-canvas);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-ink-soft);
transition:
border-color var(--d-base) var(--e-in-out),
color var(--d-base) var(--e-in-out),
transform var(--d-fast) var(--e-out);
}
.foundation__block:hover {
border-color: var(--c-accent);
color: var(--c-accent-deep);
transform: translateY(-2px);
}
/* The source line. Not mono-caps: it is a sentence, and setting a sentence in
letter-spaced uppercase made it harder to read than the claim it supports. */
.foundation__source {
font-size: var(--t-small);
color: var(--c-muted);
}
.foundation__source a {
color: var(--c-accent-deep);
}
@media (max-width: 900px) {
.foundation__inner {
grid-template-columns: minmax(0, 1fr);
}
.foundation__lede {
position: static;
}
}
/* =============================================================================
The layer stack.
Your workflow on top, ToolsSync in the middle, the Odoo blocks underneath —
which is exactly what the copy either side of it says, drawn as a section
through the thing rather than asserted in a sentence.
========================================================================== */
.layers {
display: flex;
flex-direction: column;
}
.layers__tier {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--s-4);
align-items: center;
padding: var(--s-4) var(--s-5);
border: 1px solid var(--c-line-strong);
}
/* The top tier is the business itself: darkest, because it is the fixed point
the other two have to fit around. */
.layers__tier--top {
background: var(--c-ink);
border-color: var(--c-ink);
color: var(--c-canvas);
}
.layers__tier--mid {
background: var(--c-accent-soft);
border-color: var(--c-accent);
}
.layers__num {
color: var(--c-muted);
}
.layers__tier--top .layers__num,
.layers__tier--top .layers__note {
color: var(--c-dark-muted);
}
.layers__tier--mid .layers__num,
.layers__tier--mid .layers__note {
color: var(--c-accent-deep);
}
.layers__name {
font-size: var(--t-small);
font-weight: 550;
letter-spacing: -0.02em;
}
.layers__join {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-2) 0 var(--s-2) var(--s-6);
color: var(--c-accent-deep);
}
.layers__join--quiet {
color: var(--c-muted);
}
.layers__arrow {
inline-size: 11px;
block-size: 16px;
flex: none;
}
.layers__base {
padding: var(--s-4);
border: 1px solid var(--c-line-strong);
background: var(--c-canvas-sunk);
}
.layers__base-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
margin-block-end: var(--s-3);
color: var(--c-muted);
}
@media (max-width: 620px) {
.layers__tier {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-1);
}
}
/* =============================================================================
Interface miniatures.
What a "building block" looks like in practice, at a size where it reads as a
thumbnail rather than as a component you are meant to use. Drawn rather than
screenshotted: Odoo's interface is theirs.
========================================================================== */
.mini {
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-block-start: var(--s-5);
}
.mini__panel {
border: 1px solid var(--c-line-strong);
border-radius: var(--r-sm);
overflow: hidden;
background: var(--c-canvas);
}
.mini__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-2) var(--s-3);
background: var(--c-ink);
color: var(--c-dark-muted);
}
.mini__head .mono {
font-size: var(--t-nano);
}
/* Gridlines as gaps rather than borders — no doubling along shared edges. */
.mini__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 1px;
background: var(--c-line);
}
.mini__cell {
padding: 0.35em 0.6em;
background: var(--c-canvas);
font-size: var(--t-small);
color: var(--c-ink-soft);
}
.mini__cell--head {
background: var(--c-canvas-sunk);
color: var(--c-muted);
font-size: var(--t-nano);
}
.mini__cell--n {
text-align: end;
font-variant-numeric: tabular-nums;
}
.mini__cell--good {
color: var(--c-accent-deep);
}
.mini__cell--short {
color: var(--c-clay-deep);
}
.mini__pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-3);
}
.mini__card {
display: flex;
flex-direction: column;
gap: var(--s-1);
padding: var(--s-3);
border: 1px solid var(--c-line-strong);
border-radius: var(--r-sm);
background: var(--c-canvas);
}
.mini__card .mono {
font-size: var(--t-nano);
margin-block-end: var(--s-1);
}
.mini__row {
display: flex;
justify-content: space-between;
gap: var(--s-3);
font-size: var(--t-small);
color: var(--c-muted);
}
.mini__row--total {
padding-block-start: var(--s-1);
border-block-start: 1px dotted var(--c-line);
color: var(--c-ink);
}
.mini__row--total .mini__n {
color: var(--c-accent-deep);
font-weight: 600;
}
.mini__n {
color: var(--c-ink);
font-variant-numeric: tabular-nums;
}
/* A barcode drawn as a repeating gradient — no image, no generator. */
.mini__bars {
block-size: 1.35rem;
margin-block: var(--s-1);
background-image: repeating-linear-gradient(
90deg,
var(--c-ink) 0 2px,
transparent 2px 4px,
var(--c-ink) 4px 5px,
transparent 5px 8px,
var(--c-ink) 8px 11px,
transparent 11px 13px
);
}
.mini__code {
font-size: var(--t-nano);
letter-spacing: 0.12em;
color: var(--c-ink);
}
.mini__caption {
font-size: var(--t-nano);
color: var(--c-muted);
}
@media (max-width: 900px) {
.mini {
max-inline-size: 26rem;
}
}
/* ==== assets/css/sections/close.css ==== */
/* =============================================================================
Closing section — the designed conclusion.
Dark, full-bleed, with connector lines converging toward the centre from the
edges. The form is the only lit object.
========================================================================== */
.close {
position: relative;
background: var(--c-canvas);
color: var(--c-ink);
padding-block: clamp(var(--s-9), 12vw, 11rem);
overflow: clip;
--progress: 0;
}
.close__field {
position: absolute;
inset: 0;
pointer-events: none;
}
.close__wires {
inline-size: 100%;
block-size: 100%;
}
/* Lines are drawn inward as the section arrives — the whole page's argument,
restated without words. */
.close__wire {
fill: none;
stroke: var(--c-accent);
stroke-width: 1;
stroke-dasharray: var(--len, 600);
stroke-dashoffset: calc(var(--len, 600) * (1 - var(--progress)));
opacity: 0.28;
}
.close__inner {
position: relative;
z-index: var(--z-raised);
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(var(--s-7), 6vw, var(--s-10));
align-items: start;
}
@media (max-width: 900px) {
.close__inner {
grid-template-columns: minmax(0, 1fr);
}
}
.close__lead {
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.close__title {
letter-spacing: -0.05em;
}
.close__form {
display: flex;
flex-direction: column;
gap: var(--s-7);
padding: clamp(var(--s-5), 3vw, var(--s-7));
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
background: var(--c-canvas-sunk);
}
.close__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-4);
}
/*
* Once the two actions no longer fit side by side they stop being content-width
* and take the column instead.
*
* Wrapped but still sized to their labels, the submit button came out 296px
* against the 304px fields directly above it -- close enough to read as a
* misalignment rather than a decision. Stretching them makes the button share
* the fields' edges exactly, which is what the eye is checking against.
*/
@media (max-width: 560px) {
.close__actions {
flex-direction: column;
align-items: stretch;
}
.close__actions .btn {
justify-content: center;
/* .btn is nowrap by default, which on a 320px screen makes this label wider
than the column it is stretched into -- the button overhung the form and
lost its arrow to the section's clip. Stacked, it may take two lines. */
white-space: normal;
text-align: center;
}
}
/* =============================================================================
The close section as its own page.
Same composition, one difference: arriving here directly, the section is the
whole page rather than the end of one, so it has to fill the window and
carry a little more reassurance than a closing line needs.
========================================================================== */
.close--page {
display: flex;
align-items: center;
min-block-size: calc(100vh - var(--pin-top) - 6rem);
}
/* Three short promises about the call itself. On the home page the reader has
just scrolled the whole argument and needs none of this; arriving cold from
a nav link or the coupon, they have not, and do. */
.close__points {
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-block-start: var(--s-6);
padding-block-start: var(--s-5);
border-block-start: 1px solid var(--c-dark-line);
font-size: var(--t-small);
color: var(--c-dark-muted);
}
.close__points li {
display: flex;
gap: var(--s-3);
}
/* A short accent rule instead of a bullet: the same gesture the eyebrows use,
so the list belongs to the page rather than to a default stylesheet. */
.close__points li::before {
content: '';
flex: none;
inline-size: 0.75rem;
block-size: 1px;
margin-block-start: 0.7em;
background: var(--c-accent-on-dark);
}
/* ==== assets/css/sections/storefront.css ==== */
/* =============================================================================
Storefronts — the turn.
One pinned section, two acts, driven by a single `--progress` that
storefront.js writes as the section crosses the pin. Everything below reads
that number; nothing here animates on a timer, so the reader is always
holding the thing still.
--act-turn 0 → 1 across the first half: the sentence changes one word
--act-build 0 → 1 across the second: a shop assembles and hands over
Both are written by JS rather than derived in calc, because a sub-range
clamped in CSS has to be typed with @property to be reliable and the two
numbers are wanted in JS anyway for the counter.
The dark ground is doing structural work, not decoration: nine light
sections run between #transform and #contact, and this breaks that stretch
in the place where the page changes subject.
========================================================================== */
.storefront {
padding-block: 0;
position: relative;
}
/*
* The runway.
*
* Height here rather than on the section: the section also holds the list that
* follows, and a min-height on the whole thing put its spare 1800px BELOW that
* list rather than behind the pin — so the list appeared on screen while the
* pin was still running, and the section ended with an empty screen and a half.
*
* Tall enough that both acts get room, short enough that a reader who is not
* interested is past it in three flicks.
*/
.storefront__scroll {
block-size: 300vh;
position: relative;
}
.storefront__pin {
position: sticky;
inset-block-start: 0;
block-size: 100vh;
display: grid;
align-items: center;
overflow: clip;
}
.storefront__stage {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(var(--s-6), 5vw, var(--s-9));
inline-size: min(100% - (var(--grid-gutter) * 2), var(--grid-max));
margin-inline: auto;
}
/* ------------------------------------------------------------ act 1 · type */
/*
* The sentence is the argument, so it is set at display size and given the
* whole left column. One word changes and the claim changes with it — "before
* an order exists" is a true description of the other half of the business
* rather than a headline written to sound like one.
*/
.storefront__line {
font-size: clamp(2rem, 4.2vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.035em;
font-weight: 500;
margin: 0;
text-wrap: balance;
}
.storefront__said {
opacity: calc(0.45 + var(--act-turn, 0) * 0.55);
transition: opacity var(--d-slow) var(--e-out);
}
/*
* A one-line window onto a two-line reel. The reel travels exactly half its own
* height, which puts the second word where the first was — the words must be
* stacked in flow for that to hold, not layered in one grid cell, or the
* translate takes both of them off screen together.
*/
.storefront__slot {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
/* One line, plus the descender room the overflow would otherwise cut off. */
block-size: 1.08em;
}
/*
* A hidden copy of the longer word, in flow, giving the slot its width.
*
* A width in `ch` cannot serve both: 3.4ch left a gap after "after" and cut
* "before" down to "befoı". Letting the longer word measure itself is exact at
* every size, and survives a font swap.
*/
.storefront__sizer {
visibility: hidden;
}
.storefront__reel {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
display: grid;
/* Held until the strike lands, then travels the rest of the act. */
--roll: clamp(0, calc((var(--act-turn, 0) - 0.5) * 2), 1);
translate: 0 calc(var(--roll) * -50%);
}
.storefront__word {
color: var(--c-accent);
white-space: nowrap;
line-height: 1.08;
/* Each word keeps its own width. Stretched to the grid column — which the
sizer holds at the width of the longer one — the strike below ran a full
letter past the end of "after". */
justify-self: start;
}
/* Struck through as it leaves, so the reader sees the claim being corrected
rather than a word simply swapping. */
.storefront__word--out {
background: linear-gradient(currentColor, currentColor) left center / var(--strike) 0.07em no-repeat;
/* Drawn across the word over the first 45% of the act, and finished before
the reel starts to move — struck THEN replaced. Overlapping the two put a
fully struck word and its replacement on screen together, which reads as
two words rather than one correction. */
--strike: clamp(0%, calc(var(--act-turn, 0) * 2.2 * 100%), 100%);
}
.storefront__word--in {
opacity: clamp(0, calc((var(--act-turn, 0) - 0.5) * 2), 1);
}
.storefront__say {
min-inline-size: 0;
}
.storefront__sub {
margin: var(--s-5) 0 0;
color: var(--c-muted);
font-size: var(--t-lead);
opacity: var(--act-turn, 0);
translate: 0 calc((1 - var(--act-turn, 0)) * 0.75rem);
}
/* ----------------------------------------------------------- act 2 · build */
.storefront__build {
position: relative;
opacity: calc(0.15 + var(--act-build, 0) * 0.85);
}
/* The frame lifts very slightly as it fills, so the assembly reads as one
object arriving rather than parts appearing on a flat plane. */
.shopframe--live {
scale: calc(0.965 + var(--act-build, 0) * 0.035);
transform-origin: 50% 40%;
}
/* Typed, by revealing the text rather than rewriting it — the string stays
whole and selectable, and there is no per-frame DOM work. */
.shopframe__typed {
display: inline-block;
overflow: hidden;
white-space: nowrap;
vertical-align: bottom;
inline-size: calc(var(--type, 0) * 100%);
border-inline-end: 1px solid var(--c-accent);
--type: clamp(0, calc(var(--act-build, 0) * 4), 1);
}
.shopframe--live .shopframe__banner {
opacity: clamp(0, calc((var(--act-build, 0) - 0.2) * 5), 1);
scale: 1 clamp(0.2, calc((var(--act-build, 0) - 0.2) * 5), 1);
transform-origin: 50% 0;
}
/*
* Tiles drop in sequence. --tile is the index, set in the markup, so the
* stagger is a property of the element rather than three near-identical rules.
*/
.shopframe--live .shopframe__card {
--start: calc(0.34 + var(--tile) * 0.09);
--t: clamp(0, calc((var(--act-build, 0) - var(--start)) * 7), 1);
opacity: var(--t);
translate: 0 calc((1 - var(--t)) * 1.25rem);
}
.shopframe--live .shopframe__stock {
opacity: clamp(0, calc((var(--act-build, 0) - 0.62) * 6), 1);
}
/* --------------------------------------------------------- the handoff */
/*
* The point of the whole section: the order does not arrive as an email, it
* arrives in the record. The wire draws first, the record lands after it — in
* that order, because the connection is the claim and the record is the proof.
*/
.storefront__handoff {
display: flex;
align-items: center;
gap: var(--s-4);
margin-block-start: var(--s-5);
padding-inline-start: var(--s-6);
}
.storefront__wire {
flex: none;
block-size: 1px;
inline-size: clamp(0px, calc((var(--act-build, 0) - 0.72) * 12 * 3rem), 3rem);
background: var(--c-accent);
}
.storefront__record {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s-3) var(--s-4);
border: 1px solid var(--c-accent);
border-radius: var(--r-sm);
background: var(--c-accent-soft);
--in: clamp(0, calc((var(--act-build, 0) - 0.8) * 8), 1);
opacity: var(--in);
translate: calc((1 - var(--in)) * -0.75rem) 0;
}
.storefront__record-code {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: var(--ls-micro);
color: var(--c-accent);
}
.storefront__record-note {
font-size: var(--t-small);
color: var(--c-ink-soft);
}
/* ------------------------------------------------------------- after the pin */
.storefront__after {
padding-block: var(--section-y);
}
.storefront__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-5) var(--s-6);
}
.storefront__item {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding-block-start: var(--s-4);
border-block-start: var(--border-strong);
}
/*
* The marks.
*
* Not icons. Each one is the thing it names, drawn from the same three shapes
* the frame above is built from — a product grid, a page with a heading, two
* turns of a conversation. A row of small pictograms above three headings is
* the most generic move available on a page like this, and these are at least
* made of the page's own vocabulary.
*/
.storefront__mark {
display: flex;
gap: 3px;
block-size: 22px;
align-items: flex-end;
margin-block-end: var(--s-2);
}
.storefront__mark span {
background: var(--c-accent);
border-radius: 2px;
}
/* Three tiles of equal weight: a catalogue. */
.storefront__mark--shop span {
inline-size: 11px;
block-size: 14px;
}
.storefront__mark--shop span:first-child { block-size: 20px; }
/* A page: one heading rule over two shorter lines of text. */
.storefront__mark--page {
flex-direction: column;
align-items: flex-start;
gap: 3px;
justify-content: flex-end;
}
.storefront__mark--page span {
block-size: 3px;
inline-size: 30px;
}
.storefront__mark--page span:first-child {
block-size: 6px;
inline-size: 18px;
}
.storefront__mark--page span:last-child {
inline-size: 22px;
opacity: 0.5;
}
/* Two turns of a conversation, the reply set back. */
.storefront__mark--talk {
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.storefront__mark--talk span {
block-size: 8px;
inline-size: 22px;
border-end-start-radius: 1px;
}
.storefront__mark--talk span:last-child {
inline-size: 14px;
margin-inline-start: 8px;
opacity: 0.5;
border-end-start-radius: 2px;
border-end-end-radius: 1px;
}
.storefront__name {
font-size: var(--t-lead);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
}
.storefront__note {
color: var(--c-ink-soft);
margin: 0;
}
/* Said plainly and once. The detail belongs on the page, when there is any. */
.storefront__wip {
color: var(--c-muted);
font-family: var(--font-mono);
font-size: var(--t-nano);
letter-spacing: var(--ls-micro);
text-transform: uppercase;
white-space: nowrap;
}
.storefront__action {
margin-block-start: var(--s-7);
}
/* -------------------------------------------------------------- narrow */
@media (max-width: 940px) {
.storefront__scroll {
block-size: 260vh;
}
.storefront__stage {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-6);
align-content: center;
}
/* The frame is the second act and must not crowd the sentence off a phone
screen; it takes what is left after the type has had its room. */
.storefront__build {
max-inline-size: 26rem;
}
.storefront__list {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 560px) {
.storefront__line {
font-size: clamp(1.6rem, 7.5vw, 2.2rem);
}
.storefront__handoff {
padding-inline-start: var(--s-4);
}
}
/* ----------------------------------------------------------- reduced motion */
/*
* With motion reduced the pin is dead weight: there is no scrubbing to do, so
* the section becomes an ordinary one and shows the finished state. trackProgress
* already pins --progress at 1 for these readers; this collapses the height so
* they are not asked to scroll three screens past a static picture.
*/
@media (prefers-reduced-motion: reduce) {
.storefront__scroll {
block-size: auto;
}
.storefront__pin {
position: static;
block-size: auto;
padding-block: var(--section-y);
}
.storefront__word--out {
display: none;
}
.shopframe__typed {
inline-size: auto;
border-inline-end: 0;
}
}
/* ==== assets/css/sections/page.css ==== */
/* =============================================================================
Secondary pages: /about/, /privacy/, and 404.
The home page is a narrative — every section has its own composition and
earns its own stylesheet. These pages are the opposite: they exist to be
READ, or to get someone unstuck. One column, generous measure, no motion
that competes with the text.
Everything here reuses the home page's tokens, so a change to the type scale
or the palette reaches these pages without anyone remembering to come back.
========================================================================== */
/* --------------------------------------------------------------- page head */
.page-head {
padding-block: var(--s-9) var(--s-7);
border-block-end: var(--border-strong);
}
.page-head__lead {
max-inline-size: 46rem;
margin-block-start: var(--s-5);
}
/* Reading measure. Long-form legal and narrative text needs a shorter line
than the marketing sections, which are deliberately wide and sparse. */
.page-body {
padding-block: var(--s-8);
}
.page-prose {
max-inline-size: 42rem;
}
.page-prose > * + * {
margin-block-start: var(--s-5);
}
.page-prose h2 {
font-size: var(--t-headline);
line-height: 1.2;
margin-block-start: var(--s-8);
}
.page-prose h2:first-child {
margin-block-start: 0;
}
.page-prose h3 {
font-size: var(--t-small);
font-weight: 600;
margin-block-start: var(--s-6);
}
.page-prose ul,
.page-prose ol {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding-inline-start: var(--s-5);
}
.page-prose li {
padding-inline-start: var(--s-2);
}
.page-prose ul li {
list-style: square;
}
.page-prose ol li {
list-style: decimal;
}
/* A definition row: the term on the left, what it means on the right. Used for
the data table in the privacy policy, where a plain list would bury the
thing people actually scan for. */
.page-defs {
display: grid;
gap: 0;
margin-block-start: var(--s-5);
border-block-start: var(--border);
}
.page-defs__row {
display: grid;
grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
gap: var(--s-4) var(--s-6);
padding-block: var(--s-4);
border-block-end: var(--border);
}
.page-defs__term {
color: var(--c-ink);
font-weight: 500;
}
.page-defs__value {
color: var(--c-muted);
}
@media (max-width: 700px) {
.page-defs__row {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-2);
}
}
/* ------------------------------------------------------------ legal clauses */
/*
* A numbered clause, with the number hanging in the margin.
*
* The privacy policy cross-references itself by number — "addressed at clause
* 3", "the rights set out at clause 11" — so the numbers have to be findable
* by eye rather than buried at the start of a paragraph. An
- cannot do
* this: the numbering is two-level and fixed by the document, not by position,
* so it is written out and the marker is a real element.
*/
.clause {
display: grid;
grid-template-columns: 3.25rem minmax(0, 1fr);
gap: var(--s-4);
align-items: baseline;
}
.clause__n {
color: var(--c-muted);
font-family: var(--font-mono);
font-size: 0.86em;
font-variant-numeric: tabular-nums;
}
/* A clause whose body is a list or a table rather than a sentence: the number
still hangs, but the content sets its own rhythm. */
.clause__body > * + * {
margin-block-start: var(--s-4);
}
/* Sub-points inside a clause are lettered in the source, (a) to (g). */
.page-prose ol.alpha li {
list-style: lower-alpha;
}
@media (max-width: 700px) {
.clause {
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: var(--s-3);
}
}
/* -------------------------------------------------------- unresolved slots */
/*
* A fact nobody has supplied yet.
*
* Deliberately loud. The rest of this project marks missing IMAGES with a
* dashed box you cannot miss; missing FACTS on a legal page deserve the same
* treatment, because the failure mode — publishing a privacy policy that says
* "[company name]" — is worse than a missing photograph and much easier to
* skim past. tools/audit.py counts these and prints them, so they cannot be
* forgotten quietly.
*/
.todo {
display: inline;
padding: 0.1em 0.45em;
border: 1px dashed var(--c-clay);
border-radius: var(--r-xs);
background: color-mix(in srgb, var(--c-clay) 12%, transparent);
color: var(--c-clay);
font-family: var(--font-mono);
font-size: 0.86em;
font-style: normal;
}
/* ------------------------------------------------------------------- team */
.team {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--s-6);
margin-block-start: var(--s-7);
}
.team__card {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.team__portrait {
aspect-ratio: 4 / 5;
border-radius: var(--r-md);
overflow: hidden;
background: var(--c-panel);
}
.team__portrait img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.team__name {
font-size: var(--t-headline);
line-height: 1.15;
}
.team__role {
color: var(--c-accent-deep);
}
.team__note {
color: var(--c-muted);
font-size: var(--t-small);
}
/* ------------------------------------------------------------------ 404 */
/*
* The dark ground is the same one the closing section uses, so a wrong URL
* still lands somewhere that looks like the site rather than like a server.
*/
.notfound {
display: flex;
align-items: center;
min-block-size: calc(100vh - var(--pin-top) - 12rem);
padding-block: var(--s-9);
}
/* No `inline-size` here. This element also carries .shell, which sets its own
width as `min(100% - gutters, max)` — restating the width wiped out both the
gutter and the centring, and the whole page sat flush against the viewport
edge. */
.notfound__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
gap: var(--s-8) clamp(var(--s-6), 6vw, var(--s-9));
align-items: center;
}
.notfound__code {
font-family: var(--font-mono);
color: var(--c-accent);
}
.notfound__lead {
margin-block-start: var(--s-5);
max-inline-size: 34rem;
}
.notfound__links {
display: flex;
flex-direction: column;
gap: 0;
margin-block-start: var(--s-7);
border-block-start: var(--border-strong);
}
.notfound__link {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
padding-block: var(--s-4);
border-block-end: var(--border);
text-decoration: none;
color: inherit;
transition: padding-inline-start var(--d-base) var(--e-out);
}
.notfound__link:hover,
.notfound__link:focus-visible {
padding-inline-start: var(--s-3);
}
.notfound__link .btn__arrow {
color: var(--c-accent);
}
/* The broken wire: the hero's convergence, failing. Two segments reach for
each other across a gap that never closes — the page's own visual language
saying "this connection does not exist" without a word of copy. */
.notfound__art {
inline-size: 100%;
block-size: auto;
max-block-size: 20rem;
}
.notfound__wire {
stroke: var(--c-accent);
stroke-width: 1.5;
stroke-linecap: round;
fill: none;
opacity: 0.55;
stroke-dasharray: var(--len, 200);
stroke-dashoffset: var(--len, 200);
animation: notfound-draw 1400ms var(--e-out) forwards;
animation-delay: var(--at, 0ms);
}
.notfound__node {
fill: var(--c-accent);
opacity: 0;
animation: notfound-arrive 600ms var(--e-out) forwards;
animation-delay: var(--at, 0ms);
}
/* The gap between the two reaching ends. It pulses, and never closes. */
.notfound__gap {
fill: none;
stroke: var(--c-clay);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 2 7;
opacity: 0;
animation: notfound-gap 2600ms var(--e-in-out) 1500ms infinite;
}
@keyframes notfound-draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes notfound-arrive {
to {
opacity: 1;
}
}
@keyframes notfound-gap {
0%,
100% {
opacity: 0.25;
}
50% {
opacity: 0.85;
}
}
@media (max-width: 900px) {
.notfound__inner {
grid-template-columns: minmax(0, 1fr);
}
/* The artwork is the first thing that goes: on a phone the reader wants the
links, not a diagram about their absence. */
.notfound__art {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.notfound__wire {
stroke-dashoffset: 0;
animation: none;
}
.notfound__node {
opacity: 1;
animation: none;
}
.notfound__gap {
opacity: 0.55;
animation: none;
}
}
/* ==== assets/css/sections/about.css ==== */
/* =============================================================================
The about page.
Dark end to end, which is the one place on this site a whole page commits to
the ink ground. Everywhere else the dark bands are punctuation between light
sections; here it IS the page, so the rhythm has to come from spacing, rule
weight and type scale rather than from ground changes.
Every colour below resolves through the tokens that [data-ground="dark"]
re-points on the wrapper, so there is not one dark-specific literal in here.
========================================================================== */
.about {
background: var(--c-dark);
color: var(--c-dark-ink);
}
/* A hairline between bands. Enough to keep the page from reading as one long
scroll of black, quiet enough not to become a table. */
.about > .section + .section {
border-block-start: 1px solid var(--c-line);
}
/* ------------------------------------------------------------------- hero */
.about__hero {
padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 5.5rem);
}
.about__title {
max-inline-size: 18ch;
margin-block-start: var(--s-5);
}
.about__lead {
max-inline-size: 46ch;
margin-block-start: var(--s-6);
color: var(--c-ink-soft);
}
/* ----------------------------------------------------------------- origin */
/*
* Per-band rhythm.
*
* On a page that never changes ground, spacing is the only thing separating one
* argument from the next — so each band gets its own breathing room rather than
* inheriting one --section-y for all of them. The story and the refusals get
* more air than the grids, because they are read rather than scanned.
*/
.about__origin {
padding-block: clamp(3.5rem, 8vw, 6rem);
}
.about__values,
.about__team {
padding-block: clamp(3rem, 7vw, 5rem);
}
.about__refuse {
padding-block: clamp(3.5rem, 8vw, 6rem);
}
.about__split {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
gap: var(--s-7) clamp(var(--s-6), 6vw, var(--s-9));
align-items: start;
}
.about__prose {
display: flex;
flex-direction: column;
gap: var(--s-5);
}
@media (max-width: 900px) {
.about__split {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---------------------------------------------------------------- mission */
/*
* One sentence given a whole band. It is set at display size and NOT as a
* heading, because it is the page's claim rather than a label for what follows
* it — making it an