components.css View source
Layout

Footer

The deep-navy footer block. Brand cluster on the left (logo, tagline, email signup), then four utility columns (Shop, Account, Service, Company). Bottom strip carries copyright and policy links. Always full viewport width.

Production layout

5-column grid on desktop, 3-column on tablet, 2-column on mobile.

<footer class="site-footer">
  <div class="site-footer__grid">
    <div class="site-footer__brand">
      <img src="logo-white.svg" class="site-footer__logo" alt="USA Clean">
      <p>Tagline / about copy</p>
      <div class="site-footer__email-row">
        <input class="site-footer__email-input" type="email" placeholder="...">
        <button class="site-footer__email-btn">Subscribe</button>
      </div>
    </div>
    <div>
      <div class="site-footer__col-title">Shop</div>
      <div class="site-footer__links">
        <a href="...">All parts</a>
        <a href="...">By brand</a>
        ...
      </div>
    </div>
    <!-- repeat for each column -->
  </div>
  <div class="site-footer__bottom">
    <span>© 2026 USA-Clean, Inc.</span>
    <div class="site-footer__bottom-links">
      <a href="...">Privacy</a><a href="...">Terms</a>
    </div>
  </div>
</footer>

Anatomy

SlotClassNotes
Container.site-footerDeep-navy bg, top padding 64px, container side padding
Grid.site-footer__grid5-cols desktop / 3-cols tablet / 2-cols mobile, gap-8
Brand cluster.site-footer__brandSpans 2× the column width on desktop (2fr in grid template)
Logo.site-footer__logo26px tall white-on-dark version
Email signup.site-footer__email-rowInput + button input-group, gold submit
Column title.site-footer__col-titleUppercase label, bold
Link list.site-footer__linksVertical stack, gap-3, text 70% opacity
Bottom strip.site-footer__bottomCopyright + policy links, hairline divider above

Tokens consumed

SlotToken
Background--caster-footer-bg → surface.inverted (#0d1a4d)
Foreground--caster-footer-fg → alpha.white.85
Foreground muted--caster-footer-fg-muted → alpha.white.40
Top padding--caster-footer-padding-y → spacing.16 (64px)
Email submit--caster-color-accent-default
Email signup is the only interactive element by design. Everything else is navigation. Don't add social icons, certifications, or other clutter unless they convert — the footer is a recovery surface, not a marketing canvas.