/* --------------------------------------------------------------------------- * Individual blog posts, laid out like elevenlabs.io/blog/ (from its HAR, 2026-10-15). * Scoped to post pages only (body:has(#blog-post-hero)); every other page is untouched. * Text colours are never changed (owner rule) — only layout, spacing and type scale. * * ElevenLabs Here * article grid: [calc(50%-25rem) 1fr calc(50%-25rem)] at ≥1280px, 800px reading column * header (breadcrumb, h1, meta) in the column hero card → plain header, left-aligned, same column * TOC: left gutter, max 340px, pr 48 (64 ≥1536), sticky top 112px, 14px/18px, 18px gaps, * dashed "ladder" rail 12px wide at pl 40px, active section marked on the rail * body: 17px / 30px (lg-loose), blocks 32px apart, h2 32/36 mt 80, h3 24/32 mt 56 * ------------------------------------------------------------------------ */ /* Hero card: each post's own thumbnail gradient (owner, 2026-10-15). Rendered from the thumbnail kit (cards-v2 field + bands, same seed) into /cdn/buildout/blog-hero-bg/.webp. No light streaks in the hero (owner). */ body:has(#blog-post-hero) #blog-post-hero > div { background-position: center; background-size: cover; background-repeat: no-repeat; } html:has(link[rel="canonical"][href$="/blog/after-hours-lead-response"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/after-hours-lead-response.webp"); } html:has(link[rel="canonical"][href$="/blog/ai-voice-agents"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/ai-voice-agents.webp"); } html:has(link[rel="canonical"][href$="/blog/ai-voice-agents-for-clinics"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/ai-voice-agents-for-clinics.webp"); } html:has(link[rel="canonical"][href$="/blog/ai-voice-agents-for-recruiting-agencies"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/ai-voice-agents-for-recruiting-agencies.webp"); } html:has(link[rel="canonical"][href$="/blog/analytics-dashboard"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/analytics-dashboard.webp"); } html:has(link[rel="canonical"][href$="/blog/api-dev-portal"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/api-dev-portal.webp"); } html:has(link[rel="canonical"][href$="/blog/best-tools-entrepreneurs"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/best-tools-entrepreneurs.webp"); } html:has(link[rel="canonical"][href$="/blog/bilingual-english-urdu-voice-agents"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/bilingual-english-urdu-voice-agents.webp"); } html:has(link[rel="canonical"][href$="/blog/call-script-and-follow-up-templates"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/call-script-and-follow-up-templates.webp"); } html:has(link[rel="canonical"][href$="/blog/confirmation-calls-no-shows"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/confirmation-calls-no-shows.webp"); } html:has(link[rel="canonical"][href$="/blog/contacts-tips"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/contacts-tips.webp"); } html:has(link[rel="canonical"][href$="/blog/getting-started-link-sharing"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/getting-started-link-sharing.webp"); } html:has(link[rel="canonical"][href$="/blog/install-website-voice-widget"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/install-website-voice-widget.webp"); } html:has(link[rel="canonical"][href$="/blog/invoices"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/invoices.webp"); } html:has(link[rel="canonical"][href$="/blog/knowledge-base-for-voice-agents"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/knowledge-base-for-voice-agents.webp"); } html:has(link[rel="canonical"][href$="/blog/mcp-server"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/mcp-server.webp"); } html:has(link[rel="canonical"][href$="/blog/meeting-notes-teams-read"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/meeting-notes-teams-read.webp"); } html:has(link[rel="canonical"][href$="/blog/meeting-packages"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/meeting-packages.webp"); } html:has(link[rel="canonical"][href$="/blog/new-cypherlm"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/new-cypherlm.webp"); } html:has(link[rel="canonical"][href$="/blog/pay-at-booking"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/pay-at-booking.webp"); } html:has(link[rel="canonical"][href$="/blog/payment-links"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/payment-links.webp"); } html:has(link[rel="canonical"][href$="/blog/pre-meeting-briefs"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/pre-meeting-briefs.webp"); } html:has(link[rel="canonical"][href$="/blog/stripe-integration"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/stripe-integration.webp"); } html:has(link[rel="canonical"][href$="/blog/take-payments-on-calls"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/take-payments-on-calls.webp"); } html:has(link[rel="canonical"][href$="/blog/top-zapier-automations"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/top-zapier-automations.webp"); } html:has(link[rel="canonical"][href$="/blog/voice-agent-vs-call-centre-ivr-chatbot"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/voice-agent-vs-call-centre-ivr-chatbot.webp"); } html:has(link[rel="canonical"][href$="/blog/voice-agents-for-schools-and-nonprofits"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/voice-agents-for-schools-and-nonprofits.webp"); } html:has(link[rel="canonical"][href$="/blog/voice-ai-for-accounting-firms"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/voice-ai-for-accounting-firms.webp"); } html:has(link[rel="canonical"][href$="/blog/voice-ai-security-checklist"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/voice-ai-security-checklist.webp"); } html:has(link[rel="canonical"][href$="/blog/what-is-notetaker"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/what-is-notetaker.webp"); } html:has(link[rel="canonical"][href$="/blog/whats-new-cypher-lm-october-2026"]) #blog-post-hero > div { background-image: url("/cdn/buildout/blog-hero-bg/whats-new-cypher-lm-october-2026.webp"); } /* Hero text: measured on all 31 posts (desktop + phone) by sampling each post's own gradient behind the title, intro and author line — dark navy gives the best contrast everywhere (lowest 4.0:1 on the large titles of the royal-blue posts; 5.2:1+ elsewhere). Owner, 2026-10-15: always readable. */ body:has(#blog-post-hero) #blog-post-hero :is(h1, h1 + p, h1 ~ div, h1 ~ div span) { color: #071a31; text-shadow: none; } body:has(#blog-post-hero) #blog-post-hero span[aria-hidden="true"].bg-divider { background: rgb(7 26 49 / 0.25); } /* ── Body typography (lg-loose rhythm) ── */ body:has(#blog-post-hero) article { --blog-lh: 1.75rem; --blog-fs: 1rem; } body:has(#blog-post-hero) article div.type-body-md { font-size: var(--blog-fs); line-height: var(--blog-lh); } body:has(#blog-post-hero) article div.type-body-md > :is(p, ul, ol, blockquote, table, figure, div) { margin-top: calc(32 / 30 * var(--blog-lh)); margin-bottom: 0; } body:has(#blog-post-hero) article div.type-body-md > :first-child { margin-top: 0; } body:has(#blog-post-hero) article div.type-body-md > :is(p, ul, ol, li) { font-size: inherit; line-height: inherit; text-wrap: pretty; } body:has(#blog-post-hero) article div.type-body-md > h2 { margin-top: calc(80 / 30 * var(--blog-lh)); margin-bottom: 0; font-size: 1.625rem; line-height: 2rem; letter-spacing: -0.02em; } body:has(#blog-post-hero) article div.type-body-md > h3 { margin-top: calc(56 / 30 * var(--blog-lh)); margin-bottom: 0; font-size: 1.375rem; line-height: 2rem; letter-spacing: -0.015em; } body:has(#blog-post-hero) article div.type-body-md > h2 + :is(p, ul, ol) { margin-top: calc(24 / 30 * var(--blog-lh)); } body:has(#blog-post-hero) article div.type-body-md > h3 + :is(p, ul, ol) { margin-top: calc(20 / 30 * var(--blog-lh)); } body:has(#blog-post-hero) article div.type-body-md > :is(ul, ol) li + li { margin-top: calc(8 / 30 * var(--blog-lh)); } @media (min-width: 40rem) { body:has(#blog-post-hero) { --blog-gutter: 40px; } body:has(#blog-post-hero) article { --blog-lh: 1.875rem; --blog-fs: 1.0625rem; } body:has(#blog-post-hero) article div.type-body-md > h2 { font-size: 2rem; line-height: 2.25rem; } body:has(#blog-post-hero) article div.type-body-md > h3 { font-size: 1.5rem; line-height: 2rem; } } /* ── Wide screens: ElevenLabs' three-column grid, TOC in the left gutter ── */ @media (min-width: 80rem) { body:has(#blog-post-hero) { --blog-gutter: 64px; } body:has(#blog-post-hero) div:has(> article):has(aside button[aria-label$="table of contents" i]) { display: grid; grid-template-columns: calc(50% - 25rem + 4rem) minmax(0, 1fr) calc(50% - 25rem - 4rem); align-items: start; max-width: none; width: 100%; gap: 0; padding-inline: 0; } body:has(#blog-post-hero) div:has(> article) > article { grid-column: 2; grid-row: 1; width: 100%; max-width: 50rem; } body:has(#blog-post-hero) aside:has(button[aria-label$="table of contents" i]) { grid-column: 1; grid-row: 1; justify-self: end; width: 100%; max-width: 21.25rem; padding-right: 3rem; position: sticky; /* Locks below the site header + blog menu bar with breathing room (never touching the bar). */ top: calc(var(--header-height, 69px) + var(--blog-nav-height, 53px) + 2.5rem); padding-left: 2.5rem; /* off the window edge */ } /* All three sidebar blocks stay: contents (with its collapse/expand header), promo card, share links. */ body:has(#blog-post-hero) nav[aria-label="Table of contents"] { position: relative; max-height: none; overflow: visible; gap: 1.125rem; /* mt-4.5 between items */ padding: 0 0 0 2.5rem; /* pl-10 */ margin-top: -0.21875rem; } /* The dashed rail. */ body:has(#blog-post-hero) nav[aria-label="Table of contents"]::before { content: ""; position: absolute; top: 0.53125rem; bottom: 0; left: 0; width: 0.75rem; background-image: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.1) 0, rgb(0 0 0 / 0.1) 0.0625rem, transparent 0.0625rem, transparent 0.375rem); } body:has(#blog-post-hero) nav[aria-label="Table of contents"] > div > div { gap: 0; position: relative; } body:has(#blog-post-hero) nav[aria-label="Table of contents"] > div > div > span[aria-hidden] { display: none; } body:has(#blog-post-hero) nav[aria-label="Table of contents"] a { font-size: 0.875rem; line-height: 1.125rem; font-weight: 400; opacity: 0.62; /* quieter list; the colour itself is unchanged */ transition: opacity 0.15s ease; } body:has(#blog-post-hero) nav[aria-label="Table of contents"] a:hover, body:has(#blog-post-hero) nav[aria-label="Table of contents"] a.is-active { opacity: 1; } /* Active section: a solid tick on the rail beside it (set by blog-toc.js). */ body:has(#blog-post-hero) nav[aria-label="Table of contents"] a.is-active::before { content: ""; position: absolute; left: -2.5rem; top: 0.53125rem; width: 0.75rem; height: 0.125rem; border-radius: 1px; background: currentColor; } } @media (min-width: 96rem) { body:has(#blog-post-hero) aside:has(button[aria-label$="table of contents" i]) { padding-right: 4rem; } } /* List items read with the same 30px rhythm as paragraphs. */ body:has(#blog-post-hero) article div.type-body-md li { font-size: inherit; line-height: inherit; }