Theme Section Base

<div class="ws-theme-section">
  <!-- Sticky nav that adapts its background and text color to the active section -->
  <nav id="ws-adaptive-nav" class="sticky top-0 z-20 flex items-center justify-between px-8 py-4"
    style="background: var(--ws-theme-section-bg); color: var(--ws-theme-section-text); transition: background 0.5s ease, color 0.5s ease;">
    <span class="text-sm font-semibold tracking-tight">Brand</span>
    <ul class="flex gap-6 list-none m-0 p-0">
      <li><a href="#" class="text-sm font-medium opacity-70 hover:opacity-100 transition-opacity no-underline" style="color: inherit">Work</a></li>
      <li><a href="#" class="text-sm font-medium opacity-70 hover:opacity-100 transition-opacity no-underline" style="color: inherit">About</a></li>
      <li><a href="#" class="text-sm font-medium opacity-70 hover:opacity-100 transition-opacity no-underline" style="color: inherit">Contact</a></li>
    </ul>
  </nav>

  <!-- Section 01: Light -->
  <section
    data-section-bg="oklch(97% 0.006 75)"
    data-section-text="oklch(15% 0.01 75)"
    style="background: oklch(97% 0.006 75); min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 5rem 2rem;">
    <div class="max-w-2xl text-center" style="color: oklch(15% 0.01 75)">
      <p class="text-xs font-mono uppercase tracking-[0.2em] opacity-40 mb-4">01 / Light</p>
      <h2 class="text-4xl font-bold tracking-tight mb-5">Open & Accessible</h2>
      <p class="text-lg leading-relaxed opacity-60 max-w-lg mx-auto">
        Clean light sections communicate openness, clarity, and trustworthiness.
        Perfect for introductions and value propositions.
      </p>
    </div>
  </section>

  <!-- Section 02: Dark -->
  <section
    data-section-bg="oklch(14% 0.01 240)"
    data-section-text="oklch(94% 0.005 240)"
    style="background: oklch(14% 0.01 240); min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 5rem 2rem;">
    <div class="max-w-2xl text-center" style="color: oklch(94% 0.005 240)">
      <p class="text-xs font-mono uppercase tracking-[0.2em] opacity-40 mb-4">02 / Dark</p>
      <h2 class="text-4xl font-bold tracking-tight mb-5">Depth & Drama</h2>
      <p class="text-lg leading-relaxed opacity-60 max-w-lg mx-auto">
        Dark sections build atmosphere and direct focus to key content moments.
        Use for case studies, product reveals, or statement quotes.
      </p>
    </div>
  </section>

  <!-- Section 03: Accent -->
  <section
    data-section-bg="oklch(52% 0.22 280)"
    data-section-text="oklch(97% 0.004 280)"
    style="background: oklch(52% 0.22 280); min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 5rem 2rem;">
    <div class="max-w-2xl text-center" style="color: oklch(97% 0.004 280)">
      <p class="text-xs font-mono uppercase tracking-[0.2em] opacity-40 mb-4">03 / Accent</p>
      <h2 class="text-4xl font-bold tracking-tight mb-5">Momentum & Energy</h2>
      <p class="text-lg leading-relaxed opacity-80 max-w-lg mx-auto">
        Accent sections create visual peaks — ideal for CTAs, pricing reveals,
        and product launch moments.
      </p>
      <a href="#" class="mt-8 inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/15 px-6 py-3 text-sm font-semibold backdrop-blur hover:bg-white/25 transition-colors no-underline" style="color: inherit">
        Get started →
      </a>
    </div>
  </section>

  <script>
    (function () {
      var nav = document.getElementById('ws-adaptive-nav');
      if (!nav) return;
      var sections = document.querySelectorAll('[data-section-bg]');
      var observer = new IntersectionObserver(
        function (entries) {
          entries.forEach(function (entry) {
            if (entry.intersectionRatio >= 0.5) {
              nav.style.background = entry.target.dataset.sectionBg;
              nav.style.color = entry.target.dataset.sectionText;
            }
          });
        },
        { threshold: 0.5 }
      );
      sections.forEach(function (s) { observer.observe(s); });
    })();
  </script>
</div>