is not on a flex item at all and
silently resolves to 0. That is why the rule below looked correct for weeks
and did nothing: buttons sat 35px to 108px off the bottom depending on how
much text the card carried.
Excluded: .evs-bases, used by the base and armrest cards. Those end in
different things - a status badge on some, a "Fits:" note on others - so
bottom-aligning the last child would line up elements that are not
equivalent. They are better left flowing.
The !important is not decoration. custom.css carries
".site-main p + p { margin-top: 1rem !important }", and the button's wrapping
paragraph follows another paragraph, so that blunt rule wins against anything
without it. Same override layer that was quietly setting the page title's
margins. Remove the !important here only when that rule goes. */
.evs-cards:not(.evs-bases) .evs-card__body > :last-child {
margin-top: auto !important;
margin-bottom: 0;
}
/* Still needed for the case where the button is a direct child and no is
inserted - keeps the button its own width rather than stretching. */
.evs-card__body .evs-btn { align-self: flex-start; }
/* ---------- Buttons ---------- */
.evs-btn {
display: inline-block;
padding: 10px 18px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
background: linear-gradient(#2a577d, #173a57);
color: #fff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
border: 0; cursor: pointer;
}
.evs-btn:hover { background: linear-gradient(#2f6a98, #1b4c73); }
.evs-btn--ghost {
background: #fff; color: var(--evs-blue) !important;
border: 1px solid var(--evs-blue-soft); box-shadow: none;
}
.evs-btn--ghost:hover { background: var(--evs-tint); }
/* ---------- Approval badges ---------- */
.evs-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; padding: 0; list-style: none; }
.evs-badge {
display: inline-flex; align-items: center; gap: .4rem;
padding: 6px 12px;
border: 1px solid var(--evs-blue-soft);
border-radius: 999px;
background: var(--evs-tint);
color: var(--evs-blue);
font-size: .85rem; font-weight: 700; letter-spacing: .02em;
}
.evs-badge--lead { background: var(--evs-blue); color: #fff; border-color: var(--evs-blue); }
/* Same light blue ground as the plain badges - Richard, 9 Sept. The dashed
border is what now carries "in progress" rather than the paler fill, so it
still reads differently from an approval already held. */
.evs-badge--pending {
background: var(--evs-tint);
color: var(--evs-muted);
border: 1px dashed var(--evs-blue-soft);
font-weight: 600;
}
/* ---------- Spec table ---------- */
.evs-spec-wrap { overflow-x: auto; margin: 1.25rem 0; }
.evs-spec { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .95rem; }
.evs-spec caption { text-align: left; font-weight: 700; color: var(--evs-blue); padding-bottom: .5rem; }
.evs-spec th, .evs-spec td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--evs-line); vertical-align: top; }
.evs-spec th { width: 34%; background: var(--evs-tint); color: var(--evs-blue); font-weight: 700; }
.evs-spec tr:last-child th, .evs-spec tr:last-child td { border-bottom: 0; }
/* ---------- Feature list ---------- */
.evs-features { list-style: none; margin: 1rem 0; padding: 0; }
.evs-features li { position: relative; padding: .35rem 0 .35rem 1.6rem; }
.evs-features li::before {
content: ""; position: absolute; left: 0; top: .85em;
width: 8px; height: 8px; margin-top: -4px;
background: var(--evs-blue-soft); border-radius: 2px; transform: rotate(45deg);
}
/* ---------- Callout ---------- */
.evs-callout {
border-left: 4px solid var(--evs-blue);
background: var(--evs-tint);
padding: 16px 20px;
border-radius: 0 var(--radius) var(--radius) 0;
margin: 1.5rem 0;
}
.evs-callout h3 { margin-top: 0; color: var(--evs-blue); }
.evs-callout p:last-child { margin-bottom: 0; }
/* ---------- Colour swatches ---------- */
.evs-swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px; margin: 1.5rem 0; padding: 0; list-style: none;
}
.evs-swatch { text-align: center; }
.evs-swatch img {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
border-radius: var(--radius); border: 1px solid var(--evs-line);
}
.evs-swatch__name { display: block; margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--evs-ink); }
/* ---------- Media + text split ---------- */
.evs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin: 1.5rem 0; }
.evs-split img { border-radius: var(--radius); width: 100%; }
@media (max-width: 720px) { .evs-split { grid-template-columns: 1fr; } }
/* ---------- Audience entry points ---------- */
.evs-audience .evs-card__media { aspect-ratio: auto; padding: 18px 16px 0; }
.evs-audience .evs-card { border-top: 4px solid var(--evs-blue-soft); }
/* ---------- Notes ---------- */
.evs-note { font-size: .85rem; color: var(--evs-muted); margin: .75rem 0; }
/* ---------- Small screens ----------
Tightened so the first product tile clears the fold on a 375x812 phone. At
the desktop sizes the front-page h1 ran to four lines and pushed the first
seat to 799px - just below the fold on the commonest phone viewport, which
defeats the point of leading with the products. */
@media (max-width: 560px) {
.evs-cards { grid-template-columns: 1fr; }
.evs-section > h2 { font-size: 1.3rem; }
.evs-section { margin: 1.75rem 0; }
.site-main h1 { font-size: 1.65rem; line-height: 1.2; margin-bottom: .6rem; }
.evs-lede { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
}
/* ---------- Print ---------- */
@media print {
.primary-nav, .nav-toggle, .site-footer, .hero-image { display: none !important; }
.site-main { box-shadow: none; }
}
/* ---------- Whole-tile click target ----------
The card title stays the real link (so it reads correctly to screen readers
and shows a proper URL on hover); this overlay extends the click target to
the whole tile. Any other genuine link inside a card must sit above it. */
.evs-card { position: relative; }
.evs-card__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.evs-card:focus-within { box-shadow: 0 0 0 3px rgba(42,87,125,.45); }
.evs-card .evs-btn { position: relative; z-index: 2; }
/* Text columns in a split should align to the top, not float mid-height. */
.evs-split { align-items: start; }
/* Sensible top alignment when a split pairs an image with a list. */
.evs-split > * { min-width: 0; }
/* ---------- Contact Form 7 ----------
CF7 ships essentially unstyled. Keep it to the same visual language as the
rest of the site rather than letting it look bolted on. */
.wpcf7 { max-width: 640px; margin-top: 1rem; }
.evs-form-row { margin: 0 0 1rem; }
.evs-form-row label { display: block; font-weight: 600; color: var(--evs-blue); font-size: .95rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%;
padding: 10px 12px;
margin-top: .35rem;
border: 1px solid var(--evs-line);
border-radius: 6px;
font: inherit;
color: var(--evs-ink);
background: #fff;
}
.wpcf7 textarea { resize: vertical; min-height: 140px; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
outline: none;
border-color: var(--evs-blue-soft);
box-shadow: 0 0 0 3px rgba(42,87,125,.18);
}
.wpcf7 input[type="submit"] { font: inherit; }
.wpcf7 .wpcf7-not-valid { border-color: var(--evs-accent); }
.wpcf7-not-valid-tip { color: var(--evs-accent); font-size: .85rem; margin-top: .25rem; }
.wpcf7 form .wpcf7-response-output {
margin: 1rem 0 0;
padding: 12px 16px;
border-radius: var(--radius);
border-width: 1px;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--evs-ok); background: #eef7f2; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--evs-accent); background: #fdf0f2; }
.wpcf7-spinner { vertical-align: middle; }
/* ---------- Approvals badge group labels ----------
R44 is a type approval; R14/R16/R17 are witnessed dynamic tests. The two are
labelled separately so the page never implies the seat is type approved. */
.evs-badges__label {
margin: 1.25rem 0 .35rem;
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--evs-muted);
}
.evs-badges__label + .evs-badges { margin-top: 0; }
/* Upholstery alternative line on a seat card - sits just above the button,
quiet enough not to compete with the summary above it. */
.evs-card__alt {
margin: 0 0 1rem;
font-size: .85rem;
font-weight: 600;
color: var(--evs-blue-soft);
}
/* ---------- Front-page heading band ----------
A faded image BEHIND the h1, not a separate image band above it. The
distinction matters: this costs no vertical space, so it does not push the
product tiles down the page. The banner-blindness finding applies to
decorative bands that occupy the fold, not to a tinted backdrop carrying the
page's own heading.
Source: cropped and desaturated from the EVS Ltd carousel. Deliberately
people-free - the US-crew shots read as American to a UK audience. */
.evs-hero-band {
position: relative;
isolation: isolate;
margin: -24px calc(-1 * var(--gutter)) 2rem;
padding: 2.75rem var(--gutter) 2.25rem;
border-radius: var(--radius) var(--radius) 0 0;
background: linear-gradient(#0f4a78, #072741);
overflow: hidden;
}
.evs-hero-band::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("hero-ambulance-interior.jpg") center 38% / cover no-repeat;
opacity: .22; /* faded hard: the text has to stay legible */
mix-blend-mode: luminosity;
}
.evs-hero-band h1 {
color: #fff;
margin: 0 0 .6rem;
max-width: var(--evs-measure);
}
.evs-hero-band .evs-lede {
color: #d7e8ff;
margin: 0;
}
@media (max-width: 560px) {
.evs-hero-band { padding: 1.75rem var(--gutter) 1.5rem; margin-bottom: 1.5rem; }
}
/* ---------- Header branding ----------
The EVS mark is navy and red on transparency and the header band is dark
navy, so the mark sits on a light chip rather than being recoloured.
Recolouring a manufacturer's logo without their approved reversed artwork is
not our call - if EVS supply an official white version, use it and delete
the chip rules below. */
.site-header .branding {
flex-direction: row;
align-items: center;
gap: 14px;
min-width: 0;
}
.branding__logo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
padding: 3px;
background: #fff;
border-radius: var(--radius);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.branding__logo img,
.branding__logo .custom-logo-link img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.branding__text { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 560px) {
.site-header .branding { gap: 10px; }
.branding__logo { width: 42px; height: 42px; padding: 2px; }
.site-header .site-title { font-size: 20px; line-height: 1.15; }
}
/* ---------- Seat page media ----------
Cap the image column at the tile's native width. The tiles are 338px and the
split column was ~555px, so the main product shot was being upscaled 1.64x
and looking soft. Never upscale a product photo. */
.evs-split { grid-template-columns: minmax(0, 340px) 1fr; }
.evs-split__media img { width: 100%; height: auto; }
@media (max-width: 720px) {
.evs-split { grid-template-columns: 1fr; }
.evs-split__media { max-width: 340px; }
}
/* ---------- Additional product views ----------
Supporting views, deliberately smaller than the main product image in
.evs-split__media (capped at 340px wide). These are portrait shots up to
1440x2560, so they must be constrained by HEIGHT, not width: a 1fr column
on a 1138px container gave a 525x933 tile - taller than the viewport and
nearly three times the area of the seat photo it was supporting. Cap the
height and let the width follow, so tall and square shots sit level. */
.evs-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
justify-content: start;
gap: 16px;
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
}
.evs-gallery li {
background: var(--evs-tint);
border: 1px solid var(--evs-line);
border-radius: var(--radius);
padding: 12px;
display: flex;
}
.evs-gallery figure {
margin: 0;
display: flex;
flex-direction: column;
flex: 1;
}
/* Images share a fixed box so the captions below them line up across the row,
whatever each shot's aspect ratio. */
.evs-gallery figure > img:first-child,
.evs-gallery figure > a > img {
width: auto;
max-width: 100%;
height: 200px;
object-fit: contain;
align-self: center;
}
.evs-gallery figcaption {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--evs-line);
font-size: .8rem;
line-height: 1.35;
color: var(--evs-muted);
}
/* ---------- Footer navigation ----------
A flat row of links between the two widget columns and the copyright line.
style.css styles .footer-menu as a vertical stack for the old single-column
footer; this overrides it for the horizontal row only, so both still work. */
.footer-nav {
border-top: 1px solid rgba(255, 255, 255, .18);
padding: 16px 0 4px;
margin: 0 0 8px;
}
.footer-nav .footer-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 10px;
}
.footer-nav .footer-menu li { margin: 0; }
.footer-nav .footer-menu a { font-size: 15px; }
/* ---------- Lightbox ----------
Enlarges the "More views" thumbnails. Built on the native