style.css

#intro-video {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: 8px;
  margin: 2rem auto;
}

@container (max-width: 720px) {
  #intro-video {
    width: 100%;
    margin: 1rem auto;
  }
}

/* ============================================================
   Custom landing page (mode: frame)
   ============================================================ */

/* `mode: frame` gives the page the whole content area with no inset, so the
   landing starts where docs7 starts the article on other pages: the page
   gutter below lg (PAGE_GUTTER in docs7's renderer/lib/page-gutter.ts), then
   the article column's inset. Update these if docs7 changes them. */
.u-wrap {
  --u-inset: 1.5rem;
  box-sizing: content-box;
  max-width: 63.75rem;
  padding: 0 var(--u-inset) 6rem;
}
@media (width >= 40rem) {
  .u-wrap {
    --u-inset: 2.25rem;
  }
}
@media (width >= 48rem) {
  .u-wrap {
    --u-inset: 2.75rem;
  }
}
@media (width >= 64rem) {
  .u-wrap {
    --u-inset: var(--docs-column-gap);
  }
}
@media (width >= 80rem) {
  .u-wrap {
    --u-inset: calc(var(--docs-column-gap) + var(--docs-panel-inset));
  }
}

/* In `mode: frame` Mintlify keeps the left sidebar but STILL reserves a 28rem
   right column for the table of contents, which frame hides, leaving it empty and
   squishing the content. On the Get Started landing we collapse that empty column
   and let content use the full width. Scoped with Mintlify's documented
   data-current-path hook (only the /introduction page). NOTE: still targets
   Mintlify-internal ids (#content-area / #content-side-layout); revisit if a
   Mintlify upgrade renames them. Collapse to zero width, not display:none (which
   broke the sticky sidebar, making it render scrolled on load).
   2026-07: production's renderer no longer has #content-side-layout (rule is
   inert there, frame mode fills the width natively now), but local `mint dev`
   still renders it; keep until the CLI catches up. */
html[data-current-path="/introduction"] #content-side-layout {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}
html[data-current-path="/introduction"] #content-area {
  width: 100% !important;
}

/* The landing body is client-rendered (imported MDX snippet components are not
   SSR'd), so on a hard load the content area is empty at first paint. That let
   the footer sit inside the viewport, where Mintlify's footer-avoidance —
   which sets a negative inline `top` on the fixed #sidebar and only re-runs on
   scroll — pinned the sidebar above the viewport; when the body then hydrated
   and the footer moved out of view, nothing re-ran the handler and the sidebar
   stayed stuck showing only the tail of the nav. Reserve a viewport of height
   from the first paint so the footer can never be in view while the body is
   still empty. Must be #content[data-page-href]: it is server-rendered with
   the real path, while html[data-current-path] SSRs as "/" and is only stamped
   after hydration - too late. Local `mint dev` stamps the attribute with its
   build path ("/src/_props/introduction"), hence the second selector. Don't
   collapse them into [data-page-href$="/introduction"]: that would also match
   pages like /redis/search/introduction. */
#content[data-page-href="/introduction"],
#content[data-page-href="/src/_props/introduction"] {
  min-height: 100vh;
}


/* ---- Hero ---- */
.u-hero {
  padding: 3.125rem 0 0;
}
.u-hero h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.u-hero p {
  margin: 0.5rem 0 0;
  max-width: 34.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #737373;
}
.dark .u-hero p {
  color: #a3a3a3;
}

/* Strong heading/title color. Mintlify's base content text is a muted gray
   (text-gray-500 / dark:text-gray-400) which washes out our large headings.
   Override so headings read crisp in both themes. */
.u-hero h1,
.u-section h2,
.u-card__title {
  color: #262626;
}
.dark .u-hero h1,
.dark .u-section h2,
.dark .u-card__title {
  color: #f4f5f6;
}

.u-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.u-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 2.625rem;
  min-height: 2.625rem;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 2.5rem;
  font-family: inherit;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.u-action:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}
.u-action--primary {
  background: #262626;
  color: #fff;
}
.u-action--primary:hover {
  background: #27272a;
}
.dark .u-action--primary {
  background: #f4f4f5;
  color: #18181b;
}
.dark .u-action--primary:hover {
  background: #e4e4e7;
}
/* `npx upstash` command box, after Context7's: "$ npx upstash  [copy] | Agent Setup".
   The text is plain markup; the copy button is a real fenced code block with
   everything but its copy chip hidden, so the renderer's own button (and its
   copied state) does the copying. Docs7 renders .code-block > .code-surface >
   .relative > (.code-chip + .code-scroll). */
.u-command {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.625rem;
  padding: 0 1.125rem 0 1.125rem;
  border: 1px solid #e5e5e5;
  border-radius: 2.5rem;
  background: #fafafa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.dark .u-command {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Only the code block's copy button shows; the command text above is ours. */
.u-command__copy,
.u-command__copy > * {
  margin: 0 !important;
}
.u-command__copy .code-block,
.u-command__copy .code-surface {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.u-command__copy .code-scroll,
.u-command__copy pre {
  display: none !important;
}
.u-command__copy .code-chip {
  position: static !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.u-command__text {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9375rem;
  color: #262626;
  white-space: nowrap;
}
.dark .u-command__text {
  color: #f4f4f5;
}
.u-command__dollar {
  color: #10b981;
}
.u-command__link {
  padding-left: 0.75rem;
  border-left: 1px solid #e5e5e5;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: #262626 !important;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.u-command__link:hover {
  text-decoration-color: currentColor;
}
.dark .u-command__link {
  border-left-color: rgba(255, 255, 255, 0.16);
  color: #f4f4f5 !important;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.u-hero p.u-hero__hint {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #8a8a8a;
}
.dark .u-hero p.u-hero__hint {
  color: #8b8b8b;
}
.u-prompt-action .prompt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}
.u-prompt-action .prompt > div + div {
  display: none;
}
.u-prompt-action .prompt button {
  position: absolute;
  z-index: 2;
  inset: 0;
  justify-content: flex-end;
  width: 13.125rem;
  height: 2.625rem;
  min-height: 2.625rem;
  padding: 0 1.25rem 0 6rem;
  border: 1px solid #e5e5e5;
  border-radius: 2.5rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1;
  color: #262626;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.u-prompt-action .prompt button:hover {
  color: #262626;
  background: #fafafa;
  border-color: #d4d4d4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.dark .u-prompt-action .prompt button {
  color: #f4f4f5;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.dark .u-prompt-action .prompt button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.u-prompt-action {
  position: relative;
  width: 13.125rem;
  height: 2.625rem;
}
.u-prompt-action .prompt button > span:has(svg) {
  display: none;
}
.u-prompt-tools {
  position: absolute;
  z-index: 3;
  top: 0.3125rem;
  left: 0.375rem;
  display: flex;
  width: 5rem;
  height: 2rem;
  pointer-events: none;
}
.u-prompt-tool {
  display: grid;
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
  color: #262626;
  background: #fff;
}
.u-prompt-tool + .u-prompt-tool {
  margin-left: -0.5rem;
}
.u-prompt-tool svg {
  width: 1.375rem;
  height: 1.375rem;
}
.dark .u-prompt-tool {
  border-color: rgba(255, 255, 255, 0.16);
  color: #f4f4f5;
  background: #18181b;
}

/* ---- Section headings ---- */
.u-section {
  margin-top: 4rem;
}
.u-section--divider {
  padding-top: 4rem;
  border-top: 1px solid #e5e5e5;
}
.dark .u-section--divider {
  border-top-color: #27272a;
}
.u-section h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
/* Mintlify renders the sub as <p> or <span> depending on content, so target
   the class only and force block display. */
.u-section .u-sub {
  display: block;
  margin: 0.25rem 0 0;
  color: #737373;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.dark .u-section .u-sub {
  color: #a3a3a3;
}
.u-section .u-sub a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.u-section .u-sub a:hover {
  color: #059669;
}
.dark .u-section .u-sub a:hover {
  color: #34d399;
}

/* ---- Grids ---- */
.u-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* auto-fill so columns respond to the actual available width (works whether the
   page is full-bleed `custom` or narrowed by the `frame` sidebar). */
.u-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.u-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* fixed-column variants (don't reflow to more columns on very wide layouts) */
.u-grid--fixed2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.u-grid--fixed3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.u-grid--fixed4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .u-grid--fixed3,
  .u-grid--fixed4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .u-grid--fixed2,
  .u-grid--fixed3,
  .u-grid--fixed4 {
    grid-template-columns: 1fr;
  }
}

/* ---- Cards ---- */
.u-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.dark .u-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.u-card:hover {
  border-color: #d4d4d4;
}
.dark .u-card:hover {
  border-color: #52525b;
}
.u-card--static:hover {
  border-color: rgba(0, 0, 0, 0.08);
}
.dark .u-card--static:hover {
  border-color: rgba(255, 255, 255, 0.1);
}
.u-card__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  /* override Mintlify prose <img> margins that otherwise inflate the card and
     push the icon off the top */
  margin: 0 !important;
  align-self: flex-start;
  /* let clicks pass through to the card link instead of triggering Mintlify's
     image zoom */
  pointer-events: none;
}
.u-card__icon--muted {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.dark .u-card__icon--muted {
  color: var(--primary-light);
  background: color-mix(in srgb, var(--primary-light) 10%, transparent);
}
.u-card__lang-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.u-card__icon--brand {
  width: 2rem;
  height: 2rem;
  border-radius: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}
.u-card__body {
  min-width: 0;
}
.u-card__title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}
.u-card__desc {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #626d7a;
}
.dark .u-card__desc {
  color: #aab2bf;
}

/* ---- Product cards (larger) ---- */
.u-product .u-card__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0;
  align-self: center;
}
.u-product,
.u-tool,
.u-community {
  min-height: 5.125rem;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #e5e5e5;
  border-radius: 1.25rem;
  background: #fafafa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.u-product .u-card__title,
.u-tool .u-card__title,
.u-community .u-card__title {
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
}
.u-product .u-card__desc,
.u-tool .u-card__desc,
.u-community .u-card__desc {
  margin-top: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #737373;
}
.dark .u-product,
.dark .u-tool,
.dark .u-community {
  border-color: #3f3f46;
  background: rgba(255, 255, 255, 0.04);
}
.dark .u-product .u-card__desc,
.dark .u-tool .u-card__desc,
.dark .u-community .u-card__desc {
  color: #a3a3a3;
}

/* ---- Console showcase ---- */
.u-console {
  margin-top: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background: #f7f8fa;
}
.dark .u-console {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.u-console img {
  display: block;
  width: 100%;
  height: 13rem;
  object-fit: cover;
  object-position: top center;
}
.u-console__cap {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #626d7a;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .u-console__cap {
  color: #98a2b3;
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ---- Agent grid (agent-resources/overview) ---- */
.u-agents {
  margin: 1.5rem 0 2rem;
}
.u-card--stack {
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
}
.u-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.u-card__brand-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #18181b;
}
.dark .u-card__brand-icon {
  color: #fafafa;
}
.u-card__brand-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
/* Mintlify adds a `.link` class (green border-bottom) and prose colors to every
   anchor on regular pages; override both for the card. */
.u-card--stack {
  color: #111827 !important;
  text-decoration: none !important;
  border-bottom-width: 1px !important;
}
.dark .u-card--stack {
  color: #f9fafb !important;
}
/* always exactly 3 lines tall; longer text is clamped with an ellipsis */
.u-card--stack .u-card__desc {
  font-size: 0.85rem;
  line-height: 1.45;
  height: calc(0.85rem * 1.45 * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Agent setup card on product landing pages (snippets/agent-setup.jsx) ---- */
.u-agent-setup {
  margin: 0 0 1.5rem;
  align-items: center;
}