fix(home): correct what the landing page claims, and give it one rhythm #92

Merged
tudor merged 2 commits from fix/homepage-truth-and-rhythm-main into main 2026-08-14 18:18:53 +00:00
2 changed files with 25 additions and 4 deletions
Showing only changes of commit 97ac5c9cef - Show all commits

No files matched your search

+5 -1
View File
@@ -98,7 +98,11 @@
font-size: var(--step--1);
font-weight: 700;
line-height: 1;
color: var(--sage);
/* --sage flips with the theme; this band does not (it is teal in both), so
the pairing only held in one of them — the dark sage measured 4.08:1 here
against a 4.5 floor, on every page. The --on-sunken-* family exists
precisely because this surface is theme-invariant. */
color: var(--on-sunken-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
+20 -3
View File
@@ -133,7 +133,10 @@
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
/* --brand on its own 10% tint over Sand measures 4.19:1 — the tint darkens
the ground under the label, and the token was specced against the ground,
not against the tint. --brand-strong on the same composite is 5.85:1. */
color: var(--brand-strong);
background: rgba(var(--brand-rgb), 0.1);
padding: 0.3rem 0.7rem;
border-radius: 999px;
@@ -779,8 +782,19 @@
gap: 0.9rem;
}
/*
* The preview panel sits on the card surface, not on Sand.
*
* Everything inside it is a translucent status or brand tint, and those tokens
* are specced to clear AA over --bg-card. Over Sand the same tints composite
* darker, which put the report-card chips at 4.22:1 and 4.29:1 against a 4.5
* floor — the ratio depended on a ground two levels up. On the card surface
* they are 5.69:1 and 5.81:1. The border keeps it reading as an inset frame
* now that panel and card share a colour.
*/
.hiwVisual {
background: var(--bg-secondary);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.9rem;
min-height: 180px;
@@ -1126,7 +1140,10 @@
.compareHeadLabel {
font-family: inherit;
font-size: 0.48rem;
color: var(--text-muted);
/* --text-muted on the header row's tint is 4.45:1 in the dark theme —
under the floor by a hair, because the tint darkens the ground beneath
the label. --text-secondary clears it on both grounds. */
color: var(--text-secondary);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;