FIELDCRAFT DOCS HTML template · v1.3.0

Components

Service Area

Three small dark strips used to close out most pages: the coverage-ring town list, a work-order-number line, and a night-line phone reference.

Coverage ring

.ring is the centered strip listing every town in the service area, appearing near the bottom of almost every page in the template.

<section class="ring on-dark" id="ring" aria-label="Service area">
  <span class="kicker rv">INSIDE THE 60-MINUTE RING</span>
  <p class="towns rv">WINSLOW <em>&middot;</em> HARLAN TOWNSHIP <em>&middot;</em> BELL CREEK</p>
  <p class="quiet rv">Outside the ring? Call anyway &mdash; Rennie will tell you straight.</p>
</section>

Town names sit in the .towns line with <em> separators styled amber; .quiet is a smaller, muted closing line underneath.


Next work-order number

.nextno is a single centered mono line stating the next available work-order number as a small piece of social proof (implying real, sequential volume). Its figure is wrapped in <b> for the amber emphasis color.


Night-line reference strip

.nightref repeats the emergency phone number as a compact strip further down a page (after the main Emergency Band has already appeared higher up), pairing a single mono .line with a ghost button.

<section class="nightref on-dark">
  <span class="line">NIGHT LINE: 60 MIN &mdash; STAFFED, NEVER A SERVICE</span>
  <a class="btn btn-ghost" href="tel:+12165550181">Call (216) 555-0181 &mdash; Rennie picks up</a>
</section>