/* ── Nango Docs custom styles ──────────────────────────────────── */ /* ══ AGENT QUICKSTART CTA ════════════════════════════════════════ */ .agent-quickstart-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 24px; } .agent-quickstart-actions--single { grid-template-columns: minmax(0, 1fr); max-width: 720px; } .agent-quickstart-action { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 16px; border: 1px solid rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.72); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease; } .agent-quickstart-action:hover, .agent-quickstart-action:focus-visible { border-color: rgba(41, 171, 226, 0.7); background: rgba(41, 171, 226, 0.06); transform: translateY(-1px); } .agent-quickstart-action--primary { border-color: rgba(41, 171, 226, 0.4); background: rgba(41, 171, 226, 0.08); } .agent-quickstart-action[aria-busy='true'] { opacity: 0.7; cursor: wait; } .agent-quickstart-action-title { font-size: 15px; font-weight: 600; line-height: 1.4; } .agent-quickstart-action-description { color: #515556; font-size: 14px; line-height: 1.5; } .dark .agent-quickstart-action { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); } .dark .agent-quickstart-action:hover, .dark .agent-quickstart-action:focus-visible { border-color: rgba(41, 171, 226, 0.8); background: rgba(41, 171, 226, 0.12); } .dark .agent-quickstart-action-description { color: rgba(255, 255, 255, 0.68); } .agent-copy-toast { position: fixed; right: 24px; bottom: 24px; z-index: 250; max-width: min(320px, calc(100vw - 48px)); padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.1); background: #111827; color: #ffffff; font-size: 14px; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 140ms ease, transform 140ms ease; } .agent-copy-toast[data-visible='true'] { opacity: 1; transform: translateY(0); } .agent-copy-toast[data-kind='error'] { background: #7f1d1d; } @media (max-width: 640px) { .agent-quickstart-actions { grid-template-columns: 1fr; } .agent-copy-toast { right: 16px; bottom: 16px; max-width: calc(100vw - 32px); } } /* ══ BORDER RADIUS — 4px everywhere ═════════════════════════════ */ /* Override all Tailwind rounded utilities */ .rounded-sm, .rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-full, [class~="rounded-sm"], [class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"], [class~="rounded-2xl"], [class~="rounded-3xl"] { border-radius: 4px !important; } /* Native elements */ pre, code, kbd, input, select, textarea, button { border-radius: 4px !important; } /* ══ GRID — behind everything, both modes ════════════════════════ */ [class*="background-decoration"] { opacity: 0.02 !important; z-index: 0 !important; pointer-events: none; } /* ══ GITHUB STARS — hide repo name, keep icon + count ═══════════ */ #navbar a[href="https://github.com/NangoHQ/nango"] span.truncate { display: none !important; } /* Hide entirely on mobile */ @media (max-width: 767px) { a[href="https://github.com/NangoHQ/nango"] { display: none !important; } } /* ══ SEARCH / ASK AI DIALOGS — always on top ════════════════════ */ /* * Mintlify renders search and Ask AI via headlessui portals (z-40). * The navbar's backdrop-blur creates a stacking context quirk where * its z-10 tab children can paint over the z-40 dialog panel. * Fix: raise the headlessui dialog above the navbar entirely. */ [id^="headlessui-dialog-"]:not([id*="panel"]) { z-index: 200 !important; } /* ══ SEARCH DIALOG PANEL — radius matches design system ═════════ */ /* * The headless-ui dialog panel that wraps the search box uses a * larger arbitrary radius from Mintlify (≈12px) that escapes the * global rounded-* override at the top of this file. Pin the panel * and its inner surfaces to 4px so the corners match the search * input inside, the expandable summary hover (see EXPANDABLES * section), and the rest of the design system. */ [id^="headlessui-dialog-panel"], [id^="headlessui-dialog-panel"] > div, [id^="headlessui-dialog-panel"] [class*="bg-white"], [id^="headlessui-dialog-panel"] [class*="bg-background"] { border-radius: 4px !important; } /* ══ EXPANDABLES — radius matches design system ═════════════════ */ /* * Mintlify renders as

...

. * The summary's hover highlight uses a radius that doesn't match the * search dialog panel. Pin both

and

to 4px. When * the accordion is open, square off the summary's bottom corners so * the highlight connects cleanly to the expanded content below * instead of leaving a curved gap. */ details, summary { border-radius: 4px !important; } details[open] > summary { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ══ NAVBAR ══════════════════════════════════════════════════════ */ /* * z-index: 30 matches Mintlify's native z-30 class so it stays * below the headlessui dialog portals (now at z-200 above). */ @media (min-width: 768px) { #navbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 30 !important; } } .dark #navbar { background-color: #0b0b0c !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } html:not(.dark) #navbar { background-color: #ffffff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } /* Remove inner div border so only the full-width #navbar border shows */ #navbar [class*="border-b"] { border-bottom: none !important; } /* ══ SIDEBAR ═════════════════════════════════════════════════════ */ .dark #sidebar-content { background-color: #0b0b0c !important; } .dark :has(> #sidebar-content) { border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } html:not(.dark) :has(> #sidebar-content) { border-right: 1px solid rgba(0, 0, 0, 0.08) !important; } #sidebar-content .pointer-events-none.sticky { display: none !important; } #navigation-items { padding-top: 20px !important; } /* ══ TOC — hide scrollbar until hover ════════════════════════════ */ /* * #table-of-contents has overflow-y-auto directly on it. Hide the * scrollbar at rest, reveal it on hover. WebKit and Firefox each need * their own properties. */ #table-of-contents { scrollbar-width: none; /* Firefox */ } #table-of-contents::-webkit-scrollbar { width: 0; background: transparent; } #table-of-contents:hover { scrollbar-width: thin; /* Firefox */ } #table-of-contents:hover::-webkit-scrollbar { width: 6px; } #table-of-contents:hover::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.4); border-radius: 4px; } #table-of-contents:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(128, 128, 128, 0.6); } /* ══ TOC — active item padding ═══════════════════════════════════ */ /* * The active TOC item gets its gray background from the sidebar * `li[data-active="true"] > a` rule below (selector isn't scoped * to the sidebar). Without horizontal padding on the link, that * highlight sits flush against the text. Add padding + radius so * the active highlight has breathing room. We deliberately don't * use a negative margin to compensate position — Mintlify's TOC * container clips overflow, so a negative margin would just hide * the left edge of the highlight. The text shifts ~8px right of * its original position; alignment with the "On this page" header * is close enough not to look off. */ #table-of-contents a { padding: 4px 8px !important; border-radius: 4px !important; display: block !important; } /* ══ TOC — normalize unselected item color ══════════════════════ */ /* * Mintlify renders H2 TOC entries in #515556 and nested H3 entries * in #717576. The mismatched tints make the outline read as noisy * rather than hierarchical. Normalize to a single color per mode * and rely on indentation (below) to convey hierarchy. Hover and * active states are unchanged — they still come from the rules * further down (`li[data-active="true"]` and the scroll-active * fallback) which outweigh these selectors. */ html:not(.dark) #table-of-contents a { color: #515556 !important; } html:not(.dark) #table-of-contents a:hover { color: #000000 !important; } .dark #table-of-contents a { color: rgba(255, 255, 255, 0.6) !important; } .dark #table-of-contents a:hover { color: #ffffff !important; } /* ══ TOC — indent H3 sub-items ══════════════════════════════════ */ /* * Mintlify renders the TOC as a FLAT list — every entry is an * `

` sibling, not a nested *

← Mintlify paints #217ea6 *

* * Recoloring the span has been unreliable (Tailwind utility CSS * specificity quirks, deploy lag), so we just remove the overlay * entirely with display:none. The anchor's own background then * becomes the visible color, which is exactly what we want. The * mobile variant has no overlay span, so display:none on the * span is a no-op there and the anchor bg wins by default. */ #navbar a[href="https://app.nango.dev/signup"] { background-color: #29abe3 !important; background-image: none !important; border: 1px solid #29abe3 !important; color: #ffffff !important; } #navbar a[href="https://app.nango.dev/signup"] > span:first-child, #navbar a[href="https://app.nango.dev/signup"] span.absolute, #navbar a[href="https://app.nango.dev/signup"] span[class*="bg-primary"] { display: none !important; } #navbar a[href="https://app.nango.dev/signup"]:hover { background-color: #217ea6 !important; border-color: #217ea6 !important; color: #ffffff !important; } /* ══ HIDE BOTTOM CHAT ASSISTANT INPUT ════════════════════════════ */ /* * Mintlify pins an "Ask a question..." chat-assistant input at the * bottom of every doc page. The navbar already has a separate Ask AI * button, so this bottom input is redundant. Mintlify doesn't expose * a docs.json toggle for it. * * Two layers needed: * 1. The floating input bar itself (.chat-assistant-floating-input). * 2. Its rounded-2xl wrapper div — which also appears identically * inside the Ask AI sidebar panel, so the rule must be scoped to * #content-area to avoid hiding the panel's own input container. * * Do NOT use [class*="chat-assistant"] (hides the panel) or * #chat-assistant-textarea (that ID is duplicated on the panel * textarea and would hide it too). */ .chat-assistant-floating-input, #content-area div.rounded-2xl.pointer-events-auto[class*="bg-background-light"] { display: none !important; }

​Docs guidance for Claude

Docs guidance for Claude