/* Blankstate docs. Squared, outlined, wireframe-portal art direction. */ /* -------------------------------------------------------------------------- Primary CTA in the topbar. Mintlify renders: Ghost/outline button: kill the filled span, put a 1px border on the outer anchor, tint text and chevron with the CTA accent. -------------------------------------------------------------------------- */ #topbar-cta-button > a { border: 1px solid #581899 !important; border-radius: 0 !important; padding: 0.4rem 0.85rem !important; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease !important; } #topbar-cta-button > a > span.absolute { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; opacity: 1 !important; } #topbar-cta-button > a .text-white, #topbar-cta-button > a [class*="text-white"] { color: #581899 !important; } #topbar-cta-button > a:hover { background-color: rgba(88, 24, 153, 0.06) !important; border-color: #6B24B5 !important; } #topbar-cta-button > a:hover .text-white, #topbar-cta-button > a:hover [class*="text-white"] { color: #6B24B5 !important; } /* Dark mode: warm peach accent, brighter on hover */ html.dark #topbar-cta-button > a { border-color: #FBAF7A !important; } html.dark #topbar-cta-button > a .text-white, html.dark #topbar-cta-button > a [class*="text-white"] { color: #FBAF7A !important; } html.dark #topbar-cta-button > a:hover { background-color: rgba(251, 175, 122, 0.08) !important; border-color: #FFC28A !important; } html.dark #topbar-cta-button > a:hover .text-white, html.dark #topbar-cta-button > a:hover [class*="text-white"] { color: #FFC28A !important; } /* -------------------------------------------------------------------------- Card icons. Mintlify masks a FontAwesome SVG and paints it with `bg-primary` / `bg-primary-light`. Neutralize to currentColor so icons inherit gray-800 (light) / gray-100 (dark) from the parent instead of the accent. -------------------------------------------------------------------------- */ [data-component-part="card-icon"] > svg { background-color: currentColor !important; } /* -------------------------------------------------------------------------- Squared corners on interactive shapes. -------------------------------------------------------------------------- */ button, [role="button"], button[class*="rounded"], a[class*="rounded"], div[class*="rounded"][role="button"] { border-radius: 0 !important; } pre, code, codegroup { border-radius: 0 !important; } input, select, textarea, [role="searchbox"], [role="combobox"] { border-radius: 0 !important; } /* -------------------------------------------------------------------------- Theme preference pill. Maple renders the pill inside the sidebar header, next to the logo. Lift it out and pin it to the far right of the top tabs strip so it lives on the same horizontal line as the tabs (Guides / API Reference / SDKs & CLI). -------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* The sidebar is position: fixed, which creates a stacking context. Its default z-index sits below the tabs strip (`#navbar-transition-maple`, z-20), so any fix-positioned child of the sidebar is painted underneath the tabs strip. Raise the sidebar above the tabs strip so the pill can surface. The sidebar occupies left:0..19rem and the tabs strip starts at 19rem, so they never visually overlap. */ #sidebar { z-index: 30 !important; } [data-theme-preference-switch="pill"] { position: fixed !important; top: 0.625rem !important; right: 1.5rem !important; z-index: 40 !important; margin: 0 !important; } }