/* components.css — Stablecoin Beat Design System v1.0 Recurring components lifted from design/reference/*.html (homepage, article, chart archetypes). Loads after tokens.css + base.css; class selectors here win over base.css's bare-element defaults by specificity. See DESIGN.md §5 for the component catalogue this file implements. */ /* ── layout shell ─────────────────────────────────────────────── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 32px} section{padding-top:34px} /* 2026-08-20: matches .feat-lead/.weekly-card's own top rule so every horizontal band on the homepage opens the same way — a section without this read as a continuation of whatever's above it instead of its own thing (see _hp_analysis.html's comment on "More From Insights"). */ .sechead-band{border-top:2px solid var(--ink);padding-top:16px} /* align-items:start — CSS Grid stretches items to the tallest column's height by default, which left visible dead space under whichever column had less content (flagged repeatedly 2026-08-17/18 as misaligned bottoms / gaps before this was traced to its actual cause). */ .duo{display:grid;grid-template-columns:1.5fr 1fr;gap:52px;align-items:start} /* the security thread: page + footer top edge (DESIGN.md §5 "The thread") */ body::before{content:"";display:block;height:2px;background:var(--thread)} /* ── text utilities ───────────────────────────────────────────── */ .caps{font-weight:700;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2)} .caps.blue{color:var(--blue)} .meta{font-size:12px;color:var(--ink-2)} .meta b{color:var(--ink);font-weight:600} .alert{color:var(--alert)} /* series-code chip (DESIGN.md §5 ".plate") */ .plate{ display:inline-block;background:var(--blue);color:#fff; font-family:var(--disp);font-weight:800;font-size:17px;line-height:1; padding:6px 9px 4px;letter-spacing:.04em;vertical-align:middle; } /* section header: plate/title left, "all X ->" link right */ .sechead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px} .sechead .lhs{display:flex;align-items:center;gap:12px} .sechead h2{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:.03em;text-transform:uppercase;margin:0;padding:0;border-top:0} .sechead a{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);border-bottom:0} .sechead a:hover{color:var(--blue-dk);text-decoration:underline} /* ── header / brand lockup / nav (shared across all page types) ── */ header{background:#fff;border-bottom:1px solid var(--line)} header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:11px;padding-bottom:11px;flex-wrap:wrap} /* 2026-08-20: now an , not a
(logo links home) — border-bottom:0 kills base.css's generic bare- underline-on-hover treatment, which would otherwise draw a line under the whole logo lockup. */ .brandlock{display:flex;align-items:center;gap:11px;border-bottom:0} .mark{width:34px;height:34px;background:var(--blue);display:flex;align-items:center;justify-content:center;position:relative;flex:none} .mark span{font-family:var(--disp);font-weight:900;font-size:18px;color:#fff} .mark::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#fff;opacity:.92} .brandname{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:.05em;text-transform:uppercase;line-height:1;border-bottom:0} /* The descriptor under the wordmark, header and footer alike. Owner copy since edce56b — "Statistics and intelligence for the stablecoin economy", which is a SENTENCE where the retired "Statistical Office of the Stablecoin Economy" was a TITLE, and it is 52 characters against that one's 43. `text-transform:none` is the load-bearing line: `.brandname` sets uppercase and `small` inherits it, so the new descriptor was rendering as 52 characters of tracked capitals. At the old 8.5px/.22em that is ~360px of micro-caps — wider than the footer brand column's 34ch, so it wrapped there, and it widened the header lockup enough to push the nav down early. Tracking that heavy is a capitals treatment anyway; on a sentence it reads as shouting. Sentence case at .04em is narrower than the old caps line was, so the header lockup gets SMALLER, not bigger. The words are the owner's and are not mine to touch (edce56b); the treatment is the CSS call he left open. Guarded by tests/test_v2_footer.py. */ .brandname small{display:block;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.03em;text-transform:none;color:var(--ink-2);margin-top:5px} nav{display:flex;gap:20px;flex-wrap:wrap} nav a{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);border-bottom:0} nav a:hover{color:var(--ink)} nav a.on{color:var(--blue)} /* ── footer (shared) ─────────────────────────────────────────── REGISTER FIXED 2026-09-05 — owner picked variant B (decision sheet A24) after "the footer looks like shit". The three candidates were rendered side by side at /preview/footer-lab/, which is deleted now that the pick is made; the two losing variants are recoverable from commit 55e52f6 if this is reopened. THE INK GROUND AND THE THREAD STAY. DESIGN.md §2 names --ink the footer background and all four reference archetypes render dark, so B is the option that amends no locked spec. What changed is everything the footer had invented for itself: · #8FA7F0 (heads) and #C6D0EA (links) are GONE. They were the only two colors on the site that appeared in tokens.css nowhere and in the rest of this file nowhere — the footer was the one surface with a private palette, which is the measurable form of "it reads as a different site". Heads take --faint, links take --on-blue; both are real tokens. --faint also replaces the four places it was spelled as the literal #9AA5BE. · That UN-INVERTS the hierarchy. The heads used to be the brightest, heaviest, most tracked thing in the block (700 / .18em / periwinkle) while the links they labelled were dimmer and lighter — the labels shouted and the navigation whispered. The links are now the bright layer. · The heads move onto the system's own label spec (DESIGN.md §3 "CAPS labels": Sans 700, 10.5–11px, tracking .14–.17em) instead of a private 10px / .18em, and the links onto its UI-body range (13–14.5px). · The brand stack gets ONE rhythm — a flex column with a single gap — instead of four ad-hoc inline margin-tops (12 / 8 / 6 / 14px) in the template. · The operator and legal lines move OUT of the brand stack into their own bar under a hairline, which is the live footer's structure (custom.css §21). The dark slab itself came from ONE reference file: sb-option-b-rev3.html is the homepage mock, and its column footer got applied to all 385 pages while the three page archetypes each carry a one-or-two-line footer. Keeping it is the owner's call; the register above is what makes it belong to this site. */ footer{margin-top:48px;background:var(--ink);color:#fff;border-top:2px solid var(--thread)} footer .wrap{padding-top:30px;padding-bottom:0} .footer-main{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;padding-bottom:26px} .footer-brand{flex:0 0 300px;display:flex;flex-direction:column;gap:11px} .footer-brand p{margin:0} footer .brandname{color:#fff} footer .brandname small{color:var(--faint)} footer .meta{color:var(--faint)} /* The brand lockup and the bar sit OUTSIDE .cols, so outside its link color: without an explicit color they fall back to base.css's --blue-dk — dark blue on the dark ground, effectively invisible. Same class of cascade miss as the archived weekly charts inverting on --paper. */ footer .brandname a{color:inherit;border-bottom:0} footer .brandname a:hover{color:#fff} /* Equal columns on a grid, not flex. Under `flex` each column was only as wide as its own longest link, so the 48px gap sat between boxes of four different widths and the gutters rendered visibly unequal (~90 / ~123 / ~72px in the owner's 2026-09-05 screenshot). A grid of four equal tracks makes the gutters equal by construction, which is the only thing that reads as a column set. The brand column takes a fixed basis so it stops being sized by whatever the tagline happens to be — live's own structure (custom.css §21). */ footer .cols{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} footer .cols>div{display:flex;flex-direction:column;gap:9px} /* 2026-09-05, second pass — the owner: the sublinks are bigger than the headings and "something is just off". HE IS DESCRIBING AN OVER-CORRECTION OF MINE. The first pass fixed the block's inverted color hierarchy by dimming the heads to --faint and brightening the links to --on-blue, but the heads were ALSO the smaller of the two (10.5px against 13.5px). Three axes — size, weight and brightness — then all pointed the same way, so the group label stopped reading as a label at all and four columns collapsed into one flat list of links. The live footer gets away with the same 11px-head/14px-link ratio only because there both take the SAME color, so capitals alone carry the distinction. So the head stops being a micro-label and becomes a real heading in the site's own heading language: the display face, uppercase, ABOVE the links it labels rather than below them. That is `.sechead h2` (Disp 800 caps 21px) at footer scale — nothing invented. Capitals stay because they are what the display face does everywhere on this site; it is the SIZE relationship that was wrong, and it is now the right way round. The links drop 13.5 -> 13px, still inside DESIGN.md §3's 13–14.5px UI-body range. */ footer h5{font-family:var(--disp);font-size:16px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;margin:0 0 6px} /* 🚨 text-transform:none and letter-spacing:0 ARE THE FIX, not tidiness. The footer columns are a