/* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm); border: 1px solid transparent; transition: background-color var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo); } .btn:active { transform: translateY(1px); } .btn svg { width: 1rem; height: 1rem; flex-shrink: 0; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--accent-strong); } .btn--primary:focus-visible { outline: none; box-shadow: var(--glow-accent); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--ink); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } /* ===== Site header ===== */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in oklch, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; gap: var(--space-6); height: 4rem; } .site-header__logo { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-variation-settings: 'wdth' 120; font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--ink); margin-right: auto; } .site-header__logo img { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); } .site-header__nav { display: none; align-items: center; gap: var(--space-6); font-size: var(--text-sm); font-weight: 600; } .site-header__nav a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); padding: var(--space-2) 0; border-bottom: 2px solid transparent; transition: color var(--duration-fast) var(--ease-out-expo), border-bottom-color var(--duration-fast) var(--ease-out-expo); } .site-header__nav a svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; } .site-header__nav a:hover, .site-header__nav a[aria-current='page'] { color: var(--ink); } .site-header__nav a[aria-current='page'] { border-bottom-color: var(--accent); } .site-header__actions { display: flex; align-items: center; gap: var(--space-2); } .site-header__menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); } .site-header__menu-toggle:hover { background: var(--surface); } .site-header__menu-toggle svg { width: 1.25rem; height: 1.25rem; } @media (min-width: 1024px) { .site-header__nav { display: flex; } .site-header__menu-toggle { display: none; } } /* Icon buttons shared by search trigger / theme toggle */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 2.25rem; padding-inline: var(--space-3); border-radius: var(--radius-md); color: var(--ink-muted); border: 1px solid transparent; font-size: var(--text-sm); transition: color var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo); } .icon-btn:hover { color: var(--ink); background: var(--surface); } .icon-btn svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; } .icon-btn kbd { font-size: var(--text-xs); color: var(--ink-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.05rem 0.35rem; } .search-trigger .shortcut-kbd { display: none; align-items: center; gap: 0.2rem; } /* data-platform is set synchronously in (see platformInitScript in layout.mjs) before first paint, so only the matching keycap ever renders — no flash of the wrong platform's shortcut. Defaults to "other" so the hint still shows something sensible if that script never runs. */ :root[data-platform='mac'] .search-trigger .shortcut-kbd--mac { display: inline-flex; } :root:not([data-platform='mac']) .search-trigger .shortcut-kbd--other { display: inline-flex; } .search-trigger span.label { display: none; } @media (min-width: 768px) { .search-trigger { width: auto; justify-content: space-between; min-width: 11rem; border-color: var(--border); } .search-trigger span.label { display: inline; } } .theme-toggle { position: relative; width: 2.25rem; } .theme-toggle svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity var(--duration-base) var(--ease-out-expo), transform var(--duration-base) var(--ease-out-expo); } /* Cross-fade + rotate between sun/moon on theme change, instead of an instant display:none swap — the icon change is the only signal the toggle click actually worked. */ :root[data-theme='dark'] .theme-toggle .icon-sun { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.5); } :root[data-theme='light'] .theme-toggle .icon-moon { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(0.5); } /* ===== Language switch ===== */ .lang-switch { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .lang-switch a { padding: 0.4rem 0.6rem; font-size: var(--text-xs); font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.02em; transition: color var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo); } .lang-switch a[aria-current='true'] { background: var(--surface-2); color: var(--ink); } .lang-switch a:hover:not([aria-current='true']) { color: var(--ink); } /* ===== Docs layout: sidebar + content + on-this-page ===== */ .docs-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-8) var(--space-24); } .docs-sidebar { display: none; border-right: none; } .docs-sidebar__group { margin-bottom: var(--space-6); } .docs-sidebar__group-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-bottom: var(--space-2); } .docs-sidebar__link { display: block; padding: 0.4rem var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink-muted); border-left: none; transition: color var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo); } .docs-sidebar__link:hover { color: var(--ink); background: var(--surface); } .docs-sidebar__link[aria-current='page'] { color: var(--accent); background: var(--surface); font-weight: 600; } .docs-content { min-width: 0; max-width: var(--measure); } .docs-content > * + * { margin-top: var(--space-6); } .docs-content h2 { margin-top: var(--space-16); padding-top: var(--space-4); scroll-margin-top: 5rem; } .docs-content h3 { margin-top: var(--space-12); scroll-margin-top: 5rem; } .docs-content ul, .docs-content ol { list-style: disc; padding-left: 1.25em; } .docs-content ol { list-style: decimal; } .docs-content li + li { margin-top: var(--space-2); } .docs-content :not(pre) > code { font-size: 0.9em; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.1em 0.4em; } .docs-toc { display: none; } .docs-toc__title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-bottom: var(--space-2); } .docs-toc a { display: block; padding-block: 0.3rem; font-size: var(--text-xs); color: var(--ink-muted); border-left: 2px solid transparent; padding-left: var(--space-3); transition: color var(--duration-fast) var(--ease-out-expo), border-left-color var(--duration-fast) var(--ease-out-expo); } .docs-toc a:hover, .docs-toc a.active { color: var(--ink); border-left-color: var(--accent); } @media (min-width: 1024px) { .docs-layout { grid-template-columns: 15rem minmax(0, 1fr); } .docs-sidebar { display: block; position: sticky; top: 5.5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; } } @media (min-width: 1280px) { .docs-layout { grid-template-columns: 15rem minmax(0, var(--measure)) 14rem; } .docs-toc { display: block; position: sticky; top: 5.5rem; align-self: start; } } /* Mobile sidebar drawer */ dialog.docs-drawer { border: none; padding: 0; margin: 0; inset: 0 auto 0 0; height: 100%; width: min(20rem, 85vw); max-width: none; background: var(--bg); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform var(--duration-base) var(--ease-out-expo); } dialog.docs-drawer[open] { transform: translateX(0); } dialog.docs-drawer::backdrop { background: oklch(0 0 0 / 0.5); } .docs-drawer__inner { padding: var(--space-6); overflow-y: auto; height: 100%; } .docs-drawer__close { margin-bottom: var(--space-4); } @media (min-width: 1024px) { dialog.docs-drawer { display: none; } } /* ===== Hero ===== */ .hero { padding-block: var(--space-16) var(--space-section); position: relative; overflow: hidden; } .hero__inner { display: grid; gap: var(--space-16); align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); border-radius: var(--radius-md); padding: 0.35rem 0.75rem; margin-bottom: var(--space-6); } .hero h1 { max-width: 16ch; } .hero h1 .hero__accent { color: var(--accent); } .hero__lede { margin-top: var(--space-6); font-size: var(--text-lg); color: var(--ink-muted); max-width: 42ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); font-size: var(--text-xs); color: var(--ink-muted); } .hero__meta li { display: flex; align-items: center; gap: var(--space-2); } .hero__meta svg { width: 1rem; height: 1rem; color: var(--accent); } .hero__diagram { justify-self: center; width: 100%; max-width: 30rem; } @media (min-width: 1024px) { .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } } /* ===== Resolution-graph diagram (shared by hero + architecture) ===== */ .graph-diagram { width: 100%; height: auto; } .graph-diagram text { font-family: var(--font-mono); fill: var(--ink); } .graph-diagram .graph-node-bg { fill: var(--surface); stroke: var(--border); } .graph-diagram .graph-node-bg--accent { stroke: var(--accent); } .graph-diagram .graph-edge { stroke: var(--ink-muted); fill: none; stroke-width: 1.5; } .graph-diagram .graph-edge--accent { stroke: var(--accent); } .graph-diagram .graph-label-muted { fill: var(--ink-muted); font-size: 0.7rem; } .graph-diagram [data-reveal] { opacity: 0; transform: translateY(6px); animation: graph-reveal var(--duration-slow) var(--ease-out-expo) forwards; animation-delay: calc(var(--reveal-index, 0) * 90ms + 200ms); } @keyframes graph-reveal { to { opacity: 1; transform: translateY(0); } } .graph-diagram .graph-edge[data-reveal] { stroke-dasharray: var(--edge-length, 200); stroke-dashoffset: var(--edge-length, 200); animation: graph-draw var(--duration-slow) var(--ease-out-expo) forwards; } @keyframes graph-draw { to { stroke-dashoffset: 0; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .graph-diagram [data-reveal] { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; } } /* ===== Sections & prose (homepage) ===== */ .section { padding-block: var(--space-section); } .section__head { max-width: 42rem; margin-bottom: var(--space-12); } .section__head h1, .section__head h2 { margin-bottom: var(--space-4); } .section__head p { color: var(--ink-muted); font-size: var(--text-lg); } /* ===== Feature list (asymmetric bento, not a uniform card grid) ===== */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .feature { padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .feature__icon { color: var(--accent); margin-bottom: var(--space-4); } .feature__icon svg { width: 2.5rem; height: 2.5rem; } .feature h3 { margin-bottom: var(--space-2); } .feature p { color: var(--ink-muted); } .feature--headline { background: var(--accent); color: var(--accent-ink); } .feature--headline .feature__icon { color: var(--accent-ink); } .feature--headline h3 { color: var(--accent-ink); } .feature--headline p { color: color-mix(in oklch, var(--accent-ink) 78%, transparent); } @media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); grid-template-areas: 'headline headline b c' 'headline headline d e'; } .feature--headline { grid-area: headline; display: flex; flex-direction: column; justify-content: center; } .feature--headline h3 { font-size: var(--text-2xl); } } /* ===== Language banner ===== */ [data-lang-banner] { display: none; transition: opacity var(--duration-base) var(--ease-out-expo), transform var(--duration-base) var(--ease-out-expo); } /* Dismissal (a user action) is animated; the initial appearance is not — it is decided synchronously pre-paint (see langBannerInitScript in layout.mjs) specifically so nothing shifts the layout on load. Adding a reveal transition here would reintroduce that exact bug in reverse. */ [data-lang-banner].is-dismissing { opacity: 0; transform: translateY(-6px); pointer-events: none; } :root[data-lang-banner-show] [data-lang-banner] { display: block; } /* ===== Callouts ===== */ .callout { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); font-size: var(--text-sm); } .callout__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; } .callout__title { font-weight: 700; margin-bottom: var(--space-1); } .callout--tip { background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--ink); } .callout--tip .callout__icon { color: var(--accent); } .callout--warning { background: color-mix(in oklch, var(--danger) 16%, var(--surface)); color: var(--ink); } .callout--warning .callout__icon { color: var(--danger); } /* ===== Code blocks ===== */ .code-block { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; } .code-block__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-xs); } .code-block__lang { color: var(--ink-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } .code-block__copy { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo); } .code-block__copy:hover { color: var(--ink); background: var(--surface-2); } .code-block__copy svg { width: 0.9rem; height: 0.9rem; transition: transform var(--duration-fast) var(--ease-out-expo); } /* Success/error feedback, toggled briefly by scripts/code-block.js after a copy attempt — the smallest change that makes the outcome unmistakable. */ .code-block__copy--copied { color: var(--accent); } .code-block__copy--copied svg { transform: scale(1.15); } .code-block__copy--error { color: var(--danger); } .code-block pre { margin: 0; padding: var(--space-4); overflow-x: auto; font-size: var(--text-sm); line-height: var(--leading-loose); } .code-block code { counter-reset: line; } .code-block .code-line { display: block; } .code-block .code-line::before { counter-increment: line; content: counter(line); display: inline-block; width: 1.75em; margin-right: var(--space-4); text-align: right; color: var(--ink-muted); opacity: 0.55; user-select: none; } .code-block--no-lines .code-line::before { content: none; width: 0; margin: 0; } /* Syntax token colors */ .tok-keyword { color: var(--accent); font-weight: 600; } .tok-string { color: oklch(0.78 0.14 155); } :root[data-theme='light'] .tok-string { color: oklch(0.5 0.13 155); } .tok-comment { color: var(--ink-muted); font-style: italic; } .tok-number { color: oklch(0.78 0.13 75); } :root[data-theme='light'] .tok-number { color: oklch(0.52 0.14 75); } .tok-function { color: oklch(0.8 0.1 250); } :root[data-theme='light'] .tok-function { color: oklch(0.5 0.14 250); } .tok-type { color: oklch(0.82 0.09 200); } :root[data-theme='light'] .tok-type { color: oklch(0.5 0.1 200); } .tok-punct { color: var(--ink-muted); } /* ===== API reference tables ===== */ .api-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); } .api-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .api-table th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface); } .api-table td { padding: var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; } .api-table tr:last-child td { border-bottom: none; } .api-table code { font-size: 0.9em; } /* ===== Example cards ===== */ .example-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .example-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo); } .example-card:hover { border-color: var(--accent); transform: translateY(-2px); } .example-card h3 { font-size: var(--text-lg); } .example-card p { color: var(--ink-muted); font-size: var(--text-sm); flex-grow: 1; } .example-card__cta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--accent); } .example-card__cta svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; } /* ===== Comparison table ===== */ .compare-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-top: var(--space-6); } .compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 32rem; } .compare-table th, .compare-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; } .compare-table th { background: var(--surface); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); } .compare-table tr:last-child td { border-bottom: none; } /* ===== FAQ ===== */ .faq-item { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .faq-item + .faq-item { margin-top: var(--space-3); } .faq-item__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); font-weight: 600; text-align: left; } .faq-item__question svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--ink-muted); transition: transform var(--duration-fast) var(--ease-out-expo); } /* :not(.faq-item--closing) keeps the chevron in sync with the actual collapse animation (scripts/faq.js), not with the [open] attribute alone — [open] is only removed at the very end of the closing animation, so without this the chevron would stay rotated until the panel had already fully shrunk. */ .faq-item[open]:not(.faq-item--closing) .faq-item__question svg { transform: rotate(180deg); } .faq-item__answer { padding: 0 var(--space-6) var(--space-4); color: var(--ink-muted); } /* .faq-item already has overflow: hidden above (for the rounded corners), which is exactly what scripts/faq.js's height animation needs — native
removes its content from layout on close instantly, which pure CSS cannot tween, so the height itself is animated via the Web Animations API instead. */ /* ===== Search overlay (native ) ===== */ dialog.search-dialog { border: none; padding: 0; border-radius: var(--radius-lg); width: min(36rem, 92vw); max-height: min(28rem, 80vh); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); margin: 4rem auto auto; opacity: 1; transform: none; transition: opacity var(--duration-base) var(--ease-out-expo), transform var(--duration-base) var(--ease-out-expo), overlay var(--duration-base) allow-discrete, display var(--duration-base) allow-discrete; } /* @starting-style gives supporting browsers an explicit "from" state to transition out of when the dialog enters the top layer — a fade + slight drop-in. Browsers without @starting-style just see opacity/transform at their target values immediately, i.e. today's instant-appear behavior: pure progressive enhancement, no fallback branch needed. */ @starting-style { dialog.search-dialog[open] { opacity: 0; transform: translateY(-8px) scale(0.98); } } dialog.search-dialog::backdrop { background: oklch(0 0 0 / 0.5); opacity: 1; transition: opacity var(--duration-base) var(--ease-out-expo), overlay var(--duration-base) allow-discrete, display var(--duration-base) allow-discrete; } @starting-style { dialog.search-dialog[open]::backdrop { opacity: 0; } } .search-dialog__inner { display: flex; flex-direction: column; max-height: min(28rem, 80vh); } .search-dialog__input-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); } .search-dialog__input-row svg { width: 1.1rem; height: 1.1rem; color: var(--ink-muted); flex-shrink: 0; } .search-dialog__input { flex: 1; background: none; border: none; color: var(--ink); font-size: var(--text-base); } .search-dialog__input::-webkit-search-cancel-button { display: none; } .search-dialog__close { color: var(--ink-muted); } .search-dialog__results { overflow-y: auto; padding: var(--space-2); } .search-result { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); } .search-result[data-active='true'], .search-result:hover { background: var(--surface-2); } .search-result__page { font-size: var(--text-xs); color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-1); } .search-result__title { font-weight: 600; } .search-result__snippet { font-size: var(--text-sm); color: var(--ink-muted); } .search-dialog__empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-muted); font-size: var(--text-sm); } .search-dialog__hint { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--ink-muted); display: flex; gap: var(--space-4); } .search-dialog__hint kbd { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.05rem 0.35rem; margin-right: var(--space-1); } /* ===== Footer ===== */ .site-footer { border-top: 1px solid var(--border); padding-block: var(--space-12); margin-top: var(--space-24); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; } .site-footer__note { color: var(--ink-muted); font-size: var(--text-sm); } .site-footer__links { display: flex; gap: var(--space-6); font-size: var(--text-sm); } .site-footer__links a { color: var(--ink-muted); } .site-footer__links a:hover { color: var(--ink); } /* ===== Blog ===== */ .post-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: var(--space-8); } .post-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo); } .post-card:hover { border-color: var(--accent); transform: translateY(-2px); } .post-card h2 { font-size: var(--text-lg); } .post-card p { color: var(--ink-muted); font-size: var(--text-sm); flex-grow: 1; } .post-card__meta, .post-header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); color: var(--ink-muted); font-size: var(--text-sm); } .post-header__meta { margin-block: var(--space-4) var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); } .post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; } .post-tag { padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--accent); } /* A blog post's .post-tags sits inside .post.docs-content, whose list typography rules (.docs-content ul, .docs-content li + li) are more specific than the plain .post-tags/.post-tag selectors above and would otherwise win: disc markers reappear and the second tag gets pushed down by a stray margin-top. Re-assert the three clobbered properties at higher specificity instead of fighting source order. */ .docs-content .post-tags { list-style: none; padding-left: 0; } .docs-content .post-tags .post-tag { margin-top: 0; } .post { max-width: var(--measure); margin-inline: auto; }