/* shadcn theme tokens, kept in lockstep with the kb-app palette (knowledgebase/resources/css/app.css). HSL triplets, consumed as hsl(var(--token)). Light is the default; .dark on overrides. */ :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color-scheme: light; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 217.2 32.6% 14%; --card-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; /* Near-white on the lightened dark-mode blue only reaches 3.5:1. Dark ink on the blue clears AA (5.1:1); the token is only used for filled primary buttons, so links keep the bright blue. */ --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 22%; --muted-foreground: 215 20.2% 70%; --accent: 217.2 32.6% 22%; --accent-foreground: 210 40% 98%; --border: 217.2 32.6% 26%; --input: 217.2 32.6% 22%; --ring: 212.7 26.8% 83.9%; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } nav { position: sticky; top: 0; background: hsl(var(--background) / 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border)); padding: 12px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 14px; z-index: 10; } nav a { color: hsl(var(--muted-foreground)); text-decoration: none; } nav a:hover { color: hsl(var(--foreground)); } nav a.active { color: hsl(var(--foreground)); } nav .brand { display: inline-flex; align-items: center; padding: 0; } nav .brand img { height: 22px; width: auto; display: block; } /* Wordmark ships in brand colours (blue mark, dark slate type); on the dark theme the slate type disappears, so flatten the whole lockup to white. */ .dark nav .brand img { filter: brightness(0) invert(1); } .theme-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 0; border-radius: calc(var(--radius) - 2px); color: hsl(var(--muted-foreground)); cursor: pointer; } .theme-toggle:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .moon { display: none; } .dark .theme-toggle .sun { display: none; } .dark .theme-toggle .moon { display: block; } a:focus-visible, button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } article { max-width: 880px; margin: 0 auto; padding: 48px 24px 96px; } h1, h2, h3 { font-weight: 600; } h1 { font-size: 36px; letter-spacing: -0.025em; margin-top: 0; } h2 { font-size: 22px; letter-spacing: -0.015em; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 6px; margin-top: 40px; } h3 { font-size: 17px; margin-top: 28px; } article a { color: hsl(var(--primary)); text-underline-offset: 3px; } code { background: hsl(var(--muted)); padding: 2px 6px; border-radius: calc(var(--radius) - 4px); font-size: 0.9em; font-family: var(--font-mono); } .dark code { border: 1px solid hsl(var(--border)); } pre { background: hsl(var(--muted) / 0.5); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 16px; overflow: auto; font-size: 13px; font-family: var(--font-mono); line-height: 1.5; } pre code { background: transparent; padding: 0; font-size: inherit; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; margin: 16px 0; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; } th { font-weight: 500; color: hsl(var(--muted-foreground)); font-size: 14px; white-space: nowrap; } td { font-variant-numeric: tabular-nums; } ul, ol { padding-left: 22px; } li { margin: 4px 0; } /* Changelog: version rail on the left, entry on the right. */ :root { --tag-added: 142 71% 29%; --tag-changed: 32 90% 30%; --tag-removed: 0 72% 42%; --tag-fixed: 262 62% 47%; } .dark { --tag-added: 142 62% 62%; --tag-changed: 38 92% 62%; --tag-removed: 0 84% 72%; --tag-fixed: 262 84% 76%; } .changelog .lede { color: hsl(var(--muted-foreground)); max-width: 66ch; margin-bottom: 40px; } .release { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 32px; padding: 32px 0; scroll-margin-top: 72px; } .release + .release { border-top: 1px solid hsl(var(--border)); } .release-meta { position: sticky; top: 72px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .release-meta .version { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); text-decoration: none; } .release-meta .version:hover { color: hsl(var(--primary)); } .release-meta time { font-size: 13px; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; } .pill { display: inline-block; padding: 1px 8px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--muted) / 0.6); color: hsl(var(--muted-foreground)); font-size: 11px; white-space: nowrap; } .pill-latest { border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); } .release-body h2 { margin: 0 0 8px; border-bottom: 0; padding-bottom: 0; font-size: 20px; } .release-body h3 { font-size: 15px; } /* The chip sits inline so a long heading wraps under it rather than beside it. */ .tag { display: inline-block; margin-right: 8px; vertical-align: 1px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .tag-added { color: hsl(var(--tag-added)); background: hsl(var(--tag-added) / 0.12); } .tag-changed { color: hsl(var(--tag-changed)); background: hsl(var(--tag-changed) / 0.12); } .tag-removed { color: hsl(var(--tag-removed)); background: hsl(var(--tag-removed) / 0.12); } .tag-fixed { color: hsl(var(--tag-fixed)); background: hsl(var(--tag-fixed) / 0.12); } @media (max-width: 720px) { .release { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; } .release-meta { position: static; flex-direction: row; align-items: center; } }