/* ======================================== BASE STYLES ======================================== */ @import url('/release-notes-print.css'); /* Dark Mode Typography */ html.dark strong, html.dark b, html.dark .font-bold { font-weight: 700 !important; color: #ffffff !important; } /* Inline Code Styling - Light Mode */ code:not(pre code) { background-color: #F3F4F6 !important; color: #3B82F6 !important; border: 1px solid #D1D5DB !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: #17223b !important; color: #FFE148 !important; border: 1px solid #3e4e5f !important; } /* Inline code inside Callout/Note/Warning/Info/Tip - light mode consistency */ [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) { background-color: #F3F4F6 !important; color: #3B82F6 !important; border: 1px solid #D1D5DB !important; } /* Inline code inside Callout - dark mode consistency */ 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), [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) { background-color: #17223b !important; color: #FFE148 !important; border: 1px solid #374151 !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; } /* ======================================== LAYOUT & STRUCTURE ======================================== */ /* Dark Mode Background - Content Area Only */ .dark body:not(:has(.hero-header)) #content-container, .dark body:not(:has(.quickstart-hero-card)) .mdx-content { background-color: #0a0a0a; color: #e3e0e0; } /* Light mode background - content area (warm neutral #f6f5f3) */ html:not(.dark):not([data-theme="dark"]) body:not(:has(.hero-header)) #content-container, html:not(.dark):not([data-theme="dark"]) body:not(:has(.quickstart-hero-card)) .mdx-content, [data-theme="light"] body:not(:has(.hero-header)) #content-container, [data-theme="light"] body:not(:has(.quickstart-hero-card)) .mdx-content { background-color: #fffffd; } /* Main Content Container */ main article { margin: 0 auto !important; width: 100%; max-width: 1200px; padding-left: 20px !important; padding-right: 20px !important; } /* 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: 1070px !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) { main article { max-width: 1300px !important; } body:not(:has(.hp-wrap)):not(:has(.sdk-overview-container)) #content-area { max-width: 1280px !important; } } /* * Mintlify right column ("On this page"): #content-side-layout uses border-l with * dark:border-gray-800, which is too close to the dark content background (#262624). */ .dark #content-side-layout, html.dark #content-side-layout, html[data-theme="dark"] #content-side-layout, [data-theme="dark"] #content-side-layout { border-left-color: rgba(255, 255, 255, 0.14) !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. data-active-deepest = current section. */ #table-of-contents { box-sizing: border-box; } #table-of-contents > button:first-of-type, #table-of-contents > div { box-sizing: border-box; padding-left: 1rem !important; } #table-of-contents .toc-item { box-sizing: border-box; padding-left: 1rem !important; position: relative; } /* Active TOC row: dot marker (same brand colors as link emphasis). */ #table-of-contents .toc-item[data-active-deepest="true"]::before { background-color: #6f5410; border-radius: 50%; content: ""; height: 0.375rem; left: 0.2rem; 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 { background-color: #ffe148; } main article > *:not(.hero-header):not(.quickstart-hero-card):not(.sdk-info-banner):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(.hero-header):not(.quickstart-hero-card):not(.sdk-info-banner):not(.sdk-overview-container):not(.news-ticker-banner-wrapper) { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ======================================== TYPOGRAPHY & HEADINGS ======================================== */ /* Hero Header (Legacy Style) */ .hero-header:has(p.hero-subtitle) { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 48px 0 0 0; margin: 48px auto 0 auto; width: 100%; max-width: 1200px; position: relative; } .hero-title { font-size: 32px !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0 !important; color: #1a1a1a !important; position: relative; width: 100%; } .hero-title strong { font-weight: 600 !important; position: relative; display: inline-block; } .hero-title strong::before { content: ''; position: absolute; bottom: -10px; left: 0; width: 75%; height: 6px; background: #000000; } .hero-title strong::after { content: ''; position: absolute; bottom: -6px; left: 24px; width: calc(1200px - 48px); max-width: calc(100vw - 48px - 40px); height: 2px; background: #000000; display: block; visibility: visible; opacity: 1; } html.dark .hero-title { color: #ffffff !important; } html.dark .hero-title strong::before, html.dark .hero-title strong::after { background: #ffffff; } .hero-subtitle { font-size: 16px !important; line-height: 1.6 !important; color: #6b7280 !important; margin: 0 !important; font-weight: 400 !important; text-align: right !important; flex: 1; max-width: 600px; margin-left: auto; } html.dark .hero-subtitle { color: #9ca3af !important; } /* Style p tags in hero-header */ .hero-header p.hero-subtitle { font-size: 16px !important; color: #6b7280 !important; margin: 0 !important; padding: 0 !important; letter-spacing: normal !important; line-height: 1.5 !important; text-align: left !important; width: 100% !important; max-width: 100% !important; display: block !important; } html.dark .hero-header p.hero-subtitle { color: #9ca3af !important; } /* Responsive Hero Header */ @media (max-width: 1200px) { .hero-header { gap: 40px; padding: 60px 60px 40px 60px !important; } .hero-header:has(p.hero-subtitle) { gap: 24px; padding: 48px 0 0 0; } } @media (max-width: 968px) { .hero-header { flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 40px 30px 40px !important; margin: 0; width: 100%; } .hero-header:has(p.hero-subtitle) { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 40px 0 40px !important; margin: 32px auto 0 auto; } .hero-title { font-size: 28px !important; white-space: normal; } .hero-title strong::after { left: 24px; width: calc(100vw - 40px - 40px - 48px); max-width: calc(100% - 48px); display: block !important; visibility: visible !important; opacity: 1 !important; background: #000000 !important; } html.dark .hero-title strong::after { background: #ffffff !important; } .hero-subtitle, .hero-header p.hero-subtitle { font-size: 15px !important; text-align: left !important; max-width: 100%; margin-left: 0; } } @media (max-width: 640px) { .hero-header { padding: 40px 15px 40px 15px !important; } .hero-header:has(p.hero-subtitle) { padding: 24px 16px 0 16px !important; margin: 24px auto 0 auto; } .hero-title { font-size: 24px !important; } .hero-title strong::after { left: 8px; width: calc(100vw - 48px); max-width: calc(100vw - 48px); display: block !important; visibility: visible !important; opacity: 1 !important; background: #000000 !important; } html.dark .hero-title strong::after { background: #ffffff !important; } .hero-subtitle, .hero-header p.hero-subtitle { font-size: 14px !important; margin-top: 0; } } /* ======================================== 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; } } /* ======================================== COMPONENTS ======================================== */ /* SDK Info Banner */ .sdk-info-banner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 24px; margin: 24px auto 48px auto !important; width: 100%; max-width: 1300px; margin-left: auto; margin-right: auto; background-color: #2d2d2d; border-radius: 8px; border: 1px solid #404040; box-sizing: border-box; position: relative; z-index: 1; text-align: center; } /* Separator line after SDK banner */ .sdk-info-banner::after { content: ''; position: absolute; bottom: -24px; left: 0; right: 0; height: 1px; background-color: #e5e7eb; max-width: 1200px; margin: 0 auto; } html.dark .sdk-info-banner::after { background-color: #404040; } html.dark .sdk-info-banner { background-color: #13171B; border-color: #404040; } .sdk-info-banner .info-icon { width: 24px; height: 24px; flex-shrink: 0; color: #ffffff; } html.dark .sdk-info-banner .info-icon { color: #ffffff; } .sdk-info-banner .info-text { margin: 0; font-size: 15px; line-height: 1.5; color: #ffffff; flex: 1; } html.dark .sdk-info-banner .info-text { color: #ffffff; } .sdk-info-banner .info-text strong { font-weight: 600; color: #ffffff; } html.dark .sdk-info-banner .info-text strong { color: #ffffff; } /* Responsive adjustments for SDK Section Wrapper and Banner */ @media (max-width: 1200px) { .sdk-info-banner { padding: 16px 20px; margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } .sdk-info-banner::after { left: 20px; right: 20px; } } @media (max-width: 968px) { .sdk-section-wrapper { margin: 32px auto !important; } .sdk-info-banner { padding: 14px 20px; margin: 20px auto 40px auto !important; width: calc(100% - 80px); max-width: calc(100% - 80px); display: flex !important; align-items: center !important; } .sdk-info-banner::after { left: 40px; right: 40px; } .sdk-info-banner .info-icon { width: 20px; height: 20px; } .sdk-info-banner .info-text { font-size: 14px; } } @media (max-width: 768px) { .sdk-info-banner { padding: 14px 18px; margin: 18px auto 32px auto !important; width: calc(100% - 40px); max-width: calc(100% - 40px); gap: 14px; display: flex !important; align-items: center !important; } .sdk-info-banner::after { left: 20px; right: 20px; bottom: -16px; } .sdk-info-banner .info-icon { width: 20px; height: 20px; } .sdk-info-banner .info-text { font-size: 14px; } } @media (max-width: 640px) { .sdk-section-wrapper { margin: 24px auto !important; padding: 0 16px !important; } .sdk-info-banner { gap: 12px; padding: 12px 16px; margin: 16px auto 24px auto !important; width: calc(100% - 32px); max-width: calc(100% - 32px); display: flex !important; align-items: center !important; } .sdk-info-banner::after { left: 16px; right: 16px; bottom: -12px; } .sdk-info-banner .info-text { font-size: 13px; } } /* ======================================== NAVIGATION & BUTTONS ======================================== */ /* 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; } } /* Learning Path Buttons — strip overlay injected by /scripts/suki-cta-strip-hover.js */ .learning-path-button { display: inline-flex !important; position: relative !important; isolation: isolate !important; overflow: hidden !important; padding: 8px 16px !important; margin: 0 !important; justify-content: center !important; align-items: center !important; border-radius: 18px !important; background: #FFE148 !important; color: #000000 !important; text-decoration: none !important; font-weight: 500 !important; font-size: 14px !important; border: none !important; min-height: 30px !important; box-shadow: none !important; outline: none !important; transition: background 0.15s ease !important; } .learning-path-button svg { position: relative; z-index: 1; } .learning-path-button:active { background: #ffe89c !important; } .learning-path-button-secondary { display: inline-flex !important; position: relative !important; isolation: isolate !important; overflow: hidden !important; padding: 12px 50px !important; margin: 0 !important; justify-content: center !important; align-items: center !important; border-radius: 18px !important; background: #FFE148 !important; color: #000000 !important; text-decoration: none !important; font-weight: 540 !important; font-size: 16px !important; border: none !important; min-height: 45px !important; box-shadow: none !important; outline: none !important; transition: background 0.15s ease !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 .hp-cta-secondary .suki-strip-hover-seg, [data-theme="dark"] .hp-cta-secondary .suki-strip-hover-seg { background: rgba(255, 255, 255, 0.08); } html.dark .hp-home-feature-footer-panel .suki-strip-hover-seg, [data-theme="dark"] .hp-home-feature-footer-panel .suki-strip-hover-seg { background: rgba(255, 255, 255, 0.06); } /* Dark mode: default black tint is invisible on dark fills — stronger strips for these controls */ html.dark a.hp-wn-all.suki-strip-hover-host .suki-strip-hover-seg, [data-theme="dark"] a.hp-wn-all.suki-strip-hover-host .suki-strip-hover-seg { background: rgba(255, 225, 72, 0.22); } 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, #content-area a.hp-home-feature-footer-link:hover .suki-strip-hover-seg, #content-area a.hp-home-feature-footer-link: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: #ffffff !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: #ffffff !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. */ /* 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): transparent fill + border. Targeted by URL; Mintlify does not allow a custom class on navbar.links. * (Logical name for this look: navbar-link-new — CSS only, no DOM class.) */ 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"]) { background: transparent !important; border: 1px solid #e5e7eb !important; border-radius: 18px !important; color: #000000 !important; padding: 6px 16px !important; } nav li:has(a[href*="status-platform.suki.ai"]) a, header li:has(a[href*="status-platform.suki.ai"]) a, #navbar li:has(a[href*="status-platform.suki.ai"]) a, nav li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, header li.navbar-link:has(a[href*="status-platform.suki.ai"]) a, #navbar 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: #ffffff !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: #ffffff !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; } } /* ======================================== NAVBAR — Docs MCP dropdown (scripts/mcp-navbar-dropdown.js) ======================================== */ nav li.suki-mcp-nav-root, header li.suki-mcp-nav-root, #navbar li.suki-mcp-nav-root { display: flex !important; align-items: center !important; height: 36px !important; max-height: 36px !important; overflow: visible !important; box-sizing: border-box !important; list-style: none !important; position: relative !important; } .suki-mcp-nav-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; height: 100% !important; min-height: 36px !important; margin: 0 !important; padding: 4px 6px !important; box-sizing: border-box !important; font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !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; color: #111827 !important; transition: color 0.15s ease !important; } .suki-mcp-nav-trigger:hover { background: transparent !important; border: none !important; color: #6f5410 !important; } .suki-mcp-nav-trigger[aria-expanded="true"] { color: #6f5410 !important; } .suki-mcp-nav-trigger:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: 2px !important; border-radius: 4px !important; } .suki-mcp-nav-icon { flex-shrink: 0 !important; display: block !important; } .suki-mcp-nav-icon path { stroke: currentColor !important; } .suki-mcp-nav-caret { flex-shrink: 0 !important; display: block !important; transition: transform 0.2s ease !important; color: inherit !important; } .suki-mcp-nav-caret path { fill: currentColor !important; } .suki-mcp-nav-trigger[aria-expanded="true"] .suki-mcp-nav-caret { transform: rotate(180deg) !important; } html.dark .suki-mcp-nav-trigger, html[data-theme="dark"] .suki-mcp-nav-trigger, [data-theme="dark"] .suki-mcp-nav-trigger { background: transparent !important; border: none !important; color: #e5e7eb !important; } html.dark .suki-mcp-nav-trigger:hover, html[data-theme="dark"] .suki-mcp-nav-trigger:hover, [data-theme="dark"] .suki-mcp-nav-trigger:hover { background: transparent !important; border: none !important; color: #ffe148 !important; } html.dark .suki-mcp-nav-trigger[aria-expanded="true"], html[data-theme="dark"] .suki-mcp-nav-trigger[aria-expanded="true"], [data-theme="dark"] .suki-mcp-nav-trigger[aria-expanded="true"] { color: #ffe148 !important; } html.dark .suki-mcp-nav-trigger:focus-visible, html[data-theme="dark"] .suki-mcp-nav-trigger:focus-visible, [data-theme="dark"] .suki-mcp-nav-trigger:focus-visible { outline-color: #ffe148 !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; border-radius: 12px !important; border: 1px solid #e5e7eb !important; background: #ffffff !important; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.14) !important; } html.dark .suki-mcp-nav-panel, html[data-theme="dark"] .suki-mcp-nav-panel, [data-theme="dark"] .suki-mcp-nav-panel { border-color: rgba(255, 255, 255, 0.14) !important; background: #262624 !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38) !important; } .suki-mcp-nav-panel[hidden] { display: none !important; } .suki-mcp-nav-panel-inner { overflow-y: auto !important; overflow-x: hidden !important; padding: 0 16px 16px !important; -webkit-overflow-scrolling: touch !important; } .suki-mcp-nav-header-row { padding: 16px 0 8px !important; border-bottom: 1px solid #e5e7eb !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.1) !important; } .suki-mcp-nav-panel-title { display: block !important; font-size: 15px !important; font-weight: 600 !important; color: #111827 !important; margin: 0 !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: #ffffff !important; } .suki-mcp-nav-intro { font-size: 13px !important; line-height: 1.5 !important; color: #6b7280 !important; margin: 0 !important; padding: 12px 0 4px !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-section { padding: 14px 0 !important; border-bottom: 1px solid #e5e7eb !important; } html.dark .suki-mcp-nav-section, html[data-theme="dark"] .suki-mcp-nav-section, [data-theme="dark"] .suki-mcp-nav-section { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } .suki-mcp-nav-section:last-of-type { border-bottom: none !important; } .suki-mcp-nav-section-head { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 8px !important; margin-bottom: 8px !important; } .suki-mcp-nav-tool-name { font-size: 13px !important; font-weight: 600 !important; color: #111827 !important; } html.dark .suki-mcp-nav-tool-name, html[data-theme="dark"] .suki-mcp-nav-tool-name, [data-theme="dark"] .suki-mcp-nav-tool-name { color: #f3f4f6 !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-codeblock { display: flex !important; flex-direction: row !important; align-items: stretch !important; border-radius: 8px !important; overflow: hidden !important; border: 1px solid #e5e7eb !important; background: #f3f4f6 !important; } html.dark .suki-mcp-nav-codeblock, html[data-theme="dark"] .suki-mcp-nav-codeblock, [data-theme="dark"] .suki-mcp-nav-codeblock { background: #17223b !important; border-color: #374151 !important; } .suki-mcp-nav-code { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 10px 12px !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; font-size: 12px !important; line-height: 1.45 !important; white-space: pre-wrap !important; word-break: break-word !important; color: #111827 !important; background: #fffade !important; } html.dark .suki-mcp-nav-code, html[data-theme="dark"] .suki-mcp-nav-code, [data-theme="dark"] .suki-mcp-nav-code { color: #e3e0e0 !important; background: #1c1b19 !important; } .suki-mcp-nav-copy { flex: 0 0 44px !important; width: 44px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-left: 1px solid #e5e7eb !important; background: #f3f4f6 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #6b7280 !important; transition: background 0.15s ease, color 0.15s ease !important; } .suki-mcp-nav-copy:hover { background: #e5e7eb !important; color: #111827 !important; } .suki-mcp-nav-copy:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: 2px !important; z-index: 1 !important; } html.dark .suki-mcp-nav-copy, html[data-theme="dark"] .suki-mcp-nav-copy, [data-theme="dark"] .suki-mcp-nav-copy { background: #1e293b !important; border-left-color: #374151 !important; color: #9ca3af !important; } html.dark .suki-mcp-nav-copy:hover, html[data-theme="dark"] .suki-mcp-nav-copy:hover, [data-theme="dark"] .suki-mcp-nav-copy:hover { background: #334155 !important; color: #ffffff !important; } .suki-mcp-nav-copy--done { background: #d1fae5 !important; color: #ffffff !important; background: #6f5410 !important; } html.dark .suki-mcp-nav-copy--done, html[data-theme="dark"] .suki-mcp-nav-copy--done, [data-theme="dark"] .suki-mcp-nav-copy--done { background: #FFE148 !important; color: #000000 !important; } .suki-mcp-nav-footer { padding-top: 12px !important; margin-top: 4px !important; border-top: 1px solid #e5e7eb !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; } .suki-mcp-nav-doc-link { font-size: 13px !important; font-weight: 500 !important; color: #6f5410 !important; text-decoration: none !important; } .suki-mcp-nav-doc-link:hover { text-decoration: underline !important; } html.dark .suki-mcp-nav-doc-link, html[data-theme="dark"] .suki-mcp-nav-doc-link, [data-theme="dark"] .suki-mcp-nav-doc-link { color: #ffe148 !important; } .suki-mcp-nav-backdrop { position: fixed !important; inset: 0 !important; z-index: 10001 !important; background: rgba(15, 23, 42, 0.28) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .suki-mcp-nav-backdrop[hidden] { display: none !important; } /* Dark mode: match site charcoal (#262624) instead of cold black; no backdrop blur so the scrim stays on-palette */ html.dark .suki-mcp-nav-backdrop, html[data-theme="dark"] .suki-mcp-nav-backdrop, [data-theme="dark"] .suki-mcp-nav-backdrop { background: rgba(38, 38, 36, 0.82) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } @media (max-width: 640px) { nav li.suki-mcp-nav-root, header li.suki-mcp-nav-root, #navbar li.suki-mcp-nav-root { height: auto !important; max-height: none !important; } .suki-mcp-nav-trigger { padding: 4px 4px !important; min-height: auto !important; height: auto !important; } .suki-mcp-nav-panel { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; } } /* Tables */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 32px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); background: white; } html.dark table, [data-theme="dark"] table { background: #0d0d0d; border: 1px solid rgba(255, 225, 72, 0.14); box-shadow: none; /* Reassert clipping: thead/td backgrounds can paint square corners past a rounded border */ border-radius: 12px; overflow: hidden; } /* Match inner corners to table radius (light: no border on table; dark: 1px border → slightly smaller inner radius) */ table thead tr:first-child th:first-child { border-top-left-radius: 12px; } table thead tr:first-child th:last-child { border-top-right-radius: 12px; } table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; } table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; } html.dark table thead tr:first-child th:first-child, [data-theme="dark"] table thead tr:first-child th:first-child { border-top-left-radius: 11px; } html.dark table thead tr:first-child th:last-child, [data-theme="dark"] table thead tr:first-child th:last-child { border-top-right-radius: 11px; } html.dark table tbody tr:last-child td:first-child, [data-theme="dark"] table tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; } html.dark table tbody tr:last-child td:last-child, [data-theme="dark"] table tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; } /* Table Header */ table thead { background: #FFFADE; } html.dark table thead, [data-theme="dark"] table thead { background: #1c1b19; border-bottom: 1px solid rgba(255, 225, 72, 0.14); } table thead tr th { padding: 16px 20px !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #000000 !important; text-align: left !important; border-bottom: 2px solid #FFA016 !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, 225, 72, 0.45) !important; } /* * First column: was fixed 80px (S.No). Min-width gives error codes and labels room; long * first-column copy can still wrap. */ table thead tr th:first-child { min-width: 200px; text-align: center !important; } table tbody tr td:first-child { min-width: 200px; text-align: center !important; font-weight: 600 !important; color: #6b7280 !important; } html.dark table tbody tr td:first-child, [data-theme="dark"] table tbody tr td:first-child { color: #b5b3af !important; } /* Table Body */ table tbody tr { transition: all 0.2s ease; } table tbody tr:hover { background: #FFFADE !important; transform: scale(1.01); box-shadow: 0 2px 8px rgba(255, 225, 72, 0.2); } html.dark table tbody tr:hover, [data-theme="dark"] table tbody tr:hover { background: #2d2d2d !important; box-shadow: 0 2px 8px rgba(255, 225, 72, 0.1); /* scale() draws outside overflow:hidden rounded rects in dark mode */ transform: none; } table tbody tr td { padding: 16px 20px !important; font-size: 14px !important; line-height: 1.6 !important; color: #374151 !important; border-bottom: 1px solid #e5e7eb !important; } html.dark table tbody tr td, [data-theme="dark"] table tbody tr td { color: #e8e6e3 !important; border-bottom-color: rgba(255, 225, 72, 0.12) !important; } /* Alternating row colors */ table tbody tr:nth-child(even) { background: #f9fafb; } html.dark table tbody tr:nth-child(even), [data-theme="dark"] table tbody tr:nth-child(even) { background: #121211; } /* Value column (2nd column) - make it stand out */ table tbody tr td:nth-child(2) { font-family: 'Monaco', 'Menlo', monospace !important; font-size: 13px !important; background: #f3f4f6 !important; color: #1f2937 !important; font-weight: 500 !important; } html.dark table tbody tr td:nth-child(2), [data-theme="dark"] table tbody tr td:nth-child(2) { background: #1c1b19 !important; color: #ffe148 !important; border-bottom-color: rgba(255, 225, 72, 0.1) !important; } table tbody tr:hover td:nth-child(2) { background: #FFE148 !important; color: #000000 !important; } html.dark table tbody tr:hover td:nth-child(2), [data-theme="dark"] table tbody tr:hover td:nth-child(2) { background: #ffe148 !important; color: #000000 !important; } /* Description column (3rd column) */ table tbody tr td:nth-child(3) { color: #111827 !important; font-weight: 500 !important; } html.dark table tbody tr td:nth-child(3), [data-theme="dark"] table tbody tr td:nth-child(3) { color: #e8e6e3 !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: 12px 10px !important; } table thead tr th:first-child, table tbody tr td:first-child { min-width: 140px; } } /* * 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; } #content-area .mermaid svg, #content-area svg.mermaid { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } /* 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; } /* ======================================== COOKIE CONSENT BANNER - Modern Design ======================================== */ .cookie-consent-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; background: #FFFFFF; border-top: 1px solid #e5e7eb; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); padding: 0; opacity: 0; transform: translateY(100%); transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); } html.dark .cookie-consent-banner, [data-theme="dark"] .cookie-consent-banner { background: #23272A; border-top-color: #374151; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); } .cookie-consent-content { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px; flex-wrap: wrap; } .cookie-consent-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #FFE148 0%, #FFF394 100%); flex-shrink: 0; box-shadow: 0 4px 12px rgba(255, 225, 72, 0.3); } .cookie-consent-icon svg { width: 24px; height: 24px; display: block; flex-shrink: 0; } .cookie-consent-icon svg path { fill: #000000; } .cookie-consent-text { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 6px; } .cookie-consent-title { font-size: 18px; font-weight: 700; color: #111827; margin: 0; letter-spacing: -0.02em; line-height: 1.3; } html.dark .cookie-consent-title, [data-theme="dark"] .cookie-consent-title { color: #FFFFFF; } .cookie-consent-description { font-size: 15px; line-height: 1.6; color: #6B7280; margin: 0; font-weight: 400; } html.dark .cookie-consent-description, [data-theme="dark"] .cookie-consent-description { color: #D1D5DB; } .cookie-consent-link { color: #8B6914; text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: all 0.2s ease; display: inline-block; } .cookie-consent-link:hover { color: #6B4F0F; border-bottom-color: #8B6914; } html.dark .cookie-consent-link, [data-theme="dark"] .cookie-consent-link { color: #FFE148; } html.dark .cookie-consent-link:hover, [data-theme="dark"] .cookie-consent-link:hover { color: #FFF394; border-bottom-color: #FFE148; } .cookie-consent-buttons { display: flex; gap: 12px; flex-shrink: 0; } .cookie-consent-accept { background: linear-gradient(135deg, #FFE148 0%, #FFF394 100%); color: #000000; border: none; border-radius: 24px; padding: 14px 32px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; box-shadow: 0 4px 12px rgba(255, 225, 72, 0.3); letter-spacing: -0.01em; position: relative; overflow: hidden; } .cookie-consent-accept::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; } .cookie-consent-accept:hover::before { left: 100%; } .cookie-consent-accept:hover { background: linear-gradient(135deg, #FFF394 0%, #FFE148 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 225, 72, 0.4); } .cookie-consent-accept:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(255, 225, 72, 0.3); } html.dark .cookie-consent-accept, [data-theme="dark"] .cookie-consent-accept { background: linear-gradient(135deg, #FFE148 0%, #FFF394 100%); color: #000000; } html.dark .cookie-consent-accept:hover, [data-theme="dark"] .cookie-consent-accept:hover { background: linear-gradient(135deg, #FFF394 0%, #FFE148 100%); } /* Responsive adjustments */ @media (max-width: 968px) { .cookie-consent-content { padding: 20px 24px; gap: 20px; } .cookie-consent-icon { width: 44px; height: 44px; } .cookie-consent-icon svg { width: 22px; height: 22px; } .cookie-consent-title { font-size: 17px; } .cookie-consent-description { font-size: 14px; } } @media (max-width: 768px) { .cookie-consent-banner { box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); } html.dark .cookie-consent-banner, [data-theme="dark"] .cookie-consent-banner { box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4); } .cookie-consent-content { flex-direction: row; align-items: flex-start; padding: 20px; gap: 16px; } .cookie-consent-icon { width: 40px; height: 40px; margin-top: 2px; } .cookie-consent-icon svg { width: 20px; height: 20px; } .cookie-consent-text { flex: 1; min-width: 0; } .cookie-consent-buttons { width: 100%; margin-top: 4px; } .cookie-consent-accept { width: 100%; padding: 12px 24px; } .cookie-consent-title { font-size: 16px; } .cookie-consent-description { font-size: 14px; } } @media (max-width: 480px) { .cookie-consent-content { padding: 16px; gap: 12px; } .cookie-consent-icon { width: 36px; height: 36px; } .cookie-consent-icon svg { width: 18px; height: 18px; } .cookie-consent-title { font-size: 15px; } .cookie-consent-description { font-size: 13px; } .cookie-consent-accept { padding: 12px 20px; font-size: 14px; } } /* ======================================== SITE ANNOUNCEMENT BANNER (fixed top; stays visible on scroll) Loaded by /scripts/announcement-banner.js. Bar is position:fixed; script sets --suki-announcement-banner-height on html for body padding-top and pins #navbar under the bar. ======================================== */ html[data-suki-announcement='on'] body { padding-top: var(--suki-announcement-banner-height, 0px); } .suki-announcement-banner { position: fixed; top: 0; left: 0; right: 0; width: 100%; /* * Below Mintlify API "Try it" / dialog backdrop (typically z-50) so the scrim dims this bar too. * Above #suki-sidebar-collapse-host (25) and collapsed rail (30). Navbar sits below this strip via JS top offset, not z-stacking overlap. */ z-index: 40; box-sizing: border-box; padding-top: max(0px, env(safe-area-inset-top)); background: #000000; box-shadow: 0 1px 0 rgba(111, 84, 16, 0.08); } html.dark .suki-announcement-banner, [data-theme="dark"] .suki-announcement-banner { background: #FFE148; border-bottom-color: #d4b632; box-shadow: 0 1px 0 rgba(111, 84, 16, 0.1); } .suki-announcement-banner__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 2px clamp(12px, 3vw, 24px) 3px; min-height: 0; text-align: center; } .suki-announcement-banner__text { flex: 0 1 auto; min-width: 0; max-width: 100%; } .suki-announcement-banner__message { margin: 0; font-size: clamp(11px, 2.5vw, 12.5px); line-height: 1.35; color: #ffffff; font-weight: 320; text-align: center; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 100%; } html.dark .suki-announcement-banner__message, [data-theme="dark"] .suki-announcement-banner__message { color: #000000; } .suki-announcement-banner__message-text { min-width: 0; } /* Simple pill (no dot); label comes from CONFIG.badgeText only */ .suki-announcement-banner__badge { display: inline-block; flex-shrink: 0; padding: 2px 9px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: 0.02em; color: #ffffff; background: #3d3c3c; border: 1px solid rgba(49, 49, 47, 0.28); white-space: nowrap; vertical-align: middle; } html.dark .suki-announcement-banner__badge, [data-theme="dark"] .suki-announcement-banner__badge { background: #ebc804; color: #000000; border: 1px solid rgba(49, 49, 47, 0.28); } .suki-announcement-banner__actions { display: flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; } .suki-announcement-banner__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: #ffffff; background: transparent; border-radius: 23px; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: color 0.12s ease; } html.dark .suki-announcement-banner__cta, [data-theme="dark"] .suki-announcement-banner__cta { color: #000000; } .suki-announcement-banner__cta:hover { color: #fff394; } html.dark .suki-announcement-banner__cta:hover, [data-theme="dark"] .suki-announcement-banner__cta:hover { color: #5a4310; } .suki-announcement-banner__dismiss { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; margin: 0; border: none; border-radius: 6px; background: transparent; color: #6b7280; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .suki-announcement-banner__dismiss svg { width: 15px; height: 15px; flex-shrink: 0; } .suki-announcement-banner__dismiss:hover { background: rgba(0, 0, 0, 0.05); color: #374151; } .suki-announcement-banner__dismiss:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; } .suki-announcement-banner__cta:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; } /* Laptop / large screens: message left, CTA + dismiss on the right. Phones unchanged (see max-width: 639px below). */ @media (min-width: 1024px) { .suki-announcement-banner__inner { justify-content: space-between; text-align: left; gap: 12px 20px; } .suki-announcement-banner__text { flex: 1 1 auto; min-width: 0; text-align: left; } .suki-announcement-banner__message { justify-content: flex-start; text-align: left; } .suki-announcement-banner__actions { justify-content: flex-end; flex-shrink: 0; margin-left: auto; } } /* Phone: one short row, minimal vertical padding (avoid tall stacked banner). */ @media (max-width: 639px) { .suki-announcement-banner__inner { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; padding: 8px 8px 8px; gap: 6px; } .suki-announcement-banner__text { flex: 1 1 auto; min-width: 0; } .suki-announcement-banner__message { font-size: 11px; line-height: 1.6; text-align: center; gap: 4px; } .suki-announcement-banner__message-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; text-align: center; } .suki-announcement-banner__badge { font-size: 10px; padding: 1px 7px; } .suki-announcement-banner__actions { flex-shrink: 0; gap: 2px; } .suki-announcement-banner__cta { font-size: 11px; min-height: 26px; padding: 2px 6px; } .suki-announcement-banner__dismiss { width: 28px; height: 28px; min-width: 28px; min-height: 28px; } .suki-announcement-banner__dismiss svg { width: 14px; height: 14px; } } /* ======================================== 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; } /* HTTP Method Badges - Dark Mode */ .dark *[class*="bg-blue"] { background-color: #1b4080 !important; } .dark *[class*="bg-green"] { background-color: #0d6341 !important; } .dark *[class*="bg-red"] { background-color: #a70404e3 !important; } .dark *[class*="bg-orange"] { background-color: #a62828 !important; } .light *[class*="bg-red"] { background-color: #f0e5e5 !important; } /* ======================================== PARTNERS LOGO STRIP ======================================== */ .partners-strip { max-width: 1200px; margin: 64px auto 48px auto; padding: 0 20px; text-align: center; } .partners-strip-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9CA3AF; margin: 0 0 32px 0; } .partners-strip-logos { display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap; } .partners-strip-logo-link { display: inline-flex; align-items: center; text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; transition: opacity 0.2s ease; } .partners-strip-logo { height: 32px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.5); transition: filter 0.3s ease; } .partners-strip-logo-link:hover .partners-strip-logo { filter: grayscale(0%) opacity(1); } html.dark .partners-strip-label, [data-theme="dark"] .partners-strip-label { color: #6B7280; } html.dark .partners-strip-logo, [data-theme="dark"] .partners-strip-logo { filter: grayscale(100%) brightness(0) invert(1) opacity(0.4); } html.dark .partners-strip-logo-link:hover .partners-strip-logo, [data-theme="dark"] .partners-strip-logo-link:hover .partners-strip-logo { filter: grayscale(0%) brightness(0) invert(1) opacity(0.9); } @media (max-width: 640px) { .partners-strip { margin: 48px auto 32px auto; } .partners-strip-logos { gap: 32px; } .partners-strip-logo { height: 24px; } } /* ======================================== INTEGRATION TABS ======================================== */ .integration-tabs-wrapper { max-width: 1200px; margin: 0 auto 48px auto; padding: 0 20px; } .integration-tab-content { display: flex; align-items: center; gap: 48px; padding: 32px 0 8px 0; } .integration-tab-info { flex: 1; min-width: 0; } .integration-tab-visual { flex: 1; min-width: 0; } .integration-tab-visual img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; } .integration-tab-title { font-size: 28px; font-weight: 700; color: #111827; margin: 0 0 12px 0; line-height: 1.3; } .integration-tab-description { font-size: 16px; line-height: 1.7; color: #4B5563; margin: 0 0 20px 0; } .integration-tab-install { margin-bottom: 20px; } .integration-tab-install code { display: inline-block; background: #F3F4F6 !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 10px 16px !important; font-size: 13px !important; color: #1F2937 !important; } .integration-tab-link { display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; color: #6F5410; text-decoration: underline; text-underline-offset: 4px; } .integration-tab-link:any-link { text-decoration: underline !important; border-bottom: none !important; box-shadow: none !important; } .integration-tab-link:hover { color: #856E34; } /* Integration Tabs - Dark Mode */ html.dark .integration-tab-title, [data-theme="dark"] .integration-tab-title { color: #F9FAFB; } html.dark .integration-tab-description, [data-theme="dark"] .integration-tab-description { color: #9CA3AF; } html.dark .integration-tab-link, [data-theme="dark"] .integration-tab-link { color: #FFE148; } html.dark .integration-tab-link:hover, [data-theme="dark"] .integration-tab-link:hover { color: #FFF394; } html.dark .integration-tab-install code, [data-theme="dark"] .integration-tab-install code { background: #1F2937 !important; border-color: #374151 !important; color: #FFE148 !important; } /* Integration Tabs - Responsive */ @media (max-width: 768px) { .integration-tab-content { flex-direction: column-reverse; gap: 24px; } .integration-tab-title { font-size: 22px; } .integration-tab-description { font-size: 15px; } .integration-tabs-wrapper { padding: 0 16px; } } @media (max-width: 480px) { .integration-tab-title { font-size: 20px; } .integration-tab-description { font-size: 14px; line-height: 1.6; } .integration-tab-install code { font-size: 12px !important; padding: 8px 12px !important; } .integration-tabs-wrapper { padding: 0 12px; margin-bottom: 32px; } } /* ======================================== 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: 500; letter-spacing: -0.015em; color: #111827; 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: #ffffff; } .sdk-overview-main-description { font-size: 16px; line-height: 1.7; color: #41413F; margin: 0 0 40px 0; } html.dark .sdk-overview-main-description, [data-theme="dark"] .sdk-overview-main-description { color: #E3E0E0; } .sdk-overview-subtitle { font-size: 24px; font-weight: 500; letter-spacing: -0.012em; color: #282725; 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: #ffffff; } .sdk-overview-text { font-size: 16px; line-height: 1.7; color: #41413F; margin: 0 0 16px 0; } .sdk-overview-text a { color: #111827; 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: #E3E0E0; } 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 { background-color: #f3f4f6 !important; color: #3b82f6 !important; border: 1px solid #d1d5db !important; padding: 2px 6px; border-radius: 4px; font-size: 14px; } html.dark .sdk-overview-text code, [data-theme="dark"] .sdk-overview-text code { background-color: #17223b !important; color: #f5a623 !important; border-color: #374151 !important; } .sdk-overview-list { font-size: 16px; line-height: 1.8; color: #41413F; 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: #E3E0E0; } .sdk-overview-list li { margin-bottom: 8px; display: list-item !important; list-style-type: inherit !important; } .sdk-overview-list strong { color: #111827; font-weight: 600; } html.dark .sdk-overview-list strong, [data-theme="dark"] .sdk-overview-list strong { color: #ffffff; } .sdk-overview-list code { background-color: #F3F4F6 !important; color: #3B82F6 !important; border: 1px solid #D1D5DB !important; padding: 2px 6px; border-radius: 4px; font-size: 14px; } html.dark .sdk-overview-list code, [data-theme="dark"] .sdk-overview-list code { background-color: #17223b !important; color: #F5A623 !important; border-color: #374151 !important; } /* 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/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: #282725; margin: 0 0 12px; line-height: 1.3; } html.dark .sdk-rec-path-heading, [data-theme="dark"] .sdk-rec-path-heading { color: #ffffff; } .sdk-rec-path-lead { font-size: 16px; line-height: 1.7; color: #41413f; margin: 0 0 28px; max-width: 42rem; } html.dark .sdk-rec-path-lead, [data-theme="dark"] .sdk-rec-path-lead { color: #e3e0e0; } /* 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--span { grid-column: 1 / -1; max-width: 640px; width: 100%; justify-self: center; } .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: #1a1917; } html.dark .hp-io-method-card-title, [data-theme="dark"] .hp-io-method-card-title { color: #f3f4f6; } .hp-io-method-card-desc { margin: 0; font-family: inherit; font-size: 15px; line-height: 1.6; color: #5c5a57; } html.dark .hp-io-method-card-desc, [data-theme="dark"] .hp-io-method-card-desc { color: #b7b5b2; } .hp-io-method-card-desc strong { color: #282725; font-weight: 600; } html.dark .hp-io-method-card-desc strong, [data-theme="dark"] .hp-io-method-card-desc strong { color: #f5f4f2; } /* 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: #d1d5db; } 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; } /* 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: #e3e0e0; 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; } html.dark .hp-io-method-card-aside-text, [data-theme="dark"] .hp-io-method-card-aside-text { color: #a1a09c; } .hp-io-method-card-aside-text a { font-weight: 500; color: #6f5410; text-decoration: none; } .hp-io-method-card-aside-text a:hover { text-decoration: underline; } 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--span { grid-column: auto; max-width: none; justify-self: stretch; } .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; } @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: #282725; 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: #ffffff; } .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: #282725; margin: 0; flex: 1; } html.dark .sdk-overview-featured-card-header h3, [data-theme="dark"] .sdk-overview-featured-card-header h3 { color: #ffffff; } .sdk-overview-featured-description { font-size: 14px; line-height: 1.5; color: #535250; 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: #111827; 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: #6b7280; font-weight: 500; } html.dark .sdk-overview-quickstart-powered span { color: #ffffff; } .sdk-overview-quickstart-title { font-size: 28px; font-weight: 700; color: #111827; margin: 0 0 12px 0; line-height: 1.2; } html.dark .sdk-overview-quickstart-title { color: #ffffff; } .sdk-overview-quickstart-description { font-size: 15px; line-height: 1.6; color: #6b7280; margin: 0 0 24px 0; } html.dark .sdk-overview-quickstart-description { color: #ffffff; } .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: #111827; 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: #282725; 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: #41413f; 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: #41413f; } .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: #f9fafb; } 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: #d1d5db; border-color: transparent; } html.dark a.api-try-nav-item, [data-theme="dark"] a.api-try-nav-item { color: #d1d5db; } html.dark .api-try-nav-item:hover, [data-theme="dark"] .api-try-nav-item:hover { color: #ffffff; 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: #ffffff; 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: #ffffff; } 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)); } .sdk-overview-sdks-feature-grid { gap: 14px; } .api-new-apis-feature-grid, .release-notes-changelog-feature-grid { 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)); } } @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-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 (same pattern as home hp-home-hero-img) */ .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: #282725; } html.dark .suki-feature-title, [data-theme="dark"] .suki-feature-title { color: #ffffff; } .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: #535250; } 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); } /* Release notes: title + RSS subscribe */ .release-notes-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-bottom: 12px; } .release-notes-main-heading { margin-bottom: 0; flex: 1 1 auto; min-width: 0; line-height: 1.2; } .release-notes-rss-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px 10px 16px; border-radius: 9999px; border: 1px solid rgba(17, 24, 39, 0.12); background: #ffffff; color: #374151; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; line-height: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); 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; } .release-notes-rss-link:hover { border-color: #6f5410; background: #fffdf5; color: #6f5410; box-shadow: 0 2px 8px rgba(111, 84, 16, 0.1); text-decoration: none; } .release-notes-rss-link:focus-visible { outline: 2px solid #6f5410; outline-offset: 3px; } .release-notes-rss-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #6f5410; } .release-notes-rss-link:hover .release-notes-rss-icon { color: #6f5410; } .release-notes-rss-icon svg { display: block; } /* Arcs: stroked only. Dot is a (Mintlify removes from MDX HTML). */ .release-notes-rss-icon svg path:not([data-rss-dot]) { fill: none !important; stroke: currentColor; } .release-notes-rss-icon svg path[data-rss-dot] { fill: currentColor !important; stroke: none !important; } .release-notes-rss-label { position: relative; top: 0.5px; } html.dark .release-notes-rss-link, [data-theme="dark"] .release-notes-rss-link { border-color: rgba(255, 255, 255, 0.14); background: rgba(26, 29, 36, 0.85); color: #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } html.dark .release-notes-rss-icon, [data-theme="dark"] .release-notes-rss-icon { color: #ffe148; } html.dark .release-notes-rss-link:hover, [data-theme="dark"] .release-notes-rss-link:hover { border-color: #ffe148; background: rgba(255, 225, 72, 0.1); color: #fff394; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } html.dark .release-notes-rss-link:hover .release-notes-rss-icon, [data-theme="dark"] .release-notes-rss-link:hover .release-notes-rss-icon { color: #fff394; } html.dark .release-notes-rss-link:focus-visible, [data-theme="dark"] .release-notes-rss-link:focus-visible { outline-color: #ffe148; } @media (max-width: 640px) { .release-notes-title-row { gap: 10px 12px; margin-bottom: 10px; } .release-notes-rss-link { gap: 5px; padding: 6px 12px 6px 10px; font-size: 10px; letter-spacing: 0.05em; } .release-notes-rss-icon svg { width: 14px; height: 14px; } .release-notes-rss-label { top: 0; } } @media (max-width: 380px) { .release-notes-rss-link { padding: 5px 10px 5px 8px; font-size: 9px; gap: 4px; } .release-notes-rss-icon svg { width: 13px; height: 13px; } } /* Release notes: four changelog cards in one row (same styles as core capability cards) */ .release-notes-changelog-cards.core-capabilities-section { margin: 8px 0 28px; } .release-notes-changelog-cards .core-capabilities-grid { grid-template-columns: repeat(4, 1fr); margin-top: 8px; } @media (max-width: 1100px) { .release-notes-changelog-cards .core-capabilities-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .release-notes-changelog-cards .core-capabilities-grid { grid-template-columns: 1fr; } } /* Release notes home: vertical timeline (brand colors) */ .release-notes-timeline-section-title { margin-top: 2.5rem; margin-bottom: 0.5rem; } .release-notes-timeline-section-title:first-of-type { margin-top: 1.75rem; } .release-notes-timeline-hint { margin-top: 0; margin-bottom: 1rem; font-size: 14px; } /* Release notes home: product filter tabs (current-year entries only) */ .release-notes-filter-scope { margin-bottom: 0; } .release-notes-filter-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: flex-end; margin: 0 0 1.25rem; padding: 0 0 0.75rem; border-bottom: 1px solid #e5e7eb; } .release-notes-filter-tab { margin: 0; padding: 0.5rem 0.15rem; font-size: 0.9375rem; font-weight: 600; font-family: inherit; color: #6b7280; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; line-height: 1.3; transition: color 0.15s ease, border-color 0.15s ease; } .release-notes-filter-tab:hover { color: #374151; } .release-notes-filter-tab--active { color: #6f5410; border-bottom-color: #6f5410; } .release-notes-filter-empty { font-size: 0.9375rem; color: #6b7280; margin: 0 0 1.5rem; padding: 0.75rem 0; } html.dark .release-notes-filter-tabs, [data-theme="dark"] .release-notes-filter-tabs { border-bottom-color: #2b2b2b; } html.dark .release-notes-filter-tab, [data-theme="dark"] .release-notes-filter-tab { color: #9ca3af; } html.dark .release-notes-filter-tab:hover, [data-theme="dark"] .release-notes-filter-tab:hover { color: #d1d5db; } html.dark .release-notes-filter-tab--active, [data-theme="dark"] .release-notes-filter-tab--active { color: #ffe148; border-bottom-color: #ffe148; } html.dark .release-notes-filter-empty, [data-theme="dark"] .release-notes-filter-empty { color: #9ca3af; } /* One continuous rail across 2026 / 2025 / 2024 (release notes home) */ .release-notes-timeline-stack { --release-notes-date-col: 7.5rem; --release-notes-rail-col: 24px; --release-notes-rail-gap: 14px; --release-notes-rail-half: 12px; --release-notes-master-rail: #6f5410; /* Master rail `top` must align with the first dot so the line runs behind the ring and continues with no gap under it. Use distance from ul top to the top edge of the dot (not the center): expanded row uses margin-top on the dot + 0. Keep in sync with .release-notes-timeline-item-expanded .release-notes-timeline-dot { margin-top }. If the first row is compact (no expanded), set --release-notes-stack-first-rail-from-ul-top: 13px (52px row, dot centered). */ --release-notes-stack-first-h2-margin-top: 1.75rem; --release-notes-stack-first-h2-block: 1.75rem; --release-notes-stack-first-h2-margin-bottom: 0.5rem; --release-notes-stack-first-rail-from-ul-top: 6px; --release-notes-stack-rail-start: calc( var(--release-notes-stack-first-h2-margin-top) + var(--release-notes-stack-first-h2-block) + var(--release-notes-stack-first-h2-margin-bottom) + var(--release-notes-stack-first-rail-from-ul-top) ); /* End rail at vertical center of last dot (no stub below the last month). Last ul’s bottom margin is cleared so stack height ends at the last row; spacing after the timeline uses stack margin-bottom instead (avoids rail drawing through empty margin). --release-notes-stack-last-row-dot-from-bottom: half of compact row (52px / 2). For an expanded last row, override (distance from li bottom to dot center). */ --release-notes-stack-last-row-dot-from-bottom: 26px; --release-notes-stack-rail-end: var(--release-notes-stack-last-row-dot-from-bottom); position: relative; margin-bottom: 3rem; } .release-notes-timeline-stack::before { content: ""; position: absolute; left: calc(var(--release-notes-date-col) + var(--release-notes-rail-gap) + var(--release-notes-rail-half) - 1px); /* Pull up 1px so the rail meets the ring under anti-aliasing (no white hairline under the clock) */ top: calc(var(--release-notes-stack-rail-start) - 1px); bottom: var(--release-notes-stack-rail-end); width: 2px; background: var(--release-notes-master-rail); border-radius: 1px; z-index: 0; pointer-events: none; } .release-notes-timeline-stack .release-notes-timeline-section-title, .release-notes-timeline-stack .release-notes-timeline { position: relative; z-index: 1; } .release-notes-timeline-stack .release-notes-timeline-marker::before, .release-notes-timeline-stack .release-notes-timeline-marker::after { display: none; } .release-notes-timeline-stack > .release-notes-timeline:last-child { margin-bottom: 0; } html.dark .release-notes-timeline-stack, [data-theme="dark"] .release-notes-timeline-stack { --release-notes-master-rail: #ffe148; } .release-notes-timeline { --release-notes-date-col: 7.5rem; --release-notes-rail-col: 24px; --release-notes-rail-gap: 14px; --release-notes-rail-half: 12px; --release-notes-rail-active: #6f5410; --release-notes-rail-muted: #e5e7eb; /* One line color for every segment in this year’s list (no brand/gray mix) */ --release-notes-rail-line: var(--release-notes-rail-active); list-style: none; margin: 0 0 2rem; padding: 0; position: relative; } .release-notes-timeline-years { margin-bottom: 3rem; --release-notes-rail-line: var(--release-notes-rail-muted); } .release-notes-timeline-item { display: grid; grid-template-columns: var(--release-notes-date-col) var(--release-notes-rail-col) 1fr; gap: 0 var(--release-notes-rail-gap); align-items: center; min-height: 52px; } .release-notes-timeline-date { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-right: 2px; } .release-notes-timeline-month { font-size: 15px; font-weight: 700; color: #6F5410; line-height: 1.2; } .release-notes-timeline-year { font-size: 12px; font-weight: 500; color: #6b7280; line-height: 1.2; } .release-notes-timeline-year-muted { font-size: 11px; max-width: 9rem; } .release-notes-timeline-marker { position: relative; display: flex; justify-content: center; align-items: center; align-self: stretch; min-height: 52px; z-index: 1; } /* Segment above dot (inactive rail) */ .release-notes-timeline-marker::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; transform: translateX(-50%); margin-left: -1px; z-index: 0; background: var(--release-notes-rail-line); border-radius: 1px; } .release-notes-timeline-item:not(.release-notes-timeline-item-expanded) .release-notes-timeline-marker::before { bottom: 50%; height: auto; } .release-notes-timeline-item.release-notes-timeline-item-expanded .release-notes-timeline-marker::before { bottom: auto; height: 17px; } .release-notes-timeline-item:first-child .release-notes-timeline-marker::before { display: none; } /* Segment below dot */ .release-notes-timeline-marker::after { content: ""; position: absolute; left: 50%; width: 2px; transform: translateX(-50%); margin-left: -1px; z-index: 0; bottom: 0; border-radius: 1px; background: var(--release-notes-rail-line); } .release-notes-timeline-item:not(.release-notes-timeline-item-expanded) .release-notes-timeline-marker::after { top: 50%; height: auto; } .release-notes-timeline-item.release-notes-timeline-item-expanded .release-notes-timeline-marker::after { top: 17px; height: auto; } .release-notes-timeline-item:last-child .release-notes-timeline-marker::after { display: none; } /* Timeline nodes: ring + clock icon only (all rows) */ .release-notes-timeline-dot { --release-notes-clock-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%236F5410' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 8V12l3 2'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%236F5410'/%3E%3C/svg%3E"); width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; position: relative; z-index: 2; flex-shrink: 0; border: 2.5px solid var(--release-notes-rail-active); background-color: #ffffff; background-image: var(--release-notes-clock-bg); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; } .release-notes-timeline-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .release-notes-timeline-view { font-size: 15px; font-weight: 600; color: #6F5410; text-decoration: none; transition: color 0.15s ease, gap 0.15s ease; } .release-notes-timeline-view:hover { color: #4f3c0b; text-decoration: underline; text-underline-offset: 3px; } .release-notes-timeline-badge-wrap { display: inline-flex; align-items: center; } /* Expanded month blocks (current year detail on home page) */ .release-notes-timeline-item-expanded { align-items: flex-start; min-height: 0; padding-bottom: 12px; } .release-notes-timeline-item-expanded .release-notes-timeline-marker { align-self: stretch; min-height: 48px; } .release-notes-timeline-item-expanded .release-notes-timeline-dot { margin-top: 6px; align-self: flex-start; } .release-notes-timeline-body-expanded { display: block; width: 100%; max-width: 100%; } .release-notes-timeline-preview { width: 100%; padding-bottom: 4px; } .release-notes-timeline-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px; } .release-notes-timeline-lead { font-size: 15px; line-height: 1.65; color: #535250; margin: 0 0 16px; } .release-notes-timeline-lead strong { color: #282725; font-weight: 600; } .release-notes-timeline-lead code { font-size: 0.9em; } .release-notes-timeline-entries { border: 1px solid #e5e7eb; border-radius: 12px; padding: 0 20px; background: #fafafa; } .release-notes-timeline-entry { padding: 18px 0; border-bottom: 1px solid #e5e7eb; } .release-notes-timeline-entry:last-child { border-bottom: none; } .release-notes-timeline-entry-title { font-size: 16px; font-weight: 700; color: #111827; margin: 10px 0 8px; line-height: 1.35; } .release-notes-timeline-entry-text { font-size: 14px; line-height: 1.6; color: #535250; margin: 0 0 10px; } .release-notes-timeline-entry-text code { font-size: 0.88em; } .release-notes-timeline-entry-links { margin: 0; font-size: 14px; line-height: 1.5; } .release-notes-timeline-link-sep { color: #9ca3af; } .release-notes-timeline-learn { font-size: 14px; font-weight: 600; color: #6F5410; text-decoration: underline; text-underline-offset: 3px; } .release-notes-timeline-learn:hover { color: #4f3c0b; } html.dark .release-notes-timeline-lead, [data-theme="dark"] .release-notes-timeline-lead { color: #a1a19f; } html.dark .release-notes-timeline-lead strong, [data-theme="dark"] .release-notes-timeline-lead strong { color: #f3f4f6; } html.dark .release-notes-timeline-entries, [data-theme="dark"] .release-notes-timeline-entries { border-color: #2b2b2b; background: #141414; } html.dark .release-notes-timeline-entry, [data-theme="dark"] .release-notes-timeline-entry { border-bottom-color: #2b2b2b; } html.dark .release-notes-timeline-entry-title, [data-theme="dark"] .release-notes-timeline-entry-title { color: #f9fafb; } html.dark .release-notes-timeline-entry-text, [data-theme="dark"] .release-notes-timeline-entry-text { color: #a1a19f; } html.dark .release-notes-timeline-learn, [data-theme="dark"] .release-notes-timeline-learn { color: #ffe148; } html.dark .release-notes-timeline-learn:hover, [data-theme="dark"] .release-notes-timeline-learn:hover { color: #fff394; } html.dark .release-notes-timeline-link-sep, [data-theme="dark"] .release-notes-timeline-link-sep { color: #6b7280; } html.dark .release-notes-timeline-month, [data-theme="dark"] .release-notes-timeline-month { color: #FFE148; } html.dark .release-notes-timeline-year, [data-theme="dark"] .release-notes-timeline-year { color: #9ca3af; } html.dark .release-notes-timeline, [data-theme="dark"] .release-notes-timeline { --release-notes-rail-active: #ffe148; --release-notes-rail-muted: #3f3f3f; } html.dark .release-notes-timeline-dot, [data-theme="dark"] .release-notes-timeline-dot { --release-notes-clock-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23FFE148' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 8V12l3 2'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23FFE148'/%3E%3C/svg%3E"); background-color: #141414; border-color: #ffe148; } html.dark .release-notes-timeline-view, [data-theme="dark"] .release-notes-timeline-view { color: #FFE148; } html.dark .release-notes-timeline-view:hover, [data-theme="dark"] .release-notes-timeline-view:hover { color: #fff394; } /* Release notes timeline on small screens: date on its own row (full width), then a slim rail (clock ring + vertical line) beside the body so content uses minmax(0, 1fr) and the look matches desktop. */ @media (max-width: 640px) { .release-notes-timeline-stack { /* Width of the rail column; master line is centered on this */ --release-notes-mobile-rail-col: 2.25rem; /* Match column-gap between rail and body; keeps text clear of the spine */ --release-notes-mobile-rail-gap: 10px; --release-notes-mobile-text-indent: calc( var(--release-notes-mobile-rail-col) + var(--release-notes-mobile-rail-gap) ); /* First row is the date (full width); rail + body are row 2. Tune so stack ::before meets the first dot. */ --release-notes-stack-first-rail-from-ul-top: 40px; } /* Year headings (2026, 2025, 2024): spine sits in rail column; indent so the line does not cross text */ .release-notes-timeline-stack .release-notes-timeline-section-title { padding-left: var(--release-notes-mobile-text-indent); position: relative; z-index: 2; } .release-notes-timeline-stack::before { display: block; left: calc(var(--release-notes-mobile-rail-col) / 2 - 1px); } .release-notes-timeline-item { display: grid; grid-template-columns: var(--release-notes-mobile-rail-col) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; align-items: center; min-height: 0; } .release-notes-timeline-date { grid-column: 1 / -1; grid-row: 1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; text-align: left; padding-left: var(--release-notes-mobile-text-indent); padding-right: 0; gap: 6px; position: relative; z-index: 2; } .release-notes-timeline-marker { grid-column: 1; grid-row: 2; justify-self: center; width: 100%; min-height: 48px; } .release-notes-timeline-body { grid-column: 2; grid-row: 2; width: 100%; max-width: 100%; min-width: 0; } .release-notes-timeline-item-expanded { align-items: start; } .release-notes-timeline-item-expanded .release-notes-timeline-marker { align-self: stretch; min-height: 0; } .release-notes-timeline-item:not(.release-notes-timeline-item-expanded) { align-items: center; } .release-notes-timeline-item:not(.release-notes-timeline-item-expanded) .release-notes-timeline-marker { align-self: center; } .release-notes-timeline-preview-head { justify-content: flex-start; } .release-notes-timeline-entries { padding-left: 14px; padding-right: 14px; } .release-notes-timeline-month { font-size: 14px; } .release-notes-timeline-view { font-size: 14px; } } .core-capability-card { background: #FFFFFF; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; overflow: hidden; } /* Hero strip variant (release notes, API overview): no border; hover scales slightly */ .core-capability-card.core-capability-card--with-hero { padding: 0; border: none; box-shadow: none; transition: transform 0.22s ease, box-shadow 0.22s ease; } .core-capability-card:hover { border-color: #6F5410; background: #FFFFFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .core-capability-card.core-capability-card--with-hero:hover { border: none; transform: scale(1.02); box-shadow: 0 10px 28px rgba(40, 39, 37, 0.1); z-index: 1; } .core-capability-card-full { grid-column: span 3; } .core-capability-badge { margin-bottom: 16px; } .core-capability-content { display: flex; flex-direction: column; flex: 1; gap: 12px; } .core-capability-content h3 { font-size: 18px; font-weight: 600; color: #282725; margin: 0; line-height: 1.3; } .core-capability-content p { font-size: 14px; line-height: 1.6; color: #535250; margin: 0; flex: 1; } .core-capability-link { display: inline-flex; align-items: center; gap: 6px; color: #111827; font-weight: 500; font-size: 14px; margin-top: auto; transition: gap 0.2s ease; } .core-capability-card:hover .core-capability-link { gap: 10px; } /* Dark mode for Core Capabilities */ html.dark .core-capability-card, [data-theme="dark"] .core-capability-card { background: #0d0d0d; border-color: #2B2B2B; } html.dark .core-capability-card:hover, [data-theme="dark"] .core-capability-card:hover { border-color: #FFE148; background: #0d0d0d; } html.dark .core-capability-card.core-capability-card--with-hero, [data-theme="dark"] .core-capability-card.core-capability-card--with-hero { border: none; } html.dark .core-capability-card.core-capability-card--with-hero:hover, [data-theme="dark"] .core-capability-card.core-capability-card--with-hero:hover { border: none; background: #0d0d0d; box-shadow: 0 12px 40px rgba(23, 23, 23, 0.85), 0 4px 16px rgba(23, 23, 23, 0.5); } html.dark .core-capability-content h3, [data-theme="dark"] .core-capability-content h3 { color: #ffffff; } html.dark .core-capability-content p, [data-theme="dark"] .core-capability-content p, html.dark .core-capability-content h3 + p, html.dark .core-capability-content h3 ~ p, [data-theme="dark"] .core-capability-content h3 + p, [data-theme="dark"] .core-capability-content h3 ~ p { color: #A1A19F; } html.dark .core-capability-link, [data-theme="dark"] .core-capability-link { color: #fff394; } html.dark .core-capability-card:hover .core-capability-link, [data-theme="dark"] .core-capability-card:hover .core-capability-link { color: #ffe148; } /* Responsive Core Capabilities */ @media (max-width: 968px) { .core-capabilities-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .core-capability-card-full { grid-column: span 2; } .core-capability-card { padding: 20px; } } @media (max-width: 640px) { .core-capabilities-section { margin: 32px 0 48px 0; } .core-capabilities-grid { grid-template-columns: 1fr; gap: 16px; } .core-capability-card-full { grid-column: span 1; } .core-capability-card { padding: 18px; } .core-capability-content h3 { font-size: 16px; } .core-capability-content p { font-size: 14px; } } /* Announcements Card - Clean Card Design */ .announcements-card { max-width: 1200px; margin: 32px auto; background: #FFFFFF; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: opacity 0.3s ease, transform 0.3s ease; position: relative; z-index: 1; } .announcements-card:hover { background: #FFFFFF; } .announcements-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; } .announcements-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #111827; } .announcements-icon { width: 20px; height: 20px; color: #8B6914; flex-shrink: 0; animation: bell-ring 2s ease-in-out infinite; transform-origin: top center; } @keyframes bell-ring { 0%, 100% { transform: rotate(0deg); } 10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); } 20%, 40%, 60%, 80% { transform: rotate(10deg); } } html.dark .announcements-icon, [data-theme="dark"] .announcements-icon { color: #FFE148; } .announcements-close { background: transparent; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; color: #6B7280; border-radius: 4px; transition: all 0.2s ease; width: 24px; height: 24px; } .announcements-close:hover { background: rgba(0, 0, 0, 0.05); color: #111827; } .announcements-close svg { width: 16px; height: 16px; } .announcements-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .announcement-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; transition: all 0.2s ease; border: 1px solid transparent; } .announcement-item:hover { background: #fffcf4; border-color: #B57210; } .announcement-badge { padding: 4px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; } /* Announcement badges: match SDK overview badge base + color variants */ .announcement-badge-new, .announcement-badge-beta, .announcement-badge-updated { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; line-height: 1.4; } .announcement-badge-new { background: #fef3c7; color: #92400e; } .announcement-badge-beta { background: #dbeafe; color: #1e40af; } .announcement-badge-updated { background: #e9d5ff; color: #6b21a8; } .announcement-text { font-size: 14px; font-weight: 500; color: #374151; flex: 1; } .announcements-footer { padding-top: 12px; border-top: 1px solid #f3f4f6; text-align: center; } .announcements-link { font-size: 13px; font-weight: 500; color: #111827; text-decoration: none; transition: color 0.2s ease; } .announcements-link:hover { color: #000000; } /* Dark mode */ html.dark .announcements-card, [data-theme="dark"] .announcements-card { background: #000000; border-color: #2B2B2B; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } html.dark .announcements-card:hover, [data-theme="dark"] .announcements-card:hover { background: #000000; border-color: #2B2B2B; } html.dark .announcements-header, [data-theme="dark"] .announcements-header { border-bottom-color: #374151; } html.dark .announcements-title, [data-theme="dark"] .announcements-title { color: #ffffff; } html.dark .announcement-item:hover, [data-theme="dark"] .announcement-item:hover { background: #13171B; border-color: #FFE148; } html.dark .announcement-text, [data-theme="dark"] .announcement-text { color: #D1D5DB; } html.dark .announcements-footer, [data-theme="dark"] .announcements-footer { border-top-color: #374151; } html.dark .announcements-link, [data-theme="dark"] .announcements-link { color: #fff394; } html.dark .announcements-link:hover, [data-theme="dark"] .announcements-link:hover { color: #FFE148; } html.dark .announcement-badge-new, [data-theme="dark"] .announcement-badge-new { background: #78350f; color: #fde047; } html.dark .announcement-badge-beta, [data-theme="dark"] .announcement-badge-beta { background: #1e3a5f; color: #93c5fd; } html.dark .announcement-badge-updated, [data-theme="dark"] .announcement-badge-updated { background: #581c87; color: #c084fc; } html.dark .announcements-close, [data-theme="dark"] .announcements-close { color: #9CA3AF; } html.dark .announcements-close:hover, [data-theme="dark"] .announcements-close:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; } /* Responsive */ @media (max-width: 968px) { .announcements-card { margin: 24px auto; padding: 16px 20px; } } @media (max-width: 640px) { .announcements-card { margin: 20px auto; padding: 16px; border-radius: 8px; } .announcements-title { font-size: 14px; } .announcement-item { padding: 8px 10px; gap: 10px; } .announcement-text { font-size: 13px; } .announcement-badge { font-size: 9px; padding: 3px 6px; } .announcements-link { font-size: 12px; } } /* Sidebar light mode: #f6f5f3 darkened ~15% (RGB × 0.85) → #d1d0cf */ html:not(.dark):not([data-theme="dark"]) #sidebar-content, [data-theme="light"] #sidebar-content { background-color: #FFFDF2 !important; } /* Sidebar dark mode background */ html.dark #sidebar-content, [data-theme="dark"] #sidebar-content { background-color: #1f1f1f !important; } /* Footer light mode (match content area) */ html:not(.dark):not([data-theme="dark"]) footer.footer, html:not(.dark):not([data-theme="dark"]) footer.advanced-footer, [data-theme="light"] footer.footer, [data-theme="light"] footer.advanced-footer { background-color: #fffffd !important; } /* Footer dark mode background */ .dark footer.footer, .dark footer.advanced-footer, html.dark footer.footer, html.dark footer.advanced-footer, html[data-theme="dark"] footer.footer, html[data-theme="dark"] footer.advanced-footer, [data-theme="dark"] footer.footer, [data-theme="dark"] footer.advanced-footer { background-color: #0a0a0a !important; /* Mintlify uses dark:border-gray-800/50 on border-t; too faint on dark footer */ border-top-color: rgba(255, 255, 255, 0.14) !important; } /* Nav bar / main area dark mode background (bg-gray-50 dark:bg-gray-900) - 15% darker */ html.dark .dark\:bg-gray-900, [data-theme="dark"] .dark\:bg-gray-900 { background-color: #13171B !important; } html.dark .nav-tag-pill-text, [data-theme="dark"] .nav-tag-pill-text, .dark .nav-tag-pill-text { background: rgba(255, 225, 72, 0.1) !important; color: #FFE148 !important; border-color: rgba(255, 225, 72, 0.2) !important; } /* Mintlify floating “Ask a question…” bar: default ::before is a tall full-width layer (before:bg-background-*) that shows as a harsh strip under the rounded composer. */ .chat-assistant-floating-input::before { display: none !important; } /* Match composer + slide-out sheet to site content backgrounds */ html:not(.dark):not([data-theme="dark"]) .chat-assistant-floating-input div.rounded-2xl.pointer-events-auto, [data-theme="light"] .chat-assistant-floating-input div.rounded-2xl.pointer-events-auto { background-color: rgba(255, 253, 242, 0.96) !important; border-color: rgba(17, 24, 39, 0.12) !important; } html.dark .chat-assistant-floating-input div.rounded-2xl.pointer-events-auto, [data-theme="dark"] .chat-assistant-floating-input div.rounded-2xl.pointer-events-auto { background-color: rgba(38, 38, 36, 0.96) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html:not(.dark):not([data-theme="dark"]) .chat-assistant-sheet, [data-theme="light"] .chat-assistant-sheet { background-color: #fffdf2 !important; } html.dark .chat-assistant-sheet, [data-theme="dark"] .chat-assistant-sheet { background-color: #262624 !important; } /* RSS button hover tooltip: "Generate RSS" (reliable; does not depend on JS) */ button[aria-label="Open RSS feed"] { position: relative; } button[aria-label="Open RSS feed"]::after { content: 'Generate RSS'; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); padding: 6px 10px; background: #1a1a1a; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 9999; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } button[aria-label="Open RSS feed"]:hover::after, button[aria-label="Open RSS feed"]:focus-visible::after { opacity: 1; } /* Mobile / small screens: show tooltip to the right of button so it is not clipped */ @media (max-width: 768px) { button[aria-label="Open RSS feed"]::after { bottom: auto; left: 100%; top: 50%; transform: translate(8px, -50%); } } @media (max-width: 480px) { button[aria-label="Open RSS feed"]::after { font-size: 11px; padding: 5px 8px; transform: translate(6px, -50%); } } /* Beta badge on Headless Web SDK Overview page title only - matches SDK overview orange badge */ .page-title-beta-badge { vertical-align: middle; animation: page-title-beta-fade-in 0.25s ease-out forwards; } @keyframes page-title-beta-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ======================================== QUICK SUMMARY CUSTOM DESIGN - MODERN UI ======================================== */ /* Quick Summary Container - Modern Card Design */ .quick-summary-wrapper { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px; padding: 0; margin: 32px 0; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Dark Mode Quick Summary — match docs palette (primary #6F5410, light #FFE148) + hp-io-method-card surfaces */ html.dark .quick-summary-wrapper, [data-theme="dark"] .quick-summary-wrapper { background: #0d0d0d; border-color: rgba(255, 225, 72, 0.14); box-shadow: none; } /* Quick Summary Header */ .quick-summary-header { background: #FFFADE; padding: 20px 28px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } html.dark .quick-summary-header, [data-theme="dark"] .quick-summary-header { background-color: #1c1b19; background-image: radial-gradient(rgba(255, 225, 72, 0.12) 1px, transparent 1px); background-size: 14px 14px; border-bottom: 1px solid rgba(255, 225, 72, 0.14); } /* Quick Summary Icon — single optimized SVG via mask (no per-page inline SVG) */ .quick-summary-icon { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; color: #282725; opacity: 0.9; position: relative; transition: transform 0.3s ease; filter: drop-shadow(0 0 2px rgba(255, 225, 72, 0.3)); border: 0; padding: 0; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M13%2010V3L4%2014h7v7l9-11h-7z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M13%2010V3L4%2014h7v7l9-11h-7z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .quick-summary-icon::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 225, 72, 0.4) 45%, rgba(255, 225, 72, 0.6) 50%, rgba(255, 225, 72, 0.4) 55%, transparent 100% ); background-size: 200% 100%; pointer-events: none; mix-blend-mode: overlay; border-radius: 2px; } html.dark .quick-summary-icon, [data-theme="dark"] .quick-summary-icon { color: #FFE148; filter: drop-shadow(0 0 3px rgba(255, 225, 72, 0.5)); } html.dark .quick-summary-icon::after, [data-theme="dark"] .quick-summary-icon::after { background: linear-gradient( 90deg, transparent 0%, rgba(255, 225, 72, 0.5) 45%, rgba(255, 225, 72, 0.7) 50%, rgba(255, 225, 72, 0.5) 55%, transparent 100% ); mix-blend-mode: screen; } html.dark .quick-summary-wrapper:hover .quick-summary-icon, [data-theme="dark"] .quick-summary-wrapper:hover .quick-summary-icon { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(255, 225, 72, 0.7)); } /* Quick Summary Title - Support both old and new structure */ .quick-summary-wrapper strong:first-child { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; color: #282725; letter-spacing: -0.02em; margin: 0; } html.dark .quick-summary-wrapper strong:first-child, [data-theme="dark"] .quick-summary-wrapper strong:first-child { color: #FFE148; } /* Quick Summary Title in Header */ .quick-summary-title { font-size: 16px; font-weight: 700; line-height: 1.5; color: #282725 !important; letter-spacing: -0.02em; display: block !important; margin: 0; visibility: visible !important; opacity: 1 !important; } html.dark .quick-summary-title, [data-theme="dark"] .quick-summary-title { color: #FFE148 !important; } /* If header exists, title should be in header (backward compatibility) */ .quick-summary-header strong { font-size: 16px; font-weight: 700; line-height: 1.5; color: #282725 !important; letter-spacing: -0.02em; display: block !important; margin: 0; visibility: visible !important; opacity: 1 !important; } html.dark .quick-summary-header strong, [data-theme="dark"] .quick-summary-header strong { color: #FFE148 !important; } /* Quick Summary Content Area */ .quick-summary-content { padding: 24px 28px; font-size: 15px; line-height: 1.7; color: #41413F; } html.dark .quick-summary-content, [data-theme="dark"] .quick-summary-content { color: #e8e6e3; } /* If no content wrapper, style direct children (backward compatibility) */ .quick-summary-wrapper > p, .quick-summary-wrapper > strong:not(:first-child) { padding: 24px 28px; font-size: 15px; line-height: 1.7; color: #41413F; margin: 0; } html.dark .quick-summary-wrapper > p, html.dark .quick-summary-wrapper > strong:not(:first-child), [data-theme="dark"] .quick-summary-wrapper > p, [data-theme="dark"] .quick-summary-wrapper > strong:not(:first-child) { color: #e8e6e3; } /* Paragraphs within Quick Summary */ .quick-summary-content p, .quick-summary-wrapper p { margin: 0; color: inherit; } .quick-summary-content p + p, .quick-summary-wrapper p + p { margin-top: 14px; } /* Bold text within Quick Summary (excluding the title) */ .quick-summary-content strong:not(:first-child), .quick-summary-wrapper strong:not(:first-child), .quick-summary-content b, .quick-summary-wrapper b { font-weight: 600; color: #282725; } html.dark .quick-summary-content strong:not(:first-child), html.dark .quick-summary-wrapper strong:not(:first-child), html.dark .quick-summary-content b, html.dark .quick-summary-wrapper b, [data-theme="dark"] .quick-summary-content strong:not(:first-child), [data-theme="dark"] .quick-summary-wrapper strong:not(:first-child), [data-theme="dark"] .quick-summary-content b, [data-theme="dark"] .quick-summary-wrapper b { color: #FFE148; } /* Links within Quick Summary */ .quick-summary-content a, .quick-summary-wrapper a { color: #282725; text-decoration: none; border-bottom: 1px solid #FFE148; transition: all 0.2s; } .quick-summary-content a:hover, .quick-summary-wrapper a:hover { color: #8B6914; border-bottom-color: #8B6914; } html.dark .quick-summary-content a, html.dark .quick-summary-wrapper a, [data-theme="dark"] .quick-summary-content a, [data-theme="dark"] .quick-summary-wrapper a { color: #FFE148; border-bottom-color: #FFE148; } html.dark .quick-summary-content a:hover, html.dark .quick-summary-wrapper a:hover, [data-theme="dark"] .quick-summary-content a:hover, [data-theme="dark"] .quick-summary-wrapper a:hover { color: #FFF394; border-bottom-color: #FFF394; } /* Code within Quick Summary */ .quick-summary-content code, .quick-summary-wrapper code { background-color: #F3F4F6 !important; color: #3B82F6 !important; border: 1px solid #D1D5DB !important; padding: 2.4px 7px; border-radius: 4px; font-size: 13.5px; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; } html.dark .quick-summary-content code, html.dark .quick-summary-wrapper code, [data-theme="dark"] .quick-summary-content code, [data-theme="dark"] .quick-summary-wrapper code { background-color: #1c1b19 !important; color: #ffe148 !important; border-color: rgba(255, 225, 72, 0.2) !important; } /* Quick Summary Footer - Last Updated */ .quick-summary-footer { padding: 16px 28px; border-top: 1px solid #E5E7EB; background: #FAFAFA; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6B7280; } html.dark .quick-summary-footer, [data-theme="dark"] .quick-summary-footer { border-top: 1px solid rgba(255, 225, 72, 0.14); background: #1c1b19; color: #b5b3af; } html.dark .quick-summary-footer .quick-summary-footer-icon, [data-theme="dark"] .quick-summary-footer .quick-summary-footer-icon { color: rgba(255, 225, 72, 0.72); opacity: 0.9; } .quick-summary-footer-icon { display: inline-block; width: 14px; height: 14px; opacity: 0.6; flex-shrink: 0; border: 0; padding: 0; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%208v4l3%203m6-3a9%209%200%2011-18%200%209%209%200%200118%200z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%208v4l3%203m6-3a9%209%200%2011-18%200%209%209%200%200118%200z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .quick-summary-footer-text { font-weight: 500; color: inherit; } .quick-summary-footer-date { color: inherit; font-weight: 400; } /* Responsive adjustments */ @media (max-width: 640px) { .quick-summary-wrapper { margin: 24px 0; border-radius: 12px; } .quick-summary-header { padding: 16px 20px; } .quick-summary-content { padding: 20px 20px; font-size: 14px; } .quick-summary-wrapper strong:first-child { font-size: 15px; } .quick-summary-footer { padding: 14px 20px; font-size: 12px; } } /* Read time badge (remark-reading-time + reading-time) */ .read-time-wrapper { display: block; width: 100%; flex-basis: 100%; margin-top: 0.5rem; margin-bottom: 0.75rem; } .read-time-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; color: #6b7280; font-weight: 500; } .read-time-badge .read-time-clock-icon { flex-shrink: 0; stroke: currentColor; } html.dark .read-time-badge, [data-theme="dark"] .read-time-badge { color: #9ca3af; } /* ======================================== HOME PAGE ======================================== */ .hp-wrap { max-width: 100%; padding: 32px 40px 56px; } .hp-top-band { align-items: stretch; display: flex; flex-direction: column; gap: 28px; margin-bottom: 36px; width: 100%; } /* Left stack: yellow hero + 2×2 cards (same column width; no gap from tall right column) */ .hp-top-band-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; width: 100%; } .hp-hero-aside { container-name: hero-aside; container-type: inline-size; display: flex; flex-direction: column; gap: 16px; min-width: 0; width: 100%; } .hp-hero { background: #FFF394 !important; border-radius: 16px; isolation: isolate; margin-bottom: 0; overflow: hidden; padding: 56px 48px; position: relative; } /* Light: #FFF394 darkened 30% toward black (70% #fff394, 30% #000) */ html:not(.dark) .hp-hero, body:not(.dark) .hp-hero { background: #FFF394 !important; } html:not(.dark) .hp-hero .hp-title, body:not(.dark) .hp-hero .hp-title { color: #141110 !important; } html:not(.dark) .hp-hero .hp-sub, body:not(.dark) .hp-hero .hp-sub { color: #2c2618 !important; } html:not(.dark) .hp-hero .hp-sub strong, body:not(.dark) .hp-hero .hp-sub strong { color: #141110 !important; } html.dark .hp-hero, [data-theme="dark"] .hp-hero { background: #1c1c19 !important; } html.dark .hp-hero .hp-title, [data-theme="dark"] .hp-hero .hp-title { color: #f9fafb !important; } html.dark .hp-hero .hp-sub, [data-theme="dark"] .hp-hero .hp-sub { color: #b0bec5 !important; } html.dark .hp-hero .hp-sub strong, [data-theme="dark"] .hp-hero .hp-sub strong { color: #f9fafb !important; } .hp-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; z-index: 0; pointer-events: none; } /* Light: higher opacity — must not match when theme is dark (data-theme lives on html) */ html:not(.dark):not([data-theme="dark"]) .hp-hero-bg, html[data-theme="light"] .hp-hero-bg { opacity: 0.25; } /* Dark: explicit so this wins over the light rule if both class and attribute ever disagree */ html.dark .hp-hero-bg, html[data-theme="dark"] .hp-hero-bg, body.dark .hp-hero-bg { opacity: 0.1; } .hp-hero-content { min-width: 0; position: relative; z-index: 2; } /* Hero aside: code area (custom chrome; highlighting is site Shiki via fenced blocks in Tabs) */ .hp-hero-snippet { box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%; z-index: 2; } /* * Home hero: fully custom tab bar + panels (no Mintlify Tabs/CodeGroup). Fenced blocks use site Shiki. * One outer border only: strip Mintlify expandable/pre rims inside .hp-hero-code-custom. */ .hp-hero-code-custom { border: 1px solid #e5e7eb; border-radius: 12px; background: #ffffff; box-sizing: border-box; max-width: 100%; overflow: hidden; padding: 8px 8px 0; width: 100%; } html.dark .hp-hero-code-custom, [data-theme="dark"] .hp-hero-code-custom { background: #1c1b19; border-color: rgba(255, 255, 255, 0.08); } .hp-hero-code-custom .hp-hero-code-tabbar { -webkit-overflow-scrolling: touch; align-items: center; background: transparent; border: none; border-bottom: none; border-radius: 0; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; margin: 0; min-height: 48px; overflow-x: auto; overflow-y: hidden; padding: 10px 8px 12px; scrollbar-width: thin; width: 100%; } /* Match #navbar .nav-tabs .nav-tabs-item (light / dark) — same unselected, hover, selected */ .hp-hero-code-custom button.hp-hero-code-tab { align-self: center; appearance: none; background: transparent; border: none; border-radius: 9999px; box-shadow: none; color: #6b7280; cursor: pointer; flex: 0 0 auto; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; margin: 0; padding: 5px 12px; text-decoration: none; text-shadow: none; transition: all 0.2s; white-space: nowrap; } html:not(.dark):not([data-theme="dark"]) .hp-hero-code-custom button.hp-hero-code-tab:hover, [data-theme="light"] .hp-hero-code-custom button.hp-hero-code-tab:hover { background: rgba(0, 0, 0, 0.05) !important; color: #1a1a1a !important; } html:not(.dark):not([data-theme="dark"]) .hp-hero-code-custom button.hp-hero-code-tab.is-active, [data-theme="light"] .hp-hero-code-custom button.hp-hero-code-tab.is-active { background: #efeeec !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important; color: #1a1a1a !important; font-weight: 600 !important; } html:not(.dark):not([data-theme="dark"]) .hp-hero-code-custom button.hp-hero-code-tab.is-active:hover, [data-theme="light"] .hp-hero-code-custom button.hp-hero-code-tab.is-active:hover { background: #f6f5f3 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important; color: #1a1a1a !important; font-weight: 600 !important; } html.dark .hp-hero-code-custom button.hp-hero-code-tab, html[data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab, [data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab { color: #9ca3af !important; } html.dark .hp-hero-code-custom button.hp-hero-code-tab:hover, html[data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab:hover, [data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab:hover { background: rgba(255, 255, 255, 0.08) !important; color: #e5e7eb !important; } html.dark .hp-hero-code-custom button.hp-hero-code-tab.is-active, html[data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab.is-active, [data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab.is-active { background: #333333 !important; box-shadow: none !important; color: #ffffff !important; font-weight: 600 !important; } html.dark .hp-hero-code-custom button.hp-hero-code-tab.is-active:hover, html[data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab.is-active:hover, [data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab.is-active:hover { background: #333333 !important; box-shadow: none !important; color: #ffffff !important; font-weight: 600 !important; } .hp-hero-code-custom button.hp-hero-code-tab:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; } html.dark .hp-hero-code-custom button.hp-hero-code-tab:focus-visible, [data-theme="dark"] .hp-hero-code-custom button.hp-hero-code-tab:focus-visible { outline-color: #ffe148; } .hp-hero-code-custom .hp-hero-code-panels { background: #ffffff; margin: 0; padding: 0; } html.dark .hp-hero-code-custom .hp-hero-code-panels, [data-theme="dark"] .hp-hero-code-custom .hp-hero-code-panels { background: #1c1b19; } .hp-hero-code-custom .hp-hero-code-panel[hidden] { display: none !important; } .hp-hero-code-custom .hp-hero-code-panel.is-active { display: block; } /* Remove inner “card” rim so only .hp-hero-code-custom border shows */ .hp-hero-code-custom .hp-hero-code-panel > * { margin: 0 !important; } .hp-hero-code-custom div[class*="expandable"], .hp-hero-code-custom [class*="border-standard"] { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; } .hp-hero-code-custom pre.shiki, .hp-hero-code-custom pre { border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: 100%; } @media (min-width: 769px) { .hp-top-band { align-items: flex-start; flex-direction: row; gap: 32px; } /* Slightly more than half: hero + cards share this column */ .hp-top-band-main { flex: 0 1 58%; max-width: 58%; } .hp-hero { max-width: 100%; min-width: 0; width: 100%; } .hp-top-band-main .hp-home-features { box-sizing: border-box; margin-bottom: 0; max-width: 100%; width: 100%; } .hp-hero-aside { flex: 1 1 0; max-width: 42%; } .hp-cta-row--hero-aside { justify-content: flex-start; margin-bottom: 0; } } @media (max-width: 768px) { .hp-hero-aside { max-width: 100%; } } .hp-title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; color: #000000 !important; margin: 0 0 18px; } .hp-sub { font-size: 16px; line-height: 1.65; color: #b0bec5; max-width: 520px; margin: 0; } /* ---- CTA ---- */ .hp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-bottom: 12px; } .hp-cta-row--hero-aside { margin-bottom: 0; } /* Narrow hero aside (42% column): stack CTAs so labels stay on one line and nothing clips */ @container hero-aside (max-width: 460px) { .hp-cta-row--hero-aside { align-items: stretch; flex-direction: column; flex-wrap: nowrap; } .hp-cta-row--hero-aside .hp-cta-primary, .hp-cta-row--hero-aside .hp-cta-secondary { box-sizing: border-box; flex: 0 0 auto !important; max-width: 100%; min-width: 0; white-space: nowrap; width: 100%; } } @supports not (container-type: inline-size) { @media (min-width: 769px) and (max-width: 1200px) { .hp-cta-row--hero-aside { align-items: stretch; flex-direction: column; flex-wrap: nowrap; } .hp-cta-row--hero-aside .hp-cta-primary, .hp-cta-row--hero-aside .hp-cta-secondary { box-sizing: border-box; flex: 0 0 auto !important; max-width: 100%; min-width: 0; white-space: nowrap; width: 100%; } } } /* * Hero code-panel CTAs (lg+): row matches code block width; Quickstart : Partner ≈ 65 : 45 flex ratio. */ @media (min-width: 800px) { .hp-cta-row--hero-aside { width: 100%; max-width: 100%; align-self: stretch; flex-wrap: nowrap; justify-content: flex-start; } .hp-cta-row--hero-aside .hp-cta-primary { flex: 65 1 0; min-width: 0; max-width: none; box-sizing: border-box; } .hp-cta-row--hero-aside .hp-cta-secondary { flex: 35 1 0; min-width: 0; max-width: none; box-sizing: border-box; } } /* * Hero CTA sizing (text + icon + pill padding) scales with viewport width. * * The hero-aside column is 42% of the content area, so the two buttons share a * narrow track. Base .hp-cta padding of 11px 10px looks cramped against a * long label ("Get Partner Access") once the label scales down; bumping the * horizontal padding and the icon-text gap gives the pill real breathing room * while the label and icon still clamp down together on narrow laptops. * * At >= 1440px the labels render at the full 14px with 22px side padding; * below that they scale down toward a 12.5px / 14px floor so the long label * no longer overpowers the short one and the text never kisses the border. */ .hp-cta-row--hero-aside .hp-cta { font-size: clamp(12.5px, 0.6vw + 5px, 14px); padding-block: 11px; padding-inline: clamp(14px, 1.1vw + 3px, 22px); gap: 10px; } .hp-cta-row--hero-aside .hp-cta-icon { width: clamp(14px, 0.5vw + 8px, 18px); height: clamp(14px, 0.5vw + 8px, 18px); min-width: clamp(14px, 0.5vw + 8px, 18px); min-height: clamp(14px, 0.5vw + 8px, 18px); } .hp-cta { display: inline-flex; align-items: center; justify-content: center; padding: 11px 10px; border-radius: 23px; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background 0.15s ease; border: none; white-space: nowrap; position: relative; isolation: isolate; overflow: hidden; } .hp-cta svg, .hp-cta-icon { position: relative; z-index: 1; } .hp-cta-with-icon { gap: 8px; } .hp-cta-icon { flex-shrink: 0; display: block; width: 18px; height: 18px; min-width: 18px; min-height: 18px; overflow: visible; box-sizing: content-box; } /* Same “→” as View Release Notes link; not a fixed 18px box */ .hp-cta-icon-arrow-text { align-items: center; display: inline-flex; font-size: 1.05em; font-weight: 700; height: auto; justify-content: center; line-height: 1; min-height: 0; min-width: 0; width: auto; } .hp-cta-primary { background: #FFE148; color: #111827 !important; min-width: 180px; } .hp-cta-primary:hover, .hp-cta-primary:focus-visible { background: #FFE148; } .hp-cta-secondary { background: transparent; color: #6F5410 !important; border: 1.5px solid #6F5410; } .hp-cta-secondary:hover, .hp-cta-secondary:focus-visible { background: transparent; } html.dark .hp-cta-secondary, [data-theme="dark"] .hp-cta-secondary { color: #FFE148 !important; border-color: rgba(255, 225, 72, 0.4); } html.dark .hp-cta-secondary:hover, html.dark .hp-cta-secondary:focus-visible, [data-theme="dark"] .hp-cta-secondary:hover, [data-theme="dark"] .hp-cta-secondary:focus-visible { background: transparent; } /* ---- Integration Options ---- */ .hp-io { display: flex; flex-wrap: wrap; gap: 28px 40px; /* row gap (e.g. before leader banner), column gap (left | right) */ align-items: stretch; margin-top: 52px; padding: 36px; background: #FFFADE; border: 1px solid transparent; border-radius: 16px; min-width: 0; /* flex child: allow column to shrink on narrow viewports */ max-width: 100%; box-sizing: border-box; } /* Business leader CTA: full-width row at end of Choose your integration */ .hp-io > .hp-leader-banner { flex: 1 1 100%; width: 100%; align-self: stretch; margin-top: 0; margin-bottom: 0; } .hp-io-left { flex: 1 1 55%; min-width: 0; max-width: 100%; } /* * Choose your integration (Mintlify Tabs): tab list is a flex child with Tailwind * flex-none + nowrap labels, so it can grow wider than the column and clip without * in-bar scroll. Constrain + allow horizontal scroll inside the tab bar only. */ #content-area .hp-io .tab-container { display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; } #content-area .hp-io .tab-container [data-component-part="tabs-list"] { flex: 0 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } #content-area .hp-io [data-component-part="tab-content"] { max-width: 100%; min-width: 0; box-sizing: border-box; } #content-area .hp-io .code-block, #content-area .hp-io [data-component-part="code-block-root"] { max-width: 100% !important; box-sizing: border-box; } .hp-io-right { flex: 0 0 38%; display: flex; align-items: center; justify-content: center; background: #FFFADE; border-radius: 12px; padding: 20px; overflow: hidden; } .hp-io-visual { width: 100%; line-height: 0; border-radius: 12px; overflow: hidden; position: relative; } /* One illustration per Integration options tab (synced via scripts/hp-io-tab-visual.js) */ .hp-io-visual .hp-io-panel { display: none; } .hp-io-visual[data-hp-io-panel="api"] .hp-io-panel[data-hp-io-panel="api"], .hp-io-visual[data-hp-io-panel="mobile"] .hp-io-panel[data-hp-io-panel="mobile"], .hp-io-visual[data-hp-io-panel="web"] .hp-io-panel[data-hp-io-panel="web"], .hp-io-visual[data-hp-io-panel="headless"] .hp-io-panel[data-hp-io-panel="headless"] { display: block; } .hp-io-img { width: 100%; height: auto; aspect-ratio: 800 / 480; object-fit: contain; object-position: center; border-radius: 8px; display: block; } .hp-io-img--dark { display: none !important; } html.dark .hp-io-img--light, [data-theme="dark"] .hp-io-img--light { display: none !important; } html.dark .hp-io-img--dark, [data-theme="dark"] .hp-io-img--dark { display: block !important; } .hp-io-title { font-size: 28px; font-weight: 800; color: #111827; margin: 0 0 24px; letter-spacing: -0.02em; } .hp-io-link { display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: #6F5410 !important; text-decoration: underline !important; text-underline-offset: 3px; margin-top: 12px; border-bottom: none !important; } .hp-io-link:hover { color: #4a380b !important; text-decoration: underline !important; border-bottom: none !important; } html.dark .hp-io, [data-theme="dark"] .hp-io { background: #1c1b19; border-color: transparent; } html.dark .hp-io-right, [data-theme="dark"] .hp-io-right { background: #1c1b19; } html.dark .hp-io-title, [data-theme="dark"] .hp-io-title { color: #F1F5F9; } html.dark .hp-io-link, [data-theme="dark"] .hp-io-link { color: #FFE148 !important; } html.dark .hp-io-link:hover, [data-theme="dark"] .hp-io-link:hover { color: #FFF394 !important; } /* ---- Business leader CTA (inside Choose your integration, full-width row) ---- */ /* Palette: home doc tokens (#141110, #1c1b19, #6F5410, #FFE148). Chevron accent on .hp-leader-banner-inner::before only; no offset shadow slabs. */ .hp-leader-banner { box-sizing: border-box; margin: 32px 0 14px; padding: 0; position: relative; width: 100%; z-index: 0; } .hp-leader-banner::before, .hp-leader-banner::after { display: none; } .hp-leader-banner-inner { align-items: center; background: linear-gradient( 128deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 32%, transparent 55% ), linear-gradient( 105deg, #141110 0%, #1c1b19 38%, #232019 68%, #2c2618 100% ); border: none; border-radius: 16px; box-shadow: none; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 20px 28px; isolation: isolate; justify-content: space-between; overflow: hidden; padding: 24px 32px 24px 34px; position: relative; z-index: 1; } /* Gold chevron plane (reference-style geometry, doc yellow) */ .hp-leader-banner-inner::before { background: linear-gradient( 118deg, rgba(255, 225, 72, 0) 0%, rgba(255, 225, 72, 0.14) 42%, rgba(255, 227, 80, 0.22) 100% ); clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%, 38% 50%); content: ""; inset: -8% -12% -8% 35%; pointer-events: none; position: absolute; z-index: 0; } .hp-leader-banner-copy, .hp-leader-banner-cta { position: relative; z-index: 1; } .hp-leader-banner-copy { display: flex; flex: 1 1 240px; flex-direction: column; gap: 10px; margin: 0; max-width: min(42rem, 72%); min-width: 0; } /* Reference-style: bold headline + smaller regular subline (both white) */ .hp-leader-banner-line1 { color: #ffffff; font-size: clamp(16px, 2.05vw, 19px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .hp-leader-banner-line2 { color: rgba(255, 255, 255, 0.95); font-size: clamp(13px, 1.55vw, 15px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.5; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } .hp-leader-banner-icon { display: inline; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); margin-right: 0.35em; } .hp-leader-banner-cta { flex: 0 0 auto; min-width: 0; } /* Roomier pill (overrides default .hp-cta padding for this CTA only) */ #content-area .hp-leader-banner .hp-leader-banner-cta.hp-cta { box-sizing: border-box; min-height: 48px; padding: 14px 28px 14px 30px; } @media (max-width: 640px) { /* Business leader CTA: breathable padding; copy must not flex-grow (see flex rule). */ .hp-leader-banner { margin-bottom: 8px; padding: 0; } .hp-leader-banner-inner { align-items: stretch; border-radius: 14px; flex-direction: column; gap: 16px; justify-content: flex-start; padding: 18px 18px 20px; } .hp-leader-banner-copy { /* flex: 1 1 240px on base would grow in column layout and create a dead band above CTA */ flex: 0 1 auto !important; gap: 8px; max-width: 100%; } .hp-leader-banner-line1 { font-size: 15px; line-height: 1.35; } .hp-leader-banner-line2 { font-size: 13px; line-height: 1.48; } .hp-leader-banner-cta { justify-content: center; width: 100%; } #content-area .hp-leader-banner .hp-leader-banner-cta.hp-cta { min-height: 46px; padding: 12px 22px 12px 24px; } } /* ---- Badges ---- */ .hp-badges { margin-bottom: 16px; } /* ---- Get started cards ---- */ /* ---- What's New ---- */ .hp-wn { margin-top: 52px; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; } .hp-wn-header { display: flex; align-items: center; gap: 10px; padding: 20px 28px; font-size: 16px; font-weight: 700; color: #111827; border-bottom: 1px solid #E5E7EB; } .hp-wn-header svg { color: #6B7280; flex-shrink: 0; animation: bell-ring 2s ease-in-out infinite; transform-origin: top center; } .hp-wn-list { display: flex; flex-direction: column; } .hp-wn-item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 28px; border-bottom: 1px solid #F3F4F6; text-decoration: none !important; transition: background 0.12s ease; } .hp-wn-item:last-child { border-bottom: none; } .hp-wn-item:hover { background: #FAFAF8; } /* What's New badges: match SDK overview badge base + orange/yellow variants */ .hp-wn-badge { flex-shrink: 0; margin-top: 2px; } .hp-wn-text { font-size: 14px; line-height: 1.5; color: #374151; } .hp-wn-text strong { color: #111827; font-weight: 700; } .hp-wn-footer { padding: 16px 28px; text-align: right; border-top: 1px solid #E5E7EB; } .hp-wn-all { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 20px; font-size: 14px; font-weight: 700; color: #6F5410 !important; background: transparent; border: 1.5px solid #6F5410; text-decoration: none !important; transition: background 0.15s ease, transform 0.15s ease; } .hp-wn-all:hover { background: rgba(111, 84, 16, 0.06); transform: translateY(-1px); color: #6F5410 !important; text-decoration: none !important; } a.hp-wn-all.suki-strip-hover-host:hover, a.hp-wn-all.suki-strip-hover-host:focus-visible { background: transparent !important; transform: none !important; color: #6F5410 !important; } /* ======================================== HOME PAGE — DARK MODE ======================================== */ html.dark .hp-wn, [data-theme="dark"] .hp-wn { border-color: rgba(255, 255, 255, 0.06); } html.dark .hp-wn-header, [data-theme="dark"] .hp-wn-header { color: #F1F5F9; border-bottom-color: rgba(255, 255, 255, 0.06); } html.dark .hp-wn-header svg, [data-theme="dark"] .hp-wn-header svg { color: #94A3B8; } html.dark .hp-wn-item, [data-theme="dark"] .hp-wn-item { border-bottom-color: rgba(255, 255, 255, 0.04); } html.dark .hp-wn-item:hover, [data-theme="dark"] .hp-wn-item:hover { background: rgba(255, 255, 255, 0.03); } html.dark .hp-wn-text, [data-theme="dark"] .hp-wn-text { color: #94A3B8; } html.dark .hp-wn-text strong, [data-theme="dark"] .hp-wn-text strong { color: #F1F5F9; } html.dark .hp-wn-footer, [data-theme="dark"] .hp-wn-footer { border-top-color: rgba(255, 255, 255, 0.06); } html.dark .hp-wn-all, [data-theme="dark"] .hp-wn-all { color: #FFE148 !important; border-color: rgba(255, 225, 72, 0.4); } html.dark .hp-wn-all:hover, [data-theme="dark"] .hp-wn-all:hover { background: rgba(255, 225, 72, 0.08); color: #FFE148 !important; } html.dark a.hp-wn-all.suki-strip-hover-host:hover, html.dark a.hp-wn-all.suki-strip-hover-host:focus-visible, [data-theme="dark"] a.hp-wn-all.suki-strip-hover-host:hover, [data-theme="dark"] a.hp-wn-all.suki-strip-hover-host:focus-visible { background: transparent !important; transform: none !important; color: #FFE148 !important; } /* ======================================== HOME PAGE — RESPONSIVE ======================================== */ @media (max-width: 900px) { .hp-io { flex-direction: column; gap: 24px; } .hp-io-right { width: 100%; flex: 0 0 auto; min-height: 220px; } .hp-io-visual .hp-io-img { width: 100%; height: auto; max-height: 240px; aspect-ratio: 800 / 480; object-fit: contain; } } @media (max-width: 768px) { .hp-wrap { padding: 24px 24px 40px; } .hp-hero { padding: 40px 28px; } .hp-hero-content { max-width: 100%; } .hp-wn-item { padding: 14px 20px; } .hp-cta-row { justify-content: center; } .hp-wn-footer { text-align: center; } .hp-io { padding: 24px; } .hp-io-title { font-size: 22px; } } @media (max-width: 540px) { .hp-wrap { padding: 16px 16px 32px; } .hp-hero { padding: 32px 20px; } .hp-cta-row { flex-direction: column; align-items: center; } .hp-cta { width: 100%; text-align: center; } .hp-io { padding: 20px; } .hp-io-title { font-size: 20px; } } @media (min-width: 768px) { button[data-testid="mode-switch-system"], button[data-testid="mode-switch-light"], button[data-testid="mode-switch-dark"] { display: none !important; } } /* * Mintlify #navbar: default is two rows (top bar + .nav-tabs). Merge into one row on lg+. * DOM: .z-10.relative > (.hidden.lg:flex.h-12 > logo | search | actions) + (.bg-gray-50 > .nav-tabs) */ @media (min-width: 1024px) { #navbar .z-10.relative { align-items: center !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0.5rem 1rem; min-height: 3rem; padding-left: 1.5rem; padding-right: 1.5rem; } /* Top bar’s three columns become siblings of the tab strip in this flex row */ #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 { display: contents !important; } #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(1) { flex: 0 0 auto; min-width: 0; order: 1; } /* Search + Ask AI: left-align in the flexible slot (was center, looked detached from tabs). */ #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(2) { align-items: center !important; display: flex !important; flex: 1 1 auto; gap: 0.5rem; justify-content: flex-start !important; min-width: 0; order: 3; } #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(3) { flex: 0 0 auto; min-width: 0; order: 4; } #navbar .z-10.relative > div.bg-gray-50:has(.nav-tabs) { align-items: center !important; align-self: center; background: transparent !important; box-shadow: none !important; display: flex !important; flex: 0 1 auto; min-width: 0; order: 2; } #navbar .z-10.relative > div.bg-gray-50:has(.nav-tabs) > div { background: transparent !important; border-bottom: none !important; height: auto !important; justify-content: flex-start !important; min-height: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: auto !important; } #navbar .nav-tabs { flex-wrap: nowrap; margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; min-width: 0; } /* Tab font/padding: set in pill block below so and SDKs

Get Started

Headless Web SDK Guides

API Reference

Examples

FAQs

Documentation Index

​Type definition

Type definition