@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* override the *:max-w-[900px] on #nd-page - constrain inner content to 56rem */
#nd-page p,
#nd-page ul,
#nd-page ol,
#nd-page h1,
#nd-page h2,
#nd-page h3,
#nd-page h4,
#nd-page h5,
#nd-page h6,
#nd-page > * > * {
max-width: 56rem !important;
}
/* main content divs fill available space */
#nd-page > div {
width: 100% !important;
max-width: none !important;
}
/* center the entire notebook layout with horizontal spacing between elements */
#nd-notebook-layout {
max-width: calc(268px + 56rem + 250px + 4rem); /* sidebar + content + TOC + spacing */
margin-left: auto !important;
margin-right: auto !important;
@media (min-width: 1024px) {
column-gap: 2rem !important; /* horizontal spacing between sidebar, content, and TOC */
}
overflow-x: visible !important; /* allow full-viewport header border to escape clipped grid */
}
/* Fumadocs color tokens */
:root {
--color-fd-background: oklch(1 0 0);
--color-fd-foreground: oklch(0.147 0.004 49.25);
--color-fd-card: oklch(1 0 0);
--color-fd-card-foreground: oklch(0.147 0.004 49.25);
--color-fd-popover: oklch(1 0 0);
--color-fd-popover-foreground: oklch(0.147 0.004 49.25);
--color-fd-muted: oklch(0.97 0.001 106.424);
--color-fd-muted-foreground: oklch(0.553 0.013 58.071);
--color-fd-accent: oklch(0.97 0.001 106.424);
--color-fd-accent-foreground: oklch(0.216 0.006 56.043);
--color-fd-border: oklch(0.923 0.003 48.717);
--color-fd-primary: oklch(0.216 0.006 56.043);
--color-fd-primary-foreground: oklch(0.985 0.001 106.423);
/* custom brand colors */
--docfork: oklch(0.616 0.2299 27.17);
--docfork-hover: oklch(0.66528 0.2299 27.17);
}
.dark {
--color-fd-background: oklch(0.1469 0.0041 49.25);
--color-fd-foreground: oklch(0.985 0.001 106.423);
--color-fd-card: oklch(0.216 0.006 56.043);
--color-fd-card-foreground: oklch(0.985 0.001 106.423);
--color-fd-popover: oklch(0.216 0.006 56.043);
--color-fd-popover-foreground: oklch(0.985 0.001 106.423);
--color-fd-muted: oklch(0.268 0.007 34.298);
--color-fd-muted-foreground: oklch(0.709 0.01 56.259);
--color-fd-accent: oklch(0.268 0.007 34.298);
--color-fd-accent-foreground: oklch(0.985 0.001 106.423);
--color-fd-border: oklch(1 0 0 / 10%);
--color-fd-primary: oklch(0.923 0.003 48.717);
--color-fd-primary-foreground: oklch(0.216 0.006 56.043);
}
/* custom Tailwind token */
@theme {
--color-docfork: var(--docfork);
}
.btn-primary {
background-color: var(--docfork);
color: var(--color-docfork-foreground);
}
/* nav-buttons specific styles */
.bg-docfork {
background-color: var(--docfork);
color: oklch(0.98 0 0);
}
.bg-docfork:hover {
background-color: var(--docfork-hover);
}
.hover\:bg-docfork\/80:hover {
background-color: var(--docfork-hover);
}
/* force opaque notebook header */
[data-header-body] {
background-color: var(--color-fd-background) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* make header span full width with continuous border */
#nd-subnav {
position: sticky !important;
top: 0 !important;
z-index: 30 !important;
width: 100% !important;
}
/* draw a true viewport-wide border, decoupled from centered content */
#nd-subnav::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 100vw;
border-bottom: 1px solid var(--color-fd-border);
pointer-events: none;
}
/* center header contents to match main content area width */
/* Header content should align with #nd-page which fills between sidebar and TOC */
#nd-subnav [data-header-body] {
max-width: calc(268px + 56rem + 250px + 4rem) !important; /* full layout width */
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important; /* fill available space up to max-width */
border-bottom: none !important; /* remove border from inner element */
}
/* header font weights */
h1 , h2, h3, h4, h5, h6 {
font-weight: 550; /* medium */
}
/* Card icon sizing - override SVG hardcoded dimensions */
[data-card="true"] .order-first svg {
width: 1.5rem !important;
height: 1.5rem !important;
min-width: 1.5rem !important;
min-height: 1.5rem !important;
}
