/* * VS-HCI documentation — stylesheet. * * The palette, type scale and shapes are the portal's (hyperion-portal), so the docs and * velarionsystems.com read as one product. Tokens are copied from that project's index.css: * the marketing-dark surface ramp with the cyan accent, which is the pairing the public site * ships (, PublicLayout in .marketing-dark). * * Fonts are vendored into assets/fonts rather than fetched from a font CDN, for the same reason * the portal self-hosts them: this page is public, and a webfont request to a third party is a * request that carries every visitor's IP to that third party. */ /* ── Fonts ───────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); } /* ── Tokens ──────────────────────────────────────────────────────────────── */ :root { /* surface ramp — marketing-dark */ --surface-950: 8 11 15; --surface-900: 13 17 23; --surface-800: 22 28 36; --surface-700: 28 36 49; --surface-600: 34 48 63; --surface-500: 42 58 74; --surface-400: 53 74 92; /* text ramp */ --c-white: 255 255 255; --slate-200: 226 232 240; --slate-300: 203 213 225; --slate-400: 148 163 184; --slate-500: 113 113 122; --slate-600: 82 82 91; /* accent — cyan */ --brand-50: 236 254 255; --brand-100: 207 250 254; --brand-200: 165 243 252; --brand-300: 103 232 249; --brand-400: 34 211 238; --brand-500: 6 182 212; --brand-600: 8 145 178; --brand-700: 14 116 144; --brand-800: 21 94 117; --brand-900: 22 78 99; /* the hero's green, used for "healthy" accents and the home gradient */ --emerald-400: 52 211 153; --emerald-500: 16 185 129; --amber-400: 251 191 36; --red-400: 248 113 113; --shadow-card: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.6); --shadow-glow: 0 0 0 3px rgb(var(--brand-500) / 0.30); --sidebar-w: 16.5rem; --toc-w: 15rem; --header-h: 4rem; --content-max: 46rem; color-scheme: dark; } /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { /* 16px, not the appliance's 14px — docs are read in long stretches. */ font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 0.9375rem; line-height: 1.7; background-color: rgb(var(--surface-950)); color: rgb(var(--slate-300)); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; } img { height: auto; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: rgb(var(--surface-900)); } ::-webkit-scrollbar-thumb { background: rgb(var(--surface-500)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--brand-600)); } ::selection { background: rgb(var(--brand-500) / 0.30); color: #fff; } a { color: rgb(var(--brand-400)); text-decoration: none; } a:hover { color: rgb(var(--brand-300)); } :focus-visible { outline: 2px solid rgb(var(--brand-400)); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: rgb(var(--brand-600)); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 0.75rem 0; font-size: 0.8125rem; font-weight: 500; } .skip-link:focus { left: 0; color: #fff; } /* ── Shared shapes ───────────────────────────────────────────────────────── */ .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.625rem; font-weight: 500; color: rgb(var(--brand-400)); text-transform: uppercase; letter-spacing: 0.22em; margin: 0; } .pill { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 500; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; } .pill-primary { background: rgb(var(--brand-600)); color: #fff; box-shadow: 0 10px 15px -3px rgb(var(--brand-600) / 0.25); } .pill-primary:hover { background: rgb(var(--brand-500)); color: #fff; } .pill-outline { border-color: rgb(var(--surface-500)); color: rgb(var(--slate-300)); } .pill-outline:hover { color: #fff; background: rgb(var(--surface-700)); border-color: rgb(var(--surface-400)); } .card { background: rgb(var(--surface-800)); border: 1px solid rgb(var(--surface-600)); border-radius: 1rem; box-shadow: var(--shadow-card); } /* Cards on the landing surface lift slightly — cheap, and it makes a static grid feel live. */ .lift { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.35s ease; } .lift:hover { transform: translateY(-4px); border-color: rgb(var(--brand-500) / 0.30); } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; height: var(--header-h); padding-top: env(safe-area-inset-top, 0px); background: rgb(var(--surface-950) / 0.80); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgb(var(--surface-600) / 0.60); } .site-header__inner { height: var(--header-h); max-width: 96rem; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; } .brand__tile { width: 2rem; height: 2rem; border-radius: 0.5rem; background: rgb(var(--brand-600)); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgb(var(--brand-600) / 0.25); color: #fff; } .brand__text { line-height: 1; } .brand__name { display: block; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; } .brand__vendor { display: block; margin-top: 0.125rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.5625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: rgb(var(--brand-400)); } .brand__docs { align-self: flex-end; padding: 0.125rem 0.4rem; border: 1px solid rgb(var(--surface-600)); border-radius: 9999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--slate-400)); } .site-nav { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .site-nav a.nav-link { padding: 0.5rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; color: rgb(var(--slate-400)); transition: color 0.2s; } .site-nav a.nav-link:hover { color: #fff; } /* The sidebar toggle only exists below the layout breakpoint. */ .nav-toggle { display: none; background: none; border: 1px solid rgb(var(--surface-600)); color: rgb(var(--slate-300)); border-radius: 0.625rem; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; cursor: pointer; } .nav-toggle:hover { background: rgb(var(--surface-800)); color: #fff; } /* ── Layout ──────────────────────────────────────────────────────────────── */ .layout { max-width: 96rem; margin: 0 auto; padding-top: var(--header-h); display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); gap: 0; align-items: start; } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ .sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 1.75rem 1rem 3rem 1.25rem; border-right: 1px solid rgb(var(--surface-600) / 0.6); font-size: 0.8125rem; } .sidebar__filter { position: relative; margin-bottom: 1.5rem; } .sidebar__filter input { width: 100%; background: rgb(var(--surface-800)); border: 1px solid rgb(var(--surface-600)); border-radius: 0.75rem; padding: 0.5rem 0.75rem 0.5rem 2rem; font: inherit; font-size: 0.8125rem; color: #fff; transition: all 0.2s; } .sidebar__filter input::placeholder { color: rgb(var(--slate-500)); } .sidebar__filter input:focus { outline: none; border-color: rgb(var(--brand-500)); box-shadow: var(--shadow-glow); } .sidebar__filter svg { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); width: 0.875rem; height: 0.875rem; color: rgb(var(--slate-500)); pointer-events: none; } .sidebar__section { margin-bottom: 1.5rem; } .sidebar__heading { display: flex; align-items: center; gap: 0.5rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: rgb(var(--slate-500)); margin: 0 0 0.5rem 0.125rem; } .sidebar__heading svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .sidebar ul { list-style: none; margin: 0; padding: 0; } /* A filled pill when active, rather than the appliance's left accent bar. */ .side-item { display: block; padding: 0.375rem 0.75rem; border-radius: 0.625rem; color: rgb(var(--slate-400)); transition: all 0.15s; } .side-item:hover { color: rgb(var(--slate-200)); background: rgb(var(--surface-700) / 0.7); } .side-item--active { background: rgb(var(--brand-600) / 0.15); color: rgb(var(--brand-400)); font-weight: 500; } .side-item--active:hover { color: rgb(var(--brand-300)); background: rgb(var(--brand-600) / 0.20); } /* Pages that are still stubs carry a dot, so what is unwritten is visible at a glance. */ .side-item--draft::after { content: ''; display: inline-block; width: 0.3125rem; height: 0.3125rem; margin-left: 0.4rem; vertical-align: 0.1em; border-radius: 9999px; background: rgb(var(--amber-400) / 0.55); } .sidebar__empty { color: rgb(var(--slate-500)); font-size: 0.8125rem; padding: 0.5rem 0.75rem; } /* ── Content ─────────────────────────────────────────────────────────────── */ .content { min-width: 0; padding: 2.5rem 3rem 6rem; } .content__inner { max-width: var(--content-max); } .breadcrumb { font-size: 0.75rem; color: rgb(var(--slate-500)); margin-bottom: 0.75rem; } .breadcrumb a { color: rgb(var(--slate-400)); } .breadcrumb a:hover { color: rgb(var(--brand-400)); } .breadcrumb span { margin: 0 0.4rem; color: rgb(var(--slate-600)); } .page-title { font-size: 2.25rem; line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; color: #fff; margin: 0 0 0.75rem; } .page-lede { font-size: 1.0625rem; line-height: 1.65; color: rgb(var(--slate-400)); margin: 0 0 2rem; } .draft-banner { display: flex; align-items: flex-start; gap: 0.75rem; background: rgb(var(--amber-400) / 0.07); border: 1px solid rgb(var(--amber-400) / 0.22); border-radius: 1rem; padding: 0.875rem 1.125rem; margin: 0 0 2rem; font-size: 0.8125rem; color: rgb(var(--slate-400)); } .draft-banner svg { width: 1rem; height: 1rem; color: rgb(var(--amber-400)); flex-shrink: 0; margin-top: 0.15rem; } .draft-banner strong { color: rgb(var(--amber-400)); font-weight: 600; } /* ── Prose ───────────────────────────────────────────────────────────────── */ .prose > *:first-child { margin-top: 0; } .prose > *:last-child { margin-bottom: 0; } .prose h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 3rem 0 1rem; padding-top: 0.5rem; } .prose h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; margin: 2.25rem 0 0.75rem; } .prose h4 { font-size: 0.9375rem; font-weight: 600; color: rgb(var(--slate-200)); margin: 1.75rem 0 0.5rem; } /* Anchor links, revealed on hover — added by docs.js. */ .heading-anchor { margin-left: 0.4rem; color: rgb(var(--slate-600)); opacity: 0; transition: opacity 0.15s, color 0.15s; font-weight: 400; } h2:hover .heading-anchor, h3:hover .heading-anchor { opacity: 1; } .heading-anchor:hover { color: rgb(var(--brand-400)); } .prose p { margin: 0 0 1.125rem; } .prose ul, .prose ol { margin: 0 0 1.125rem; padding-left: 1.25rem; } .prose li { margin-bottom: 0.4rem; } .prose li::marker { color: rgb(var(--slate-500)); } .prose strong { color: rgb(var(--slate-200)); font-weight: 600; } .prose hr { border: none; border-top: 1px solid rgb(var(--surface-600)); margin: 2.5rem 0; } .prose blockquote { margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.125rem; border-left: 2px solid rgb(var(--brand-600)); color: rgb(var(--slate-400)); } .prose blockquote p:last-child { margin-bottom: 0; } /* Code — the mono face is for things a machine emitted, never for prose. */ .prose code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8125em; background: rgb(var(--surface-800)); border: 1px solid rgb(var(--surface-600)); border-radius: 0.375rem; padding: 0.1rem 0.35rem; color: rgb(var(--brand-300)); } .prose pre { background: rgb(var(--surface-900)); border: 1px solid rgb(var(--surface-600)); border-radius: 1rem; padding: 1.125rem 1.25rem; overflow-x: auto; margin: 0 0 1.5rem; font-size: 0.8125rem; line-height: 1.65; } .prose pre code { background: none; border: none; padding: 0; color: rgb(var(--slate-300)); font-size: inherit; } .prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.875rem; } .prose thead th { text-align: left; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: rgb(var(--slate-500)); padding: 0 0.875rem 0.625rem; border-bottom: 1px solid rgb(var(--surface-600)); } .prose tbody td { padding: 0.75rem 0.875rem; border-bottom: 1px solid rgb(var(--surface-600) / 0.55); vertical-align: top; } .prose tbody tr:last-child td { border-bottom: none; } .prose tbody tr { transition: background-color 0.15s; } .prose tbody tr:hover { background: rgb(var(--surface-800) / 0.5); } .prose tbody td:first-child { color: rgb(var(--slate-200)); } /* A table can be wider than the measure; it scrolls in its own box. */ .table-scroll { overflow-x: auto; margin-bottom: 1.5rem; } .table-scroll table { margin-bottom: 0; } /* Callouts — > **Note** / **Warning** blockquotes get upgraded by docs.js. */ .callout { display: flex; gap: 0.75rem; border-radius: 1rem; padding: 0.875rem 1.125rem; margin: 1.5rem 0; font-size: 0.875rem; border: 1px solid; } .callout p:last-child { margin-bottom: 0; } .callout__title { font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.01em; margin: 0 0 0.2rem !important; } .callout--note .callout__title { color: rgb(var(--brand-400)); } .callout--warning .callout__title { color: rgb(var(--amber-400)); } .callout--danger .callout__title { color: rgb(var(--red-400)); } .callout svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.22rem; } .callout--note { background: rgb(var(--brand-500) / 0.07); border-color: rgb(var(--brand-500) / 0.25); } .callout--note svg { color: rgb(var(--brand-400)); } .callout--warning { background: rgb(var(--amber-400) / 0.07); border-color: rgb(var(--amber-400) / 0.22); } .callout--warning svg { color: rgb(var(--amber-400)); } .callout--danger { background: rgb(var(--red-400) / 0.07); border-color: rgb(var(--red-400) / 0.25); } .callout--danger svg { color: rgb(var(--red-400)); } /* ── Page footer nav ─────────────────────────────────────────────────────── */ .page-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgb(var(--surface-600)); } .page-nav__link { border: 1px solid rgb(var(--surface-600)); background: rgb(var(--surface-800)); border-radius: 1rem; padding: 0.875rem 1.125rem; transition: border-color 0.2s, transform 0.2s; } .page-nav__link:hover { border-color: rgb(var(--brand-500) / 0.4); } .page-nav__link--next { grid-column: 2; text-align: right; } .page-nav__dir { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgb(var(--slate-500)); margin-bottom: 0.25rem; } .page-nav__title { display: block; font-size: 0.875rem; font-weight: 500; color: rgb(var(--slate-200)); } .page-nav__link:hover .page-nav__title { color: rgb(var(--brand-400)); } /* ── On-this-page ────────────────────────────────────────────────────────── */ .toc { position: sticky; top: var(--header-h); max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 2.75rem 1.5rem 3rem 0.5rem; font-size: 0.8125rem; } .toc__heading { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: rgb(var(--slate-500)); margin: 0 0 0.75rem; } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgb(var(--surface-600)); } .toc li a { display: block; padding: 0.3rem 0 0.3rem 0.875rem; margin-left: -1px; border-left: 1px solid transparent; color: rgb(var(--slate-500)); transition: color 0.15s, border-color 0.15s; } .toc li a:hover { color: rgb(var(--slate-300)); } .toc li a.is-active { color: rgb(var(--brand-400)); border-left-color: rgb(var(--brand-500)); } .toc li.toc--h3 a { padding-left: 1.75rem; font-size: 0.78125rem; } .toc:empty, .toc.is-empty { visibility: hidden; } /* ── Home ────────────────────────────────────────────────────────────────── */ .home { padding-top: var(--header-h); } .hero { position: relative; overflow: hidden; background-color: #04060a; border-bottom: 1px solid rgb(var(--surface-600) / 0.5); } /* Drifting aurora — two blobs on different durations so they never visibly loop together. */ .aurora { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: 0.5; will-change: transform; pointer-events: none; } .aurora-a { width: 34rem; height: 34rem; top: -12rem; left: -8rem; background: rgb(var(--brand-600) / 0.35); animation: aurora-a 26s ease-in-out infinite; } .aurora-b { width: 30rem; height: 30rem; bottom: -14rem; right: -6rem; background: rgb(var(--emerald-500) / 0.22); animation: aurora-b 34s ease-in-out infinite; } @keyframes aurora-a { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%,-8%,0) scale(1.15); } } @keyframes aurora-b { 0%, 100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-8%,6%,0) scale(0.95); } } .hero__inner { position: relative; max-width: 72rem; margin: 0 auto; padding: 7rem 1.5rem 6rem; } .hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgb(var(--surface-600)); background: rgb(var(--surface-800) / 0.7); border-radius: 9999px; padding: 0.35rem 0.85rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgb(var(--brand-400)); margin-bottom: 1.75rem; } .hero h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; color: #fff; margin: 0 0 1.25rem; max-width: 20ch; } /* The hero's one flourish, borrowed from the landing page's headline. */ .hero h1 em { font-style: normal; background: linear-gradient(100deg, rgb(var(--emerald-400)), rgb(var(--brand-300))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero__lede { font-size: 1.0625rem; line-height: 1.7; color: rgb(var(--slate-400)); max-width: 44ch; margin: 0 0 2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero__actions .pill { padding: 0.7rem 1.35rem; font-size: 0.875rem; } .home-section { max-width: 72rem; margin: 0 auto; padding: 4.5rem 1.5rem; } .home-section--alt { max-width: none; background: rgb(var(--surface-900)); border-block: 1px solid rgb(var(--surface-600)); } .home-section--alt > div { max-width: 72rem; margin: 0 auto; padding: 4.5rem 1.5rem; } .home-section h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: #fff; margin: 0.75rem 0 0.75rem; } .home-section__lede { color: rgb(var(--slate-400)); max-width: 52ch; margin: 0 0 2.5rem; } .card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .doc-card { padding: 1.5rem; display: block; } .doc-card__icon { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: rgb(var(--brand-600) / 0.15); color: rgb(var(--brand-400)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .doc-card__icon svg { width: 1.125rem; height: 1.125rem; } .doc-card h3 { font-size: 1rem; font-weight: 600; color: #fff; margin: 0 0 0.375rem; letter-spacing: -0.01em; } .doc-card p { font-size: 0.8125rem; color: rgb(var(--slate-400)); margin: 0 0 0.875rem; line-height: 1.6; } .doc-card__links { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; } .doc-card__links li { margin-bottom: 0.3rem; } .doc-card__links a { color: rgb(var(--slate-400)); } .doc-card__links a:hover { color: rgb(var(--brand-400)); } /* ── Site footer ─────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid rgb(var(--surface-600)); background: rgb(var(--surface-900)); padding-bottom: env(safe-area-inset-bottom, 0px); } .site-footer__inner { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .site-footer__about { grid-column: span 2; } .site-footer__about p { font-size: 0.75rem; line-height: 1.7; color: rgb(var(--slate-500)); max-width: 32ch; margin: 0.75rem 0 0; } .site-footer h2 { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgb(var(--slate-500)); margin: 0 0 0.75rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; font-size: 0.75rem; } .site-footer li { margin-bottom: 0.5rem; } .site-footer a { color: rgb(var(--slate-400)); } .site-footer a:hover { color: rgb(var(--brand-400)); } .site-footer__bar { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; border-top: 1px solid rgb(var(--surface-600) / 0.6); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.6875rem; color: rgb(var(--slate-600)); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1180px) { .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .toc { display: none; } .content { padding-inline: 2.25rem; } } @media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } .nav-toggle { display: inline-flex; } .site-nav .nav-link { display: none; } .sidebar { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) auto 0 0; width: min(20rem, 82vw); background: rgb(var(--surface-900)); border-right: 1px solid rgb(var(--surface-600)); transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); z-index: 45; height: auto; } .sidebar.is-open { transform: none; } .sidebar-scrim { position: fixed; inset: 0; z-index: 44; background: rgb(0 0 0 / 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s; } .sidebar-scrim.is-open { opacity: 1; pointer-events: auto; } .content { padding: 2rem 1.25rem 4rem; } .page-title { font-size: 1.875rem; } .page-nav { grid-template-columns: 1fr; } .page-nav__link--next { grid-column: 1; } .site-footer__about { grid-column: span 1; } .hero__inner { padding: 4.5rem 1.25rem 4rem; } .home-section, .home-section--alt > div { padding-inline: 1.25rem; } } /* ── Motion ──────────────────────────────────────────────────────────────── */ /* Every animation here is decoration, so reduced motion gets the finished state. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .aurora-a, .aurora-b { animation: none !important; } .lift:hover { transform: none; } .sidebar { transition: none; } } @media print { .site-header, .sidebar, .toc, .page-nav, .site-footer, .draft-banner { display: none !important; } .layout { display: block; padding-top: 0; } body { background: #fff; color: #111; } .content { padding: 0; } .page-title, .prose h2, .prose h3, .prose strong { color: #000; } }