/* Your site's stylesheet. Nothing here is shared with the CMS editor — replace all of it. The one part worth keeping is `.rte`, which styles WYSIWYG output. A template cannot know which tags an author will produce, so those rules are written against the container rather than against classes that will never be applied. */ :root { --ink: #14181f; --ink-muted: #5c6673; --paper: #ffffff; --paper-sunken: #f5f6f8; --rule: #e2e6ec; --accent: #2f6df0; --radius: 10px; --wrap: 68rem; } /* Dark is an explicit choice, never a system default. prefers-color-scheme is deliberately NOT consulted: with no cookie a visitor gets light, whatever their operating system says. The alternative hands half of all visitors a theme nobody on this side chose, and makes "what does the site look like?" a question with two answers. The attribute is written on by the server (see _SiteLayout and ThemePreference), so the first paint is already correct — no flash of the wrong theme. */ :root[data-theme="dark"] { --ink: #e8ecf2; --ink-muted: #a3adbb; --paper: #14171c; --paper-sunken: #1b1f26; --rule: #2a2f38; --accent: #6d9bff; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; } /* --- chrome ------------------------------------------------------------------------------- */ .site__header { border-bottom: 1px solid var(--rule); } .site__header .wrap { display: flex; align-items: center; height: 4rem; } .site__brand { font-weight: 650; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } /* Language switcher. Pushed to the far end of the header bar; the current language is stated rather than merely styled, so it still reads correctly with CSS off or to a screen reader (aria-current carries the same fact). */ .site__bar { justify-content: space-between; gap: 1rem; } .site__langs { display: flex; align-items: center; gap: 0.25rem; } .site__lang { display: inline-block; padding: 0.25rem 0.5rem; border-radius: calc(var(--radius) / 2); font-size: 0.8125rem; line-height: 1.2; color: var(--ink-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em; } .site__lang:hover { background: var(--paper-sunken); color: var(--ink); } .site__lang.is-current { color: var(--ink); font-weight: 650; background: var(--paper-sunken); } .site__footer { margin-top: 5rem; border-top: 1px solid var(--rule); padding: 1.5rem 0; font-size: 0.8125rem; color: var(--ink-muted); } main.wrap { padding-top: 3rem; } /* --- headings ----------------------------------------------------------------------------- */ h1 { margin: 0 0 1rem; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 680; } /* --- WYSIWYG output ----------------------------------------------------------------------- */ .rte { max-width: 42rem; } .rte > :first-child { margin-top: 0; } .rte > :last-child { margin-bottom: 0; } .rte p { margin: 0 0 1.15em; } .rte h2, .rte h3, .rte h4 { margin: 2em 0 0.6em; line-height: 1.25; letter-spacing: -0.015em; } .rte h2 { font-size: 1.5rem; } .rte h3 { font-size: 1.25rem; } .rte h4 { font-size: 1.0625rem; } .rte a { color: var(--accent); text-underline-offset: 0.15em; } .rte ul, .rte ol { margin: 0 0 1.15em; padding-left: 1.4em; } .rte li { margin: 0.3em 0; } .rte blockquote { margin: 1.75em 0; padding: 0.1em 0 0.1em 1.25rem; border-left: 3px solid var(--rule); color: var(--ink-muted); } .rte img { max-width: 100%; height: auto; border-radius: var(--radius); } .rte table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9375rem; } .rte th, .rte td { border: 1px solid var(--rule); padding: 0.5rem 0.7rem; text-align: left; } .rte th { background: var(--paper-sunken); font-weight: 600; } .rte code { background: var(--paper-sunken); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* --- StandardPage ------------------------------------------------------------------------- */ .page__flag { display: inline-block; margin: 0 0 1rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--paper-sunken); border: 1px solid var(--rule); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); } .page__summary { max-width: 42rem; margin: 0 0 2rem; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-muted); } .page__hero { margin: 0 0 2.5rem; max-width: 42rem; } .page__hero img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--rule); } .page__cta { margin: 2.5rem 0 0; } .page__related, .page__download, .page__reflink { margin: 1rem 0 0; } /* The field sheet: the read-back harness at the foot of the StandardPage template. */ .page__fields { margin: 4rem 0 0; padding: 1.5rem 1.5rem 1.75rem; border: 1px dashed var(--rule); border-radius: var(--radius); font-size: 0.875rem; } .page__fields dt { margin: 0.9rem 0 0.1rem; font-weight: 650; color: var(--ink-muted); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; } .page__fields dt:first-child { margin-top: 0; } .page__fields dd { margin: 0; color: var(--ink); } .button { display: inline-block; padding: 0.7rem 1.5rem; border-radius: var(--radius); background: var(--accent); color: var(--paper); font-weight: 600; font-size: 0.9375rem; text-decoration: none; } .button:hover { filter: brightness(1.08); } /* --- blocks ------------------------------------------------------------------------------- */ .block { margin: 2.5rem 0; } .block__heading { margin: 0 0 0.6rem; font-size: 1.375rem; letter-spacing: -0.015em; } /* --- documentation shell ------------------------------------------------------------------ The guides at /guides. Three columns on a wide screen — section rail, prose, page headings — collapsing to one on narrow. Everything here uses the tokens above, so the docs follow the site into dark mode rather than carrying a second palette that drifts. */ .wrap--wide { max-width: 88rem; } .site__nav { display: flex; gap: 1.25rem; margin-left: auto; flex-wrap: wrap; } .site__nav-link { color: var(--ink-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; } .site__nav-link:hover { color: var(--ink); } .docs { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 13rem; gap: 3rem; align-items: start; padding: 2.5rem 0 4rem; } .docs__rail, .docs__toc { position: sticky; top: 2rem; max-height: calc(100vh - 4rem); overflow-y: auto; } .docs__group { margin-bottom: 1.75rem; } .docs__group-title { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .docs__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); } .docs__link { display: block; padding: 0.3rem 0 0.3rem 0.85rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-muted); text-decoration: none; font-size: 0.9375rem; } .docs__link:hover { color: var(--ink); } .docs__link.is-current { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .docs__main { min-width: 0; } .docs__header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .docs__eyebrow { margin: 0 0 0.4rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); } .docs__header h1 { margin: 0; font-size: 2.25rem; letter-spacing: -0.02em; line-height: 1.15; } .docs__summary { margin: 0.75rem 0 0; color: var(--ink-muted); font-size: 1.0625rem; } .docs__toc-title { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .docs__toc ul { list-style: none; margin: 0; padding: 0; } .docs__toc a { display: block; padding: 0.25rem 0; color: var(--ink-muted); text-decoration: none; font-size: 0.875rem; line-height: 1.4; } .docs__toc a:hover { color: var(--ink); } /* --- index cards --- */ .docs__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; } .docs__card { display: block; padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: inherit; } .docs__card:hover { border-color: var(--accent); } .docs__card h2 { margin: 0 0 0.5rem; font-size: 1.125rem; } .docs__card p { margin: 0 0 0.75rem; color: var(--ink-muted); font-size: 0.9375rem; } .docs__card-count { font-size: 0.8125rem; color: var(--ink-muted); } /* --- pager --- */ .docs__pager { display: flex; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); } .docs__pager-link { flex: 1; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: inherit; } .docs__pager-link:hover { border-color: var(--accent); } .docs__pager-link--next { text-align: right; } .docs__pager-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .docs__pager-title { display: block; margin-top: 0.2rem; font-weight: 600; } /* --- prose ------------------------------------------------------------------------------- Markdown output. Same reasoning as .rte: the rules are written against the container, because nothing applies a class to a

that Markdig produced. */ .prose { font-size: 1.0625rem; } .prose h2 { margin: 2.75rem 0 0.75rem; font-size: 1.5rem; letter-spacing: -0.015em; scroll-margin-top: 2rem; } .prose h3 { margin: 2rem 0 0.5rem; font-size: 1.1875rem; scroll-margin-top: 2rem; } .prose p { margin: 0 0 1.1rem; } .prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.4rem; } .prose li { margin-bottom: 0.4rem; } .prose a { color: var(--accent); } .prose strong { font-weight: 650; } .prose code { padding: 0.15em 0.4em; border-radius: 4px; background: var(--paper-sunken); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875em; } .prose pre { margin: 0 0 1.4rem; padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-sunken); overflow-x: auto; line-height: 1.55; } .prose pre code { padding: 0; background: none; font-size: 0.875rem; } .prose table { width: 100%; margin: 0 0 1.4rem; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; } .prose th, .prose td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .prose th { font-weight: 600; white-space: nowrap; } .prose blockquote { margin: 0 0 1.4rem; padding: 0.1rem 0 0.1rem 1.1rem; border-left: 3px solid var(--accent); color: var(--ink-muted); } @media (max-width: 68rem) { .docs { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; } .docs__toc { display: none; } } @media (max-width: 48rem) { .docs { grid-template-columns: 1fr; } .docs__rail { position: static; max-height: none; } } /* --- releases ----------------------------------------------------------------------------- The release index and a single announcement. Same tokens as everything else, so these follow the site into dark mode rather than carrying a palette of their own. */ .releases, .release { max-width: 46rem; margin: 0 auto; padding: 2.5rem 0 4rem; } .releases__header { margin-bottom: 2rem; } .releases__header h1, .release__header h1 { margin: 0; font-size: 2.25rem; letter-spacing: -0.02em; line-height: 1.15; } .releases__intro { margin-top: 0.75rem; color: var(--ink-muted); } .releases__empty { padding: 1.5rem; border: 1px dashed var(--rule); border-radius: var(--radius); color: var(--ink-muted); } .releases__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .releases__item { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--rule); } .releases__link { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.0625rem; } .releases__link:hover { color: var(--accent); } .releases__date { color: var(--ink-muted); font-size: 0.875rem; white-space: nowrap; } .releases__pager { display: flex; gap: 1.25rem; align-items: center; margin-top: 1.5rem; } .releases__page-of { color: var(--ink-muted); font-size: 0.875rem; } /* --- one announcement --- */ .release__header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .release__meta { display: flex; gap: 0.75rem; align-items: baseline; margin: 0 0 0.6rem; font-size: 0.875rem; color: var(--ink-muted); } .release__version { padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--paper-sunken); border: 1px solid var(--rule); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--ink); } .release__summary { margin: 0.75rem 0 0; color: var(--ink-muted); font-size: 1.0625rem; } /* Border-led rather than a saturated fill: this has to stay legible in both themes, and a warning colour dark enough for light mode is unreadable on the dark ground. */ .release__breaking { margin: 1.25rem 0 0; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-left: 3px solid #d9822b; border-radius: var(--radius); background: var(--paper-sunken); font-size: 0.9375rem; } .release__upgrade { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); } .release__upgrade h2 { margin: 0 0 0.75rem; font-size: 1.375rem; } /* --- theme switcher ----------------------------------------------------------------------- */ .site__theme { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 1.25rem; padding: 0.3rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink-muted); text-decoration: none; font-size: 0.875rem; line-height: 1; white-space: nowrap; } .site__theme:hover { color: var(--ink); border-color: var(--accent); } @media (max-width: 40rem) { /* The glyph carries the meaning on a narrow screen; the label is what gives way. */ .site__theme-text { display: none; } }