website/src/css/custom.css

/**
 * Hermes Agent — Custom Docusaurus Theme
 * Matches the landing page branding: amber-on-dark, terminal aesthetic
 * Colors from landingpage/style.css
 */

/* Import fonts to match landing page */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Gold/Amber palette from landing page */
  --ifm-color-primary: #FFD700;
  --ifm-color-primary-dark: #E6C200;
  --ifm-color-primary-darker: #D9B700;
  --ifm-color-primary-darkest: #B39600;
  --ifm-color-primary-light: #FFDD33;
  --ifm-color-primary-lighter: #FFE14D;
  --ifm-color-primary-lightest: #FFEB80;

  --ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --ifm-code-font-size: 90%;
  --ifm-heading-font-weight: 600;
}

/* Dark mode — the PRIMARY mode, matches landing page */
[data-theme='dark'] {
  --ifm-color-primary: #FFD700;
  --ifm-color-primary-dark: #E6C200;
  --ifm-color-primary-darker: #D9B700;
  --ifm-color-primary-darkest: #B39600;
  --ifm-color-primary-light: #FFDD33;
  --ifm-color-primary-lighter: #FFE14D;
  --ifm-color-primary-lightest: #FFEB80;

  --ifm-background-color: #07070d;
  --ifm-background-surface-color: #0f0f18;
  --ifm-navbar-background-color: #07070dEE;
  --ifm-footer-background-color: #050509;
  --ifm-color-emphasis-100: #14142a;
  --ifm-color-emphasis-200: #1a1a30;

  --ifm-font-color-base: #e8e4dc;
  --ifm-font-color-secondary: #9a968e;

  --ifm-link-color: #FFD700;
  --ifm-link-hover-color: #FFBF00;

  --ifm-code-background: #0f0f18;

  --ifm-toc-border-color: rgba(255, 215, 0, 0.08);
  --ifm-hr-border-color: rgba(255, 215, 0, 0.08);

  --docusaurus-highlighted-code-line-bg: rgba(255, 215, 0, 0.08);
}

/* Subtle dot grid background matching landing page */
[data-theme='dark'] .main-wrapper {
  background-image: radial-gradient(rgba(255, 215, 0, 0.02) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Navbar styling */
.navbar {
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 215, 0, 0.08);
}

/* backdrop-filter creates a stacking context that hides
   .navbar-sidebar menu content (Docusaurus #6996). Remove it
   while the mobile sidebar is open — both classes live on the
   same <nav> element. */
.navbar.navbar-sidebar--show {
  backdrop-filter: none;
}

.navbar__title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Sidebar tweaks */
[data-theme='dark'] .menu {
  background-color: transparent;
}

[data-theme='dark'] .menu__link--active:not(.menu__link--sublist) {
  background-color: rgba(255, 215, 0, 0.08);
  border-left: 3px solid #FFD700;
  padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 3px);
}

/* Code blocks */
[data-theme='dark'] .prism-code {
  background-color: #0a0a12 !important;
  border: 1px solid rgba(255, 215, 0, 0.06);
}

/* Text diagrams: preserve spacing, disable ligatures, and prefer box-drawing-safe fonts */
pre.prism-code.language-text,
pre.prism-code.language-plaintext,
pre.prism-code.language-txt,
pre.prism-code.language-ascii {
  white-space: pre;
  overflow-x: auto;
  line-height: 1.35;
  font-family: 'JetBrains Mono', 'Cascadia Mono', 'Cascadia Code', 'Fira Code', 'SFMono-Regular', 'DejaVu Sans Mono', 'Liberation Mono', monospace;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  text-rendering: optimizeSpeed;
}

pre.prism-code.language-text code,
pre.prism-code.language-plaintext code,
pre.prism-code.language-txt code,
pre.prism-code.language-ascii code {
  white-space: pre;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

.theme-mermaid {
  margin: 1.5rem 0;
  text-align: center;
}

.theme-mermaid svg {
  max-width: 100%;
  height: auto;
}

.docs-terminal-figure {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 1.25rem auto 0.5rem;
  border: 1px solid rgba(255, 215, 0, 0.08);
  border-radius: 12px;
  background: #0a0a12;
}

.docs-figure-caption {
  margin-top: 0.35rem;
  text-align: center;
  color: var(--ifm-font-color-secondary);
  font-size: 0.95rem;
}

/* Admonitions — gold-tinted */
[data-theme='dark'] .alert--info {
  --ifm-alert-background-color: rgba(255, 215, 0, 0.05);
  --ifm-alert-border-color: rgba(255, 215, 0, 0.15);
}

/* Table styling */
[data-theme='dark'] table {
  border-collapse: collapse;
}

[data-theme='dark'] table th {
  background-color: rgba(255, 215, 0, 0.06);
  border-color: rgba(255, 215, 0, 0.12);
}

[data-theme='dark'] table td {
  border-color: rgba(255, 215, 0, 0.06);
}

/* Footer */
.footer {
  border-top: 1px solid rgba(255, 215, 0, 0.08);
}

.footer a {
  color: #9a968e;
  transition: color 0.2s;
}

.footer a:hover {
  color: #FFD700;
  text-decoration: none;
}

/* Scrollbar */
[data-theme='dark'] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme='dark'] ::-webkit-scrollbar-track {
  background: #07070d;
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: #1a1a30;
  border-radius: 4px;
}

[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: #2a2a40;
}

/* Search bar */
[data-theme='dark'] .DocSearch-Button {
  background-color: #0f0f18;
  border: 1px solid rgba(255, 215, 0, 0.08);
}

/* ─── Mobile sidebar improvements ─────────────────────────────────────────── */

/* Larger touch targets on mobile */
@media (max-width: 996px) {
  .menu__link {
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
  }

  .menu__list-item-collapsible > .menu__link {
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.06);
  }

  /* Category caret — more visible */
  .menu__caret::before {
    background-size: 1.5rem 1.5rem;
  }

  /* Indent subcategories clearly */
  .menu__list .menu__list {
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 215, 0, 0.06);
    margin-left: 0.5rem;
  }

  /* Sidebar overlay — slightly more opaque for readability */
  .navbar-sidebar__backdrop {
    background-color: rgba(0, 0, 0, 0.6);
  }

  /* Sidebar width on mobile — use more of the screen */
  .navbar-sidebar {
    width: 85vw;
    max-width: 360px;
  }
}

/* Hero banner for docs landing if needed */
.hero--hermes {
  background: linear-gradient(135deg, #07070d 0%, #0f0f18 100%);
  padding: 4rem 0;
}