/* * Keystroke docs — color overrides mapping the main app's design tokens * (apps/web/src/styles.css) onto Mintlify surfaces. * * docs.json already sets the accent (colors.primary) and page background * (background.color). This file reaches the surfaces docs.json can't: * sidebar / card / content fills, borders, and the text-tier ramp. * * CAVEATS: * - Mintlify's element/ID hooks (#sidebar, #navbar, #content-area, …) are * NOT a stability-guaranteed API; verify with inspect-element and adjust * if a Mintlify update renames them. * - Global/custom CSS is a Mintlify Business-plan feature. */ /* IBM Plex Serif — matches the app's --font-serif (heading face). * The docs site is a separate Mintlify build and doesn't get the app's * @fontsource bundle, so we pull it from Google Fonts. @import must * precede all other rules. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"); /* Inter — matches the app's --font-sans (body face). Almond defaults to * Google Sans Text; pin Inter so docs match the app. */ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); /* ---------------------------------------------------------------------- * 1. Palette — single source of truth (mirrors apps/web/src/styles.css) * -------------------------------------------------------------------- */ :root { /* Surfaces */ --ks-background: #f7f7f7; /* frame: page, sidebar, navbar */ --ks-canvas: #fcfcfc; /* content area / reading canvas */ --ks-card: #ffffff; /* reserved: elevated elements (code blocks, cards) — applied ad-hoc */ --ks-muted-solid: color-mix(in oklab, var(--ks-foreground) 4%, var(--ks-background)); /* Brand / accent */ --ks-primary: #3b82f6; /* app --primary (oklch(62.52% 0.187 259.51)) */ /* Ink */ --ks-foreground: #252525; /* app --foreground (oklch(0.145 0 0)) */ --ks-text-body: color-mix(in oklab, var(--ks-foreground) 80%, transparent); --ks-text-secondary: color-mix(in oklab, var(--ks-foreground) 58%, transparent); --ks-text-tertiary: color-mix(in oklab, var(--ks-foreground) 30%, transparent); /* Lines */ --ks-border: oklch(0 0 0 / 0.08); /* app --border */ /* Sidebar nav hover/selected fill (app --sidebar-accent) */ --ks-sidebar-accent: oklch(0 0 0 / 0.04); --ks-sidebar-accent-foreground: oklch(0.205 0 0); /* Shadow-based borders (mirror app --shadow-* / --elevation-*) */ --ks-shadow-surface-outline: 0 1px 6px 0 oklch(0 0 0 / 0.06), 0 0 1px 0 oklch(0 0 0 / 0.3); /* Fonts — mirror app --font-sans (body) and --font-serif (headings) */ --ks-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --ks-font-serif: "IBM Plex Serif", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .dark { --ks-background: #070707; /* frame: page, sidebar, navbar */ --ks-canvas: #0f0f10; /* content area / reading canvas */ --ks-card: #171717; /* reserved: elevated elements (code blocks, cards) — applied ad-hoc */ --ks-muted-solid: color-mix(in oklab, var(--ks-foreground) 8%, var(--ks-background)); --ks-primary: #4487f3; /* app dark --primary (oklch(63.5% 0.175 259.5)) */ --ks-foreground: #fafafa; /* app dark --foreground (oklch(0.985 0 0)) */ --ks-text-body: color-mix(in oklab, var(--ks-foreground) 82%, transparent); --ks-text-secondary: color-mix(in oklab, var(--ks-foreground) 56%, transparent); --ks-text-tertiary: color-mix(in oklab, var(--ks-foreground) 40%, transparent); --ks-border: oklch(1 0 0 / 0.1); /* app dark --border */ --ks-sidebar-accent: oklch(1 0 0 / 0.08); --ks-sidebar-accent-foreground: oklch(0.985 0 0); --ks-shadow-surface-outline: inset 0 0 0 1px oklch(1 0 0 / 0.1), inset 0 1px 0 0 oklch(1 0 0 / 0.06); } /* ---------------------------------------------------------------------- * 2. Surfaces — frame vs. content canvas * Frame (page/sidebar/navbar) = --background; content area = --canvas. * --card is reserved for elevated elements (code blocks, cards), ad-hoc. * -------------------------------------------------------------------- */ /* Page / app shell background */ body { background-color: var(--ks-background); color: var(--ks-text-body); font-family: var(--ks-font-sans); } /* Outer chrome — sidebar, top navbar, footer. Almond's sidebar nav is #sidebar-content (it's transparent by default and shows the body fill; set explicitly so it stays correct if that changes). */ #sidebar-content, #navbar { background-color: var(--ks-background); border-color: var(--ks-border); } /* Almond paints a full-viewport tint layer behind everything (a 3% black wash in light, solid near-black in dark) via this fixed -z-10 span. Without this override it darkens the frame around the content panel; pin it to our --ks-background so the frame stays a clean single tone. */ #almond-background-color { background-color: var(--ks-background); } /* The content area / reading canvas — Almond's

carries the 16px radius; #content-area is the text column inside it. */ #content-container, #content-area { background-color: var(--ks-canvas); } /* Almond gives the content panel a 16px radius; tighten to 10px. */ #content-container { border-radius: 10px; } /* Footer sits within the content canvas. */ footer { background-color: var(--ks-canvas); border-color: var(--ks-border); } /* ---------------------------------------------------------------------- * 3. Text tiers — map app hierarchy onto docs typography * -------------------------------------------------------------------- */ h1, h2, h3, h4 { color: var(--ks-foreground); } p, li { color: var(--ks-text-body); } /* Muted / supporting copy (breadcrumbs, eyebrows, captions) */ .eyebrow, .text-muted, small { color: var(--ks-text-secondary); } /* Faint decorative text */ ::placeholder { color: var(--ks-text-tertiary); } /* ---------------------------------------------------------------------- * 4. Body links — no accent color; underline is the only affordance. * Scoped to inline prose links (a.link) so TOC, sidebar, pagination, * cards, and heading anchors keep Almond's treatment. * -------------------------------------------------------------------- */ #content-area .prose a.link { color: inherit; /* Almond draws a solid border-bottom underline; drop it so only our dashed text-decoration shows. */ border-bottom: none; text-decoration-line: underline; text-decoration-style: dashed; text-underline-offset: 4px; transition: color 0.15s ease; } /* Hover: fade to the lighter secondary ink. */ #content-area .prose a.link:hover { color: var(--ks-text-secondary); } hr { border-color: var(--ks-border); } /* ---------------------------------------------------------------------- * 5. Typography scale — mirror shadcn/fumadocs docs prose sizing * Source: ui-main/apps/v4/mdx-components.tsx + docs page wrapper. * Scoped to the reading canvas so sidebar/nav keep Almond's scale. * -------------------------------------------------------------------- */ /* Base reading size: shadcn uses 15px on desktop (text-[15px]). Almond resets the inner .mdx-content wrapper to 16px, and body text is often bare spans inheriting from it — so pin the wrapper base too. */ #content-area, #content-area .mdx-content { font-size: 0.9375rem; /* 15px */ } #content-area { font-family: var(--ks-font-sans); } /* Eyebrow/section label above the page title (e.g. "Get started"). Almond ships it as font-semibold; tone it down to regular. */ #content-area .eyebrow { font-weight: 400; } /* Headings use the app's serif face (IBM Plex Serif). */ #content-area h1, #content-area h2, #content-area h3, #content-area h4, #content-area h5, #content-area h6 { font-family: var(--ks-font-serif); } /* Page title (frontmatter) + in-content h1: text-3xl, tight */ #content-area h1 { font-size: 1.875rem; /* 30px */ font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; } #content-area h2 { font-size: 1.25rem; /* 20px */ font-weight: 500; letter-spacing: -0.025em; line-height: 1.4; margin-top: 2.5rem; } #content-area h3 { font-size: 1.125rem; /* 18px */ font-weight: 500; letter-spacing: -0.025em; line-height: 1.4; margin-top: 3rem; } #content-area h4, #content-area h5, #content-area h6 { font-size: 1rem; /* 16px */ font-weight: 500; letter-spacing: -0.025em; line-height: 1.5; margin-top: 2rem; } #content-area p { font-size: 0.9375rem; /* 15px */ line-height: 1.625; /* leading-relaxed */ } #content-area p:not(:first-child) { margin-top: 1.5rem; } #content-area a { font-weight: 500; text-underline-offset: 4px; } #content-area strong { font-weight: 500; } #content-area ul, #content-area ol { margin-block: 1.5rem; padding-inline-start: 1.5rem; } #content-area li { margin-top: 0.5rem; font-size: 0.9375rem; /* 15px — match paragraphs (Almond prose ships 16px) */ } #content-area blockquote { margin-top: 1.5rem; padding-left: 1.5rem; border-left-width: 2px; font-style: italic; } /* Inline code: text-[0.8rem] */ #content-area :not(pre) > code { font-size: 0.8rem; } #content-area table { font-size: 0.875rem; /* 14px */ margin-block: 1.5rem; } #content-area hr { margin-block: 2rem; } /* "Copy page" split button — full-radius pill (Almond ships rounded-l/r-xl). */ #content-area button.rounded-l-xl { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; } #content-area button.rounded-r-xl { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; } /* "Copy page" label weight: regular instead of medium; 13px text. */ #content-area button.rounded-l-xl, #content-area button.rounded-l-xl * { font-weight: 400; font-size: 13px; } /* "Copy page" icon: 14px (Almond ships 18px). */ #content-area button.rounded-l-xl svg { width: 14px; height: 14px; } /* Gap between the icon and "Copy page" text (Almond ships gap-2 = 8px). */ #content-area button.rounded-l-xl > div { gap: 6px; } /* "Copy page" default fill matches the content canvas. */ #content-area button.rounded-l-xl, #content-area button.rounded-r-xl { background-color: var(--ks-canvas); } /* Restore a hover fill (our canvas bg above otherwise overrides Almond's). */ #content-area button.rounded-l-xl:hover, #content-area button.rounded-r-xl:hover { background-color: color-mix(in oklab, var(--ks-foreground) 6%, var(--ks-canvas)); } /* "Copy page" padding: 4px top/bottom, 8px left/right (Almond px-3 py-1.5). */ #content-area button.rounded-l-xl { padding: 4px 8px; } #content-area button.rounded-r-xl { padding-top: 4px; padding-bottom: 4px; padding-left: 7px; padding-right: 8px; height: 30px; /* match the main "Copy page" segment */ justify-content: center; /* center the chevron (Almond left-aligns it) */ } /* Place the page-context button inline to the right of the title at lg+. Almond gates the inline variant behind a @[600px]/page-header container query and otherwise stacks it below the description; force the inline group on and hide the stacked fallback. Two wrappers, depending on the build: - local dev (assistant off): "Copy page" → .min-w-[156px] - prod (assistant on): "Ask Assistant" + more-actions → #page-context-menu Both expose an inline (.ml-auto) and a stacked (.mt-3) copy. */ @media (min-width: 1024px) { #content-area .min-w-\[156px\].ml-auto, #content-area #page-context-menu.ml-auto { display: flex !important; } #content-area .min-w-\[156px\].mt-3, #content-area #page-context-menu.mt-3 { display: none !important; } } /* ---------------------------------------------------------------------- * 8. Code blocks + cards — 10px radius (Almond ships rounded-2xl = 16px). * Round both the code-block frame and its inner content surface. * -------------------------------------------------------------------- */ #content-area .code-block, #content-area .code-block [class*="codeblock"], #content-area .card { border-radius: 10px; } /* ---------------------------------------------------------------------- * 6. Navbar — pill buttons * Almond's primary CTA ships with rounded-lg; make it (and any other * rounded navbar button) a full-radius pill. * -------------------------------------------------------------------- */ #navbar a.rounded-lg, #navbar button.rounded-lg { border-radius: 9999px; } /* Primary CTA: outline button (Almond ships a fixed #0D0D0D filled button). Transparent fill, app shadow-outline border, foreground text. */ #navbar a.bg-primary-dark { font-weight: 500; font-size: 13px; background-color: transparent; border: none; box-shadow: var(--ks-shadow-surface-outline); } #navbar a.bg-primary-dark * { font-weight: 500; font-size: 13px; color: var(--ks-foreground); } /* Hover fill (subtle muted surface). */ #navbar a.bg-primary-dark:hover { background-color: var(--ks-muted-solid); opacity: 1; /* override Almond's hover:opacity-[0.9] */ } /* Header row padding (Almond ships px-4 / lg:px-7 = 28px). */ #navbar .lg\:px-7 { padding-left: 20px; padding-right: 14px; } /* Condensed/mobile ( > * - expandable group "parents" render as

​For everyone

​Sales

​Marketing

​Data

​Finance

​Operations

​Engineering

For everyone

Sales

Marketing

Data

Finance

Operations

Engineering