/* GENERATED by build.sh โ edit src/css/*.css instead */
/* ---- src/css/theme-toggle.css ---- */
/* Base reset for the button so apps can style it how they want */
.theme-toggle-btn {
cursor: pointer;
background: none;
border: none;
padding: 0;
font: inherit;
font-weight: var(--font-weight-medium);
color: inherit;
}
/* Use a pseudo-element to set the button content */
.theme-toggle-btn::before {content: "๐"; font-family: var(--font-symbol);}
.theme-toggle-btn::after {content: "Toggle Theme";}
[data-theme="dark"] .theme-toggle-btn::after { content: "Light Mode"; }
[data-theme="light"] .theme-toggle-btn::after { content: "Dark Mode"; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle-btn::after { content: "Light Mode"; }
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .theme-toggle-btn::after { content: "Dark Mode"; }
}
/* ---- src/css/charter.css ---- */
/* -----------------------------------------------------------------------------
Font subsetting strategy
Bitstream Charter (4 faces): full faces load transparently.
(Subset removed as payload savings were minimal, ~3-4kb per font).
------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* regular */
@font-face {
font-family: 'Bitstream Charter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/charter/charter_regular-v01.woff2') format('woff2');
}
/* -------------------------------------------------------------------------- */
/* bold */
@font-face {
font-family: 'Bitstream Charter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/charter/charter_bold-v01.woff2') format('woff2');
}
/* -------------------------------------------------------------------------- */
/* italic */
@font-face {
font-family: 'Bitstream Charter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/charter/charter_italic-v01.woff2') format('woff2');
}
/* -------------------------------------------------------------------------- */
/* bold italic */
@font-face {
font-family: 'Bitstream Charter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('../fonts/charter/charter_bold_italic-v01.woff2') format('woff2');
}
/* ---- src/css/concourse.css ---- */
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 200;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_2_thin-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 200;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_2_thin_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 200;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_2_thin_italic-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 200;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_2_thin_italic_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 400;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_3_book-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 400;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_3_book_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 400;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_3_book_italic-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 400;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_3_book_italic_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 500;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_4_medium-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 500;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_4_medium_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 500;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_4_medium_italic-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 500;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_4_medium_italic_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 600;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_6_semibold-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 600;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_6_semibold_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 600;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_6_semibold_italic-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 600;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_6_semibold_italic_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 700;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_7_bold-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 700;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_7_bold_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 700;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_7_bold_italic-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 700;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_7_bold_italic_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 800;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_8_black-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: normal;
font-weight: 800;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_8_black_tiny-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 800;
font-display: swap;
size-adjust: 110%;
src: url('../fonts/concourse/concourse_ot_8_black_italic-v01.woff2') format('woff2');
}
@font-face {
font-family: 'Concourse';
font-style: italic;
font-weight: 800;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AC, U+00AD, U+00AE, U+00B0, U+00B1, U+00B7, U+00D7, U+2010, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026, U+2039, U+203A, U+2122, U+2190-2199, U+2212;
src: url('../fonts/concourse-tiny/concourse_ot_8_black_italic_tiny-v01.woff2') format('woff2');
}
/* ---- src/css/base.css ---- */
/* -------------------------------------------------------------------------- */
/* typography */
:root {
--font-serif: "Bitstream Charter", Georgia, "Times New Roman", Times, serif;
--font-sans: "Concourse", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-symbol: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
--font-weight-hairline: 100;
--font-weight-thin: 200; /*2 = thin*/
--font-weight-light: 300;
--font-weight-regular: 400; /*3 = book*/
--font-weight-medium: 500; /*4 = medium*/
--font-weight-heavy: 600; /*6 = semibold*/
--font-weight-bold: 700; /*7 = bold*/
--font-weight-black: 800; /*8 = black*/
--all-caps-space: .08em;
--all-caps-word-space: 0.12em;
--line-height-serif: 1.45;
--line-height-sans: 1.35;
--font-size-hugge: 36pt;
--font-size-huge: 24pt;
--font-size-bigger: 21pt;
--font-size-big: 18pt;
--font-size-larger: 16pt;
--font-size-large: 14pt;
--font-size-normal: 12pt;
--font-size-small: 10pt;
--font-size-smaller: 9pt;
--font-size-tiny: 8pt;
--border-radius: 10px;
--border-radius-large: 14px;
--hover-transition: 0.2s ease-in-out;
}
.weight-thin { font-weight: var(--font-weight-thin); }
.weight-light { font-weight: var(--font-weight-light); }
.weight-regular { font-weight: var(--font-weight-regular); }
.weight-medium { font-weight: var(--font-weight-medium); }
.weight-heavy { font-weight: var(--font-weight-heavy); }
.weight-bold { font-weight: var(--font-weight-bold); }
.weight-black { font-weight: var(--font-weight-black); }
.size-hugge { font-size: var(--font-size-hugge); }
.size-huge { font-size: var(--font-size-huge); }
.size-bigger { font-size: var(--font-size-bigger); }
.size-big { font-size: var(--font-size-big); }
.size-larger { font-size: var(--font-size-larger); }
.size-large { font-size: var(--font-size-large); }
.size-normal { font-size: var(--font-size-normal); }
.size-small { font-size: var(--font-size-small); }
.size-smaller { font-size: var(--font-size-smaller); }
.size-tiny { font-size: var(--font-size-tiny); }
.mono { font-family: var(--font-mono); }
.sans { font-family: var(--font-sans); }
.serif { font-family: var(--font-serif); }
.symbol { font-family: var(--font-symbol); }
/* TODO: font size scale */
/* -------------------------------------------------------------------------- */
/* spacing scale */
:root {
/* spacing scale */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
/* layout */
--maxw: 72rem; /* overall container max width */
--readw: 62ch; /* ideal text line length */
--truncw: 31ch;
}
/* spacing utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-7 { margin-bottom: var(--space-7) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-5 { margin-left: var(--space-5) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-7 { margin-left: var(--space-7) !important; }
.ml-8 { margin-left: var(--space-8) !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-5 { margin-right: var(--space-5) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-7 { margin-right: var(--space-7) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.pad-1 { padding: var(--space-1) !important; }
.pad-2 { padding: var(--space-2) !important; }
.pad-3 { padding: var(--space-3) !important; }
.pad-4 { padding: var(--space-4) !important; }
.pad-5 { padding: var(--space-5) !important; }
.pad-6 { padding: var(--space-6) !important; }
.pad-7 { padding: var(--space-7) !important; }
.pad-8 { padding: var(--space-8) !important; }
/* -------------------------------------------------------------------------- */
/* hide-only-visually helper */
/* Visually hide while keeping content accessible to assistive tech.
Use for: skip links, helper text for screen readers, form controls that
are "re-skinned" (e.g., radio inputs behind custom tabs), and any content
that should be announced but not seen.
Why: avoids display:none/visibility:hidden (which remove from the
accessibility tree) while keeping elements focusable and operable. */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border: 0;
/* `clip` is deprecated but still broad; `clip-path` is the modern form. */
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
/* Same as above, but only hidden when *not* focused/active.
Use for: "Skip to content" links that should appear when tabbed to. */
.visually-hidden-focusable:not(:focus):not(:active) {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
/* -------------------------------------------------------------------------- */
/* baseline reset */
*,
*::before,
*::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-serif);
font-size: var(--font-size-normal);
line-height: var(--line-height-serif);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas { max-width: 100%; height: auto; }
img { display: block; }
:focus-visible {
outline: none;
/* outline: 2px solid var(--focus); */
/* outline-offset: 3px; */
box-shadow: var(--focus-ring);
}
a {
color: var(--link);
text-decoration: none;
}
a:hover { text-decoration: underline; }
code, pre, kbd, samp {
font-family: var(--font-mono);
font-size: var(--font-size-small);
}
pre {
/* background: var(--surface); */
background: var(--bg);
padding: var(--space-4);
border-radius: var(--border-radius);
overflow: auto;
border: 1px solid var(--border);
}
/* -------------------------------------------------------------------------- */
/* motion preferences */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* -------------------------------------------------------------------------- */
/* Print styles */
@media print {
:root {
--bg: #ffffff;
--text: #000000;
--border: #d1d5db;
}
body {
background: #fff;
color: #000;
}
a {
color: inherit;
text-decoration: none;
}
.btn, .badge {
box-shadow: none;
}
/* .footer { */
/* border-top: 0; */
/* } */
}
/* ---- src/css/color_theme.css ---- */
:root {
--brand-0: #e3f2ec;
--brand-10: #c8e4d8;
--brand-20: #acd7c5;
--brand-30: #91cab1;
--brand-40: #75bd9e;
--brand-50: #5aaf8a;
--brand-100: #50a580;
--brand-200: #499775;
--brand-300: #428a6b;
--brand-400: #3c7c60;
--brand-500: #326750;
/*hunter green*/
--brand-600: #2e604b;
--brand-700: #285340;
--brand-800: #214535;
--brand-900: #1b372b;
--brand: var(--brand-500);
--brand-dark: var(--brand-700);
--brand-light: var(--brand-300);
/* Neutral scale */
--neutral-20: #f3f5f7;
--neutral-30: #e7ebee;
--neutral-40: #dbe2e6;
--neutral-50: #ced8de;
--neutral-100: #b6c4cd;
--neutral-200: #9eb1bd;
--neutral-300: #869dac;
--neutral-400: #6d899c;
--neutral-500: #5b7486;
--neutral-600: #4a5f6d;
--neutral-700: #36454f;
/*charcoal*/
--neutral-800: #29353d;
--neutral-900: #192024;
/* surface */
--surface-0: #fdfbf7;
/*baby powder*/
--surface-1: #fbf7ef;
/*floral white*/
--surface-50: #faf4e8;
--surface-100: #f8efde;
/*old lace*/
--surface-200: #f4e6cd;
--surface-300: #f1debc;
--surface-400: #edd6ab;
--surface-500: #eace9a;
--surface-600: #e6c689;
--surface-700: #e2bd78;
--surface-800: #dfb568;
--surface-900: #dbad57;
--dsurface-0: #91dff3;
--dsurface-10: #6cd5ef;
--dsurface-20: #47caeb;
--dsurface-30: #23bfe7;
--dsurface-40: #16a6ca;
--dsurface-50: #1398b9;
--dsurface-100: #1188a6;
--dsurface-200: #107994;
/*cerulean*/
--dsurface-300: #0e6a81;
--dsurface-400: #0c5b6f;
--dsurface-500: #0a4c5c;
--dsurface-600: #073642;
/*midnight green*/
--dsurface-700: #062d37;
--dsurface-800: #041e25;
--dsurface-900: #020f12;
/* TODO: alert scale */
/* for plots */
--plot-brand: var(--brand-500);
--plot-goldenrod: #b8860b;
/* darkgoldenrod */
--plot-firebrick: #b22222;
--plot-midnight: #191970;
color-scheme: light dark;
}
/* ---------- Color system (light) ---------- */
:root {
/* Base */
--bg: var(--surface-0);
--text: var(--neutral-800);
--muted-text: var(--neutral-400);
--border: var(--surface-200);
--border-strong: var(--surface-400);
--neutral-border: var(--neutral-100);
--light-surface: var(--surface-50);
--dark-surface: var(--surface-200);
--contrast-surface: var(--dark-surface);
--surface: var(--surface-100);
--select-arrow: url("data:image/svg+xml;utf8,");
--navbar: var(--neutral-700);
--navbar-text: #f4f7f9;
/* --navbar-text: var(--brand-0); */
/* Accent */
--accent: var(--brand-600);
--accent-hover: var(--brand-800);
--accent-active: var(--brand-900);
--accent-contrast: #ffffff;
--highlight: var(--brand-50);
--accent-muted-bg: var(--brand-10);
--accent-muted-solid: var(--brand-10);
--accent-border: var(--brand-400);
--accent-muted-border: var(--brand-200);
/* secondary */
--secondary: var(--neutral-50);
--secondary-hover: var(--neutral-100);
--secondary-active: var(--neutral-200);
/* Links & focus */
--link: var(--brand-700);
--link-hover: var(--brand-600);
--link-hover-bg: var(--brand-0);
--focus: var(--brand-500);
--focus-ring: 0 0 4px 2px color-mix(in srgb, var(--focus) 75%, transparent);
/* Controls */
--control: var(--surface-200);
--control-hover: var(--surface-300);
--control-active: var(--surface-400);
--control-border: var(--surface-500);
--control-fg: var(--neutral-800);
--neutral-control: var(--neutral-50);
/* Status */
--pos: #148f6a;
--neu: #64748b;
--warn: #b26e2d;
--neg: #b5382f;
/* Shadows */
--shadow-0: 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-1: 4px 8px 24px rgba(0, 0, 0, 0.10);
--shadow-2: 8px 16px 32px rgba(0, 0, 0, 0.12);
/* Charts */
--chart-fg: var(--text);
--chart-grid: color-mix(in srgb, var(--text) 12%, transparent);
--chart-1: var(--plot-brand);
--chart-2: var(--plot-goldenrod);
--chart-3: var(--plot-firebrick);
--chart-4: var(--plot-midnight);
--chart-5: #a855f7;
--chart-6: #16a34a;
--chart-7: #f59e0b;
--chart-8: #e11d48;
--chart-9: #4f46e5;
/* --chart-4: #0ea5e9; */
/* --chart-6: #ef4444; */
/* --chart-8: #14b8a6; */
/* Alerts (subtle on light) */
--alert-bg: #fdecec;
--alert-border: #f3b3b3;
--alert-text: #7f1d1d;
--alert-icon: #b91c1c;
/* Success messages (subtle on light) */
--success-bg: #ecfdf3;
--success-border: #86efac;
--success-text: #14532d;
--success-icon: #16a34a;
}
/* ---------- Color system (dark variables macro) ---------- */
:root[data-theme="dark"] {
/* Base */
--bg: var(--dsurface-700);
--text: #e7edf3;
--muted-text: #9aa7b4;
--border: var(--dsurface-500);
--border-strong: var(--dsurface-400);
--light-surface: var(--dsurface-500);
--dark-surface: var(--dsurface-800);
--contrast-surface: var(--light-surface);
--surface: var(--dsurface-600);
--select-arrow: url("data:image/svg+xml;utf8,");
--navbar: var(--neutral-700);
--navbar-text: #dbe3ea;
/* Accent */
--accent: var(--brand-300);
--accent-contrast: #ffffff;
--highlight: var(--brand-800);
--accent-muted-bg: color-mix(in srgb, var(--accent) 18%, transparent);
--accent-muted-solid: color-mix(in srgb, var(--accent) 18%, var(--bg));
--accent-border: var(--brand-500);
/* secondary */
--secondary: var(--neutral-800);
--secondary-hover: var(--neutral-700);
--secondary-active: var(--neutral-600);
/* Links & focus */
--link: var(--brand-300);
--link-hover: var(--brand-200);
--link-hover-bg: color-mix(in srgb, var(--brand-300) 30%, transparent);
--focus: var(--brand-300);
--focus-ring: 0 0 6px 3px color-mix(in srgb, var(--focus) 90%, transparent);
/* Controls */
--control-fg: var(--text);
--control: color-mix(in srgb, var(--dsurface-500) 50%, var(--dsurface-600));
--control-hover: var(--dsurface-500);
--control-active: var(--dsurface-600);
--control-border: var(--dsurface-300);
/* Status */
--pos: #34d399;
--neu: #94a3b8;
--warn: #f59e0b;
--neg: #f87171;
/* Shadows */
--shadow-0: 0 1px 2px rgba(0, 0, 0, 0.55);
--shadow-1: 0 8px 24px rgba(0, 0, 0, 0.55);
--shadow-2: 0 16px 32px rgba(0, 0, 0, 0.50);
/* Charts */
--chart-fg: var(--text);
--chart-grid: color-mix(in srgb, var(--text) 22%, transparent);
/* keep same hues, lift luminance for contrast on dark */
--chart-1: color-mix(in srgb, var(--plot-brand) 78%, #ffffff);
--chart-2: color-mix(in srgb, var(--plot-goldenrod) 78%, #ffffff);
--chart-3: color-mix(in srgb, var(--plot-firebrick) 78%, #ffffff);
--chart-4: color-mix(in srgb, var(--plot-midnight) 78%, #ffffff);
--chart-5: #c084fc;
--chart-6: #22c55e;
--chart-7: #f87171;
--chart-8: #38bdf8;
--chart-9: #f59e0b;
/* --chart-2: #6366f1; */
/* --chart-3: #fb7185; */
/* --chart-8: #2dd4bf; */
/* Alerts (high-contrast on dark) */
--alert-bg: #3f1414;
--alert-border: #991b1b;
--alert-text: #fecaca;
--alert-icon: #f87171;
/* Success messages (high-contrast on dark) */
--success-bg: #0f2417;
--success-border: #166534;
--success-text: #bbf7d0;
--success-icon: #86efac;
}
/* ---------- Color system (dark default) ---------- */
/* Duplicated for no-JS environments: this ensures the site properly respects
OS-level dark mode even when JavaScript is completely disabled. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Base */
--bg: var(--dsurface-700);
--text: #e7edf3;
--muted-text: #9aa7b4;
--border: var(--dsurface-500);
--border-strong: var(--dsurface-400);
--light-surface: var(--dsurface-500);
--dark-surface: var(--dsurface-800);
--contrast-surface: var(--light-surface);
--surface: var(--dsurface-600);
--select-arrow: url("data:image/svg+xml;utf8,");
--navbar: var(--neutral-700);
--navbar-text: #dbe3ea;
/* Accent */
--accent: var(--brand-300);
--accent-contrast: #ffffff;
--highlight: var(--brand-800);
--accent-muted-bg: color-mix(in srgb, var(--accent) 18%, transparent);
--accent-muted-solid: color-mix(in srgb, var(--accent) 18%, var(--bg));
--accent-border: var(--brand-500);
/* secondary */
--secondary: var(--neutral-800);
--secondary-hover: var(--neutral-700);
--secondary-active: var(--neutral-600);
/* Links & focus */
--link: var(--brand-300);
--link-hover: var(--brand-200);
--link-hover-bg: color-mix(in srgb, var(--brand-300) 15%, transparent);
--focus: var(--brand-300);
--focus-ring: 0 0 6px 3px color-mix(in srgb, var(--focus) 90%, transparent);
/* Controls */
--control-fg: var(--text);
--control: color-mix(in srgb, var(--dsurface-500) 50%, var(--dsurface-600));
--control-hover: var(--dsurface-500);
--control-active: var(--dsurface-800);
--control-border: var(--dsurface-300);
/* Status */
--pos: #34d399;
--neu: #94a3b8;
--warn: #f59e0b;
--neg: #f87171;
/* Shadows */
--shadow-0: 0 1px 2px rgba(0, 0, 0, 0.55);
--shadow-1: 0 8px 24px rgba(0, 0, 0, 0.55);
--shadow-2: 0 16px 32px rgba(0, 0, 0, 0.50);
/* Charts */
--chart-fg: var(--text);
--chart-grid: color-mix(in srgb, var(--text) 22%, transparent);
--chart-1: color-mix(in srgb, var(--plot-brand) 78%, #ffffff);
--chart-2: color-mix(in srgb, var(--plot-goldenrod) 78%, #ffffff);
--chart-3: color-mix(in srgb, var(--plot-firebrick) 78%, #ffffff);
--chart-4: color-mix(in srgb, var(--plot-midnight) 78%, #ffffff);
--chart-5: #c084fc;
--chart-6: #22c55e;
--chart-7: #f87171;
--chart-8: #38bdf8;
--chart-9: #f59e0b;
/* Alerts (high-contrast on dark) */
--alert-bg: #3f1414;
--alert-border: #991b1b;
--alert-text: #fecaca;
--alert-icon: #f87171;
/* Success messages (high-contrast on dark) */
--success-bg: #0f2417;
--success-border: #166534;
--success-text: #bbf7d0;
--success-icon: #86efac;
}
}
/* ---------- Theme Image Toggles ---------- */
.dark-logo {
display: none;
}
.light-logo {
display: inline-block;
}
:root[data-theme="dark"] .light-logo {
display: none;
}
:root[data-theme="dark"] .dark-logo {
display: inline-block;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .light-logo {
display: none;
}
:root:not([data-theme="light"]) .dark-logo {
display: inline-block;
}
}
/* ---- src/css/typography.css ---- */
/* -------------------------------------------------------------------------- */
/* Global mappings */
html, body {
font-size: var(--font-size-normal);
}
body {
font-weight: var(--font-weight-regular);
/* -webkit-font-smoothing: subpixel-antialiased; NB set in base.css */
}
h1, h2, h3, h4 {
line-height: 1.15;
margin: 0 0 var(--space-4);
letter-spacing: -0.01em;
}
h1 { font-size: var(--font-size-hugge); }
h2 { font-size: var(--font-size-huge); }
h3 { font-size: var(--font-size-big); }
h4 { font-size: var(--font-size-large); }
p { margin: 0 0 var(--space-4); color: var(--text); }
h1 {
margin-top: var(--space-6);
text-align: center;
}
h2 {
/* h2 defaults to a spaced low small caps */
font-weight: var(--font-weight-black);
/* text-transform: lowercase; */
/* letter-spacing: 0.1em; */
/* font-variant-caps: small-caps; */
font-style: italic;
}
h2.plain {
text-transform: none;
font-variant-caps: normal;
letter-spacing: -0.01em; /*normal*/
}
h3 {
font-weight: var(--font-weight-bold);
font-style: italic;
}
.hero-inner h1 {
font-weight: var(--font-weight-black);
}
/* -------------------------------------------------------------------------- */
/* paragraph types */
.subhead {
color: var(--muted-text);
font-size: var(--font-size-larger);
max-width: var(--readw);
}
.note {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border: 1.5px solid var(--neutral-border);
border-radius: var(--border-radius);
/* background: var(--surface); */
background: color-mix(in srgb, var(--accent) 6%, transparent);
color: var(--muted-text);
font-size: var(--font-size-small);
font-style: italic;
}
.note strong {
color: color-mix(in srgb, var(--text) 85%, transparent);
font-style: normal;
}
.note p:last-child {
margin-bottom: 0;
}
.hint {
margin: var(--space-2) 0 0;
color: var(--muted-text);
font-family: var(--font-sans);
font-weight: var(--font-weight-light);
font-size: var(--font-size-small);
}
/* -------------------------------------------------------------------------- */
/* Text utilities & weights */
.kicker {
text-transform: uppercase;
letter-spacing: var(--all-caps-space);
word-spacing: var(--all-caps-word-space);
font-size: var(--font-size-smaller);
color: var(--muted-text);
}
.small { font-size: var(--font-size-small); }
.emph { font-style: italic; }
.spaced-all-caps {
text-transform: uppercase;
letter-spacing: var(--all-caps-space);
word-spacing: var(--all-caps-word-space);
font-weight: var(--font-weight-bold);
}
.muted, figcaption { font-weight: var(--font-weight-light); }
.kicker, .overline { font-weight: var(--font-weight-medium); }
/* Brand/logo styles */
.logo-pre {
font-weight: 700;
text-transform: capitalize;
letter-spacing: -0.01em;
font-variant-caps: normal;
color: var(--accent-600);
}
.logo-post {
font-weight: 200;
text-transform: uppercase;
letter-spacing: -0.05em;
font-variant-caps: normal;
color: var(--accent-300);
}
.kern-a {
margin-left: -0.08em;
margin-right: -0.08em;
}
.logo {
font-family: var(--font-sans);
font-style: normal;
display: inline-flex;
/* gap: .125em; */
gap: 0.05em;
}
a.brand {
background: none;
display: inline-flex;
align-items: center;
gap: 0.25rem; /*space between logo words*/
text-decoration: none;
}
a.brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.logo--nav { font-size: var(--font-size-big); line-height: 1; }
/* ---- src/css/layout.css ---- */
/* -------------------------------------------------------------------------- */
/* sticky topnav height */
/* (JS may refine this at runtime based on actual rendered size) */
:root {
--header-h: 56px; /* mobile */
--anchor-gap: 16px; /* room under the header when jumping */
}
@media (min-width: 48rem) {
:root { --header-h: 64px; } /* desktop */
}
/* -------------------------------------------------------------------------- */
/* page layout */
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--space-5);
}
main > .container > section {
padding: var(--space-8) 0;
border-top: 1.5px solid var(--neutral-border);
}
main > .container > section:first-child {
border-top: 0;
}
/* -------------------------------------------------------------------------- */
/* bands */
.band {
padding-block: var(--space-8);
}
.band--tint {
background: var(--accent-muted-bg);
border-block: 1.5px solid var(--neutral-border);
padding-left: var(--space-8) !important;
}
/* -------------------------------------------------------------------------- */
/* header & footer */
.site-header {
/* fixed position at the of page */
min-height: var(--header-h);
position: sticky;
top: 0;
z-index: 20;
background: var(--navbar);
color: var(--navbar-text);
border-bottom: 1.5px solid var(--neutral-border);
font-family: var(--font-sans);
font-size: var(--font-size-small);
}
.site-header nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) 0;
}
@media (max-width: 72rem){ /* NB should match --maxw but variables dont resolve here*/
.site-header nav {
padding: var(--space-3) var(--space-3);
}
}
.site-header nav a {
font-weight: var(--font-weight-medium);
display: inline-flex;
align-items: center;
gap: .25rem;
color: var(--navbar-text);
/* background-image: linear-gradient(transparent 30%, color-mix(in srgb, var(--navbar-text) 40%, transparent)); */
background-image: none;
text-decoration: none;
}
.site-header nav a:hover {
background: color-mix(in srgb, var(--navbar-text) 20%, transparent);
box-shadow: 0 0 25px color-mix(in srgb, var(--navbar-text) 50%, transparent);
text-decoration: none;
}
.site-header a.btn-primary:hover {
background: var(--brand-400);
}
.site-header a.btn-primary:active {
background: var(--brand-300);
}
.site-header ul { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-header li { display: flex; align-items: center; }
.footer .container { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 48rem) {
.footer .container { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer {
margin-top: var(--space-7);
padding: var(--space-6) 0;
color: var(--muted-text);
border-top: 1.5px solid var(--neutral-border);
font-size: var(--font-size-small);
font-weight: var(--font-weight-light);
}
/* -------------------------------------------------------------------------- */
/* hero section */
section#hero {
padding: clamp(3rem, 8vw, 8rem) 0;
}
section#hero .subhead {
margin-top: var(--space-3);
}
/* Utilities --------------------------------------------------------------- */
.no-wrap { white-space: nowrap; }
.indent {margin-left: var(--space-8);}
.indent-half {margin-left: var(--space-6);}
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; } /* optional, handy */
.lead {
font-size: var(--font-size-large);
color: var(--muted-text);
font-weight: var(--font-weight-light);
}
.muted { color: var(--muted-text); }
.max-read { max-width: var(--readw); }
.read { width: var(--readw); }
.max-w-720 { max-width: 720px; }
.fit { width: fit-content; max-width: 100%; }
.spacer { height: var(--space-6); }
@media (max-width: 950px) {
.hide-tablet {
display: none!important;
}
}
@media (max-width: 600px) {
.hide-mobile {
display: none!important;
}
}
.wordspace {
margin-right: var(--all-caps-word-space);
}
/* ---- src/css/components.css ---- */
/* -------------------------------------------------------------------------- */
/* surfaces / cards */
.card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--border-radius-large);
box-shadow: var(--shadow-1);
padding: var(--space-5);
}
.card:hover { box-shadow: var(--shadow-2); }
.card {
display: flex;
flex-direction: column;
}
.card h3 {
font-weight: var(--font-weight-light);
/* text-transform: uppercase; */
/* letter-spacing: var(--all-caps-space); */
/* word-spacing: var(--all-caps-word-space); */
}
/* footer block sits at the bottom; center contents */
.card__footer {
margin-top: auto;
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-3); /* room if you add a button next to the badge */
}
/* -------------------------------------------------------------------------- */
/* Grid */
.grid {
display: grid;
gap: var(--space-5);
padding: 0 20px;
}
@media (min-width: 48rem) {
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* -------------------------------------------------------------------------- */
/* KPIs */
.kpi-row {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi-row.autofit {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
}
@media (max-width: 900px) {
.kpi-row {
grid-template-columns: 1fr;
}
}
.kpi {
text-align: center;
padding: var(--space-4);
}
.kpi .value {
font-family: var(--font-sans);
font-weight: var(--font-weight-black);
font-size: var(--font-size-huge);
color: var(--accent);
line-height: 1;
}
.kpi .label {
font-family: var(--font-sans);
font-weight: var(--font-weight-medium);
margin-top: var(--space-1);
}
.kpi .note {
font-family: var(--font-sans);
font-weight: var(--font-weight-light);
color: var(--muted-text);
margin-top: calc(0.5 * var(--space-1));
}
/* -------------------------------------------------------------------------- */
/* Badges (e.g. signal labels) */
.badge {
display: inline-block;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-smaller);
line-height: 1;
padding: var(--space-1) var(--space-2);
border-radius: 999px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--muted-text);
}
/* Badges/labels */
.badge--primary {
background: var(--accent);
color: var(--accent-contrast);
border-color: color-mix(in srgb, var(--accent) 80%, black);
}
.badge--pos {
background: color-mix(in srgb, var(--pos) 12%, var(--surface));
color: var(--pos);
border-color: color-mix(in srgb, var(--pos) 35%, var(--border));
}
.badge--neu {
background: color-mix(in srgb, var(--neu) 12%, var(--surface));
color: var(--neu);
border-color: color-mix(in srgb, var(--neu) 35%, var(--border));
}
.badge--neg {
background: color-mix(in srgb, var(--neg) 12%, var(--surface));
color: var(--neg);
border-color: color-mix(in srgb, var(--neg) 35%, var(--border));
}
/* -------------------------------------------------------------------------- */
/* chips (or tags) */
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
margin-top: var(--space-3);
}
.chip {
padding: var(--space-1) var(--space-4);
border-radius: 999px;
background: var(--accent-muted-bg);
border: 1.5px solid var(--accent-border);
font-weight: var(--font-weight-medium);
}
/* -------------------------------------------------------------------------- */
/* alerts */
/* Component */
.success, .alert {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-4);
color: var(--alert-text);
background: var(--alert-bg);
border: 1.5px solid var(--alert-border);
border-radius: var(--border-radius);
box-shadow: var(--shadow-2);
}
.success .success__icon, .alert .alert__icon {
flex: none;
margin-top: 2px;
color: var(--alert-icon);
}
.success {
background: var(--success-bg);
border: 1px solid var(--success-border);
color: var(--success-text);
}
.success .success__icon {
color: var(--success-icon);
}
.expiring-soon, .expired {
color: var(--alert-text);
background: var(--alert-bg);
font-weight: var(--font-weight-black);
}
/* -------------------------------------------------------------------------- */
/* Dropzone */
.dropzone{
position: relative;
border: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent);
border-radius: var(--border-radius);
background: color-mix(in srgb, var(--accent) 15%, transparent);
padding: var(--space-5);
text-align: center;
}
.dropzone input[type=file]{
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
}
.dropzone .dz-label{
font-weight: var(--font-weight-medium);
}
.dropzone .dz-sub {
margin-top: var(--space-1);
color: var(--muted-text);
font-size: var(--font-size-small);
}
.dropzone .dz-file {
margin-top: var(--space-2);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropzone .dz-actions { display: none; margin-top: var(--space-2); }
.dropzone.has-file .dz-actions { display: inline-flex; gap: var(--space-2); }
.dropzone.has-file .dz-label { opacity: .65; } /* subtle shift when selected */
.dropzone .dz-actions button { z-index: 100; }
/* -------------------------------------------------------------------------- */
/* details */
details summary {
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: var(--all-caps-space);
margin-bottom: var(--space-3);
}
details {
border: 1px solid var(--border);
background: var(--light-surface);
border-radius: var(--border-radius);
padding: var(--space-3);
}
/* -------------------------------------------------------------------------- */
/* stytch */
.stytch table.sessions {
font-size: 80%;
margin-top: var(--space-3);
}
div.oauth, div.email-magic-link {
margin-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
span.oauth-logo {
width: 24px;
height: 24px;
}
span.oauth-logo-link {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1rem;
padding: var(--space-1);
}
div.form-divider {
width: 100%;
display: flex;
flex-direction: row;
align-items: baseline;
}
div.form-divider span.left,
div.form-divider span.right{
flex-grow: 1;
border-bottom: 2px solid var(--muted-text);
}
div.form-divider span.left {
margin-right: var(--space-3);
}
div.form-divider span.right {
margin-left: var(--space-3);
}
div.form-divider span.text {
flex-grow: 0;
transform: translateY(0.1em);
}
/* -------------------------------------------------------------------------- */
/* API Keys */
.long-key {
white-space: normal;
word-break: break-all;
}
/* -------------------------------------------------------------------------- */
/* landing page logo */
.big-tree-logo {
max-height: 35vh;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* ---- src/css/buttons.css ---- */
/* -------------------------------------------------------------------------- */
/* Buttons */
.button-list { display: inline-flex; gap: var(--space-4); }
/* NB copy the same styling twice */
button.btn {
appearance: none;
font-size: var(--font-size-smaller);
font-family: var(--font-sans);
font-weight: var(--font-weight-normal);
text-transform: uppercase;
letter-spacing: var(--all-caps-space);
word-spacing: var(--all-caps-word-space);
font-weight: var(--font-weight-heavy);
}
.btn {
font-size: var(--font-size-smaller);
font-family: var(--font-sans);
font-weight: var(--font-weight-normal);
text-transform: uppercase;
letter-spacing: var(--all-caps-space);
word-spacing: var(--all-caps-word-space);
font-weight: var(--font-weight-heavy);
}
.btn-primary, .btn-ghost {
font-weight: var(--font-weight-heavy);
}
.btn {
/* display: inline-block; */
display: inline-flex;
justify-content: center;
align-items: center;
padding: var(--space-2) var(--space-4);
border-radius: var(--border-radius);
border: 1.5px solid transparent;
text-decoration: none;
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-0);
transition: var(--hover-transition);
}
.btn-big{
padding: var(--space-3) var(--space-4);
}
.btn:hover { box-shadow: var(--shadow-1); }
.btn-primary {
color: var(--accent-contrast);
background: var(--accent);
border: 1.5px solid color-mix(in srgb, var(--accent) 86%, black);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary {
background: var(--secondary);
color: var(--text);
border: 1.5px solid var(--text);
}
a.btn:hover {
text-decoration: none!important;
}
.btn-secondary:hover { background: var(--secondary-hover); }
.btn-secondary:active { background: var(--secondary-active); }
.btn-ghost {
background: transparent;
color: var(--link);
border: 1.5px solid var(--accent-border);
}
.btn-ghost:hover { background: var(--accent-muted-bg); }
a.inline, button.inline {
display: inline-block;
color: inherit;
padding: var(--space-1) var(--space-2);
border-radius: var(--space-2);
box-shadow: var(--shadow-0);
background-color: var(--secondary);
border: 1.5px solid var(--neutral-border);
text-align: center;
white-space: nowrap;
transition: var(--hover-transition);
font-weight: var(--font-weight-light);
font-size: 90%;
}
a.inline:hover, button.inline:hover {
background-color: var(--secondary-hover);
}
a.inline:active,
a.inline:focus,
button.inline:active,
button.inline:focus {
background-color: var(--secondary-active);
box-shadow: var(--shadow-1);
}
/* -------------------------------------------------------------------------- */
/* Semantic Action Buttons */
/* Destructive Action */
.btn-danger,
a.inline.btn-danger,
button.inline.btn-danger {
background: var(--alert-bg);
color: var(--alert-text);
border: 1.5px solid var(--alert-border);
}
.btn-danger:hover,
a.inline.btn-danger:hover,
button.inline.btn-danger:hover {
background: color-mix(in srgb, var(--alert-bg) 85%, var(--alert-icon));
border-color: var(--alert-icon);
color: var(--alert-text);
}
.btn-danger:active,
a.inline.btn-danger:active,
button.inline.btn-danger:active {
background: color-mix(in srgb, var(--alert-bg) 70%, var(--alert-icon));
}
/* Warning Action */
.btn-warn,
a.inline.btn-warn,
button.inline.btn-warn {
background: transparent;
color: var(--warn);
border: 1.5px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.btn-warn:hover,
a.inline.btn-warn:hover,
button.inline.btn-warn:hover {
background: color-mix(in srgb, var(--warn) 10%, transparent);
border-color: var(--warn);
}
.btn-warn:active,
a.inline.btn-warn:active,
button.inline.btn-warn:active {
background: color-mix(in srgb, var(--warn) 20%, transparent);
}
/* Neutral Action */
.btn-neu,
a.inline.btn-neu,
button.inline.btn-neu {
background: transparent;
color: var(--link);
border: 1.5px solid var(--accent-border);
}
.btn-neu:hover,
a.inline.btn-neu:hover,
button.inline.btn-neu:hover {
background: color-mix(in srgb, var(--link) 10%, transparent);
border-color: var(--neu);
}
.btn-neu:active,
a.inline.btn-neu:active,
button.inline.btn-neu:active {
background: color-mix(in srgb, var(--link) 20%, transparent);
}
/* Ensure pause/unpause buttons align perfectly in the actions column */
.btn-status-toggle {
min-width: 115px;
}
/* ---- src/css/tables.css ---- */
/* -------------------------------------------------------------------------- */
/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin: var(--space-5) 0;
font-size: var(--font-size-small);
font-family: var(--font-sans);
}
th {
text-transform: uppercase;
letter-spacing: var(--all-caps-space);
word-spacing: var(--all-caps-word-space);
font-weight: var(--font-weight-heavy);
}
th, td {
padding: var(--space-3) var(--space-3);
border-bottom: 1.5px solid var(--neutral-border);
text-align: left;
}
thead th {
position: sticky;
top: 0;
background: var(--bg);
z-index: 1;
}
td.trunc {
max-width: var(--truncw);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td ul.compact-list {
list-style-position: inside;
margin: 0;
padding: 0;
}
td ul.compact-list li {
list-style: disc inside;
margin: 0;
}
/* special handling for tables inside card elements */
.card thead th {
background: var(--contrast-surface);
}
/* Round the top-left corner of the first header cell */
.card thead th:first-child {
border-top-left-radius: var(--border-radius, 8px);
}
/* Round the top-right corner of the last header cell */
.card thead th:last-child {
border-top-right-radius: var(--border-radius, 8px);
}
/* ---- src/css/lists.css ---- */
/* -------------------------------------------------------------------------- */
/* lists and description lists */
dl {
/* expand line-height for easier reading */
line-height: 1.4;
}
dl dt {
font-weight: var(--font-weight-heavy);
}
dl dd {
color: var(--muted-text);
}
dl.aspara {
/* indent 1st row by 1em; continuing rows by 2em */
margin-left: 2em;
}
dl.aspara dt {
float: left;
margin-right: 0.5em;
margin-left: -1em; /* Offset so second line aligns correctly */
}
dl.aspara dt::after {
content: ":";
}
dl.aspara dd {
margin-left: 0em;
margin-bottom: 1em;
}
/* mini list with centered custom markers (โข or โ) */
.list-mini { list-style: none; padding: 0; margin: 0 0 0 0; }
.list-mini li {
display: grid;
grid-template-columns: 1.15rem 1fr; /* marker column + text */
column-gap: var(--space-2);
align-items: center; /* vertically center marker vs text block */
margin: var(--space-1) 0;
}
/* default bullet */
.list-mini li::before {
content: "โข";
justify-self: center; /* center bullet in its column */
font-size: var(--font-size-tiny); /* smaller bullet */
line-height: 1;
color: var(--muted-text);
}
/* arrow item: full-size arrow */
.list-mini li.arrow::before {
content: "โ";
font-size: var(--font-size-normal);
/* inherit follows the color of the parent */
/* currentColor follows closest color property value */
color: currentColor;
}
/* -------------------------------------------------------------------------- */
/* bullets */
.bullets {
list-style: none;
padding: 0;
margin: var(--space-4) 0 0;
display: grid;
gap: var(--space-3);
}
.bullets li strong {
font-weight: var(--font-weight-medium);
}
/* ---- src/css/links.css ---- */
/* -------------------------------------------------------------------------- */
/* Links */
a {
position: relative;
color: var(--link);
border-radius: var(--space-1);
padding: 0 .12em; /* room for highlight */
transition: var(--hover-transition);
background-image: linear-gradient(transparent 60%, color-mix(in srgb, var(--link) 25%, transparent) 0);
background-size: 0% 100%;
background-repeat: no-repeat;
}
a:hover,
a:focus-visible {
background-size: 100% 100%;
outline: 0;
}
a:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 35%, transparent);
}
/* space between items and arrows */
.with-arrow, .ext {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
/* External link arrow: add class=\"ext\" */
a.ext::after {
content: "โ";
/* Lato and Charter do not have this arrow. specify fallback stack*/
/* so we don't unnecessarily skip the "tiny" font and fall back to*/
/* the full one, only to see the arrow is not there */
/* font-family: var(--font-symbol); */
font-size: var(--font-size-small);
margin-left: var(--space-1);
transition: var(--hover-transition);
}
a.ext:hover::after,
a.ext:focus-visible::after { transform: translate(2px,-2px); }
/* Follow-me arrow: add class=\"with-arrow\" where you want motion */
.with-arrow::after {
content: "โ";
/* Lato and Charter do not have this arrow. specify fallback stack*/
/* so we don't unnecessarily skip the "tiny" font and fall back to*/
/* the full one, only to see the arrow is not there */
/* font-family: var(--font-symbol); */
transition: transform .18s ease;
}
.with-arrow:hover::after,
.with-arrow:focus-visible::after { transform: translateX(3px); }
/* ---- src/css/copy.css ---- */
/* "click-to-copy" elements */
/* use ::after to replace condent with a "copied!" message */
/* uses `copy.js` to set the `.copied` class */
.copy-container {
}
.copy-content {
position: relative;
z-index: 0;
}
.copy-content:hover {
cursor: pointer;
background: var(--link-hover-bg);
}
.copy-content::after {
content: "Copied!";
/* fill space */
position: absolute;
inset: 0;
border-radius: inherit;
/* center text */
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--accent);
background: var(--accent-muted-solid);
color: var(--accent);
font-weight: bold;
z-index: 1; /*place over content*/
opacity: 0;
pointer-events: none; /*dont block clicks*/
transition: opacity var(--hover-transition);
}
@media (prefers-reduced-motion: reduce) {
.copy-content::after {
transition: none;
}
}
.copy-content.copied::after {
opacity: 1;
}
/* ---- src/css/tabs.css ---- */
:root {
--active-tab-bg: var(--light-surface);
}
/* Tab headers */
.tablist {
display: flex;
gap: var(--space-2);
align-items: end;
}
.tab {
appearance: none; /*implemented as a button*/
background: var(--control);
font-family: var(--font-sans);
font-weight: var(--font-weight-heavy);
color: var(--muted-text);
border: 1.5px solid var(--border-strong);
border-bottom: 0;
border-radius: var(--border-radius) var(--border-radius) 0 0;
margin-bottom: -1.5px; /*let border-bottom cover panel border-top*/
z-index: 0;
padding: var(--space-2) var(--space-4);
cursor: pointer;
}
.tab:hover { background: var(--control-hover); }
.tab:active { background: var(--control-active); }
.tab[aria-selected="true"] {
background: var(--active-tab-bg);
color: var(--text);
border-color: var(--border-strong);
border-bottom: 1.5px solid var(--active-tab-bg);
z-index: 2;
}
.tab:focus-visible {
box-shadow: var(--focus-ring);
}
/* Panels */
.tabpanel {
display: none;
border: 1.5px solid var(--border-strong);
border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
background: var(--active-tab-bg);
box-shadow: var(--shadow-0);
padding: var(--space-4);
z-index: 1;
}
.tabpanel[data-active="true"] { display: block; }
/* No-JS fallback: show all panels stacked */
noscript .tabpanel { display: block; margin-top: var(--space-2); }
/* ---- src/css/inputs.css ---- */
/* -------------------------------------------------------------------------- */
/* text input */
input[type=datetime-local],
input[type=number],
input[type=tel],
input[type=text],
input[type=email],
input[type=password],
select,
textarea {
width: 100%;
padding: var(--space-3);
box-sizing: border-box;
background: var(--bg);
color: var(--text);
font-size: var(--font-size-smaller);
border: 1.5px solid var(--neutral-border);
border-radius: var(--space-2);
}
input[type=datetime-local]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
textarea::placeholder {
color: var(--muted-text);
opacity: 1;
/* Firefox defaults to lower opacity */
}
input[type=tel],
input[type=text],
input[type=password] {
font-family: var(--font-mono);
}
textarea {
resize: vertical;
min-height: 9rem;
}
label {
font-weight: var(--font-weight-medium);
}
/* -------------------------------------------------------------------------- */
/* select */
select {
-webkit-appearance: none;
/* removes default styles for some browsers */
-moz-appearance: none;
appearance: none;
padding: var(--space-2);
font-size: var(--font-size-smaller);
font-family: var(--font-sans);
font-weight: var(--font-weight-regular);
border: 1.5px solid var(--neutral-border);
border-radius: var(--border-radius);
background-color: var(--bg);
/* Add custom dropdown arrow */
background-image: var(--select-arrow);
background-repeat: no-repeat;
background-position: right 10px center;
/* width: 100%; */
box-sizing: border-box;
}
/* -------------------------------------------------------------------------- */
/* fieldset */
fieldset {
border-radius: var(--border-radius);
border: 1.5px solid var(--muted-text);
color: var(--text);
box-shadow: var(--shadow-0);
}
.field {
margin-block: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
fieldset .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
}
/* ---- src/css/dependable.css ---- */
/* ==========================================================================
dependable.css โ page-specific layer for the Dependable Models launch page
LOAD ORDER: this file loads LAST, after the sturdy-static bundle
(theme-toggle, charter, concourse, base, color_theme, typography, layout,
components, buttons, tables, lists, inputs, links, copy, tabs, toggle, errors).
RULES FOR MYSELF:
- Reuse sturdy-static tokens only (--accent, --surface, --border, --space-*,
--font-size-*, --font-sans/serif/mono). No new hex colors except inside
color-mix() on existing tokens, so dark mode keeps working for free.
- Everything page-specific is prefixed `dm-` so it can't collide with the
shared library. If a pattern proves useful, promote it into sturdy-static.
- Sections are `main > .container > section` (layout.css gives them padding
+ a top rule). Don't fight that; use .dm-band for full-bleed tints.
========================================================================== */
/* --------------------------------------------------------------------------
anchors: keep jump targets from hiding under the sticky header
-------------------------------------------------------------------------- */
section[id] {
scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}
/* Contain the hero's full-bleed decorative background. Viewport units include
the vertical scrollbar in some browsers, which otherwise adds page scroll. */
main.snap {
overflow-x: clip;
}
/* --------------------------------------------------------------------------
overrides of shared components (keep this list short; upstream if it grows)
-------------------------------------------------------------------------- */
/* typography.css styles `.note` as a bordered callout; components.css reuses
the class name for KPI captions. On this page KPI notes are plain captions. */
.kpi .note {
margin-top: calc(0.5 * var(--space-1));
padding: 0;
border: 0;
background: none;
font-size: var(--font-size-small);
}
/* components.css `.grid` adds 20px side padding; our card grids should align
with the section text edge instead. */
.grid.dm-pillars,
.grid.dm-example {
padding: 0;
}
/* never let a grid child (code block, table) force horizontal page scroll */
.dm-split > *,
.dm-vs > *,
.dm-flip > *,
.dm-gallery > *,
.grid > * {
min-width: 0;
}
.dm-split table,
.dm-example table {
display: block;
overflow-x: auto;
}
@media (min-width: 48rem) {
.dm-split table,
.dm-example table {
display: table;
}
}
/* --------------------------------------------------------------------------
section heads: small numbered kicker + big italic h2 (h2 style from typography.css)
-------------------------------------------------------------------------- */
.dm-head {
max-width: var(--readw);
margin-bottom: var(--space-6);
}
.dm-head .kicker {
display: block;
margin-bottom: var(--space-2);
font-family: var(--font-sans);
color: var(--accent);
}
.dm-head h2 {
font-size: clamp(22pt, 3.4vw, 30pt);
margin-bottom: var(--space-3);
}
.dm-head p {
font-size: var(--font-size-larger);
color: var(--muted-text);
}
.dm-head--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.dm-workhorse-title > span { display: block; }
.dm-workhorse-title .dm-workhorse-result {
margin-top: var(--space-3);
color: var(--accent);
font-family: var(--font-sans);
font-size: 0.56em;
font-style: normal;
line-height: 1.25;
letter-spacing: 0;
}
/* --------------------------------------------------------------------------
hero
-------------------------------------------------------------------------- */
section#hero {
position: relative;
min-height: calc(100svh - var(--header-h));
padding: clamp(2rem, 5vh, 3.5rem) 0;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
isolation: isolate;
}
section#hero::before {
content: "";
position: absolute;
inset: 0 calc(50% - 50vw);
z-index: -1;
border-bottom: 1px solid var(--border);
background:
radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent 72%);
pointer-events: none;
}
.dm-product-name {
margin-bottom: var(--space-5);
font-family: var(--font-sans);
font-size: clamp(17pt, 2.4vw, 23pt);
line-height: 1;
letter-spacing: -0.01em;
font-weight: var(--font-weight-black);
color: var(--accent);
}
.dm-product-name::after {
content: "";
display: block;
width: 3rem;
height: 3px;
margin: var(--space-3) auto 0;
border-radius: 999px;
background: var(--accent);
}
.dm-product-name span {
margin-left: 0.12em;
vertical-align: super;
font-size: 0.42em;
color: var(--muted-text);
}
section#hero h1 {
margin-top: 0;
font-size: clamp(30pt, 6vw, 56pt);
font-weight: var(--font-weight-black);
line-height: 1.05;
letter-spacing: -0.02em;
max-width: 18ch;
margin-left: auto;
margin-right: auto;
}
section#hero h1 em {
color: var(--accent);
}
section#hero .subhead {
margin: var(--space-5) auto 0;
font-size: clamp(14pt, 2vw, 18pt);
max-width: 52rem;
}
.dm-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-6);
}
.dm-hero-kpis {
margin-top: var(--space-7);
gap: 0;
overflow: hidden;
border: 1.5px solid var(--border);
border-radius: var(--border-radius-large);
background: color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow: var(--shadow-1);
}
.dm-hero-kpis .kpi + .kpi { border-top: 1px solid var(--border); }
.dm-hero-kpis .kpi .value {
font-size: clamp(20pt, 3vw, 28pt);
}
@media (max-width: 899px) {
.dm-hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-hero-kpis .kpi + .kpi { border-top: 0; }
.dm-hero-kpis .kpi:nth-child(even) { border-left: 1px solid var(--border); }
.dm-hero-kpis .kpi:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (min-width: 900px) {
.dm-hero-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-hero-kpis .kpi + .kpi { border-top: 0; border-left: 1px solid var(--border); }
}
@media (min-width: 900px) and (max-height: 800px) {
.dm-product-name { margin-bottom: var(--space-3); }
.dm-product-name::after { margin-top: var(--space-2); }
section#hero .subhead { margin-top: var(--space-3); }
.dm-actions { margin-top: var(--space-4); }
.dm-hero-kpis { margin-top: var(--space-5); }
.dm-hero-kpis .kpi { padding: var(--space-3); }
}
/* --------------------------------------------------------------------------
big statement lines between beats
-------------------------------------------------------------------------- */
.dm-statement {
max-width: 30ch;
margin: var(--space-7) auto;
text-align: center;
font-size: clamp(18pt, 3vw, 26pt);
font-style: italic;
font-weight: var(--font-weight-bold);
line-height: 1.2;
}
.dm-statement .accent { color: var(--accent); }
/* --------------------------------------------------------------------------
two-column split (text | exhibit); collapses on mobile
-------------------------------------------------------------------------- */
.dm-split {
display: grid;
gap: var(--space-6);
align-items: start;
}
@media (min-width: 56rem) {
.dm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dm-split--wide-right { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
/* --------------------------------------------------------------------------
code blocks (static, hand-highlighted; no highlighter dependency)
token classes: .c comment .k keyword .s string .f function .n number
-------------------------------------------------------------------------- */
.dm-code {
position: relative;
margin: 0;
background: var(--light-surface);
border: 1.5px solid var(--border);
border-radius: var(--border-radius-large);
box-shadow: var(--shadow-0);
padding: var(--space-5);
font-size: var(--font-size-small);
line-height: 1.55;
white-space: pre;
overflow-x: auto;
}
.dm-code .c { color: var(--muted-text); font-style: italic; }
.dm-code .k { color: var(--accent); font-weight: var(--font-weight-bold); }
.dm-code .s { color: var(--plot-goldenrod); }
.dm-code .f { color: var(--link); }
.dm-code .n { color: var(--chart-3); }
.dm-code-label {
display: block;
margin-bottom: var(--space-2);
font-family: var(--font-sans);
font-size: var(--font-size-smaller);
text-transform: uppercase;
letter-spacing: var(--all-caps-space);
color: var(--muted-text);
}
/* --------------------------------------------------------------------------
before / after pipeline cards (ยง the question)
-------------------------------------------------------------------------- */
.dm-vs {
display: grid;
gap: var(--space-5);
}
@media (min-width: 48rem) {
.dm-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dm-vs .card h3 { margin-bottom: var(--space-3); }
.dm-steps {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-mono);
font-size: var(--font-size-small);
}
.dm-steps li {
padding: var(--space-2) 0;
border-bottom: 1px dashed var(--border-strong);
}
.dm-steps li:last-child { border-bottom: 0; }
.dm-steps li.bad { color: var(--neg); }
.dm-steps li.good { color: var(--pos); }
.dm-vs .card--after {
border-color: var(--accent-border);
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
/* --------------------------------------------------------------------------
the flip exhibit (same data, different answer)
-------------------------------------------------------------------------- */
.dm-flip {
display: grid;
gap: var(--space-5);
}
@media (min-width: 48rem) {
.dm-flip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dm-flip table { margin: 0; }
.dm-flip td.num, .dm-flip th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dm-flip tr.win td {
font-weight: var(--font-weight-black);
color: var(--accent);
}
.dm-bar {
display: block;
height: 6px;
margin-top: var(--space-1);
border-radius: 999px;
background: var(--accent);
width: var(--pct, 0%);
opacity: .8;
}
/* --------------------------------------------------------------------------
pillars (3-up cards with a big glyph)
-------------------------------------------------------------------------- */
.dm-pillars .card h3 {
font-weight: var(--font-weight-bold);
margin-top: var(--space-2);
}
.dm-glyph {
font-family: var(--font-sans);
font-size: var(--font-size-huge);
font-weight: var(--font-weight-black);
color: var(--accent);
line-height: 1;
}
/* --------------------------------------------------------------------------
experiment "equation": outcome + test + control = ranked answer
-------------------------------------------------------------------------- */
.dm-equation {
display: grid;
gap: var(--space-3);
align-items: stretch;
margin: var(--space-6) 0;
}
@media (min-width: 60rem) {
.dm-equation { grid-template-columns: 1fr auto 1fr auto 1fr auto 1.3fr; }
}
.dm-equation .term {
padding: var(--space-4);
border: 1.5px solid var(--border);
border-radius: var(--border-radius);
background: var(--surface);
text-align: center;
}
.dm-equation .term .kicker { display: block; margin-bottom: var(--space-2); }
.dm-equation .term code { font-size: var(--font-size-smaller); }
.dm-equation .op {
align-self: center;
text-align: center;
font-family: var(--font-sans);
font-size: var(--font-size-huge);
color: var(--muted-text);
}
.dm-equation .term--result {
border-color: var(--accent-border);
background: var(--accent-muted-bg);
}
/* --------------------------------------------------------------------------
example cards (anonymized case exhibits)
-------------------------------------------------------------------------- */
.dm-example {
margin-top: var(--space-6);
}
.dm-example .card { gap: var(--space-3); }
.dm-example .setup {
font-family: var(--font-sans);
font-size: var(--font-size-small);
color: var(--muted-text);
}
.dm-example .setup code { font-size: var(--font-size-smaller); }
.dm-example table { margin: var(--space-2) 0; }
.dm-lift {
font-family: var(--font-sans);
font-weight: var(--font-weight-black);
color: var(--accent);
white-space: nowrap;
}
.dm-lift.neg { color: var(--neg); }
/* --------------------------------------------------------------------------
quotes (evidence passages)
-------------------------------------------------------------------------- */
.dm-quote {
margin: var(--space-3) 0 0;
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--accent);
background: color-mix(in srgb, var(--accent) 6%, transparent);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
font-style: italic;
}
.dm-quote cite {
display: block;
margin-top: var(--space-2);
font-style: normal;
font-family: var(--font-sans);
font-size: var(--font-size-smaller);
color: var(--muted-text);
}
/* --------------------------------------------------------------------------
explanation widget: highlighted words carry weight via --w (0..1)
-------------------------------------------------------------------------- */
.dm-explain {
border: 1.5px solid var(--border);
border-radius: var(--border-radius-large);
overflow: hidden;
}
.dm-explain header {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
justify-content: space-between;
padding: var(--space-3) var(--space-4);
background: var(--contrast-surface);
font-family: var(--font-sans);
font-size: var(--font-size-small);
}
.dm-explain header .wrong { color: var(--neg); font-weight: var(--font-weight-heavy); }
.dm-explain .sent {
margin: 0;
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border);
font-size: var(--font-size-small);
}
.dm-explain .sent .sid {
margin-right: var(--space-2);
font-family: var(--font-mono);
font-size: var(--font-size-tiny);
color: var(--muted-text);
}
.dm-explain mark {
--w: .6;
padding: 0 .15em;
border-radius: 3px;
color: inherit;
background: color-mix(in srgb, var(--neg) calc(var(--w) * 45%), transparent);
}
/* --------------------------------------------------------------------------
figures
-------------------------------------------------------------------------- */
.dm-figure {
margin: 0;
}
.dm-figure img {
width: 100%;
border-radius: var(--border-radius);
border: 1.5px solid var(--border);
background: #fff; /* most exported plots assume a white page */
}
.dm-figure figcaption {
margin-top: var(--space-2);
font-family: var(--font-sans);
font-size: var(--font-size-small);
color: var(--muted-text);
}
/* --------------------------------------------------------------------------
gallery strip (ยง structure at scale)
-------------------------------------------------------------------------- */
.dm-gallery {
display: grid;
gap: var(--space-5);
}
@media (min-width: 48rem) {
.dm-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dm-gallery a { background-image: none; padding: 0; }
.dm-gallery a:hover { text-decoration: none; }
.dm-gallery .dm-figure img {
aspect-ratio: 4 / 3;
/* contain, not cover: source plots have very different aspect ratios and
cropping cut off titles/legends. Swap tile images for 4:3 exports later. */
object-fit: contain;
padding: var(--space-2);
transition: var(--hover-transition);
}
.dm-gallery a:hover .dm-figure img { box-shadow: var(--shadow-2); }
/* --------------------------------------------------------------------------
spec list (ยง infrastructure)
-------------------------------------------------------------------------- */
.dm-specs {
display: grid;
gap: var(--space-4);
margin: 0;
}
@media (min-width: 48rem) {
.dm-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dm-specs div {
padding: var(--space-4);
border: 1.5px solid var(--border);
border-radius: var(--border-radius);
background: var(--light-surface);
}
.dm-specs dt { font-family: var(--font-sans); margin-bottom: var(--space-1); }
.dm-specs dd { margin: 0; }
/* --------------------------------------------------------------------------
read-more links under a section
-------------------------------------------------------------------------- */
.dm-more {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
margin-top: var(--space-5);
font-family: var(--font-sans);
font-size: var(--font-size-small);
}
/* --------------------------------------------------------------------------
FAQ
-------------------------------------------------------------------------- */
.dm-faq {
display: grid;
gap: var(--space-3);
max-width: 48rem;
margin: 0 auto;
}
.dm-faq details summary {
cursor: pointer;
margin-bottom: 0;
font-weight: var(--font-weight-heavy);
}
.dm-faq details[open] summary { margin-bottom: var(--space-3); }
.dm-faq details p:last-child { margin-bottom: 0; }
/* --------------------------------------------------------------------------
closing CTA band
-------------------------------------------------------------------------- */
.dm-cta {
text-align: center;
padding: var(--space-8) var(--space-5);
border-radius: var(--border-radius-large);
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
border: 1.5px solid var(--accent-border);
}
.dm-cta h2 {
font-size: clamp(22pt, 4vw, 34pt);
max-width: 22ch;
margin: 0 auto var(--space-4);
}
.dm-contact-form {
max-width: 46rem;
margin: var(--space-5) auto 0;
text-align: left;
display: grid;
gap: var(--space-3);
}
.dm-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.dm-contact-form label {
display: grid;
gap: var(--space-1);
}
.dm-form-actions {
display: flex;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-2);
}
.dm-form-status {
margin: var(--space-4) auto 0;
color: var(--accent);
font-weight: var(--font-weight-medium);
}
.dm-honeypot {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
@media (max-width: 600px) {
.dm-form-grid { grid-template-columns: 1fr; }
.dm-form-actions { flex-direction: column; }
}
/* --------------------------------------------------------------------------
nav tweaks: the shared header expects a "Get a demo" button; we use "Talk to us"
-------------------------------------------------------------------------- */
.site-header .dm-nav-links a { font-weight: var(--font-weight-medium); }
/* ==========================================================================
v1 (technical rewrite) additions
========================================================================== */
/* one-column spec list (used beside figures) */
.dm-specs--one { grid-template-columns: 1fr !important; }
.dm-specs dd { color: var(--text); }
/* check list for classifier properties */
.dm-checks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
}
.dm-checks li {
position: relative;
padding-left: 1.6em;
}
.dm-checks li::before {
content: "โ";
position: absolute;
left: 0;
color: var(--accent);
font-family: var(--font-symbol);
font-weight: var(--font-weight-bold);
}
.dm-checks strong { font-family: var(--font-sans); font-weight: var(--font-weight-heavy); }
/* compact result tables: the "API output" look */
table.dm-result {
margin: 0;
font-size: var(--font-size-smaller);
border: 1.5px solid var(--border);
border-radius: var(--border-radius);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--light-surface);
}
table.dm-result caption {
caption-side: top;
text-align: left;
padding: 0 0 var(--space-2);
font-family: var(--font-sans);
font-size: var(--font-size-smaller);
text-transform: uppercase;
letter-spacing: var(--all-caps-space);
color: var(--muted-text);
}
table.dm-result th,
table.dm-result td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border);
}
table.dm-result th {
position: static;
background: var(--contrast-surface);
font-size: var(--font-size-tiny);
}
table.dm-result tbody tr:last-child td { border-bottom: 0; }
table.dm-result .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dm-result .pos { color: var(--pos); font-weight: var(--font-weight-heavy); }
table.dm-result .neg { color: var(--neg); font-weight: var(--font-weight-heavy); }
table.dm-result td[rowspan] { vertical-align: middle; border-left: 1px solid var(--border); }
.dm-result--compare td:first-child { font-weight: var(--font-weight-medium); }
/* small variants */
.dm-code--sm { padding: var(--space-3) var(--space-4); font-size: var(--font-size-smaller); }
.dm-json { margin-top: var(--space-3); }
.dm-quote--sm { font-size: var(--font-size-small); margin-top: var(--space-3); }
/* experiment rows */
.dm-exp-nav { margin: 0 0 var(--space-5); }
.dm-exp-nav .chip { background-image: none; text-decoration: none; font-family: var(--font-sans); font-size: var(--font-size-small); }
.dm-exp-nav .chip:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.dm-exp {
display: grid;
gap: var(--space-5);
padding: var(--space-6) 0;
border-top: 1px dashed var(--border-strong);
scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}
@media (min-width: 60rem) {
.dm-exp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.dm-exp > * { min-width: 0; }
.dm-exp h3 { margin: var(--space-2) 0 var(--space-3); }
.dm-exp .kicker { color: var(--accent); font-family: var(--font-sans); }
.dm-exp-note {
margin: var(--space-3) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-small);
color: var(--muted-text);
}
/* drill-down trace: metric โ docs โ excerpt โ words */
.dm-trace {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
counter-reset: trace;
}
@media (min-width: 60rem) {
.dm-trace { grid-template-columns: 1fr 1fr 1fr 2fr; }
}
.dm-trace li {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4);
border: 1.5px solid var(--border);
border-radius: var(--border-radius);
background: var(--surface);
font-family: var(--font-sans);
font-size: var(--font-size-small);
}
.dm-trace li:last-child { border-color: var(--accent-border); background: var(--accent-muted-bg); }
@media (min-width: 60rem) {
.dm-trace li:not(:last-child)::after {
content: "โ";
position: absolute;
right: calc(-1 * var(--space-3));
top: 50%;
transform: translate(50%, -50%);
color: var(--muted-text);
font-size: var(--font-size-large);
z-index: 1;
}
}
.dm-trace .kicker { color: var(--accent); }
.dm-trace-val { color: var(--muted-text); }
.dm-trace-val.neg { color: var(--neg); font-weight: var(--font-weight-heavy); }
.dm-trace-words { font-family: var(--font-serif); font-size: var(--font-size-normal); font-style: italic; }
.dm-trace mark {
--w: .6;
padding: 0 .15em;
border-radius: 3px;
color: inherit;
background: color-mix(in srgb, var(--accent) calc(var(--w) * 40%), transparent);
}
/* h3s inside splits (explainability sub-exhibits) */
.dm-split h3 { margin-bottom: var(--space-2); }
.dm-explain header strong { font-weight: var(--font-weight-heavy); }
/* ==========================================================================
v2 additions: primitives, tabbed experiments, explainability levels
========================================================================== */
/* two API primitives above the tabs */
.grid.dm-primitives { padding: 0; }
.dm-primitives .card { gap: var(--space-2); }
.dm-primitives .kicker { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--accent); font-size: var(--font-size-small); }
.dm-primitives h3 { margin: 0; font-size: var(--font-size-large); }
/* tabbed experiments: panels hold one experiment each */
.dm-exp-tabs .tablist { flex-wrap: wrap; }
.dm-exp-tabs .tab { font-size: var(--font-size-smaller); }
.dm-exp-tabs .tabpanel { padding: var(--space-5); }
.dm-exp-tabs .dm-exp { border-top: 0; padding: 0; }
.dm-exp-tabs .dm-exp h3 { margin-top: 0; font-size: var(--font-size-large); }
@media (max-width: 59.99rem) {
.dm-exp-tabs .tabpanel { padding: var(--space-3); }
.dm-exp table.dm-result {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
}
/* no-JS: tabs.js never marks a panel active, so show the lead example */
.dm-exp-tabs:not(:has(.tabpanel[data-active])) .tabpanel[data-tab="time"] { display: block; }
/* explainability levels list */
.dm-levels { margin: 0; display: grid; gap: var(--space-4); }
.dm-levels div { padding-left: var(--space-4); border-left: 3px solid var(--accent-border); }
.dm-levels dt { font-family: var(--font-sans); font-weight: var(--font-weight-heavy); text-transform: uppercase; letter-spacing: var(--all-caps-space); font-size: var(--font-size-small); }
.dm-levels dd { margin: var(--space-1) 0 0; color: var(--text); }
/* statement line: calmer than v1 */
.dm-statement { font-weight: var(--font-weight-regular); max-width: 34ch; }
/* ==========================================================================
v4 additions: category hero, excerpt panel
========================================================================== */
/* short category statement gets the visual weight of a launch headline */
section#hero h1 {
max-width: 16ch;
font-size: clamp(36pt, 6.2vw, 62pt);
line-height: 1.02;
}
section#hero h1 em { font-style: normal; }
/* excerpts behind one experiment row (explainability) */
.dm-excerpts {
border: 1.5px solid var(--border);
border-radius: var(--border-radius-large);
overflow: hidden;
background: var(--light-surface);
}
.dm-excerpts header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2) var(--space-5);
padding: var(--space-3) var(--space-4);
background: var(--contrast-surface);
font-family: var(--font-sans);
font-size: var(--font-size-small);
}
.dm-excerpts article {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border);
}
.dm-excerpts article p { margin: 0; font-size: var(--font-size-small); }
.dm-excerpts .meta {
margin-bottom: var(--space-1) !important;
font-family: var(--font-mono);
font-size: var(--font-size-tiny) !important;
color: var(--muted-text);
}
.dm-excerpts mark {
padding: 0 .15em;
border-radius: 3px;
color: inherit;
background: color-mix(in srgb, var(--plot-goldenrod) 30%, transparent);
}
/* kicker above each experiment's h3 (endpoint name) */
.dm-exp .kicker { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
/* explain widget inside FAQ details */
.dm-faq .dm-explain { background: var(--bg); }
.dm-faq-result { width: 100%; margin: var(--space-4) 0 var(--space-2); }