/* ============================================================================ Public pages — /docs and /why. ============================================================================ SCOPE CONTRACT -------------- This file owns the visual language for the documentation and marketing sub-pages — every page that lives behind the public chrome but is NOT the cinematic landing page (which keeps its own design in landing.css). The landing page is a single one-screen narrative; these pages are reading surfaces, with sticky navigation, prose columns and inline code samples. Different jobs, different rules. WHY RESTATED (NOT `.tz-home`) ----------------------------- A handful of landing rules in landing.css (e.g. `.tz-home .tz-card` near line 468 and `.tz-home > *` near 668) are scoped to a `.tz-home` ancestor class. We could have made public pages opt into that ancestor, but two reasons we did not: 1. landing.css's `.tz-home` rules are paired with landing-only concerns — the ambient hairline backdrop, the hero particle field, the section rail, the calculator grid. None of those belong on /why or /docs. Reusing the class would mean either carrying unused rules or stripping them, and either way the class would no longer mean "landing". 2. /why and /docs/* are not a different *version* of the landing page — they are a different *surface*. Wrapping them in `
` is conceptually wrong and a future contributor will reasonably ask why a docs sub-page has a "home" ancestor. So this file restates what /why and /docs/* need, in their own vocabulary (`.tz-doc__*`), and draws entirely from the same `--color-*` / `--lum-*` tokens landing.css draws from. Both files share the same palette by construction; they do not share rules. COLOUR CONTRACT --------------- Same as landing.css: no colour is defined here. Every value is a `rgb(var(--color-*))` reference, an `--lum-*` material, or an alpha'd border derived from the foreground token. Inverting the theme is the `data-theme` attribute on ; this file has no opinion on that. */ .tz-doc { /* The two-column shell's prose column caps at ~72ch by design — wider reads as a billboard, narrower as a column of legalese. The sidebar and the gutter are subtracted from the container; the prose itself sets the actual line length so we never depend on the sidebar being a specific width. */ --tz-doc-prose-max: 72ch; --tz-doc-sidebar-w: 232px; --tz-doc-gutter: clamp(28px, 4vw, 56px); /* THE PAGE CONTAINER. The header (`.tz-doc__header`) and the shell (`.tz-doc__shell`) are siblings inside `.tz-doc`. They share this container's horizontal padding and max-width so the kicker pill, the H1, the sidebar and the prose all line up on the same left edge. Before this, only the shell carried its own container geometry; the header was full-bleed and the H1 sat at x=0 with the sidebar starting at x=51px — visibly broken. Fixing it in one place here means each page doesn't have to opt in. */ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); /* Defeat flex-item automatic minimum size — same reasoning as `.tz-home` in landing.css. Without `min-width: 0`, an inline code line would push the page wider than the viewport. */ min-width: 0; } /* ============================================================================ Header — publicHeader(). Kicker pill + display title + lede paragraph, plus an actions slot on the right. The title is the page's canonical

. One per page, never skipped. ========================================================================== */ .tz-doc__header { display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 20px); align-items: flex-start; max-width: var(--tz-doc-prose-max); margin-bottom: clamp(28px, 4vw, 52px); } .tz-doc__kicker { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: var(--lum-radius-pill); background: linear-gradient(180deg, var(--lum-satin-from) 0%, var(--lum-satin-to) 100%); border: 1px solid var(--lum-satin-border); box-shadow: var(--lum-satin-shadow); font-family: 'Public Sans', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(var(--color-on-surface-variant)); align-self: flex-start; } /* The title is the page's

and the visual anchor of the page. Smaller than the landing hero (which is a one-screen composition) and bigger than the section h2 in landing.css (which sits inside a section, not at the top of one). */ .tz-doc__title { font-family: 'Public Sans', system-ui, sans-serif; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; font-weight: 600; letter-spacing: -0.028em; margin: 0; max-width: 22ch; text-wrap: balance; color: rgb(var(--color-on-surface)); } .tz-doc__lede { font-family: 'Public Sans', system-ui, sans-serif; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; color: rgb(var(--color-on-surface-variant)); margin: 0; max-width: 58ch; text-wrap: pretty; } .tz-doc__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } /* ============================================================================ Section frame for sub-pages that need one (e.g. /why). A 1px top hairline separates sections on the same page. The first section has no border, so the page never leads with a divider. ========================================================================== */ .tz-doc__section { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid rgb(var(--color-border-subtle) / 0.08); } .tz-doc__section:first-child, .tz-doc__section:first-of-type { border-top: 0; padding-top: clamp(28px, 3.5vw, 48px); } .tz-doc__section-head { display: flex; flex-direction: column; gap: clamp(12px, 1.3vw, 18px); margin-bottom: clamp(24px, 3.2vw, 44px); max-width: var(--tz-doc-prose-max); } .tz-doc__h2 { font-family: 'Public Sans', system-ui, sans-serif; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -0.024em; margin: 0; max-width: 24ch; text-wrap: balance; color: rgb(var(--color-on-surface)); } .tz-doc__h2 em { font-style: normal; color: rgb(var(--color-on-surface-variant)); } /* ============================================================================ docShell() — two-column reading layout. Wide: a sticky sidebar listing the docs sub-routes, plus a prose column to the right. Below 900px: the sidebar becomes a horizontal scroller above the body. Below 480px: the prose column stops fighting the viewport and uses a fluid gutter. ========================================================================== */ .tz-doc__shell { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 36px); /* Horizontal padding and max-width live on `.tz-doc` now — the shell is full-width inside it. We keep the vertical padding here so the gap between the header (above) and the shell (below) is owned by one place rather than split between the two. */ padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); align-items: start; } @media (min-width: 900px) { .tz-doc__shell { grid-template-columns: var(--tz-doc-sidebar-w) minmax(0, 1fr); gap: var(--tz-doc-gutter); } } /* The sidebar. `position: sticky` keeps the nav in view as the reader scrolls a long guide, but only as long as the surrounding shell hasn't ended — a sticky element would otherwise pin to the viewport and overlap the footer. The 56px top offset clears the public header. */ .tz-doc__sidebar { display: flex; flex-direction: column; gap: 8px; min-width: 0; } @media (min-width: 900px) { .tz-doc__sidebar { position: sticky; top: clamp(20px, 3vw, 36px); /* Stay within the shell's column rather than stretching to the footer. */ align-self: start; } } @media (max-width: 899px) { /* Below the breakpoint the sidebar becomes a horizontal scroller. */ .tz-doc__sidebar { flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; /* A hairline at the bottom so the scroller reads as one row, not as links drifting in the page body. */ border-bottom: 1px solid rgb(var(--color-border-subtle) / 0.08); scrollbar-width: thin; scrollbar-color: rgb(var(--color-border-subtle) / 0.25) transparent; } .tz-doc__sidebar::-webkit-scrollbar { height: 6px; } .tz-doc__sidebar::-webkit-scrollbar-thumb { background: rgb(var(--color-border-subtle) / 0.20); border-radius: var(--lum-radius-pill); } } .tz-doc__sidebar-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; color: rgb(var(--color-on-surface-ghost)); padding: 0 12px 4px; flex-shrink: 0; } @media (min-width: 900px) { .tz-doc__sidebar-label { padding: 0 0 4px; } } .tz-doc__nav { display: flex; flex-direction: column; gap: 1px; min-width: 0; } @media (max-width: 899px) { .tz-doc__nav { flex-direction: row; } } .tz-doc__nav-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--lum-radius-sm); color: rgb(var(--color-on-surface-variant)); font-family: 'Public Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: background var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease); } @media (min-width: 900px) { /* Wider on the desktop sidebar so the label has air around it. */ .tz-doc__nav-link { padding: 0.5rem 0.75rem; font-size: 14px; } } .tz-doc__nav-link:hover, .tz-doc__nav-link:focus-visible { background: rgb(var(--color-on-surface) / 0.05); color: rgb(var(--color-on-surface)); outline: none; } .tz-doc__nav-link[aria-current="page"] { background: rgb(var(--color-on-surface) / 0.08); color: rgb(var(--color-on-surface)); font-weight: 600; } @media (max-width: 899px) { /* Current marker on the horizontal scroller is a primary pill, not a tinted background — the row is one long line, a background tint looks like a column-misalignment bug. */ .tz-doc__nav-link[aria-current="page"] { background: linear-gradient(180deg, var(--lum-primary-satin-from) 0%, var(--lum-primary-satin-to) 100%); border-color: var(--lum-primary-satin-border); color: var(--lum-primary-satin-label); box-shadow: var(--lum-primary-satin-shadow); } } /* Prose column. The actual reading width is bounded by prose(), below — this class only owns the shell slot. */ .tz-doc__body { min-width: 0; max-width: 100%; } @media (min-width: 900px) { .tz-doc__body { max-width: var(--tz-doc-prose-max); } } /* ============================================================================ prose() — long-form reading styles. One wrapper that owns h2/h3/p/ul/ol/code/a inside it. Guide pages stop styling every element inline; this single class is the whole reading typography. ~72ch measure; 1.65–1.7 line-height for body text. ========================================================================== */ .tz-doc__prose { font-family: 'Public Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.66; color: rgb(var(--color-on-surface)); max-width: var(--tz-doc-prose-max); } .tz-doc__prose > * + * { margin-top: 1.1em; } .tz-doc__prose h2 { font-family: 'Public Sans', system-ui, sans-serif; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; font-weight: 600; letter-spacing: -0.018em; color: rgb(var(--color-on-surface)); margin: 2em 0 0.6em; max-width: 28ch; text-wrap: balance; scroll-margin-top: clamp(80px, 8vw, 120px); } .tz-doc__prose h2:first-child { margin-top: 0; } .tz-doc__prose h3 { font-family: 'Public Sans', system-ui, sans-serif; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; color: rgb(var(--color-on-surface)); margin: 1.6em 0 0.5em; scroll-margin-top: clamp(80px, 8vw, 120px); } .tz-doc__prose p { margin: 0; max-width: var(--tz-doc-prose-max); } .tz-doc__prose ul, .tz-doc__prose ol { padding-left: 1.25em; margin: 0; } .tz-doc__prose ul { list-style: disc; } .tz-doc__prose ol { list-style: decimal; } .tz-doc__prose li { margin: 0.4em 0; padding-left: 0.25em; } .tz-doc__prose li::marker { color: rgb(var(--color-on-surface-ghost)); } .tz-doc__prose a { color: rgb(var(--color-primary)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgb(var(--color-primary) / 0.35); transition: text-decoration-color var(--lum-dur-fast) var(--lum-ease), opacity var(--lum-dur-fast) var(--lum-ease); } .tz-doc__prose a:hover { text-decoration-color: rgb(var(--color-primary)); } .tz-doc__prose a:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.5); outline-offset: 2px; border-radius: 0.25rem; } /* Inline code. The brief calls out that code blocks (the fenced/recessed sample) get their own treatment in `.tz-doc__code*` below; this rule only owns the inline `` that appears inside prose text. */ .tz-doc__prose code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.875em; padding: 0.12em 0.42em; border-radius: 0.3rem; background: rgb(var(--color-surface-low)); border: 1px solid rgb(var(--color-border-subtle) / 0.10); color: rgb(var(--color-on-surface)); } /* A short blockquote for callouts that sit inside prose. The colour stays inside the existing palette; the accent is just a 1px left rule in the foreground token at a higher alpha. */ .tz-doc__prose blockquote { margin: 1.4em 0; padding: 0.25em 0 0.25em 1em; border-left: 2px solid rgb(var(--color-on-surface) / 0.32); color: rgb(var(--color-on-surface-variant)); font-style: italic; } .tz-doc__prose strong { font-weight: 600; color: rgb(var(--color-on-surface)); } .tz-doc__prose em { font-style: italic; } /* Tables that appear inside a guide. Hairline rules, no vertical borders — same vocabulary as the .tz-table-wrap in app.css, but restated so the guide does not have to depend on a console-specific class. `display: block` + `overflow-x: auto` lets the table scroll INSIDE itself on narrow viewports instead of forcing the prose column wider than the viewport. The cell content still renders at the natural width (so a long description doesn't wrap awkwardly); the table's OWN width is bounded by the prose column. */ .tz-doc__table { display: block; overflow-x: auto; max-width: 100%; width: 100%; border-collapse: collapse; font-family: 'Public Sans', system-ui, sans-serif; font-size: 14px; margin: 1em 0; border: 1px solid rgb(var(--color-border-subtle) / 0.10); border-radius: 0.75rem; /* The two scrollbar styles below match the code-block treatment so a reader sees the same scroll affordance wherever a wide element would otherwise blow out the column. */ scrollbar-width: thin; scrollbar-color: rgb(var(--color-on-surface-ghost) / 0.35) transparent; } .tz-doc__table::-webkit-scrollbar { height: 8px; } .tz-doc__table::-webkit-scrollbar-track { background: transparent; } .tz-doc__table::-webkit-scrollbar-thumb { background: rgb(var(--color-on-surface-ghost) / 0.35); border-radius: var(--lum-radius-pill); border: 2px solid transparent; background-clip: content-box; } .tz-doc__table thead { background: rgb(var(--color-surface-low)); border-bottom: 1px solid rgb(var(--color-border-subtle) / 0.12); } .tz-doc__table th, .tz-doc__table td { padding: 10px 14px; text-align: left; vertical-align: top; } .tz-doc__table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--color-on-surface-variant)); } .tz-doc__table tbody tr + tr { border-top: 1px solid rgb(var(--color-border-subtle) / 0.08); } .tz-doc__table td code { font-size: 12.5px; padding: 0.1em 0.35em; } /* ============================================================================ codeBlock() — single code treatment for every guide. Filename bar on top, copy button on the right, recessed well below. Visually matched to .tz-home__code-panel in landing.css but lives here so /docs/* and /why don't have to opt into `.tz-home`. ========================================================================== */ .tz-doc__code { background: rgb(var(--color-surface-lowest)); border: 1px solid rgb(var(--color-border-subtle) / 0.10); border-radius: 0.85rem; box-shadow: var(--lum-elev-2); overflow: hidden; min-width: 0; /* The code panel itself is the scroll boundary; the page never widens to fit a long line. */ max-width: 100%; } .tz-doc__code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 14px; border-bottom: 1px solid rgb(var(--color-border-subtle) / 0.10); background: rgb(var(--color-surface)); } .tz-doc__code-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.02em; color: rgb(var(--color-on-surface-variant)); display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Language tag — a tiny mono label that says what the snippet is in. */ .tz-doc__code-lang { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--color-on-surface-ghost)); padding-left: 8px; border-left: 1px solid rgb(var(--color-border-subtle) / 0.10); } .tz-doc__copy { height: 28px; padding: 0 12px; font-size: 12px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; border-radius: var(--lum-radius-pill); color: rgb(var(--color-on-surface-variant)); font-family: 'Public Sans', system-ui, sans-serif; font-weight: 500; cursor: pointer; transition: background var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease), border-color var(--lum-dur-fast) var(--lum-ease); flex-shrink: 0; } .tz-doc__copy:hover, .tz-doc__copy:focus-visible { background: rgb(var(--color-on-surface) / 0.06); color: rgb(var(--color-on-surface)); border-color: rgb(var(--color-border-subtle) / 0.10); outline: none; } .tz-doc__copy[data-state="copied"] { color: rgb(var(--color-success)); } .tz-doc__copy[data-state="error"] { color: rgb(var(--color-on-surface-variant)); } /* aria-live confirmation region, hidden visually but readable by AT. */ .tz-doc__copy-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tz-doc__code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.62; color: rgb(var(--color-on-surface)); white-space: pre; /* The well is the scroll boundary. The page never widens for a long line. */ max-width: 100%; /* Make the horizontal scrollbar always visible when overflow exists. Without this, headless Chromium (and many user browsers) only show the scrollbar during active scroll, so the long line at the right edge of the panel reads as truncated even though `el.scrollLeft = N` works programmatically. The track is transparent so it only materialises the thumb. */ scrollbar-width: thin; scrollbar-color: rgb(var(--color-on-surface-ghost) / 0.35) transparent; } .tz-doc__code pre::-webkit-scrollbar { height: 8px; } .tz-doc__code pre::-webkit-scrollbar-track { background: transparent; } .tz-doc__code pre::-webkit-scrollbar-thumb { background: rgb(var(--color-on-surface-ghost) / 0.35); border-radius: var(--lum-radius-pill); border: 2px solid transparent; background-clip: content-box; } .tz-doc__code pre::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-on-surface-ghost) / 0.55); background-clip: content-box; } .tz-doc__code pre code { background: transparent; border: 0; padding: 0; font-size: inherit; color: inherit; } /* ============================================================================ pageNav() — consistent prev/next footer. Two satin pills: prev on the left, next on the right. If only one is supplied, the other slot is empty (not invisible — we keep the row's height stable so the page never jumps when the next page renders). ========================================================================== */ .tz-doc__pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(20px, 2.5vw, 32px); border-top: 1px solid rgb(var(--color-border-subtle) / 0.10); } .tz-doc__pagenav-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 0.85rem; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border-subtle) / 0.10); box-shadow: var(--lum-elev-1); text-decoration: none; color: inherit; min-width: 0; transition: transform var(--lum-dur-fast) var(--lum-ease), box-shadow var(--lum-dur-fast) var(--lum-ease), border-color var(--lum-dur-fast) var(--lum-ease); } .tz-doc__pagenav-card:hover { transform: translateY(-1px); box-shadow: var(--lum-elev-hover-lift); border-color: rgb(var(--color-border-subtle) / 0.20); } .tz-doc__pagenav-card:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.5); outline-offset: 2px; } .tz-doc__pagenav-card--next { text-align: right; align-items: flex-end; } .tz-doc__pagenav-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: rgb(var(--color-on-surface-ghost)); } .tz-doc__pagenav-label { font-family: 'Public Sans', system-ui, sans-serif; font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; color: rgb(var(--color-on-surface)); line-height: 1.3; } /* When only prev or only next is supplied, the empty slot stays in the grid so the present one doesn't fly to the wrong edge. */ .tz-doc__pagenav-empty { visibility: hidden; } /* On narrow viewports stack the cards. */ @media (max-width: 520px) { .tz-doc__pagenav { grid-template-columns: 1fr; } .tz-doc__pagenav-card--next { text-align: left; align-items: flex-start; } } /* ============================================================================ onThisPage() — in-page anchor list for long guides. Sits in the right column on wide viewports, stacks above the body on narrow. We deliberately keep this separate from .tz-doc__nav-link so the styling reads as "scroll within this page" vs "navigate between pages". ========================================================================== */ .tz-doc__toc { display: none; flex-direction: column; gap: 4px; padding: 16px; border-radius: 0.85rem; background: rgb(var(--color-surface-low)); border: 1px solid rgb(var(--color-border-subtle) / 0.10); } @media (min-width: 1100px) { /* Show only on the roomiest viewports — guides that earn it are usually wide enough to host a TOC. */ .tz-doc__toc { display: flex; } } .tz-doc__toc-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: rgb(var(--color-on-surface-ghost)); margin-bottom: 4px; } .tz-doc__toc-link { display: block; padding: 4px 8px; border-radius: 0.4rem; color: rgb(var(--color-on-surface-variant)); font-family: 'Public Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.4; text-decoration: none; transition: background var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease); } .tz-doc__toc-link:hover, .tz-doc__toc-link:focus-visible { background: rgb(var(--color-on-surface) / 0.06); color: rgb(var(--color-on-surface)); outline: none; } .tz-doc__toc-link[aria-current="true"] { color: rgb(var(--color-on-surface)); background: rgb(var(--color-on-surface) / 0.08); font-weight: 600; } /* ============================================================================ Card / tile variants the public sub-pages reach for. `.tz-card` already supplies the surface (see app.css). These classes add the link-card padding + hover affordance the docs hub needs. ========================================================================== */ .tz-doc__link-card { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2vw, 26px); text-decoration: none; color: inherit; } .tz-doc__link-card:hover { transform: translateY(-1px); box-shadow: var(--lum-elev-hover-lift); border-color: rgb(var(--color-border-subtle) / 0.20); } .tz-doc__meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--color-on-surface-ghost)); font-weight: 500; } .tz-doc__card-title { font-family: 'Public Sans', system-ui, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.012em; margin: 0; color: rgb(var(--color-on-surface)); } .tz-doc__card-body { font-family: 'Public Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: rgb(var(--color-on-surface-variant)); margin: 0; } /* The link-card variant spaces the meta / title / body rows vertically without any inline style on the title. */ .tz-doc__link-card .tz-doc__card-title { margin-top: 6px; } /* ============================================================================ Lead card — the docs hub's promoted entry. Visual weight that signals "start here". A larger title, more vertical room, and a single right-aligned primary CTA. ========================================================================== */ .tz-doc__lead { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: 1rem; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border-subtle) / 0.12); box-shadow: var(--lum-elev-3, var(--lum-elev-2)); position: relative; overflow: hidden; } @media (min-width: 720px) { .tz-doc__lead { grid-template-columns: 1.4fr auto; } } .tz-doc__lead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 0% 0%, rgb(var(--color-on-surface) / 0.04), transparent 60%); pointer-events: none; } .tz-doc__lead-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: rgb(var(--color-on-surface-ghost)); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; } .tz-doc__lead-title { font-family: 'Public Sans', system-ui, sans-serif; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; color: rgb(var(--color-on-surface)); max-width: 22ch; text-wrap: balance; } .tz-doc__lead-body { font-family: 'Public Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); margin: 0; max-width: 56ch; } .tz-doc__lead-cta { display: inline-flex; align-self: flex-start; position: relative; } @media (min-width: 720px) { .tz-doc__lead-cta { align-self: center; } } /* ============================================================================ Docs hub grid — the secondary entries (after the lead). The default is 1 column, which fits narrow viewports and the prose-with-TOC case (where the prose column itself is narrow). The container query below is the right axis: it responds to the actual prose column width (which depends on whether a TOC is beside the prose), not the viewport. The container subject is `.tz-doc__prose` — that's the column the grid actually lives in. `.tz-doc__body` is wider (it includes the TOC rail), so a container query on it would fire on the wrong axis. Source order matters. The @media (viewport) rules must come first so the @container rules can override them for grids that live INSIDE .tz-doc__prose. Grids OUTSIDE .tz-doc__prose (the docs hub) are unaffected by the container query and pick up only the viewport rules. ========================================================================== */ .tz-doc__grid { display: grid; grid-template-columns: 1fr; gap: 14px; } /* Viewport queries first — apply everywhere, including inside prose. */ @media (min-width: 640px) { .tz-doc__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .tz-doc__grid { grid-template-columns: repeat(3, 1fr); } } /* Container query AFTER the viewport queries — only matches for grids inside `.tz-doc__prose`, and fires on the prose column's actual width, not the viewport. With the TOC taking the right rail, the prose column is ~460px wide → 2-up. Without the TOC, the prose gets the full ~720px → 3-up. */ .tz-doc__prose { container-type: inline-size; container-name: prose; } @container prose (min-width: 380px) { .tz-doc__grid { grid-template-columns: repeat(2, 1fr); } } @container prose (min-width: 620px) { .tz-doc__grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================================ HTTP method badges (used in the API reference). Tinted pill, not a satin button — a coloured method label is the only place on a docs sub-page that earns a saturated element. Colours stay inside the existing status tokens; no new palette is introduced. ========================================================================== */ .tz-doc__method { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: 0.4rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; border: 1px solid transparent; flex-shrink: 0; } .tz-doc__method--get { color: rgb(var(--color-success)); border-color: rgb(var(--color-success) / 0.30); background: rgb(var(--color-success) / 0.08); } .tz-doc__method--post { color: rgb(var(--color-primary)); border-color: rgb(var(--color-primary) / 0.30); background: rgb(var(--color-primary) / 0.08); } .tz-doc__method--put { color: rgb(var(--color-warning)); border-color: rgb(var(--color-warning) / 0.30); background: rgb(var(--color-warning) / 0.08); } .tz-doc__method--del { color: rgb(var(--color-error)); border-color: rgb(var(--color-error) / 0.30); background: rgb(var(--color-error) / 0.08); } /* Body + onThisPage layout. On wide viewports the TOC sits to the right of the prose; under 1100px the TOC disappears and the prose takes the full width. */ .tz-doc__with-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); } @media (min-width: 1100px) { .tz-doc__with-toc { grid-template-columns: minmax(0, 1fr) 220px; } } /* ============================================================================ Install row — the SDK installation page's per-package-manager rows. A recessed well with the manager label on the left, the command in the middle (mono), and a copy button on the right. One row per supported package manager; the page passes one row per SDK. ========================================================================== */ .tz-doc__install-row { display: flex; align-items: center; gap: 12px; background: rgb(var(--color-surface-low)); border: 1px solid rgb(var(--color-border-subtle) / 0.10); border-radius: 0.75rem; padding: 10px 12px; flex-wrap: wrap; } .tz-doc__install-manager { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: rgb(var(--color-on-surface-variant)); min-width: 60px; flex-shrink: 0; } .tz-doc__install-cmd { flex: 1; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: rgb(var(--color-on-surface)); background: transparent; border: 0; padding: 0; min-width: 0; overflow-x: auto; white-space: nowrap; } /* ============================================================================ Card & list utilities. These classes are the small layout primitives that show up repeatedly inside guide pages: a card's header row, a vertical stack of children, a paragraph that should not inherit a default margin. The pages stop styling these inline. ========================================================================== */ /* Header row inside a .tz-card. Three variants for the most common alignments — baseline (text + text), center (badge + text), and the default justify-between split. */ .tz-doc__card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tz-doc__card-head--baseline { align-items: baseline; } .tz-doc__card-head--split { justify-content: space-between; } /* Vertical stack of children. The default gap matches the prose rhythm; -tight and -loose override it. */ .tz-doc__stack { display: flex; flex-direction: column; } .tz-doc__stack > * + * { margin-top: 12px; } .tz-doc__stack--tight > * + * { margin-top: 6px; } .tz-doc__stack--loose > * + * { margin-top: 18px; } .tz-doc__stack--xl > * + * { margin-top: 24px; } /* A paragraph inside a card body that should not pick up the prose rhythm's auto margin. */ .tz-doc__flat { margin: 0; } /* The bottom-of-page footer row (e.g. "Looking for the OpenAPI spec?"). Uses the section-rule token for the top hairline so it visually belongs to the page footer family without bringing in console CSS. */ .tz-doc__footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgb(var(--color-border-subtle) / 0.10); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .tz-doc__footer-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* The API-reference reference cards: a slightly tighter padding than the default `.tz-card` and a flex column for the body stack. */ .tz-doc__ref-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } /* The conventions grid cards: tighter still, no header row to anchor. */ .tz-doc__conv-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } /* The MCP tool card: a small header row (mono name + summary on the right) and a body of a parameters table + a returns code block. */ .tz-doc__tool-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } /* Subhead within a card: a small mono kicker that labels the next block (Parameters, Returns, etc.). */ .tz-doc__subhead { margin-bottom: 8px; } /* The required-marker span next to a parameter name. */ .tz-doc__required { color: rgb(var(--color-error)); margin-left: 4px; } /* A `.tz-doc__card-title` rendered as inline code (mono name on the tool card). */ .tz-doc__mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* The community-library card's meta row: dim small text under the description. */ .tz-doc__meta-row { display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgb(var(--color-on-surface-variant)); } /* The SDK-installation card: a touch more padding and vertical room than the default `.tz-card`, since each card carries three sections (header / install / sanity check). */ .tz-doc__sdk-card { padding: 24px; display: flex; flex-direction: column; gap: 18px; } /* Larger variant of the card title, used on the SDK cards' h2. */ .tz-doc__card-title--lg { font-size: 20px; } /* A small fine-print paragraph that lives below a comparison table or similar; sets a sensible top margin without inheriting the prose rhythm. */ .tz-doc__fineprint { margin-top: 14px; } /* The docs-hub followup section: the grid that sits below the lead card. The lead card has its own bottom margin; this just adds the vertical air between the lead and the grid without leaning on a wrapper selector that could couple unrelated sections. */ .tz-doc__followup { margin-top: 24px; } /* ============================================================================ Primary CTA in the docs scope — make the design-system's restrained primary satin visually distinguishable from secondary. The base rule (in app.css, on `.tz-satin--primary`) uses the same light-gradient material as `.tz-satin` with a darker label. That restraint is correct for the landing page's chrome and the console, where every button has neighbours and the eye can pick out the variant by font-weight alone. In the docs hub the only call to action is the primary one — and with no other buttons to compare it against, the same light satin reads as identical to a secondary pill, so the page's main CTA loses its emphasis. The fix lives in this file (not app.css) because the change is scoped to the public sub-pages. We add the hover-shadow on top of the resting primary-shadow so the primary button visibly lifts off the page without introducing a new colour. No new tokens. ========================================================================== */ .tz-doc .tz-satin--primary { box-shadow: var(--lum-primary-satin-shadow), var(--lum-primary-satin-shadow-hover); } .tz-doc .tz-satin--primary:hover { box-shadow: var(--lum-primary-satin-shadow), var(--lum-primary-satin-shadow-hover); } /* ============================================================================ Reduced motion — collapse animations + sticky hover transforms. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .tz-doc__copy, .tz-doc__pagenav-card, .tz-doc__nav-link, .tz-doc__toc-link, .tz-doc__prose a, .tz-doc__link-card { transition-duration: 0.001ms !important; } } .tz-reduced-motion .tz-doc__copy, .tz-reduced-motion .tz-doc__pagenav-card, .tz-reduced-motion .tz-doc__nav-link, .tz-reduced-motion .tz-doc__toc-link, .tz-reduced-motion .tz-doc__prose a, .tz-reduced-motion .tz-doc__link-card { transition-duration: 0.001ms !important; }