/* ==========================================================================
Willis Collision — Components
Reusable building blocks. Buttons, forms, cards.
========================================================================== */
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: 48px;
padding: var(--s-3) var(--s-6);
font-family: var(--ff-sans);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
line-height: 1;
text-decoration: none;
border: 1.5px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition:
background-color var(--motion-base) var(--easing),
color var(--motion-base) var(--easing),
border-color var(--motion-base) var(--easing),
transform var(--motion-fast) var(--easing);
white-space: nowrap;
}
.btn:active {
transform: translateY(1px);
}
.btn--primary {
background: var(--c-signal);
color: var(--c-paper);
border-color: var(--c-signal);
}
.btn--primary:hover {
background: var(--c-signal-deep);
border-color: var(--c-signal-deep);
color: var(--c-paper);
}
.btn--secondary {
background: var(--c-paper);
color: var(--c-ink);
border-color: var(--c-ink);
}
.btn--secondary:hover {
background: var(--c-ink);
color: var(--c-paper);
}
.btn--ghost {
background: transparent;
color: var(--c-ink);
border-color: transparent;
padding-inline: var(--s-3);
}
.btn--ghost:hover {
background: var(--c-fog);
}
.btn--lg {
min-height: 56px;
padding: var(--s-4) var(--s-8);
font-size: 1.125rem;
}
/* ---------- Forms ---------- */
.field {
display: flex;
flex-direction: column;
gap: var(--s-2);
margin-bottom: var(--s-5);
}
.field__label {
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: var(--c-ink);
letter-spacing: 0.02em;
}
.field__hint {
font-size: var(--fs-small);
color: var(--c-slate);
}
.input,
.textarea,
.select {
font-size: 1rem; /* 16px to prevent iOS zoom on focus */
font-family: var(--ff-sans);
color: var(--c-ink);
background: var(--c-paper);
border: 1.5px solid var(--c-mist);
border-radius: var(--radius);
padding: var(--s-3) var(--s-4);
transition:
border-color var(--motion-fast) var(--easing),
box-shadow var(--motion-fast) var(--easing);
width: 100%;
}
.textarea {
min-height: 7rem;
resize: vertical;
}
.input:hover,
.textarea:hover,
.select:hover {
border-color: var(--c-slate);
}
.input:focus,
.textarea:focus,
.select:focus {
outline: none;
border-color: var(--c-signal);
box-shadow: 0 0 0 3px var(--c-signal-soft);
}
.input--error {
border-color: var(--c-error);
}
.field__error {
font-size: var(--fs-small);
color: var(--c-error);
font-weight: var(--fw-semibold);
}
/* ---------- Card ---------- */
.card {
background: var(--c-paper);
border: 1px solid var(--c-mist);
border-radius: var(--radius);
padding: var(--s-6);
box-shadow: var(--shadow-subtle);
}
.card--lift {
transition:
box-shadow var(--motion-base) var(--easing),
transform var(--motion-base) var(--easing);
}
.card--lift:hover {
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
/* ---------- Section ---------- */
.section {
padding-block: var(--s-16);
}
@media (min-width: 768px) {
.section {
padding-block: var(--s-20);
}
}
.section--alt {
background: var(--c-fog);
}
.section--ink {
background: var(--c-ink);
color: var(--c-paper);
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
color: var(--c-paper);
}
.section--signal {
background: var(--c-signal);
color: var(--c-paper);
}
.section--signal h1,
.section--signal h2,
.section--signal h3 {
color: var(--c-paper);
}
/* Eyebrow / kicker text */
.eyebrow {
display: inline-block;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-signal);
margin-bottom: var(--s-3);
}
/* Lead paragraph */
.lead {
font-size: 1.25rem;
line-height: var(--lh-relaxed);
color: var(--c-charcoal);
max-width: 60ch;
}
/* ---------- Inline mask-image icons ----------
These tint to the parent's text color (currentColor) via mask-image, so a
single icon source renders correctly on both dark hero buttons and light
surfaces. This replaces the 📞 emoji which was nearly invisible on
dark/translucent backgrounds because OS-rendered emoji ignore CSS color.
*/
.icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
flex-shrink: 0;
}
/* Phone handset — sized slightly larger than caps for visual weight in CTAs. */
.icon-phone {
width: 1.05em;
height: 1.05em;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}