cta-double-marquee

Summary

Two-rail call-to-action marquee. The top rail uses sub-bg (raised charcoal) and slides "Get In Touch" + star glyphs; the bottom rail is bordered text only (bord-item) and slides "Contact Us" the opposite direction. Each rail wraps a full-section <a class="overlay-link"> so the entire band is a single click target leading to the contact page.

HTML structure (minimal)

<section class="call-marq section-padding o-hidden">
  <div class="main-marq lrg sub-bg pt-20 pb-20">
    <div class="slide-har st1">
      <div class="box">
        <!-- repeated "Get In Touch" + star -->
        <div class="item"><h4 class="d-flex align-items-center"><span>Get In Touch</span><span class="icon-img-50 ml-40"><img src="/assets/imgs/star.png" alt="" /></span></h4></div>
      </div>
      <a href="/page-contact" class="overlay-link"></a>
    </div>
  </div>
  <div class="main-marq bord-item">
    <div class="slide-har st2">
      <div class="box">
        <div class="item"><h4 class="d-flex align-items-center"><span>Contact Us</span></h4></div>
      </div>
      <div class="box"><!-- duplicate for loop --></div>
      <a href="/page-contact" class="overlay-link"></a>
    </div>
  </div>
</section>

Key SCSS tokens

.call-marq {
  .main-marq.lrg .item h4 { font-size: 80px; }
  .bord-item h4 {
    -webkit-text-stroke: 1px rgba(255, 255, 255, .25);
    color: transparent;
  }
  .overlay-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    /* invisible click area covering the entire rail */
  }
  .slide-har { position: relative; }
}

Notable details

• overlay-link covers the entire marquee in a single anchor — the user doesn't need to click a specific letter; any tap on the band navigates to /page-contact.
• Two rails in opposite directions create a "pull-apart" feel that recalls clothing-tag stitching; common pattern in fashion / agency brand sites.
• sub-bg filled rail vs bord-item outline rail keeps visual hierarchy without doubling typography weight.

Use when

• Mid-page or pre-footer CTA bands where you want maximal click-target without a giant button.
• Long-scroll layouts that need a kinetic break before the footer.

Caveats

• position: absolute on .overlay-link with z-index: 5 will absorb any clicks on inner elements — nothing else in the marquee should be interactive.
• Marquee animation is CSS keyframes — does not pause on hover or for prefers-reduced-motion users out of the box.