.color_card {
  display: block;
  max-width: 268px;
  border-radius: 20px;
  text-decoration: none;
  color: #1c1c1c;
  margin: 1rem 0;
  background-color: #fffbeb;
  border: none !important;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.color_card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: none !important;
}

.color_card-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.color_card-image {
  max-width: 100%;
  height: auto;
  border-radius: 20px 20px 0 0;
  margin: 0;
}

.color_card-text-content {
  text-align: start;
  padding: 1.5rem;
}

.color_card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.color_card-description {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #757575;
}

.color_card-description p {
  margin: 0;
}

.dark .horizontal_color_card h2 {
  color: #392827;
}

.color_card.yellow,
.horizontal_card.yellow,
.icon-container.yellow {
  background-color: #fff3c7;
}

.dark .color_card.yellow,
.dark .horizontal_card.yellow,
.dark .icon-container.yellow {
  background-color: #fff3c7;
}

.color_card.purple,
.horizontal_card.purple,
.icon-container.purple {
  background-color: #dde0ff;
}

.dark .color_card.purple,
.dark .horizontal_card.purple,
.dark .icon-container.purple {
  background-color: #dde0ff;
}

.color_card.red,
.horizontal_card.red,
.icon-container.red {
  background-color: #ffe3e0;
}

.dark .color_card.red,
.dark .horizontal_card.red,
.dark .icon-container.red {
  background-color: #ffe3e0;
}

.color_card.lilac,
.horizontal_card.lilac,
.icon-container.lilac {
  background-color: #f3ebff;
}

.dark .color_card.lilac,
.dark .horizontal_card.lilac,
.dark .icon-container.lilac {
  background-color: #f3ebff;
}

.color_card.pink,
.horizontal_card.pink,
.icon-container.pink {
  background-color: #f5d6e8;
}

.dark .color_card.pink,
.dark .horizontal_card.pink,
.dark .icon-container.pink {
  background-color: #f5d6e8;
}

.color_card.green,
.horizontal_card.green,
.icon-container.green {
  background-color: #ccfae9;
}

.dark .color_card.green,
.dark .horizontal_card.green,
.dark .icon-container.green {
  background-color: #ccfae9;
}

.color_card.blue,
.horizontal_card.blue,
.icon-container.blue {
  background-color: #c5f0f5;
}

.dark .color_card.blue,
.dark .horizontal_card.blue,
.dark .icon-container.blue {
  background-color: #c5f0f5;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  min-height: 100vh;
  transition: all 0.3s ease;
}

body {
  background: white;
}

body.dark {
  background: #000000;
}

.hero-section {
  text-align: center;
  position: relative;
  padding: 6.5rem 20px 160px 20px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 60px 16px 160px 16px;
    min-height: 300px;
  }
}

.dark .hero-section {
  background: #111827;
}

.hero-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* make sure hero content is above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-content h1 {
  font-size: 5.125rem;
  max-width: 1000px;
  font-weight: 550;
  margin-bottom: 2.5rem;
  letter-spacing: -5px;
  line-height: 5.5rem;
  color: #1a1a1a;
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        letter-spacing: -.075rem;
        line-height: 2.8rem;
    }
}

.dark .hero-content h1 {
  color: #ffffff;
}

.hero-content p {
  font-size: 1rem;
  line-height: 1.4375rem;
  font-weight: 400;
  color: black;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 768px) {
  .hero-content p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

.dark .hero-content p {
  color: #d1d5db;
}

.features-section {
  position: relative;
  margin-top: -100px; /* Negative margin to overlap hero */
  padding: 0 20px 80px 20px;
  z-index: 10;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.features-grid .card h2 {
  font-weight: 500 !important;
}

.features-grid .card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 0;
}

.dark .features-grid .card {
  background-color: rgb(28 28 28);
  border-color: #424242;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.features-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.dark .features-grid .card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.feature-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.feature-content {
  padding: 24px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.dark .feature-card h3 {
  color: white;
}

.feature-card p {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.dark .feature-card p {
  color: #9ca3af;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero {
    padding: 60px 16px 150px 16px;
  }

  .features-section {
    margin-top: -80px;
    padding: 0 16px 60px 16px;
  }

  .theme-toggle {
    top: 20px;
    right: 20px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


.horizontal_card {
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid #110f0e1a;
  margin-top: 20px;
  border-radius: 8px;
}

.dark .horizontal_card {
  border-color: #ffffff1a;
}

.horizontal_card .card-image-container {
  flex: 1;
  min-width: 45%;
}

.horizontal_card .card-image-container img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  margin: 0 !important;
}

.horizontal_card .card-content-container {
  flex: 2;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
}

.horizontal_card .card-title {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
}

.horizontal_card .card-description {
  font-size: 1rem;
  line-height: 1.5;
  flex-grow: 1;
}

.horizontal_card .card-description p {
  margin: 0;
  font-weight: 350;
}

.dark-content p {
  color: #454242;
}

.horizontal_card .card-link {
  margin-top: 1rem;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  border: none;
  max-width: fit-content;
  font-weight: 500;
}

.horizontal_card .card-link:hover {
  text-decoration: underline;
}


/* The root link element */
.icon-title-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin: 0 auto;
}

/* Style the icon itself (passed from react-icons) */
.icon-container svg {
  width: 32px;
  height: 32px;
  color: #5b21b6; /* A darker purple for the icon */
}

.item-title {
  font-weight: 500;
  text-align: center;
  margin: 0;
  font-size: 0.9rem;
}

.icon-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ede9fe;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark .icon-container {
  background-color: #4c1d95;
}

.icon-container svg {
  width: 24px;
  height: 24px;
  color: #000;
}

.dark .icon-container svg {
  color: #fff;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* THE FIX: Translate by -50% of the element's own width.
      Since the logo-track is 200% the width of the visible logos,
      -50% is the exact distance needed for a seamless loop.
    */
    transform: translateX(-50%);
  }
}

.logo-carousel-container {
  padding: 2rem 0;
  border: 1px solid #110f0e1a;
  border-radius: 2px;
  margin-top: 20px;
}

.dark .logo-carousel-container {
  border-color: #333;
}

.carousel-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
  padding: 0 2rem;
}

.logo-carousel-scroller {
  overflow: hidden;
  position: relative;
}

/* .logo-carousel-scroller:hover .logo-track {
  animation-play-state: paused;
} */

.logo-track {
  display: flex;
  width: calc(200px * var(--logo-count));
  animation: scroll 12s linear infinite;
}

.logo-track a {
  text-decoration: none;
  color: inherit;
  border: none;
}

.logo-item {
  width: 100px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.logo-item:hover {
  transform: scale(1.1);
}

.logo-item svg {
  max-width: 100%;
  max-height: 56px;
  opacity: 0.95;
  transition: opacity 0.2s ease;
  border-radius: 8px;
}

.logo-item:hover svg {
  opacity: 1;
}

.explore-link {
  display: block;
  width: fit-content; /* Set width to match content */
  margin-left: 2rem; /* Add space on the right, aligns with title */
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  text-decoration: underline;
  transition: color 0.2s ease;
  border-bottom: none !important;
}

.dark .explore-link {
  color: #eee;
}

.explore-link:hover {
  color: #e88178;
}


div.card .prose a.link {
  color: #007bff;
  text-decoration: underline;
  font-weight: 500;
}

div.card .prose a.link:visited {
  color: #551a8b;
}

div.card .prose a.link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: red;
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  font-weight: 300;
  line-height: inherit !important;
}

.overview_cards_container .card {
  max-width: 269px !important;
}

.card-group {
  justify-items: baseline;
}

.dark .group img {
  background-color: transparent !important;
}

.param-head {
  div[data-component-part="field-name"] {
    color: #000 !important;
  }
}

.dark .param-head {
  div[data-component-part="field-name"] {
    color: #fff !important;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500 !important;
}

.block.absolute.inset-0.overflow-hidden {
  background: none !important;
}

.banner_img_cover {
  border-radius: 8px;
}

table th {
  text-align: left !important;
}


// check if content side layout is empty
function checkContentSideLayout() {
  const sideLayout = document.getElementById("content-side-layout");
  if (sideLayout) {
    const sideLayoutContent = sideLayout.querySelector("div");
    if (
      !sideLayoutContent ||
      !sideLayoutContent.hasChildNodes() ||
      sideLayoutContent.textContent.trim() === ""
    ) {
      sideLayout.style.display = "none";
    }
  }
}

function addCodeBlockClassToDivs() {
  // Select all pre elements and get their direct parent divs
  const preElements = document.querySelectorAll("pre");

  preElements.forEach((pre) => {
    const parentDiv = pre.parentElement;
    // Only process if the parent is a div and doesn't already have the class
    if (
      parentDiv?.tagName === "DIV" &&
      !parentDiv.classList.contains("codeblock-dark")
    ) {
      parentDiv.classList.add("codeblock-dark", "dark:bg-codeblock");
      pre.classList.add("bg-[#0F1117]");
    }
  });

  // Check content side layout after processing code blocks
  checkContentSideLayout();
}

// Initial scan when the script first runs (for initial page load/hydration)
addCodeBlockClassToDivs();

// Set up a MutationObserver to watch for changes in the DOM
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // If nodes were added to the DOM
    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
      // Re-run our function to check for new code blocks
      addCodeBlockClassToDivs();
    }
  }
});

// Start observing the document body for changes
observer.observe(document.body, {
  childList: true, // Watch for direct children being added/removed
  subtree: true, // Watch for changes deeply within the body
});


Supported Flows

Integrate nol Pay

Let customers securely make payments using nol Pay on your website or mobile application.

Payment methods

nol Pay

Supported Flows

Integrate nol Pay

Integrate nol Pay directly

Payment methods

​Supported Flows

​Integrate nol Pay

Integrate nol Pay directly

Supported Flows

Integrate nol Pay