/* ═══════════════════════════════════════════════════════════════
doc-shared.css — Shared styles for Brand Style Guide &
Competitor Brand Analysis (and future doc pages).
Edit once, applies everywhere.
═══════════════════════════════════════════════════════════════ */
/* ── Navbar z-index override for doc pages ─────────────────── */
/* Doc pages render .navbar-docs (via ds-nav.js); marketing pages render
.navbar-site. The z-index override here scopes specifically to the
docs surface — marketing pages keep their own stacking context. */
.navbar-docs { z-index: 10000 !important; }
/* Note — an earlier iteration introduced a bespoke `.ds-doc-topnav` block
here. It was retired once the DS pages moved back to the marketing
`.navbar` + `.nav-dropdown` primitives (for dropdown parity, backdrop
blur, and `shared.js` wiring). See `.nav-logo-label` in styles.css
for the mark-only + monospace-kicker lock-up that now sits on the
left of the DS navbar. */
/* ══════════════════════════════════════════════════════════════
HEADER (.doc-header)
══════════════════════════════════════════════════════════════ */
/* Hero padding (Apr 2026 v2): 192 px top, 56 px bottom.
Top — generous breathing room so the breadcrumb + title don't feel
crammed against the fixed navbar. Earlier iteration cut top to
144 px to keep tabs/scope-bars within first-fold reach on the
dashboard / catalog, but designers reported the hero felt cramped;
the keyword-gradient title is the brand moment of every DS page
and earns the air. 192 px restores the full-marketing breathing
room.
Bottom — kept at 56 px (vs the original 192 px) so the first content
module after the hero still lands within first-fold reach. The hero
trio (eyebrow → title → subtitle) sets identity; whatever's below it
is the actual page work. Asymmetric padding (192 top / 56 bottom)
is intentional: lots of air above the title, modest gap to the body
content. Total hero height ~256 px vs the 384 px of the all-192
marketing default — still room for a second module above the fold.
Pair with body::before for ambient light — no per-hero background. */
.doc-header {
color: var(--ink-900);
/* Apr 2026: bumped from 192/56 → 224/128 so the hero feels less
crammed top + bottom. Eyebrow has more clearance from the
navbar; subtitle has real breathing room before the bottom
seam. Mobile overrides in styles.css media queries still kick
in for narrow viewports. */
padding: 224px 0 128px;
position: relative;
overflow: hidden;
/* Faint full-width seam at the bottom of the hero. Anchors the
sidebar's top edge to the same horizontal line as the main
content's top edge — without it the sidebar reads as floating.
Kept at 6% alpha so it's a quiet seam, not a chrome divider. */
border-bottom: 1px solid color-mix(in oklch, var(--text-primary) 6%, transparent);
}
.doc-header .container {
display: flex; flex-direction: column;
align-items: flex-start;
gap: var(--sp-12); position: relative; z-index: 1;
}
.header-top { display: flex; }
.header-bottom { display: flex; flex-direction: column; align-items: flex-start; }
/* Hero atmospheric light is handled entirely by the body-level
`body::before` (top-left primary) + `body::after` (bottom-right
secondary) ambient. Earlier iterations layered a `.doc-header::before`
radial pair (8–28% mint + 6–22% purple) and a `.hero-gradient` top-
fade wrapper on top — both retired in Apr 2026 once body-level
ambient covered every page consistently. Heroes now sit flat on the
canvas — no per-hero background, same component, every team. */
/* Hero title — line-height 1.18 (vs --lh-display at 1.14) keeps a
touch of breathing because the 80 px title at 1.14 line-height
produces a 1.0 ratio, and gradient spans using
`-webkit-background-clip: text` need real leading to avoid clipping
descenders on letters like g / y / p when they render as gradient
fills. 1.18 is tight enough to keep multi-line titles dense but
gives the descender its pixel back.
`max-width: none` — the parent .header-content used to cap the
whole text cluster at 640–720 px, which forced two-word titles
like "Component Catalog" or "Working with Claude" to wrap mid-
phrase. The cap was originally chosen for SUBTITLE measure, but
.header-subtitle has its own 640 px cap (see below) — so the
parent cap was redundant for the subtitle and only constraining
the title. The title now owns its own measure: it can run as wide
as the page container (1280 px - 80 px × 2 padding = 1120 px of
content area). At hero scale this fits any reasonable DS title
("Working with Claude" needs ~760 px) on a single line without
wrapping prematurely. */
.header-title {
font-size: var(--text-hero); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tighter);
line-height: 1.18;
color: var(--ink-900);
max-width: none;
}
/* Keyword gradient — every DS hero title carries a brand-rich gradient
on its operative noun. The pattern: solid Ink for the framing words,
gradient on the keyword. The keyword is almost always the last word
of the title because DS page titles are noun-phrases ("Component
Catalog", "Working with Claude", "Brand Style Guide") — the noun is
what identifies the page; the qualifying words are framing.
Markup contract:
The descender-padding pair (`display: inline-block` + 0.04em
vertical padding) is non-negotiable: `-webkit-background-clip: text`
clips the painted gradient at the inline element's bounding box,
which by default ends at the cap-height. Without this, descenders
on g / y / p / Q would render mid-stroke. The 0.08em right padding
keeps italic-leaning terminal strokes from clipping at the right
edge; left padding stays 0 so the gradient start aligns with the
preceding solid-ink word's edge.
`line-height: inherit` so the inline-block doesn't introduce its
own taller line-box; the title's existing 1.18 line-height carries.
Full anatomy + the larger "display line-height & gradient
descenders" rule lives in `design.md §03 → Typography`. */
.header-title .grad {
background: linear-gradient(var(--accent-primary), var(--accent-primary)); /* TEMP solid — gradient text paused */
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
padding: 0.04em 0.08em 0.04em 0;
line-height: inherit;
}
/* Version number kicker — accent-colored, slightly larger than the
surrounding title. Used on doc heros that ship a version (e.g. the
brand guide). Solid accent fill, NOT gradient — version numbers are
functional metadata; the gradient treatment is reserved for the
keyword span (.grad) above. */
.header-title .version-num {
font-size: 1.15em; font-weight: var(--fw-black); letter-spacing: var(--tracking-tighter);
color: var(--accent-primary);
margin-left: 0.08em;
}
.header-subtitle {
font-size: var(--text-body); color: var(--ink-400); line-height: var(--lh-body);
max-width: 640px; margin-top: var(--sp-4); font-weight: var(--fw-regular);
}
/* ── Compact header variant ──────────────────────────────────
For DS surfaces that already have a persistent top nav +
sidebar; the 192px hero padding is overkill when every click
lands you back in the same chrome. Compact hero clears the
pill-style .navbar (fixed at 20px, ~72px tall → 92px bottom
edge) and lands the title + stats row in the top viewport
without demanding a scroll.
Pair with: