/** * 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"; /* ===== Brand typography ===== * The site uses two families only, matching suki.ai: General Grotesque for headings and * ABC Monument Grotesk for everything else. Code keeps its monospace font. docs.json → fonts * registers the default heading and body faces; the remaining weights and italics are declared here. * The !important rules below win over every other non-monospace font stack in this file, * snippets, scripts, and inline SVG text. The :not() list is every element that is authored * as monospace (code, pre, kbd, Mintlify .font-mono, mono classes in this file and * web-sdk-executive.css, SVG text with a mono font-family). Add new mono classes to every * :not() list: the heading rule must carry the same lists as the body rule or it loses on * specificity and headings fall back to Monument. Shadow DOM widgets (suki-chatbot.js, tut-code-explorer.js) repeat * the rule inside their own styles because page CSS cannot reach them. * Body falls back to General Grotesque for glyphs Monument lacks (for example ✓). */ @font-face { font-family: "ABC Monument Grotesk"; src: url("/fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Monument Grotesk"; src: url("/fonts/ABCMonumentGrotesk-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "ABC Monument Grotesk"; src: url("/fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Monument Grotesk"; src: url("/fonts/ABCMonumentGrotesk-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "ABC Monument Grotesk"; src: url("/fonts/ABCMonumentGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Monument Grotesk"; src: url("/fonts/ABCMonumentGrotesk-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "General Grotesque"; src: url("/fonts/GeneralGrotesque-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Grotesque"; src: url("/fonts/GeneralGrotesque-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "General Grotesque"; src: url("/fonts/GeneralGrotesque-Book.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "General Grotesque"; src: url("/fonts/GeneralGrotesque-BookItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "General Grotesque"; src: url("/fonts/GeneralGrotesque-Demi.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "General Grotesque"; src: url("/fonts/GeneralGrotesque-DemiItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "General Grotesque"; src: url("/fonts/GeneralGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "General Grotesque"; src: url("/fonts/GeneralGrotesque-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } :root { --suki-font-heading: "General Grotesque", "ABC Monument Grotesk", sans-serif; --suki-font-body: "ABC Monument Grotesk", "General Grotesque", sans-serif; } html, body, body *:not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i])):not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i]) *), body *:not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i])):not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i]) *)::before, body *:not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i])):not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i]) *)::after { font-family: var(--suki-font-body) !important; } body :is(h1, h2, h3, h4, h5, h6):not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i])):not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i]) *), body :is(h1, h2, h3, h4, h5, h6) *:not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i])):not(:is(pre, code, kbd, samp, .font-mono, .tut-hub-ui, .suki-install-skill-term-body, .cb-recipe-scope-pill, .cb-run-command, .cb-run-tip-cmd, .wf-idx, .sts-mono, .sts-tile b, .wse-code, [font-family*="mono" i], [style*="monospace" i]) *) { font-family: var(--suki-font-heading) !important; } /* h1–h3 use one weight everywhere, matching the suki.ai title tokens (600, General Grotesque Demi). */ body :is(h1, h2, h3) { font-weight: 600 !important; } /* ===== styles/00-base.css ===== */ /* ======================================== BASE STYLES ======================================== */ /* Text buttons share the navbar Support button's corners and weight: 8px at 1024px and up, 4px below. */ :root { --suki-btn-radius: 8px; --suki-btn-weight: 500; } @media (max-width: 1023px) { :root { --suki-btn-radius: 4px; } } /* suki.ai type scale, fluid with the viewport (390px to 1440px wide): prose 16px to 17.75px, card text 14px to 15.75px. Card titles are fixed: 18px, and 16px on phones (640px and below). Line heights: 1.4 for prose and card text, 1.25 for card titles. */ :root { --suki-prose-size: clamp(16px, calc(15.38px + 0.164vw), 17.75px); --suki-prose-lh: 1.4; --suki-card-text-size: clamp(14px, calc(13.38px + 0.164vw), 15.75px); --suki-card-text-lh: 1.4; --suki-card-title-size: 18px; --suki-card-title-lh: 1.25; } @media (max-width: 640px) { :root { --suki-card-title-size: 16px; } } /* 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-table-row-hover-bg: var(--suki-link-row-hover-bg); /* 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-table-row-hover-bg: #2d2d2d; /* 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). Row height is shared with every page * (--suki-nav-row-h on the merged navbar row). Do NOT set height on #navbar itself: * Mintlify injects a banner spacer (h-[var(--banner-height)]) inside the header. */ /* 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; } /* Below 390px the phone row (menu, logo, Support, More) has no room for the label. */ @media (max-width: 389px) { body:has([data-hp-home-hero]) #navbar a[href="/documentation/home"]:has(img.nav-logo)::after { display: none; } } /* * 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/nav-suki-light.svg"); } /* * Home charcoal navbar (light mode): MCP / More 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, [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 { 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"], [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"] { 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, [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 { 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, [data-theme="light"] body:has([data-hp-home-hero]) #theme-preference-menu-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; } @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; } } /* Navbar wordmark matches the suki.ai header logo (tight 73x35 artwork): 35px tall on desktop, 28px on phone. */ #navbar img.nav-logo { height: 28px !important; max-height: 28px !important; } @media (min-width: 1024px) { #navbar img.nav-logo { height: 35px !important; max-height: 35px !important; } } /* Shared CTA hover arrow (Suki DS arrow, icons/suki/chevron-right.svg). One arrow, right side, hover only. */ :root { --suki-cta-arrow-mask: url("/icons/suki/chevron-right.svg"); --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: var(--suki-btn-radius) !important; background: #0a0a0a !important; color: #ffffff !important; text-decoration: none !important; font-weight: var(--suki-btn-weight) !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 / 112% no-repeat; mask: var(--suki-cta-arrow-mask) center / 112% 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; } } /* suki.ai careers–style staggered strip hover. Markup is prebuilt by its owner (navbar Support button). */ .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; } /* Inside #navbar, Mintlify's font-bodyWeight rule sets 400 on every descendant; keep the button's weight. */ .suki-strip-hover-host .suki-strip-hover-content { font-weight: inherit; } 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; } } /* Responsive navbar: the Sequoia theme keeps the full desktop nav on one row at * every width, so the top-level tabs collapse (phone-style) when they would * overlap search and the nav actions: * - Viewport < 1080, OR * - Assistant panel open (~420px) and viewport < 1480. * Tabs stay reachable from the left sidebar. All hide rules are floored at * `min-width: 1024px` (Mintlify's `lg`); below that Mintlify's own mobile nav * row is left untouched. */ /* Phone-only: mobile toolbar (More placeholder until scripts inject the real button). */ @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 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-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("/icons/suki/more.svg") center / 16px 16px no-repeat !important; mask: url("/icons/suki/more.svg") center / 16px 16px no-repeat !important; } #navbar .suki-more-mobile-root { order: 3 !important; } /* * Phone toolbar: Support + three dots only (MCP and search hidden on every page). * Nodes stay in the DOM because the toolbar scripts anchor on them. */ #navbar #search-bar-entry-mobile, #navbar .suki-mcp-mobile-root { display: none !important; } #navbar .suki-nav-support-mobile { display: inline-flex !important; align-items: center !important; order: 3 !important; } #navbar .suki-nav-support-mobile a.suki-nav-support-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 40px !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; border: 0 !important; border-radius: var(--suki-btn-radius) !important; background: #ffe148 !important; color: #1b1b1b !important; font-family: inherit !important; font-size: 14px !important; font-weight: var(--suki-btn-weight) !important; letter-spacing: -0.14px !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent !important; } #navbar .suki-nav-support-mobile a.suki-nav-support-btn:active { background: #ffea7e !important; } #navbar .suki-nav-support-mobile a.suki-nav-support-btn:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: 2px !important; } 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 More placeholder (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-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; } } /* Hide the top-level tabs (phone-style nav) only when there is not enough room. */ @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; } } /* Wide screens: suki.ai nav item padding (24px). Narrower tiers above keep the row on one line. */ @media (min-width: 1440px) { html:not([data-assistant-state="open"]) #navbar .nav-tabs .nav-tabs-item, html:not([data-assistant-state="open"]) #suki-nav-actions-host .suki-mcp-nav-trigger { padding: 0 24px !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; } } /* ===== 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; } /* More from Suki trigger: suki.ai menu icon, swapped for the suki.ai close icon while the menu is open. */ :is(#navbar, #suki-nav-actions-host) .suki-more-nav-trigger { min-width: 48px !important; } .suki-more-nav-icon { background-color: currentColor; display: block; flex: 0 0 auto; height: 24px; width: 24px; } .suki-more-nav-icon--menu { -webkit-mask: url("/icons/derived/suki-web-menu.svg") center / contain no-repeat; mask: url("/icons/derived/suki-web-menu.svg") center / contain no-repeat; } .suki-more-nav-icon--close { -webkit-mask: url("/icons/derived/suki-web-close.svg") center / contain no-repeat; mask: url("/icons/derived/suki-web-close.svg") center / contain no-repeat; } .suki-more-nav-trigger[aria-expanded="true"] .suki-more-nav-icon--menu, .suki-more-nav-trigger:not([aria-expanded="true"]) .suki-more-nav-icon--close { display: none; } /* * Navbar Support button (desktop only; host is hidden below 1024px). * Matches the suki.ai desktop Contact Us CTA (50px tall, 8px radius, 32px side padding * from 1280px; 16px below that so the row still fits beside search). Stays yellow in dark mode. */ #suki-nav-actions-host li.suki-nav-support-root { display: flex !important; align-items: center !important; align-self: stretch !important; margin: 0 !important; padding: 0 8px !important; list-style: none !important; background: transparent !important; border: none !important; } #suki-nav-actions-host a.suki-nav-support-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 50px !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; border: 0 !important; border-radius: var(--suki-btn-radius) !important; background: #ffe148 !important; color: #1b1b1b !important; font-family: inherit !important; font-size: 14px !important; font-weight: var(--suki-btn-weight) !important; line-height: 1 !important; letter-spacing: -0.14px !important; white-space: nowrap !important; text-decoration: none !important; cursor: pointer !important; } @media (min-width: 1280px) { #suki-nav-actions-host a.suki-nav-support-btn { padding: 0 32px !important; } } /* Yellow in both themes, so keep the suki.ai black 5% wipe instead of the dark-theme white one. */ #suki-nav-actions-host a.suki-nav-support-btn .suki-strip-hover-seg { background: rgba(0, 0, 0, 0.05) !important; } #suki-nav-actions-host a.suki-nav-support-btn:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: 2px !important; } html.dark #suki-nav-actions-host a.suki-nav-support-btn:focus-visible, [data-theme="dark"] #suki-nav-actions-host a.suki-nav-support-btn:focus-visible { outline-color: #ffe148 !important; } /* * Equal spacing: MCP, Support, More from Suki (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. */ #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[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; } #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: rgb(26, 25, 23) !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 3-dot More (same as dark). */ 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 { color: #fff394 !important; stroke: #fff394 !important; } } /* MCP trigger caret (DS chevron-forward, points right): closed = down, hover/open = up */ .suki-mcp-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[data-theme="dark"] .suki-mcp-nav-caret, [data-theme="dark"] .suki-mcp-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-mcp-nav-trigger[aria-expanded="true"] .suki-mcp-nav-caret, :is(#navbar, #suki-nav-actions-host) li.suki-mcp-nav-root:hover .suki-mcp-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-mcp-nav-trigger[aria-expanded="true"] .suki-mcp-nav-caret, html.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) .suki-mcp-nav-trigger:hover .suki-mcp-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) li.suki-mcp-nav-root:hover .suki-mcp-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-mcp-nav-trigger[aria-expanded="true"] .suki-mcp-nav-caret, [data-theme="dark"] :is(#navbar, #suki-nav-actions-host) li.suki-mcp-nav-root:hover .suki-mcp-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; } /* Same yellow chip as the SDKs / APIs menu pills (GA vX.Y.Z), identical in both themes: MCP CLI tag, More from Suki file badges, overview changelog version pill. */ .suki-mcp-nav-badge, .suki-more-nav-badge, .sov-log-ver { display: inline-flex !important; align-items: center !important; flex-shrink: 0; height: 20px; padding: 0 7px !important; border: 0 !important; border-radius: 6px !important; font-family: inherit !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; font-variant-numeric: tabular-nums; white-space: nowrap; color: #1b1b1b !important; background: #fdf49d !important; box-shadow: none !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; } /* * Desktop menu: Support is a navbar button and the theme row lives here. * Phone menu (three-dot / More actions sheet) keeps Support and Mintlify's theme control. */ @media (min-width: 1024px) { .suki-more-nav-action.suki-more-nav-action--mobile-only, .suki-more-nav-intro .suki-more-nav-intro-text--mobile { display: none !important; } } @media (max-width: 1023px) { .suki-more-nav-panel-inner .suki-more-nav-theme, .suki-more-nav-intro .suki-more-nav-intro-text--desktop { display: none !important; } } .suki-more-nav-theme { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 10px 16px !important; border-top: 2px solid #d1d1d1 !important; border-bottom: 2px solid #d1d1d1 !important; } html.dark .suki-more-nav-theme, html[data-theme="dark"] .suki-more-nav-theme, [data-theme="dark"] .suki-more-nav-theme { border-color: rgba(255, 255, 255, 0.18) !important; } .suki-more-nav-theme-label { font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #111827 !important; } html.dark .suki-more-nav-theme-label, html[data-theme="dark"] .suki-more-nav-theme-label, [data-theme="dark"] .suki-more-nav-theme-label { color: var(--suki-dark-text) !important; } .suki-more-nav-theme-options { display: inline-flex !important; align-items: center !important; gap: 2px !important; padding: 2px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #f9fafb !important; } html.dark .suki-more-nav-theme-options, html[data-theme="dark"] .suki-more-nav-theme-options, [data-theme="dark"] .suki-more-nav-theme-options { border-color: rgba(255, 255, 255, 0.12) !important; background: #171717 !important; } .suki-more-nav-theme-option { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 28px !important; margin: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #6b7280 !important; font: inherit !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; cursor: pointer !important; transition: background-color 0.2s ease, color 0.2s ease !important; } .suki-more-nav-theme-option svg { display: block !important; flex: 0 0 auto !important; } .suki-more-nav-theme-option:hover { color: #111827 !important; } .suki-more-nav-theme-option[aria-checked="true"] { background: #ffffff !important; color: #111827 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important; } .suki-more-nav-theme-option:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: 1px !important; } html.dark .suki-more-nav-theme-option, html[data-theme="dark"] .suki-more-nav-theme-option, [data-theme="dark"] .suki-more-nav-theme-option { color: #a3a3a3 !important; } html.dark .suki-more-nav-theme-option:hover, html[data-theme="dark"] .suki-more-nav-theme-option:hover, [data-theme="dark"] .suki-more-nav-theme-option:hover, html.dark .suki-more-nav-theme-option[aria-checked="true"], html[data-theme="dark"] .suki-more-nav-theme-option[aria-checked="true"], [data-theme="dark"] .suki-more-nav-theme-option[aria-checked="true"] { color: var(--suki-dark-text) !important; } html.dark .suki-more-nav-theme-option[aria-checked="true"], html[data-theme="dark"] .suki-more-nav-theme-option[aria-checked="true"], [data-theme="dark"] .suki-more-nav-theme-option[aria-checked="true"] { background: #2a2a2a !important; box-shadow: none !important; } html.dark .suki-more-nav-theme-option:focus-visible, html[data-theme="dark"] .suki-more-nav-theme-option:focus-visible, [data-theme="dark"] .suki-more-nav-theme-option:focus-visible { outline-color: #ffe148 !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-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; } /* * Hamburger / phone three-dot panel: Resources / Legal as Suki submenu rows * (square, 2px dividers, black/5 hover with rising bar). */ .suki-more-nav-panel .suki-more-nav-groups { gap: 0 !important; padding: 0 !important; border-top: 2px solid #d1d1d1 !important; border-bottom: 2px solid #d1d1d1 !important; } .suki-more-nav-panel .suki-more-nav-group { min-width: 0 !important; } .suki-more-nav-panel .suki-more-nav-group + .suki-more-nav-group { border-left: 2px solid #d1d1d1 !important; } .suki-more-nav-panel .suki-more-nav-group > .suki-more-nav-section-title { margin: 0 !important; padding: 12px 16px 8px !important; } .suki-more-nav-panel .suki-more-nav-compact-list { gap: 0 !important; } .suki-more-nav-panel .suki-more-nav-compact-link { position: relative !important; overflow: hidden !important; min-height: 44px !important; padding: 0 16px !important; box-sizing: border-box !important; border-radius: 0 !important; border-top: 2px solid #d1d1d1 !important; background: transparent !important; color: #646464 !important; -webkit-tap-highlight-color: transparent !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-more-nav-panel .suki-more-nav-compact-link::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; } .suki-more-nav-panel .suki-more-nav-compact-label { font-size: 14px !important; } .suki-more-nav-panel .suki-more-nav-compact-link:hover, .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible { background: rgba(27, 27, 27, 0.05) !important; color: #1b1b1b !important; } .suki-more-nav-panel .suki-more-nav-compact-link:hover::after, .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible::after { bottom: 0 !important; background-color: #d1d1d1 !important; } .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible { outline: 2px solid #6f5410 !important; outline-offset: -2px !important; } html.dark .suki-more-nav-panel .suki-more-nav-groups, html.dark .suki-more-nav-panel .suki-more-nav-group + .suki-more-nav-group, html.dark .suki-more-nav-panel .suki-more-nav-compact-link, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-groups, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-group + .suki-more-nav-group, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-compact-link { border-color: rgba(255, 255, 255, 0.18) !important; } html.dark .suki-more-nav-panel .suki-more-nav-compact-link, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-compact-link { color: #a3a3a3 !important; } html.dark .suki-more-nav-panel .suki-more-nav-compact-link:hover, html.dark .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-compact-link:hover, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible { background: rgba(255, 255, 255, 0.08) !important; color: var(--suki-dark-text) !important; } html.dark .suki-more-nav-panel .suki-more-nav-compact-link:hover::after, html.dark .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible::after, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-compact-link:hover::after, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible::after { background-color: rgba(255, 255, 255, 0.35) !important; } html.dark .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-compact-link:focus-visible { outline-color: #ffe148 !important; } /* Too narrow for two columns: stack Legal under Resources. */ @media (max-width: 359px) { .suki-more-nav-panel .suki-more-nav-groups { grid-template-columns: 1fr !important; } .suki-more-nav-panel .suki-more-nav-group + .suki-more-nav-group { border-left: 0 !important; border-top: 2px solid #d1d1d1 !important; } html.dark .suki-more-nav-panel .suki-more-nav-group + .suki-more-nav-group, [data-theme="dark"] .suki-more-nav-panel .suki-more-nav-group + .suki-more-nav-group { border-top-color: rgba(255, 255, 255, 0.18) !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-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; } /* * Info (border-neutral) and plain Callout (border-zinc): Mintlify prose-invert uses zinc; align to * the shared body token. Note / Tip / Warning / Check / Danger keep their accent text. */ 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; } /* * Suki callout skin for every Mintlify callout, in the hub design language (.srn / .sov / .sts): * borderless tinted panel, and Note / Info / Tip / Warning / Danger open with a type tag styled like * the release notes attention tags. Check keeps one row behind the Troubleshooting checkbox (ink box, * yellow tick). keeps its own icon and the author's color. callout-content text, links, and * font size keep Mintlify's per-type colors. Screen only: print repaints callouts as plain paper. */ @media screen { .callout[data-callout-type] { --sc-bg: #f4f4f4; --sc-tag-bg: transparent; --sc-tag-ink: #1b1b1b; --sc-tag-edge: transparent; gap: 12px; padding: 16px 20px; background: var(--sc-bg); border: 0; border-radius: 16px; } .callout:is([data-callout-type="note"], [data-callout-type="info"], [data-callout-type="tip"], [data-callout-type="warning"], [data-callout-type="danger"]) { flex-direction: column; gap: 10px; } .callout:is([data-callout-type="note"], [data-callout-type="info"], [data-callout-type="tip"], [data-callout-type="warning"], [data-callout-type="danger"]) > [data-component-part="callout-icon"] { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; width: auto; height: 24px; margin: 0; padding: 0 8px; border-radius: 6px; background: var(--sc-tag-bg); box-shadow: inset 0 0 0 1px var(--sc-tag-edge); color: var(--sc-tag-ink); font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; } .callout:is([data-callout-type="note"], [data-callout-type="info"], [data-callout-type="tip"], [data-callout-type="warning"], [data-callout-type="danger"]) > [data-component-part="callout-icon"] :is(svg, img) { width: 13px; height: 13px; margin: 0; color: inherit; } .callout:is([data-callout-type="note"], [data-callout-type="info"], [data-callout-type="tip"], [data-callout-type="warning"], [data-callout-type="danger"]) > [data-component-part="callout-icon"]::after { content: var(--sc-label); } .callout[data-callout-type="note"] { --sc-label: "Note"; --sc-bg: #eff7fe; --sc-tag-bg: #d6edfd; } .callout[data-callout-type="info"] { --sc-label: "Info"; --sc-tag-edge: rgba(27, 27, 27, 0.24); } /* Mintlify's info glyph is drawn off-center in its viewBox, so Info swaps it for a centered solid mark. */ .callout[data-callout-type="info"] > [data-component-part="callout-icon"] :is(svg, img) { display: none !important; } .callout[data-callout-type="info"] > [data-component-part="callout-icon"]::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("/icons/suki/info.svg") center / contain no-repeat; mask: url("/icons/suki/info.svg") center / contain no-repeat; } .callout[data-callout-type="tip"] { --sc-label: "Tip"; --sc-bg: #f1f9f3; --sc-tag-bg: #d7f0df; } .callout[data-callout-type="warning"] { --sc-label: "Warning"; --sc-bg: #fef9dd; --sc-tag-bg: #fdf49d; } .callout[data-callout-type="danger"] { --sc-label: "Danger"; --sc-bg: #fdf3f1; --sc-tag-bg: #fce3de; --sc-tag-ink: #8a2b1a; } .callout[data-callout-type="check"] { --sc-bg: #f1f9f3; --sc-box-bg: #1b1b1b; --sc-box-ink: #fdf49d; } .callout[data-callout-type="check"] > [data-component-part="callout-icon"] { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 5px; background: var(--sc-box-bg); color: var(--sc-box-ink); } .callout[data-callout-type="check"] > [data-component-part="callout-icon"] svg { width: 12px; height: 12px; margin: 0; color: inherit; } .callout[data-callout-type="callout"][style*="--callout-light-bg-color"] { --sc-bg: var(--callout-light-bg-color); } html.dark .callout[data-callout-type], [data-theme="dark"] .callout[data-callout-type] { --sc-bg: #1e1e1e; --sc-tag-ink: #f4f4f4; } html.dark .callout[data-callout-type="note"], [data-theme="dark"] .callout[data-callout-type="note"] { --sc-bg: rgba(156, 203, 242, 0.08); --sc-tag-bg: rgba(156, 203, 242, 0.18); --sc-tag-ink: #cfe6fa; } html.dark .callout[data-callout-type="info"], [data-theme="dark"] .callout[data-callout-type="info"] { --sc-tag-edge: rgba(244, 244, 244, 0.26); } html.dark .callout[data-callout-type="tip"], [data-theme="dark"] .callout[data-callout-type="tip"] { --sc-bg: rgba(134, 239, 172, 0.07); --sc-tag-bg: rgba(134, 239, 172, 0.16); --sc-tag-ink: #bbf7d0; } html.dark .callout[data-callout-type="warning"], [data-theme="dark"] .callout[data-callout-type="warning"] { --sc-bg: #24221a; --sc-tag-bg: #fdf49d; --sc-tag-ink: #1b1b1b; } html.dark .callout[data-callout-type="danger"], [data-theme="dark"] .callout[data-callout-type="danger"] { --sc-bg: rgba(240, 128, 108, 0.08); --sc-tag-bg: rgba(240, 128, 108, 0.18); --sc-tag-ink: #f6c1b7; } html.dark .callout[data-callout-type="check"], [data-theme="dark"] .callout[data-callout-type="check"] { --sc-bg: rgba(134, 239, 172, 0.07); --sc-box-bg: #fdf49d; --sc-box-ink: #1b1b1b; } html.dark .callout[data-callout-type="callout"][style*="--callout-light-bg-color"], [data-theme="dark"] .callout[data-callout-type="callout"][style*="--callout-light-bg-color"] { --sc-bg: var(--callout-bg-color); } } @media screen and (max-width: 640px) { .callout[data-callout-type] { padding: 14px 16px; } } 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; } /* 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-ext-icon { display: inline-block; width: 0.875em; height: 0.875em; margin-left: 0.3em; vertical-align: -0.08em; } 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; } /* Body text in the sdk-overview-container shell (Release notes, Changelogs, Glossary letter pages) */ .sdk-overview-container p:not(.sdk-overview-main-description):not(.sdk-overview-subtitle), .sdk-overview-container .sdk-overview-text { font-size: var(--suki-prose-size); } /* 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: var(--suki-prose-size); line-height: var(--suki-prose-lh); 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; } #content-area a.doc-guide-btn { display: inline-flex; align-items: center; gap: 0; padding: 4px 12px; min-height: 28px; border-radius: var(--suki-btn-radius); border: 1px solid #111827; background: #111827; color: #ffffff !important; font-family: inherit; font-size: 12.5px; font-weight: var(--suki-btn-weight); 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 / 112% no-repeat; mask: var(--suki-cta-arrow-mask) center / 112% 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; 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: var(--suki-prose-size); line-height: var(--suki-prose-lh); 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(var(--suki-card-text-lh) * 2em); } /* 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: var(--suki-card-title-size) !important; line-height: var(--suki-card-title-lh) !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: var(--suki-card-text-size); line-height: var(--suki-card-text-lh); 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: var(--suki-card-title-size) !important; font-weight: 600 !important; line-height: var(--suki-card-title-lh) !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: var(--suki-card-text-size); line-height: var(--suki-card-text-lh); } #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: var(--suki-card-title-size) !important; font-weight: 600 !important; line-height: var(--suki-card-title-lh) !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: var(--suki-card-text-lh); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(var(--suki-card-text-lh) * 2em); } #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: var(--suki-card-text-lh); max-height: calc(var(--suki-card-text-lh) * 2em); margin: 0; font-size: var(--suki-card-text-size); 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("/icons/suki/mic.svg"); mask-image: url("/icons/suki/mic.svg"); } #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: var(--suki-font-body); 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: var(--suki-font-body); 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("/icons/suki/mic.svg"); mask-image: url("/icons/suki/mic.svg"); -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: var(--suki-font-body); 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("/icons/suki/chevron-right.svg"); mask-image: url("/icons/suki/chevron-right.svg"); -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: var(--suki-font-body); 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("/icons/material/notifications.svg"); mask-image: url("/icons/material/notifications.svg"); -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: var(--suki-font-body); 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: var(--suki-font-body); 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); } @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%; } /* Page title on the api-overview-wrap shell (Use Cases, cookbook recipes, executive pages). */ #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: var(--suki-card-title-size); line-height: var(--suki-card-title-lh); 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: var(--suki-card-title-size); font-weight: 600; line-height: var(--suki-card-title-lh); 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: var(--suki-card-text-size); line-height: var(--suki-card-text-lh); 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: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--suki-cta-arrow-mask) center / 112% no-repeat; mask: var(--suki-cta-arrow-mask) center / 112% no-repeat; 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 ===== */ .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: currentColor; -webkit-mask: url("/icons/suki/activity.svg") center / contain no-repeat; mask: url("/icons/suki/activity.svg") center / contain no-repeat; } .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-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-link { font-size: 14px; } } /* Dark mode for featured cards */ /* 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-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 */ .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; } 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) */ /* ===== 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: var(--suki-btn-radius); background: #ffe148; color: #111111; font-family: inherit; font-size: 0.8125rem; font-weight: var(--suki-btn-weight); 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: var(--suki-btn-radius); box-sizing: border-box; color: var(--suki-light-text-body); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.9375rem; font-weight: var(--suki-btn-weight); 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) { /* Search fills leftover row space. */ .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) */ /* 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%); } } /* Navbar menu pills and the Install Skill chip fade in; 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("/icons/material/bolt.svg"); mask-image: url("/icons/material/bolt.svg"); -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("/icons/suki/activity.svg"); mask-image: url("/icons/suki/activity.svg"); -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; /* Clip sideways only: the Sukiverse suggestions panel must drop below the hero. */ overflow-x: clip; position: relative; width: 100%; z-index: 3; } /* * 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; /* Partner card may extend past this box 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-x: clip; padding: 0; position: relative; width: 100%; z-index: 3; } html.dark #content-area:has(.hp-wrap) .hp-hero-bleed, [data-theme="dark"] #content-area:has(.hp-wrap) .hp-hero-bleed { background: #1c1c19; } /* 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-x: clip; 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; } } 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--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 headline and lead follow the suki.ai hero tokens (title: -0.04em / 1.1, body-20: 16-18px / 1.4). */ .hp-title.hp-title--home { font-size: clamp(40px, 4.2vw, 68px); letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 24px; } .hp-hero-inner--home .hp-sub--home { display: block; max-width: none; text-align: left; } /* suki.ai hero lead scale: 18px at 390px wide to 20.6px at 1440px, line-height 1.4. */ .hp-hero-inner--home .hp-sub--lead { font-size: clamp(18px, calc(17.08px + 0.245vw), 20.6px); line-height: 1.4; } /* Suki line motif: a 2px rule beside the hero copy with a 4px segment on the headline. */ .hp-hero-inner--home { --hp-hero-line: #e1e1de; } @media (min-width: 901px) { .hp-hero-inner--home .hp-hero-main { position: relative; } .hp-hero-inner--home .hp-hero-main::before { background: var(--hp-hero-line); bottom: 0; content: ""; left: 0; pointer-events: none; position: absolute; top: 0; width: 2px; } .hp-hero-inner--home .hp-title--home { border-left: 4px solid var(--hp-hero-line); padding-left: 32px; } .hp-hero-inner--home .hp-hero-main > :not(.hp-title--home) { box-sizing: border-box; padding-left: 36px; } .hp-hero-inner--home .hp-hero-main .hp-sub--lead { max-width: min(88%, calc(40rem + 36px)); } } @media (max-width: 640px) { .hp-title.hp-title--home { font-size: clamp(30px, 9vw, 40px); margin-bottom: 16px; margin-right: -16px; } } @media (max-width: 900px) { .hp-hero-inner--home .hp-hero-main::before { background: linear-gradient(var(--hp-hero-line), var(--hp-hero-line)) left bottom / 40% 4px no-repeat, linear-gradient(var(--hp-hero-line), var(--hp-hero-line)) left bottom / 100% 2px no-repeat; content: ""; display: block; height: 4px; margin-bottom: 32px; } } /* 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

becomes Mintlify (inline); keep this block. */ .hp-hero-access { color: #a1a19f; display: block; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 16px 0 0; } html:not(.dark) .hp-hero-access, body:not(.dark) .hp-hero-access, html.dark .hp-hero-access, [data-theme="dark"] .hp-hero-access { color: #a1a19f !important; } #content-area .hp-hero-access a { border-bottom: 1px solid transparent; color: #ffd447 !important; font-weight: 600; text-decoration: none !important; white-space: nowrap; } #content-area .hp-hero-access a:hover { border-bottom-color: rgba(255, 212, 71, 0.4); color: #ffe148 !important; } #content-area .hp-hero-access a:focus-visible { border-radius: 4px; outline: 2px solid #ffe148; outline-offset: 2px; } .hp-hero-cta-row--home { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 22px; max-width: 88%; width: 100%; } /* * Home hero Sukiverse ask bar (same pattern as closed Docs Assistant FAB). * Opens chat + sends via scripts/home-hero-search.js. Home page only. */ .hp-skv-wrap { --hp-skv-bg: #ffffff; --hp-skv-ink: rgb(var(--gray-900, 26 25 23)); --hp-skv-muted: rgb(var(--gray-600, 83 82 80)); --hp-skv-edge: rgba(27, 27, 27, 0.16); --hp-skv-idle: #f4f4f4; --hp-skv-panel: #ffffff; --hp-skv-faint: rgb(var(--gray-500, 115 114 112)); box-sizing: border-box; margin: 0; max-width: 100%; position: relative; width: 100%; z-index: 5; } .hp-skv { align-items: center; background: var(--hp-skv-bg); border: 1px solid var(--hp-skv-edge); border-radius: 10px; box-shadow: 0 1px 0 rgba(27, 27, 27, 0.04), 0 10px 28px -12px rgba(0, 0, 0, 0.45); box-sizing: border-box; color: var(--hp-skv-ink); display: flex; gap: 12px; height: 56px; padding: 0 10px; transition: border-color 0.15s ease; width: 100%; } .hp-skv:hover { border-color: rgba(27, 27, 27, 0.32); } .hp-skv-wrap.is-open .hp-skv, .hp-skv:focus-within { border-color: var(--hp-skv-ink); } .hp-skv-badge { background: transparent; display: grid; flex: none; height: 36px; place-items: center; width: 36px; } .hp-skv-wave { display: block; height: 36px; object-fit: contain; width: 36px; } .hp-skv-input { background: transparent; border: 0; color: var(--hp-skv-ink); flex: 1; font: inherit; font-size: 15px; height: 100%; min-width: 0; outline: 0; } .hp-skv-input::placeholder { color: var(--hp-skv-muted); } .hp-skv-kbd { border: 1px solid var(--hp-skv-edge); border-radius: 5px; color: var(--hp-skv-muted); flex: none; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 18px; padding: 2px 7px; } .hp-skv:focus-within .hp-skv-kbd, .hp-skv-wrap.has-text .hp-skv-kbd { display: none; } .hp-skv-send { align-items: center; background: var(--hp-skv-idle); border: 0; border-radius: 8px; color: var(--hp-skv-muted); cursor: not-allowed; display: grid; flex: none; height: 38px; place-items: center; transition: background-color 0.15s ease, color 0.15s ease; width: 38px; } .hp-skv-send svg { display: block; height: 16px; width: 16px; } .hp-skv-wrap.has-text .hp-skv-send { background: #fdf49d; box-shadow: inset 0 0 0 1px #e9d25a; color: #1b1b1b; cursor: pointer; } .hp-skv-send:focus-visible { outline: 2px solid var(--hp-skv-ink); outline-offset: 2px; } .hp-skv-panel { /* Open below the bar so suggestions do not cover the hero title. */ background: var(--hp-skv-panel); border: 1px solid rgba(27, 27, 27, 0.1); border-radius: 10px; box-shadow: 0 1px 0 rgba(27, 27, 27, 0.04), 0 18px 40px -18px rgba(0, 0, 0, 0.55); box-sizing: border-box; color: var(--hp-skv-ink); left: 0; opacity: 0; overflow: hidden; padding: 6px; pointer-events: none; position: absolute; right: 0; top: calc(100% + 8px); transform: translateY(-6px); transition: opacity 0.16s ease, transform 0.16s ease; } .hp-skv-wrap.is-open .hp-skv-panel { opacity: 1; pointer-events: auto; transform: none; } .hp-skv-panel-head { color: var(--hp-skv-faint); font-size: 12px; font-weight: 500; padding: 8px 12px 6px; } .hp-skv-list { list-style: none; margin: 0; padding: 0; } .hp-skv-q { align-items: center; background: transparent; border: 0; border-radius: 6px; color: inherit; cursor: pointer; display: flex; font: inherit; font-size: 14px; font-weight: 400; gap: 12px; justify-content: space-between; line-height: 1.4; padding: 10px 12px; text-align: left; width: 100%; } .hp-skv-q svg { flex: none; height: 14px; opacity: 0; transform: translateX(-4px); transition: transform 0.15s ease, opacity 0.15s ease; width: 14px; } .hp-skv-q:hover, .hp-skv-q:focus-visible { background: rgba(27, 27, 27, 0.05); outline: 0; } .hp-skv-q:focus-visible { box-shadow: inset 0 0 0 1.5px var(--hp-skv-ink); } .hp-skv-q:hover svg, .hp-skv-q:focus-visible svg { opacity: 1; transform: none; } @media (max-width: 560px) { .hp-hero-inner--home .hp-sub--lead, .hp-hero-inner--home .hp-skv-wrap, .hp-hero-cta-row--home { max-width: 100%; } .hp-skv-kbd { display: none; } .hp-skv-panel { display: none; } } @media (prefers-reduced-motion: reduce) { .hp-skv, .hp-skv-send, .hp-skv-panel, .hp-skv-q svg { transition: none; } } .hp-wrap { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 100%; min-width: 0; /* Horizontal padding matches `.hp-hero-inner--home` (hero lives inside `.hp-wrap` on home). */ padding: 28px clamp(16px, 3vw, 32px) 48px; width: 100%; } /* Home: hero is the first child inside `.hp-wrap`; keep top rhythm (desktop hero supplies its own margin-top). */ .hp-wrap:has(> .hp-hero-bleed:first-child) { padding-top: 0; } /* Home: Get started section (eyebrow + heading + cards under the hero band) */ .hp-home-get-started { box-sizing: border-box; margin: 0 0 36px; max-width: 100%; min-width: 0; width: 100%; } .hp-home-get-started-intro { margin: 0 0 18px; max-width: 40rem; } .hp-home-get-started-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } /* One surface for every grey home card: Get started, Integrate with examples, External resources. */ .hp-wrap { --hp-card-surface: #f4f4f4; --hp-card-surface-hover: #eeeeee; } html.dark .hp-wrap, [data-theme="dark"] .hp-wrap { --hp-card-surface: #1a1a1a; --hp-card-surface-hover: #232323; } /* Same card pattern as the release notes hub (.srn-nav) and SDK / API overview (.sov-log). */ .hp-home-get-started { --hp-gs-ink: rgb(var(--gray-900, 26 25 23)); --hp-gs-muted: rgb(var(--gray-700, 65 65 63)); } html.dark .hp-home-get-started, [data-theme="dark"] .hp-home-get-started { --hp-gs-ink: rgb(var(--gray-200, 225 225 222)); --hp-gs-muted: rgb(var(--gray-300, 209 208 206)); } .hp-get-started-card { align-items: center; background: var(--hp-card-surface); border: none; border-radius: 20px; box-sizing: border-box; color: var(--hp-gs-ink); display: flex; gap: 16px; justify-content: space-between; padding: 20px 20px 20px 22px; text-decoration: none !important; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .hp-get-started-card:hover, .hp-get-started-card:focus-visible { background: var(--hp-card-surface-hover); } .hp-get-started-card:focus-visible { box-shadow: 0 0 0 3px rgba(233, 210, 90, 0.55); outline: none; } .hp-get-started-card-copy { align-self: stretch; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .hp-get-started-card-title { color: inherit; font-size: var(--suki-card-title-size); letter-spacing: normal; line-height: var(--suki-card-title-lh); margin: 0; } .hp-get-started-card-desc { color: var(--hp-gs-muted); display: block; font-size: var(--suki-card-text-size); line-height: var(--suki-card-text-lh); } .hp-get-started-card-go { align-items: center; display: inline-flex; font-size: 14px; font-weight: 500; gap: 8px; margin-top: auto; padding-top: 8px; } .hp-get-started-card:hover .hp-get-started-card-title, .hp-get-started-card:focus-visible .hp-get-started-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .hp-get-started-card-icon { border-radius: 12px; color: #1b1b1b; display: grid; flex: none; height: 52px; place-items: center; transition: background-color 0.2s ease, color 0.2s ease; width: 52px; } .hp-get-started-card-icon--yellow { background: #fdf49d; } .hp-get-started-card-icon--blue { background: #d6edfd; } .hp-get-started-card:hover .hp-get-started-card-icon, .hp-get-started-card:focus-visible .hp-get-started-card-icon { background: #1b1b1b; color: #fdf49d; } .hp-get-started-card-icon .hp-gs-ico { height: 24px; width: 24px; } @media (prefers-reduced-motion: reduce) { .hp-get-started-card-go svg, .hp-get-started-card-icon { transition: none; } } /* home page change: Start building cards · icon micro-motion The DS icon is a mask painted in currentColor, so it follows the tile color (ink at rest, yellow on hover). */ @media (max-width: 720px) { .hp-home-get-started { margin-top: 8px; } .hp-home-get-started-grid { grid-template-columns: 1fr; } } .hp-journey-eyebrow--use-case-intro { margin-bottom: 8px; margin-top: 0; } /* Same size as former journey title; weight and letter-spacing match hero `.hp-title-line--secondary` (“with Suki for Partners”) */ #content-area .hp-home-get-started .hp-journey-hero-line { color: var(--suki-light-text) !important; font-size: clamp(1.35rem, 2.5vw, 1.6rem); letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 10px; text-align: left; } html.dark #content-area .hp-home-get-started .hp-journey-hero-line, [data-theme="dark"] #content-area .hp-home-get-started .hp-journey-hero-line { color: var(--suki-dark-text) !important; } .hp-journey-eyebrow { color: #6f5410; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; margin: 0 0 8px; text-transform: uppercase; } .hp-journey-eyebrow--explore { margin-bottom: 8px; } html.dark .hp-journey-eyebrow, [data-theme="dark"] .hp-journey-eyebrow { color: #e8d48a; } .hp-journey-title { color: var(--suki-light-text); font-size: clamp(1.35rem, 2.5vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px; } .hp-journey-title--explore { margin-bottom: 8px; } /* “Popular resources”: same weight + tracking as “Start with a use case” (`.hp-journey-hero-line`) */ #content-area .hp-journey-explore .hp-journey-title.hp-journey-title--explore { letter-spacing: -0.03em; } html.dark .hp-journey-title, [data-theme="dark"] .hp-journey-title { color: var(--suki-dark-text); } .hp-journey-lead { color: var(--suki-light-text-body); font-size: var(--suki-prose-size); line-height: var(--suki-prose-lh); margin: 0 0 18px; max-width: 52rem; } .hp-journey-lead--explore { margin-bottom: 16px; } html.dark .hp-journey-lead, [data-theme="dark"] .hp-journey-lead { color: var(--suki-dark-text-body); } /* Rail stack layout. Face/animation rules: home-hero-stack.css (also inlined at end of this file). */ .hp-hero-rail-stack { box-sizing: border-box; display: flex; isolation: isolate; justify-content: flex-start; min-width: 0; overflow: visible; padding: 0; position: relative; width: 100%; } .hp-hero-rail-stack--rail { align-self: center; height: auto; min-height: 0; } /* Desktop: rail only as tall as content; pull stack left toward copy to fill the mid-gap */ @media (min-width: 901px) { .hp-hero-rail-stack--rail { align-self: center; justify-content: flex-start; } .hp-hero-rail-stack.hp-hero-rail-stack--rail { margin-left: 0; padding-bottom: 0; /* Mild left pull only — keep stack a bit right of the copy */ transform: translateX(clamp(-40px, -2.5vw, -16px)); } .hp-hero-rail-stack .sk-hs { margin-left: 0; margin-right: auto; } } @media (max-width: 900px) { .hp-hero-rail-stack--rail { align-self: stretch; } .hp-hero-rail-stack.hp-hero-rail-stack--rail { margin-left: 0; max-width: 340px; padding-bottom: 8px; transform: none; } } /* Home charcoal hero text stays light in both themes. */ html:not(.dark):not([data-theme="dark"]) #content-area .hp-hero.hp-hero--home .hp-title.hp-title--home, [data-theme="light"] #content-area .hp-hero.hp-hero--home .hp-title.hp-title--home, html.dark #content-area .hp-hero.hp-hero--home .hp-title.hp-title--home, [data-theme="dark"] #content-area .hp-hero.hp-hero--home .hp-title.hp-title--home { color: #e1e1de !important; } html:not(.dark):not([data-theme="dark"]) #content-area .hp-hero.hp-hero--home .hp-sub.hp-sub--home, [data-theme="light"] #content-area .hp-hero.hp-hero--home .hp-sub.hp-sub--home, html.dark #content-area .hp-hero.hp-hero--home .hp-sub.hp-sub--home, [data-theme="dark"] #content-area .hp-hero.hp-hero--home .hp-sub.hp-sub--home { color: #d1d0ce !important; } html:not(.dark):not([data-theme="dark"]) #content-area .hp-hero.hp-hero--home .hp-sub.hp-sub--home strong, [data-theme="light"] #content-area .hp-hero.hp-hero--home .hp-sub.hp-sub--home strong, html.dark #content-area .hp-hero.hp-hero--home .hp-sub.hp-sub--home strong, [data-theme="dark"] #content-area .hp-hero.hp-hero--home .hp-sub.hp-sub--home strong { color: #e1e1de !important; } @media (min-width: 769px) { .hp-cta-row--below-hero { justify-content: flex-start; margin-bottom: 0; } } /* ---- CTA ---- */ .hp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-bottom: 12px; } .hp-cta-row--below-hero { margin-bottom: 0; } /* Narrow viewports: stack hero CTAs so labels stay readable */ @media (max-width: 560px) { .hp-cta-row--below-hero { align-items: stretch; flex-direction: column; flex-wrap: nowrap; } .hp-cta-row--below-hero .hp-cta-primary, .hp-cta-row--below-hero .hp-cta-secondary { box-sizing: border-box; flex: 0 0 auto !important; max-width: 100%; min-width: 0; white-space: nowrap; width: 100%; } } /* Home hero CTAs (wide): Quickstart : Partner ≈ 65 : 45 flex ratio */ @media (min-width: 800px) { .hp-cta-row--below-hero { align-self: stretch; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; width: 100%; } .hp-cta-row--below-hero .hp-cta-primary { box-sizing: border-box; flex: 65 1 0; max-width: none; min-width: 0; } .hp-cta-row--below-hero .hp-cta-secondary { box-sizing: border-box; flex: 35 1 0; max-width: none; min-width: 0; } } /* Preserve CTA dimensions; use the shared expanding ↗ hover behavior below. */ .hp-cta-row--below-hero .hp-cta { font-size: clamp(12.5px, 0.6vw + 5px, 14px); gap: 0; padding-block: 11px; padding-inline: clamp(14px, 1.1vw + 3px, 22px); } .hp-cta-row--below-hero .hp-cta-icon { height: clamp(14px, 0.5vw + 8px, 18px); min-height: clamp(14px, 0.5vw + 8px, 18px); min-width: clamp(14px, 0.5vw + 8px, 18px); width: clamp(14px, 0.5vw + 8px, 18px); } .hp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 11px 10px; border-radius: var(--suki-btn-radius); font-size: 14px; font-weight: var(--suki-btn-weight); text-decoration: none !important; transition: background var(--suki-cta-hover-duration) var(--suki-cta-hover-ease), border-color var(--suki-cta-hover-duration) var(--suki-cta-hover-ease); border: none; white-space: nowrap; position: relative; box-shadow: none; } /* MDX wraps CTA text in span[data-as="p"] and Mintlify gives it the body weight. */ .hp-cta span[data-as="p"] { font-weight: inherit; } .hp-cta svg, .hp-cta-icon { position: relative; z-index: 1; } .hp-cta-with-icon { gap: 0; } .hp-cta-with-icon > .hp-cta-icon, .hp-cta-with-icon > svg { margin-right: 8px; } .hp-cta-icon { flex-shrink: 0; display: block; width: 18px; height: 18px; min-width: 18px; min-height: 18px; overflow: visible; box-sizing: content-box; } /* Inline arrow spans are replaced by the shared expanding ::after arrow */ .hp-cta-icon-arrow-text { display: none !important; } /* Suppress Mintlify auto external-link icons on CTAs (leading .hp-cta-icon stays) */ .hp-cta > svg:not(.hp-cta-icon) { display: none !important; } .hp-cta::after { content: '' !important; display: inline-block; width: 0; height: var(--suki-cta-arrow-size-md); max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--suki-cta-arrow-mask) center / 112% no-repeat; mask: var(--suki-cta-arrow-mask) center / 112% 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); } .hp-cta:hover, .hp-cta:focus-visible { outline: none; } .hp-cta:hover::after, .hp-cta:focus-visible::after { width: var(--suki-cta-arrow-size-md); max-width: var(--suki-cta-arrow-size-md); margin-left: var(--suki-cta-arrow-hover-ml); opacity: 1; } /* Taller home / exec / SDK / API hero pills: larger proportional hover arrow */ .hp-cta-row--below-hero .hp-cta::after, .hp-leader-banner-cta::after, .hp-support-need-cta::after, #content-area .wse-next-steps__actions .hp-cta::after { height: var(--suki-cta-arrow-size-lg); } .hp-cta-row--below-hero .hp-cta:hover::after, .hp-cta-row--below-hero .hp-cta:focus-visible::after, .hp-leader-banner-cta:hover::after, .hp-leader-banner-cta:focus-visible::after, .hp-support-need-cta:hover::after, .hp-support-need-cta:focus-visible::after, #content-area .wse-next-steps__actions .hp-cta:hover::after, #content-area .wse-next-steps__actions .hp-cta:focus-visible::after { width: var(--suki-cta-arrow-size-lg); max-width: var(--suki-cta-arrow-size-lg); } .hp-cta:focus-visible { box-shadow: 0 0 0 2px rgba(255, 225, 72, 0.55); } .hp-cta-primary { background: #FFE148; color: #111827 !important; /* No fixed min-width: hover arrow must grow the pill the same way as secondary CTAs. */ min-width: 0; } .hp-cta-primary:hover, .hp-cta-primary:focus-visible { background: #ffe89c; } @media (prefers-reduced-motion: reduce) { .hp-cta, .hp-cta::after { transition-duration: 0.01ms; } } .hp-cta-secondary { background: transparent; color: #6F5410 !important; border: 1.5px solid #6F5410; } .hp-cta-secondary:hover, .hp-cta-secondary:focus-visible { background: transparent; } html.dark .hp-cta-secondary, [data-theme="dark"] .hp-cta-secondary { color: #FFE148 !important; border-color: rgba(255, 225, 72, 0.4); } html.dark .hp-cta-secondary:hover, html.dark .hp-cta-secondary:focus-visible, [data-theme="dark"] .hp-cta-secondary:hover, [data-theme="dark"] .hp-cta-secondary:focus-visible { background: transparent; } /* Business leader + What’s New: spacing when the stack follows the explore block */ .hp-journey-explore + .hp-home-footer-stack { margin-top: 28px; } /* One column: leader strip and releases card share the same width as each other (and `.hp-wrap`). */ .hp-home-footer-stack { align-items: stretch; box-sizing: border-box; display: flex; flex-direction: column; max-width: 100%; min-width: 0; width: 100%; } .hp-home-footer-stack > .hp-leader-banner, .hp-home-footer-stack > .hp-home-learn-wn, .hp-home-footer-stack > .hp-journey-explore--wn, .hp-home-footer-stack > .hp-ext-resources, .hp-home-footer-stack > .hp-support-need, .hp-home-footer-stack > .hp-wn { box-sizing: border-box; flex: 0 0 auto; max-width: 100%; min-width: 0; width: 100%; } /* Stack handles top spacing from Popular resources; extra gap before What’s New */ .hp-home-footer-stack > .hp-leader-banner { margin: 0 0 48px; } .hp-home-footer-stack > .hp-leader-banner .hp-leader-banner-inner { box-sizing: border-box; max-width: 100%; width: 100%; } /* * Popular resources + footer stack: no extra horizontal inset (same rail as `.hp-wrap` + hero). * Stacked (≤900px) uses `1rem` inline padding in HOME PAGE — RESPONSIVE. */ #content-area:has(.hp-wrap) .hp-journey-explore, #content-area:has(.hp-wrap) .hp-journey-explore--wn, #content-area:has(.hp-wrap) .hp-home-learn-wn, #content-area:has(.hp-wrap) .hp-ext-resources, #content-area:has(.hp-wrap) .hp-support-need, #content-area:has(.hp-wrap) .hp-home-footer-stack { box-sizing: border-box; margin-left: 0; margin-right: 0; max-width: 100%; min-width: 0; padding-left: 0; padding-right: 0; width: 100%; } /* Full-width: Popular resources block (horizontal inset from `.hp-wrap`; intro copy bump on laptop+) */ .hp-journey-explore { box-sizing: border-box; margin: 36px 0 0; max-width: 100%; min-width: 0; text-align: left; width: 100%; } /* Line length on intro copy; horizontal bump on laptop+ */ .hp-journey-explore-intro { box-sizing: border-box; margin: 0 0 4px; max-width: 38rem; padding-left: 0; } .hp-journey-explore .hp-journey-lead--explore { margin-bottom: 20px; max-width: 38rem; } .hp-journey-explore .hp-home-features { box-sizing: border-box; margin-top: 0; min-width: 0; padding-bottom: 4px; width: 100%; } /* Learn (left) + What's new (right): half-width columns from center */ .hp-home-learn-wn { align-items: stretch; box-sizing: border-box; column-gap: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; max-width: 100%; min-width: 0; row-gap: 0; width: 100%; } .hp-home-learn, .hp-home-learn-wn > .hp-journey-explore--wn { box-sizing: border-box; display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; min-width: 0; width: 100%; } .hp-home-learn-head { display: block; margin-bottom: 0; } .hp-home-learn-head .hp-journey-explore-intro { margin-bottom: 4px; max-width: 38rem; } .hp-home-learn-head .hp-journey-lead--explore { margin-bottom: 20px; max-width: 38rem; } #content-area .hp-home-learn .hp-journey-title.hp-journey-title--explore { letter-spacing: -0.03em; } /* Learn promo cards: cookbooks + tutorials (screenshot-2 split layout) */ #content-area .hp-home-learn .hp-learn-promo-stack { align-content: stretch; box-sizing: border-box; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; height: 100%; min-height: 0; width: 100%; } #content-area .hp-home-learn a.hp-learn-promo { background: var(--hp-card-surface); border: none; border-radius: 16px; box-sizing: border-box; color: inherit; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(9.5rem, 0.85fr); height: 100%; min-height: 168px; overflow: hidden; position: relative; text-decoration: none; transition: background-color 0.15s ease, box-shadow 0.15s ease; } #content-area .hp-home-learn a.hp-learn-promo:hover, #content-area .hp-home-learn a.hp-learn-promo:focus-visible { background: var(--hp-card-surface-hover); text-decoration: none; } #content-area .hp-home-learn a.hp-learn-promo:focus-visible { box-shadow: 0 0 0 2px rgba(255, 225, 72, 0.55); outline: none; } #content-area .hp-home-learn .hp-learn-promo-copy { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 22px 8px 22px 22px; position: relative; z-index: 1; } #content-area .hp-home-learn .hp-learn-promo-title { /* Match Mintlify Card title (text-base / font-semibold / gray-800) */ color: rgb(26, 25, 23); font-size: 1rem; font-weight: 600; letter-spacing: normal; line-height: 1.5; margin: 0 0 6px; text-transform: none; } html.dark #content-area .hp-home-learn .hp-learn-promo-title, [data-theme="dark"] #content-area .hp-home-learn .hp-learn-promo-title { color: var(--suki-dark-text); } #content-area .hp-home-learn .hp-learn-promo-desc { /* Match Start building / Mintlify Card description (gray-600) */ color: rgb(83, 82, 80); font-size: var(--suki-card-text-size); font-weight: 400; line-height: var(--suki-card-text-lh); margin: 0 0 14px; max-width: 22rem; } html.dark #content-area .hp-home-learn .hp-learn-promo-desc, [data-theme="dark"] #content-area .hp-home-learn .hp-learn-promo-desc { color: var(--suki-dark-text-muted); } #content-area .hp-home-learn .hp-learn-promo-plugins { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } #content-area .hp-home-learn .hp-learn-promo-plugins-label { color: rgb(var(--gray-500, 115 114 112)); font-size: 12px; font-weight: 500; line-height: 1; } html.dark #content-area .hp-home-learn .hp-learn-promo-plugins-label, [data-theme="dark"] #content-area .hp-home-learn .hp-learn-promo-plugins-label { color: var(--suki-dark-text-muted); } #content-area .hp-home-learn .hp-learn-promo-plugin-icons { align-items: center; display: inline-flex; gap: 6px; } #content-area .hp-home-learn .hp-learn-promo-plugin-icon { align-items: center; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; box-sizing: border-box; display: inline-flex; height: 24px; justify-content: center; width: 24px; } #content-area .hp-home-learn .hp-learn-promo-plugin-icon img { display: block; height: 14px; width: 14px; } html.dark #content-area .hp-home-learn .hp-learn-promo-plugin-icon, [data-theme="dark"] #content-area .hp-home-learn .hp-learn-promo-plugin-icon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } html.dark #content-area .hp-home-learn .hp-learn-promo-plugin-icon[data-plugin-brand='codex'] img, html.dark #content-area .hp-home-learn .hp-learn-promo-plugin-icon[data-plugin-brand='cursor'] img, [data-theme="dark"] #content-area .hp-home-learn .hp-learn-promo-plugin-icon[data-plugin-brand='codex'] img, [data-theme="dark"] #content-area .hp-home-learn .hp-learn-promo-plugin-icon[data-plugin-brand='cursor'] img { filter: invert(1); } #content-area .hp-home-learn .hp-learn-promo-foot { align-items: center; display: flex; margin-top: auto; max-width: 22rem; width: 100%; } #content-area .hp-home-learn .hp-learn-promo-count { color: #8a8a8a; font-size: 13px; font-weight: 500; line-height: 1.2; } html.dark #content-area .hp-home-learn .hp-learn-promo-count, [data-theme="dark"] #content-area .hp-home-learn .hp-learn-promo-count { color: rgba(255, 255, 255, 0.45); } #content-area .hp-home-learn a.hp-learn-promo .hp-ext-card-arrow { right: 16px; top: 16px; } #content-area .hp-home-learn a.hp-learn-promo:hover .hp-ext-card-arrow, #content-area .hp-home-learn a.hp-learn-promo:focus-visible .hp-ext-card-arrow { color: #6f5410; } html.dark #content-area .hp-home-learn a.hp-learn-promo:hover .hp-ext-card-arrow, html.dark #content-area .hp-home-learn a.hp-learn-promo:focus-visible .hp-ext-card-arrow, [data-theme="dark"] #content-area .hp-home-learn a.hp-learn-promo:hover .hp-ext-card-arrow, [data-theme="dark"] #content-area .hp-home-learn a.hp-learn-promo:focus-visible .hp-ext-card-arrow { color: #ffe148; } #content-area .hp-home-learn .hp-learn-promo-art { align-items: flex-end; display: flex; justify-content: flex-end; min-width: 0; overflow: hidden; padding: 18px 0 0 0; pointer-events: none; position: relative; } #content-area .hp-home-learn .hp-learn-promo-window { background: #1a1a1a; border-radius: 12px 0 0 0; box-sizing: border-box; margin-right: -8px; min-height: 132px; padding: 12px 14px 18px; position: relative; width: calc(100% + 8px); } #content-area .hp-home-learn .hp-learn-promo-window::after { background: linear-gradient(to bottom, transparent 35%, var(--hp-card-surface) 100%); bottom: 0; content: ''; height: 48%; left: 0; pointer-events: none; position: absolute; right: 0; } #content-area .hp-home-learn a.hp-learn-promo:hover .hp-learn-promo-window::after, #content-area .hp-home-learn a.hp-learn-promo:focus-visible .hp-learn-promo-window::after { background: linear-gradient(to bottom, transparent 35%, var(--hp-card-surface-hover) 100%); } #content-area .hp-home-learn .hp-learn-promo-window-chrome { align-items: center; display: flex; gap: 5px; margin-bottom: 14px; position: relative; } #content-area .hp-home-learn .hp-learn-promo-dot { border-radius: 999px; flex: 0 0 auto; height: 6px; width: 6px; } #content-area .hp-home-learn .hp-learn-promo-dot--red { background: #fb6e6e; } #content-area .hp-home-learn .hp-learn-promo-dot--amber { background: #fbbc33; } #content-area .hp-home-learn .hp-learn-promo-dot--green { background: #49cc6b; } #content-area .hp-home-learn .hp-learn-promo-copy-badge { background: #ffe148; border-radius: 3px; height: 14px; margin-left: auto; width: 14px; } #content-area .hp-home-learn .hp-learn-promo-progress { background: #ffe148; border-radius: 999px; height: 4px; margin-left: auto; width: 36px; } #content-area .hp-home-learn .hp-learn-promo-code-lines { display: flex; flex-direction: column; gap: 8px; } #content-area .hp-home-learn .hp-learn-promo-code-line { background: rgba(255, 255, 255, 0.28); border-radius: 999px; display: block; height: 7px; width: 88%; } #content-area .hp-home-learn .hp-learn-promo-code-line--accent { background: #ffe148; width: 72%; } #content-area .hp-home-learn .hp-learn-promo-code-line--mid { width: 64%; } #content-area .hp-home-learn .hp-learn-promo-code-line--short { width: 48%; } #content-area .hp-home-learn .hp-learn-promo-code-line--wide { width: 82%; } #content-area .hp-home-learn .hp-learn-promo-steps { display: flex; flex-direction: column; gap: 12px; position: relative; } #content-area .hp-home-learn .hp-learn-promo-steps::before { background: rgba(255, 255, 255, 0.16); bottom: 8px; content: ''; left: 7px; position: absolute; top: 8px; width: 2px; } #content-area .hp-home-learn .hp-learn-promo-step { align-items: center; display: flex; gap: 10px; position: relative; z-index: 1; } #content-area .hp-home-learn .hp-learn-promo-step-mark { background: #1a1a1a; border: 2px solid rgba(255, 255, 255, 0.28); border-radius: 999px; box-sizing: border-box; flex: 0 0 auto; height: 16px; position: relative; width: 16px; } #content-area .hp-home-learn .hp-learn-promo-step--done .hp-learn-promo-step-mark { background: #ffe148; border-color: #ffe148; } #content-area .hp-home-learn .hp-learn-promo-step--done .hp-learn-promo-step-mark::after { border-bottom: 1.5px solid #111; border-right: 1.5px solid #111; content: ''; height: 7px; left: 4px; position: absolute; top: 2px; transform: rotate(45deg); width: 4px; } #content-area .hp-home-learn .hp-learn-promo-step--active .hp-learn-promo-step-mark { border-color: #ffe148; box-shadow: inset 0 0 0 3px #1a1a1a; background: #ffe148; } #content-area .hp-home-learn .hp-learn-promo-step-bar { background: rgba(255, 255, 255, 0.28); border-radius: 999px; display: block; height: 6px; width: 78%; } #content-area .hp-home-learn .hp-learn-promo-step-bar--mid { width: 62%; } #content-area .hp-home-learn .hp-learn-promo-step-bar--short { width: 48%; } /* What's new: title outside the bordered list (same pattern as Start here) */ .hp-journey-explore--wn { margin-top: 0; min-width: 0; width: 100%; } .hp-home-learn-wn > .hp-journey-explore--wn { margin-top: 0; } .hp-journey-wn-head { display: block; margin-bottom: 0; } .hp-journey-explore--wn .hp-journey-explore-intro { margin-bottom: 4px; max-width: 38rem; } .hp-journey-explore--wn .hp-journey-lead--explore { margin-bottom: 20px; max-width: 38rem; } #content-area .hp-journey-explore--wn .hp-journey-title.hp-journey-title--explore { letter-spacing: -0.03em; } .hp-journey-explore--wn .hp-wn { box-sizing: border-box; height: 100%; margin-top: 0; min-height: 0; } /* ---- Business leader CTA (inside Choose your integration, full-width row) ---- */ /* Palette: home doc tokens (#141110, #1c1b19, #6F5410, #FFE148). Chevron accent on .hp-leader-banner-inner::before only; no offset shadow slabs. */ .hp-leader-banner { box-sizing: border-box; margin: 32px 0 14px; padding: 0; position: relative; width: 100%; z-index: 0; } .hp-leader-banner::before, .hp-leader-banner::after { display: none; } .hp-leader-banner-inner { align-items: center; background: linear-gradient( 128deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 32%, transparent 55% ), linear-gradient( 105deg, #141110 0%, #1c1b19 38%, #232019 68%, #2c2618 100% ); border: none; border-radius: 16px; box-shadow: none; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 20px 28px; isolation: isolate; justify-content: space-between; overflow: hidden; padding: 24px 32px 24px 34px; position: relative; z-index: 1; } /* Gold chevron plane (reference-style geometry, doc yellow) */ .hp-leader-banner-inner::before { background: linear-gradient( 118deg, rgba(255, 225, 72, 0) 0%, rgba(255, 225, 72, 0.14) 42%, rgba(255, 227, 80, 0.22) 100% ); clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%, 38% 50%); content: ""; inset: -8% -12% -8% 35%; pointer-events: none; position: absolute; z-index: 0; } .hp-leader-banner-copy, .hp-leader-banner-cta { position: relative; z-index: 1; } .hp-leader-banner-copy { display: flex; flex: 1 1 240px; flex-direction: column; gap: 10px; margin: 0; max-width: min(42rem, 72%); min-width: 0; } /* Reference-style: bold headline + smaller regular subline. * Banner chrome is always dark (home + executive) in both themes — keep Mintlify * dark text tokens hardcoded. Do not use --suki-light-* here. */ .hp-leader-banner-line1 { color: #e1e1de; /* gray-200 */ font-size: clamp(16px, 2.05vw, 19px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .hp-leader-banner-line2 { color: #d1d0ce; /* gray-300 — must not depend on html.dark variables */ font-size: var(--suki-card-text-size); font-weight: 400; letter-spacing: -0.01em; line-height: var(--suki-card-text-lh); margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } /* Pin banner copy so light-mode content-area / text-system rules cannot override */ #content-area .hp-leader-banner .hp-leader-banner-line1 { color: #e1e1de !important; } #content-area .hp-leader-banner .hp-leader-banner-line2 { color: #d1d0ce !important; } .hp-leader-banner-icon { color: #ffe148; display: inline-block; height: 1.25em; margin-right: 0.3em; vertical-align: -0.28em; width: 1.25em; } .hp-leader-banner-cta { flex: 0 0 auto; min-width: 0; } /* Roomier pill (overrides default .hp-cta padding for this CTA only) */ #content-area .hp-leader-banner .hp-leader-banner-cta.hp-cta { box-sizing: border-box; min-height: 48px; padding: 14px 28px 14px 30px; } @media (max-width: 640px) { /* Business leader CTA: breathable padding; copy must not flex-grow (see flex rule). */ .hp-leader-banner { margin-bottom: 8px; padding: 0; } /* Match Developer Journey / Popular resources card rail (parent already has 24px). */ .hp-home-footer-stack > .hp-leader-banner { margin: 0 0 36px; padding-inline: 0; } .hp-leader-banner-inner { align-items: stretch; border-radius: 14px; flex-direction: column; gap: 16px; justify-content: flex-start; padding: 18px 18px 20px; } .hp-leader-banner-copy { /* flex: 1 1 240px on base would grow in column layout and create a dead band above CTA */ flex: 0 1 auto !important; gap: 8px; max-width: 100%; } .hp-leader-banner-line1 { font-size: 15px; line-height: 1.35; } .hp-leader-banner-cta { justify-content: center; width: 100%; } #content-area .hp-leader-banner .hp-leader-banner-cta.hp-cta { min-height: 46px; padding: 12px 22px 12px 24px; } } /* ---- Badges ---- */ /* ---- Home feature cards ---- */ /* ---- What's New ---- */ /* home page release change — timeline layout (undo with home.mdx comment block) */ .hp-wn { --hp-gs-ease: cubic-bezier(.2, .7, .2, 1); background: transparent; border: none; border-radius: 0; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: visible; width: 100%; } .hp-wn-timeline { display: grid; flex: 1 1 auto; gap: 0 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0 0 16px; min-height: 0; padding: 0; position: relative; width: 100%; } #content-area .hp-wn-timeline > li { list-style: none !important; margin: 0; padding-left: 0; padding-right: 0; padding-top: 0; } #content-area .hp-wn-timeline > li::before, #content-area .hp-wn-timeline > li::marker { content: none !important; display: none !important; } .hp-wn-col { display: flex; flex-direction: column; gap: 0; min-width: 0; position: relative; } .hp-wn-col-label { margin-bottom: 10px; min-height: 1.35em; } .hp-wn-month { align-items: center; background: none; border: none; border-radius: 0; box-shadow: none; color: rgb(var(--gray-500, 115 114 112)); display: inline-flex; font-size: 12px; font-weight: 500; gap: 0.35em; letter-spacing: 0.01em; line-height: 1.35; margin: 0; padding: 0; white-space: nowrap; } .hp-wn-col--current .hp-wn-month { color: rgb(var(--gray-900, 26 25 23)); font-weight: 700; } html.dark .hp-wn-month, [data-theme="dark"] .hp-wn-month { background: none; border: none; box-shadow: none; color: var(--suki-dark-text-muted); } html.dark .hp-wn-col--current .hp-wn-month, [data-theme="dark"] .hp-wn-col--current .hp-wn-month { color: var(--suki-dark-text); } /* Rail + dots (grey past → yellow from current month) */ .hp-wn-col-rail { align-items: center; display: flex; height: 14px; margin-bottom: 14px; position: relative; width: 100%; } .hp-wn-col-rail::before { background: #d4d4d4; content: ""; height: 1.5px; left: 0; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); } .hp-wn-col:last-child .hp-wn-col-rail::before { right: 0; } .hp-wn-col--current .hp-wn-col-rail::before, .hp-wn-col--current ~ .hp-wn-col .hp-wn-col-rail::before { background: #ffe148; } .hp-wn-col--current .hp-wn-col-rail::before { left: 5px; } .hp-wn-dot { background: #fff; border: 1.5px solid #d4d4d4; border-radius: 999px; box-sizing: border-box; display: block; flex-shrink: 0; height: 10px; position: relative; width: 10px; z-index: 1; } .hp-wn-col--current .hp-wn-dot { background: #ffe148; border-color: #ffe148; box-shadow: 0 0 0 1.5px rgba(26, 25, 23, 0.85); height: 11px; width: 11px; } html.dark .hp-wn-col-rail::before, [data-theme="dark"] .hp-wn-col-rail::before { background: #4b5563; } html.dark .hp-wn-col--current .hp-wn-col-rail::before, html.dark .hp-wn-col--current ~ .hp-wn-col .hp-wn-col-rail::before, [data-theme="dark"] .hp-wn-col--current .hp-wn-col-rail::before, [data-theme="dark"] .hp-wn-col--current ~ .hp-wn-col .hp-wn-col-rail::before { background: #ffe148; } html.dark .hp-wn-dot, [data-theme="dark"] .hp-wn-dot { background: #1c1b19; border-color: #4b5563; } html.dark .hp-wn-col--current .hp-wn-dot, [data-theme="dark"] .hp-wn-col--current .hp-wn-dot { background: #ffe148; border-color: #ffe148; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55); } .hp-wn-col-items { display: flex; flex: 1 1 auto; flex-direction: column; gap: 18px; min-width: 0; } .hp-wn-item { align-items: flex-start; background: transparent; border: none; border-radius: 0; box-sizing: border-box; color: inherit; display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; padding: 0; position: relative; text-decoration: none !important; transition: opacity 0.15s ease; } .hp-wn-item:hover, .hp-wn-item:focus-visible { outline: none; opacity: 0.88; } .hp-wn-item .hp-wn-badge.hp-wn-badge-new { border-radius: 4px !important; margin-bottom: 2px; padding: 0.28rem 0.65rem !important; } /* Shared New pill tokens (cookbooks, tutorials, hubs, home) */ .hp-wn-badge { flex-shrink: 0; margin-top: 2px; } .hp-wn-badge.hp-wn-badge-new { align-items: center; align-self: flex-start; background: #ffe148 !important; border: none !important; border-radius: 3px !important; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08) !important; color: var(--suki-light-text) !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; padding: 0.24rem 0.55rem !important; text-transform: uppercase; } .hp-wn-badge.hp-wn-badge-new::before { content: none !important; display: none !important; } html.dark .hp-wn-badge.hp-wn-badge-new, [data-theme="dark"] .hp-wn-badge.hp-wn-badge-new { background: #ffe148 !important; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.14) !important; color: #0a0a0a !important; } /* clock change — What's New month clock (text-sized; hover on column) */ .hp-wn-month-clock { color: inherit; display: inline-flex; flex: 0 0 auto; line-height: 0; } .hp-wn-month-clock .hp-gs-ico--clock { display: block; height: 1em; overflow: visible; width: 1em; } .hp-wn-month-clock .hp-gs-hand { transform-box: view-box; transform-origin: 12px 12px; transition: transform .9s var(--hp-gs-ease); } .hp-wn-month-clock .hp-gs-hand--hour { transition-duration: 1s; } .hp-wn-col:hover .hp-wn-month-clock .hp-gs-hand--minute, .hp-wn-col:focus-within .hp-wn-month-clock .hp-gs-hand--minute { transform: rotate(360deg); } .hp-wn-col:hover .hp-wn-month-clock .hp-gs-hand--hour, .hp-wn-col:focus-within .hp-wn-month-clock .hp-gs-hand--hour { transform: rotate(30deg); } @media (prefers-reduced-motion: reduce) { .hp-wn-month-clock .hp-gs-hand { transition: none; } } .hp-wn-title { color: rgb(26, 25, 23); font-size: 1rem; font-weight: 600; letter-spacing: normal; line-height: 1.35; } .hp-wn-product { align-items: baseline; color: rgb(var(--gray-500, 115 114 112)); display: flex; flex-wrap: wrap; font-size: 12px; font-weight: 500; gap: 0.4em; letter-spacing: 0.01em; line-height: 1.35; } /* Version chip next to product (smaller than adjacent product label) */ .hp-wn-ver { background: rgba(255, 225, 72, 0.4); border-radius: 3px; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.06); color: #6f5410; display: inline-flex; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.15; padding: 0.08em 0.35em; position: relative; top: -1px; white-space: nowrap; } .hp-wn-desc { color: rgb(83, 82, 80); display: block; font-size: var(--suki-card-text-size); font-weight: 400; line-height: var(--suki-card-text-lh); } .hp-wn-foot { align-items: center; border-top: 1px solid rgba(28, 27, 25, 0.12); box-sizing: border-box; display: flex; flex-shrink: 0; justify-content: space-between; margin-top: auto; padding-top: 14px; width: 100%; } .hp-wn-year { color: rgb(var(--gray-500, 115 114 112)); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; } /* Match `.hp-io-link` for All Release Notes */ .hp-wn-all { align-items: center; background: transparent; border: none; border-radius: 0; box-shadow: none; color: #6f5410 !important; display: inline-flex; font-size: 14px; font-weight: 700; gap: 0; justify-content: flex-start; margin: 0; padding: 0; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; transition: color 0.15s ease; } .hp-wn-all:hover, .hp-wn-all:focus-visible { background: transparent; box-shadow: none; color: #4a380b !important; outline: none; text-decoration: underline !important; } .hp-wn-all:focus-visible { border-radius: 2px; box-shadow: 0 0 0 2px rgba(255, 225, 72, 0.55); } /* * Phone / stacked: vertical timeline (Screenshot 3). * Newest month on top via column-reverse; left rail + dots stay visible. * Matches Learn|WN stack at 900px. */ @media (max-width: 900px) { .hp-wn-timeline { display: flex; flex-direction: column-reverse; gap: 0; } .hp-wn-col { column-gap: 14px; display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: auto auto; /* Extra air between months (August ↔ July), matches vertical mock */ padding-bottom: 44px; } .hp-wn-col:first-child { padding-bottom: 12px; } .hp-wn-col-label { grid-column: 2; grid-row: 1; margin-bottom: 12px; min-height: 0; } .hp-wn-col-rail { align-items: flex-start; grid-column: 1; grid-row: 1 / -1; height: auto; justify-content: flex-start; margin: 0; padding-top: 3px; width: 14px; } .hp-wn-col-rail::before { bottom: -44px; height: auto; left: 50%; right: auto; top: 8px; transform: translateX(-50%); width: 1.5px; } .hp-wn-col:first-child .hp-wn-col-rail::before { bottom: 4px; } .hp-wn-col--current .hp-wn-col-rail::before { background: #ffe148; left: 50%; } .hp-wn-dot { margin-left: auto; margin-right: auto; } .hp-wn-col-items { grid-column: 2; grid-row: 2; gap: 24px; } .hp-wn-foot { margin-top: 20px; } } /* External Resources: featured + 2x2 blog cards (Okta-style) */ .hp-ext-resources { box-sizing: border-box; margin-top: 48px; max-width: 100%; min-width: 0; width: 100%; } .hp-ext-resources > .hp-journey-explore-intro { margin-bottom: 4px; max-width: 38rem; } .hp-ext-resources .hp-journey-lead--explore { margin-bottom: 20px; max-width: 38rem; } #content-area .hp-ext-resources .hp-journey-title.hp-journey-title--explore { letter-spacing: -0.03em; } .hp-ext-resources-grid { align-items: stretch; box-sizing: border-box; column-gap: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 550px; max-height: 550px; max-width: 100%; min-width: 0; row-gap: 16px; width: 100%; } .hp-ext-resources-side { align-content: stretch; box-sizing: border-box; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; height: 100%; min-height: 0; min-width: 0; } #content-area a.hp-ext-card, #content-area a.hp-ext-card:hover, #content-area a.hp-ext-card:focus, #content-area a.hp-ext-card:focus-visible { box-sizing: border-box; color: inherit; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; position: relative; text-decoration: none !important; } #content-area a.hp-ext-card { background: var(--hp-card-surface); border-radius: 16px; height: 100%; transition: background-color 0.15s ease, box-shadow 0.15s ease; } #content-area a.hp-ext-card:hover, #content-area a.hp-ext-card:focus-visible { background: var(--hp-card-surface-hover); } #content-area a.hp-ext-card:focus-visible { box-shadow: 0 0 0 2px rgba(255, 225, 72, 0.55); outline: none; } /* Match Mintlify / What's new corner arrow (12px glyph) */ .hp-ext-card-arrow { color: #9ca3af; display: inline-flex; line-height: 0; pointer-events: none; position: absolute; right: 14px; top: 14px; transition: color 0.15s ease; z-index: 2; } .hp-ext-card-arrow svg { display: block; height: 12px; margin: 2px; width: 12px; } #content-area a.hp-ext-card:hover .hp-ext-card-arrow, #content-area a.hp-ext-card:focus-visible .hp-ext-card-arrow { color: #6f5410; } /* Featured: 550px grid; media 65% / body 35%; image centered, no zoom */ #content-area a.hp-ext-card.hp-ext-card--featured { display: grid; grid-template-rows: minmax(0, 65fr) minmax(0, 35fr); height: 100%; min-height: 100%; } .hp-ext-card-media { background: #d1eeff; flex: none; line-height: 0; min-height: 0; overflow: hidden; width: 100%; } .hp-ext-card--featured .hp-ext-card-media { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } .hp-ext-card-media img { display: block; height: auto; margin: 0 auto; max-height: 100%; max-width: 100%; object-fit: contain; object-position: center center; transform: none; width: auto; } .hp-ext-card--featured .hp-ext-card-media img { height: auto; margin: 0 auto; max-height: 50%; max-width: 50%; object-fit: contain; object-position: center center; transform: none; width: auto; } .hp-ext-card-body { box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; justify-content: flex-start; min-height: 0; padding: 14px 16px 12px; } .hp-ext-card--featured .hp-ext-card-body { gap: 8px; height: 100%; padding: 16px 18px 14px; } .hp-ext-card-eyebrow { color: rgb(83, 82, 80); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; margin: 0; padding-right: 28px; } /* Match Mintlify / What's new card title */ .hp-ext-card-title { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: rgb(26, 25, 23); display: -webkit-box; flex: 1 1 auto; font-size: var(--suki-card-title-size); font-weight: 600; letter-spacing: normal; line-height: var(--suki-card-title-lh); margin: 0; overflow: hidden; padding-right: 8px; } .hp-ext-card--featured .hp-ext-card-title { -webkit-line-clamp: 4; } /* Side cards: larger titles, shifted down so the card feels fuller */ .hp-ext-resources-side .hp-ext-card-body { gap: 10px; justify-content: flex-start; padding: 28px 18px 16px; } .hp-ext-resources-side .hp-ext-card-title { -webkit-line-clamp: 4; flex: 0 1 auto; margin-top: 6px; } /* Phones: one blog card per row so card titles fit without clipping words. */ @media (max-width: 640px) { .hp-ext-resources-side { grid-template-columns: minmax(0, 1fr); } } .hp-ext-card-link { color: rgb(26, 25, 23); display: inline-block; flex: 0 0 auto; font-size: 13px; font-weight: 500; line-height: 1.3; margin-top: auto; padding-top: 4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; width: fit-content; } /* Support need: Okta-style split (CTA left + additional support card). * Same 2-col + 16px gap as `.hp-ext-resources-grid` so Additional Support * matches the right column edges of External Resources above. */ .hp-support-need { align-items: stretch; box-sizing: border-box; column-gap: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 56px; max-width: 100%; min-width: 0; width: 100%; } .hp-support-need-left { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 8px 0; } .hp-support-need-title { color: rgb(26, 25, 23); font-size: 2.375rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 14px; max-width: 34rem; } .hp-support-need-lead { color: rgb(83, 82, 80); font-size: var(--suki-prose-size); font-weight: 400; line-height: var(--suki-prose-lh); margin: 0 0 28px; max-width: 32rem; } /* Match New to Suki for Partners / shared hp-cta-primary (font, hover arrow, colors) */ #content-area a.hp-support-need-cta { align-self: flex-start; box-sizing: border-box; min-height: 48px; min-width: 280px; padding: 14px 28px 14px 30px; width: fit-content; } .hp-support-need-right { background: #f4f4f4; border-radius: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 28px; justify-content: center; min-width: 0; padding: 32px 36px; } .hp-support-need-right-eyebrow { color: rgb(83, 82, 80); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.2; margin: 0; text-transform: uppercase; } .hp-support-need-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hp-support-need-item-q { color: rgb(26, 25, 23); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin: 0; } #content-area a.hp-support-need-item-link, #content-area a.hp-support-need-item-link:hover, #content-area a.hp-support-need-item-link:focus, #content-area a.hp-support-need-item-link:focus-visible { align-items: center; color: rgb(26, 25, 23); display: inline-flex; font-size: 0.9375rem; font-weight: 400; gap: 6px; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; width: fit-content; } #content-area a.hp-support-need-item-link:focus-visible { border-radius: 2px; box-shadow: 0 0 0 2px rgba(255, 225, 72, 0.55); outline: none; } /* ===== styles/16-home-dark-mode.css ===== */ /* ======================================== HOME PAGE — DARK MODE ======================================== */ html.dark .hp-wn, [data-theme="dark"] .hp-wn { background: transparent; border: none; } html.dark .hp-wn-title, [data-theme="dark"] .hp-wn-title { color: var(--suki-dark-text); } html.dark .hp-wn-product, [data-theme="dark"] .hp-wn-product { color: var(--suki-dark-text-muted); } html.dark .hp-wn-ver, [data-theme="dark"] .hp-wn-ver { background: rgba(255, 225, 72, 0.22); box-shadow: 0 0 0 1px rgba(255, 225, 72, 0.35); color: #ffe148; } html.dark .hp-wn-desc, [data-theme="dark"] .hp-wn-desc { color: var(--suki-dark-text-muted); } html.dark .hp-wn-foot, [data-theme="dark"] .hp-wn-foot { border-top-color: rgba(255, 255, 255, 0.12); } html.dark .hp-wn-year, [data-theme="dark"] .hp-wn-year { color: var(--suki-dark-text-muted); } html.dark .hp-wn-all, [data-theme="dark"] .hp-wn-all { border: none; color: #ffe148 !important; } html.dark .hp-wn-all:hover, html.dark .hp-wn-all:focus-visible, [data-theme="dark"] .hp-wn-all:hover, [data-theme="dark"] .hp-wn-all:focus-visible { background: transparent; color: #fff394 !important; } /* Featured blog media keeps light-mode blue so the graphic stays readable. */ html.dark .hp-ext-card-media, [data-theme="dark"] .hp-ext-card-media { background: #d1eeff; } html.dark .hp-ext-card-eyebrow, [data-theme="dark"] .hp-ext-card-eyebrow { color: var(--suki-dark-text-muted); } html.dark .hp-ext-card-title, html.dark .hp-ext-card-link, [data-theme="dark"] .hp-ext-card-title, [data-theme="dark"] .hp-ext-card-link { color: var(--suki-dark-text); } html.dark .hp-ext-card-arrow, [data-theme="dark"] .hp-ext-card-arrow { color: #9ca3af; } html.dark #content-area a.hp-ext-card:hover .hp-ext-card-arrow, html.dark #content-area a.hp-ext-card:focus-visible .hp-ext-card-arrow, [data-theme="dark"] #content-area a.hp-ext-card:hover .hp-ext-card-arrow, [data-theme="dark"] #content-area a.hp-ext-card:focus-visible .hp-ext-card-arrow { color: #ffe148; } html.dark .hp-support-need-title, [data-theme="dark"] .hp-support-need-title { color: var(--suki-dark-text); } html.dark .hp-support-need-lead, html.dark .hp-support-need-right-eyebrow, [data-theme="dark"] .hp-support-need-lead, [data-theme="dark"] .hp-support-need-right-eyebrow { color: var(--suki-dark-text-muted); } html.dark .hp-support-need-right, [data-theme="dark"] .hp-support-need-right { background: rgba(255, 255, 255, 0.06); } html.dark .hp-support-need-item-q, html.dark #content-area a.hp-support-need-item-link, [data-theme="dark"] .hp-support-need-item-q, [data-theme="dark"] #content-area a.hp-support-need-item-link { color: var(--suki-dark-text); } /* ===== styles/17-home-responsive.css ===== */ /* ======================================== HOME PAGE — RESPONSIVE ======================================== */ @media (max-width: 900px) { /* Home column: fill `#content-area` width (frame + responsive mode); do not keep desktop `80vw` cap */ #content-area:has(.hp-wrap) .hp-wrap { max-width: 100%; } /* Learn + What's new: stack on narrow viewports */ .hp-home-learn-wn { column-gap: 0; gap: 32px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .hp-ext-resources-grid { grid-template-columns: minmax(0, 1fr); height: auto; max-height: none; } .hp-ext-resources-side { grid-template-rows: none; height: auto; } #content-area a.hp-ext-card.hp-ext-card--featured { grid-template-rows: auto auto; height: auto; min-height: 0; } .hp-ext-card--featured .hp-ext-card-media { height: auto; min-height: 0; padding: 20px 16px; } .hp-ext-card--featured .hp-ext-card-media img { height: auto; max-height: 140px; max-width: 48%; object-fit: contain; transform: none; width: auto; } #content-area .hp-ext-resources-side a.hp-ext-card { height: auto; min-height: 140px; } .hp-support-need { column-gap: 0; gap: 28px; grid-template-columns: minmax(0, 1fr); } .hp-support-need-title { font-size: 1.875rem; max-width: none; } .hp-support-need-right { padding: 24px 22px; } #content-area a.hp-support-need-cta { align-self: stretch; box-sizing: border-box; justify-content: center; margin-left: 0; margin-right: 0; max-width: 100%; min-width: 0; padding-left: 24px; padding-right: 24px; width: 100%; } .hp-home-learn, .hp-home-learn-wn > .hp-journey-explore--wn { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; } #content-area .hp-home-learn .hp-learn-promo-stack { grid-template-rows: none; height: auto; } #content-area .hp-home-learn a.hp-learn-promo { grid-template-columns: minmax(0, 1.2fr) minmax(7.5rem, 0.8fr); height: auto; min-height: 156px; } #content-area .hp-home-learn .hp-learn-promo-copy { padding: 18px 6px 18px 18px; } /* Phone: widen the home rail by reducing side gutters (documentation/home only). */ #content-area:has(.hp-wrap:not(.api-overview-wrap):not(.release-notes-hp-wrap):not(.glossary-hp-wrap):not(.cookbook-hp-wrap):not(.tut-hub-hp-wrap):not(.docs-frame-wrap)) .hp-wrap { padding-left: 12px; padding-right: 12px; } #content-area:has(.hp-wrap) .hp-hero-bleed { margin-bottom: 18px; } /* * Tablet stacked home only (not phone): one horizontal band for journey / * workflow / tabs / code. On ≤640px these zero-padding rules leave copy * flush to the viewport — phone gutters stay on the 640px home inset block. */ @media (min-width: 641px) { /* Popular resources + leader / What’s New: same horizontal band as journey */ #content-area:has(.hp-wrap) .hp-journey-explore, #content-area:has(.hp-wrap) .hp-home-footer-stack { padding-left: 0 !important; padding-right: 0 !important; } } } @media (max-width: 768px) { .hp-wrap { padding: 24px 24px 40px; } .hp-cta-row { justify-content: center; } } /* Home hero: phone-only (must come after HOME PAGE — RESPONSIVE and <=768 rules). */ @media (max-width: 640px) { /* Full-bleed hero already spans the wrap; keep side margins at 0. */ #content-area:has([data-hp-home-hero]) .hp-wrap > .hp-hero-bleed { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } } @media (max-width: 540px) { .hp-wrap { padding: 16px 16px 32px; } .hp-cta-row { flex-direction: column; align-items: center; } .hp-cta { width: 100%; text-align: center; } } @media (min-width: 768px) { button[data-testid="mode-switch-system"], button[data-testid="mode-switch-light"], button[data-testid="mode-switch-dark"] { display: none !important; } } /* * Mintlify #navbar: default is two rows (top bar + .nav-tabs). Merge into one row on lg+. * DOM: .z-10.relative > (.hidden.lg:flex.h-12 > logo | search | actions) + (.bg-gray-50 > .nav-tabs) */ @media (min-width: 1024px) { /* suki.ai desktop header row (--header-height-raw: 67px). Sticky offsets below read this. */ :root { --suki-nav-row-h: 67px; } #navbar .z-10.relative { /* nav change: stretch so tabs can fill full navbar height (Suki selection) */ align-items: stretch !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0.5rem 1rem; height: var(--suki-nav-row-h); min-height: var(--suki-nav-row-h); padding-left: 2rem; padding-right: 1.5rem; } /* Top bar’s three columns become siblings of the tab strip in this flex row */ #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 { display: contents !important; } /* * Logo / search / actions columns use Mintlify `h-full`. With the merged one-row * navbar (`display: contents` on the h-12 wrapper), that percentage height locks * to the logo’s 40px box and blocks align-self:stretch — logo sits flush to the * top with a gap under it. height:auto lets stretch fill the row so * align-items:center can optically center the wordmark. */ /* No Mintlify pr-2: the first tab starts 32px after the logo, as on suki.ai. */ #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(1) { align-items: center !important; align-self: stretch !important; display: flex !important; flex: 0 0 auto; height: auto !important; min-width: 0; order: 1; padding-right: 0 !important; } /* Search + Ask AI: left-align in the flexible slot (was center, looked detached from tabs). */ #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(2) { align-items: center !important; align-self: stretch !important; display: flex !important; flex: 1 1 auto; gap: 0.5rem; height: auto !important; justify-content: flex-start !important; min-width: 0; order: 3; } #navbar .z-10.relative > div.hidden.lg\:flex.items-center.h-12 > div:nth-child(3) { align-items: center !important; align-self: stretch !important; display: flex !important; flex: 0 0 auto; height: auto !important; min-width: 0; order: 4; } /* * nav change: stretch tab strip to full navbar height so selection * fill + bottom bar touch top and bottom (Suki.ai), not a short centered chip. */ #navbar .z-10.relative > div.bg-gray-50:has(.nav-tabs) { align-items: stretch !important; align-self: stretch !important; background: transparent !important; box-shadow: none !important; display: flex !important; flex: 0 1 auto; min-width: 0; order: 2; } #navbar .z-10.relative > div.bg-gray-50:has(.nav-tabs) > div { align-items: stretch !important; background: transparent !important; border-bottom: none !important; display: flex !important; height: auto !important; justify-content: flex-start !important; min-height: 100% !important; padding-left: 0 !important; padding-right: 0 !important; width: auto !important; } #navbar .nav-tabs { align-self: stretch !important; flex-wrap: nowrap; height: 100% !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; min-width: 0; } /* Tab font/padding: set in pill block below so and SDKs