.
The base holds layout and spacing; the marker glyph comes from a
variant class, so a new marker is a variant, never a new component.
Variants: .bulleted-list-arrow = dashed rightwards arrow
margin-block only — margin-inline stays auto so the list keeps the
reading-column centering from .article > :not(figure) */
.bulleted-list { list-style: none; margin-block: var(--list-gap-top); padding: 0; }
.bulleted-list li { position: relative; padding-left: 22px; }
.bulleted-list li + li { margin-top: 8px; } /* paragraph spacing = 8 */
.bulleted-list li::before {
position: absolute;
left: 0;
color: var(--label-primary);
}
.bulleted-list-arrow li::before { content: "\21E2"; content: "\21E2" / ""; } /* silent: decorative */
/* ---- Marked paragraph --------------------------------------------
One emphasized statement standing alone in prose flow. Wears the
same marker and 22px indent as .bulleted-list-arrow so it looks
identical, but it is a , not a list, so a screen reader does not
announce a one-item list. Spacing comes from .article p (8px),
because in the flow it IS a paragraph. */
.marked-paragraph { position: relative; padding-left: 22px; }
.marked-paragraph::before {
content: "\21E2";
content: "\21E2" / ""; /* silent: decorative */
position: absolute;
left: 0;
color: var(--label-primary);
}
/* ---- Numbered list ----------------------------------------------
A separate component, not a variant:
carries different meaning
and announces as a numbered list. Numerals sit in the same 22px
hanging indent as the bullet markers, so both lists share a left edge. */
.numbered-list {
list-style: none;
margin-block: var(--list-gap-top);
padding: 0;
counter-reset: numbered-list;
}
.numbered-list li {
position: relative;
padding-left: 22px;
counter-increment: numbered-list;
}
.numbered-list li + li { margin-top: 8px; }
/* An item built from paragraphs (a problem and its resolution) needs more
air before the next item than the 8px separating the two paragraphs
inside it. Keyed off :has() so no new class is needed. */
.numbered-list li > p { margin: 0; }
.numbered-list li > p + p { margin-top: 8px; }
.numbered-list li:has(p) + li { margin-top: 20px; }
.numbered-list li::before {
content: counter(numbered-list) ".";
position: absolute;
left: 0;
color: var(--label-primary);
}
/* ---- Numbered sections -------------------------------------------
Headed subsections (an h3 + its paragraphs) numbered for scanning.
NOT a list: the headings already carry the structure, so nothing is
announced as "list, n items". Same 22px hanging indent as the lists.
The number is visual only: the "/ ''" alt text hides it from screen
readers (a plain counter would be read as a stray "."). The first
content line is the fallback for browsers without alt-text support. */
.numbered-sections { counter-reset: numbered-sections; }
.numbered-section { position: relative; padding-left: 22px; }
.numbered-section > .h3 { counter-increment: numbered-sections; }
.numbered-section > .h3::before {
content: counter(numbered-sections) ".";
content: counter(numbered-sections) "." / "";
position: absolute;
left: 0;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.09px;
color: var(--label-primary);
}
/* ---- Inline code chip -------------------------------------------
For markup and code names inside prose, e.g. . Monospace at 14px
so it doesn't out-measure the 16px body text. */
/* ==================================================================
COLOUR CHIP — NEW Sep 2026
A swatch and its hex value in one pill. Same fill and inner border as
.code-inline. Height 24; 4 in on the left, 8 on the right; 4 between
swatch and text; corner 6.
The swatch is 16 x 16, corner 4, with a 1px inner stroke whose colour
comes from --swatch-stroke, set per chip in the HTML.
Text: .mono-label-14-bold.
================================================================== */
.color-chip {
display: inline-flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 8px 0 4px;
border-radius: 6px;
background: var(--fill-badge);
box-shadow: inset 0 0 0 1px var(--border-primary);
white-space: nowrap;
vertical-align: middle;
}
.color-chip__swatch {
flex: none;
width: 16px;
height: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--swatch-stroke, var(--border-primary));
}
/* ==================================================================
SWATCH GRID — NEW Sep 2026
Eight columns, 16 apart. Each column: the colour tile, its name and
hex, then 28 lower its grayscale tile and value.
================================================================== */
.swatch-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
column-gap: 16px;
}
.swatch-grid li { display: flex; flex-direction: column; min-width: 0; }
.swatch-tile {
position: relative;
height: 56px;
border-radius: 8px;
}
.swatch-tile--color { box-shadow: inset 0 0 0 1px var(--swatch-stroke); }
.swatch-grid .swatch-name { margin: 8px 0 0; color: var(--label-primary); }
.swatch-grid .swatch-hex { margin: 2px 0 0; }
.swatch-grid .swatch-tile--gray { margin-top: 28px; }
.swatch-grid .swatch-gray { margin: 8px 0 0; color: var(--label-primary); }
.swatch-badge {
position: absolute;
left: 4px;
bottom: 4px;
height: 18px;
padding: 0 4px;
display: flex;
align-items: center; /* label centred in the 18 */
border-radius: 4px;
background: #FFFFFF;
color: var(--label-primary);
box-shadow: 0 0 0 0.5px var(--border-primary);
}
.article .figure-swatches { max-width: var(--text-measure); margin-top: 55px; margin-bottom: 60px; } /* 55 box = 60 from the letters above */
/* ==================================================================
CVD GRID — NEW Sep 2026
The eight fills in five renderings. Text width (696), labels included. Row
labels in .caption-1, right-aligned, 28 from the first tile; tiles
16 apart both ways, 44 tall, corner 8, 1px inner border.
================================================================== */
.cvd-grid {
width: 100%;
border-collapse: separate;
border-spacing: 16px;
margin: -16px; /* the spacing sits between tiles, not round the outside */
width: calc(100% + 32px);
}
.cvd-grid th {
padding: 0 12px 0 0; /* + the 16 spacing = 28 to the first tile */
font-weight: 400;
text-align: right;
white-space: nowrap;
color: var(--label-primary);
width: 1%; /* shrink to the longest label */
}
.cvd-grid td { padding: 0; }
.cvd-tile {
height: 44px;
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--swatch-stroke);
}
.article .figure-cvd { max-width: var(--text-measure); margin-top: 55.5px; margin-bottom: 60px; } /* 55.5 box = 60 from the letters above */
/* ==================================================================
DATA TABLE — NEW Sep 2026
A text-width table (696, the reading measure). Header in .caption-1
over a 1.5px --label-primary rule; body rows 44 tall with a 0.5px
--border-primary divider under each, the last row included. The outer
columns are inset 20 so the text sits inside the rules' ends.
================================================================== */
/* 60 above measured TEXT TO TEXT: from the lowest ink of the paragraph
above to the cap tops of the header. The boxes sit 51 apart for that;
the other 9 is the paragraph's line spacing and the header's ascent. */
/* ---- Dashboard canvas (part 2, end of section I) — NEW 22 Sep ------
Colour chips, their glass tiles, the enlarged hover panel and the
annotation card with a colour dot instead of an icon. Chip fills and
borders come from the colour table, which is the source of truth. */
.cchip {
width: 96px; height: 96px;
border-radius: 24px;
border: 2px solid;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 0 10px 10px; /* 10 in from the left and bottom */
color: var(--label-primary);
z-index: 2;
}
.cchip--light, .cchip--light .cchip__hex { color: #FFFFFF; }
.cchip .cchip__name { position: static; }
.cchip .cchip__hex { position: static; margin-top: 2px; }
/* The product's hover panel, drawn at the size it appears in the frame
(about 1.5x the real control) so it can be read inside the canvas. */
.tipbig {
width: 312.5px;
padding: 13px 16px;
box-shadow: 0 3px 12px rgba(0,0,0,0.10); /* same plate and depth as .annotation-2 */
font-family: "Roboto", Arial, sans-serif;
color: #000;
z-index: 4;
}
.tipbig p.tipbig__date { font-size: 16px; line-height: 20px; font-weight: 600; margin: 0 0 6px; position: static; }
.tipbig__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 31.5px; font-size: 17px; line-height: 20px; white-space: nowrap; }
.tipbig__name { display: flex; align-items: center; gap: 8px; }
.tipbig__sw { width: 13px; height: 13px; border-radius: 100px; border: 1px solid; box-sizing: border-box; flex: none; }
/* The colour-dot variant of the annotation card (part 2 dashboard
canvas): the same glass plate, with a 16px dot in the chart's colours
instead of the icon, and 12 from the headline to the body (Marina). */
.annotation-2__dot { flex: none; width: 16px; height: 16px; border-radius: 100px; border: 2px solid; box-sizing: border-box; }
.annotation-2--dot .annotation-2__body { margin-top: 12px; }
/* ---- Hover-panel chart (part 2, V "Reading exact values") — NEW 22 Sep --
A redraw of Marina's chart-hover-3day mock at text width (696), sitting
bare on the page. Set in Roboto, the product's own font, because it is a
piece of product UI. The SVG is static; the panel is pinned open on the
middle date group, with its hit area shaded. */
.article .figure-hover { max-width: var(--text-measure); margin-top: 47px; margin-bottom: 60px; } /* 47 box = 60 from the letters above to the top axis label */
.hover-chart { font-family: "Roboto", Arial, sans-serif; color: #000; }
.hover-chart__plot { position: relative; width: 100%; max-width: 696px; }
.hover-chart__plot svg { display: block; font-family: inherit; }
.hover-chart__tip {
position: absolute; min-width: 236px; padding: 10px;
background: rgba(255,255,255,.6);
-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
border: 1px solid #D8D8D8; border-radius: 12px;
box-shadow: 0 2px 14px rgba(0,0,0,.10);
}
.hover-chart p.hover-chart__date { font-size: 12px; line-height: 16px; font-weight: 600; margin: 0 0 4px; }
.hover-chart__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 24px; font-size: 13px; line-height: 16px; white-space: nowrap; }
.hover-chart__name { display: flex; align-items: center; gap: 4px; }
.hover-chart__sw { width: 10px; height: 10px; border-radius: 100px; border: 1px solid; box-sizing: border-box; flex: none; }
/* Phones (chart under 500 wide, toggled by the chart script): the panel
hugs its longest row, with 12px text on 20px rows. */
.hover-chart__tip--compact { min-width: 0; padding: 8px; }
.hover-chart__tip--compact .hover-chart__row { height: 20px; gap: 8px; font-size: 12px; }
.hover-chart .hover-chart__tip--compact p.hover-chart__date { font-size: 11px; line-height: 14px; }
.article .figure-text { max-width: var(--text-measure); margin-top: 51px; margin-bottom: 60px; }
.data-table {
width: 100%;
/* separate, not collapse: collapsed borders get snapped to whole pixels,
which drew the 1.5 rule and the 0.5 dividers both at 1. */
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.data-table th {
padding: 0 0 9.5px; /* 18 line + 8 of air + the 1.5 rule painted in the last 1.5 */
font-weight: 400;
text-align: left;
color: var(--label-primary);
/* Rules are PAINTED, not borders. Chrome snaps table-cell borders to
whole pixels, which drew the 1.5 and the 0.5 both at 1. A background
line is drawn at the screen's real resolution. */
background: linear-gradient(var(--label-primary), var(--label-primary)) left bottom / 100% 1.5px no-repeat;
}
.data-table td {
height: 44px;
padding: 0;
vertical-align: middle;
color: var(--label-primary);
}
.data-table tbody td { /* 0.5 divider under every row, the last included */
background: linear-gradient(var(--border-primary), var(--border-primary)) left bottom / 100% 0.5px no-repeat;
}
.data-table .num { text-align: right; }
.data-table th:first-child, .data-table td:first-child { padding-left: 20px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 20px; }
/* ---- Part 2 figures on narrow screens (22 Sep) ----------------------
Below 768 the text column is narrower than 696, so each figure fits
itself to the column instead of scrolling sideways. The hover chart
redraws itself (script next to it); these rules handle the rest. */
@media (max-width: 767px) {
.cvd-grid { border-spacing: 8px; margin: -8px; width: calc(100% + 16px); }
.cvd-grid th { padding-right: 4px; } /* + the 8 spacing = 12 to the first tile */
.data-table { table-layout: auto; }
.data-table col { width: auto !important; } /* the desktop column widths are inline */
.data-table th:first-child, .data-table td:first-child { padding-left: 0; padding-right: 8px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
}
@media (max-width: 660px) {
.swatch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
}
.code-inline {
font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14px;
padding: 0 2px;
background: var(--fill-badge);
border-radius: 4px;
/* 1px INNER border. An inset shadow rather than a border, so it adds
nothing to the chip's size and the line it sits in does not move. */
box-shadow: inset 0 0 0 1px var(--border-primary);
white-space: nowrap;
}
/* Back link — regular by default, faux-semibold on hover, arrow nudges
LEFT. Faux rather than real weight so the arrow's 2px nudge is the only
movement on the whole component. */
/* display:flex so the row hugs the link's own 20px line box. As a plain
block it was 23px tall — the extra 3px is inline baseline slack — which
made the measured container-to-container gap 47, not the 44 set here. */
.back-row { display: flex; margin-bottom: 60px; }
/* An H1 that follows a back row is a case-study title: 44 above (the rule
immediately above), 44 below. The index H1 has no back row, so it keeps
the 44 set on .main__heading and its gap to the cards is untouched.
NOTE: if an anchor row is later added to the index using .back-row, this
will apply there too — scope it then. */
.back-row + .main__heading { margin-bottom: 44px; }
.back-link {
position: relative; /* anchors the invisible 44px hit area */
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--label-secondary); /* label-secondary at rest, label-primary on hover/press, like the "Case studies" crumb (Marina, 5 Oct; was label-primary) */
text-decoration: none;
}
.back-link:hover, .back-link:active { color: var(--label-primary); }
.back-link:hover .back-link__label { text-shadow: var(--faux-bold); }
/* Invisible 44px-tall target, centered on the link. Costs no layout space,
so the focus ring stays on the 20px link while the tap area meets 44px. */
.back-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 44px;
}
.back-link__label { display: inline-block; }
.back-link__arrow {
width: 16px;
height: 16px;
flex: none;
color: var(--label-primary); /* black at rest and on hover; only the label changes colour (Marina, 5 Oct) */
transition: transform var(--card-ease) ease; /* 0.35, same as the cards and the gate (Marina, 3 Oct; was 0.2) */
}
.back-link:hover .back-link__arrow { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) {
.back-link__arrow { transition: none; }
}
/* ==================================================================
PASSWORD GATE (Marina's Figma, 2 Oct 2026) — Firstday 01 and 02
------------------------------------------------------------------
Only on the locked shells written by tools/build_locked.py. While
locked the page does not scroll; the card sits 4 above the footer,
over the public text (Overview through the text before the first
figure). The glass is the annotation cards' plate (shared rule
above); only the fill differs: transparent at the top, #F7F7F7 by
60% down. Measured off her 1920 x 830 frame; 1px edges are taken
out of the padding so the outer box matches (rule 1).
================================================================== */
html.gate-locked { overflow: hidden; } /* the window, not body: body must not become the sticky card's scroller */
html.gate-locked .footer { position: sticky; bottom: 0; z-index: 5; }
html.gate-checking .gate-card { visibility: hidden; }
/* The 28 between the card and the footer is plain page, never text (3 Oct). */
.gate-band {
position: fixed; /* placed by the gate script over the footer's full width */
left: var(--side-panel); right: 0; bottom: 60px;
height: 28px;
margin: 0;
z-index: 3; /* over the text, under the card and its shadow */
background-color: var(--background-primary); /* the gate script adds the locked screen's dots, lined up with the canvas (8 Oct) */
pointer-events: none;
}
/* .article > .gate-card outranks the shared glass rule further down,
which would otherwise reset the radius to 15 and the fill. */
.article > .gate-card {
/* Fixed to the window (the page doesn't scroll while locked). The gate
script sets bottom = footer + 28, the width (784, or the main column
less 20 a side when narrower) and a whole-pixel left, centred on the
reading column, so it holds at every window size (3 Oct). */
position: fixed;
bottom: 88px; /* fallback; the script measures the real footer */
z-index: 4;
width: 784px; /* text column 696 + 44 either side (Marina, 5 Oct: back to 784 from 752) */
padding: 28px 44px 28px; /* 28 top and bottom, 44 sides (Marina, 5 Oct; was 44/28/28 in getux-site-5oct-e); edge is drawn inside (inset), so no shaving */
border: 0; /* inner edge only, on ::after: a real border is translucent and lets the page show through */
border-radius: 36px; /* Marina, 3 Oct */
box-shadow: 0 3px 12px rgba(0,0,0,0.10);
background-image:
linear-gradient(180deg, rgba(0,0,0,0.043) 0,
rgba(0,0,0,0.038) 2px,
rgba(0,0,0,0.026) 4px,
rgba(0,0,0,0.022) 6px,
rgba(0,0,0,0.018) 10px,
rgba(0,0,0,0.010) 16px,
rgba(0,0,0,0) 24px),
linear-gradient(0deg, rgba(255,255,255,0.81) 0,
rgba(255,255,255,0.81) 2px,
rgba(255,255,255,0.70) 4px,
rgba(255,255,255,0.43) 7px,
rgba(255,255,255,0.32) 11px,
rgba(255,255,255,0.15) 15px,
rgba(255,255,255,0) 27px),
/* her fill: translucent at the top, opaque by 60% */
linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 60%); /* white (3 Oct; was #F7F7F7) */
}
.article > .gate-card { max-width: none; margin: 0; }
.article > .gate-band { max-width: none; margin: 0; } /* the footer's full width, not the text column */
/* Glass (3 Oct): Chrome limits a backdrop blur to the element's visible box,
so text just under the card's top edge stayed half sharp. Instead the gate
script lays a blurred copy of the public text under the card, trimmed to
its shape (.gate-frost, below); the card carries only fill and edge.
Same 11px as the annotation cards. */
.article > .gate-card {
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* her shadows: the cards' drop shadow, plus a glow lifted above the card
(0 -6 50 #F8F8F8, Marina, 3 Oct) that fades the page text over its top
edge without touching the glass */
box-shadow: 0 3px 12px rgba(0,0,0,0.10), 0 -6px 50px #F8F8F8;
}
.gate-frost {
position: fixed;
z-index: 3; /* under the card (4), over the page */
margin: 0;
box-sizing: border-box;
pointer-events: none;
background: var(--background-primary);
filter: blur(11px);
}
.gate-frost .sidepanel { position: static; } /* the copy doesn't scroll; keep the panel where it sits */
.article > .gate-card::after {
content: "";
position: absolute;
pointer-events: none;
box-shadow: inset 0 0 0 1px var(--border-primary); /* the card's edge, drawn inside */
}
.article > .gate-card::after {
content: "";
position: absolute;
pointer-events: none;
}
.article > .gate-card::before {
inset: -33px; /* padding box + 32 */
z-index: -2;
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
}
.article > .gate-card::after {
inset: 0;
z-index: -1;
border-radius: 36px;
background-image:
linear-gradient(180deg, rgba(0,0,0,0.043) 0,
rgba(0,0,0,0.038) 2px,
rgba(0,0,0,0.026) 4px,
rgba(0,0,0,0.022) 6px,
rgba(0,0,0,0.018) 10px,
rgba(0,0,0,0.010) 16px,
rgba(0,0,0,0) 24px),
linear-gradient(0deg, rgba(255,255,255,0.81) 0,
rgba(255,255,255,0.81) 2px,
rgba(255,255,255,0.70) 4px,
rgba(255,255,255,0.43) 7px,
rgba(255,255,255,0.32) 11px,
rgba(255,255,255,0.15) 15px,
rgba(255,255,255,0) 27px),
linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 60%); /* white (Marina, 3 Oct) */
}
.gate-card__tile-icon { /* Marina's glass pulse tile (3 Oct): 2x PNG, body 60 x 60 */
position: relative;
width: 60px; height: 60px;
}
.gate-card__tile-icon img { /* the export carries its shadow: 33 each side, 28 above, 36 below */
position: absolute;
left: -33px; top: -28px;
width: 126px; height: 124px;
display: block;
pointer-events: none;
}
/* Headline = the site's h2; description = caption-1 (Marina, 3 Oct; was
Geist Mono). No visible field label: the field is named by the headline. */
.article .gate-card__title { margin: 28px 0 0; }
.article .gate-card__body {
margin: 8px 0 0;
color: var(--label-secondary);
}
.gate-card__row { display: flex; gap: 12px; margin-top: 20px; }
.gate-card__field { position: relative; flex: 1 1 auto; min-width: 0; }
.gate-card__input {
display: block; width: 100%; height: 44px;
padding: 0 45px 0 12px; /* 12 to the text; the eye button covers the right */
border: 0;
box-shadow: inset 0 0 0 1px #8B9095; /* inner edge; was #90959A (2.8:1), 3.0:1 now (3 Oct) */
border-radius: 12px; /* 12 (Marina, 3 Oct; was 10) */
background: #FFFFFF; /* white (Marina, 8 Oct; was background-primary #F9F9F9) */
font: 400 14px/16px "Geist Mono", ui-monospace, monospace;
letter-spacing: -0.4px;
color: var(--label-primary);
}
/* Hidden password: dots drawn in Geist (sans), whose bullet fills its own
slot, so the cursor lands just past each dot (Geist Mono centred them in a
letter-wide slot and the cursor fell mid-dot). 23.5px / -0.3 gives 5 x 5
dots 2 apart on a 1x screen; 10 of padding + the dot's 2 of side space puts
the first dot 12 from the edge (Marina, 3 Oct; measured). */
.gate-card__input[type="password"] { font-family: "Geist", sans-serif; font-size: 23.5px; letter-spacing: -0.3px; padding-left: 11px; padding-bottom: 4px; } /* bottom 4 lifts the dots 2 to her line */
/* Wrong password: the banner carries the error; the field keeps its normal edge (Marina, 3 Oct). */
.gate-card__eye {
position: absolute; top: 0; right: 0; /* 44 square flush with the field's right end; icon 12 in from the edge */
width: 44px; height: 44px; /* 44 tap area, 20 icon */
display: flex; align-items: center; justify-content: center;
padding: 0; border: 0; background: none; cursor: pointer;
color: var(--label-primary); border-radius: 10px;
}
/* Hover tile (Marina, 3 Oct): the arrow tile's shape (38 square, radius 8,
3 in from the field edge), shown behind the eye on hover; the icon stays 20.
Final (3 Oct): fill-primary, no edge, on the white field. */
.gate-card__eye::before {
content: ""; position: absolute; inset: 4px; border-radius: 10px; /* 36 square, 4 in, radius 10, like the arrow tile */
background: var(--background-primary); /* #F9F9F9 on the white field (Marina, 8 Oct; was white) */
box-shadow: inset 0 0 0 1px var(--border-primary); /* 1px inner edge, #000 @ 15% like the chip icon discs, so the hover shows on the #F8F8F8 field (Marina, 5 Oct; was fill only) */
opacity: 0; transition: opacity var(--card-ease) ease;
}
.gate-card__eye:hover::before { opacity: 1; }
.gate-card__eye svg { position: relative; width: 18px; height: 14px; display: block; } /* 18 wide x 14 high, no ring (Marina, 8 Oct; was 20 square with a ring) */
.gate-card__eye .icon-eye-off { display: block; }
.gate-card__eye .icon-eye-on { display: none; }
.gate-card__eye[aria-pressed="true"] .icon-eye-off { display: none; }
.gate-card__eye[aria-pressed="true"] .icon-eye-on { display: block; }
.gate-card__btn {
flex: none; width: auto; min-width: 200px; height: 44px; /* hugs its content: 16 + label 143.3 + 8 + arrow 16 + 16 = 199.3, min 200 (Marina, 9 Oct: no tile; was 208 with the 36 tile) so the row stays on whole pixels (text soft on 1x screens otherwise); the field takes the rest of the row (Marina, 5 Oct; was a fixed 211) */
display: flex; align-items: center; justify-content: space-between; gap: 8px; /* label → tile 8 (8.4 with the rounding; Marina, 5 Oct; was 12; 32/38/40/44 tried) */
padding: 0 16px; /* 16 both sides (Marina, 9 Oct; was 16 left, 4 right of the tile) */
border: 0; border-radius: 12px; /* 12 at rest and disabled; hover/press → pill (Marina, 9 Oct) */
transition: border-radius var(--card-ease) ease;
background: var(--fill-purple); color: #ffffff; cursor: pointer; /* purple (Marina, 9 Oct; olive #697500 before, black before that) */
font: 500 14px/16px "Geist Mono", ui-monospace, monospace; letter-spacing: 0; /* Geist Mono Medium 14/16, 0 tracking (Marina, 9 Oct; was Regular 400, -0.6 from 5 Oct); colour stays white */
white-space: nowrap;
}
.gate-card__tile { /* no tile since 9 Oct (Marina): just the 16 arrow, in the label's colour */
width: 16px; height: 16px; flex: none;
background: none; color: inherit;
display: flex; align-items: center; justify-content: center;
}
/* The card CTAs' dashed arrow: same glyph, same label-14-bold type (3 Oct). */
.gate-card__arrow {
display: inline-block;
font-family: var(--font);
font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: -0.09px;
}
.gate-card__arrow::before { content: ""; display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon-arrow-forward) center / 16px 16px no-repeat; mask: var(--icon-arrow-forward) center / 16px 16px no-repeat; } /* forward arrow icon (8 Oct; was the dashed glyph) */
/* No nudge here: the tile turning into a circle is the hover cue, and a
moving arrow would sit off-centre in it (Marina, 3 Oct). */
/* Hover (Marina, 3 Oct): the field's edge turns black; the button's arrow
tile rounds into a circle. Both ease over 0.2s. */
.gate-card__input { transition: box-shadow 0.2s ease; }
.gate-card__field:hover .gate-card__input { box-shadow: inset 0 0 0 1px var(--label-primary); }
/* Hovering the eye shows its tile only; the field edge stays grey (Marina, 3 Oct) */
.gate-card__field:has(.gate-card__eye:hover) .gate-card__input:not(:focus) { box-shadow: inset 0 0 0 1px #8B9095; }
/* Hover and press (Marina, 9 Oct): the button rounds into a pill. 22 = half its 44 height, which is
what her 100 renders as; animating to 22 rather than 100 keeps the 0.35 ease even. */
.gate-card__btn:hover, .gate-card__btn:active { border-radius: 22px; }
/* Arrow nudges 2px right on hover/press (Marina, 9 Oct), same 0.35 ease; never when disabled. */
.gate-card__tile { transition: transform var(--card-ease) ease; }
.gate-card__btn:not([disabled]):hover .gate-card__tile,
.gate-card__btn:not([disabled]):active .gate-card__tile { transform: translateX(2px); }
/* Disabled (Marina, 3 Oct): until the field has something in it, and while
a password is being checked. Grey fill and label; the white tile and its
arrow stay; no hover change. */
.gate-card__btn[disabled] { background: var(--fill-secondary); /* #EDEDEC (Marina, 5 Oct; was fill-badge #F0F0EE) */ color: var(--label-disabled); cursor: default; }
.gate-card__btn[disabled]:hover, .gate-card__btn[disabled]:active { border-radius: 12px; } /* disabled: no hover change */ /* arrow in label-disabled (Marina, 3 Oct) */ /* disabled tile: 1px inline edge, #000 @ 15%, same as the chip icon discs (Marina, 3 Oct) */
.gate-card__btn.is-checking { cursor: progress; }
/* Typing (focus) state (Marina, 3 Oct), click and keyboard alike: the
field's own 1px inner edge turns black, and a 1px dashed ring (2 on, 2 off,
like the chips) sits 3px outside it, radius 14 against the field's 12.
Both lines are drawn inside their shapes, so nothing changes size.
Alternatives kept in mind: the site ring (2px outline, 2px clear) and a
2px centred black stroke. */
.gate-card__input:focus,
.gate-card__input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #8B9095; } /* typing: the field keeps its default edge; only the dashed ring is black (Marina, 9 Oct; edge was black) */
.gate-card__field:has(.gate-card__input:focus) .gate-card__input { box-shadow: inset 0 0 0 1px #8B9095; } /* also while hovered */
.gate-card__focus-ring {
position: absolute; inset: -3px;
width: calc(100% + 6px); height: calc(100% + 6px);
pointer-events: none;
display: none;
}
.gate-card__focus-ring rect {
x: 0.5px; y: 0.5px;
width: calc(100% - 1px); height: calc(100% - 1px);
rx: 13.5px;
fill: none;
stroke: var(--label-primary);
stroke-width: 1px;
stroke-dasharray: 6 3; /* 6 on, 3 off (Marina, 8 Oct; 8 4 tried; was 1 2, and 2 2 before that) */
}
.gate-card__field:has(.gate-card__input:focus) .gate-card__focus-ring { display: block; }
.gate-card__eye:focus-visible,
.gate-card__btn:focus-visible { outline: 2px solid var(--label-primary); outline-offset: 2px; }
/* Error banner (Marina's design, 3 Oct): as wide as the field, 20 above and
below, 12 padding, radius 10, 1px inner edge #E5442A on #FFF4F4. Icon =
outlined warning triangle in the set style (16, 1.5 lines). The card grows
upward, since its bottom is pinned. */
.gate-card__error {
display: flex; align-items: flex-start; gap: 8px; /* icon → text 8 (Marina, 3 Oct; was 12) */
width: 100%; /* spans the whole row, field to button, at every size (Marina, 3 Oct) */
margin: 20px 0 0;
padding: 12px;
border-radius: 10px;
background: #FFF4F4;
box-shadow: inset 0 0 0 1px #E5442A;
}
.gate-card__error[hidden] { display: none; }
.gate-card__error-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #E5442A; }
.article .gate-card__error-title { margin: 0; color: var(--label-primary); }
.article .gate-card__error-body { margin: 5px 0 0; color: var(--label-tertiary); } /* measured off her frame */
@media (prefers-reduced-motion: reduce) { .gate-card__arrow, .gate-card__input, .gate-card__tile, .gate-card__btn, .gate-card__eye::before { transition: none; } }
@media (max-width: 620px) { /* phones (Marina, 3 Oct, rev 2): card 4 from each edge and 4 above
the footer, radius 28, padding 16 (content 20 in = the text column);
one row, the field shrinks; button 12 left padding, 8 label to tile */
.article > .gate-card { padding: 16px 16px 20px; border-radius: 28px; } /* 16 top and sides, 20 bottom (3 Oct) */
.article .gate-card__title { margin-top: 20px; } /* tile → headline 20 on phones (3 Oct) */
.article > .gate-card::after { border-radius: 28px; }
.gate-card__btn { padding: 0 16px; gap: 8px; min-width: 200px; } /* phones = desktop (Marina, 9 Oct): 16 + label 143.3 + 8 + arrow 16 + 16 = 199.3, min 200 (9 Oct; was 193) for whole pixels (5 Oct; was a fixed 203) */
}
/* ==================================================================
RESPONSIVE
================================================================== */
@media (max-width: 1000px) {
/* Single column: panel, then heading, then main. */
.layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
.layout__head { grid-column: 1; grid-row: 2; }
.main { grid-column: 1; grid-row: 3; }
.footer { grid-column: 1; }
.sidepanel__rule { display: none; } /* the panel is no longer beside the footer */
.sidepanel {
grid-column: 1;
grid-row: 1;
width: 100%;
position: static;
height: auto;
border-right: none;
border-bottom: 1px solid var(--border-primary);
/* 27 + the 1px border = 28 from the chips to the line, the same
"the rule is the last pixel" arithmetic as the desktop 59 + 1. */
padding-bottom: 27px;
}
.h1 { font-size: 44px; line-height: 52px; }
/* The panel stacks here, but the divider now marks the identity block,
so it stays; the identity stops reserving the panel's width and hugs
its own content, bringing the line and the nav in with it. The -1px
overlap is dropped and replaced by a real 20px gap, matching the 20
on the nav's side: once the identity hugs, that last pixel is the
final glyph of "Toronto, Canada" rather than empty space. */
.identity { flex: 0 0 auto; }
.topnav__divider { margin-left: 20px; }
}
@media (max-width: 620px) {
.layout__head { padding: 28px 20px 0; }
.main { padding: 0 20px 48px; }
.h1 { font-size: 34px; line-height: 40px; }
.topnav { padding-right: 20px; }
}
/* The full trail (mono crumb, 23 Sep) ends at about x500, so it needs a
520px window to clear the 20px gutter. Below 540 — that plus 20 of
slack — it falls back to the "Case studies" link alone. No loss: the H1
repeats the page name a few lines further down. The divider stays. */
@media (max-width: 540px) {
.crumbs__item + .crumbs__item { display: none; }
}
/* ==================================================================
ANNOTATION-2
------------------------------------------------------------------
A glass card carrying one annotation: an icon + headline row, then
body copy. 328 wide, height hugs the text.
Type comes from the shared styles — .mono-label-14-bold for the headline,
.mono-body for the body — so this rule only sets box, fill and depth.
WHAT FIGMA'S GLASS DOES THAT CSS CANNOT
Figma's Glass effect has six controls. Frost maps to backdrop-filter
and the light angle maps to a gradient, but Refraction, Depth and
Dispersion bend and colour-split the backdrop live, and the browser
has no equivalent. So the look below is reconstructed by measuring
Marina's export rather than translated from the parameters.
Measured from that export, over an #F1F1F1 ground:
outer box 328 x 178 incl. a 1px edge -> 176 inner
edge flat 1px dark line, all four sides, ~15% black
fill 234 at the top, 244 through the middle, 253 at the
bottom: an inner shade under the top edge and an inner
highlight along the bottom one, over a light base
Built as translucent layers, not opaque greys, so the card still
tints with whatever canvas it sits on.
THE MARKUP (the icon lives in the HTML so it can vary per note):
The blur IS calibrated now — see the note on backdrop-filter below.
On a flat canvas it stays a no-op; blurring a solid colour returns the
same colour, so it only shows where a card overlaps a screenshot. ==== */
/* The glass plate itself — border, layered fill and frost. Shared with
.quote-card, which is the same plate at a different size. Box, padding
and depth stay with each card, because those are what differ. */
.annotation-2,
.quote-card,
.tipbig,
.gate-card {
box-sizing: border-box;
border: 1px solid var(--border-primary);
border-radius: 15px;
background-clip: padding-box;
background-image:
/* inner shade under the top edge — steep for 4px, then a long tail */
linear-gradient(180deg, rgba(0,0,0,0.043) 0,
rgba(0,0,0,0.038) 2px,
rgba(0,0,0,0.026) 4px,
rgba(0,0,0,0.022) 6px,
rgba(0,0,0,0.018) 10px,
rgba(0,0,0,0.010) 16px,
rgba(0,0,0,0) 24px),
/* inner highlight along the bottom edge */
linear-gradient(0deg, rgba(255,255,255,0.81) 0,
rgba(255,255,255,0.81) 2px,
rgba(255,255,255,0.70) 4px,
rgba(255,255,255,0.43) 7px,
rgba(255,255,255,0.32) 11px,
rgba(255,255,255,0.15) 15px,
rgba(255,255,255,0) 27px),
/* the light base the glass adds over its ground */
linear-gradient(rgba(255,255,255,0.24) 0 100%);
/* CALIBRATED Sep 2026. Measured against the HomeAds composition where a
card overlaps a phone screenshot: swept blur 0-26px and compared the
mean and standard deviation of the backdrop showing through. Figma's
Frost 22 lands at 11px — mean within 2 levels, sd within 1.2.
Rule of thumb: CSS blur px is about half Figma's Frost value. */
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
}
.annotation-2 {
width: 328px;
padding: 12px;
box-shadow: 0 3px 12px rgba(0,0,0,0.10);
}
.annotation-2__head {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
}
.annotation-2__icon {
flex: none;
width: 16px;
height: 16px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
}
/* The dashed border carries a slightly lighter stroke than the glyph.
At 16px a 1.7 stroke with 1.8px gaps antialiases the gaps shut and the
square reads solid; 1.4 is the heaviest weight where the dashes survive. */
.annotation-2__icon rect { stroke-width: 1.4; }
/* HomeAds cards (23 Sep): the dashed square became corner brackets, same
16px box, 5px arms, 2.2 inner corners, 1.4 against the glyph's 1.7. */
.annotation-2__icon .annotation-2__frame { stroke-width: 1.4; stroke-linejoin: round; }
.annotation-2__body {
margin: 8px 0 0;
color: var(--label-tertiary);
}
/* ==================================================================
QUOTE CARD
------------------------------------------------------------------
The same glass plate as .annotation-2 — same border, fill and frost,
measured off the same export — but wider, with no drop shadow, and
laid out as a quote mark ABOVE the copy rather than an icon beside a
headline. Type comes from .mono-body.
Padding is 20 at the top and 12 on the other three sides; the gap
under the mark is 12. Height is left to the copy: 20 + 20 (mark) +
12 + 16 per line + 12, plus the 1px edge top and bottom, so four
lines makes 130. That matters — the cards are stacked to a fixed
overlap and centred in the map, so one line more or less in any of
them moves everything below it. =============================== */
.quote-card {
width: 420px;
padding: 20px 12px 12px;
}
.quote-card__icon {
display: block;
width: 27px;
height: 20px;
margin-bottom: 12px;
fill: none;
stroke: #90959A;
}
.quote-card__body {
margin: 0;
color: var(--label-tertiary);
}
/* ==================================================================
COVERAGE MAP
------------------------------------------------------------------
A flat map export with the town pins rebuilt as live text, so the
names stay crisp when the canvas is scaled and read as text rather
than picture. The export is 2x, placed at 672 x 468; the inner box
is pulled 1px up and left so the stroke lands ON the art's outer
edge, which is how Figma draws an inside stroke.
================================================================== */
.ha-map {
width: 672px;
height: 468px;
border: 1px solid #90959A;
border-radius: 10px;
overflow: hidden;
}
.ha-map__inner {
position: absolute;
left: -1px;
top: -1px;
width: 672px;
height: 468px;
}
.ha-map__inner img {
position: absolute;
left: 0;
top: 0;
width: 672px;
height: 468px;
}
/* A town pin. Carries the product's own type — Urbanist SemiBold
12/16 — because it belongs to the map, not to this site.
`left` is the BEAK'S POINT, not the pill's edge: the pill is centred
on it with a transform, so a longer name grows both ways and the pin
stays anchored to the same spot on the map.
The shadow is a filter rather than a box-shadow. A box-shadow traces
the element's box, which would leave the beak unlit and draw a seam
where the two meet; a drop-shadow filter traces what is actually
painted, pseudo-element included, so the pin casts one silhouette. */
.map-pin {
position: absolute;
transform: translateX(-50%);
padding: 4px 6px;
border-radius: 6px;
background: #FFFFFF;
font-family: "Urbanist", var(--font);
font-weight: 600;
font-size: 12px;
line-height: 16px;
letter-spacing: 0;
color: var(--label-primary);
white-space: nowrap;
filter: drop-shadow(0 0 0.77px rgba(0,0,0,0.30))
drop-shadow(0 0.77px 11.61px rgba(0,0,0,0.12));
}
/* 11 x 5.5, centred, point down. The 0.77 corner on the point is below
a pixel at this size and CSS cannot round a clipped corner anyway. */
.map-pin::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 11px;
height: 5.5px;
margin-left: -5.5px;
background: #FFFFFF;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* ==================================================================
EXHIBIT CANVASES
A fixed 1128-wide picture made of live text. Every value is literal
and absolute, read off the Figma frame: absolute coordinates
reproduce a composition exactly, where flex or grid only approximate
it. Each canvas sets its own height and background.
THE 28 RULE (Marina, 20 Sep 2026)
Every canvas carries 28 of padding on all four sides. The height is
hand-set per canvas because the content is absolutely positioned and
nothing can push the box open, so the height IS the bottom padding:
get it wrong and the canvas gains or loses air at the foot only.
MEASURE THE 28 FROM THE VISUAL OBJECT, NOT THE ELEMENT BOX. Most of
the screenshots on these canvases are PNGs exported WITH their drop
shadow, which means transparent pixels all round — the audit canvas's
images carry roughly 13 of them at placed scale. An element's
getBoundingClientRect() includes that transparent margin, so a canvas
whose artwork sits correctly at 28 measures as though it were at 15.
Trusting the rect and "correcting" it pushes the artwork to 41 and
breaks a canvas that was right. Check the image's alpha bounds first.
================================================================== */
.exhibit {
position: relative;
width: 1128px;
background: var(--fill-primary);
border-radius: 12px;
overflow: hidden; /* the iMac bleeds to the bottom edge; the radius clips it */
}
.exhibit > * { position: absolute; margin: 0; }
/* Accessibility + hierarchy, merged (Marina, 9 Oct): replaces .exhibit--a11y (end of II) and
.exhibit--hierarchy (end of III). iPad removed; tile labels 28 from the top; headings frame
bottom 1561 → role diagram 180 below (1741); iMac flush to the bottom (1713 + 1596).
Ground: flat #F3F3F3 over the accessibility part, then the hierarchy's own F3 → ED gradient. */
.exhibit--a11y-hierarchy {
height: 3309px;
background: linear-gradient(180deg, #F3F3F3 0, #F3F3F3 1713px, #EDEDEC 100%);
}
.exhibit--account {
height: 4794.5px; /* delete modal card bottom + 28; +1603.5 for the login block; -52.5 for the shorter administrator form (10 Oct) */
/* Dark at the very top so the iMac's pale top edge reads (Marina, 9 Oct), the same fade as .exhibit--actions:
#EDEDEC → #F3F3F3 over 1300px (35% of that 3713 canvas), flat after. */
background: linear-gradient(180deg, #EDEDEC 0, #F3F3F3 1300px);
}
.exhibit--details { height: 1128px; background: var(--fill-secondary); } /* square frame */
.exhibit--data { height: 1549px; background: #F0F3F5; } /* Marina, 12 Oct: #EDF1F3, then #F0F3F5 (was fill-tertiary #F1F2F6, which the Firstday 02 widths canvas keeps) */
/* Part 2, end of section I: the dashboard canvas. */
.exhibit--dash { height: 2355px; }
/* Part 2, after III: the width constraint canvas. */
.exhibit--widths { height: 1532px; background: var(--fill-tertiary); }
/* Part 2, after V: the two arrangements (flat --fill-primary). */
.exhibit--options { height: 2250px; }
/* HomeAds — section I canvas. 1128 wide like every other; the width is
confirmed twice over by the composition: the MacBook at x25 is 1080
wide (23 to spare on the right) and the two phones at x130 span 998
(130 to spare) — both centred. */
.exhibit--ha-audit { height: 10387.5px; background: var(--fill-primary); }
/* HomeAds — section III: sitemap above a rule, persona below. */
.exhibit--ha-ia { height: 2337px; background: var(--fill-primary); }
/* HomeAds — section IV: type scale, grids, component library. NAME PENDING. */
.exhibit--ha-ui { height: 2194px; background: var(--fill-primary); }
/* HomeAds — section V: annotated wireframes. NAME PENDING.
Two parts of one composition on a single canvas; part 2 starts at 3535. */
.exhibit--ha-wire { height: 5165px; background: var(--fill-primary); }
/* HomeAds — after Impact: iMac on a white panel, phone + map card, iPad flush to the foot. */
.exhibit--ha-impact { height: 2769px; background: var(--fill-primary); }
/* Formats, errors and anchored columns (Marina, 10 Oct): between the data and login canvases, end of IX. */
.exhibit--formats { height: 2368px; background: var(--fill-primary); }
.exhibit__panel--tertiary { background: var(--fill-tertiary); } /* #F1F2F6 */
/* Column tags and the callout chip: Geist Mono 14/16 in a 28-tall chip, 1px edge, measured off her frame. */
.exhibit-tag { box-sizing: border-box; height: 28px; padding: 8.5px 5px 0; display: block; text-align: left;
background: #E7E7E4; box-shadow: inset 0 0 0 1px #C4C4C2; border-radius: 4px; color: var(--label-primary); white-space: nowrap; }
.exhibit-callout-line { width: 1px; background: var(--label-primary); }
.exhibit-callout-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--label-primary); }
.exhibit--login { height: 1128px; background: var(--fill-primary); } /* square; iMac centred */
.exhibit--actions {
height: 3713px; /* pre-admission iMac merged in; flush to the bottom */
/* Dark only at the very top, so the iMac's pale body reads against it. */
background: linear-gradient(180deg, #EDEDEC 0%, #F3F3F3 35%);
}
/* ---- Annotation ---------------------------------------------------
Always 288 wide, hug height, set in .mono-body (14/16) — not
.caption-1 (14/18), whose extra two points of leading read loose at
this measure. The braces are real Geist glyphs, inline with the
prose: they open before the first word and close after the last,
exactly as in the frame. At 16/16 they sit flush in the 16px line
box instead of stretching it. */
/* ANNOTATION-1 — the original annotation: braced prose beside an image,
no card. Was .exhibit__note; renamed Sep 2026 to sit alongside
.annotation-2. Type comes from .mono-body. */
.annotation-1 { width: 288px; color: var(--label-tertiary); }
.exhibit__brace {
font-size: 16px;
line-height: 16px;
font-weight: 600;
color: var(--label-primary);
}
/* ---- Panel ---------------------------------------------------------
A tinted card that holds an exhibit and clips whatever bleeds past
its edge. The stroke is a box-shadow rather than a border because
Figma draws it OUTSIDE the shape, and a CSS border would sit inside
and shrink the content box by half a pixel. */
.exhibit__panel {
border-radius: 10px;
box-shadow: 0 0 0 0.3px var(--border-primary);
overflow: hidden;
}
/* Two skins. Geometry is shared; only the fill differs.
NAMES PROVISIONAL — Marina to confirm --tint / --neutral. */
.exhibit__panel--tint { background: var(--fill-lavender); } /* #F5F8FF */
.exhibit__panel--neutral { background: var(--fill-secondary); } /* #EDEDEC */
.exhibit__panel--white { background: #FFFFFF; }
.exhibit__panel > * { position: absolute; margin: 0; }
/* ---- An image and the mono line that names it --------------------- */
.exhibit__shot > .mono-body { display: block; margin-bottom: 12px; }
.exhibit__shot img { display: block; width: 100%; height: auto; }
/* Images inside an exhibit ship exactly as exported — square corners.
`.article figure img` rounds every figure image to 12px, which is
right for a standalone photo and wrong here, so it is cancelled.
The second selector has to name the figure to outrank it. */
.exhibit img,
.article figure .exhibit img { border-radius: 0; }
/* ---- Canvas reveal (option H, set up by Chrome.reveal) ------------
Only canvases the script has tagged .rv-canvas are affected.
Timing, one spec site-wide (Marina, 24 Sep): ground + text 800ms,
images and tiles 1000ms starting at 150ms, all in by 1150ms. */
.rv-canvas { background: transparent !important; isolation: isolate; }
.rv-canvas::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--rv-bg-c);
background-image: var(--rv-bg-i);
opacity: 0;
transition: opacity 800ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
.rv-canvas .annotation-1,
.rv-canvas .annotation-2,
.rv-canvas .mono-body,
.rv-canvas .exhibit__panel,
.rv-canvas .quote-card,
.rv-canvas .ha-map {
opacity: 0;
transition: opacity 800ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
/* Code-built samples (hover panel, colour chips) arrive with the images. */
.rv-canvas img,
.rv-canvas .tipbig,
.rv-canvas .cchip {
opacity: 0;
transform: scale(0.98);
transition: opacity 1000ms cubic-bezier(0.2, 0.6, 0.3, 1) 150ms,
transform 1000ms cubic-bezier(0.2, 0.6, 0.3, 1) 150ms;
}
.rv-canvas.is-in::before,
.rv-canvas.is-in .annotation-1,
.rv-canvas.is-in .annotation-2,
.rv-canvas.is-in .mono-body,
.rv-canvas.is-in .exhibit__panel,
.rv-canvas.is-in .quote-card,
.rv-canvas.is-in .ha-map,
.rv-canvas.is-in img,
.rv-canvas.is-in .tipbig,
.rv-canvas.is-in .cchip { opacity: 1; transform: none; }
/* Applied for one frame while the script hides things, so they vanish
instantly instead of fading out first. */
.rv-prep, .rv-prep *, .rv-prep::before { transition: none !important; }
/* Single images (index thumbnails, article figures): the canvas image
timing, so the whole site moves at one speed (24 Sep; was 700ms). */
.rv-img {
opacity: 0;
transform: scale(0.98);
transition: opacity 1000ms cubic-bezier(0.2, 0.6, 0.3, 1) 150ms,
transform 1000ms cubic-bezier(0.2, 0.6, 0.3, 1) 150ms;
}
.rv-img.is-in { opacity: 1; transform: none; }
/* ---- Glass tile ----------------------------------------------------
A floating 60px icon plate. Figma's Glass effect is set to
Light -45deg / 75%, Refraction 1, Depth 17, Dispersion 4, Frost 1.5,
Splay 0, over a drop shadow of X0 Y3 Blur22 Spread0 at #000 5%.
Only two of those have CSS equivalents. Frost maps to
`backdrop-filter` — a blur applied to whatever is painted BEHIND an
element, like frosted bathroom glass. Light maps to a directional
inner highlight. Refraction, Depth and Dispersion — the edge bending
what is behind it and fringing it toward colour — have no CSS
property at all, so the rest is matched to the rendered frame by
measurement rather than by reproducing the effect:
plate centre L229-238 against a 243 ground -> a ~4% black tint,
strongest at the top-left, easing to the bottom-right
rim 1px at L254 -> a near-white inner ring
Values live in tokens so a second glass surface can reuse them. */
.exhibit__glass {
width: 60px;
height: 60px;
border-radius: var(--glass-radius);
display: grid;
place-items: center;
background: var(--glass-tint);
backdrop-filter: blur(var(--glass-frost));
-webkit-backdrop-filter: blur(var(--glass-frost));
box-shadow: var(--glass-shadow);
color: var(--label-primary);
}
/* The rim is a 1px ring, not a border, because a border can only be one
flat colour and this one has to change round the shape. The trick:
paint the gradient over the whole tile, then mask out everything
except the 1px padding band — two masks, one clipped to the content
box, XOR'd so only the frame survives. */
.exhibit__glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--glass-rim);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* 28px icon frame inside the 60px plate (16px padding all round),
carrying a 24px glyph. The glyph is drawn on the same 16 box as the
chip icons; stroke-width is divided by the scale factor so the
rendered weight stays 1.4 instead of scaling up to 2.1. */
.exhibit__glass svg {
display: block;
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.4; /* scales with the glyph: renders as 2.1 at 24px */
stroke-linecap: round;
stroke-linejoin: round;
}
/* 76 x 76 glass tile over a chip's corner: the part 1 glass recipe
(tint, conic rim, frost, shadow) at a bigger size and corner. The tile
is CENTRED on the chip's corner, so it hangs 38 out and covers 38 in.
Which corner it takes is per chip, as in Marina's frame.
DEPTH: Figma's glass magnifies what sits under it, which is why the
chip's corner reads as a soft blob inside the tile. CSS cannot magnify
a backdrop, so the blob is drawn: a circle of the chip's own colour,
blurred, sitting where the covered corner is. */
/* A glass tile exported from Figma, with its real depth baked in.
Placed by its visible square: the export carries 44 left / 52.5 top of
transparent margin. */
.exhibit .glass-shot { z-index: 3; }
.exhibit__glass--tile { width: 76px; height: 76px; border-radius: 24px; z-index: 3; overflow: hidden; }
.exhibit__glass--tile::before {
content: "";
position: absolute;
width: 40px; height: 40px;
border-radius: 100px;
background: var(--refract);
opacity: 0.72;
filter: blur(7px);
}
.exhibit__glass--br::before { right: 4px; bottom: 4px; } /* chip covered at the tile's bottom-right */
.exhibit__glass--bl::before { left: 4px; bottom: 4px; } /* ... bottom-left */
/* ==================================================================
NARROW WINDOWS — the canvas scales, it never reflows.
A fixed 1128 composition cannot rewrap, so when its column is
narrower the whole thing shrinks as one unit. (Chosen over sideways
scrolling, Sep 2026.) Note the column only REACHES 1128 at viewports
of 1540+; at 1440 the figure is 1028, so the resting scale on a
common laptop is already 0.91.
================================================================== */
/* The whole canvas shrinks as one unit, exactly like an
exported image does. `transform` doesn't change layout size, so
dot-grid.js also sets the wrapper's height to match. */
.exhibit-frame--scale { overflow: hidden; }
/* The transform goes on whatever the frame's single child is: one canvas,
or an .exhibit-stack holding several. Scaling the stack rather than each
canvas keeps the gap between them proportional as the group shrinks. */
.exhibit-frame--scale > * {
transform: scale(var(--s, 1));
transform-origin: top left;
}
.exhibit-stack {
width: 1128px;
display: flex;
flex-direction: column;
gap: 20px;
}