/**
* Homepage (2026) — tpl-homepage-2026.php
*
* The page's own stylesheet. The theme's style.css, Google Fonts and Font
* Awesome are not loaded on this template (see inc/homepage-2026.php); the
* header and footer are styled by css/site-chrome.css, which loads first and
* provides the colour tokens used here (--k4-ink, --k4-gold, …).
*
* Written mobile first (360–430 px phones), with layouts for larger phones
* (600 px), tablets (768 px) and laptops and desktops (1024 px and up). The
* look matches the Google Ads landing page: charcoal and the logo's gold, a
* warm cream for light sections, Poppins, rounded cards. Gold is used for text
* only on dark backgrounds; on light ones a deep gold passes WCAG AA.
*
* Movement (the slow zoom on the photographs, sections easing into view) only
* runs when the visitor has not asked their device to reduce motion, and only
* once the script has marked the page "k4hp-motion". The photographs still
* cross-fade with reduced motion on: a fade has no movement.
*
* 1.2.0: the cost cards show the example plans' sharp drawings (section 6),
* and the drawing and pop-up styles shared with the Typical Costs page moved
* here from css/pages-2026.css (section 11). The consultation steps' numbers
* are deep gold (the logo gold failed contrast on their white cards).
*
* 1.3.0: the enquiry form's optional message box (textarea), styled like the
* other boxes.
* 1.3.1: the form's "What are you planning?" choices are gone, and their
* styles with them.
* 1.4.0: on laptops the hero leaves room for the trust band directly under
* it, so the band shows on the first screen (with a more compact hero on
* short screens); the years badge is drawn in code (inc/homepage-2026.php).
*
* @package K4_Kitchens_New
* @author Steve Austen
* @company The PCGP
* @version 1.4.0
*/
/* ═══════════════════════════════════════════
Fonts — Poppins, self-hosted, latin subset.
The four files the Google Ads landing page uses (assets/fonts).
No visitor details are sent to Google Fonts.
═══════════════════════════════════════════ */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/poppins-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../assets/fonts/poppins-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../assets/fonts/poppins-800-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("../assets/fonts/poppins-800-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ═══════════════════════════════════════════
Tokens (colours come from site-chrome.css)
═══════════════════════════════════════════ */
.k4hp-page {
--k4hp-radius: 20px;
--k4hp-radius-lg: 26px;
--k4hp-shadow: 0 24px 48px -24px rgba(27, 24, 25, 0.35);
--k4hp-shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
--k4hp-gutter: 20px;
--k4hp-max: 1200px;
--k4hp-line: #eee7dc; /* Hairlines on white and cream. */
--k4hp-success: #1b6e43; /* "Verified" label: 6.2:1 on white. */
--k4hp-focus: var(--k4-ink);
}
/* ═══════════════════════════════════════════
Base
Low-specificity resets (:where adds nothing), so any class rule below
wins without needing a prefix.
═══════════════════════════════════════════ */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body.k4hp-page {
margin: 0;
/* "Poppins Fallback" (site-chrome.css) keeps the text the same size while
Poppins downloads, so nothing moves when it arrives. */
font-family: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: var(--k4-text);
background: #ffffff;
-webkit-font-smoothing: antialiased;
}
/* The header is fixed; the page starts below it. */
.k4hp-page #main-content {
display: block;
padding-top: var(--k4-header-h);
/* Sideways rows scroll inside themselves; the page itself never should. */
overflow-x: clip;
}
:where(.k4hp-page #main-content) *,
:where(.k4hp-page #main-content) *::before,
:where(.k4hp-page #main-content) *::after {
box-sizing: border-box;
}
:where(.k4hp-page #main-content) img {
max-width: 100%;
height: auto;
display: block;
}
:where(.k4hp-page #main-content) :is(h1, h2, h3, h4) {
margin: 0;
color: var(--k4-ink);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
:where(.k4hp-page #main-content) :is(p, ul, ol, figure, blockquote) {
margin: 0;
}
:where(.k4hp-page #main-content) :is(ul, ol) {
padding: 0;
list-style: none;
}
:where(.k4hp-page #main-content) a {
color: inherit;
}
/* Focus ring: charcoal on light areas, gold on the dark ones. */
.k4hp-hero,
.k4hp-reviews,
.k4hp-closing {
--k4hp-focus: var(--k4-gold);
}
.k4hp-page #main-content :focus-visible {
outline: 3px solid var(--k4hp-focus);
outline-offset: 3px;
}
.k4hp-wrap {
width: 100%;
max-width: calc(var(--k4hp-max) + 2 * var(--k4hp-gutter));
margin: 0 auto;
padding: 0 var(--k4hp-gutter);
}
/* Arrow icons nudge right when their button is hovered. */
.k4-icon--move {
transition: transform 0.2s ease;
}
/* ═══════════════════════════════════════════
Buttons
═══════════════════════════════════════════ */
.k4hp-ctas {
display: grid;
gap: 10px;
}
.k4hp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
padding: 14px 26px;
border: 1.5px solid transparent;
border-radius: 999px;
font-family: inherit;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.k4hp-btn .k4-icon {
width: 20px;
height: 20px;
}
.k4hp-btn:hover .k4-icon--move {
transform: translateX(3px);
}
.k4hp-page .k4hp-btn--gold {
background: var(--k4-gold);
color: var(--k4-ink);
box-shadow: 0 14px 28px -14px rgba(243, 175, 46, 0.95);
}
.k4hp-page .k4hp-btn--gold:hover {
background: var(--k4-gold-hover);
transform: translateY(-1px);
}
/* On dark backgrounds and photographs. */
.k4hp-page .k4hp-btn--ghost {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.75);
color: #ffffff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.k4hp-page .k4hp-btn--ghost:hover {
background: #ffffff;
border-color: #ffffff;
color: var(--k4-ink);
}
/* On white and cream. */
.k4hp-page .k4hp-btn--outline {
background: transparent;
border-color: var(--k4-ink);
color: var(--k4-ink);
}
.k4hp-page .k4hp-btn--outline:hover {
background: var(--k4-ink);
color: #ffffff;
}
.k4hp-page .k4hp-btn--dark {
background: var(--k4-ink);
color: #ffffff;
}
.k4hp-page .k4hp-btn--dark:hover {
background: #000000;
}
/* Outside phone hours the call buttons are hidden, leaving one clear action
(the marks are set on before the page is drawn). */
.k4hp-closed .k4hp-btn--call {
display: none;
}
/* ═══════════════════════════════════════════
Opening hours line
═══════════════════════════════════════════ */
.k4hp-status {
display: none;
margin-top: 16px;
font-size: 0.875rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.88);
}
.k4hp-js:not(.k4hp-closed) .k4hp-status--open,
.k4hp-js.k4hp-closed .k4hp-status--closed {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.k4hp-status .k4-icon {
width: 16px;
height: 16px;
color: var(--k4-gold);
}
/* A small green light: "open now". */
.k4hp-status__dot {
width: 9px;
height: 9px;
flex: none;
border-radius: 50%;
background: #3ddc84;
box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.2);
}
/* The buttons and the hours line travel together, so the line stays centred
under the buttons (full width on phones, the buttons' width from 600 px). */
.k4hp-cta-group {
display: grid;
}
/* ═══════════════════════════════════════════
1. Hero
═══════════════════════════════════════════ */
.k4hp-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-bottom: 40px;
/* At least as tall as the photograph band on phones, so the band is never
cut short. Otherwise, while the text is still in the fallback font and a
little shorter, the first photograph showed partly hidden, and a later
one — shown in full — counted as the page's "largest paint" 12–17
seconds in, which Google reads as a slow page. From 768 px the
photograph fills the section instead (see the tablet block). */
min-height: min(133vw, 820px);
background: var(--k4-ink);
color: #ffffff;
}
/*
* Photograph layer. On phones it covers the upper part of the section and
* fades into the charcoal, as on the landing page; from 768 px it fills the
* whole section.
*/
.k4hp-hero__media {
position: absolute;
top: 0;
left: 0;
right: 0;
height: min(133vw, 820px);
z-index: -1;
overflow: hidden;
/* Fades out the last 3 px, so no hairline of photograph shows where the
band meets the charcoal. */
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3px), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 3px), transparent);
}
/* Overlay: light at the very top so the photograph shows, darkening quickly
behind the text. The same stops as the landing page, which were measured
for white text on these photographs (at least 3.9:1 behind the headline in
the worst case, about 9:1 behind the smaller text). */
.k4hp-hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(27, 24, 25, 0) 0%,
rgba(27, 24, 25, 0.06) 6%,
rgba(27, 24, 25, 0.36) 14%,
rgba(27, 24, 25, 0.62) 23%,
rgba(27, 24, 25, 0.82) 38%,
rgba(27, 24, 25, 0.93) 61%,
#1b1819 100%);
}
.k4hp-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.4s ease;
}
.k4hp-slide.is-active {
opacity: 1;
}
.k4hp-slide img {
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: 50% 50%;
}
/* A slow drift on the photograph showing, only with motion allowed. */
.k4hp-motion .k4hp-slide.is-active img {
animation: k4hp-drift 9s ease-out both;
}
@keyframes k4hp-drift {
from {
transform: scale(1.08);
}
to {
transform: scale(1);
}
}
/* Pause / play for the photographs (WCAG 2.2.2). */
.k4hp-slideshow-toggle {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
background: rgba(27, 24, 25, 0.45);
color: #ffffff;
cursor: pointer;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.k4hp-slideshow-toggle[hidden] {
display: none;
}
.k4hp-slideshow-toggle .k4-icon {
width: 18px;
height: 18px;
}
.k4hp-slideshow-toggle .k4-icon--play,
.k4hp-slideshow-toggle.is-paused .k4-icon--pause {
display: none;
}
.k4hp-slideshow-toggle.is-paused .k4-icon--play {
display: block;
}
.k4hp-hero__inner {
position: relative;
/* Room for the photograph above the rating pill (landing page value). */
padding-top: 15vw;
}
.k4hp-hero__content {
max-width: 660px;
}
.k4hp-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
background: rgba(27, 24, 25, 0.6);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #ffffff;
font-size: 0.8125rem;
line-height: 1.35;
text-decoration: none;
}
.k4hp-pill .k4-icon {
width: 18px;
height: 18px;
color: var(--k4-gold);
}
.k4hp-pill:hover strong {
text-decoration: underline;
text-decoration-color: var(--k4-gold);
text-underline-offset: 3px;
}
.k4hp-page .k4hp-hero__title {
margin-top: 12px;
color: #ffffff;
font-size: clamp(2.125rem, 1.3rem + 3.4vw, 4rem);
line-height: 1.05;
letter-spacing: -0.025em;
text-wrap: balance;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.k4hp-hero__title em {
font-style: italic;
color: var(--k4-gold);
}
.k4hp-page .k4hp-hero__lead {
margin-top: 12px;
max-width: 34em;
font-size: 1.0625rem;
color: rgba(255, 255, 255, 0.9);
text-wrap: pretty;
}
/* "Our own employed fitters, not subcontractors." — K4's main difference. */
.k4hp-hero__lead strong {
font-weight: 600;
color: #ffffff;
}
.k4hp-hero .k4hp-cta-group {
margin-top: 20px;
}
/* Phones: the ticks are centred in wrapping rows, like the full-width buttons
above them; from 600 px a two-by-two block lined up with the buttons. */
.k4hp-hero__ticks {
margin-top: 14px !important;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 16px;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.88);
}
.k4hp-hero__ticks li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.k4hp-hero__ticks .k4-icon {
width: 18px;
height: 18px;
color: var(--k4-gold);
}
@media (max-width: 383.98px) {
.k4hp-hero__ticks {
font-size: 0.8125rem;
}
}
/* Short phone screens (under 700 px tall, e.g. 375 × 667, or 390 × 664 in
Safari): a slightly smaller headline and tighter gaps below it, so on a
first visit "Book a free consultation" sits above the cookie banner. The
text still starts at the same height, so the measured contrast over the
photographs (at least 4.4:1 behind the headline) is unchanged. */
@media (max-width: 599.98px) and (max-height: 700px) {
.k4hp-page .k4hp-hero__title {
margin-top: 10px;
font-size: 1.9375rem;
}
.k4hp-page .k4hp-hero__lead {
margin-top: 8px;
font-size: 1rem;
}
.k4hp-hero .k4hp-cta-group {
margin-top: 14px;
}
}
/* The "25 years" seal: laptops only (see 1024 px). */
.k4hp-hero__badge {
display: none !important;
}
/* ═══════════════════════════════════════════
Enquiry form (1.1.0)
The Google Ads landing page's form and card, directly under the hero. The
card and form rules are the landing page's (css/landing-showcase.css),
repeated here because this page does not load that stylesheet; the class
names inside the form ("k4ls-form", "k4ls-row", "k4ls-field", …) are part
of the Contact Form 7 form itself, shared by both pages.
═══════════════════════════════════════════ */
.k4hp-enquiry {
/* Charcoal, continuing the hero, so the card floats on it as on the
landing page. */
padding: 0 0 56px;
background: var(--k4-ink);
color: #ffffff;
--k4hp-focus: var(--k4-gold);
}
/* 1.1.1: on the homepage the trust band now sits between the hero and the
form (template 1.1.2), so the form section no longer continues the hero and
the card needs space above it. Laptops keep the 80 px they already had. The
area pages still put the form straight under the hero, so this does not
apply to them. */
.k4hp-trust + .k4hp-enquiry {
padding-top: 40px;
}
@media (min-width: 768px) {
.k4hp-trust + .k4hp-enquiry {
padding-top: 56px;
}
}
@media (min-width: 1024px) {
.k4hp-trust + .k4hp-enquiry {
padding-top: 80px;
}
}
.k4hp-enquiry__grid {
display: grid;
gap: 40px;
}
/* On phones and tablets the customer's words sit inside the card instead. */
.k4hp-enquiry__aside {
display: none;
}
/* Bright gold on charcoal (the plain eyebrow's deep gold is for white and
cream). Two classes, so it wins over the .k4hp-eyebrow rule further down. */
.k4hp-eyebrow.k4hp-eyebrow--gold {
color: var(--k4-gold);
}
.k4hp-enquiry__call {
margin-top: 28px !important;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 1.0625rem;
color: #ffffff;
}
.k4hp-enquiry__call a {
font-weight: 800;
color: var(--k4-gold);
white-space: nowrap;
text-decoration: underline;
text-decoration-color: rgba(243, 175, 46, 0.45);
text-underline-offset: 4px;
}
.k4hp-enquiry__call a:hover {
text-decoration-color: var(--k4-gold);
}
.k4hp-enquiry__call span {
display: block;
margin-top: 4px;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.75);
}
/* ── The card ─────────────────────────────── */
.k4hp-quote {
position: relative;
padding: 26px 20px 24px;
border-radius: var(--k4hp-radius-lg);
background: #ffffff;
color: var(--k4-text);
box-shadow: var(--k4hp-shadow-lg);
/* Buttons scroll here; the fixed header must not cover the card's top. */
scroll-margin-top: calc(var(--k4-header-h) + 16px);
--k4hp-focus: var(--k4-ink);
}
/* A gold edge along the top of the card. */
.k4hp-quote::before {
content: "";
position: absolute;
top: 0;
left: 24px;
right: 24px;
height: 4px;
border-radius: 0 0 4px 4px;
background: var(--k4-gold);
}
.k4hp-quote:focus {
outline: none;
}
.k4hp-page .k4hp-quote__title {
font-size: 1.5rem;
}
.k4hp-quote__sub {
margin-top: 4px !important;
font-size: 0.9375rem;
color: var(--k4-muted);
}
.k4hp-quote__fallback {
margin-top: 16px !important;
font-weight: 600;
}
.k4hp-quote__fallback a {
white-space: nowrap;
}
.k4hp-quote__editor-note {
margin-top: 10px !important;
font-size: 0.8125rem;
color: var(--k4-muted);
}
/* "How we use your details: privacy policy", under the form. */
.k4hp-quote__privacy {
margin-top: 8px !important;
text-align: center;
font-size: 0.8125rem;
color: var(--k4-muted);
}
.k4hp-quote__privacy a {
color: var(--k4-ink);
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── The form (landing page rules) ────────── */
.k4hp-page .k4ls-form {
margin-top: 14px;
}
/* Contact Form 7's automatic paragraphs and
s. */
.k4hp-page .k4ls-form p {
margin: 0;
}
.k4hp-page .k4ls-form br {
display: none;
}
.k4hp-page .k4ls-form .k4ls-field {
margin-bottom: 14px;
}
.k4hp-page .k4ls-form .k4ls-field label {
display: block;
margin-bottom: 6px;
font-size: 0.9375rem;
font-weight: 600;
color: var(--k4-ink);
}
.k4hp-page .k4ls-form .k4ls-optional {
font-weight: 400;
color: var(--k4-muted);
}
.k4hp-page .k4ls-form .wpcf7-form-control-wrap {
display: block;
}
/* 16 px text on inputs stops iOS Safari zooming the page on focus. */
.k4hp-page .k4ls-form input[type="text"],
.k4hp-page .k4ls-form input[type="tel"],
.k4hp-page .k4ls-form input[type="email"],
.k4hp-page .k4ls-form textarea {
display: block;
width: 100%;
min-height: 52px;
padding: 12px 16px;
font: inherit;
font-size: 1rem;
color: var(--k4-text);
background: #ffffff;
border: 1.5px solid #bfb5a8;
border-radius: 12px;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.k4hp-page .k4ls-form input:focus,
.k4hp-page .k4ls-form textarea:focus {
outline: none;
border-color: var(--k4-ink);
box-shadow: 0 0 0 4px rgba(243, 175, 46, 0.45);
}
/* The optional message box (1.3.0): as on the landing page, three lines to
begin with (the form gives it one row, so this height is the same in every
browser), growing with the text where the browser supports it (up to
about ten lines, then it scrolls); elsewhere its corner makes it taller. */
.k4hp-page .k4ls-form textarea {
min-height: 100px;
max-height: 280px;
line-height: 1.5;
resize: vertical;
field-sizing: content;
}
/* Red border on a field that failed. */
.k4hp-page .k4ls-form .wpcf7-not-valid,
.k4hp-page .k4ls-form input[type].wpcf7-not-valid {
border-color: #a8231a;
}
.k4hp-page .k4ls-form .wpcf7-not-valid-tip {
margin-top: 6px;
font-size: 0.875rem;
font-weight: 600;
color: #a8231a;
}
/* Cloudflare's check runs unseen ("appearance:interaction-only" on the form
tag); its box shows here only on the rare occasion it needs a tick. */
.k4hp-page .k4ls-form .k4ls-turnstile {
margin: 4px 0 12px;
}
.k4hp-page .k4ls-form .k4ls-actions,
.k4hp-page .k4ls-form .k4ls-actions p {
display: block;
margin: 0;
}
.k4hp-page .k4ls-form .wpcf7-submit {
display: block;
width: 100%;
min-height: 56px;
padding: 14px 20px;
font: inherit;
font-size: 1.125rem;
font-weight: 700;
color: var(--k4-ink);
background: var(--k4-gold);
border: 0;
border-radius: 999px;
box-shadow: 0 14px 28px -14px rgba(243, 175, 46, 0.95);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.k4hp-page .k4ls-form .wpcf7-submit:hover {
background: var(--k4-gold-hover);
transform: translateY(-1px);
}
.k4hp-page .k4ls-form .wpcf7-submit:disabled {
cursor: wait;
opacity: 0.8;
}
/* CF7's "sending" spinner takes no space until a send is in progress. */
.k4hp-page .k4ls-form .wpcf7-spinner {
display: none;
}
.k4hp-page .k4ls-form.submitting .wpcf7-spinner {
display: block;
margin: 10px auto 0;
}
.k4hp-page .k4ls-form .k4ls-reassurance {
margin-top: 10px;
text-align: center;
font-size: 0.875rem;
color: var(--k4-muted);
text-wrap: balance;
}
.k4hp-page .k4ls-form .wpcf7-response-output {
margin: 14px 0 0;
padding: 12px 14px;
border-radius: 12px;
font-size: 0.9375rem;
font-weight: 600;
}
/* The phone number in a "did not send" message, made a link by the script. */
.k4hp-page .k4ls-form .wpcf7-response-output a {
color: inherit;
font-weight: 800;
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── A customer's words about the fitters ── */
.k4hp-proof__quote {
margin: 0;
font-weight: 600;
line-height: 1.45;
}
.k4hp-proof__source {
margin-top: 6px;
font-size: 0.8125rem;
}
/* The star sits inline, so it stays with the first word if the line wraps. */
.k4hp-proof__source .k4-icon {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: -2px;
color: var(--k4-gold);
}
/* In the card (phones and tablets): centred under the form, above a hairline. */
.k4hp-proof--card {
margin-top: 14px !important;
padding-top: 14px;
border-top: 1px solid var(--k4hp-line);
text-align: center;
}
.k4hp-proof--card .k4hp-proof__quote {
font-size: 0.9375rem;
color: var(--k4-ink);
}
.k4hp-proof--card .k4hp-proof__source {
color: var(--k4-muted);
}
/* Beside the card (laptops): a large pull quote with a gold rule. */
.k4hp-proof--aside {
margin-top: 8px !important;
padding-left: 20px;
border-left: 4px solid var(--k4-gold);
}
.k4hp-proof--aside .k4hp-proof__quote {
font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem);
line-height: 1.3;
letter-spacing: -0.01em;
color: #ffffff;
}
.k4hp-proof--aside .k4hp-proof__source {
margin-top: 14px;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.8);
}
/* ═══════════════════════════════════════════
Button bar (phones and tablets) — as on the landing page
═══════════════════════════════════════════ */
.k4hp-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990; /* Below the Complianz banner, which the bar never shares the screen with. */
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 -8px 24px rgba(27, 24, 25, 0.16);
}
.k4hp-page .k4hp-bar[hidden] {
display: none;
}
.k4hp-motion .k4hp-bar:not([hidden]) {
animation: k4hp-bar-in 0.3s ease both;
}
@keyframes k4hp-bar-in {
from {
transform: translateY(100%);
}
to {
transform: none;
}
}
.k4hp-ctas.k4hp-ctas--bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 640px;
margin: 0 auto;
}
.k4hp-closed .k4hp-ctas.k4hp-ctas--bar {
grid-template-columns: minmax(0, 1fr);
}
.k4hp-ctas--bar .k4hp-btn {
min-height: 52px;
padding: 10px 12px;
font-size: 1rem;
box-shadow: none;
}
/* On the white bar the call button is solid charcoal. */
.k4hp-page .k4hp-ctas--bar .k4hp-btn--ghost {
background: var(--k4-ink);
border-color: var(--k4-ink);
color: #ffffff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.k4hp-page .k4hp-ctas--bar .k4hp-btn--ghost:hover {
background: #000000;
border-color: #000000;
color: #ffffff;
}
/* "Free quote" beside "Call"; "Get my free quote" when alone (out of hours). */
.k4hp-when-closed,
.k4hp-closed .k4hp-when-open {
display: none;
}
.k4hp-closed .k4hp-when-closed {
display: inline;
}
/* Room at the foot of the page for the bar, so it never covers the footer's
small print (phones and tablets only). */
@media (max-width: 1023.98px) {
.k4hp-page .k4-footer {
padding-bottom: calc(28px + 76px + env(safe-area-inset-bottom, 0px));
}
}
@media (min-width: 1024px) {
.k4hp-page .k4hp-bar {
display: none;
}
}
/* ── Enquiry form: tablets and laptops ────── */
@media (min-width: 768px) {
.k4hp-enquiry {
padding: 8px 0 88px;
}
.k4hp-quote {
max-width: 620px;
padding: 30px 30px 28px;
}
}
@media (min-width: 1024px) {
/* The customer's words on the left, the card on the right — the landing
page's laptop arrangement, below the unchanged hero. */
.k4hp-enquiry {
padding: 80px 0 96px;
}
.k4hp-enquiry__grid {
grid-template-columns: minmax(0, 1fr) minmax(380px, 450px);
align-items: center;
gap: 72px;
}
.k4hp-enquiry__aside {
display: block;
}
.k4hp-quote {
max-width: none;
}
/* Name and phone side by side on laptops. */
.k4hp-page .k4ls-form .k4ls-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* The customer's words are beside the card here, so not repeated inside it. */
.k4hp-proof--card {
display: none;
}
}
/* ═══════════════════════════════════════════
2. Trust band
═══════════════════════════════════════════ */
.k4hp-trust {
background: var(--k4-cream);
border-bottom: 1px solid var(--k4-sand);
}
.k4hp-trust__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 16px;
padding-top: 24px;
padding-bottom: 24px;
}
.k4hp-trust__item {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
font-size: 0.8125rem;
line-height: 1.35;
color: var(--k4-muted);
}
.k4hp-trust__item strong {
font-size: 1.0625rem;
font-weight: 800;
color: var(--k4-ink);
}
.k4hp-trust__link {
display: flex;
flex-direction: column;
gap: 2px;
color: inherit;
text-decoration: none;
}
.k4hp-trust__item--checkatrade img {
width: 118px;
height: auto;
aspect-ratio: 300 / 57;
margin-bottom: 4px;
}
.k4hp-trust__item--checkatrade strong {
font-size: inherit;
}
.k4hp-trust__count {
text-decoration: underline;
text-decoration-color: var(--k4-sand);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color 0.2s ease;
}
.k4hp-trust__link:hover .k4hp-trust__count {
text-decoration-color: var(--k4-gold-deep);
}
/* ═══════════════════════════════════════════
Shared section layout
═══════════════════════════════════════════ */
.k4hp-section {
padding: 64px 0;
}
.k4hp-section__head {
margin-bottom: 28px;
}
.k4hp-section__head--centre {
max-width: 780px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.k4hp-section__head--centre .k4hp-section__intro {
margin-left: auto;
margin-right: auto;
}
.k4hp-eyebrow {
margin-bottom: 10px !important;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--k4-gold-deep);
}
.k4hp-page .k4hp-section__title {
font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
text-wrap: balance;
}
.k4hp-section__intro {
margin-top: 12px !important;
max-width: 42em;
font-size: 1.0625rem;
color: var(--k4-muted);
text-wrap: pretty;
}
.k4hp-section__intro--second {
margin-top: 10px !important;
font-size: 1rem;
}
.k4hp-section__actions {
display: flex;
justify-content: center;
margin-top: 32px;
}
.k4hp-note {
margin-top: 6px !important;
font-size: 0.8125rem;
color: var(--k4-muted);
}
.k4hp-note--centre {
margin-top: 22px !important;
text-align: center;
text-wrap: balance;
}
/* A text link with a gold underline (landing page style). */
.k4hp-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding-bottom: 4px;
border-bottom: 2px solid var(--k4-gold);
color: var(--k4-ink);
font-weight: 700;
text-decoration: none;
}
.k4hp-text-link .k4-icon {
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.k4hp-text-link:hover .k4-icon {
transform: translateX(3px);
}
/* On the dark reviews band. */
.k4hp-text-link--light {
margin-top: 6px;
color: #ffffff;
}
.k4hp-text-link--light .k4-icon {
width: 16px;
height: 16px;
color: var(--k4-gold);
}
.k4hp-text-link--light:hover .k4-icon {
transform: none;
}
/* ── Sideways-scrolling rows ──────────────────
The first card lines up with the page margin; the row runs off the right
edge to show there is more to swipe. */
.k4hp-track {
/* 100% (the row's own width) rather than 100vw: the site's always-visible
scrollbar makes 100vw 14 px wider than the page, which set the first
card 7 px off the headings' left edge. */
--track-inset: max(var(--k4hp-gutter), calc((100% - var(--k4hp-max)) / 2));
display: flex;
gap: 14px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--track-inset);
padding: 6px var(--track-inset) 22px !important;
scrollbar-width: none;
}
.k4hp-track::-webkit-scrollbar {
display: none;
}
.k4hp-track > li {
flex: 0 0 auto;
scroll-snap-align: start;
}
.k4hp-page #main-content .k4hp-track:focus-visible {
outline-offset: -3px;
}
.k4hp-carousel-controls {
display: flex;
gap: 10px;
}
.k4hp-carousel-controls[hidden] {
display: none;
}
/* Phones swipe; the buttons are for tablets and computers. */
@media (max-width: 767.98px) {
.k4hp-page .k4hp-carousel-controls {
display: none;
}
}
.k4hp-round-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
border: 1.5px solid var(--k4-sand);
border-radius: 50%;
background: #ffffff;
color: var(--k4-ink);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.k4hp-round-btn .k4-icon {
width: 24px;
height: 24px;
}
.k4hp-round-btn:hover:not(:disabled) {
background: var(--k4-ink);
border-color: var(--k4-ink);
color: #ffffff;
}
.k4hp-round-btn:disabled {
opacity: 0.35;
cursor: default;
}
.k4hp-round-btn--light {
background: transparent;
border-color: rgba(255, 255, 255, 0.4);
color: #ffffff;
}
.k4hp-round-btn--light:hover:not(:disabled) {
background: #ffffff;
border-color: #ffffff;
color: var(--k4-ink);
}
/* ── Images that load as they approach the screen (k4hp_lazy_img()) ── */
/* Faded in once loaded — only while the homepage script is running
("k4hp-ready" on ). If the script never runs, the fallback in the
script loads the images instead and nothing is left hidden. */
.k4hp-ready .k4hp-lazy {
opacity: 0;
transition: opacity 0.5s ease;
}
.k4hp-ready .k4hp-lazy.is-loaded {
opacity: 1;
}
/* ── Sections easing into view (only with motion allowed) ── */
.k4hp-motion [data-k4hp-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.k4hp-motion [data-k4hp-reveal].is-in {
opacity: 1;
transform: none;
}
/* ═══════════════════════════════════════════
3. Why choose K4
═══════════════════════════════════════════ */
.k4hp-why__grid {
display: grid;
gap: 14px;
}
.k4hp-why__card {
padding: 26px 24px;
border-radius: var(--k4hp-radius);
background: var(--k4-cream);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.k4hp-why__card:hover {
transform: translateY(-3px);
box-shadow: var(--k4hp-shadow);
}
}
.k4hp-why__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 16px;
border-radius: 16px;
background: var(--k4-ink);
color: var(--k4-gold);
}
.k4hp-why__icon .k4-icon {
width: 24px;
height: 24px;
}
.k4hp-page .k4hp-why__title {
margin-bottom: 6px;
font-size: 1.1875rem;
}
.k4hp-why__card p {
color: var(--k4-muted);
}
/* Phones: icon beside the text, so the list takes less scrolling. */
@media (max-width: 599.98px) {
.k4hp-why__card {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: 16px;
padding: 20px;
}
.k4hp-why__icon {
grid-row: span 2;
width: 48px;
height: 48px;
margin-bottom: 0;
}
}
/* ═══════════════════════════════════════════
4. Free design consultation
═══════════════════════════════════════════ */
.k4hp-consult {
background: var(--k4-cream);
}
.k4hp-consult__grid {
display: grid;
gap: 32px;
align-items: start;
}
.k4hp-consult__body {
margin-top: 14px !important;
max-width: 40em;
}
/* "No pressure. No obligation. …" as a pull line with a gold rule. */
.k4hp-consult__reassurance {
margin-top: 18px !important;
max-width: 36em;
padding-left: 14px;
border-left: 3px solid var(--k4-gold);
font-weight: 600;
color: var(--k4-ink);
}
.k4hp-consult .k4hp-cta-group {
margin-top: 24px;
}
.k4hp-consult__card {
position: relative;
padding: 28px 24px 22px;
border-radius: var(--k4hp-radius-lg);
background: #ffffff;
box-shadow: var(--k4hp-shadow);
}
/* A gold edge along the top of the card, as on the landing page's form. */
.k4hp-consult__card::before {
content: "";
position: absolute;
top: 0;
left: 24px;
right: 24px;
height: 4px;
border-radius: 0 0 4px 4px;
background: var(--k4-gold);
}
.k4hp-page .k4hp-consult__card-title {
font-size: 1.375rem;
}
.k4hp-checklist {
display: grid;
margin-top: 12px !important;
}
.k4hp-checklist li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--k4hp-line);
line-height: 1.45;
}
.k4hp-checklist li:last-child {
border-bottom: 0;
}
/* Gold circle with a tick. */
.k4hp-checklist .k4-icon {
width: 24px;
height: 24px;
padding: 4px;
border-radius: 50%;
background: var(--k4-gold);
color: var(--k4-ink);
}
.k4hp-steps {
display: grid;
gap: 14px;
margin-top: 40px !important;
}
.k4hp-step {
padding: 26px 24px;
border-radius: var(--k4hp-radius);
background: #ffffff;
box-shadow: 0 1px 0 var(--k4-sand);
}
.k4hp-step__number {
display: block;
margin-bottom: 10px;
font-size: 2.75rem;
font-weight: 800;
font-style: italic;
line-height: 1;
letter-spacing: -0.03em;
/* Deep gold (1.2.0): the logo gold on these white cards measured 1.9:1,
under the 3:1 that large text needs; deep gold is 5.5:1. */
color: var(--k4-gold-deep);
}
.k4hp-page .k4hp-step__title {
margin-bottom: 6px;
font-size: 1.1875rem;
}
.k4hp-step p {
color: var(--k4-muted);
}
/* Phones: the number beside the title, so the three steps take less room. */
@media (max-width: 767.98px) {
.k4hp-step {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
column-gap: 12px;
padding: 20px;
}
.k4hp-step__number {
grid-row: span 2;
margin-bottom: 0;
font-size: 2.25rem;
}
}
/* ═══════════════════════════════════════════
5. Reviews
═══════════════════════════════════════════ */
.k4hp-reviews {
background: var(--k4-ink);
color: #ffffff;
}
.k4hp-page .k4hp-reviews .k4hp-section__title {
color: #ffffff;
font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
}
.k4hp-score {
display: flex;
align-items: center;
gap: 18px;
}
.k4hp-score__number {
flex: none;
font-size: 3.75rem;
font-weight: 800;
font-style: italic;
line-height: 1;
letter-spacing: -0.03em;
color: var(--k4-gold);
}
/* The small "/10": its own spacing, clear of the big italic "0". */
.k4hp-score__number span {
display: inline-block;
margin-left: 0.14em;
padding-right: 0.12em;
font-size: 1.5rem;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.75);
}
.k4hp-score__meta {
margin-top: 6px !important;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.8);
}
.k4hp-review {
width: min(84vw, 380px);
}
.k4hp-review figure {
display: flex;
flex-direction: column;
height: 100%;
padding: 24px 22px 20px;
border-radius: var(--k4hp-radius);
background: #ffffff;
color: var(--k4-text);
}
.k4hp-review__rating {
display: flex;
align-items: center;
gap: 6px;
line-height: 1;
}
.k4hp-review__score {
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--k4-ink);
}
.k4hp-review__rating .k4-icon {
width: 22px;
height: 22px;
color: var(--k4-gold);
}
.k4hp-review__title {
margin-top: 12px !important;
font-weight: 700;
color: var(--k4-ink);
}
.k4hp-review__text {
margin: 8px 0 16px !important;
font-size: 0.9375rem;
line-height: 1.6;
}
.k4hp-review__meta {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--k4hp-line);
font-size: 0.8125rem;
color: var(--k4-muted);
}
.k4hp-review__verified {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--k4hp-success);
}
.k4hp-review__verified .k4-icon {
width: 16px;
height: 16px;
}
/* ═══════════════════════════════════════════
6. Typical costs
═══════════════════════════════════════════ */
.k4hp-costs__grid {
display: grid;
gap: 16px;
}
.k4hp-cost {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 16px;
align-content: start;
padding: 24px 22px;
border: 1px solid var(--k4hp-line);
border-radius: var(--k4hp-radius);
background: #ffffff;
box-shadow: 0 18px 36px -28px rgba(27, 24, 25, 0.45);
}
.k4hp-page .k4hp-cost__title {
font-size: 1.25rem;
line-height: 1.25;
}
.k4hp-cost__label {
display: block;
margin-bottom: 4px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--k4-gold-deep);
}
.k4hp-cost__price {
margin-top: 12px !important;
display: flex;
flex-direction: column;
line-height: 1.1;
}
.k4hp-cost__price span {
font-size: 0.8125rem;
color: var(--k4-muted);
}
.k4hp-cost__price strong {
margin-top: 4px;
font-size: 2.125rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--k4-ink);
}
/* The example floor plan, small, beside the price. */
.k4hp-cost__plan {
grid-column: 2;
grid-row: 1;
width: 92px;
align-self: start;
}
.k4hp-cost__plan img {
width: 100%;
height: auto;
opacity: 0.9;
}
.k4hp-cost__body {
grid-column: 1 / -1;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--k4hp-line);
}
.k4hp-cost__subheader {
font-weight: 700;
color: var(--k4-ink);
}
.k4hp-cost__features {
margin-top: 6px;
font-size: 0.9375rem;
color: var(--k4-muted);
}
.k4hp-cost__features p + p {
margin-top: 8px;
}
.k4hp-cost__features strong {
color: var(--k4-ink);
}
/* With the plan's drawing (1.2.0): the drawing fills the top of the card, as
on the Typical Costs page, and opens larger in the pop-up (the drawing
panel's own styles are in section 11). The heading comes first in the
reading order; "order" shows the drawing above it. The card's padding moves
inside, so the drawing's panel meets the card's edges. */
.k4hp-cost.k4hp-cost--drawing {
grid-template-columns: minmax(0, 1fr);
padding: 0;
overflow: hidden;
}
.k4hp-cost--drawing .k4hp-cost__drawing {
order: -1;
}
.k4hp-cost--drawing .k4hp-cost__head {
padding: 22px 22px 0;
}
.k4hp-cost--drawing .k4hp-cost__body {
margin: 18px 22px 0;
padding-bottom: 24px;
}
/* ═══════════════════════════════════════════
7. Kitchen styles
═══════════════════════════════════════════ */
.k4hp-styles {
background: var(--k4-cream);
}
.k4hp-style {
display: flex;
flex-direction: column;
width: min(72vw, 300px);
border-radius: var(--k4hp-radius);
overflow: hidden;
background: #ffffff;
box-shadow: var(--k4hp-shadow);
}
.k4hp-style__image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--k4-sand);
}
.k4hp-style__image img {
position: absolute;
inset: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.k4hp-style:hover .k4hp-style__image img {
transform: scale(1.05);
}
}
.k4hp-style__body {
padding: 18px 20px 22px;
}
.k4hp-page .k4hp-style__title {
font-size: 1.125rem;
line-height: 1.3;
}
.k4hp-style__title a {
text-decoration: none;
}
.k4hp-style__title a:hover {
text-decoration: underline;
text-decoration-color: var(--k4-gold);
text-underline-offset: 3px;
}
.k4hp-style__body p {
margin-top: 6px !important;
font-size: 0.9375rem;
color: var(--k4-muted);
}
.k4hp-styles__bottom {
display: grid;
gap: 18px;
margin-top: 28px;
padding: 26px 24px;
border-radius: var(--k4hp-radius);
background: #ffffff;
}
.k4hp-styles__bottom p {
font-weight: 600;
color: var(--k4-ink);
}
/* ═══════════════════════════════════════════
8. Videos
═══════════════════════════════════════════ */
.k4hp-video-card {
display: flex;
flex-direction: column;
width: min(84vw, 380px);
border-radius: var(--k4hp-radius);
overflow: hidden;
background: #ffffff;
box-shadow: var(--k4hp-shadow);
}
.k4hp-video {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--k4-ink);
}
.k4hp-video__facade {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.k4hp-video__facade img {
position: absolute;
inset: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
transition: transform 0.6s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.k4hp-video__facade:hover img {
transform: scale(1.03);
}
}
.k4hp-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* The play symbol sits in the panel under the thumbnail, not on the picture:
K4's thumbnails carry their own wording and a face. */
.k4hp-video-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 12px;
padding: 16px 18px 18px;
cursor: pointer;
}
.k4hp-page .k4hp-video-card__title {
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.005em;
}
.k4hp-video-card__meta {
display: inline-flex;
align-items: center;
gap: 10px;
margin: auto 0 0 !important;
font-size: 0.875rem;
font-weight: 600;
color: var(--k4-gold-deep);
}
.k4hp-video-card__play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
border-radius: 50%;
background: var(--k4-gold);
color: var(--k4-ink);
transition: transform 0.2s ease;
}
.k4hp-video-card__play .k4-icon {
width: 14px;
height: 14px;
margin-left: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.k4hp-video-card:hover .k4hp-video-card__play {
transform: scale(1.08);
}
}
.k4hp-video-card.is-playing .k4hp-video-card__meta {
visibility: hidden;
}
.k4hp-video-card.is-playing .k4hp-video-card__body {
cursor: default;
}
/* ═══════════════════════════════════════════
9. Areas
═══════════════════════════════════════════ */
.k4hp-areas {
background: var(--k4-cream);
}
.k4hp-areas__list {
max-width: 980px;
margin: 0 auto !important;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* Each town is a card linking to its area page: two across on phones,
three on tablets, four on laptops. */
.k4hp-areas__list li {
display: flex;
}
.k4hp-area {
display: flex;
flex: 1;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 10px 14px;
border: 1.5px solid var(--k4-sand);
border-radius: 14px;
background: #ffffff;
color: var(--k4-ink);
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.k4hp-area__text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.k4hp-area__prefix {
font-size: 0.75rem;
color: var(--k4-muted);
}
.k4hp-area__town {
font-weight: 700;
overflow-wrap: anywhere;
}
a.k4hp-area:hover {
border-color: var(--k4-gold);
box-shadow: 0 0 0 2px rgba(243, 175, 46, 0.35);
}
.k4hp-area .k4-icon {
width: 18px;
height: 18px;
color: var(--k4-gold-deep);
}
.k4hp-areas__cta {
position: relative;
max-width: 780px;
margin: 40px auto 0;
padding: 30px 24px 28px;
border-radius: var(--k4hp-radius-lg);
background: #ffffff;
text-align: center;
box-shadow: var(--k4hp-shadow);
}
.k4hp-areas__cta::before {
content: "";
position: absolute;
top: 0;
left: 24px;
right: 24px;
height: 4px;
border-radius: 0 0 4px 4px;
background: var(--k4-gold);
}
.k4hp-page .k4hp-areas__cta-title {
font-size: 1.5rem;
}
.k4hp-areas__cta p {
margin: 10px auto 22px !important;
max-width: 36em;
color: var(--k4-muted);
}
/* ═══════════════════════════════════════════
10. Questions
═══════════════════════════════════════════ */
.k4hp-faq__inner {
max-width: calc(860px + 2 * var(--k4hp-gutter));
}
.k4hp-faq__list {
display: grid;
gap: 10px;
}
.k4hp-faq__item {
border: 1px solid var(--k4hp-line);
border-radius: var(--k4hp-radius);
background: var(--k4-cream);
}
/* The whole question row is the button: at least 56 px tall. */
.k4hp-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: 14px 18px;
font-weight: 600;
line-height: 1.4;
color: var(--k4-ink);
cursor: pointer;
list-style: none;
}
.k4hp-faq__question::-webkit-details-marker {
display: none;
}
/* A gold circle with a plus, which turns into a cross when open. */
.k4hp-faq__toggle {
position: relative;
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--k4-gold);
}
.k4hp-faq__toggle::before,
.k4hp-faq__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 2px;
margin: -1px 0 0 -6px;
border-radius: 1px;
background: var(--k4-ink);
}
.k4hp-faq__toggle::after {
transform: rotate(90deg);
}
.k4hp-faq__item[open] .k4hp-faq__toggle {
transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
.k4hp-faq__toggle {
transition: transform 0.2s ease;
}
}
.k4hp-faq__answer {
padding: 0 18px 18px;
color: var(--k4-text);
}
.k4hp-faq__answer p + p {
margin-top: 10px;
}
/* The closing call to action, under the questions. */
.k4hp-closing {
position: relative;
margin-top: 40px;
padding: 34px 24px 30px;
border-radius: var(--k4hp-radius-lg);
background: var(--k4-ink);
color: rgba(255, 255, 255, 0.9);
text-align: center;
box-shadow: var(--k4hp-shadow-lg);
}
.k4hp-page .k4hp-closing__title {
color: #ffffff;
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
}
.k4hp-closing p:not(.k4hp-status) {
margin: 10px auto 22px !important;
max-width: 32em;
}
/* Page editor content (none today; shown as the previous template did). */
.k4hp-content__inner {
max-width: calc(860px + 2 * var(--k4hp-gutter));
}
.k4hp-content__inner p + p {
margin-top: 1em;
}
/* ═══════════════════════════════════════════
Larger phones and small tablets (600 px and up)
═══════════════════════════════════════════ */
@media (min-width: 600px) {
.k4hp-ctas {
grid-template-columns: repeat(2, max-content);
}
/* The button pair no longer fills the column, so the group shrinks to it
and the hours line stays centred beneath the buttons. */
.k4hp-cta-group {
width: fit-content;
}
/* Out of hours: one button, so no empty second column (which would push
the hours line off centre). */
.k4hp-closed .k4hp-ctas {
grid-template-columns: max-content;
}
.k4hp-hero__ticks {
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: start;
gap: 6px 22px;
}
.k4hp-why__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Centred groups (areas, closing): the buttons stay centred too. */
.k4hp-areas__cta .k4hp-ctas,
.k4hp-closing .k4hp-cta-group,
.k4hp-section__actions .k4hp-ctas {
margin-left: auto;
margin-right: auto;
}
.k4hp-closing .k4hp-cta-group {
justify-items: center;
}
.k4hp-areas__cta .k4hp-ctas {
justify-content: center;
}
.k4hp-styles__bottom {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
}
}
/* ═══════════════════════════════════════════
Tablets (768 px and up)
The photograph fills the hero; the text sits on the left over a
left-to-right shade.
═══════════════════════════════════════════ */
@media (min-width: 768px) {
.k4hp-page {
--k4hp-gutter: 32px;
}
.k4hp-hero {
min-height: 0;
padding-bottom: 0;
}
.k4hp-hero__media {
height: auto;
bottom: 0;
-webkit-mask-image: none;
mask-image: none;
}
/* Dark behind the text column (at least 0.62, so even a white pixel gives
4.8:1 behind the body text), almost clear on the right. */
.k4hp-hero__media::after {
background:
linear-gradient(90deg,
rgba(27, 24, 25, 0.88) 0%,
rgba(27, 24, 25, 0.66) 50%,
rgba(27, 24, 25, 0.2) 78%,
rgba(27, 24, 25, 0.08) 100%),
linear-gradient(0deg, rgba(27, 24, 25, 0.45) 0%, rgba(27, 24, 25, 0) 35%);
}
.k4hp-slideshow-toggle {
top: 20px;
right: 20px;
}
.k4hp-hero__inner {
padding-top: 88px;
padding-bottom: 88px;
}
.k4hp-trust__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.k4hp-trust__item + .k4hp-trust__item {
padding-left: 16px;
border-left: 1px solid var(--k4-sand);
}
.k4hp-section {
padding: 88px 0;
}
.k4hp-section__head--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
}
.k4hp-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.k4hp-areas__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.k4hp-style {
width: 280px;
}
.k4hp-video-card {
width: 380px;
}
.k4hp-cost__plan {
width: 104px;
}
.k4hp-areas__cta {
padding: 40px 40px 36px;
}
.k4hp-closing {
padding: 48px 40px 42px;
}
}
/* Larger phones and tablets, one card per row (600–899 px): each card with
a drawing lies on its side, the drawing's panel on the left for the card's
full height, as on the Typical Costs page. */
@media (min-width: 600px) and (max-width: 899.98px) {
.k4hp-cost.k4hp-cost--drawing {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
grid-template-rows: auto 1fr;
}
.k4hp-cost--drawing .k4hp-cost__drawing {
grid-column: 1;
grid-row: 1 / span 2;
aspect-ratio: auto;
height: 100%;
min-height: 260px;
padding: 18px 18px 56px;
}
.k4hp-cost--drawing .k4hp-cost__head {
grid-column: 2;
padding: 26px 26px 0;
}
.k4hp-cost--drawing .k4hp-cost__body {
grid-column: 2;
margin: 18px 26px 0;
padding-bottom: 26px;
}
}
/* Three price cards side by side once there is room. */
@media (min-width: 900px) {
.k4hp-costs__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.k4hp-cost {
grid-template-columns: minmax(0, 1fr);
}
.k4hp-cost__plan {
grid-column: 1;
grid-row: auto;
width: auto;
height: 150px;
margin-top: 18px;
display: flex;
justify-content: center;
}
.k4hp-cost__plan img {
width: auto;
height: 100% !important;
}
}
/* ═══════════════════════════════════════════
Laptops and desktops (1024 px and up)
═══════════════════════════════════════════ */
@media (min-width: 1024px) {
/* The hero fills the first screen below the header, up to 760 px. */
.k4hp-hero__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
min-height: min(calc(100vh - var(--k4-header-h)), 760px);
padding-top: clamp(40px, 7vh, 88px);
padding-bottom: clamp(40px, 7vh, 88px);
}
/* The headline follows the screen's height as well as its width, so the
rating, headline, buttons and ticks fit on common laptop screens. */
.k4hp-page .k4hp-hero__title {
font-size: clamp(2.5rem, min(4.2vw, 7.6vh), 4.25rem);
}
.k4hp-page .k4hp-hero__lead {
font-size: clamp(1.0625rem, 2.5vh, 1.25rem);
}
.k4hp-hero__ticks {
font-size: 0.9375rem;
}
.k4hp-hero__badge {
display: block !important;
flex: none;
width: 180px;
height: auto;
align-self: flex-start;
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.4));
}
/* The trust band on the first screen too (1.4.0): where it follows the
hero directly (the homepage), the hero leaves room for it. The band is
about 96 px tall here (76 px on short screens, below). Browsers without
:has() keep the full-height hero, with the band just below it. */
.k4hp-page {
--k4hp-trust-h: 96px;
}
.k4hp-hero:has(+ .k4hp-trust) .k4hp-hero__inner {
min-height: min(calc(100vh - var(--k4-header-h) - var(--k4hp-trust-h)), 760px);
}
.k4hp-section {
padding: 104px 0;
}
.k4hp-why__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.k4hp-consult__grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 64px;
align-items: center;
}
.k4hp-consult__card {
padding: 34px 32px 26px;
}
.k4hp-style {
width: 300px;
}
/* Four cards or fewer: one row across the page, no swiping or arrows. */
.k4hp-styles__track--fit {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
overflow: visible;
}
.k4hp-styles__track--fit .k4hp-style {
width: auto;
}
.k4hp-video-card {
width: 420px;
}
.k4hp-cost {
padding: 28px 26px;
}
.k4hp-cost--drawing .k4hp-cost__head {
padding: 26px 26px 0;
}
.k4hp-cost--drawing .k4hp-cost__body {
margin-right: 26px;
margin-left: 26px;
padding-bottom: 28px;
}
.k4hp-areas__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1440px) {
.k4hp-hero__badge {
width: 200px;
}
}
/* Laptop screens up to 820 px tall (1.4.0): the hero above the trust band is
a little more compact, and the band slimmer, so the rating, headline,
buttons, ticks and the band all fit on the first screen (checked at
1024 x 700, 1280 x 690, 1366 x 657, 1440 x 741, 1440 x 790 and 1536 x 730). */
@media (min-width: 1024px) and (max-height: 820px) {
.k4hp-page {
--k4hp-trust-h: 76px;
}
.k4hp-hero:has(+ .k4hp-trust) .k4hp-hero__inner {
padding-top: clamp(22px, 3.6vh, 40px);
padding-bottom: clamp(22px, 3.6vh, 40px);
}
.k4hp-hero:has(+ .k4hp-trust) .k4hp-hero__title {
margin-top: 10px;
font-size: clamp(2.25rem, min(4.2vw, 6.5vh), 4.25rem);
}
.k4hp-hero:has(+ .k4hp-trust) .k4hp-hero__lead {
margin-top: 10px;
}
.k4hp-hero:has(+ .k4hp-trust) .k4hp-cta-group {
margin-top: 16px;
}
.k4hp-hero:has(+ .k4hp-trust) .k4hp-hero__ticks {
margin-top: 10px !important;
}
.k4hp-hero + .k4hp-trust .k4hp-trust__list {
padding-top: 14px;
padding-bottom: 14px;
}
}
/* Phones turned sideways (600–1023 px wide, under 500 px tall): the text
starts near the top, over an even shade. */
@media (min-width: 600px) and (max-width: 1023.98px) and (max-height: 500px) {
.k4hp-hero__inner {
padding-top: 28px;
padding-bottom: 32px;
}
.k4hp-hero__media {
height: 100%;
}
.k4hp-hero__media::after {
background: rgba(27, 24, 25, 0.74);
}
.k4hp-page .k4hp-hero__title {
margin-top: 10px;
font-size: clamp(1.75rem, 8.5vh, 2.25rem);
}
.k4hp-page .k4hp-hero__lead {
margin-top: 8px;
font-size: 1rem;
}
}
/* ═══════════════════════════════════════════
11. Example plan drawings and their pop-up
Shared by this page's cost cards (section 6) and the Typical Costs
page's plan cards (1.2.0; before, in css/pages-2026.css, which the
homepage does not load). Markup: k4pg_render_plan_link() and
k4pg_render_plan_dialog() in inc/pages-2026.php. Each card sets its own
layout around the drawing. Keep this section at the end of the file:
before the move these rules loaded after all of it, so the Typical Costs
page looks exactly as it did (checked pixel for pixel).
═══════════════════════════════════════════ */
/* The plan's picture panel: cream, the picture kept whole. (A picture
chosen in wp-admin instead of a drawing uses this alone.) */
.k4pg-plan__image {
padding: 18px;
background: var(--k4-cream);
}
.k4pg-plan__image img {
width: 100%;
max-height: 240px;
object-fit: contain;
}
/* ── Plan drawings (1.1.0) ─────────────────────
The sharp vector redraws fill a 4:3 area at the top of each card. The whole
area is a link that opens the drawing larger in the pop-up below; the small
"Enlarge" label says so. */
.k4pg-plan__image--drawing {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4 / 3;
/* Without these the box grows to the drawing's own shape instead of 4:3. */
min-height: 0;
overflow: hidden;
/* The bottom strip keeps the "Enlarge" label clear of the drawing. */
padding: 14px 14px 48px;
color: inherit;
text-decoration: none;
cursor: zoom-in;
}
.k4pg-plan__image--drawing img {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
max-height: none;
object-fit: contain;
}
.k4pg-plan__zoom {
position: absolute;
right: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px 6px 9px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(27, 24, 25, 0.16), 0 4px 12px -4px rgba(27, 24, 25, 0.25);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
color: var(--k4-ink);
transition: background-color 0.2s ease;
}
.k4pg-plan__zoom .k4-icon {
width: 18px;
height: 18px;
}
.k4pg-plan__image--drawing:hover .k4pg-plan__zoom,
.k4pg-plan__image--drawing:focus-visible .k4pg-plan__zoom {
background: var(--k4-gold);
}
/* The card clips anything outside it, so the focus ring sits inside the
drawing's area. (Needs the ID to outweigh the page's focus rule.) */
.k4hp-page #main-content .k4pg-plan__image--drawing:focus-visible {
outline-offset: -5px;
}
/* ── The pop-up (1.1.0) ────────────────────────
Native