:root {
  /* Colors */
  --privy-bg: #ffffff;
  --privy-bg-elevated: #f1f2f9;
  --privy-bg-success: #dcfce7;
  --privy-bg-info: #e0e7ff;
  --privy-bg-warning: #fef3c7;
  --privy-bg-hero: #c4d4f6;
  --privy-text-primary: #010110;
  --privy-text-muted: #64668b;
  --privy-text-placeholder: #9498b8;
  --privy-border: #e2e3f0;
  --privy-border-success: #22c55e;
  --privy-border-info: #818cf8;
  --privy-border-warning: #f59e0b;
  --privy-icon-success: #16a34a;
  --privy-icon-info: #4f46e5;
  --privy-icon-warning: #d97706;

  --privy-dark-bg: #010110;
  --privy-dark-bg-elevated: #22222a;
  --privy-dark-bg-success: #bbf7d02e;
  --privy-dark-bg-info: #c7d2fe2e;
  --privy-dark-bg-warning: #fde68a2e;
  --privy-dark-bg-hero: #22222a;
  --privy-dark-text-primary: #ffffff;
  --privy-dark-text-muted: #cbcde1;
  --privy-dark-border: #333455;
  --privy-dark-icon-success: #86efac;
  --privy-dark-icon-info: #a5b4fc;
  --privy-dark-icon-warning: #fcd34d;

  /* one off colors */
  --privy-light-codeblock-bg: #f2f4fd;
  --privy-light-codeblock-highlight-bg: rgba(91, 79, 255, 0.2);
  --privy-light-codeblock-highlight-left-border: rgba(91, 79, 255, 1);
  --privy-dark-codeblock-highlight-bg: rgba(209, 49, 108, 0.2);
  --privy-dark-codeblock-highlight-left-border: rgba(209, 49, 108, 1);
}

html {
  scroll-behavior: smooth;
}

/* Search bar */
.dark #search-bar-entry {
  background-color: var(--privy-dark-bg-elevated);
}

/* Navbar CTA button */
#topbar-cta-button a span {
  background-color: var(--privy-text-primary);
}

#topbar-cta-button a:hover * {
  opacity: 1;
}

#topbar-cta-button a svg {
  color: currentColor;
}

.dark #topbar-cta-button a span {
  color: var(--privy-dark-bg);
  background-color: var(--privy-dark-text-primary);
}

.dark #topbar-cta-button a {
  color: var(--privy-dark-bg);
}

/* Card */
.card {
  border-width: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--privy-border);
}

.card:hover {
  box-shadow: 0 0 0 2px var(--privy-text-primary);
}

.dark .card {
  box-shadow: 0 0 0 0;
  background-color: var(--privy-dark-bg-elevated);
}

.dark .card:hover {
  box-shadow: 0 0 0 2px var(--privy-dark-text-primary);
}

/* Hero */
.hero {
  width: 100%;
  background-image: url('https://privy-assets-public.s3.us-east-1.amazonaws.com/bg-light.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 62px;
  padding: 114px 32px 84px 32px;

  display: flex;
  flex-direction: column;
  gap: 24px;

  color: var(--privy-text-primary);

  transition: background-image 0.3s ease-in-out;
}

.dark .hero {
  background-image: url('https://privy-assets-public.s3.us-east-1.amazonaws.com/bg-darkgray.png');
  color: var(--privy-dark-text-primary);
}

.hero h1 {
  font-size: 52px;
  font-weight: 500;
  /* font-family: 'ABC Favorit Variable Unlicensed Trial', 'Inter-regular', sans-serif; */
}

.hero .search {
  width: 100%;
  max-width: 450px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--privy-border);
  background-color: white;
  margin: 0 auto;
  color: var(--privy-text-placeholder);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
}

.hero .details-text {
  max-width: 38rem;
  margin: 0 auto;
  background: rgba(256, 256, 256, 0.6);
}

.dark .hero .details-text {
  background: rgba(0, 0, 0, 0);
}

.dark .hero .search {
  background-color: transparent;
}

.subtitle {
  color: var(--privy-text-primary);
  font-size: 20px;
  font-weight: 600;
}

.dark .subtitle {
  color: var(--privy-dark-text-primary);
}

/* Misc */
.no-underline {
  text-decoration: none !important;
  border-bottom: 0px;
}

.no-underline p {
  margin: 0;
}

/* Callouts */
/* Callouts - Tip */
div[data-callout-type='tip'] {
  border-radius: 12px;
  background-color: var(--privy-bg-success);
  border-color: var(--privy-border-success);

  & > div {
    color: var(--privy-text-primary);
  }

  & a {
    transition: border 100ms ease-in-out;
    border-color: var(--privy-text-primary);
  }

  & > div > svg {
    color: var(--privy-icon-success);
  }
}

.dark div[data-callout-type='tip'] {
  background-color: var(--privy-dark-bg-success);
  border-width: 0;

  & > div {
    color: var(--privy-dark-text-primary);
  }

  & a {
    border-color: var(--privy-dark-text-primary);
  }

  & > div > svg {
    color: var(--privy-dark-icon-success);
  }
}

/* Callouts - Info */
div[data-callout-type='info'] {
  border-radius: 12px;
  background-color: var(--privy-bg-info);
  border-color: var(--privy-border-info);

  & > div {
    color: var(--privy-text-primary);
  }

  & a {
    transition: border 100ms ease-in-out;
    border-color: var(--privy-text-primary);
  }

  & > div > svg {
    color: var(--privy-icon-info);
  }
}

.dark div[data-callout-type='info'] {
  background-color: var(--privy-dark-bg-info);
  border-width: 0;

  & > div {
    color: var(--privy-dark-text-primary);
  }

  & a {
    transition: border 100ms ease-in-out;
    border-color: var(--privy-dark-text-primary);
  }

  & > div > svg {
    color: var(--privy-dark-icon-info);
  }
}

/* Callouts - Warning */
div[data-callout-type='warning'] {
  border-radius: 12px;
  background-color: var(--privy-bg-warning);
  border-color: var(--privy-border-warning);

  & > div {
    color: var(--privy-text-primary);
  }

  & a {
    transition: border 100ms ease-in-out;
    border-color: var(--privy-text-primary);
  }

  & > div > svg {
    color: var(--privy-icon-warning);
  }
}

.dark div[data-callout-type='warning'] {
  background-color: var(--privy-dark-bg-warning);
  border-width: 0;

  & > div {
    color: var(--privy-dark-text-primary);
  }

  & a {
    border-color: var(--privy-dark-text-primary);
  }

  & > div > svg {
    color: var(--privy-dark-icon-warning);
  }
}

/* Navigation items */
#navigation-items li a {
  border-radius: 6px;

  &.bg-primary\/10 {
    background-color: var(--privy-bg-elevated);
  }
}

.dark #navigation-items li a.bg-primary\/10 {
  background-color: var(--privy-dark-bg-elevated);
}

/* Codeblocks */
.codeblock-dark {
  border-radius: 12px;
}

.dark\:bg-codeblock:is(.dark *):not([id*='accordion'] *) {
  background-color: var(--privy-dark-bg-hero);
}

body .codeblock-light,
.codeblock-light:is(.bg-white) {
  background-color: var(--privy-light-codeblock-bg);
  border: none;
}

/* Special case for dark mode accordion codeblocks */
.dark [id*='accordion'] .codeblock-light {
  background-color: var(--privy-dark-bg);
}

html:not(.dark) .codeblock-light .line-highlight,
html:not(.dark) .codeblock-light .line-highlight:after,
html:not(.dark) .codeblock-light .line-highlight:before {
  background: var(--privy-light-codeblock-highlight-bg);
}

html:not(.dark) .codeblock-light .line-highlight:before {
  left: -1.25rem;
  border-left: 4px solid var(--privy-light-codeblock-highlight-left-border);
}

html:is(.dark) .codeblock-light .line-highlight,
html:is(.dark) .codeblock-light .line-highlight:after,
html:is(.dark) .codeblock-light .line-highlight:before {
  background: var(--privy-dark-codeblock-highlight-bg);
}

html:is(.dark) .codeblock-light .line-highlight:before {
  left: -1.25rem;
  border-left: 4px solid var(--privy-dark-codeblock-highlight-left-border);
}

/* Tables */
table > thead {
  text-align: left;
}

.prose
  :where(a):not(:has(svg)):not(:has(code)):not(
    :where([class~='not-prose'], [class~='not-prose'] *)
  ):not(.dark *) {
  border-bottom: 1px solid var(--privy-text-primary);
}

.prose :where(a code):not(:where([class~='not-prose'], [class~='not-prose'] *)):not(.dark *) {
  text-decoration-color: var(--privy-text-primary);
}

.prose
  :where(a:has(code)):not(:has(svg)):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  border-bottom: none;
}

/* hide the up arrow from cards */
.card .lucide-arrow-up-right {
  display: none;
}

/* Recipes page */
.recipes {
  width: 100%;
  margin-bottom: 62px;
  padding: 74px 32px 84px 32px;
  background-size: cover;

  display: flex;
  flex-direction: column;
  gap: 24px;

  color: var(--privy-text-primary);

  transition: background-image 0.3s ease-in-out;
}

.dark .recipes {
  color: var(--privy-dark-text-primary);
}

.recipes h1 {
  font-size: 52px;
  font-weight: 400;
  /* font-family: 'ABC Favorit Variable Unlicensed Trial', 'Inter-regular', sans-serif; */
}

.recipes .search {
  width: 100%;
  max-width: 450px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--privy-border);
  background-color: white;
  margin: 0 auto;
  color: var(--privy-text-placeholder);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
}

.dark .recipes .search {
  background-color: transparent;
}

#navbar a[href='/welcome'] {
  display: none;
}

#navbar a[href='/basics/get-started/about'] {
  margin-left: 0px;
}

.search {
  max-width: 500px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  background-color: #f3f4f6;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.search-input {
  border: none;
  background: transparent;
  width: 100%;
  outline: none;
  font-size: 0.875rem;
}

.card-group-wrapper {
  max-width: 48rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .card-group-wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


function clickOnSearch() {
  document.getElementById('search-bar-entry-mobile').click();
}


window['_fs_host'] = 'fullstory.com';
window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
window['_fs_org'] = 'o-22TCHH-na1';
window['_fs_namespace'] = 'FS';
!(function (m, n, e, t, l, o, g, y) {
  var s,
    f,
    a = (function (h) {
      return (
        !(h in m) ||
        (m.console &&
          m.console.log &&
          m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'),
        !1)
      );
    })(e);
  function p(b) {
    var h,
      d = [];
    function j() {
      h &&
        (d.forEach(function (b) {
          var d;
          try {
            d = b[h[0]] && b[h[0]](h[1]);
          } catch (h) {
            return void (b[3] && b[3](h));
          }
          d && d.then ? d.then(b[2], b[3]) : b[2] && b[2](d);
        }),
        (d.length = 0));
    }
    function r(b) {
      return function (d) {
        h || ((h = [b, d]), j());
      };
    }
    return (
      b(r(0), r(1)),
      {
        then: function (b, h) {
          return p(function (r, i) {
            d.push([b, h, r, i]), j();
          });
        }
      }
    );
  }
  a &&
    ((g = m[e] =
      (function () {
        var b = function (b, d, j, r) {
          function i(i, c) {
            h(b, d, j, i, c, r);
          }
          r = r || 2;
          var c,
            u = /Async$/;
          return u.test(b)
            ? ((b = b.replace(u, '')), 'function' == typeof Promise ? new Promise(i) : p(i))
            : h(b, d, j, c, c, r);
        };
        function h(h, d, j, r, i, c) {
          return b._api ? b._api(h, d, j, r, i, c) : (b.q && b.q.push([h, d, j, r, i, c]), null);
        }
        return (b.q = []), b;
      })()),
    (y = function (b) {
      function h(h) {
        'function' == typeof h[4] && h[4](new Error(b));
      }
      var d = g.q;
      if (d) {
        for (var j = 0; j < d.length; j++) h(d[j]);
        (d.length = 0), (d.push = h);
      }
    }),
    (function () {
      ((o = n.createElement(t)).async = !0),
        (o.crossOrigin = 'anonymous'),
        (o.src = 'https://' + l),
        (o.onerror = function () {
          y('Error loading ' + l);
        });
      var b = n.getElementsByTagName(t)[0];
      b && b.parentNode ? b.parentNode.insertBefore(o, b) : n.head.appendChild(o);
    })(),
    (function () {
      function b() {}
      function h(b, h, d) {
        g(b, h, d, 1);
      }
      function d(b, d, j) {
        h('setProperties', {type: b, properties: d}, j);
      }
      function j(b, h) {
        d('user', b, h);
      }
      function r(b, h, d) {
        j(
          {
            uid: b
          },
          d
        ),
          h && j(h, d);
      }
      (g.identify = r),
        (g.setUserVars = j),
        (g.identifyAccount = b),
        (g.clearUserCookie = b),
        (g.setVars = d),
        (g.event = function (b, d, j) {
          h(
            'trackEvent',
            {
              name: b,
              properties: d
            },
            j
          );
        }),
        (g.anonymize = function () {
          r(!1);
        }),
        (g.shutdown = function () {
          h('shutdown');
        }),
        (g.restart = function () {
          h('restart');
        }),
        (g.log = function (b, d) {
          h('log', {level: b, msg: d});
        }),
        (g.consent = function (b) {
          h('setIdentity', {consent: !arguments.length || b});
        });
    })(),
    (s = 'fetch'),
    (f = 'XMLHttpRequest'),
    (g._w = {}),
    (g._w[f] = m[f]),
    (g._w[s] = m[s]),
    m[s] &&
      (m[s] = function () {
        return g._w[s].apply(this, arguments);
      }),
    (g._v = '2.0.0'));
})(window, document, window._fs_namespace, 'script', window._fs_script);


// recipes-search.js
// This script handles the search functionality for recipes pages

function initRecipesSearch() {
  // Get the search element
  const searchEl = document.getElementById('recipes-search');
  if (!searchEl) {
    console.log('notfound');
    return;
  }

  // Add click event
  searchEl.addEventListener('click', function (e) {
    // Check if we already have an input
    if (searchEl.querySelector('input')) return;

    // Store original content
    const originalContent = searchEl.innerHTML;

    // Clear the search element
    searchEl.innerHTML = '';

    // Create input element
    const inputEl = document.createElement('input');
    inputEl.type = 'text';
    inputEl.placeholder = 'Type to filter recipes...';
    inputEl.className = 'search-input';
    searchEl.appendChild(inputEl);

    // Create reset button
    const resetBtn = document.createElement('span');
    resetBtn.innerHTML = '×';
    resetBtn.style.marginLeft = '8px';
    resetBtn.style.cursor = 'pointer';
    resetBtn.style.fontSize = '20px';
    searchEl.appendChild(resetBtn);

    // Focus the input
    setTimeout(function () {
      inputEl.focus();
    }, 10);

    // Reset function
    resetBtn.addEventListener('click', function (event) {
      event.stopPropagation(); // Prevent triggering parent click
      searchEl.innerHTML = originalContent;
      showAllCards();
    });

    // Filter as you type
    inputEl.addEventListener('input', function () {
      const searchTerm = this.value.toLowerCase();

      // Show all if empty
      if (searchTerm === '') {
        showAllCards();
        return;
      }

      // Filter cards
      document.querySelectorAll('.card-group-wrapper').forEach(function (section) {
        const cards = section.querySelectorAll('.card');
        let visibleCards = 0;

        cards.forEach(function (card) {
          const text = card.textContent.toLowerCase();
          if (text.includes(searchTerm)) {
            card.style.display = 'flex';
            visibleCards++;
          } else {
            card.style.display = 'none';
          }
        });

        // Hide section if no visible cards
        section.style.display = visibleCards > 0 ? 'block' : 'none';
      });
    });

    // Prevent search triggering again when clicking in the input
    inputEl.addEventListener('click', function (event) {
      event.stopPropagation();
    });

    // Prevent reset button from opening search again
    resetBtn.addEventListener('click', function (event) {
      event.stopPropagation();
    });
  });

  // Function to show all cards
  function showAllCards() {
    document.querySelectorAll('.card-group-wrapper').forEach(function (section) {
      section.style.display = 'block';
      section.querySelectorAll('.card').forEach(function (card) {
        card.style.display = 'flex';
      });
    });
  }
}

// Initialize the search when document is loaded
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initRecipesSearch);
} else {
  initRecipesSearch();
}


Region support

International region support