/** * Suki docs — global styles (Mintlify docs.json → customCSS). * Navbar rules (04–06) follow base tokens; print rules are at the end of this file. */ /* ===== styles/00-base.css ===== */ /* ======================================== BASE STYLES ======================================== */ /* Shared link-row hover tokens (Most popular, What's New, SDK overview start tiles) */ :root { --suki-link-row-hover-bg: rgba(15, 23, 42, 0.045); --suki-link-row-chevron-hover: #6f5410; --suki-table-row-hover-bg: var(--suki-link-row-hover-bg); --suki-table-row-hover-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); --suki-table-code-col-hover-bg: #e5e7eb; /* Mintlify light text tokens (match Tailwind text-gray-* on this theme) */ --suki-light-text: #1a1917; /* gray-900 — primary / headings */ --suki-light-text-body: #41413f; /* gray-700 — secondary body */ --suki-light-text-muted: #737270; /* gray-500 — muted */ } html.dark, [data-theme='dark'] { --suki-link-row-hover-bg: rgba(255, 255, 255, 0.06); --suki-link-row-chevron-hover: #fff394; --suki-table-row-hover-bg: #2d2d2d; --suki-table-row-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); --suki-table-code-col-hover-bg: #363533; /* Mintlify dark text tokens (match Tailwind dark:text-gray-*) */ --suki-dark-text: #e1e1de; /* gray-200 — primary / headings */ --suki-dark-text-body: #d1d0ce; /* gray-300 — secondary body */ --suki-dark-text-muted: #a1a19f; /* gray-400 — muted */ } /* Dark Mode Typography — bold weight only; do not force pure white (let Mintlify / parent color apply) */ html.dark strong, html.dark b, html.dark .font-bold, [data-theme='dark'] strong, [data-theme='dark'] b, [data-theme='dark'] .font-bold { font-weight: 700 !important; } /* Inline Code Styling - Light Mode */ code:not(pre code) { background-color: #F3F4F6 !important; color: #473508 !important; border: 0.5px solid #f3f5f7 !important; border-radius: 4px !important; font-size: 11px !important; padding: 2.4px 7px !important; } /* Inline Code Styling - Dark Mode */ html.dark code:not(pre code), [data-theme="dark"] code:not(pre code) { background-color: #252628 !important; color: #fcf497 !important; border: 0.2px solid #252626 !important; } /* Inline code inside Note, Warning, Info, Tip, and Quick summary — match global inline code */ [class*="callout"] code:not(pre code), [class*="Callout"] code:not(pre code), [class*="admonition"] code:not(pre code), [role="note"] code:not(pre code), [role="alert"] code:not(pre code), [data-callout-type] code:not(pre code), #content-area [data-callout-type] code:not(pre code), .quick-summary-content code:not(pre code), .quick-summary-wrapper code:not(pre code) { background-color: #F3F4F6 !important; color: #473508 !important; border: 0.5px solid #f3f5f7 !important; border-radius: 4px !important; font-size: 11px !important; padding: 2.4px 7px !important; } html.dark [class*="callout"] code:not(pre code), html.dark [class*="Callout"] code:not(pre code), html.dark [class*="admonition"] code:not(pre code), html.dark [role="note"] code:not(pre code), html.dark [role="alert"] code:not(pre code), html.dark [data-callout-type] code:not(pre code), html.dark #content-area [data-callout-type] code:not(pre code), html.dark .quick-summary-content code:not(pre code), html.dark .quick-summary-wrapper code:not(pre code), [data-theme="dark"] [class*="callout"] code:not(pre code), [data-theme="dark"] [class*="Callout"] code:not(pre code), [data-theme="dark"] [class*="admonition"] code:not(pre code), [data-theme="dark"] [role="note"] code:not(pre code), [data-theme="dark"] [role="alert"] code:not(pre code), [data-theme="dark"] [data-callout-type] code:not(pre code), [data-theme="dark"] #content-area [data-callout-type] code:not(pre code), [data-theme="dark"] .quick-summary-content code:not(pre code), [data-theme="dark"] .quick-summary-wrapper code:not(pre code) { background-color: #252628 !important; color: #fcf497 !important; border: 0.2px solid #252626 !important; } /* * Mintlify (release notes, etc.): in dark mode the theme swaps CSS variables to dark * palette. Force the same token values as light mode so badges match (green, blue, orange). * Scoped to #content-area so nav and other chrome are unchanged. Match on [--color-bg:#…] in class. */ html.dark #content-area span[class*="--color-bg:#D1FAE4"], [data-theme="dark"] #content-area span[class*="--color-bg:#D1FAE4"] { --color-bg: #d1fae4 !important; --color-text: #166e3f !important; --color-bg-disabled: #edfdf4 !important; --color-text-disabled: rgba(38, 189, 108, 0.5) !important; } html.dark #content-area span[class*="--color-bg:#E3EAFD"], [data-theme="dark"] #content-area span[class*="--color-bg:#E3EAFD"] { --color-bg: #e3eafd !important; --color-text: #133a9a !important; --color-bg-disabled: #f0f4fe !important; --color-text-disabled: rgba(51, 104, 240, 0.5) !important; } html.dark #content-area span[class*="--color-bg:#FDEAD8"], [data-theme="dark"] #content-area span[class*="--color-bg:#FDEAD8"] { --color-bg: #fdead8 !important; --color-text: #ae590a !important; --color-bg-disabled: #fef4ec !important; --color-text-disabled: rgba(244, 142, 47, 0.5) !important; } html.dark #content-area span[class*="--color-bg:#ECDFFB"], [data-theme="dark"] #content-area span[class*="--color-bg:#ECDFFB"] { --color-bg: #ecdffb !important; --color-text: #5314a3 !important; --color-bg-disabled: #ecdffb !important; --color-text-disabled: rgba(135, 61, 230, 0.5) !important; } html.dark #content-area span[class*="--color-bg:#FCE5E4"], [data-theme="dark"] #content-area span[class*="--color-bg:#FCE5E4"] { --color-bg: #fce5e4 !important; --color-text: #9a1c13 !important; --color-bg-disabled: #fdf2f1 !important; --color-text-disabled: rgba(230, 72, 61, 0.5) !important; } /* ===== Wide content (early: layout rail before heavy chrome) ===== */ /* Wide content area (no script delay); frame pages excluded via :has() */ body:not(:has(.hp-wrap)):not(:has(.sdk-overview-container)) #content-area { max-width: 990px !important; margin-left: auto !important; margin-right: auto !important; } /* * Large desktop / wide monitors (~27 in and up): wider reading column only when the viewport * is wide enough so laptops and smaller windows stay on the default max-width above. */ @media (min-width: 1800px) { body:not(:has(.hp-wrap)):not(:has(.sdk-overview-container)) #content-area { max-width: 1170px !important; } } /* * OpenAPI endpoint pages only: extra horizontal padding on the middle column * so prose sits farther from the left nav and the right code rail. * Mintlify default is px-6 (24px). Does not match regular docs / API overview. */ @media (min-width: 1280px) { #content-container:has(#content-area [id^="api-playground"]) #content-area { padding-left: 5rem !important; padding-right: 5rem !important; } } /* ===== styles/04-navbar.css ===== */ /* ======================================== NAVIGATION & BUTTONS ======================================== */ /* * Translucent sticky docs navbar (safe Mintlify override). * Mintlify paints an opaque fill on: * #navbar > .z-0.absolute.inset-0.bg-background-light * and a bottom rule on: * #navbar > .z-10.absolute.w-full.h-full.border-b * Only soften fill + border. Do not change sticky/fixed, z-index, height, or nav children. */ #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); } /* * SDKs / APIs / Learn / Resources menus portal into a static [data-base-ui-portal] * as position:absolute, so they scroll with the page until Floating UI repositions * them a frame later (visible bounce under the sticky navbar). A fixed, viewport-sized * portal makes their containing block the viewport, like More from Suki / MCP panels. */ [data-base-ui-portal]:has(> div.z-50[data-side][style*="--anchor-width"]) { position: fixed; inset: 0; z-index: 50; pointer-events: none; } [data-base-ui-portal] > div.z-50[data-side][style*="--anchor-width"] { pointer-events: auto; } html.dark #navbar > .z-0.absolute.inset-0.bg-background-light, html[data-theme="dark"] #navbar > .z-0.absolute.inset-0.bg-background-light, [data-theme="dark"] #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: rgba(14, 13, 12, 0.72) !important; } #navbar > .z-10.absolute.w-full.h-full.border-b { border-bottom-color: rgba(15, 23, 42, 0.08) !important; } html.dark #navbar > .z-10.absolute.w-full.h-full.border-b, html[data-theme="dark"] #navbar > .z-10.absolute.w-full.h-full.border-b, [data-theme="dark"] #navbar > .z-10.absolute.w-full.h-full.border-b { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* * Home: navbar matches the hero band by default. scripts/home-hero-search.js sets * html[data-hp-home-nav="past-hero"] after the full hero scrolls past the navbar; * home keeps the charcoal bar (light and dark). * * Desktop home: taller content row only (~68px vs Mintlify h-12 / 48px). Do NOT set * height on #navbar itself — Mintlify injects a banner spacer * (h-[var(--banner-height)]) inside the header; a fixed #navbar height collapses that * spacer + row and overflows nav chrome into the hero. */ @media (min-width: 1024px) { /* * nav change: home taller bar (68px). No vertical padding — selection must * touch top + bottom of the charcoal nav (padding-top:12px was leaving a gap). * Logo / search / actions stay vertically centered via their own flex rules. */ body:has([data-hp-home-hero]) #navbar > .z-10.relative { align-items: stretch !important; box-sizing: border-box; display: flex; height: 68px; min-height: 68px; padding-bottom: 0; padding-top: 0; } body:has([data-hp-home-hero]) #navbar .hidden.lg\:flex.items-center.h-12, body:has([data-hp-home-hero]) #navbar .flex.items-center.justify-between.h-12 { box-sizing: border-box; height: 100% !important; min-height: 0 !important; } /* Keep logo + Developers label optically centered in the taller home bar */ body:has([data-hp-home-hero]) #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(1), body:has([data-hp-home-hero]) #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(2), body:has([data-hp-home-hero]) #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(3) { align-items: center !important; height: auto !important; } } /* Home hero band + navbar: same charcoal surface in light and dark (#1c1c19). */ body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: #1c1c19 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.dark body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light, html[data-theme="dark"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light, [data-theme="dark"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: #1c1c19 !important; } body:has([data-hp-home-hero]) #navbar > .z-10.absolute.w-full.h-full.border-b { border-bottom-color: transparent !important; } /* Scrolled past hero: keep charcoal on home (match dark). Light docs pages are unaffected. */ html[data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: #1c1c19 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.dark[data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light, html[data-theme="dark"][data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light, [data-theme="dark"] html[data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: #1c1c19 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-10.absolute.w-full.h-full.border-b { border-bottom-color: transparent !important; } html.dark[data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-10.absolute.w-full.h-full.border-b, html[data-theme="dark"][data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-10.absolute.w-full.h-full.border-b, [data-theme="dark"] html[data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-10.absolute.w-full.h-full.border-b { border-bottom-color: transparent !important; } /* Home: navbar search moves into the hero; hide the topbar trigger (engine stays wired). */ body:has([data-hp-home-hero]) #navbar #search-bar-entry, body:has([data-hp-home-hero]) #navbar #search-bar-entry-mobile { display: none !important; } /* * Home only: keep the Home tab in docs.json / DOM, but hide it in the tab row so it * does not show the selected pill. Logo still routes to /documentation/home. */ body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item[href="/documentation/home"], body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item[href="/documentation/home/"] { display: none !important; } /* * Home only: Confluent-style "Suki | Developers" — thin rule + secondary label, * optically centered to the wordmark (not a | glyph in the text string). */ body:has([data-hp-home-hero]) #navbar a[href="/documentation/home"]:has(img.nav-logo) { align-items: center; display: inline-flex; gap: 0; } body:has([data-hp-home-hero]) #navbar a[href="/documentation/home"]:has(img.nav-logo)::after { align-items: center; border-left: 1px solid #fff8d6; box-sizing: border-box; color: #fff8d6; content: "Developers"; display: inline-flex; font-size: 0.9375rem; font-weight: 500; height: 26px; letter-spacing: -0.015em; line-height: 1; margin-left: 14px; padding-left: 14px; white-space: nowrap; } /* * Light mode home: Mintlify serves the black wordmark; swap to the cream logo on the * charcoal home navbar (stays on after scroll). */ html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar a[href="/documentation/home"] img.nav-logo, [data-theme="light"] body:has([data-hp-home-hero]) #navbar a[href="/documentation/home"] img.nav-logo { content: url("/logo/light-suki.svg"); } /* * Home charcoal navbar (light mode): MCP / More / theme match dark chrome (incl. after scroll). */ html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger { color: #9ca3af !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"], html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"], [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"], [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"] { color: #d1d0ce !important; background: rgba(255, 255, 255, 0.08) !important; border: none !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"]::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"]::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"]::after, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover::after, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover::after, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"]::after, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"]::after, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover::after, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"]::after { bottom: 0 !important; background-color: rgba(255, 255, 255, 0.35) !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #theme-preference-menu-trigger, [data-theme="light"] body:has([data-hp-home-hero]) #theme-preference-menu-trigger { color: #9ca3af !important; opacity: 1 !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #theme-preference-menu-trigger svg, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger svg, [data-theme="light"] body:has([data-hp-home-hero]) #theme-preference-menu-trigger svg, [data-theme="light"] body:has([data-hp-home-hero]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger svg { color: #9ca3af !important; opacity: 1 !important; } /* * Light mode home: tab pills match dark navbar chrome (incl. after scroll). */ html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item { color: #9ca3af !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item:hover, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:hover, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item:hover, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:hover, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item[aria-expanded="true"], [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08) !important; color: #d1d0ce !important; } /* nav change: home charcoal hover bar (gray, like Suki hover:after:bg-gray-60) */ html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item:hover::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:hover::after, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item:hover::after, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:hover::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item[aria-expanded="true"]::after, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item[aria-expanded="true"]::after { bottom: 0 !important; background-color: rgba(255, 255, 255, 0.35) !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:hover > div, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:hover > div { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* nav change: home charcoal — Suki active (fill + white ::after), weight 500 */ html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item[data-active="true"], html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item.text-primary, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item.text-primary, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item[data-active="true"], [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item.text-primary, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item.text-primary { background: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; color: #ffffff !important; font-weight: 500 !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item[data-active="true"]::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item.text-primary::after, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item.text-primary::after, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item[data-active="true"]::after, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs a.nav-tabs-item.text-primary::after, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item.text-primary::after { bottom: 0 !important; background-color: #ffffff !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:not(:hover):not(.text-primary):not([aria-expanded="true"]) svg, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:not(:hover):not(.text-primary):not([aria-expanded="true"]) svg { color: #9ca3af !important; } html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:hover svg, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item.text-primary svg, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item[aria-expanded="true"] svg, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item:hover svg, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item.text-primary svg, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .nav-tabs button.nav-tabs-item[aria-expanded="true"] svg { color: #ffffff !important; } @media (prefers-reduced-transparency: reduce) { #navbar > .z-0.absolute.inset-0.bg-background-light { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgb(255, 255, 255) !important; } html.dark #navbar > .z-0.absolute.inset-0.bg-background-light, html[data-theme="dark"] #navbar > .z-0.absolute.inset-0.bg-background-light, [data-theme="dark"] #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: rgb(14, 13, 12) !important; } /* Keep home hero band charcoal until past-hero (do not let reduced-transparency force white). */ body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: #1c1c19 !important; } html.dark body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light, html[data-theme="dark"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light, [data-theme="dark"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: #1c1c19 !important; } html[data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: #1c1c19 !important; } html.dark[data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light, html[data-theme="dark"][data-hp-home-nav="past-hero"] body:has([data-hp-home-hero]) #navbar > .z-0.absolute.inset-0.bg-background-light { background-color: #1c1c19 !important; } } /* Navbar Logo */ nav img.nav-logo, header img.nav-logo, #navbar img, nav img[alt*="Suki"], header img[alt*="Suki"], nav a img, header a img, .nav-logo, img.h-6 { height: 40px !important; width: auto !important; max-height: 40px !important; } @media (max-width: 768px) { nav img.nav-logo, header img.nav-logo, #navbar img, nav img[alt*="Suki"], header img[alt*="Suki"], nav a img, header a img, .nav-logo, img.h-6 { height: 36px !important; max-height: 36px !important; } } /* Shared CTA hover arrow (Lucide-style arrow-right). One arrow, right side, hover only. */ :root { --suki-cta-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); --suki-cta-arrow-size: 12px; --suki-cta-arrow-size-md: 16px; --suki-cta-arrow-size-lg: 20px; /* One hover expand recipe for all custom pill CTAs (do not animate flex gap). */ --suki-cta-arrow-hover-ml: 8px; --suki-cta-hover-duration: 0.15s; --suki-cta-hover-ease: ease; } /* Learning Path Buttons — compact pill + expanding arrow (shared with .doc-guide-btn) */ .learning-path-button { display: inline-flex !important; position: relative !important; align-items: center !important; justify-content: center !important; gap: 0 !important; padding: 4px 12px !important; margin: 0 !important; border-radius: 9999px !important; background: #0a0a0a !important; color: #ffffff !important; text-decoration: none !important; font-weight: 500 !important; font-size: 12.5px !important; line-height: 1.2 !important; letter-spacing: 0.01em !important; border: none !important; min-height: 28px !important; white-space: nowrap !important; box-shadow: none !important; outline: none !important; transition: background var(--suki-cta-hover-duration) var(--suki-cta-hover-ease) !important; } .learning-path-button.hp-cta-with-icon > .hp-cta-icon, .learning-path-button.hp-cta-with-icon > svg { margin-right: 6px; } .learning-path-button svg, .learning-path-button .hp-cta-icon { position: relative; z-index: 1; width: 12px !important; height: 12px !important; min-width: 12px !important; min-height: 12px !important; } /* Hide leftover leading icons / Mintlify external icons — hover ::after is the only arrow */ .learning-path-button > svg:not(.hp-cta-icon) { display: none !important; } .learning-path-button::after { content: '' !important; display: inline-block; width: 0; height: var(--suki-cta-arrow-size); max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--suki-cta-arrow-mask) center / contain no-repeat; mask: var(--suki-cta-arrow-mask) center / contain no-repeat; transition: opacity var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), max-width var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), width var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), margin-left var(--suki-cta-hover-duration) var(--suki-cta-hover-ease); } .learning-path-button:hover, .learning-path-button:focus-visible { background: #1f1f1f !important; color: #ffffff !important; outline: none !important; } .learning-path-button:hover::after, .learning-path-button:focus-visible::after { width: var(--suki-cta-arrow-size); max-width: var(--suki-cta-arrow-size); margin-left: var(--suki-cta-arrow-hover-ml); opacity: 1; } /* Taller release-notes timeline pills: larger hover arrow */ .learning-path-button.release-notes-timeline-view::after { height: var(--suki-cta-arrow-size-md); } .learning-path-button.release-notes-timeline-view:hover::after, .learning-path-button.release-notes-timeline-view:focus-visible::after { width: var(--suki-cta-arrow-size-md); max-width: var(--suki-cta-arrow-size-md); } .learning-path-button:focus-visible { box-shadow: 0 0 0 2px rgba(255, 225, 72, 0.55) !important; } .learning-path-button:active { background: #333333 !important; color: #ffffff !important; } /* Dark mode: white pill buttons with dark text (inverse of light mode) */ html.dark .learning-path-button, html[data-theme="dark"] .learning-path-button, [data-theme="dark"] .learning-path-button { background: #f5f5f5 !important; color: #0a0a0a !important; } html.dark .learning-path-button:hover, html.dark .learning-path-button:focus-visible, html[data-theme="dark"] .learning-path-button:hover, html[data-theme="dark"] .learning-path-button:focus-visible, [data-theme="dark"] .learning-path-button:hover, [data-theme="dark"] .learning-path-button:focus-visible { background: #e8e8e8 !important; color: #0a0a0a !important; } html.dark .learning-path-button:active, html[data-theme="dark"] .learning-path-button:active, [data-theme="dark"] .learning-path-button:active { background: #d4d4d4 !important; color: #0a0a0a !important; } /* Keep yellow CTAs on Executive Summary and Technical Execution only */ #content-area .web-sdk-exec-page .learning-path-button { background: #FFE148 !important; color: #000000 !important; } #content-area .web-sdk-exec-page .learning-path-button:hover, #content-area .web-sdk-exec-page .learning-path-button:focus-visible, #content-area .web-sdk-exec-page .learning-path-button:active { background: #ffe89c !important; color: #000000 !important; } @media (prefers-reduced-motion: reduce) { .learning-path-button, .learning-path-button::after { transition-duration: 0.01ms !important; } } /* Image hover popup effect */ .hover-popup-image:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } /* suki.ai careers–style staggered strip hover (see scripts/suki-cta-strip-hover.js) */ .suki-strip-hover-host { position: relative; isolation: isolate; overflow: hidden; } .suki-strip-hover-layer { pointer-events: none; position: absolute; inset: 0; display: flex; flex-direction: row; z-index: 0; border-radius: inherit; } .suki-strip-hover-seg { flex: 1 1 0; height: 100%; min-width: 0; transform: scaleX(0); transform-origin: left center; background: rgba(0, 0, 0, 0.05); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--suki-strip-index, 0) * 4ms); } .suki-strip-hover-host > *:not(.suki-strip-hover-layer) { position: relative; z-index: 1; } .suki-strip-hover-content { position: relative; z-index: 1; } html.dark .suki-strip-hover-seg, [data-theme="dark"] .suki-strip-hover-seg { background: rgba(255, 255, 255, 0.08); } /* Dark mode: stronger strips on navbar status pill */ html.dark nav li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg, html.dark header li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg, html.dark #navbar li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg, html[data-theme="dark"] nav li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg, html[data-theme="dark"] header li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg, html[data-theme="dark"] #navbar li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg, [data-theme="dark"] nav li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg, [data-theme="dark"] header li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg, [data-theme="dark"] #navbar li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]) .suki-strip-hover-seg { background: rgba(255, 255, 255, 0.16); } @media (min-width: 1024px) { a.suki-strip-hover-host:hover .suki-strip-hover-seg, a.suki-strip-hover-host:focus-visible .suki-strip-hover-seg, li.suki-strip-hover-host:hover .suki-strip-hover-seg, li.suki-strip-hover-host:has(a:focus-visible) .suki-strip-hover-seg { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .suki-strip-hover-seg { transition-duration: 0.01ms; transition-delay: 0ms !important; } } @media print { .suki-strip-hover-layer { display: none !important; } } /* Navbar links - consistent height, no overflow into content below */ nav li:has(a[href*="status-platform.suki.ai"]), nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li:has(a[href*="status-platform.suki.ai"]), header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li:has(a[href*="status-platform.suki.ai"]), #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) { display: flex !important; align-items: center !important; height: 36px !important; max-height: 36px !important; overflow: hidden !important; box-sizing: border-box !important; } nav li:has(a[href*="status-platform.suki.ai"]) a, nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, header li:has(a[href*="status-platform.suki.ai"]) a, header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, #navbar li:has(a[href*="status-platform.suki.ai"]) a, #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a { display: flex !important; align-items: center !important; height: 100% !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; box-sizing: border-box !important; } /* Support Button styling */ nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) { background: #FFE148 !important; color: #000000 !important; border-radius: 18px !important; padding: 6px 16px !important; } html.dark nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) { background: #404040 !important; color: var(--suki-dark-text) !important; } html.dark nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a { color: var(--suki-dark-text) !important; } /* Support button hover - light mode */ nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover { background: #FFEA7E !important; } /* Support button hover - dark mode */ html.dark nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, html.dark header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, html.dark #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, html.dark nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, html.dark header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover, html.dark #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]):hover { background: #535353 !important; } /* Strip hover only: host is

for navbar pills; do not stack legacy li:hover fills */ nav li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, header li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, #navbar li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, nav li.navbar-link.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, header li.navbar-link.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, #navbar li.navbar-link.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover { background: transparent !important; border-color: #e5e7eb !important; } nav li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, header li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, #navbar li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, nav li.navbar-link.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, header li.navbar-link.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, #navbar li.navbar-link.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, nav li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, header li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, #navbar li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, nav li.navbar-link.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, header li.navbar-link.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, #navbar li.navbar-link.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover { background: #ffe148 !important; } html.dark nav li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, html.dark header li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, html.dark #navbar li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, html.dark nav li.navbar-link.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, html.dark header li.navbar-link.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, html.dark #navbar li.navbar-link.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] nav li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] header li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] #navbar li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] nav li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] header li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] #navbar li.suki-strip-hover-host:has(a[href*="status-platform.suki.ai"]):hover { background: transparent !important; border-color: rgba(255, 255, 255, 0.12) !important; } html.dark nav li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, html.dark header li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, html.dark #navbar li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, html.dark nav li.navbar-link.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, html.dark header li.navbar-link.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, html.dark #navbar li.navbar-link.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, html[data-theme="dark"] nav li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, html[data-theme="dark"] header li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, html[data-theme="dark"] #navbar li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, [data-theme="dark"] nav li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, [data-theme="dark"] header li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover, [data-theme="dark"] #navbar li.suki-strip-hover-host:has(a[href^="mailto:support@suki.ai"]):hover { background: #404040 !important; } html.dark nav li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, html.dark header li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, html.dark #navbar li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, html.dark nav li.navbar-link.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, html.dark header li.navbar-link.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, html.dark #navbar li.navbar-link.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, html[data-theme="dark"] nav li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, html[data-theme="dark"] header li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, html[data-theme="dark"] #navbar li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, [data-theme="dark"] nav li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, [data-theme="dark"] header li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover, [data-theme="dark"] #navbar li.suki-strip-hover-host:has(a[href*="forms.suki.ai"]):hover { background: #404040 !important; } /* Navbar pills: anchor shrink-wraps to label width; stretch to full

so strip layer matches the pill */ @media (min-width: 1024px) { nav li.suki-strip-hover-host.navbar-link > a, header li.suki-strip-hover-host.navbar-link > a, #navbar li.suki-strip-hover-host.navbar-link > a { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; justify-content: flex-start !important; } } /* Remove support button styling for small screens */ @media (max-width: 640px) { nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) { background: unset !important; } html.dark nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a { color: unset !important; } } @media (max-width: 480px) { nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html.dark #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) { background: unset !important; } html.dark nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a, html.dark #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) a { color: unset !important; } } /* Two-tier responsive navbar: drop the custom pills first, keep the four tabs * visible as long as they actually fit, only collapse tabs when the remaining * items would genuinely overlap. * * The Sequoia theme keeps the full desktop nav on one row at every viewport * width - there is no built-in hamburger on this site - so at narrow widths * (and whenever the side chat panel shrinks the usable nav width) the logo, * four top-level tabs (Documentation / SDKs / API Reference / Release Notes), * centered search, Ask AI, the MCP dropdown, the two custom pills (System * Status, Need Help) and the theme toggle visibly overlap each other. * * Measured item widths (at 1024px, no panel): logo 81, four tabs 442, search * 176, Ask AI 101, MCP 48, theme 32, System Status 120, Need Help 94. With * gaps + padding the full nav needs ~1280px; without the two custom pills it * needs ~1060px. The assistant side panel takes ~420px of the viewport when * open, so usable nav width = viewport - ~420 while it is up. * * Tier 1 (hide System Status + Need Help pills, keep tabs): * - Viewport < 1280 (any panel state), OR * - Assistant panel open and viewport < 1720. * Both pills remain reachable from the footer and the Support page. * * Tier 2 (phone-style: hide tabs too, leaving logo + search + Ask AI + MCP + * theme): * - Viewport < 1080 (below this the tabs overlap search/Ask AI even without * the panel), OR * - Assistant panel open and viewport < 1480 (below this, even after Tier 1 * kicks in, tabs cannot fit alongside the 420px panel). * Tabs are still reachable from the left sidebar, which lists every page * grouped by tab. * * At >= 1280 with the panel closed (or >= 1720 with it open) the full desktop * nav renders with all items. Between the two tiers the tabs stay visible, so * widths like 1200 no-panel or 1500 panel-open no longer get blanket-hidden. * * All hide rules are floored at `min-width: 1024px` (Mintlify's `lg` * breakpoint). Below that, Mintlify swaps in its own mobile nav row with a * different layout, and we leave that untouched so the mobile view stays * exactly as it was before the overlap fix. */ /* Phone-only: mobile toolbar placeholders (see also navbar MCP block below). */ @media (max-width: 1023px) { #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(button[aria-label="More actions"])) { justify-content: flex-end !important; min-width: 7.5rem !important; } /* * Home hides #search-bar-entry-mobile; keep the cluster tight and flush to the * row’s right edge (no empty reserved slot after MCP / More). */ body:has([data-hp-home-hero]) #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(button[aria-label="More actions"])) { min-width: 0 !important; } #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-mcp-mobile-root)):not(:has(button[aria-label="More actions"]))::before { content: "" !important; order: 2 !important; flex: 0 0 32px !important; width: 32px !important; height: 32px !important; display: block !important; color: #6F5410 !important; background: currentColor !important; pointer-events: none !important; -webkit-mask: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3Cpath d='M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3Cpath d='M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3C/svg%3E") center / 21px 21px no-repeat !important; mask: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3Cpath d='M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3Cpath d='M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3C/svg%3E") center / 21px 21px no-repeat !important; } #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-more-mobile-root)):not(:has(button[aria-label="More actions"]))::after { content: "" !important; order: 3 !important; flex: 0 0 32px !important; width: 32px !important; height: 32px !important; display: block !important; color: #6F5410 !important; background: currentColor !important; pointer-events: none !important; -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='3' r='1.25'/%3E%3Ccircle cx='8' cy='8' r='1.25'/%3E%3Ccircle cx='8' cy='13' r='1.25'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important; mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='3' r='1.25'/%3E%3Ccircle cx='8' cy='8' r='1.25'/%3E%3Ccircle cx='8' cy='13' r='1.25'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important; } #navbar #search-bar-entry-mobile { order: 1 !important; } #navbar .suki-mcp-mobile-root { order: 2 !important; } #navbar .suki-more-mobile-root { order: 3 !important; } html.dark #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-mcp-mobile-root)):not(:has(button[aria-label="More actions"]))::before, html[data-theme="dark"] #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-mcp-mobile-root)):not(:has(button[aria-label="More actions"]))::before, [data-theme="dark"] #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-mcp-mobile-root)):not(:has(button[aria-label="More actions"]))::before, html.dark #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-more-mobile-root)):not(:has(button[aria-label="More actions"]))::after, html[data-theme="dark"] #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-more-mobile-root)):not(:has(button[aria-label="More actions"]))::after, [data-theme="dark"] #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-more-mobile-root)):not(:has(button[aria-label="More actions"]))::after { color: #fff394 !important; } /* Light mode home charcoal navbar: cream MCP / More placeholders (same as dark). */ html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-mcp-mobile-root)):not(:has(button[aria-label="More actions"]))::before, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-mcp-mobile-root)):not(:has(button[aria-label="More actions"]))::before, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-more-mobile-root)):not(:has(button[aria-label="More actions"]))::after, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .flex.lg\:hidden .flex.items-center.gap-3:has(#search-bar-entry-mobile):not(:has(.suki-more-mobile-root)):not(:has(button[aria-label="More actions"]))::after { color: #fff394 !important; } #navbar #assistant-entry-mobile { display: none !important; } } /* Tier 1 - hide the two custom pills. */ @media (min-width: 1024px) and (max-width: 1279.98px) { nav li:has(a[href*="status-platform.suki.ai"]), header li:has(a[href*="status-platform.suki.ai"]), #navbar li:has(a[href*="status-platform.suki.ai"]), nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), header li.navbar-link:has(a[href*="status-platform.suki.ai"]), #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]), nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) { display: none !important; } } @media (min-width: 1024px) and (max-width: 1719.98px) { html[data-assistant-state="open"] nav li:has(a[href*="status-platform.suki.ai"]), html[data-assistant-state="open"] header li:has(a[href*="status-platform.suki.ai"]), html[data-assistant-state="open"] #navbar li:has(a[href*="status-platform.suki.ai"]), html[data-assistant-state="open"] nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), html[data-assistant-state="open"] header li.navbar-link:has(a[href*="status-platform.suki.ai"]), html[data-assistant-state="open"] #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]), html[data-assistant-state="open"] nav li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html[data-assistant-state="open"] header li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html[data-assistant-state="open"] #navbar li:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html[data-assistant-state="open"] nav li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html[data-assistant-state="open"] header li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]), html[data-assistant-state="open"] #navbar li.navbar-link:has(a[href*="forms.suki.ai"], a[href^="mailto:support@suki.ai"]) { display: none !important; } } /* Tier 2 - hide the four top-level tabs (phone-style nav). Only kicks in when * there genuinely is not enough room; at 1080-1279 (no panel) or 1480-1719 * (panel open) the tabs remain visible. Floored at `lg` (1024px) so the * mobile layout below that is untouched. */ @media (min-width: 1024px) and (max-width: 1079.98px) { #navbar .nav-tabs-item, nav .nav-tabs-item, header .nav-tabs-item { display: none !important; } } @media (min-width: 1024px) and (max-width: 1479.98px) { html[data-assistant-state="open"] #navbar .nav-tabs-item, html[data-assistant-state="open"] nav .nav-tabs-item, html[data-assistant-state="open"] header .nav-tabs-item { display: none !important; } } /* Between the two tiers (pills hidden, tabs visible) give the tabs slightly * tighter padding so four tabs + logo + search + Ask AI + MCP + theme fit. */ @media (min-width: 1080px) and (max-width: 1279.98px) { #navbar .nav-tabs .nav-tabs-item { padding: 5px 8px !important; } } @media (min-width: 1480px) and (max-width: 1719.98px) { html[data-assistant-state="open"] #navbar .nav-tabs .nav-tabs-item { padding: 5px 8px !important; } } /* * System Status (navbar only): transparent fill + border. Targeted by URL; Mintlify does not * allow a custom class on navbar.links. Do not use bare `nav …` — that also matched the home * doc footer sitemap and turned System Status into a pill. */ #navbar li:has(a[href*="status-platform.suki.ai"]), header li:has(a[href*="status-platform.suki.ai"]), #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]), header li.navbar-link:has(a[href*="status-platform.suki.ai"]) { background: transparent !important; border: 1px solid #e5e7eb !important; border-radius: 18px !important; color: #000000 !important; padding: 6px 16px !important; } #navbar li:has(a[href*="status-platform.suki.ai"]) a, header li:has(a[href*="status-platform.suki.ai"]) a, #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, header li.navbar-link:has(a[href*="status-platform.suki.ai"]) a { color: #000000 !important; } html.dark nav li:has(a[href*="status-platform.suki.ai"]), html.dark header li:has(a[href*="status-platform.suki.ai"]), html.dark #navbar li:has(a[href*="status-platform.suki.ai"]), html.dark nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), html.dark header li.navbar-link:has(a[href*="status-platform.suki.ai"]), html.dark #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]), html[data-theme="dark"] nav li:has(a[href*="status-platform.suki.ai"]), html[data-theme="dark"] header li:has(a[href*="status-platform.suki.ai"]), html[data-theme="dark"] #navbar li:has(a[href*="status-platform.suki.ai"]), html[data-theme="dark"] nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), html[data-theme="dark"] header li.navbar-link:has(a[href*="status-platform.suki.ai"]), html[data-theme="dark"] #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]), [data-theme="dark"] nav li:has(a[href*="status-platform.suki.ai"]), [data-theme="dark"] header li:has(a[href*="status-platform.suki.ai"]), [data-theme="dark"] #navbar li:has(a[href*="status-platform.suki.ai"]), [data-theme="dark"] nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), [data-theme="dark"] header li.navbar-link:has(a[href*="status-platform.suki.ai"]), [data-theme="dark"] #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--suki-dark-text) !important; } html.dark nav li:has(a[href*="status-platform.suki.ai"]) a, html.dark header li:has(a[href*="status-platform.suki.ai"]) a, html.dark #navbar li:has(a[href*="status-platform.suki.ai"]) a, html.dark nav li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html.dark header li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html.dark #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html[data-theme="dark"] nav li:has(a[href*="status-platform.suki.ai"]) a, html[data-theme="dark"] header li:has(a[href*="status-platform.suki.ai"]) a, html[data-theme="dark"] #navbar li:has(a[href*="status-platform.suki.ai"]) a, html[data-theme="dark"] nav li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html[data-theme="dark"] header li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html[data-theme="dark"] #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, [data-theme="dark"] nav li:has(a[href*="status-platform.suki.ai"]) a, [data-theme="dark"] header li:has(a[href*="status-platform.suki.ai"]) a, [data-theme="dark"] #navbar li:has(a[href*="status-platform.suki.ai"]) a, [data-theme="dark"] nav li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, [data-theme="dark"] header li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, [data-theme="dark"] #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) a { color: var(--suki-dark-text) !important; } /* System Status hover — light */ nav li:has(a[href*="status-platform.suki.ai"]):hover, header li:has(a[href*="status-platform.suki.ai"]):hover, #navbar li:has(a[href*="status-platform.suki.ai"]):hover, nav li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, header li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover { background: #eeeded !important; border-color: #d1d5db !important; } /* System Status hover — dark */ html.dark nav li:has(a[href*="status-platform.suki.ai"]):hover, html.dark header li:has(a[href*="status-platform.suki.ai"]):hover, html.dark #navbar li:has(a[href*="status-platform.suki.ai"]):hover, html.dark nav li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, html.dark header li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, html.dark #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] nav li:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] header li:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] #navbar li:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] nav li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] header li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, html[data-theme="dark"] #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] nav li:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] header li:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] #navbar li:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] nav li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] header li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover, [data-theme="dark"] #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]):hover { background: #1e1e1e !important; border-color: rgba(255, 255, 255, 0.22) !important; } /* Remove System Status button styling for small screens */ @media (max-width: 640px) { nav li:has(a[href*="status-platform.suki.ai"]), header li:has(a[href*="status-platform.suki.ai"]), #navbar li:has(a[href*="status-platform.suki.ai"]), nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), header li.navbar-link:has(a[href*="status-platform.suki.ai"]), #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]), html.dark nav li:has(a[href*="status-platform.suki.ai"]), html.dark header li:has(a[href*="status-platform.suki.ai"]), html.dark #navbar li:has(a[href*="status-platform.suki.ai"]), html.dark nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), html.dark header li.navbar-link:has(a[href*="status-platform.suki.ai"]), html.dark #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) { background: unset !important; border: unset !important; } html.dark nav li:has(a[href*="status-platform.suki.ai"]) a, html.dark header li:has(a[href*="status-platform.suki.ai"]) a, html.dark #navbar li:has(a[href*="status-platform.suki.ai"]) a, html.dark nav li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html.dark header li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html.dark #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) a { color: unset !important; } } @media (max-width: 480px) { nav li:has(a[href*="status-platform.suki.ai"]), header li:has(a[href*="status-platform.suki.ai"]), #navbar li:has(a[href*="status-platform.suki.ai"]), nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), header li.navbar-link:has(a[href*="status-platform.suki.ai"]), #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]), html.dark nav li:has(a[href*="status-platform.suki.ai"]), html.dark header li:has(a[href*="status-platform.suki.ai"]), html.dark #navbar li:has(a[href*="status-platform.suki.ai"]), html.dark nav li.navbar-link:has(a[href*="status-platform.suki.ai"]), html.dark header li.navbar-link:has(a[href*="status-platform.suki.ai"]), html.dark #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) { background: unset !important; border: unset !important; } html.dark nav li:has(a[href*="status-platform.suki.ai"]) a, html.dark header li:has(a[href*="status-platform.suki.ai"]) a, html.dark #navbar li:has(a[href*="status-platform.suki.ai"]) a, html.dark nav li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html.dark header li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, html.dark #navbar li.navbar-link:has(a[href*="status-platform.suki.ai"]) a { color: unset !important; } } /* ===== Desktop theme switcher (scripts/suki-desktop-theme-switcher.js) ===== */ /* Hide Mintlify's theme control on laptop/desktop only; mobile stays unchanged. */ @media (min-width: 1024px) { #navbar #theme-preference-menu-trigger, #navbar [data-testid="theme-preference-menu-trigger"], #navbar .theme-preference-menu-trigger { display: none !important; } /* Hide the empty -mr-4 wrap once Mintlify's button is gone */ #navbar > div > div.hidden.lg\:flex div.-mr-4:has(#theme-preference-menu-trigger), #navbar div.hidden.lg\:flex div.-mr-4:has(#theme-preference-menu-trigger) { display: none !important; } /* * Stable host for MCP / More / Theme (survives Mintlify navbar remounts on SPA nav). * Positioned by more-from-suki-navbar-dropdown.js. */ #suki-nav-actions-host { display: flex; align-items: center; pointer-events: auto; } #suki-nav-actions-host ul[data-suki-nav-actions-ul='1'] { display: flex !important; /* nav change: stretch so MCP/More fill navbar height */ align-items: stretch !important; gap: 0 !important; list-style: none !important; margin: 0 !important; padding: 0 !important; height: 100%; align-self: stretch !important; } /* Host top/height come from JS (full nav row). Do not set height:auto here. */ } @media (max-width: 1023px) { #suki-nav-actions-host { display: none !important; } } #suki-nav-actions-host li.suki-theme-nav-root, :is(#navbar, #suki-nav-actions-host) li.suki-theme-nav-root { display: flex !important; align-items: stretch !important; height: auto !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; list-style: none !important; position: relative !important; margin: 0 !important; padding: 0 !important; align-self: stretch !important; } /* * Theme trigger: same full-height rectangular highlight as MCP / More * (was a 32px circular pill). */ #suki-nav-actions-host .suki-theme-nav-trigger, :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; width: auto !important; min-width: 48px !important; height: auto !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #6b7280 !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; position: relative !important; overflow: hidden !important; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger::after { content: "" !important; position: absolute !important; left: 0 !important; width: 100% !important; height: 4px !important; bottom: -4px !important; background-color: transparent !important; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; } html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"], [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"] { color: #1b1b1b !important; background: rgba(27, 27, 27, 0.05) !important; border: none !important; } html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover::after, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"]::after, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover::after, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"]::after { bottom: 0 !important; background-color: #d1d1d1 !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger { color: #9ca3af !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover, html.dark :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"], html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"] { color: var(--suki-dark-text-body) !important; background: rgba(255, 255, 255, 0.08) !important; border: none !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover::after, html.dark :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"]::after, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger:hover::after, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-theme-nav-trigger[aria-expanded="true"]::after { bottom: 0 !important; background-color: rgba(255, 255, 255, 0.35) !important; } .suki-theme-nav-trigger:focus-visible { outline: 2px solid #6b7280 !important; outline-offset: 2px !important; border-radius: 4px !important; } .suki-theme-nav-panel { position: fixed !important; z-index: 10002 !important; pointer-events: auto !important; box-sizing: border-box !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; /* nav change: Suki.ai dropdown — square, no soft card shadow */ padding: 0 !important; border-radius: 0 !important; border: none !important; background: #ffffff !important; box-shadow: none !important; } html.dark .suki-theme-nav-panel, html[data-theme="dark"] .suki-theme-nav-panel { border-color: transparent !important; background: #0a0a0a !important; box-shadow: none !important; } .suki-theme-nav-panel[hidden] { display: none !important; } .suki-theme-nav-option { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 0 !important; /* nav change: Suki submenu row */ position: relative !important; overflow: hidden !important; padding: 0 16px !important; min-height: 48px !important; border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid #d1d1d1 !important; background: transparent !important; color: #646464 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important; text-align: left !important; cursor: pointer !important; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .suki-theme-nav-option::after { content: "" !important; position: absolute !important; left: 0 !important; width: 100% !important; height: 2px !important; bottom: -2px !important; background-color: transparent !important; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; z-index: 10 !important; } .suki-theme-nav-option:last-child { border-bottom: none !important; } .suki-theme-nav-option:last-child::after { height: 4px !important; bottom: -4px !important; } .suki-theme-nav-option:hover, .suki-theme-nav-option:focus-visible { background: rgba(27, 27, 27, 0.05) !important; color: #1b1b1b !important; outline: none !important; } .suki-theme-nav-option:hover::after, .suki-theme-nav-option:focus-visible::after { bottom: 0 !important; background-color: #d1d1d1 !important; } html.dark .suki-theme-nav-option, html[data-theme="dark"] .suki-theme-nav-option { color: var(--suki-dark-text-body) !important; border-bottom-color: rgba(255, 255, 255, 0.18) !important; } html.dark .suki-theme-nav-option:hover, html.dark .suki-theme-nav-option:focus-visible, html[data-theme="dark"] .suki-theme-nav-option:hover, html[data-theme="dark"] .suki-theme-nav-option:focus-visible { background: rgba(255, 255, 255, 0.08) !important; color: var(--suki-dark-text-body) !important; } html.dark .suki-theme-nav-option:hover::after, html.dark .suki-theme-nav-option:focus-visible::after, html[data-theme="dark"] .suki-theme-nav-option:hover::after, html[data-theme="dark"] .suki-theme-nav-option:focus-visible::after { background-color: rgba(255, 255, 255, 0.35) !important; } .suki-theme-nav-option-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; flex: 0 0 auto !important; color: currentColor !important; } .suki-theme-nav-option-icon .suki-theme-nav-icon { display: block !important; width: 16px !important; height: 16px !important; } .suki-theme-nav-option-label { flex: 1 1 auto !important; } .suki-theme-nav-option-check { opacity: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: inherit !important; flex: 0 0 auto !important; } .suki-theme-nav-option.is-selected .suki-theme-nav-option-check, .suki-theme-nav-option[aria-checked="true"] .suki-theme-nav-option-check { opacity: 1 !important; } @media (max-width: 1023px) { :is(#navbar, #suki-nav-actions-host) li.suki-theme-nav-root, .suki-theme-nav-panel { display: none !important; } } /* ===== styles/05-navbar-mcp.css ===== */ /* ======================================== NAVBAR — Docs MCP dropdown (scripts/mcp-navbar-dropdown.js) ======================================== */ nav li.suki-mcp-nav-root, header li.suki-mcp-nav-root, :is(#navbar, #suki-nav-actions-host) li.suki-mcp-nav-root, #suki-nav-actions-host li.suki-mcp-nav-root { display: flex !important; align-items: center !important; height: auto !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; list-style: none !important; position: relative !important; } /* MCP + More from Suki triggers: same colors as .nav-tabs-item (Documentation / SDKs) */ html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger, html:not(.dark):not([data-theme="dark"]) #suki-nav-actions-host .suki-mcp-nav-trigger, html:not(.dark):not([data-theme="dark"]) #suki-nav-actions-host .suki-more-nav-trigger, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger, [data-theme="light"] #suki-nav-actions-host .suki-mcp-nav-trigger, [data-theme="light"] #suki-nav-actions-host .suki-more-nav-trigger { color: #6b7280 !important; } html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"], [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"] { color: #1a1a1a !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger, html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger { color: #9ca3af !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"], html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"], [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"] { color: var(--suki-dark-text-body) !important; } /* * nav change: MCP / More triggers match Suki full-height nav items * (was 30px pill — sat above the separator and looked unlike SDKs/APIs). */ :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger, :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; gap: 8px !important; height: auto !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 14px !important; letter-spacing: -0.14px !important; white-space: nowrap !important; text-shadow: none !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger::after, :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger::after { content: "" !important; position: absolute !important; left: 0 !important; width: 100% !important; height: 4px !important; bottom: -4px !important; background-color: transparent !important; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; } #navbar .suki-more-nav-label { text-shadow: -0.2px 0 0 currentColor, 0.2px 0 0 currentColor !important; } /* * Equal spacing: MCP, More from Suki, theme toggle (scripts mark ul[data-suki-nav-actions-ul]). * One flex gap overrides Mintlify’s larger list gap so all three gaps match. */ #navbar ul[data-suki-nav-actions-ul="1"], nav ul[data-suki-nav-actions-ul="1"], header ul[data-suki-nav-actions-ul="1"] { display: flex !important; align-items: stretch !important; gap: 0 !important; } #navbar ul[data-suki-nav-actions-ul="1"] > li, nav ul[data-suki-nav-actions-ul="1"] > li, header ul[data-suki-nav-actions-ul="1"] > li { margin: 0 !important; } /* nav change: MCP / More hover + open = Suki black/5 + gray-60 bar */ html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"], [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"] { background: rgba(27, 27, 27, 0.05) !important; border: none !important; color: #1b1b1b !important; } html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover::after, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover::after, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"]::after, html:not(.dark):not([data-theme="dark"]) :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"]::after, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover::after, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover::after, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"]::after, [data-theme="light"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"]::after { bottom: 0 !important; background-color: #d1d1d1 !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"], html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"], [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"], [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08) !important; border: none !important; color: var(--suki-dark-text-body) !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover::after, html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover::after, html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"]::after, html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"]::after, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover::after, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover::after, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"]::after, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"]::after, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover::after, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover::after, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"]::after, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"]::after { bottom: 0 !important; background-color: rgba(255, 255, 255, 0.35) !important; } .suki-mcp-nav-trigger:focus-visible, .suki-more-nav-trigger:focus-visible { outline: 2px solid #6b7280 !important; outline-offset: 2px !important; border-radius: 4px !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:focus-visible, html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:focus-visible, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:focus-visible, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:focus-visible, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:focus-visible, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:focus-visible { outline-color: #9ca3af !important; } .suki-mcp-nav-icon { flex-shrink: 0 !important; display: block !important; width: 17px !important; height: 17px !important; } .suki-mcp-nav-icon path { stroke: currentColor !important; } @media (min-width: 1024px) { #navbar .suki-mcp-nav-root .suki-mcp-nav-icon path { stroke-width: 15.5 !important; } } .suki-mcp-mobile-root { display: none !important; } .suki-more-mobile-root { display: none !important; } @media (max-width: 1023px) { /* Mobile toolbar placeholders: defined above with navbar Tier 1 rules. */ /* * Legacy Mintlify mobile row (assistant sparkle + More actions). * Paint MCP immediately, then scripts/mcp-navbar-dropdown.js replace it. */ header button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), nav button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), #navbar button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #6F5410 !important; pointer-events: none !important; } header button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]) > *, nav button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]) > *, #navbar button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]) > * { display: none !important; } header button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"])::before, nav button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"])::before, #navbar button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"])::before { content: "" !important; display: block !important; width: 21px !important; height: 21px !important; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3Cpath d='M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3Cpath d='M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3Cpath d='M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3Cpath d='M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025' stroke='black' stroke-width='11.0667' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important; } .suki-mcp-mobile-root { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 2 !important; } #navbar .suki-mcp-mobile-trigger, header .suki-mcp-mobile-trigger, nav .suki-mcp-mobile-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 9999px !important; background: transparent !important; color: #6F5410 !important; /* Phone: no desktop nav-item fill / ::after bar (shared .suki-mcp-nav-trigger class) */ box-shadow: none !important; overflow: visible !important; } #navbar .suki-mcp-mobile-trigger::after, header .suki-mcp-mobile-trigger::after, nav .suki-mcp-mobile-trigger::after, #navbar .suki-more-mobile-trigger::after, header .suki-more-mobile-trigger::after, nav .suki-more-mobile-trigger::after { content: none !important; display: none !important; } header button[aria-label*="menu" i], nav button[aria-label*="menu" i], #navbar button[aria-label*="menu" i], header button[aria-label*="navigation" i], nav button[aria-label*="navigation" i], #navbar button[aria-label*="navigation" i] { color: #6F5410 !important; } header button[aria-label*="menu" i] svg, nav button[aria-label*="menu" i] svg, #navbar button[aria-label*="menu" i] svg, header button[aria-label*="navigation" i] svg, nav button[aria-label*="navigation" i] svg, #navbar button[aria-label*="navigation" i] svg { color: #6F5410 !important; } html.dark header button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), html.dark nav button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), html.dark #navbar button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), html[data-theme="dark"] header button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), html[data-theme="dark"] nav button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), html[data-theme="dark"] #navbar button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), [data-theme="dark"] header button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), [data-theme="dark"] nav button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), [data-theme="dark"] #navbar button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), html.dark #navbar .suki-mcp-mobile-trigger, html.dark header .suki-mcp-mobile-trigger, html.dark nav .suki-mcp-mobile-trigger, html[data-theme="dark"] #navbar .suki-mcp-mobile-trigger, html[data-theme="dark"] header .suki-mcp-mobile-trigger, html[data-theme="dark"] nav .suki-mcp-mobile-trigger, [data-theme="dark"] #navbar .suki-mcp-mobile-trigger, [data-theme="dark"] header .suki-mcp-mobile-trigger, [data-theme="dark"] nav .suki-mcp-mobile-trigger { color: #fff394 !important; } html.dark header button[aria-label*="menu" i], html.dark nav button[aria-label*="menu" i], html.dark #navbar button[aria-label*="menu" i], html.dark header button[aria-label*="navigation" i], html.dark nav button[aria-label*="navigation" i], html.dark #navbar button[aria-label*="navigation" i], html[data-theme="dark"] header button[aria-label*="menu" i], html[data-theme="dark"] nav button[aria-label*="menu" i], html[data-theme="dark"] #navbar button[aria-label*="menu" i], html[data-theme="dark"] header button[aria-label*="navigation" i], html[data-theme="dark"] nav button[aria-label*="navigation" i], html[data-theme="dark"] #navbar button[aria-label*="navigation" i], [data-theme="dark"] header button[aria-label*="menu" i], [data-theme="dark"] nav button[aria-label*="menu" i], [data-theme="dark"] #navbar button[aria-label*="menu" i], [data-theme="dark"] header button[aria-label*="navigation" i], [data-theme="dark"] nav button[aria-label*="navigation" i], [data-theme="dark"] #navbar button[aria-label*="navigation" i], html.dark header button[aria-label*="menu" i] svg, html.dark nav button[aria-label*="menu" i] svg, html.dark #navbar button[aria-label*="menu" i] svg, html.dark header button[aria-label*="navigation" i] svg, html.dark nav button[aria-label*="navigation" i] svg, html.dark #navbar button[aria-label*="navigation" i] svg, html[data-theme="dark"] header button[aria-label*="menu" i] svg, html[data-theme="dark"] nav button[aria-label*="menu" i] svg, html[data-theme="dark"] #navbar button[aria-label*="menu" i] svg, html[data-theme="dark"] header button[aria-label*="navigation" i] svg, html[data-theme="dark"] nav button[aria-label*="navigation" i] svg, html[data-theme="dark"] #navbar button[aria-label*="navigation" i] svg, [data-theme="dark"] header button[aria-label*="menu" i] svg, [data-theme="dark"] nav button[aria-label*="menu" i] svg, [data-theme="dark"] #navbar button[aria-label*="menu" i] svg, [data-theme="dark"] header button[aria-label*="navigation" i] svg, [data-theme="dark"] nav button[aria-label*="navigation" i] svg, [data-theme="dark"] #navbar button[aria-label*="navigation" i] svg { color: #fff394 !important; } /* * Phone: keep MCP / More icon-only — no circular gray hover/open fill and no * desktop ::after bar (mobile MCP also has .suki-mcp-nav-trigger). * Match desktop selector weight so light/dark hover rules cannot win. */ html:not(.dark):not([data-theme="dark"]) :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover, html:not(.dark):not([data-theme="dark"]) :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"], html:not(.dark):not([data-theme="dark"]) :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:focus-visible, [data-theme="light"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover, [data-theme="light"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"], [data-theme="light"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:focus-visible, html.dark :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover, html.dark :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"], html.dark :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:focus-visible, html[data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover, html[data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"], html[data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:focus-visible, [data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover, [data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"], [data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:focus-visible, #navbar .suki-mcp-mobile-trigger:hover, #navbar .suki-mcp-mobile-trigger[aria-expanded="true"], #navbar .suki-mcp-mobile-trigger:focus, #navbar .suki-mcp-mobile-trigger:focus-visible, header .suki-mcp-mobile-trigger:hover, header .suki-mcp-mobile-trigger[aria-expanded="true"], header .suki-mcp-mobile-trigger:focus, header .suki-mcp-mobile-trigger:focus-visible, nav .suki-mcp-mobile-trigger:hover, nav .suki-mcp-mobile-trigger[aria-expanded="true"], nav .suki-mcp-mobile-trigger:focus, nav .suki-mcp-mobile-trigger:focus-visible { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } html:not(.dark):not([data-theme="dark"]) :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover::after, html:not(.dark):not([data-theme="dark"]) :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"]::after, [data-theme="light"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover::after, [data-theme="light"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"]::after, html.dark :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover::after, html.dark :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"]::after, html[data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover::after, html[data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"]::after, [data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger:hover::after, [data-theme="dark"] :is(#navbar, header, nav) .suki-mcp-nav-trigger.suki-mcp-mobile-trigger[aria-expanded="true"]::after, #navbar .suki-mcp-mobile-trigger:hover::after, #navbar .suki-mcp-mobile-trigger[aria-expanded="true"]::after, header .suki-mcp-mobile-trigger:hover::after, header .suki-mcp-mobile-trigger[aria-expanded="true"]::after, nav .suki-mcp-mobile-trigger:hover::after, nav .suki-mcp-mobile-trigger[aria-expanded="true"]::after { content: none !important; display: none !important; background: transparent !important; background-color: transparent !important; } #navbar .suki-mcp-mobile-trigger .suki-mcp-nav-icon, header .suki-mcp-mobile-trigger .suki-mcp-nav-icon, nav .suki-mcp-mobile-trigger .suki-mcp-nav-icon { width: 21px !important; height: 21px !important; } #navbar .suki-mcp-mobile-trigger .suki-mcp-nav-icon path, header .suki-mcp-mobile-trigger .suki-mcp-nav-icon path, nav .suki-mcp-mobile-trigger .suki-mcp-nav-icon path { stroke-width: 14px !important; } #navbar #assistant-entry, #navbar [data-suki-mobile-assistant-source="true"], #navbar button[aria-label="Toggle assistant panel"], #navbar button[aria-label*="assistant" i], header #assistant-entry, header [data-suki-mobile-assistant-source="true"], header button[aria-label="Toggle assistant panel"], header button[aria-label*="assistant" i], nav #assistant-entry, nav [data-suki-mobile-assistant-source="true"], nav button[aria-label="Toggle assistant panel"], nav button[aria-label*="assistant" i] { display: none !important; } .suki-more-mobile-root { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 3 !important; } #navbar .suki-more-mobile-trigger, header .suki-more-mobile-trigger, nav .suki-more-mobile-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 9999px !important; background: transparent !important; color: #6F5410 !important; } #navbar .suki-more-mobile-trigger:hover, #navbar .suki-more-mobile-trigger[aria-expanded="true"], #navbar .suki-more-mobile-trigger:focus, #navbar .suki-more-mobile-trigger:focus-visible, header .suki-more-mobile-trigger:hover, header .suki-more-mobile-trigger[aria-expanded="true"], header .suki-more-mobile-trigger:focus, header .suki-more-mobile-trigger:focus-visible, nav .suki-more-mobile-trigger:hover, nav .suki-more-mobile-trigger[aria-expanded="true"], nav .suki-more-mobile-trigger:focus, nav .suki-more-mobile-trigger:focus-visible { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } #navbar .suki-more-mobile-icon, header .suki-more-mobile-icon, nav .suki-more-mobile-icon { display: block !important; width: 16px !important; height: 16px !important; } html.dark #navbar .suki-more-mobile-trigger, html.dark header .suki-more-mobile-trigger, html.dark nav .suki-more-mobile-trigger, html[data-theme="dark"] #navbar .suki-more-mobile-trigger, html[data-theme="dark"] header .suki-more-mobile-trigger, html[data-theme="dark"] nav .suki-more-mobile-trigger, [data-theme="dark"] #navbar .suki-more-mobile-trigger, [data-theme="dark"] header .suki-more-mobile-trigger, [data-theme="dark"] nav .suki-more-mobile-trigger { color: #fff394 !important; } /* Light mode home charcoal navbar: cream MCP + 3-dot More (same as dark). */ html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .suki-mcp-mobile-trigger, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) header .suki-mcp-mobile-trigger, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) nav .suki-mcp-mobile-trigger, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .suki-mcp-mobile-trigger .suki-mcp-nav-icon, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) header .suki-mcp-mobile-trigger .suki-mcp-nav-icon, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) nav .suki-mcp-mobile-trigger .suki-mcp-nav-icon, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .suki-mcp-mobile-trigger, [data-theme="light"] body:has([data-hp-home-hero]) header .suki-mcp-mobile-trigger, [data-theme="light"] body:has([data-hp-home-hero]) nav .suki-mcp-mobile-trigger, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .suki-mcp-mobile-trigger .suki-mcp-nav-icon, [data-theme="light"] body:has([data-hp-home-hero]) header .suki-mcp-mobile-trigger .suki-mcp-nav-icon, [data-theme="light"] body:has([data-hp-home-hero]) nav .suki-mcp-mobile-trigger .suki-mcp-nav-icon, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar .suki-more-mobile-trigger, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) header .suki-more-mobile-trigger, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) nav .suki-more-mobile-trigger, [data-theme="light"] body:has([data-hp-home-hero]) #navbar .suki-more-mobile-trigger, [data-theme="light"] body:has([data-hp-home-hero]) header .suki-more-mobile-trigger, [data-theme="light"] body:has([data-hp-home-hero]) nav .suki-more-mobile-trigger, html:not(.dark):not([data-theme="dark"]) body:has([data-hp-home-hero]) #navbar button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]), [data-theme="light"] body:has([data-hp-home-hero]) #navbar button:not(.suki-mcp-mobile-trigger):not([data-suki-mobile-assistant-source="true"]):not([aria-label*="search" i]):has(+ button[aria-label="More actions"]) { color: #fff394 !important; stroke: #fff394 !important; } } /* Match Mintlify .nav-tabs-item chevron (SDKs / APIs): 16×16, path points right; closed = down, hover/open = up */ .suki-mcp-nav-caret, .suki-more-nav-caret { flex-shrink: 0 !important; display: block !important; width: 16px !important; height: 16px !important; overflow: visible !important; transition: color 0.2s ease, transform 0.2s ease, rotate 0.2s ease !important; color: #9ca3af !important; transform: none !important; rotate: 90deg !important; } html.dark .suki-mcp-nav-caret, html.dark .suki-more-nav-caret, html[data-theme="dark"] .suki-mcp-nav-caret, html[data-theme="dark"] .suki-more-nav-caret, [data-theme="dark"] .suki-mcp-nav-caret, [data-theme="dark"] .suki-more-nav-caret { color: #4b5563 !important; } :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover .suki-mcp-nav-caret, :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover .suki-more-nav-caret, :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"] .suki-mcp-nav-caret, :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"] .suki-more-nav-caret, :is(#navbar, #suki-nav-actions-host) li.suki-mcp-nav-root:hover .suki-mcp-nav-caret, :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover .suki-more-nav-caret { color: #4b5563 !important; transform: none !important; rotate: -90deg !important; } html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover .suki-mcp-nav-caret, html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover .suki-more-nav-caret, html.dark :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"] .suki-mcp-nav-caret, html.dark :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"] .suki-more-nav-caret, html.dark :is(#navbar, #suki-nav-actions-host) li.suki-mcp-nav-root:hover .suki-mcp-nav-caret, html.dark :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover .suki-more-nav-caret, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover .suki-mcp-nav-caret, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover .suki-more-nav-caret, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"] .suki-mcp-nav-caret, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"] .suki-more-nav-caret, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-mcp-nav-root:hover .suki-mcp-nav-caret, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover .suki-more-nav-caret, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger:hover .suki-mcp-nav-caret, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger:hover .suki-more-nav-caret, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-mcp-nav-trigger[aria-expanded="true"] .suki-mcp-nav-caret, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger[aria-expanded="true"] .suki-more-nav-caret, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-mcp-nav-root:hover .suki-mcp-nav-caret, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover .suki-more-nav-caret { color: var(--suki-dark-text-body) !important; transform: none !important; rotate: -90deg !important; } .suki-mcp-nav-panel { position: fixed !important; z-index: 10002 !important; pointer-events: auto !important; box-sizing: border-box !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; /* nav change: Suki.ai dropdown chrome */ border-radius: 0 !important; border: none !important; background: #ffffff !important; box-shadow: none !important; } html.dark .suki-mcp-nav-panel, html[data-theme="dark"] .suki-mcp-nav-panel, [data-theme="dark"] .suki-mcp-nav-panel { border-color: transparent !important; background: #0a0a0a !important; box-shadow: none !important; } .suki-mcp-nav-panel[hidden] { display: none !important; } @media (max-width: 1023px) { html[data-suki-mcp-mobile-open="1"] { overscroll-behavior: none !important; } html[data-suki-mcp-mobile-open="1"] body { overscroll-behavior: none !important; touch-action: none !important; } html[data-suki-mcp-mobile-open="1"] .suki-mcp-nav-panel, html[data-suki-mcp-mobile-open="1"] .suki-mcp-nav-panel * { touch-action: pan-y !important; } } .suki-mcp-nav-panel-inner { overflow-y: auto !important; overflow-x: hidden !important; /* nav change: full-bleed rows (Suki dividers edge-to-edge) */ padding: 0 !important; -webkit-overflow-scrolling: touch !important; } .suki-mcp-nav-header-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 16px 16px 8px !important; border-bottom: 2px solid #d1d1d1 !important; position: sticky !important; top: 0 !important; z-index: 2 !important; background: #ffffff !important; } html.dark .suki-mcp-nav-header-row, html[data-theme="dark"] .suki-mcp-nav-header-row, [data-theme="dark"] .suki-mcp-nav-header-row { border-bottom-color: rgba(255, 255, 255, 0.18) !important; background: #0a0a0a !important; } .suki-mcp-nav-panel-title { display: block !important; font-size: 15px !important; font-weight: 600 !important; color: #111827 !important; margin: 0 !important; } .suki-mcp-nav-close { display: none !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 32px !important; height: 32px !important; margin: -6px -6px -6px 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #111827 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } .suki-mcp-nav-close:hover, .suki-mcp-nav-close:focus-visible { background: transparent !important; outline: none !important; } .suki-mcp-nav-close svg { display: block !important; width: 22px !important; height: 22px !important; } html.dark .suki-mcp-nav-close, html[data-theme="dark"] .suki-mcp-nav-close, [data-theme="dark"] .suki-mcp-nav-close { color: var(--suki-dark-text) !important; } html.dark .suki-mcp-nav-close:hover, html.dark .suki-mcp-nav-close:focus-visible, html[data-theme="dark"] .suki-mcp-nav-close:hover, html[data-theme="dark"] .suki-mcp-nav-close:focus-visible, [data-theme="dark"] .suki-mcp-nav-close:hover, [data-theme="dark"] .suki-mcp-nav-close:focus-visible { background: transparent !important; } @media (max-width: 1023px) { .suki-mcp-nav-close { display: inline-flex !important; touch-action: manipulation !important; } } html.dark .suki-mcp-nav-panel-title, html[data-theme="dark"] .suki-mcp-nav-panel-title, [data-theme="dark"] .suki-mcp-nav-panel-title { color: var(--suki-dark-text) !important; } .suki-mcp-nav-intro { font-size: 13px !important; line-height: 1.5 !important; color: #6b7280 !important; margin: 0 !important; padding: 12px 16px 10px !important; } html.dark .suki-mcp-nav-intro, html[data-theme="dark"] .suki-mcp-nav-intro, [data-theme="dark"] .suki-mcp-nav-intro { color: #a3a3a3 !important; } .suki-mcp-nav-note { display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 12px 16px 16px !important; padding: 10px 12px !important; border-radius: 0 !important; border: 1px solid #dbeafe !important; background: #eff6ff !important; } .suki-mcp-nav-note-text { font-size: 12px !important; line-height: 1.45 !important; color: #1e3a8a !important; margin: 0 !important; } html.dark .suki-mcp-nav-note, html[data-theme="dark"] .suki-mcp-nav-note, [data-theme="dark"] .suki-mcp-nav-note { border-color: rgba(96, 165, 250, 0.28) !important; background: rgba(30, 58, 138, 0.22) !important; } html.dark .suki-mcp-nav-note-text, html[data-theme="dark"] .suki-mcp-nav-note-text, [data-theme="dark"] .suki-mcp-nav-note-text { color: #dbeafe !important; } .suki-mcp-nav-actions { display: flex !important; flex-direction: column !important; /* nav change: flush rows like Suki submenu (dividers on items) */ gap: 0 !important; margin: 0 0 8px !important; padding: 0 !important; } .suki-mcp-nav-action { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 12px 16px !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important; /* nav change: Suki submenu row dividers */ border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid #d1d1d1 !important; background: transparent !important; color: inherit !important; text-align: left !important; text-decoration: none !important; cursor: pointer !important; font: inherit !important; -webkit-tap-highlight-color: transparent !important; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* nav change: Suki hover thick separator (after:h-2=2px → hover:after:bottom-0) */ .suki-mcp-nav-action::after { content: "" !important; position: absolute !important; left: 0 !important; width: 100% !important; height: 2px !important; bottom: -2px !important; background-color: transparent !important; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; z-index: 10 !important; } .suki-mcp-nav-action:last-child { border-bottom: none !important; } .suki-mcp-nav-action:last-child::after { height: 4px !important; bottom: -4px !important; } html.dark .suki-mcp-nav-action, html[data-theme="dark"] .suki-mcp-nav-action, [data-theme="dark"] .suki-mcp-nav-action { border-bottom-color: rgba(255, 255, 255, 0.18) !important; } .suki-mcp-nav-action:hover, .suki-mcp-nav-action:focus-visible { /* nav change: Suki hover fill */ background: rgba(27, 27, 27, 0.05) !important; outline: none !important; } .suki-mcp-nav-action:hover::after, .suki-mcp-nav-action:focus-visible::after { bottom: 0 !important; background-color: #d1d1d1 !important; } .suki-mcp-nav-action:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: 1px !important; } html.dark .suki-mcp-nav-action:hover, html.dark .suki-mcp-nav-action:focus-visible, html[data-theme="dark"] .suki-mcp-nav-action:hover, html[data-theme="dark"] .suki-mcp-nav-action:focus-visible, [data-theme="dark"] .suki-mcp-nav-action:hover, [data-theme="dark"] .suki-mcp-nav-action:focus-visible { background: rgba(255, 255, 255, 0.08) !important; } html.dark .suki-mcp-nav-action:hover::after, html.dark .suki-mcp-nav-action:focus-visible::after, html[data-theme="dark"] .suki-mcp-nav-action:hover::after, html[data-theme="dark"] .suki-mcp-nav-action:focus-visible::after, [data-theme="dark"] .suki-mcp-nav-action:hover::after, [data-theme="dark"] .suki-mcp-nav-action:focus-visible::after { background-color: rgba(255, 255, 255, 0.35) !important; } html.dark .suki-mcp-nav-action:focus-visible, html[data-theme="dark"] .suki-mcp-nav-action:focus-visible, [data-theme="dark"] .suki-mcp-nav-action:focus-visible { outline-color: #ffe148 !important; } .suki-mcp-nav-action-icon { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; border: 1px solid #e5e7eb !important; background: #f9fafb !important; color: #6f5410 !important; overflow: hidden !important; } html.dark .suki-mcp-nav-action-icon, html[data-theme="dark"] .suki-mcp-nav-action-icon, [data-theme="dark"] .suki-mcp-nav-action-icon { border-color: rgba(255, 255, 255, 0.12) !important; background: #171717 !important; color: #ffe148 !important; } .suki-mcp-nav-action-icon svg, .suki-mcp-nav-logo { display: block !important; width: 18px !important; height: 18px !important; object-fit: contain !important; } .suki-mcp-nav-action-icon--mcp { color: #6f5410 !important; } html.dark .suki-mcp-nav-action-icon--mcp, html[data-theme="dark"] .suki-mcp-nav-action-icon--mcp, [data-theme="dark"] .suki-mcp-nav-action-icon--mcp { color: #ffe148 !important; } .suki-mcp-nav-logo--mcp { display: block !important; width: 18px !important; height: 18px !important; } /* Black / near-black brand marks need invert in dark mode */ html.dark .suki-mcp-nav-logo--mono, html[data-theme="dark"] .suki-mcp-nav-logo--mono, [data-theme="dark"] .suki-mcp-nav-logo--mono { filter: invert(1) !important; } .suki-mcp-nav-action-text { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .suki-mcp-nav-action-title-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 8px !important; } .suki-mcp-nav-action-title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #111827 !important; } html.dark .suki-mcp-nav-action-title, html[data-theme="dark"] .suki-mcp-nav-action-title, [data-theme="dark"] .suki-mcp-nav-action-title { color: var(--suki-dark-text) !important; } .suki-mcp-nav-action-desc { font-size: 12px !important; line-height: 1.35 !important; color: #6b7280 !important; } html.dark .suki-mcp-nav-action-desc, html[data-theme="dark"] .suki-mcp-nav-action-desc, [data-theme="dark"] .suki-mcp-nav-action-desc { color: #a3a3a3 !important; } .suki-mcp-nav-action-status { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-top: 4px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #15803d !important; } .suki-mcp-nav-action-status[hidden] { display: none !important; } .suki-mcp-nav-action-check { flex: 0 0 auto !important; display: block !important; box-sizing: border-box !important; width: 22px !important; height: 22px !important; padding: 4px !important; border-radius: 6px !important; border: 1px solid #e5e7eb !important; background: #f9fafb !important; color: #15803d !important; } html.dark .suki-mcp-nav-action-check, html[data-theme="dark"] .suki-mcp-nav-action-check, [data-theme="dark"] .suki-mcp-nav-action-check { border-color: rgba(255, 255, 255, 0.12) !important; background: #171717 !important; color: #4ade80 !important; } html.dark .suki-mcp-nav-action-status, html[data-theme="dark"] .suki-mcp-nav-action-status, [data-theme="dark"] .suki-mcp-nav-action-status { color: #4ade80 !important; } .suki-mcp-nav-action--copied .suki-mcp-nav-action-desc { display: none !important; } .suki-mcp-nav-badge { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 6px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; background: #6f5410 !important; color: #ffffff !important; } html.dark .suki-mcp-nav-badge, html[data-theme="dark"] .suki-mcp-nav-badge, [data-theme="dark"] .suki-mcp-nav-badge { background: #ffe148 !important; color: #000000 !important; } .suki-mcp-nav-action-trailing { flex: 0 0 auto !important; align-self: center !important; color: #9ca3af !important; } html.dark .suki-mcp-nav-action-trailing, html[data-theme="dark"] .suki-mcp-nav-action-trailing, [data-theme="dark"] .suki-mcp-nav-action-trailing { color: #6b7280 !important; } @media (max-width: 640px) { .suki-mcp-nav-action { min-height: 56px !important; padding: 12px !important; gap: 10px !important; } .suki-mcp-nav-action-icon { width: 34px !important; height: 34px !important; } .suki-mcp-nav-action-title { font-size: 13.5px !important; } } .suki-mcp-nav-footer { /* Space below Setup Guide button so it is not flush with the panel edge */ padding: 12px 16px 16px !important; margin-top: 4px !important; border-top: 1px solid #e5e7eb !important; display: flex !important; justify-content: stretch !important; box-sizing: border-box !important; } .suki-mcp-nav-doc-btn { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; text-align: center !important; } html.dark .suki-mcp-nav-footer, html[data-theme="dark"] .suki-mcp-nav-footer, [data-theme="dark"] .suki-mcp-nav-footer { border-top-color: rgba(255, 255, 255, 0.1) !important; } @media (max-width: 640px) { /* Desktop MCP root is not mounted on phone; keep panel full-bleed only. */ .suki-mcp-nav-panel { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; } } /* ===== styles/06-navbar-more-from-suki.css ===== */ /* ======================================== NAVBAR — More from Suki dropdown (scripts/more-from-suki-navbar-dropdown.js) ======================================== */ #navbar li[data-suki-more-legacy-hidden] { display: none !important; } /* * More from Suki hosts menu links to status + support URLs inside the panel. * Global :has(a[href*="status-platform"]) / support pill rules must not style this

. */ nav li.suki-more-from-suki-root, header li.suki-more-from-suki-root, :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root, #suki-nav-actions-host li.suki-more-from-suki-root, nav li.navbar-link.suki-more-from-suki-root, header li.navbar-link.suki-more-from-suki-root, :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root, #suki-nav-actions-host li.navbar-link.suki-more-from-suki-root { display: flex !important; align-items: center !important; height: auto !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; list-style: none !important; position: relative !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; color: inherit !important; } html.dark nav li.suki-more-from-suki-root, html.dark header li.suki-more-from-suki-root, html.dark :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root, html.dark nav li.navbar-link.suki-more-from-suki-root, html.dark header li.navbar-link.suki-more-from-suki-root, html.dark :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root, html[data-theme="dark"] nav li.suki-more-from-suki-root, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root { background: transparent !important; border: none !important; color: inherit !important; } nav li.suki-more-from-suki-root:hover, header li.suki-more-from-suki-root:hover, :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover, nav li.navbar-link.suki-more-from-suki-root:hover, :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root:hover, html.dark :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover { background: transparent !important; border: none !important; } .suki-more-nav-trigger { outline: none !important; } .suki-more-nav-trigger[aria-expanded="true"] { border: none !important; box-shadow: none !important; } /* Mintlify / navbar defaults sometimes add ring on li.navbar-link */ :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root, :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root { box-shadow: none !important; outline: none !important; } :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root .suki-more-nav-trigger, :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root .suki-more-nav-trigger { box-shadow: none !important; outline: none !important; border: none !important; } .suki-more-nav-panel { position: fixed !important; z-index: 10002 !important; pointer-events: auto !important; box-sizing: border-box !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; /* nav change: Suki.ai dropdown chrome */ border-radius: 0 !important; border: none !important; background: #ffffff !important; box-shadow: none !important; } html.dark .suki-more-nav-panel, html[data-theme="dark"] .suki-more-nav-panel, [data-theme="dark"] .suki-more-nav-panel { border-color: transparent !important; background: #0a0a0a !important; box-shadow: none !important; } .suki-more-nav-panel[hidden] { display: none !important; } .suki-more-nav-panel-inner { overflow-y: auto !important; overflow-x: hidden !important; /* nav change: full-bleed rows */ padding: 0 !important; -webkit-overflow-scrolling: touch !important; } .suki-more-nav-header-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 16px 16px 8px !important; border-bottom: 2px solid #d1d1d1 !important; position: sticky !important; top: 0 !important; z-index: 2 !important; background: #ffffff !important; } html.dark .suki-more-nav-header-row, html[data-theme="dark"] .suki-more-nav-header-row, [data-theme="dark"] .suki-more-nav-header-row { border-bottom-color: rgba(255, 255, 255, 0.18) !important; background: #0a0a0a !important; } .suki-more-nav-panel-title { display: block !important; font-size: 15px !important; font-weight: 600 !important; color: #111827 !important; margin: 0 !important; } html.dark .suki-more-nav-panel-title, html[data-theme="dark"] .suki-more-nav-panel-title, [data-theme="dark"] .suki-more-nav-panel-title { color: var(--suki-dark-text) !important; } .suki-more-nav-close { display: none !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 32px !important; height: 32px !important; margin: -6px -6px -6px 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #111827 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } .suki-more-nav-close:hover, .suki-more-nav-close:focus-visible { background: transparent !important; outline: none !important; } .suki-more-nav-close svg { display: block !important; width: 22px !important; height: 22px !important; } html.dark .suki-more-nav-close, html[data-theme="dark"] .suki-more-nav-close, [data-theme="dark"] .suki-more-nav-close { color: var(--suki-dark-text) !important; } @media (max-width: 1023px) { .suki-more-nav-close { display: inline-flex !important; touch-action: manipulation !important; } } .suki-more-nav-intro { font-size: 13px !important; line-height: 1.5 !important; color: #6b7280 !important; margin: 0 !important; /* Match action-row horizontal inset (panel-inner is 0 for full-bleed dividers) */ padding: 12px 16px 10px !important; } html.dark .suki-more-nav-intro, html[data-theme="dark"] .suki-more-nav-intro, [data-theme="dark"] .suki-more-nav-intro { color: #a3a3a3 !important; } .suki-more-nav-actions { display: flex !important; flex-direction: column !important; /* nav change: flush Suki submenu rows */ gap: 0 !important; margin: 0 0 8px !important; padding: 0 !important; } .suki-more-nav-action { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 12px 16px !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important; /* nav change: Suki submenu row dividers */ border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid #d1d1d1 !important; background: transparent !important; color: inherit !important; text-align: left !important; text-decoration: none !important; cursor: pointer !important; font: inherit !important; -webkit-tap-highlight-color: transparent !important; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* nav change: Suki hover thick separator (after:h-2=2px → hover:after:bottom-0) */ .suki-more-nav-action::after { content: "" !important; position: absolute !important; left: 0 !important; width: 100% !important; height: 2px !important; bottom: -2px !important; background-color: transparent !important; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; z-index: 10 !important; } .suki-more-nav-action:last-child { border-bottom: none !important; } .suki-more-nav-action:last-child::after { height: 4px !important; bottom: -4px !important; } html.dark .suki-more-nav-action, html[data-theme="dark"] .suki-more-nav-action, [data-theme="dark"] .suki-more-nav-action { border-bottom-color: rgba(255, 255, 255, 0.18) !important; } .suki-more-nav-action:hover, .suki-more-nav-action:focus-visible { background: rgba(27, 27, 27, 0.05) !important; outline: none !important; } .suki-more-nav-action:hover::after, .suki-more-nav-action:focus-visible::after { bottom: 0 !important; background-color: #d1d1d1 !important; } .suki-more-nav-action:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: 1px !important; } html.dark .suki-more-nav-action:hover::after, html.dark .suki-more-nav-action:focus-visible::after, html[data-theme="dark"] .suki-more-nav-action:hover::after, html[data-theme="dark"] .suki-more-nav-action:focus-visible::after, [data-theme="dark"] .suki-more-nav-action:hover::after, [data-theme="dark"] .suki-more-nav-action:focus-visible::after { background-color: rgba(255, 255, 255, 0.35) !important; } html.dark .suki-more-nav-action:hover, html.dark .suki-more-nav-action:focus-visible, html[data-theme="dark"] .suki-more-nav-action:hover, html[data-theme="dark"] .suki-more-nav-action:focus-visible, [data-theme="dark"] .suki-more-nav-action:hover, [data-theme="dark"] .suki-more-nav-action:focus-visible { background: rgba(255, 255, 255, 0.08) !important; } html.dark .suki-more-nav-action:focus-visible, html[data-theme="dark"] .suki-more-nav-action:focus-visible, [data-theme="dark"] .suki-more-nav-action:focus-visible { outline-color: #ffe148 !important; } .suki-more-nav-action-icon { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; border: 1px solid #e5e7eb !important; background: #f9fafb !important; color: #6f5410 !important; overflow: hidden !important; } html.dark .suki-more-nav-action-icon, html[data-theme="dark"] .suki-more-nav-action-icon, [data-theme="dark"] .suki-more-nav-action-icon { border-color: rgba(255, 255, 255, 0.12) !important; background: #171717 !important; color: #ffe148 !important; } .suki-more-nav-action-icon svg { display: block !important; width: 18px !important; height: 18px !important; } .suki-more-nav-action-icon svg.suki-more-nav-logo--suki, .suki-more-nav-logo--suki { display: block !important; width: 22px !important; height: 11px !important; object-fit: contain !important; } .suki-more-nav-action-text { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .suki-more-nav-action-title-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } .suki-more-nav-action-title { font-size: 14px !important; font-weight: 600 !important; color: #111827 !important; line-height: 1.3 !important; } html.dark .suki-more-nav-action-title, html[data-theme="dark"] .suki-more-nav-action-title, [data-theme="dark"] .suki-more-nav-action-title { color: var(--suki-dark-text) !important; } .suki-more-nav-action-desc { font-size: 12px !important; font-weight: 400 !important; color: #6b7280 !important; line-height: 1.4 !important; } html.dark .suki-more-nav-action-desc, html[data-theme="dark"] .suki-more-nav-action-desc, [data-theme="dark"] .suki-more-nav-action-desc { color: #a3a3a3 !important; } .suki-more-nav-badge { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 6px !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important; background: #F3F4F6 !important; color: #2d2f2f !important; border: 0.5px solid #f3f5f7 !important; } html.dark .suki-more-nav-badge, html[data-theme="dark"] .suki-more-nav-badge, [data-theme="dark"] .suki-more-nav-badge { background-color: #17223b !important; color: #fff394 !important; border: 0.5px solid #292a2b !important; } .suki-more-nav-action-trailing { flex: 0 0 auto !important; align-self: center !important; color: #9ca3af !important; } html.dark .suki-more-nav-action-trailing, html[data-theme="dark"] .suki-more-nav-action-trailing, [data-theme="dark"] .suki-more-nav-action-trailing { color: #6b7280 !important; } .suki-more-nav-section { margin: 0 0 4px !important; } .suki-more-nav-section-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 8px !important; padding: 8px 16px 0 !important; } .suki-more-nav-section-title { font-size: 13px !important; font-weight: 700 !important; color: #111827 !important; line-height: 1.3 !important; margin: 0 0 8px !important; } html.dark .suki-more-nav-section-title, html[data-theme="dark"] .suki-more-nav-section-title, [data-theme="dark"] .suki-more-nav-section-title { color: var(--suki-dark-text) !important; } .suki-more-nav-section .suki-more-nav-section-title { margin-bottom: 0 !important; } .suki-more-nav-groups { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 20px !important; /* Resources / Legal titles + links must not sit on the panel edge */ padding: 8px 16px 4px !important; box-sizing: border-box !important; } .suki-more-nav-compact-list { display: flex !important; flex-direction: column !important; gap: 2px !important; } .suki-more-nav-compact-link { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-height: 36px !important; /* Horizontal inset comes from .suki-more-nav-groups (keep label aligned with titles) */ padding: 8px 0 !important; border-radius: 8px !important; text-decoration: none !important; color: #4b5563 !important; transition: background 0.15s ease, color 0.15s ease !important; } .suki-more-nav-compact-link--icon { justify-content: flex-start !important; } .suki-more-nav-compact-icon { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; color: currentColor !important; } .suki-more-nav-compact-icon svg { display: block !important; width: 16px !important; height: 16px !important; } .suki-more-nav-compact-link--icon .suki-more-nav-compact-label { flex: 1 1 auto !important; min-width: 0 !important; } .suki-more-nav-compact-link:hover, .suki-more-nav-compact-link:focus-visible { background: #f3f4f6 !important; color: #6f5410 !important; outline: none !important; } .suki-more-nav-compact-label { font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; } .suki-more-nav-compact-link .suki-more-nav-action-trailing { width: 14px !important; height: 14px !important; margin-left: auto !important; } html.dark .suki-more-nav-compact-link, html[data-theme="dark"] .suki-more-nav-compact-link, [data-theme="dark"] .suki-more-nav-compact-link { color: #9ca3af !important; } html.dark .suki-more-nav-compact-link:hover, html[data-theme="dark"] .suki-more-nav-compact-link:hover, [data-theme="dark"] .suki-more-nav-compact-link:hover, html.dark .suki-more-nav-compact-link:focus-visible, html[data-theme="dark"] .suki-more-nav-compact-link:focus-visible, [data-theme="dark"] .suki-more-nav-compact-link:focus-visible { background: rgba(255, 255, 255, 0.06) !important; color: #ffe148 !important; } .suki-more-nav-socials { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 8px 16px 16px !important; box-sizing: border-box !important; } .suki-more-nav-social-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 8px !important; text-decoration: none !important; color: #111827 !important; transition: background 0.15s ease, color 0.15s ease !important; } .suki-more-nav-social-link:hover, .suki-more-nav-social-link:focus-visible { background: #f3f4f6 !important; color: #6f5410 !important; outline: none !important; } .suki-more-nav-social-icon { display: block !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } html.dark .suki-more-nav-social-link, html[data-theme="dark"] .suki-more-nav-social-link, [data-theme="dark"] .suki-more-nav-social-link { color: var(--suki-dark-text-body) !important; } html.dark .suki-more-nav-social-link:hover, html[data-theme="dark"] .suki-more-nav-social-link:hover, [data-theme="dark"] .suki-more-nav-social-link:hover, html.dark .suki-more-nav-social-link:focus-visible, html[data-theme="dark"] .suki-more-nav-social-link:focus-visible, [data-theme="dark"] .suki-more-nav-social-link:focus-visible { background: rgba(255, 255, 255, 0.08) !important; color: #ffe148 !important; } @media (max-width: 640px) { .suki-more-nav-action { min-height: 56px !important; padding: 12px !important; gap: 10px !important; } .suki-more-nav-action-icon { width: 34px !important; height: 34px !important; } .suki-more-nav-action-title { font-size: 13.5px !important; } .suki-more-nav-groups { grid-template-columns: 1fr !important; gap: 12px !important; } .suki-more-nav-panel { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; } } /* Phone only: Mintlify "More actions" sheet (empty navbar.links) — same panel as desktop dropdown */ @media (max-width: 1023px) { /* Mintlify panel uses float-right; without this the box stays ~92px tall and clips content */ div[role="dialog"].lg\:hidden .suki-more-mobile-sheet-panel, div[role="dialog"].lg\:hidden [id^="headlessui-dialog-panel"] { float: none !important; display: block !important; width: min(20rem, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; max-height: min(85dvh, calc(100dvh - 1rem)) !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; margin-left: auto !important; margin-right: 0.5rem !important; box-sizing: border-box !important; } div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav { width: 100% !important; overflow: visible !important; } div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-panel-inner { position: static !important; width: 100% !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; /* Clear Mintlify close (absolute top-5 right-5, 32px); keep 16px side inset for copy */ padding: 2.75rem 16px 16px !important; } /* Groups/socials already pad 16px — avoid double inset inside the mobile sheet */ div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-groups, div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-socials, div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-intro, div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-section-heading { padding-left: 0 !important; padding-right: 0 !important; } div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-action { /* Sheet already has 16px; keep row text aligned with Resources/Legal */ padding-left: 0 !important; padding-right: 0 !important; } div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-close { display: none !important; } div[role="dialog"].lg\:hidden .suki-more-nav-groups { grid-template-columns: 1fr !important; } html[data-suki-more-nav-open="1"] { overscroll-behavior: none !important; } html[data-suki-more-nav-open="1"] body { overscroll-behavior: none !important; touch-action: none !important; } html[data-suki-more-nav-open="1"] .suki-more-nav-panel, html[data-suki-more-nav-open="1"] .suki-more-nav-panel * { touch-action: pan-y !important; } } .suki-more-nav-backdrop { position: fixed !important; inset: 0 !important; z-index: 10001 !important; background: rgba(15, 23, 42, 0.28) !important; } .suki-more-nav-backdrop[hidden] { display: none !important; } html.dark .suki-more-nav-backdrop, html[data-theme="dark"] .suki-more-nav-backdrop, [data-theme="dark"] .suki-more-nav-backdrop { background: rgba(10, 10, 10, 0.82) !important; } /* Tables — simple branded tables (cream header, row lines only; no outer border or column lines) */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 28px 0; border-radius: 0; overflow: visible; border: none; box-shadow: none; background: #ffffff; } html.dark table, [data-theme="dark"] table { background: #0d0d0d; border: none; box-shadow: none; border-radius: 0; overflow: visible; } /* Table Header */ table thead { background: #FFFADE; } html.dark table thead, [data-theme="dark"] table thead { background: #1c1b19; } table thead tr th { padding: 12px 16px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--suki-light-text) !important; text-align: left !important; border-bottom: 1px solid #b0aea8 !important; border-right: none !important; } html.dark table thead tr th, [data-theme="dark"] table thead tr th { background-color: #1c1b19 !important; color: #ffe148 !important; border-bottom-color: rgba(255, 255, 255, 0.22) !important; } table thead tr th:first-child { min-width: 140px; } table tbody tr td:first-child { min-width: 140px; font-weight: 600 !important; color: var(--suki-light-text-body) !important; } html.dark table tbody tr td:first-child, [data-theme="dark"] table tbody tr td:first-child { color: #d1cec8 !important; } /* Table Body */ table tbody tr { background: #ffffff; transition: background 0.15s ease; } html.dark table tbody tr, [data-theme="dark"] table tbody tr { background: #0d0d0d; } table tbody tr:hover { background: var(--suki-table-row-hover-bg) !important; } html.dark table tbody tr:hover, [data-theme="dark"] table tbody tr:hover { background: var(--suki-table-row-hover-bg) !important; } table tbody tr td { padding: 12px 16px !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--suki-light-text-body) !important; border-bottom: 1px solid #b0aea8 !important; border-right: none !important; text-align: left !important; vertical-align: top !important; background: transparent !important; } html.dark table tbody tr td, [data-theme="dark"] table tbody tr td { color: #e8e6e3 !important; border-bottom-color: rgba(255, 255, 255, 0.18) !important; } /* Last row - no border */ table tbody tr:last-child td { border-bottom: none !important; } /* Responsive Table */ @media (max-width: 768px) { table { font-size: 12px; } table thead tr th, table tbody tr td { padding: 10px 12px !important; } table thead tr th:first-child, table tbody tr td:first-child { min-width: 110px; } } /* * Mermaid (Mintlify): center diagram in the content column. Flex column + align-items keeps * SVG and inner wrappers centered without clipping; max-width preserves responsive scaling. */ #content-area .mermaid { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; margin: 24px auto; box-sizing: border-box; } /* * Mermaid loading: circular spinner while Mintlify has mounted the host but not the SVG yet. * CSS-only (:has) — no JS DOM injection into Mintlify’s React mermaid tree. * Do not use .mermaid-loading / .mermaid-container (Docs-Bot isolation). */ @keyframes suki-mermaid-spin { to { transform: rotate(360deg); } } #content-area [data-component-name="mermaid-container"]:not(:has(svg)), #content-area .group\/mermaid:not(:has(svg)) { box-sizing: border-box; min-height: 7.5rem; position: relative; } /* Hide raw Mermaid source flash until SVG exists; never touch hosts that already have SVG */ #content-area [data-component-name="mermaid-container"]:not(:has(svg)) > .mermaid, #content-area .group\/mermaid:not(:has(svg)) > .mermaid { opacity: 0; pointer-events: none; } #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, #content-area .group\/mermaid:not(:has(svg))::before { animation: suki-mermaid-spin 0.7s linear infinite; border: 2.5px solid rgba(28, 27, 25, 0.14); border-radius: 50%; border-top-color: #6f5410; box-sizing: border-box; content: ""; display: block; height: 1.75rem; left: 50%; margin: -0.875rem 0 0 -0.875rem; position: absolute; top: 50%; width: 1.75rem; z-index: 1; } html.dark #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, html.dark #content-area .group\/mermaid:not(:has(svg))::before, [data-theme="dark"] #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, [data-theme="dark"] #content-area .group\/mermaid:not(:has(svg))::before { border-color: rgba(255, 255, 255, 0.16); border-top-color: #ffe148; } @media (prefers-reduced-motion: reduce) { #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, #content-area .group\/mermaid:not(:has(svg))::before { animation: none; } } @media print { #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, #content-area .group\/mermaid:not(:has(svg))::before { display: none !important; } #content-area [data-component-name="mermaid-container"]:not(:has(svg)) > .mermaid, #content-area .group\/mermaid:not(:has(svg)) > .mermaid { opacity: 1 !important; pointer-events: auto !important; } } #content-area .mermaid svg, #content-area svg.mermaid { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } /* * Mermaid theme contrast: * - Light: sequence message lines/labels use dark #111827 (readable on white page). * - Dark: those same elements use brand #FFE148 (readable on dark page). * Flowchart edges stay brand yellow in both modes. Node/actor label text on yellow * fills stays dark. */ html:not(.dark) #content-area .mermaid .messageLine0, html:not(.dark) #content-area .mermaid .messageLine1, html:not(.dark) #content-area .mermaid line.messageLine0, html:not(.dark) #content-area .mermaid line.messageLine1, html[data-theme='light'] #content-area .mermaid .messageLine0, html[data-theme='light'] #content-area .mermaid .messageLine1, [data-theme='light'] #content-area .mermaid .messageLine0, [data-theme='light'] #content-area .mermaid .messageLine1 { stroke: #111827 !important; } html:not(.dark) #content-area .mermaid .messageText, html[data-theme='light'] #content-area .mermaid .messageText, [data-theme='light'] #content-area .mermaid .messageText { fill: #111827 !important; color: #111827 !important; } html:not(.dark) #content-area .mermaid marker path, html[data-theme='light'] #content-area .mermaid marker path, [data-theme='light'] #content-area .mermaid marker path { fill: #111827 !important; stroke: #111827 !important; } html.dark #content-area .mermaid .messageLine0, html.dark #content-area .mermaid .messageLine1, html.dark #content-area .mermaid line.messageLine0, html.dark #content-area .mermaid line.messageLine1, html[data-theme='dark'] #content-area .mermaid .messageLine0, html[data-theme='dark'] #content-area .mermaid .messageLine1, [data-theme='dark'] #content-area .mermaid .messageLine0, [data-theme='dark'] #content-area .mermaid .messageLine1 { stroke: #FFE148 !important; } html.dark #content-area .mermaid .messageText, html[data-theme='dark'] #content-area .mermaid .messageText, [data-theme='dark'] #content-area .mermaid .messageText { fill: #FFE148 !important; color: #FFE148 !important; } html.dark #content-area .mermaid .flowchart-link, html.dark #content-area .mermaid .edgePath path, html.dark #content-area .mermaid path.path, html.dark #content-area .mermaid .arrowMarkerPath, html.dark #content-area .mermaid .arrowheadPath, html.dark #content-area .mermaid marker path, html[data-theme='dark'] #content-area .mermaid .flowchart-link, html[data-theme='dark'] #content-area .mermaid .edgePath path, html[data-theme='dark'] #content-area .mermaid path.path, html[data-theme='dark'] #content-area .mermaid .arrowMarkerPath, html[data-theme='dark'] #content-area .mermaid .arrowheadPath, html[data-theme='dark'] #content-area .mermaid marker path, [data-theme='dark'] #content-area .mermaid .flowchart-link, [data-theme='dark'] #content-area .mermaid .edgePath path, [data-theme='dark'] #content-area .mermaid path.path, [data-theme='dark'] #content-area .mermaid .arrowMarkerPath, [data-theme='dark'] #content-area .mermaid .arrowheadPath, [data-theme='dark'] #content-area .mermaid marker path { stroke: #FFE148 !important; fill: #FFE148 !important; } html.dark #content-area .mermaid .flowchart-link, html[data-theme='dark'] #content-area .mermaid .flowchart-link, [data-theme='dark'] #content-area .mermaid .flowchart-link, html.dark #content-area .mermaid .edgePath path, html[data-theme='dark'] #content-area .mermaid .edgePath path, [data-theme='dark'] #content-area .mermaid .edgePath path, html.dark #content-area .mermaid path.path, html[data-theme='dark'] #content-area .mermaid path.path, [data-theme='dark'] #content-area .mermaid path.path { fill: none !important; } /* Hide deprecated tag badge for Session Metadata page */ div.w-\[78px\].h-\[21px\].bg-\[#FDEAD8\], div[class*="w-[78px]"][class*="h-[21px]"][class*="bg-[#FDEAD8]"], div[class*="deprecated"], div.bg-\[#FDEAD8\].text-\[#AE590A\] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } /* ===== styles/01-layout.css ===== */ /* ======================================== LAYOUT & STRUCTURE ======================================== */ /* Dark Mode Background - Content Area Only */ .dark body #content-container, .dark body .mdx-content { background-color: #0a0a0a; /* Mintlify dark body (gray-300). Headings stay gray-200 via --suki-dark-text. */ color: var(--suki-dark-text-body); } /* * Dark text system (Mintlify): * - Body / leads: --suki-dark-text-body (#d1d0ce, gray-300) * - Headings / titles / dark:text-white: --suki-dark-text (#e1e1de, gray-200) * - Muted: --suki-dark-text-muted (#a1a19f, gray-400) */ html.dark #content-area .mdx-content :is(strong, b), [data-theme='dark'] #content-area .mdx-content :is(strong, b) { color: inherit; } /* * Neutral/Note callouts: Mintlify prose-invert uses zinc; align to shared body token. * Tip/Info keep their accent text (--dark-callout-text-color / blue). */ html.dark #content-area .callout[class*='border-neutral'] .prose, html.dark #content-area .callout[class*='border-zinc'] .prose, [data-theme='dark'] #content-area .callout[class*='border-neutral'] .prose, [data-theme='dark'] #content-area .callout[class*='border-zinc'] .prose { color: var(--suki-dark-text-body) !important; } html.dark #content-area .callout[class*='border-neutral'] .prose :is(li, strong, b, p, span):not(a):not(code), html.dark #content-area .callout[class*='border-zinc'] .prose :is(li, strong, b, p, span):not(a):not(code), [data-theme='dark'] #content-area .callout[class*='border-neutral'] .prose :is(li, strong, b, p, span):not(a):not(code), [data-theme='dark'] #content-area .callout[class*='border-zinc'] .prose :is(li, strong, b, p, span):not(a):not(code) { color: inherit !important; } html.dark #content-area :is(h2, h3, h4), [data-theme='dark'] #content-area :is(h2, h3, h4) { color: var(--suki-dark-text); } html.dark #content-area .dark\:text-white, html.dark #content-area .dark\:text-gray-50, [data-theme='dark'] #content-area .dark\:text-white, [data-theme='dark'] #content-area .dark\:text-gray-50 { color: var(--suki-dark-text) !important; } html.dark #content-area .api-section-heading-title, [data-theme='dark'] #content-area .api-section-heading-title { color: var(--suki-dark-text); } /* * Hub / custom-page body copy — force one Mintlify body color so home, use cases, * release notes, cookbooks, glossary, SDK/API overviews cannot drift * (#e3e0e0, #cbd5e1, #b0bec5, etc.). */ html.dark #content-area :is( .hp-sub, .hp-journey-lead, .sdk-overview-text, .sdk-overview-main-description, .sdk-overview-subtitle, .wse-prose, .wse-section-lead, .suki-use-case-section-lead, .suki-use-case-domain-lead, .tut-hub-section-lead, .tut-hub-intro, .release-notes-timeline-lead, .docs-frame-wrap > span[data-as='p'], .docs-frame-wrap > p, .hp-io-workflow-panel-line, .hp-io-method-card-desc, .suki-glossary-def, .suki-use-case-modal-subhead, .hp-sdk-card-tip__text ), [data-theme='dark'] #content-area :is( .hp-sub, .hp-journey-lead, .sdk-overview-text, .sdk-overview-main-description, .sdk-overview-subtitle, .wse-prose, .wse-section-lead, .suki-use-case-section-lead, .suki-use-case-domain-lead, .tut-hub-section-lead, .tut-hub-intro, .release-notes-timeline-lead, .docs-frame-wrap > span[data-as='p'], .docs-frame-wrap > p, .hp-io-workflow-panel-line, .hp-io-method-card-desc, .suki-glossary-def, .suki-use-case-modal-subhead, .hp-sdk-card-tip__text ) { color: var(--suki-dark-text-body) !important; } /* Mintlify Steps copy: align zinc neutrals to Mintlify gray tokens */ html.dark #content-area .steps > li p, html.dark #content-area ol.steps > li p, html.dark #content-area [data-component-part='step'] p, [data-theme='dark'] #content-area .steps > li p, [data-theme='dark'] #content-area ol.steps > li p, [data-theme='dark'] #content-area [data-component-part='step'] p { color: var(--suki-dark-text-body); } /* Secondary / muted custom copy → Mintlify gray-400 */ html.dark #content-area :is( .hp-io-workflow-hint, .hp-io-popular-item-chevron, .sdk-overview-start-tile::after, .api-overview-meta-card-hint, .api-overview-meta-k, .api-overview-meta-install-label, .suki-use-case-card-teaser, .suki-use-case-card-foot, .suki-use-case-press-card-foot, .suki-use-case-modal-meta-kicker, .suki-use-case-modal-related-desc, .suki-glossary-also-called, .suki-glossary-also-called-label, .hp-io-method-card-meta-time, .hp-io-method-card-aside-text, .tut-hub-level, .read-time-badge ), [data-theme='dark'] #content-area :is( .hp-io-workflow-hint, .hp-io-popular-item-chevron, .sdk-overview-start-tile::after, .api-overview-meta-card-hint, .api-overview-meta-k, .api-overview-meta-install-label, .suki-use-case-card-teaser, .suki-use-case-card-foot, .suki-use-case-press-card-foot, .suki-use-case-modal-meta-kicker, .suki-use-case-modal-related-desc, .suki-glossary-also-called, .suki-glossary-also-called-label, .hp-io-method-card-meta-time, .hp-io-method-card-aside-text, .tut-hub-level, .read-time-badge ) { color: var(--suki-dark-text-muted) !important; } /* Light mode background + body — content area (Mintlify canvas + gray-700) */ html:not(.dark):not([data-theme="dark"]) body #content-container, html:not(.dark):not([data-theme="dark"]) body .mdx-content, [data-theme="light"] body #content-container, [data-theme="light"] body .mdx-content { background-color: #fffffd; color: var(--suki-light-text-body); } /* * Light text system (Mintlify) — mirror of dark text system: * - Body / leads: --suki-light-text-body (#41413f, gray-700) * - Headings / titles: --suki-light-text (#1a1917, gray-900) * - Muted: --suki-light-text-muted (#737270, gray-500) * Buttons / CTAs are intentionally excluded from these lists. */ html:not(.dark):not([data-theme='dark']) #content-area .mdx-content :is(strong, b), [data-theme='light'] #content-area .mdx-content :is(strong, b) { color: inherit; } html:not(.dark):not([data-theme='dark']) #content-area :is(h2, h3, h4), [data-theme='light'] #content-area :is(h2, h3, h4) { color: var(--suki-light-text); } /* * Hub / custom-page body copy — one Mintlify body color so home, use cases, * release notes, cookbooks, glossary, SDK/API overviews cannot drift. */ html:not(.dark):not([data-theme='dark']) #content-area :is( .hp-sub, .hp-journey-lead, .sdk-overview-text, .sdk-overview-main-description, .wse-prose, .wse-section-lead, .suki-use-case-section-lead, .suki-use-case-domain-lead, .tut-hub-section-lead, .tut-hub-intro, .release-notes-timeline-lead, .docs-frame-wrap > span[data-as='p'], .docs-frame-wrap > p, .hp-io-workflow-panel-line, .hp-io-method-card-desc, .suki-glossary-def, .suki-use-case-modal-subhead, .hp-sdk-card-tip__text, .sdk-overview-list, .release-notes-timeline-entry-text ), [data-theme='light'] #content-area :is( .hp-sub, .hp-journey-lead, .sdk-overview-text, .sdk-overview-main-description, .wse-prose, .wse-section-lead, .suki-use-case-section-lead, .suki-use-case-domain-lead, .tut-hub-section-lead, .tut-hub-intro, .release-notes-timeline-lead, .docs-frame-wrap > span[data-as='p'], .docs-frame-wrap > p, .hp-io-workflow-panel-line, .hp-io-method-card-desc, .suki-glossary-def, .suki-use-case-modal-subhead, .hp-sdk-card-tip__text, .sdk-overview-list, .release-notes-timeline-entry-text ) { color: var(--suki-light-text-body) !important; } /* Custom titles / card headings → Mintlify gray-900 (not buttons) */ html:not(.dark):not([data-theme='dark']) #content-area :is( .hp-title, .sdk-overview-main-title, .sdk-overview-subtitle, .sdk-overview-start-title, .hp-io-method-card-title, .hp-wn-title, .suki-use-case-card-title, .suki-use-case-press-card-title, .suki-use-case-modal-title, .release-notes-timeline-entry-title, .api-overview-meta-card-title, .cookbook-hub-spotlight-card .hp-io-method-card-title, .web-sdk-exec-card__title, .wse-story__title, .wse-benefit-step__title, .wse-partners-get-card__title, .wse-benefits-aside__title, .wse-solution-pillars-section__title, .wse-solution-pillar-card__title, .hp-wrap.api-overview-wrap .card h3, .sdk-overview-container .card h2, .sdk-overview-container .card h3 ), [data-theme='light'] #content-area :is( .hp-title, .sdk-overview-main-title, .sdk-overview-subtitle, .sdk-overview-start-title, .hp-io-method-card-title, .hp-wn-title, .suki-use-case-card-title, .suki-use-case-press-card-title, .suki-use-case-modal-title, .release-notes-timeline-entry-title, .api-overview-meta-card-title, .cookbook-hub-spotlight-card .hp-io-method-card-title, .web-sdk-exec-card__title, .wse-story__title, .wse-benefit-step__title, .wse-partners-get-card__title, .wse-benefits-aside__title, .wse-solution-pillars-section__title, .wse-solution-pillar-card__title, .hp-wrap.api-overview-wrap .card h3, .sdk-overview-container .card h2, .sdk-overview-container .card h3 ) { color: var(--suki-light-text) !important; } /* Strong inside custom body copy → primary heading token */ html:not(.dark):not([data-theme='dark']) #content-area :is( .hp-sub strong, .hp-io-method-card-desc strong, .release-notes-timeline-lead strong, .wse-prose strong, .sdk-overview-list strong, .suki-use-case-section-lead strong ), [data-theme='light'] #content-area :is( .hp-sub strong, .hp-io-method-card-desc strong, .release-notes-timeline-lead strong, .wse-prose strong, .sdk-overview-list strong, .suki-use-case-section-lead strong ) { color: var(--suki-light-text) !important; } html:not(.dark):not([data-theme='dark']) #content-area .steps > li p, html:not(.dark):not([data-theme='dark']) #content-area ol.steps > li p, html:not(.dark):not([data-theme='dark']) #content-area [data-component-part='step'] p, [data-theme='light'] #content-area .steps > li p, [data-theme='light'] #content-area ol.steps > li p, [data-theme='light'] #content-area [data-component-part='step'] p { color: var(--suki-light-text-body); } /* Secondary / muted custom copy → Mintlify gray-500 */ html:not(.dark):not([data-theme='dark']) #content-area :is( .hp-io-workflow-hint, .hp-io-popular-item-chevron, .sdk-overview-start-tile::after, .api-overview-meta-card-hint, .api-overview-meta-k, .api-overview-meta-install-label, .suki-use-case-card-teaser, .suki-use-case-card-foot, .suki-use-case-press-card-foot, .suki-use-case-modal-meta-kicker, .suki-use-case-modal-related-desc, .suki-glossary-also-called, .suki-glossary-also-called-label, .hp-io-method-card-meta-time, .hp-io-method-card-aside-text, .tut-hub-level, .read-time-badge ), [data-theme='light'] #content-area :is( .hp-io-workflow-hint, .hp-io-popular-item-chevron, .sdk-overview-start-tile::after, .api-overview-meta-card-hint, .api-overview-meta-k, .api-overview-meta-install-label, .suki-use-case-card-teaser, .suki-use-case-card-foot, .suki-use-case-press-card-foot, .suki-use-case-modal-meta-kicker, .suki-use-case-modal-related-desc, .suki-glossary-also-called, .suki-glossary-also-called-label, .hp-io-method-card-meta-time, .hp-io-method-card-aside-text, .tut-hub-level, .read-time-badge ) { color: var(--suki-light-text-muted) !important; } /* * Mintlify MDX article spacing (standard doc pages, not home .hp-wrap). * Paragraphs render as span[data-as="p"] with 1.25em vertical margins. Staging injects a hidden * llms.txt blockquote.sr-only before the body, which blocks :first-child margin reset and adds * ~20px under the page-header description. Header description lives in header .text-lg.prose; * #content.mdx-content still has mt-8 (32px). */ #content-area:not(:has(.hp-wrap)) #content.mdx-content > blockquote.sr-only { margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; border: none !important; } #content-area:not(:has(.hp-wrap)) #content.mdx-content > blockquote.sr-only + span[data-as="p"], #content-area:not(:has(.hp-wrap)) #content.mdx-content.prose > blockquote.sr-only + span[data-as="p"], #content-area:not(:has(.hp-wrap)) #content.mdx-content .prose > blockquote.sr-only + span[data-as="p"] { margin-top: 0 !important; } #content-area:has(header .text-lg.prose):not(:has(.hp-wrap)) #content.mdx-content { margin-top: 1rem !important; } #content-area:not(:has(.hp-wrap)) div.mdx-content.prose > span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content .prose > span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content.prose-sm > span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content .prose-sm > span[data-as="p"] { margin-top: 1em; margin-bottom: 1em; } #content-area:not(:has(.hp-wrap)) div.mdx-content.prose > span[data-as="p"]:first-child, #content-area:not(:has(.hp-wrap)) div.mdx-content .prose > span[data-as="p"]:first-child, #content-area:not(:has(.hp-wrap)) div.mdx-content.prose-sm > span[data-as="p"]:first-child, #content-area:not(:has(.hp-wrap)) div.mdx-content .prose-sm > span[data-as="p"]:first-child, #content-area:not(:has(.hp-wrap)) div.mdx-content.prose > :is(h2, h3, h4) + span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content .prose > :is(h2, h3, h4) + span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content.prose-sm > :is(h2, h3, h4) + span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content .prose-sm > :is(h2, h3, h4) + span[data-as="p"] { margin-top: 0; } /* Main Content Container */ main article { margin: 0 auto !important; width: 100%; max-width: 1200px; padding-left: 20px !important; padding-right: 20px !important; } /* * Home (custom MDX): `#content-area` spans the main pane (sidebar → viewport edge) so the hero * cream band can run full width there without `100vw` (which would paint under the sidebar). * Reading width is enforced on `.hp-wrap` (hero + body share one padded column), not on `#content-area`. */ #content-area:has(.hp-wrap) { box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; /* Home layout: one shared rail across hero + all sections (tuned per breakpoint below). */ --hp-home-rail-vw: 92vw; --hp-home-rail-max: 1320px; /* Desktop narrows the whole home column (see `@media (min-width: 901px)`). */ --hp-home-rail-scale: 1; width: 100% !important; } /* Inner article fills the narrowed content column (avoid double max-width math) */ main article:has(.hp-wrap) { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } /* * Mintlify `#content.mdx-content` is often a column flex with a centered cross-axis, which can * shrink `.hp-wrap` (and the footer stack) while `.hp-journey-explore` reads wider. Stretch so the * home column is one width; Popular resources + footer padding rules below match `.hp-io` insets. */ #content-area:has(.hp-wrap) #content.mdx-content { align-items: stretch !important; } #content-area:has(.hp-wrap) .hp-wrap { align-self: stretch !important; } /* * Home MDX column: centered max width on laptop+ only. Below 901px use `max-width: 100%` (see * HOME PAGE — RESPONSIVE) so real phones and Mintlify device frame fill the content pane; `80vw` * left large side gutters and could disagree with `vw` in nested previews. * Includes `web-sdk-exec-page` hubs (Use Cases, Tutorials, Executive Summary, Technical Execution) * so they share the same rail as API/SDK overview. */ #content-area:has(.hp-wrap) .hp-wrap { margin-left: auto; margin-right: auto; max-width: min( calc(var(--hp-home-rail-vw) * var(--hp-home-rail-scale)), calc(var(--hp-home-rail-max) * var(--hp-home-rail-scale)) ); } /* * Home rail tiers: * - Mobile: keep defaults on `#content-area:has(.hp-wrap)` (≤900px uses HOME PAGE — RESPONSIVE). * - Laptop / normal desktop: slightly wider than the prior 80vw/1320 rail (not full Confluent width). * - Big desktop: modest widen for 21 in+ layouts. */ @media (min-width: 901px) and (max-width: 1799px) { #content-area:has(.hp-wrap) { --hp-home-rail-vw: 84vw; --hp-home-rail-max: 1380px; } } @media (min-width: 901px) { /* * Whole home page shares one rail (`.hp-wrap` + hero caps). Keep scale at 1 so the * small vw/max bump above is not shrunk away. */ #content-area:has(.hp-wrap) { --hp-home-rail-scale: 1; } } /* Wide content rail: see early block after base tokens (styles/00-base.css). */ @media (min-width: 1800px) { main article { max-width: 1300px !important; } #content-area:has(.hp-wrap) { --hp-home-rail-vw: 86vw; --hp-home-rail-max: 1500px; } } /* * Home dark only: prose is #0a0a0a but Mintlify paints gutters / shell near #000 and `dark:bg-gray-900` (#13171B). * Unify every visible layer to #0a0a0a so there is no two-tone band. Home column width is on `.hp-wrap`. */ html.dark:has(.hp-wrap), html[data-theme="dark"]:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark body:has(.hp-wrap), html[data-theme="dark"] body:has(.hp-wrap), [data-theme="dark"] body:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark body:has(.hp-wrap) #body-content, html[data-theme="dark"] body:has(.hp-wrap) #body-content, [data-theme="dark"] body:has(.hp-wrap) #body-content { background-color: #0a0a0a !important; } html.dark body:has(.hp-wrap) #content-container, html[data-theme="dark"] body:has(.hp-wrap) #content-container, [data-theme="dark"] body:has(.hp-wrap) #content-container { background-color: #0a0a0a !important; } html.dark body:has(.hp-wrap) #content-container > .flex-1, html[data-theme="dark"] body:has(.hp-wrap) #content-container > .flex-1, [data-theme="dark"] body:has(.hp-wrap) #content-container > .flex-1 { background-color: #0a0a0a !important; } html.dark #content-area:has(.hp-wrap), html[data-theme="dark"] #content-area:has(.hp-wrap), [data-theme="dark"] #content-area:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark main:has(.hp-wrap), html[data-theme="dark"] main:has(.hp-wrap), [data-theme="dark"] main:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark main article:has(.hp-wrap), html[data-theme="dark"] main article:has(.hp-wrap), [data-theme="dark"] main article:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark main:has(.hp-wrap) .dark\:bg-gray-900, html[data-theme="dark"] main:has(.hp-wrap) .dark\:bg-gray-900, [data-theme="dark"] main:has(.hp-wrap) .dark\:bg-gray-900 { background-color: #0a0a0a !important; } /* * Hide thin rail borders between left sidebar / main / right TOC (both themes). * Mintlify uses border-r on #sidebar-content and border-l on #content-side-layout. */ #sidebar-content, html.dark #sidebar-content, html[data-theme='dark'] #sidebar-content, [data-theme='dark'] #sidebar-content, html:not(.dark):not([data-theme='dark']) #sidebar-content, [data-theme='light'] #sidebar-content { border-right-width: 0 !important; border-right-style: none !important; border-right-color: transparent !important; } #content-side-layout, .dark #content-side-layout, html.dark #content-side-layout, html[data-theme='dark'] #content-side-layout, [data-theme='dark'] #content-side-layout, html:not(.dark):not([data-theme='dark']) #content-side-layout, [data-theme='light'] #content-side-layout { border-left-width: 0 !important; border-left-style: none !important; border-left-color: transparent !important; } /* * Right TOC column: Mintlify uses px-8 (2rem) on #content-side-layout. A smaller padding-left * pulls “On this page” and links toward the main column without changing width, sticky top, or height. */ /* * TOC "On this page": Mintlify nests the heading button, ul, and footer rows in #table-of-contents. * Active marker is a ::before dot (position absolute). Padding-left on the first button, each * .toc-item, and direct footer divs keeps labels clear of the dot. Do not use negative left on * ::before (ancestor lg:overflow-x-clip clips it). Primary #6F5410 / #FFE148 in dark. * * Commit f70301e used only `data-active-deepest="true"` (one dot). Do not also key off * `data-active="true"`: Mintlify can set that on multiple “trail” rows at once, which looks like * multiple dots. When deepest is present anywhere in the TOC, rely on it only. When no row has * deepest, do not fall back with `font-medium` alone: some Mintlify versions put `font-medium` on * every TOC link, which would draw a dot on every row on localhost. Fall back only when the direct * child link uses primary emphasis (`text-primary` / `text-primary-light`), same as the active row. */ #table-of-contents { box-sizing: border-box; } /* Native list markers + our dot look like double bullets; TOC list uses #table-of-contents-content. */ #table-of-contents-content { list-style: none !important; } #table-of-contents > button:first-of-type, #table-of-contents > div:not(#multi-view-dropdown) { box-sizing: border-box; padding-left: 1rem !important; } /* Mintlify language picker; do not inherit the 1rem inset used for footer rows. */ #table-of-contents #multi-view-dropdown { box-sizing: border-box; padding-left: 0 !important; } /* * Mintlify picker: Radix/menu focus uses theme primary for outline (docs.json #6F5410). * Default Mintlify shows gray hover fill only. Scoped to multi-view classes (TOC + mobile). */ .multi-view-dropdown .multi-view-dropdown-trigger:focus, .multi-view-dropdown .multi-view-dropdown-trigger:focus-visible { outline: none !important; box-shadow: none !important; } .multi-view-dropdown-item[data-highlighted], .multi-view-dropdown-item:focus, .multi-view-dropdown-item:focus-visible, .multi-view-dropdown-item:focus-within { outline: none !important; box-shadow: none !important; } #table-of-contents .toc-item { box-sizing: border-box; padding-left: 1rem !important; position: relative; list-style-type: none !important; } /* Active TOC row: one dot (f70301e deepest-first; link fallback only if no deepest row). */ #table-of-contents .toc-item[data-active-deepest="true"]::before, #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary)::before, #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary-light)::before { background-color: #6f5410; border-radius: 50%; content: ""; height: 0.375rem; left: 0.05rem; pointer-events: none; position: absolute; top: 0.8rem; width: 0.375rem; } html.dark #table-of-contents .toc-item[data-active-deepest="true"]::before, html[data-theme="dark"] #table-of-contents .toc-item[data-active-deepest="true"]::before, [data-theme="dark"] #table-of-contents .toc-item[data-active-deepest="true"]::before, html.dark #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary)::before, html[data-theme="dark"] #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary)::before, [data-theme="dark"] #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary)::before, html.dark #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary-light)::before, html[data-theme="dark"] #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary-light)::before, [data-theme="dark"] #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary-light)::before { background-color: #ffe148; } main article > *:not(.sdk-overview-container):not(.news-ticker-banner-wrapper) { margin-left: auto !important; margin-right: auto !important; max-width: 1400px; } @media (max-width: 968px) { main article { padding-left: 20px !important; padding-right: 20px !important; } } @media (max-width: 640px) { main article { padding-left: 16px !important; padding-right: 16px !important; } main article > *:not(.sdk-overview-container):not(.news-ticker-banner-wrapper) { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ===== styles/02-media.css ===== */ /* ======================================== MEDIA & EMBEDDED CONTENT ======================================== */ /* Responsive Iframe for Videos */ iframe { max-width: 100%; height: auto; } @media (max-width: 640px) { iframe[width="500"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; } } @media (max-width: 968px) { iframe[width="500"] { width: 100% !important; max-width: 500px; height: auto !important; aspect-ratio: 16 / 9; } } /* ===== styles/07-utilities.css ===== */ /* ======================================== UTILITIES & OVERRIDES ======================================== */ /* Hide "Powered by Mintlify" Footer */ footer#footer a[href*="mintlify.com"], footer#footer a[href*="poweredBy"], footer a[href*="mintlify.com"], footer a[href*="poweredBy"], a[href*="mintlify.com"][href*="poweredBy"], a.text-sm.text-gray-500[href*="mintlify.com"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; width: 0 !important; padding: 0 !important; margin: 0 !important; } /* Mintlify site footer (#footer): remove top divider only (footer stays visible on all widths). */ footer#footer { border-top: none !important; } html.dark footer#footer, html[data-theme="dark"] footer#footer, [data-theme="dark"] footer#footer { border-top: none !important; } /* * Prev/next cards: Mintlify links are transparent; prose/accordions above can paint through * when scrolled to the page end (especially after SPA nav from a longer page). Opaque chrome only. */ #content-area #pagination { position: relative; z-index: 2; isolation: isolate; margin-top: 1.5rem !important; } html:not(.dark):not([data-theme="dark"]) #content-area #pagination a, [data-theme="light"] #content-area #pagination a { background-color: #fffffd !important; } html.dark #content-area #pagination a, html[data-theme="dark"] #content-area #pagination a, [data-theme="dark"] #content-area #pagination a { background-color: #0a0a0a !important; } /* * In-body trust footer (scripts/suki-doc-footer.js): bottom of #content-area after #pagination. * Full bleed within #content-area only (article column). Light: #fffffd; dark: #0a0a0a. */ html[data-suki-doc-footer='on'] #content-area { display: flex !important; flex-direction: column !important; } /* Mobile: no viewport min-height (avoids blank band); desktop keeps footer pinned on short pages. */ @media (max-width: 1023px) { html[data-suki-doc-footer='on'] #content-area { min-height: 0 !important; } html[data-suki-announcement='on'][data-suki-doc-footer='on'] #content-area { min-height: 0 !important; } #content-area .suki-doc-footer { margin-top: 0 !important; padding-top: 1.5rem; padding-bottom: 1.25rem; } .suki-doc-footer-inner { gap: 1rem; } } @media (min-width: 1024px) { html[data-suki-doc-footer='on'] #content-area { min-height: calc(100dvh - 3rem) !important; } html[data-suki-announcement='on'][data-suki-doc-footer='on'] #content-area { min-height: calc(100dvh - var(--suki-mint-chrome-bottom, 6rem)) !important; } } html[data-suki-doc-footer='on'] footer#footer { display: none !important; } #content-area .suki-doc-footer { position: relative; z-index: 1; flex-shrink: 0; margin-top: auto !important; box-sizing: border-box; /* Bleed to article column edges; stay left of #content-side-layout (TOC). */ width: calc(100% + 3rem); max-width: none; margin-left: -1.5rem; margin-right: -1.5rem; padding: 2rem 1.5rem 1.75rem; background-color: #fffffd; color: var(--suki-light-text); } /* Home / cookbook recipes: footer lives inside `.hp-wrap` (rail-aligned); skip article bleed. * Frame pages zero `#content-area` padding; negative-margin bleed would overflow the viewport. */ body:has([data-hp-home-hero]) #content-area .suki-doc-footer, #content-area .cb-recipe-wrap > .suki-doc-footer, #content-area:has(.cb-recipe-wrap) > .suki-doc-footer { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; padding-top: 2rem; padding-bottom: 1.75rem; box-sizing: border-box; } /* * Home: clear space above the band (do not use margin-top:auto — that fights document flow * inside `.hp-wrap` and can paint over the support card). Keep z-index auto so it cannot * cover the section above. */ body:has([data-hp-home-hero]) #content-area .hp-wrap > .suki-doc-footer { margin-top: 110px !important; z-index: auto; } /* * Home only + light mode: full-bleed charcoal band (same #1c1c19 as `.hp-hero-bleed`). * Dark mode keeps existing footer colors; rail inset for copy is shared below. */ html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) #content-area .hp-wrap > .suki-doc-footer, [data-theme='light'] body:has([data-hp-home-hero]) #content-area .hp-wrap > .suki-doc-footer { background-color: #1c1c19; color: #fffffd; max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 2rem; padding-bottom: 1.75rem; } /* Home (light + dark): keep logos/legal on the shared home rail, not flush to the pane edges. */ body:has([data-hp-home-hero]) #content-area .suki-doc-footer-inner { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: min( calc(var(--hp-home-rail-vw) * var(--hp-home-rail-scale)), calc(var(--hp-home-rail-max) * var(--hp-home-rail-scale)) ); width: 100%; } @media (max-width: 900px) { body:has([data-hp-home-hero]) #content-area .suki-doc-footer-inner { max-width: 100%; padding-left: 20px; padding-right: 20px; } } html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-logos img, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-logos img { /* Light-mode default forces black marks; invert for the charcoal home band. */ filter: brightness(0) invert(1); } html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-trust, html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-trust a, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-trust, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-trust a { color: #fffffd; } html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-trust a:hover, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-trust a:hover { color: #fffffd; opacity: 0.85; } html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-copy, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-copy { color: rgba(255, 255, 255, 0.82); } /* * Docs-Bot sidebar on small/medium desktop: keep the trust footer inside the narrowed * article column so legal copy and badges do not sit under the docked sidebar panel. */ @media (min-width: 481px) and (max-width: 1440px) { } html.dark #content-area .suki-doc-footer, html[data-theme='dark'] #content-area .suki-doc-footer, [data-theme='dark'] #content-area .suki-doc-footer { background-color: #0a0a0a; color: var(--suki-dark-text); } .suki-doc-footer-inner { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; width: 100%; } /* Trust + legal row (was previously laid out on `.suki-doc-footer-inner`). */ .suki-doc-footer-bar { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; width: 100%; } @media (min-width: 900px) { .suki-doc-footer-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } } /* * Home-only brand + sitemap above the trust bar. * Light home band is charcoal; dark home is #0a0a0a — light text in both. */ body:has([data-hp-home-hero]) .suki-doc-footer--home .suki-doc-footer-inner { gap: 2.5rem; } body:has([data-hp-home-hero]) .suki-doc-footer-home-top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; width: 100%; margin: 0; padding: 0 0 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-sizing: border-box; } @media (min-width: 960px) { body:has([data-hp-home-hero]) .suki-doc-footer-home-top { grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 2.2fr); gap: 3rem; align-items: start; } } body:has([data-hp-home-hero]) .suki-doc-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; margin: 0; padding: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-brand-logo { display: block; margin: 0; padding: 0 !important; color: #fffffd !important; text-decoration: none !important; background: transparent !important; border: none !important; box-shadow: none !important; line-height: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-brand-logo:hover, body:has([data-hp-home-hero]) .suki-doc-footer-brand-logo:focus-visible { color: #fffffd !important; opacity: 0.9; text-decoration: none !important; } body:has([data-hp-home-hero]) .suki-doc-footer-brand-mark { display: block; width: 9.5rem; max-width: 100%; height: auto; margin: 0; padding: 0; /* viewBox is cropped to glyph bounds so the left edge matches tagline/socials */ overflow: visible; } body:has([data-hp-home-hero]) .suki-doc-footer-brand-tagline { margin: 0; padding: 0; max-width: 17rem; color: rgba(255, 255, 253, 0.78) !important; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.9375rem; font-weight: 400; line-height: 1.45; } body:has([data-hp-home-hero]) .suki-doc-footer-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin: 0.15rem 0 0; padding: 0; list-style: none; } body:has([data-hp-home-hero]) .suki-doc-footer-socials li { margin: 0; padding: 0; list-style: none; line-height: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-social-link, body:has([data-hp-home-hero]) .suki-doc-footer-social-link[href] { display: inline-flex !important; align-items: center; justify-content: flex-start; width: auto; height: auto; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 253, 0.72) !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; line-height: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-social-link:hover, body:has([data-hp-home-hero]) .suki-doc-footer-social-link:focus-visible, body:has([data-hp-home-hero]) .suki-doc-footer-social-link[href]:hover, body:has([data-hp-home-hero]) .suki-doc-footer-social-link[href]:focus-visible { color: #fffffd !important; background: transparent !important; text-decoration: none !important; opacity: 1 !important; } body:has([data-hp-home-hero]) .suki-doc-footer-social-icon { display: block; width: 1.25rem; height: 1.25rem; margin: 0; padding: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-nav { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; margin: 0; padding: 0; box-sizing: border-box; } @media (min-width: 640px) { body:has([data-hp-home-hero]) .suki-doc-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } /* Thin white rules between Documentation | Developers | Resources */ body:has([data-hp-home-hero]) .suki-doc-footer-nav-col { padding-inline: 1.75rem; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-col:first-child { padding-left: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-col:last-child { padding-right: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-col + .suki-doc-footer-nav-col { border-left: 1px solid rgba(255, 255, 255, 0.9); } } body:has([data-hp-home-hero]) .suki-doc-footer-nav-col { min-width: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-heading { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.15rem; color: rgba(255, 255, 255, 0.58) !important; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-icon { display: block; flex-shrink: 0; color: inherit; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-list li { margin: 0; padding: 0; list-style: none; } /* Beat Mintlify `#content-area a[href]` blue !important on home footer links. */ body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a, body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a[href] { color: rgba(255, 255, 253, 0.92) !important; display: inline !important; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.9375rem !important; font-weight: 400 !important; line-height: 1.4 !important; text-decoration: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a:hover, body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a:focus-visible, body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a[href]:hover, body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a[href]:focus-visible { color: #fffffd !important; text-decoration: underline !important; text-underline-offset: 4px; background: transparent !important; opacity: 1 !important; } .suki-doc-footer-left { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; flex: 0 1 auto; } @media (min-width: 640px) { .suki-doc-footer-left { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; } } .suki-doc-footer-logos { display: flex; flex-shrink: 0; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none; } .suki-doc-footer-logos li { margin: 0; padding: 0; } .suki-doc-footer-logos img { display: block; height: 2.5rem; width: auto; max-width: none; object-fit: contain; } html:not(.dark):not([data-theme='dark']) .suki-doc-footer-logos img, [data-theme='light'] .suki-doc-footer-logos img { filter: brightness(0); } .suki-doc-footer-trust { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--suki-light-text); } .suki-doc-footer-trust a { color: var(--suki-light-text); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; } .suki-doc-footer-trust a:hover { color: var(--suki-light-text); opacity: 0.75; } html.dark .suki-doc-footer-trust, html[data-theme='dark'] .suki-doc-footer-trust, [data-theme='dark'] .suki-doc-footer-trust { color: var(--suki-dark-text); } html.dark .suki-doc-footer-trust a, html[data-theme='dark'] .suki-doc-footer-trust a, [data-theme='dark'] .suki-doc-footer-trust a { color: var(--suki-dark-text); } html.dark .suki-doc-footer-trust a:hover, html[data-theme='dark'] .suki-doc-footer-trust a:hover, [data-theme='dark'] .suki-doc-footer-trust a:hover { color: var(--suki-dark-text); opacity: 0.85; } .suki-doc-footer-trust a strong { font-weight: 500; } .suki-doc-footer-legal { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 0 0 auto; width: 100%; max-width: 34rem; } @media (min-width: 900px) { .suki-doc-footer-legal { flex: 0 1 34rem; width: auto; margin-left: auto; text-align: right; } } .suki-doc-footer-copy { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.6875rem; line-height: 1.45; color: rgba(20, 17, 16, 0.55); } html.dark .suki-doc-footer-copy, html[data-theme='dark'] .suki-doc-footer-copy, [data-theme='dark'] .suki-doc-footer-copy { color: rgba(255, 255, 255, 0.5); } .suki-doc-footer-copy--secondary { margin: 0; } .suki-doc-footer-reserved { text-decoration: underline; text-underline-offset: 4px; } @media print { html[data-suki-doc-footer='on'] #content-area { display: block !important; min-height: 0 !important; } #content-area .suki-doc-footer { display: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ===== styles/10-sdk-api-overview.css ===== */ /* ======================================== SDK OVERVIEW PAGE ======================================== */ /* Container & Layout */ .sdk-overview-container { max-width: 100%; margin: 0 auto; padding: 32px 40px 56px; background-color: #fffffd; overflow: visible !important; } /* Dark mode background for SDK/API overview and release notes hub (.sdk-overview-container.release-notes-container) */ .dark .sdk-overview-container, html.dark .sdk-overview-container, html[data-theme="dark"] .sdk-overview-container, [data-theme="dark"] .sdk-overview-container { background-color: #0a0a0a; } /* Normal text font size for SDK Overview and API Overview pages */ .sdk-overview-container p:not(.sdk-overview-main-description):not(.sdk-overview-subtitle), .sdk-overview-container .sdk-overview-text { font-size: 16px; } /* Mermaid centering: see global #content-area .mermaid rules after the Tables section */ /* Intro Section */ .sdk-overview-intro { margin-bottom: 30px; } .sdk-overview-intro .sdk-overview-featured-right--intro-quickstart { width: 100%; max-width: 100%; margin-bottom: 4px; } .sdk-overview-main-title { font-size: 36px; font-weight: 600; letter-spacing: -0.015em; color: var(--suki-light-text); margin: 0 0 16px 0; line-height: 1.25; text-shadow: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; } html.dark .sdk-overview-main-title, [data-theme="dark"] .sdk-overview-main-title { color: var(--suki-dark-text); } .sdk-overview-main-description { font-size: 16px; line-height: 1.7; color: var(--suki-light-text-body); margin: 0 0 40px 0; } html.dark .sdk-overview-main-description, [data-theme="dark"] .sdk-overview-main-description { color: var(--suki-dark-text-body); } .sdk-overview-subtitle { font-size: 24px; font-weight: 500; letter-spacing: -0.012em; color: var(--suki-light-text); margin: 32px 0 16px 0; line-height: 1.35; text-shadow: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; } html.dark .sdk-overview-subtitle, [data-theme="dark"] .sdk-overview-subtitle { color: var(--suki-dark-text); } .sdk-overview-text { font-size: 16px; line-height: 1.7; color: var(--suki-light-text-body); margin: 0 0 16px 0; } .sdk-overview-text a { color: var(--suki-light-text); text-decoration: none; border-bottom: 1px solid #111827; transition: border-color 0.2s ease; } .sdk-overview-text a:hover { border-bottom-color: #6b7280; } html.dark .sdk-overview-text, [data-theme="dark"] .sdk-overview-text { color: var(--suki-dark-text-body); } html.dark .sdk-overview-text a, [data-theme="dark"] .sdk-overview-text a { color: #fff394; border-bottom-color: #fff394; } html.dark .sdk-overview-text a:hover, [data-theme="dark"] .sdk-overview-text a:hover { border-bottom-color: #ffe148; } .sdk-overview-text code:not(pre code) { background-color: #F3F4F6 !important; color: #2d2f2f !important; border: 0.5px solid #f3f5f7 !important; padding: 2.4px 7px !important; border-radius: 4px !important; font-size: 11px !important; } html.dark .sdk-overview-text code:not(pre code), [data-theme="dark"] .sdk-overview-text code:not(pre code) { background-color: #17223b !important; color: #fff394 !important; border: 0.5px solid #292a2b !important; } .sdk-overview-list { font-size: 16px; line-height: 1.8; color: var(--suki-light-text-body); margin: 0 0 24px 0; padding-left: 24px; list-style-type: disc !important; list-style-position: outside !important; } html.dark .sdk-overview-list, [data-theme="dark"] .sdk-overview-list { color: var(--suki-dark-text-body); } .sdk-overview-list li { margin-bottom: 8px; display: list-item !important; list-style-type: inherit !important; } .sdk-overview-list strong { color: var(--suki-light-text); font-weight: 600; } html.dark .sdk-overview-list strong, [data-theme="dark"] .sdk-overview-list strong { color: var(--suki-dark-text); } .sdk-overview-list code:not(pre code) { background-color: #F3F4F6 !important; color: #2d2f2f !important; border: 0.5px solid #f3f5f7 !important; padding: 2.4px 7px !important; border-radius: 4px !important; font-size: 11px !important; } html.dark .sdk-overview-list code:not(pre code), [data-theme="dark"] .sdk-overview-list code:not(pre code) { background-color: #17223b !important; color: #fff394 !important; border: 0.5px solid #292a2b !important; } /* * Overview hub pages: Mintlify CardGroup typography aligned with suki-feature / sdk-overview cards. */ .sdk-overview-container .card, #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card { font-family: inherit; border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; box-shadow: none; } html.dark .sdk-overview-container .card, html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card, [data-theme="dark"] .sdk-overview-container .card, [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card { background: #0a0a0a; border-color: #374151; } /* * API overview hub “Stay updated” changelog cards: restore Mintlify-default card border weight * (hub override above uses gray-700; Mintlify cards use a softer rim in dark, same token family as TOC/footer chrome). */ #content-area .hp-wrap.api-overview-wrap .api-overview-mintlify-cardgroup .card { border-color: rgba(17, 24, 39, 0.12); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-mintlify-cardgroup .card, [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap .api-overview-mintlify-cardgroup .card { border-color: rgba(255, 255, 255, 0.14); } .sdk-overview-container .card [data-component-part="card-title"], .sdk-overview-container .card h3, #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-title"], #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card h3 { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--suki-light-text); } html.dark .sdk-overview-container .card [data-component-part="card-title"], html.dark .sdk-overview-container .card h3, html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-title"], html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card h3, [data-theme="dark"] .sdk-overview-container .card [data-component-part="card-title"], [data-theme="dark"] .sdk-overview-container .card h3, [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-title"], [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card h3 { color: var(--suki-dark-text); } .sdk-overview-container .card [data-component-part="card-content"], .sdk-overview-container .card [data-component-part="card-content"] p, #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"], #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"] p { font-size: 13px; line-height: 1.45; color: var(--suki-light-text-body); } html.dark .sdk-overview-container .card [data-component-part="card-content"], html.dark .sdk-overview-container .card [data-component-part="card-content"] p, html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"], html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"] p, [data-theme="dark"] .sdk-overview-container .card [data-component-part="card-content"], [data-theme="dark"] .sdk-overview-container .card [data-component-part="card-content"] p, [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"], [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"] p { color: #a1a19f; } /* OpenAI-style link grid on Suki APIs overview: sdk-overview featured-description tokens */ .sdk-overview-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 4px; margin-top: 8px; } @media (max-width: 640px) { .sdk-overview-start-grid { grid-template-columns: 1fr; } } .sdk-overview-start-tile { display: flex; gap: 14px; align-items: flex-start; padding: 14px 40px 14px 16px; text-decoration: none !important; color: inherit; border-radius: 14px; position: relative; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .sdk-overview-start-tile:hover, .sdk-overview-start-tile:focus-visible { background: var(--suki-link-row-hover-bg); outline: none; } html.dark .sdk-overview-start-tile:hover, html.dark .sdk-overview-start-tile:focus-visible, [data-theme="dark"] .sdk-overview-start-tile:hover, [data-theme="dark"] .sdk-overview-start-tile:focus-visible { background: var(--suki-link-row-hover-bg); } .sdk-overview-start-tile::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%) translateX(-4px); opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease; font-size: 22px; font-weight: 500; line-height: 1; color: var(--suki-light-text-muted); } .sdk-overview-start-tile:hover::after, .sdk-overview-start-tile:focus-visible::after { color: var(--suki-link-row-chevron-hover); opacity: 1; transform: translateY(-50%) translateX(0); } html.dark .sdk-overview-start-tile::after, [data-theme="dark"] .sdk-overview-start-tile::after { color: var(--suki-dark-text-muted); } html.dark .sdk-overview-start-tile:hover::after, html.dark .sdk-overview-start-tile:focus-visible::after, [data-theme="dark"] .sdk-overview-start-tile:hover::after, [data-theme="dark"] .sdk-overview-start-tile:focus-visible::after { color: var(--suki-link-row-chevron-hover); } .sdk-overview-start-icon { align-items: center; border-radius: 10px; color: #1c1c1c; display: inline-flex; flex-shrink: 0; height: 40px; justify-content: center; width: 40px; } .sdk-overview-start-icon svg { display: block; height: 18px; width: 18px; } .sdk-overview-start-icon--auth svg { height: 20px; width: 20px; } .sdk-overview-start-icon--workflows { background: hsla(262, 52%, 93%, 1); color: hsla(262, 49%, 38%, 1); } .sdk-overview-start-icon--headless { background: hsla(24, 90%, 93%, 1); color: hsla(24, 70%, 40%, 1); } .sdk-overview-start-icon--dictation { background: hsla(270, 52%, 93%, 1); color: hsla(270, 45%, 42%, 1); } .sdk-overview-start-icon--webhook { background: hsla(24, 90%, 93%, 1); color: hsla(24, 70%, 40%, 1); } .sdk-overview-start-icon--websocket { background: hsla(190, 75%, 90%, 1); color: hsla(190, 70%, 35%, 1); } .sdk-overview-start-icon--form-filling { background: hsla(48, 100%, 90%, 1); color: hsla(36, 84%, 39%, 1); } .sdk-overview-start-icon--patient-summary { background: hsla(255, 48%, 93%, 1); color: hsla(255, 45%, 40%, 1); } .sdk-overview-start-icon--guidelines { background: hsla(262, 52%, 93%, 1); color: hsla(262, 49%, 38%, 1); } .sdk-overview-start-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--suki-light-text); margin-bottom: 4px; } html.dark .sdk-overview-start-title, [data-theme="dark"] .sdk-overview-start-title { color: var(--suki-dark-text); } .sdk-overview-start-desc { display: block; font-size: 13px; line-height: 1.45; color: var(--suki-light-text-body); } html.dark .sdk-overview-start-desc, [data-theme="dark"] .sdk-overview-start-desc { color: #a1a19f; } /* * API overview hub (api-overview/overview.mdx): OpenAI-style hero band + minimalist path cards. * Visual tokens align with sdk-overview (not OpenAI’s external site styling). */ .api-overview-openai-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 32px; align-items: start; padding: 28px 32px; margin-bottom: 28px; border-radius: 16px; background: #f3f4f6; border: 1px solid #e5e7eb; } html.dark .api-overview-openai-hero, [data-theme="dark"] .api-overview-openai-hero { background: #18181b; border-color: #374151; } @media (max-width: 900px) { .api-overview-openai-hero { grid-template-columns: 1fr; gap: 24px; padding: 22px 20px; } } .api-overview-openai-hero-left .sdk-overview-quickstart-powered { margin-bottom: 12px; } .api-overview-openai-hero-left .sdk-overview-quickstart-title { margin-bottom: 12px; } .api-overview-hero-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; margin-bottom: 16px; align-items: center; } /* Thin black guide links: angled arrow appears on hover */ .doc-guide-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; align-items: center; } /* Vertical bullet list of guide buttons (scoped; do not affect .doc-guide-btn-row) */ #content-area ul.doc-guide-btn-list { list-style: none !important; margin: 12px 0 20px; padding-left: 0; } #content-area ul.doc-guide-btn-list > li { position: relative; list-style: none !important; margin: 0 0 8px; padding-left: 1rem; line-height: 1.2; } #content-area ul.doc-guide-btn-list > li:last-child { margin-bottom: 0; } /* One custom bullet only: kill Mintlify prose ::before + native markers */ #content-area ul.doc-guide-btn-list > li::marker { content: none !important; font-size: 0 !important; } #content-area ul.doc-guide-btn-list > li::before { content: '' !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #6b7280; pointer-events: none; } html.dark #content-area ul.doc-guide-btn-list > li::before, [data-theme='dark'] #content-area ul.doc-guide-btn-list > li::before { background: #9ca3af; } /* Slightly thinner pills in this list only */ #content-area ul.doc-guide-btn-list a.doc-guide-btn { padding: 2px 10px; min-height: 24px; font-size: 12px; line-height: 1.15; } #content-area a.doc-guide-btn { display: inline-flex; align-items: center; gap: 0; padding: 4px 12px; min-height: 28px; border-radius: 9999px; border: 1px solid #111827; background: #111827; color: #ffffff !important; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; text-decoration: none !important; white-space: nowrap; box-shadow: none; transition: background var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), border-color var(--suki-cta-hover-duration) var(--suki-cta-hover-ease); } #content-area a.doc-guide-btn::after { content: '' !important; display: inline-block; width: 0; height: var(--suki-cta-arrow-size); max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; flex-shrink: 0; background-color: #ffffff; -webkit-mask: var(--suki-cta-arrow-mask) center / contain no-repeat; mask: var(--suki-cta-arrow-mask) center / contain no-repeat; transition: opacity var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), max-width var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), width var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), margin-left var(--suki-cta-hover-duration) var(--suki-cta-hover-ease); } #content-area a.doc-guide-btn:hover, #content-area a.doc-guide-btn:focus-visible { background: #000000; border-color: #000000; color: #ffffff !important; outline: none; } #content-area a.doc-guide-btn:hover::after, #content-area a.doc-guide-btn:focus-visible::after { width: var(--suki-cta-arrow-size); max-width: var(--suki-cta-arrow-size); margin-left: var(--suki-cta-arrow-hover-ml); opacity: 1; } /* Suppress Mintlify auto external-link icons on guide CTAs */ #content-area a.doc-guide-btn > svg { display: none !important; } #content-area a.doc-guide-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255, 225, 72, 0.55); } html.dark #content-area a.doc-guide-btn, [data-theme='dark'] #content-area a.doc-guide-btn { background: #f5f5f5; border-color: #f5f5f5; color: #111827 !important; } html.dark #content-area a.doc-guide-btn::after, [data-theme='dark'] #content-area a.doc-guide-btn::after { background-color: #111827; } html.dark #content-area a.doc-guide-btn:hover, html.dark #content-area a.doc-guide-btn:focus-visible, [data-theme='dark'] #content-area a.doc-guide-btn:hover, [data-theme='dark'] #content-area a.doc-guide-btn:focus-visible { background: #ffffff; border-color: #ffffff; color: #111827 !important; } /* Partnership CTAs inside themed callouts: keep the shared pill palette. */ #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta { background: #111827 !important; background-color: #111827 !important; border-color: #111827 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta::after { /* Callout link color must not tint the masked arrow */ background-color: #ffffff !important; color: #ffffff !important; } /* Contact Partnership Team CTAs only: hover arrow is angled (↗) */ #content-area a.partner-contact-cta::after { transform: rotate(-45deg); transform-origin: center; } #content-area a.partner-contact-cta:hover::after, #content-area a.partner-contact-cta:focus-visible::after { transform: rotate(-45deg); } #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:hover, #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:focus-visible { background: #000000 !important; background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html.dark #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta, html[data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta, [data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta { background: #f5f5f5 !important; background-color: #f5f5f5 !important; border-color: #f5f5f5 !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; } html.dark #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta::after, html[data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta::after, [data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta::after { background-color: #111827 !important; color: #111827 !important; } html.dark #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:hover, html.dark #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:focus-visible, html[data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:hover, html[data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:focus-visible, [data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:hover, [data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:focus-visible { background: #ffffff !important; background-color: #ffffff !important; border-color: #ffffff !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; } @media (prefers-reduced-motion: reduce) { #content-area a.doc-guide-btn, #content-area a.doc-guide-btn::after, #content-area a.hp-wn-all, a.release-notes-rss-link { transition-duration: 0.01ms; } } .api-overview-hero-text-links { display: flex; flex-direction: column; gap: 8px; } .api-overview-openai-hero-code { min-width: 0; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 12px 14px; } html.dark .api-overview-openai-hero-code, [data-theme="dark"] .api-overview-openai-hero-code { background: #0a0a0a; border-color: #374151; } .api-overview-openai-hero-code-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 4px; } .api-overview-openai-hero-code-footer--badges-only { justify-content: flex-start; } .api-overview-hero-follow { margin-bottom: 40px; } .api-overview-hero-follow .sdk-overview-support-cta { justify-content: flex-start; margin-top: 0; } .api-overview-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 640px) { .api-overview-path-grid { grid-template-columns: 1fr; } } .api-overview-path-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; text-decoration: none !important; color: inherit; transition: box-shadow 0.15s ease, border-color 0.15s ease; min-height: 100%; } .api-overview-path-card:hover { border-color: #d1d5db; box-shadow: 0 4px 14px rgba(40, 39, 37, 0.08); } html.dark .api-overview-path-card, [data-theme="dark"] .api-overview-path-card { background: #0a0a0a; border-color: #374151; } html.dark .api-overview-path-card:hover, [data-theme="dark"] .api-overview-path-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .api-overview-path-card .suki-feature-title { margin-bottom: 6px; } .api-overview-path-card .sdk-overview-featured-description { flex: 1; margin-bottom: 4px; } .api-overview-section-head-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 10px; } .api-overview-section-head-row .sdk-overview-section-title { margin-bottom: 0; } .api-overview-resources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 36px; margin-top: 8px; border-top: 1px solid #e5e7eb; } @media (max-width: 900px) { .api-overview-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .api-overview-resources { grid-template-columns: 1fr; } } html.dark .api-overview-resources, [data-theme='dark'] .api-overview-resources { border-top-color: #374151; } .api-overview-resource-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px; text-decoration: none !important; color: inherit; border-radius: 12px; border: 1px solid transparent; transition: border-color 0.15s ease, background 0.12s ease; } .api-overview-resource-tile:hover { border-color: #e5e7eb; background: #fafafa; } html.dark .api-overview-resource-tile:hover, [data-theme='dark'] .api-overview-resource-tile:hover { border-color: #374151; background: #18181b; } .api-overview-resource-tile--card { align-items: flex-start; text-align: left; border: 1px solid #e5e7eb; padding: 18px 16px; position: relative; } .api-overview-resource-tile--card::after { content: '↗'; position: absolute; top: 14px; right: 14px; font-size: 13px; opacity: 0.5; } html.dark .api-overview-resource-tile--card, [data-theme='dark'] .api-overview-resource-tile--card { border-color: #374151; } .api-overview-resource-tile img { margin-bottom: 10px; opacity: 0.92; } html.dark .api-overview-resource-tile img, [data-theme='dark'] .api-overview-resource-tile img { filter: invert(1); opacity: 0.9; } .api-overview-resource-title { font-size: 14px; font-weight: 600; color: var(--suki-light-text); margin-bottom: 6px; } html.dark .api-overview-resource-title, [data-theme='dark'] .api-overview-resource-title { color: var(--suki-dark-text); } .api-overview-resource-desc { font-size: 13px; line-height: 1.45; color: var(--suki-light-text-body); margin: 0; } html.dark .api-overview-resource-desc, [data-theme='dark'] .api-overview-resource-desc { color: #a1a19f; } /* * API overview (`api-overview/overview.mdx`): `.hp-wrap` home rail + cream cards (same tokens as documentation/home). */ #content-area .hp-wrap.api-overview-wrap { background: #fffffd; box-sizing: border-box; /* Match `.hp-wrap` horizontal rail with Home (avoid extra 40px gutters that narrow the hero). */ padding: 28px clamp(16px, 3vw, 32px) 56px; width: 100%; /* Column cap comes from the shared home-rail rule, not max-width: 100%. */ min-width: 0; } /* Tutorial frame pages: tighter top so the cream banner sits closer to the navbar */ #content-area .hp-wrap.api-overview-wrap.docs-frame-wrap { padding-top: 16px; padding-bottom: 40px; } /* * Cookbook recipe pages (`mode: frame` + `.cb-recipe-wrap`): more space above the title * on laptop/desktop. Keep the tighter 16px top on small screens. */ @media (min-width: 768px) { #content-area .hp-wrap.api-overview-wrap.docs-frame-wrap.cb-recipe-wrap { padding-top: 2.5rem; } } @media (min-width: 1024px) { #content-area .hp-wrap.api-overview-wrap.docs-frame-wrap.cb-recipe-wrap { padding-top: 3rem; } } html.dark #content-area .hp-wrap.api-overview-wrap, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap { background: #0a0a0a; } @media (max-width: 640px) { #content-area .hp-wrap.api-overview-wrap { padding-left: 24px; padding-right: 24px; } } /* * Shared docs hubs (Release notes, Glossary, Cookbooks, Tutorials): * outer `*-hp-wrap` rail + inner `.sdk-overview-container` with padding zeroed. */ #content-area .hp-wrap.release-notes-hp-wrap, #content-area .hp-wrap.glossary-hp-wrap, #content-area .hp-wrap.cookbook-hp-wrap, #content-area .hp-wrap.tut-hub-hp-wrap { background: #fffffd; box-sizing: border-box; padding: 32px 40px 56px; width: 100%; } html.dark #content-area .hp-wrap.release-notes-hp-wrap, html.dark #content-area .hp-wrap.glossary-hp-wrap, html.dark #content-area .hp-wrap.cookbook-hp-wrap, html.dark #content-area .hp-wrap.tut-hub-hp-wrap, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap, [data-theme='dark'] #content-area .hp-wrap.glossary-hp-wrap, [data-theme='dark'] #content-area .hp-wrap.cookbook-hp-wrap, [data-theme='dark'] #content-area .hp-wrap.tut-hub-hp-wrap { background: #0a0a0a; } @media (max-width: 968px) { #content-area .hp-wrap.release-notes-hp-wrap, #content-area .hp-wrap.glossary-hp-wrap, #content-area .hp-wrap.cookbook-hp-wrap, #content-area .hp-wrap.tut-hub-hp-wrap { padding: 24px 24px 40px; } } @media (max-width: 640px) { #content-area .hp-wrap.release-notes-hp-wrap, #content-area .hp-wrap.glossary-hp-wrap, #content-area .hp-wrap.cookbook-hp-wrap, #content-area .hp-wrap.tut-hub-hp-wrap { padding: 16px 24px 32px; } } #content-area .hp-wrap.release-notes-hp-wrap .sdk-overview-container.release-notes-container, #content-area .hp-wrap.glossary-hp-wrap .sdk-overview-container, #content-area .hp-wrap.cookbook-hp-wrap .sdk-overview-container, #content-area .hp-wrap.tut-hub-hp-wrap .sdk-overview-container { background: transparent; padding: 0; } /* * Framed tutorial hub (overview) and shared tutorial callout meta badges. * Content tutorial pages use default Mintlify layout (no frame wrap). */ /* Tutorial time / difficulty badges inside What you will build */ #content-area .doc-tutorial-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0.75rem; } #content-area .doc-tutorial-meta .badge, #content-area .doc-tutorial-meta [class*='Badge'] { margin: 0; } /* * Partners overview "What you can build" Mintlify Tiles: * Match Explore SDKs / APIs `.hp-io-method-card-hero` (cream + dot grid, brand icon). * Scope: only .doc-partners-build-tiles (overview.mdx), not tutorial language tiles. */ #content-area .doc-partners-build-tiles [data-component-part='tile-children-container'] { background-color: #fffade !important; background-image: radial-gradient(rgba(111, 84, 16, 0.085) 1px, transparent 1px) !important; background-size: 14px 14px !important; border: 1px solid rgba(111, 84, 16, 0.14) !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(40, 39, 37, 0.05); } html.dark #content-area .doc-partners-build-tiles [data-component-part='tile-children-container'], html[data-theme='dark'] #content-area .doc-partners-build-tiles [data-component-part='tile-children-container'], [data-theme='dark'] #content-area .doc-partners-build-tiles [data-component-part='tile-children-container'] { background-color: #1c1b19 !important; background-image: radial-gradient(rgba(255, 225, 72, 0.12) 1px, transparent 1px) !important; border-color: rgba(255, 225, 72, 0.14) !important; box-shadow: none; } /* Hide Mintlify plus-grid overlays; hero uses the same radial dots as method cards */ #content-area .doc-partners-build-tiles [data-component-part='tile-background-light'], #content-area .doc-partners-build-tiles [data-component-part='tile-background-dark'] { display: none !important; } #content-area .doc-partners-build-tiles [data-component-part='tile-children-inner-container'] > svg.icon { background-color: #6f5410 !important; } html.dark #content-area .doc-partners-build-tiles [data-component-part='tile-children-inner-container'] > svg.icon, html[data-theme='dark'] #content-area .doc-partners-build-tiles [data-component-part='tile-children-inner-container'] > svg.icon, [data-theme='dark'] #content-area .doc-partners-build-tiles [data-component-part='tile-children-inner-container'] > svg.icon { background-color: #ffe148 !important; } /* Full code: Mintlify Columns + Tile language picker (one panel visible) */ #content-area .doc-tutorial-full-code { margin: 0.75rem 0 1.5rem; } /* Icon-only language tiles (no title / description text) */ #content-area .doc-tutorial-full-code a[href^='#full-example-'] { display: flex; align-items: center; justify-content: center; text-align: center; } #content-area .doc-tutorial-full-code a[href^='#full-example-'] [data-component-part='tile-children-container'], #content-area .doc-tutorial-full-code a[href^='#full-example-'] .h-\[170px\] { position: relative; height: 5.25rem !important; min-height: 5.25rem; max-height: 5.25rem; overflow: hidden; } #content-area .doc-tutorial-full-code a[href^='#full-example-'] [data-component-part='tile-children-inner-container'] { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; width: 100% !important; height: 100% !important; max-height: 100% !important; } #content-area .doc-tutorial-full-code a[href^='#full-example-'] h2, #content-area .doc-tutorial-full-code a[href^='#full-example-'] h3, #content-area .doc-tutorial-full-code a[href^='#full-example-'] h4, #content-area .doc-tutorial-full-code a[href^='#full-example-'] p, #content-area .doc-tutorial-full-code a[href^='#full-example-'] [class*='title'], #content-area .doc-tutorial-full-code a[href^='#full-example-'] [class*='description'] { display: none !important; } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon { display: block; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; margin: 0 !important; transform: translate(-50%, -50%); color: #6f5410; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } html.dark #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon, [data-theme='dark'] #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon { color: #ffe148; } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon[data-icon='python'] { -webkit-mask-image: url('/documentation/assets/lang-icons/python.svg'); mask-image: url('/documentation/assets/lang-icons/python.svg'); } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon[data-icon='typescript'] { -webkit-mask-image: url('/documentation/assets/lang-icons/typescript.svg'); mask-image: url('/documentation/assets/lang-icons/typescript.svg'); } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon[data-icon='go'] { -webkit-mask-image: url('/documentation/assets/lang-icons/go.svg'); mask-image: url('/documentation/assets/lang-icons/go.svg'); } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon[data-icon='react'] { -webkit-mask-image: url('/documentation/assets/lang-icons/react.svg'); mask-image: url('/documentation/assets/lang-icons/react.svg'); } /* Active Mintlify Tile (script adds .is-active on the tile link) */ #content-area .doc-tutorial-full-code a[href^='#full-example-'].is-active { outline: 2px solid #ffe148; outline-offset: 2px; border-radius: 0.85rem; } /* * Mobile: Columns stacks to 1 col (full-width tiles). Keep that stack but * shrink tile + icon height so three language chips do not dominate the viewport. */ @media (max-width: 639px) { #content-area .doc-tutorial-full-code .columns, #content-area .doc-tutorial-full-code [class*='columns'] { row-gap: 0.5rem !important; } #content-area .doc-tutorial-full-code a[href^='#full-example-'] [data-component-part='tile-children-container'], #content-area .doc-tutorial-full-code a[href^='#full-example-'] .h-\[170px\] { height: 2.75rem !important; min-height: 2.75rem; max-height: 2.75rem; } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon { width: 1.5rem; height: 1.5rem; } #content-area .doc-tutorial-full-code a[href^='#full-example-'].is-active { outline-offset: 1px; border-radius: 0.65rem; } } #content-area .doc-tutorial-lang-panel[hidden] { display: none !important; } #content-area .hp-wrap.docs-frame-wrap > .sdk-overview-main-title.release-notes-main-heading { margin-bottom: 0; } #content-area .hp-wrap.docs-frame-wrap > span[data-as='p'], #content-area .hp-wrap.docs-frame-wrap > p { display: block; margin: 0 0 1rem; font-size: 16px; line-height: 1.55; color: var(--suki-light-text-body); } html.dark #content-area .hp-wrap.docs-frame-wrap > span[data-as='p'], html.dark #content-area .hp-wrap.docs-frame-wrap > p, [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > span[data-as='p'], [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > p { color: var(--suki-dark-text-body); } /* * Frame pages skip Mintlify prose, so links lose the default `.link` treatment. * Match standard docs pages: body-colored text, weight 600, primary bottom border. * Cookbook recipe pages (`.cb-recipe-wrap`) already wrap body copy in `.prose` — * keep Mintlify’s default `.link` styles there; do not apply this frame override. */ #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a.link, #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a:not([class*='hp-']):not([class*='cta']):not([class*='method']) { color: var(--suki-light-text); font-weight: 600; text-decoration: none !important; border-bottom: 1px solid #6f5410; box-shadow: none !important; } #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a.link:hover, #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a:not([class*='hp-']):not([class*='cta']):not([class*='method']):hover { border-bottom-color: #6f5410; opacity: 0.85; } html.dark #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a.link, html.dark #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a:not([class*='hp-']):not([class*='cta']):not([class*='method']), [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a.link, [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a:not([class*='hp-']):not([class*='cta']):not([class*='method']) { color: var(--suki-dark-text); border-bottom-color: #ffe148; } /* Section titles: same rhythm as API overview / home journey headings */ #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4) { color: var(--suki-light-text); font-size: clamp(1.35rem, 2.5vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin: 2rem 0 0.75rem; } html.dark #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4), [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4) { color: var(--suki-dark-text); } #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4) + span[data-as='p'], #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4) + p { margin-top: 0; } #content-area .hp-wrap.docs-frame-wrap > :is(ul, ol) { margin: 0.75rem 0 1.25rem; font-size: 16px; line-height: 1.55; color: var(--suki-light-text-body); } html.dark #content-area .hp-wrap.docs-frame-wrap > :is(ul, ol), [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > :is(ul, ol) { color: var(--suki-dark-text-body); } /* * Frame pages omit Mintlify `prose`, so Tailwind preflight leaves ul/ol with no markers. * Restore the same bullet/number treatment as normal doc pages. */ #content-area .hp-wrap.docs-frame-wrap > ul { list-style: none !important; padding-left: 0 !important; } #content-area .hp-wrap.docs-frame-wrap > ul > li { position: relative; display: list-item !important; list-style: none !important; padding-left: 32px !important; margin-bottom: 0.5rem; } #content-area .hp-wrap.docs-frame-wrap > ul > li::before { content: '' !important; display: block !important; position: absolute; left: 8px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: #535250; } html.dark #content-area .hp-wrap.docs-frame-wrap > ul > li::before, [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > ul > li::before { background: #a1a09c; } #content-area .hp-wrap.docs-frame-wrap > ol { list-style-type: decimal !important; list-style-position: outside !important; padding-left: 1.5rem !important; } #content-area .hp-wrap.docs-frame-wrap > ol > li { display: list-item !important; list-style-type: decimal !important; padding-left: 0.35rem !important; margin-bottom: 0.5rem; } /* Callout / tip lists inside the framed tutorial */ #content-area .hp-wrap.docs-frame-wrap .callout ul, #content-area .hp-wrap.docs-frame-wrap [data-component-part='callout'] ul { list-style: none !important; padding-left: 0 !important; margin: 0.5rem 0 0; } #content-area .hp-wrap.docs-frame-wrap .callout ul > li, #content-area .hp-wrap.docs-frame-wrap [data-component-part='callout'] ul > li { position: relative; display: list-item !important; list-style: none !important; padding-left: 28px !important; margin-bottom: 0.4rem; } #content-area .hp-wrap.docs-frame-wrap .callout ul > li::before, #content-area .hp-wrap.docs-frame-wrap [data-component-part='callout'] ul > li::before { content: '' !important; display: block !important; position: absolute; left: 6px; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.55; } #content-area .hp-wrap.docs-frame-wrap .hp-io-method-grid { margin-top: 1.25rem; margin-bottom: 0; } /* ===== Tutorials landing hub (`documentation/tutorials/overview.mdx`) ===== */ #content-area .tut-hub-wrap { --tut-main: hsla(0, 0%, 11%, 1); --tut-text-mid: hsla(0, 0%, 29%, 1); --tut-text-low: hsla(0, 0%, 47%, 1); color: var(--tut-main); } html.dark #content-area .tut-hub-wrap, [data-theme='dark'] #content-area .tut-hub-wrap { --tut-main: #e1e1de; /* Mintlify dark:text-gray-200 */ --tut-text-mid: #d1d0ce; /* gray-300 */ --tut-text-low: #a1a19f; /* gray-400 */ color: var(--tut-main); } #content-area .tut-hub-wrap .tut-hub-intro { margin: 0 0 1.75rem; } #content-area .tut-hub-toolbar { margin: 0 0 2.25rem; } #content-area .tut-hub-filter-row { width: 100%; } #content-area .tut-hub-wrap .release-notes-filter-dropdown-list { /* Keep options inset from the panel edge so icons/labels are not flush left. */ padding: 0.5rem; } #content-area .tut-hub-wrap .release-notes-filter-dropdown-list .release-notes-product-tab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.7rem 1rem; border-radius: 0.65rem; } #content-area .tut-hub-filter-opt-label { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; text-align: left; } #content-area .tut-hub-filter-opt-icon { display: inline-flex; width: 1rem; height: 1rem; flex-shrink: 0; color: var(--tut-text-mid); } #content-area .tut-hub-filter-opt-icon svg { display: block; width: 1rem; height: 1rem; } #content-area .tut-hub-wrap .release-notes-product-tab--active .tut-hub-filter-opt-icon, #content-area .tut-hub-wrap .release-notes-product-tab:hover .tut-hub-filter-opt-icon { color: var(--tut-main); } #content-area .tut-hub-filter-opt-count { flex-shrink: 0; font-size: 0.8125rem; font-weight: 650; color: var(--tut-text-low); font-variant-numeric: tabular-nums; } #content-area .tut-hub-section { margin: 0 0 2.75rem; } #content-area .tut-hub-section-title { margin: 0 0 1.1rem !important; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.3 !important; color: var(--tut-main) !important; } #content-area .tut-hub-section-lead { margin: -0.35rem 0 1.15rem !important; max-width: min(42rem, 100%); font-size: 0.9375rem; line-height: 1.55; font-weight: 500; color: var(--tut-text-mid); } #content-area .tut-hub-filter-note { margin: 0 0 0.85rem !important; font-size: 0.875rem; color: var(--tut-text-low); } #content-area .tut-hub-card-grid.hp-io-method-grid { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.35rem; align-items: stretch; } #content-area .tut-hub-card-grid.hp-io-method-grid a.hp-io-method-card.tut-hub-method-card { height: 100%; } #content-area .tut-hub-card-grid[data-tut-all-grid] .hp-io-method-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.35em * 2); } #content-area .tut-hub-card-grid[data-tut-all-grid] .hp-io-method-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.5em * 2); } /* Other / Available promo grids: 2-up (hub all-list keeps 3 via data-tut-all-grid) */ #content-area .tut-hub-card-grid.hp-io-method-grid:not([data-tut-all-grid]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 980px) { #content-area .tut-hub-card-grid.hp-io-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #content-area .tut-hub-card-grid.hp-io-method-grid, #content-area .tut-hub-card-grid.hp-io-method-grid:not([data-tut-all-grid]) { grid-template-columns: minmax(0, 1fr); } } /* Hide extras until Load more reveals them in batches of 4 ([data-tut-shown]). * data-tut-collapsed is set in MDX on first paint (same as tutorials hub). */ #content-area .tut-hub-card-grid[data-tut-collapsed] [data-tut-extra]:not([data-tut-shown]) { display: none !important; } #content-area .tut-hub-wrap [data-tut-load-more][hidden] { display: none !important; } /* Hub + Other/Available tutorial link cards (media + foot; not hero + Start button) */ #content-area a.hp-io-method-card.tut-hub-method-card { display: grid; grid-template-rows: 1fr 1fr; /* normal: 50% media / 50% body */ grid-template-columns: minmax(0, 1fr); text-decoration: none !important; color: inherit !important; border-radius: 12px; overflow: hidden; isolation: isolate; min-height: 24rem; transition: box-shadow 0.15s ease, transform 0.15s ease; } #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card { grid-template-rows: 3fr 2fr; /* featured: 60% media / 40% body */ min-height: 32rem; } #content-area a.hp-io-method-card.tut-hub-method-card:hover { border-color: rgba(111, 84, 16, 0.14); box-shadow: 0 8px 22px rgba(40, 39, 37, 0.12); transform: translateY(-1px); } html.dark #content-area a.hp-io-method-card.tut-hub-method-card:hover, [data-theme='dark'] #content-area a.hp-io-method-card.tut-hub-method-card:hover { border-color: rgba(255, 225, 72, 0.14); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } /* * White body sits above the window and hides its bottom edge * (Claude Academy tuck — window is not a floating 4-edge card). */ #content-area a.hp-io-method-card.tut-hub-method-card > .hp-io-method-card-body { position: relative; z-index: 2; grid-row: 2; min-height: 0; overflow: hidden; border-radius: 0; background: #ffffff; } html.dark #content-area a.hp-io-method-card.tut-hub-method-card > .hp-io-method-card-body, [data-theme='dark'] #content-area a.hp-io-method-card.tut-hub-method-card > .hp-io-method-card-body { background: #1c1917; } #content-area .tut-hub-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.55rem; } #content-area .tut-hub-card-badges .hp-wn-badge { margin: 0; } /* Cookbooks hub: surface badges match yellow workflow pills (shape/type), tinted by surface */ #content-area .cookbook-hub-badge-surface { align-items: center; align-self: flex-start; border: none !important; border-radius: 3px !important; display: inline-flex !important; font-size: 0.6875rem !important; font-weight: 750 !important; justify-content: center; letter-spacing: 0.09em !important; line-height: 1.1 !important; margin: 0 !important; padding: 0.24rem 0.55rem !important; text-transform: uppercase; white-space: nowrap; } #content-area .cookbook-hub-badge-surface::before { content: none !important; display: none !important; } #content-area .cookbook-hub-badge-surface--api { background: #dbeafe !important; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.22) !important; color: #1e3a8a !important; } #content-area .cookbook-hub-badge-surface--sdk { background: #d1fae5 !important; box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.22) !important; color: #065f46 !important; } #content-area .cookbook-hub-badge-surface--tutorial { background: #ede9fe !important; box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.22) !important; color: #5b21b6 !important; } html.dark #content-area .cookbook-hub-badge-surface--api, [data-theme='dark'] #content-area .cookbook-hub-badge-surface--api { background: rgba(59, 130, 246, 0.22) !important; box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35) !important; color: #bfdbfe !important; } html.dark #content-area .cookbook-hub-badge-surface--sdk, [data-theme='dark'] #content-area .cookbook-hub-badge-surface--sdk { background: rgba(16, 185, 129, 0.22) !important; box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.35) !important; color: #a7f3d0 !important; } html.dark #content-area .cookbook-hub-badge-surface--tutorial, [data-theme='dark'] #content-area .cookbook-hub-badge-surface--tutorial { background: rgba(139, 92, 246, 0.22) !important; box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.35) !important; color: #ddd6fe !important; } #content-area .cookbook-hub-featured-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 2rem; align-items: stretch; width: 100%; } @media (min-width: 900px) { #content-area .cookbook-hub-featured-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #content-area .cookbook-hub-featured-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; } #content-area .cookbook-hub-col-title { margin: 0 0 0.85rem !important; } #content-area .cookbook-hub-featured-list { display: flex; flex-direction: column; gap: 1rem; flex: 1 1 auto; min-height: 0; } /* Featured list cards: roomier height; footer = badge + time | langs */ #content-area a.cookbook-hub-list-card { display: flex; flex-direction: column; gap: 0.4rem; flex: 0 0 auto; min-height: 0; padding: 1.15rem 1.25rem 1.1rem; border-radius: 12px; border: 1px solid #d4d4d8 !important; background: #ffffff !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; color: inherit !important; transition: background-color 0.15s ease; } html.dark #content-area a.cookbook-hub-list-card, [data-theme='dark'] #content-area a.cookbook-hub-list-card { background: transparent !important; border-color: #2a2320 !important; } #content-area a.cookbook-hub-list-card:hover, #content-area a.cookbook-hub-list-card:focus, #content-area a.cookbook-hub-list-card:focus-visible { border-color: #d4d4d8 !important; background: #f9fafb !important; box-shadow: none !important; transform: none !important; outline: none !important; } html.dark #content-area a.cookbook-hub-list-card:hover, html.dark #content-area a.cookbook-hub-list-card:focus, html.dark #content-area a.cookbook-hub-list-card:focus-visible, [data-theme='dark'] #content-area a.cookbook-hub-list-card:hover, [data-theme='dark'] #content-area a.cookbook-hub-list-card:focus, [data-theme='dark'] #content-area a.cookbook-hub-list-card:focus-visible { border-color: #2a2320 !important; background: #0b0c0e !important; box-shadow: none !important; transform: none !important; } #content-area .cookbook-hub-list-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; } #content-area .cookbook-hub-list-card-title { margin: 0 !important; font-size: 0.975rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.012em; color: var(--suki-light-text) !important; } html.dark #content-area .cookbook-hub-list-card-title, [data-theme='dark'] #content-area .cookbook-hub-list-card-title { color: var(--suki-dark-text) !important; } #content-area .cookbook-hub-list-card-desc { margin: 0.45rem 0 0 !important; font-size: 0.875rem; line-height: 1.5; color: var(--suki-light-text-muted); } html.dark #content-area .cookbook-hub-list-card-desc, [data-theme='dark'] #content-area .cookbook-hub-list-card-desc { color: var(--suki-dark-text-muted); } #content-area .cookbook-hub-list-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; margin-top: 0.55rem; } #content-area .cookbook-hub-list-card-foot .tut-hub-card-foot-meta { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; } #content-area .cookbook-hub-list-card-foot .hp-wn-badge { margin: 0 !important; flex-shrink: 0; } #content-area .cookbook-hub-list-card-foot .tut-hub-lang-icons { justify-content: flex-end; margin: 0; } /* Spotlight: same window media as Tutorials; fills column with left stack */ #content-area .cookbook-hub-spotlight-card { display: grid; grid-template-rows: 3fr 2fr; grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; height: 100%; min-height: 28rem; overflow: hidden; isolation: isolate; border-radius: 12px; } #content-area .cookbook-hub-spotlight-card .tut-hub-card-media { grid-row: 1; overflow: visible !important; } #content-area .cookbook-hub-spotlight-card .hp-io-method-card-body { position: relative; z-index: 2; grid-row: 2; min-height: 0; overflow: hidden; gap: 0.55rem; padding: 0.9rem 1rem 0.85rem; border-radius: 0; background: #ffffff; } html.dark #content-area .cookbook-hub-spotlight-card .hp-io-method-card-body, [data-theme='dark'] #content-area .cookbook-hub-spotlight-card .hp-io-method-card-body { background: #1c1917; } #content-area .cookbook-hub-spotlight-card .hp-io-method-card-title { font-size: 1.05rem !important; line-height: 1.3 !important; } #content-area .cookbook-hub-spotlight-card .hp-io-method-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 0.875rem; line-height: 1.45; } #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-all-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.85rem; } /* Related cookbooks on recipe pages (max 2) */ #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-related-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.85rem; } /* * Cookbook / related cards: same window media as Tutorials hub. * Title-first scan path kept via compact body padding below. */ #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card, #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card { border-color: #d4d4d8; border-radius: 12px; background: #ffffff; box-shadow: none; overflow: hidden; isolation: isolate; min-height: 22rem; } html.dark #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card, html.dark #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card { border-color: #2a2320; background: transparent; box-shadow: none; } /* Same lift + shadow as shared tut-hub cards (must beat resting box-shadow: none). */ #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card:hover, #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card:hover { border-color: rgba(111, 84, 16, 0.14); box-shadow: 0 8px 22px rgba(40, 39, 37, 0.12); transform: translateY(-1px); } html.dark #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card:hover, html.dark #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card:hover, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card:hover, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card:hover { border-color: rgba(255, 225, 72, 0.14); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } #content-area .tut-hub-card-grid[data-cookbook-all-grid] .hp-io-method-card-body, #content-area .tut-hub-card-grid[data-cookbook-related-grid] .hp-io-method-card-body { position: relative; z-index: 2; grid-row: 2; gap: 0.55rem; padding: 0.95rem 1.15rem 1rem; min-height: 0; overflow: hidden; border-radius: 0; background: #ffffff; } html.dark #content-area .tut-hub-card-grid[data-cookbook-all-grid] .hp-io-method-card-body, html.dark #content-area .tut-hub-card-grid[data-cookbook-related-grid] .hp-io-method-card-body, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-all-grid] .hp-io-method-card-body, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-related-grid] .hp-io-method-card-body { background: #1c1917; } #content-area .tut-hub-card-grid[data-cookbook-all-grid] .hp-io-method-card-title, #content-area .tut-hub-card-grid[data-cookbook-related-grid] .hp-io-method-card-title { font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.015em; margin-bottom: 0.3rem !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.35em * 2); } #content-area .tut-hub-card-grid[data-cookbook-all-grid] .hp-io-method-card-desc, #content-area .tut-hub-card-grid[data-cookbook-related-grid] .hp-io-method-card-desc { margin-top: 0.15rem !important; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.5em * 2); } #content-area .tut-hub-card-grid[data-cookbook-all-grid] .tut-hub-card-badges, #content-area .tut-hub-card-grid[data-cookbook-related-grid] .tut-hub-card-badges { margin: 0; } #content-area .cookbook-hub-wrap .cookbook-hub-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.45; max-height: 2.9em; margin: 0; font-size: 0.875rem; color: var(--suki-light-text-muted); } html.dark #content-area .cookbook-hub-wrap .cookbook-hub-card-desc, [data-theme='dark'] #content-area .cookbook-hub-wrap .cookbook-hub-card-desc { color: var(--suki-dark-text-muted); } @media (max-width: 1200px) { #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-all-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.6rem; } } @media (max-width: 980px) { #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-all-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-all-grid], #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-related-grid] { grid-template-columns: minmax(0, 1fr); } } #content-area .tut-hub-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; margin-top: auto; flex-wrap: nowrap; } #content-area .tut-hub-card-foot-meta { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; } #content-area .tut-hub-level { font-size: 13px; line-height: 1.4; font-weight: 500; color: #6b6966; text-transform: none; letter-spacing: 0; } html.dark #content-area .tut-hub-level, [data-theme='dark'] #content-area .tut-hub-level { color: var(--suki-dark-text-muted); } #content-area .tut-hub-lang-icons { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.55rem; margin: 0; flex-shrink: 0; } #content-area .tut-hub-lang-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; color: #6f5410; background: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; } #content-area .tut-hub-lang-icon svg { width: 100%; height: 100%; display: block; } html.dark #content-area .tut-hub-lang-icon, [data-theme='dark'] #content-area .tut-hub-lang-icon { color: #ffe148; } #content-area .tut-hub-featured-grid { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (min-width: 520px) { #content-area .tut-hub-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; } } /* * Tutorial / cookbook card media: pastel band + window tucked under body. * Stage hangs below the media row; white body (z-index 2) covers the window bottom. */ #content-area .tut-hub-card-media { display: block; position: relative; grid-row: 1; width: calc(100% + 2px); max-width: none; margin: -1px -1px 0; padding: 0; overflow: visible !important; line-height: 1.2; aspect-ratio: unset; height: auto; min-height: 0; max-height: none; background: #fcf49e; border: 0; box-sizing: border-box; color: var(--suki-light-text); z-index: 0; } #content-area .tut-hub-card-media--blue { background: #b9dffe; } #content-area .tut-hub-card-media:empty { display: none !important; } /* Keep empty solid plates visible until tut-card-media.js injects the window. */ #content-area .tut-hub-card-media.tut-hub-card-media--solid:empty { display: block !important; } /* Spotlight empty fallback (TutCardMedia normally fills this). */ #content-area .cookbook-hub-wrap .cookbook-hub-spotlight-media:empty { display: block !important; } #content-area .tut-hub-card-media.tut-hub-card-media--shot { display: block; background: #f3f0e6; padding: 0; overflow: hidden !important; } #content-area .tut-hub-card-media.tut-hub-card-media--shot::before { content: none; display: none; } #content-area .tut-hub-card-media.tut-hub-card-media--shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border: 0; } #content-area .tut-hub-card-media::after { content: none; } /* Stage extends below pastel so the window can sit under the white body */ #content-area .tut-hub-card-media-stage { position: absolute; left: 0; right: 0; top: 0; bottom: -3.5rem; display: flex; align-items: flex-end; justify-content: center; padding: 1.25rem 1.15rem 0; box-sizing: border-box; overflow: visible; pointer-events: none; } /* * Claude Academy tuck: top corners only; bottom edge hidden under white body. */ #content-area .tut-hub-card-media-window { display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; width: 78%; max-width: 20rem; height: calc(100% - 1.25rem); min-height: 0; max-height: none; flex: 0 0 auto; align-self: center; background: #ffffff; border: 1px solid rgba(40, 39, 37, 0.08); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 1px 2px rgba(40, 39, 37, 0.05), 0 18px 36px rgba(40, 39, 37, 0.14); transform-origin: bottom center; transition: transform 0.3s ease; overflow: hidden; color: var(--suki-light-text); margin: 0; padding-bottom: 3.25rem; pointer-events: auto; } #content-area .tut-hub-featured-grid .tut-hub-card-media-stage, #content-area .cookbook-hub-spotlight-card .tut-hub-card-media-stage { bottom: -4rem; padding: 1.5rem 1.35rem 0; } #content-area .tut-hub-featured-grid .tut-hub-card-media-window, #content-area .cookbook-hub-spotlight-card .tut-hub-card-media-window { width: 72%; max-width: 24rem; height: calc(100% - 1.5rem); padding-bottom: 3.75rem; } #content-area a.hp-io-method-card.tut-hub-method-card:hover .tut-hub-card-media-window { transform: scale(1.02); } #content-area .tut-hub-card-media-chrome { display: flex; align-items: center; gap: 0.28rem; padding: 0.42rem 0.55rem 0.2rem; flex: 0 0 auto; } #content-area .tut-hub-card-media-chrome span { display: block; width: 0.38rem; height: 0.38rem; border-radius: 999px; background: #d4d4d8; flex: 0 0 auto; } #content-area .tut-hub-card-media-chrome span:nth-child(1) { background: #f87171; } #content-area .tut-hub-card-media-chrome span:nth-child(2) { background: #fbbf24; } #content-area .tut-hub-card-media-chrome span:nth-child(3) { background: #4ade80; } /* Contextual mini-UI graphics — fill the fixed window; clip overflow */ #content-area .tut-hub-ui { display: flex; flex-direction: column; justify-content: center; gap: 0.28rem; padding: 0.1rem 0.55rem 0.2rem; flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5625rem; line-height: 1.25; color: rgba(40, 39, 37, 0.72); } #content-area .tut-hub-ui-row { display: flex; align-items: center; gap: 0.35rem; } #content-area .tut-hub-ui-live { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18); flex: 0 0 auto; } #content-area .tut-hub-ui-label { font-family: inherit; font-size: 0.5625rem; font-weight: 650; letter-spacing: 0.02em; color: rgba(40, 39, 37, 0.55); text-transform: uppercase; } #content-area .tut-hub-ui-wave { display: flex; align-items: flex-end; justify-content: center; gap: 0.22rem; height: 1.85rem; margin: 0.15rem 0 0.2rem; } #content-area .tut-hub-ui-wave span { display: block; width: 0.28rem; border-radius: 999px; background: currentColor; opacity: 0.85; } #content-area .tut-hub-ui-wave span:nth-child(1) { height: 35%; } #content-area .tut-hub-ui-wave span:nth-child(2) { height: 62%; } #content-area .tut-hub-ui-wave span:nth-child(3) { height: 100%; } #content-area .tut-hub-ui-wave span:nth-child(4) { height: 48%; } #content-area .tut-hub-ui-wave span:nth-child(5) { height: 78%; } #content-area .tut-hub-ui-wave span:nth-child(6) { height: 40%; } #content-area .tut-hub-ui-wave span:nth-child(7) { height: 58%; } #content-area .tut-hub-ui-note { display: flex; flex-direction: column; gap: 0.22rem; } #content-area .tut-hub-ui-note span { display: block; height: 0.28rem; border-radius: 3px; background: rgba(40, 39, 37, 0.1); } #content-area .tut-hub-ui-note span:nth-child(1) { width: 88%; } #content-area .tut-hub-ui-note span:nth-child(2) { width: 72%; } #content-area .tut-hub-ui-note span:nth-child(3) { width: 54%; } /* Go backend: terminal fills chrome (no inset that reads as a smaller window) */ #content-area .tut-hub-ui--go { background: #171412; color: #e7e5e4; border-radius: 0; padding: 0.55rem 0.65rem 0.65rem; gap: 0.28rem; margin: 0; flex: 1 1 auto; min-height: 0; justify-content: center; } #content-area .tut-hub-ui-terminal { display: flex; gap: 0.35rem; align-items: baseline; margin-bottom: 0.15rem; } #content-area .tut-hub-ui-prompt { color: #4ade80; font-weight: 700; } #content-area .tut-hub-ui-cmd { color: #fafaf9; } #content-area .tut-hub-ui-term-line { color: #a8a29e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content-area .tut-hub-ui-term-ok { color: #86efac; } #content-area .tut-hub-ui-term-mute { color: #78716c; } /* Dictation stream: mic + transcript */ #content-area .tut-hub-ui--dictation { gap: 0.4rem; } #content-area .tut-hub-ui-mic-wrap { display: flex; justify-content: center; padding: 0.15rem 0 0.1rem; } #content-area .tut-hub-card-media-icon.tut-hub-card-media-icon--inline { display: block; width: 1.35rem; height: 1.35rem; margin: 0; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #content-area .tut-hub-scene--dictation .tut-hub-card-media-icon--inline, #content-area .tut-hub-card-media--dictation .tut-hub-card-media-icon--inline { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M12 15.25a3.25 3.25 0 0 0 3.25-3.25V6.75a3.25 3.25 0 0 0-6.5 0v5.25A3.25 3.25 0 0 0 12 15.25Z'/%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M7.75 11.5a4.25 4.25 0 0 0 8.5 0M12 15.75v3.5M9.5 19.25h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M12 15.25a3.25 3.25 0 0 0 3.25-3.25V6.75a3.25 3.25 0 0 0-6.5 0v5.25A3.25 3.25 0 0 0 12 15.25Z'/%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M7.75 11.5a4.25 4.25 0 0 0 8.5 0M12 15.75v3.5M9.5 19.25h5'/%3E%3C/svg%3E"); } #content-area .tut-hub-ui-transcript { display: flex; flex-direction: column; gap: 0.28rem; background: rgba(40, 39, 37, 0.04); border-radius: 6px; padding: 0.4rem 0.45rem; } #content-area .tut-hub-ui-t-line { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5625rem; color: rgba(40, 39, 37, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content-area .tut-hub-ui-t-partial { color: rgba(40, 39, 37, 0.85); font-weight: 600; } /* Form fields */ #content-area .tut-hub-ui--form { gap: 0.38rem; padding-top: 0.35rem; } #content-area .tut-hub-ui-field { display: flex; align-items: center; gap: 0.4rem; } #content-area .tut-hub-ui-check { width: 0.7rem; height: 0.7rem; border-radius: 999px; background: #22c55e; box-shadow: inset 0 0 0 1.5px #fff; flex: 0 0 auto; position: relative; } #content-area .tut-hub-ui-check::after { content: ''; position: absolute; left: 0.18rem; top: 0.12rem; width: 0.22rem; height: 0.35rem; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } #content-area .tut-hub-ui-box { width: 0.7rem; height: 0.7rem; border-radius: 3px; border: 1.5px solid rgba(40, 39, 37, 0.22); flex: 0 0 auto; } #content-area .tut-hub-ui-field-fill { display: block; height: 0.55rem; flex: 1 1 auto; border-radius: 4px; background: rgba(40, 39, 37, 0.08); } #content-area .tut-hub-ui-field-fill--short { max-width: 55%; } #content-area .tut-hub-ui-field-fill--mid { max-width: 70%; } /* Web SDK: app + assistant panel */ #content-area .tut-hub-ui--sdk { padding-top: 0.25rem; } #content-area .tut-hub-ui-sdk-shell { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.35rem; min-height: 3.1rem; } #content-area .tut-hub-ui-sdk-main, #content-area .tut-hub-ui-sdk-panel { border-radius: 6px; background: rgba(40, 39, 37, 0.05); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; } #content-area .tut-hub-ui-sdk-panel { background: #fcf49e; border: 1px solid rgba(111, 84, 16, 0.12); } #content-area .tut-hub-ui-sdk-main span, #content-area .tut-hub-ui-sdk-panel span:not(.tut-hub-ui-live) { display: block; height: 0.28rem; border-radius: 3px; background: rgba(40, 39, 37, 0.12); } #content-area .tut-hub-ui-sdk-main span:nth-child(1) { width: 70%; } #content-area .tut-hub-ui-sdk-main span:nth-child(2) { width: 90%; } #content-area .tut-hub-ui-sdk-panel span:nth-child(2) { width: 85%; margin-top: 0.15rem; } #content-area .tut-hub-ui-sdk-panel span:nth-child(3) { width: 60%; } /* Headless hooks */ #content-area .tut-hub-ui--headless { gap: 0.28rem; padding-top: 0.3rem; } #content-area .tut-hub-ui-hook { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5625rem; padding: 0.32rem 0.45rem; border-radius: 5px; background: rgba(40, 39, 37, 0.05); color: rgba(40, 39, 37, 0.65); } #content-area .tut-hub-ui-hook--on { background: #fcf49e; color: #292524; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(111, 84, 16, 0.14); } /* Chart field dictation */ #content-area .tut-hub-ui--chart { gap: 0.3rem; padding-top: 0.25rem; } #content-area .tut-hub-ui-chart-label { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(40, 39, 37, 0.45); } #content-area .tut-hub-ui-chart-field { position: relative; border: 1px solid rgba(40, 39, 37, 0.14); border-radius: 6px; padding: 0.45rem 1.7rem 0.45rem 0.45rem; min-height: 2.35rem; background: #fff; } #content-area .tut-hub-ui-mic-fab { position: absolute; right: 0.35rem; bottom: 0.35rem; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: #171412; box-shadow: 0 0 0 2px #b9dffe; } #content-area .tut-hub-ui-mic-fab::after { content: ''; position: absolute; inset: 0.22rem; background: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 15.25a3.25 3.25 0 0 0 3.25-3.25V6.75a3.25 3.25 0 0 0-6.5 0v5.25A3.25 3.25 0 0 0 12 15.25Z'/%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7.75 11.5a4.25 4.25 0 0 0 8.5 0M12 15.75v3.5M9.5 19.25h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 15.25a3.25 3.25 0 0 0 3.25-3.25V6.75a3.25 3.25 0 0 0-6.5 0v5.25A3.25 3.25 0 0 0 12 15.25Z'/%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7.75 11.5a4.25 4.25 0 0 0 8.5 0M12 15.75v3.5M9.5 19.25h5'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Form → EHR handoff */ #content-area .tut-hub-ui--ehr { flex-direction: row; align-items: center; gap: 0.3rem; padding-top: 0.35rem; } #content-area .tut-hub-ui-ehr-card { flex: 1 1 0; border-radius: 6px; background: rgba(40, 39, 37, 0.05); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; } #content-area .tut-hub-ui-ehr-card span:not(.tut-hub-ui-check):not(.tut-hub-ui-ehr-tag) { display: block; height: 0.25rem; border-radius: 3px; background: rgba(40, 39, 37, 0.12); width: 80%; } #content-area .tut-hub-ui-ehr-card--dest { background: #b9dffe; } #content-area .tut-hub-ui-ehr-tag { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5rem; font-weight: 750; letter-spacing: 0.06em; color: #1e3a8a; } #content-area .tut-hub-ui-ehr-arrow { width: 0.7rem; height: 0.7rem; flex: 0 0 auto; background: currentColor; opacity: 0.35; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* PBC problem list */ #content-area .tut-hub-ui--pbc { gap: 0.28rem; padding-top: 0.25rem; } #content-area .tut-hub-ui-pbc-row { display: flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.4rem; border-radius: 5px; background: rgba(40, 39, 37, 0.05); } #content-area .tut-hub-ui-pbc-dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #6f5410; flex: 0 0 auto; } #content-area .tut-hub-ui-pbc-name { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5625rem; font-weight: 600; color: rgba(40, 39, 37, 0.78); } #content-area .tut-hub-ui-pbc-note { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.15rem 0.4rem 0; } #content-area .tut-hub-ui-pbc-note span { display: block; height: 0.25rem; border-radius: 3px; background: rgba(40, 39, 37, 0.1); } #content-area .tut-hub-ui-pbc-note span:nth-child(1) { width: 90%; } #content-area .tut-hub-ui-pbc-note span:nth-child(2) { width: 65%; } /* Webhook events */ #content-area .tut-hub-ui--webhook { gap: 0.28rem; padding-top: 0.25rem; } #content-area .tut-hub-ui-wh-row { display: flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.4rem; border-radius: 5px; background: rgba(40, 39, 37, 0.05); } #content-area .tut-hub-ui-wh-row--mute { opacity: 0.65; } #content-area .tut-hub-ui-wh-bell { width: 0.7rem; height: 0.7rem; flex: 0 0 auto; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M6.75 9.5a5.25 5.25 0 0 1 10.5 0c0 3.25 1.25 4.5 1.25 4.5H5.5s1.25-1.25 1.25-4.5Z'/%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M10 17.75a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M6.75 9.5a5.25 5.25 0 0 1 10.5 0c0 3.25 1.25 4.5 1.25 4.5H5.5s1.25-1.25 1.25-4.5Z'/%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M10 17.75a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #content-area .tut-hub-ui-wh-text { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; color: rgba(40, 39, 37, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content-area .tut-hub-ui-wh-row .tut-hub-ui-check { width: 0.6rem; height: 0.6rem; } /* Cookbook scenes */ #content-area .tut-hub-ui--share { gap: 0.4rem; padding-top: 0.3rem; } #content-area .tut-hub-ui-share-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; font-weight: 650; color: rgba(40, 39, 37, 0.55); letter-spacing: 0.02em; } #content-area .tut-hub-ui-share-row { display: flex; align-items: center; gap: 0.3rem; } #content-area .tut-hub-ui-share-chip { flex: 1 1 0; text-align: center; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5rem; font-weight: 650; padding: 0.35rem 0.25rem; border-radius: 5px; background: rgba(40, 39, 37, 0.06); color: rgba(40, 39, 37, 0.65); } #content-area .tut-hub-ui-share-chip--on { background: #fcf49e; color: #292524; box-shadow: inset 0 0 0 1px rgba(111, 84, 16, 0.14); } #content-area .tut-hub-ui--conflict { gap: 0.4rem; padding-top: 0.3rem; } #content-area .tut-hub-ui-conflict-banner { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5rem; font-weight: 650; padding: 0.35rem 0.45rem; border-radius: 5px; background: rgba(239, 68, 68, 0.12); color: #991b1b; } #content-area .tut-hub-ui-conflict-steps { display: flex; flex-direction: column; gap: 0.22rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; color: rgba(40, 39, 37, 0.6); } #content-area .tut-hub-ui--note-fetch { gap: 0.4rem; padding-top: 0.35rem; } #content-area .tut-hub-ui-note-id { align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; font-weight: 700; padding: 0.22rem 0.4rem; border-radius: 4px; background: #fcf49e; color: #292524; } #content-area .tut-hub-ui--poll { gap: 0.35rem; padding-top: 0.4rem; } #content-area .tut-hub-ui-poll-bar { height: 0.4rem; border-radius: 999px; background: rgba(40, 39, 37, 0.08); overflow: hidden; } #content-area .tut-hub-ui-poll-fill { display: block; width: 78%; height: 100%; border-radius: 999px; background: #22c55e; } #content-area .tut-hub-ui-poll-status { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; font-weight: 650; color: #15803d; } #content-area .tut-hub-ui--auth { gap: 0.28rem; padding-top: 0.3rem; } #content-area .tut-hub-ui-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; padding: 0.3rem 0.4rem; border-radius: 5px; background: rgba(40, 39, 37, 0.05); } #content-area .tut-hub-ui-auth-row--mute { opacity: 0.55; } #content-area .tut-hub-ui-auth-key { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; color: rgba(40, 39, 37, 0.7); } #content-area .tut-hub-ui--ws { gap: 0.28rem; padding: 0.4rem 0.5rem 0.35rem; margin-top: 0.15rem; border-radius: 6px; background: #171412; color: #e7e5e4; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; } #content-area .tut-hub-ui-ws-proto { color: #a8a29e; font-size: 0.4375rem; text-transform: uppercase; letter-spacing: 0.04em; } #content-area .tut-hub-ui-ws-line { color: #fafaf9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content-area .tut-hub-ui--end { flex-direction: row; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.35rem 0.45rem; width: 100%; box-sizing: border-box; flex: 1 1 auto; min-height: 0; } #content-area .tut-hub-ui--ws { margin: 0; flex: 1 1 auto; min-height: 0; justify-content: center; } #content-area .tut-hub-ui-end-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.625rem; font-weight: 700; padding: 0.55rem 0.7rem; border-radius: 6px; background: #171412; color: #fafaf9; } #content-area .tut-hub-ui-end-chip--rest { background: #fcf49e; color: #292524; box-shadow: inset 0 0 0 1px rgba(111, 84, 16, 0.14); } html.dark #content-area .tut-hub-ui-share-id, [data-theme='dark'] #content-area .tut-hub-ui-share-id, html.dark #content-area .tut-hub-ui-auth-key, [data-theme='dark'] #content-area .tut-hub-ui-auth-key, html.dark #content-area .tut-hub-ui-conflict-steps, [data-theme='dark'] #content-area .tut-hub-ui-conflict-steps { color: rgba(245, 245, 244, 0.7); } html.dark #content-area .tut-hub-ui-share-chip, [data-theme='dark'] #content-area .tut-hub-ui-share-chip, html.dark #content-area .tut-hub-ui-auth-row, [data-theme='dark'] #content-area .tut-hub-ui-auth-row { background: rgba(245, 245, 244, 0.08); color: rgba(245, 245, 244, 0.75); } html.dark #content-area .tut-hub-ui-conflict-banner, [data-theme='dark'] #content-area .tut-hub-ui-conflict-banner { background: rgba(239, 68, 68, 0.2); color: #fecaca; } html.dark #content-area .tut-hub-card-media-window, [data-theme='dark'] #content-area .tut-hub-card-media-window { background: #292524; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.5); color: #f5f5f4; } html.dark #content-area .tut-hub-card-media-chrome span, [data-theme='dark'] #content-area .tut-hub-card-media-chrome span { background: #57534e; } html.dark #content-area .tut-hub-card-media-chrome span:nth-child(1), [data-theme='dark'] #content-area .tut-hub-card-media-chrome span:nth-child(1) { background: #f87171; } html.dark #content-area .tut-hub-card-media-chrome span:nth-child(2), [data-theme='dark'] #content-area .tut-hub-card-media-chrome span:nth-child(2) { background: #fbbf24; } html.dark #content-area .tut-hub-card-media-chrome span:nth-child(3), [data-theme='dark'] #content-area .tut-hub-card-media-chrome span:nth-child(3) { background: #4ade80; } html.dark #content-area .tut-hub-ui, [data-theme='dark'] #content-area .tut-hub-ui { color: rgba(245, 245, 244, 0.72); } html.dark #content-area .tut-hub-ui-label, [data-theme='dark'] #content-area .tut-hub-ui-label, html.dark #content-area .tut-hub-ui-t-line, [data-theme='dark'] #content-area .tut-hub-ui-t-line, html.dark #content-area .tut-hub-ui-pbc-name, [data-theme='dark'] #content-area .tut-hub-ui-pbc-name, html.dark #content-area .tut-hub-ui-wh-text, [data-theme='dark'] #content-area .tut-hub-ui-wh-text, html.dark #content-area .tut-hub-ui-hook, [data-theme='dark'] #content-area .tut-hub-ui-hook { color: rgba(245, 245, 244, 0.7); } html.dark #content-area .tut-hub-ui-note span, [data-theme='dark'] #content-area .tut-hub-ui-note span, html.dark #content-area .tut-hub-ui-field-fill, [data-theme='dark'] #content-area .tut-hub-ui-field-fill, html.dark #content-area .tut-hub-ui-sdk-main, [data-theme='dark'] #content-area .tut-hub-ui-sdk-main, html.dark #content-area .tut-hub-ui-hook, [data-theme='dark'] #content-area .tut-hub-ui-hook, html.dark #content-area .tut-hub-ui-pbc-row, [data-theme='dark'] #content-area .tut-hub-ui-pbc-row, html.dark #content-area .tut-hub-ui-wh-row, [data-theme='dark'] #content-area .tut-hub-ui-wh-row, html.dark #content-area .tut-hub-ui-ehr-card, [data-theme='dark'] #content-area .tut-hub-ui-ehr-card, html.dark #content-area .tut-hub-ui-transcript, [data-theme='dark'] #content-area .tut-hub-ui-transcript { background: rgba(245, 245, 244, 0.08); } html.dark #content-area .tut-hub-ui-sdk-main span, [data-theme='dark'] #content-area .tut-hub-ui-sdk-main span, html.dark #content-area .tut-hub-ui-sdk-panel span:not(.tut-hub-ui-live), [data-theme='dark'] #content-area .tut-hub-ui-sdk-panel span:not(.tut-hub-ui-live), html.dark #content-area .tut-hub-ui-ehr-card span:not(.tut-hub-ui-check):not(.tut-hub-ui-ehr-tag), [data-theme='dark'] #content-area .tut-hub-ui-ehr-card span:not(.tut-hub-ui-check):not(.tut-hub-ui-ehr-tag), html.dark #content-area .tut-hub-ui-pbc-note span, [data-theme='dark'] #content-area .tut-hub-ui-pbc-note span { background: rgba(245, 245, 244, 0.16); } html.dark #content-area .tut-hub-ui-hook--on, [data-theme='dark'] #content-area .tut-hub-ui-hook--on, html.dark #content-area .tut-hub-ui-sdk-panel, [data-theme='dark'] #content-area .tut-hub-ui-sdk-panel { background: rgba(252, 244, 158, 0.22); color: #fafaf9; } html.dark #content-area .tut-hub-ui-chart-field, [data-theme='dark'] #content-area .tut-hub-ui-chart-field { background: #1c1917; border-color: rgba(255, 255, 255, 0.12); } /* Track badges on tutorial hub cards (Streaming / SDK / Webhooks) */ #content-area .tut-hub-badge-track { align-items: center; align-self: flex-start; border: none !important; border-radius: 3px !important; display: inline-flex !important; font-size: 0.6875rem !important; font-weight: 750 !important; justify-content: center; letter-spacing: 0.09em !important; line-height: 1.1 !important; margin: 0 !important; padding: 0.24rem 0.55rem !important; text-transform: uppercase; white-space: nowrap; } #content-area .tut-hub-badge-track::before { content: none !important; display: none !important; } #content-area .tut-hub-badge-track--streaming { background: #dbeafe !important; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.22) !important; color: #1e3a8a !important; } #content-area .tut-hub-badge-track--sdk { background: #d1fae5 !important; box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.22) !important; color: #065f46 !important; } #content-area .tut-hub-badge-track--webhooks { background: #ede9fe !important; box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.22) !important; color: #5b21b6 !important; } html.dark #content-area .tut-hub-badge-track--streaming, [data-theme='dark'] #content-area .tut-hub-badge-track--streaming { background: rgba(59, 130, 246, 0.22) !important; box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35) !important; color: #bfdbfe !important; } html.dark #content-area .tut-hub-badge-track--sdk, [data-theme='dark'] #content-area .tut-hub-badge-track--sdk { background: rgba(16, 185, 129, 0.22) !important; box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.35) !important; color: #a7f3d0 !important; } html.dark #content-area .tut-hub-badge-track--webhooks, [data-theme='dark'] #content-area .tut-hub-badge-track--webhooks { background: rgba(139, 92, 246, 0.22) !important; box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.35) !important; color: #ddd6fe !important; } @media (max-width: 900px) { #content-area .tut-hub-filter-row.release-notes-filter-dropdowns { flex-wrap: wrap; } #content-area .tut-hub-filter-row .release-notes-filter-search-field { flex: 1 1 100%; } } @media (max-width: 640px) { #content-area .tut-hub-card-foot { flex-wrap: wrap; } } #content-area .hp-wrap.docs-frame-wrap pre, #content-area .hp-wrap.docs-frame-wrap table, #content-area .hp-wrap.docs-frame-wrap .code-block-wrapper, #content-area .hp-wrap.docs-frame-wrap [class*='CodeGroup'], #content-area .hp-wrap.docs-frame-wrap .overflow-x-auto { max-width: 100%; } #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero { /* Same neutral hero band on APIs and SDKs hubs: cream page surface shows through (see `.hp-wrap.api-overview-wrap`). */ background: transparent; border: none; box-shadow: none; /* Do not add horizontal padding here: `.hp-wrap.api-overview-wrap` already matches Home rail; extra * padding on this wrapper made the two-column hero narrower than `.hp-journey--use-case` below. */ padding: 0; margin-bottom: 28px; } @media (max-width: 900px) { #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero { padding: 0; } } /* * APIs + SDKs overview hubs: vertically center the copy column against the code card (OpenAI-style). * Single-column layout stays top-aligned on small viewports. */ #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero { align-items: center; } @media (max-width: 900px) { #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero { align-items: start; } } /* * APIs + SDKs overview hubs: Harness-style hero (doc column + aside with code + meta cards). */ #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero:has(> .api-overview-hero-layout) { display: block; container-type: inline-size; container-name: api-overview-hero; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 28px; align-items: start; width: 100%; max-width: 100%; min-width: 0; } @container api-overview-hero (max-width: 560px) { #content-area .hp-wrap.api-overview-wrap .api-overview-hero-layout { grid-template-columns: 1fr; gap: 22px; } } @supports not (container-type: inline-size) { @media (max-width: 720px) { #content-area .hp-wrap.api-overview-wrap .api-overview-hero-layout { grid-template-columns: 1fr; gap: 22px; } } } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-prose-block { margin: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-h3 { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(20, 17, 16, 0.62); } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-h3:first-child { margin-top: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-prose-block p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--suki-light-text-body); } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-prose-block p:last-child { margin-bottom: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-page-title { margin-top: 0; margin-bottom: 10px; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-h3, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-h3 { color: var(--suki-dark-text-muted); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-prose-block p, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-prose-block p { color: var(--suki-dark-text-body); } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; box-sizing: border-box; background: #fff394; border: 1px solid rgba(111, 84, 16, 0.14); border-radius: 16px; padding: 14px 14px 16px; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-aside, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-aside { background: #1a1917; border-color: rgba(255, 255, 255, 0.1); } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-meta-stack { display: flex; flex-direction: column; gap: 12px; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card { padding: 14px 16px 16px; border-radius: 12px; border: 1px solid rgba(111, 84, 16, 0.16); background: #fffffd; box-shadow: 0 1px 2px rgba(20, 17, 16, 0.04); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card { background: #121211; border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--suki-light-text); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-title, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-title { color: var(--suki-dark-text); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--suki-light-text-body); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body { color: var(--suki-dark-text-body); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--suki-light-text-muted); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint { color: var(--suki-dark-text-muted); } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-sections { margin: 8px 0 22px; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-section + .api-overview-hero-doc-section { margin-top: 18px; } /* Left column: inherit page surface (cream band is on `.api-overview-hero-aside` only). */ #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-section { box-sizing: border-box; background: transparent; border-radius: 0; padding: 0; overflow: visible; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-section, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-section { background: transparent; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-section > .hp-journey-hero-line:first-child { margin-top: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-sprite--download { display: block; flex-shrink: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-auth .api-overview-hero-doc-text, #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-auth .api-overview-hero-doc-list { font-size: 16px; line-height: 1.55; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-auth .api-overview-hero-doc-list { margin-top: 6px; margin-bottom: 8px; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-auth .api-overview-hero-doc-list li { margin-bottom: 4px; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-auth .api-overview-hero-doc-list + .api-overview-hero-doc-text { margin-top: 8px; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text + .api-overview-hero-doc-list { margin-top: 8px; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text + .api-overview-hero-doc-text { margin-top: 8px; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-list + .api-overview-hero-doc-text { margin-top: 10px; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-list { margin: 8px 0 12px; padding-left: 1.35rem; list-style-type: disc; list-style-position: outside; font-size: 16px; line-height: 1.55; color: var(--suki-light-text-body); } #content-area .hp-wrap.api-overview-wrap ol.api-overview-hero-doc-list--steps { list-style-type: decimal; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-callout { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.03); font-size: 16px; line-height: 1.55; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-callout, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-callout { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-list li { margin: 0 0 6px; padding-left: 0.25rem; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-list li:last-child { margin-bottom: 0; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-list, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-list { color: var(--suki-dark-text-body); } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--suki-light-text-body); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text { color: var(--suki-dark-text-body); } /* * Hero doc inline links: `docs.json` colors.primary (#6F5410); no underline (Mintlify `.link` border off). */ #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a.link, #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a { display: inline; color: #6f5410; font-weight: 600; text-decoration: none !important; border: none !important; box-shadow: none !important; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a.link:hover, #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a:hover { color: #5a4510; text-decoration: none !important; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a.link, html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a.link, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a { color: #ffe148; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a.link:hover, html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a.link:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc-text a:hover { color: #fff394; text-decoration: none !important; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card--langs { min-width: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card--langs pre { max-width: 100%; } #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left { min-width: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card--langs .hp-hero-code-custom.api-overview-lang-code { margin-top: 2px; } /* * APIs overview meta: download chevrons + copy/mail buttons use docs.json primary (light #6F5410, dark #FFE148). */ #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-list { list-style: none; margin: 0; padding: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-list > li { border-top: 1px solid rgba(20, 17, 16, 0.08); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-list > li:first-child { border-top: none; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-install-label { flex-shrink: 0; width: 72px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: rgba(20, 17, 16, 0.72); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-install-label, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-install-label { color: var(--suki-dark-text-muted); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row-main .api-overview-meta-file-name { flex: 1; min-width: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-best-practices { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(20, 17, 16, 0.1); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-best-practices, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-best-practices { border-top-color: rgba(255, 255, 255, 0.1); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-best-practices > * { max-width: 100%; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; text-decoration: none; color: var(--suki-light-text); font-size: 14px; font-weight: 600; } #content-area .hp-wrap.api-overview-wrap button.api-overview-meta-download-row { width: 100%; margin: 0; border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; } #content-area .hp-wrap.api-overview-wrap button.api-overview-meta-download-row .api-overview-meta-file-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 12px; font-weight: 500; } html.dark #content-area .hp-wrap.api-overview-wrap button.api-overview-meta-download-row .api-overview-meta-file-name, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap button.api-overview-meta-download-row .api-overview-meta-file-name { color: var(--suki-dark-text-body); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row:hover { color: #6f5410; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row { color: var(--suki-dark-text); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row:hover { color: #fff394; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-file-name { min-width: 0; word-break: break-all; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-row-trailing { position: relative; flex-shrink: 0; display: flex; align-items: center; color: rgba(111, 84, 16, 0.72); } #content-area .hp-wrap.api-overview-wrap [data-suki-clipboard] .suki-clipboard-done { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; color: #15803d; } #content-area .hp-wrap.api-overview-wrap [data-suki-clipboard] .suki-clipboard-done-svg { display: block; } html.dark #content-area .hp-wrap.api-overview-wrap [data-suki-clipboard] .suki-clipboard-done, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap [data-suki-clipboard] .suki-clipboard-done { color: #4ade80; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row:hover .api-overview-meta-row-trailing { color: #6f5410; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-row-trailing, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-row-trailing { color: rgba(255, 225, 72, 0.85); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row:hover .api-overview-meta-row-trailing, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-row:hover .api-overview-meta-row-trailing { color: #fff394; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-sprite { display: block; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-stack { display: flex; flex-direction: column; gap: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv { padding: 12px 0; border-bottom: 1px solid rgba(20, 17, 16, 0.08); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv:first-child { padding-top: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv--last { border-bottom: none; padding-bottom: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-k { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(20, 17, 16, 0.5); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-k, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-k { color: var(--suki-dark-text-muted); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; line-height: 1.4; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-line--tight { flex-wrap: nowrap; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-link, #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-mail { flex: 1; min-width: 0; font-weight: 600; color: #6f5410; text-decoration: none; word-break: break-all; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-link:hover, #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-mail:hover { color: #5a4510; text-decoration: none; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-link, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-link, html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-mail, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-mail { color: #ffe148; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-link:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-link:hover, html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-mail:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-mail:hover { color: #fff394; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-code { flex: 1; min-width: 0; padding: 3px 8px; border-radius: 8px; border: 1px solid rgba(111, 84, 16, 0.12); background: rgba(255, 255, 255, 0.65); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 12px; font-weight: 500; color: var(--suki-light-text); word-break: break-all; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-code, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-code { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.12); color: var(--suki-dark-text-body); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn, #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid rgba(111, 84, 16, 0.22); background: #ffffff; color: #6f5410; cursor: pointer; text-decoration: none; box-sizing: border-box; } #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn:hover, #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn:hover { background: #fffef5; border-color: rgba(111, 84, 16, 0.35); color: #5a4510; } #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn:focus-visible, #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn:focus-visible { outline: 2px solid #141110; outline-offset: 2px; } #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn.api-overview-icon-btn--copied, #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn.api-overview-icon-btn--copied { border-color: #166534; color: #166534; } html.dark #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn, html.dark #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn { background: #1a1a18; border-color: rgba(255, 225, 72, 0.35); color: #ffe148; } html.dark #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn:hover, html.dark #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn:hover { background: #242422; border-color: rgba(255, 241, 148, 0.45); color: #fff394; } html.dark #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn:focus-visible, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap button.api-overview-icon-btn:focus-visible, html.dark #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn:focus-visible, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap a.api-overview-icon-btn:focus-visible { outline-color: #f9fafb; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #6f5410; text-decoration: none; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-link:hover { color: #5a4510; text-decoration: none; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-link, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-link { color: #ffe148; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-link:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-link:hover { color: #fff394; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-inline-link-icon { font-weight: 700; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-langs { display: flex; flex-wrap: wrap; gap: 8px; } #content-area .hp-wrap.api-overview-wrap .api-overview-lang-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(111, 84, 16, 0.2); background: rgba(255, 255, 253, 0.85); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--suki-light-text); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-lang-chip, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-lang-chip { background: rgba(30, 30, 28, 0.9); border-color: rgba(255, 255, 255, 0.12); color: var(--suki-dark-text); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv-stack + .api-overview-meta-card-hint { margin-top: 10px; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-kv { border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-list > li, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-download-list > li { border-top-color: rgba(255, 255, 255, 0.08); } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-code { font-size: 13px; word-break: break-all; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body a, #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint a { color: #6f5410; font-weight: 600; } #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body a:hover, #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint a:hover { color: #5a4510; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body a, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body a, html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint a, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint a { color: #ffe148; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body a:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-body a:hover, html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint a:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-meta-card-hint a:hover { color: #fff394; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero { background: transparent; border: none; box-shadow: none; } #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-journey-hero-line { color: var(--suki-light-text) !important; font-size: clamp(1.35rem, 2.5vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 10px; text-align: left; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-journey-hero-line, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-journey-hero-line { color: var(--suki-dark-text) !important; } #content-area .hp-wrap.api-overview-wrap .api-overview-hero-lead { margin-bottom: 14px; max-width: none; font-size: 16px; line-height: 1.55; } /* API overview hero doc column: section titles and body at 16px for a single reading scale. */ #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc .hp-journey-hero-line { font-size: 16px !important; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc .hp-journey-hero-line, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-hero-doc .hp-journey-hero-line { color: var(--suki-dark-text) !important; } /* API / SDK overview hero pills: same padding; arrow grows width on hover (no reserved gap). */ #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .api-overview-hero-btn-row .hp-cta { min-width: 0; padding-inline: 26px; padding-block: 11px; } /* API overview hero: match Home “Explore Use Cases” button styling. */ #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta { background: #0a0a0a; border: none; color: #ffffff !important; } #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta:hover, #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta:focus-visible { background: #1f1f1f; color: #ffffff !important; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta { background: #f5f5f5; color: #0a0a0a !important; } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta:hover, html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta:focus-visible, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-left .hp-cta.api-overview-hero-auth-cta:focus-visible { background: #e8e8e8; color: #0a0a0a !important; } #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-code { background: #ffffff; border: 1px solid rgba(111, 84, 16, 0.14); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-code, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-openai-hero-code { background: #0a0a0a; border-color: rgba(255, 255, 255, 0.12); } /* Workflow hubs on API overview: same `.hp-home-features` row as documentation/home “Start here”. */ #content-area .hp-wrap.api-overview-wrap .hp-journey--use-case .hp-home-features.api-overview-workflow-home-cards { margin-top: 4px; } /* API overview: REST + v1 pills sit below each card (outside the card). */ #content-area .hp-wrap.api-overview-wrap .api-overview-workflow-home-cards .api-overview-workflow-card-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* * REST / v1 labels: match use-case workflow pills (`.suki-use-case-card-cat` on documentation/get-started/use-case.mdx). * Same tokens: #ffe148 bar, #0a0a0a text, 11px caps, tight padding. */ #content-area .hp-wrap.api-overview-wrap .api-overview-workflow-home-cards .api-overview-workflow-pill { display: inline-block; align-self: flex-start; padding: 0.32rem 0.6rem; margin: 0 0 0.2rem; border-radius: 3px; font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.25; color: var(--suki-light-text) !important; background: #ffe148 !important; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; user-select: none; white-space: nowrap; } #content-area .hp-wrap.api-overview-wrap .api-overview-workflow-home-cards .api-overview-workflow-badges { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-start; padding-left: 14px; } /* * Release notes hub: home-style changelog tiles; yellow pills use use-case tokens; copy shows latest versions (not REST). */ #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .api-overview-workflow-card-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .api-overview-workflow-pill { display: inline-block; align-self: flex-start; padding: 0.32rem 0.6rem; margin: 0 0 0.2rem; border-radius: 3px; font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.25; color: var(--suki-light-text) !important; background: #ffe148 !important; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; user-select: none; white-space: nowrap; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-version-pill { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.02em; text-transform: none; white-space: normal; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-year-pill { margin-left: auto; color: #494949; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; } html.dark #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-year-pill, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-year-pill { color: var(--suki-dark-text); } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards [data-release-notes-tooltip] { position: relative; outline-offset: 3px; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards [data-release-notes-tooltip]::after { background: #141110; border-radius: 4px; bottom: calc(100% + 8px); box-shadow: 0 8px 22px rgba(20, 17, 16, 0.16); color: #fffffd; content: attr(data-release-notes-tooltip); font-size: 0.75rem; font-weight: 550; left: 50%; letter-spacing: 0; line-height: 1.35; max-width: min(220px, 70vw); opacity: 0; padding: 0.45rem 0.55rem; pointer-events: none; position: absolute; text-align: left; text-transform: none; transform: translate(-50%, 4px); transition: opacity 0.12s ease, transform 0.12s ease; visibility: hidden; white-space: normal; width: max-content; z-index: 20; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards [data-release-notes-tooltip]:hover::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards [data-release-notes-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); visibility: visible; } html.dark #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards [data-release-notes-tooltip]::after, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards [data-release-notes-tooltip]::after { background: #fffade; color: #141110; } @media (max-width: 640px) { #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards [data-release-notes-tooltip]::after { max-width: min(260px, calc(100vw - 48px)); } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-version-pill::after { left: 0; transform: translate(0, 4px); } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-version-pill:hover::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-version-pill:focus-visible::after { transform: translate(0, 0); } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-year-pill::after { left: auto; right: 0; transform: translate(0, 4px); } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-year-pill:hover::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .release-notes-changelog-year-pill:focus-visible::after { transform: translate(0, 0); } } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .api-overview-workflow-badges { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-start; padding-left: 14px; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features--graphic-links .api-overview-workflow-badges { padding-left: 0; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features--graphic-links .api-overview-workflow-card-stack { min-width: 0; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features--graphic-links .hp-home-feature-graphic-link { width: 100%; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features.release-notes-changelog-grid--fill-cols { grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1100px) { #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features.release-notes-changelog-grid--fill-cols { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards.hp-home-features.release-notes-changelog-grid--fill-cols { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; } } /* API overview mobile: do not squeeze three workflow tiles into the article column. */ @media (max-width: 767px) { #content-area .hp-wrap.api-overview-wrap .hp-journey--use-case .hp-home-features.api-overview-workflow-home-cards { grid-template-columns: 1fr; } #content-area .hp-wrap.api-overview-wrap .api-overview-decide-workflow-row { justify-content: center; } #content-area .hp-wrap.api-overview-wrap .api-overview-decide-workflow-cta { justify-content: center; width: 100%; } } /* * SDKs overview: up to three SDK tiles per row on wide screens (single column narrow, 2 cols tablet). * API overview keeps the default three-column grid from `.hp-home-features`. */ #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features.api-overview-workflow-home-cards { grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 640px) { #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features.api-overview-workflow-home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features.api-overview-workflow-home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* SDK overview: workflow filter pills above Available SDKs (scripts/sdk-overview-workflow-filter.js) */ #content-area .hp-wrap.sdk-overview-wrap .sdk-overview-workflow-filter-toolbar { margin-bottom: 1rem; margin-top: 4px; } /* SDK / API overview: simple title workflow cards with minimal right-side art. */ #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-simple-card, #content-area .hp-wrap.api-overview-wrap .hp-sdk-simple-card, #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card { align-items: center; background: #d5eafd; color: var(--suki-light-text); display: flex; gap: 12px; justify-content: space-between; min-height: 96px; padding: 24px 22px 24px 24px; text-align: left; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-simple-card__title, #content-area .hp-wrap.api-overview-wrap .hp-sdk-simple-card__title, #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card__title { color: var(--suki-light-text); flex: 1 1 auto; font-family: inherit; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; min-width: 0; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-simple-card__art, #content-area .hp-wrap.api-overview-wrap .hp-sdk-simple-card__art, #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card__art { color: #2b4039; display: block; flex: 0 0 52px; height: 52px; opacity: 1; width: 52px; } /* Release notes hub: Changelogs / Deprecations / Versioning nav cards (API overview pattern). */ #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards.hp-home-features { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; margin: 0.75rem 0 1.5rem; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .api-overview-workflow-card-stack { min-width: 0; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .hp-home-feature-graphic-link { width: 100%; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-card--changelogs { background: #d8f4e6; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-card--deprecations { background: #ffe4e9; } #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-card--versioning { background: #d1eeff; } @media (max-width: 1100px) { #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards.hp-home-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards.hp-home-features { grid-template-columns: 1fr; } } @media (min-width: 640px) { #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-simple-card__art, #content-area .hp-wrap.api-overview-wrap .hp-sdk-simple-card__art, #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card__art { flex-basis: 56px; height: 56px; width: 56px; } } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-simple-card, html.dark #content-area .hp-wrap.api-overview-wrap .hp-sdk-simple-card, html.dark #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-simple-card, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .hp-sdk-simple-card, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card { background: #d5eafd; } /* Keep hub nav card colors identical in dark mode (override shared simple-card blue). */ html.dark #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card.release-notes-hub-nav-card--changelogs, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card.release-notes-hub-nav-card--changelogs { background: #d8f4e6; } html.dark #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card.release-notes-hub-nav-card--deprecations, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card.release-notes-hub-nav-card--deprecations { background: #ffe4e9; } html.dark #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card.release-notes-hub-nav-card--versioning, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card.release-notes-hub-nav-card--versioning { background: #d1eeff; } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-simple-card__title, html.dark #content-area .hp-wrap.api-overview-wrap .hp-sdk-simple-card__title, html.dark #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card__title, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-simple-card__title, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .hp-sdk-simple-card__title, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .hp-sdk-simple-card__title { color: #1a1a1a; } /* SDK + API overview hubs: hover info panels — desktop pointer only (sdk-overview/overview.mdx, api-overview/overview.mdx) */ @media (max-width: 767px) { #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__panel, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__panel { display: none !important; } } @media (min-width: 768px) and (hover: hover) and (pointer: fine) { #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .api-overview-workflow-home-cards, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-journey--use-case .api-overview-workflow-home-cards { overflow: visible; } #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .api-overview-workflow-card-stack, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-journey--use-case .api-overview-workflow-card-stack { position: relative; } /* * Mintlify staging/production adds `.link { z-index: 10 }` to hub tags * (local mint dev does not). Later cards, Decide, and Start building then paint * through the hover tip. Keep those links at auto, like api-overview/overview * on stage, and raise the hovered stack above 10. */ #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .api-overview-workflow-home-cards a.link, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-journey--use-case .api-overview-workflow-home-cards a.link { z-index: auto; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip { position: relative; width: 100%; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip .hp-sdk-simple-card, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip .hp-sdk-simple-card { box-shadow: none; opacity: 1; position: relative; transform: none; transition: box-shadow 0.2s ease, opacity 0.2s ease; } #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links .hp-home-feature-graphic-link, #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links a.hp-home-feature-graphic-link:hover, #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links a.hp-home-feature-graphic-link:focus-visible, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-journey--use-case .hp-home-features--graphic-links .hp-home-feature-graphic-link, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-journey--use-case .hp-home-features--graphic-links a.hp-home-feature-graphic-link:hover, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-journey--use-case .hp-home-features--graphic-links a.hp-home-feature-graphic-link:focus-visible { box-shadow: none; transform: none; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__panel, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__panel { background-color: #fffcf4; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12); box-sizing: border-box; display: flex; flex-direction: column; left: 0; opacity: 0; padding: 0; pointer-events: none; position: absolute; right: 0; top: calc(100% + 12px); transform: translateY(-6px) scale(0.99); transform-origin: top center; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease 0.05s, visibility 0s linear 0.21s, box-shadow 0.2s ease; visibility: hidden; width: 100%; z-index: 2; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__panel::after, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__panel::after { background-color: #fffcf4; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); content: ''; height: 7px; left: 32px; position: absolute; top: -6px; width: 14px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__body, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__body { border-radius: 11px; overflow: hidden; padding: 14px 16px 16px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section--row, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section--row { align-items: flex-start; display: flex; gap: 12px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section-icon, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section-icon { align-items: center; background: rgba(255, 225, 72, 0.28); border-radius: 50%; color: #6f5410; display: inline-flex; flex-shrink: 0; height: 36px; justify-content: center; margin-top: 1px; width: 36px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section-icon svg, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section-icon svg { display: block; height: 18px; width: 18px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section-content, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section-content { flex: 1; min-width: 0; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section--divider, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section--divider { border-top: 1px solid rgba(15, 23, 42, 0.08); margin-top: 14px; padding-top: 14px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__heading, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__heading { color: var(--suki-light-text); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 4px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__text, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__text { color: var(--suki-light-text-body); font-size: 0.8125rem; line-height: 1.55; margin: 0; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__list, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__list { list-style: none; margin: 4px 0 0; padding: 0; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__list--checks li, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__list--checks li { align-items: flex-start; color: var(--suki-light-text-body); display: flex; font-size: 0.8125rem; gap: 8px; line-height: 1.55; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__list--checks li + li, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__list--checks li + li { margin-top: 8px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__check, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__check { align-items: center; background: #ffe148; border-radius: 50%; color: var(--suki-light-text); display: inline-flex; flex-shrink: 0; height: 16px; justify-content: center; margin-top: 2px; width: 16px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__check svg, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__check svg { display: block; height: 10px; width: 10px; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__list-text, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__list-text { flex: 1; min-width: 0; } #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-home-cards:has(.api-overview-workflow-card-stack:hover) .api-overview-workflow-card-stack:not(:hover) .hp-sdk-simple-card, #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-home-cards:has(.api-overview-workflow-card-stack:focus-within) .api-overview-workflow-card-stack:not(:focus-within) .hp-sdk-simple-card, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-home-cards:has(.api-overview-workflow-card-stack:hover) .api-overview-workflow-card-stack:not(:hover) .hp-sdk-simple-card, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-home-cards:has(.api-overview-workflow-card-stack:focus-within) .api-overview-workflow-card-stack:not(:focus-within) .hp-sdk-simple-card { opacity: 0.78; } #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:hover, #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:focus-within, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:hover, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:focus-within { z-index: 20; } #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:hover .hp-sdk-simple-card, #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:focus-within .hp-sdk-simple-card, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:hover .hp-sdk-simple-card, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:focus-within .hp-sdk-simple-card { box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08), 0 20px 44px rgba(15, 23, 42, 0.14); } /* Card hover chevron: SDK, API, release notes changelog tiles, and hub nav cards. */ #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .hp-sdk-simple-card, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .hp-sdk-simple-card { position: relative; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip .hp-sdk-simple-card__art, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip .hp-sdk-simple-card__art, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .hp-sdk-simple-card__art, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .hp-sdk-simple-card__art { transition: opacity 0.15s ease; } #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip .hp-sdk-simple-card::after, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip .hp-sdk-simple-card::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .hp-sdk-simple-card::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .hp-sdk-simple-card::after { align-items: center; color: var(--suki-light-text); content: "›"; display: flex; font-size: 28px; font-weight: 500; height: 56px; justify-content: center; line-height: 1; opacity: 0; pointer-events: none; position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; width: 56px; } #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:hover .hp-sdk-card-tip .hp-sdk-simple-card__art, #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:focus-within .hp-sdk-card-tip .hp-sdk-simple-card__art, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:hover .hp-sdk-card-tip .hp-sdk-simple-card__art, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:focus-within .hp-sdk-card-tip .hp-sdk-simple-card__art, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .api-overview-workflow-card-stack:hover .hp-sdk-simple-card__art, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .api-overview-workflow-card-stack:focus-within .hp-sdk-simple-card__art, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .api-overview-workflow-card-stack:hover .hp-sdk-simple-card__art, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .api-overview-workflow-card-stack:focus-within .hp-sdk-simple-card__art { opacity: 0; } #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:hover .hp-sdk-card-tip .hp-sdk-simple-card::after, #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:focus-within .hp-sdk-card-tip .hp-sdk-simple-card::after, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:hover .hp-sdk-card-tip .hp-sdk-simple-card::after, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:focus-within .hp-sdk-card-tip .hp-sdk-simple-card::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .api-overview-workflow-card-stack:hover .hp-sdk-simple-card::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-changelog-home-cards .api-overview-workflow-card-stack:focus-within .hp-sdk-simple-card::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .api-overview-workflow-card-stack:hover .hp-sdk-simple-card::after, #content-area .hp-wrap.release-notes-hp-wrap .release-notes-hub-nav-cards .api-overview-workflow-card-stack:focus-within .hp-sdk-simple-card::after { opacity: 1; transform: translateY(-50%) translateX(0); } #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:hover .hp-sdk-card-tip__panel, #content-area .hp-wrap.sdk-overview-wrap .api-overview-workflow-card-stack:focus-within .hp-sdk-card-tip__panel, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:hover .hp-sdk-card-tip__panel, #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .api-overview-workflow-card-stack:focus-within .hp-sdk-card-tip__panel { box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14); opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease 0s, visibility 0s linear 0s, box-shadow 0.2s ease; visibility: visible; } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__panel, html.dark #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__panel, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__panel, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__panel { background-color: #252522; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__panel::after, html.dark #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__panel::after, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__panel::after, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__panel::after { background-color: #252522; } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section-icon, html.dark #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section-icon, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section-icon, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section-icon { background: rgba(255, 225, 72, 0.18); color: #ffe148; } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section--divider, html.dark #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section--divider, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__section--divider, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__section--divider { border-top-color: rgba(255, 255, 255, 0.1); } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__heading, html.dark #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__heading, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__heading, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__heading { color: var(--suki-dark-text); } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__text, html.dark #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__text, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__text, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__text { color: var(--suki-dark-text-body); } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__list--checks li, html.dark #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__list--checks li, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__list--checks li, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__list--checks li { color: var(--suki-dark-text-body); } html.dark #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__check, html.dark #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__check, [data-theme='dark'] #content-area .hp-wrap.sdk-overview-wrap .hp-sdk-card-tip__check, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap) .hp-sdk-card-tip__check { background: #ffe148; color: #1a1a1a; } } #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links.api-overview-workflow-home-cards, #content-area .hp-wrap.api-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links.api-overview-workflow-home-cards { margin-bottom: 0; } #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links .api-overview-workflow-card-stack, #content-area .hp-wrap.api-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links .api-overview-workflow-card-stack { min-width: 0; } #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links .hp-home-feature-graphic-link, #content-area .hp-wrap.api-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links .hp-home-feature-graphic-link { width: 100%; } #content-area .hp-wrap.sdk-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links .api-overview-workflow-badges, #content-area .hp-wrap.api-overview-wrap .hp-journey--use-case .hp-home-features--graphic-links .api-overview-workflow-badges { padding-left: 0; } /* API overview: right-aligned “Decide your workflow” CTA; extra padding + gap so the pill does not feel cramped. */ #content-area .hp-wrap.api-overview-wrap .api-overview-decide-workflow-row { box-sizing: border-box; display: flex; justify-content: flex-end; margin-bottom: 28px; margin-top: 28px; width: 100%; } /* APIs overview hub only: two `.hp-wrap.api-overview-wrap` siblings (workflow + “Start building”); tighten the vertical gap. */ #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap):has(+ .hp-wrap.api-overview-wrap) { padding-bottom: 24px; } #content-area .hp-wrap.api-overview-wrap:not(.sdk-overview-wrap):has(+ .hp-wrap.api-overview-wrap) .api-overview-decide-workflow-row { margin-bottom: 12px; } #content-area .hp-wrap.api-overview-wrap + .hp-wrap.api-overview-wrap { padding-top: 12px; } #content-area .hp-wrap.api-overview-wrap .api-overview-decide-workflow-cta.hp-cta-with-icon { gap: 0; } #content-area .hp-wrap.api-overview-wrap .api-overview-decide-workflow-cta.hp-cta-with-icon > .hp-cta-icon, #content-area .hp-wrap.api-overview-wrap .api-overview-decide-workflow-cta.hp-cta-with-icon > svg { margin-right: 16px; } #content-area .hp-wrap.api-overview-wrap .api-overview-decide-workflow-cta { flex-shrink: 0; padding-block: 13px; padding-inline: clamp(20px, 2vw, 28px); } /* Match “Choose a workflow” / journey section titles (`.hp-journey--use-case .hp-journey-hero-line`). */ #content-area .hp-wrap.api-overview-wrap .sdk-overview-intro .hp-journey-hero-line, #content-area .hp-wrap.api-overview-wrap .sdk-overview-intro .hp-journey-title { color: var(--suki-light-text) !important; font-size: clamp(1.35rem, 2.5vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 12px; margin-top: 28px; text-align: left; } html.dark #content-area .hp-wrap.api-overview-wrap .sdk-overview-intro .hp-journey-hero-line, html.dark #content-area .hp-wrap.api-overview-wrap .sdk-overview-intro .hp-journey-title, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .sdk-overview-intro .hp-journey-hero-line, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .sdk-overview-intro .hp-journey-title { color: var(--suki-dark-text) !important; } #content-area .hp-wrap.api-overview-wrap .sdk-overview-intro .hp-journey-hero-line:first-child, #content-area .hp-wrap.api-overview-wrap .sdk-overview-intro .hp-journey-title:first-child { margin-top: 0; } /* Start building: link-row hover matches Most popular list items */ #content-area .hp-wrap.api-overview-wrap .sdk-overview-start-tile:hover, #content-area .hp-wrap.api-overview-wrap .sdk-overview-start-tile:focus-visible { background: var(--suki-link-row-hover-bg); } html.dark #content-area .hp-wrap.api-overview-wrap .sdk-overview-start-tile:hover, html.dark #content-area .hp-wrap.api-overview-wrap .sdk-overview-start-tile:focus-visible, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .sdk-overview-start-tile:hover, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .sdk-overview-start-tile:focus-visible { background: var(--suki-link-row-hover-bg); } #content-area .hp-wrap.api-overview-wrap .api-overview-resources { border-top-color: rgba(111, 84, 16, 0.14); } html.dark #content-area .hp-wrap.api-overview-wrap .api-overview-resources, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap .api-overview-resources { border-top-color: rgba(255, 255, 255, 0.1); } /* Iframe styling within SDK overview */ .sdk-overview-container iframe, .sdk-overview-intro iframe { width: 100%; max-width: 700px; height: auto; aspect-ratio: 700 / 330; margin: 24px 0; border-radius: 8px; display: block; } /* SDK overview: partner support (Zoho form) */ .sdk-overview-support-cta { margin-top: 20px; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; } .sdk-overview-support-cta .hp-cta { white-space: normal; text-align: center; line-height: 1.35; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 12px 22px; } .sdk-overview-support-cta .hp-cta-primary { min-width: min(280px, 100%); } /* Recommended path section shell — documentation/get-started/overview; steps use Mintlify (fonts + colors match sdk-overview-*) */ .sdk-rec-path { margin: 40px 0 48px; padding: 32px 28px 8px; border-radius: 16px; background: #ffffff; border: 1px solid #e5e7eb; font-family: inherit; } html.dark .sdk-rec-path, [data-theme="dark"] .sdk-rec-path { background: #0d0d0d; border-color: #374151; } .sdk-rec-path-heading { font-family: inherit; font-size: 24px; font-weight: 600; color: var(--suki-light-text); margin: 0 0 12px; line-height: 1.3; } html.dark .sdk-rec-path-heading, [data-theme="dark"] .sdk-rec-path-heading { color: var(--suki-dark-text); } .sdk-rec-path-lead { font-size: 16px; line-height: 1.7; color: var(--suki-light-text-body); margin: 0 0 28px; max-width: 42rem; } html.dark .sdk-rec-path-lead, [data-theme="dark"] .sdk-rec-path-lead { color: var(--suki-dark-text); } /* CTA buttons: reuse home .hp-cta / .hp-cta-primary (#FFE148, dark text); allow wrap for long labels */ .sdk-rec-path .sdk-rec-path-btn.hp-cta { margin-top: 8px; align-self: flex-start; white-space: normal; text-align: center; min-width: 0; max-width: 100%; line-height: 1.35; box-sizing: border-box; } .sdk-rec-path .sdk-rec-path-btn.hp-cta-primary { min-width: 0; } @media (max-width: 640px) { .sdk-rec-path { padding: 24px 18px 4px; margin: 32px 0 40px; } } /* Partners overview: integration cards — docs.json palette: primary #6F5410, light #FFE148, dark #494949 */ .hp-io-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 28px 0 48px; align-items: stretch; scroll-margin-top: 6.5rem; } .hp-io-method-card { display: flex; flex-direction: column; min-height: 0; border-radius: 12px; border: 1px solid rgba(111, 84, 16, 0.14); background: #ffffff; overflow: hidden; font-family: inherit; box-shadow: 0 1px 3px rgba(40, 39, 37, 0.05); } html.dark .hp-io-method-card, [data-theme="dark"] .hp-io-method-card { border-color: rgba(255, 225, 72, 0.14); background: #0d0d0d; box-shadow: none; } .hp-io-method-card-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 2px; } .hp-io-method-card-title-row .hp-io-method-card-title { margin: 0; } .hp-io-method-card-hero { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 140px; padding: 32px 24px; background-color: #FFFADE; background-image: radial-gradient(rgba(111, 84, 16, 0.085) 1px, transparent 1px); background-size: 14px 14px; border-bottom: 1px solid rgba(111, 84, 16, 0.1); } html.dark .hp-io-method-card-hero, [data-theme="dark"] .hp-io-method-card-hero { background-color: #1c1b19; background-image: radial-gradient(rgba(255, 225, 72, 0.12) 1px, transparent 1px); border-bottom-color: rgba(255, 225, 72, 0.14); } .hp-io-method-card-hero-icon { display: block; color: #6f5410; flex-shrink: 0; } html.dark .hp-io-method-card-hero-icon, [data-theme="dark"] .hp-io-method-card-hero-icon { color: #ffe148; } .hp-io-method-card-body { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 22px; flex: 1; min-height: 0; background: #ffffff; } html.dark .hp-io-method-card-body, [data-theme="dark"] .hp-io-method-card-body { background: #0d0d0d; } /* Kill Mintlify / prose list bullets anywhere in integration cards */ #content-area .hp-io-method-grid ul, #content-area .hp-io-method-grid ol, #content-area .hp-io-method-card ul, #content-area .hp-io-method-card ol { list-style: none !important; list-style-type: none !important; padding-left: 0 !important; margin-left: 0 !important; } #content-area .hp-io-method-grid ul > li, #content-area .hp-io-method-grid ol > li, #content-area .hp-io-method-card ul > li, #content-area .hp-io-method-card ol > li { list-style: none !important; padding-left: 0 !important; } #content-area .hp-io-method-grid ul > li::before, #content-area .hp-io-method-grid ol > li::before, #content-area .hp-io-method-grid ul > li::marker, #content-area .hp-io-method-card ul > li::before, #content-area .hp-io-method-card ol > li::before, #content-area .hp-io-method-card ul > li::marker { content: none !important; display: none !important; } .hp-io-method-link:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; } html.dark .hp-io-method-link:focus-visible, [data-theme="dark"] .hp-io-method-link:focus-visible { outline-color: #ffe148; } .hp-io-method-card-title { margin: 0; font-family: inherit; font-size: 1.3125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--suki-light-text); } html.dark .hp-io-method-card-title, [data-theme="dark"] .hp-io-method-card-title { color: var(--suki-dark-text); } .hp-io-method-card-desc { margin: 0; font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--suki-light-text-body); } html.dark .hp-io-method-card-desc, [data-theme="dark"] .hp-io-method-card-desc { color: var(--suki-dark-text-body); } .hp-io-method-card-desc strong { color: var(--suki-light-text); font-weight: 600; } html.dark .hp-io-method-card-desc strong, [data-theme="dark"] .hp-io-method-card-desc strong { color: var(--suki-dark-text); } /* Card options: no list markers (Mintlify prose can style ul/li; we use nav + anchors only) */ .hp-io-method-link-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; list-style: none !important; padding: 0 !important; margin-left: 0 !important; } #content-area .hp-io-method-link-stack::before, #content-area .hp-io-method-link-stack::after { content: none !important; } /* Kill Mintlify/prose default link pills (especially first row / Quickstart); hovers use brand colors from docs.json */ #content-area .hp-io-method-link-stack > a.hp-io-method-link { background-color: transparent !important; box-shadow: none !important; } #content-area .hp-io-method-link-stack > a.hp-io-method-link:hover { color: #5a4510 !important; background-color: rgba(255, 225, 72, 0.28) !important; box-shadow: 0 0 0 1px rgba(111, 84, 16, 0.16) !important; } #content-area .hp-io-method-link-stack > a.hp-io-method-link:hover::after { opacity: 0.88 !important; color: #6f5410 !important; } html.dark #content-area .hp-io-method-link-stack > a.hp-io-method-link:hover, [data-theme="dark"] #content-area .hp-io-method-link-stack > a.hp-io-method-link:hover { color: #ffe148 !important; background-color: rgba(255, 225, 72, 0.1) !important; box-shadow: 0 0 0 1px rgba(255, 225, 72, 0.38) !important; } html.dark #content-area .hp-io-method-link-stack > a.hp-io-method-link:hover::after, [data-theme="dark"] #content-area .hp-io-method-link-stack > a.hp-io-method-link:hover::after { color: #ffe148 !important; opacity: 0.92 !important; } .hp-io-method-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 36px 11px 14px; margin: 0; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.35; color: #494949; text-decoration: none !important; border: none; border-radius: 9999px; background: transparent; list-style: none !important; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } /* Reference: default = plain row; hover = warm pill + arrow */ .hp-io-method-link::before { content: none !important; } .hp-io-method-link::after { content: "\2192"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 0.95rem; font-weight: 500; line-height: 1; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .hp-io-method-link:hover { color: #5a4510; background: rgba(255, 225, 72, 0.28); box-shadow: 0 0 0 1px rgba(111, 84, 16, 0.16); } .hp-io-method-link:hover::after { opacity: 0.88; color: #6f5410; } html.dark .hp-io-method-link, [data-theme="dark"] .hp-io-method-link { color: var(--suki-dark-text-body); } html.dark .hp-io-method-link:hover, [data-theme="dark"] .hp-io-method-link:hover { color: #ffe148; background: rgba(255, 225, 72, 0.1); box-shadow: 0 0 0 1px rgba(255, 225, 72, 0.38); } html.dark .hp-io-method-link:hover::after, [data-theme="dark"] .hp-io-method-link:hover::after { opacity: 0.92; color: #ffe148; } /* Quickstart uses .hp-io-method-link--featured in markup (play icon); default matches other rows, pill + arrow only on :hover */ .hp-io-method-link-icon { flex-shrink: 0; width: 18px; height: 18px; color: #6f5410; opacity: 0.65; } .hp-io-method-link:hover .hp-io-method-link-icon { opacity: 1; } html.dark .hp-io-method-link-icon, [data-theme="dark"] .hp-io-method-link-icon { color: #ffe148; opacity: 0.75; } html.dark .hp-io-method-link:hover .hp-io-method-link-icon, [data-theme="dark"] .hp-io-method-link:hover .hp-io-method-link-icon { opacity: 1; } .hp-io-method-link-icon svg { display: block; width: 100%; height: 100%; } .hp-io-method-link-text { flex: 1; min-width: 0; } /* ===== styles/11-api-hub-endpoints.css ===== */ /* API hub pages: endpoint list block (Suki palette + site fonts via inherit; paths use site mono stack) */ .suki-api-endpoint-wrap { margin: 1rem 0; border-radius: 12px; border: 1px solid rgba(111, 84, 16, 0.14); background: #ffffff; overflow: hidden; font-family: inherit; box-shadow: 0 1px 3px rgba(40, 39, 37, 0.05); } html.dark .suki-api-endpoint-wrap, [data-theme="dark"] .suki-api-endpoint-wrap { border-color: rgba(255, 225, 72, 0.14); background: #0d0d0d; box-shadow: none; } .suki-api-endpoint-head { padding: 10px 16px; border-bottom: 1px solid rgba(111, 84, 16, 0.1); background: linear-gradient(180deg, rgba(255, 250, 222, 0.98) 0%, #fffef8 100%); font-family: inherit; } html.dark .suki-api-endpoint-head, [data-theme="dark"] .suki-api-endpoint-head { border-bottom-color: rgba(255, 225, 72, 0.12); background: linear-gradient(180deg, #1c1b19 0%, #141413 100%); } .suki-api-endpoint-head-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6f5410; font-family: inherit; } html.dark .suki-api-endpoint-head-label, [data-theme="dark"] .suki-api-endpoint-head-label { color: #d4c87a; } .suki-api-endpoint-list { display: flex; flex-direction: column; } .suki-api-endpoint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; margin: 0; font-family: inherit; font-size: 15px; line-height: 1.45; color: #494949; text-decoration: none !important; border: none; border-top: 1px solid rgba(111, 84, 16, 0.08); transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .suki-api-endpoint-list > .suki-api-endpoint-row:first-child { border-top: none; } html.dark .suki-api-endpoint-row, [data-theme="dark"] .suki-api-endpoint-row { color: var(--suki-dark-text); border-top-color: rgba(255, 225, 72, 0.08); } .suki-api-endpoint-row:hover { color: #5a4510 !important; background-color: rgba(255, 225, 72, 0.28) !important; box-shadow: inset 0 0 0 1px rgba(111, 84, 16, 0.12); } html.dark .suki-api-endpoint-row:hover, [data-theme="dark"] .suki-api-endpoint-row:hover { color: #ffe148 !important; background-color: rgba(255, 225, 72, 0.1) !important; box-shadow: inset 0 0 0 1px rgba(255, 225, 72, 0.22); } .suki-api-endpoint-path { font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size: 0.875rem; font-weight: 400; color: #3b3a38; } html.dark .suki-api-endpoint-path, [data-theme="dark"] .suki-api-endpoint-path { color: #e8e6e3; } /* Prose link chrome: clear default pill only when not hovering (hover uses .suki-api-endpoint-row:hover) */ #content-area .suki-api-endpoint-list > .suki-api-endpoint-row:not(:hover) { background-color: transparent !important; box-shadow: none !important; } .hp-io-method-card-aside { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(111, 84, 16, 0.1); } html.dark .hp-io-method-card-aside, [data-theme="dark"] .hp-io-method-card-aside { border-top-color: rgba(255, 225, 72, 0.12); } .hp-io-method-card-aside-text { margin: 0; font-size: 13px; line-height: 1.55; color: #6b6966; } .hp-io-method-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 4px; } .hp-io-method-card-meta-time { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 13px; line-height: 1.4; font-weight: 500; color: #6b6966; } .hp-io-method-card-meta-time::before { content: ""; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); } .hp-io-method-card-meta .hp-wn-badge { margin: 0; margin-top: 0; text-transform: none; letter-spacing: 0.01em; font-weight: 650; } html.dark .hp-io-method-card-meta-time, [data-theme="dark"] .hp-io-method-card-meta-time { color: var(--suki-dark-text-muted); } html.dark .hp-io-method-card-meta-time::before, [data-theme="dark"] .hp-io-method-card-meta-time::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a09c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); } html.dark .hp-io-method-card-aside-text, [data-theme="dark"] .hp-io-method-card-aside-text { color: var(--suki-dark-text-muted); } .hp-io-method-card-aside-text a { font-weight: 500; color: #6f5410; text-decoration: none; /* Mintlify prose `.link` uses border-bottom as underline; keep a single line on hover only */ border-bottom: none !important; box-shadow: none !important; } .hp-io-method-card-aside-text a:hover { text-decoration: underline; text-underline-offset: 0.15em; } html.dark .hp-io-method-card-aside-text a, [data-theme="dark"] .hp-io-method-card-aside-text a { color: #fff394; } @media (max-width: 768px) { .hp-io-method-grid { grid-template-columns: 1fr; gap: 20px; margin: 24px 0 40px; } .hp-io-method-card-hero { min-height: 112px; padding: 22px 16px; } .hp-io-method-card-body { padding: 22px 20px 18px; } .hp-io-method-card-title { font-size: 1.25rem; } .hp-io-method-card-desc, .hp-io-method-link { font-size: 14px; } } /* Partners overview: Core capabilities uses Mintlify CardGroup */ .sdk-overview-core-capabilities-cards { margin: 40px 0 60px; display: flex; flex-direction: column; gap: 24px; } /* * documentation/get-started/overview.mdx — CardGroups under “What can you build” / “Key capabilities”. * Mintlify-default card border + yellow capability pills (same tokens as `.hp-badge-home-io` / use-case `#ffe148` bars). */ #content-area .doc-partners-overview-card-groups .card { border-color: rgba(17, 24, 39, 0.12); } html.dark #content-area .doc-partners-overview-card-groups .card, [data-theme="dark"] #content-area .doc-partners-overview-card-groups .card { border-color: rgba(255, 255, 255, 0.14); } #content-area .doc-partners-overview-card-groups .doc-overview-cap-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; align-items: center; } #content-area .doc-partners-overview-card-groups .doc-overview-cap-pill { display: inline-flex; align-items: center; box-sizing: border-box; padding: 0.32rem 0.65rem; border-radius: 3px; font-size: 11px; font-weight: 650; letter-spacing: 0.02em; line-height: 1.25; color: var(--suki-light-text) !important; background: #ffe148 !important; border: none; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; white-space: nowrap; } html.dark #content-area .doc-partners-overview-card-groups .doc-overview-cap-pill, [data-theme='dark'] #content-area .doc-partners-overview-card-groups .doc-overview-cap-pill { color: #0a0a0a !important; background: #ffe148 !important; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.06); } @media (max-width: 968px) { .sdk-overview-core-capabilities-cards { margin: 32px 0 48px; gap: 20px; } } @media (max-width: 640px) { .sdk-overview-core-capabilities-cards { margin: 24px 0 40px; gap: 16px; } } /* Partners overview: “What can you build” uses Mintlify CardGroup (not sdk-overview-featured-card) */ .sdk-overview-build-cards { margin-bottom: 60px; } @media (max-width: 968px) { .sdk-overview-build-cards { margin-bottom: 40px; } } @media (max-width: 640px) { .sdk-overview-build-cards { margin-bottom: 32px; } } /* Featured Section */ .sdk-overview-featured-section { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 60px; align-items: start; } /* When only left column exists, span full width */ .sdk-overview-featured-section:has(.sdk-overview-featured-left):not(:has(.sdk-overview-featured-right)) { grid-template-columns: 1fr; } .sdk-overview-featured-section:has(.sdk-overview-featured-left):not(:has(.sdk-overview-featured-right)) .sdk-overview-featured-left { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* SDKs overview: Available SDKs full width, Quickstart below (more room for 3 SDK cards) */ .sdk-overview-featured-section--sdks-quickstart { grid-template-columns: 1fr; gap: 32px; align-items: stretch; } /* Quickstart lives in .sdk-overview-intro above workflow; this section is Available SDKs only */ .sdk-overview-featured-section--sdks-quickstart:has(.sdk-overview-featured-left):not(:has(.sdk-overview-featured-right)) .sdk-overview-featured-left { display: flex; flex-direction: column; gap: 14px; } /* Three SDK cards in one row (hero on top, content below in each column) */ .sdk-overview-sdks-card-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; align-items: stretch; } .sdk-overview-sdks-card-row .sdk-overview-featured-card { min-width: 0; height: 100%; } .sdk-overview-sdks-card-row .sdk-overview-featured-card-header { flex-direction: column; align-items: flex-start; gap: 8px; } .sdk-overview-sdks-card-row .sdk-overview-featured-card-header h3 { flex: none; } /* SDK row: hero strip (bar graphics) — sized for full-width three-column row */ .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero { max-height: 118px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero img { max-height: 118px; height: 118px; } @media (max-width: 680px) { .sdk-overview-sdks-card-row { grid-template-columns: 1fr; gap: 12px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero, .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero img { max-height: 104px; height: 104px; } } .sdk-overview-section-title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--suki-light-text); margin: 0 0 24px 0; padding-top: 0; line-height: 1.35; text-shadow: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; } html.dark .sdk-overview-section-title, [data-theme="dark"] .sdk-overview-section-title { color: var(--suki-dark-text); } .sdk-overview-featured-left { display: flex; flex-direction: column; gap: 20px; } /* SDKs overview: compact “Available SDKs” cards (shorter hero, tighter body) */ .sdk-overview-featured-left--sdks-compact { gap: 14px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-section-title { margin-bottom: 14px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-featured-card-body { padding: 12px 16px; gap: 8px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-featured-card-header { gap: 6px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-featured-card-header h3 { font-size: 15px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-featured-description { font-size: 13px; line-height: 1.45; } .sdk-overview-featured-left--sdks-compact .sdk-overview-featured-link { font-size: 13px; } .sdk-overview-featured-right { display: flex; flex-direction: column; gap: 20px; } .sdk-overview-featured-card { background: #FFFFFF; border: none; border-radius: 8px; padding: 20px; transition: transform 0.22s ease, box-shadow 0.22s ease; display: flex; flex-direction: column; gap: 12px; height: 100%; position: relative; box-shadow: none; } .sdk-overview-featured-card--with-hero { padding: 0; gap: 0; overflow: hidden; } .sdk-overview-featured-hero { width: 100%; margin: 0; line-height: 0; overflow: hidden; border-radius: 8px 8px 0 0; background: #0c0b09; } .sdk-overview-featured-hero img { width: 100%; height: auto; display: block; aspect-ratio: 480 / 180; object-fit: cover; } .sdk-overview-featured-card-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; } @media (max-width: 968px) { .sdk-overview-featured-card--with-hero .sdk-overview-featured-card-body { padding: 18px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-featured-card--with-hero .sdk-overview-featured-card-body { padding: 12px 14px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero, .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero img { max-height: 94px; height: 94px; } } @media (max-width: 640px) { .sdk-overview-featured-card--with-hero .sdk-overview-featured-card-body { padding: 16px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-featured-card--with-hero .sdk-overview-featured-card-body { padding: 11px 14px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero, .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero img { max-height: 86px; height: 86px; } } .sdk-overview-featured-card:hover { border: none; background: #FFFFFF; transform: scale(1.02); box-shadow: 0 10px 28px rgba(40, 39, 37, 0.08); z-index: 1; } .sdk-overview-featured-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; flex-wrap: wrap; gap: 8px; } .sdk-overview-featured-card-header h3 { font-size: 16px; font-weight: 600; color: var(--suki-light-text); margin: 0; flex: 1; } html.dark .sdk-overview-featured-card-header h3, [data-theme="dark"] .sdk-overview-featured-card-header h3 { color: var(--suki-dark-text); } .sdk-overview-featured-description { font-size: 14px; line-height: 1.5; color: var(--suki-light-text-body); margin: 0; } html.dark .sdk-overview-featured-description, [data-theme="dark"] .sdk-overview-featured-description { color: #A1A19F; } .sdk-overview-featured-link { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--suki-light-text); font-weight: 500; font-size: 14px; text-decoration: none; transition: gap 0.2s ease; margin-top: auto; } .sdk-overview-featured-link:hover { gap: 10px; } html.dark .sdk-overview-featured-link { color: #fff394; } html.dark .sdk-overview-featured-link:hover { color: #ffe148; } /* Quickstart Card */ .sdk-overview-quickstart-card { background: #FFFADE; border: 1px solid #e5e7eb; border-radius: 12px; padding: 32px; height: fit-content; display: flex; flex-direction: column; position: relative; } html.dark .sdk-overview-quickstart-card, [data-theme="dark"] .sdk-overview-quickstart-card { background: #1c1b19; border-color: #2B2B2B; } .sdk-overview-quickstart-powered { margin-bottom: 16px; } .sdk-overview-quickstart-powered span { font-size: 12px; color: var(--suki-light-text-muted); font-weight: 500; } html.dark .sdk-overview-quickstart-powered span { color: var(--suki-dark-text); } .sdk-overview-quickstart-title { font-size: 28px; font-weight: 700; color: var(--suki-light-text); margin: 0 0 12px 0; line-height: 1.2; } html.dark .sdk-overview-quickstart-title { color: var(--suki-dark-text); } .sdk-overview-quickstart-description { font-size: 15px; line-height: 1.6; color: var(--suki-light-text-muted); margin: 0 0 24px 0; } html.dark .sdk-overview-quickstart-description { color: var(--suki-dark-text); } .sdk-overview-quickstart-example { margin-bottom: 24px; flex: 1; } .sdk-overview-quickstart-footer { display: flex; flex-direction: column; gap: 16px; margin-top: auto; } .sdk-overview-quickstart-links { display: flex; flex-direction: column; gap: 12px; } .sdk-overview-quickstart-link { display: inline-flex; align-items: center; gap: 6px; color: var(--suki-light-text); font-weight: 600; font-size: 14px; text-decoration: none; transition: gap 0.2s ease; } .sdk-overview-quickstart-link:hover { gap: 10px; } html.dark .sdk-overview-quickstart-link { color: #fff394; } /* Dark mode for featured cards */ html.dark .sdk-overview-featured-card, [data-theme="dark"] .sdk-overview-featured-card { background: #0d0d0d; border: none; } html.dark .sdk-overview-featured-card:hover, [data-theme="dark"] .sdk-overview-featured-card:hover { border: none; background: #0d0d0d; transform: scale(1.02); box-shadow: 0 12px 40px rgba(23, 23, 23, 0.85), 0 4px 16px rgba(23, 23, 23, 0.5); } @media (prefers-reduced-motion: reduce) { .sdk-overview-featured-card, .core-capability-card.core-capability-card--with-hero { transition: none; } .sdk-overview-featured-card:hover, html.dark .sdk-overview-featured-card:hover, [data-theme="dark"] .sdk-overview-featured-card:hover { transform: none; } .core-capability-card.core-capability-card--with-hero:hover, html.dark .core-capability-card.core-capability-card--with-hero:hover, [data-theme="dark"] .core-capability-card.core-capability-card--with-hero:hover { transform: none; } } /* Responsive styles for SDK Overview */ @media (max-width: 968px) { .sdk-overview-container { padding: 24px 24px 40px; } .sdk-overview-intro { margin-bottom: 40px; } .sdk-overview-main-title { font-size: 28px; } .sdk-overview-main-description { font-size: 16px; } .sdk-overview-subtitle { font-size: 20px; } .sdk-overview-featured-section { grid-template-columns: 1fr; gap: 32px; } .sdk-overview-featured-section:has(.sdk-overview-featured-left):not(:has(.sdk-overview-featured-right)) .sdk-overview-featured-left { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sdk-overview-container { padding: 16px 16px 32px; } .sdk-overview-intro { margin-bottom: 20px; } .sdk-overview-main-title { font-size: 24px; margin-bottom: 12px; margin-top: 20px; } .sdk-overview-main-description { font-size: 16px; margin-bottom: 32px; } .sdk-overview-subtitle { font-size: 18px; margin: 24px 0 12px 0; } .sdk-overview-text { font-size: 16px; } .sdk-overview-list { font-size: 16px; padding-left: 20px; } .sdk-overview-container iframe, .sdk-overview-intro iframe { margin: 20px 0; max-width: 100%; } .sdk-overview-featured-section { margin-top: 30px !important; padding-top: 0 !important; } .sdk-overview-section-title { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 20px !important; } .sdk-overview-featured-left { margin-top: 0 !important; padding-top: 0 !important; } .sdk-overview-section-title { font-size: 18px; margin-bottom: 20px; padding-top: 0; visibility: visible !important; display: block !important; } .sdk-overview-featured-section { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; } .sdk-overview-featured-card { padding: 16px; } .sdk-overview-featured-card--with-hero { padding: 0; } .sdk-overview-featured-card--with-hero .sdk-overview-featured-card-body { padding: 16px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-featured-card--with-hero .sdk-overview-featured-card-body { padding: 11px 14px; } .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero, .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-card-row .sdk-overview-featured-hero img { max-height: 86px; height: 86px; } .sdk-overview-quickstart-card { padding: 24px; } .sdk-overview-quickstart-title { font-size: 24px; } .sdk-overview-container iframe, .sdk-overview-intro iframe { margin: 16px 0; } .api-try-playground-main { flex-direction: column; align-items: stretch; } .api-try-sidebar { width: 100%; min-width: 0; max-width: none; border-right: none; padding: 16px 16px 14px; } .api-try-playground-header { padding: 14px 16px; flex-direction: column; align-items: flex-start; } .api-try-resource-actions { width: 100%; justify-content: flex-start; } .api-try-panel { padding: 12px 12px 16px; width: 100%; min-width: 0; max-width: 100%; } .api-try-nav-item { min-height: 44px; display: flex; align-items: center; } } /* API overview: Try our APIs playground (Mintlify Tabs + brand colors, no shadows) */ .api-try-playground { margin: 40px 0 48px; border-radius: 12px; overflow: hidden; scroll-margin-top: 88px; background: #fffade; border: 1px solid rgba(111, 84, 16, 0.22); box-shadow: none; } .api-try-playground-shell { display: flex; flex-direction: column; align-items: stretch; min-height: 0; } .api-try-playground-header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 20px 20px 18px; border-bottom: 1px solid rgba(111, 84, 16, 0.18); background: #fffef8; box-sizing: border-box; min-width: 0; max-width: 100%; overflow: visible; } .api-try-playground-heading { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--suki-light-text); flex: 0 1 auto; min-width: 0; } /* Uses .hp-cta-primary / .hp-cta-secondary (same as home page CTAs) */ .api-try-resource-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex: 0 1 auto; max-width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; touch-action: pan-x pan-y pinch-zoom; } .api-try-resource-actions .hp-cta { flex: 0 0 auto; padding: 10px 16px; font-size: 13px; font-weight: 700; } .api-try-resource-actions .hp-cta-primary { min-width: 0; } /* No translateY or shadow: parent .api-try-playground uses overflow:hidden and clips hovers */ .api-try-resource-actions .hp-cta-primary:hover { transform: none; box-shadow: none; } .api-try-resource-actions .hp-cta-secondary:hover { transform: none; } /* Phone: full-width stack so all three CTAs are visible (no hidden horizontal scroll) */ @media (max-width: 640px) { .api-try-resource-actions { flex-direction: column; align-items: stretch; overflow-x: visible; flex: none; width: 100%; max-width: none; gap: 10px; justify-content: flex-start; } .api-try-resource-actions .hp-cta { width: 100%; flex: 0 0 auto; justify-content: center; } } .api-try-playground-main { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; flex: 1 1 auto; min-height: 260px; } .api-try-sidebar { flex: 0 0 auto; width: 220px; min-width: 200px; max-width: 280px; flex-shrink: 0; box-sizing: border-box; padding: 20px 18px 20px; display: flex; flex-direction: column; border-right: 1px solid rgba(111, 84, 16, 0.18); background: rgba(255, 250, 222, 0.65); } .api-try-nav { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; min-height: min-content; } .api-try-nav-item { appearance: none; border: 1px solid transparent; background: transparent; color: var(--suki-light-text-body); font-size: 14px; font-weight: 500; text-align: left; padding: 10px 12px; border-radius: 24px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-family: inherit; display: block; width: 100%; box-sizing: border-box; text-decoration: none; } a.api-try-nav-item { color: var(--suki-light-text-body); } .api-try-nav-item:hover { color: #1f1910; background: rgba(111, 84, 16, 0.07); } .api-try-nav-item.is-active { color: #1f1910; background: rgba(255, 225, 72, 0.5); border-color: rgba(111, 84, 16, 0.28); } a.api-try-nav-item.is-active { color: #1f1910; } .api-try-nav-item:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; } .api-try-panel { flex: 1 1 0; min-width: 0; width: 100%; max-width: 100%; padding: 16px 18px 20px 16px; display: flex; flex-direction: column; background: #ffffff; box-sizing: border-box; } .api-try-example-panel { width: 100%; min-width: 0; max-width: 100%; } .api-try-example-panel[hidden] { display: none !important; } /* Mintlify Tabs: keep tab row on one line on narrow widths; scroll horizontally */ .api-try-panel [role="tablist"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; gap: 1rem; column-gap: 1.25rem; width: 100%; max-width: 100%; min-width: 0; margin-bottom: 0.5rem; padding-bottom: 2px; } .api-try-panel [role="tab"] { flex: 0 0 auto; white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; } .api-try-panel pre, .api-try-panel .prose pre { overflow-x: auto !important; max-width: 100%; } /* Dark mode: flat surfaces, no shadows */ html.dark .api-try-playground, [data-theme="dark"] .api-try-playground { background: #1a1d24; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; } html.dark .api-try-playground-header, [data-theme="dark"] .api-try-playground-header { border-bottom-color: rgba(255, 255, 255, 0.1); background: #16181e; } html.dark .api-try-playground-heading, [data-theme="dark"] .api-try-playground-heading { color: var(--suki-dark-text); } html.dark .api-try-sidebar, [data-theme="dark"] .api-try-sidebar { border-right-color: rgba(255, 255, 255, 0.08); background: #1c1b19; } html.dark .api-try-nav-item, [data-theme="dark"] .api-try-nav-item { color: var(--suki-dark-text-body); border-color: transparent; } html.dark a.api-try-nav-item, [data-theme="dark"] a.api-try-nav-item { color: var(--suki-dark-text-body); } html.dark .api-try-nav-item:hover, [data-theme="dark"] .api-try-nav-item:hover { color: var(--suki-dark-text); background: rgba(255, 255, 255, 0.06); } html.dark .api-try-nav-item.is-active, [data-theme="dark"] .api-try-nav-item.is-active { color: var(--suki-dark-text); background: rgba(255, 255, 255, 0.12); border-color: transparent; } html.dark a.api-try-nav-item.is-active, [data-theme="dark"] a.api-try-nav-item.is-active { color: var(--suki-dark-text); } html.dark .api-try-nav-item:focus-visible, [data-theme="dark"] .api-try-nav-item:focus-visible { outline-color: #fff394; } html.dark .api-try-panel, [data-theme="dark"] .api-try-panel { background: #0a0a0b; } @media (max-width: 900px) { .api-try-playground-main { flex-direction: column; align-items: stretch; min-height: 0; } .api-try-sidebar { width: 100% !important; max-width: none !important; min-width: 0 !important; border-right: none; border-bottom: 1px solid rgba(111, 84, 16, 0.2); padding: 16px 16px 14px; } html.dark .api-try-sidebar, [data-theme="dark"] .api-try-sidebar { border-bottom-color: rgba(255, 255, 255, 0.08); } .api-try-panel { flex: 1 1 auto; padding: 12px 12px 16px; } .api-try-playground-header { padding: 16px 16px; flex-direction: column; align-items: stretch; } .api-try-resource-actions { width: 100%; justify-content: flex-start; } } .api-new-apis-heading { margin-top: 40px !important; } /* API overview: New APIs row (core-capability cards + same hero SVGs as before) */ .api-new-apis-section.core-capabilities-section { margin: 16px 0 48px; } .api-new-apis-section .core-capabilities-grid { grid-template-columns: repeat(4, 1fr); margin-top: 8px; } @media (max-width: 1100px) { .api-new-apis-section .core-capabilities-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .api-new-apis-section .core-capabilities-grid { grid-template-columns: 1fr; } } /* * Feature blocks: rounded visual strip (SVG on solid bg) separate from text on page bg. * Light: warm cream (theme) behind graphic. Dark: #1A1D24. No Mintlify Card wrapper. */ .suki-feature-grid { display: grid; width: 100%; gap: 24px; } .suki-feature-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .suki-feature-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .suki-feature-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .suki-feature-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sdk-overview-sdks-feature-grid { gap: 14px; } .api-new-apis-feature-grid, .release-notes-changelog-home-cards { margin-top: 8px; } @media (max-width: 1100px) { .suki-feature-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suki-feature-grid--cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suki-feature-grid--cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .suki-feature-grid--cols-3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .suki-feature-grid--cols-4 { grid-template-columns: 1fr; } .suki-feature-grid--cols-5 { grid-template-columns: 1fr; } .suki-feature-grid--cols-6 { grid-template-columns: 1fr; } } .suki-feature-block { display: flex; flex-direction: column; min-width: 0; color: inherit; } .suki-feature-visual { border-radius: 12px; overflow: hidden; line-height: 0; flex-shrink: 0; background: #fffade; pointer-events: none; cursor: default; user-select: none; } html.dark .suki-feature-visual, [data-theme="dark"] .suki-feature-visual { background: #1a1917; } .suki-feature-visual img { width: 100%; height: auto; display: block; aspect-ratio: 480 / 180; object-fit: contain; object-position: center center; filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } /* SDK overview: paired light/dark SVGs */ .suki-feature-visual .suki-sdk-hero-img--dark { display: none !important; } html.dark .suki-feature-visual .suki-sdk-hero-img--light, [data-theme="dark"] .suki-feature-visual .suki-sdk-hero-img--light { display: none !important; } html.dark .suki-feature-visual .suki-sdk-hero-img--dark, [data-theme="dark"] .suki-feature-visual .suki-sdk-hero-img--dark { display: block !important; } /* Linked hero SVGs: doc routes; zoom whole tile (anchor), not just the img */ a.suki-hero-img-link { display: block; pointer-events: auto; cursor: pointer; text-decoration: none; color: inherit; border-radius: inherit; transition: transform 0.28s ease; transform-origin: center center; } a.suki-hero-img-link:hover, a.suki-hero-img-link:focus-visible { transform: scale(0.94); } a.suki-hero-img-link:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; border-radius: 10px; } html.dark a.suki-hero-img-link:focus-visible, [data-theme="dark"] a.suki-hero-img-link:focus-visible { outline-color: #ffe148; } /* Avoid browser opening/dragging the SVG; clicks go to the link */ a.suki-hero-img-link img { pointer-events: none; -webkit-user-drag: none; user-select: none; } @media (prefers-reduced-motion: reduce) { a.suki-hero-img-link { transition: none; } a.suki-hero-img-link:hover, a.suki-hero-img-link:focus-visible { transform: none; } } .suki-feature-body { padding: 16px 0 0; margin: 0; background: transparent; } .suki-feature-title { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 10px; color: var(--suki-light-text); } html.dark .suki-feature-title, [data-theme="dark"] .suki-feature-title { color: var(--suki-dark-text); } .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-feature-grid .suki-feature-title { font-size: 15px; margin-bottom: 8px; } .suki-feature-body .sdk-overview-featured-badges { margin-bottom: 10px; } .suki-feature-body .core-capability-badge { margin-bottom: 10px; margin-top: 0; } .suki-feature-body .core-capability-content { margin-bottom: 4px; } .suki-feature-body .core-capability-content p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--suki-light-text-body); } html.dark .suki-feature-body .core-capability-content p, [data-theme="dark"] .suki-feature-body .core-capability-content p { color: #a1a19f; } a.suki-feature-cta { display: inline-flex; align-items: center; margin-top: 10px; font-size: 14px; font-weight: 500; color: #6f5410; text-decoration: none; width: fit-content; } a.suki-feature-cta:hover { text-decoration: underline; } a.suki-feature-cta:focus-visible { outline: 2px solid #6f5410; outline-offset: 3px; border-radius: 2px; } html.dark a.suki-feature-cta:focus-visible, [data-theme="dark"] a.suki-feature-cta:focus-visible { outline-color: #ffe148; } html.dark a.suki-feature-cta, [data-theme="dark"] a.suki-feature-cta { color: #fff394; } .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-feature-grid .suki-feature-visual img { max-height: 118px; } @media (max-width: 968px) { .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-feature-grid .suki-feature-visual img { max-height: 94px; } } @media (max-width: 640px) { .sdk-overview-featured-left--sdks-compact .sdk-overview-sdks-feature-grid .suki-feature-visual img { max-height: 86px; } } /* Core capability card with top hero: border and hover live with .core-capability-card (see below) */ .core-capability-hero { width: 100%; margin: 0; line-height: 0; overflow: hidden; border-radius: 12px 12px 0 0; background: #0c0b09; } .core-capability-hero img { width: 100%; height: auto; display: block; aspect-ratio: 480 / 180; object-fit: cover; } /* Hero strip background in dark mode (SVG base is transparent) */ html.dark .sdk-overview-featured-hero, [data-theme="dark"] .sdk-overview-featured-hero, html.dark .core-capability-hero, [data-theme="dark"] .core-capability-hero { background: #1a1d24; } .core-capability-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; min-height: 0; } .core-capability-card--with-hero .core-capability-badge { margin-bottom: 16px; } .core-capability-card--with-hero .core-capability-content { flex: 1; } @media (max-width: 968px) { .core-capability-card--with-hero .core-capability-card-body { padding: 20px; } } @media (max-width: 640px) { .core-capability-card--with-hero .core-capability-card-body { padding: 18px; } } /* Core Capabilities Section - Redesigned */ .core-capabilities-section { margin: 40px 0 60px 0; } .core-capabilities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; } .release-notes-capabilities .core-capabilities-grid { grid-template-columns: repeat(2, 1fr); } /* ===== styles/12-release-notes-hub.css ===== */ /* Release notes: title + Subscribe / RSS */ .release-notes-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-bottom: 12px; } .release-notes-title-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; flex-shrink: 0; } .release-notes-main-heading { margin-bottom: 0; flex: 1 1 auto; min-width: 0; line-height: 1.2; } button.release-notes-subscribe-trigger { margin: 0; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px 10px 16px; border-radius: 9999px; border: 1px solid rgba(111, 84, 16, 0.35); background: linear-gradient(180deg, #fffdf5 0%, #fff6cc 100%); color: #4b3a0c; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; line-height: 1; box-shadow: 0 1px 3px rgba(111, 84, 16, 0.12); transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; flex-shrink: 0; align-self: center; } button.release-notes-subscribe-trigger:hover { border-color: #6f5410; background: linear-gradient(180deg, #fffef8 0%, #ffe148 100%); color: #3d2f08; box-shadow: 0 2px 10px rgba(111, 84, 16, 0.18); text-decoration: none; } button.release-notes-subscribe-trigger:focus-visible { outline: 2px solid #6f5410; outline-offset: 3px; } .release-notes-subscribe-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #6f5410; } button.release-notes-subscribe-trigger:hover .release-notes-subscribe-icon { color: #5a4510; } .release-notes-subscribe-icon svg { display: block; } .release-notes-subscribe-label { position: relative; top: 0.5px; } html.dark button.release-notes-subscribe-trigger, [data-theme="dark"] button.release-notes-subscribe-trigger { border-color: rgba(255, 225, 72, 0.45); background: linear-gradient(180deg, rgba(45, 38, 12, 0.95) 0%, rgba(35, 30, 10, 0.98) 100%); color: #fff394; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } html.dark .release-notes-subscribe-icon, [data-theme="dark"] .release-notes-subscribe-icon { color: #ffe148; } html.dark button.release-notes-subscribe-trigger:hover, [data-theme="dark"] button.release-notes-subscribe-trigger:hover { border-color: #ffe148; background: rgba(255, 225, 72, 0.14); color: #fffef0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } html.dark button.release-notes-subscribe-trigger:hover .release-notes-subscribe-icon, [data-theme="dark"] button.release-notes-subscribe-trigger:hover .release-notes-subscribe-icon { color: #fff394; } html.dark button.release-notes-subscribe-trigger:focus-visible, [data-theme="dark"] button.release-notes-subscribe-trigger:focus-visible { outline-color: #ffe148; } /* Subscribe modal: fixed root + backdrop button (native and SDKs

​Type definition

Type definition