` holding a 40px lucide
* clock in `text-amber-500`. No fill, no border, no shadow on the block itself. */
.hba-soon {
max-width: 576px; /* H max-w-xl */
margin-inline: auto;
padding: 0;
text-align: center;
background: none;
box-shadow: none;
border: 0; /* no !important needed since 2026-08-21: the composition no longer
* builds this with $card(), so there is no (1,0,0) hairline to fight. */
}
/* The disc and its glyph are reproduced exactly: H gives the 80px amber-500/10 disc, and the
* mark is lucide's `clock` — circle r=10 plus the polyline "12 6 12 12 16 14", 2px round stroke,
* no fill, 40×40, stroked in amber-500 (T amberFill #fe9a00). */
.hba-soon::before {
content: "";
display: block;
width: 80px;
height: 80px;
margin: 0 auto 24px; /* H mb-6 */
border-radius: var(--hba-radius-pill, 9999px);
background-color: var(--hba-ambertint-10, rgba(245, 147, 0, 0.102));
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fe9a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 40px 40px;
}
/* RHYTHM ROUND: the stub's own type rhythm, which was never authored — the disc
* carried its mb-6 and then the heading, the paragraph and the action row stacked
* at zero. `.hba-soon` is a component wrapper, so body.css's section-flow rules
* stop at it, exactly as they do at a card.
* H (BoardOfDirectors.tsx:38/41, and identical on /find-a-member and
* /client-portal), verbatim:
* h2 `font-['Oswald'] font-bold text-[#0d1b2a] text-3xl mb-4`
* p `text-gray-600 font-['Source_Sans_3'] text-lg leading-relaxed mb-8`
* The size on both is already right (body.css h2 30/36, .hba-body 18/29.25 — this
* is one of the few paragraphs on the site that really is the section-lead
* register), so only the margins are stated. The 32 also supplies the gap above
* the action row without touching `.hba-actions`, which is body.css's. */
.hba-soon > .hba-heading { margin-bottom: 16px; } /* H mb-4 */
.hba-soon > .hba-body { margin-bottom: 32px; } /* H mb-8 */
/* =========================================================================
* QUICK-LINK TILES — C-82 (layout answer is OPEN O-1)
* ===================================================================== */
/* H, verbatim: `portal-block bg-gradient-to-br from-[#1a3356] to-[#0f2240]
* border border-amber-500/40 rounded-lg p-6 lg:p-7 flex flex-col items-center justify-center
* text-center gap-3 min-h-[160px] lg:min-h-[175px] group relative overflow-hidden`
* in a `grid grid-cols-2 gap-4` rail.
*
* ⚠ TWO UNRECORDED LITERALS. `#1a3356` and `#0f2240` are the tile's gradient stops and appear
* NOWHERE in tokens.json — not in the palette, not in color.component. They are reported to the
* TL for entry at source. The fill is OPAQUE (my earlier read of it as translucent navy was
* wrong; the pixel variation across the tile is the gradient, not the photo showing through),
* so the tile reads correctly on the navy field compose-pages.php puts it on and NO deviation
* from live is needed here.
*
* ⚠ ONE THING IS MISSING AND IS NOT INVENTED: H puts a 56px `bg-white/10` disc holding a 26px
* per-tile lucide icon above the title, hovering to `bg-amber-500/20` + `text-amber-400`.
* compose-pages.php emits no element and no per-tile class for it, so there is no hook to hang
* it on. Reported rather than approximated.
*
* The 3-up rail below is compose-pages.php's (live is 2×2 in the hero) and is O-1's to settle. */
.hba-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px; /* H gap-4 */
}
.hba-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* H's `gap-3` (12px) sits between the icon disc and the text block, and this markup has no
* disc — so no gap here; the title/description spacing is H's `mt-1` on the description. */
min-height: 160px; /* H min-h-[160px] */
padding: 24px; /* H p-6 */
text-align: center;
text-decoration: none;
border-radius: var(--hba-radius-input, 8px); /* H rounded-lg */
background-image: linear-gradient(to bottom right, #1a3356, #0f2240);
border: 1px solid var(--hba-ambertint-40, rgba(252, 152, 0, 0.400)); /* H border-amber-500/40 */
position: relative;
overflow: hidden;
/* ✅ THE "UNSOURCED" MARKER THAT USED TO SIT HERE IS RESOLVED — 2026-08-21.
* The previous note said the tile "carries no hover fill" and raised its border
* to full amberFill as a stand-in, flagged as the file's one unsourced hover.
* It was not unsourced; it was just not a utility class. Live's hover lives in
* a hand-written rule in the app's own stylesheet (`client/src/index.css:144`),
* which is invisible if you only read the JSX className:
*
* .portal-block transition: transform .2s cubic-bezier(.23,1,.32,1),
* box-shadow .2s cubic-bezier(.23,1,.32,1);
* .portal-block:hover transform: translateY(-4px) scale(1.02);
* box-shadow: 0 20px 40px rgba(0,0,0,.4);
* .portal-block:active transform: scale(.97);
*
* The owner asked for the drop shadow by eye before anyone found the rule.
* Lesson worth keeping: a Tailwind codebase still has hand-written CSS, and
* "the class list is the whole story" is an assumption, not a fact. */
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hba-tile:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.hba-tile:active { transform: scale(0.97); }
/* H `font-['Oswald'] font-bold text-white text-base lg:text-lg leading-tight tracking-wide`. */
.hba-tile__title {
font-family: var(--hba-font-display);
font-size: 16px;
line-height: 20px;
font-weight: 700;
letter-spacing: 0.4px; /* tracking-wide 0.025em at 16px */
color: var(--hba-white, #ffffff);
margin: 0;
}
/* H `text-white/55 text-xs font-['Source_Sans_3'] mt-1`.
* ⚠ TOKENS.JSON DISAGREEMENT: T's alpha ladder calls white/55 "one footer micro-label … a live
* inconsistency, carried" (12 occurrences). It is not a footer label — it is THIS, the home
* quick-link tile description, 4 tiles × 3 sampled widths. Reported for correction at source. */
.hba-tile__desc {
font-family: var(--hba-font-text);
font-size: 12px;
line-height: 16px;
color: var(--hba-white-white55, rgba(255, 255, 255, 0.549));
margin: 4px 0 0; /* H mt-1 */
}
/* =========================================================================
* CATEGORY CHIPS — C-11
*
* ⛔ THE COLOUR MAP IS POSITIONAL, NOT SEMANTIC, AND THERE ARE TWO INDEPENDENT MAPS.
* "Education" is amberFill on the event surfaces and EMERALD on /news. Both maps below are read
* DIRECTLY out of the live DOM (H) — the class list on each chip span, not an inference — and
* cross-checked against the 1440 capture by exact-pixel location and against
* D DECISIONS.md HBA-D-9.
* A single taxonomy-wide map repaints /news and is battery row B-13. Do not merge them.
* ===================================================================== */
/* Geometry, H verbatim and identical on all three routes:
* `text-xs font-['Oswald'] font-semibold px-2.5 py-0.5 rounded-full text-white`
* = 12px/16px Oswald 600, padding 2px 10px, pill radius, white ink, no tracking.
* (T type.chip agrees. C confirms a 20px painted height on /events, /calendar and /news.) */
.hba-chip {
display: inline-block;
font-family: var(--hba-font-display);
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: normal;
padding: 2px 10px;
border-radius: var(--hba-radius-pill, 9999px);
color: var(--hba-white, #ffffff);
vertical-align: middle;
margin: 0;
}
/* ---- MAP 1 — EVENT SURFACES (/events, /calendar) ------------------------
* H, events.html and calendar.html, one chip span each:
* Board → bg-[#1e3a5f]
* Education → bg-amber-500 (#fe9a00)
* Social → bg-emerald-600 (#009966)
* Showcase → bg-purple-600 (#9810fa) */
.hba-chip--board { background: var(--hba-chipboard, #1e3a5f); } /* Board → navy */
.hba-chip--education { background: var(--hba-chipeducation, #fe9a00); } /* Education → AMBER */
.hba-chip--social { background: var(--hba-chipsocial, #009966); } /* Social → emerald */
.hba-chip--showcase { background: var(--hba-chipshowcase, #9810fa); } /* Showcase → purple */
/* ---- MAP 2 — NEWS SURFACE (/news). INDEPENDENT OF MAP 1. ----------------
* H, news.html, the only three chip spans on the route:
* "Association News" → bg-[#1e3a5f]
* "Events" → bg-amber-500 (#fe9a00)
* "Education" → bg-emerald-600 (#009966) ← EMERALD, not amber
* There is no purple anywhere on /news. */
.hba-chip--news-1 { background: var(--hba-chipboard, #1e3a5f); } /* Association News → navy */
.hba-chip--news-2 { background: var(--hba-chipeducation, #fe9a00); } /* Events → amber */
.hba-chip--news-3 { background: var(--hba-chipsocial, #009966); } /* Education → EMERALD */
/* =========================================================================
* EVENTS — C-10 / C-06
* ===================================================================== */
/* Home "Upcoming Events". H, verbatim:
*
*
*
Jul
* 15
* NOTE: NO shadow at rest — the shadow appears only on hover.
* The rail is `space-y-3` = 12px, which C confirms (row boxes 98px tall, 12px apart). */
.hba-eventrow {
display: flex;
flex-direction: column;
gap: 12px;
}
.hba-eventchip {
position: relative;
display: block;
min-height: 96px; /* 20 padding + 56 chip + 20 padding */
padding: 20px 20px 20px 96px; /* H p-5 + the 56px chip + H gap-5 */
background: var(--hba-white, #ffffff);
border: 1px solid var(--hba-hairline, #f3f4f6);
border-radius: var(--hba-radius-card, 12px);
text-decoration: none;
transition: box-shadow var(--hba-duration-base, 200ms) var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
border-color var(--hba-duration-base, 200ms) var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.hba-eventchip::before {
content: "";
position: absolute;
left: 20px;
top: 20px;
width: 56px; /* H w-14 */
height: 56px; /* H h-14 */
border-radius: var(--hba-radius-input, 8px); /* H rounded-lg */
background: var(--hba-navy, #1e3a5f);
}
/* H `hover:border-[#1e3a5f]/30 hover:shadow-md` on both event lists. shadow-md is T shadow.card.
* D INTERACTIONS I-05/I-07 asks for one hover treatment across the card families; this is that
* treatment — border + shadow, no transform, and therefore no layout shift (I-04). */
.hba-eventchip:hover,
.hba-eventlist__row:hover {
border-color: rgba(30, 58, 95, 0.3); /* H #1e3a5f/30 */
box-shadow: var(--hba-shadow-card, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px);
}
/* MONTH over DAY on the home chip — compose-pages.php emits month first here and so does live.
* H: month `font-bold text-white text-sm leading-none` = 14px/1 700 #fff; day
* `text-amber-400 text-xs` = 12px/16 400 #ffb900 (weight 400, NOT bold, and no tracking).
* The pair is `flex flex-col justify-center` in a 56px box: 14 + 16 = 30px centred ⇒ 13px in. */
.hba-eventchip > .hba-eventchip__month,
.hba-eventchip > .hba-eventchip__day {
position: absolute;
left: 20px;
width: 56px;
margin: 0;
text-align: center;
font-family: var(--hba-font-display);
}
.hba-eventchip > .hba-eventchip__month {
top: 33px;
font-size: 14px;
line-height: 14px; /* H leading-none */
font-weight: 700;
color: var(--hba-white, #ffffff);
}
.hba-eventchip > .hba-eventchip__day {
top: 47px;
font-size: 12px;
line-height: 16px;
font-weight: 400;
color: var(--hba-amberink, #ffb900);
}
/* H `font-['Oswald'] font-semibold text-[#0d1b2a] text-lg … truncate`. M /calendar agrees
* (h3 18/28 600). `truncate` is reproduced: live clips a long title to one line here. */
.hba-eventchip__title {
font-family: var(--hba-font-display);
font-size: 18px;
line-height: 28px;
font-weight: 600;
color: var(--hba-charcoal, #0d1b2a);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* H `text-gray-500 text-sm font-['Source_Sans_3']` = 14px, T inkMuted #6a7282 (gray-500), the
* documented owner of meta lines. C's darkest ink sample rgb(106,114,130) matches exactly. */
.hba-eventchip__loc {
font-family: var(--hba-font-text);
font-size: 14px;
line-height: 20px;
color: var(--hba-inkmuted, #6a7282);
margin: 0;
}
/* /events "All Upcoming Events" and /calendar "Upcoming Events" — the same component with the
* larger chip. H, verbatim:
*
*
*
15
* Jul
* h3 + chip
* C at 390 confirms the 64px chip stays 64px and stays beside the copy — live has no mobile
* reflow for this component, and none is introduced here. */
.hba-eventlist {
display: flex;
flex-direction: column;
gap: 12px; /* H space-y-3 */
}
.hba-eventlist__row {
position: relative;
/* `display: flow-root` CONTAINS THE FLOATS the copy block below uses to build
* live's two-line copy column; without it a row whose title wraps spills its
* copy out of the card. flow-root rather than `overflow: hidden` so nothing is
* ever clipped. See the copy-block note further down. */
display: flow-root;
min-height: 106px; /* 20 + 64 chip + 20 + 2 border; live measures 106, not 104 */
padding: 20px 20px 20px 104px; /* H p-5 + the 64px chip + H gap-5 */
background: var(--hba-white, #ffffff);
border: 1px solid var(--hba-hairline, #f3f4f6);
border-radius: var(--hba-radius-card, 12px);
transition: box-shadow var(--hba-duration-base, 200ms) var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
border-color var(--hba-duration-base, 200ms) var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.hba-eventlist__row::before {
content: "";
position: absolute;
left: 20px;
top: 20px;
width: 64px; /* H w-16 */
height: 64px; /* H h-16 */
border-radius: var(--hba-radius-card, 12px); /* H rounded-xl */
background: var(--hba-navy, #1e3a5f);
}
/* DAY over MONTH here — compose-pages.php emits day first on these two routes and so does live.
* 18px/1 + 16px = 34px centred in the 64px box ⇒ 15px in. COMPONENT_MAP C-06's "day over month"
* describes THIS chip, not the home one above. */
.hba-eventlist__row > .hba-eventchip__day,
.hba-eventlist__row > .hba-eventchip__month {
position: absolute;
left: 20px;
width: 64px;
margin: 0;
text-align: center;
font-family: var(--hba-font-display);
}
.hba-eventlist__row > .hba-eventchip__day {
top: 35px;
font-size: 18px;
line-height: 18px; /* H leading-none */
font-weight: 700;
color: var(--hba-white, #ffffff);
}
.hba-eventlist__row > .hba-eventchip__month {
top: 53px;
font-size: 12px;
line-height: 16px;
font-weight: 400;
text-transform: uppercase; /* H uppercase */
color: var(--hba-amberink, #ffb900);
}
/* H puts the title and its category chip in a `flex items-center gap-3 mb-1 flex-wrap` line.
* compose-pages.php emits them as siblings, so they are made inline with the same 12px gap. */
.hba-eventlist__row > .hba-heading {
float: left; /* see the copy-block note below */
margin: 0 12px 4px 0; /* H gap-3 beside the chip, H mb-1 under the row */
font-size: 18px;
line-height: 28px;
font-weight: 600;
}
/* ⛔ 2026-08-21 RHYTHM ROUND — THE REST OF THIS ROW'S INTERIOR, MEASURED OFF LIVE
* RATHER THAN READ OFF THE MARKUP, BECAUSE THE MARKUP IS WHAT MISLED ME.
* Live's copy column (spacing-probe, /events "All Upcoming Events", 2543px) is:
* div.flex.items-center.gap-3 h=28 mb 4 <- h3 + category chip
* div.flex.flex-wrap.gap-4 h=20 mb 4 <- time AND location, ONE row
* p.text-gray-500.text-sm h=20 <- description, 14/20
* column 76 + 20/20 padding + 2 border = 106 (no description) / 118 (with)
* The title row was already right. The other two were not:
* - compose-pages.php emits time and location as two
is a block, so they stacked where live wraps them in one * `flex flex-wrap gap-4` row. That is a whole 20px line per row, x6 rows. * - the description kept .hba-body's 18/29.25 section-lead register where live * runs `text-gray-500 text-sm` = 14/20. This is the "oversized body copy" half * of /events [2] being +101: the row was both jammed AND too tall, from two * different causes, at the same time. * ⛔ FLOATS, AND THEY ARE THE ONLY MECHANISM THAT WORKS HERE — MEASURED, NOT * PREFERRED. Live builds this column from THREE nested flex rows; the composition * emits all six elements as FLAT siblings of the row, with no wrapper to make a * row out of. The obvious fix — `display: inline-block` on the metas — was tried * and measured first, and it is wrong: with the h3 and the chip already inline, * everything flows onto ONE line and the row collapses to its min-height (/events * [2] went from +101 to −76). An inline formatting context has no way to say * "break here", `clear` does not apply to inline-level boxes, and the row's * `::before` is already spent on the navy date chip so the flex line-breaker * pseudo-element trick is unavailable too. * Floats do have a break — `clear` — so the three lines are built as float rows: * line 1 h3 + chip (float left, chip nudged 4px to match H items-center) * line 2 meta + meta (clear: left on the first, gap-4 as margin-left on the * second so no trailing margin widens the wrap point) * line 3 description (clear: left, in flow, and therefore what gives the row * its height) * `display: flow-root` on the row (above) contains them. Retire all of this the * day compose-pages.php emits `.hba-eventlist__chip` / `__copy` wrappers the way * `.hba-newsrow` already emits `__copy` — that is live's own shape, it would also * clear the R-9 flush rows this component cannot answer in CSS, and it is raised * with the TL. Measured after: 118 with a description, 106 without; live 118/106. * * `:not(…)` IS LOAD-BEARING, same trap as everywhere else in this file: the day, * the month, the chip and both metas all ride on .hba-body, so a bare * `> .hba-body` would repaint the 18px day, the 12px chip and the meta lines at * 14/20 description ink. */ .hba-eventlist__row > .hba-chip { float: left; margin-top: 4px; } /* H items-center: (28-20)/2 */ .hba-eventlist__row > .hba-meta { float: left; clear: left; /* starts live's second line */ margin-bottom: 4px; /* H mb-1 on the meta row */ } .hba-eventlist__row > .hba-meta + .hba-meta { clear: none; margin-left: 16px; } /* H gap-4 */ .hba-eventlist__row > .hba-body:not(.hba-meta, .hba-chip, .hba-eventchip__day, .hba-eventchip__month) { clear: left; /* live's third line */ font-size: 14px; /* H text-sm */ line-height: 20px; color: var(--hba-inkmuted, #6a7282); /* H text-gray-500 */ } /* ========================================================================= * STATS — C-07 / C-83 * ===================================================================== */ /* H, verbatim: *
*
*
1,100+
* Facebook Followers
* & growing
* C confirms 2-up at BOTH 1440 and 390, so the grid is not collapsed on mobile.
*
* ✅ FIELD COLLISION — RESOLVED IN THE COMPOSITION, 2026-08-21. The note that stood here said
* these #f5f7fa cards sit inside the WHITE story section on live (About.tsx:137, the second
* child of the `lg:grid-cols-2 gap-14 items-center` split) while compose-pages.php had put them
* in their own `hba-field-offWhite` section, offWhite-on-offWhite. The interior round moves them
* into the story split's right column, which is where live has them. THE VALUES BELOW WERE
* ALREADY CORRECT FOR THAT POSITION and are unchanged — re-verified against about.html this
* round, class for class. Nothing here had to move; the fix was upstream, exactly as recorded.
*
* TWO VARIANTS, ONE PAIR OF CLASSES, AND BOTH STILL WORK. This block is the /about CARD form on
* a light field. Home's navy band is the card-less centred form and lives in the
* `.hba-field-navy .hba-stats` block near the foot of this file at (0,2,0) — strictly more
* specific, and field-scoped, so it cannot reach /about's white ground and /about cannot reach
* it. Verified by inspection of both selectors, not assumed.
*
* `width: 100%` is the .brxe-container trap in its third form (site.css row B-4, body.css's
* align-items, site.css's flex-direction). Inside a split column a shrink-wrapped grid collapses
* to its content width, and a container that kept Bricks' `width: 1100px` would instead blow
* straight out of a 580px column. Stated explicitly so neither can happen. */
.hba-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px; /* H gap-5 */
width: 100%; /* see the .brxe-container note above */
}
.hba-stat {
background: var(--hba-offwhite, #f5f7fa);
border: 1px solid var(--hba-hairline, #f3f4f6);
border-radius: var(--hba-radius-card, 12px);
padding: 24px; /* H p-6 */
}
.hba-stat__value {
font-family: var(--hba-font-display);
font-size: 24px;
line-height: 30px; /* H leading-tight */
font-weight: 700;
color: var(--hba-charcoal, #0d1b2a);
margin: 0 0 4px; /* H mb-1 */
}
.hba-stat__label {
font-family: var(--hba-font-text);
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: var(--hba-inkstrong, #374151);
margin: 0;
}
.hba-stat__sub {
font-family: var(--hba-font-text);
font-size: 12px;
line-height: 16px;
color: var(--hba-inkfaint, #99a1af); /* H text-gray-400 */
margin: 2px 0 0; /* H mt-0.5 */
}
/* =========================================================================
* TIMELINE — C-90 (/about; single-use and named as such in COMPONENT_MAP §5)
* ===================================================================== */
/* H, verbatim:
*
*
*
*
*
*
* Founded
* ✅ GROUND — RESOLVED IN THE COMPOSITION, 2026-08-21, AND THE RULES BELOW NEEDED NO CHANGE.
* The note that stood here flagged compose-pages.php putting this section on `charcoal` while H
* and C both show the live ground as #ffffff (About.tsx:197, `py-16 bg-white`). The interior
* round moves it to white. RE-VERIFIED against about.html this round rather than assumed:
* rail `absolute left-3 top-2 bottom-2 w-0.5 bg-[#e5e7eb]` -> #e5e7eb, correct on white
* dot `w-3.5 h-3.5 rounded-full bg-amber-500 border-2 border-white shadow`
* -> white ring, correct on white
* Both were authored FROM the live white-ground markup in the first place, so the charcoal
* placement was the thing that was wrong, not these values. Nothing is re-coloured. What WAS
* missing is the step's own type register — three sizes that the field defaults get wrong on a
* white ground — and that is added at the foot of this block. */
.hba-timeline {
position: relative;
max-width: 672px; /* H max-w-2xl */
margin-inline: auto;
padding-left: 32px; /* H pl-8 */
}
/* RHYTHM ROUND: the timeline's LEAD-IN, which was 16px instead of 48.
* body.css gives a content block 40px after the section head, but only for the
* seven classes named in its `.hba-section__inner > * + :where(…)` list, and
* `.hba-timeline` is not one of them — so this section fell through to the generic
* `heading + * { margin-top: 16px }` and the rail started 32px too high. Measured:
* the timeline block itself is 612px on both sides, byte for byte; the whole
* /about [4] delta is this gap plus two things this lane does not own (the section
* is composed 56/56 where live is `py-16`, and the h2 ramp).
* H (About.tsx:197-ish): live wraps the eyebrow and h2 in `text-center mb-12`, so
* the distance from the heading to the rail is 48. Stated on this component rather
* than by adding a class to body.css's list, which is the other lane's. (0,2,0)
* over that rule's `:where()`-flattened (0,1,0); if body.css later adopts
* `.hba-timeline` the two agree on the property and nothing doubles. */
/* ⛔ THE DECLARATION NOW LIVES IN body.css, in the block-gap register beside
* `.hba-grid` 40 and `.hba-actions` 32. Both lanes reached the same 48 from the
* same measurement; two homes for one fact is how the next person changes only
* one of them. The reasoning stays here because this is the component it
* describes — the rule does not. */
.hba-timeline::before {
content: "";
position: absolute;
left: 12px; /* H left-3 */
top: 8px;
bottom: 8px; /* H top-2 bottom-2 */
width: 2px; /* H w-0.5 */
background: var(--hba-border, #e5e7eb);
}
/* ⛔ THE STEP IS AN NOW (R-43, ruling SS-13) AND THESE THREE DECLARATIONS ARE
* WHAT THAT COSTS. An anchor is an INLINE box: `position: relative` still applies,
* but the ::before dot below is positioned against a box that has collapsed around
* its text, the block children re-wrap it, and the amber dot lands in the middle of
* the paragraph instead of beside the marker. `display: block` restores exactly the
* geometry the
had, so nothing else in this block needed touching. The colour
* and underline resets keep the step reading as body copy rather than as a link —
* the marker, heading and text keep their own registers, and the affordance is the
* cursor and the hover below, the same treatment `.hba-tile` and the federation
* cards already use for a whole-block link. */
.hba-timeline__step {
position: relative;
display: block;
margin-bottom: 40px; /* H space-y-10 */
color: inherit;
text-decoration: none;
}
.hba-timeline__step:last-child { margin-bottom: 0; }
/* An affordance, but a quiet one: live has no hover state here because live had no
* link here. The heading takes navy on hover, which is the same signal
* `.hba-card--topbar` gives on /news. */
a.hba-timeline__step:hover .hba-heading {
color: var(--hba-navy, #1e3a5f);
}
.hba-timeline__step::before {
content: "";
position: absolute;
left: -20px; /* H -left-5, i.e. 12px from the container edge */
top: 6px; /* H top-1.5 */
width: 14px; /* H w-3.5 */
height: 14px; /* H h-3.5 */
box-sizing: border-box;
border-radius: var(--hba-radius-pill, 9999px);
background: var(--hba-amberfill, #fe9a00);
border: 2px solid var(--hba-white, #ffffff);
box-shadow: var(--hba-shadow-cardFlat, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px);
}
.hba-timeline__marker {
display: inline-block;
font-family: var(--hba-font-display);
font-size: 12px;
line-height: 16px;
font-weight: 700;
letter-spacing: 0.6px; /* H tracking-wider 0.05em at 12px */
padding: 4px 12px; /* H py-1 px-3 */
border-radius: var(--hba-radius-hairline, 4px); /* H rounded */
background: var(--hba-navy, #1e3a5f);
color: var(--hba-amberink, #ffb900);
margin: 0 0 8px; /* H mb-2 */
}
/* 2026-08-21: the step's own type register, which was never authored — the steps
* were taking body.css's section defaults (h3 20/28, body 18/29.25 inkBody) where
* live runs a tighter, darker pair. H (About.tsx, per step), verbatim:
* h3 `font-['Oswald'] font-bold text-[#0d1b2a] text-lg mb-1.5`
* p `font-['Source_Sans_3'] text-[#374151] text-sm leading-relaxed`
* text-lg with NO leading class = 18/28; mb-1.5 = 6px; text-sm leading-relaxed =
* 14 x 1.625 = 22.75. The paragraph ink is inkStrong #374151, NOT the light-field
* inkBody #4a5565 — the same one-channel distinction STYLE_GUIDE trap 3 forbids
* collapsing on list items. (0,2,0) over body.css's (0,1,0) field rules. */
.hba-timeline__step .hba-heading {
font-size: 18px; /* H text-lg */
line-height: 28px;
font-weight: 700;
margin: 0 0 6px; /* H mb-1.5 */
}
/* ⛔ `:not(.hba-timeline__marker)` IS LOAD-BEARING. The marker is emitted as
* `
` — it rides .hba-body like every other * paragraph on the site — so a bare `.hba-timeline__step .hba-body` at (0,2,0) beats * `.hba-timeline__marker` at (0,1,0) and repaints the amber-on-navy pill in 14px * inkStrong. Caught by measuring the rendered step, not by reading the rule: it * computed rgb(55,65,81)/14px where the pill is #ffb900/12px. Same trap body.css * documents for .hba-meta and .hba-kicker riding on .hba-body — the ink modifier is * on the SAME element, so a descendant rule aimed at its siblings hits it too. */ .hba-timeline__step .hba-body:not(.hba-timeline__marker) { font-size: 14px; /* H text-sm */ line-height: 22.75px; /* H leading-relaxed */ color: var(--hba-inkstrong, #374151); } /* ========================================================================= * OFFICE HOURS — part of C-91 (/contact) * ===================================================================== */ /* `hba-hours` is emitted by compose-pages.php but was not on my class list. It is the direct * parent of the rows below and belongs to this component, so it is styled here and reported. * H, verbatim — live uses a real table, so the two columns align across every row: *