/* ============================================================ Yarrow user-guide page — layered on top of style.css ============================================================ */ /* ── two-column layout: sticky TOC + content ── */ .guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-top: 32px; padding-bottom: 80px; align-items: start; } /* ── mobile floating "Contents" toggle (hidden on desktop) ── */ .toc-toggle { display: none; } .toc-close { display: none; } .toc-backdrop { display: none; } @media (max-width: 920px) { .guide-layout { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; padding-bottom: 48px; } /* Floating "Contents" pill — pinned to the left edge, just below the sticky masthead so the wordmark isn't covered. The masthead is ~60–70 px tall on mobile, so we offset by ~78 px from the top. Padded for a comfortable thumb tap (44 px hit target per Apple HIG / Material 3). z-indexes are bumped into 4-figure territory because the page has competing stacking contexts (body::before noise overlay, masthead backdrop-filter, mix-blend-mode chrome) that on iOS Safari have been observed to occasionally promote a sibling above what the standard ordering predicts. Going to 9000-ish keeps the drawer reliably on top regardless. */ .toc-toggle { display: inline-flex; align-items: center; gap: 8px; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 78px); left: calc(env(safe-area-inset-left, 0px) + 12px); z-index: 9050; padding: 9px 14px 9px 11px; min-height: 44px; border-radius: 999px; border: 1px solid var(--bd2); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); color: var(--char); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px -10px rgba(42, 35, 28, 0.32); transition: opacity 180ms ease, transform 180ms ease, background 180ms ease; } .toc-toggle:hover { background: color-mix(in srgb, var(--bg) 98%, transparent); } .toc-toggle:active { transform: scale(0.97); } .toc-toggle svg { color: var(--yel); } /* When the drawer is open, fade the hamburger out so it doesn't compete with the in-drawer close button. */ html.toc-open .toc-toggle { opacity: 0; pointer-events: none; } /* Drawer — slides in from the left edge. Until JS sets the open class on , it sits offscreen via translateX(-100%). Highest z-index of the mobile-overlay set so taps reliably reach the drawer's links rather than the backdrop. Explicit `pointer-events: auto` to override any inherited `pointer-events: none` from the noise-overlay layer. */ .guide-toc { position: fixed !important; top: 0; left: 0; bottom: 0; width: min(86vw, 320px); max-height: none !important; background: var(--bg); border-right: 1px solid var(--bd); border-bottom: 0; padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px calc(env(safe-area-inset-bottom, 0px) + 18px) 18px; margin: 0; z-index: 9100; pointer-events: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 8px 0 28px -12px rgba(42, 35, 28, 0); } /* Belt-and-suspenders: every interactive descendant of the drawer stays clickable regardless of any inherited pointer-events state. iOS Safari has been seen to inherit `pointer-events: none` from a sibling stacking context in odd configurations; this rule short-circuits any such inheritance for the drawer's contents. */ .guide-toc, .guide-toc * { pointer-events: auto; } html.toc-open .guide-toc { transform: translateX(0); box-shadow: 8px 0 28px -12px rgba(42, 35, 28, 0.45); } /* In-drawer close button (×). Top-right of the drawer, hidden on desktop. Tap target ≥ 36 × 36. */ .toc-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--t2); cursor: pointer; border-radius: 8px; transition: background 160ms ease, color 160ms ease; } .toc-close:hover { background: var(--s1); color: var(--char); } /* Backdrop — semi-transparent dim that catches taps to dismiss the drawer. Stacking just below the drawer (z-index 9090 vs 9100), so the drawer always wins for clicks within its bounds. */ .toc-backdrop { display: block; position: fixed; inset: 0; z-index: 9090; background: rgba(28, 22, 14, 0.32); opacity: 0; pointer-events: none; transition: opacity 220ms ease; } html.toc-open .toc-backdrop { opacity: 1; pointer-events: auto; } /* Body scroll-lock when drawer is open. Without this the page under the drawer scrolls behind it on touch, which feels broken — and on iOS can let the drawer's contents drift out of position. */ html.toc-open, html.toc-open body { overflow: hidden; overscroll-behavior: contain; } /* Tap targets in the drawer: bigger spacing + larger hit area so links are comfortable to thumb. Also a slightly larger line-height so they don't read as cramped. */ .guide-toc nav { gap: 18px; padding-top: 28px; } .guide-toc a { padding: 9px 8px; margin-left: -8px; font-size: 14.5px; line-height: 1.35; border-radius: 6px; } .guide-toc .toc-group { gap: 2px; } .guide-toc .toc-group-h { font-size: 13px; margin-top: 4px; margin-bottom: 4px; } .guide-toc .toc-head { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yel); padding-bottom: 8px; border-bottom: 1px solid var(--bd); margin-bottom: 4px; padding-right: 40px; /* leave room for the close button */ } /* The legacy
wrapper is forced-open by the JS and its summary row is hidden — the drawer's own header carries the "Contents" label now. */ .guide-toc details > summary { display: none; } } @media (max-width: 620px) { :root { --gutter: 18px; } .guide-hero { margin-bottom: 32px; } .guide-hero h1 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.05; } .guide-hero .lede { font-size: 16px; } .guide-section { margin-bottom: 40px; scroll-margin-top: 60px; } .guide-section h2 { font-size: 22px; } .guide-section h3 { font-size: 17px; } .guide-section p { font-size: 16px; } .bullet-list { font-size: 16px; padding-left: 20px; } .three-up { gap: 10px; } .three-card { padding: 12px; } .three-card h4 { font-size: 14px; } .three-card p { font-size: 13px; } figure.diagram { padding: 12px; margin: 18px 0; } figure.diagram figcaption { font-size: 12.5px; } ol.callout-list { font-size: 15px; gap: 8px; } ol.callout-list .callout-num { width: 20px; height: 20px; font-size: 11px; } .md-table { font-size: 13px; } .md-table th, .md-table td { padding: 6px 8px; } .glossary { font-size: 16px; } .guide-cta { padding: 20px; margin-top: 48px; } .guide-cta .cta-row { flex-direction: column; align-items: stretch; } .guide-cta .cta-row .btn { justify-content: center; } /* Honor iPhone safe-area at the bottom */ .guide-layout { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); } } /* ── sticky TOC ── */ .guide-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; font-size: 13px; border-right: 1px solid var(--bd); padding-right: 16px; } .guide-toc .toc-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t3); margin-bottom: 14px; } .guide-toc nav { display: flex; flex-direction: column; gap: 18px; } /* Desktop: the
wrapper is invisible chrome — its summary row is hidden and its content always rendered. The mobile media query below replaces this with a real collapsible. */ .guide-toc .toc-mobile-collapse > summary { display: none; } .guide-toc .toc-mobile-collapse[open], .guide-toc .toc-mobile-collapse { display: block; } .guide-toc .toc-group { display: flex; flex-direction: column; gap: 4px; } .guide-toc .toc-group-h { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--yel); margin-bottom: 6px; letter-spacing: -0.005em; } .guide-toc a { color: var(--t2); text-decoration: none; padding: 3px 6px; border-left: 2px solid transparent; margin-left: -8px; border-radius: 0 4px 4px 0; transition: color 0.12s, background 0.12s, border-color 0.12s; line-height: 1.4; } .guide-toc a:hover { color: var(--char); background: var(--s1); } .guide-toc a.active { color: var(--yeld); border-left-color: var(--yel); background: var(--yelp); } /* ── main column ── */ .guide-main { min-width: 0; } .guide-hero { margin-bottom: 56px; } .guide-hero h1 { font-family: var(--serif); font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; color: var(--char); margin: 8px 0 18px; } .guide-hero h1 em { font-style: italic; color: var(--yel); font-weight: 400; } .guide-hero .lede { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ch2); max-width: 60ch; margin: 0 0 22px; } /* ── shared section blocks ── */ .guide-section { scroll-margin-top: 80px; margin-bottom: 64px; padding-bottom: 8px; } .guide-section h2 { font-family: var(--serif); font-size: 28px; line-height: 1.15; font-weight: 500; color: var(--char); margin: 0 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--bd); } .guide-section h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--char); margin: 28px 0 12px; } .guide-section p { font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--ch2); margin: 0 0 14px; max-width: 65ch; } .guide-section pre { background: var(--s1); border: 1px solid var(--bd); border-radius: 6px; padding: 14px 16px; margin: 14px 0; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--char); } .guide-section pre code { background: none; padding: 0; border: none; font-size: inherit; color: inherit; } /* callout (used for tips, conventions) */ .guide-section .callout, .guide-hero .callout { background: color-mix(in srgb, var(--yelp) 70%, transparent); border: 1px solid color-mix(in srgb, var(--yel) 30%, transparent); border-left: 3px solid var(--yel); border-radius: 6px; padding: 12px 16px; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ch2); margin: 16px 0; max-width: 65ch; } /* bullet lists in serif */ .bullet-list { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ch2); padding-left: 22px; margin: 8px 0 16px; max-width: 65ch; } .bullet-list li { margin: 6px 0; } .bullet-list strong { color: var(--char); font-weight: 600; } /* three-up cards used in intro / install sections */ .three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; } @media (max-width: 700px) { .three-up { grid-template-columns: 1fr; } } .three-card { background: var(--bg-soft); border: 1px solid var(--bd); border-radius: 8px; padding: 16px; } .three-card h4 { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--char); margin: 0 0 8px; } .three-card p { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--t2); margin: 0; } /* markdown-style table for "you type / you get" rows */ .md-table { width: 100%; max-width: 65ch; border-collapse: collapse; margin: 16px 0; font-size: 14px; } .md-table th, .md-table td { border: 1px solid var(--bd); padding: 8px 12px; text-align: left; vertical-align: top; } .md-table th { background: var(--s1); font-family: var(--serif); font-weight: 600; color: var(--char); } .md-table td { font-family: var(--serif); color: var(--ch2); } .md-table td code { font-size: 12px; } /* diagrams — wrap each SVG in a figure with a caption */ figure.diagram { margin: 24px 0; background: var(--bg-soft); border: 1px solid var(--bd); border-radius: 10px; padding: 18px; max-width: 100%; } figure.diagram svg { width: 100%; height: auto; display: block; } figure.diagram figcaption { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--t2); margin-top: 12px; line-height: 1.5; max-width: 70ch; } /* screenshot variant of .diagram — the only place the user guide uses a real image instead of an SVG mockup. The frame holds the image plus an absolutely-positioned SVG overlay carrying numbered callout pins. */ figure.diagram.screenshot { padding: 0; overflow: hidden; } .screenshot-frame { position: relative; line-height: 0; border-radius: 10px; overflow: hidden; } .screenshot-frame img { width: 100%; height: auto; display: block; } .screenshot-frame img.shot-dark { display: none; } html[data-theme="dark"] .screenshot-frame img.shot-light, html[data-theme="workshop"] .screenshot-frame img.shot-light { display: none; } html[data-theme="dark"] .screenshot-frame img.shot-dark, html[data-theme="workshop"] .screenshot-frame img.shot-dark { display: block; } .screenshot-frame .callouts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .screenshot-frame .callouts .pin { fill: var(--yel); stroke: var(--bg); stroke-width: 0.5; filter: drop-shadow(0 0.4px 1.2px rgba(0,0,0,0.45)); } .screenshot-frame .callouts .pin-text { font-family: var(--mono); font-size: 2.4px; font-weight: 700; fill: var(--on-yel); letter-spacing: 0; } /* matching numbered list under the screenshot — one row per pin */ ol.callout-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; max-width: 65ch; } ol.callout-list li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ch2); } ol.callout-list .callout-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--yel); color: var(--on-yel); font-family: var(--mono); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; } ol.callout-list strong { color: var(--char); font-weight: 600; } /* compare-paths colour swatches */ .kw-add { color: var(--sage); font-weight: 600; } .kw-rem { color: var(--danger); font-weight: 600; } .kw-mod { color: var(--gold); font-weight: 600; } .kw-same { color: var(--t3); font-weight: 600; } /* glossary */ .glossary { font-family: var(--serif); margin: 16px 0; max-width: 65ch; } .glossary dt { font-weight: 600; color: var(--char); margin-top: 14px; } .glossary dd { margin: 4px 0 0 0; color: var(--ch2); line-height: 1.55; } /* CTA section at the end */ .guide-cta { background: var(--bg-soft); border: 1px solid var(--bd); border-radius: 10px; padding: 28px; margin-top: 80px; } .guide-cta .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* eyebrow chip used at the top of the hero */ .guide-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); margin-bottom: 14px; } .guide-hero .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yel); } /* ═══════════════════════════════════════════════════════════ 2.0 — "New in 2.0" section A standalone block at the top of the guide that groups all six new features with their illustrations. Each feature is an alternating image-left / image-right pair. ═══════════════════════════════════════════════════════════ */ /* Flat on-paper panel — a hairline and a slim accent on the left are the only decorations. The old vertical plum gradient read as a promo banner against the rest of the guide. */ .guide-whats-new { background: var(--bg-soft); margin: 32px calc(-1 * var(--gutter)) 48px; padding: 48px var(--gutter) 32px; border-radius: 14px; border: 1px solid var(--bd); border-left: 3px solid var(--yel); position: relative; } .guide-whats-new .whats-new-header { text-align: center; max-width: 640px; margin: 0 auto 40px; } .whats-new-kicker { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--yeld); background: var(--bg); border: 1px solid color-mix(in srgb, var(--yel) 30%, transparent); padding: 5px 13px; border-radius: 999px; margin-bottom: 16px; } .guide-whats-new h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.1; letter-spacing: -0.012em; color: var(--char); margin: 0 0 14px; } .guide-whats-new h2 em { font-style: italic; color: var(--yel); font-weight: 400; } .guide-whats-new .lede { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--t1); margin: 0; } .v2-feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; margin: 48px 0; padding: 32px; background: var(--bg); border: 1px solid var(--bd); border-radius: 14px; scroll-margin-top: 80px; } .v2-feature.reverse { grid-template-columns: 1.1fr 1fr; } .v2-feature.reverse .v2-feature-body { order: 2; } .v2-feature.reverse .v2-feature-art { order: 1; } .v2-feature-art { background: var(--bg-soft); border: 1px solid var(--bd); border-radius: 10px; padding: 18px; display: flex; align-items: center; justify-content: center; } .v2-feature-art svg { width: 100%; max-height: 300px; height: auto; } .v2-feature-tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yeld); background: var(--yelp); padding: 4px 10px; border-radius: 4px; margin-bottom: 14px; font-weight: 600; } .v2-feature-body h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -0.01em; color: var(--char); margin: 0 0 12px; } .v2-feature-body h4 { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 17px; color: var(--char); margin: 20px 0 6px; } .v2-feature-body p { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--t1); margin: 0 0 12px; } .v2-feature-body p em { color: var(--char); font-style: italic; } .v2-feature-body p strong { color: var(--char); font-weight: 600; } .v2-feature-body code { font-family: var(--mono); font-size: 0.86em; background: var(--s2); padding: 1.5px 6px; border-radius: 4px; color: var(--ch2); } .v2-feature-body kbd { font-family: var(--mono); font-size: 0.82em; padding: 1px 7px; border-radius: 4px; background: var(--s2); border: 1px solid var(--bd); border-bottom-width: 2px; color: var(--ch2); white-space: nowrap; } .v2-feature-body pre { margin: 10px 0 14px; padding: 12px 14px; background: var(--s1); border: 1px solid var(--bd); border-left: 3px solid var(--yel); border-radius: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--ch2); overflow-x: auto; line-height: 1.55; } .v2-feature-body .numbered-steps { margin: 12px 0 14px; padding: 0 0 0 20px; counter-reset: step; list-style: none; } .v2-feature-body .numbered-steps li { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--t1); padding: 4px 0 4px 28px; position: relative; counter-increment: step; } .v2-feature-body .numbered-steps li::before { content: counter(step); position: absolute; left: -4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--yelp); color: var(--yeld); font-family: var(--mono); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .v2-feature-body .bullet-list { margin: 10px 0 14px; padding-left: 20px; } .v2-feature-body .bullet-list li { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--t1); margin: 6px 0; } .v2-feature-body .callout-inline { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--t2); padding: 12px 14px; border-left: 2px solid var(--yel); background: color-mix(in srgb, var(--yelp) 55%, transparent); border-radius: 0 8px 8px 0; margin: 14px 0 0; } .v2-feature-body .callout-inline code { font-style: normal; background: var(--bg); } @media (max-width: 920px) { .guide-whats-new { margin: 20px 0 36px; padding: 28px 20px; } .v2-feature, .v2-feature.reverse { grid-template-columns: 1fr; gap: 24px; padding: 22px; } .v2-feature.reverse .v2-feature-body { order: 1; } .v2-feature.reverse .v2-feature-art { order: 2; } } /* ═══════════════════════════════════════════════════════════ 3.0 brand retheme — 2026-04-28 Re-aligns the guide with the Vellum / Workshop pair that frames Yarrow's 3.x identity. Replaces the 2.x gold-on-cream Direction-B override with slate-on-bone for light and bronze-on-ink for dark. Layout, diagrams, v2-feature cards, callouts unchanged — the palette was already living entirely inside the --yel* / --bg / --char tokens so the remap is clean. Selectors cover both the legacy `light`/`dark` data-theme values (so old bookmarks keep working) and the new `vellum`/`workshop` values written by the updated toggle. ═══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter+Tight:wght@400;500;600;700&display=swap'); html[data-theme="vellum"], html[data-theme="light"], :root { /* Vellum slate-blue primary — the 3.0 brand accent. */ --yel: #45627A; /* accent-primary slate */ --yel2: #6B8AA5; /* accent-cool — hover */ --yelp: #DCE3EB; /* pale slate — active row tint */ --yeld: #2C3340; /* dark slate — text on yelp */ --on-yel: #FAFAF6; /* Vellum bone canvas — cooler than the 2.x cream. */ --bg: #EFEDE7; --bg-soft: #F4F2EC; --bg-bone: #F4F2EC; --s1: #F4F2EC; --s2: #E5E2D9; --s3: #DCDDD3; --bd: rgba(44, 51, 64, 0.08); --bd2: rgba(44, 51, 64, 0.15); --bd3: rgba(44, 51, 64, 0.28); --rule: rgba(44, 51, 64, 0.14); --char: #2C3340; --ch2: #3E4554; --t1: #4A5363; --t2: #5A6473; --t3: #8C95A1; /* Newsreader is the 3.0 editorial face (matches the desktop app); Fraunces stays loaded for the rare display-size hero where its opsz axis opens up the wordmark. Inter Tight carries chrome. */ --display: "Fraunces", "Newsreader", "Source Serif 4", ui-serif, Georgia, serif; --serif: "Newsreader", "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif; --sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; } html[data-theme="workshop"], html[data-theme="dark"] { /* Workshop bronze on deep ink — the 3.0 dark identity. */ --yel: #C18F3E; --yel2: #D4A55A; --yelp: #34516B; --yeld: #E8DDC4; --on-yel: #14202E; --bg: #14202E; --bg-soft: #1B2A3D; --bg-bone: #1B2A3D; --s1: #1B2A3D; --s2: #243449; --s3: #2C3D54; --bd: rgba(232, 221, 196, 0.08); --bd2: rgba(232, 221, 196, 0.15); --bd3: rgba(232, 221, 196, 0.24); --rule: rgba(232, 221, 196, 0.14); /* Paper-warm cream, never clinical white per spec §3.3. */ --char: #E8DDC4; --ch2: #D9CDB0; --t1: #C5B89A; --t2: #B5A98C; --t3: #7E7560; } /* wind Fraunces's opsz axis up at display sizes — the reason we switched to it over Newsreader is the presence of a genuine display cut at large opsz. Let it open up. */ .guide-hero h1, .guide-whats-new h2, .v2-feature-body h3 { font-family: var(--display); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144; font-weight: 500; letter-spacing: -0.025em; } .v2-feature-body h4 { font-family: var(--display); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 36; } .guide-section h2 { font-family: var(--display); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 96; font-weight: 500; letter-spacing: -0.02em; } /* masthead: double bottom rule + tighter wordmark, to match index */ .site-header, .nav, header.site { border-bottom: 3px double var(--ch2) !important; } /* the hero h1 gains Fraunces's italic for the "explained from scratch" */ .guide-hero h1 em { font-style: italic; color: var(--yel); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144; } /* kicker badge: gold pill instead of plum */ .whats-new-kicker { color: var(--yeld); background: var(--bg); border-color: color-mix(in srgb, var(--yel) 40%, transparent); } /* callout-inline: gold bar instead of plum */ .v2-feature-body .callout-inline, .guide-section .callout, .guide-hero .callout { border-left-color: var(--yel); } /* numbered-step bullets */ .v2-feature-body .numbered-steps li::before { background: var(--yelp); color: var(--yeld); }