/* ========================================================================= Design System — component layer ========================================================================= Every rule in this file references a custom property and nothing else. There is not one literal colour, radius, shadow or spacing value below (outside the reset), which is why this file is identical for every theme and can be cached indefinitely: switching from Atlas to Graphite changes the generated token block in , never this stylesheet. If you find yourself wanting to add a hex code here, the token is missing. Add it to config/design.php instead. The written rationale is in DESIGN-GUIDE.md. Contents 01 Fonts 02 Reset & base 03 Typography 04 App shell 05 Sidebar & topbar 06 Page header 07 Cards & surfaces 08 Buttons 09 Form controls 10 Badges & pills 11 Tables 12 Stats & metrics 13 Modal, drawer, popover 14 Tabs & segmented control 15 Alerts & toasts 16 Avatar 17 Empty & loading states 18 Charts 19 Maps 20 Boards & timelines 21 Utilities 22 Motion & accessibility ========================================================================= */ /* 01 · Fonts ============================================================== */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif Variable'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/source-serif-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 02 · Reset & base ======================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--root-size); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); letter-spacing: var(--tracking-base); color: var(--text-primary); background: var(--surface-page); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-ligatures: contextual common-ligatures; text-rendering: optimizeLegibility; } /* Tabular figures everywhere numbers are compared to each other. Proportional digits make a column of numbers ragged, which is the sort of small wrongness that makes an interface feel unconsidered. */ table, .stat-value, .metric, .tabular { font-variant-numeric: tabular-nums; } img, svg, video, canvas { display: block; max-width: 100%; } /* The `hidden` attribute has to beat whatever display a class sets. The UA rule for it is a bare `[hidden] { display: none }`, so any component class with `display: flex` silently wins and the element stays on screen — which for something like a revealed secret is not a cosmetic bug. */ [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--text-brand); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } hr { border: 0; border-top: var(--border-width) solid var(--border-subtle); } ::selection { background: var(--surface-selected); color: var(--text-primary); } /* One focus treatment for the whole product. Never remove it without replacing it — keyboard users have no other way to know where they are. */ :focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; border-radius: var(--radius-xs); } :focus:not(:focus-visible) { outline: none; } .ui-icon { flex: none; stroke: currentColor; } /* 03 · Typography ========================================================= */ .display { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-display); font-weight: var(--weight-display); color: var(--text-primary); } .title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); letter-spacing: var(--tracking-display); font-weight: var(--weight-display); } .heading { font-size: var(--text-lg); line-height: var(--leading-lg); letter-spacing: var(--tracking-lg); font-weight: var(--weight-heading); } .subheading { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-heading); } /* The small label above a value or a group. `--eyebrow-transform` is what makes Graphite shout in uppercase and Atlas stay sentence case. */ .eyebrow { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-ui); letter-spacing: var(--eyebrow-tracking); text-transform: var(--eyebrow-transform); color: var(--text-tertiary); } .body-sm { font-size: var(--text-sm); line-height: var(--leading-sm); } .muted { color: var(--text-secondary); } .subtle { color: var(--text-tertiary); } .mono { font-family: var(--font-mono); font-size: var(--text-xs); } /* Long-form text gets a measure. Past about 75 characters the eye loses the start of the next line. */ .prose { max-width: 68ch; } .prose p + p { margin-top: var(--space-3); } /* 04 · App shell ========================================================== */ .app-shell { display: flex; min-height: 100vh; align-items: stretch; } .app-main { flex: 1; min-width: 0; /* lets tables scroll instead of stretching the layout */ display: flex; flex-direction: column; } .app-content { flex: 1; padding: var(--page-pad-y) var(--page-pad-x) var(--space-16); width: 100%; } .app-content > .content-width { max-width: var(--content-max); margin-inline: auto; width: 100%; } /* Topbar-nav themes centre their content; sidebar themes let it run wide, because the sidebar already provides the left margin. */ [data-nav="topbar"] .app-content > .content-width { max-width: var(--content-max); } .section + .section { margin-top: var(--section-gap); } /* 05 · Sidebar & topbar =================================================== */ .sidebar { width: var(--sidebar-w); flex: none; background: var(--surface-chrome); border-right: var(--border-width) solid var(--border-chrome); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: var(--z-sticky); } .sidebar-head { height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-2-5); padding-inline: var(--space-4); flex: none; } .sidebar-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-2) var(--space-3) var(--space-4); } .sidebar-foot { flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-top: var(--border-width) solid var(--border-chrome); } /* Anything sitting on the chrome takes its colours from the chrome, not from the page. Without this a brand-tinted avatar disappears against a dark sidebar — near-black initials on a near-black disc. */ .sidebar .avatar, .topbar .avatar { background: var(--surface-chrome-selected); color: var(--text-on-chrome-active); } .sidebar .segmented { background: var(--surface-chrome-hover); border-color: var(--border-chrome); } .sidebar .segmented button { color: var(--text-on-chrome-muted); flex: 1; justify-content: center; } .sidebar .segmented button:hover { color: var(--text-on-chrome-active); } .sidebar .segmented button[aria-pressed="true"] { background: var(--surface-chrome); color: var(--text-on-chrome-active); } .nav-group + .nav-group { margin-top: var(--space-5); } .nav-group-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-chrome-muted); padding: 0 var(--space-2-5) var(--space-1-5); } .nav-item { display: flex; align-items: center; gap: var(--space-2-5); height: var(--control-height-md); /* Also used as a