/**
* Invicta — new homepage template styles.
* Scoped under .invicta-home so it cannot clash with the existing site CSS.
* Uses the established brand tokens: red #ff0000 / #ff3333, ink #1a1a1a,
* grey sections #f5f5f5, white cards (#fff) with #e8e8e8 borders, PT Sans.
*/
.invicta-home { font-family: 'PT Sans', sans-serif; color: #1a1a1a; }
.invicta-home .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.invicta-home img { max-width: 100%; height: auto; display: block; }
/* Shared section header (matches the site's centred heading + red rule) */
.home-section__header { text-align: center; margin-bottom: 44px; }
.home-section__header h2 {
font-size: 32px; font-weight: 700; color: #1a1a1a; margin: 0; letter-spacing: -0.3px;
}
.home-section__header h2::after {
content: ''; display: block; width: 44px; height: 3px; background: #ff0000; margin: 14px auto 0;
}
.home-section__intro {
font-size: 19px; color: #333; max-width: 680px; margin: 18px auto 0; line-height: 1.75;
}
/* Buttons (reuses the theme .cta-button; adds a dark phone button) */
.invicta-home .home-call-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 15px 30px; background: #1a1a1a; color: #fff;
border-radius: 5px; font-weight: bold; text-decoration: none;
transition: background-color 0.3s ease;
}
.invicta-home .home-call-btn:hover { background: #000; color: #fff; }
.home-cta-group { display: flex; flex-wrap: wrap; gap: 14px; }
/* ── SECTION 1 — HERO (full-width background image, flush to header) ─ */
.home-hero {
position: relative;
margin-top: 0; /* sit directly against the header */
display: flex;
align-items: center;
min-height: clamp(400px, 50vh, 540px);
padding: 40px 0;
background-color: #1a1a1a; /* fallback while the image loads */
background-position: left center; /* anchor left so the van stays in view (matches the homepage slider) */
background-size: cover;
background-repeat: no-repeat;
color: #fff;
}
/* Light, even wash over the whole image — keeps the photo bright. Legibility
comes from the translucent dark panel behind the copy (below). */
.home-hero::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.18);
}
.home-hero > .container { position: relative; z-index: 1; width: 100%; }
/* Content block sits on the right of the hero on a transparent dark panel,
text left-aligned for a clean edge. */
.home-hero__content {
max-width: 620px;
margin-left: auto;
text-align: left;
background: rgba(18, 18, 18, 0.6);
padding: 22px 30px;
border-radius: 12px;
}
.home-hero__cta { justify-content: flex-start; }
.home-hero__points { justify-content: flex-start; }
.home-hero__title { font-size: 30px; line-height: 1.2; color: #fff; margin: 0 0 16px; letter-spacing: -0.4px; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.home-hero__sub { font-size: 18px; color: #f0f0f0; line-height: 1.7; margin: 0 0 26px; max-width: 60ch; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.home-hero__cta { margin-bottom: 26px; }
.home-hero__cta .cta-button,
.home-hero__cta .home-call-btn { font-size: 16px; }
.home-hero__points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.home-hero__points li { display: flex; align-items: center; gap: 9px; font-weight: 700; color: #fff; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.home-hero__points i { color: #ff3b3b; font-size: 15px; }
/* ── SECTION 2 — TRUST BAR (compact dark strip, matches the site) ─ */
.home-trust-bar { background: #1a1a1a; padding: 16px 0; }
.home-trust-bar__grid { display: grid; grid-template-columns: 1fr; gap: 14px 28px; }
.home-trust-bar__card { display: flex; align-items: center; gap: 12px; }
.home-trust-bar__icon { color: #ff3b3b; font-size: 22px; line-height: 1; flex: 0 0 auto; }
.home-trust-bar__title { display: block; font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.2; margin: 0; }
.home-trust-bar__text { display: block; font-size: 12px; color: #b9b9b9; line-height: 1.35; margin: 2px 0 0; }
/* ── Generic section spacing ────────────────────────── */
.home-services, .home-why, .home-temperature, .home-compliance,
.home-sectors, .home-service-links, .home-reviews, .home-clients { padding: 64px 0; }
.home-sectors { background: #f5f5f5; }
/* ── Card grids (services / sectors) ────────────────── */
.home-card-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.home-card {
background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 30px 26px;
display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.home-card__icon {
display: flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: 50%; background: #ff0000; margin-bottom: 18px;
}
.home-card__icon i { color: #fff; font-size: 22px; }
.home-card__title { font-size: 19px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; line-height: 1.3; }
.home-card__copy { font-size: 15px; color: #666; line-height: 1.65; margin: 0 0 18px; flex: 1; }
.home-card__cta { margin-top: auto; font-weight: 700; color: #ff0000; text-decoration: none; align-self: flex-start; }
.home-card__cta:hover { color: #ff3333; text-decoration: underline; }
/* ── SECTION 3 — SERVICES: elevated card treatment (wow factor) ──
Scoped to .home-services so the shared .home-card used by the Sectors
grid keeps its calmer styling. */
.home-services .home-card-grid { counter-reset: home-service; }
.home-services .home-card {
position: relative;
overflow: hidden;
padding: 34px 28px 30px;
border: 1px solid #ececec;
border-radius: 14px;
counter-increment: home-service;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Large ghost index number in the top-right corner — an editorial flourish. */
.home-services .home-card::before {
content: counter(home-service, decimal-leading-zero);
position: absolute;
top: 16px;
right: 20px;
font-size: 46px;
font-weight: 800;
line-height: 1;
color: rgba(255, 0, 0, 0.07);
pointer-events: none;
transition: color 0.3s ease;
}
/* Red gradient bar that wipes across the top of the card on hover. */
.home-services .home-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #ff0000, #ff5252);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.home-services .home-card:hover {
transform: translateY(-6px);
border-color: #ffd4d4;
box-shadow: 0 20px 44px rgba(204, 0, 0, 0.12);
}
.home-services .home-card:hover::after { transform: scaleX(1); }
.home-services .home-card:hover::before { color: rgba(255, 0, 0, 0.13); }
/* Gradient icon medallion with a soft red glow that lifts on hover. */
.home-services .home-card__icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #ff1a1a 0%, #c00000 100%);
box-shadow: 0 8px 20px rgba(204, 0, 0, 0.28);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.home-services .home-card__icon i { font-size: 24px; }
.home-services .home-card:hover .home-card__icon {
transform: translateY(-2px) scale(1.06) rotate(-4deg);
box-shadow: 0 12px 26px rgba(204, 0, 0, 0.4);
}
.home-services .home-card__title { font-size: 20px; }
/* CTA arrow slides forward on hover. */
.home-services .home-card__cta span {
display: inline-block;
transition: transform 0.25s ease;
}
.home-services .home-card:hover .home-card__cta span { transform: translateX(5px); }
/* Honour reduced-motion preferences: keep the colour/reveal, drop the movement. */
@media (prefers-reduced-motion: reduce) {
.home-services .home-card,
.home-services .home-card__icon,
.home-services .home-card__cta span { transition: color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.home-services .home-card:hover { transform: none; }
.home-services .home-card:hover .home-card__icon,
.home-services .home-card:hover .home-card__cta span { transform: none; }
}
/* ── SECTION 4 — WHY CHOOSE (dark themed, 2-col cards, red top accent) ─
Dark section on the brand ink (#1a1a1a). All text recoloured for contrast:
white headings (≈13:1), light-grey body (≈9:1 on the card) — both clear AA. */
.home-why { background: #1a1a1a; }
.home-why .home-section__header h2 { color: #fff; }
.home-why .home-section__intro { color: #cfcfcf; }
.home-why__grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.home-why__card {
background: #242424; border-radius: 8px; border: 1px solid #333;
border-top: 3px solid #ff0000; padding: 30px 26px;
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.home-why__card:hover {
transform: translateY(-4px);
border-color: #ff3b3b;
box-shadow: 0 14px 32px rgba(0,0,0,0.5);
}
/* Brighter red reads better as a graphic on a dark surface than pure #ff0000. */
.home-why__card i { font-size: 30px; color: #ff3b3b; line-height: 1; }
.home-why__card h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 14px 0 10px; }
.home-why__card p { font-size: 15px; color: #cfcfcf; line-height: 1.7; margin: 0; }
@media (prefers-reduced-motion: reduce) {
.home-why__card { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.home-why__card:hover { transform: none; }
}
/* ── SECTION 5 — TEMPERATURE (split) ────────────────── */
.home-temperature__inner { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.home-temperature__media img { width: 100%; border-radius: 12px; object-fit: cover; box-shadow: 0 14px 32px rgba(0,0,0,0.14); }
.home-temperature h2 { font-size: 30px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px; line-height: 1.25; }
.home-temperature h2::after { content: ''; display: block; width: 44px; height: 3px; background: #ff0000; margin: 14px 0 0; }
.home-temperature__copy p { font-size: 16px; color: #444; line-height: 1.7; margin: 18px 0 0; }
/* Tick lists */
.home-ticklist { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
.home-ticklist li { position: relative; padding-left: 30px; font-size: 15px; color: #333; line-height: 1.5; }
.home-ticklist li i { position: absolute; left: 0; top: 2px; color: #ff0000; font-size: 17px; }
.home-ticklist--cols { grid-template-columns: 1fr; }
/* ── SECTION 6 — COMPLIANCE (dark themed, balanced two-column layout) ─
Dark section on the brand ink (#1a1a1a) so it breaks up the white
temperature/sectors sections either side. Copy + CTA on the left, the
"Ideal for" list lifted into a card on the right. All text AA on dark. */
.home-compliance { background: #1a1a1a; }
.home-compliance__inner {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
align-items: start;
}
.home-compliance__title {
font-size: 30px; font-weight: 700; color: #fff; margin: 0; line-height: 1.25; letter-spacing: -0.3px;
}
.home-compliance__title::after {
content: ''; display: block; width: 44px; height: 3px; background: #ff0000; margin: 16px 0 22px;
}
.home-compliance__copy p { font-size: 16px; color: #cfcfcf; line-height: 1.7; margin: 0 0 16px; }
.home-compliance__main .cta-button { margin-top: 10px; }
/* "Ideal for" panel — a lighter card to balance the copy and add structure. */
.home-compliance__panel {
background: #242424; border: 1px solid #333; border-top: 3px solid #ff0000;
border-radius: 12px; padding: 28px 30px 18px;
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.home-compliance__label {
display: flex; align-items: center; gap: 10px;
font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.6px;
font-size: 13px; margin: 0 0 16px;
}
.home-compliance__label i { color: #ff3b3b; font-size: 16px; }
.home-compliance__panel .home-ticklist { margin: 0; gap: 14px; }
.home-compliance__panel .home-ticklist li { color: #d6d6d6; }
.home-compliance__panel .home-ticklist li i { color: #ff3b3b; }
/* ── SECTION 8 — SERVICE LINKS (dark themed for contrast) ──────────
Dark section on the brand ink (#1a1a1a) with lighter link tiles. */
.home-service-links { background: #1a1a1a; }
.home-service-links .home-section__header h2 { color: #fff; }
.home-service-links .home-section__intro { color: #cfcfcf; }
.home-link-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.home-link-grid a {
display: block; padding: 15px 18px; background: #242424; border: 1px solid #333;
border-left: 3px solid #ff0000; border-radius: 6px; text-decoration: none;
color: #fff; font-weight: 700; font-size: 15px;
transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.home-link-grid a:hover {
background: #2c2c2c; border-color: #333; border-left-color: #ff3b3b; color: #fff;
box-shadow: 0 10px 24px rgba(0,0,0,0.45); transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.home-link-grid a { transition: background-color 0.2s ease, border-color 0.2s ease; }
.home-link-grid a:hover { transform: none; }
}
/* ── SECTION 9 — REVIEWS ────────────────────────────── */
.home-review { margin: 0; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 26px; }
.home-review__stars { color: #ffb400; font-size: 15px; margin-bottom: 12px; }
.home-review blockquote { margin: 0 0 12px; font-size: 16px; color: #333; line-height: 1.65; }
.home-review figcaption { font-weight: 700; color: #666; font-size: 14px; }
.home-reviews__note { text-align: center; font-size: 13px; color: #999; margin-top: 24px; }
/* ── SECTION 10 — CLIENT STRIP (dark themed for contrast) ──────────
Dark section on the brand ink (#1a1a1a). Logos are whited-out so they
read on the dark background, and brighten to full opacity on hover. */
.home-clients { background: #1a1a1a; }
.home-clients .home-section__header h2 { color: #fff; }
.home-clients .home-section__intro { color: #cfcfcf; }
.home-clients__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; }
.home-clients__logos img {
max-height: 60px; width: auto;
filter: grayscale(1) brightness(0) invert(1);
opacity: 0.6;
transition: opacity 0.25s ease;
}
.home-clients__logos img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.home-clients__logos img { transition: none; }
}
/* ── SECTION 11 — FINAL CTA ─────────────────────────── */
.home-final-cta { background: #1a1a1a; color: #fff; padding: 60px 0; text-align: center; }
.home-final-cta h2 { font-size: 30px; color: #fff; margin: 0 0 14px; }
.home-final-cta p { font-size: 18px; color: #d6d6d6; max-width: 60ch; margin: 0 auto 26px; line-height: 1.7; }
.home-final-cta .home-cta-group { justify-content: center; }
.home-final-cta .home-call-btn { background: #fff; color: #1a1a1a; }
.home-final-cta .home-call-btn:hover { background: #ececec; color: #1a1a1a; }
.home-final-cta__reassurance { margin: 22px 0 0; font-size: 14px; color: #9a9a9a; }
/* ── CONTACT FORM (compact two-column card) ─────────────────────────
Scoped to .invicta-home so the homepage / other CF7 forms are untouched.
The base CF7 form is a single-column grid with large gaps and a tall
textarea — here it becomes a tidy white card with a 2-up field layout. */
.invicta-home .contact-form-section { background: #f5f5f5; padding: 56px 0; }
.invicta-home .contact-form-section .container { max-width: 860px; }
.invicta-home .contact-form-header { margin-bottom: 28px; }
.invicta-home .wpcf7-form {
grid-template-columns: 1fr 1fr;
gap: 16px 22px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 14px;
padding: 34px 34px 30px;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.07);
}
/* CF7 injects utility nodes as direct children of the form (a hidden-field
wrapper, the response output, sometimes a stray empty ). Left in the
2-col flow, the first of these takes the top-left cell and pushes every
field one slot over. So: hide utility paragraphs, and span any div + the
message / submit paragraphs full width. Real field
s (those with a
.wpcf7-form-control-wrap) stay as the two half-width columns.
:has() is well supported in current browsers. */
.invicta-home .wpcf7-form > p:not(:has(.wpcf7-form-control-wrap)):not(:has(input[type="submit"])) {
display: none;
}
.invicta-home .wpcf7-form > div,
.invicta-home .wpcf7-form p:has(textarea),
.invicta-home .wpcf7-form p:has(input[type="submit"]) {
grid-column: 1 / -1;
}
.invicta-home .wpcf7-form label {
font-size: 12px; font-weight: 700; color: #555;
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.invicta-home .wpcf7-form input[type="text"],
.invicta-home .wpcf7-form input[type="email"],
.invicta-home .wpcf7-form input[type="tel"],
.invicta-home .wpcf7-form textarea {
padding: 12px 14px; border: 1px solid #dcdcdc; background: #fff;
border-radius: 8px; font-size: 15px;
}
.invicta-home .wpcf7-form input[type="text"]:focus,
.invicta-home .wpcf7-form input[type="email"]:focus,
.invicta-home .wpcf7-form input[type="tel"]:focus,
.invicta-home .wpcf7-form textarea:focus {
border-color: #ff0000; box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12); outline: none;
}
.invicta-home .wpcf7-form textarea { height: 110px; }
.invicta-home .wpcf7-form input[type="submit"] {
width: 100%; margin: 6px 0 0; padding: 15px 30px;
border-radius: 8px; font-weight: 700; letter-spacing: 0.3px;
}
@media (max-width: 599px) {
.invicta-home .wpcf7-form { grid-template-columns: 1fr; padding: 26px 22px 24px; }
}
/* ── Tablet ─────────────────────────────────────────── */
@media (min-width: 600px) {
.home-trust-bar__grid { grid-template-columns: 1fr 1fr; }
.home-card-grid { grid-template-columns: 1fr 1fr; }
.home-why__grid { grid-template-columns: 1fr 1fr; }
.home-ticklist--cols { grid-template-columns: 1fr 1fr; }
.home-link-grid { grid-template-columns: 1fr 1fr; }
}
/* ── Desktop ────────────────────────────────────────── */
@media (min-width: 1000px) {
.home-hero { padding: 48px 0; }
.home-hero__title { font-size: 42px; }
.home-trust-bar__grid { grid-template-columns: repeat(4, 1fr); }
.home-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.home-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.home-temperature__inner { grid-template-columns: 1fr 1fr; }
.home-compliance__inner { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
.home-link-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Mobile: prioritise the phone CTA, full-width buttons ─ */
@media (max-width: 599px) {
.home-hero__cta { flex-direction: column; }
.home-hero__cta .cta-button,
.home-hero__cta .home-call-btn { width: 100%; justify-content: center; text-align: center; }
.home-hero__cta .home-call-btn { order: -1; } /* call first on mobile */
.home-final-cta .home-cta-group { flex-direction: column; }
.home-final-cta .cta-button,
.home-final-cta .home-call-btn { width: 100%; justify-content: center; }
}