murk-cli 0.10.2

/* murk brand skin for Starlight.
 *
 * Distinct from the interrupted.sh org chrome, but sharing its type: Inter for
 * text, Meslo for code (self-hosted woff2, same faces as interrupted.sh). murk
 * owns the purple accent (#8760FF) and the diamond glyph. Dark-only — there is
 * no light theme and no theme toggle (see astro.config.mjs). */

/* --- Brand typefaces (self-hosted, matching interrupted.sh) --- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Meslo";
  src: url("/fonts/meslo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Meslo";
  src: url("/fonts/meslo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Brand type. */
  --sl-font: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sl-font-mono: "Meslo", "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, monospace;

  /* Accent: brand purple. Used for links, active nav, focus rings. */
  --sl-color-accent-low: #241a4d;
  --sl-color-accent: #8760ff;
  --sl-color-accent-high: #d3c8ff;

  /* Brand tokens for local use. */
  --murk-accent: #8760ff;
  --murk-accent-glow: #8760ff40;
}

/* Site title: nudge toward the brand and pair it with the diamond motif. */
.site-title {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Splash hero call-to-action buttons wear the brand purple with a soft glow. */
.hero a[class*="action"][class*="primary"] {
  background: var(--murk-accent);
  border-color: var(--murk-accent);
  box-shadow: 0 0 0 1px var(--murk-accent), 0 8px 24px -8px var(--murk-accent-glow);
}

/* Diamond bullet before top-level sidebar group headings — the murk glyph,
 * drawn as a rotated square (not a font glyph) so it matches the vector mark
 * and renders identically on every platform. */
.sidebar-content summary .group-label span::before,
.sidebar-content > ul > li > details > summary .large::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-inline-end: 0.55em;
  vertical-align: 0.02em;
  border-radius: 1.5px;
  background: #8760ff;
  transform: rotate(45deg);
}

/* --- Splash hero: tighten the vertical rhythm and give the mark presence. ---
 * Starlight's default hero pads ~106px top/bottom and floats a large image,
 * which left a dead band between the CTAs and the first card. Pull the padding
 * in, cap the mark, and wrap it in the brand glow so the space reads as
 * intentional atmosphere rather than emptiness. */
.hero img {
  filter: drop-shadow(0 10px 44px var(--murk-accent-glow));
}
/* The dead band was a desktop-only artifact of the two-column hero, so only
 * tighten (and cap the mark) at the breakpoint where the hero goes horizontal;
 * the stacked mobile hero keeps Starlight's native rhythm. */
@media (min-width: 50rem) {
  .hero {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }
  .hero img {
    max-width: 300px;
  }
}

/* --- Tables --- */

/* Row hover across every content table, so a wide row is easy to track. */
.sl-markdown-content table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* Comparison table ("How murk compares"): give murk's column (2nd) the brand
 * accent so it reads distinctly from the alternatives. Soft purple band,
 * accent header, bolder values. Scoped to the .compare wrapper in index.mdx. */
.compare {
  overflow-x: auto;
}
/* Floor the width so narrow screens scroll the wrapper instead of crushing
 * six columns into an unreadable, clipped grid. */
.compare table {
  min-width: 44rem;
}
.compare table th:nth-child(2),
.compare table td:nth-child(2) {
  background: rgba(135, 96, 255, 0.1);
}
.compare table th:nth-child(2) {
  color: var(--sl-color-accent-high);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.compare table tr:last-child td:nth-child(2) {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.compare table td:nth-child(2) {
  font-weight: 600;
  color: var(--sl-color-white);
}

/* Inline code: the default box is sharp-cornered and flat gray. Round it and
 * give it a faint purple tint plus a hairline border, so `code` reads as a
 * branded token without shouting. Scoped to inline code (a direct child of a
 * non-pre element), leaving Expressive Code blocks untouched. */
.sl-markdown-content :not(pre) > code {
  border-radius: 5px;
  padding: 0.15em 0.4em;
  background: rgba(135, 96, 255, 0.1);
  border: 1px solid rgba(135, 96, 255, 0.16);
}

/* ...but not inside headings. At heading size the chip's box, border, and
 * padding dominate and overlap the line above when the heading wraps. Keep the
 * mono face only: no box, a touch smaller, inheriting the heading's color. */
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-size: 0.9em;
  color: inherit;
}