/* ======================================== 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: #262624; 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: #FFFDF2; } /* 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: 1120px !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: 1360px !important; } body:not(:has(.hp-wrap)):not(:has(.sdk-overview-container)) #content-area { max-width: 1300px !important; } } 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 */ .learning-path-button { display: inline-flex !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; transition: all 0.2s ease !important; min-height: 30px !important; box-shadow: none !important; outline: none !important; } /* Remove any pseudo-elements */ .learning-path-button:before, .learning-path-button:after { display: none !important; content: none !important; } /* Hover state matching navbar buttons */ .learning-path-button:hover { background: #FFF394 !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(255, 160, 22, 0.3) !important; } /* Active/pressed state */ .learning-path-button:active { background: #FFF394 !important; transform: translateY(0) !important; } .learning-path-button-secondary { display: inline-flex !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; transition: all 0.2s ease !important; min-height: 45px !important; box-shadow: none !important; outline: none !important; } .learning-path-button-secondary:before, .learning-path-button:after { display: none !important; content: none !important; } /* Hover state matching navbar buttons */ .learning-path-button-secondary:hover { background: #FFF394 !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(255, 160, 22, 0.3) !important; } /* Image hover popup effect */ .hover-popup-image:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } /* 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; } /* 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; } } /* * 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; } } /* 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 { background: #1a1a1a; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Table Header */ table thead { background: #FFFADE; } html.dark table thead { background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); } 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 { color: #FFE148 !important; border-bottom-color: #FFE148 !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 { color: #9ca3af !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 { background: #2d2d2d !important; box-shadow: 0 2px 8px rgba(255, 225, 72, 0.1); } 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 { color: #d1d5db !important; border-bottom-color: #374151 !important; } /* Alternating row colors */ table tbody tr:nth-child(even) { background: #f9fafb; } html.dark table tbody tr:nth-child(even) { background: #0d0d0d; } /* 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) { background: #111827 !important; color: #FFE148 !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) { 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) { color: #f3f4f6 !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; } } /* ======================================== 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: #FFFDF2; overflow: visible !important; } /* Dark mode background for SDK and API overview pages */ html.dark .sdk-overview-container, [data-theme="dark"] .sdk-overview-container { background-color: #262624; } /* 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 (vertical stepper) — documentation/overview (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; } .sdk-rec-path-steps { list-style: none; margin: 0; padding: 0; } .sdk-rec-path-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 20px; margin: 0; padding: 0; align-items: stretch; } .sdk-rec-path-track { display: flex; flex-direction: column; align-items: center; padding-top: 2px; } .sdk-rec-path-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #6f5410; background: rgba(111, 84, 16, 0.1); border: 1px solid rgba(111, 84, 16, 0.28); z-index: 1; } html.dark .sdk-rec-path-num, [data-theme="dark"] .sdk-rec-path-num { color: #ffe148; background: rgba(255, 225, 72, 0.12); border-color: rgba(255, 225, 72, 0.35); } .sdk-rec-path-line { flex: 1 1 auto; width: 2px; min-height: 28px; background: rgba(111, 84, 16, 0.22); margin-top: 6px; } html.dark .sdk-rec-path-line, [data-theme="dark"] .sdk-rec-path-line { background: rgba(255, 225, 72, 0.25); } .sdk-rec-path-step:last-child .sdk-rec-path-line { display: none; } .sdk-rec-path-content { padding-bottom: 32px; } .sdk-rec-path-step:last-child .sdk-rec-path-content { padding-bottom: 24px; } .sdk-rec-path-step-title { font-size: 17px; font-weight: 600; color: #111827; margin: 0 0 8px; line-height: 1.3; font-family: inherit; } html.dark .sdk-rec-path-step-title, [data-theme="dark"] .sdk-rec-path-step-title { color: #ffffff; } .sdk-rec-path-step-desc { font-size: 16px; line-height: 1.65; color: #41413f; margin: 0 0 10px; font-family: inherit; } html.dark .sdk-rec-path-step-desc, [data-theme="dark"] .sdk-rec-path-step-desc { 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; } .sdk-rec-path-step { grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; } .sdk-rec-path-num { width: 28px; height: 28px; font-size: 13px; } } /* 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: 8px; 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)); } .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)); } } @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-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: #1a1d24; } .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: #FFFADE !important; } /* Sidebar dark mode background */ html.dark #sidebar-content, [data-theme="dark"] #sidebar-content { background-color: #20201f !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: #FFFDF2 !important; } /* Footer dark mode background */ html.dark footer.footer, html.dark footer.advanced-footer, [data-theme="dark"] footer.footer, [data-theme="dark"] footer.advanced-footer { background-color: #262624 !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 */ html.dark .quick-summary-wrapper, [data-theme="dark"] .quick-summary-wrapper { background: #23272A; border-color: #374151; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); } /* 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: #13171B; border-bottom-color: #374151; } /* 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: #E3E0E0; } /* 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: #E3E0E0; } /* 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: #17223b !important; color: #FFE148 !important; border-color: #374151 !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-color: #374151; background: #1E2124; color: #9CA3AF; } .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 { 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; } /* Mintlify CodeGroup in hero aside: fills right column */ .hp-hero-snippet { box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%; z-index: 2; } @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; } .hp-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 20px; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background 0.15s ease, transform 0.15s ease; border: none; white-space: nowrap; } .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; } .hp-cta-primary { background: #FFE148; color: #111827 !important; min-width: 180px; } .hp-cta-primary:hover { background: #FFF394; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 225, 72, 0.15); } .hp-cta-secondary { background: transparent; color: #6F5410 !important; border: 1.5px solid #6F5410; } .hp-cta-secondary:hover { background: rgba(111, 84, 16, 0.06); transform: translateY(-1px); } 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, [data-theme="dark"] .hp-cta-secondary:hover { background: rgba(255, 225, 72, 0.08); } /* ---- Integration Options ---- */ .hp-io { display: flex; gap: 40px; align-items: stretch; margin-top: 52px; padding: 36px; background: #FFFADE; border: 1px solid transparent; border-radius: 16px; } .hp-io-left { flex: 1 1 55%; min-width: 0; } .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; } /* ---- 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; } /* ======================================== 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; } /* ======================================== 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

Onboarding & Authentication

Product Capabilities

Guides

Help & Support

K