style.css

:root {
  --background-light: 255 255 255;
}

/* Accent color overrides */
.bg-primary\/10 {
  background-color: #40b3ff;
}

.dark .bg-primary\/10 {
  background-color: #4251fa;
}

.bg-primary\/10.text-primary,
.bg-primary\/10 .text-primary {
  color: white;
}

.dark\:bg-primary-light\/10:is(.dark *) {
  background-color: #4251fa;
}

/* The Future Font Family */
@font-face {
  font-family: 'The Future';
  src: url('/assets/fonts/the-future-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'The Future';
  src: url('/assets/fonts/the-future-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'The Future';
  src: url('/assets/fonts/the-future-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'The Future';
  src: url('/assets/fonts/the-future-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Hide top navigation bar ONLY on landing page (index.mdx) */
/* Use :has() selector to check if custom-index-content exists on page */
body:has(#custom-index-content) header,
body:has(#custom-index-content) #navbar,
body:has(#custom-index-content) #header,
body:has(#custom-index-content) nav[aria-label],
body:has(#custom-index-content) button#search-bar-entry,
body:has(#custom-index-content) button#search-bar-entry-mobile,
body:has(#custom-index-content) #search-bar-entry,
body:has(#custom-index-content) #search-bar-entry-mobile,
body:has(#custom-index-content) .chat-assistant-floating-input,
body:has(#custom-index-content) *:has(> .chat-assistant-floating-input) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  pointer-events: none !important;
}

/* Apply The Future font to custom index content */
body:has(#custom-index-content) #custom-index-content {
  font-family: 'The Future', sans-serif;
}


body:has(#custom-index-content) #custom-index-content h1,
body:has(#custom-index-content) #custom-index-content h2,
body:has(#custom-index-content) #custom-index-content h3,
body:has(#custom-index-content) #custom-index-content p,
body:has(#custom-index-content) #custom-index-content a {
  font-family: 'The Future', sans-serif;
}

/* Hide "More actions" ellipsis button on mobile (it doesn't do anything) */
@media (max-width: 768px) {
  button[aria-label="More actions"] {
    display: none !important;
  }

  #custom-index-content {
    margin-top: -120px; /* Matches h-24 header height */
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  #custom-index-content {
    margin-top: -120px; /* Matches md:h-28 header height */
  }
}


/* Override text links underline colors for inline content links */
.prose p a,
.prose li a,
.prose ul a,
.prose span a,
.prose div[data-callout-type] a,
.prose .callout a,
.prose .info a,
.prose .note a,
.prose .warning a,
.prose .tip a,
.prose .steps a,
.prose .step a,
.prose [role="listitem"] a {
  border-bottom-color: #0E0E0E !important;
  text-decoration-color: #0E0E0E !important;
}

.dark .prose p a,
.dark .prose li a,
.dark .prose ul a,
.dark .prose span a,
.dark .prose div[data-callout-type] a,
.dark .prose .callout a,
.dark .prose .info a,
.dark .prose .note a,
.dark .prose .warning a,
.dark .prose .tip a,
.dark .prose .steps a,
.dark .prose .step a,
.dark .prose [role="listitem"] a {
  border-bottom-color: #cccccc !important;
  text-decoration-color: #cccccc !important;
}

/* Highlighted card background */
.highlighted-card-bg {
  background-color: #FFB84D;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease-in-out;
}

.highlighted-card-bg:hover {
  box-shadow: 
    0 0 30px rgba(255, 184, 77, 0.5),
    0 0 60px rgba(255, 184, 77, 0.3),
    0 10px 40px rgba(255, 184, 77, 0.2);
}

.highlighted-card-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 70%
  );
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.6s ease-in-out;
}

.highlighted-card-bg:hover::before {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

/* Show Mintlify footer on custom index page */
body:has(#custom-index-content) #footer {
  display: flex !important;
}

/* Code block font — Fira Code has full box-drawing character support */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');

pre, pre code, code {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace !important;
}