/* ============================================================= Bud — Blog Two independent halves: 1. INDEX CARDS (.blog-cat-*, .blog-grid, .blog-byline) The blog reuses the shared .news-card component verbatim (assets/css/news-cards.css must load FIRST). This file only adds the blog's own category palette on the same --cat contract, the grid/filter chrome, and the byline row. 2. THE POST DOCUMENT (.bp-*) A white "sheet" embedded in the dark page, carrying the typography of the standalone whitepaper documents (Whitepapers/*.html) — Montserrat, 680px measure, violet section numbers, square electric bullets, paper callouts, right-aligned data tables. Scoped entirely under .bp-doc so none of it can leak into site.css's .prose article template. Tokens only — no new brand colors or fonts. ============================================================= */ /* ═══════════════════════════════════════════════════════════ 1 · INDEX — category palette + grid chrome Mirrors the .news-cat-* contract so .news-card works as-is. ═══════════════════════════════════════════════════════════ */ .blog-cat-strategy { --cat:#4F86F2; --cat-glow:rgba(79,134,242,0.10); --cat-fill:rgba(79,134,242,0.16); --cat-border:rgba(79,134,242,0.32); --cat-disc:rgba(79,134,242,0.14); --cat-disc-border:rgba(79,134,242,0.30); } .blog-cat-platform { --cat:#B785F4; --cat-glow:rgba(140,51,239,0.12); --cat-fill:rgba(140,51,239,0.16); --cat-border:rgba(183,133,244,0.34); --cat-disc:rgba(140,51,239,0.16); --cat-disc-border:rgba(183,133,244,0.34); } .blog-cat-economics { --cat:#F2C341; --cat-glow:rgba(242,195,65,0.10); --cat-fill:rgba(242,195,65,0.16); --cat-border:rgba(242,195,65,0.32); --cat-disc:rgba(242,195,65,0.14); --cat-disc-border:rgba(242,195,65,0.30); } .blog-cat-engineering { --cat:#35C88B; --cat-glow:rgba(53,200,139,0.10); --cat-fill:rgba(53,200,139,0.16); --cat-border:rgba(53,200,139,0.32); --cat-disc:rgba(53,200,139,0.14); --cat-disc-border:rgba(53,200,139,0.30); } /* Darker tones on the light card body (matches news-cards.css) */ .news-card.blog-cat-strategy { --cat:#2C5FC9; } .news-card.blog-cat-platform { --cat:#7A2BD6; } .news-card.blog-cat-economics { --cat:#9A7400; } .news-card.blog-cat-engineering { --cat:#1F8F5F; } /* …but the thumbnail stays DARK, and the blog cards use the icon-disc treatment rather than a photo, so restore the bright tone in there. */ .news-card.blog-cat-strategy .news-thumb { --cat:#4F86F2; } .news-card.blog-cat-platform .news-thumb { --cat:#B785F4; } .news-card.blog-cat-economics .news-thumb { --cat:#F2C341; } .news-card.blog-cat-engineering .news-thumb { --cat:#35C88B; } /* Grid + filter header (same shape as the newsroom index) */ .blog-grid-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:32px; } .blog-grid-head h2 { font-size:34px; font-weight:var(--fw-bold); letter-spacing:-0.02em; line-height:1.1; margin:0; } .blog-filters { display:flex; gap:8px; flex-wrap:wrap; } .blog-chip { font: inherit; cursor:pointer; font-size:13px; font-weight:var(--fw-semibold); padding:8px 15px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:transparent; color:var(--fg2); transition: background var(--duration-sm) var(--ease-out-expo), border-color var(--duration-sm) var(--ease-out-expo), color var(--duration-sm) var(--ease-out-expo); } .blog-chip:hover { color:var(--fg1); } .blog-chip.is-active { background:var(--accent-muted); border-color:var(--accent); color:var(--bud-electric-2); } .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .news-card.is-hidden { display:none; } .blog-empty { display:none; text-align:center; color:var(--fg3); font-size:14px; padding:48px 0 0; } .blog-empty.is-shown { display:block; } /* Byline row — sits under the summary, above the read-more */ .blog-byline { display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:12px; color:#5a5566; } .blog-byline .ba { width:26px; height:26px; border-radius:50%; flex:none; object-fit:cover; background:var(--cat-disc); border:1px solid var(--cat-border); display:grid; place-items:center; font-size:10px; font-weight:var(--fw-bold); color:var(--cat); letter-spacing:.02em; } .blog-byline b { color:#111; font-weight:var(--fw-semibold); } .blog-byline .rt { margin-left:auto; display:inline-flex; align-items:center; gap:5px; } .blog-byline .rt i { width:12px; height:12px; } .news-featured-body .blog-byline { font-size:13px; margin-bottom:20px; } .news-featured-body .blog-byline .ba { width:32px; height:32px; font-size:11px; } @media (max-width: 960px) { .blog-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width: 680px) { .blog-grid { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════ 2 · THE POST DOCUMENT — full-width light reading band The post body is a `.section[data-theme="light"]` band sitting flush under the hero, laid out with the NEWSROOM's own shell: `.article-layout` (article column + sticky `.article-aside` share rail), exactly as /company/news/*.html do it. The band itself is site.css's light section — nothing here paints it, and nothing needs to: tokens.css's light theme already resolves --bg to #FFFFFF and --surface to #FAF7FE, i.e. the document's own --paper / --paper-2. So the old floating sheet dissolves into the band with no colour seam, and every .bp-* body component below keeps its whitepaper typography untouched. ═══════════════════════════════════════════════════════════ */ /* Category tones deepen on the light band — same fix site.css applies to .art-cat-*: the pale lavender/gold lose contrast on white. */ .section[data-theme="light"].blog-cat-strategy { --cat:#2C5FC9; } .section[data-theme="light"].blog-cat-platform { --cat:#7A2BD6; } .section[data-theme="light"].blog-cat-economics { --cat:#9A7400; } .section[data-theme="light"].blog-cat-engineering { --cat:#1F8F5F; } /* ── The post DOCUMENT moved out on 31 Jul 2026 ─────────────── Everything that used to live here — the whitepaper typography, callouts, stat band, phases, column cards, tables, figures, author card — was REPLACED by the editorial system in assets/css/blog-body.css (Claude Design's blog template handoff, reconciled to design-guide §09 v1.2). It was deleted rather than left to be overridden. The handoff shipped blog-body.css as a layer that loads after this file and beats it with ~15 !important declarations; keeping both would have left two owners for every rule and exactly the "page-inline copies that fight real pages" problem §09 warns about. One file owns the blog document now, and it needs no !important at all. What stays in THIS file: the index (category palette, grid, filters, byline), the light-band category tones above, and the .bp-back strip below, which is page chrome rather than document. ───────────────────────────────────────────────────────────── */ /* ---- Featured card — thumb plate fills the row ---- news-cards.css locks .news-thumb to 16/9. On the blog index the body column runs longer than that (title + a full summary + byline + link), so the plate stopped 132px short and left white under the graphic. Let the plate take the row height instead, and pull the body in so the row is no taller than it needs to be — every pixel of body height is a pixel the banner has to be cropped to fill. Scoped here rather than in news-cards.css: /company/news loads that file but not this one, so its photo cards keep the 16/9 box they were cut for. */ .news-featured .news-thumb { aspect-ratio:auto; height:100%; } .news-featured .news-thumb img { object-position:center; } .news-featured-body { padding:30px 40px; } .news-featured-body h2 { font-size:28px; margin-bottom:12px; } .news-featured-body .news-summary { margin-bottom:18px; } /* Three lines is enough to sell the post; the fourth was pushing the row taller and taking another slice off the banner. */ .news-featured-body .news-summary { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } @media (max-width: 960px) { /* Stacked — the plate has no body column to match, so give the banner its own proportion back rather than a tall crop. */ .news-featured .news-thumb { aspect-ratio:16/9; height:auto; } .news-featured-body .news-summary { -webkit-line-clamp:none; display:block; } } /* ---- Back strip under the band ---- */ .bp-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:var(--fw-semibold); color:var(--fg2); } .bp-back:hover { color:var(--fg1); } .bp-back i { width:15px; height:15px; } @media (prefers-reduced-motion: reduce) { .news-card { transition: border-color var(--duration-md); } .news-card:hover { transform:none; } }