/*
* The home page's sections (ALE-221): how it works, what it does, who it is
* for, and what people said - and the store button, at the end.
* Loaded by index.astro only, after style.css, and built from the variables
* style.css already defines plus values read off design/tokens.json - no
* colour, face or radius the app does not already have.
*
* A file of its own because style.css is `immutable` in the Caddyfile: an edit
* there never reaches anyone who has loaded the site before. This file is
* immutable too, so the same rule now applies here - **a changed file gets
* the next number** (home-4.css next), and index.astro's moves with it,
* in the same commit. The Caddyfile matches `/*.css`, so a new name needs
* nothing there. It was home.css until the button got its depth, and
* home-2.css until it got the app's size and face (both 23 Oct 2026).
*
* The layout is the screenshot in the ticket, drawn in the site's own
* material: its rows of icons and green ticks became numbered steps and
* `.key` tiles, the object the site already uses for anything sitting on the
* paper rather than in it.
*/
/* --- how it works ------------------------------------------------------ */
/*
* Onboarding screen 2's four steps, in a row where the measure allows and two
* by two where it does not. An so the numbers are the list's own and a
* screen reader announces "1 of 4"; the visible numerals are drawn by CSS
* from the same counter, so the markup carries no number twice.
*/
.steps {
list-style: none;
counter-reset: step;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem 1rem;
margin: 0 0 1rem;
padding: 0;
}
.steps li {
counter-increment: step;
margin: 0;
}
/* The numeral in a ring, the screenshot's one-two-three, at the weight the
app's onboarding gives its numbers: bold ink, everything else muted. */
.steps li::before {
content: counter(step);
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
margin-bottom: 0.625rem;
border: 1px solid var(--divider);
border-radius: 50%;
background: var(--surface);
font-family: 'Courier Prime', ui-monospace, 'Courier New', monospace;
font-weight: 700;
color: var(--ink);
}
/* The closing line, set apart from the four as the app sets it apart. */
.steps-after {
color: var(--ink-muted);
}
@media (min-width: 36rem) {
.steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* --- what it does, who it is for -------------------------------------- */
/*
* Tiles: `.key` for the surface, laid out two across. One column on a phone,
* where two would leave each line about four words wide.
*
* `.key` brings a bottom margin for when it sits in a column of prose; in a
* grid the gap does that job, so it comes off here.
*/
.tiles {
list-style: none;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
margin: 0 0 1rem;
padding: 0;
}
.tiles .key {
margin: 0;
}
.tiles h3 {
font-family: 'Courier Prime', ui-monospace, 'Courier New', monospace;
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.25rem;
}
.tiles p {
color: var(--ink-muted);
margin: 0;
}
/* The one paid line, named in the same muted size the paywall would use
rather than as a badge - it is information, not a sale. */
.tiles .tier {
color: var(--ink-muted);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 0.875rem;
font-weight: 400;
}
@media (min-width: 30rem) {
.tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* An odd last tile takes the whole row. Three tiles in two columns left the
third alone under the first with an empty cell beside it, which read as
a fourth that failed to load. */
.tiles li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
/* --- what people said -------------------------------------------------- */
/*
* Shown only once there are three real, permitted testimonials - see
* index.astro. Quotes as quotes: ink for their words, muted for who and
* where, no stars, no rating, nothing the store has not said itself.
*/
.quotes {
list-style: none;
display: grid;
gap: 0.75rem;
margin: 0 0 1rem;
padding: 0;
}
.quotes .key {
margin: 0;
}
/* A brings 40px of side margin from the browser, which pushed every
quote a third of the way across its tile on a phone. */
.quotes figure {
margin: 0;
}
.quotes blockquote {
margin: 0 0 0.5rem;
}
.quotes blockquote p {
margin: 0;
}
.quotes figcaption {
color: var(--ink-muted);
font-size: 0.9375rem;
}
/* --- the store button -------------------------------------------------- */
/*
* The app's primary button, which the hero's store link has always claimed to
* be (style.css: "the same three tokens components/PillButton.tsx reads") and
* was not: it had the colours and none of the depth, so on the paper it read
* as a flat sticker. DESIGN.md §14 says what the app's button keeps after it
* went matte, and this is that, value for value:
*
* - **the edge** - elevation.pill's first layer, 3px straight down, unblurred,
* in accentEdge. It is the button's thickness, and the reason the border on
* style.css's .store is load-bearing rather than decoration;
* - **one soft contact shadow** - elevation.pill's second layer;
* - **the paper's grain on the face** - paper.onAccent: grain only, at 0.55 of
* the ground's amplitude, so 0.11 against the page's 0.2. Mottle is left off
* for the reason §4 gives: on an object this small it is one blotch;
* - **radius.action**, 18, not the 8 it had;
* - **the press** - it travels the edge's full 3px, so the button ends flush
* with the surface it was standing on, and the shadow drops to
* elevation.pill.pressed. component.pressFeedback: 120ms, and under reduced
* motion the shadow still changes while the travel goes.
*
* The edge renders below the box, so the 3px is reserved under it as the app
* does with edges.pill - otherwise it sits on whatever follows.
*
* **And the shape and the label are the component's too** (23 Oct 2026),
* because depth alone still left a small sans-serif link that only borrowed
* the colours. From src/components/PillButton.tsx:
*
* - **the label** - Courier Prime Bold at 18, in ink (accentLabel), the face
* every primary button in the app speaks in;
* - **56 tall** (its minHeight) and **the column's full width** - here the
* hero's 22rem text column, which is about a phone's width, so on a phone the
* button is the width the app's is;
* - **8 of vertical padding**, and the label nudged down by
* font.display.capCentreOffsetEm (0.0701em, 1.26px at 18): Courier Prime's
* line box is asymmetric, so a box-centred label sits visibly high. The app
* does the same with opticalCentre().
*
* No colour change on hover. style.css darkens the face to accentEdge, which
* is now also the edge's colour - the face and the edge would merge into one
* slab and the thickness would vanish under the pointer. Hover lifts nothing
* and darkens nothing; the press is the feedback, as in the app.
*/
.store {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 22rem;
min-height: 56px;
padding: calc(8px + 1.26px) 1.25rem calc(8px - 1.26px);
font-family: 'Courier Prime', ui-monospace, 'Courier New', monospace;
font-weight: 700;
font-size: 18px;
line-height: 22px;
text-align: center;
border-radius: 18px;
margin-bottom: 3px;
background-color: var(--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.11'/%3E%3C/svg%3E");
background-size: 220px 220px;
box-shadow:
0 3px 0 var(--accent-edge),
0 4px 6px rgba(74, 58, 42, 0.14);
transition:
transform 120ms ease-out,
box-shadow 120ms ease-out;
}
.store:hover {
background-color: var(--accent);
color: var(--ink);
}
.store:active {
background-color: var(--accent);
transform: translateY(3px);
box-shadow: 0 1px 2px rgba(74, 58, 42, 0.12);
}
@media (prefers-reduced-motion: reduce) {
.store {
transition: none;
}
.store:active {
transform: none;
}
}