Components

Hero

The full-bleed home page hero — background photo, a stat “meta” box, a line-reveal headline, CTAs, and the marquee band underneath.

Markup

.hero is used once, on the home page only. Interior pages use the shorter Page Hero instead.

<section class="hero on-dark" id="top">
  <div class="bg" style="background-image:url(img/hero.jpg)" role="img" aria-label="…"></div>
  <div class="shade" aria-hidden="true"></div>
  <p class="meta">WINSLOW, OHIO<br>41.0308&deg; N, 81.5217&deg; W</p>
  <h1 class="d"><span class="line"><span>The part&rsquo;s</span></span><span class="line"><span>on the <em>truck.</em></span></span></h1>
  <div class="sub">
    <div>
      <p>Plumbing, heat, and power for Winslow since 1987.</p>
      <div class="ctas">
        <a class="btn" href="contact.html">Get my quote</a>
        <a class="btn btn-ghost" href="tel:+12165550181">Call …</a>
      </div>
    </div>
    <div class="scrollhint" aria-hidden="true">SCROLL &darr;</div>
  </div>
  <div class="marquee" aria-hidden="true"><div class="track">
    <span>Plumbing <em>&mdash;</em> Heating …</span>
    <span>Plumbing <em>&mdash;</em> Heating …</span>
  </div></div>
</section>

Headline line reveal

Each headline word-group sits inside a .line wrapper (overflow: hidden) around an inner <span> that starts translated below its own box. When the page finishes loading, main.js adds the .on class to .hero, which slides each line's inner span up into place with a staggered delay per line.

Stat meta box

The absolutely-positioned .meta paragraph in the top-right corner carries small mono-styled reference facts (coordinates, established year, response time). It sits above the headline in stacking order so long content never gets visually clipped behind the huge display type.

Marquee

The .marquee band repeats its .track content twice back-to-back and animates a continuous translateX loop — a pure-CSS marquee, no JavaScript. It automatically stops under prefers-reduced-motion (see Reveals).

Javascript

main.js adds .on to whichever of .hero, .phero or .coming is present on the page shortly after DOMContentLoaded, triggering the line-reveal transition described above. Without JavaScript (or under prefers-reduced-motion), the headline renders in its final position immediately via a <noscript> override — visitors never see clipped or hidden text.