style.css

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Headline";
  src: url("/assets/fonts/stack-sans-headline.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "Spline Sans Mono";
  src: url("/assets/fonts/spline-sans-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Spline Sans Mono";
  src: url("/assets/fonts/spline-sans-mono-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --zenith-purple: oklch(0.48 0.17 288);
  --zenith-purple-bright: oklch(0.575 0.17 292);
  --zenith-purple-wash: oklch(0.94 0.024 293);
  --zenith-canvas: oklch(0.972 0.003 290);
  --zenith-surface: oklch(1 0 0);
  --zenith-field: oklch(0.98 0.003 290);
  --zenith-edge: oklch(0.918 0.004 290);
  --zenith-ink: oklch(0.145 0.008 290);
  --zenith-muted: oklch(0.505 0.008 290);
  --zenith-cta-bg: #5d45b6;
  --zenith-cta-ink: white;
}

html.dark {
  --zenith-purple: oklch(0.745 0.135 292);
  --zenith-purple-bright: oklch(0.79 0.12 292);
  --zenith-purple-wash: oklch(0.275 0.055 292);
  --zenith-canvas: oklch(0.155 0.006 290);
  --zenith-surface: oklch(0.17 0.006 290);
  --zenith-field: oklch(0.215 0.008 290);
  --zenith-edge: oklch(0.285 0.01 290);
  --zenith-ink: oklch(0.945 0.008 290);
  --zenith-muted: oklch(0.715 0.012 290);
  --zenith-cta-bg: #694cbd;
  --zenith-cta-ink: white;
}

html {
  color-scheme: light;
  background: var(--zenith-surface);
}

html.dark {
  color-scheme: dark;
}

body {
  color: var(--zenith-ink);
  background: var(--zenith-surface);
  font-family: "Satoshi", ui-sans-serif, sans-serif;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
#page-title {
  color: var(--zenith-ink);
  font-family: "Stack Sans Headline", "Satoshi", ui-sans-serif, sans-serif;
  text-wrap: balance;
}

code,
pre,
kbd,
samp {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
}

::selection {
  background: color-mix(in oklab, var(--zenith-purple-bright) 22%, transparent);
}

#navbar-transition {
  border-color: var(--zenith-edge);
  background: color-mix(in oklab, var(--zenith-surface) 94%, transparent);
}

#navbar .nav-logo img {
  width: auto;
  height: 2rem;
}

html.dark a[href="https://zenith.hosting"] img {
  filter: brightness(1.65) saturate(0.78);
}

#search-bar-entry {
  border-radius: 0.75rem;
  background: var(--zenith-field);
  box-shadow: 0 0 0 1px var(--zenith-edge);
}

#sidebar,
#sidebar-content {
  border-right: 1px solid var(--zenith-edge);
  background: var(--zenith-surface);
}

#sidebar a[aria-current="page"] {
  color: var(--zenith-purple);
  background: color-mix(in oklab, var(--zenith-purple-wash) 60%, var(--zenith-surface));
}

#content-container {
  color: var(--zenith-ink);
}

#content-container p,
#content-container li,
#content-container td {
  line-height: 1.55;
}

#content-container a:not([class]) {
  color: var(--zenith-purple);
}

#content-container :not(pre) > code {
  border-color: var(--zenith-edge);
  background: var(--zenith-field);
}

#topbar-cta-button a > span:first-child {
  border-radius: 0.75rem;
  background: var(--zenith-cta-bg) !important;
}

#topbar-cta-button a > div,
#topbar-cta-button a > div span,
#topbar-cta-button a > div svg {
  color: var(--zenith-cta-ink) !important;
}

#footer {
  border-color: var(--zenith-edge);
}

html.dark #content-container {
  color: var(--zenith-ink);
}

html.dark #content-container p,
html.dark #content-container li,
html.dark #content-container td,
html.dark #content-container th {
  color: color-mix(in oklab, var(--zenith-ink) 88%, var(--zenith-muted));
}

html.dark #content-container hr,
html.dark #content-container table,
html.dark #content-container th,
html.dark #content-container td {
  border-color: var(--zenith-edge);
}

#footer a[href*="utm_campaign=poweredBy"] {
  display: none !important;
}

body > div[role="status"][aria-live="polite"].fixed.z-999 {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}