card inside doesn't fill the . Force
any single-card-only
wrapper to flex so the card fills it. */
.section-cards > p:has(> .section-card:only-child) {
display: flex;
margin: 0;
}
.section-cards > p:has(> .section-card:only-child) > .section-card {
flex: 1;
}
/* ── Version banner ──────────────────────────────────────────────────── */
/* Matches old alert-info banner styling */
.version-banner {
background: hsl(204, 45.5%, 97.8%);
border: 1px solid #dee2e6;
border-radius: 4px;
color: var(--tw-prose-body, #374151);
font-size: 0.9rem;
padding: 0.75rem 1rem;
margin: 0.75rem 0;
line-height: 1.5;
}
.version-banner p {
margin: 0 !important;
}
.dark .version-banner {
background: hsla(210, 100%, 50%, 0.1);
border-color: #1e3a5f;
color: #d1d5db;
}
/* ── Alerts and callouts ─────────────────────────────────────────────── */
/* Matches old docs-theme-lotus alert styling with Material Icons */
.solo-alert {
display: flex;
gap: 0.5rem;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 0.75rem 1rem;
margin: 1rem 0;
font-size: 0.9rem;
line-height: 1.6;
color: inherit;
}
.solo-alert-icon {
flex-shrink: 0;
}
.solo-alert-icon .material-icons {
font-size: 20px;
vertical-align: middle;
}
.solo-alert-body {
flex: 1;
min-width: 0;
}
.solo-alert-body p {
margin: 0 !important;
}
/* Alert color variants — light mode */
.alert-info { background: hsl(204, 45.5%, 97.8%); }
.alert-warning { background: hsl(48, 100%, 96%); }
.alert-success { background: hsl(140, 50%, 96%); }
.alert-danger { background: hsl(0, 70%, 97%); }
.alert-default { background: hsl(226, 68%, 95.1%); }
.alert-info .solo-alert-icon { color: var(--theme-primary); }
.alert-warning .solo-alert-icon { color: #d97706; }
.alert-success .solo-alert-icon { color: #059669; }
.alert-danger .solo-alert-icon { color: #dc2626; }
.alert-default .solo-alert-icon { color: #6b7280; }
/* Alert color variants — dark mode */
.dark .solo-alert { border-color: #374151; color: #d1d5db; }
.dark .alert-info { background: hsla(210, 100%, 50%, 0.1); }
.dark .alert-warning { background: hsla(48, 100%, 50%, 0.1); }
.dark .alert-success { background: hsla(160, 100%, 40%, 0.1); }
.dark .alert-danger { background: hsla(0, 100%, 50%, 0.1); }
.dark .alert-default { background: hsla(226, 68%, 50%, 0.05); }
.dark .alert-info .solo-alert-icon { color: #60a5fa; }
.dark .alert-warning .solo-alert-icon { color: #fbbf24; }
.dark .alert-success .solo-alert-icon { color: #34d399; }
.dark .alert-danger .solo-alert-icon { color: #f87171; }
.dark .alert-default .solo-alert-icon { color: #9ca3af; }
/* ── Copy as Markdown button ─────────────────────────────────────────── */
.copy-md-wrapper {
display: inline-flex;
}
.copy-md-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 500;
color: #6b7280;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: color 0.2s, border-color 0.2s;
}
.copy-md-btn:hover {
color: var(--theme-primary);
border-color: var(--theme-primary);
}
.copy-md-btn.copied {
color: #059669;
border-color: #059669;
}
.copy-md-icon {
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
}
.copy-md-source {
display: none !important;
}
.dark .copy-md-btn {
color: #9ca3af;
border-color: #4b5563;
}
.dark .copy-md-btn:hover {
color: var(--theme-primary);
border-color: var(--theme-primary);
}
.dark .copy-md-btn.copied {
color: #34d399;
border-color: #34d399;
}
/* ── Full-width layout ───────────────────────────────────────────────── */
/* Wide layout — large enough to feel flush but bounded so TOC stays visible */
:root {
--hextra-max-page-width: 100%;
--hextra-max-navbar-width: 100%;
}
/* Show TOC at smaller viewport widths (default is xl/1280px) */
.hextra-toc {
display: none;
}
@media (min-width: 1024px) {
.hextra-toc {
display: block !important;
}
}
/* ── Typography ──────────────────────────────────────────────────────── */
/* Heading weight is component-shaped (lighter than hextra default). Heading
*colors* are brand-specific and live in brand-{oss,enterprise}.css. */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
font-weight: 600 !important;
}
.content h1 {
padding-top: 1.75rem;
}
/* Ensure spacing after headings even when followed by non-paragraph text (e.g. reuse snippets) */
.content h2, .content h3, .content h4, .content h5, .content h6 {
margin-bottom: 1rem;
}
/* Body text size matching old theme — scoped to main content, not sidebar */
#content > .content p, #content > .content li {
font-size: 1rem;
line-height: 1.7;
}
/* ── Links ───────────────────────────────────────────────────────────── */
/* Link weight is component-shaped (consistent across brands). Link colors
live in brand-{oss,enterprise}.css. */
.content a {
font-weight: 500;
}
/* ── Code block highlighted lines ────────────────────────────────────── */
/* Expand code to the widest line. With .hl using width:max-content below,
code's intrinsic max-content is unambiguously the widest line's text width
(no circular dependency). .hl's min-width:100% then references this
expanded code width, giving all highlights uniform width. */
.chroma pre > code {
display: block;
min-width: max-content;
}
.chroma .line.hl {
display: block;
width: max-content;
min-width: 100%;
background-color: var(--theme-primary-tint);
}
/* Line-number highlight: put the background on the .hl wrapper that contains
.lnt (structure is N), so it
spans the full line-number cell — not just the digit text. */
.chroma .lntable .hl:not(.line) {
display: block;
background-color: var(--theme-primary-tint);
}
/* Strip horizontal padding from
s inside lntable so the line-number and
code highlights meet flush and span the cell width uniformly. Hextra's own
padding on .lnt / .hl provides breathing room within the highlight area. */
.content .chroma .lntable pre {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Remove gap between line number and code columns */
.lntable {
border-spacing: 0 !important;
border-collapse: collapse !important;
}
.lntd {
vertical-align: top !important;
padding: 0 !important;
border: 0 !important;
}
/* Remove right padding/margin on line number column */
.lntd:first-child {
padding-right: 0 !important;
}
/* Remove left padding/margin on code column */
.lntd:last-child {
padding-left: 0 !important;
}
/* ── Ordered lists (numbered steps) ──────────────────────────────────── */
/* Matches old docs-theme-lotus: grey background square with number */
#content > .content ol {
list-style: none;
padding-left: 0;
}
/* Flush top-level steps to the content edge. Hextra's prose adds
margin-left: 1.5rem on every ol; we keep that for nested ols (which
should stay indented under their parent step) but zero it for the
first level. `ol:not(li ol)` matches ols that aren't inside any li. */
#content > .content ol:not(li ol) {
margin-left: 0;
}
#content > .content ol > li {
position: relative;
padding-left: 27px;
margin-top: 1rem;
margin-left: 0;
}
#content > .content ol > li::before {
content: counter(list-item);
background: #ebf4f9;
color: #343a40;
font-size: 12px;
font-weight: 500;
line-height: 10px;
text-align: center;
padding: 5px 0;
width: 20px;
height: 20px;
border-radius: 5px;
position: absolute;
left: 0;
top: 3px;
}
.dark #content > .content ol > li::before {
background: #374151;
color: #d1d5db;
}
/* Nested ordered lists: lowercase letters.
`:not([start])` so that an explicit `` continues the
counter from the prior sibling nested ol — needed when a list-item's
content includes a block (HTML pre, etc.) that Goldmark renders
outside the parent - , splitting one logical list into two
sibling
s. Without this, item 9 after the split would render
as "a" instead of "i". */
#content > .content ol ol:not([start]) {
counter-reset: sublistitem;
}
#content > .content ol ol > li {
counter-increment: sublistitem list-item 0;
}
#content > .content ol ol > li::before {
content: counter(sublistitem, lower-alpha);
}
/* Doubly-nested ordered lists: lowercase roman numerals */
#content > .content ol ol ol:not([start]) {
counter-reset: subsublistitem;
}
#content > .content ol ol ol > li {
counter-increment: subsublistitem list-item 0;
}
#content > .content ol ol ol > li::before {
content: counter(subsublistitem, lower-roman);
}
/* ── Sidebar ─────────────────────────────────────────────────────────── */
/* Tighten sidebar font to match old theme */
.hextra-sidebar-container {
font-size: 0.875rem;
}
/* Hide the sidebar's scrollable content briefly on first paint to avoid the
visible "scrolled to top → jump to active item" flash. Hextra's
sidebar.js sets scrollTop on DOMContentLoaded; head-end.html adds the
.sidebar-loading class during parse and removes it via rAF
after DCL, so the sidebar reveals at the correct scroll position. */
html.sidebar-loading .hextra-sidebar-container .hextra-scrollbar {
visibility: hidden;
}
/* Product logo in sidebar */
.sidebar-product-logo {
padding: 0.5rem 0 0.25rem;
}
/* Short, centered hairline beneath the logo. A full-width border-bottom
read as an unfinished frame edge (no matching rule on the right or
bottom to terminate it), so this inset rule reads as decoration
between sections instead. */
.sidebar-product-logo::after {
content: "";
display: block;
width: 85%;
height: 1px;
margin: 0.75rem auto 0;
background: #e5e7eb;
}
.sidebar-product-logo img {
width: 108%;
max-width: 108%;
height: auto;
}
.sidebar-logo-light { display: block; }
.sidebar-logo-dark { display: none; }
.dark .sidebar-logo-light { display: none; }
.dark .sidebar-logo-dark { display: block; }
.dark .sidebar-product-logo::after { background: #374151; }
/* In the mobile slide-in panel the sidebar is a fixed 280px, so the desktop
logo overscan (width: 108% above) overflows the panel and crowds the logo
against the right edge. Below xl, fit the logo inside the panel and give it
symmetric horizontal padding so it sits centered with breathing room. The
desktop (>= 1280px) sidebar keeps its overscan. */
@media (max-width: 1279px) {
.sidebar-product-logo {
padding-left: 1rem;
padding-right: 1rem;
}
.sidebar-product-logo img {
width: 100%;
max-width: 100%;
}
}
/* Darken sidebar link text */
.hextra-sidebar-container .hextra-sidebar-item a {
color: #1f2937 !important;
}
.dark .hextra-sidebar-container .hextra-sidebar-item a {
color: #d1d5db !important;
}
/* Nested sidebar children: indent + left border so the parent/child
hierarchy reads visually. Matches the agw-oss sidebar design (0.75rem
indent on both margin and padding, hairline left border). Applied to
every inside another within .sidebar-container so the rule
covers kgateway's recursive sidebar template AND any consumer using
hextra's default sidebar — neither template needs to ship inline
margins for nested levels. */
.sidebar-container ul ul {
margin-left: 0.75rem;
margin-top: 0.25rem;
padding-left: 0.75rem;
border-left: 1px solid #e5e7eb;
}
.dark .sidebar-container ul ul {
border-left-color: #374151;
}
/* Sidebar active item — matches old theme's grey instead of hextra's blue tint */
.hextra-sidebar-container .hextra-sidebar-active-item {
background-color: #e8eaed !important;
color: #1f2937 !important;
border-radius: 6px !important;
}
.dark .hextra-sidebar-container .hextra-sidebar-active-item {
background-color: #363c47 !important;
color: #d1d5db !important;
}
/* Sidebar hover — matches old theme */
.hextra-sidebar-container .hextra-sidebar-item a:hover {
background-color: #eff1f4 !important;
}
.dark .hextra-sidebar-container .hextra-sidebar-item a:hover {
background-color: #2b303b !important;
}
/* ── Figure images in dark mode ──────────────────────────────────────────
No automatic white-card wrapper. Authors that need a dark-mode variant
of a screenshot use `reuse-image-dark` (wraps the dark image in
``, shown only on dark pages). Images without
a dark variant render as-is on dark pages. Mermaid diagrams use
Mermaid's built-in dark theme; see layouts/partials/scripts/mermaid.html. */
/* ── Solo footer ─────────────────────────────────────────────────────── */
.solo-footer {
border-top: 1px solid #e5e7eb;
padding: 1rem 1.5rem 1.25rem;
background: #fff;
font-size: 0.875rem;
line-height: 1.6;
color: #6b7280;
}
.solo-footer-inner {
max-width: var(--hextra-max-page-width, 100%);
margin: 0 auto;
text-align: center;
}
.solo-footer p {
margin: 0;
}
.dark .solo-footer {
background: transparent;
border-top-color: rgba(255, 255, 255, 0.1);
color: #9ca3af;
}
#solo-back-to-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--theme-primary);
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 30;
transition: background-color 0.15s ease, transform 0.15s ease;
}
#solo-back-to-top:hover {
background: var(--theme-primary-hover);
transform: translateY(-1px);
}
#solo-back-to-top[hidden] {
display: none;
}
.dark #solo-back-to-top {
background: #2b3340;
color: #d1d5db;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.dark #solo-back-to-top:hover {
background: #3a4350;
}
/* ── TOC (right-hand "On this page" nav) ────────────────────────────────
Rendered by layouts/_partials/toc.html. Class hooks are .solo-toc-*
(plus the outer hextra-toc wrapper that hextra owns). Centralized
from kgateway + agentgateway-oss inline styles so the right rail
matches across both sites. */
.solo-toc-inner {
position: sticky;
top: 4rem;
overflow-y: auto;
padding-right: 1rem;
padding-top: 0.5rem;
font-size: 0.875rem;
hyphens: auto;
max-height: calc(100vh - var(--navbar-height) - env(safe-area-inset-bottom));
margin-right: -1rem;
}
.solo-toc-heading {
margin-top: 0.1875rem;
margin-bottom: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.solo-toc-sublist {
margin-left: 1rem;
margin-top: 0.25rem;
}
.solo-toc-item {
margin: 0.5rem 0;
scroll-margin-top: 1.5rem;
scroll-padding-top: 1.5rem;
}
.solo-toc-link {
display: inline-block;
width: 100%;
word-break: break-word;
color: #6b7280;
text-decoration: none;
font-size: 0.875rem;
font-weight: 400 !important;
padding: 2px 8px;
transition: none !important;
}
.dark .solo-toc-link {
color: #9ca3af;
}
.solo-toc-link:hover {
color: inherit !important;
background-color: #f5f6f8;
border-radius: 6px;
}
.dark .solo-toc-link:hover {
background-color: #2b303b;
}
.solo-toc-link.toc-active {
color: #111827 !important;
background-color: #e8eaed;
border-radius: 6px;
}
.dark .solo-toc-link.toc-active {
color: #f9fafb !important;
background-color: #363c47;
}
/* Sticky footer of the TOC (back-to-top + future links). Background is
transparent so it reveals whatever page/brand background is painted behind
it (kgw dark #111, agw-oss dark #030712, light-mode white) rather than
hardcoding one dark hex that only matches a single brand. Tradeoff: no
solid-fill fade for TOC links that scroll behind it. */
.solo-toc-bottom {
margin-top: 2rem;
border-top: 1px solid #e5e7eb;
padding-top: 2rem;
padding-bottom: 2rem;
position: sticky;
bottom: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
background: transparent;
}
.dark .solo-toc-bottom {
border-top-color: #374151;
}
.solo-toc-back-to-top {
font-size: 0.75rem;
font-weight: 500;
color: #6b7280;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
gap: 0.25rem;
/* opacity transitions the hx:opacity-0 reveal/hide toggled by Hextra's
main.js on scroll; color handles hover. */
transition: color 0.15s, opacity 0.15s;
}
.solo-toc-back-to-top:hover {
color: #111827;
}
.dark .solo-toc-back-to-top {
color: #9ca3af;
}
.dark .solo-toc-back-to-top:hover {
color: #e5e7eb;
}
.solo-toc-back-to-top svg {
display: inline;
height: 0.875rem;
width: 0.875rem;
border: 1px solid #9ca3af;
border-radius: 9999px;
margin-left: 0.25rem;
}
.dark .solo-toc-back-to-top svg {
border-color: #6b7280;
}
/* ── Page description (subtitle under
) ──────────────────────────── */
/* Auto-rendered from front matter `description` by docs/single.html and
docs/list.html. Matches the lead-paragraph styling from docs-theme-lotus. */
.page-description {
font-size: 1.125rem;
line-height: 1.6;
color: #6b7280;
margin-top: -0.5rem;
margin-bottom: 1.5rem;
}
.dark .page-description {
color: #9ca3af;
}
/* ── Copy-as-Markdown only blocks ────────────────────────────────────── */
/* Content emitted purely for transform.HTMLToMarkdown to capture (e.g. an
OpenAPI summary inside the openapi shortcode). Hidden from readers but
visible to the "Copy as Markdown" extraction. */
.copy-md-only {
display: none !important;
}
/* ── Code blocks ─────────────────────────────────────────────────────── */
/* Match old theme: white background in light mode, dark grey in dark mode */
.content pre {
border-radius: 6px;
padding: 1rem;
background-color: #fff !important;
border: 1px solid #e5e7eb;
}
.content .highlight pre,
.content .chroma {
background-color: #fff !important;
}
/* Syntax-highlighted blocks with line numbering: put the border/radius
on the outer .chroma wrapper so lntable's two-cell layout renders as
a single box, not one border per . Inner s keep their
padding for code spacing.
Scoped to `div.chroma` because Hugo emits `` for
plain blocks and `` for line-numbered ones. The
non-`div` form is the
itself; applying overflow:hidden there
killed horizontal scroll on every plain code block. */
.content div.chroma {
border-radius: 6px;
border: 1px solid #e5e7eb;
overflow: hidden;
}
.content div.chroma pre {
border: 0 !important;
border-radius: 0 !important;
}
.dark .content pre {
background-color: #1a1a2e !important;
border-color: #374151;
}
.dark .content .highlight pre,
.dark .content .chroma {
background-color: #1a1a2e !important;
}
.dark .content div.chroma {
border-color: #374151;
}
/* Chroma error tokens get a light background in the default theme.
Clear it in dark mode so code blocks don't show light patches
(common when non-JSON content is fenced as ```json). */
.dark .chroma .err {
background-color: transparent !important;
}
/* ── Footnotes ───────────────────────────────────────────────────────── */
/* Goldmark emits `` immediately before a
footnotes section. The horizontal line clashes with our typography
(tables already have a bottom border, headings have spacing) and reads
as a visual artifact rather than a structural separator. Hide it; the
`