style.css

/* Manifest docs — custom brand overrides */

/* Prevent hash-based scroll jumps on tab clicks */
[role="tabpanel"],
[role="tabpanel"]:target {
  scroll-margin-top: 9999px !important;
  scroll-snap-margin-top: 9999px !important;
}

[id*="cloud"], [id*="self-hosted"], [id*="quick-install"],
[id*="docker-compose"], [id*="docker-run"] {
  scroll-margin-top: 9999px !important;
}

/* Logo height */
#sidebar img[alt*="logo" i],
#sidebar img[src*="logo"],
nav img[src*="logo"],
a[href="https://manifest.build"] img {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
}

/* Theme switch moves under GitHub and Discord at the sidebar bottom, so the
   logo keeps the whole header width */
@media (min-width: 1024px) {
  #sidebar [data-theme-preference-switch] {
    position: fixed !important;
    left: 22px;
    bottom: 14px;
    z-index: 30;
  }
  #sidebar li[id="https://app.manifest.build"] ~ li:last-child {
    margin-bottom: 36px;
  }
}

/* Search dialog and its backdrop sit above the banner (45), the Book a call
   button and floating toggle (60), and the docs switcher menu (70) */
body > div > div.fixed.inset-0.z-40 {
  z-index: 80 !important;
}

/* Warm sidebar background */
#sidebar {
  --tw-bg-opacity: 1;
}

/* Sidebar bottom links: Book a call is already top right, so only GitHub and
   Discord stay */
#sidebar li[id="https://app.manifest.build"],
#sidebar li[id="https://calendly.com/sebastien-manifest/30min"] {
  display: none;
}

/* Accent color on anchor links */
.nav-anchor {
  border-color: #0f172a;
}
.dark .nav-anchor {
  border-color: #ffffff;
}

/* Inline links: bold, dark, underlined — no blue border */
.prose a,
.mdx-content a:not([role]):not([class*="card"]):not([class*="nav"]):not([class*="tab"]):not([class*="button"]) {
  color: #111827 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: #111827 !important;
  text-underline-offset: 2px;
  border-bottom: none !important;
  box-shadow: none !important;
}

.prose a:hover,
.mdx-content a:not([role]):not([class*="card"]):not([class*="nav"]):not([class*="tab"]):not([class*="button"]):hover {
  color: #0f172a !important;
  text-decoration-color: #0f172a !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.dark .prose a,
.dark .mdx-content a:not([role]):not([class*="card"]):not([class*="nav"]):not([class*="tab"]):not([class*="button"]) {
  color: #f3f4f6 !important;
  text-decoration-color: #f3f4f6 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.dark .prose a:hover,
.dark .mdx-content a:not([role]):not([class*="card"]):not([class*="nav"]):not([class*="tab"]):not([class*="button"]):hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Code block copy-button fade: end on the block's real dark background */
[data-fade-overlay] {
  --fade-color-dark: #171717 !important;
}

/* Top background glow: white instead of the primary-derived dark tint */
span.dark\:hidden[style*="radial-gradient"] {
  background: radial-gradient(49.63% 57.02% at 58.99% -7.2%, rgba(255, 255, 255, 0.8) 39.4%, rgba(255, 255, 255, 0) 100%) !important;
}

/* Cards: warm border, tight radius, cream background */
.card {
  border-color: #e8e2d9;
  border-radius: 3px !important;
}
html:not(.dark) .card {
  background-color: #ffffff73 !important;
}
html.dark .card {
  background-color: #1c1c1c !important;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Card hover accent */
.card:hover {
  border-color: #0f172a;
}
.dark .card:hover {
  border-color: #ffffff;
}

/* Inline code */
.mdx-content :not(pre) > code {
  color: #0f172a;
}
.dark .mdx-content :not(pre) > code {
  color: #ffffff;
}

/* Steps titles: bold with tighter spacing */
.step p.font-semibold,
.step .prose > p:first-child {
  font-weight: 700 !important;
  margin-bottom: 0.25rem !important;
}

/* Steps timeline: darker connector line */
.step > div.absolute.w-px {
  background-color: #374151 !important;
}

/* Steps timeline: dark number circles (match text color) */
.step .rounded-full {
  background-color: #1c1c1c !important;
  color: #ffffff !important;
}

/* Dark mode: light circles */
.dark .step > div.absolute.w-px {
  background-color: #d1d5db !important;
}

.dark .step .rounded-full {
  background-color: #e5e7eb !important;
  color: #111827 !important;
}

/* Article footer prev/next navigation */
div.rounded-2xl.bg-gray-50\/80 {
  background-color: #e5e7eb !important;
}

div.rounded-2xl .w-px.bg-gray-100 {
  background-color: #9ca3af !important;
}

div.rounded-2xl .text-gray-500,
div.rounded-2xl .text-gray-300,
div.rounded-2xl span {
  color: #374151 !important;
}

div.rounded-2xl svg.text-gray-300 {
  color: #374151 !important;
}

.dark div.rounded-2xl {
  background-color: #1c1c1c !important;
}

.dark div.rounded-2xl .w-px {
  background-color: #4b5563 !important;
}

.dark div.rounded-2xl .text-gray-400,
.dark div.rounded-2xl .text-gray-700,
.dark div.rounded-2xl span {
  color: #d1d5db !important;
}

.dark div.rounded-2xl svg.text-gray-700 {
  color: #d1d5db !important;
}

/* No page footer: its links and theme switch already live in the sidebar */
#footer {
  display: none !important;
}

/* Callouts: tighter spacing & smaller radii */
.callout {
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.callout pre {
  border-radius: 4px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.callout p:last-child {
  margin-top: 0 !important;
}

.callout .code-block {
  margin-bottom: 0.5rem !important;
}

/* Navbar primary CTA (Book a call): ink button in light mode, light button in dark mode */
#topbar-cta-button a > span.absolute {
  background: #0f172a !important;
}
#topbar-cta-button a div span,
#topbar-cta-button a svg {
  color: #f9f8f5 !important;
}
html.dark #topbar-cta-button a > span.absolute {
  background: #f9f8f5 !important;
}
html.dark #topbar-cta-button a div span,
html.dark #topbar-cta-button a svg {
  color: #0f172a !important;
}

/* Cloud / Self-hosted page toggle */
.deploy-mode-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e8e2d9;
  border-radius: 3px;
  margin-bottom: 1.25rem;
}
html.dark .deploy-mode-toggle {
  border-color: rgba(255, 255, 255, 0.12);
}
.deploy-mode-toggle button {
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
}
html.dark .deploy-mode-toggle button {
  color: #94a3b8;
}
html.deploy-cloud .deploy-mode-toggle button[data-deploy-mode="cloud"],
html.deploy-selfhosted .deploy-mode-toggle button[data-deploy-mode="selfhosted"] {
  background: #0f172a;
  color: #f9f8f5;
}
html.dark.deploy-cloud .deploy-mode-toggle button[data-deploy-mode="cloud"],
html.dark.deploy-selfhosted .deploy-mode-toggle button[data-deploy-mode="selfhosted"] {
  background: #f9f8f5;
  color: #0f172a;
}

/* Mode-scoped content: hidden only once a mode class is set, so a page
   without the script simply shows everything */
html.deploy-cloud [data-deploy="selfhosted"] {
  display: none;
}
html.deploy-selfhosted [data-deploy="cloud"] {
  display: none;
}

/* Prev / Next pagination: two compact bordered buttons sized to their content,
   Previous on the left, Next on the right, page title under the label */
#pagination {
  background: transparent !important;
  padding: 0 !important;
  gap: 12px;
  margin-top: 2.5rem;
  align-items: stretch;
  justify-content: space-between;
}
#pagination a {
  width: auto !important;
  min-width: 0;
  flex: 0 1 auto;
}
#pagination a.pagination-next {
  margin-left: auto;
}
#pagination a > div {
  display: flex;
  height: auto !important;
  background: transparent !important;
  border: 1px solid #e8e2d9;
  border-radius: 3px;
  padding: 10px 14px;
  gap: 2px;
  justify-content: center;
  box-shadow: none !important;
}
#pagination a.pagination-prev > div {
  flex-direction: column;
  align-items: flex-start;
}
#pagination a.pagination-next > div {
  flex-direction: column-reverse;
  align-items: flex-end;
}
#pagination a > div > div {
  padding: 0 !important;
}
#pagination div[class*="w-px"],
#pagination [data-component-part="pagination-description"] {
  display: none !important;
}
#pagination [data-component-part="pagination-title"] {
  color: #020817;
  font-weight: 600;
}
#pagination [data-component-part="pagination-label"] {
  font-size: 12px;
  color: #374151 !important;
}
#pagination [data-component-part="pagination-chevron"] {
  color: #374151 !important;
}
html.dark #pagination [data-component-part="pagination-label"],
html.dark #pagination [data-component-part="pagination-chevron"] {
  color: #d1d5db !important;
}
#pagination a:hover [data-component-part="pagination-label"],
#pagination a:hover [data-component-part="pagination-chevron"] {
  color: #0f172a !important;
}
#pagination a:hover > div {
  border-color: #0f172a;
}
html.dark #pagination a > div {
  border-color: rgba(255, 255, 255, 0.12);
}
html.dark #pagination [data-component-part="pagination-title"] {
  color: #f9f8f5;
}
html.dark #pagination a:hover [data-component-part="pagination-label"],
html.dark #pagination a:hover [data-component-part="pagination-chevron"] {
  color: #f9f8f5 !important;
}
html.dark #pagination a:hover > div {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Breathing room between framed screenshots */
figure.frame {
  margin: 1.25rem 0;
}

/* Floating copy of the deploy-mode toggle, fading in once the inline one
   slides under the header. Anchored after the Documentation tab by the
   script; centered fallback when the tab is not found. */
.deploy-mode-toggle--floating {
  position: fixed;
  top: calc(6px + var(--banner-height, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 60;
  margin-bottom: 0;
  background: rgba(248, 246, 241, 0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.deploy-mode-toggle--floating.is-anchored {
  transform: translateY(-6px);
}
.deploy-mode-toggle--floating.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.deploy-mode-toggle--floating.is-anchored.is-visible {
  transform: translateY(0);
}
html.dark .deploy-mode-toggle--floating {
  background: rgba(19, 20, 24, 0.95);
}

/* Book a call button, fixed top right over the header bar */
.docs-book-call {
  position: fixed;
  top: calc(7.5px + var(--banner-height, 0px));
  right: 40px;
  z-index: 60;
  display: inline-block;
  padding: 9px 18px;
  border-radius: 10px;
  background: #0f172a;
  color: #f9f8f5 !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
}
.docs-book-call:hover {
  opacity: 0.9;
}
html.dark .docs-book-call {
  background: #f9f8f5;
  color: #0f172a !important;
}

/* Paragraph spans nested in deploy-mode wrappers miss the theme's prose
   styling and render inline; mirror the top-level paragraph block + margin */
[data-deploy] span[data-as="p"] {
  display: block;
  margin: 20px 0;
}