Reference pages

Cross-link copy for the existing pages

<section class="mb-5 border jt-border-light rounded bg-archive shadow-sm p-4" aria-labelledby="related-demo-pages-title">
  <h3 id="related-demo-pages-title" class="fs-6 mb-3">Related demo pages</h3>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
    <div class="mb-4">
      <a class="d-block border rounded shadow-sm p-4 h-100 text-reset" href="/p/html-css-stylesheet.html">
        <strong class="d-block mb-2">HTML + CSS Appearance Sheet</strong>
        <span class="fs-7">Native tag rendering reference.</span>
      </a>
    </div>
    <div class="mb-4">
      <a class="d-block border rounded shadow-sm p-4 h-100 text-reset" href="/p/theme-style-sheet.html">
        <strong class="d-block mb-2">Theme Style Sheet</strong>
        <span class="fs-7">Theme-safe classes and components.</span>
      </a>
    </div>
    <div class="mb-4">
      <a class="d-block border rounded shadow-sm p-4 h-100 text-reset" href="/p/class-definitions.html">
        <strong class="d-block mb-2">Class Definitions</strong>
        <span class="fs-7">Author guide for the approved class set.</span>
      </a>
    </div>
  </div>
</section>

Gap fillers worth adding to the demos

Sticky background insert demonstration

This is the safest way to create the effect you described without inventing a new theme language. The background stays sticky while the content cards scroll over it. The extra classes below are local to this one demo block only.

<style>
  #sticky-insert-demo{
    position:relative;
  }

  #sticky-insert-demo .sticky-stage{
    position:relative;
  }

  #sticky-insert-demo .sticky-backdrop{
    position:sticky;
    top:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:14px;
  }

  #sticky-insert-demo .sticky-backdrop img{
    width:100%;
    height:100vh;
    object-fit:cover;
    display:block;
  }

  #sticky-insert-demo .sticky-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
    text-align:center;
  }

  #sticky-insert-demo .sticky-overlay-inner{
    max-width:760px;
  }

  #sticky-insert-demo .sticky-foreground{
    position:relative;
    margin-top:-70vh;
    padding-bottom:2rem;
  }

  #sticky-insert-demo .sticky-card{
    max-width:760px;
    margin:0 auto 1.5rem auto;
  }

  @media (max-width: 991.98px){
    #sticky-insert-demo .sticky-foreground{
      margin-top:-50vh;
    }
  }
</style>

<section id="sticky-insert-demo" class="mb-5" aria-labelledby="sticky-insert-title">
  <div class="sticky-stage">
    <div class="sticky-backdrop shadow-sm">
      <img src="IMAGE-URL" alt="Decorative background image" loading="lazy" />
      <div class="sticky-overlay">
        <div class="sticky-overlay-inner border rounded shadow-sm p-4 bg-archive">
          <p class="text-secondary fs-7 mb-2">Advanced theme demonstration</p>
          <h2 id="sticky-insert-title" class="mb-3">Sticky background insert</h2>
          <p class="mb-0">As the user scrolls, the foreground cards move across a fixed visual stage.</p>
        </div>
      </div>
    </div>

    <div class="sticky-foreground">
      <div class="sticky-card border rounded shadow-sm p-4 bg-archive">
        <h3 class="fs-5 mb-3">Card One</h3>
        <p class="mb-0">Use this for a practice-area intro, a client message, or a featured content block.</p>
      </div>

      <div class="sticky-card border rounded shadow-sm p-4 bg-archive">
        <h3 class="fs-5 mb-3">Card Two</h3>
        <p class="mb-0">The image remains visually anchored while content appears to slide over it.</p>
      </div>

      <div class="sticky-card border rounded shadow-sm p-4 bg-archive">
        <h3 class="fs-5 mb-3">Card Three</h3>
        <p class="mb-3">This is a good place for a call to action or a short explanation of the layout pattern.</p>
        <p class="mb-0"><a class="btn jt-btn-primary" href="#">Primary action</a></p>
      </div>
    </div>
  </div>
</section>

<script>
  document.addEventListener('scroll', function () {
    var demo = document.getElementById('sticky-insert-demo');
    if (!demo) return;

    var overlay = demo.querySelector('.sticky-overlay-inner');
    if (!overlay) return;

    var rect = demo.getBoundingClientRect();
    var shift = Math.max(-24, Math.min(24, rect.top * -0.04));
    overlay.style.transform = 'translateY(' + shift + 'px)';
  });
</script>

How I would improve the existing files