/* Additive styles for the SEO article/detail page upgrade (STATE.md section 7, "deepen the blog and programmatic SEO surface" pass). Source of truth lives here, under web/functions/ (this pass's ownership scope), separate from web/src/styles/seo.css (owned by the original Blog and SEO agent and concurrently touched by a design agent restyling in place) -- this pass never edits web/src/**. web/scripts/sync-seo-assets.mjs copies this file to web/public/styles/seo-extra.css on every `npm run build` (web/public/styles/ is entirely gitignored as a build-artifact directory, so the source has to live somewhere tracked -- see that script's header comment). Linked from web/functions/lib/seo/render.ts's alongside the four synced stylesheets and seo.css. Reuses the same design tokens (--space-*, --fs-*, --text-muted, --border, --radius-lg, ...) as the rest of the SEO surface; adds no new classes to the shared component vocabulary (.btn, .card, .badge, ...), only new, page-specific selectors for blocks that did not exist before this pass: the article table of contents, the related-articles block, the related- opportunities heading on articles, and the "how to bid" explainer + related- opportunities block on the opportunity detail page. */ /* ---- article byline (author + published/updated) ------------------------------ */ .seo-article__byline-meta { margin-top: var(--space-1); } /* ---- table of contents ---------------------------------------------------------- */ .seo-toc { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); max-width: var(--content-narrow); } .seo-toc__title { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin-bottom: var(--space-3); } .seo-toc__list { display: flex; flex-direction: column; gap: var(--space-2); list-style: decimal; padding-left: var(--space-5); } .seo-toc__list a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .seo-toc__list a:hover { color: var(--accent); } /* ---- related articles ------------------------------------------------------------ */ .seo-related { margin-top: var(--space-9); padding-top: var(--space-8); border-top: var(--border-w) solid var(--border); } .seo-related__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 560; margin-bottom: var(--space-4); } .seo-related__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .seo-related__grid { grid-template-columns: repeat(3, 1fr); } } .seo-related__card { padding: var(--space-5); } .seo-related__card-title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 560; line-height: var(--lh-snug); } /* ---- related-opportunities heading (shared by articles + detail page) ----------- */ .seo-related-opps { margin-top: var(--space-8); } .seo-related-opps__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 560; margin-bottom: var(--space-4); } /* ---- opportunity detail: "how to bid on this" explainer -------------------------- */ .seo-detail__bid { margin-top: var(--space-7); padding: var(--space-6); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); } .seo-detail__bid h2 { margin-top: 0; font-size: var(--fs-md); } .seo-detail__bid ol, .seo-detail__bid ul { margin-top: var(--space-3); padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } .seo-detail__bid ol { list-style: decimal; } .seo-detail__bid ul { list-style: disc; } .seo-detail__niche-link { margin-top: var(--space-4); } .seo-detail__niche-link a { color: var(--accent); font-weight: 600; }