in lime, which is the right default
for prose. These are not prose: each one is the single, bold, oversized
control in its own card, so the approved design left them clean. They are
still distinguishable without colour on hover and focus, and they are never
embedded in a sentence, so 1.4.1 is satisfied.
-------------------------------------------------------------------------- */
.wtv p a.wtv-contact-lead {
font-weight: 700;
text-decoration: none;
}
.wtv p a.wtv-contact-lead:hover,
.wtv p a.wtv-contact-lead:focus-visible {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
text-decoration-color: var(--wtv-lime);
}
/* ----------------------------------------------------------------------------
4. BUTTON ROWS
The approved markup spaced its buttons with uk-margin-small-right +
uk-margin-small-bottom, which leaves a phantom right margin on the last
button and can push a row past the viewport at 360px. A flex row with a gap
wraps cleanly instead and needs no margin utilities at all.
-------------------------------------------------------------------------- */
.ct-btn-row {
display: flex;
flex-wrap: wrap;
gap: .625rem;
}
.ct-btn-row--center { justify-content: center; }
@media (max-width: 420px) {
.ct-btn-row { flex-direction: column; align-items: stretch; }
}
/* ----------------------------------------------------------------------------
5. THE FORM
The lead form's chassis (labels, inputs, the two-up row, the honeypot, the
flash) lives in inventory.css and is shared with the vehicle page. Do not
restate it. These rules only settle the form into the approved layout.
-------------------------------------------------------------------------- */
/* The intro paragraph and the form share one measure so their left and right
edges line up down the column. */
.ct-measure {
max-width: 42rem;
margin-inline: 0; /* undo wtv-narrow-*'s centring in a left column */
}
.wtv-form-slot { max-width: 42rem; }
/* api/lead.php redirects back to in the markup, because five staff members are a list. The bullets and
the list padding are already off via .wtv-grid.
.ct-team-media is NOT .wtv-card-media-top. That class carries the inventory
treatment: 16/10, object-fit contain over a navy gradient, for cut-out
vehicle PNGs. A staff portrait is a 1:1 cover crop, which is what the
approved .wtv-team-photo does.
-------------------------------------------------------------------------- */
.ct-team-media {
display: block;
position: relative;
flex: 0 0 auto; /* never squeeze the portrait to equalise heights */
overflow: hidden;
}
/* Initials plate for the four staff whose portrait was not recoverable from
the old site. A monogram, deliberately: a stock model is never presented as
a real member of staff. Lime on navy is 8.08:1, and it is aria-hidden in any
case because the name is printed directly underneath. Replace a plate by
dropping a square portrait into /images/ and filling in 'photo' in the $team
array in pages/contact.php. */
.ct-team-monogram {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
width: 100%;
background:
repeating-linear-gradient(45deg, transparent 0 14px, rgba(255, 255, 255, .04) 14px 15px),
linear-gradient(135deg, var(--wtv-navy) 0%, var(--wtv-navy-deep) 100%);
color: var(--wtv-lime);
font-size: clamp(2.25rem, 7vw, 3.25rem);
font-weight: 900;
letter-spacing: .08em;
line-height: 1;
user-select: none;
}
/* The role label under a name. wtv-base paints .wtv-text-meta navy inside a
card body; the approved design muted it here so the NAME stays the loudest
thing in the card. --color-text-muted is 6.16:1 on white and 5.75:1 on the
tinted card. */
.ct-team .wtv-card-body .wtv-text-meta { color: var(--wtv-muted-text); }
/* ----------------------------------------------------------------------------
7. THE LEGAL / SMS DISCLAIMER LINES
wtv-base releases theme.css's 42rem paragraph cap inside .wtv, which is what
lets the approved centred layout work. These two paragraphs still need a
measure or they run the full 78rem container as one long line.
-------------------------------------------------------------------------- */
.ct-legal {
max-width: 46rem;
margin-inline: auto;
}
/* ----------------------------------------------------------------------------
8. THE MAP
.wtv-map owns the 4:3 frame, the border and the lime bottom rule. The iframe
is GOOGLE MAPS as of 2026-09-16, anchored to the dealership's own listing by
place CID (see the long note in pages/contact.php for how to rebuild it).
The old comment here said Google's embed "404s behind X-Frame-Options and
paints an empty box". That is true only of the ?output=embed REDIRECT; the
/maps/embed?pb=... URL it redirects to answers 200 and frames cleanly. The
origin lives in frame-src in includes/bootstrap.php, which is the copy that
applies on WP Engine - .htaccess is ignored there.
-------------------------------------------------------------------------- */
.wtv-map iframe { color-scheme: light; } /* the embed ships no dark tiles */
/* wtv-base adds `margin-top: 1.5rem` to .wtv-map below 768px. That existed
because UIkit's grid stacked with a negative margin and no row gap. This
layout is CSS Grid and .wtv-grid-large already puts 2.5rem between the
stacked columns, so the margin lands ON TOP of the gap and reads as a
doubled section break. Removed for this page's map only. */
@media (max-width: 768px) {
.wtv-map { margin-top: 0; }
}
/* ----------------------------------------------------------------------------
9. PRINT
The address, the hours and the direct lines are what people print off this
page. The map iframe and the button row are not.
-------------------------------------------------------------------------- */
@media print {
.ct-btn-row,
.wtv-map,
.wtv-form-slot { display: none; }
.ct-team-monogram { background: none; color: #000; border: 1px solid #999; }
}
/* THE TEAM, FIVE ACROSS on a wide screen (Chance, 2026-10-01). Seven people, so
the second row of two is centred (tracks 19-42 of the 60-track grid). */
@media (min-width: 1100px) {
.wtv-grid.ct-team > * { grid-column: span 12; }
.wtv-grid.ct-team > :nth-child(5n+1):nth-last-child(2) { grid-column: 19 / span 12; }
.ct-team .wtv-contact-lead { font-size: 1.15rem; white-space: nowrap; }
}
/* "PREFER TO TALK NOW?" STAYS IN VIEW beside the form (Chance, 2026-10-01). The
column stretches to the form's height; the card sticks just under the pinned
nav bar. Two-column widths only. */
@media (min-width: 960px) {
#contact-form .wtv-grid { align-items: stretch; }
#contact-form .wtv-width-1-3-m > .wtv-card { position: sticky; top: calc(var(--v-sticky-top, 80px) + 1.5rem); }
}