/* system.kristianpaulsen.com, the docs SITE's chrome only (nav, sidebar, code
blocks, tabs, palette tables). The consumer-facing baseline (reset, focus
ring, color-scheme) and the tokens live in the project's globals.css, which
every page also loads (the root landing @imports it). A project handoff is
globals.css + a component's CSS, never this file. The chrome references the
project tokens directly, so every page IS a live demo of its project.
Fonts are loaded via tags in each page's (with preconnect), not
an @import here, @import would make the browser fetch this file first and
only then discover the font stylesheet, serialising two round-trips. */
/* Cascade layers. Declared once here (idempotently re-declared in tokens.css and
components.css so the order holds regardless of load sequence). Order low→high:
base (site chrome) < tokens < components. Any UNLAYERED CSS a consumer writes
beats all of these, so overrides need no specificity gymnastics. */
@layer base, tokens, components;
@layer base {
/* Chrome layout tokens. The consumer baseline (reset, color-scheme,
--flip) lives in globals.css, loaded on every page. */
:root {
--nav-h: 56px;
--sidebar-w: 15rem;
--page-gutter: 1.5rem; /* fixed 24px chrome gutter for header + sidebar */
--measure: 65ch; /* reading line length in characters (the actual measure rule; ~45–75 ideal) */
--font: "Geist", -apple-system, blinkmacsystemfont, "Helvetica Neue", arial, sans-serif;
--mono: "Geist Mono", ui-monospace, sfmono-regular, "SF Mono", menlo, monospace;
}
/* Cross-document view transitions: a soft cross-fade between pages as you
navigate the docs. Both pages opt in (base.css is on every page) and same-
origin nav is required. Progressive enhancement, unsupported browsers just
navigate normally. Disabled at mobile widths: there the nav is a hamburger
drawer, and transitioning an open drawer into the next page reads as a jump. */
@media (min-width: 640px) {
@view-transition {
navigation: auto;
}
}
/* The global reduced-motion guard (in globals.css) can't reach view-transition
pseudos, so silence the page-transition animation explicitly here. */
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
html {
-webkit-text-size-adjust: 100%;
/* Kill the mobile tap-highlight (a square, radius-ignoring translucent overlay
the browser paints on tap). Our own :active states are the press feedback. */
-webkit-tap-highlight-color: transparent;
/* Sticky nav overlaps the top, reserve its height when jumping to any
in-page anchor (Skip-to-content, hash links). */
scroll-padding-top: var(--nav-h);
}
body {
/* 340, not the 360 narrowest target: a classic vertical scrollbar eats ~15px
of a 360 window, so a 360 floor makes that exact width scroll sideways. */
min-width: 340px;
margin: 0;
background: var(--background-primary);
color: var(--ink-primary);
font-family: var(--font);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Applied briefly during a theme swap so no element animates its color change. */
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
transition: none !important;
}
/* Accessibility: skip-to-content, hidden until keyboard-focused. */
.skip-link {
position: fixed;
top: 1rem;
left: 50%;
z-index: 100;
display: inline-flex;
align-items: center;
height: 40px;
padding-inline: 1.25rem;
color: var(--background-primary);
background: var(--ink-primary);
border-radius: var(--radius-full);
font-size: var(--font-body-small-size);
font-weight: 500;
text-decoration: none;
transform: translate(-50%, calc(-100% - 1rem));
}
.skip-link:focus-visible {
transform: translate(-50%, 0);
outline: var(--focus-ring-width) solid var(--focus);
outline-offset: var(--focus-ring-offset);
}
/* Site nav (injected on every page) */
.site-nav {
position: sticky;
top: 0;
z-index: 20;
background: var(--background-primary);
}
/* Root landing: transparent, brandless, just the theme toggle. */
.site-nav--bare {
background: transparent;
}
.site-nav__inner {
height: var(--nav-h);
padding-inline: var(--page-gutter);
display: flex;
align-items: center;
justify-content: space-between;
}
.site-nav__left {
display: flex;
align-items: center;
gap: 0.25rem;
}
/* Right cluster: the Example link sits beside the theme toggle, which keeps
its own -0.5rem end margin so its icon lands on the page-gutter. */
.site-nav__right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.site-nav__menu {
display: inline-flex; /* mobile drawer toggle; hidden at lg */
position: relative;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
/* Mirror the theme toggle: 32px hit target, pulled 8px toward the corner
so the icon's visible content sits at the page-gutter. */
margin-inline-start: -0.5rem;
padding: 0;
color: var(--ink-primary);
background: none;
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
}
/* Hamburger ↔ X morph. Both lines pivot around the SVG's centre. To keep the
crossover perfectly symmetrical, we normalise each line to y=12 first
(translate) then rotate ±45° around the same origin. */
.site-nav__menu .ham-line {
/* Custom mark, pin its own weight so the shared icon stroke can be Tabler's 2. */
stroke-width: 1.75;
transform-origin: center;
transform-box: fill-box;
transition: transform 0.2s ease;
}
.site-nav__menu[aria-expanded="true"] .ham-line--top {
transform: translateY(3px) rotate(45deg);
}
.site-nav__menu[aria-expanded="true"] .ham-line--bot {
transform: translateY(-3px) rotate(-45deg);
}
/* Sidebar (injected). Base = mobile off-canvas drawer; becomes a sticky left
rail inside the shell at lg (≥1024, see media query below). */
.sidebar {
position: fixed;
inset: 0;
width: auto;
height: 100dvh;
padding: calc(var(--nav-h) + 1.5rem) var(--page-gutter) 3rem;
background: color-mix(in srgb, var(--background-primary) 85%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
backdrop-filter: saturate(1.4) blur(12px);
z-index: 15; /* Below nav (z-index: 20) so header contents stay clickable. */
opacity: 0;
/* Drawer scrolls internally but hides its own scrollbar, the outer page
scrollbar stays visible for continuity. Overscroll is
contained so reaching the end doesn't bleed to the page. */
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
/* visibility: hidden stops the browser painting the drawer at all, prevents
a flash of the open state when the viewport crosses the breakpoint. */
visibility: hidden;
pointer-events: none;
}
/* Container is only a programmatic focus holder on drawer open, never show a
ring on it (the links have their own focus styles). */
.sidebar:focus-visible {
outline: none;
}
.sidebar::-webkit-scrollbar {
display: none;
}
/* Animate the drawer only when the user actually toggles it, not on the
media-query flip when the viewport crosses the breakpoint. JS adds .is-anim
on first interaction so pure resize snaps instead of slides. */
.sidebar.is-anim {
transition:
opacity 0.2s ease-out,
visibility 0s linear 0.2s;
}
.sidebar.is-anim.is-open {
transition: opacity 0.2s ease-out;
}
.sidebar.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Scroll fade: when the sticky sidebar overflows, its top/bottom edges fade to
hint more content. Scroll-driven, so the top fades only once scrolled down and
the bottom only while there's more below, and neither fades when the list
fits (an inactive scroll timeline leaves the fade sizes at 0). Chrome/Edge;
other browsers just show no fade. @property makes the fade sizes animatable. */
@property --sidebar-fade-top {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --sidebar-fade-bottom {
syntax: "";
inherits: false;
initial-value: 0;
}
@media (min-width: 1024px) {
/* Rail: undo the drawer, sticky left column, opaque, no blur, always shown.
Inline-start padding = page-gutter minus the link's inline padding, so link
text lands at 24px and its hover/active pill extends 8px before the text. */
.sidebar {
position: sticky;
inset: auto;
top: var(--nav-h);
align-self: flex-start;
flex: none;
width: var(--sidebar-w);
height: auto;
max-height: calc(100dvh - var(--nav-h));
padding-block: 0.75rem 3rem;
padding-inline: calc(var(--page-gutter) - 0.5rem) 1.5rem;
background: var(--background-primary);
-webkit-backdrop-filter: none;
backdrop-filter: none;
z-index: 18;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@supports (animation-timeline: scroll()) {
.sidebar {
--sidebar-fade: 2.5rem;
/* Clear strip of page surface below the bottom fade, the fade finishes
this far above the edge instead of running to it. */
--sidebar-fade-gap: 2rem;
mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--sidebar-fade-top),
#000 calc(100% - var(--sidebar-fade-gap) - var(--sidebar-fade-bottom)),
transparent calc(100% - var(--sidebar-fade-gap))
);
animation:
sidebar-fade-top linear both,
sidebar-fade-bottom linear both;
animation-timeline: scroll(self), scroll(self);
animation-range:
0 var(--sidebar-fade),
calc(100% - var(--sidebar-fade)) 100%;
}
}
@keyframes sidebar-fade-top {
from {
--sidebar-fade-top: 0;
}
to {
--sidebar-fade-top: var(--sidebar-fade);
}
}
@keyframes sidebar-fade-bottom {
from {
--sidebar-fade-bottom: var(--sidebar-fade);
}
to {
--sidebar-fade-bottom: 0;
}
}
/* Hamburger toggle is drawer-only. */
.site-nav__menu {
display: none;
}
}
/* Base = mobile drawer: big links, no pill. Compact rail values restored at lg. */
.sidebar__group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sidebar__group + .sidebar__group {
margin-top: 2rem;
}
.sidebar__group-title {
display: flex;
align-items: center;
height: 32px;
margin: 0;
padding-inline: 0;
font-size: var(--font-caption-medium-size);
font-weight: 500;
color: var(--ink-secondary);
}
.sidebar__link,
.sidebar__back {
display: block;
text-decoration: none;
}
.sidebar__link {
font-size: var(--font-title-small-size);
line-height: 1.4;
color: var(--ink-primary);
font-weight: 500;
}
/* "New" dot, primary marker next to recently-added pages. Sits inside the
link's inner span, so the flex gap spaces it off the label. */
.sidebar__new {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-foreground);
}
.sidebar__back {
margin-bottom: 1.75rem;
font-size: var(--font-body-small-size);
color: var(--ink-secondary);
font-weight: 500;
}
/* Visual pill wraps just the label; the anchor stays full width for clicks.
The drawer shows no pill (background added at lg); keep the radius so the
focus ring reads rounded. */
.sidebar__link > span,
.sidebar__back > span {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0;
border-radius: var(--radius-sm);
}
.sidebar__link:focus-visible,
.sidebar__back:focus-visible {
outline: none;
}
/* Bare text in the drawer, push the ring out for breathing room (0 at lg). */
.sidebar__link:focus-visible > span,
.sidebar__back:focus-visible > span {
outline: var(--focus-ring-width) solid var(--focus);
outline-offset: 4px;
animation: focus-ring-converge var(--motion-default);
}
@media (hover: hover) {
.sidebar__back:hover {
color: var(--ink-primary);
}
}
.sidebar-backdrop {
display: none;
}
/* lg ≥1024: restore the compact rail typography + pill that the drawer enlarged.
Placed AFTER the base drawer rules so these overrides win on desktop. */
@media (min-width: 1024px) {
.sidebar__group {
gap: 2px;
}
.sidebar__group + .sidebar__group {
margin-top: 1.5rem;
}
.sidebar__group-title {
padding-inline: 0.5rem;
font-size: var(--font-caption-small-size);
}
.sidebar__link {
font-size: var(--font-caption-medium-size);
line-height: 20px;
}
.sidebar__back {
margin-bottom: 1.25rem;
font-size: var(--font-caption-medium-size);
}
/* Pill returns: label-hugging surface, ring sits tight to it. */
.sidebar__link > span,
.sidebar__back > span {
padding: 0.375rem 0.5rem;
}
.sidebar__link:focus-visible > span,
.sidebar__back:focus-visible > span {
outline-offset: 0;
}
.sidebar__link.is-active > span {
background: var(--background-secondary-active);
}
}
/* Hover pill, desktop rail only (pointer-capable). The active link keeps its
own surface, so it opts out of the hover pill. */
@media (min-width: 1024px) and (hover: hover) {
.sidebar__link:not(.is-active):hover > span {
background: var(--background-secondary);
}
}
.site-nav__brand {
font-size: var(--font-body-medium-size);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-primary);
text-decoration: none;
}
.site-nav__brand:focus-visible {
outline: var(--focus-ring-width) solid var(--focus);
outline-offset: var(--focus-ring-offset);
border-radius: 4px;
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
font: inherit;
width: 32px;
height: 32px;
/* Sit 16px from the viewport edge (rather than 24), tighter to the corner. */
margin-inline-end: -0.5rem;
padding: 0;
color: var(--ink-primary);
background: none;
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
}
@media (hover: hover) {
.theme-toggle:hover {
background: var(--background-secondary);
}
}
/* "View source" link: same 32px icon-button footprint as the theme toggle. */
.site-nav__source {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: var(--ink-primary);
border-radius: var(--radius-sm);
text-decoration: none;
}
@media (hover: hover) {
.site-nav__source:hover {
background: var(--background-secondary);
}
}
/* Hairline between the Example button and the icon cluster. The flex gap on
.site-nav__right gives it symmetric breathing room on both sides. */
.site-nav__divider {
width: var(--border-width);
height: 20px;
background: var(--fill-tertiary);
}
/* Project search: a typeahead over this project's pages. The wrap is the
positioning context for the results dropdown. Hidden on phones (too little
nav room); shown from 768 up (below), and the divider immediately after the
search hides with it. */
.site-nav__search-wrap {
display: none;
position: relative;
width: 12rem;
min-width: 0; /* allow the input to shrink instead of overflowing the nav */
}
.site-nav__search-wrap + .site-nav__divider {
display: none;
}
/* Plain secondary-surface fill; focus adds a tinted hairline (no ring, no
fill change) as the active cue. */
.site-nav__search {
width: 100%;
height: 32px;
padding: 0 0.625rem;
font: inherit;
font-size: var(--font-caption-medium-size);
color: var(--ink-primary);
background: var(--background-secondary);
border: 0;
border-radius: 10px;
}
.site-nav__search::placeholder {
color: var(--ink-secondary);
}
.site-nav__search:focus {
outline: none;
box-shadow: inset 0 0 0 1px var(--fill-primary);
}
/* Retint the native clear button (WebKit only) so it tracks the theme instead
of the browser's hardcoded grey. Firefox shows none; Esc still clears. */
.site-nav__search::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
background: var(--ink-secondary);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E")
right / 16px no-repeat;
cursor: pointer;
}
.site-nav__search::-webkit-search-cancel-button:hover {
background: var(--ink-primary);
}
/* No stale clear button lingering on an unfocused field (matches Safari). */
.site-nav__search:not(:focus)::-webkit-search-cancel-button {
display: none;
}
/* Results dropdown: the same floating-surface recipe as .popover, concentric
4px padding around 8px items. */
.site-nav__results {
position: absolute;
inset-inline: 0;
top: calc(100% + 4px);
z-index: 30;
max-height: 60vh;
margin: 0;
padding: 4px;
overflow-y: auto;
list-style: none;
background: var(--background-secondary);
border-radius: calc(var(--radius-sm) + 4px);
box-shadow: var(--shadow-sm), var(--surface-rim);
}
.site-nav__results[hidden] {
display: none;
}
.site-nav__result {
padding: 0.375rem 0.5rem;
font-size: var(--font-caption-medium-size);
color: var(--ink-primary);
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Single highlight: hover moves .is-active (wired in JS) rather than adding a
separate :hover state, so the keyboard default and the cursor never both show. */
.site-nav__result.is-active {
background: var(--background-secondary-hover);
}
.site-nav__result--empty {
color: var(--ink-secondary);
cursor: default;
}
@media (min-width: 768px) {
.site-nav__search-wrap,
.site-nav__search-wrap + .site-nav__divider {
display: block;
}
}
/* Show the icon for the theme you'd switch TO: sun in dark, moon in light. */
:root[data-theme="light"] .icon-sun,
:root[data-theme="dark"] .icon-moon {
display: none;
}
.wrap {
max-width: calc(40rem + 2 * var(--grid-margin, 1.5rem));
margin-inline: auto;
padding: 3rem var(--grid-margin, 1.5rem) 6rem;
}
/* Wrap gets focused (tabindex=-1) via the skip link, kill the default focus ring. */
.wrap:focus-visible {
outline: none;
}
/* Shell: full width; the sidebar carries its own left gutter, and .wrap carries
its own side gutter (grid-margin). No shell padding, so nothing double-stacks. */
.shell {
display: flex;
align-items: flex-start;
}
.content-region {
flex: 1 1 auto;
min-width: 0;
}
/* Base = mobile: stacked column. Copy-tokens button is hidden until md
(rule sits after .btn below to keep specificity ascending). */
.site-head {
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
/* Divider only when the page has a subhead below. Pages without subheads
(e.g. Typography) go straight from lede into content, no floating rule. */
body:has(.subhead) .site-head {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: var(--border-width) solid var(--fill-tertiary);
}
.site-head__body {
flex: 1;
min-width: 0;
}
/* Title + Copy Tokens on the same row, above the lede. h1's own margin-bottom
provides the gap to the lede. */
.site-head__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
/* sm ≥640: header returns to a row (title left, actions right). */
@media (min-width: 640px) {
.site-head {
flex-direction: row;
gap: 1.5rem;
justify-content: space-between;
}
}
h1 {
font-size: 1.875rem; /* 30px */
line-height: 2.25rem; /* 36px */
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
}
.lede {
color: var(--ink-primary);
font-size: var(--font-body-small-size);
margin: 0;
}
@media (min-width: 640px) {
.lede {
text-wrap: balance;
}
}
@media (min-width: 768px) {
.lede {
max-width: 80%;
}
}
.toolbar {
margin-top: 1.5rem;
}
.btn {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 0.625rem;
font: inherit;
font-size: var(--font-caption-medium-size);
font-weight: 500;
color: var(--ink-primary);
text-decoration: none;
background: var(--background-secondary);
border: 0;
border-radius: 10px;
cursor: pointer;
transition:
background-color 0.15s ease,
transform 0.1s ease;
}
@media (hover: hover) {
.btn:hover {
background: var(--background-secondary-hover);
}
}
.btn:active {
background: var(--background-secondary-active);
transform: scale(0.97);
}
/* Copy-tokens button hidden by default; reappears at md ≥768 (hidden on phones
+ small tablets). Ordered after .btn so specificity ascends, and the md query
sits after this base rule so the show wins. */
.site-head__title .btn {
display: none;
}
@media (min-width: 768px) {
.site-head__title .btn {
display: inline-flex;
}
}
/* Outlined variant: transparent surface with a hairline stroke; hover fills
with the same subtle wash the solid .btn rests on. */
.btn--outline {
background: transparent;
box-shadow: inset 0 0 0 1px var(--fill-secondary);
}
@media (hover: hover) {
.btn--outline:hover {
background: var(--background-secondary-hover);
}
}
.btn--outline:active {
background: var(--background-secondary-active);
}
section + section {
margin-top: 3.5rem;
padding-top: 3.5rem;
border-top: var(--border-width) solid var(--fill-tertiary);
}
h2 {
font-size: var(--font-body-large-size);
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 0.75rem;
}
.section-note {
color: var(--ink-primary);
font-size: 0.9375rem;
max-width: var(--measure);
margin: 0.25rem 0 0;
}
/* Inline text links in prose: medium-weight ink text (same when visited), an
ink-tertiary underline that lifts to ink-primary on hover. */
.section-note a,
.lede a {
color: var(--ink-primary);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--ink-tertiary);
text-underline-offset: 2px;
/* Rounds the focus ring a touch. */
border-radius: 4px;
transition: text-decoration-color var(--motion-default);
}
@media (hover: hover) {
.section-note a:where(:hover),
.lede a:where(:hover) {
text-decoration-color: var(--ink-primary);
}
}
/* Inline + block code samples, uses --fill-quaternary alpha tint so the chip
contrasts against any surface it's placed on (whether that's the tinted page
or an elevated card). */
code {
font-family: var(--mono);
font-size: 0.8125rem;
padding: 0.1rem 0.3rem;
background: var(--fill-quaternary);
border: 0;
border-radius: 4px;
}
.code-block {
position: relative;
margin: 0 0 1rem;
}
/* In a component section the grid gap handles rhythm, so the code card's own
bottom margin would just be dead space below the surface. */
.preview-block .code-block {
margin-bottom: 0;
}
pre {
margin: 0;
padding: 0.875rem 0;
background: var(--background-secondary);
border: 0;
border-radius: var(--radius-md);
overflow-x: auto;
scrollbar-width: none;
}
/* Chrome makes horizontally-scrollable
keyboard-focusable (to scroll it);
the shared :where ring already covers it. */
pre::-webkit-scrollbar {
display: none;
}
/* Copy button auto-injected by app.js on every