Current

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://templates.bullet.so/astral/styles.css" />
<link rel="stylesheet" href="https://webeeui-styles.pages.dev/bullet/default/main.css"></link>

<!-- ============================================================
     NasriNasir.com fluidity pack — Body scripts
     Paste into Bullet Dashboard → Code Editor → Body
     ============================================================ -->

<!-- three.js + Vanta (particle network for the hero) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.net.min.js"></script>

<script>
  (function () {
    var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    function initVanta() {
      var hero = document.querySelector(".co-webeeui-hero-with-image");
      if (!hero || typeof VANTA === "undefined" || !VANTA.NET) return;
      VANTA.NET({
        el: hero,
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.0,
        minWidth: 200.0,
        scale: 1.0,
        scaleMobile: 1.0,
        color: 0x2563eb, // brand blue lines and dots
        backgroundColor: 0xffffff,
        points: 11.0, // density of particles
        maxDistance: 23.0, // how far lines stretch between dots
        spacing: 17.0,
        showDots: true
      });
    }

    function initReveal() {
      var targets = document.querySelectorAll(
        ".notion-page-content > .notion-callout, " +
        ".notion-page-content > .notion-header, " +
        ".notion-page-content > .notion-row, " +
        ".notion-page-content > .notion-collection, " +
        ".notion-page-content > .notion-text"
      );
      if (!("IntersectionObserver" in window)) {
        targets.forEach(function (el) {
          el.classList.add("sn-revealed");
        });
        return;
      }
      var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add("sn-revealed");
            io.unobserve(entry.target);
          }
        });
      }, {
        threshold: 0.1, rootMargin: "0px 0px -40px 0px"
      });

      targets.forEach(function (el) {
        el.classList.add("sn-reveal");
        io.observe(el);
      });
    }

    function init() {
      if (!reducedMotion) initVanta();
      initReveal();
    }

    if (document.readyState === "complete" || document.readyState === "interactive") {
      init();
    } else {
      window.addEventListener("DOMContentLoaded", init);
    }
    // Bullet can swap content after load; retry once if the hero was not found.
    window.addEventListener("load", function () {
      setTimeout(function () {
        if (!reducedMotion && !document.querySelector(".co-webeeui-hero-with-image canvas")) {
          initVanta();
        }
      },
        800);
    });
  })();
</script>

<script>
  (function () {
    var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    /* ---- Stats count-up ---- */
    function initCountUp() {
      if (reducedMotion) return;
      var heads = document.querySelectorAll(".co-webeeui-simple-3-col h3.notion-h");
      if (!heads.length || !("IntersectionObserver" in window)) return;

      heads.forEach(function (h) {
        var walker = document.createTreeWalker(h, NodeFilter.SHOW_TEXT);
        var node;
        while ((node = walker.nextNode())) {
          var m = node.nodeValue.match(/\d+/);
          if (m) {
            h._snCount = {
              node: node,
              target: parseInt(m[0], 10),
              prefix: node.nodeValue.slice(0, m.index),
              suffix: node.nodeValue.slice(m.index + m[0].length),
              done: false
            };
            break;
          }
        }
      });

      function animate(h) {
        var cfg = h._snCount;
        if (!cfg || cfg.done) return;
        cfg.done = true;
        var duration = 1400;
        var start = null;
        function step(ts) {
          if (!start) start = ts;
          var p = Math.min((ts - start) / duration, 1);
          var eased = 1 - Math.pow(1 - p, 3);
          cfg.node.nodeValue = cfg.prefix + Math.round(cfg.target * eased) + cfg.suffix;
          if (p < 1) requestAnimationFrame(step);
        }
        requestAnimationFrame(step);
      }

      var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            animate(entry.target);
            io.unobserve(entry.target);
          }
        });
      }, {
        threshold: 0.5
      });

      heads.forEach(function (h) {
        if (h._snCount) io.observe(h);
      });
    }

    /* ---- Blog card cascade ---- */
    function initCardCascade() {
      if (reducedMotion) return;
      var cards = document.querySelectorAll(".coll-posts-database .notion-collection-card");
      if (!cards.length || !("IntersectionObserver" in window)) return;

      var grid = document.querySelector(".coll-posts-database");
      var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            cards.forEach(function (card, i) {
              card.style.setProperty("--sn-delay", (i * 0.09) + "s");
              card.classList.add("sn-card-in");
            });
            io.disconnect();
          }
        });
      }, {
        threshold: 0.15
      });

      io.observe(grid);
    }

    function init() {
      initCountUp();
      initCardCascade();
    }

    if (document.readyState === "complete" || document.readyState === "interactive") {
      init();
    } else {
      window.addEventListener("DOMContentLoaded", init);
    }
  })();
</script>

<script>
  /* ---- Fix: Bullet TOC auto-scroll yanks the page ----
   Bullet's site bundle calls scrollIntoView() on .active-toc
   on every scroll event, which scrolls the whole window.
   We no-op it so the TOC never hijacks page scroll. */
  (function () {
    var orig = Element.prototype.scrollIntoView;
    Element.prototype.scrollIntoView = function () {
      if (this.classList && this.classList.contains("active-toc")) return;
      return orig.apply(this, arguments);
    };
  })();
</script>

:root {
  --bg-color-h: 48.00000000000116;
  --bg-color-s: 0%;
  --bg-color-l: 98.38%;
  --navbar-align-links: center;
  --navbar-brand-font-size: 18px;
  --navbar-brand-logo-width: 150px;
  --navbar-shadow-spread: 0px


}
.dark-mode {}
.co-webeeui-center-app-image {
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative
}
.co-webeeui-center-app-image .notion-button {
  display: flex;
  justify-content: center;
  padding: 1rem 0 0 0
}
.co-webeeui-center-app-image img {
  border-radius: 20px;
  margin-top: 2rem;
  aspect-ratio: 4/2
}
.co-webeeui-center-app-image::before {
  width: 50%;
  position: absolute;
  content: "";
  height: 100vh;
  background: linear-gradient(135deg, rgba(0, 0, 255, 0.1), transparent 38%),
  linear-gradient(-135deg, rgba(255, 0, 0, 0.1), transparent 30%), linear-gradient(-135deg, rgba(0, 0, 255, 0.1), transparent 48%);
  background-repeat: no-repeat;
  background-position: top, bottom, left;
  filter: blur(3em);
  inset: 1;
  box-shadow: unset;
  z-index: 9;
  top: 0;
  right: 0
}
.co-webeeui-center-app-image .notion-gray {
  font-size: 1.2rem;
  width: 80%;
  margin: 0 auto;
  color: var(--fg-color)
}
.co-webeeui-center-app-image .notion-callout-text>.notion-default_background_co {
  font-size: .8rem;
  padding: .1rem 1rem;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  border-radius: 15rem
}
.co-webeeui-center-app-image .notion-default_background_co .notion-link {
  font-size: .8rem;
  padding-left: .3rem
}
.co-webeeui-center-app-image .notion-h1 {
  width: 70%
}
.co-webeeui-center-app-image .bullet-btn {
  margin-top: 2.4rem
}
.co-webeeui-center-app-image>.notion-callout-text {
  text-align: center
}
.co-webeeui-simple-heading .notion-text {
  width: 100%;
  text-align: center;
  padding-bottom: 1.5rem
}
.co-webeeui-simple-heading {
  margin: 3rem auto
}
.co-webeeui-simple-heading .notion-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1px));
  grid-row-gap: .5rem;
  grid-column-gap: 3rem;
  align-items: center;
  justify-content: center
}
.co-webeeui-simple-heading .notion-row .notion-spacer {
  display: none
}
.co-webeeui-simple-heading .notion-row .notion-column {
  width: 100%
}
.co-webeeui-centered-3-col .notion-default_background_co {
  border: unset;
  padding: 0;
  margin: .5rem auto;
  text-align: start
}
.co-webeeui-centered-3-col .notion-h2 {
  padding-bottom: 1.5rem
}
.co-webeeui-centered-3-col .notion-default_background_co .notion-text {
  font-size: .9rem
}
.co-webeeui-centered-3-col .notion-page-icon-inline {
  margin-top: 6px;
  margin-right: 1rem;
  background: var(--navbar-btn-bg-color);
  border-radius: 7px;
  width: unset;
  height: unset;
  max-width: unset;
  max-height: unset
}
.co-webeeui-centered-3-col .notion-page-icon-inline img {
  height: 38px;
  width: 46px;
  padding: 8px
}
.co-webeeui-centered-3-col {
  text-align: center;
  margin: 3rem auto
}
.co-webeeui-centered-3-col .bullet-3-column {
  padding-top: 3rem
}
.co-webeeui-centered-3-col > .notion-callout-text>* {
  margin: 0 auto
}
.co-webeeui-centered-3-col .notion-callout-text .bullet-3-column {
  width: 105%
}
.co-webeeui-info-image {
  padding: calc(min(96px, 8vw));
  opacity: 1;
  color: white;
  background: #111827;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw
}
.co-webeeui-info-image .notion-default_background_co .bullet-2-column {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center
}
.co-webeeui-info-image .notion-default_background_co * {
  opacity: 1
}
.co-webeeui-info-image .notion-default_background_co {
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--bg-color-2);
  margin: 5rem auto;
  padding: 3rem 2rem;
  border-radius: 20px
}
.co-webeeui-info-image .bullet-btn {
  margin-top: 1rem
}
.co-webeeui-info-image .notion-column {
  width: 100%
}
.co-webeeui-offset-features .notion-default_background_co {
  border: unset;
  padding: 0;
  display: grid
}
.co-webeeui-offset-features {
  margin: 3rem 0
}
.co-webeeui-offset-features .notion-page-icon-inline {
  background: var(--navbar-btn-bg-color);
  border-radius: 7px;
  width: fit-content;
  height: unset;
  max-width: unset;
  max-height: unset;
  margin-bottom: 1rem
}
.co-webeeui-offset-features .notion-page-icon-inline img {
  height: 34px;
  width: 34px;
  padding: 8px
}
.co-webeeui-offset-features .notion-h2 {
  margin-top: 0rem;
  margin-bottom: 1rem
}
.co-webeeui-three-tiers {
  margin: 0 auto;
  text-align: center;
  position: relative
}
.co-webeeui-three-tiers .bullet-3-column * {
  text-align: start
}
.co-webeeui-three-tiers .bullet-3-column {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem
}
.co-webeeui-three-tiers .notion-callout {
  border-radius: 30px;
  padding: 30px
}
.co-webeeui-three-tiers .notion-h3 {
  margin-top: 0;
  margin-bottom: 1rem
}
.co-webeeui-three-tiers .notion-list {
  opacity: .8;
  font-size: calc(var(--base-font-size) - 1px)
}
.co-webeeui-three-tiers .notion-callout .notion-blank {
  height: 1px
}
.co-webeeui-three-tiers .bullet-btn,
.co-webeeui-three-tiers .notion-button-inner {
  width: 100%;
  text-align: center;
  margin: 1rem auto
}
.co-webeeui-three-tiers .notion-column {
  width: 100%
}
.co-webeeui-three-tiers .notion-spacer {
  display: none
}
.co-webeeui-three-tiers .notion-h2 {
  width: 50%;
  margin-bottom: 1rem
}
.co-webeeui-three-tiers>.notion-callout-text>.notion-text {
  width: 60%;
  margin: 0 auto
}
.co-webeeui-brand-toggle .notion-h2 {
  text-align: center
}
.co-webeeui-brand-toggle {
  margin: 3rem auto
}
.co-webeeui-brand-toggle .notion-toggle {
  border: 1px solid #d3d3d3;
  font-size: 1rem;
  font-weight: 400;
  line-height: 21px;
  margin: .5rem auto;
  padding: 25px;
  position: relative;
  width: 80%;
  border-radius: 10px
}
.co-webeeui-brand-toggle summary {
  list-style: none;
  list-style-type: none;
  width: 90%
}
.co-webeeui-brand-toggle summary:after {
  content: "+";
  position: absolute;
  right: 27px;
  top: 27px
}
.co-webeeui-brand-toggle details[open] summary:after {
  content: "-";
  font-size: 1.875rem;
  position: absolute;
  right: 27px;
  top: 27px
}
.co-webeeui-brand-toggle details>div {
  font-size: .875rem;
  font-weight: 400;
  line-height: 21px;
  padding-top: 20px
}
.co-webeeui-brand-toggle details[open] summary>b {
  font-size: 2rem;
  font-weight: 600
}
.co-webeeui-brand-toggle details[open] summary {
  color: var(--navbar-btn-bg-color);
  font-size: 1.188rem
}
.co-webeeui-brand-toggle summary>b {
  font-size: 1.25rem;
  font-weight: 500
}
.co-webeeui-full-width-brand * {
  opacity: 1
}
.co-webeeui-full-width-brand {
  padding: 4rem 2rem;
  color: white;
  background: var(--navbar-btn-bg-color);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  text-align: center;
  padding-left: 0;
  padding-right: 0
}
.co-webeeui-full-width-brand .notion-button {
  justify-content: center;
  margin-top: 1.5rem
}
.co-webeeui-full-width-brand .bullet-btn,
.co-webeeui-full-width-brand .notion-button .notion-button-inner {
  background: white;
  opacity: 1;
  color: black
}
.co-webeeui-full-width-brand .notion-callout-text {
  width: 50%;
  margin: 0 auto;
  text-align: center
}
.notion-h2 {
  font-size: calc(var(--heading2) * .9);
  margin-top: 0;
  text-align: left
}
.co-webeeui-full-width-brand .notion-default_background_co {
  border-radius: unset
}
html {
  scroll-behavior: smooth
}
.sn-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform
}
.sn-reveal.sn-revealed {
  opacity: 1;
  transform: translateY(0)
}
.co-webeeui-hero-with-image {
  position: relative;
  overflow: hidden;
  background: transparent;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0
}
.co-webeeui-hero-with-image canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit
}
.co-webeeui-hero-with-image .notion-callout-text {
  position: relative;
  z-index: 1;
  max-width: 1061px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px
}
.notion-collection-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease
}
.notion-collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(31, 35, 40, 0.10)
}
.co-webeeui-arrow-toggle .notion-toggle {
  transition: background 0.2s ease
}
.co-webeeui-arrow-toggle .notion-toggle:hover {
  background: rgba(37, 99, 235, 0.05);
  border-radius: 8px
}
body {
  overflow-x: hidden
}
.co-webeeui-simple-3-col h3.notion-h {
  font-variant-numeric: tabular-nums
}
.coll-posts-database .notion-collection-card.sn-card-in {
  animation: snCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--sn-delay, 0s)
}
.coll-posts-database .notion-collection-card {
  border: 1px solid transparent
}
.coll-posts-database .notion-collection-card:hover {
  border-color: rgba(37, 99, 235, 0.35)
}
.bullet-blog-scroll {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: 896px;
  background: #2563eb;
  border-radius: 2px
}
.blog-nav-container,
.blog_navigator {
  display: none
}
.blog_main {
  grid-template-columns: 1fr;
  max-width: 896px;
  margin-left: auto;
  margin-right: auto
}
.navbar-item {
  text-align: left
}
@media (min-width:1024px) {
  .co-webeeui-center-app-image .notion-text {
    width: 70%;
    margin: 0 auto
  }
}
@media (min-width:1500px) {
  .co-webeeui-center-app-image .notion-h1 {
    width: 55%
  }
  .co-webeeui-full-width-brand .notion-callout-text {
    width: 40%
  }
}
@media (max-width:1200px) {
  .co-webeeui-center-app-image .notion-h1 {
    width: 90%
  }
  .co-webeeui-center-app-image {
    padding-top: 1rem;
    padding-bottom: 1rem
  }
}
@media (max-width:600px) {
  .co-webeeui-center-app-image .notion-h1 {
    width: 100%
  }
  .co-webeeui-center-app-image .notion-default_background_co {
    font-size: .7rem
  }
  .co-webeeui-center-app-image .notion-default_background_co .notion-link {
    font-size: .7rem
  }
}
@media (min-width: 1024px) {
  .co-webeeui-centered-3-col > .notion-callout-text>* {
    width: 60%
  }
}
@media (max-width: 1024px) {
  .co-webeeui-centered-3-col > .notion-callout-text>* {
    width: 80%
  }
  .co-webeeui-centered-3-col .notion-callout-text .bullet-3-column {
    width: 95%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem
  }
  .co-webeeui-centered-3-col .bullet-3-column .notion-spacer {
    display: none
  }
  .co-webeeui-centered-3-col .bullet-3-column .notion-column {
    width: 100%
  }
}
@media (max-width: 600px) {
  .co-webeeui-centered-3-col > .notion-callout-text>* {
    width: 100%
  }
  .co-webeeui-centered-3-col .notion-callout-text .bullet-3-column {
    grid-template-columns: 1fr;
    gap: 0rem
  }
}
@media (min-width: 1000px) {
  .co-webeeui-info-image img {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    width: 40%
  }
  .co-webeeui-info-image .notion-default_background_co .bullet-2-column {
    grid-template-columns: 1fr 1fr
  }
  .co-webeeui-info-image .notion-default_background_co .bullet-2-column>:first-child {
    text-align: start
  }
  .co-webeeui-info-image .notion-default_background_co {
    position: relative
  }
  .co-webeeui-info-image figure>div {
    position: unset
  }
}
@media (max-width: 1242px) {
  .co-webeeui-three-tiers {
    width: 100%
  }
  .co-webeeui-three-tiers .bullet-3-column {
    grid-template-columns: 1fr 1fr;
    gap: 1rem
  }
  .co-webeeui-three-tiers .notion-h2 {
    width: 80%
  }
  .co-webeeui-three-tiers>.notion-callout-text>.notion-text {
    width: 80%
  }
}
@media (max-width: 700px) {
  .co-webeeui-three-tiers .bullet-3-column {
    grid-template-columns: 1fr;
    margin-top: 1rem
  }
  .co-webeeui-three-tiers .notion-h2 {
    width: 100%
  }
  .co-webeeui-three-tiers>.notion-callout-text>.notion-text {
    width: 100%
  }
}
@media (max-width:780px) {
  .co-webeeui-brand-toggle .notion-toggle {
    width: 100%
  }
}
@media (max-width:1024px) {
  .co-webeeui-full-width-brand .notion-callout-text {
    width: 60%
  }
}
@media (max-width:768px) {
  .co-webeeui-full-width-brand .notion-callout-text {
    width: 90%
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }
  .sn-reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
  .notion-collection-card,
  .notion-collection-card:hover {
    transform: none;
    transition: none
  }
  .coll-posts-database .notion-collection-card.sn-card-in {
    animation: none
  }
}

/* Override Astral template: left-align top-level headings and text */
.notion-page-content-inner > .notion-h1,
.notion-page-content-inner > .notion-h2,
.notion-page-content-inner > .notion-h3,
.notion-page-content-inner > .notion-text {
  text-align: left;
}