`
and is what makes each pair one grid cell.
-------------------------------------------------------------------------- */
.hw-facts {
box-sizing: content-box; /* the design canvas's sizing: see section 3 */
flex: 1 1 380px;
min-width: 0;
margin: 0;
padding: 12px;
border-radius: 24px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-big);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.hw-fact {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
border-radius: 18px;
background: var(--bg);
}
.hw-fact__pop {
align-self: flex-start;
}
.hw-fact__tile {
width: 40px;
height: 40px;
border-radius: 13px;
background: var(--chip);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.hw-fact__label {
font-size: 14px;
font-weight: 700;
color: var(--muted);
}
.hw-fact__value {
margin: 0;
font-size: 18px;
line-height: 1.3;
font-weight: 800;
}
/* -----------------------------------------------------------------------------
28.4 Plain alerts: the band and the three samples
-----------------------------------------------------------------------------
The band is full-bleed and the content inside it is wrapped, which is why
the `.sec` rhythm sits on the section and the 80px of air sits on the inner
wrap: the tint has to reach both page edges.
-------------------------------------------------------------------------- */
.hw-band {
background: var(--band);
}
.hw-band__inner {
padding-top: 80px;
padding-bottom: 80px;
display: flex;
flex-direction: column;
gap: 28px;
}
.hw-band__head {
gap: 14px;
max-width: 760px;
}
.hw-says {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 16px;
}
.hw-say {
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift);
}
/* `space-between` puts the kind label at the start of the row and the "Hear
it" button at the end, which is the design's own layout.
THE 44px IS A RESERVE, NOT A DECORATION. The button ships `hidden` and
public/scripts/hear-it.js removes the attribute, so without this the row
would be the height of the 16px level bars until the script ran and then
jump to the button's 44px. apps/site/README.md records the same requirement
for the Progress page's filter row: a control revealed by script has its
height reserved in CSS so revealing it shifts nothing. The design's own row
is 44px tall for the same reason — it contains the same button. */
.hw-say__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 44px;
}
.hw-say__kind {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.hw-say__bars {
display: inline-flex;
align-items: center;
gap: 2px;
height: 16px;
color: var(--blue);
}
/* Five level bars. At rest they sit at half height and do not move: the
design only animates them while that sample is being spoken. The
`transform` is a resting state rather than an animation's end frame, so
section 25's reduced-motion backstop has nothing to cancel here — with
Reduce Motion on, the bars simply stay at rest while the alert is spoken,
and the speech is the feedback. */
.hw-bar {
display: inline-block;
width: 4px;
border-radius: 2px;
background: currentColor;
transform-origin: center;
transform: scaleY(0.5);
}
.hw-bar--7 {
height: 7px;
}
.hw-bar--8 {
height: 8px;
}
.hw-bar--10 {
height: 10px;
}
.hw-bar--14 {
height: 14px;
}
.hw-bar--16 {
height: 16px;
}
/* While a sample is being spoken these bars move, and that is section 28.9's
(`.hw-say__bars--live`), with the rest of this page's motion. */
/* The "Hear it" buttons, shared between the three samples and the offline
card: the design draws the same shape in both places and differs only in
the fill and the border.
`[hidden]` needs the override because `display` is set here, which beats the
user-agent's `[hidden] { display: none }` — the same reason .tabpanel,
.mobile-menu and .pg-item each carry one. Without it the buttons would ship
visible and inert, which root CLAUDE.md rule 6 forbids.
44px is the design's `min-height` and docs/ui-rules.md's floor. These are
site chrome, not controls inside a depicted app screen, so the scaled-mockup
exemption does not apply to them and they are measured as rendered. */
.hw-hear {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 14px;
border-radius: 22px;
font-size: 14px;
font-weight: 800;
}
.hw-hear[hidden] {
display: none;
}
/* Their press feedback is section 28.9's, with the rest of the page's motion. */
.hw-say__hear {
border: 0;
background: var(--chip);
color: var(--accent);
}
/* The caption under the three samples, which is also where a failed press
says so (public/scripts/hear-it.js). The design's own two declarations; the
`[hidden]` rule is not needed for a , whose display this sheet never
sets, and is written anyway so that adding a `display` here later cannot
quietly ship a visible caption over hidden buttons. */
.hw-says__note {
margin: 0;
font-size: 14px;
color: var(--muted);
}
.hw-says__note[hidden] {
display: none;
}
/* The sample alert itself. Every one of these strings is docs/alerts.md's own
wording, character for character. */
.hw-say__quote {
margin: 0;
font-size: 20px;
line-height: 1.45;
font-weight: 800;
}
/* The taxiway letter and its phonetic word never split across a line:
"taxiway G Golf" reading down two lines would be two pieces of one fact. */
.hw-say__nb {
white-space: nowrap;
}
/* The letter plate. `aria-hidden` in the markup, so a screen reader hears
"American on taxiway Golf, about 50 seconds." once rather than the letter
and then the word. Sized in `em` so it tracks the quote's own font size. */
.hw-say__plate {
box-sizing: content-box; /* the design canvas's sizing: see section 3 */
display: inline-block;
min-width: 1.1em;
text-align: center;
padding: 0.05em 0.3em;
margin: 0 0.25em 0 0.1em;
border-radius: 4px;
background: var(--navy);
color: #ffffff;
border: 2px solid var(--sky);
font-size: 0.9em;
font-weight: 800;
line-height: 1.25;
}
.hw-say__case {
font-size: 15px;
line-height: 1.45;
color: var(--muted);
}
/* -----------------------------------------------------------------------------
28.5 "Alerts offline. Verify by radio."
-----------------------------------------------------------------------------
Root CLAUDE.md rule 6 in one card. Red in both themes, from the `--red-*`
tokens section 2 already carries, and a `role="note"` in the markup because
it is an aside about the product rather than a live alert.
-------------------------------------------------------------------------- */
.hw-alarm {
box-sizing: content-box; /* the design canvas's sizing: see section 3 */
flex: 1 1 420px;
min-width: 0;
padding: 24px;
border-radius: 24px;
background: var(--red-bg);
color: var(--red-ink);
border: 2px solid var(--red-line);
box-shadow: var(--lift);
display: flex;
flex-direction: column;
gap: 12px;
}
/* The same 44px reserve as .hw-say__top, for the same reason: this row's
"Hear it" button ships `hidden` and is revealed by script. */
.hw-alarm__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
}
/* Outlined rather than filled, which is the one way the design's offline
button differs from the three on the samples. The ink and the line are the
card's own red tokens, so it stays inside the card's palette in both
themes. */
.hw-alarm__hear {
border: 1.5px solid var(--red-line);
background: transparent;
color: var(--red-ink);
}
.hw-alarm__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hw-alarm__shout {
font-size: clamp(24px, 3vw, 32px);
line-height: 1.15;
font-weight: 800;
}
.hw-alarm__body {
font-size: 16px;
line-height: 1.55;
font-weight: 600;
}
/* This card's status line for its "Hear it" button. The design draws no
caption here, so the element ships EMPTY and inventing copy for it would be
words nobody approved; `:empty` keeps it out of the card's 12px flex gap
until the script has something to say. It inherits the card's red ink, so
its contrast is the card's own. */
.hw-alarm__note {
margin: 0;
font-size: 14px;
line-height: 1.45;
font-weight: 600;
}
.hw-alarm__note:empty {
display: none;
}
/* -----------------------------------------------------------------------------
28.6 The two stacked sections: the tools, and the four nevers
-------------------------------------------------------------------------- */
.hw-stack {
display: flex;
flex-direction: column;
gap: 28px;
}
.hw-stack__head {
gap: 14px;
max-width: 680px;
}
.hw-tools {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 20px;
}
.hw-tool {
padding: 24px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift);
display: flex;
gap: 16px;
align-items: flex-start;
}
/* `.hr-tile` (section 26.13) is what makes this answer a hover anywhere on
its card, which is how the designs tie the tile to the card rather than to
the pointer's exact position. */
.hw-tool__tile {
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--chip);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.hw-tool__text {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.hw-tool__title {
font-size: 20px;
line-height: 1.25;
font-weight: 800;
}
.hw-tool__body {
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
.hw-nevers {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
gap: 16px;
}
.hw-never {
padding: 20px 22px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift);
display: flex;
gap: 16px;
align-items: flex-start;
}
/* A crossed-out circle, filled and round. It does not answer a hover: the
design gives these no `.hr-tile`, and a "never" is not an invitation. */
.hw-never__tile {
width: 44px;
height: 44px;
border-radius: 22px;
background: var(--tile);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 14px rgba(2, 17, 58, 0.25);
}
.hw-never__text {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.hw-never__title {
font-size: 19px;
line-height: 1.3;
font-weight: 800;
}
.hw-never__body {
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
/* -----------------------------------------------------------------------------
28.7 Route-informed alerts, later
-----------------------------------------------------------------------------
Drawn as an outline rather than a filled card, which is the design saying
the thing inside it does not exist yet. Root CLAUDE.md rule 4: route-
informed alerts stay off for customers until counsel approves.
-------------------------------------------------------------------------- */
.hw-later {
box-sizing: content-box; /* the design canvas's sizing: see section 3 */
flex: 1 1 420px;
min-width: 0;
padding: 22px;
border-radius: 22px;
background: transparent;
border: 2px dashed var(--route);
display: flex;
gap: 16px;
align-items: flex-start;
}
/* `hw-next` is the design's own name for this ring. APPROVED LOOP 3 of 4 —
hrPing (docs/ui-rules.md, Dylan, Oct 27, 2026). It marks what is next and
depicts nothing: no alert, no aircraft, no decision, and nothing is read
off it. Unlike Home's `.tl-dot--pending` it has no breathing centre dot —
the design draws only the ring here. */
.hw-next {
flex-shrink: 0;
position: relative;
width: 16px;
height: 16px;
margin-top: 4px;
border-radius: 8px;
border: 3px solid var(--muted);
box-sizing: border-box;
color: var(--muted);
}
.hw-next::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border-radius: 50%;
border: 2px solid currentColor;
box-sizing: border-box;
animation: hrPing 2.4s ease-out infinite;
}
.hw-later__text {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.hw-later__label {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.hw-later__body {
font-size: 17px;
line-height: 1.55;
font-weight: 600;
}
/* -----------------------------------------------------------------------------
28.8 On to the next page
-----------------------------------------------------------------------------
One large card-shaped link, so the whole card is the target rather than a
word inside it.
-------------------------------------------------------------------------- */
.hw-onward-sec {
padding-top: 72px;
padding-bottom: 96px;
}
/* `:hover` is listed BESIDE the base state, and that is load-bearing rather
than tidy: section 3's `a:hover { color: #0442b0 }` is a type selector plus
a pseudo-class, which outranks a single class, so without the second
selector here the whole card's text turns brand blue on hover. The designs'
own card is `color: {{c.ink}}` with no hover colour at all. */
.hw-onward,
.hw-onward:hover {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 24px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-big);
color: var(--ink);
text-decoration: none;
}
.hw-onward__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.hw-onward__label {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.hw-onward__title {
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 800;
}
.hw-onward__arrow {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 24px;
background: var(--blue);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(4, 97, 248, 0.38);
}
/* -----------------------------------------------------------------------------
28.9 Motion
-----------------------------------------------------------------------------
Everything this page moves on its own, all of it the designs'. Everything
else moves through the shared classes in section 26.13 (`.hr-card`,
`.hr-tile`, `.hr-blob`) and the scroll-driven reveals (`.hr-rise`,
`.hr-pop`).
The whole block is cancelled by section 25's reduced-motion backstop
(`animation: none !important`, `transition: none !important` on every
element and pseudo-element). NOTHING BELOW HIDES ANYTHING ON ITS OWN — the
hidden frame lives inside `hrUp`, not in the rule that uses it, and the
level bars' resting `scaleY(0.5)` is a declaration in section 28.4 rather
than an animation's end frame — so cancelling every animation here leaves
each element at its natural, visible position. That is the distinction the
hero's 34 approach lights got wrong once: a rule that declares `opacity: 0`
itself and relies on an animation to undo it needs a finished state in the
reduce block, and src/html/motion.test.ts scans both stylesheets for
exactly that shape.
-------------------------------------------------------------------------- */
/* The three flow cards rise in turn under the hero copy. Delays are the
design's own (.35s, .5s, .65s), as classes rather than inline styles. */
.hw-node {
animation: hrUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hw-node--1 {
animation-delay: 0.35s;
}
.hw-node--2 {
animation-delay: 0.5s;
}
.hw-node--3 {
animation-delay: 0.65s;
}
/* Press feedback on the onward card, the same shape section 26.13 gives the
header links and the calls to action. Declared here rather than appended to
that list so this task changes no shared rule. */
.hw-onward {
transition: transform 0.14s ease-out, box-shadow 0.2s ease-out,
background-color 0.2s ease-out;
}
.hw-onward:active {
transform: scale(0.97);
}
/* The same, for the four "Hear it" buttons (task R3b), and declared separately
for the same reason.
THE DESIGN'S OWN CLASS NAME IS NOT USED, deliberately. design/How.dc.html
puts `.hr-press` on these buttons and declares exactly these two rules
against it. Nothing in this stylesheet has ever carried that class — every
converted page declares the effect on its own element instead — so shipping
the name would have put a word in a class attribute that styles nothing,
and a reader would reasonably assume the press effect was there. It WAS
written that way first, and the check is
`grep -cE '^\.hr-press' public/styles/site.css` — no rule here selects it,
and the only mentions of the name in this file are in this comment. (That
second clause is why the query is anchored: a plain `grep -c hr-press`
counts this paragraph, so the obvious command would answer about itself.) */
.hw-hear {
transition: transform 0.14s ease-out, box-shadow 0.2s ease-out,
background-color 0.2s ease-out;
}
.hw-hear:active {
transform: scale(0.97);
}
/* The level bars beside a sample's kind label, while that sample is being
spoken. Added by public/scripts/hear-it.js only when the speech module
reports it actually spoke, and taken off when the utterance's time is up or
when the browser turns out to have said nothing — so the bars can never
claim speech over silence.
FOUR ITERATIONS, AS THE DESIGN DRAWS THEM (`hrBar .7s ease-in-out 4`), and
four 0.7s iterations is what makes 2800ms the right lifetime for the class
in that file. docs/ui-rules.md's approved-loop list is untouched: this is
finite. The three per-bar durations are the design's too, and they are what
stops the five bars moving as one block. */
.hw-say__bars--live .hw-bar {
animation: hrBar 0.7s ease-in-out 4;
}
.hw-say__bars--live .hw-bar:nth-child(2) {
animation-duration: 0.55s;
}
.hw-say__bars--live .hw-bar:nth-child(3) {
animation-duration: 0.8s;
}
.hw-say__bars--live .hw-bar:nth-child(4) {
animation-duration: 0.6s;
}
/* =============================================================================
29. Progress — the Oct 27 redesign
=============================================================================
Everything below builds `apps/site/design/Progress.dc.html`, which Dylan
approved on Oct 27, 2026 along with its five siblings (Progress-Night,
Progress-Tablet, Progress-Tablet-Night, Progress-Mobile,
Progress-Mobile-Night). Those five differ from Progress.dc.html only in the
canvas preview size and the default theme — checked, not assumed: with both
files' tags on separate lines, `diff` reports the preview size and, on the
three Night variants, the theme default, and nothing else. So every rule
here is Progress.dc.html's, and the responsive behaviour is its own media
queries at 900 and 480 px, on top of the 900/760/620/560 steps section
26.14 already carries for `.sec`, the header and the menu.
THE NAMESPACE IS FREE. `grep -c 'pg-' public/styles/site.css
public/styles/mockups.css` returned 0 in each before this section, the same
check task R3a made for `hw-`.
WHAT IS NOT HERE, AND WHY
-------------------------
The signup card's SUCCESS STATE. The design draws a tick, "You're on the
list.", "Updates will go to
." and a "Change" button, reachable by
typing a valid address and clicking. It is not built: docs/security.md
section 2 requires double opt-in, so that sentence would be false at the
moment it appeared, and docs/open-questions.md records the true wording as
undecided and waiting on Dylan. The idle state is built exactly as drawn,
with the design's own "Design mockup · the form isn't live yet" line, and
nothing validates, submits or speaks to a server. Held back rather than
stubbed, for the reason root CLAUDE.md rule 6 gives.
SECTION 21 WAS THE PRE-REDESIGN VERSION OF THIS PAGE AND IS NOW REMOVED
(see its stub above). Its two classes, `.note-card--upnext` and
`.progress-log`, were used by this page and by nothing else — checked with
`grep -rn 'note-card--upnext\|progress-log' public/ src/`, which finds
nothing outside the stylesheet now that the page is converted. The
`.note-card` base it layered on is section 17's and is left alone: About,
Screens and Contact are still on the old shell.
THE FOUR FILTER BUTTONS ARE 44px TALL. design/Progress.dc.html drew them at
`min-height: 40px`, below docs/ui-rules.md's 44px floor; Dylan chose the
floor over the drawing ("build the buttons at 44px", Oct 28, 2026 —
docs/ui-rules.md's "Sub-44px controls in the redesign are raised to 44px"),
and the design file was raised to 44px under that authorisation. The row
they sit in is 52px (4px of padding each side of the 44px button).
-------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
29.1 The hero
-----------------------------------------------------------------------------
`.page-hero` carries the shared part (position, navy, ink, its own clip);
these carry what this hero does differently from Home's and How it works'.
One column, an 88px foot, and an 18px rhythm.
-------------------------------------------------------------------------- */
/* The two soft lights. `.hr-blob` (section 26.13) already gives them their
shape, blur, opacity and the approved `hrDrift` loop; only the size,
position and tint differ from the other two heroes' pairs. */
.pg-hero__blob--a {
width: 520px;
height: 520px;
right: -140px;
top: -140px;
background: rgba(4, 97, 248, 0.5);
}
.pg-hero__blob--b {
width: 360px;
height: 360px;
left: -120px;
bottom: -180px;
background: rgba(4, 165, 248, 0.28);
animation-duration: 20s;
}
.pg-hero__inner {
position: relative;
padding-top: 140px;
padding-bottom: 88px;
display: flex;
flex-direction: column;
gap: 18px;
}
.pg-hero__title {
max-width: 820px;
}
/* The design's standfirst runs to 620px here where Home's stops at 540px.
Written as a descendant so the shared rule is untouched. */
.pg-hero .page-hero__lead {
max-width: 620px;
}
/* -----------------------------------------------------------------------------
29.2 "Where it is now" — the stage panel
-----------------------------------------------------------------------------
Lifted 40px over the hero's bottom edge, the same move section 26.7 makes
for Home's principles bar (which uses -44px; this panel's own figure is
-40px).
-------------------------------------------------------------------------- */
.pg-stand {
position: relative;
z-index: 3;
margin-top: -40px;
}
.pg-stand__card {
box-sizing: border-box;
padding: clamp(20px, 3.4vw, 36px);
border-radius: 28px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-big);
display: flex;
flex-direction: column;
gap: 28px;
}
.pg-stand__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 20px;
}
.pg-stand__title {
display: flex;
flex-direction: column;
gap: 4px;
}
.pg-stand__eyebrow {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* `.pg-stand__h2` IS GONE — "In the design phase." takes the shared `.t-h2`.
A SETTLED QUESTION, so it is recorded here rather than left to be
reconstructed from the design file.
This rule used to hold `clamp(24px, 2.8vw, 32px)` / `1.15` / `-0.01em`,
which is what design/Progress.dc.html draws, with a comment arguing that a
heading inside a card is one of the "component-local sizes inside a page's
own components" that `docs/ui-rules.md` exempts from the shared scale. The
How it works page read the same sentence the other way and put its card
heading on the shared class. **Dylan settled it on Oct 28, 2026 —
"shared scale"** — and `docs/ui-rules.md` now carries "A heading takes the
shared scale, wherever it sits — including inside a card". The exemption
still covers component-local sizes that are NOT headings: a chip, a label,
a badge, a number.
So the page's two off-scale headings moved onto `.t-h2` and this rule had
nothing left to declare. The line it falls on here is the heading ELEMENT:
the four ``/`` on this page take the shared scale, and
`.pg-stage__title`, `.pg-title`, `.pg-next__title` and `.pg-onward__title`
keep their own sizes because they are spans — card labels and a link's
text, not headings.
NARROWED THE SAME DAY, and the heading now matches its drawing. Measured in
Chrome, `.t-h2` alone rendered "In the design phase." at 48px where it is
drawn at 32px, and Dylan chose the drawings ("Match the drawings";
docs/ui-rules.md, "Card headings match their drawings"). The shared scale
now carries four card steps, and this heading takes step 1,
`.t-h2 .t-h2--card-s` — the figures this rule used to hold, now in the
scale where every card heading of this kind can reach them. The earlier
before-and-after is in docs/evidence/2026-10-27-step0.5-R5-progress.md
§10b. */
.pg-stand__chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
box-sizing: border-box;
padding: 6px 14px;
border-radius: 17px;
background: var(--chip);
color: var(--ink);
font-size: 14px;
line-height: 1.35;
font-weight: 800;
}
/* The five stages, across at wide widths and down a rail below 900px. */
.pg-track {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 24px;
}
.pg-stage {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
}
/* The connector between one stage and the next. `--lk` is the design's own
variable name for its colour; it is set per state below rather than written
into an inline style, which is what the design does. */
.pg-link {
--lk: var(--route);
position: absolute;
top: 19px;
left: 48px;
right: -16px;
height: 2px;
border-radius: 1px;
background: var(--lk);
}
.pg-dash {
background: repeating-linear-gradient(
to right,
var(--lk) 0 6px,
transparent 6px 12px
);
}
.pg-stage--done .pg-link {
--lk: var(--blue);
}
/* The stage dot. One 40px box in every state; the state decides its fill,
its edge and its shadow. */
.pg-dot {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 40px;
height: 40px;
box-sizing: border-box;
border-radius: 20px;
background: var(--surface);
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
}
.pg-stage--done .pg-dot {
background: var(--blue);
border: 0;
color: #ffffff;
box-shadow: 0 6px 16px rgba(4, 97, 248, 0.3);
}
.pg-stage--now .pg-dot {
border: 3px solid var(--blue);
box-shadow: 0 6px 16px rgba(4, 97, 248, 0.3);
}
.pg-stage--next .pg-dot {
border: 2px solid var(--muted);
}
.pg-stage--later .pg-dot {
border: 2px dashed var(--route);
}
/* The blue pip inside the "Now" dot. */
.pg-dot__pip {
width: 12px;
height: 12px;
border-radius: 6px;
background: var(--blue);
}
/* APPROVED LOOPS 3 and 4 of 4 — hrPing and hrBreath, on the "Up next" stage
dot. The design's own `hr-next`. It depicts nothing: no alert, no aircraft
and no decision, which is why docs/ui-rules.md lets these two repeat. Both
are cancelled by section 25's reduced-motion backstop, and neither rule
hides anything on its own — the ring and the pip are pseudo-elements that
exist at full opacity and only move — so cancelling them leaves the dot
exactly as drawn. */
.pg-dot--next::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border-radius: 50%;
border: 2px solid currentColor;
box-sizing: border-box;
animation: hrPing 2.4s ease-out infinite;
}
.pg-dot--next::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: currentColor;
animation: hrBreath 2.4s ease-in-out infinite;
}
.pg-stage__text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.pg-stage__tag {
align-self: flex-start;
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 10px;
border-radius: 12px;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.pg-stage--done .pg-stage__tag {
background: var(--chip);
color: var(--accent);
}
.pg-stage--now .pg-stage__tag {
background: var(--blue);
color: #ffffff;
}
.pg-stage__title {
font-size: 18px;
line-height: 1.3;
font-weight: 800;
color: var(--muted);
}
.pg-stage--done .pg-stage__title,
.pg-stage--now .pg-stage__title {
color: var(--ink);
}
.pg-stage__body {
font-size: 15px;
line-height: 1.5;
color: var(--muted);
}
/* -----------------------------------------------------------------------------
29.3 The "Up next" row inside the panel
-----------------------------------------------------------------------------
Two of its three lines are Worker-injected from content/up-next.md
(src/index.ts's PROGRESS_SLOTS), so they are empty in the file.
-------------------------------------------------------------------------- */
.pg-next {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 20px;
padding: 18px 20px;
border-radius: 20px;
background: var(--bg);
}
.pg-next__tile {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--tile);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.pg-next__text {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pg-next__eyebrow {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.pg-next__title {
font-size: 18px;
line-height: 1.3;
font-weight: 800;
}
.pg-next__body {
font-size: 15px;
line-height: 1.5;
color: var(--muted);
}
.pg-next__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 18px;
border-radius: 24px;
background: var(--chip);
color: var(--accent);
text-decoration: none;
font-size: 15px;
font-weight: 800;
}
.pg-next__cta:hover,
.pg-next__cta:focus-visible {
color: var(--accent);
}
/* -----------------------------------------------------------------------------
29.4 The build log
-------------------------------------------------------------------------- */
.pg-log {
display: flex;
flex-direction: column;
gap: 24px;
}
.pg-log__lead {
margin: 0;
max-width: 560px;
font-size: 17px;
line-height: 1.55;
color: var(--muted);
}
.pg-log__body {
max-width: 820px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* The filter and the count line on one row.
`min-height: 52px` RESERVES THE FILTER'S HEIGHT. The filter ships `hidden`
and scripts/progress.js reveals it, so without this the row would grow as
the script ran — a layout shift on every load. 52px is the control's own
height (4px of padding either side of a 44px button). */
.pg-bar {
min-height: 52px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
}
.pg-seg {
box-sizing: content-box; /* the design canvas's sizing: see section 3 */
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
width: 440px;
max-width: 100%;
padding: 4px;
border-radius: 14px;
background: var(--chip);
}
/* Needed because the rule above sets a `display`, which outranks the `hidden`
attribute's UA `display: none`. Same correction section 26.4 makes for the
small-screen menu. */
.pg-seg[hidden] {
display: none;
}
/* The sliding indicator. Its position is the group's `data-pg-index` and
three rules, never an inline transform: the design computes
`translateX(calc(N * (100% + 4px)))` per render, and apps/site/README.md
forbids a `style` attribute anywhere on this site. The percentage is of the
indicator's OWN width, which is one column, so one step is a column plus
the 4px gap. Index 0 needs no rule: `left: 4px` already puts it there. */
.pg-ind {
position: absolute;
top: 4px;
left: 4px;
width: calc((100% - 20px) / 4);
height: 44px;
border-radius: 11px;
background: var(--surface);
box-shadow: 0 2px 6px rgba(2, 17, 58, 0.16);
}
.pg-seg[data-pg-index="1"] .pg-ind {
transform: translateX(calc(1 * (100% + 4px)));
}
.pg-seg[data-pg-index="2"] .pg-ind {
transform: translateX(calc(2 * (100% + 4px)));
}
.pg-seg[data-pg-index="3"] .pg-ind {
transform: translateX(calc(3 * (100% + 4px)));
}
/* THE 44px IS THE DESIGN'S, RAISED FROM 40px UNDER DYLAN'S AUTHORISATION.
docs/ui-rules.md sets a 44px floor for anything tappable; the design drew
these at `min-height: 40px` and Dylan chose the floor over the drawing —
see the note at the top of this section. `.pg-ind` above is raised to the
same 44px so the sliding highlight still fills the chosen button's box. */
.pg-seg__btn {
position: relative;
min-height: 44px;
padding: 0 6px;
border: 0;
border-radius: 11px;
background: transparent;
color: var(--ink);
font-size: 14px;
font-weight: 800;
white-space: nowrap;
}
/* A live region, so it ships visible and empty rather than hidden: an empty
`role="status"` promises nothing, and starting empty is how a live region
is meant to start (MDN, ARIA status role). `min-height` keeps its line so
the first announcement moves nothing. */
.pg-count {
min-height: 21px;
font-size: 14px;
font-weight: 700;
color: var(--muted);
}
/* The log itself: month groups, each a heading and its own list. */
.pg-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.pg-group {
display: flex;
flex-direction: column;
gap: 14px;
}
.pg-group[hidden] {
display: none;
}
/* 42px clears the 28px rail plus its 14px gutter, so the heading starts where
the cards do. The design's own figure. */
.pg-month {
padding-left: 42px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.pg-items {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.pg-item {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 0 14px;
}
.pg-item[hidden] {
display: none;
}
.pg-rail {
position: relative;
display: flex;
justify-content: center;
}
.pg-rail__dot {
position: relative;
z-index: 1;
margin-top: 24px;
width: 16px;
height: 16px;
border-radius: 8px;
background: var(--blue);
border: 3px solid var(--blue);
box-sizing: border-box;
}
/* The line to the next entry. The design draws it on every entry but the LAST
ONE IT IS SHOWING, which depends on the filter — so the structural last
entry covers the no-JavaScript case and `data-pg-last`, which
scripts/progress.js moves, covers the filtered one. Both are needed: with
the script blocked nothing is marked, and with it running the structural
last entry may be hidden. */
.pg-rail__line {
position: absolute;
left: 50%;
margin-left: -1px;
top: 44px;
bottom: -38px;
width: 2px;
border-radius: 1px;
background: var(--line);
}
.pg-group:last-child .pg-items .pg-item:last-child .pg-rail__line,
.pg-item[data-pg-last] .pg-rail__line {
background: transparent;
}
.pg-card {
display: flex;
gap: 14px;
align-items: flex-start;
min-width: 0;
padding: 18px 20px;
border-radius: 20px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift);
}
.pg-ico {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--chip);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.pg-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.pg-kind {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent);
}
.pg-title {
font-size: 19px;
line-height: 1.3;
font-weight: 800;
}
.pg-body {
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
/* Both buttons ship `hidden` and the script reveals whichever applies, so
this row reserves their height for the same reason `.pg-bar` does. */
.pg-more {
min-height: 48px;
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-left: 42px;
}
.pg-more__btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 20px;
border: 0;
border-radius: 24px;
background: var(--chip);
color: var(--accent);
font-size: 15px;
font-weight: 800;
}
.pg-more__btn[hidden] {
display: none;
}
/* -----------------------------------------------------------------------------
29.5 Get updates — the signup card
-----------------------------------------------------------------------------
Navy in both themes, so every colour here is fixed. The idle state, the
design's validation line and its success panel; public/scripts/signup.js
moves between them by the `hidden` attribute and `aria-invalid`, never by a
style.
-------------------------------------------------------------------------- */
/* The design's own figure, so the "Get updates" link in the panel above lands
the card clear of the top of the viewport. */
.pg-sub-sec {
scroll-margin-top: 110px;
}
.pg-sub {
position: relative;
overflow: hidden;
box-sizing: border-box;
border-radius: 28px;
background: var(--navy);
color: var(--on-navy);
padding: clamp(28px, 5vw, 56px);
box-shadow: 0 30px 60px rgba(2, 17, 58, 0.28), 0 6px 16px rgba(2, 17, 58, 0.18);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 28px 48px;
}
.pg-sub__blob {
width: 380px;
height: 380px;
right: -100px;
top: -140px;
background: rgba(4, 97, 248, 0.5);
}
.pg-sub__copy {
position: relative;
flex: 1 1 340px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pg-sub__eyebrow {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-navy-link);
}
/* THE WHITE ONLY. The size, line height, weight and letter spacing come from
the shared `.t-h2` and its card step 3, `.t-h2--card-l`, which the markup
carries alongside this class — a
heading takes the shared scale wherever it sits (docs/ui-rules.md, Dylan,
Oct 28, 2026; the note on `.pg-stand__h2` in section 29.2 has the whole of
it). This card is navy in both themes and the design draws the heading
#FFFFFF, which `.t-h2` does not set and which the card's own
`var(--on-navy)` ink would otherwise supply at #E6ECF8. */
.pg-sub__h2 {
color: #ffffff;
}
.pg-sub__lead {
margin: 0;
max-width: 520px;
font-size: 17px;
line-height: 1.6;
color: var(--on-navy-muted);
}
.pg-sub__side {
position: relative;
flex: 1 1 380px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pg-sub__field {
display: flex;
flex-direction: column;
gap: 10px;
}
/* scripts/signup.js hides the field while the success panel shows, and the
`display` above would otherwise beat the attribute. */
.pg-sub__field[hidden] {
display: none;
}
.pg-sub__label {
font-size: 15px;
font-weight: 800;
color: #ffffff;
}
.pg-sub__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pg-sub__input {
flex: 1 1 220px;
min-width: 0;
min-height: 56px;
box-sizing: border-box;
padding: 0 18px;
border-radius: 16px;
border: 2px solid rgba(230, 236, 248, 0.28);
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
font-family: inherit;
font-size: 17px;
outline-offset: 2px;
}
/* THE PLACEHOLDER'S COLOUR, WHICH THE DESIGN DOES NOT DECLARE AND THE BROWSER
DOES. Measured in the pane before this rule existed: the user-agent default
is `rgb(117, 117, 117)`, and over this field — `rgba(255,255,255,0.08)`
composited on the navy card, which resolves to `rgb(22, 36, 74)` — that is
**3.29:1**, below WCAG AA's 4.5:1 for text. docs/ui-rules.md (Dylan,
Oct 27, 2026) requires AA and requires a translucent surface to be measured
against the backdrop a visitor can really put behind it, which is this one.
This is not inventing a colour to compensate for the brand palette, which
that rule forbids: the design declares no placeholder colour at all, so
there is nothing of its to override, and the value used is the card's OWN
dimmest text colour — #A7B6D3, which design/Progress.dc.html gives the
"Design mockup · the form isn't live yet" line in the same card. It stays
clearly dimmer than the typed value (#FFFFFF, measured at 15.15:1 over the
same field), so a placeholder still reads as a prompt rather than as an
entered address.
OWED BY THE GET IN TOUCH PAGE (task R7): that form's fields sit on a light
surface rather than this navy one, so they need their own measurement — the
same default grey passes over white and fails here. This rule is
deliberately scoped to this one input rather than written as a shared
`input::placeholder`, so that page has to measure rather than inherit. */
.pg-sub__input::placeholder {
color: #a7b6d3;
opacity: 1;
}
.pg-sub__btn {
flex: 0 0 auto;
min-height: 56px;
padding: 0 24px;
border: 0;
border-radius: 16px;
background: var(--blue);
color: #ffffff;
font-size: 17px;
font-weight: 800;
box-shadow: 0 10px 24px rgba(4, 97, 248, 0.38), 0 2px 6px rgba(2, 17, 58, 0.18);
}
.pg-sub__btn:hover {
box-shadow: 0 14px 30px rgba(4, 97, 248, 0.45), 0 2px 6px rgba(2, 17, 58, 0.18);
}
/* The design's bad-address state: `fieldLine` turns #FF8A7A when the
message below says the address is wrong. Keyed to the attribute the script
already sets for assistive technology, so the colour and what a screen
reader is told cannot disagree. */
.pg-sub__input[aria-invalid="true"] {
border-color: #ff8a7a;
}
/* Empty until there is something to say, and it keeps its line so nothing
moves when a message is written here. */
.pg-sub__msg {
min-height: 22px;
font-size: 15px;
font-weight: 700;
color: #ffb3a8;
}
/* Turnstile. Interaction-only, so for an ordinary visitor the container is
empty, but it is still a flex item and the field group's 10px gap would
open between the label and the field, where the design draws none. The
negative margin takes that gap back; scripts/signup.js sets
`data-interactive` while Cloudflare is showing a challenge, and the row
opens to fit it. The Get in touch form's `.ct-turnstile` does the same. */
.pg-sub__turnstile {
margin-top: -10px;
}
.pg-sub__turnstile[data-interactive] {
margin-top: 0;
}
/* The success panel, as drawn (`subDone` in design/Progress.dc.html). The
two `hidden` overrides are needed because each class sets its own
`display`, which beats the user agent's `[hidden] { display: none }`
(src/html/hidden-display.test.ts). The swap and the tick's pop are the
design's `hr-swap` and `emu-tick`, whose keyframes are declared once in
this sheet; the reduced-motion backstop in section 25 cancels both. */
.pg-sub__done {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(230, 236, 248, 0.2);
animation: hrSwap 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.pg-sub__done[hidden] {
display: none;
}
.pg-sub__tick {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 22px;
background: var(--blue);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(4, 97, 248, 0.38);
animation: emuTick 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.pg-sub__done-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pg-sub__done-text[hidden] {
display: none;
}
.pg-sub__done-title {
font-size: 18px;
font-weight: 800;
color: #ffffff;
}
/* Focus lands on the line that just appeared, so a screen reader starts
there; it is not a control, so the ring the design does not draw is
suppressed for that programmatic focus only. */
.pg-sub__done-title:focus {
outline: none;
}
.pg-sub__done-body {
font-size: 15px;
color: var(--on-navy-muted);
/* An address has no spaces to wrap at. */
overflow-wrap: anywhere;
}
.pg-sub__change {
flex-shrink: 0;
min-height: 44px;
padding: 0 14px;
border: 0;
border-radius: 22px;
background: transparent;
color: var(--on-navy-link);
font-size: 15px;
font-weight: 800;
}
.pg-sub__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
}
.pg-sub__linkedin {
box-sizing: content-box; /* the design canvas's sizing: see section 3 */
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 20px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(230, 236, 248, 0.28);
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: 800;
}
.pg-sub__linkedin:hover,
.pg-sub__linkedin:focus-visible {
color: #ffffff;
}
/* The confirm states draw no LinkedIn row (design/Progress-Confirm.dc.html),
and the `display` above would otherwise beat the attribute. */
.pg-sub__foot[hidden] {
display: none;
}
/* -----------------------------------------------------------------------------
29.5b Get updates — the confirm states
-----------------------------------------------------------------------------
design/Progress-Confirm.dc.html draws the same navy card when the link in
the confirmation email opens this page: "Confirm your email" with the
address, the spam check and a Confirm button; then "Thanks for
confirming."; or "That link has expired." with the field again.
public/scripts/signup.js sets `data-cf` on the section for as long as the
card is in one of those states, and moves between them by `hidden` and
`aria-disabled`, never by a style.
-------------------------------------------------------------------------- */
/* That drawing's card differs from Progress.dc.html's in three figures — 24px
rather than 28px of minimum padding, and columns that begin at 320px and
360px rather than 340px and 380px — and its lead may break inside a word.
Taken as drawn, for the states it draws. */
.pg-sub-sec[data-cf] .pg-sub {
padding: clamp(24px, 5vw, 56px);
}
.pg-sub-sec[data-cf] .pg-sub__copy {
flex-basis: 320px;
}
.pg-sub-sec[data-cf] .pg-sub__side {
flex-basis: 360px;
}
.pg-sub-sec[data-cf] .pg-sub__lead {
overflow-wrap: anywhere;
}
/* The expired state draws the field and Notify me with no message line under
them. The line keeps its reserved height on the idle card, where the design
draws it; here it takes no room until it has something to say, and the
negative margin takes back the field group's 10px gap, as Turnstile's does. */
.pg-sub-sec[data-cf] .pg-sub__msg:empty {
min-height: 0;
margin-top: -10px;
}
.pg-cf {
display: flex;
flex-direction: column;
gap: 12px;
}
.pg-cf[hidden] {
display: none;
}
/* "Confirming" and the link's address. */
.pg-cf__who {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(230, 236, 248, 0.2);
}
.pg-cf__who[hidden] {
display: none;
}
.pg-cf__who-label {
font-size: 13px;
font-weight: 700;
color: #a7b6d3;
}
.pg-cf__who-email {
font-size: 18px;
font-weight: 800;
color: #ffffff;
/* An address has no spaces to wrap at. */
overflow-wrap: anywhere;
}
/* The spam check, as drawn: a white row with a box that fills blue and takes
a tick once Turnstile has answered (`data-checked`, set by the script). */
.pg-cf__check {
display: flex;
align-items: center;
gap: 12px;
min-height: 60px;
padding: 0 14px;
box-sizing: border-box;
border-radius: 14px;
background: #ffffff;
color: var(--navy);
}
.pg-cf__check[hidden] {
display: none;
}
.pg-cf__box {
flex-shrink: 0;
width: 26px;
height: 26px;
box-sizing: border-box;
border-radius: 6px;
border: 2px solid #8e9cb8;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
.pg-cf__tick {
visibility: hidden;
}
.pg-cf__check[data-checked] .pg-cf__box {
border-color: var(--blue);
background: var(--blue);
}
.pg-cf__check[data-checked] .pg-cf__tick {
visibility: visible;
}
.pg-cf__check-text {
flex: 1;
font-size: 15px;
font-weight: 700;
}
.pg-cf__check-label {
font-size: 11px;
font-weight: 700;
color: #3d4b68;
text-align: right;
line-height: 1.2;
}
/* Turnstile, interaction-only: empty for an ordinary visitor, so the negative
margin takes back the panel's 12px gap; the script sets `data-interactive`
while Cloudflare is showing a challenge, and the row opens to fit it. The
same arrangement as `.pg-sub__turnstile` above. */
.pg-cf__turnstile {
margin-top: -12px;
}
.pg-cf__turnstile[data-interactive] {
margin-top: 0;
}
/* Confirm: Notify me's button (`.pg-sub__btn`) laid out as the design draws
this one, with its spinner beside the label. Dimmed while it cannot be
pressed — before the spam check has passed, and while confirming — keyed
to the attribute assistive technology reads, so the two cannot disagree. */
.pg-cf__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.pg-cf__btn[aria-disabled="true"] {
opacity: 0.6;
}
/* The design draws `pvSpin .8s linear infinite`. A loop that never ends is
not on docs/ui-rules.md's list of approved loops, so it runs a fixed 25
turns (20 s), far longer than a confirmation takes; whether it should loop
for ever is Dylan's to approve by name. The reduced-motion backstop in
section 25 stops it, which leaves the ring standing still. */
.pg-cf__spin {
width: 18px;
height: 18px;
box-sizing: border-box;
border-radius: 9px;
border: 3px solid rgba(255, 255, 255, 0.35);
border-top-color: #ffffff;
animation: pvSpin 0.8s linear 25;
}
@keyframes pvSpin {
to {
transform: rotate(360deg);
}
}
/* Empty until something goes wrong, and then the same red as the field's
message line. The design draws nothing here, so while it is empty the
negative margin takes back the panel's 12px gap. */
.pg-cf__msg {
font-size: 15px;
font-weight: 700;
color: #ffb3a8;
}
.pg-cf__msg:empty {
margin-top: -12px;
}
/* -----------------------------------------------------------------------------
29.6 On to the next page
-----------------------------------------------------------------------------
The same CARD section 28.8 gives the How it works page, and not the same
section: `.pg-onward__text`, `__label`, `__title` and `__arrow` are
declaration-for-declaration identical to their `hw-` counterparts (compared
block by block, not assumed), while the section's own top padding differs —
design/Progress.dc.html draws 56px where design/How.dc.html draws 72px, and
each page takes its own.
Duplicated under this page's prefix rather than shared, because making it
shared means editing a rule the How it works page already uses and this task
was told not to touch that page. The two merge when the last page converts
and the superseded shell comes out.
-------------------------------------------------------------------------- */
.pg-onward-sec {
padding-top: 56px;
padding-bottom: 96px;
}
/* `:hover` IS LISTED BESIDE THE BASE STATE, and that is load-bearing rather
than tidy — section 28.8 carries the same note for the same reason, and this
card shipped without it for one commit. Section 3's
`a:hover { color: #0442b0 }` is a type selector plus a pseudo-class, which
outranks a single class, so with only the base selector here the whole
card's text — "Next" and "About the builder" — turns brand blue on hover.
The design draws it as `color: {{c.ink}}` with no hover colour at all.
Found by resolving a cross-reference rather than by a measurement: the
claim above USED to say this component was identical to section 28.8's, and
checking that claim against the file is what showed 28.8 carried a second
selector this did not. The CSSOM sweep cannot see it — `Element.matches()`
answers for the element's CURRENT state, so no `:hover` rule matches an
element nobody is hovering. */
.pg-onward,
.pg-onward:hover {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 24px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-big);
color: var(--ink);
text-decoration: none;
}
.pg-onward__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.pg-onward__label {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.pg-onward__title {
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 800;
}
.pg-onward__arrow {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 24px;
background: var(--blue);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(4, 97, 248, 0.38);
}
/* -----------------------------------------------------------------------------
29.7 Motion
-----------------------------------------------------------------------------
Everything else on this page moves through the shared classes in section
26.13 (`.hr-card`, `.hr-tile`, `.hr-blob`, `.hr-in`) and the scroll-driven
reveals (`.hr-rise`).
The whole block is cancelled by section 25's reduced-motion backstop
(`animation: none !important`, `transition: none !important` on every
element and pseudo-element). NO RULE BELOW HIDES ANYTHING ON ITS OWN — the
hidden first frame lives inside `hrUp`, `hrSwap` and `hrSwapB`, not in the
rule — so cancelling them leaves every element at its natural, visible
position. That is the distinction the hero's 34 approach lights got wrong
once: a rule that declares `opacity: 0` ITSELF and relies on an animation
to undo it needs a finished state in the reduce block, and
src/html/motion.test.ts scans both stylesheets for exactly that shape.
-------------------------------------------------------------------------- */
/* The five stages rise in turn when the panel arrives. The design's own
delays, `(0.15 + i * 0.07)s`, as classes rather than inline styles. */
.pg-st {
animation: hrUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.pg-st--1 {
animation-delay: 0.15s;
}
.pg-st--2 {
animation-delay: 0.22s;
}
.pg-st--3 {
animation-delay: 0.29s;
}
.pg-st--4 {
animation-delay: 0.36s;
}
.pg-st--5 {
animation-delay: 0.43s;
}
/* The indicator slides between filters. A transition and not an animation, so
under reduced motion it simply jumps to the new position — which is the
finished state, immediately. */
.pg-ind {
transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.3, 1);
}
/* The log replays its entrance when the filter changes. Two names doing the
same thing, alternated by the script: re-adding a class that is already
present does not restart a CSS animation, and swapping between two does.
The design's own A/B mechanism (`listCls` keyed off `listN`), and the same
one section 27.6 reproduces for the "Try the app" caption. */
.pg-list--a {
animation: hrSwap 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.pg-list--b {
animation: hrSwapB 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes hrSwapB {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
}
/* The log entry's dot pops as it arrives, where the browser supports
scroll-driven animation. Its own `@supports`/`no-preference` pair rather
than an edit to section 26.13's, so no rule another page uses changes. The
design puts `hr-dot` on this element, which is the same `hrDot` keyframe
Home's timeline dots use. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.pg-rail__dot {
animation: hrDot linear both;
animation-timeline: view();
animation-range: entry 30% entry 70%;
}
}
}
/* Press feedback, the same shape section 26.13 gives the header links and the
calls to action. Declared here rather than appended to that list so this
task changes no shared rule. */
.pg-next__cta,
.pg-seg__btn,
.pg-more__btn,
.pg-sub__btn,
.pg-sub__change,
.pg-sub__linkedin,
.pg-onward {
transition: transform 0.14s ease-out, box-shadow 0.2s ease-out,
background-color 0.2s ease-out;
}
.pg-next__cta:active,
.pg-seg__btn:active,
.pg-more__btn:active,
.pg-sub__btn:active,
.pg-sub__change:active,
.pg-sub__linkedin:active,
.pg-onward:active {
transform: scale(0.97);
}
/* -----------------------------------------------------------------------------
29.8 Narrow widths — the design's own 900 and 480
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
/* The five stages stop being columns and become a vertical rail. */
.pg-track {
grid-template-columns: 1fr;
gap: 0;
}
.pg-stage {
flex-direction: row;
gap: 16px;
padding-bottom: 24px;
}
.pg-stage:last-child {
padding-bottom: 0;
}
.pg-link {
top: 46px;
bottom: 6px;
left: 19px;
right: auto;
width: 2px;
height: auto;
}
.pg-dash {
background: repeating-linear-gradient(
to bottom,
var(--lk) 0 6px,
transparent 6px 12px
);
}
}
@media (max-width: 480px) {
/* Four labels in 440px minus padding is tight once the row is at the
viewport's width; the design shrinks the type rather than wrapping. */
.pg-seg__btn {
font-size: 13px;
padding: 0 2px;
}
}
/* =============================================================================
30. About — the Oct 27 redesign
=============================================================================
design/About.dc.html and its five siblings (task R6). The six differ only in
the canvas preview size and the default theme, so every value here is
About.dc.html's and holds for all six.
What this page shares rather than redeclares: `.page`, `.hdr*` and the
small-screen menu (26.1-26.4), `.headline`, `.eyebrow`, `.eyebrow-pill` and
`.cta--shine` (26.5 and 26.13), `.page-hero` with its glows, title and lead
(26.6), the footer (26.12), the card/tile/blob transitions and the
scroll-driven reveals (26.13), and the responsive steps at 900, 620 and 560
(26.14). Section 19 held the pre-redesign version of this page and has been
retired; its note says what went and why.
SIZES HERE ARE COMPONENT-LOCAL AND THE DESIGN'S OWN, except the headings.
Every heading element on the page carries a shared scale class and nothing
from this section re-declares its type (docs/ui-rules.md, Dylan, Oct 28,
2026: a heading takes the shared scale wherever it sits, including inside a
card). The founder card's `` takes the scale's card step 4,
`.t-h2 .t-h2--card-xl`, which is the clamp(28px, 3.4vw, 40px) the design
draws (docs/ui-rules.md, "Card headings match their drawings"). Until that
step existed it carried `.t-h2` alone and rendered at the 48px section
step, larger than its drawing. src/html/about.test.ts holds the heading to
the step and the step to the drawing.
THE DESIGN DRAWS NO DEPICTED APP SCREEN on this page, so none of the 44px
exemptions in docs/ui-rules.md apply to anything here: every control is
measured as rendered. The page's own controls are the two founder calls to
action at 52px and two card-shaped links far taller than that; the rest are
the shared shell's.
-------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
30.1 The hero
-----------------------------------------------------------------------------
`.page-hero` carries the shared part (position, navy, ink, its own clip);
these carry what this hero does differently. One column, an 88px foot where
How it works has 96px and Home 120px, and nothing beside or beneath the
copy — the founder card below is what fills that space, lifted over the
hero's bottom edge.
-------------------------------------------------------------------------- */
/* The two soft lights. `.hr-blob` (section 26.13) already gives them their
shape, blur, opacity and the approved `hrDrift` loop; only the size,
position and tint differ from the other heroes', so only those are here. */
.ab-hero__blob--a {
width: 520px;
height: 520px;
right: -140px;
top: -140px;
background: rgba(4, 97, 248, 0.5);
}
.ab-hero__blob--b {
width: 360px;
height: 360px;
left: -120px;
bottom: -180px;
background: rgba(4, 165, 248, 0.28);
animation-duration: 20s;
}
.ab-hero__inner {
position: relative;
padding-top: 140px;
padding-bottom: 88px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* The design caps the heading itself rather than the column, which is why
this is on the `` and How it works' equivalent is on its copy div. A
max-width is not a type property, so it does not touch the shared scale. */
.ab-hero__title {
max-width: 860px;
}
/* The design's standfirst runs to 620px here where Home's stops at 540px, the
same figure How it works uses. A descendant of `.ab-hero` rather than a
class of its own, so the markup carries one class and `.page-hero__lead`
supplies everything else. */
.ab-hero .page-hero__lead {
max-width: 620px;
}
/* -----------------------------------------------------------------------------
30.2 The founder band
-----------------------------------------------------------------------------
NOT section 26.11's `.founder`, which is Home's: that one is a navy card
with a fixed 120px photo and a paragraph of prose. This one is a surface
card lifted 40px over the hero's bottom edge, with a photo that scales with
the viewport, three facts as chips and two calls to action. Two components
that look alike and are not the same, so this page carries its own rather
than bending Home's with modifiers.
No `.sec`: the design gives this section a negative top margin instead of
section padding, so the card overlaps the hero.
-------------------------------------------------------------------------- */
.ab-founder-sec {
position: relative;
z-index: 3;
margin-top: -40px;
}
.ab-founder {
box-sizing: border-box;
padding: clamp(20px, 3.4vw, 36px);
border-radius: 28px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-big);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px 40px;
}
/* The design's `.ab-photo`: a positioning context around the photo with no
size of its own, so the image decides the column's width. */
.ab-founder__frame {
flex: 0 0 auto;
position: relative;
}
/* A square that scales between 140px and 200px, cropped to fill rather than
letterboxed. `width` and `height` are also on the element as attributes, so
the box is reserved before the file arrives and nothing below it jumps. */
.ab-founder__photo {
box-sizing: content-box; /* the design canvas's sizing: see section 3 */
display: block;
width: clamp(140px, 18vw, 200px);
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: 28px;
border: 3px solid var(--sky);
box-shadow: var(--lift);
}
.ab-founder__body {
flex: 1 1 380px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.ab-founder__head {
display: flex;
flex-direction: column;
gap: 2px;
}
.ab-founder__label {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* "Flagger for two years / Airfield construction / Taxiway crossings". */
.ab-facts {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ab-fact {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0 12px;
border-radius: 17px;
background: var(--chip);
color: var(--ink);
font-size: 14px;
font-weight: 800;
}
/* The design strokes this icon with `{{c.accent}}`. An SVG presentation
attribute cannot resolve `var()` (apps/site/README.md item 5), so the
markup strokes `currentColor` and the colour is set here. */
.ab-fact__icon {
flex-shrink: 0;
color: var(--accent);
}
/* The design's own row: 4px of top padding, where the shared `.cta-row` has
6px. Its own class rather than `.cta-row` plus an override, because
`.page .cta-row` is two classes and would outrank a single-class fix. */
.ab-founder__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding-top: 4px;
}
/* The two calls to action. Both 52px, which is above the 44px floor
docs/ui-rules.md sets, and both the design's own shape — taller and rounder
than the pre-redesign `.btn`, and not the shell's `.cta` either, which is
56px with 24px of side padding and a 17px label. */
.ab-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
text-decoration: none;
font-size: 16px;
font-weight: 800;
}
/* `:hover` beside the base state for `color`, and that is load-bearing:
section 3's `a:hover { color: #0442b0 }` is a type selector plus a
pseudo-class (0-1-1) and outranks a single class, so without it the white
label would turn brand blue on the brand-blue fill. The design draws no
hover colour on either of these. src/html/about.test.ts guards it, because
the CSSOM sweep cannot see a `:hover` rule at all. */
.ab-cta--primary,
.ab-cta--primary:hover {
padding: 0 22px;
border-radius: 16px;
background: var(--blue);
color: #ffffff;
}
.ab-cta--primary {
box-shadow: 0 10px 24px rgba(4, 97, 248, 0.38),
0 2px 6px rgba(2, 17, 58, 0.18);
}
.ab-cta--primary:hover {
box-shadow: 0 14px 30px rgba(4, 97, 248, 0.45),
0 2px 6px rgba(2, 17, 58, 0.18);
}
.ab-cta--quiet,
.ab-cta--quiet:hover {
padding: 0 20px;
border-radius: 26px;
background: var(--chip);
color: var(--accent);
}
/* -----------------------------------------------------------------------------
30.3 The two stacked sections, and what is inside them
-----------------------------------------------------------------------------
"Why I am building this" and "How I am building it" share a shape — a
headline block above a group — with the same 28px gap and a slightly
different headline measure.
-------------------------------------------------------------------------- */
.ab-stack {
display: flex;
flex-direction: column;
gap: 28px;
}
.ab-stack__head {
max-width: 760px;
}
/* The design draws the second one narrower, which is also `.headline`'s own
default — declared anyway so this file carries the design's figure instead
of inheriting it silently. */
.ab-stack__head--how {
max-width: 720px;
}
/* The three cards: the noise, the gap, the idea. */
.ab-story {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.ab-story__item {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift);
}
.ab-story__top {
display: flex;
align-items: center;
justify-content: space-between;
}
.ab-story__tile {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--chip);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.ab-story__kind {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.ab-story__title {
font-size: 20px;
line-height: 1.25;
font-weight: 800;
}
.ab-story__body {
font-size: 16px;
line-height: 1.6;
color: var(--muted);
}
/* One card holding three rows, divided by a hairline. */
.ab-how {
margin: 0;
box-sizing: border-box;
border-radius: 24px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift);
overflow: hidden;
}
/* A grid rather than the design's flex row, because a `` row is three
elements (the icon, the `- ` and the `
- `) and not two: the icon spans
both text rows in the first column. A `` wrapping the pair would be
invalid inside a `
` and the parser would move it. The rendering is the
design's — icon, 16px gap, then the name with its sentence 4px under it. */
.ab-how__row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 16px;
row-gap: 4px;
align-items: start;
padding: 20px 24px;
border-top: 1px solid var(--line);
}
/* The design's `{{h.sep}}` is `0` on the first item and a hairline on the
other two. Same rendering, with nothing to keep in step per row. */
.ab-how__row:first-child {
border-top: 0;
}
.ab-how__tile {
grid-row: span 2;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--chip);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.ab-how__title {
grid-column: 2;
font-size: 18px;
font-weight: 800;
}
.ab-how__body {
grid-column: 2;
margin: 0;
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
/* -----------------------------------------------------------------------------
30.4 Where things stand
-----------------------------------------------------------------------------
One card-shaped link to the Progress page, so the whole card is the target
rather than a word inside it.
`:hover` is listed BESIDE the base state for the same reason sections 28.8
and 29.6 do it: section 3's `a:hover { color: #0442b0 }` is a type selector
plus a pseudo-class, which outranks a single class, so without the second
selector the card's title and the text inheriting from it turn brand blue
on hover. design/About.dc.html draws `color: {{c.ink}}` and no hover colour
at all.
-------------------------------------------------------------------------- */
.ab-stand,
.ab-stand:hover {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 20px;
padding: 22px 24px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift);
color: var(--ink);
text-decoration: none;
}
/* The design's `.hr-next`: a chip-filled disc with a ring expanding out of
its centre and a dot breathing inside it. Both loops are in section 30.6.
It depicts nothing — no alert, no aircraft, no decision. */
.ab-stand__dot {
position: relative;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 24px;
background: var(--chip);
color: var(--muted);
}
.ab-stand__text {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ab-stand__label {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.ab-stand__title {
font-size: 18px;
line-height: 1.35;
font-weight: 800;
}
.ab-stand__body {
font-size: 15px;
line-height: 1.5;
color: var(--muted);
}
.ab-stand__more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 15px;
font-weight: 800;
color: var(--accent);
}
/* -----------------------------------------------------------------------------
30.5 On to the next page
-----------------------------------------------------------------------------
The same card the How it works and Progress pages end on, with this page's
own section padding: design/About.dc.html draws 56px above and 96px below,
where design/How.dc.html draws 72px above. `:hover` is beside the base
state for the reason in 30.4.
-------------------------------------------------------------------------- */
.ab-onward-sec {
padding-top: 56px;
padding-bottom: 96px;
}
.ab-onward,
.ab-onward:hover {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 24px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-big);
color: var(--ink);
text-decoration: none;
}
.ab-onward__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.ab-onward__label {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.ab-onward__title {
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 800;
}
.ab-onward__arrow {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 24px;
background: var(--blue);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(4, 97, 248, 0.38);
}
/* -----------------------------------------------------------------------------
30.6 Motion
-----------------------------------------------------------------------------
Everything this page moves on its own, all of it the designs'. Everything
else moves through the shared classes in section 26.13 (`.hr-card`,
`.hr-tile`, `.hr-blob`, `.hr-in`, `.cta--shine`) and the scroll-driven
reveals (`.hr-rise`, `.hr-pop`).
The whole block is cancelled by section 25's reduced-motion backstop, which
is `animation: none !important` on every element and pseudo-element.
Nothing here starts from a hidden state that only an animation can undo, so
the backstop alone leaves the finished page: the two loops below are
decoration on an element that is already painted, which is why this section
needs no `prefers-reduced-motion: reduce` opacity rescue of the kind
section 26.13 gives `.hr-light`.
-------------------------------------------------------------------------- */
/* APPROVED LOOPS 3 and 4 of 4 — hrPing and hrBreath, numbered as sections
26.13, 28.7 and 29 already number them. docs/ui-rules.md: Dylan approved
these four by name, and src/html/motion.test.ts allows exactly four and
fails on a fifth. The keyframes are section 26.13's; only the element they
are attached to is this page's.
The same pair is on Home's "Up next" timeline dot and the Progress page's
"Up next" stage dot. The How it works page's "Planned, not built yet" ring
takes hrPing ALONE — its design draws no breathing centre dot — so this
page's dot is the Home/Progress shape and not that one. */
.ab-stand__dot::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border-radius: 50%;
border: 2px solid currentColor;
box-sizing: border-box;
animation: hrPing 2.4s ease-out infinite;
}
.ab-stand__dot::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: currentColor;
animation: hrBreath 2.4s ease-in-out infinite;
}
/* Press feedback, the same shape section 26.13 gives the header links and the
calls to action, and the same shape section 29.7 declares for the Progress
page's controls. Declared here rather than appended to that list so this
task changes no shared rule. These four are the elements
design/About.dc.html marks `hr-press` that are not the shared shell's. */
.ab-cta--primary,
.ab-cta--quiet,
.ab-stand,
.ab-onward {
transition: transform 0.14s ease-out, box-shadow 0.2s ease-out,
background-color 0.2s ease-out;
}
.ab-cta--primary:active,
.ab-cta--quiet:active,
.ab-stand:active,
.ab-onward:active {
transform: scale(0.97);
}
/* =============================================================================
Updates from the database (the /post work, Oct 28, 2026)
-----------------------------------------------------------------------------
Since the updates are posted from /post and read from Postgres, three things
can now appear in the Home and Progress lists that the markdown never had.
========================================================================== */
/* An update's text may be one or two short paragraphs (design/Post-Updates:
"One or two short paragraphs"), so a line break Dylan typed is kept. */
.pg-body,
.tl-text {
white-space: pre-line;
overflow-wrap: anywhere;
}
/* An update's photo, as design/Post-Updates.dc.html's "How it will look on
Progress" preview draws it: under the text, full width, 120px tall,
cropped to fill, 12px corners, 6px above it. */
.pg-photo {
display: block;
width: 100%;
height: 120px;
margin-top: 6px;
object-fit: cover;
border-radius: 12px;
}
/* When the updates cannot be read: one honest line where the list would be.
The dashed route border and muted ink are the design's own "No updates
yet" treatment (design/Post-Updates.dc.html), the nearest state it draws. */
.pg-unavailable,
.tl-item--unavailable {
list-style: none;
padding: 18px 20px;
border-radius: 20px;
border: 2px dashed var(--route);
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}
.page .tl-item--unavailable,
.tl-item--unavailable {
display: block;
}
.tl-item--unavailable .tl-body {
padding-bottom: 0;
}