custom.css

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400;1,400&display=swap");

@font-face {
  font-family: "PP Neue Montreal";
  src: url("/docs/fonts/PPNeueMontreal-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-mono:
    "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  --radius-interactive-element: 0.125rem;
  --radius-sm: 0.125rem;
  --radius-text-highlight: 0.125rem;
  --radius-md: 0.125rem;
  --radius-menus: 0.125rem;
  --radius-lg: 0.125rem;
  --radius-xl: 0.125rem;
  --radius-full: 9999px;

  --rounded-sm: 0.125rem;
  --rounded: 0.125rem;
  --rounded-md: 0.125rem;
  --rounded-lg: 0.125rem;
  --rounded-xl: 0.125rem;
  --rounded-2xl: 0.125rem;
  --rounded-3xl: 0.125rem;
  --border-radius: 0.125rem;
  font-size: 17px;
}

:where([class*="rounded"]:not(.rounded-none):not(.rounded-full):not([class*="rounded-full"])) {
  border-radius: 0.125rem !important;
}

.rounded-full,
[class*="rounded-full"] {
  border-radius: var(--radius-full) !important;
}

[data-radix-menu-content],
[data-radix-dropdown-menu-content],
[role="menu"][data-side],
[data-component-part="search-modal"],
[data-component-part="search-header"],
[data-component-part="search-list"] {
  border-radius: 0.125rem !important;
}

:is(.dark, [data-theme="dark"]) [data-component-part="search-modal"] {
  box-shadow:
    0 0 0 100vmax rgb(0 0 0 / 60%),
    0 25px 50px -12px rgb(0 0 0 / 70%) !important;
}

@media (prefers-color-scheme: dark) {
  [data-component-part="search-modal"] {
    box-shadow:
      0 0 0 100vmax rgb(0 0 0 / 60%),
      0 25px 50px -12px rgb(0 0 0 / 70%) !important;
  }
}

code,
pre,
kbd,
samp,
[class*="language-"],
[data-component-part="code-block"],
[data-component-part="code-block"] * {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
}

/* Typography to match flightcontrol ui2 / packages/web ----------------------- */

/* Global + body: PP Neue Montreal
   - letter-spacing 0.02em (--tracking-normal)
   - line-height 1.25 (--leading-base)
   - weight 400, antialiased */
html {
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
p,
li {
  letter-spacing: 0.02em;
}

strong,
b,
.font-semibold {
  font-weight: 600 !important;
}

a {
  font-weight: inherit !important;
}

/* Headings: PP Fragment (Glare Regular), matching the marketing display style
   - weight 400 (Glare Regular)
   - letter-spacing 0
   - line-height 1.1 (--leading-display) */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

h1,
h4,
h5,
h6 {
  line-height: 1.2 !important;
}
h2,
h3 {
  line-height: 1.5 !important;
}

h3 + h4 {
  margin-top: 1.25rem !important;
}

/* Headings stay at weight 400 even when they carry the font-semibold utility */
h1.font-semibold,
h2.font-semibold,
h3.font-semibold,
h4.font-semibold,
h5.font-semibold,
h6.font-semibold {
  font-weight: 400 !important;
}

/* Keep the descriptive changelog title for metadata while shortening its visible heading. */
html[data-current-path="/changelog"] #page-title {
  font-size: 0 !important;
}

html[data-current-path="/changelog"] #page-title::before {
  content: "Product updates";
  font-size: 1.875rem;
}

html[data-current-path="/changelog"] #content-area > * {
  max-width: 41.4rem;
}

@media (min-width: 640px) {
  html[data-current-path="/changelog"] #page-title::before {
    font-size: 2.25rem;
  }
}

@media (min-width: 1536px) {
  html[data-current-path="/changelog"] #content-area > * {
    max-width: 48.3rem;
  }
}

/* Sidebar group titles are <h3> elements but should stay semibold,
   exempt them from the heading weight reset above */
.sidebar-group-header h3,
h3.sidebar-title {
  font-weight: 600 !important;
}

/* Tighten sidebar item spacing to match maple:
   mint uses leading-6 (1.5rem) and 1px gaps between items,
   maple used text-sm's default 1.25rem line-height with no gaps */
#navigation-items {
  line-height: 1.25rem;
}

#navigation-items .sidebar-group > * + * {
  margin-top: 0 !important;
}

/* Card titles */
[data-component-part="card-title"] {
  font-size: 1.2rem !important;
}

/* Space between card title and body */
[data-component-part="card-content"] {
  margin-top: 0.5rem !important;
}

/* Keep code free of the body letter-spacing for legibility */
code,
pre,
kbd,
samp,
[class*="language-"],
[data-component-part="code-block"],
[data-component-part="code-block"] * {
  letter-spacing: normal;
}

/* Full-width layout: remove the centered max-width container.
   The body wrapper uses peer-variant classes (e.g. peer-[.is-not-custom]:max-w-8xl),
   so match any class containing max-w-8xl */
.max-w-8xl,
[class*="max-w-8xl"] {
  max-width: 100% !important;
}

/* Constrain and center the article column like the old maple theme
   (maple used max-w-xl / 2xl:max-w-2xl on #content-area).
   Mint's #content-area carries the sidebar offset padding, so cap its
   children instead of the container itself */
#content-area > * {
  width: 100%;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1536px) {
  #content-area > * {
    max-width: 42rem;
  }
}

/* Code block highlighted lines: Mintlify paints .line-highlight (background,
   left border, and ::before/::after gutter fills) from the --primary-light
   variable with !important, so recolor the variable itself inside code blocks.
   Purple (violet-500 #8B5CF6) matches the module diagrams and avoids reading
   as a "removed line" diff tint. */
[data-component-part="code-block-root"],
.code-block {
  --primary-light: 139 92 246; /* #8B5CF6 */
}

:is(.dark, [data-theme="dark"]) [data-component-part="code-block-root"],
:is(.dark, [data-theme="dark"]) .code-block {
  --primary-light: 167 139 250; /* #A78BFA */
}

a[href="https://www.mintlify.com/?utm_campaign=poweredBy&utm_medium=referral&utm_source=ravion-b90c0359"],
a[href*="mintlify.com"][href*="poweredBy"],
a[href*="mintlify.com"][href*="powered-by"],
a[aria-label*="Mintlify"],
a[title*="Mintlify"] {
  display: none !important;
}

/* Prevent the logged-out navbar state from painting before auth detection runs. */
html:not([data-ravion-auth-state])
  :is(.navbar-link, navbar-link):has(
    a[href="https://app.ravion.com/signup"],
    a[href="https://cal.com/team/ravion/demo"]
  ) {
  visibility: hidden;
}