/* Fixed sticky header spacing */
div.sticky.top-0.h-8.bg-gradient-to-b.from-background-light.dark\:from-background-dark {
  background: transparent !important;
  height: auto !important;
  padding-bottom: 41px !important;
}

/* ✅ THICKEN ACTIVE TAB UNDERLINE */
div.absolute.bottom-0.w-full.bg-primary,
div.absolute.bottom-0.w-full[class*="bg-primary"] {
height: 3px !important;
}

img.relative.object-contain {
  height: 40px !important;
  margin-top: 6px;
}

header img.relative.object-contain {
  margin-top: 6px;
}

footer img.relative.object-contain {
  margin-top: -7px;
}

a:has(span.bg-primary-dark) span.bg-primary-dark {
  border-radius: 8px !important;
}

html.dark body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(28, 68, 252, 0.2) 0%, transparent 50%),
    radial-gradient(circle at top right, rgba(28, 68, 252, 0.15) 0%, transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, #000000 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  mix-blend-mode: normal;
  opacity: 1;
}

@media (prefers-color-scheme: light) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at top left, rgba(28, 68, 252, 0.05) 0%, transparent 50%),
      radial-gradient(circle at top right, rgba(28, 68, 252, 0.03) 0%, transparent 60%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    mix-blend-mode: normal;
    opacity: 1;
  }
}





.mint-mt-1 {
    margin-top: 0.25rem
}
.mint-mt-4 {
    margin-top: 1rem
}
.mint-mt-5 {
    margin-top: 1.25rem
}
.mint-flex {
    display: flex
}
.mint-hidden {
    display: none
}
.mint-h-3 {
    height: 0.75rem
}
.mint-w-3 {
    width: 0.75rem
}
.mint-w-full {
    width: 100%
}
.mint-flex-1 {
    flex: 1 1 0%
}
.mint-cursor-pointer {
    cursor: pointer
}
.mint-flex-col {
    flex-direction: column
}
.mint-items-center {
    align-items: center
}
.mint-space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))
}
.mint-rounded-xl {
    border-radius: 0.75rem
}
.mint-border-b {
    border-bottom-width: 1px
}
.mint-border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity))
}
.mint-bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.mint-px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.mint-py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
.mint-pb-8 {
    padding-bottom: 2rem
}
.mint-text-center {
    text-align: center
}
.mint-text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}
.mint-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.mint-font-bold {
    font-weight: 700
}
.mint-font-medium {
    font-weight: 500
}
.mint-font-semibold {
    font-weight: 600
}
.mint-leading-6 {
    line-height: 1.5rem
}
.mint-text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity))
}
.mint-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}
.mint-text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.mint-group:hover .group-hover\:mint-opacity-\[0\.9\] {
    opacity: 0.9
}
.dark\:mint-block:is(.dark *) {
    display: block
}
.dark\:mint-hidden:is(.dark *) {
    display: none
}
.dark\:mint-border-gray-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity))
}
.dark\:mint-text-gray-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity))
}
.dark\:mint-text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
@media (min-width: 640px) {
    .sm\:mint-flex {
        display: flex
    }
}

Navigation

Quickstart

Reaction Repo

Start building modern documentation in under five minutes

Introduction

Quick Guide to Arrow-Pushing and Key Reactions

Arrow-Pushing Guide

Additional Resources

Welcome to the Reaction Tutorial Catalog. Here you search through Reactions to find your desired reaction.

Release Notes

Roadmap

Quickstart

Navigation

Explore

Need help navigating or just do not know what you would like to study? Click here!

Release Notes

Roadmap

​Navigation

Explore

Need help navigating or just do not know what you would like to study? Click here!

Navigation