style.css

/* Self-hosted brand fonts, matching docs.perplexity.ai. Licensed for this site. */

@font-face {
  font-family: "GT Standard";
  src: url("/fonts/GT-Standard-S-Standard-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Standard";
  src: url("/fonts/GT-Standard-S-Standard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Standard";
  src: url("/fonts/GT-Standard-S-Standard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Standard";
  src: url("/fonts/GT-Standard-M-Standard-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Standard Mono";
  src: url("/fonts/GT-Standard-Mono-Standard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Paper Mono (SIL OFL) - used for the homepage hero tagline, see fonts/PaperMono-OFL.txt */
@font-face {
  font-family: "paperMono";
  src: url("/fonts/PaperMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* The Overview page has its own custom hero, so hide the default generated
   page title/breadcrumb/description block. Scoped via :has() to only the
   page containing the hero marker, so other pages keep their normal title. */
main:has(#pplx-hero-marker) header {
  display: none;
}

/* Prod (almond theme) anchors the light/dark toggle to the bottom-left of the
   sidebar; our theme (maple) renders it inline at the top next to the logo.
   Relocate it via position instead of switching themes (which changes the
   whole header/nav layout) - :has() targets the toggle's wrapper regardless
   of its generated utility class names. */
div:has(> .theme-preference-switch-option) {
  position: fixed;
  left: 1.5rem;
  bottom: 1.25rem;
  z-index: 40;
  background: #121516;
  border-radius: 9999px;
  box-shadow: 0 0 0 8px #121516;
}
html.light div:has(> .theme-preference-switch-option) {
  background: #ffffff;
  box-shadow: 0 0 0 8px #ffffff;
}

/* Reserve a strip at the bottom of the sidebar for the relocated toggle so
   neither the scrollable nav tree nor the Community/Blog/Changelog list
   (both anchored to the sidebar's own bottom edge) render underneath it. */
#sidebar {
  bottom: 4.5rem !important;
}

/* Mintlify auto-adds its own `.link` class (which includes a near-white
   bottom border, its internal-link underline convention) to any <a> whose
   href is an internal doc path, but not to external hrefs - so an
   internal-linking button next to an identically-styled external-linking one
   picked up a border the other didn't have. Reset it where it isn't wanted. */
.pplx-quickstart-buttons a {
  border: none !important;
  box-shadow: none !important;
}

/* "Demo" badge next to the logo in the header/sidebar top - the logo itself
   is a static SVG image rendered by the theme, so this is added via ::after
   on its link wrapper rather than through MDX content (which can't reach
   into the persistent header template). */
a.select-none {
  display: inline-flex;
  align-items: center;
}
a.select-none::after {
  content: "Demo";
  margin-left: 0.5rem;
  padding: 0.0625rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #9F9F9F;
  background: rgba(247, 247, 248, 0.08);
  border: 1px solid rgba(247, 247, 248, 0.14);
  border-radius: 9999px;
  white-space: nowrap;
}
html.light a.select-none::after {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Keep the logo row pinned to the top of the sidebar while the nav tree
   scrolls beneath it, matching prod. `position: sticky` conflicts here -
   Mintlify's own nav group headers are also sticky within the same scroll
   container and fight this for the same top:0 slot - so use `fixed` (like
   the language switcher below) and reserve the space it and the switcher
   occupy via padding on the scroll container instead, so nothing can ever
   scroll underneath either. */
#sidebar div:has(> a.select-none) {
  position: fixed;
  top: 1.5rem;
  left: 1.75rem;
  z-index: 30;
}
#sidebar-content > div {
  padding-top: 4.5rem !important;
}
/* Belt-and-suspenders: Mintlify's own nav group headers are independently
   sticky within the scroll container and can still creep above the padding
   reserved above, so paint an opaque block behind the whole reserved top
   strip too - nothing scrolled can show through it regardless. */
#sidebar::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 19rem;
  height: 7rem;
  background-color: #121516;
  z-index: 25;
}
html.light #sidebar::before {
  background-color: #ffffff;
}

/* The language switcher replaces the search bar's visual slot (see below).
   Both the logo and the switcher are `position: fixed` (out of flow), so the
   nav tree's start position is controlled entirely by the scroll container's
   padding-top above - collapse the real search bar's wrapper entirely
   instead of just hiding it, so its own layout space doesn't add on top of
   that and leave a gap. */
#sidebar div:has(> .group\/search) {
  display: none;
}

/* Language switcher: Mintlify tucks this into the same fixed bottom-of-sidebar
   list as Community/Blog/Changelog, where it reads as just another plain
   link and is easy to miss. Move it into the search bar's slot instead -
   matching its size/shape - and give it a cyan treatment so it still reads
   as a distinct control. `position: fixed` keeps it pinned to the top of the
   sidebar during scroll, same as prod. Scoped to #sidebar so the hidden
   mobile-duplicate and the unrelated theme-preference menu button (also
   aria-haspopup="menu", elsewhere in the page) aren't affected. */
#sidebar button[aria-haspopup="menu"] {
  position: fixed;
  top: 4.5rem;
  left: 1.75rem;
  z-index: 40;
  width: 15.4375rem !important;
  height: 2.25rem !important;
  flex: none !important;
  justify-content: space-between;
  padding: 0 0.625rem 0 0.875rem !important;
  background: #121516;
  border: 1px solid rgba(247, 247, 248, 0.16) !important;
  border-radius: 0.75rem !important;
}
#sidebar button[aria-haspopup="menu"]:hover {
  background: rgba(247, 247, 248, 0.1);
}
html.light #sidebar button[aria-haspopup="menu"] {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14) !important;
}
html.light #sidebar button[aria-haspopup="menu"]:hover {
  background: rgba(0, 0, 0, 0.04);
}
/* The dropdown menu panel has its own solid background but a low enough
   z-index that our repositioned trigger's stacking context (z-index: 40)
   can let scrolled nav text show through it while open. */
[role="menu"] {
  z-index: 50 !important;
}