/* ==========================================================================
Products — a shop front.
Top to bottom: a thin ribbon, a large title with a line and two links at its
right, a strip of everything we make, then shelves. A shelf is a heading
over a row of white cards on a pale ground. The row starts at the page's
left edge and runs off the right edge of the window, so there is always
more to see; two arrows move it, and so do a trackpad and the keyboard.
Cards come in four kinds, all 500px tall and 18px round:
.lg 400 wide words on top, a picture under them
.md 480 wide the same, wider, for the help row
.sm 313 wide a square picture, then what it is
.tx 313 wide half the height: an icon and one sentence
The pictures are not made yet. Every image box is a placeholder:
To fill one, put an ![]()
inside .st-pic; the placeholder hides itself and
the picture is fitted to the box. Nothing else needs to change.
========================================================================== */
body:has(> main.st) {
/* The page's side margin: 140px from 1440px up and on any wider window, so
the title, strip, headings and cards all start there; narrower windows
take it in towards 24px. The footer below reads it too. */
--edge: clamp(24px, calc(28.125vw - 265px), 140px);
}
.st {
--hair: rgba(0,0,0,.08);
background: var(--canvas); color: var(--ink);
font-family: var(--text);
padding-bottom: clamp(28px, 3vw, 44px);
}
/* ---------------------------------------------------------------- Ribbon */
.st-ribbon {
margin: 0; padding: 18px var(--gutter);
background: var(--paper); text-align: center;
font-size: 14px; line-height: 1.43; letter-spacing: -.016em;
}
.st-ribbon a { color: var(--blue); }
.st-ribbon a:hover { text-decoration: underline; }
.st-ribbon a::after { content: " \203A"; }
/* ---------------------------------------------------------------- Header */
.st-head, .st-h, .st-quick ul, .st-strip ul { margin-inline: var(--edge); }
.st-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
padding-top: clamp(56px, 5.6vw, 80px);
}
.st-head h1 {
font: 600 clamp(52px, 5.556vw, 80px)/1.05 var(--font); letter-spacing: -.015em;
}
.st-aside { padding-top: .5em; text-align: right; }
.st-tag {
max-width: 15em; margin-left: auto;
font: 600 clamp(20px, 1.667vw, 24px)/1.1667 var(--font); letter-spacing: .009em; text-wrap: balance;
}
.st-aside p:not(.st-tag) { margin-top: 12px; font-size: 14px; line-height: 1.43; letter-spacing: -.016em; }
.st-aside p:first-of-type + p { margin-top: 20px; }
.st-aside a { color: var(--blue); }
.st-aside a:hover { text-decoration: underline; }
.st-aside .out { display: inline-block; width: .62em; height: .62em; margin-left: .18em; vertical-align: .02em; }
/* ----------------------------------------------------------------- Strip
Everything we make, as an icon over its name. */
.st-strip { margin-top: clamp(28px, 3.4vw, 48px); }
.st-strip ul { display: flex; justify-content: space-between; gap: 10px; max-width: 1160px; }
/* Each cell is exactly as wide as its icon, so the icons sit at even
distances and the first and last touch the page's edges; a longer name
simply hangs out of its cell on both sides. */
.st-strip li { flex: none; width: 72px; display: flex; justify-content: center; }
.st-strip a {
display: flex; flex-direction: column; align-items: center; gap: 14px;
padding: 20px 0 18px;
font: 600 14px/1.43 var(--text); letter-spacing: -.016em; color: var(--ink);
}
.st-strip .ic { width: 72px; height: 72px; transition: transform .5s var(--ease); }
.st-strip a:hover .ic { transform: translateY(-3px) scale(1.04); }
.st-strip .ic .bg { fill: var(--paper); stroke: var(--hair); stroke-width: 1; }
.st-strip .ic { color: var(--ink); }
/* --------------------------------------------------------------- Shelves */
.st-sec { margin-top: 32px; }
.st-strip + .st-sec { margin-top: clamp(40px, 4.8vw, 68px); }
.st-h {
margin-bottom: 7px;
font: 600 28px/32px var(--font); letter-spacing: .007em; color: var(--ink);
}
.st-h .b { color: var(--ink-2); }
.st-shelf { position: relative; }
.st-track {
display: flex; gap: 20px;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity; scroll-padding-inline: var(--edge);
scrollbar-width: none;
padding: 16px var(--edge) 40px var(--edge);
}
.st-track::-webkit-scrollbar { display: none; }
.st-track { container-type: inline-size; } /* cqw below = the row's width inside its margins */
.st-track:focus-visible { outline-offset: -6px; }
.st-item { flex: none; scroll-snap-align: start; }
.st-col { display: grid; grid-template-rows: 240px 240px; gap: 20px; }
/* The arrows. They only exist once the script has armed the shelf, and each
disappears at its own end of the row. */
.st-arrow {
position: absolute; z-index: 2; top: 266px; margin-top: -20px;
display: none; place-items: center;
width: 40px; height: 40px; padding: 0; border-radius: 50%;
background: rgba(210,210,215,.72); color: rgba(0,0,0,.7);
-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
transition: opacity .3s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.st-ready .st-arrow { display: grid; }
.st-arrow svg { width: 9px; height: 16px; }
.st-arrow.prev { left: 22px; }
.st-arrow.prev svg { transform: scaleX(-1); }
.st-arrow.next { right: 22px; }
.st-arrow:hover { background: rgba(190,190,196,.9); }
.st-arrow:active { transform: scale(.94); }
.st-arrow[disabled] { opacity: 0; pointer-events: none; }
/* ----------------------------------------------------------------- Cards */
.st-card {
position: relative; display: flex; flex-direction: column;
height: 500px; padding: 28px;
background: var(--paper); color: var(--ink);
border-radius: 18px; overflow: hidden;
transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.st-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.09); }
.st-card:focus-visible { outline-offset: 3px; border-radius: 18px; }
.st-card.lg { width: 400px; }
.st-card.md { width: 480px; }
.st-card.sm, .st-card.tx { width: 313px; }
.st-card.dark { background: #000; color: var(--ink-lt); }
/* A row of four: on a wide window its cards size themselves so the four span
the page, from a little under their usual width upward; on a narrower one
they keep that floor and the row scrolls. */
.fill .st-card.lg { width: max(360px, calc((100cqw - 60px) / 4)); }
.fill .st-card.md { width: max(440px, calc((100cqw - 60px) / 4)); }
.st-eyebrow {
margin-bottom: 8px;
font: 600 12px/16px var(--text); letter-spacing: -.01em; text-transform: uppercase;
color: var(--blue);
}
.st-eyebrow.mute { color: #424245; }
.st-bold, .st-body, .st-line, .st-say { text-wrap: pretty; }
.st-card.dark .st-eyebrow { color: var(--blue-dark); }
.st-title { font: 600 28px/32px var(--font); letter-spacing: .007em; text-wrap: balance; }
.st-bold { margin-top: 14px; font: 600 14px/1.286 var(--text); letter-spacing: -.016em; }
.st-body { margin-top: 6px; font: 400 14px/1.286 var(--text); letter-spacing: -.016em; }
.st-bold + .st-body { margin-top: 2px; }
.st-title + .st-body { margin-top: 14px; }
.st-card.dark .st-body { color: var(--ink-lt-2); }
.st-body .fn, .st-line .fn { position: relative; top: -.4em; margin-left: 1px; font-size: .7em; line-height: 0; }
.st-link {
margin-top: 10px; font: 400 14px/1.286 var(--text); letter-spacing: -.016em; color: var(--blue);
}
.st-card.dark .st-link { color: var(--blue-dark); }
.st-link::after { content: " \203A"; }
.st-card:hover .st-link { text-decoration: underline; }
/* Small card: picture on top, caption pinned to the foot. */
.sm .st-pic { flex: none; width: 100%; height: 326px; margin-top: 0; }
/* Under the words, pinned to the foot, so the pictures in a row line up. */
.st-text { margin-bottom: 20px; }
/* On the wide cards the picture runs to the card's own edges, like a cover. */
.lg .st-pic, .md .st-pic {
flex: none; height: 240px; margin: auto -28px -28px; border-radius: 0;
box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
}
.lg .st-pic.dark { box-shadow: none; }
.st-cap { margin-top: auto; }
.st-name { font: 600 20px/1.3 var(--font); letter-spacing: -.012em; }
.st-line { margin-top: 10px; font: 400 14px/1.286 var(--text); letter-spacing: -.016em; color: var(--ink-2); }
/* Text card: an icon, and a sentence with its key phrase in colour. */
.tx { height: 240px; justify-content: space-between; }
.st-ic { width: 28px; height: 28px; color: var(--blue); }
.st-say { font: 600 19px/1.263 var(--font); letter-spacing: -.012em; }
.st-say b { font-weight: 600; color: var(--blue); }
.tx.kern .st-ic, .tx.kern .st-say b { color: #5468ff; }
/* --------------------------------------------------------------- Pictures */
.st-pic {
position: relative; flex: 1 1 0; min-height: 0; margin-top: 24px;
border-radius: 12px; overflow: hidden;
background:
radial-gradient(90% 60% at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 72%),
linear-gradient(145deg, hsl(var(--h) 40% 95%), hsl(calc(var(--h) + 14) 34% 87%));
box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.st-pic.dark {
background: radial-gradient(130% 120% at 30% 0%, hsl(var(--h) 62% 34%) 0%, hsl(var(--h) 62% 15%) 46%, hsl(var(--h) 60% 6%) 100%);
box-shadow: none;
}
.st-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.st-pic:has(> img) > .ph { display: none; }
.ph { position: absolute; inset: 0; display: grid; place-items: center; color: hsl(var(--h) 34% 52% / .5); }
.dark .ph { color: rgba(255,255,255,.3); }
.ph svg { width: 30px; height: 30px; }
/* The footer and its notes sit on this page's own edges, so the left edge that
the title, the headings and the cards share runs unbroken to the bottom. */
body:has(> main.st) :is(.foot-in, .notes ol) {
max-width: calc(1160px + 2 * var(--gutter));
margin-inline: calc(var(--edge) - var(--gutter));
}
/* ----------------------------------------------------------- Quick links */
.st-quick { margin-top: 32px; }
.st-quick ul { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 18px; }
.st-quick .cta { font-size: 17px; }
/* ---------------------------------------------------------------- Narrow
Not a phone layout: the shelves already scroll, so what is left is the
header, which would otherwise be squeezed. */
@media (max-width: 900px) {
.st-head { flex-direction: column; gap: 20px; }
.st-aside { text-align: left; }
.st-tag { margin-left: 0; }
.st-strip ul { overflow-x: auto; scrollbar-width: none; }
.st-strip ul::-webkit-scrollbar { display: none; }
.st-strip li { flex: 0 0 110px; }
}
@media (prefers-reduced-motion: reduce) {
.st-card, .st-card:hover, .st-strip .ic, .st-arrow { transition: none; transform: none; }
.st-track { scroll-behavior: auto; }
}