Components

404

The 404/not-found page — a single-rule addition on top of Page Hero at its largest size.

Markup

<section class="phero notfound on-dark hero-section" id="top">
  <p class="meta">N&ordm; 404 &mdash; NOT IN THE BOOK</p>
  <span class="kicker">N&ordm; 404</span>
  <h1 class="d"><span class="line"><span>This page isn&rsquo;t</span></span><span class="line"><span>on the <em>truck.</em></span></span></h1>
  <div class="sub">
    <div>
      <p>This address isn&rsquo;t in the book &mdash; it moved, or it never existed.</p>
      <div class="ctas">
        <a class="btn" href="index.html">Route me home</a>
        <a class="btn btn-ghost" href="tel:+12165550181">Call …</a>
      </div>
      <div class="field search-line">
        <label for="f-search">SEARCH THE SITE &mdash; PRESS ENTER</label>
        <input type="search" id="f-search" name="q" autocomplete="off">
      </div>
    </div>
  </div>
</section>

.notfound's only rule is sizing its <h1> up to --text-display-hero, the same size Hero uses — everything else (breadcrumb-free Page Hero layout, CTAs, meta box) is the standard page hero markup, plus .hero-section for the large size.

Inline search field

.search-line is a form field used standalone (not inside a <form>) to offer a site search box — this static template doesn't ship a working search backend, so wire the field's containing form up to your search implementation (a static-site search index, or your host/CMS's own search) if you want it to actually search.

Route rail

Below the hero, a plain dark .rail-list offers a short set of likely destinations — Trades, Job Files, Reviews, Contact — as an alternative to the inline search.