1  /**
  2   * Hermes Agent — Custom Docusaurus Theme
  3   * Matches the landing page branding: amber-on-dark, terminal aesthetic
  4   * Colors from landingpage/style.css
  5   */
  6  
  7  /* Import fonts to match landing page */
  8  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
  9  
 10  :root {
 11    /* Dark amber palette for light mode — readable on white (WCAG AA compliant)
 12       Current gold #FFD700 has only 1.4:1 contrast on white; these tones pass 4.5:1+ */
 13    --ifm-color-primary: #8B6508;
 14    --ifm-color-primary-dark: #7A5800;
 15    --ifm-color-primary-darker: #6E4F00;
 16    --ifm-color-primary-darkest: #5A4100;
 17    --ifm-color-primary-light: #9E7410;
 18    --ifm-color-primary-lighter: #B38319;
 19    --ifm-color-primary-lightest: #C89222;
 20  
 21    --ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 22    --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
 23  
 24    --ifm-code-font-size: 90%;
 25    --ifm-heading-font-weight: 600;
 26  
 27    --ifm-link-color: #7A5800;
 28    --ifm-link-hover-color: #5A4100;
 29  }
 30  
 31  /* Dark mode — the PRIMARY mode, matches landing page */
 32  [data-theme='dark'] {
 33    --ifm-color-primary: #FFD700;
 34    --ifm-color-primary-dark: #E6C200;
 35    --ifm-color-primary-darker: #D9B700;
 36    --ifm-color-primary-darkest: #B39600;
 37    --ifm-color-primary-light: #FFDD33;
 38    --ifm-color-primary-lighter: #FFE14D;
 39    --ifm-color-primary-lightest: #FFEB80;
 40  
 41    --ifm-background-color: #07070d;
 42    --ifm-background-surface-color: #0f0f18;
 43    --ifm-navbar-background-color: #07070dEE;
 44    --ifm-footer-background-color: #050509;
 45    --ifm-color-emphasis-100: #14142a;
 46    --ifm-color-emphasis-200: #1a1a30;
 47  
 48    --ifm-font-color-base: #e8e4dc;
 49    --ifm-font-color-secondary: #9a968e;
 50  
 51    --ifm-link-color: #FFD700;
 52    --ifm-link-hover-color: #FFBF00;
 53  
 54    --ifm-code-background: #0f0f18;
 55  
 56    --ifm-toc-border-color: rgba(255, 215, 0, 0.08);
 57    --ifm-hr-border-color: rgba(255, 215, 0, 0.08);
 58  
 59    --docusaurus-highlighted-code-line-bg: rgba(255, 215, 0, 0.08);
 60  }
 61  
 62  /* Subtle dot grid background matching landing page */
 63  [data-theme='dark'] .main-wrapper {
 64    background-image: radial-gradient(rgba(255, 215, 0, 0.02) 1px, transparent 1px);
 65    background-size: 32px 32px;
 66  }
 67  
 68  /* Navbar styling */
 69  .navbar {
 70    backdrop-filter: blur(12px);
 71    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
 72  }
 73  
 74  /* backdrop-filter creates a stacking context that hides
 75     .navbar-sidebar menu content (Docusaurus #6996). Remove it
 76     while the mobile sidebar is open — both classes live on the
 77     same <nav> element. */
 78  .navbar.navbar-sidebar--show {
 79    backdrop-filter: none;
 80  }
 81  
 82  .navbar__title {
 83    font-weight: 600;
 84    letter-spacing: -0.02em;
 85  }
 86  
 87  /* Sidebar tweaks */
 88  [data-theme='dark'] .menu {
 89    background-color: transparent;
 90  }
 91  
 92  [data-theme='dark'] .menu__link--active:not(.menu__link--sublist) {
 93    background-color: rgba(255, 215, 0, 0.08);
 94    border-left: 3px solid #FFD700;
 95    padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 3px);
 96  }
 97  
 98  /* Light mode sidebar active */
 99  [data-theme='light'] .menu__link--active:not(.menu__link--sublist) {
100    background-color: rgba(139, 101, 8, 0.08);
101    border-left: 3px solid #8B6508;
102    padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 3px);
103  }
104  
105  /* Code blocks */
106  [data-theme='dark'] .prism-code {
107    background-color: #0a0a12 !important;
108    border: 1px solid rgba(255, 215, 0, 0.06);
109  }
110  
111  /* Text diagrams: preserve spacing, disable ligatures, and prefer box-drawing-safe fonts */
112  pre.prism-code.language-text,
113  pre.prism-code.language-plaintext,
114  pre.prism-code.language-txt,
115  pre.prism-code.language-ascii {
116    white-space: pre;
117    overflow-x: auto;
118    line-height: 1.35;
119    font-family: 'JetBrains Mono', 'Cascadia Mono', 'Cascadia Code', 'Fira Code', 'SFMono-Regular', 'DejaVu Sans Mono', 'Liberation Mono', monospace;
120    font-variant-ligatures: none;
121    font-feature-settings: "liga" 0, "calt" 0;
122    text-rendering: optimizeSpeed;
123  }
124  
125  pre.prism-code.language-text code,
126  pre.prism-code.language-plaintext code,
127  pre.prism-code.language-txt code,
128  pre.prism-code.language-ascii code {
129    white-space: pre;
130    font-variant-ligatures: none;
131    font-feature-settings: "liga" 0, "calt" 0;
132  }
133  
134  .theme-mermaid {
135    margin: 1.5rem 0;
136    text-align: center;
137  }
138  
139  .theme-mermaid svg {
140    max-width: 100%;
141    height: auto;
142  }
143  
144  .docs-terminal-figure {
145    display: block;
146    width: 100%;
147    max-width: 900px;
148    margin: 1.25rem auto 0.5rem;
149    border: 1px solid rgba(255, 215, 0, 0.08);
150    border-radius: 12px;
151    background: #0a0a12;
152  }
153  
154  .docs-figure-caption {
155    margin-top: 0.35rem;
156    text-align: center;
157    color: var(--ifm-font-color-secondary);
158    font-size: 0.95rem;
159  }
160  
161  /* Admonitions — gold-tinted */
162  [data-theme='dark'] .alert--info {
163    --ifm-alert-background-color: rgba(255, 215, 0, 0.05);
164    --ifm-alert-border-color: rgba(255, 215, 0, 0.15);
165  }
166  
167  /* Table styling */
168  [data-theme='dark'] table {
169    border-collapse: collapse;
170  }
171  
172  [data-theme='dark'] table th {
173    background-color: rgba(255, 215, 0, 0.06);
174    border-color: rgba(255, 215, 0, 0.12);
175  }
176  
177  [data-theme='dark'] table td {
178    border-color: rgba(255, 215, 0, 0.06);
179  }
180  
181  /* Light mode table styling */
182  [data-theme='light'] table th {
183    background-color: rgba(139, 101, 8, 0.06);
184    border-color: rgba(139, 101, 8, 0.15);
185  }
186  
187  [data-theme='light'] table td {
188    border-color: rgba(139, 101, 8, 0.10);
189  }
190  
191  /* Footer */
192  .footer {
193    border-top: 1px solid rgba(255, 215, 0, 0.08);
194  }
195  
196  .footer a {
197    color: #9a968e;
198    transition: color 0.2s;
199  }
200  
201  [data-theme='dark'] .footer a:hover {
202    color: #FFD700;
203    text-decoration: none;
204  }
205  
206  [data-theme='light'] .footer a:hover {
207    color: #7A5800;
208    text-decoration: none;
209  }
210  
211  /* Scrollbar */
212  [data-theme='dark'] ::-webkit-scrollbar {
213    width: 8px;
214    height: 8px;
215  }
216  
217  [data-theme='dark'] ::-webkit-scrollbar-track {
218    background: #07070d;
219  }
220  
221  [data-theme='dark'] ::-webkit-scrollbar-thumb {
222    background: #1a1a30;
223    border-radius: 4px;
224  }
225  
226  [data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
227    background: #2a2a40;
228  }
229  
230  /* Search bar */
231  [data-theme='dark'] .DocSearch-Button {
232    background-color: #0f0f18;
233    border: 1px solid rgba(255, 215, 0, 0.08);
234  }
235  
236  /* ─── Mobile sidebar improvements ─────────────────────────────────────────── */
237  
238  /* Larger touch targets on mobile */
239  @media (max-width: 996px) {
240    .menu__link {
241      padding: 0.6rem 0.75rem;
242      font-size: 0.95rem;
243    }
244  
245    .menu__list-item-collapsible > .menu__link {
246      font-weight: 600;
247      font-size: 1rem;
248      padding: 0.75rem 0.75rem;
249      border-bottom: 1px solid rgba(255, 215, 0, 0.06);
250    }
251  
252    /* Category caret — more visible */
253    .menu__caret::before {
254      background-size: 1.5rem 1.5rem;
255    }
256  
257    /* Indent subcategories clearly */
258    .menu__list .menu__list {
259      padding-left: 0.75rem;
260      border-left: 1px solid rgba(255, 215, 0, 0.06);
261      margin-left: 0.5rem;
262    }
263  
264    /* Sidebar overlay — slightly more opaque for readability */
265    .navbar-sidebar__backdrop {
266      background-color: rgba(0, 0, 0, 0.6);
267    }
268  
269    /* Sidebar width on mobile — use more of the screen */
270    .navbar-sidebar {
271      width: 85vw;
272      max-width: 360px;
273    }
274  }
275  
276  /* Hero banner for docs landing if needed */
277  .hero--hermes {
278    background: linear-gradient(135deg, #07070d 0%, #0f0f18 100%);
279    padding: 4rem 0;
280  }