/* ========================================================================== Plivo docs — Instrument Panel theme (ported from the marketing site) Single brand blue (#323dfe), 2px chamfer corner language, mono/uppercase accents, TechFrame-style corner brackets, blue-converge hover (1px press). Base colors + fonts load via docs.json; this file carries the tech layer. Ref: Plivo Website — src/styles/instrument-panel.css + STYLE.md. ========================================================================== */ /* Load Sora at all heading weights + JetBrains Mono. docs.json only loaded Sora@600, so headings rendered at 700 fell back to the system font. */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --plivo-blue: #323dfe; /* brand blue — fills/graphics, light + dark */ --plivo-blue-text: var(--plivo-blue); /* blue TEXT — lifts on dark for AA (see .dark) */ --plivo-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --plivo-font-display: 'Sora', ui-sans-serif, system-ui, sans-serif; --plivo-ink: rgba(0, 0, 0, 0.55); /* tech-frame line color (light) */ } .dark { --plivo-ink: rgba(255, 255, 255, 0.5); /* tech-frame line color (dark) */ /* Brand's instrument-panel.css locks blue to #323dfe in both modes, but on our dark surfaces that is 2.86:1 — a real AA failure for TEXT. The base brand system itself lifts dark --primary to #4f5cff; we lift text one step further to #6b7cff (~5.3:1). Fills/graphics/LEDs/waveform stay #323dfe. */ --plivo-blue-text: #6b7cff; } /* -------------------------------------------------------------------------- 1. Corner language — universal 2px chamfer, circles preserved -------------------------------------------------------------------------- */ .prose *, .card, pre, code, table, th, td, img, input, button, blockquote, [class*="rounded"] { border-radius: 2px !important; } [class*="rounded-full"], .rounded-full, [style*="border-radius: 50%"], [style*="border-radius:50%"] { border-radius: 9999px !important; } /* -------------------------------------------------------------------------- 2. Type — Sora headings, JetBrains Mono code -------------------------------------------------------------------------- */ code, pre, kbd { font-family: var(--plivo-font-mono) !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--plivo-font-display) !important; /* Brand spec (STYLE.md:261): Sora leans on size + tracking, not weight. Canonical h1/h2 specimens use tracking -0.02em. */ letter-spacing: -0.02em !important; } /* In-page headers: Sora semibold. Brand spec (STYLE.md:261) uses 400 for the marketing site's large hero headings, but docs headings are smaller, where weight — not just size — is what carries visual hierarchy. Kept the -0.02em tracking from the brand spec; semibold + tight tracking reads deliberate. */ main h1, main h2, main h3, main h4 { font-weight: 600 !important; } /* Top navigation tabs + card titles use the Sora display face too, so every prominent heading-like element is consistent (tabs were falling back to Inter). */ .nav-tabs-item, a[class*="nav-tabs"], .card h2, .card h3, .card [class*="title"] { font-family: var(--plivo-font-display) !important; } /* Compact tab sub-nav: Mintlify's wrapper is h-12 (48px) — tighten to 36px. Items are h-full so they follow; type drops a step to match. */ div:has(> .nav-tabs) { height: 2.25rem !important; } .nav-tabs { gap: 1.25rem !important; } .nav-tabs-item { font-size: 13px !important; } /* Active tab underline — neutral ink, not blue (tab text is already neutral; Mintlify paints the 1.5px bar bg-primary / dark:bg-primary-light). */ .nav-tabs-item > div[class*="bg-primary"] { background-color: var(--plivo-ink) !important; } /* Page-title marker — a short solid brand-blue tick (no gradient) */ main h1::after { content: ''; display: block; width: 2.75rem; height: 2px; margin-top: 0.75rem; background: var(--plivo-blue); } /* Breadcrumb / eyebrow → mono, uppercase, tracked (instrument-panel voice) */ .prose > p:first-of-type + h2, nav[aria-label="Breadcrumb"] { font-family: var(--plivo-font-mono) !important; } /* -------------------------------------------------------------------------- 3. Cards — TechFrame corner brackets + blue-converge hover + 1px press -------------------------------------------------------------------------- */ .card { position: relative; transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease !important; } /* Two diagonal corner brackets (TL + BR) — theme-aware via --plivo-ink. Colour lives in the border shorthands, not a separate border-color: the shorthand resets border-*-color to currentColor, so a bare border-color above it is silently dropped. Ink already carries its own 0.55/0.5 alpha, so no extra opacity is stacked on top. */ .card::before, .card::after { content: ''; position: absolute; width: 11px; height: 11px; pointer-events: none; transition: border-color 160ms ease; z-index: 1; } .card::before { top: 6px; left: 6px; border-left: 1px solid var(--plivo-ink); border-top: 1px solid var(--plivo-ink); } .card::after { right: 6px; bottom: 6px; border-right: 1px solid var(--plivo-ink); border-bottom: 1px solid var(--plivo-ink); } .card:hover { transform: translateY(1px); /* instrument-panel "press" — no glow */ } /* Higher specificity (0,2,1) than the shorthands (0,1,1), so this wins */ .card:hover::before, .card:hover::after { border-color: var(--plivo-blue); } .card .card-icon, .card svg[class*="text-primary"] { color: var(--plivo-blue) !important; } /* Card descriptions — smaller text + more breathing room under the title */ .card [data-component-part="card-content"] { font-size: 0.8rem !important; line-height: 1.5 !important; margin-top: 0.55rem !important; } /* -------------------------------------------------------------------------- 4. Code blocks — JetBrains Mono; rely on Mintlify's outer container border. (No border on the inner

 — that produced a double outline.)
   -------------------------------------------------------------------------- */
.prose pre,
pre {
  border: none !important;
}

/* --------------------------------------------------------------------------
   Content hyperlinks — match the font color (black in light / white in dark)
   with a same-color underline; never brand blue, including on hover.
   -------------------------------------------------------------------------- */
.mdx-content a[href]:not([class*="not-prose"]):not([class*="card"]) {
  color: inherit !important;
  text-decoration-line: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  border-bottom: 0 !important; /* remove Mintlify's blue border-bottom underline */
}
.mdx-content a[href]:not([class*="not-prose"]):not([class*="card"]):hover {
  color: inherit !important;
  text-decoration-color: currentColor !important;
  border-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   5. CTAs — solid brand blue (no gradient) on real buttons only.
   NOTE: scoped tightly to avoid Mintlify's tinted `bg-primary/10` states
   (e.g. the active sidebar item) — matching those hid their text.
   -------------------------------------------------------------------------- */
a.button,
a[role="button"],
button.button,
a[class*="bg-primary-"]:not([class*="/"]):not([class*="text-"]) {
  font-family: var(--plivo-font-mono) !important;
  letter-spacing: 0.06em;
}

/* Sidebar active item — neutral grey tint (ink-based, theme-aware), never a
   solid fill; TEXT carries the blue via the text-blue token (lifts on dark). */
#sidebar a[class*="bg-primary"],
[class*="sidebar"] a[class*="bg-primary"] {
  background-color: color-mix(in srgb, var(--plivo-ink) 8%, transparent) !important;
  color: var(--plivo-blue-text) !important;
}

/* Compact sidebar nav — items 36px → ~26px, tighter group rhythm.
   Covers ALL row types: plain links (), collapsible group toggles
   (