/* 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; } /* ---- opportunity detail: NAICS/PSC reference link -------------------------------- */ .seo-detail__code-ref { font-size: var(--fs-2xs); color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; margin-left: var(--space-2); white-space: nowrap; } /* ---- opportunity detail: lifecycle timeline (competitor-gap pass item 2) -------- A compact vertical list, editorial rather than a generic SaaS progress-bar widget -- a left rule plus small round nodes, same visual family as the article table of contents (.seo-toc) above. Built from real columns only (posted/updated/status), see timeline.ts's header comment. */ .seo-detail__timeline { margin-top: var(--space-7); } .seo-detail__timeline h2 { font-size: var(--fs-md); } .seo-timeline { margin-top: var(--space-4); padding-left: var(--space-5); border-left: var(--border-w) solid var(--border); display: flex; flex-direction: column; gap: var(--space-4); } .seo-timeline__node { position: relative; } .seo-timeline__node::before { content: ""; position: absolute; left: calc(-1 * var(--space-5) - 1px); top: 0.35em; width: 9px; height: 9px; border-radius: 50%; background: var(--border); } .seo-timeline__node--due::before { background: var(--accent); } .seo-timeline__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); } .seo-timeline__date { margin-top: 0.15em; font-weight: 560; } /* ---- opportunity detail: key facts strip (competitor-gap pass item 3) ----------- */ .seo-detail__keyfacts { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); } .seo-detail__keyfacts dt { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); } .seo-detail__keyfacts dd { margin: 0; font-weight: 560; } /* ---- opportunity detail: ALL-CAPS procurement-notice callout -------------------- */ .seo-detail__callout { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; } /* ---- opportunity detail: official solicitation and documents ------------------- */ .seo-detail__documents { 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__documents h2 { margin-top: 0; font-size: var(--fs-md); }