Objects
Buttons
The .btn and .tert classes every call-to-action in the template is built from.
Primary button
.btn is the solid amber button used for the main call to action in a section —
a hero's "Get my quote," the closer form's submit button, and similar. It lifts slightly and brightens
on hover.
<a class="btn" href="contact.html">Get my quote</a>Ghost variant
Add .btn-ghost for a transparent, outlined secondary button — used next to a
primary .btn where a section needs two calls to action (for example, the hero's "Get my
quote" alongside a "Call" ghost button), or alone against a dark or amber background where a solid
button would be too heavy.
<a class="btn btn-ghost" href="tel:+12165550181">Call (216) 555-0181 — Rennie picks up</a>Compact size
Add .btn-compact for a smaller button with tighter padding and a smaller label —
used inline next to a form field, like the newsletter signup button in the footer and the coming-soon
page's email capture.
<button class="btn btn-compact" type="submit">Send me the checklist</button>Tertiary link
.tert is the underlined mono-label link used for lower-emphasis navigation —
"See every trade," "Read all 1,742," "Open the job files." It automatically adjusts its color when
nested inside a .paper section, matching whichever skin it's placed in with no extra
class needed.
<a class="tert" href="services.html">See every trade</a>