/* extras.css — supplemental styles for blog pages, about, and docs. Linked only on pages that use these classes. Do not duplicate styles.css. */ /* ============================================================ BLOG INDEX */ /* The post list reuses .post-list / .post-row / .post-title / .post-date / .post-excerpt from styles.css. Only the index intro needs extra styling. */ .blog-intro { max-width: var(--max-prose); margin: 0 auto; padding: clamp(48px,7vw,88px) var(--pad-x) 0; } .blog-intro .blog-kicker { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 20px; } .blog-intro h1 { font-family: var(--serif); font-size: clamp(2rem,4.5vw,3.25rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 16px; } .blog-intro .blog-lede { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-mid); max-width: 60ch; } .blog-wrap { max-width: var(--max-prose); margin: 0 auto; padding: 2.5rem var(--pad-x) 5rem; } /* index rows carry a category eyebrow above the title; title + excerpt stack in the content cell */ .post-cat { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; } .post-row .post-title { display: block; } .post-row .post-date { display: block; } /* ============================================================ ABOUT — BACKER LOGOS + CES LINE */ .backer-strip { display: flex; align-items: center; justify-content:center; gap: clamp(1.4rem,3vw,2rem); flex-wrap: wrap; margin-top: 0.4rem; overflow: hidden; max-width: 100%; } .backer-item { display: flex; align-items: center; } .backer-item img { height: 24px; width: auto; display: block; opacity: 1; filter: brightness(0) invert(1); transition: opacity 0.2s ease; } .backer-item img:hover { opacity: 1; } .about-recognition { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; } .about-recognition .rec-badge { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--rule); padding: 4px 8px; border-radius: 2px; } .about-recognition .rec-text { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-mid); } /* ============================================================ DOCS — INTEGRATIONS */ .intg-grid { display: flex; flex-direction: column; gap: 0; margin: 1rem 0 1.5rem; } .intg-item { padding: 1.4rem 0; border-top: 1px solid var(--rule); } .intg-item:last-child { border-bottom: 1px solid var(--rule); } .intg-item h3 { margin-top: 0; } .intg-item p { margin-bottom: 0.6rem; } /* per-logo optical sizing (uniform height looked uneven) */ .backer-item img[src*="motivate"] { height: 32px; } .backer-item img[src*="communitech"] { height: 12px; } .backer-item img[src*="a16z"] { height: 30px; } .backer-item img[src*="plugandplay"] { height: 21px; object-fit:contain; } .backer-item img[src*="techstars"] { height: 23px; } .ab-close { margin-top: clamp(150px,21vh,270px) !important; max-width:62ch; margin-left:auto; margin-right:auto; text-align:center; } /* optical: collapse each logo box to its measured ink so VISUAL gaps are even */ .backer-item:has(img[src*="techstars"]) { margin-left:-3px; margin-right:-3px; } .backer-item:has(img[src*="a16z"]) { margin-left:-4px; margin-right:-4px; } .backer-item:has(img[src*="plugandplay"]) { margin-left:-1px; margin-right:-28px; } .backer-item:has(img[src*="motivate"]) { margin-left:-20px; margin-right:-20px; } .backer-item:has(img[src*="communitech"]) { margin-left:-2px; margin-right:-2px; } /* === unlisted-pages visual pass 2026-06-30 === */ /* ── A) TYPOGRAPHY DENSITY ───────────────────────────────────────────────── Build steps + feature cards: add breathing room below headings. (styles.css sets margin-bottom:9px on both selectors) */ .build-body h3, .feature-card h3 { margin-bottom: 16px; } /* Article body heading + paragraph rhythm. styles.css: h2 margin:3.5rem 0 0.75rem; h3 margin:2.5rem 0 0.75rem; p 1.5rem */ .article-body h2 { margin-bottom: 1.15rem; } .article-body h3 { margin-bottom: 1rem; } .article-body p { margin-bottom: 1.75rem; } /* Belief-marker kicker: render as its own line above the sentence. styles.css has it inline (no display rule). Adding display:block + gap reads as a clear eyebrow rather than a run-on prefix. */ .belief-marker { display: block; margin-bottom: 14px; letter-spacing: 0.20em; opacity: 0.65; } /* ── B) ILLUSTRATIONS — full-row SVG diagram size ────────────────────────── Diagrams are bare
elements with inline style="max-width:680px". !important is required to beat inline specificity. All checked pages use full-row (not side-by-side) layouts, so this is safe. 2026-06-30: reduced ~30% (920px -> 644px) per operator — illustrations were running too large. width:100% keeps them responsive; revert to 920px to restore the prior enlarged size. */ main figure { max-width: 644px !important; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: clamp(28px,4vw,44px) !important; } main figure > svg { width: 100%; height: auto; display: block; } /* CAPTION SPACING (2026-06-30): every
on these pages carries an inline style="margin:clamp(30px,4.4vw,48px) 0 6px; ..." (34 instances, site-wide, identical) that leaves only 6px below the figure -- plus the figcaption's own 14px margin-top, ~20px total -- before whatever follows (almost always a feature-grid/build-grid with no margin-top of its own), so the caption text butted directly against the next block. Inline styles beat class selectors, so !important is required here too (same reason the max-width rule above needs it). */ /* ── C) FOOTER BACKGROUND TRANSITION ──────────────────────────────────────── section#access is the last content section on MOST unlisted pages — but NOT all: addressee-detection-vs-vad, -vs-noise-suppression, pre-asr-gating and voice-ai-false-triggers all have a #related "compare other layers" section AFTER #access. Painting #access unconditionally put a hard-edged teal band (#17282b) in the MIDDLE of those pages (FAQ -> teal #access -> hard cut back to black #related -> footer) — a flat color block with no gradient on either edge. That is the "completely off" transition. :last-of-type scopes the repaint to ONLY the section that is actually last before the footer, so it self-corrects per page: on the 24 pages where #access really is last, behavior is unchanged (still gets the teal->black .ft::after fade). On the 4 pages above, #access no longer matches (it isn't last), so it — and #related after it — stay the page's plain dark #0f1619, which is exactly research.html's recipe: no special color at all, just a seamless dark section that the global .ft::after gradient (HARDENED UNIVERSAL FOOTER BLEND, styles.css) fades into the footer black on its own. No per-page markup change needed. */ section#access:last-of-type { background: #17282b; } /* ── D) DEFENSIVE LOGO HARDENING ───────────────────────────────────────── Prevent global img{max-width:100%} from squishing the navbar wordmark in tight flex containers on any unlisted page. */ .wordmark-img, .wm { max-width: none; flex: 0 0 auto; height: 22px; width: auto; } /* Keep footer wordmark at its intended smaller size (0-2-0 specificity in styles.css would already hold, but explicit here for clarity). */ .footer-wordmark .wm { height: 18px; } /* belief mobile fix (beats extras .belief-marker display:block): hide marker + full-width text */ @media (max-width: 960px){ .belief-marker{display:none !important;} .belief-text{grid-column:1 !important; max-width:100% !important;} } /* caption/figure bottom spacing so captions do not butt the next section */ main figure, .article-body figure, figure.fig { margin-bottom: clamp(30px,4.5vw,52px); } figure figcaption, .article-body figcaption, figcaption { margin-bottom: clamp(14px,2vw,22px); }