881 lines
20 KiB
CSS
881 lines
20 KiB
CSS
@import "tailwindcss";
|
|
@import "fumadocs-ui/css/neutral.css";
|
|
@import "fumadocs-ui/css/preset.css";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@import "@fontsource-variable/jetbrains-mono";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme {
|
|
--font-sans:
|
|
"Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
--font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--background:
|
|
oklch(1 0 0);
|
|
--foreground:
|
|
oklch(0.145 0 0);
|
|
--card:
|
|
oklch(1 0 0);
|
|
--card-foreground:
|
|
oklch(0.145 0 0);
|
|
--card-header: #1b1b1b;
|
|
--popover:
|
|
oklch(1 0 0);
|
|
--popover-foreground:
|
|
oklch(0.145 0 0);
|
|
--primary:
|
|
oklch(0.205 0 0);
|
|
--primary-foreground:
|
|
oklch(0.985 0 0);
|
|
--secondary:
|
|
oklch(0.97 0 0);
|
|
--secondary-foreground:
|
|
oklch(0.205 0 0);
|
|
--muted:
|
|
oklch(0.97 0 0);
|
|
--muted-foreground:
|
|
oklch(0.556 0 0);
|
|
--accent:
|
|
oklch(0.97 0 0);
|
|
--accent-foreground:
|
|
oklch(0.205 0 0);
|
|
--destructive:
|
|
oklch(0.577 0.245 27.325);
|
|
--destructive-foreground: #fff;
|
|
--border:
|
|
oklch(0.922 0 0);
|
|
--input:
|
|
oklch(0.922 0 0);
|
|
--ring:
|
|
oklch(0.708 0 0);
|
|
--strong-accent: #ff543a;
|
|
--sea-ink: var(--foreground);
|
|
--sea-ink-soft: var(--muted-foreground);
|
|
--lagoon: var(--strong-accent);
|
|
--lagoon-deep: var(--strong-accent);
|
|
--palm: oklch(0.556 0 0);
|
|
--sand: #0b0b0b;
|
|
--foam: var(--card-header);
|
|
--surface: rgba(19, 19, 19, 0.8);
|
|
--surface-strong: rgba(27, 27, 27, 0.92);
|
|
--line: var(--border);
|
|
--inset-glint: rgba(255, 255, 255, 0.05);
|
|
--kicker: var(--muted-foreground);
|
|
--bg-base: var(--background);
|
|
--header-bg: var(--background);
|
|
--chip-bg: var(--card-header);
|
|
--chip-line: var(--border);
|
|
--link-bg-hover: rgba(255, 255, 255, 0.07);
|
|
--hero-a: color-mix(in oklab, var(--strong-accent) 8%, transparent);
|
|
--hero-b: color-mix(in oklab, var(--strong-accent) 4%, transparent);
|
|
--site-header-offset: calc(4rem + 1px);
|
|
--chart-1:
|
|
oklch(0.87 0 0);
|
|
--chart-2:
|
|
oklch(0.556 0 0);
|
|
--chart-3:
|
|
oklch(0.439 0 0);
|
|
--chart-4:
|
|
oklch(0.371 0 0);
|
|
--chart-5:
|
|
oklch(0.269 0 0);
|
|
--radius:
|
|
0.625rem;
|
|
--sidebar:
|
|
oklch(0.985 0 0);
|
|
--sidebar-foreground:
|
|
oklch(0.145 0 0);
|
|
--sidebar-primary:
|
|
oklch(0.205 0 0);
|
|
--sidebar-primary-foreground:
|
|
oklch(0.985 0 0);
|
|
--sidebar-accent:
|
|
oklch(0.97 0 0);
|
|
--sidebar-accent-foreground:
|
|
oklch(0.205 0 0);
|
|
--sidebar-border:
|
|
oklch(0.922 0 0);
|
|
--sidebar-ring:
|
|
oklch(0.708 0 0);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card-header: var(--card-header);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-strong-accent: var(--strong-accent);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--font-heading:
|
|
var(--font-mono);
|
|
--font-mono:
|
|
'JetBrains Mono Variable', monospace;
|
|
--color-sidebar-ring:
|
|
var(--sidebar-ring);
|
|
--color-sidebar-border:
|
|
var(--sidebar-border);
|
|
--color-sidebar-accent-foreground:
|
|
var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent:
|
|
var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground:
|
|
var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary:
|
|
var(--sidebar-primary);
|
|
--color-sidebar-foreground:
|
|
var(--sidebar-foreground);
|
|
--color-sidebar:
|
|
var(--sidebar);
|
|
--color-chart-5:
|
|
var(--chart-5);
|
|
--color-chart-4:
|
|
var(--chart-4);
|
|
--color-chart-3:
|
|
var(--chart-3);
|
|
--color-chart-2:
|
|
var(--chart-2);
|
|
--color-chart-1:
|
|
var(--chart-1);
|
|
--radius-sm:
|
|
calc(var(--radius) * 0.6);
|
|
--radius-md:
|
|
calc(var(--radius) * 0.8);
|
|
--radius-lg:
|
|
var(--radius);
|
|
--radius-xl:
|
|
calc(var(--radius) * 1.4);
|
|
--radius-2xl:
|
|
calc(var(--radius) * 1.8);
|
|
--radius-3xl:
|
|
calc(var(--radius) * 2.2);
|
|
--radius-4xl:
|
|
calc(var(--radius) * 2.6);
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--color-fd-background: var(--background);
|
|
--color-fd-foreground: var(--foreground);
|
|
--color-fd-muted: var(--muted);
|
|
--color-fd-muted-foreground: var(--muted-foreground);
|
|
--color-fd-popover: var(--popover);
|
|
--color-fd-popover-foreground: var(--popover-foreground);
|
|
--color-fd-card: var(--card);
|
|
--color-fd-card-foreground: var(--card-foreground);
|
|
--color-fd-border: var(--border);
|
|
--color-fd-primary: var(--primary);
|
|
--color-fd-primary-foreground: var(--primary-foreground);
|
|
--color-fd-secondary: var(--secondary);
|
|
--color-fd-secondary-foreground: var(--secondary-foreground);
|
|
--color-fd-accent: var(--accent);
|
|
--color-fd-accent-foreground: var(--accent-foreground);
|
|
--color-fd-ring: var(--ring);
|
|
--card:
|
|
oklch(0.205 0 0);
|
|
--background:
|
|
oklch(0.145 0 0);
|
|
--foreground:
|
|
oklch(0.985 0 0);
|
|
--card-foreground:
|
|
oklch(0.985 0 0);
|
|
--popover:
|
|
oklch(0.205 0 0);
|
|
--popover-foreground:
|
|
oklch(0.985 0 0);
|
|
--primary:
|
|
oklch(0.922 0 0);
|
|
--primary-foreground:
|
|
oklch(0.205 0 0);
|
|
--secondary:
|
|
oklch(0.269 0 0);
|
|
--secondary-foreground:
|
|
oklch(0.985 0 0);
|
|
--muted:
|
|
oklch(0.269 0 0);
|
|
--muted-foreground:
|
|
oklch(0.708 0 0);
|
|
--accent:
|
|
oklch(0.269 0 0);
|
|
--accent-foreground:
|
|
oklch(0.985 0 0);
|
|
--destructive:
|
|
oklch(0.704 0.191 22.216);
|
|
--border:
|
|
oklch(1 0 0 / 10%);
|
|
--input:
|
|
oklch(1 0 0 / 15%);
|
|
--ring:
|
|
oklch(0.556 0 0);
|
|
--chart-1:
|
|
oklch(0.87 0 0);
|
|
--chart-2:
|
|
oklch(0.556 0 0);
|
|
--chart-3:
|
|
oklch(0.439 0 0);
|
|
--chart-4:
|
|
oklch(0.371 0 0);
|
|
--chart-5:
|
|
oklch(0.269 0 0);
|
|
--sidebar:
|
|
oklch(0.205 0 0);
|
|
--sidebar-foreground:
|
|
oklch(0.985 0 0);
|
|
--sidebar-primary:
|
|
oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground:
|
|
oklch(0.985 0 0);
|
|
--sidebar-accent:
|
|
oklch(0.269 0 0);
|
|
--sidebar-accent-foreground:
|
|
oklch(0.985 0 0);
|
|
--sidebar-border:
|
|
oklch(1 0 0 / 10%);
|
|
--sidebar-ring:
|
|
oklch(0.556 0 0);
|
|
}
|
|
|
|
.dark #nd-sidebar {
|
|
--color-fd-background: var(--background);
|
|
--color-fd-muted: var(--card-header);
|
|
--color-fd-secondary: var(--accent);
|
|
--color-fd-muted-foreground: var(--muted-foreground);
|
|
--color-fd-border: var(--border);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--sea-ink);
|
|
font-family: var(--font-sans);
|
|
background-color: var(--bg-base);
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
background-image:
|
|
linear-gradient(to right, rgba(38, 38, 38, 0.6) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(38, 38, 38, 0.6) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
mask-image: radial-gradient(ellipse at top, black 70%, transparent 100%);
|
|
}
|
|
|
|
body:has([data-landing-page]) {
|
|
color: var(--foreground);
|
|
background-color: var(--background);
|
|
}
|
|
|
|
body:has([data-landing-page])::before {
|
|
display: none;
|
|
}
|
|
|
|
body:has([data-docs-page]) {
|
|
color: var(--foreground);
|
|
background-color: var(--background);
|
|
}
|
|
|
|
body:has([data-docs-page])::before {
|
|
display: none;
|
|
}
|
|
|
|
.landing-hero-docs-grid {
|
|
background-image:
|
|
linear-gradient(to right, rgba(38, 38, 38, 0.6) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(38, 38, 38, 0.6) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
mask-image: radial-gradient(ellipse at top, black 70%, transparent 100%);
|
|
}
|
|
|
|
.landing-hero-glow {
|
|
background: radial-gradient(ellipse at center, var(--hero-a) 0%, var(--hero-b) 28%, transparent 68%);
|
|
}
|
|
|
|
/* Ensure prose body text is readable against the dark background */
|
|
.prose {
|
|
--tw-prose-body: var(--sea-ink);
|
|
--tw-prose-headings: var(--sea-ink);
|
|
--tw-prose-lead: var(--sea-ink-soft);
|
|
--tw-prose-bold: var(--sea-ink);
|
|
--tw-prose-counters: var(--sea-ink-soft);
|
|
--tw-prose-bullets: var(--sea-ink-soft);
|
|
--tw-prose-code: var(--sea-ink);
|
|
--tw-prose-quotes: var(--sea-ink);
|
|
}
|
|
|
|
/* Custom styling to bring some orange flavor to headers/links if desired without ruining active states */
|
|
.prose a {
|
|
color: var(--lagoon);
|
|
text-decoration-color: rgba(255, 84, 58, 0.4);
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.prose a:hover {
|
|
color: var(--lagoon-deep);
|
|
}
|
|
|
|
.prose h1,
|
|
.prose h2,
|
|
.prose h3,
|
|
.prose h4,
|
|
.prose h5,
|
|
.prose h6 {
|
|
color: var(--sea-ink);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
/* Fix heading links not to be orange */
|
|
.prose h1 a,
|
|
.prose h2 a,
|
|
.prose h3 a,
|
|
.prose h4 a,
|
|
.prose h5 a,
|
|
.prose h6 a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page-wrap {
|
|
width: min(1320px, calc(100% - 2rem));
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.display-title {
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.marketing-panel {
|
|
position: relative;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: linear-gradient(180deg, rgba(16, 18, 22, 0.94), rgba(9, 11, 14, 0.9));
|
|
box-shadow:
|
|
0 1px 0 var(--inset-glint) inset,
|
|
0 28px 80px rgba(0, 0, 0, 0.42),
|
|
0 10px 32px rgba(0, 0, 0, 0.28);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.marketing-window {
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
|
|
box-shadow:
|
|
0 1px 0 rgba(255, 255, 255, 0.04) inset,
|
|
0 20px 44px rgba(0, 0, 0, 0.28);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.marketing-grid-bg {
|
|
background-image:
|
|
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
mask-image: radial-gradient(ellipse at center, black 54%, transparent 100%);
|
|
}
|
|
|
|
.marketing-kicker {
|
|
margin: 0;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--sea-ink-soft);
|
|
}
|
|
|
|
.marketing-title,
|
|
.marketing-section-title {
|
|
font-family: var(--font-display);
|
|
letter-spacing: -0.05em;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.marketing-button-primary,
|
|
.marketing-button-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.6rem;
|
|
border-radius: 1rem;
|
|
padding: 0.92rem 1.3rem;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition:
|
|
transform 180ms ease,
|
|
background-color 180ms ease,
|
|
border-color 180ms ease,
|
|
color 180ms ease,
|
|
box-shadow 180ms ease;
|
|
}
|
|
|
|
.marketing-button-primary {
|
|
border: 1px solid rgba(255, 84, 58, 0.22);
|
|
background: linear-gradient(180deg, rgba(255, 84, 58, 0.98), rgba(229, 64, 38, 0.94));
|
|
color: white;
|
|
box-shadow: 0 14px 36px rgba(255, 84, 58, 0.2);
|
|
}
|
|
|
|
.marketing-button-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 18px 44px rgba(255, 84, 58, 0.24);
|
|
}
|
|
|
|
.marketing-button-secondary {
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(255, 255, 255, 0.035);
|
|
color: var(--sea-ink);
|
|
}
|
|
|
|
.marketing-button-secondary:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(255, 255, 255, 0.16);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.marketing-button-primary:active,
|
|
.marketing-button-secondary:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.marketing-button-primary:focus-visible,
|
|
.marketing-button-secondary:focus-visible,
|
|
.marketing-link:focus-visible,
|
|
.nav-link:focus-visible {
|
|
outline: 2px solid rgba(255, 84, 58, 0.55);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.marketing-link {
|
|
color: var(--sea-ink-soft);
|
|
text-decoration: none;
|
|
transition: color 160ms ease;
|
|
}
|
|
|
|
.marketing-link:hover {
|
|
color: var(--sea-ink);
|
|
}
|
|
|
|
.marketing-stat {
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012));
|
|
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.marketing-check {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.marketing-dot {
|
|
display: inline-flex;
|
|
height: 0.62rem;
|
|
width: 0.62rem;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.marketing-keycap {
|
|
display: flex;
|
|
min-height: 3.4rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.9rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
|
|
color: var(--sea-ink-soft);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.marketing-keycap.is-active {
|
|
border-color: rgba(255, 84, 58, 0.22);
|
|
background: linear-gradient(180deg, rgba(255, 84, 58, 0.2), rgba(255, 84, 58, 0.08));
|
|
color: var(--sea-ink);
|
|
box-shadow: 0 0 0 1px rgba(255, 84, 58, 0.08) inset;
|
|
}
|
|
|
|
.island-shell {
|
|
border: 1px solid var(--line);
|
|
background: linear-gradient(165deg, var(--surface-strong), var(--surface));
|
|
box-shadow:
|
|
0 1px 0 var(--inset-glint) inset,
|
|
0 22px 44px rgba(0, 0, 0, 0.3),
|
|
0 6px 18px rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.feature-card {
|
|
background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, black 7%), var(--surface));
|
|
box-shadow:
|
|
0 1px 0 var(--inset-glint) inset,
|
|
0 18px 34px rgba(0, 0, 0, 0.3),
|
|
0 4px 14px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
|
|
}
|
|
|
|
button,
|
|
.island-shell,
|
|
.prose a,
|
|
.marketing-panel,
|
|
.marketing-window,
|
|
.marketing-stat {
|
|
transition:
|
|
background-color 180ms ease,
|
|
color 180ms ease,
|
|
border-color 180ms ease,
|
|
transform 180ms ease;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.marketing-button-primary,
|
|
.marketing-button-secondary {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.island-kicker {
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
font-size: 0.69rem;
|
|
color: var(--kicker);
|
|
}
|
|
|
|
.nav-link {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: var(--sea-ink-soft);
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -6px;
|
|
width: 100%;
|
|
height: 2px;
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
background: var(--lagoon);
|
|
transition: transform 170ms ease;
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link.is-active {
|
|
color: var(--sea-ink);
|
|
}
|
|
|
|
.nav-link:hover::after,
|
|
.nav-link.is-active::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.nav-link::after {
|
|
bottom: -4px;
|
|
}
|
|
}
|
|
|
|
.site-footer {
|
|
border-top: 1px solid var(--line);
|
|
background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
|
|
}
|
|
|
|
.rise-in {
|
|
animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
@keyframes rise-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────────────
|
|
Docs refinements
|
|
───────────────────────────────────────────────────────────────── */
|
|
|
|
/* --- Scrollbar -------------------------------------------------- */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* --- Sidebar ---------------------------------------------------- */
|
|
|
|
/* Active link: soft orange tint + left accent bar */
|
|
.dark #nd-sidebar a[data-active="true"] {
|
|
background-color: transparent;
|
|
color: var(--sea-ink);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
position: relative;
|
|
}
|
|
|
|
.dark #nd-sidebar a[data-active="true"]::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
width: 2px;
|
|
border-radius: 0;
|
|
background: var(--lagoon);
|
|
}
|
|
|
|
/* Hover: subtler than default */
|
|
.dark #nd-sidebar a:not([data-active="true"]):hover {
|
|
background-color: transparent;
|
|
color: var(--sea-ink);
|
|
}
|
|
|
|
/* Sidebar transitions */
|
|
.dark #nd-sidebar a {
|
|
border-radius: 0;
|
|
transition:
|
|
background-color 150ms ease,
|
|
color 150ms ease;
|
|
}
|
|
|
|
/* Sidebar search trigger — field-like appearance */
|
|
.dark #nd-sidebar button[data-search] {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 0;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
/* --- Table of Contents ------------------------------------------ */
|
|
|
|
/* "On this page" title: uppercase kicker style, hide the icon */
|
|
#nd-toc > h3 {
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--kicker);
|
|
}
|
|
|
|
#nd-toc > h3 svg {
|
|
display: none;
|
|
}
|
|
|
|
/* TOC: color the floating active indicator bar orange */
|
|
#nd-toc .bg-fd-primary {
|
|
background-color: var(--lagoon);
|
|
}
|
|
|
|
/* TOC link: active text + hover state */
|
|
#nd-toc a {
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
#nd-toc a[data-active="true"] {
|
|
color: var(--sea-ink);
|
|
}
|
|
|
|
#nd-toc a:not([data-active="true"]):hover {
|
|
color: oklch(0.85 0 0);
|
|
}
|
|
|
|
/* --- Headings --------------------------------------------------- */
|
|
.prose h2 {
|
|
margin-top: 2.5em;
|
|
padding-bottom: 0.5em;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
/* --- Body text -------------------------------------------------- */
|
|
.prose {
|
|
--tw-prose-body: oklch(0.78 0 0);
|
|
}
|
|
|
|
/* --- List markers ----------------------------------------------- */
|
|
.prose :where(ul > li)::marker {
|
|
color: rgba(255, 84, 58, 0.5);
|
|
}
|
|
|
|
.prose :where(ol > li)::marker {
|
|
color: var(--lagoon);
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* --- Cards ------------------------------------------------------ */
|
|
[data-card="true"] {
|
|
border-radius: 0 !important;
|
|
background: color-mix(in oklab, var(--card) 88%, var(--card-header) 12%);
|
|
border-color: var(--line);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
transition:
|
|
border-color 180ms ease,
|
|
transform 180ms ease,
|
|
background-color 180ms ease,
|
|
box-shadow 180ms ease;
|
|
}
|
|
|
|
a[data-card="true"]:hover {
|
|
border-color: color-mix(in oklab, var(--lagoon) 22%, var(--line));
|
|
transform: translateY(-1px);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
|
|
0 18px 36px -30px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
/* Card icon containers */
|
|
[data-card="true"] .not-prose.w-fit {
|
|
background: rgba(255, 84, 58, 0.06);
|
|
border-color: rgba(255, 84, 58, 0.15);
|
|
border-radius: 0 !important;
|
|
color: var(--lagoon);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* --- Steps ------------------------------------------------------ */
|
|
.fd-step::before {
|
|
color: var(--lagoon);
|
|
}
|
|
|
|
/* --- Callouts --------------------------------------------------- */
|
|
div[style*="--callout-color"] {
|
|
border-radius: 8px;
|
|
background: color-mix(in oklab, var(--card) 88%, var(--callout-color) 12%);
|
|
border-color: var(--line);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
/* --- Tables ----------------------------------------------------- */
|
|
.prose table th,
|
|
.prose table td {
|
|
vertical-align: top;
|
|
white-space: normal;
|
|
word-break: normal;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* --- Bottom prev/next nav --------------------------------------- */
|
|
#nd-page > div:last-child > a {
|
|
border-radius: 0;
|
|
background: color-mix(in oklab, var(--card) 88%, var(--card-header) 12%);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
transition:
|
|
border-color 180ms ease,
|
|
transform 180ms ease,
|
|
background-color 180ms ease;
|
|
}
|
|
|
|
#nd-page > div:last-child > a:hover {
|
|
border-color: color-mix(in oklab, var(--lagoon) 18%, var(--line));
|
|
transform: translateY(-1px);
|
|
background: color-mix(in oklab, var(--card-header) 24%, var(--card) 76%);
|
|
}
|
|
|
|
/* --- Code blocks ------------------------------------------------ */
|
|
.prose figure.shiki {
|
|
border: 1px solid var(--line);
|
|
box-shadow: none;
|
|
background: #0b0b0b;
|
|
}
|
|
|
|
.prose figure.shiki > [role="region"] {
|
|
background: #0b0b0b;
|
|
}
|
|
|
|
.prose figure.shiki pre {
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
/* --- Inline code ------------------------------------------------ */
|
|
.prose :where(code):not(:where(pre *)) {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 5px;
|
|
padding: 0.15em 0.35em;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
/* --- Sticky header offset --------------------------------------- */
|
|
#nd-docs-layout {
|
|
background: var(--background);
|
|
/* Treat the global site header as the docs layout banner offset. */
|
|
--fd-banner-height: var(--site-header-offset);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
html {
|
|
@apply font-mono;
|
|
}
|
|
}
|