CtaSticky CTA

---
// CtaSticky, recovered from blurr-components.pages.dev
---

<div id="cts-bar-sytgn2" class="cts__bar cts__bg-dark" role="complementary" aria-label="Sticky call to action" data-show-after="400"> <div class="cts__inner"> <p class="cts__text">Gratis audit aanvragen, normaal €299</p> <div class="cts__actions"> <a class="cts__btn" href="#">Ja, ik wil een gratis audit</a> <a class="cts__secondary" href="#">Meer info</a> <button class="cts__close" type="button" aria-label="Sluiten"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"> <path d="M2 2l12 12M14 2L2 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path> </svg> </button> </div> </div> </div> <script>(function(){const barId = "cts-bar-sytgn2";
const showAfter = 400;
const dismissible = true;

  (function () {
    const bar = document.getElementById(barId);
    if (!bar) return;

    let dismissed = false;

    function show() {
      bar.classList.add('cts--visible');
    }

    function hide() {
      bar.classList.remove('cts--visible');
    }

    function onScroll() {
      if (dismissed) return;
      if (window.scrollY > showAfter) {
        show();
      } else {
        hide();
      }
    }

    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();

    if (dismissible) {
      const closeBtn = bar.querySelector('.cts__close');
      if (closeBtn) {
        closeBtn.addEventListener('click', function () {
          dismissed = true;
          hide();
          window.removeEventListener('scroll', onScroll);
        });
      }
    }
  })();
})();</script>

<style>
.cts__bar{position:fixed;bottom:0;left:0;right:0;z-index:100;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.cts__bar.cts--visible{transform:translateY(0)}
.cts__bg-dark{background:var(--color-primary);color:#fff}
.cts__bg-accent{background:var(--color-accent);color:#fff}
.cts__bg-white{background:var(--color-bg);color:var(--color-primary);border-top:1px solid rgba(0,0,0,.1);box-shadow:0 -4px 24px #00000014}
.cts__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.5rem;max-width:1200px;margin:0 auto;flex-wrap:wrap}
.cts__text{margin:0;font-size:.9375rem;font-weight:500;flex:1;min-width:160px}
.cts__actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.cts__btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;border-radius:var(--radius);background:#fff;color:var(--color-primary);font-size:.9375rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:opacity .2s ease}
.cts__btn:hover{opacity:.88}
.cts__bg-white .cts__btn{background:var(--color-accent);color:#fff}
.cts__secondary{font-size:.875rem;font-weight:600;color:inherit;text-decoration:none;opacity:.75;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;white-space:nowrap;transition:opacity .2s ease}
.cts__secondary:hover{opacity:1}
.cts__bg-white .cts__secondary{color:var(--color-muted);border-color:#0003}
.cts__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.6;flex-shrink:0;border-radius:4px;transition:opacity .2s ease}
.cts__close:hover{opacity:1}
.cts__inner{flex-direction:column;align-items:flex-start;gap:.75rem}
.cts__btn{width:100%;justify-content:center}
.cts__actions{width:100%;justify-content:space-between}
</style>