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

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

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

. */ nav li.suki-more-from-suki-root, header li.suki-more-from-suki-root, :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root, #suki-nav-actions-host li.suki-more-from-suki-root, nav li.navbar-link.suki-more-from-suki-root, header li.navbar-link.suki-more-from-suki-root, :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root, #suki-nav-actions-host li.navbar-link.suki-more-from-suki-root { display: flex !important; align-items: center !important; height: auto !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; list-style: none !important; position: relative !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; color: inherit !important; } html.dark nav li.suki-more-from-suki-root, html.dark header li.suki-more-from-suki-root, html.dark :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root, html.dark nav li.navbar-link.suki-more-from-suki-root, html.dark header li.navbar-link.suki-more-from-suki-root, html.dark :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root, html[data-theme="dark"] nav li.suki-more-from-suki-root, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root { background: transparent !important; border: none !important; color: inherit !important; } nav li.suki-more-from-suki-root:hover, header li.suki-more-from-suki-root:hover, :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover, nav li.navbar-link.suki-more-from-suki-root:hover, :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root:hover, html.dark :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover, html[data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root:hover { background: transparent !important; border: none !important; } .suki-more-nav-trigger { outline: none !important; } .suki-more-nav-trigger[aria-expanded="true"] { border: none !important; box-shadow: none !important; } /* Mintlify / navbar defaults sometimes add ring on li.navbar-link */ :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root, :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root { box-shadow: none !important; outline: none !important; } :is(#navbar, #suki-nav-actions-host) li.suki-more-from-suki-root .suki-more-nav-trigger, :is(#navbar, #suki-nav-actions-host) li.navbar-link.suki-more-from-suki-root .suki-more-nav-trigger { box-shadow: none !important; outline: none !important; border: none !important; } .suki-more-nav-panel { position: fixed !important; z-index: 10002 !important; pointer-events: auto !important; box-sizing: border-box !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; /* nav change: Suki.ai dropdown chrome */ border-radius: 0 !important; border: none !important; background: #ffffff !important; box-shadow: none !important; } html.dark .suki-more-nav-panel, html[data-theme="dark"] .suki-more-nav-panel, [data-theme="dark"] .suki-more-nav-panel { border-color: transparent !important; background: #0a0a0a !important; box-shadow: none !important; } .suki-more-nav-panel[hidden] { display: none !important; } .suki-more-nav-panel-inner { overflow-y: auto !important; overflow-x: hidden !important; /* nav change: full-bleed rows */ padding: 0 !important; -webkit-overflow-scrolling: touch !important; } .suki-more-nav-header-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 16px 16px 8px !important; border-bottom: 2px solid #d1d1d1 !important; position: sticky !important; top: 0 !important; z-index: 2 !important; background: #ffffff !important; } html.dark .suki-more-nav-header-row, html[data-theme="dark"] .suki-more-nav-header-row, [data-theme="dark"] .suki-more-nav-header-row { border-bottom-color: rgba(255, 255, 255, 0.18) !important; background: #0a0a0a !important; } .suki-more-nav-panel-title { display: block !important; font-size: 15px !important; font-weight: 600 !important; color: #111827 !important; margin: 0 !important; } html.dark .suki-more-nav-panel-title, html[data-theme="dark"] .suki-more-nav-panel-title, [data-theme="dark"] .suki-more-nav-panel-title { color: var(--suki-dark-text) !important; } .suki-more-nav-close { display: none !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 32px !important; height: 32px !important; margin: -6px -6px -6px 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #111827 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } .suki-more-nav-close:hover, .suki-more-nav-close:focus-visible { background: transparent !important; outline: none !important; } .suki-more-nav-close svg { display: block !important; width: 22px !important; height: 22px !important; } html.dark .suki-more-nav-close, html[data-theme="dark"] .suki-more-nav-close, [data-theme="dark"] .suki-more-nav-close { color: var(--suki-dark-text) !important; } @media (max-width: 1023px) { .suki-more-nav-close { display: inline-flex !important; touch-action: manipulation !important; } } .suki-more-nav-intro { font-size: 13px !important; line-height: 1.5 !important; color: #6b7280 !important; margin: 0 !important; /* Match action-row horizontal inset (panel-inner is 0 for full-bleed dividers) */ padding: 12px 16px 10px !important; } html.dark .suki-more-nav-intro, html[data-theme="dark"] .suki-more-nav-intro, [data-theme="dark"] .suki-more-nav-intro { color: #a3a3a3 !important; } .suki-more-nav-actions { display: flex !important; flex-direction: column !important; /* nav change: flush Suki submenu rows */ gap: 0 !important; margin: 0 0 8px !important; padding: 0 !important; } .suki-more-nav-action { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 12px 16px !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important; /* nav change: Suki submenu row dividers */ border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid #d1d1d1 !important; background: transparent !important; color: inherit !important; text-align: left !important; text-decoration: none !important; cursor: pointer !important; font: inherit !important; -webkit-tap-highlight-color: transparent !important; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* nav change: Suki hover thick separator (after:h-2=2px → hover:after:bottom-0) */ .suki-more-nav-action::after { content: "" !important; position: absolute !important; left: 0 !important; width: 100% !important; height: 2px !important; bottom: -2px !important; background-color: transparent !important; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; z-index: 10 !important; } .suki-more-nav-action:last-child { border-bottom: none !important; } .suki-more-nav-action:last-child::after { height: 4px !important; bottom: -4px !important; } html.dark .suki-more-nav-action, html[data-theme="dark"] .suki-more-nav-action, [data-theme="dark"] .suki-more-nav-action { border-bottom-color: rgba(255, 255, 255, 0.18) !important; } .suki-more-nav-action:hover, .suki-more-nav-action:focus-visible { background: rgba(27, 27, 27, 0.05) !important; outline: none !important; } .suki-more-nav-action:hover::after, .suki-more-nav-action:focus-visible::after { bottom: 0 !important; background-color: #d1d1d1 !important; } .suki-more-nav-action:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: 1px !important; } html.dark .suki-more-nav-action:hover::after, html.dark .suki-more-nav-action:focus-visible::after, html[data-theme="dark"] .suki-more-nav-action:hover::after, html[data-theme="dark"] .suki-more-nav-action:focus-visible::after, [data-theme="dark"] .suki-more-nav-action:hover::after, [data-theme="dark"] .suki-more-nav-action:focus-visible::after { background-color: rgba(255, 255, 255, 0.35) !important; } html.dark .suki-more-nav-action:hover, html.dark .suki-more-nav-action:focus-visible, html[data-theme="dark"] .suki-more-nav-action:hover, html[data-theme="dark"] .suki-more-nav-action:focus-visible, [data-theme="dark"] .suki-more-nav-action:hover, [data-theme="dark"] .suki-more-nav-action:focus-visible { background: rgba(255, 255, 255, 0.08) !important; } html.dark .suki-more-nav-action:focus-visible, html[data-theme="dark"] .suki-more-nav-action:focus-visible, [data-theme="dark"] .suki-more-nav-action:focus-visible { outline-color: #ffe148 !important; } .suki-more-nav-action-icon { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; border: 1px solid #e5e7eb !important; background: #f9fafb !important; color: #6f5410 !important; overflow: hidden !important; } html.dark .suki-more-nav-action-icon, html[data-theme="dark"] .suki-more-nav-action-icon, [data-theme="dark"] .suki-more-nav-action-icon { border-color: rgba(255, 255, 255, 0.12) !important; background: #171717 !important; color: #ffe148 !important; } .suki-more-nav-action-icon svg { display: block !important; width: 18px !important; height: 18px !important; } .suki-more-nav-action-icon svg.suki-more-nav-logo--suki, .suki-more-nav-logo--suki { display: block !important; width: 22px !important; height: 11px !important; object-fit: contain !important; } .suki-more-nav-action-text { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .suki-more-nav-action-title-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } .suki-more-nav-action-title { font-size: 14px !important; font-weight: 600 !important; color: #111827 !important; line-height: 1.3 !important; } html.dark .suki-more-nav-action-title, html[data-theme="dark"] .suki-more-nav-action-title, [data-theme="dark"] .suki-more-nav-action-title { color: var(--suki-dark-text) !important; } .suki-more-nav-action-desc { font-size: 12px !important; font-weight: 400 !important; color: #6b7280 !important; line-height: 1.4 !important; } html.dark .suki-more-nav-action-desc, html[data-theme="dark"] .suki-more-nav-action-desc, [data-theme="dark"] .suki-more-nav-action-desc { color: #a3a3a3 !important; } .suki-more-nav-badge { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 6px !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important; background: #F3F4F6 !important; color: #2d2f2f !important; border: 0.5px solid #f3f5f7 !important; } html.dark .suki-more-nav-badge, html[data-theme="dark"] .suki-more-nav-badge, [data-theme="dark"] .suki-more-nav-badge { background-color: #17223b !important; color: #fff394 !important; border: 0.5px solid #292a2b !important; } .suki-more-nav-action-trailing { flex: 0 0 auto !important; align-self: center !important; color: #9ca3af !important; } html.dark .suki-more-nav-action-trailing, html[data-theme="dark"] .suki-more-nav-action-trailing, [data-theme="dark"] .suki-more-nav-action-trailing { color: #6b7280 !important; } .suki-more-nav-section { margin: 0 0 4px !important; } .suki-more-nav-section-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 8px !important; padding: 8px 16px 0 !important; } .suki-more-nav-section-title { font-size: 13px !important; font-weight: 700 !important; color: #111827 !important; line-height: 1.3 !important; margin: 0 0 8px !important; } html.dark .suki-more-nav-section-title, html[data-theme="dark"] .suki-more-nav-section-title, [data-theme="dark"] .suki-more-nav-section-title { color: var(--suki-dark-text) !important; } .suki-more-nav-section .suki-more-nav-section-title { margin-bottom: 0 !important; } .suki-more-nav-groups { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 20px !important; /* Resources / Legal titles + links must not sit on the panel edge */ padding: 8px 16px 4px !important; box-sizing: border-box !important; } .suki-more-nav-compact-list { display: flex !important; flex-direction: column !important; gap: 2px !important; } .suki-more-nav-compact-link { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-height: 36px !important; /* Horizontal inset comes from .suki-more-nav-groups (keep label aligned with titles) */ padding: 8px 0 !important; border-radius: 8px !important; text-decoration: none !important; color: #4b5563 !important; transition: background 0.15s ease, color 0.15s ease !important; } .suki-more-nav-compact-link--icon { justify-content: flex-start !important; } .suki-more-nav-compact-icon { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; color: currentColor !important; } .suki-more-nav-compact-icon svg { display: block !important; width: 16px !important; height: 16px !important; } .suki-more-nav-compact-link--icon .suki-more-nav-compact-label { flex: 1 1 auto !important; min-width: 0 !important; } .suki-more-nav-compact-link:hover, .suki-more-nav-compact-link:focus-visible { background: #f3f4f6 !important; color: #6f5410 !important; outline: none !important; } .suki-more-nav-compact-label { font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; } .suki-more-nav-compact-link .suki-more-nav-action-trailing { width: 14px !important; height: 14px !important; margin-left: auto !important; } html.dark .suki-more-nav-compact-link, html[data-theme="dark"] .suki-more-nav-compact-link, [data-theme="dark"] .suki-more-nav-compact-link { color: #9ca3af !important; } html.dark .suki-more-nav-compact-link:hover, html[data-theme="dark"] .suki-more-nav-compact-link:hover, [data-theme="dark"] .suki-more-nav-compact-link:hover, html.dark .suki-more-nav-compact-link:focus-visible, html[data-theme="dark"] .suki-more-nav-compact-link:focus-visible, [data-theme="dark"] .suki-more-nav-compact-link:focus-visible { background: rgba(255, 255, 255, 0.06) !important; color: #ffe148 !important; } .suki-more-nav-socials { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 8px 16px 16px !important; box-sizing: border-box !important; } .suki-more-nav-social-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 8px !important; text-decoration: none !important; color: #111827 !important; transition: background 0.15s ease, color 0.15s ease !important; } .suki-more-nav-social-link:hover, .suki-more-nav-social-link:focus-visible { background: #f3f4f6 !important; color: #6f5410 !important; outline: none !important; } .suki-more-nav-social-icon { display: block !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } html.dark .suki-more-nav-social-link, html[data-theme="dark"] .suki-more-nav-social-link, [data-theme="dark"] .suki-more-nav-social-link { color: var(--suki-dark-text-body) !important; } html.dark .suki-more-nav-social-link:hover, html[data-theme="dark"] .suki-more-nav-social-link:hover, [data-theme="dark"] .suki-more-nav-social-link:hover, html.dark .suki-more-nav-social-link:focus-visible, html[data-theme="dark"] .suki-more-nav-social-link:focus-visible, [data-theme="dark"] .suki-more-nav-social-link:focus-visible { background: rgba(255, 255, 255, 0.08) !important; color: #ffe148 !important; } @media (max-width: 640px) { .suki-more-nav-action { min-height: 56px !important; padding: 12px !important; gap: 10px !important; } .suki-more-nav-action-icon { width: 34px !important; height: 34px !important; } .suki-more-nav-action-title { font-size: 13.5px !important; } .suki-more-nav-groups { grid-template-columns: 1fr !important; gap: 12px !important; } .suki-more-nav-panel { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; } } /* Phone only: Mintlify "More actions" sheet (empty navbar.links) — same panel as desktop dropdown */ @media (max-width: 1023px) { /* Mintlify panel uses float-right; without this the box stays ~92px tall and clips content */ div[role="dialog"].lg\:hidden .suki-more-mobile-sheet-panel, div[role="dialog"].lg\:hidden [id^="headlessui-dialog-panel"] { float: none !important; display: block !important; width: min(20rem, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; max-height: min(85dvh, calc(100dvh - 1rem)) !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; margin-left: auto !important; margin-right: 0.5rem !important; box-sizing: border-box !important; } div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav { width: 100% !important; overflow: visible !important; } div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-panel-inner { position: static !important; width: 100% !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; /* Clear Mintlify close (absolute top-5 right-5, 32px); keep 16px side inset for copy */ padding: 2.75rem 16px 16px !important; } /* Groups/socials already pad 16px — avoid double inset inside the mobile sheet */ div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-groups, div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-socials, div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-intro, div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-section-heading { padding-left: 0 !important; padding-right: 0 !important; } div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-action { /* Sheet already has 16px; keep row text aligned with Resources/Legal */ padding-left: 0 !important; padding-right: 0 !important; } div[role="dialog"].lg\:hidden nav.suki-more-mobile-nav .suki-more-nav-close { display: none !important; } div[role="dialog"].lg\:hidden .suki-more-nav-groups { grid-template-columns: 1fr !important; } html[data-suki-more-nav-open="1"] { overscroll-behavior: none !important; } html[data-suki-more-nav-open="1"] body { overscroll-behavior: none !important; touch-action: none !important; } html[data-suki-more-nav-open="1"] .suki-more-nav-panel, html[data-suki-more-nav-open="1"] .suki-more-nav-panel * { touch-action: pan-y !important; } } .suki-more-nav-backdrop { position: fixed !important; inset: 0 !important; z-index: 10001 !important; background: rgba(15, 23, 42, 0.28) !important; } .suki-more-nav-backdrop[hidden] { display: none !important; } html.dark .suki-more-nav-backdrop, html[data-theme="dark"] .suki-more-nav-backdrop, [data-theme="dark"] .suki-more-nav-backdrop { background: rgba(10, 10, 10, 0.82) !important; } /* Tables — simple branded tables (cream header, row lines only; no outer border or column lines) */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 28px 0; border-radius: 0; overflow: visible; border: none; box-shadow: none; background: #ffffff; } html.dark table, [data-theme="dark"] table { background: #0d0d0d; border: none; box-shadow: none; border-radius: 0; overflow: visible; } /* Table Header */ table thead { background: #FFFADE; } html.dark table thead, [data-theme="dark"] table thead { background: #1c1b19; } table thead tr th { padding: 12px 16px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--suki-light-text) !important; text-align: left !important; border-bottom: 1px solid #b0aea8 !important; border-right: none !important; } html.dark table thead tr th, [data-theme="dark"] table thead tr th { background-color: #1c1b19 !important; color: #ffe148 !important; border-bottom-color: rgba(255, 255, 255, 0.22) !important; } table thead tr th:first-child { min-width: 140px; } table tbody tr td:first-child { min-width: 140px; font-weight: 600 !important; color: var(--suki-light-text-body) !important; } html.dark table tbody tr td:first-child, [data-theme="dark"] table tbody tr td:first-child { color: #d1cec8 !important; } /* Table Body */ table tbody tr { background: #ffffff; transition: background 0.15s ease; } html.dark table tbody tr, [data-theme="dark"] table tbody tr { background: #0d0d0d; } table tbody tr:hover { background: var(--suki-table-row-hover-bg) !important; } html.dark table tbody tr:hover, [data-theme="dark"] table tbody tr:hover { background: var(--suki-table-row-hover-bg) !important; } table tbody tr td { padding: 12px 16px !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--suki-light-text-body) !important; border-bottom: 1px solid #b0aea8 !important; border-right: none !important; text-align: left !important; vertical-align: top !important; background: transparent !important; } html.dark table tbody tr td, [data-theme="dark"] table tbody tr td { color: #e8e6e3 !important; border-bottom-color: rgba(255, 255, 255, 0.18) !important; } /* Last row - no border */ table tbody tr:last-child td { border-bottom: none !important; } /* Responsive Table */ @media (max-width: 768px) { table { font-size: 12px; } table thead tr th, table tbody tr td { padding: 10px 12px !important; } table thead tr th:first-child, table tbody tr td:first-child { min-width: 110px; } } /* * Mermaid (Mintlify): center diagram in the content column. Flex column + align-items keeps * SVG and inner wrappers centered without clipping; max-width preserves responsive scaling. */ #content-area .mermaid { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; margin: 24px auto; box-sizing: border-box; } /* * Mermaid loading: circular spinner while Mintlify has mounted the host but not the SVG yet. * CSS-only (:has) — no JS DOM injection into Mintlify’s React mermaid tree. * Do not use .mermaid-loading / .mermaid-container (Docs-Bot isolation). */ @keyframes suki-mermaid-spin { to { transform: rotate(360deg); } } #content-area [data-component-name="mermaid-container"]:not(:has(svg)), #content-area .group\/mermaid:not(:has(svg)) { box-sizing: border-box; min-height: 7.5rem; position: relative; } /* Hide raw Mermaid source flash until SVG exists; never touch hosts that already have SVG */ #content-area [data-component-name="mermaid-container"]:not(:has(svg)) > .mermaid, #content-area .group\/mermaid:not(:has(svg)) > .mermaid { opacity: 0; pointer-events: none; } #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, #content-area .group\/mermaid:not(:has(svg))::before { animation: suki-mermaid-spin 0.7s linear infinite; border: 2.5px solid rgba(28, 27, 25, 0.14); border-radius: 50%; border-top-color: #6f5410; box-sizing: border-box; content: ""; display: block; height: 1.75rem; left: 50%; margin: -0.875rem 0 0 -0.875rem; position: absolute; top: 50%; width: 1.75rem; z-index: 1; } html.dark #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, html.dark #content-area .group\/mermaid:not(:has(svg))::before, [data-theme="dark"] #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, [data-theme="dark"] #content-area .group\/mermaid:not(:has(svg))::before { border-color: rgba(255, 255, 255, 0.16); border-top-color: #ffe148; } @media (prefers-reduced-motion: reduce) { #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, #content-area .group\/mermaid:not(:has(svg))::before { animation: none; } } @media print { #content-area [data-component-name="mermaid-container"]:not(:has(svg))::before, #content-area .group\/mermaid:not(:has(svg))::before { display: none !important; } #content-area [data-component-name="mermaid-container"]:not(:has(svg)) > .mermaid, #content-area .group\/mermaid:not(:has(svg)) > .mermaid { opacity: 1 !important; pointer-events: auto !important; } } #content-area .mermaid svg, #content-area svg.mermaid { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } /* * Mermaid theme contrast: * - Light: sequence message lines/labels use dark #111827 (readable on white page). * - Dark: those same elements use brand #FFE148 (readable on dark page). * Flowchart edges stay brand yellow in both modes. Node/actor label text on yellow * fills stays dark. */ html:not(.dark) #content-area .mermaid .messageLine0, html:not(.dark) #content-area .mermaid .messageLine1, html:not(.dark) #content-area .mermaid line.messageLine0, html:not(.dark) #content-area .mermaid line.messageLine1, html[data-theme='light'] #content-area .mermaid .messageLine0, html[data-theme='light'] #content-area .mermaid .messageLine1, [data-theme='light'] #content-area .mermaid .messageLine0, [data-theme='light'] #content-area .mermaid .messageLine1 { stroke: #111827 !important; } html:not(.dark) #content-area .mermaid .messageText, html[data-theme='light'] #content-area .mermaid .messageText, [data-theme='light'] #content-area .mermaid .messageText { fill: #111827 !important; color: #111827 !important; } html:not(.dark) #content-area .mermaid marker path, html[data-theme='light'] #content-area .mermaid marker path, [data-theme='light'] #content-area .mermaid marker path { fill: #111827 !important; stroke: #111827 !important; } html.dark #content-area .mermaid .messageLine0, html.dark #content-area .mermaid .messageLine1, html.dark #content-area .mermaid line.messageLine0, html.dark #content-area .mermaid line.messageLine1, html[data-theme='dark'] #content-area .mermaid .messageLine0, html[data-theme='dark'] #content-area .mermaid .messageLine1, [data-theme='dark'] #content-area .mermaid .messageLine0, [data-theme='dark'] #content-area .mermaid .messageLine1 { stroke: #FFE148 !important; } html.dark #content-area .mermaid .messageText, html[data-theme='dark'] #content-area .mermaid .messageText, [data-theme='dark'] #content-area .mermaid .messageText { fill: #FFE148 !important; color: #FFE148 !important; } html.dark #content-area .mermaid .flowchart-link, html.dark #content-area .mermaid .edgePath path, html.dark #content-area .mermaid path.path, html.dark #content-area .mermaid .arrowMarkerPath, html.dark #content-area .mermaid .arrowheadPath, html.dark #content-area .mermaid marker path, html[data-theme='dark'] #content-area .mermaid .flowchart-link, html[data-theme='dark'] #content-area .mermaid .edgePath path, html[data-theme='dark'] #content-area .mermaid path.path, html[data-theme='dark'] #content-area .mermaid .arrowMarkerPath, html[data-theme='dark'] #content-area .mermaid .arrowheadPath, html[data-theme='dark'] #content-area .mermaid marker path, [data-theme='dark'] #content-area .mermaid .flowchart-link, [data-theme='dark'] #content-area .mermaid .edgePath path, [data-theme='dark'] #content-area .mermaid path.path, [data-theme='dark'] #content-area .mermaid .arrowMarkerPath, [data-theme='dark'] #content-area .mermaid .arrowheadPath, [data-theme='dark'] #content-area .mermaid marker path { stroke: #FFE148 !important; fill: #FFE148 !important; } html.dark #content-area .mermaid .flowchart-link, html[data-theme='dark'] #content-area .mermaid .flowchart-link, [data-theme='dark'] #content-area .mermaid .flowchart-link, html.dark #content-area .mermaid .edgePath path, html[data-theme='dark'] #content-area .mermaid .edgePath path, [data-theme='dark'] #content-area .mermaid .edgePath path, html.dark #content-area .mermaid path.path, html[data-theme='dark'] #content-area .mermaid path.path, [data-theme='dark'] #content-area .mermaid path.path { fill: none !important; } /* Hide deprecated tag badge for Session Metadata page */ div.w-\[78px\].h-\[21px\].bg-\[#FDEAD8\], div[class*="w-[78px]"][class*="h-[21px]"][class*="bg-[#FDEAD8]"], div[class*="deprecated"], div.bg-\[#FDEAD8\].text-\[#AE590A\] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } /* ===== styles/01-layout.css ===== */ /* ======================================== LAYOUT & STRUCTURE ======================================== */ /* Dark Mode Background - Content Area Only */ .dark body #content-container, .dark body .mdx-content { background-color: #0a0a0a; /* Mintlify dark body (gray-300). Headings stay gray-200 via --suki-dark-text. */ color: var(--suki-dark-text-body); } /* * Dark text system (Mintlify): * - Body / leads: --suki-dark-text-body (#d1d0ce, gray-300) * - Headings / titles / dark:text-white: --suki-dark-text (#e1e1de, gray-200) * - Muted: --suki-dark-text-muted (#a1a19f, gray-400) */ html.dark #content-area .mdx-content :is(strong, b), [data-theme='dark'] #content-area .mdx-content :is(strong, b) { color: inherit; } /* * Neutral/Note callouts: Mintlify prose-invert uses zinc; align to shared body token. * Tip/Info keep their accent text (--dark-callout-text-color / blue). */ html.dark #content-area .callout[class*='border-neutral'] .prose, html.dark #content-area .callout[class*='border-zinc'] .prose, [data-theme='dark'] #content-area .callout[class*='border-neutral'] .prose, [data-theme='dark'] #content-area .callout[class*='border-zinc'] .prose { color: var(--suki-dark-text-body) !important; } html.dark #content-area .callout[class*='border-neutral'] .prose :is(li, strong, b, p, span):not(a):not(code), html.dark #content-area .callout[class*='border-zinc'] .prose :is(li, strong, b, p, span):not(a):not(code), [data-theme='dark'] #content-area .callout[class*='border-neutral'] .prose :is(li, strong, b, p, span):not(a):not(code), [data-theme='dark'] #content-area .callout[class*='border-zinc'] .prose :is(li, strong, b, p, span):not(a):not(code) { color: inherit !important; } html.dark #content-area :is(h2, h3, h4), [data-theme='dark'] #content-area :is(h2, h3, h4) { color: var(--suki-dark-text); } html.dark #content-area .dark\:text-white, html.dark #content-area .dark\:text-gray-50, [data-theme='dark'] #content-area .dark\:text-white, [data-theme='dark'] #content-area .dark\:text-gray-50 { color: var(--suki-dark-text) !important; } html.dark #content-area .api-section-heading-title, [data-theme='dark'] #content-area .api-section-heading-title { color: var(--suki-dark-text); } /* Mintlify Steps copy: align zinc neutrals to Mintlify gray tokens */ html.dark #content-area .steps > li p, html.dark #content-area ol.steps > li p, html.dark #content-area [data-component-part='step'] p, [data-theme='dark'] #content-area .steps > li p, [data-theme='dark'] #content-area ol.steps > li p, [data-theme='dark'] #content-area [data-component-part='step'] p { color: var(--suki-dark-text-body); } /* Light mode background + body — content area (Mintlify canvas + gray-700) */ html:not(.dark):not([data-theme="dark"]) body #content-container, html:not(.dark):not([data-theme="dark"]) body .mdx-content, [data-theme="light"] body #content-container, [data-theme="light"] body .mdx-content { background-color: #fffffd; color: var(--suki-light-text-body); } /* * Light text system (Mintlify) — mirror of dark text system: * - Body / leads: --suki-light-text-body (#41413f, gray-700) * - Headings / titles: --suki-light-text (#1a1917, gray-900) * - Muted: --suki-light-text-muted (#737270, gray-500) * Buttons / CTAs are intentionally excluded from these lists. */ html:not(.dark):not([data-theme='dark']) #content-area .mdx-content :is(strong, b), [data-theme='light'] #content-area .mdx-content :is(strong, b) { color: inherit; } html:not(.dark):not([data-theme='dark']) #content-area :is(h2, h3, h4), [data-theme='light'] #content-area :is(h2, h3, h4) { color: var(--suki-light-text); } /* Strong inside custom body copy → primary heading token */ html:not(.dark):not([data-theme='dark']) #content-area .steps > li p, html:not(.dark):not([data-theme='dark']) #content-area ol.steps > li p, html:not(.dark):not([data-theme='dark']) #content-area [data-component-part='step'] p, [data-theme='light'] #content-area .steps > li p, [data-theme='light'] #content-area ol.steps > li p, [data-theme='light'] #content-area [data-component-part='step'] p { color: var(--suki-light-text-body); } /* * Mintlify MDX article spacing (standard doc pages, not home .hp-wrap). * Paragraphs render as span[data-as="p"] with 1.25em vertical margins. Staging injects a hidden * llms.txt blockquote.sr-only before the body, which blocks :first-child margin reset and adds * ~20px under the page-header description. Header description lives in header .text-lg.prose; * #content.mdx-content still has mt-8 (32px). */ #content-area:not(:has(.hp-wrap)) #content.mdx-content > blockquote.sr-only { margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; border: none !important; } #content-area:not(:has(.hp-wrap)) #content.mdx-content > blockquote.sr-only + span[data-as="p"], #content-area:not(:has(.hp-wrap)) #content.mdx-content.prose > blockquote.sr-only + span[data-as="p"], #content-area:not(:has(.hp-wrap)) #content.mdx-content .prose > blockquote.sr-only + span[data-as="p"] { margin-top: 0 !important; } #content-area:has(header .text-lg.prose):not(:has(.hp-wrap)) #content.mdx-content { margin-top: 1rem !important; } #content-area:not(:has(.hp-wrap)) div.mdx-content.prose > span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content .prose > span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content.prose-sm > span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content .prose-sm > span[data-as="p"] { margin-top: 1em; margin-bottom: 1em; } #content-area:not(:has(.hp-wrap)) div.mdx-content.prose > span[data-as="p"]:first-child, #content-area:not(:has(.hp-wrap)) div.mdx-content .prose > span[data-as="p"]:first-child, #content-area:not(:has(.hp-wrap)) div.mdx-content.prose-sm > span[data-as="p"]:first-child, #content-area:not(:has(.hp-wrap)) div.mdx-content .prose-sm > span[data-as="p"]:first-child, #content-area:not(:has(.hp-wrap)) div.mdx-content.prose > :is(h2, h3, h4) + span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content .prose > :is(h2, h3, h4) + span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content.prose-sm > :is(h2, h3, h4) + span[data-as="p"], #content-area:not(:has(.hp-wrap)) div.mdx-content .prose-sm > :is(h2, h3, h4) + span[data-as="p"] { margin-top: 0; } /* Main Content Container */ main article { margin: 0 auto !important; width: 100%; max-width: 1200px; padding-left: 20px !important; padding-right: 20px !important; } /* * Home (custom MDX): `#content-area` spans the main pane (sidebar → viewport edge) so the hero * cream band can run full width there without `100vw` (which would paint under the sidebar). * Reading width is enforced on `.hp-wrap` (hero + body share one padded column), not on `#content-area`. */ #content-area:has(.hp-wrap) { box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; /* Home layout: one shared rail across hero + all sections (tuned per breakpoint below). */ --hp-home-rail-vw: 92vw; --hp-home-rail-max: 1320px; /* Desktop narrows the whole home column (see `@media (min-width: 901px)`). */ --hp-home-rail-scale: 1; width: 100% !important; } /* Inner article fills the narrowed content column (avoid double max-width math) */ main article:has(.hp-wrap) { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } /* * Mintlify `#content.mdx-content` is often a column flex with a centered cross-axis, which can * shrink `.hp-wrap` (and the footer stack) while `.hp-journey-explore` reads wider. Stretch so the * home column is one width; Popular resources + footer padding rules below match `.hp-io` insets. */ #content-area:has(.hp-wrap) #content.mdx-content { align-items: stretch !important; } #content-area:has(.hp-wrap) .hp-wrap { align-self: stretch !important; } /* * Home MDX column: centered max width on laptop+ only. Below 901px use `max-width: 100%` (see * HOME PAGE — RESPONSIVE) so real phones and Mintlify device frame fill the content pane; `80vw` * left large side gutters and could disagree with `vw` in nested previews. * Includes `web-sdk-exec-page` hubs (Use Cases, Tutorials, Executive Summary, Technical Execution) * so they share the same rail as API/SDK overview. */ #content-area:has(.hp-wrap) .hp-wrap { margin-left: auto; margin-right: auto; max-width: min( calc(var(--hp-home-rail-vw) * var(--hp-home-rail-scale)), calc(var(--hp-home-rail-max) * var(--hp-home-rail-scale)) ); } /* * Home rail tiers: * - Mobile: keep defaults on `#content-area:has(.hp-wrap)` (≤900px uses HOME PAGE — RESPONSIVE). * - Laptop / normal desktop: slightly wider than the prior 80vw/1320 rail (not full Confluent width). * - Big desktop: modest widen for 21 in+ layouts. */ @media (min-width: 901px) and (max-width: 1799px) { #content-area:has(.hp-wrap) { --hp-home-rail-vw: 84vw; --hp-home-rail-max: 1380px; } } @media (min-width: 901px) { /* * Whole home page shares one rail (`.hp-wrap` + hero caps). Keep scale at 1 so the * small vw/max bump above is not shrunk away. */ #content-area:has(.hp-wrap) { --hp-home-rail-scale: 1; } } /* Wide content rail: see early block after base tokens (styles/00-base.css). */ @media (min-width: 1800px) { main article { max-width: 1300px !important; } #content-area:has(.hp-wrap) { --hp-home-rail-vw: 86vw; --hp-home-rail-max: 1500px; } } /* * Home dark only: prose is #0a0a0a but Mintlify paints gutters / shell near #000 and `dark:bg-gray-900` (#13171B). * Unify every visible layer to #0a0a0a so there is no two-tone band. Home column width is on `.hp-wrap`. */ html.dark:has(.hp-wrap), html[data-theme="dark"]:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark body:has(.hp-wrap), html[data-theme="dark"] body:has(.hp-wrap), [data-theme="dark"] body:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark body:has(.hp-wrap) #body-content, html[data-theme="dark"] body:has(.hp-wrap) #body-content, [data-theme="dark"] body:has(.hp-wrap) #body-content { background-color: #0a0a0a !important; } html.dark body:has(.hp-wrap) #content-container, html[data-theme="dark"] body:has(.hp-wrap) #content-container, [data-theme="dark"] body:has(.hp-wrap) #content-container { background-color: #0a0a0a !important; } html.dark body:has(.hp-wrap) #content-container > .flex-1, html[data-theme="dark"] body:has(.hp-wrap) #content-container > .flex-1, [data-theme="dark"] body:has(.hp-wrap) #content-container > .flex-1 { background-color: #0a0a0a !important; } html.dark #content-area:has(.hp-wrap), html[data-theme="dark"] #content-area:has(.hp-wrap), [data-theme="dark"] #content-area:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark main:has(.hp-wrap), html[data-theme="dark"] main:has(.hp-wrap), [data-theme="dark"] main:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark main article:has(.hp-wrap), html[data-theme="dark"] main article:has(.hp-wrap), [data-theme="dark"] main article:has(.hp-wrap) { background-color: #0a0a0a !important; } html.dark main:has(.hp-wrap) .dark\:bg-gray-900, html[data-theme="dark"] main:has(.hp-wrap) .dark\:bg-gray-900, [data-theme="dark"] main:has(.hp-wrap) .dark\:bg-gray-900 { background-color: #0a0a0a !important; } /* * Hide thin rail borders between left sidebar / main / right TOC (both themes). * Mintlify uses border-r on #sidebar-content and border-l on #content-side-layout. */ #sidebar-content, html.dark #sidebar-content, html[data-theme='dark'] #sidebar-content, [data-theme='dark'] #sidebar-content, html:not(.dark):not([data-theme='dark']) #sidebar-content, [data-theme='light'] #sidebar-content { border-right-width: 0 !important; border-right-style: none !important; border-right-color: transparent !important; } #content-side-layout, .dark #content-side-layout, html.dark #content-side-layout, html[data-theme='dark'] #content-side-layout, [data-theme='dark'] #content-side-layout, html:not(.dark):not([data-theme='dark']) #content-side-layout, [data-theme='light'] #content-side-layout { border-left-width: 0 !important; border-left-style: none !important; border-left-color: transparent !important; } /* * Right TOC column: Mintlify uses px-8 (2rem) on #content-side-layout. A smaller padding-left * pulls “On this page” and links toward the main column without changing width, sticky top, or height. */ /* * TOC "On this page": Mintlify nests the heading button, ul, and footer rows in #table-of-contents. * Active marker is a ::before dot (position absolute). Padding-left on the first button, each * .toc-item, and direct footer divs keeps labels clear of the dot. Do not use negative left on * ::before (ancestor lg:overflow-x-clip clips it). Primary #6F5410 / #FFE148 in dark. * * Commit f70301e used only `data-active-deepest="true"` (one dot). Do not also key off * `data-active="true"`: Mintlify can set that on multiple “trail” rows at once, which looks like * multiple dots. When deepest is present anywhere in the TOC, rely on it only. When no row has * deepest, do not fall back with `font-medium` alone: some Mintlify versions put `font-medium` on * every TOC link, which would draw a dot on every row on localhost. Fall back only when the direct * child link uses primary emphasis (`text-primary` / `text-primary-light`), same as the active row. */ #table-of-contents { box-sizing: border-box; } /* Native list markers + our dot look like double bullets; TOC list uses #table-of-contents-content. */ #table-of-contents-content { list-style: none !important; } #table-of-contents > button:first-of-type, #table-of-contents > div:not(#multi-view-dropdown) { box-sizing: border-box; padding-left: 1rem !important; } /* Mintlify language picker; do not inherit the 1rem inset used for footer rows. */ #table-of-contents #multi-view-dropdown { box-sizing: border-box; padding-left: 0 !important; } /* * Mintlify picker: Radix/menu focus uses theme primary for outline (docs.json #6F5410). * Default Mintlify shows gray hover fill only. Scoped to multi-view classes (TOC + mobile). */ .multi-view-dropdown .multi-view-dropdown-trigger:focus, .multi-view-dropdown .multi-view-dropdown-trigger:focus-visible { outline: none !important; box-shadow: none !important; } .multi-view-dropdown-item[data-highlighted], .multi-view-dropdown-item:focus, .multi-view-dropdown-item:focus-visible, .multi-view-dropdown-item:focus-within { outline: none !important; box-shadow: none !important; } #table-of-contents .toc-item { box-sizing: border-box; padding-left: 1rem !important; position: relative; list-style-type: none !important; } /* Active TOC row: one dot (f70301e deepest-first; link fallback only if no deepest row). */ #table-of-contents .toc-item[data-active-deepest="true"]::before, #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary)::before, #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary-light)::before { background-color: #6f5410; border-radius: 50%; content: ""; height: 0.375rem; left: 0.05rem; pointer-events: none; position: absolute; top: 0.8rem; width: 0.375rem; } html.dark #table-of-contents .toc-item[data-active-deepest="true"]::before, html[data-theme="dark"] #table-of-contents .toc-item[data-active-deepest="true"]::before, [data-theme="dark"] #table-of-contents .toc-item[data-active-deepest="true"]::before, html.dark #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary)::before, html[data-theme="dark"] #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary)::before, [data-theme="dark"] #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary)::before, html.dark #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary-light)::before, html[data-theme="dark"] #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary-light)::before, [data-theme="dark"] #table-of-contents:not(:has(.toc-item[data-active-deepest="true"])) .toc-item:has(> a.text-primary-light)::before { background-color: #ffe148; } main article > *:not(.sdk-overview-container):not(.news-ticker-banner-wrapper) { margin-left: auto !important; margin-right: auto !important; max-width: 1400px; } @media (max-width: 968px) { main article { padding-left: 20px !important; padding-right: 20px !important; } } @media (max-width: 640px) { main article { padding-left: 16px !important; padding-right: 16px !important; } main article > *:not(.sdk-overview-container):not(.news-ticker-banner-wrapper) { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ===== styles/02-media.css ===== */ /* ======================================== MEDIA & EMBEDDED CONTENT ======================================== */ /* Responsive Iframe for Videos */ iframe { max-width: 100%; height: auto; } @media (max-width: 640px) { iframe[width="500"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; } } @media (max-width: 968px) { iframe[width="500"] { width: 100% !important; max-width: 500px; height: auto !important; aspect-ratio: 16 / 9; } } /* ===== styles/07-utilities.css ===== */ /* ======================================== UTILITIES & OVERRIDES ======================================== */ /* Support mailto draft icon (scripts/support-mailto-draft.js) — content-area only */ #content-area a[data-suki-support-mail='1'] { margin-inline-end: 0.1em; } #content-area .suki-support-mail-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.28em; margin-inline-start: 0.2em; margin-inline-end: 0.08em; padding: 0.12em; border: 0; border-radius: 5px; background: transparent; /* Mintlify --primary is channel RGB (e.g. 111 84 16); match link accent */ color: rgb(var(--primary)); opacity: 1; cursor: pointer; line-height: 0; } #content-area .suki-support-mail-btn svg { width: 19px; height: 19px; transform: scale(1); transform-origin: center center; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } #content-area .suki-support-mail-btn:hover svg, #content-area .suki-support-mail-btn:focus-visible svg { transform: scale(1.14); } #content-area .suki-support-mail-btn:focus-visible { background: transparent; outline: none; box-shadow: 0 0 0 2px rgb(var(--primary) / 0.35); } html.dark #content-area .suki-support-mail-btn, html[data-theme='dark'] #content-area .suki-support-mail-btn { color: #e8d5a3; } @media (prefers-reduced-motion: reduce) { #content-area .suki-support-mail-btn svg { transition: none; } } @media print { #content-area .suki-support-mail-btn { display: none !important; } } /* Hide "Powered by Mintlify" Footer */ footer#footer a[href*="mintlify.com"], footer#footer a[href*="poweredBy"], footer a[href*="mintlify.com"], footer a[href*="poweredBy"], a[href*="mintlify.com"][href*="poweredBy"], a.text-sm.text-gray-500[href*="mintlify.com"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; width: 0 !important; padding: 0 !important; margin: 0 !important; } /* Mintlify site footer (#footer): remove top divider only (footer stays visible on all widths). */ footer#footer { border-top: none !important; } html.dark footer#footer, html[data-theme="dark"] footer#footer, [data-theme="dark"] footer#footer { border-top: none !important; } /* * Prev/next cards: Mintlify links are transparent; prose/accordions above can paint through * when scrolled to the page end (especially after SPA nav from a longer page). Opaque chrome only. */ #content-area #pagination { position: relative; z-index: 2; isolation: isolate; margin-top: 1.5rem !important; } html:not(.dark):not([data-theme="dark"]) #content-area #pagination a, [data-theme="light"] #content-area #pagination a { background-color: #fffffd !important; } html.dark #content-area #pagination a, html[data-theme="dark"] #content-area #pagination a, [data-theme="dark"] #content-area #pagination a { background-color: #0a0a0a !important; } /* * In-body trust footer (scripts/suki-doc-footer.js): bottom of #content-area after #pagination. * Full bleed within #content-area only (article column). Light: #fffffd; dark: #0a0a0a. */ html[data-suki-doc-footer='on'] #content-area { display: flex !important; flex-direction: column !important; } /* Mobile: no viewport min-height (avoids blank band); desktop keeps footer pinned on short pages. */ @media (max-width: 1023px) { html[data-suki-doc-footer='on'] #content-area { min-height: 0 !important; } html[data-suki-announcement='on'][data-suki-doc-footer='on'] #content-area { min-height: 0 !important; } #content-area .suki-doc-footer { margin-top: 0 !important; padding-top: 1.5rem; padding-bottom: 1.25rem; } .suki-doc-footer-inner { gap: 1rem; } } @media (min-width: 1024px) { html[data-suki-doc-footer='on'] #content-area { min-height: calc(100dvh - 3rem) !important; } html[data-suki-announcement='on'][data-suki-doc-footer='on'] #content-area { min-height: calc(100dvh - var(--suki-mint-chrome-bottom, 6rem)) !important; } } html[data-suki-doc-footer='on'] footer#footer { display: none !important; } #content-area .suki-doc-footer { position: relative; z-index: 1; flex-shrink: 0; margin-top: auto !important; box-sizing: border-box; /* Bleed to article column edges; stay left of #content-side-layout (TOC). */ width: calc(100% + 3rem); max-width: none; margin-left: -1.5rem; margin-right: -1.5rem; padding: 2rem 1.5rem 1.75rem; background-color: #fffffd; color: var(--suki-light-text); } /* Home / cookbook recipes: footer lives inside `.hp-wrap` (rail-aligned); skip article bleed. * Frame pages zero `#content-area` padding; negative-margin bleed would overflow the viewport. */ body:has([data-hp-home-hero]) #content-area .suki-doc-footer, #content-area .cb-recipe-wrap > .suki-doc-footer, #content-area:has(.cb-recipe-wrap) > .suki-doc-footer { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; padding-top: 2rem; padding-bottom: 1.75rem; box-sizing: border-box; } /* * Home: clear space above the band (do not use margin-top:auto — that fights document flow * inside `.hp-wrap` and can paint over the support card). Keep z-index auto so it cannot * cover the section above. */ body:has([data-hp-home-hero]) #content-area .hp-wrap > .suki-doc-footer { margin-top: 110px !important; z-index: auto; } /* * Home only + light mode: full-bleed charcoal band (same #1c1c19 as `.hp-hero-bleed`). * Dark mode keeps existing footer colors; rail inset for copy is shared below. */ html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) #content-area .hp-wrap > .suki-doc-footer, [data-theme='light'] body:has([data-hp-home-hero]) #content-area .hp-wrap > .suki-doc-footer { background-color: #1c1c19; color: #fffffd; max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 2rem; padding-bottom: 1.75rem; } /* Home (light + dark): keep logos/legal on the shared home rail, not flush to the pane edges. */ body:has([data-hp-home-hero]) #content-area .suki-doc-footer-inner { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: min( calc(var(--hp-home-rail-vw) * var(--hp-home-rail-scale)), calc(var(--hp-home-rail-max) * var(--hp-home-rail-scale)) ); width: 100%; } @media (max-width: 900px) { body:has([data-hp-home-hero]) #content-area .suki-doc-footer-inner { max-width: 100%; padding-left: 20px; padding-right: 20px; } } html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-logos img, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-logos img { /* Light-mode default forces black marks; invert for the charcoal home band. */ filter: brightness(0) invert(1); } html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-trust, html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-trust a, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-trust, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-trust a { color: #fffffd; } html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-trust a:hover, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-trust a:hover { color: #fffffd; opacity: 0.85; } html:not(.dark):not([data-theme='dark']) body:has([data-hp-home-hero]) .suki-doc-footer-copy, [data-theme='light'] body:has([data-hp-home-hero]) .suki-doc-footer-copy { color: rgba(255, 255, 255, 0.82); } /* * Docs-Bot sidebar on small/medium desktop: keep the trust footer inside the narrowed * article column so legal copy and badges do not sit under the docked sidebar panel. */ html.dark #content-area .suki-doc-footer, html[data-theme='dark'] #content-area .suki-doc-footer, [data-theme='dark'] #content-area .suki-doc-footer { background-color: #0a0a0a; color: var(--suki-dark-text); } .suki-doc-footer-inner { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; width: 100%; } /* Trust + legal row (was previously laid out on `.suki-doc-footer-inner`). */ .suki-doc-footer-bar { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; width: 100%; } @media (min-width: 900px) { .suki-doc-footer-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } } /* * Home-only brand + sitemap above the trust bar. * Light home band is charcoal; dark home is #0a0a0a — light text in both. */ body:has([data-hp-home-hero]) .suki-doc-footer--home .suki-doc-footer-inner { gap: 2.5rem; } body:has([data-hp-home-hero]) .suki-doc-footer-home-top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; width: 100%; margin: 0; padding: 0 0 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-sizing: border-box; } @media (min-width: 960px) { body:has([data-hp-home-hero]) .suki-doc-footer-home-top { grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 2.2fr); gap: 3rem; align-items: start; } } body:has([data-hp-home-hero]) .suki-doc-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; margin: 0; padding: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-brand-logo { display: block; margin: 0; padding: 0 !important; color: #fffffd !important; text-decoration: none !important; background: transparent !important; border: none !important; box-shadow: none !important; line-height: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-brand-logo:hover, body:has([data-hp-home-hero]) .suki-doc-footer-brand-logo:focus-visible { color: #fffffd !important; opacity: 0.9; text-decoration: none !important; } body:has([data-hp-home-hero]) .suki-doc-footer-brand-mark { display: block; width: 9.5rem; max-width: 100%; height: auto; margin: 0; padding: 0; /* viewBox is cropped to glyph bounds so the left edge matches tagline/socials */ overflow: visible; } body:has([data-hp-home-hero]) .suki-doc-footer-brand-tagline { margin: 0; padding: 0; max-width: 17rem; color: rgba(255, 255, 253, 0.78) !important; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.9375rem; font-weight: 400; line-height: 1.45; } body:has([data-hp-home-hero]) .suki-doc-footer-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin: 0.15rem 0 0; padding: 0; list-style: none; } body:has([data-hp-home-hero]) .suki-doc-footer-socials li { margin: 0; padding: 0; list-style: none; line-height: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-social-link, body:has([data-hp-home-hero]) .suki-doc-footer-social-link[href] { display: inline-flex !important; align-items: center; justify-content: flex-start; width: auto; height: auto; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 253, 0.72) !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; line-height: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-social-link:hover, body:has([data-hp-home-hero]) .suki-doc-footer-social-link:focus-visible, body:has([data-hp-home-hero]) .suki-doc-footer-social-link[href]:hover, body:has([data-hp-home-hero]) .suki-doc-footer-social-link[href]:focus-visible { color: #fffffd !important; background: transparent !important; text-decoration: none !important; opacity: 1 !important; } body:has([data-hp-home-hero]) .suki-doc-footer-social-icon { display: block; width: 1.25rem; height: 1.25rem; margin: 0; padding: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-nav { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; margin: 0; padding: 0; box-sizing: border-box; } @media (min-width: 640px) { body:has([data-hp-home-hero]) .suki-doc-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } /* Thin white rules between Documentation | Developers | Resources */ body:has([data-hp-home-hero]) .suki-doc-footer-nav-col { padding-inline: 1.75rem; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-col:first-child { padding-left: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-col:last-child { padding-right: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-col + .suki-doc-footer-nav-col { border-left: 1px solid rgba(255, 255, 255, 0.9); } } body:has([data-hp-home-hero]) .suki-doc-footer-nav-col { min-width: 0; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-heading { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.15rem; color: rgba(255, 255, 255, 0.58) !important; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-icon { display: block; flex-shrink: 0; color: inherit; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-list li { margin: 0; padding: 0; list-style: none; } /* Beat Mintlify `#content-area a[href]` blue !important on home footer links. */ body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a, body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a[href] { color: rgba(255, 255, 253, 0.92) !important; display: inline !important; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.9375rem !important; font-weight: 400 !important; line-height: 1.4 !important; text-decoration: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a:hover, body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a:focus-visible, body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a[href]:hover, body:has([data-hp-home-hero]) .suki-doc-footer-nav-list a[href]:focus-visible { color: #fffffd !important; text-decoration: underline !important; text-underline-offset: 4px; background: transparent !important; opacity: 1 !important; } .suki-doc-footer-left { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; flex: 0 1 auto; } @media (min-width: 640px) { .suki-doc-footer-left { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; } } .suki-doc-footer-logos { display: flex; flex-shrink: 0; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none; } .suki-doc-footer-logos li { margin: 0; padding: 0; } .suki-doc-footer-logos img { display: block; height: 2.5rem; width: auto; max-width: none; object-fit: contain; } html:not(.dark):not([data-theme='dark']) .suki-doc-footer-logos img, [data-theme='light'] .suki-doc-footer-logos img { filter: brightness(0); } .suki-doc-footer-trust { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--suki-light-text); } .suki-doc-footer-trust a { color: var(--suki-light-text); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; } .suki-doc-footer-trust a:hover { color: var(--suki-light-text); opacity: 0.75; } html.dark .suki-doc-footer-trust, html[data-theme='dark'] .suki-doc-footer-trust, [data-theme='dark'] .suki-doc-footer-trust { color: var(--suki-dark-text); } html.dark .suki-doc-footer-trust a, html[data-theme='dark'] .suki-doc-footer-trust a, [data-theme='dark'] .suki-doc-footer-trust a { color: var(--suki-dark-text); } html.dark .suki-doc-footer-trust a:hover, html[data-theme='dark'] .suki-doc-footer-trust a:hover, [data-theme='dark'] .suki-doc-footer-trust a:hover { color: var(--suki-dark-text); opacity: 0.85; } .suki-doc-footer-trust a strong { font-weight: 500; } .suki-doc-footer-legal { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 0 0 auto; width: 100%; max-width: 34rem; } @media (min-width: 900px) { .suki-doc-footer-legal { flex: 0 1 34rem; width: auto; margin-left: auto; text-align: right; } } .suki-doc-footer-copy { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.6875rem; line-height: 1.45; color: rgba(20, 17, 16, 0.55); } html.dark .suki-doc-footer-copy, html[data-theme='dark'] .suki-doc-footer-copy, [data-theme='dark'] .suki-doc-footer-copy { color: rgba(255, 255, 255, 0.5); } .suki-doc-footer-copy--secondary { margin: 0; } .suki-doc-footer-reserved { text-decoration: underline; text-underline-offset: 4px; } @media print { html[data-suki-doc-footer='on'] #content-area { display: block !important; min-height: 0 !important; } #content-area .suki-doc-footer { display: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ===== styles/10-sdk-api-overview.css ===== */ /* ======================================== SDK OVERVIEW PAGE ======================================== */ /* Container & Layout */ .sdk-overview-container { max-width: 100%; margin: 0 auto; padding: 32px 40px 56px; background-color: #fffffd; overflow: visible !important; } /* Dark mode background for SDK/API overview and release notes hub (.sdk-overview-container.release-notes-container) */ .dark .sdk-overview-container, html.dark .sdk-overview-container, html[data-theme="dark"] .sdk-overview-container, [data-theme="dark"] .sdk-overview-container { background-color: #0a0a0a; } /* Normal text font size for SDK Overview and API Overview pages */ .sdk-overview-container p:not(.sdk-overview-main-description):not(.sdk-overview-subtitle), .sdk-overview-container .sdk-overview-text { font-size: 16px; } /* Mermaid centering: see global #content-area .mermaid rules after the Tables section */ /* Intro Section */ .sdk-overview-intro { margin-bottom: 30px; } .sdk-overview-main-title { font-size: 36px; font-weight: 600; letter-spacing: -0.015em; color: var(--suki-light-text); margin: 0 0 16px 0; line-height: 1.25; text-shadow: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; } html.dark .sdk-overview-main-title, [data-theme="dark"] .sdk-overview-main-title { color: var(--suki-dark-text); } .sdk-overview-text { font-size: 16px; line-height: 1.7; color: var(--suki-light-text-body); margin: 0 0 16px 0; } .sdk-overview-text a { color: var(--suki-light-text); text-decoration: none; border-bottom: 1px solid #111827; transition: border-color 0.2s ease; } .sdk-overview-text a:hover { border-bottom-color: #6b7280; } html.dark .sdk-overview-text, [data-theme="dark"] .sdk-overview-text { color: var(--suki-dark-text-body); } html.dark .sdk-overview-text a, [data-theme="dark"] .sdk-overview-text a { color: #fff394; border-bottom-color: #fff394; } html.dark .sdk-overview-text a:hover, [data-theme="dark"] .sdk-overview-text a:hover { border-bottom-color: #ffe148; } .sdk-overview-text code:not(pre code) { background-color: #F3F4F6 !important; color: #2d2f2f !important; border: 0.5px solid #f3f5f7 !important; padding: 2.4px 7px !important; border-radius: 4px !important; font-size: 11px !important; } html.dark .sdk-overview-text code:not(pre code), [data-theme="dark"] .sdk-overview-text code:not(pre code) { background-color: #17223b !important; color: #fff394 !important; border: 0.5px solid #292a2b !important; } /* * Overview hub pages: Mintlify CardGroup typography aligned with suki-feature / sdk-overview cards. */ .sdk-overview-container .card, #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card { font-family: inherit; border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; box-shadow: none; } html.dark .sdk-overview-container .card, html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card, [data-theme="dark"] .sdk-overview-container .card, [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card { background: #0a0a0a; border-color: #374151; } /* * API overview hub “Stay updated” changelog cards: restore Mintlify-default card border weight * (hub override above uses gray-700; Mintlify cards use a softer rim in dark, same token family as TOC/footer chrome). */ .sdk-overview-container .card [data-component-part="card-title"], .sdk-overview-container .card h3, #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-title"], #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card h3 { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--suki-light-text); } html.dark .sdk-overview-container .card [data-component-part="card-title"], html.dark .sdk-overview-container .card h3, html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-title"], html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card h3, [data-theme="dark"] .sdk-overview-container .card [data-component-part="card-title"], [data-theme="dark"] .sdk-overview-container .card h3, [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-title"], [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card h3 { color: var(--suki-dark-text); } .sdk-overview-container .card [data-component-part="card-content"], .sdk-overview-container .card [data-component-part="card-content"] p, #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"], #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"] p { font-size: 13px; line-height: 1.45; color: var(--suki-light-text-body); } html.dark .sdk-overview-container .card [data-component-part="card-content"], html.dark .sdk-overview-container .card [data-component-part="card-content"] p, html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"], html.dark #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"] p, [data-theme="dark"] .sdk-overview-container .card [data-component-part="card-content"], [data-theme="dark"] .sdk-overview-container .card [data-component-part="card-content"] p, [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"], [data-theme="dark"] #content-area .hp-wrap.api-overview-wrap:not(.cb-recipe-wrap) .card [data-component-part="card-content"] p { color: #a1a19f; } /* Thin black guide links: angled arrow appears on hover */ .doc-guide-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; align-items: center; } /* Vertical bullet list of guide buttons (scoped; do not affect .doc-guide-btn-row) */ #content-area ul.doc-guide-btn-list { list-style: none !important; margin: 12px 0 20px; padding-left: 0; } #content-area ul.doc-guide-btn-list > li { position: relative; list-style: none !important; margin: 0 0 8px; padding-left: 1rem; line-height: 1.2; } #content-area ul.doc-guide-btn-list > li:last-child { margin-bottom: 0; } /* One custom bullet only: kill Mintlify prose ::before + native markers */ #content-area ul.doc-guide-btn-list > li::marker { content: none !important; font-size: 0 !important; } #content-area ul.doc-guide-btn-list > li::before { content: '' !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #6b7280; pointer-events: none; } html.dark #content-area ul.doc-guide-btn-list > li::before, [data-theme='dark'] #content-area ul.doc-guide-btn-list > li::before { background: #9ca3af; } /* Slightly thinner pills in this list only */ #content-area ul.doc-guide-btn-list a.doc-guide-btn { padding: 2px 10px; min-height: 24px; font-size: 12px; line-height: 1.15; } #content-area a.doc-guide-btn { display: inline-flex; align-items: center; gap: 0; padding: 4px 12px; min-height: 28px; border-radius: 8px; border: 1px solid #111827; background: #111827; color: #ffffff !important; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; text-decoration: none !important; white-space: nowrap; box-shadow: none; transition: background var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), border-color var(--suki-cta-hover-duration) var(--suki-cta-hover-ease); } #content-area a.doc-guide-btn::after { content: '' !important; display: inline-block; width: 0; height: var(--suki-cta-arrow-size); max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; flex-shrink: 0; background-color: #ffffff; -webkit-mask: var(--suki-cta-arrow-mask) center / contain no-repeat; mask: var(--suki-cta-arrow-mask) center / contain no-repeat; transition: opacity var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), max-width var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), width var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), margin-left var(--suki-cta-hover-duration) var(--suki-cta-hover-ease); } #content-area a.doc-guide-btn:hover, #content-area a.doc-guide-btn:focus-visible { background: #000000; border-color: #000000; color: #ffffff !important; outline: none; } #content-area a.doc-guide-btn:hover::after, #content-area a.doc-guide-btn:focus-visible::after { width: var(--suki-cta-arrow-size); max-width: var(--suki-cta-arrow-size); margin-left: var(--suki-cta-arrow-hover-ml); opacity: 1; } /* Suppress Mintlify auto external-link icons on guide CTAs */ #content-area a.doc-guide-btn > svg { display: none !important; } #content-area a.doc-guide-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255, 225, 72, 0.55); } html.dark #content-area a.doc-guide-btn, [data-theme='dark'] #content-area a.doc-guide-btn { background: #f5f5f5; border-color: #f5f5f5; color: #111827 !important; } html.dark #content-area a.doc-guide-btn::after, [data-theme='dark'] #content-area a.doc-guide-btn::after { background-color: #111827; } html.dark #content-area a.doc-guide-btn:hover, html.dark #content-area a.doc-guide-btn:focus-visible, [data-theme='dark'] #content-area a.doc-guide-btn:hover, [data-theme='dark'] #content-area a.doc-guide-btn:focus-visible { background: #ffffff; border-color: #ffffff; color: #111827 !important; } /* Partnership CTAs inside themed callouts: keep the shared pill palette. */ #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta { background: #111827 !important; background-color: #111827 !important; border-color: #111827 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta::after { /* Callout link color must not tint the masked arrow */ background-color: #ffffff !important; color: #ffffff !important; } /* Contact Partnership Team CTAs only: hover arrow is angled (↗) */ #content-area a.partner-contact-cta::after { transform: rotate(-45deg); transform-origin: center; } #content-area a.partner-contact-cta:hover::after, #content-area a.partner-contact-cta:focus-visible::after { transform: rotate(-45deg); } #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:hover, #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:focus-visible { background: #000000 !important; background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html.dark #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta, html[data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta, [data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta { background: #f5f5f5 !important; background-color: #f5f5f5 !important; border-color: #f5f5f5 !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; } html.dark #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta::after, html[data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta::after, [data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta::after { background-color: #111827 !important; color: #111827 !important; } html.dark #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:hover, html.dark #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:focus-visible, html[data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:hover, html[data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:focus-visible, [data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:hover, [data-theme='dark'] #content-area [data-callout-type] a.doc-guide-btn.partner-contact-cta:focus-visible { background: #ffffff !important; background-color: #ffffff !important; border-color: #ffffff !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; } @media (prefers-reduced-motion: reduce) { #content-area a.doc-guide-btn, #content-area a.doc-guide-btn::after, #content-area a.hp-wn-all { transition-duration: 0.01ms; } } /* * API overview (`api-overview/overview.mdx`): `.hp-wrap` home rail + cream cards (same tokens as documentation/home). */ #content-area .hp-wrap.api-overview-wrap { background: #fffffd; box-sizing: border-box; /* Match `.hp-wrap` horizontal rail with Home (avoid extra 40px gutters that narrow the hero). */ padding: 28px clamp(16px, 3vw, 32px) 56px; width: 100%; /* Column cap comes from the shared home-rail rule, not max-width: 100%. */ min-width: 0; } /* Tutorial frame pages: tighter top so the cream banner sits closer to the navbar */ #content-area .hp-wrap.api-overview-wrap.docs-frame-wrap { padding-top: 16px; padding-bottom: 40px; } /* * Cookbook recipe pages (`mode: frame` + `.cb-recipe-wrap`): more space above the title * on laptop/desktop. Keep the tighter 16px top on small screens. */ @media (min-width: 768px) { #content-area .hp-wrap.api-overview-wrap.docs-frame-wrap.cb-recipe-wrap { padding-top: 2.5rem; } } @media (min-width: 1024px) { #content-area .hp-wrap.api-overview-wrap.docs-frame-wrap.cb-recipe-wrap { padding-top: 3rem; } } html.dark #content-area .hp-wrap.api-overview-wrap, [data-theme='dark'] #content-area .hp-wrap.api-overview-wrap { background: #0a0a0a; } @media (max-width: 640px) { #content-area .hp-wrap.api-overview-wrap { padding-left: 24px; padding-right: 24px; } } /* * Shared docs hubs (Release notes, Glossary, Cookbooks, Tutorials): * outer `*-hp-wrap` rail + inner `.sdk-overview-container` with padding zeroed. */ #content-area .hp-wrap.release-notes-hp-wrap, #content-area .hp-wrap.glossary-hp-wrap, #content-area .hp-wrap.cookbook-hp-wrap, #content-area .hp-wrap.tut-hub-hp-wrap { background: #fffffd; box-sizing: border-box; padding: 32px 40px 56px; width: 100%; } html.dark #content-area .hp-wrap.release-notes-hp-wrap, html.dark #content-area .hp-wrap.glossary-hp-wrap, html.dark #content-area .hp-wrap.cookbook-hp-wrap, html.dark #content-area .hp-wrap.tut-hub-hp-wrap, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap, [data-theme='dark'] #content-area .hp-wrap.glossary-hp-wrap, [data-theme='dark'] #content-area .hp-wrap.cookbook-hp-wrap, [data-theme='dark'] #content-area .hp-wrap.tut-hub-hp-wrap { background: #0a0a0a; } @media (max-width: 968px) { #content-area .hp-wrap.release-notes-hp-wrap, #content-area .hp-wrap.glossary-hp-wrap, #content-area .hp-wrap.cookbook-hp-wrap, #content-area .hp-wrap.tut-hub-hp-wrap { padding: 24px 24px 40px; } } @media (max-width: 640px) { #content-area .hp-wrap.release-notes-hp-wrap, #content-area .hp-wrap.glossary-hp-wrap, #content-area .hp-wrap.cookbook-hp-wrap, #content-area .hp-wrap.tut-hub-hp-wrap { padding: 16px 24px 32px; } } #content-area .hp-wrap.release-notes-hp-wrap .sdk-overview-container.release-notes-container, #content-area .hp-wrap.glossary-hp-wrap .sdk-overview-container, #content-area .hp-wrap.cookbook-hp-wrap .sdk-overview-container, #content-area .hp-wrap.tut-hub-hp-wrap .sdk-overview-container { background: transparent; padding: 0; } /* * Framed tutorial hub (overview) and shared tutorial callout meta badges. * Content tutorial pages use default Mintlify layout (no frame wrap). */ /* Tutorial time / difficulty badges inside What you will build */ #content-area .doc-tutorial-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0.75rem; } #content-area .doc-tutorial-meta .badge, #content-area .doc-tutorial-meta [class*='Badge'] { margin: 0; } /* * Partners overview "What you can build" Mintlify Tiles: * Match Explore SDKs / APIs `.hp-io-method-card-hero` (cream + dot grid, brand icon). * Scope: only .doc-partners-build-tiles (overview.mdx), not tutorial language tiles. */ #content-area .doc-partners-build-tiles [data-component-part='tile-children-container'] { background-color: #fffade !important; background-image: radial-gradient(rgba(111, 84, 16, 0.085) 1px, transparent 1px) !important; background-size: 14px 14px !important; border: 1px solid rgba(111, 84, 16, 0.14) !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(40, 39, 37, 0.05); } html.dark #content-area .doc-partners-build-tiles [data-component-part='tile-children-container'], html[data-theme='dark'] #content-area .doc-partners-build-tiles [data-component-part='tile-children-container'], [data-theme='dark'] #content-area .doc-partners-build-tiles [data-component-part='tile-children-container'] { background-color: #1c1b19 !important; background-image: radial-gradient(rgba(255, 225, 72, 0.12) 1px, transparent 1px) !important; border-color: rgba(255, 225, 72, 0.14) !important; box-shadow: none; } /* Hide Mintlify plus-grid overlays; hero uses the same radial dots as method cards */ #content-area .doc-partners-build-tiles [data-component-part='tile-background-light'], #content-area .doc-partners-build-tiles [data-component-part='tile-background-dark'] { display: none !important; } #content-area .doc-partners-build-tiles [data-component-part='tile-children-inner-container'] > svg.icon { background-color: #6f5410 !important; } html.dark #content-area .doc-partners-build-tiles [data-component-part='tile-children-inner-container'] > svg.icon, html[data-theme='dark'] #content-area .doc-partners-build-tiles [data-component-part='tile-children-inner-container'] > svg.icon, [data-theme='dark'] #content-area .doc-partners-build-tiles [data-component-part='tile-children-inner-container'] > svg.icon { background-color: #ffe148 !important; } /* Full code: Mintlify Columns + Tile language picker (one panel visible) */ #content-area .doc-tutorial-full-code { margin: 0.75rem 0 1.5rem; } /* Icon-only language tiles (no title / description text) */ #content-area .doc-tutorial-full-code a[href^='#full-example-'] { display: flex; align-items: center; justify-content: center; text-align: center; } #content-area .doc-tutorial-full-code a[href^='#full-example-'] [data-component-part='tile-children-container'], #content-area .doc-tutorial-full-code a[href^='#full-example-'] .h-\[170px\] { position: relative; height: 5.25rem !important; min-height: 5.25rem; max-height: 5.25rem; overflow: hidden; } #content-area .doc-tutorial-full-code a[href^='#full-example-'] [data-component-part='tile-children-inner-container'] { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; width: 100% !important; height: 100% !important; max-height: 100% !important; } #content-area .doc-tutorial-full-code a[href^='#full-example-'] h2, #content-area .doc-tutorial-full-code a[href^='#full-example-'] h3, #content-area .doc-tutorial-full-code a[href^='#full-example-'] h4, #content-area .doc-tutorial-full-code a[href^='#full-example-'] p, #content-area .doc-tutorial-full-code a[href^='#full-example-'] [class*='title'], #content-area .doc-tutorial-full-code a[href^='#full-example-'] [class*='description'] { display: none !important; } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon { display: block; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; margin: 0 !important; transform: translate(-50%, -50%); color: #6f5410; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } html.dark #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon, [data-theme='dark'] #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon { color: #ffe148; } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon[data-icon='python'] { -webkit-mask-image: url('/documentation/assets/lang-icons/python.svg'); mask-image: url('/documentation/assets/lang-icons/python.svg'); } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon[data-icon='typescript'] { -webkit-mask-image: url('/documentation/assets/lang-icons/typescript.svg'); mask-image: url('/documentation/assets/lang-icons/typescript.svg'); } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon[data-icon='go'] { -webkit-mask-image: url('/documentation/assets/lang-icons/go.svg'); mask-image: url('/documentation/assets/lang-icons/go.svg'); } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon[data-icon='react'] { -webkit-mask-image: url('/documentation/assets/lang-icons/react.svg'); mask-image: url('/documentation/assets/lang-icons/react.svg'); } /* Active Mintlify Tile (script adds .is-active on the tile link) */ #content-area .doc-tutorial-full-code a[href^='#full-example-'].is-active { outline: 2px solid #ffe148; outline-offset: 2px; border-radius: 0.85rem; } /* * Mobile: Columns stacks to 1 col (full-width tiles). Keep that stack but * shrink tile + icon height so three language chips do not dominate the viewport. */ @media (max-width: 639px) { #content-area .doc-tutorial-full-code .columns, #content-area .doc-tutorial-full-code [class*='columns'] { row-gap: 0.5rem !important; } #content-area .doc-tutorial-full-code a[href^='#full-example-'] [data-component-part='tile-children-container'], #content-area .doc-tutorial-full-code a[href^='#full-example-'] .h-\[170px\] { height: 2.75rem !important; min-height: 2.75rem; max-height: 2.75rem; } #content-area .doc-tutorial-full-code .doc-tutorial-tile-lang-icon { width: 1.5rem; height: 1.5rem; } #content-area .doc-tutorial-full-code a[href^='#full-example-'].is-active { outline-offset: 1px; border-radius: 0.65rem; } } #content-area .doc-tutorial-lang-panel[hidden] { display: none !important; } #content-area .hp-wrap.docs-frame-wrap > .sdk-overview-main-title.release-notes-main-heading { margin-bottom: 0; } #content-area .hp-wrap.docs-frame-wrap > span[data-as='p'], #content-area .hp-wrap.docs-frame-wrap > p { display: block; margin: 0 0 1rem; font-size: 16px; line-height: 1.55; color: var(--suki-light-text-body); } html.dark #content-area .hp-wrap.docs-frame-wrap > span[data-as='p'], html.dark #content-area .hp-wrap.docs-frame-wrap > p, [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > span[data-as='p'], [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > p { color: var(--suki-dark-text-body); } /* * Frame pages skip Mintlify prose, so links lose the default `.link` treatment. * Match standard docs pages: body-colored text, weight 600, primary bottom border. * Cookbook recipe pages (`.cb-recipe-wrap`) already wrap body copy in `.prose` — * keep Mintlify’s default `.link` styles there; do not apply this frame override. */ #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a.link, #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a:not([class*='hp-']):not([class*='cta']):not([class*='method']) { color: var(--suki-light-text); font-weight: 600; text-decoration: none !important; border-bottom: 1px solid #6f5410; box-shadow: none !important; } #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a.link:hover, #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a:not([class*='hp-']):not([class*='cta']):not([class*='method']):hover { border-bottom-color: #6f5410; opacity: 0.85; } html.dark #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a.link, html.dark #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a:not([class*='hp-']):not([class*='cta']):not([class*='method']), [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a.link, [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap:not(.cb-recipe-wrap) a:not([class*='hp-']):not([class*='cta']):not([class*='method']) { color: var(--suki-dark-text); border-bottom-color: #ffe148; } /* Section titles: same rhythm as API overview / home journey headings */ #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4) { color: var(--suki-light-text); font-size: clamp(1.35rem, 2.5vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin: 2rem 0 0.75rem; } html.dark #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4), [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4) { color: var(--suki-dark-text); } #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4) + span[data-as='p'], #content-area .hp-wrap.docs-frame-wrap > :is(h2, h3, h4) + p { margin-top: 0; } #content-area .hp-wrap.docs-frame-wrap > :is(ul, ol) { margin: 0.75rem 0 1.25rem; font-size: 16px; line-height: 1.55; color: var(--suki-light-text-body); } html.dark #content-area .hp-wrap.docs-frame-wrap > :is(ul, ol), [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > :is(ul, ol) { color: var(--suki-dark-text-body); } /* * Frame pages omit Mintlify `prose`, so Tailwind preflight leaves ul/ol with no markers. * Restore the same bullet/number treatment as normal doc pages. */ #content-area .hp-wrap.docs-frame-wrap > ul { list-style: none !important; padding-left: 0 !important; } #content-area .hp-wrap.docs-frame-wrap > ul > li { position: relative; display: list-item !important; list-style: none !important; padding-left: 32px !important; margin-bottom: 0.5rem; } #content-area .hp-wrap.docs-frame-wrap > ul > li::before { content: '' !important; display: block !important; position: absolute; left: 8px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: #535250; } html.dark #content-area .hp-wrap.docs-frame-wrap > ul > li::before, [data-theme='dark'] #content-area .hp-wrap.docs-frame-wrap > ul > li::before { background: #a1a09c; } #content-area .hp-wrap.docs-frame-wrap > ol { list-style-type: decimal !important; list-style-position: outside !important; padding-left: 1.5rem !important; } #content-area .hp-wrap.docs-frame-wrap > ol > li { display: list-item !important; list-style-type: decimal !important; padding-left: 0.35rem !important; margin-bottom: 0.5rem; } /* Callout / tip lists inside the framed tutorial */ #content-area .hp-wrap.docs-frame-wrap .callout ul, #content-area .hp-wrap.docs-frame-wrap [data-component-part='callout'] ul { list-style: none !important; padding-left: 0 !important; margin: 0.5rem 0 0; } #content-area .hp-wrap.docs-frame-wrap .callout ul > li, #content-area .hp-wrap.docs-frame-wrap [data-component-part='callout'] ul > li { position: relative; display: list-item !important; list-style: none !important; padding-left: 28px !important; margin-bottom: 0.4rem; } #content-area .hp-wrap.docs-frame-wrap .callout ul > li::before, #content-area .hp-wrap.docs-frame-wrap [data-component-part='callout'] ul > li::before { content: '' !important; display: block !important; position: absolute; left: 6px; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.55; } #content-area .hp-wrap.docs-frame-wrap .hp-io-method-grid { margin-top: 1.25rem; margin-bottom: 0; } /* ===== Tutorials landing hub (`documentation/tutorials/overview.mdx`) ===== */ #content-area .tut-hub-wrap { --tut-main: hsla(0, 0%, 11%, 1); --tut-text-mid: hsla(0, 0%, 29%, 1); --tut-text-low: hsla(0, 0%, 47%, 1); color: var(--tut-main); } html.dark #content-area .tut-hub-wrap, [data-theme='dark'] #content-area .tut-hub-wrap { --tut-main: #e1e1de; /* Mintlify dark:text-gray-200 */ --tut-text-mid: #d1d0ce; /* gray-300 */ --tut-text-low: #a1a19f; /* gray-400 */ color: var(--tut-main); } #content-area .tut-hub-wrap .tut-hub-intro { margin: 0 0 1.75rem; } #content-area .tut-hub-toolbar { margin: 0 0 2.25rem; } #content-area .tut-hub-filter-row { width: 100%; } #content-area .tut-hub-wrap .release-notes-filter-dropdown-list { /* Keep options inset from the panel edge so icons/labels are not flush left. */ padding: 0.5rem; } #content-area .tut-hub-wrap .release-notes-filter-dropdown-list .release-notes-product-tab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.7rem 1rem; border-radius: 0.65rem; } #content-area .tut-hub-filter-opt-label { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; text-align: left; } #content-area .tut-hub-filter-opt-icon { display: inline-flex; width: 1rem; height: 1rem; flex-shrink: 0; color: var(--tut-text-mid); } #content-area .tut-hub-filter-opt-icon svg { display: block; width: 1rem; height: 1rem; } #content-area .tut-hub-wrap .release-notes-product-tab--active .tut-hub-filter-opt-icon, #content-area .tut-hub-wrap .release-notes-product-tab:hover .tut-hub-filter-opt-icon { color: var(--tut-main); } #content-area .tut-hub-filter-opt-count { flex-shrink: 0; font-size: 0.8125rem; font-weight: 650; color: var(--tut-text-low); font-variant-numeric: tabular-nums; } /* Match Use Cases board sections: flex column so Mintlify span[data-as=p] leads keep block margins. * Vertical gap between Featured → All comes from the next section title padding-top (same as Partner Use Cases). */ #content-area .tut-hub-section { display: flex; flex-direction: column; min-width: 0; margin: 0; } #content-area .tut-hub-section-title { margin: 0 !important; padding: 0 0 0.85rem; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.3 !important; color: var(--tut-main) !important; } /* Featured: same top rhythm as first Use Cases board section */ #content-area .tut-hub-section[id^='featured-'] > .tut-hub-section-title { padding-top: 0.5rem; } /* All Tutorials / All Cookbooks: same top rhythm as Partner Use Cases */ #content-area .tut-hub-section[id^='all-'] > .tut-hub-section-title { padding-top: 2rem; } #content-area .tut-hub-section-lead { display: block !important; margin: -0.15rem 0 1.15rem !important; max-width: min(40rem, 100%); font-size: 0.9375rem; line-height: 1.55; font-weight: 500; color: var(--tut-text-mid); } #content-area .tut-hub-filter-note { margin: 0 0 0.85rem !important; font-size: 0.875rem; color: var(--tut-text-low); } #content-area .tut-hub-card-grid.hp-io-method-grid { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.35rem; align-items: stretch; } #content-area .tut-hub-card-grid.hp-io-method-grid a.hp-io-method-card.tut-hub-method-card { height: 100%; } #content-area .tut-hub-card-grid[data-tut-all-grid] .hp-io-method-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.35em * 2); } #content-area .tut-hub-card-grid[data-tut-all-grid] .hp-io-method-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.5em * 2); } /* Other / Available promo grids: 2-up (hub all-list keeps 3 via data-tut-all-grid) */ #content-area .tut-hub-card-grid.hp-io-method-grid:not([data-tut-all-grid]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 980px) { #content-area .tut-hub-card-grid.hp-io-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #content-area .tut-hub-card-grid.hp-io-method-grid, #content-area .tut-hub-card-grid.hp-io-method-grid:not([data-tut-all-grid]) { grid-template-columns: minmax(0, 1fr); } } /* Hide extras until Load more reveals them in batches of 4 ([data-tut-shown]). * data-tut-collapsed is set in MDX on first paint (same as tutorials hub). */ #content-area .tut-hub-card-grid[data-tut-collapsed] [data-tut-extra]:not([data-tut-shown]) { display: none !important; } #content-area .tut-hub-wrap [data-tut-load-more][hidden] { display: none !important; } /* Hub + Other/Available tutorial link cards (media + foot; not hero + Start button) */ #content-area a.hp-io-method-card.tut-hub-method-card { display: grid; grid-template-rows: 1fr 1fr; /* normal: 50% media / 50% body */ grid-template-columns: minmax(0, 1fr); text-decoration: none !important; color: inherit !important; border-radius: 12px; overflow: hidden; isolation: isolate; min-height: 24rem; transition: box-shadow 0.15s ease, transform 0.15s ease; } #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card { grid-template-rows: 3fr 2fr; /* featured: 60% media / 40% body */ min-height: 32rem; } #content-area a.hp-io-method-card.tut-hub-method-card:hover { border-color: rgba(111, 84, 16, 0.14); box-shadow: 0 8px 22px rgba(40, 39, 37, 0.12); transform: translateY(-1px); } html.dark #content-area a.hp-io-method-card.tut-hub-method-card:hover, [data-theme='dark'] #content-area a.hp-io-method-card.tut-hub-method-card:hover { border-color: rgba(255, 225, 72, 0.14); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } /* * White body sits above the window and hides its bottom edge * (Claude Academy tuck — window is not a floating 4-edge card). */ #content-area a.hp-io-method-card.tut-hub-method-card > .hp-io-method-card-body { position: relative; z-index: 2; grid-row: 2; min-height: 0; overflow: hidden; border-radius: 0; background: #ffffff; } html.dark #content-area a.hp-io-method-card.tut-hub-method-card > .hp-io-method-card-body, [data-theme='dark'] #content-area a.hp-io-method-card.tut-hub-method-card > .hp-io-method-card-body { background: #1c1917; } #content-area .tut-hub-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.55rem; } #content-area .tut-hub-card-badges .hp-wn-badge { margin: 0; } /* Cookbooks hub: surface badges match yellow workflow pills (shape/type), tinted by surface */ #content-area .cookbook-hub-badge-surface { align-items: center; align-self: flex-start; border: none !important; border-radius: 3px !important; display: inline-flex !important; font-size: 0.6875rem !important; font-weight: 750 !important; justify-content: center; letter-spacing: 0.09em !important; line-height: 1.1 !important; margin: 0 !important; padding: 0.24rem 0.55rem !important; text-transform: uppercase; white-space: nowrap; } #content-area .cookbook-hub-badge-surface::before { content: none !important; display: none !important; } #content-area .cookbook-hub-badge-surface--api { background: #dbeafe !important; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.22) !important; color: #1e3a8a !important; } #content-area .cookbook-hub-badge-surface--sdk { background: #d1fae5 !important; box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.22) !important; color: #065f46 !important; } #content-area .cookbook-hub-badge-surface--tutorial { background: #ede9fe !important; box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.22) !important; color: #5b21b6 !important; } html.dark #content-area .cookbook-hub-badge-surface--api, [data-theme='dark'] #content-area .cookbook-hub-badge-surface--api { background: rgba(59, 130, 246, 0.22) !important; box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35) !important; color: #bfdbfe !important; } html.dark #content-area .cookbook-hub-badge-surface--sdk, [data-theme='dark'] #content-area .cookbook-hub-badge-surface--sdk { background: rgba(16, 185, 129, 0.22) !important; box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.35) !important; color: #a7f3d0 !important; } html.dark #content-area .cookbook-hub-badge-surface--tutorial, [data-theme='dark'] #content-area .cookbook-hub-badge-surface--tutorial { background: rgba(139, 92, 246, 0.22) !important; box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.35) !important; color: #ddd6fe !important; } #content-area .cookbook-hub-featured-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 2rem; align-items: stretch; width: 100%; } #content-area .cookbook-hub-featured-col { display: flex; flex-direction: column; min-width: 0; } #content-area .cookbook-hub-col-title { margin: 0 0 0.85rem !important; padding: 0 !important; } #content-area .cookbook-hub-featured-list { display: flex; flex-direction: column; gap: 0.85rem; } /* Featured list cards: content-sized on mobile (no flex-shrink collapse) */ #content-area a.cookbook-hub-list-card { display: flex; flex-direction: column; gap: 0.35rem; flex: 0 0 auto; padding: 1.15rem 1.25rem 1.15rem; border-radius: 16px; border: 1px solid #c4c4c8 !important; background: #f2f2f0 !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; color: inherit !important; transition: background-color 0.15s ease, border-color 0.15s ease; overflow: visible; } /* Desktop: stretch list beside spotlight; must follow base flex: 0 0 auto */ @media (min-width: 900px) { #content-area .cookbook-hub-featured-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } #content-area .cookbook-hub-featured-col { min-height: 28rem; height: 100%; } #content-area .cookbook-hub-featured-list { flex: 1 1 auto; min-height: 0; } #content-area a.cookbook-hub-list-card { flex: 1 1 0; min-height: 0; } } html.dark #content-area a.cookbook-hub-list-card, [data-theme='dark'] #content-area a.cookbook-hub-list-card { background: #2a2926 !important; border-color: #4a4640 !important; } #content-area a.cookbook-hub-list-card:hover, #content-area a.cookbook-hub-list-card:focus, #content-area a.cookbook-hub-list-card:focus-visible { border-color: #a8a8ae !important; background: #ebebe8 !important; box-shadow: none !important; transform: none !important; outline: none !important; } html.dark #content-area a.cookbook-hub-list-card:hover, html.dark #content-area a.cookbook-hub-list-card:focus, html.dark #content-area a.cookbook-hub-list-card:focus-visible, [data-theme='dark'] #content-area a.cookbook-hub-list-card:hover, [data-theme='dark'] #content-area a.cookbook-hub-list-card:focus, [data-theme='dark'] #content-area a.cookbook-hub-list-card:focus-visible { border-color: #524e48 !important; background: #32312e !important; box-shadow: none !important; transform: none !important; } #content-area .cookbook-hub-list-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; } #content-area .cookbook-hub-list-card-title { margin: 0 !important; font-size: 0.975rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.012em; color: var(--suki-light-text) !important; } html.dark #content-area .cookbook-hub-list-card-title, [data-theme='dark'] #content-area .cookbook-hub-list-card-title { color: var(--suki-dark-text) !important; } #content-area .cookbook-hub-list-card-desc { margin: 0.45rem 0 0 !important; font-size: 0.875rem; line-height: 1.5; color: var(--suki-light-text-muted); } html.dark #content-area .cookbook-hub-list-card-desc, [data-theme='dark'] #content-area .cookbook-hub-list-card-desc { color: var(--suki-dark-text-muted); } #content-area .cookbook-hub-list-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; margin-top: auto; padding-top: 1.1rem; } #content-area .cookbook-hub-list-card-foot .tut-hub-card-foot-meta { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; } #content-area .cookbook-hub-list-card-foot .cookbook-hub-card-cat { margin: 0 !important; flex-shrink: 0; } #content-area .cookbook-hub-list-card-foot .tut-hub-lang-icons { justify-content: flex-end; margin: 0; } /* * Featured tutorial: art on top (~60%), body below with tags/title/foot. * Must beat tut-hub-method-card grid + cookbook-hub-art-card flex. */ #content-area .cookbook-hub-wrap a.cookbook-hub-spotlight-card.cookbook-hub-art-card, #content-area .cookbook-hub-wrap a.cookbook-hub-spotlight-card { display: flex !important; flex-direction: column !important; grid-template-rows: none !important; flex: 1 1 auto; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; border-radius: 16px; border: 1px solid #c4c4c8 !important; background: #f2f2f0 !important; box-shadow: none !important; } html.dark #content-area .cookbook-hub-wrap a.cookbook-hub-spotlight-card, [data-theme='dark'] #content-area .cookbook-hub-wrap a.cookbook-hub-spotlight-card { border-color: #4a4640 !important; background: #2a2926 !important; } #content-area .cookbook-hub-spotlight-card .cookbook-hub-card-art { flex: 1 1 auto; align-self: stretch; width: 100%; min-height: 11rem; height: auto; aspect-ratio: auto; overflow: hidden; line-height: 0; background: #fef9dd; } #content-area .cookbook-hub-spotlight-card .cookbook-hub-card-art .cb-art-svg, #content-area .cookbook-hub-spotlight-card .cookbook-hub-card-art svg { display: block; width: 100%; height: 100%; object-fit: cover; } #content-area .cookbook-hub-spotlight-card > .hp-io-method-card-body { position: relative; z-index: 2; display: flex !important; flex-direction: column; flex: 0 0 auto !important; width: 100%; min-height: 0; overflow: visible; gap: 0.45rem; padding: 1.15rem 1.15rem 1.15rem; border-radius: 0; background: #f2f2f0 !important; } html.dark #content-area .cookbook-hub-spotlight-card > .hp-io-method-card-body, [data-theme='dark'] #content-area .cookbook-hub-spotlight-card > .hp-io-method-card-body { background: #2a2926 !important; } #content-area .cookbook-hub-spotlight-card .hp-io-method-card-title { font-size: 1.1rem !important; font-weight: 650 !important; line-height: 1.3 !important; min-height: 0 !important; -webkit-line-clamp: 3; margin-bottom: 0.15rem !important; } #content-area .cookbook-hub-spotlight-card .hp-io-method-card-desc, #content-area .cookbook-hub-spotlight-card .cookbook-hub-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: none; min-height: 0; font-size: 0.875rem; line-height: 1.45; } #content-area .cookbook-hub-spotlight-card .tut-hub-card-foot { margin-top: 0.65rem; padding-top: 0.95rem; border-top: 1px solid rgba(10, 10, 10, 0.14); } html.dark #content-area .cookbook-hub-spotlight-card .tut-hub-card-foot, [data-theme='dark'] #content-area .cookbook-hub-spotlight-card .tut-hub-card-foot { border-top-color: rgba(248, 250, 252, 0.12); } #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-all-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.85rem; } /* Related cookbooks on hub + recipe pages (max 2) */ #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-related-grid], #content-area .cb-recipe-wrap .tut-hub-card-grid[data-cookbook-related-grid], #content-area .tut-hub-card-grid[data-cookbook-related-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.85rem; } /* * Cookbook / related cards: suki.ai art + grey body (same language as Use Cases). * Title-first scan path kept via compact body padding below. */ #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, #content-area .tut-hub-card-grid[data-tut-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card { display: flex; flex-direction: column; align-items: stretch; border: 1px solid #c4c4c8; border-radius: 16px; background: #f2f2f0; box-shadow: none; overflow: hidden; isolation: isolate; min-height: 22rem; } html.dark #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, html.dark #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, html.dark #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, html.dark #content-area .tut-hub-card-grid[data-tut-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, [data-theme='dark'] #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, [data-theme='dark'] #content-area .tut-hub-card-grid[data-tut-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card { border-color: #4a4640; background: #2a2926; box-shadow: none; } #content-area .cookbook-hub-wrap .cookbook-hub-card-art, #content-area .cb-recipe-wrap .cookbook-hub-card-art, #content-area [data-cookbook-related-grid] .cookbook-hub-card-art, #content-area .tut-hub-wrap .cookbook-hub-card-art { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 400 / 225; overflow: hidden; line-height: 0; background: #fef9dd; } #content-area .cookbook-hub-wrap .cookbook-hub-card-art .cb-art-svg, #content-area .cookbook-hub-wrap .cookbook-hub-card-art svg, #content-area .cb-recipe-wrap .cookbook-hub-card-art .cb-art-svg, #content-area .cb-recipe-wrap .cookbook-hub-card-art svg, #content-area [data-cookbook-related-grid] .cookbook-hub-card-art .cb-art-svg, #content-area [data-cookbook-related-grid] .cookbook-hub-card-art svg, #content-area .tut-hub-wrap .cookbook-hub-card-art .cb-art-svg, #content-area .tut-hub-wrap .cookbook-hub-card-art svg { display: block; width: 100%; height: 100%; } #content-area .cookbook-hub-wrap .cookbook-hub-card-cats, #content-area .cb-recipe-wrap .cookbook-hub-card-cats, #content-area [data-cookbook-related-grid] .cookbook-hub-card-cats, #content-area .tut-hub-wrap .cookbook-hub-card-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.55rem; margin: 0; align-self: flex-start; } #content-area .cookbook-hub-wrap .cookbook-hub-card-cat, #content-area .cb-recipe-wrap .cookbook-hub-card-cat, #content-area [data-cookbook-related-grid] .cookbook-hub-card-cat, #content-area .tut-hub-wrap .cookbook-hub-card-cat { display: inline-block; align-self: flex-start; padding: 0.28rem 0.5rem; margin: 0; border-radius: 3px; font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.25; color: #0a0a0a !important; background: #ffe148 !important; box-shadow: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } #content-area .cookbook-hub-wrap .cookbook-hub-card-cat--meta, #content-area .cb-recipe-wrap .cookbook-hub-card-cat--meta, #content-area [data-cookbook-related-grid] .cookbook-hub-card-cat--meta, #content-area .tut-hub-wrap .cookbook-hub-card-cat--meta { padding: 0.28rem 0; background: transparent !important; box-shadow: none !important; color: rgba(10, 10, 10, 0.52) !important; font-weight: 650; letter-spacing: 0.05em; } html.dark #content-area .cookbook-hub-wrap .cookbook-hub-card-cat--meta, html.dark #content-area .cb-recipe-wrap .cookbook-hub-card-cat--meta, html.dark #content-area [data-cookbook-related-grid] .cookbook-hub-card-cat--meta, html.dark #content-area .tut-hub-wrap .cookbook-hub-card-cat--meta, [data-theme='dark'] #content-area .cookbook-hub-wrap .cookbook-hub-card-cat--meta, [data-theme='dark'] #content-area .cb-recipe-wrap .cookbook-hub-card-cat--meta, [data-theme='dark'] #content-area [data-cookbook-related-grid] .cookbook-hub-card-cat--meta, [data-theme='dark'] #content-area .tut-hub-wrap .cookbook-hub-card-cat--meta { color: rgba(245, 245, 244, 0.62) !important; } /* Same lift + shadow as shared tut-hub cards (must beat resting box-shadow: none). */ #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card:hover, #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card:hover, #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card:hover, #content-area .tut-hub-card-grid[data-tut-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card:hover { border-color: rgba(111, 84, 16, 0.22); box-shadow: 0 8px 22px rgba(40, 39, 37, 0.12); transform: translateY(-1px); } html.dark #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card:hover, html.dark #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card:hover, html.dark #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card:hover, html.dark #content-area .tut-hub-card-grid[data-tut-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card:hover, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.hp-io-method-card.tut-hub-method-card:hover, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.hp-io-method-card.tut-hub-method-card:hover, [data-theme='dark'] #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card:hover, [data-theme='dark'] #content-area .tut-hub-card-grid[data-tut-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card:hover { border-color: rgba(255, 225, 72, 0.22); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.cookbook-hub-art-card > .hp-io-method-card-body, #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.cookbook-hub-art-card > .hp-io-method-card-body, #content-area .tut-hub-featured-grid a.cookbook-hub-art-card > .hp-io-method-card-body, #content-area .tut-hub-card-grid[data-tut-all-grid] a.cookbook-hub-art-card > .hp-io-method-card-body { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.6rem; padding: 1.35rem 1.2rem 1.3rem; min-height: 0; overflow: hidden; border-radius: 0; background: #f2f2f0 !important; } html.dark #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.cookbook-hub-art-card > .hp-io-method-card-body, html.dark #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.cookbook-hub-art-card > .hp-io-method-card-body, html.dark #content-area .tut-hub-featured-grid a.cookbook-hub-art-card > .hp-io-method-card-body, html.dark #content-area .tut-hub-card-grid[data-tut-all-grid] a.cookbook-hub-art-card > .hp-io-method-card-body, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.cookbook-hub-art-card > .hp-io-method-card-body, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.cookbook-hub-art-card > .hp-io-method-card-body, [data-theme='dark'] #content-area .tut-hub-featured-grid a.cookbook-hub-art-card > .hp-io-method-card-body, [data-theme='dark'] #content-area .tut-hub-card-grid[data-tut-all-grid] a.cookbook-hub-art-card > .hp-io-method-card-body { background: #2a2926 !important; } #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.cookbook-hub-art-card .tut-hub-card-foot, #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.cookbook-hub-art-card .tut-hub-card-foot, #content-area .tut-hub-featured-grid a.cookbook-hub-art-card .tut-hub-card-foot, #content-area .tut-hub-card-grid[data-tut-all-grid] a.cookbook-hub-art-card .tut-hub-card-foot { margin-top: auto; padding-top: 1.05rem; border-top: 1px solid rgba(10, 10, 10, 0.14); } html.dark #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.cookbook-hub-art-card .tut-hub-card-foot, html.dark #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.cookbook-hub-art-card .tut-hub-card-foot, html.dark #content-area .tut-hub-featured-grid a.cookbook-hub-art-card .tut-hub-card-foot, html.dark #content-area .tut-hub-card-grid[data-tut-all-grid] a.cookbook-hub-art-card .tut-hub-card-foot, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-all-grid] a.cookbook-hub-art-card .tut-hub-card-foot, [data-theme='dark'] #content-area .tut-hub-card-grid[data-cookbook-related-grid] a.cookbook-hub-art-card .tut-hub-card-foot, [data-theme='dark'] #content-area .tut-hub-featured-grid a.cookbook-hub-art-card .tut-hub-card-foot, [data-theme='dark'] #content-area .tut-hub-card-grid[data-tut-all-grid] a.cookbook-hub-art-card .tut-hub-card-foot { border-top-color: rgba(248, 250, 252, 0.12); } #content-area .tut-hub-card-grid[data-cookbook-all-grid] .hp-io-method-card-title, #content-area .tut-hub-card-grid[data-cookbook-related-grid] .hp-io-method-card-title { font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.015em; margin-bottom: 0.3rem !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.35em * 2); } #content-area .tut-hub-card-grid[data-cookbook-all-grid] .hp-io-method-card-desc, #content-area .tut-hub-card-grid[data-cookbook-related-grid] .hp-io-method-card-desc { margin-top: 0.15rem !important; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.5em * 2); } #content-area .tut-hub-card-grid[data-cookbook-all-grid] .tut-hub-card-badges, #content-area .tut-hub-card-grid[data-cookbook-related-grid] .tut-hub-card-badges { margin: 0; } #content-area .cookbook-hub-wrap .cookbook-hub-card-desc, #content-area .cb-recipe-wrap .cookbook-hub-card-desc, #content-area [data-cookbook-related-grid] .cookbook-hub-card-desc, #content-area .tut-hub-wrap .cookbook-hub-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.45; max-height: 2.9em; margin: 0; font-size: 0.875rem; color: var(--suki-light-text-muted); } html.dark #content-area .cookbook-hub-wrap .cookbook-hub-card-desc, html.dark #content-area .cb-recipe-wrap .cookbook-hub-card-desc, html.dark #content-area [data-cookbook-related-grid] .cookbook-hub-card-desc, html.dark #content-area .tut-hub-wrap .cookbook-hub-card-desc, [data-theme='dark'] #content-area .cookbook-hub-wrap .cookbook-hub-card-desc, [data-theme='dark'] #content-area .cb-recipe-wrap .cookbook-hub-card-desc, [data-theme='dark'] #content-area [data-cookbook-related-grid] .cookbook-hub-card-desc, [data-theme='dark'] #content-area .tut-hub-wrap .cookbook-hub-card-desc { color: var(--suki-dark-text-muted); } @media (max-width: 1200px) { #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-all-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.6rem; } } @media (max-width: 980px) { #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-all-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-all-grid], #content-area .cookbook-hub-wrap .tut-hub-card-grid[data-cookbook-related-grid] { grid-template-columns: minmax(0, 1fr); } } #content-area .tut-hub-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; margin-top: auto; flex-wrap: nowrap; } #content-area .tut-hub-card-foot-meta { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; } #content-area .tut-hub-level { font-size: 13px; line-height: 1.4; font-weight: 500; color: #6b6966; text-transform: none; letter-spacing: 0; } html.dark #content-area .tut-hub-level, [data-theme='dark'] #content-area .tut-hub-level { color: var(--suki-dark-text-muted); } #content-area .tut-hub-lang-icons { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.55rem; margin: 0; flex-shrink: 0; } #content-area .tut-hub-lang-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; color: #6f5410; background: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; } #content-area .tut-hub-lang-icon svg { width: 100%; height: 100%; display: block; } html.dark #content-area .tut-hub-lang-icon, [data-theme='dark'] #content-area .tut-hub-lang-icon { color: #ffe148; } /* Tutorials hub art cards: beat legacy media grid (50/50 + 32rem featured). */ #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card, #content-area .tut-hub-card-grid[data-tut-all-grid] a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card { display: flex !important; flex-direction: column; grid-template-rows: none; min-height: 22rem; } #content-area .tut-hub-featured-grid a.hp-io-method-card.tut-hub-method-card.cookbook-hub-art-card { min-height: 26rem; } #content-area .tut-hub-featured-grid { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (min-width: 520px) { #content-area .tut-hub-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; } } /* * Tutorial / cookbook card media: pastel band + window tucked under body. * Stage hangs below the media row; white body (z-index 2) covers the window bottom. */ #content-area .tut-hub-card-media { display: block; position: relative; grid-row: 1; width: calc(100% + 2px); max-width: none; margin: -1px -1px 0; padding: 0; overflow: visible !important; line-height: 1.2; aspect-ratio: unset; height: auto; min-height: 0; max-height: none; background: #fcf49e; border: 0; box-sizing: border-box; color: var(--suki-light-text); z-index: 0; } #content-area .tut-hub-card-media--blue { background: #b9dffe; } #content-area .tut-hub-card-media:empty { display: none !important; } /* Keep empty solid plates visible until tut-card-media.js injects the window. */ #content-area .tut-hub-card-media.tut-hub-card-media--solid:empty { display: block !important; } #content-area .tut-hub-card-media.tut-hub-card-media--shot { display: block; background: #f3f0e6; padding: 0; overflow: hidden !important; } #content-area .tut-hub-card-media.tut-hub-card-media--shot::before { content: none; display: none; } #content-area .tut-hub-card-media.tut-hub-card-media--shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border: 0; } #content-area .tut-hub-card-media::after { content: none; } /* Stage extends below pastel so the window can sit under the white body */ #content-area .tut-hub-card-media-stage { position: absolute; left: 0; right: 0; top: 0; bottom: -3.5rem; display: flex; align-items: flex-end; justify-content: center; padding: 1.25rem 1.15rem 0; box-sizing: border-box; overflow: visible; pointer-events: none; } /* * Claude Academy tuck: top corners only; bottom edge hidden under white body. */ #content-area .tut-hub-card-media-window { display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; width: 78%; max-width: 20rem; height: calc(100% - 1.25rem); min-height: 0; max-height: none; flex: 0 0 auto; align-self: center; background: #ffffff; border: 1px solid rgba(40, 39, 37, 0.08); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 1px 2px rgba(40, 39, 37, 0.05), 0 18px 36px rgba(40, 39, 37, 0.14); transform-origin: bottom center; transition: transform 0.3s ease; overflow: hidden; color: var(--suki-light-text); margin: 0; padding-bottom: 3.25rem; pointer-events: auto; } #content-area .tut-hub-featured-grid .tut-hub-card-media-stage { bottom: -4rem; padding: 1.5rem 1.35rem 0; } #content-area .tut-hub-featured-grid .tut-hub-card-media-window { width: 72%; max-width: 24rem; height: calc(100% - 1.5rem); padding-bottom: 3.75rem; } #content-area a.hp-io-method-card.tut-hub-method-card:hover .tut-hub-card-media-window { transform: scale(1.02); } #content-area .tut-hub-card-media-chrome { display: flex; align-items: center; gap: 0.28rem; padding: 0.42rem 0.55rem 0.2rem; flex: 0 0 auto; } #content-area .tut-hub-card-media-chrome span { display: block; width: 0.38rem; height: 0.38rem; border-radius: 999px; background: #d4d4d8; flex: 0 0 auto; } #content-area .tut-hub-card-media-chrome span:nth-child(1) { background: #f87171; } #content-area .tut-hub-card-media-chrome span:nth-child(2) { background: #fbbf24; } #content-area .tut-hub-card-media-chrome span:nth-child(3) { background: #4ade80; } /* Contextual mini-UI graphics — fill the fixed window; clip overflow */ #content-area .tut-hub-ui { display: flex; flex-direction: column; justify-content: center; gap: 0.28rem; padding: 0.1rem 0.55rem 0.2rem; flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5625rem; line-height: 1.25; color: rgba(40, 39, 37, 0.72); } #content-area .tut-hub-ui-row { display: flex; align-items: center; gap: 0.35rem; } #content-area .tut-hub-ui-live { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18); flex: 0 0 auto; } #content-area .tut-hub-ui-label { font-family: inherit; font-size: 0.5625rem; font-weight: 650; letter-spacing: 0.02em; color: rgba(40, 39, 37, 0.55); text-transform: uppercase; } #content-area .tut-hub-ui-wave { display: flex; align-items: flex-end; justify-content: center; gap: 0.22rem; height: 1.85rem; margin: 0.15rem 0 0.2rem; } #content-area .tut-hub-ui-wave span { display: block; width: 0.28rem; border-radius: 999px; background: currentColor; opacity: 0.85; } #content-area .tut-hub-ui-wave span:nth-child(1) { height: 35%; } #content-area .tut-hub-ui-wave span:nth-child(2) { height: 62%; } #content-area .tut-hub-ui-wave span:nth-child(3) { height: 100%; } #content-area .tut-hub-ui-wave span:nth-child(4) { height: 48%; } #content-area .tut-hub-ui-wave span:nth-child(5) { height: 78%; } #content-area .tut-hub-ui-wave span:nth-child(6) { height: 40%; } #content-area .tut-hub-ui-wave span:nth-child(7) { height: 58%; } #content-area .tut-hub-ui-note { display: flex; flex-direction: column; gap: 0.22rem; } #content-area .tut-hub-ui-note span { display: block; height: 0.28rem; border-radius: 3px; background: rgba(40, 39, 37, 0.1); } #content-area .tut-hub-ui-note span:nth-child(1) { width: 88%; } #content-area .tut-hub-ui-note span:nth-child(2) { width: 72%; } #content-area .tut-hub-ui-note span:nth-child(3) { width: 54%; } /* Go backend: terminal fills chrome (no inset that reads as a smaller window) */ #content-area .tut-hub-ui--go { background: #171412; color: #e7e5e4; border-radius: 0; padding: 0.55rem 0.65rem 0.65rem; gap: 0.28rem; margin: 0; flex: 1 1 auto; min-height: 0; justify-content: center; } #content-area .tut-hub-ui-terminal { display: flex; gap: 0.35rem; align-items: baseline; margin-bottom: 0.15rem; } #content-area .tut-hub-ui-prompt { color: #4ade80; font-weight: 700; } #content-area .tut-hub-ui-cmd { color: #fafaf9; } #content-area .tut-hub-ui-term-line { color: #a8a29e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content-area .tut-hub-ui-term-ok { color: #86efac; } #content-area .tut-hub-ui-term-mute { color: #78716c; } /* Dictation stream: mic + transcript */ #content-area .tut-hub-ui--dictation { gap: 0.4rem; } #content-area .tut-hub-ui-mic-wrap { display: flex; justify-content: center; padding: 0.15rem 0 0.1rem; } #content-area .tut-hub-card-media-icon.tut-hub-card-media-icon--inline { display: block; width: 1.35rem; height: 1.35rem; margin: 0; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #content-area .tut-hub-scene--dictation .tut-hub-card-media-icon--inline, #content-area .tut-hub-card-media--dictation .tut-hub-card-media-icon--inline { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M12 15.25a3.25 3.25 0 0 0 3.25-3.25V6.75a3.25 3.25 0 0 0-6.5 0v5.25A3.25 3.25 0 0 0 12 15.25Z'/%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M7.75 11.5a4.25 4.25 0 0 0 8.5 0M12 15.75v3.5M9.5 19.25h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M12 15.25a3.25 3.25 0 0 0 3.25-3.25V6.75a3.25 3.25 0 0 0-6.5 0v5.25A3.25 3.25 0 0 0 12 15.25Z'/%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M7.75 11.5a4.25 4.25 0 0 0 8.5 0M12 15.75v3.5M9.5 19.25h5'/%3E%3C/svg%3E"); } #content-area .tut-hub-ui-transcript { display: flex; flex-direction: column; gap: 0.28rem; background: rgba(40, 39, 37, 0.04); border-radius: 6px; padding: 0.4rem 0.45rem; } #content-area .tut-hub-ui-t-line { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5625rem; color: rgba(40, 39, 37, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content-area .tut-hub-ui-t-partial { color: rgba(40, 39, 37, 0.85); font-weight: 600; } /* Form fields */ #content-area .tut-hub-ui--form { gap: 0.38rem; padding-top: 0.35rem; } #content-area .tut-hub-ui-field { display: flex; align-items: center; gap: 0.4rem; } #content-area .tut-hub-ui-check { width: 0.7rem; height: 0.7rem; border-radius: 999px; background: #22c55e; box-shadow: inset 0 0 0 1.5px #fff; flex: 0 0 auto; position: relative; } #content-area .tut-hub-ui-check::after { content: ''; position: absolute; left: 0.18rem; top: 0.12rem; width: 0.22rem; height: 0.35rem; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } #content-area .tut-hub-ui-box { width: 0.7rem; height: 0.7rem; border-radius: 3px; border: 1.5px solid rgba(40, 39, 37, 0.22); flex: 0 0 auto; } #content-area .tut-hub-ui-field-fill { display: block; height: 0.55rem; flex: 1 1 auto; border-radius: 4px; background: rgba(40, 39, 37, 0.08); } #content-area .tut-hub-ui-field-fill--short { max-width: 55%; } #content-area .tut-hub-ui-field-fill--mid { max-width: 70%; } /* Web SDK: app + assistant panel */ #content-area .tut-hub-ui--sdk { padding-top: 0.25rem; } #content-area .tut-hub-ui-sdk-shell { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.35rem; min-height: 3.1rem; } #content-area .tut-hub-ui-sdk-main, #content-area .tut-hub-ui-sdk-panel { border-radius: 6px; background: rgba(40, 39, 37, 0.05); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; } #content-area .tut-hub-ui-sdk-panel { background: #fcf49e; border: 1px solid rgba(111, 84, 16, 0.12); } #content-area .tut-hub-ui-sdk-main span, #content-area .tut-hub-ui-sdk-panel span:not(.tut-hub-ui-live) { display: block; height: 0.28rem; border-radius: 3px; background: rgba(40, 39, 37, 0.12); } #content-area .tut-hub-ui-sdk-main span:nth-child(1) { width: 70%; } #content-area .tut-hub-ui-sdk-main span:nth-child(2) { width: 90%; } #content-area .tut-hub-ui-sdk-panel span:nth-child(2) { width: 85%; margin-top: 0.15rem; } #content-area .tut-hub-ui-sdk-panel span:nth-child(3) { width: 60%; } /* Headless hooks */ #content-area .tut-hub-ui--headless { gap: 0.28rem; padding-top: 0.3rem; } #content-area .tut-hub-ui-hook { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5625rem; padding: 0.32rem 0.45rem; border-radius: 5px; background: rgba(40, 39, 37, 0.05); color: rgba(40, 39, 37, 0.65); } #content-area .tut-hub-ui-hook--on { background: #fcf49e; color: #292524; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(111, 84, 16, 0.14); } /* Chart field dictation */ #content-area .tut-hub-ui--chart { gap: 0.3rem; padding-top: 0.25rem; } #content-area .tut-hub-ui-chart-label { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(40, 39, 37, 0.45); } #content-area .tut-hub-ui-chart-field { position: relative; border: 1px solid rgba(40, 39, 37, 0.14); border-radius: 6px; padding: 0.45rem 1.7rem 0.45rem 0.45rem; min-height: 2.35rem; background: #fff; } #content-area .tut-hub-ui-mic-fab { position: absolute; right: 0.35rem; bottom: 0.35rem; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: #171412; box-shadow: 0 0 0 2px #b9dffe; } #content-area .tut-hub-ui-mic-fab::after { content: ''; position: absolute; inset: 0.22rem; background: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 15.25a3.25 3.25 0 0 0 3.25-3.25V6.75a3.25 3.25 0 0 0-6.5 0v5.25A3.25 3.25 0 0 0 12 15.25Z'/%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7.75 11.5a4.25 4.25 0 0 0 8.5 0M12 15.75v3.5M9.5 19.25h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 15.25a3.25 3.25 0 0 0 3.25-3.25V6.75a3.25 3.25 0 0 0-6.5 0v5.25A3.25 3.25 0 0 0 12 15.25Z'/%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7.75 11.5a4.25 4.25 0 0 0 8.5 0M12 15.75v3.5M9.5 19.25h5'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Form → EHR handoff */ #content-area .tut-hub-ui--ehr { flex-direction: row; align-items: center; gap: 0.3rem; padding-top: 0.35rem; } #content-area .tut-hub-ui-ehr-card { flex: 1 1 0; border-radius: 6px; background: rgba(40, 39, 37, 0.05); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; } #content-area .tut-hub-ui-ehr-card span:not(.tut-hub-ui-check):not(.tut-hub-ui-ehr-tag) { display: block; height: 0.25rem; border-radius: 3px; background: rgba(40, 39, 37, 0.12); width: 80%; } #content-area .tut-hub-ui-ehr-card--dest { background: #b9dffe; } #content-area .tut-hub-ui-ehr-tag { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5rem; font-weight: 750; letter-spacing: 0.06em; color: #1e3a8a; } #content-area .tut-hub-ui-ehr-arrow { width: 0.7rem; height: 0.7rem; flex: 0 0 auto; background: currentColor; opacity: 0.35; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* PBC problem list */ #content-area .tut-hub-ui--pbc { gap: 0.28rem; padding-top: 0.25rem; } #content-area .tut-hub-ui-pbc-row { display: flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.4rem; border-radius: 5px; background: rgba(40, 39, 37, 0.05); } #content-area .tut-hub-ui-pbc-dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #6f5410; flex: 0 0 auto; } #content-area .tut-hub-ui-pbc-name { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5625rem; font-weight: 600; color: rgba(40, 39, 37, 0.78); } #content-area .tut-hub-ui-pbc-note { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.15rem 0.4rem 0; } #content-area .tut-hub-ui-pbc-note span { display: block; height: 0.25rem; border-radius: 3px; background: rgba(40, 39, 37, 0.1); } #content-area .tut-hub-ui-pbc-note span:nth-child(1) { width: 90%; } #content-area .tut-hub-ui-pbc-note span:nth-child(2) { width: 65%; } /* Webhook events */ #content-area .tut-hub-ui--webhook { gap: 0.28rem; padding-top: 0.25rem; } #content-area .tut-hub-ui-wh-row { display: flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.4rem; border-radius: 5px; background: rgba(40, 39, 37, 0.05); } #content-area .tut-hub-ui-wh-row--mute { opacity: 0.65; } #content-area .tut-hub-ui-wh-bell { width: 0.7rem; height: 0.7rem; flex: 0 0 auto; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M6.75 9.5a5.25 5.25 0 0 1 10.5 0c0 3.25 1.25 4.5 1.25 4.5H5.5s1.25-1.25 1.25-4.5Z'/%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M10 17.75a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M6.75 9.5a5.25 5.25 0 0 1 10.5 0c0 3.25 1.25 4.5 1.25 4.5H5.5s1.25-1.25 1.25-4.5Z'/%3E%3Cpath stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M10 17.75a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #content-area .tut-hub-ui-wh-text { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; color: rgba(40, 39, 37, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content-area .tut-hub-ui-wh-row .tut-hub-ui-check { width: 0.6rem; height: 0.6rem; } /* Cookbook scenes */ #content-area .tut-hub-ui--share { gap: 0.4rem; padding-top: 0.3rem; } #content-area .tut-hub-ui-share-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; font-weight: 650; color: rgba(40, 39, 37, 0.55); letter-spacing: 0.02em; } #content-area .tut-hub-ui-share-row { display: flex; align-items: center; gap: 0.3rem; } #content-area .tut-hub-ui-share-chip { flex: 1 1 0; text-align: center; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5rem; font-weight: 650; padding: 0.35rem 0.25rem; border-radius: 5px; background: rgba(40, 39, 37, 0.06); color: rgba(40, 39, 37, 0.65); } #content-area .tut-hub-ui-share-chip--on { background: #fcf49e; color: #292524; box-shadow: inset 0 0 0 1px rgba(111, 84, 16, 0.14); } #content-area .tut-hub-ui--conflict { gap: 0.4rem; padding-top: 0.3rem; } #content-area .tut-hub-ui-conflict-banner { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.5rem; font-weight: 650; padding: 0.35rem 0.45rem; border-radius: 5px; background: rgba(239, 68, 68, 0.12); color: #991b1b; } #content-area .tut-hub-ui-conflict-steps { display: flex; flex-direction: column; gap: 0.22rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; color: rgba(40, 39, 37, 0.6); } #content-area .tut-hub-ui--note-fetch { gap: 0.4rem; padding-top: 0.35rem; } #content-area .tut-hub-ui-note-id { align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; font-weight: 700; padding: 0.22rem 0.4rem; border-radius: 4px; background: #fcf49e; color: #292524; } #content-area .tut-hub-ui--poll { gap: 0.35rem; padding-top: 0.4rem; } #content-area .tut-hub-ui-poll-bar { height: 0.4rem; border-radius: 999px; background: rgba(40, 39, 37, 0.08); overflow: hidden; } #content-area .tut-hub-ui-poll-fill { display: block; width: 78%; height: 100%; border-radius: 999px; background: #22c55e; } #content-area .tut-hub-ui-poll-status { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; font-weight: 650; color: #15803d; } #content-area .tut-hub-ui--auth { gap: 0.28rem; padding-top: 0.3rem; } #content-area .tut-hub-ui-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; padding: 0.3rem 0.4rem; border-radius: 5px; background: rgba(40, 39, 37, 0.05); } #content-area .tut-hub-ui-auth-row--mute { opacity: 0.55; } #content-area .tut-hub-ui-auth-key { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; color: rgba(40, 39, 37, 0.7); } #content-area .tut-hub-ui--ws { gap: 0.28rem; padding: 0.4rem 0.5rem 0.35rem; margin-top: 0.15rem; border-radius: 6px; background: #171412; color: #e7e5e4; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.5rem; } #content-area .tut-hub-ui-ws-proto { color: #a8a29e; font-size: 0.4375rem; text-transform: uppercase; letter-spacing: 0.04em; } #content-area .tut-hub-ui-ws-line { color: #fafaf9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content-area .tut-hub-ui--end { flex-direction: row; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.35rem 0.45rem; width: 100%; box-sizing: border-box; flex: 1 1 auto; min-height: 0; } #content-area .tut-hub-ui--ws { margin: 0; flex: 1 1 auto; min-height: 0; justify-content: center; } #content-area .tut-hub-ui-end-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.625rem; font-weight: 700; padding: 0.55rem 0.7rem; border-radius: 6px; background: #171412; color: #fafaf9; } #content-area .tut-hub-ui-end-chip--rest { background: #fcf49e; color: #292524; box-shadow: inset 0 0 0 1px rgba(111, 84, 16, 0.14); } html.dark #content-area .tut-hub-ui-share-id, [data-theme='dark'] #content-area .tut-hub-ui-share-id, html.dark #content-area .tut-hub-ui-auth-key, [data-theme='dark'] #content-area .tut-hub-ui-auth-key, html.dark #content-area .tut-hub-ui-conflict-steps, [data-theme='dark'] #content-area .tut-hub-ui-conflict-steps { color: rgba(245, 245, 244, 0.7); } html.dark #content-area .tut-hub-ui-share-chip, [data-theme='dark'] #content-area .tut-hub-ui-share-chip, html.dark #content-area .tut-hub-ui-auth-row, [data-theme='dark'] #content-area .tut-hub-ui-auth-row { background: rgba(245, 245, 244, 0.08); color: rgba(245, 245, 244, 0.75); } html.dark #content-area .tut-hub-ui-conflict-banner, [data-theme='dark'] #content-area .tut-hub-ui-conflict-banner { background: rgba(239, 68, 68, 0.2); color: #fecaca; } html.dark #content-area .tut-hub-card-media-window, [data-theme='dark'] #content-area .tut-hub-card-media-window { background: #292524; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.5); color: #f5f5f4; } html.dark #content-area .tut-hub-card-media-chrome span, [data-theme='dark'] #content-area .tut-hub-card-media-chrome span { background: #57534e; } html.dark #content-area .tut-hub-card-media-chrome span:nth-child(1), [data-theme='dark'] #content-area .tut-hub-card-media-chrome span:nth-child(1) { background: #f87171; } html.dark #content-area .tut-hub-card-media-chrome span:nth-child(2), [data-theme='dark'] #content-area .tut-hub-card-media-chrome span:nth-child(2) { background: #fbbf24; } html.dark #content-area .tut-hub-card-media-chrome span:nth-child(3), [data-theme='dark'] #content-area .tut-hub-card-media-chrome span:nth-child(3) { background: #4ade80; } html.dark #content-area .tut-hub-ui, [data-theme='dark'] #content-area .tut-hub-ui { color: rgba(245, 245, 244, 0.72); } html.dark #content-area .tut-hub-ui-label, [data-theme='dark'] #content-area .tut-hub-ui-label, html.dark #content-area .tut-hub-ui-t-line, [data-theme='dark'] #content-area .tut-hub-ui-t-line, html.dark #content-area .tut-hub-ui-pbc-name, [data-theme='dark'] #content-area .tut-hub-ui-pbc-name, html.dark #content-area .tut-hub-ui-wh-text, [data-theme='dark'] #content-area .tut-hub-ui-wh-text, html.dark #content-area .tut-hub-ui-hook, [data-theme='dark'] #content-area .tut-hub-ui-hook { color: rgba(245, 245, 244, 0.7); } html.dark #content-area .tut-hub-ui-note span, [data-theme='dark'] #content-area .tut-hub-ui-note span, html.dark #content-area .tut-hub-ui-field-fill, [data-theme='dark'] #content-area .tut-hub-ui-field-fill, html.dark #content-area .tut-hub-ui-sdk-main, [data-theme='dark'] #content-area .tut-hub-ui-sdk-main, html.dark #content-area .tut-hub-ui-hook, [data-theme='dark'] #content-area .tut-hub-ui-hook, html.dark #content-area .tut-hub-ui-pbc-row, [data-theme='dark'] #content-area .tut-hub-ui-pbc-row, html.dark #content-area .tut-hub-ui-wh-row, [data-theme='dark'] #content-area .tut-hub-ui-wh-row, html.dark #content-area .tut-hub-ui-ehr-card, [data-theme='dark'] #content-area .tut-hub-ui-ehr-card, html.dark #content-area .tut-hub-ui-transcript, [data-theme='dark'] #content-area .tut-hub-ui-transcript { background: rgba(245, 245, 244, 0.08); } html.dark #content-area .tut-hub-ui-sdk-main span, [data-theme='dark'] #content-area .tut-hub-ui-sdk-main span, html.dark #content-area .tut-hub-ui-sdk-panel span:not(.tut-hub-ui-live), [data-theme='dark'] #content-area .tut-hub-ui-sdk-panel span:not(.tut-hub-ui-live), html.dark #content-area .tut-hub-ui-ehr-card span:not(.tut-hub-ui-check):not(.tut-hub-ui-ehr-tag), [data-theme='dark'] #content-area .tut-hub-ui-ehr-card span:not(.tut-hub-ui-check):not(.tut-hub-ui-ehr-tag), html.dark #content-area .tut-hub-ui-pbc-note span, [data-theme='dark'] #content-area .tut-hub-ui-pbc-note span { background: rgba(245, 245, 244, 0.16); } html.dark #content-area .tut-hub-ui-hook--on, [data-theme='dark'] #content-area .tut-hub-ui-hook--on, html.dark #content-area .tut-hub-ui-sdk-panel, [data-theme='dark'] #content-area .tut-hub-ui-sdk-panel { background: rgba(252, 244, 158, 0.22); color: #fafaf9; } html.dark #content-area .tut-hub-ui-chart-field, [data-theme='dark'] #content-area .tut-hub-ui-chart-field { background: #1c1917; border-color: rgba(255, 255, 255, 0.12); } /* Track badges on tutorial hub cards (Streaming / SDK / Webhooks) */ #content-area .tut-hub-badge-track { align-items: center; align-self: flex-start; border: none !important; border-radius: 3px !important; display: inline-flex !important; font-size: 0.6875rem !important; font-weight: 750 !important; justify-content: center; letter-spacing: 0.09em !important; line-height: 1.1 !important; margin: 0 !important; padding: 0.24rem 0.55rem !important; text-transform: uppercase; white-space: nowrap; } #content-area .tut-hub-badge-track::before { content: none !important; display: none !important; } #content-area .tut-hub-badge-track--streaming { background: #dbeafe !important; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.22) !important; color: #1e3a8a !important; } #content-area .tut-hub-badge-track--sdk { background: #d1fae5 !important; box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.22) !important; color: #065f46 !important; } #content-area .tut-hub-badge-track--webhooks { background: #ede9fe !important; box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.22) !important; color: #5b21b6 !important; } html.dark #content-area .tut-hub-badge-track--streaming, [data-theme='dark'] #content-area .tut-hub-badge-track--streaming { background: rgba(59, 130, 246, 0.22) !important; box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35) !important; color: #bfdbfe !important; } html.dark #content-area .tut-hub-badge-track--sdk, [data-theme='dark'] #content-area .tut-hub-badge-track--sdk { background: rgba(16, 185, 129, 0.22) !important; box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.35) !important; color: #a7f3d0 !important; } html.dark #content-area .tut-hub-badge-track--webhooks, [data-theme='dark'] #content-area .tut-hub-badge-track--webhooks { background: rgba(139, 92, 246, 0.22) !important; box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.35) !important; color: #ddd6fe !important; } @media (max-width: 900px) { #content-area .tut-hub-filter-row.release-notes-filter-dropdowns { flex-wrap: wrap; } #content-area .tut-hub-filter-row .release-notes-filter-search-field { flex: 1 1 100%; } } @media (max-width: 640px) { #content-area .tut-hub-card-foot { flex-wrap: wrap; } } #content-area .hp-wrap.docs-frame-wrap pre, #content-area .hp-wrap.docs-frame-wrap table, #content-area .hp-wrap.docs-frame-wrap .code-block-wrapper, #content-area .hp-wrap.docs-frame-wrap [class*='CodeGroup'], #content-area .hp-wrap.docs-frame-wrap .overflow-x-auto { max-width: 100%; } /* * APIs + SDKs overview hubs: Harness-style hero (doc column + aside with code + meta cards). */ #content-area .hp-wrap.api-overview-wrap .api-overview-hero-page-title { margin-top: 0; margin-bottom: 10px; } /* * Changelogs hub cards (`updates/changelogs.mdx`): data-driven art + API/SDK tones. * Matches cookbook / use-case card language; sync writes version / releases / year. */ #content-area .hp-wrap.release-notes-hp-wrap .cl-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; } @media (max-width: 1000px) { #content-area .hp-wrap.release-notes-hp-wrap .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #content-area .hp-wrap.release-notes-hp-wrap .cl-grid { grid-template-columns: 1fr; } } #content-area .hp-wrap.release-notes-hp-wrap .cl-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #f4f4f4; color: #1b1b1b; text-decoration: none; transition: background-color 0.2s ease; } #content-area .hp-wrap.release-notes-hp-wrap .cl-card:hover { background: #ededed; text-decoration: none; color: #1b1b1b; } #content-area .hp-wrap.release-notes-hp-wrap .cl-card:focus-visible { outline: 2px solid #1b1b1b; outline-offset: 3px; } #content-area .hp-wrap.release-notes-hp-wrap .cl-art { aspect-ratio: 20 / 9; overflow: hidden; } #content-area .hp-wrap.release-notes-hp-wrap .cl-art svg, #content-area .hp-wrap.release-notes-hp-wrap .cl-art-svg { display: block; width: 100%; height: 100%; } #content-area .hp-wrap.release-notes-hp-wrap .cl-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; } #content-area .hp-wrap.release-notes-hp-wrap .cl-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 10px; } #content-area .hp-wrap.release-notes-hp-wrap .cl-tag { background: #fdf49d; color: #1b1b1b; padding: 3px 8px; border-radius: 6px; font-weight: 500; } #content-area .hp-wrap.release-notes-hp-wrap .cl-count { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 6px; border: 1px solid rgba(27, 27, 27, 0.22); font-weight: 500; font-variant-numeric: tabular-nums; color: #1b1b1b; } #content-area .hp-wrap.release-notes-hp-wrap .cl-count svg { width: 12px; height: 12px; } #content-area .hp-wrap.release-notes-hp-wrap .cl-title { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 20px; color: inherit; } #content-area .hp-wrap.release-notes-hp-wrap .cl-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #1b1b1b; padding-top: 14px; font-size: 14.5px; font-weight: 500; } #content-area .hp-wrap.release-notes-hp-wrap .cl-foot svg { width: 16px; height: 16px; transition: transform 0.2s ease; } #content-area .hp-wrap.release-notes-hp-wrap .cl-card:hover .cl-foot svg { transform: translateX(3px); } html.dark #content-area .hp-wrap.release-notes-hp-wrap .cl-card, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .cl-card { background: #232323; color: #f4f4f4; } html.dark #content-area .hp-wrap.release-notes-hp-wrap .cl-card:hover, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .cl-card:hover { background: #2a2a2a; color: #f4f4f4; } html.dark #content-area .hp-wrap.release-notes-hp-wrap .cl-count, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .cl-count { color: #f4f4f4; border-color: rgba(244, 244, 244, 0.28); } html.dark #content-area .hp-wrap.release-notes-hp-wrap .cl-foot, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .cl-foot { border-top-color: #f4f4f4; } html.dark #content-area .hp-wrap.release-notes-hp-wrap .cl-card:focus-visible, [data-theme='dark'] #content-area .hp-wrap.release-notes-hp-wrap .cl-card:focus-visible { outline-color: #fdf49d; } @media (prefers-reduced-motion: reduce) { #content-area .hp-wrap.release-notes-hp-wrap .cl-card, #content-area .hp-wrap.release-notes-hp-wrap .cl-foot svg { transition: none; } } /* 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; } /* Partners overview: integration cards — docs.json palette: primary #6F5410, light #FFE148, dark #494949 */ .hp-io-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 28px 0 48px; align-items: stretch; scroll-margin-top: 6.5rem; } .hp-io-method-card { display: flex; flex-direction: column; min-height: 0; border-radius: 12px; border: 1px solid rgba(111, 84, 16, 0.14); background: #ffffff; overflow: hidden; font-family: inherit; box-shadow: 0 1px 3px rgba(40, 39, 37, 0.05); } html.dark .hp-io-method-card, [data-theme="dark"] .hp-io-method-card { border-color: rgba(255, 225, 72, 0.14); background: #0d0d0d; box-shadow: none; } .hp-io-method-card-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 2px; } .hp-io-method-card-title-row .hp-io-method-card-title { margin: 0; } .hp-io-method-card-hero { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 140px; padding: 32px 24px; background-color: #FFFADE; background-image: radial-gradient(rgba(111, 84, 16, 0.085) 1px, transparent 1px); background-size: 14px 14px; border-bottom: 1px solid rgba(111, 84, 16, 0.1); } html.dark .hp-io-method-card-hero, [data-theme="dark"] .hp-io-method-card-hero { background-color: #1c1b19; background-image: radial-gradient(rgba(255, 225, 72, 0.12) 1px, transparent 1px); border-bottom-color: rgba(255, 225, 72, 0.14); } .hp-io-method-card-hero-icon { display: block; color: #6f5410; flex-shrink: 0; } html.dark .hp-io-method-card-hero-icon, [data-theme="dark"] .hp-io-method-card-hero-icon { color: #ffe148; } .hp-io-method-card-body { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 22px; flex: 1; min-height: 0; background: #ffffff; } html.dark .hp-io-method-card-body, [data-theme="dark"] .hp-io-method-card-body { background: #0d0d0d; } /* Kill Mintlify / prose list bullets anywhere in integration cards */ #content-area .hp-io-method-grid ul, #content-area .hp-io-method-grid ol, #content-area .hp-io-method-card ul, #content-area .hp-io-method-card ol { list-style: none !important; list-style-type: none !important; padding-left: 0 !important; margin-left: 0 !important; } #content-area .hp-io-method-grid ul > li, #content-area .hp-io-method-grid ol > li, #content-area .hp-io-method-card ul > li, #content-area .hp-io-method-card ol > li { list-style: none !important; padding-left: 0 !important; } #content-area .hp-io-method-grid ul > li::before, #content-area .hp-io-method-grid ol > li::before, #content-area .hp-io-method-grid ul > li::marker, #content-area .hp-io-method-card ul > li::before, #content-area .hp-io-method-card ol > li::before, #content-area .hp-io-method-card ul > li::marker { content: none !important; display: none !important; } .hp-io-method-link:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; } html.dark .hp-io-method-link:focus-visible, [data-theme="dark"] .hp-io-method-link:focus-visible { outline-color: #ffe148; } .hp-io-method-card-title { margin: 0; font-family: inherit; font-size: 1.3125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--suki-light-text); } html.dark .hp-io-method-card-title, [data-theme="dark"] .hp-io-method-card-title { color: var(--suki-dark-text); } .hp-io-method-card-desc { margin: 0; font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--suki-light-text-body); } html.dark .hp-io-method-card-desc, [data-theme="dark"] .hp-io-method-card-desc { color: var(--suki-dark-text-body); } .hp-io-method-card-desc strong { color: var(--suki-light-text); font-weight: 600; } html.dark .hp-io-method-card-desc strong, [data-theme="dark"] .hp-io-method-card-desc strong { color: var(--suki-dark-text); } /* Card options: no list markers (Mintlify prose can style ul/li; we use nav + anchors only) */ .hp-io-method-link-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; list-style: none !important; padding: 0 !important; margin-left: 0 !important; } #content-area .hp-io-method-link-stack::before, #content-area .hp-io-method-link-stack::after { content: none !important; } /* Kill Mintlify/prose default link pills (especially first row / Quickstart); hovers use brand colors from docs.json */ #content-area .hp-io-method-link-stack > a.hp-io-method-link { background-color: transparent !important; box-shadow: none !important; } #content-area .hp-io-method-link-stack > a.hp-io-method-link:hover { color: #5a4510 !important; background-color: rgba(255, 225, 72, 0.28) !important; box-shadow: 0 0 0 1px rgba(111, 84, 16, 0.16) !important; border-radius: 8px !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; border-radius: 8px !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: 8px; 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 highlight + arrow */ .hp-io-method-link::before { content: none !important; } .hp-io-method-link::after { content: "\2192"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 0.95rem; font-weight: 500; line-height: 1; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .hp-io-method-link:hover { color: #5a4510; background: rgba(255, 225, 72, 0.28); box-shadow: 0 0 0 1px rgba(111, 84, 16, 0.16); } .hp-io-method-link:hover::after { opacity: 0.88; color: #6f5410; } html.dark .hp-io-method-link, [data-theme="dark"] .hp-io-method-link { color: var(--suki-dark-text-body); } html.dark .hp-io-method-link:hover, [data-theme="dark"] .hp-io-method-link:hover { color: #ffe148; background: rgba(255, 225, 72, 0.1); box-shadow: 0 0 0 1px rgba(255, 225, 72, 0.38); } html.dark .hp-io-method-link:hover::after, [data-theme="dark"] .hp-io-method-link:hover::after { opacity: 0.92; color: #ffe148; } /* Quickstart uses .hp-io-method-link--featured in markup (play icon); default matches other rows, highlight + arrow only on :hover */ .hp-io-method-link-icon { flex-shrink: 0; width: 18px; height: 18px; color: #6f5410; opacity: 0.65; } .hp-io-method-link:hover .hp-io-method-link-icon { opacity: 1; } html.dark .hp-io-method-link-icon, [data-theme="dark"] .hp-io-method-link-icon { color: #ffe148; opacity: 0.75; } html.dark .hp-io-method-link:hover .hp-io-method-link-icon, [data-theme="dark"] .hp-io-method-link:hover .hp-io-method-link-icon { opacity: 1; } .hp-io-method-link-icon svg { display: block; width: 100%; height: 100%; } .hp-io-method-link-text { flex: 1; min-width: 0; } /* ===== styles/11-api-hub-endpoints.css ===== */ /* API hub pages: endpoint list block (Suki palette + site fonts via inherit; paths use site mono stack) */ .suki-api-endpoint-wrap { margin: 1rem 0; border-radius: 12px; border: 1px solid rgba(111, 84, 16, 0.14); background: #ffffff; overflow: hidden; font-family: inherit; box-shadow: 0 1px 3px rgba(40, 39, 37, 0.05); } html.dark .suki-api-endpoint-wrap, [data-theme="dark"] .suki-api-endpoint-wrap { border-color: rgba(255, 225, 72, 0.14); background: #0d0d0d; box-shadow: none; } .suki-api-endpoint-head { padding: 10px 16px; border-bottom: 1px solid rgba(111, 84, 16, 0.1); background: linear-gradient(180deg, rgba(255, 250, 222, 0.98) 0%, #fffef8 100%); font-family: inherit; } html.dark .suki-api-endpoint-head, [data-theme="dark"] .suki-api-endpoint-head { border-bottom-color: rgba(255, 225, 72, 0.12); background: linear-gradient(180deg, #1c1b19 0%, #141413 100%); } .suki-api-endpoint-head-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6f5410; font-family: inherit; } html.dark .suki-api-endpoint-head-label, [data-theme="dark"] .suki-api-endpoint-head-label { color: #d4c87a; } .suki-api-endpoint-list { display: flex; flex-direction: column; } .suki-api-endpoint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; margin: 0; font-family: inherit; font-size: 15px; line-height: 1.45; color: #494949; text-decoration: none !important; border: none; border-top: 1px solid rgba(111, 84, 16, 0.08); transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .suki-api-endpoint-list > .suki-api-endpoint-row:first-child { border-top: none; } html.dark .suki-api-endpoint-row, [data-theme="dark"] .suki-api-endpoint-row { color: var(--suki-dark-text); border-top-color: rgba(255, 225, 72, 0.08); } .suki-api-endpoint-row:hover { color: #5a4510 !important; background-color: rgba(255, 225, 72, 0.28) !important; box-shadow: inset 0 0 0 1px rgba(111, 84, 16, 0.12); } html.dark .suki-api-endpoint-row:hover, [data-theme="dark"] .suki-api-endpoint-row:hover { color: #ffe148 !important; background-color: rgba(255, 225, 72, 0.1) !important; box-shadow: inset 0 0 0 1px rgba(255, 225, 72, 0.22); } .suki-api-endpoint-path { font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size: 0.875rem; font-weight: 400; color: #3b3a38; } html.dark .suki-api-endpoint-path, [data-theme="dark"] .suki-api-endpoint-path { color: #e8e6e3; } /* Prose link chrome: clear default pill only when not hovering (hover uses .suki-api-endpoint-row:hover) */ #content-area .suki-api-endpoint-list > .suki-api-endpoint-row:not(:hover) { background-color: transparent !important; box-shadow: none !important; } .hp-io-method-card-aside { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(111, 84, 16, 0.1); } html.dark .hp-io-method-card-aside, [data-theme="dark"] .hp-io-method-card-aside { border-top-color: rgba(255, 225, 72, 0.12); } .hp-io-method-card-aside-text { margin: 0; font-size: 13px; line-height: 1.55; color: #6b6966; } .hp-io-method-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 4px; } .hp-io-method-card-meta-time { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 13px; line-height: 1.4; font-weight: 500; color: #6b6966; } .hp-io-method-card-meta-time::before { content: ""; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); } .hp-io-method-card-meta .hp-wn-badge { margin: 0; margin-top: 0; text-transform: none; letter-spacing: 0.01em; font-weight: 650; } html.dark .hp-io-method-card-meta-time, [data-theme="dark"] .hp-io-method-card-meta-time { color: var(--suki-dark-text-muted); } html.dark .hp-io-method-card-meta-time::before, [data-theme="dark"] .hp-io-method-card-meta-time::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a09c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); } html.dark .hp-io-method-card-aside-text, [data-theme="dark"] .hp-io-method-card-aside-text { color: var(--suki-dark-text-muted); } .hp-io-method-card-aside-text a { font-weight: 500; color: #6f5410; text-decoration: none; /* Mintlify prose `.link` uses border-bottom as underline; keep a single line on hover only */ border-bottom: none !important; box-shadow: none !important; } .hp-io-method-card-aside-text a:hover { text-decoration: underline; text-underline-offset: 0.15em; } html.dark .hp-io-method-card-aside-text a, [data-theme="dark"] .hp-io-method-card-aside-text a { color: #fff394; } @media (max-width: 768px) { .hp-io-method-grid { grid-template-columns: 1fr; gap: 20px; margin: 24px 0 40px; } .hp-io-method-card-hero { min-height: 112px; padding: 22px 16px; } .hp-io-method-card-body { padding: 22px 20px 18px; } .hp-io-method-card-title { font-size: 1.25rem; } .hp-io-method-card-desc, .hp-io-method-link { font-size: 14px; } } /* * documentation/get-started/overview.mdx — CardGroups under “What can you build” / “Key capabilities”. * Mintlify-default card border + yellow capability pills (same tokens as `.hp-badge-home-io` / use-case `#ffe148` bars). */ #content-area .doc-partners-overview-card-groups .card { border-color: rgba(17, 24, 39, 0.12); } html.dark #content-area .doc-partners-overview-card-groups .card, [data-theme="dark"] #content-area .doc-partners-overview-card-groups .card { border-color: rgba(255, 255, 255, 0.14); } #content-area .doc-partners-overview-card-groups .doc-overview-cap-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; align-items: center; } #content-area .doc-partners-overview-card-groups .doc-overview-cap-pill { display: inline-flex; align-items: center; box-sizing: border-box; padding: 0.32rem 0.65rem; border-radius: 3px; font-size: 11px; font-weight: 650; letter-spacing: 0.02em; line-height: 1.25; color: var(--suki-light-text) !important; background: #ffe148 !important; border: none; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; white-space: nowrap; } html.dark #content-area .doc-partners-overview-card-groups .doc-overview-cap-pill, [data-theme='dark'] #content-area .doc-partners-overview-card-groups .doc-overview-cap-pill { color: #0a0a0a !important; background: #ffe148 !important; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* Dark mode for featured cards */ @media (prefers-reduced-motion: reduce) { .core-capability-card.core-capability-card--with-hero { transition: 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; } } @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-text { font-size: 16px; } .sdk-overview-container iframe, .sdk-overview-intro iframe { margin: 20px 0; max-width: 100%; } .sdk-overview-container iframe, .sdk-overview-intro iframe { margin: 16px 0; } } /* Dark mode: flat surfaces, no shadows */ .api-new-apis-heading { margin-top: 40px !important; } /* API overview: New APIs row (core-capability cards + same hero SVGs as before) */ .api-new-apis-section.core-capabilities-section { margin: 16px 0 48px; } .api-new-apis-section .core-capabilities-grid { grid-template-columns: repeat(4, 1fr); margin-top: 8px; } @media (max-width: 1100px) { .api-new-apis-section .core-capabilities-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .api-new-apis-section .core-capabilities-grid { grid-template-columns: 1fr; } } /* * Feature blocks: rounded visual strip (SVG on solid bg) separate from text on page bg. * Light: warm cream (theme) behind graphic. Dark: #1A1D24. No Mintlify Card wrapper. */ .suki-feature-grid { display: grid; width: 100%; gap: 24px; } .suki-feature-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .suki-feature-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .suki-feature-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .suki-feature-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .api-new-apis-feature-grid { margin-top: 8px; } @media (max-width: 1100px) { .suki-feature-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suki-feature-grid--cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suki-feature-grid--cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .suki-feature-grid--cols-3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .suki-feature-grid--cols-4 { grid-template-columns: 1fr; } .suki-feature-grid--cols-5 { grid-template-columns: 1fr; } .suki-feature-grid--cols-6 { grid-template-columns: 1fr; } } .suki-feature-block { display: flex; flex-direction: column; min-width: 0; color: inherit; } .suki-feature-visual { border-radius: 12px; overflow: hidden; line-height: 0; flex-shrink: 0; background: #fffade; pointer-events: none; cursor: default; user-select: none; } html.dark .suki-feature-visual, [data-theme="dark"] .suki-feature-visual { background: #1a1917; } .suki-feature-visual img { width: 100%; height: auto; display: block; aspect-ratio: 480 / 180; object-fit: contain; object-position: center center; filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } /* SDK overview: paired light/dark SVGs */ .suki-feature-visual .suki-sdk-hero-img--dark { display: none !important; } html.dark .suki-feature-visual .suki-sdk-hero-img--light, [data-theme="dark"] .suki-feature-visual .suki-sdk-hero-img--light { display: none !important; } html.dark .suki-feature-visual .suki-sdk-hero-img--dark, [data-theme="dark"] .suki-feature-visual .suki-sdk-hero-img--dark { display: block !important; } /* Linked hero SVGs: doc routes; zoom whole tile (anchor), not just the img */ a.suki-hero-img-link { display: block; pointer-events: auto; cursor: pointer; text-decoration: none; color: inherit; border-radius: inherit; transition: transform 0.28s ease; transform-origin: center center; } a.suki-hero-img-link:hover, a.suki-hero-img-link:focus-visible { transform: scale(0.94); } a.suki-hero-img-link:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; border-radius: 10px; } html.dark a.suki-hero-img-link:focus-visible, [data-theme="dark"] a.suki-hero-img-link:focus-visible { outline-color: #ffe148; } /* Avoid browser opening/dragging the SVG; clicks go to the link */ a.suki-hero-img-link img { pointer-events: none; -webkit-user-drag: none; user-select: none; } @media (prefers-reduced-motion: reduce) { a.suki-hero-img-link { transition: none; } a.suki-hero-img-link:hover, a.suki-hero-img-link:focus-visible { transform: none; } } .suki-feature-body { padding: 16px 0 0; margin: 0; background: transparent; } .suki-feature-title { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 10px; color: var(--suki-light-text); } html.dark .suki-feature-title, [data-theme="dark"] .suki-feature-title { color: var(--suki-dark-text); } .suki-feature-body .core-capability-badge { margin-bottom: 10px; margin-top: 0; } .suki-feature-body .core-capability-content { margin-bottom: 4px; } .suki-feature-body .core-capability-content p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--suki-light-text-body); } html.dark .suki-feature-body .core-capability-content p, [data-theme="dark"] .suki-feature-body .core-capability-content p { color: #a1a19f; } a.suki-feature-cta { display: inline-flex; align-items: center; margin-top: 10px; font-size: 14px; font-weight: 500; color: #6f5410; text-decoration: none; width: fit-content; } a.suki-feature-cta:hover { text-decoration: underline; } a.suki-feature-cta:focus-visible { outline: 2px solid #6f5410; outline-offset: 3px; border-radius: 2px; } html.dark a.suki-feature-cta:focus-visible, [data-theme="dark"] a.suki-feature-cta:focus-visible { outline-color: #ffe148; } html.dark a.suki-feature-cta, [data-theme="dark"] a.suki-feature-cta { color: #fff394; } /* 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 .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; } /* ===== styles/12-release-notes-hub.css ===== */ /* Release notes: title + Subscribe / RSS */ .release-notes-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-bottom: 12px; } .release-notes-main-heading { margin-bottom: 0; flex: 1 1 auto; min-width: 0; line-height: 1.2; } /* Beat html.dark #content-area h2/h3/h4 → --suki-dark-text (cream sheet needs dark ink). */ /* * Release notes title row: icon-only pills on large viewports with fine pointer; expand on hover * or keyboard focus. Touch-first wide screens (hover: none) keep the full label (no change). * Phones/tablets (<1024px) always use the full pill (existing rules below). */ @media (max-width: 640px) { .release-notes-title-row { gap: 10px 12px; margin-bottom: 10px; } } /* Changelogs hub card section spacing. */ .release-notes-changelog-cards { margin: 8px 0 28px; } /* Release notes: workflow mode shell + top workflow pills */ /* Release notes home: integration surface filters (current-year entries only) */ .release-notes-filter-row-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--suki-light-text-muted); margin: 0 0 0.35rem; } html.dark .release-notes-filter-row-label, [data-theme="dark"] .release-notes-filter-row-label { color: var(--suki-dark-text-muted); } .release-notes-product-tab { margin: 0; padding: 0.5rem 0.15rem; font-size: 0.9375rem; font-weight: 600; font-family: inherit; color: var(--suki-light-text-muted); 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-product-tab:hover { color: var(--suki-light-text-body); } .release-notes-product-tab--active { color: #6f5410; border-bottom-color: #6f5410; } /* Shared filter/search empty state (use cases, tutorials, cookbooks, release notes, …) */ .suki-filter-empty, .release-notes-filter-empty, .suki-use-case-empty, .specialties-table-empty, [data-wh-empty], [data-tut-empty] { box-sizing: border-box; display: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.55rem; width: 100%; min-height: 0; margin: 0.75rem 0 1.75rem; padding: 1.65rem 1.35rem 1.75rem; border: none; border-radius: 0.75rem; background: #fcfaf2; text-align: left; color: inherit; font-size: inherit; line-height: inherit; } .suki-filter-empty:not([hidden]), .release-notes-filter-empty:not([hidden]), .suki-use-case-empty:not([hidden]), .specialties-table-empty:not([hidden]), [data-wh-empty]:not([hidden]), [data-tut-empty]:not([hidden]) { display: flex; } .suki-filter-empty-title { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #111111; } .suki-filter-empty-text { margin: 0; max-width: 36rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #5f5f5f; } .suki-filter-empty-clear { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; margin: 0.55rem 0 0; padding: 0.72rem 1.4rem; border: none; border-radius: 12px; background: #ffe148; color: #111111; font-family: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease; } .suki-filter-empty-clear:hover { filter: brightness(0.97); } .suki-filter-empty-clear:active { transform: translateY(1px); } .suki-filter-empty-clear:focus-visible { outline: 2px solid #6f5410; outline-offset: 3px; } html.dark .suki-filter-empty, html.dark .release-notes-filter-empty, html.dark .suki-use-case-empty, html.dark .specialties-table-empty, html.dark [data-wh-empty], html.dark [data-tut-empty], [data-theme="dark"] .suki-filter-empty, [data-theme="dark"] .release-notes-filter-empty, [data-theme="dark"] .suki-use-case-empty, [data-theme="dark"] .specialties-table-empty, [data-theme="dark"] [data-wh-empty], [data-theme="dark"] [data-tut-empty] { background: rgba(44, 43, 40, 0.72); color: var(--suki-dark-text-muted); } html.dark .suki-filter-empty-title, [data-theme="dark"] .suki-filter-empty-title { color: var(--suki-dark-text-body); } html.dark .suki-filter-empty-text, [data-theme="dark"] .suki-filter-empty-text { color: var(--suki-dark-text-muted); } html.dark .suki-filter-empty-clear, [data-theme="dark"] .suki-filter-empty-clear { background: #ffe148; color: #111111; } html.dark .release-notes-product-tab, [data-theme="dark"] .release-notes-product-tab { color: var(--suki-dark-text-muted); } html.dark .release-notes-product-tab:hover, [data-theme="dark"] .release-notes-product-tab:hover { color: var(--suki-dark-text-body); } html.dark .release-notes-product-tab--active, [data-theme="dark"] .release-notes-product-tab--active { color: #ffe148; border-bottom-color: #ffe148; } /* Release notes hub: Category + Attention dropdown filters (desktop and mobile) */ .release-notes-filter-dropdowns { display: flex; flex-wrap: nowrap; flex: 1 1 auto; gap: 1rem 1.25rem; min-width: 0; width: 100%; align-items: flex-end; } .release-notes-filter-search-field { flex: 1 1 auto; min-width: 0; max-width: none; } .release-notes-timeline-search-wrap { max-width: none; width: 100%; } /* * Page search field chrome lives on shared `.suki-use-case-search` (see below). * Timeline wrap only stretches the field beside filter dropdowns. */ .release-notes-filter-dropdown-field { flex: 0 1 auto; min-width: 0; } .release-notes-filter-dropdown { position: relative; flex: 0 0 auto; } .release-notes-filter-dropdown-trigger { align-items: center; appearance: none; background: rgba(255, 254, 251, 0.92); border: 1px solid rgba(111, 84, 16, 0.22); border-radius: 12px; box-sizing: border-box; color: var(--suki-light-text-body); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: 0.5rem; justify-content: space-between; line-height: 1.25; margin: 0; min-height: 2.75rem; padding: 0.75rem 1rem 0.75rem 1.15rem; text-align: left; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; width: 100%; white-space: nowrap; } .release-notes-filter-dropdown-trigger:hover { border-color: rgba(111, 84, 16, 0.4); color: var(--suki-light-text); } .release-notes-filter-dropdown-trigger--active, .release-notes-filter-dropdown--open .release-notes-filter-dropdown-trigger { background: rgba(255, 225, 72, 0.35); border-color: rgba(111, 84, 16, 0.45); color: #1a1508; } .release-notes-filter-dropdown-trigger:focus-visible { outline: 2px solid #6f5410; outline-offset: 2px; } .release-notes-filter-dropdown-value { color: inherit; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .release-notes-filter-dropdown-chevron { color: inherit; display: flex; flex-shrink: 0; opacity: 0.85; transition: transform 0.18s ease; } .release-notes-filter-dropdown--open .release-notes-filter-dropdown-chevron { transform: rotate(180deg); } .release-notes-filter-dropdown-list { background: #fffef9; border: 1px solid rgba(111, 84, 16, 0.16); border-radius: 1rem; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(111, 84, 16, 0.08); left: 0; list-style: none; margin: 0; margin-top: 0.5rem; max-height: 18rem; min-width: min(16rem, calc(100vw - 2.5rem)); overflow-y: auto; padding: 0.35rem 0; position: absolute; top: 100%; width: max(100%, 16rem); /* * Below Mintlify #navbar (z-30) and #banner (z-45). Absolute menus with a higher * z-index paint over sticky chrome when the open list scrolls under the header. * Stay above Mintlify .link { z-index: 10 } in the content column. */ z-index: 20; } .release-notes-filter-dropdown-list li { margin: 0; padding: 0; list-style: none !important; } /* * Normal MDX pages wrap content in Mintlify `.prose`, which pads `ul > li` * (~2rem). That shifts filter option labels sideways under the trigger. * Frame/custom hubs are not in prose, so they never hit this. */ #content-area .prose .release-notes-filter-dropdown-list > li, #content-area .release-notes-filter-dropdown-list > li { margin: 0 !important; padding: 0 !important; list-style: none !important; } #content-area .release-notes-filter-dropdown-list > li::before, #content-area .release-notes-filter-dropdown-list > li::marker { content: none !important; display: none !important; } /* Keep the catalog product menu flush with its trigger on article pages. */ #content-area [data-wh-catalog] .release-notes-filter-dropdown-list { left: 0; right: auto; width: 100%; min-width: 100%; } .release-notes-filter-dropdown-list .release-notes-product-tab { background: transparent; border: none; border-radius: 0; box-sizing: border-box; color: var(--suki-light-text); cursor: pointer; display: block; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; margin: 0; padding: 0.65rem 1rem; text-align: left; transition: background 0.12s ease; width: 100%; } .release-notes-filter-dropdown-list .release-notes-product-tab:hover { background: rgba(255, 225, 72, 0.18); color: var(--suki-light-text); } .release-notes-filter-dropdown-list .release-notes-product-tab--active { background: rgba(255, 225, 72, 0.28); color: #1a1508; } .release-notes-filter-dropdown-list li:has(.release-notes-product-tab[hidden]) { display: none; } @media (min-width: 641px) { /* Category (product) — not Search, which is now first in the row. */ .release-notes-filter-dropdown-field:not(.release-notes-filter-search-field):has([data-rn-dropdown='product']) { flex: 0 0 9.5rem; width: 9.5rem; max-width: 9.5rem; } .release-notes-filter-dropdown-field:has([data-rn-dropdown='attention']) { flex: 0 0 13.5rem; width: 13.5rem; max-width: 13.5rem; } /* Search fills leftover row space so it stays wider than Category. */ .release-notes-filter-search-field { flex: 1 1 auto; min-width: 14rem; max-width: none; width: auto; } } html.dark .release-notes-filter-dropdown-trigger, [data-theme='dark'] .release-notes-filter-dropdown-trigger { background: rgba(44, 43, 40, 0.85); border-color: rgba(255, 243, 148, 0.18); /* Match troubleshooting / multi-select idle label text (--suki-dark-text-muted). */ color: var(--suki-dark-text-muted); } html.dark .release-notes-filter-dropdown-trigger:hover, [data-theme='dark'] .release-notes-filter-dropdown-trigger:hover { border-color: rgba(255, 243, 148, 0.32); color: var(--suki-dark-text); } html.dark .release-notes-filter-dropdown-trigger--active, html.dark .release-notes-filter-dropdown--open .release-notes-filter-dropdown-trigger, [data-theme='dark'] .release-notes-filter-dropdown-trigger--active, [data-theme='dark'] .release-notes-filter-dropdown--open .release-notes-filter-dropdown-trigger { background: rgba(255, 225, 72, 0.14); border-color: rgba(255, 225, 72, 0.4); color: #fffef7; } html.dark .release-notes-filter-dropdown-trigger:focus-visible, [data-theme='dark'] .release-notes-filter-dropdown-trigger:focus-visible { outline: 2px solid #ffe148; outline-offset: 2px; } html.dark .release-notes-filter-dropdown-list, [data-theme='dark'] .release-notes-filter-dropdown-list { background: #2c2b28; border-color: rgba(255, 243, 148, 0.16); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2); } html.dark .release-notes-filter-dropdown-list .release-notes-product-tab, [data-theme='dark'] .release-notes-filter-dropdown-list .release-notes-product-tab { color: var(--suki-dark-text); } html.dark .release-notes-filter-dropdown-list .release-notes-product-tab:hover, [data-theme='dark'] .release-notes-filter-dropdown-list .release-notes-product-tab:hover { background: rgba(255, 225, 72, 0.1); color: var(--suki-dark-text); } html.dark .release-notes-filter-dropdown-list .release-notes-product-tab--active, [data-theme='dark'] .release-notes-filter-dropdown-list .release-notes-product-tab--active { background: rgba(255, 225, 72, 0.16); color: #fff394; } @media (max-width: 640px) { .release-notes-filter-dropdowns { flex-direction: column; width: 100%; } .release-notes-filter-search-field { flex: 1 1 auto; max-width: none; width: 100%; } .release-notes-filter-dropdown-field { flex: 1 1 auto; min-width: 0; width: 100%; max-width: none; } } /* API changelog: Ambient vs Dictation filter pills (scripts/api-changelog-filter.js) */ /* Web SDK changelog: JavaScript vs React filter pills (scripts/web-sdk-changelog-filter.js) */ /* ===== styles/13-filters-and-hub-tools.css ===== */ /* API error messages: search + category dropdown (scripts/api-error-messages-filter.js) */ .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: var(--suki-dark-text); } 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; } } /* Sidebar light mode: slightly warmer than pure white */ html:not(.dark):not([data-theme="dark"]) #sidebar-content, [data-theme="light"] #sidebar-content { background-color: #FFFDF2 !important; } /* Sidebar dark mode: 5% lighter than content canvas #0A0A0A → #161616 */ html.dark #sidebar-content, [data-theme="dark"] #sidebar-content { background-color: #0F0F0F !important; } /* * Nested sidebar guide lines (tree connectors). * Mintlify Sequoia nests expanded groups as `li > ul` and indents rows with * inline padding-left (1rem → 1.75rem → 2.5rem → …). Draw a 1px line with * ::before so layout, collapse chrome, and active/hover states stay unchanged. */ #navigation-items li > ul { position: relative; } #navigation-items li > ul::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; z-index: 0; background-color: rgba(40, 39, 37, 0.16); } html.dark #navigation-items li > ul::before, html[data-theme="dark"] #navigation-items li > ul::before, [data-theme="dark"] #navigation-items li > ul::before { background-color: rgba(255, 255, 255, 0.16); } /* Align each nest with the parent row’s padding-left step (0.75rem). */ #navigation-items ul.sidebar-group > li > ul::before { left: 1rem; } #navigation-items ul.sidebar-group > li > ul > li > ul::before { left: 1.75rem; } #navigation-items ul.sidebar-group > li > ul > li > ul > li > ul::before { left: 2.5rem; } #navigation-items ul.sidebar-group > li > ul > li > ul > li > ul > li > ul::before { left: 3.25rem; } /* Footer light mode (match content area) */ html:not(.dark):not([data-theme="dark"]) footer.footer, html:not(.dark):not([data-theme="dark"]) footer.advanced-footer, [data-theme="light"] footer.footer, [data-theme="light"] footer.advanced-footer { background-color: #fffffd !important; } /* Footer dark mode background */ .dark footer.footer, .dark footer.advanced-footer, html.dark footer.footer, html.dark footer.advanced-footer, html[data-theme="dark"] footer.footer, html[data-theme="dark"] footer.advanced-footer, [data-theme="dark"] footer.footer, [data-theme="dark"] footer.advanced-footer { background-color: #0a0a0a !important; /* Mintlify uses dark:border-gray-800/50 on border-t; too faint on dark footer */ border-top-color: rgba(255, 255, 255, 0.14) !important; } /* Nav bar / main area dark mode background (bg-gray-50 dark:bg-gray-900) - 15% darker */ html.dark .dark\:bg-gray-900, [data-theme="dark"] .dark\:bg-gray-900 { background-color: #13171B !important; } html.dark .nav-tag-pill-text, [data-theme="dark"] .nav-tag-pill-text, .dark .nav-tag-pill-text { background: rgba(255, 225, 72, 0.1) !important; color: #FFE148 !important; border-color: rgba(255, 225, 72, 0.2) !important; } /* Mintlify floating “Ask a question…” bar: default ::before is a tall full-width layer (before:bg-background-*) that shows as a harsh strip under the rounded composer. */ .chat-assistant-floating-input::before { display: none !important; } /* Match composer + slide-out sheet to site content backgrounds */ html:not(.dark):not([data-theme="dark"]) .chat-assistant-floating-input div.rounded-2xl.pointer-events-auto, [data-theme="light"] .chat-assistant-floating-input div.rounded-2xl.pointer-events-auto { background-color: rgba(255, 253, 242, 0.96) !important; border-color: rgba(17, 24, 39, 0.12) !important; } html.dark .chat-assistant-floating-input div.rounded-2xl.pointer-events-auto, [data-theme="dark"] .chat-assistant-floating-input div.rounded-2xl.pointer-events-auto { background-color: rgba(38, 38, 36, 0.96) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html:not(.dark):not([data-theme="dark"]) .chat-assistant-sheet, [data-theme="light"] .chat-assistant-sheet { background-color: #fffdf2 !important; } html.dark .chat-assistant-sheet, [data-theme="dark"] .chat-assistant-sheet { background-color: #262624 !important; } /* Phone sheet only: composer uses backdrop-blur-xl. Safari paints square corners unless * overflow:hidden clips the blur to border-radius. The inner z-50 wrapper also paints a * square background slab that hides the rounded-2xl edge. Desktop side panel unchanged. */ @media (max-width: 1023px) { .chat-assistant-sheet .px-4.pb-4.shrink-0 > div.z-50 { background: transparent !important; } .chat-assistant-sheet div.rounded-2xl.pointer-events-auto { border-radius: 1rem !important; overflow: hidden !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/Dictation overview titles (wide-content.js); brand tag styles live with the status pills block */ .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; } } /* ===== styles/14-quick-summary.css ===== */ /* Quick summary: light card + thick-to-thin left rail. */ .quick-summary-wrapper { position: relative; display: block; box-sizing: border-box; min-width: 0; max-width: 100%; margin: 32px 0; padding: 20px 24px 20px 44px; background: #FFFEF8; border: 1px solid #E4DFC4; border-radius: 10px; } .quick-summary-wrapper::before, .quick-summary-wrapper::after { content: ""; position: absolute; left: 16px; display: block; background: #1B1B1B; pointer-events: none; } .quick-summary-wrapper::before { top: 16px; bottom: 16px; width: 1px; } .quick-summary-wrapper::after { top: 16px; width: 5px; height: 68%; } html.dark .quick-summary-wrapper, [data-theme="dark"] .quick-summary-wrapper { background: #14130F; border-color: #3F3B23; } html.dark .quick-summary-wrapper::before, html.dark .quick-summary-wrapper::after, [data-theme="dark"] .quick-summary-wrapper::before, [data-theme="dark"] .quick-summary-wrapper::after { background: #F4F4F5; } .quick-summary-header { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 10px; } .quick-summary-icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; color: #6F5410; 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; } html.dark .quick-summary-icon, [data-theme="dark"] .quick-summary-icon { color: #FFE148; } .quick-summary-title { margin: 0; color: #1B1B1B; font-size: 14px; font-weight: 700; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; } html.dark .quick-summary-title, [data-theme="dark"] .quick-summary-title { color: #F4F4F5; } .quick-summary-content { min-width: 0; color: #3F3F46; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; } html.dark .quick-summary-content, [data-theme="dark"] .quick-summary-content { color: #E4E4E7; } .quick-summary-content p { margin: 0; color: inherit; } .quick-summary-content p + p { margin-top: 12px; } .quick-summary-content strong, .quick-summary-content b { color: #1B1B1B; font-weight: 600; } html.dark .quick-summary-content strong, html.dark .quick-summary-content b, [data-theme="dark"] .quick-summary-content strong, [data-theme="dark"] .quick-summary-content b { color: #F4F4F5; } .quick-summary-content a { color: #6F5410; text-decoration: underline; text-decoration-color: #D2A400; text-underline-offset: 3px; } .quick-summary-content a:hover { color: #4F3C0B; } html.dark .quick-summary-content a, [data-theme="dark"] .quick-summary-content a { color: #FFE148; text-decoration-color: rgba(255, 225, 72, 0.65); } html.dark .quick-summary-content a:hover, [data-theme="dark"] .quick-summary-content a:hover { color: #fff394; } /* Inline code in Quick summary: see callout inline code rules at top of file (00-base). */ .quick-summary-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; margin-top: 12px; color: var(--suki-light-text-muted); font-size: 12px; line-height: 1.4; } html.dark .quick-summary-footer, [data-theme="dark"] .quick-summary-footer { color: #A1A1AA; } .quick-summary-footer-icon { display: inline-block; width: 13px; height: 13px; flex-shrink: 0; color: inherit; opacity: 0.8; 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; } .quick-summary-footer-date { font-weight: 400; } @media (max-width: 640px) { .quick-summary-wrapper { margin: 24px 0; padding: 18px 20px 18px 40px; } .quick-summary-header { margin-bottom: 8px; } .quick-summary-footer { margin-top: 10px; } } /* 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: 6px; font-size: 13px; font-weight: 400; line-height: 1.3; color: rgb(var(--gray-500, 115 114 112)); } .read-time-badge .read-time-clock-icon { flex-shrink: 0; stroke: currentColor; } html.dark .read-time-badge, [data-theme="dark"] .read-time-badge { color: rgb(var(--gray-400, 161 161 159)); } /* ===== styles/15-home.css ===== */ /* ======================================== HOME PAGE ======================================== */ /* * Hero band: full content-pane width under the home navbar (custom mode has no sidebar). * Home `.hp-wrap` is widened below so this band needs no `100vw` breakout (avoids overflow). * Copy stays on the shared home rail via `.hp-hero-inner--home` max-width. * Surfaces: #1c1c19 in light and dark (same token as the home navbar fill). */ .hp-hero-bleed { background: #1c1c19; border-radius: 0; box-sizing: border-box; margin-bottom: clamp(10px, 1.5vw, 20px); margin-left: 0; margin-right: 0; margin-top: 0; max-width: none; overflow: hidden; position: relative; width: 100%; } /* * Home only: drop the centered rail on `.hp-wrap` so the hero can paint edge-to-edge. * Non-hero sections keep the shared rail via the sibling rule below. */ #content-area:has([data-hp-home-hero]) .hp-wrap { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } /* Trust footer is last in `.hp-wrap`: drop bottom padding so the band sits flush (no cream gap). */ #content-area:has([data-hp-home-hero]) .hp-wrap:has(> .suki-doc-footer) { padding-bottom: 0 !important; } /* Rail-constrain body sections only — not the full-bleed trust footer. */ #content-area:has([data-hp-home-hero]) .hp-wrap > :not(.hp-hero-bleed):not(.suki-doc-footer) { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: min( calc(var(--hp-home-rail-vw) * var(--hp-home-rail-scale)), calc(var(--hp-home-rail-max) * var(--hp-home-rail-scale)) ); width: 100%; } /* Dark home hero: surface token so the band is visible above #0a0a0a canvas */ html.dark .hp-hero-bleed, [data-theme="dark"] .hp-hero-bleed { background: #1c1c19; } .hp-hero.hp-hero--home { background: #1c1c19; border: none !important; border-radius: 0; box-sizing: border-box; isolation: isolate; margin: 0; /* Height from content + inner padding (minimized-sdk-docs); avoid a tall empty vh band */ min-height: 0; /* Full-bleed `.hp-hero-bg` extends past this box; partner card may extend on desktop */ overflow-x: visible; overflow-y: visible; padding: 0; position: relative; width: 100%; } /* Laptop / desktop: taller Confluent-style band + more top air for hero copy (phone stays below) */ @media (min-width: 901px) { /* Full-bleed charcoal band; copy rail stays on `.hp-hero-inner--home` */ #content-area:has([data-hp-home-hero]) .hp-wrap > .hp-hero-bleed, #content-area:has(.hp-wrap) .hp-hero-bleed { background: #1c1c19; border-radius: 0; box-sizing: border-box; margin: 0 0 30px; max-width: none; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 0; } html.dark #content-area:has(.hp-wrap) .hp-hero-bleed, [data-theme="dark"] #content-area:has(.hp-wrap) .hp-hero-bleed { background: #1c1c19; } /* * Solid fill lives on `.hp-hero--home` so `.hp-hero-bg` (img) can sit above it but below copy. * If `.hp-hero-inner--home` is opaque, it hides the stripe image entirely (z-index stacks inner above the img). * Tall floor mirrors docs.confluent.io: band reads as a real hero, not a short strip. */ .hp-hero.hp-hero--home { align-items: stretch; background: #1c1c19 !important; border-radius: 0; display: flex; flex-direction: column; justify-content: flex-start; min-height: clamp(440px, 44vh, 560px); } html.dark #content-area:has(.hp-wrap) .hp-hero.hp-hero--home, [data-theme="dark"] #content-area:has(.hp-wrap) .hp-hero.hp-hero--home { background: #1c1c19 !important; } #content-area:has(.hp-wrap) .hp-hero-inner--home { background: transparent !important; border-radius: 0; box-shadow: none; box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; isolation: isolate; justify-content: flex-start; margin-left: auto; margin-right: auto; max-width: min( calc(var(--hp-home-rail-vw) * var(--hp-home-rail-scale)), calc(var(--hp-home-rail-max) * var(--hp-home-rail-scale)) ); /* Extra top padding so title / CTAs / rail sit lower in the yellow band (laptop+ only). * Horizontal padding stays 0 so hero copy lines up with the sections below. */ min-height: 100%; overflow: hidden; padding: 128px 0 96px; position: relative; width: 100%; z-index: 2; } /* No extra side inset — share the same rail edges as sections under the hero */ .hp-hero-inner--home .hp-hero-row { flex: 0 1 auto; padding-right: 0; } } /* Desktop / tablet home hero: no bottom “wash” overlay (banner-style surface should end cleanly). */ @media (min-width: 901px) { #content-area:has(.hp-wrap) .hp-hero.hp-hero--home::after { content: none !important; display: none !important; } } /* Soft wash: hero image fades into charcoal band (Stripe-style blend) */ .hp-hero.hp-hero--home::after { background: linear-gradient( to bottom, rgba(28, 28, 25, 0) 0%, rgba(28, 28, 25, 0.45) 38%, rgba(28, 28, 25, 0.88) 70%, #1c1c19 100% ); bottom: 0; content: ""; height: min(58%, 320px); left: 0; pointer-events: none; position: absolute; right: 0; z-index: 1; } html.dark .hp-hero.hp-hero--home::after, [data-theme="dark"] .hp-hero.hp-hero--home::after { background: linear-gradient( to bottom, rgba(28, 28, 25, 0) 0%, rgba(28, 28, 25, 0.45) 38%, rgba(28, 28, 25, 0.88) 70%, #1c1c19 100% ); height: min(58%, 320px); } /* `documentation/assets/hero-home.webp` (see home.mdx ): cover + soft masks */ .hp-hero--home .hp-hero-bg { /* Full width of `.hp-hero` (main pane), not `100vw`, so stripes never sit under the sidebar */ bottom: 0; height: 100%; inset: unset; left: 0; margin-left: 0; margin-right: 0; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.85) 12%, #000 32%, #000 62%, rgba(0, 0, 0, 0.5) 86%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.85) 12%, #000 32%, #000 62%, rgba(0, 0, 0, 0.5) 86%, transparent 100% ); max-width: none; object-fit: cover; object-position: center; opacity: 0.09; right: auto; top: 0; width: 100%; } html:not(.dark) .hp-hero.hp-hero--home, body:not(.dark) .hp-hero.hp-hero--home { background: #1c1c19 !important; } html.dark .hp-hero.hp-hero--home, [data-theme="dark"] .hp-hero.hp-hero--home { background: #1c1c19 !important; } .hp-hero-inner--home { box-sizing: border-box; display: block; margin-left: auto; margin-right: auto; /* Same max width as `.hp-wrap` so hero and body share one column */ max-width: min( calc(var(--hp-home-rail-vw) * var(--hp-home-rail-scale)), calc(var(--hp-home-rail-max) * var(--hp-home-rail-scale)) ); /* Phone / tablet: approach minimized-sdk-docs 56×48 without overflowing narrow viewports */ padding: clamp(32px, 6vw, 56px) clamp(16px, 4vw, 48px) clamp(40px, 7vw, 56px); position: relative; width: 100%; z-index: 2; } .hp-hero-row { align-items: center; box-sizing: border-box; display: grid; gap: 20px 12px; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); width: 100%; } .hp-hero-main { box-sizing: border-box; max-width: none; min-width: 0; padding-left: 0; text-align: left; } /* * Home hero, phone / narrow (≤900px, same breakpoint as stacked `.hp-hero-row`): * - Base `.hp-hero-inner--home` uses the shared home rail to match the home column on * desktop; on phones that leaves ~10% empty gutter on each side. Here we use `max-width: 100%` * so the hero uses the full content width with only a small symmetric inset (readable touch edges). * - `.hp-hero-main` / subs: full row width; copy column is no longer capped at 38rem. */ @media (max-width: 900px) { /* Keep the home hero edge-to-edge on phones; inset lives on `.hp-hero-inner--home` */ .hp-hero-bleed, #content-area:has([data-hp-home-hero]) .hp-wrap > .hp-hero-bleed { border-radius: 0; margin-bottom: clamp(28px, 5vw, 40px); margin-left: 0; margin-right: 0; margin-top: 0; max-width: none; width: 100%; } /* Phone gutters for body sections (wrap horizontal padding is zeroed for full-bleed hero) */ #content-area:has([data-hp-home-hero]) .hp-wrap > :not(.hp-hero-bleed):not(.suki-doc-footer) { box-sizing: border-box; max-width: 100%; padding-left: 20px !important; padding-right: 20px !important; } .hp-hero-row { gap: 24px; grid-template-columns: 1fr; } .hp-hero-inner--home { box-sizing: border-box; max-width: 100%; padding-bottom: clamp(48px, 7vw, 72px); /* Match body section gutters (`.hp-wrap > :not(.hp-hero-bleed)` uses 20px) */ padding-left: 20px; padding-right: 20px; padding-top: clamp(40px, 6vw, 64px); } .hp-hero-inner--home .hp-hero-main { max-width: 100%; min-width: 0; padding-left: 0; width: 100%; } .hp-hero-inner--home .hp-sub--home { max-width: 100%; } .hp-hero-inner--home .hp-sub--lead, .hp-hero-inner--home .hp-hero-access, .hp-hero-inner--home .hp-skv-wrap, .hp-hero-cta-row--home { max-width: 100%; } } /* Phone only: omit stack illustration from the hero (still shown from 641px through tablet / stacked layout) */ @media (max-width: 640px) { .hp-hero-rail-stack.hp-hero-rail-stack--rail { display: none; } } /* Home: two-line headline; default .hp-title uses line-height 1.08, which crowds descenders on line 1 against line 2 */ .hp-title.hp-title--home { line-height: 1.2; } .hp-title--home .hp-title-line--primary { font-weight: 800; } .hp-title--home .hp-title-line--secondary { font-weight: 600; letter-spacing: -0.03em; } .hp-hero-inner--home .hp-sub--home { display: block; max-width: none; text-align: left; } /* Home hero copy: light-on-charcoal in both themes (hex: dark tokens are dark-theme-only) */ html:not(.dark) .hp-hero-inner--home .hp-sub--home, body:not(.dark) .hp-hero-inner--home .hp-sub--home, html.dark .hp-hero-inner--home .hp-sub--home, [data-theme="dark"] .hp-hero-inner--home .hp-sub--home { color: #d1d0ce !important; } html:not(.dark) .hp-hero-inner--home .hp-sub--home strong, body:not(.dark) .hp-hero-inner--home .hp-sub--home strong, html.dark .hp-hero-inner--home .hp-sub--home strong, [data-theme="dark"] .hp-hero-inner--home .hp-sub--home strong { color: #e1e1de !important; } /* Shared width: hero lead copy and access line (reach toward the stack) */ .hp-hero-inner--home .hp-sub--lead, .hp-hero-inner--home .hp-hero-access { max-width: 88%; width: 100%; } /* Sukiverse ask bar: slightly narrower than the lead / access line (88%) */ .hp-hero-inner--home .hp-skv-wrap { max-width: 80%; width: 100%; } /* Need access line under the lead (charcoal hero). * Snippet