Components

Emergency Band

The solid-amber, high-contrast call-out band used once on the home page for the 24/7 emergency line.

Markup

<section class="emergency" id="night-line" aria-label="Night line">
  <span class="k rv">NO HEAT? WATER RISING? BREAKER WON&rsquo;T HOLD?</span>
  <h2 class="d rv">It&rsquo;s never<br><em>a machine.</em></h2>
  <p class="support rv">The night line is Rennie Park, badge 04 &mdash; not an answering service.</p>
  <div class="rv"><a class="phone" href="tel:+12165550181">(216) 555-0181</a></div>
  <span class="staffed rv"><span class="dot" aria-hidden="true"></span>STAFFED ALL NIGHT, ALL YEAR</span>
</section>

Fixed amber skin

Unlike every other component, .emergency doesn't take a .paper/dark modifier — it's always the solid amber background with ink text, by design, so it reads as a distinct interrupt in the page's rhythm rather than one more section in the usual dark/paper alternation.

Staffed indicator

The .dot span is a small filled circle that blinks on an infinite CSS animation to read as a “live” indicator next to the “staffed” label — purely decorative (aria-hidden), and stopped entirely under prefers-reduced-motion (see Reveals).