/* * Blog-specific styles for the public marketing blog. Loaded alongside marketing.css, whose custom * properties (--bg, --text, --muted, --border, --green, --accent, --focus) and shared structure (.site-header, * .site-footer, .nav) it builds on. Keep this file in the flattened public/ root next to * marketing.css (see the Marketing static-asset layout). */ .blog-body { /* THEME-ADAPTIVE — content pages honour the resolved theme on . DARK is the default (inherits marketing.css's :root dark tokens + the green content accent from its theme-adaptive section); LIGHT re-scopes the tokens white there too. The SHARED chrome (header/footer glass, wordmark, language menu, back-to-top) for the light theme lives in marketing.css so content + pricing share it — this file adds only the .blog-* content styles, all token-driven so they follow the theme automatically. */ background: var(--bg); color: var(--text); min-height: 100vh; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .blog-body { scroll-behavior: auto; } } /* The content area mirrors the nav box (.nav: max-width 1280, padding-inline 24px), so content starts flush with the logo and ends flush with the Sign up button. */ /* Top padding sits HALFWAY between this page's old value and .pricing-main's (pricing.css clamp(6rem, 12vw, 9rem)): pricing opens on a centred hero that wants the full drop, while these pages open straight into an article, a doc sidebar or a card grid, which start reading too far down at that height. Enough to clear the fixed header and feel deliberate, not ceremonial. */ .blog-main { padding: clamp(4rem, 9vw, 6.5rem) 24px 4rem; } /* The fixed header is taller on mobile (the 40px hamburger button) and 9vw falls under the 4rem floor by here, so the first heading / doc sidebar would crowd it. Same breakpoint as pricing. */ @media (max-width: 760px) { .blog-main { padding-top: 5.75rem; } } .blog-container { max-width: 1232px; margin: 0 auto; } .blog-header { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } /* line-height matches .blog-post-title's 1.12 on purpose: both headings are the first thing inside .blog-main, so the body's 1.5 would add ~9px more half-leading above the glyphs here than on a post page and the two would visibly sit at different heights. Keep them in step. */ .blog-heading { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; } .blog-intro { margin-top: 0.75rem; color: var(--muted); font-size: 1.05rem; max-width: 42rem; line-height: 1.6; } .blog-empty { color: var(--muted); font-size: 1.125rem; } /* Category filter pills — each pill is its own cached listing URL */ .blog-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .blog-filter { color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.875rem; font-weight: 500; transition: color 0.15s ease, border-color 0.15s ease; } .blog-filter:hover { color: var(--text); border-color: var(--accent); } .blog-filter.is-active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); } /* Featured (latest) post — a full-width split card above the grid */ .blog-featured { border: 1px solid var(--border); overflow: hidden; background: color-mix(in srgb, var(--panel) 92%, white 8%); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); transition: border-color 0.15s ease; } .blog-featured:hover { border-color: var(--border-hover); } .blog-featured-link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); color: inherit; text-decoration: none; } .blog-featured-media { min-height: 280px; overflow: hidden; } .blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-featured-body { display: flex; flex-direction: column; gap: 0.65rem; padding: clamp(1.5rem, 3vw, 2.25rem); justify-content: center; } .blog-featured-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; } .blog-featured-excerpt { color: var(--muted); font-size: 1rem; line-height: 1.6; } /* The featured body is vertically centered, so its byline sits with the text, not the card edge */ .blog-featured-body .blog-byline { margin-top: 0.25rem; } @media (max-width: 768px) { .blog-featured-link { grid-template-columns: 1fr; } .blog-featured-media { min-height: 0; aspect-ratio: 16 / 9; } } /* Listing grid */ /* NOTE: `.blog-grid`, `.blog-card*`, `.blog-byline*`, and `.blog-avatar*` now live in `marketing.css` — the landing's recent-posts strip renders the SAME card markup, and marketing.css is the one stylesheet both pages load. Only the featured-card variants stay here (blog-only). */ .blog-featured-media.is-placeholder span { font-size: 6rem; } .blog-avatar-large { width: 2.75rem; height: 2.75rem; font-size: 1.15rem; } /* Pagination */ .blog-pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3.5rem); } .blog-page { color: var(--text); text-decoration: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.9rem; } .blog-page:hover { border-color: var(--accent); } .blog-page.is-disabled { opacity: 0.4; pointer-events: none; } .blog-page-status { color: var(--muted); font-size: 0.85rem; } /* Post page — article column with an optional sticky rail. The article anchors LEFT (flush with the nav logo) rather than centering; the rail sits against the container's right edge. */ .blog-post-layout { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; } /* Standalone pages (terms-of-use, privacy-policy) span the full container width — no article cap. */ .blog-post-layout.is-full-width { max-width: none; } @media (min-width: 1024px) { .blog-post-layout.has-rail { max-width: none; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2rem, 4vw, 4rem); } .blog-post-layout.has-rail .blog-post-main { max-width: 760px; width: 100%; } } /* Once the container outgrows article + gap + rail, the surplus is dead gutter between the two columns (the article is capped at 760px and anchors left). Spend it on the rail, so previous/next titles and deep TOC entries stop wrapping — at 1024px there is no surplus yet, hence the two tiers. */ @media (min-width: 1280px) { .blog-post-layout.has-rail { grid-template-columns: minmax(0, 1fr) 320px; } } .blog-post-header { margin-bottom: 2rem; } /* Sits UNDER the title, so it spaces itself off the heading above rather than the element below (the header's own margin-bottom already separates it from the hero/body). */ .blog-post-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; color: var(--muted); font-size: 0.875rem; margin-top: 0.85rem; } /* "Also available in …" — sits directly under the byline eyebrow. Every post is translated into all 11 locales, so this line carries 10 language names and has to fit the 760px article column: hence the short lead-in (content::content.available_in) and a notch below the eyebrow's 0.875rem. It is secondary metadata, so reading smaller than the byline above it is correct, not a compromise. Narrower than ~1024px the column shrinks with the viewport and it wraps — pretty keeps the last line off a lone orphan word. */ .blog-post-translations { margin-top: 0.6rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; text-wrap: pretty; } /* Accent colour carries the affordance, underline only on hover — the same contract as .blog-post-category directly above it and .blog-rail-link, so the two links in the byline block read as one family. (Underlined-at-rest is the .blog-post-body convention, for links inside running prose; this line is metadata, not prose.) */ .blog-post-translation-link { color: var(--accent); text-decoration: none; } .blog-post-translation-link:hover { text-decoration: underline; text-underline-offset: 0.2em; } .blog-post-title { font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 750; letter-spacing: -0.02em; line-height: 1.12; } .blog-post-hero { margin: 2rem 0; border: 1px solid var(--border); } .blog-post-hero img { width: 100%; height: auto; display: block; } /* The sticky "On this page" outline */ .blog-post-rail { display: none; } @media (min-width: 1024px) { .blog-post-rail { display: block; } } /* The sticky rail stack: previous/next article, share, table of contents */ .blog-rail { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; display: flex; flex-direction: column; gap: 1.75rem; font-size: 0.875rem; } .blog-rail-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.5rem; } .blog-rail-link { display: block; color: var(--text); font-weight: 600; line-height: 1.35; text-decoration: none; } .blog-rail-link:hover { text-decoration: underline; text-underline-offset: 3px; } .blog-outline ul { list-style: none; margin: 0; padding: 0; counter-reset: section; } .blog-outline-item + .blog-outline-item { margin-top: 0.5rem; } .blog-outline-item a { color: var(--muted); text-decoration: none; display: block; line-height: 1.4; } .blog-outline-item a:hover { color: var(--text); } /* Numbered entries: h2s count 1..n, h3s nest as n.m under their section */ .blog-outline-item.is-level-2 { counter-increment: section; counter-reset: subsection; } .blog-outline-item.is-level-2 > a::before { content: counter(section) '.'; color: var(--text); font-weight: 600; margin-right: 0.6rem; } .blog-outline-item.is-level-3 { counter-increment: subsection; padding-left: 0.9rem; } .blog-outline-item.is-level-3 > a::before { content: counter(section) '.' counter(subsection); color: var(--text); font-weight: 600; margin-right: 0.6rem; } /* Scroll-spy: the section currently under the header (set by marketing.js). Uses the same dark-grey emphasis as :hover (--text), not the brand accent. */ .blog-outline-item.is-active > a { color: var(--text); font-weight: 600; } .blog-outline-item.is-active > a::before { color: var(--text); } /* Rendered markdown body */ .blog-post-body { font-size: 1.075rem; line-height: 1.75; color: color-mix(in srgb, var(--text) 92%, var(--muted) 8%); } .blog-post-body > * + * { margin-top: 1.25rem; } .blog-post-body h2 { font-size: 1.6rem; font-weight: 700; margin-top: 2.5rem; letter-spacing: -0.01em; } .blog-post-body h3 { font-size: 1.3rem; font-weight: 650; margin-top: 2rem; } /* Anchored headings land clear of the viewport top when jumped to from the outline */ .blog-post-body h2, .blog-post-body h3 { scroll-margin-top: 5.5rem; } .blog-post-body a { color: var(--accent); text-underline-offset: 2px; } .blog-post-body ul, .blog-post-body ol { padding-left: 1.5rem; } .blog-post-body li + li { margin-top: 0.4rem; } .blog-post-body blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; color: var(--muted); font-style: italic; } .blog-post-body pre { /* Code blocks stay dark in both themes — the explicit light text keeps them readable now that the surrounding --text token is dark. */ background: #05010f; color: #f0f6fc; border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; overflow-x: auto; font-size: 0.9rem; } .blog-post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; } .blog-post-body :not(pre) > code { background: color-mix(in srgb, var(--border) 40%, transparent); padding: 0.1em 0.35em; border-radius: 5px; } .blog-post-body img { max-width: 100%; height: auto; border-radius: 10px; } .blog-post-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .blog-post-body th, .blog-post-body td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; } /* Tags */ .blog-post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 3rem; } .blog-tag { color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.85rem; } .blog-tag:hover { border-color: var(--accent); color: var(--text); } /* Post footer — author card + share buttons */ .blog-post-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .blog-author-card { display: flex; align-items: center; gap: 0.85rem; } .blog-author-card-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .blog-author-card-name { font-weight: 650; } .blog-share { display: flex; gap: 0.5rem; } .blog-share-link { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); transition: color 0.15s ease, border-color 0.15s ease; } .blog-share-link:hover { color: var(--text); border-color: var(--accent); } /* Keep reading */ .blog-related { margin-top: clamp(3rem, 6vw, 4.5rem); } .blog-related-heading { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1.5rem; } /* The current section (Docs/Blog) in the top nav — full text colour + bold so it reads as clearly active (no accent colour). Overrides the base .nav-item hover-dim on the active one. */ .nav-item.is-active, .nav-item.is-active:hover { color: var(--text); font-weight: 700; } /* Documentation — Mintlify-style three columns: sidebar · content · on-this-page. Collapses to sidebar+content (≥768px) and a single column (mobile). */ .doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (min-width: 768px) { .doc-layout { grid-template-columns: 250px minmax(0, 1fr); } } @media (min-width: 1100px) { .doc-layout.has-toc { grid-template-columns: 250px minmax(0, 1fr) 220px; } } .doc-sidebar { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; border-right: 1px solid var(--border); padding-right: 1rem; } .doc-sidebar-title { padding: 0 0.5rem; margin-bottom: 0.85rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); } .doc-nav-list, .doc-nav-sublist { list-style: none; margin: 0; padding: 0; } .doc-nav-sublist { margin: 0.35rem 0 0.5rem 0.75rem; border-left: 1px solid var(--border); } .doc-nav-item { margin-bottom: 0.5rem; } .doc-nav-link { display: block; padding: 0.25rem 0.5rem; color: var(--muted); text-decoration: none; border-radius: 6px; font-size: 0.925rem; } .doc-nav-link:hover { color: var(--text); background: color-mix(in srgb, var(--border) 30%, transparent); } .doc-nav-link.is-current { color: color-mix(in srgb, var(--accent) 70%, var(--text)); font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); } .doc-nav-sublink { font-size: 0.875rem; } /* Content column — capped for a comfortable measure even when the middle grid track is wide. */ .doc-main { min-width: 0; max-width: 760px; } .doc-breadcrumb { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--muted); } .doc-breadcrumb a { color: var(--muted); text-decoration: none; } .doc-breadcrumb a:hover { color: var(--text); } .doc-breadcrumb-sep { opacity: 0.5; } .doc-breadcrumb-current { color: var(--text); } .doc-header { margin-bottom: 2rem; } /* Title on the left, the "Copy page for LLMs" control top-right. Wraps on narrow screens. */ .doc-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .doc-lede { margin-top: 0.85rem; color: var(--muted); font-size: 1.15rem; line-height: 1.6; } /* "Copy page for LLMs" split control — a copy button + a chevron opening a small menu. */ .doc-actions { position: relative; display: inline-flex; flex: none; margin-top: 0.35rem; } .doc-actions-copy, .doc-actions-toggle { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 0.85rem; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .doc-actions-copy { padding: 0.5rem 0.75rem; border-radius: 8px 0 0 8px; font-weight: 500; } .doc-actions-toggle { padding: 0.5rem 0.5rem; border-radius: 0 8px 8px 0; border-left: none; color: var(--muted); } .doc-actions-copy:hover, .doc-actions-toggle:hover, .doc-actions-toggle[aria-expanded='true'] { border-color: var(--border-hover); background: var(--hero-bg); color: var(--text); } .doc-actions-copy.is-copied { border-color: var(--accent); color: var(--accent); } .doc-actions-ico { flex: none; color: var(--muted); } .doc-actions-copy:hover .doc-actions-ico, .doc-actions-copy.is-copied .doc-actions-ico { color: currentColor; } .doc-actions-menu { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 260px; padding: 0.35rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); box-shadow: 0 12px 34px rgba(31, 35, 40, 0.18); } /* The [hidden] attribute is authoritative (more specific than the flex base rule above). */ .doc-actions-menu[hidden] { display: none; } .doc-actions-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.65rem; border: none; border-radius: 7px; background: none; font: inherit; text-align: left; text-decoration: none; color: var(--text); cursor: pointer; } .doc-actions-item:hover { background: var(--hero-bg); } .doc-actions-item-title { font-size: 0.9rem; font-weight: 600; } .doc-actions-item-hint { font-size: 0.78rem; color: var(--muted); } /* Previous / next pager at the foot of a doc page. */ .doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .doc-pager-link { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1.15rem; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: border-color 0.15s ease; } .doc-pager-link:hover { border-color: var(--accent); } .doc-pager-link.is-next { text-align: right; } .doc-pager-label { font-size: 0.78rem; color: var(--muted); } .doc-pager-link.is-prev .doc-pager-label::before { content: '← '; } .doc-pager-link.is-next .doc-pager-label::after { content: ' →'; } .doc-pager-title { font-weight: 600; color: var(--text); } /* The right "On this page" rail — reuses .blog-outline (counters + scroll-spy in marketing.js). sticky lives on the grid item itself (like .doc-sidebar), NOT on .doc-toc-inner: under the grid's align-items:start the .doc-toc item collapses to its content height, so a sticky child inside it would have no room to travel and never stick. */ .doc-toc { display: none; } @media (min-width: 1100px) { .doc-toc { display: block; position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; font-size: 0.85rem; } } @media (max-width: 767px) { .doc-sidebar { position: static; max-height: none; overflow: visible; border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 1rem; } .doc-pager { grid-template-columns: 1fr; } }