/* =============================================================
Paints & Painting Services — DESIGN SYSTEM
Theme: teal (#6f9a99) primary, warm yellow (#e6b93f) highlight,
ink (#1c2226) shell, cool-grey neutrals.
(CSS var names keep the old --emerald-/--amber- labels; only
their VALUES map to the paint palette. admin.css remaps the
same tokens so the admin panel matches.)
============================================================= */
:root {
/* brand palette — teal primary + warm yellow highlight */
/* tri-gradient stops (used directly in special elements) */
/* brand gradient stops — paint palette (teal → sky → warm yellow) */
--brand-1: #557c7b;
--brand-2: #4a9ad4;
--brand-3: #e6b93f;
--emerald-900: #0f1418; /* near-black ink (hero / footer bg) */
--emerald-800: #151b1f; /* deep ink */
--emerald-700: #2a333a; /* dark slate (gradient end) */
--emerald-600: #557c7b; /* teal hover / accent text */
--emerald-500: #6f9a99; /* PRIMARY — paint teal */
--emerald-400: #8bb3b1; /* light teal */
--emerald-300: #a8c8c6;
--emerald-100: #dbeedd;
--emerald-50: #eef5f4;
--amber-600: #c99e28; /* warm yellow (dark) */
--amber-500: #e6b93f; /* warm yellow — secondary accent */
--amber-400: #f0c948;
--amber-100: #fbeed0;
--ink: #1c2226;
--body: #5b666d;
--muted: #8a949a;
--line: #e8ecef;
--surface: #ffffff;
--canvas: #f7f9fa;
--canvas-2: #eef2f3;
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--shadow-sm: 0 2px 8px rgba(20,28,34, .06);
--shadow: 0 12px 30px rgba(20,28,34, .10);
--shadow-lg: 0 28px 60px rgba(20,28,34, .16);
/* One place for the button colour. Every solid button on the site reads these
three, so changing the shade is a one-line edit. Yellow needs dark text —
white on it fails contrast badly — hence --btn-ink. */
--btn: #f5c518;
--btn-dark: #d9a800;
--btn-ink: #1c2226;
--font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
/* Page width. Raise or lower this one value to change the gutters
site-wide; .container-wide (--px-maxw-wide) is kept in step with it. */
--maxw: 1600px;
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
color: var(--body);
background: var(--canvas);
line-height: 1.65;
font-size: 16px;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
/* ---------- layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 32px; }
.section { padding: 26px 0; }
.section-sm { padding: 18px 0; }
.center { text-align: center; }
.grid { display: grid; gap: 26px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
/* Two-column page split (apply / contact / admin detail). The ratio arrives as
an inline --split custom property rather than an inline grid-template-columns,
because an inline property cannot be overridden by a media query — which is
what kept those pages stuck two-up on phones. */
.grid-side { grid-template-columns: var(--split, 1.6fr 1fr); }
@media (max-width: 1024px) { .grid-side { grid-template-columns: 1fr; } }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 34px; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--emerald-600);
background: var(--emerald-50);
border: 1px solid var(--emerald-100);
padding: 7px 14px; border-radius: 999px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber-500); }
.section-head { max-width: 640px; margin: 0 auto 16px; }
.section-head.left { margin-inline: 0; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-top: 16px; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-top: 14px; }
.lead { font-size: 1.12rem; color: var(--body); }
.muted { color: var(--muted); }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: inherit; font-weight: 700; font-size: .96rem;
padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--btn);
color: var(--btn-ink); box-shadow: 0 10px 24px rgba(217,168,0, .32);
}
.btn-primary:hover { background: var(--btn-dark); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(217,168,0, .4); }
.btn-amber {
background: var(--btn);
color: var(--btn-ink); box-shadow: 0 10px 24px rgba(217,168,0, .3);
}
.btn-amber:hover { background: var(--btn-dark); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(217,168,0, .4); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--emerald-400); color: var(--emerald-600); background: var(--emerald-50); }
.btn-light { background: #fff; color: var(--emerald-700); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
/* =============================================================
HEADER / NAV
============================================================= */
.site-header {
position: sticky; top: 0; z-index: 60;
background: rgba(255, 255, 255, .82);
backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--ink); font-size: 1.18rem; }
.brand-logo { max-height: 46px; max-width: 210px; display: block; object-fit: contain; }
.brand-mark {
width: 42px; height: 42px; border-radius: 12px; flex: none;
display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.1rem;
background: linear-gradient(140deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 6px 16px rgba(85,124,123,.3);
}
.brand small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .12em; color: var(--emerald-600); text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li > a {
display: block; padding: 9px 14px; border-radius: 999px;
font-weight: 600; font-size: .95rem; color: var(--body);
transition: color .15s, background .15s;
}
.nav-links > li > a:hover, .nav-links > li > a.active { color: var(--emerald-700); background: var(--emerald-50); }
/* dropdown */
.has-drop { position: relative; }
.has-drop > a::after { content: "▾"; font-size: .7rem; margin-left: 5px; opacity: .6; }
.drop {
position: absolute; top: calc(100% + 10px); left: 0; min-width: 234px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden;
transform: translateY(8px); transition: .18s ease;
}
.has-drop:hover .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop a { display: block; padding: 10px 14px; border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--body); }
.drop a:hover { background: var(--emerald-50); color: var(--emerald-700); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
content: ""; display: block; width: 20px; height: 2px; background: var(--ink); margin: 0 auto; position: relative; transition: .2s;
}
.nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; }
/* =============================================================
HERO
============================================================= */
.hero {
position: relative; overflow: hidden;
background:
radial-gradient(1200px 500px at 85% -10%, rgba(237,28,36,.28), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(0,114,188,.14), transparent 55%),
linear-gradient(180deg, var(--emerald-900), var(--emerald-800));
color: #f4ecf8;
padding: 96px 0 110px;
}
.hero::after {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 26px 26px;
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.hero .eyebrow { color: var(--emerald-100); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.06; }
.hero h1 .accent {
background: linear-gradient(100deg, var(--brand-1), var(--brand-2) 50%, var(--brand-3));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: #ecdcf2; font-size: 1.16rem; margin-top: 20px; max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-trust { display: flex; gap: 26px; margin-top: 36px; flex-wrap: wrap; }
.hero-trust b { display: block; font-size: 1.9rem; color: #fff; font-weight: 800; }
.hero-trust span { font-size: .86rem; color: #cdbdd8; }
/* hero visual card */
.hero-card {
background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-xl); padding: 26px; backdrop-filter: blur(6px);
box-shadow: var(--shadow-lg);
}
.hero-card h3 { color: #fff; font-size: 1.15rem; }
.hero-card .row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.hero-card .row:last-child { border-bottom: 0; }
.hero-card .ico { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.2rem; background: rgba(0,114,188,.18); color: var(--amber-400); }
.hero-card .txt b { color: #fff; display: block; font-size: .98rem; }
.hero-card .txt span { color: #cdbdd8; font-size: .85rem; }
/* wave divider */
.wave { display: block; margin-top: -1px; }
.wave svg { display: block; width: 100%; height: 70px; }
/* =============================================================
CARDS / FEATURE GRIDS
============================================================= */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 28px;
box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--emerald-100); }
.card .ico {
width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
font-size: 1.5rem; margin-bottom: 18px;
background: var(--emerald-50); color: var(--emerald-600); border: 1px solid var(--emerald-100);
}
.card h3 { font-size: 1.2rem; }
.card p { color: var(--muted); margin-top: 10px; font-size: .97rem; }
/* service card with number */
.svc-card { position: relative; overflow: hidden; }
.svc-card .num {
position: absolute; top: 18px; right: 22px; font-size: 2.4rem; font-weight: 800;
color: var(--emerald-50); letter-spacing: -.04em;
}
.svc-card .tag { display: inline-block; margin-top: 14px; font-size: .78rem; font-weight: 700; color: var(--amber-600); background: var(--amber-100); padding: 4px 11px; border-radius: 999px; }
/* stats band */
.stats-band { background: linear-gradient(135deg, var(--emerald-700), var(--emerald-600)); border-radius: var(--radius-xl); padding: 44px; color: #fff; }
.stats-band .grid { text-align: center; }
.stats-band b { font-size: 2.6rem; font-weight: 800; display: block; color: #fff; }
.stats-band .amber { color: var(--amber-400); }
.stats-band span { color: #ecdcf2; font-size: .95rem; }
/* checklist steps */
.step {
display: flex; gap: 18px; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
transition: transform .2s, box-shadow .2s;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.step .no {
flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
}
.step h4 { font-size: 1.05rem; } .step p { color: var(--muted); font-size: .93rem; margin-top: 5px; }
/* two-column feature (image/text alternating) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.split .visual {
border-radius: var(--radius-xl); min-height: 340px;
background: linear-gradient(140deg, var(--emerald-600), var(--emerald-800));
position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.split .visual::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px;
}
.split .visual .badge {
position: absolute; bottom: 22px; left: 22px; right: 22px;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
border-radius: var(--radius); padding: 18px; color: #fff; backdrop-filter: blur(6px);
}
.tick-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; color: var(--body); }
.tick-list li::before {
content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%;
background: var(--emerald-500); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 800;
}
/* logos / certifications */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cert {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 16px; text-align: center; font-weight: 700; color: var(--emerald-700); font-size: .92rem;
box-shadow: var(--shadow-sm);
}
.cert small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; margin-top: 4px; }
/* testimonials */
.quote {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 28px; box-shadow: var(--shadow-sm); position: relative;
}
.quote::before { content: "\201C"; font-size: 4rem; line-height: 1; color: var(--emerald-100); position: absolute; top: 10px; right: 22px; font-family: Georgia, serif; }
.quote p { color: var(--body); font-size: .98rem; }
.quote .who { display: flex; align-items: center; gap: 13px; margin-top: 20px; }
.quote .av {
width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--amber-400), var(--amber-600));
}
.quote .who b { display: block; color: var(--ink); font-size: .96rem; }
.quote .who span { font-size: .82rem; color: var(--muted); }
/* FAQ accordion */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 4px 22px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.faq summary {
cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; color: var(--ink);
display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--emerald-500); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 20px; font-size: .96rem; }
/* CTA band */
.cta-band {
background:
radial-gradient(700px 300px at 80% -20%, rgba(0,114,188,.25), transparent 60%),
linear-gradient(120deg, #06326e, #5c1a6b 52%, #8a1230);
border-radius: var(--radius-xl); padding: 60px; text-align: center; color: #fff; position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.cta-band p { color: #ecdcf2; max-width: 560px; margin: 14px auto 0; }
.cta-band .hero-actions { justify-content: center; }
/* =============================================================
FORMS
============================================================= */
.form-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 34px; box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 7px; }
.field label .req { color: #d94848; }
.field input, .field select, .field textarea {
width: 100%; font-family: inherit; font-size: .97rem; color: var(--ink);
padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
background: var(--canvas); transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--emerald-400); background: #fff;
box-shadow: 0 0 0 4px rgba(146,39,143,.12);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); }
.check input { width: auto; margin-top: 4px; }
/* numbered section headers inside the application form */
.form-note { font-size: .87rem; color: var(--muted); margin-bottom: 22px; }
.form-step {
display: flex; align-items: center; gap: 12px;
margin: 30px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.form-step:first-of-type { margin-top: 0; }
.form-step span {
flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
font-size: .82rem; font-weight: 800; color: #fff;
background: linear-gradient(140deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
}
.form-step h3 { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.form-actions .btn { flex: 1 1 200px; }
/* "what happens next" timeline in the apply sidebar */
.step-list { list-style: none; display: grid; gap: 0; counter-reset: sl; }
.step-list li {
counter-increment: sl; position: relative; padding: 0 0 18px 34px;
}
.step-list li::before {
content: counter(sl); position: absolute; left: 0; top: 0;
width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
font-size: .72rem; font-weight: 800;
background: var(--emerald-100); color: var(--emerald-600);
}
.step-list li::after { /* connector down to the next step */
content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px;
background: var(--line);
}
.step-list li:last-child { padding-bottom: 0; }
.step-list li:last-child::after { display: none; }
.step-list b { display: block; font-size: .93rem; color: var(--ink); }
.step-list span { display: block; margin-top: 2px; font-size: .84rem; color: var(--muted); }
.alert { border-radius: var(--radius); padding: 15px 18px; font-size: .95rem; margin-bottom: 22px; border: 1px solid; }
.alert-success { background: var(--emerald-50); border-color: var(--emerald-100); color: var(--emerald-700); }
.alert-error { background: #fdecec; border-color: #f6cccc; color: #b33636; }
.alert ul { margin: 6px 0 0 18px; list-style: disc; }
/* auth (login) card */
.auth-wrap { min-height: 78vh; display: grid; place-items: center; padding: 50px 16px;
background: radial-gradient(700px 400px at 50% -10%, var(--canvas-2), transparent 70%); }
.auth-card { width: 100%; max-width: 430px; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-lg); }
.auth-card .brand-mark { margin: 0 auto 18px; width: 54px; height: 54px; }
/* the card is white, so the logo needs no chip here — just centre it */
.auth-card .auth-logo { display: block; margin: 0 auto 18px; max-height: 46px; max-width: 200px; object-fit: contain; }
.auth-card h1 { font-size: 1.6rem; text-align: center; }
.auth-card .sub { text-align: center; color: var(--muted); margin: 8px 0 26px; font-size: .95rem; }
.auth-alt { text-align: center; margin-top: 20px; font-size: .92rem; color: var(--muted); }
.auth-alt a { color: var(--emerald-600); font-weight: 700; }
/* info side panel (apply / contact page) */
.side-card { background: linear-gradient(160deg, var(--emerald-700), var(--emerald-800)); color: #fff;
border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.side-card h3 { color: #fff; }
.side-card .money { font-size: 2rem; font-weight: 800; color: var(--amber-400); }
.side-card ul { margin-top: 16px; }
.side-card li { display: flex; gap: 10px; padding: 8px 0; color: #ecdcf2; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .92rem; }
.side-card li:last-child { border-bottom: 0; }
.side-card li b { color: #fff; }
/* the default ghost button is dark-on-light, which disappears on this dark
card — invert it so the label stays readable */
.side-card .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.side-card .btn-ghost:hover {
color: var(--emerald-800); background: #fff; border-color: #fff;
}
/* solid CTA on the dark card — readable even if this block never loads */
.side-card .btn-light { background: #fff; color: var(--emerald-600); border-color: #fff; }
.side-card .btn-light:hover { background: var(--emerald-50); color: var(--emerald-800); }
.info-tile { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.info-tile .ico { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.2rem; background: var(--emerald-50); color: var(--emerald-600); }
.info-tile b { color: var(--ink); display: block; font-size: .95rem; }
.info-tile span, .info-tile a { color: var(--muted); font-size: .9rem; word-break: break-word; }
/* page hero (inner pages) */
.page-hero { background: linear-gradient(135deg, var(--emerald-800), var(--emerald-700)); color: #fff; padding: 36px 0 42px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; opacity: .5;
background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 24px 24px; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.page-hero p { color: #ecdcf2; margin-top: 12px; max-width: 620px; }
.crumb { font-size: .86rem; color: #cdbdd8; margin-bottom: 14px; }
.crumb a:hover { color: #fff; }
/* =============================================================
DASHBOARD / ADMIN
============================================================= */
.dash { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.dash-side { background: var(--emerald-900); color: #ecdcf2; padding: 24px 16px; position: sticky; top: 0; height: 100vh; }
.dash-side .brand { color: #fff; margin-bottom: 28px; }
.dash-side .brand small { color: var(--emerald-300); }
.dash-nav a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: .94rem; color: #cdbdd8; margin-bottom: 4px; transition: .15s; }
.dash-nav a:hover, .dash-nav a.active { background: rgba(255,255,255,.08); color: #fff; }
.dash-nav .sep { height: 1px; background: rgba(255,255,255,.08); margin: 16px 6px; }
.dash-main { padding: 30px 34px; background: var(--canvas); }
.dash-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; flex-wrap: wrap; gap: 14px; }
.dash-top h1 { font-size: 1.5rem; }
.dash-top .who { font-size: .9rem; color: var(--muted); }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.kpi b { font-size: 2rem; font-weight: 800; color: var(--ink); display: block; }
.kpi span { color: var(--muted); font-size: .9rem; }
.kpi .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--emerald-50); color: var(--emerald-600); font-size: 1.2rem; margin-bottom: 14px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.panel-head h3 { font-size: 1.1rem; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th { text-align: left; padding: 13px 18px; background: var(--canvas); color: var(--muted); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
table.data td { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--body); vertical-align: middle; }
table.data tr:hover td { background: var(--emerald-50); }
.badge {
display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700;
}
.badge-pending { background: var(--amber-100); color: var(--amber-600); }
.badge-reviewing { background: #e4eefb; color: #2f6fd0; }
.badge-approved { background: var(--emerald-100); color: var(--emerald-700); }
.badge-rejected { background: #fdecec; color: #b33636; }
.badge-new { background: var(--amber-100); color: var(--amber-600); }
.dash-empty { padding: 46px; text-align: center; color: var(--muted); }
/* ---- partner dashboard polish -------------------------------
Scoped to .dash-side / .dash-main so the admin panel, which reuses .kpi and
.card, is untouched. */
/* the logo is dark artwork on a near-black sidebar — same white chip as the footer */
.dash-side .brand-logo {
background: #fff; border-radius: 10px; padding: 8px 12px;
max-height: 38px; box-sizing: content-box;
}
/* icons sit in a fixed gutter so every label starts on the same vertical line —
emoji have wildly different widths, which left the text ragged */
.dash-nav a i { font-style: normal; width: 20px; flex: none; text-align: center; font-size: 1rem; line-height: 1; }
/* KPI tiles: even heights, and a value size that fits a long reference code */
.dash-main .kpi { display: flex; flex-direction: column; height: 100%; }
.dash-main .kpi .ico { margin-bottom: 12px; }
.dash-main .kpi b { font-size: 1.55rem; line-height: 1.25; overflow-wrap: anywhere; }
.dash-main .kpi b .badge { font-size: .78rem; vertical-align: middle; }
/* reference codes are long and dense — smaller, tabular, never mid-code wrap */
.dash-main .kpi b.kpi-ref { font-size: 1.12rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.dash-main .kpi span { margin-top: 4px; }
.dash-main .kpi .kpi-extra { display: block; margin-top: 6px; font-size: .78rem; font-weight: 700; color: var(--emerald-600); }
/* quick actions: label above description (both were inline, so they ran together) */
.dash-main .qa { display: flex; flex-direction: column; height: 100%; }
.dash-main .qa .ico { width: 46px; height: 46px; font-size: 1.25rem; margin-bottom: 14px; }
.dash-main .qa b { display: block; color: var(--ink); font-size: 1rem; font-weight: 700; }
.dash-main .qa span { display: block; margin-top: 5px; color: var(--muted); font-size: .89rem; line-height: 1.55; }
.dash-main .qa::after {
content: "→"; margin-top: auto; padding-top: 14px;
color: var(--emerald-500); font-weight: 800; opacity: 0;
transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease;
}
.dash-main .qa:hover::after { opacity: 1; transform: none; }
@media (max-width: 980px) {
.dash-main .kpi b.kpi-ref { white-space: normal; overflow-wrap: anywhere; }
}
/* =============================================================
FOOTER
============================================================= */
.site-footer { background: var(--emerald-900); color: #cdbdd8; padding: 64px 0 26px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.site-footer .brand { color: #fff; }
.site-footer .brand small { color: var(--emerald-300); }
/* the logo is dark artwork made for the white header, so it disappears against
the near-black footer — sit it on a white chip instead of tinting the image,
which would wreck the coloured dots */
.site-footer .brand-logo {
background: #fff; border-radius: 12px; padding: 10px 14px;
/* content-box so the padding is added around the 46px logo, not carved out of it */
box-sizing: content-box;
}
.footer-about { margin-top: 16px; font-size: .92rem; color: #b3a0c0; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #ecdcf2; transition: .15s; font-size: .95rem; }
.footer-social a:hover { background: var(--emerald-500); color: #fff; }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; font-size: .93rem; color: #cdbdd8; }
.footer-col a:hover { color: #fff; }
/* contact rows: icon in a fixed gutter so the labels line up under each other,
and the number stays on one line rather than wrapping under its own icon */
.footer-col .foot-ic { display: flex; align-items: center; gap: 9px; }
.footer-col .foot-ic i { font-style: normal; width: 18px; flex: none; text-align: center; font-size: .95rem; }
.footer-col .foot-ic i svg { width: 17px; height: 17px; display: block; margin-inline: auto; }
.footer-col .foot-ic .ic-wa { color: #25d366; } /* WhatsApp brand green */
.footer-col .foot-ic span { min-width: 0; word-break: break-word; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .86rem; color: #b3a0c0; }
.footer-bottom a:hover { color: #fff; }
/* whatsapp float */
.wa-float {
position: fixed; bottom: 22px; right: 22px; z-index: 80;
width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff;
display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 10px 26px rgba(37,211,102,.5);
transition: transform .2s;
}
.wa-float:hover { transform: scale(1.08); }
/* =============================================================
RESPONSIVE
============================================================= */
@media (max-width: 980px) {
.g-4 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(2, 1fr); }
.cert-grid { grid-template-columns: repeat(2, 1fr); }
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.split { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.dash { grid-template-columns: 1fr; }
.dash-side { position: static; height: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dash-side .brand { margin-bottom: 0; margin-right: auto; }
.dash-nav { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.dash-nav .sep { display: none; }
}
@media (max-width: 768px) {
.section { padding: 60px 0; }
.nav-links, .nav-cta .btn-ghost { display: none; }
.nav-toggle { display: block; }
.site-header.open .nav-links {
display: flex; flex-direction: column; align-items: stretch; gap: 2px;
position: absolute; top: 74px; left: 0; right: 0; background: #fff;
border-bottom: 1px solid var(--line); padding: 14px 22px; box-shadow: var(--shadow);
}
.site-header.open .drop { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: 12px; }
.site-header.open .has-drop.open > .drop { display: block; }
.site-header.open .has-drop > a::after { transition: transform .2s ease; }
.site-header.open .has-drop.open > a::after { transform: rotate(180deg); }
.g-2, .g-3, .g-4, .field-row, .field-row-3, .cert-grid, .footer-grid { grid-template-columns: 1fr; }
.stats-band, .cta-band, .form-card { padding: 30px 22px; }
.cta-band { padding: 40px 22px; }
}
/* =============================================================
REAL PHOTOS (Unsplash) — service thumbnails, hero & split visuals
============================================================= */
.svc-card .thumb {
position: relative; margin: -28px -28px 20px; height: 185px; overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.svc-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.svc-card:hover .thumb img { transform: scale(1.07); }
.svc-card .thumb::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(25,12,40,.35));
}
.svc-card .num-pill {
position: absolute; top: 12px; left: 14px; z-index: 2;
background: rgba(25,12,40,.55); color: #fff; backdrop-filter: blur(6px);
padding: 4px 13px; border-radius: 999px; font-weight: 800; font-size: .9rem;
border: 1px solid rgba(255,255,255,.25);
}
/* photographic split visual (about / services) */
.visual.photo { background-size: cover; background-position: center; }
.visual.photo::before {
background-image: none;
background: linear-gradient(160deg, rgba(42,18,70,.30), rgba(25,12,40,.80));
}
/* hero with background photo */
.hero.has-photo {
background:
radial-gradient(1200px 500px at 85% -10%, rgba(237,28,36,.24), transparent 60%),
linear-gradient(180deg, rgba(25,12,40,.84), rgba(42,18,70,.92)),
url('../img/photos/hero.jpg');
background-size: auto, auto, cover;
background-position: center;
background-repeat: no-repeat;
}
/* business-model card image (partnership) */
.model-thumb { margin: -28px -28px 20px; height: 170px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.model-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* =============================================================
LEGACY HERO CAROUSEL (.hxr) — unused since the paint homepage rebuild
============================================================= */
.hxr {
position: relative; overflow: hidden; color: #fff;
background:
radial-gradient(1100px 700px at 22% 8%, rgba(42,18,70,.9), transparent 60%),
radial-gradient(900px 600px at 95% 100%, rgba(146,39,143,.28), transparent 55%),
linear-gradient(135deg, #0a0616, #150726 45%, #1c0a2b);
padding: 14px 0 14px;
}
.hxr::before {
content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 26px 26px;
}
.hxr-photo-stage { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; z-index: 0; }
.hxr-photo {
position: absolute; inset: 0; background-size: cover; background-position: center;
opacity: 0; transition: opacity .8s ease;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 100%);
mask-image: linear-gradient(90deg, transparent, #000 20%, #000 100%);
}
.hxr-photo.active { opacity: 1; }
.hxr-photo::after { content: ""; position: absolute; inset: 0;
background:
linear-gradient(90deg, #150726 0%, rgba(21,7,38,.25) 32%, rgba(21,7,38,.05) 100%),
linear-gradient(180deg, rgba(21,7,38,.1) 0%, transparent 55%, rgba(10,4,20,.55) 100%); }
.hxr .container { position: relative; z-index: 2; }
.hxr-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; min-height: 330px; }
.hxr-slides { position: relative; min-height: 300px; }
.hxr-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: .5s ease; pointer-events: none; }
.hxr-slide.active { position: relative; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hxr-badge {
display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #e7dcf2;
}
.hxr-badge .star { color: #fbbf3f; font-size: .9rem; }
.hxr h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.08; margin-top: 16px; letter-spacing: -.02em; }
.hxr h1 .g {
background: linear-gradient(100deg, #2a8fe0, #92278f 52%, #ff3d6e);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hxr-desc { color: #c7bcd8; font-size: 1.08rem; margin-top: 20px; max-width: 500px; line-height: 1.6; }
.hxr-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hxr-b1 {
display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px; border-radius: 999px; font-weight: 700; cursor: pointer;
color: #fff; border: none; background: linear-gradient(120deg, #0072bc, #6a2b9d 55%, #b0246f);
box-shadow: 0 12px 30px rgba(146,39,143,.4); transition: transform .18s, box-shadow .18s;
}
.hxr-b1:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(146,39,143,.55); }
.hxr-b2 {
display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px; border-radius: 999px; font-weight: 700;
color: #efe6f7; background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.22); transition: .18s;
}
.hxr-b2:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.hxr-nav { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
.hxr-counter { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: .04em; }
.hxr-counter small { color: #9b8bb0; font-weight: 700; font-size: 1rem; }
.hxr-arrows { display: flex; gap: 12px; }
.hxr-arrow {
width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.2); color: #fff; font-size: 1.2rem; transition: .18s;
}
.hxr-arrow:hover { background: rgba(146,39,143,.4); border-color: rgba(255,255,255,.45); }
.hxr-card {
background: linear-gradient(160deg, rgba(28,14,44,.72), rgba(16,8,30,.6));
border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 18px; backdrop-filter: blur(20px);
box-shadow: 0 30px 70px rgba(10,4,20,.55);
}
.hxr-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.hxr-card-head h3 { color: #fff; font-size: 1rem; line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; font-weight: 800; }
.hxr-card-head .bm { color: #b98bd0; font-size: 1.3rem; opacity: .8; }
.hxr-feat { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); margin-bottom: 8px; transition: .2s; }
.hxr-feat:hover { background: rgba(255,255,255,.08); border-color: rgba(146,39,143,.5); }
.hxr-ico {
width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #dcbcff;
background: linear-gradient(150deg, rgba(0,114,188,.35), rgba(146,39,143,.4)); border: 1px solid rgba(255,255,255,.12);
}
.hxr-ico svg { width: 18px; height: 18px; }
.hxr-feat b { color: #fff; font-size: .9rem; display: block; }
.hxr-feat span { color: #ddd4ea; font-size: .78rem; line-height: 1.4; display: block; margin-top: 2px; }
.hxr-stats { display: flex; gap: 8px; margin-top: 2px; padding: 11px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.hxr-stat { flex: 1; display: flex; align-items: center; gap: 10px; }
.hxr-stat + .hxr-stat { border-left: 1px solid rgba(255,255,255,.1); padding-left: 10px; }
.hxr-stat .si { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #dcbcff; background: rgba(146,39,143,.3); border: 1px solid rgba(255,255,255,.12); font-size: .78rem; }
.hxr-stat b { color: #fff; font-size: 1rem; display: block; line-height: 1; }
.hxr-stat span { color: #cdc2dc; font-size: .68rem; display: block; margin-top: 2px; }
.hxr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.hxr-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
background: transparent; border: 1px solid transparent; text-align: left; transition: .2s; position: relative; overflow: hidden; }
.hxr-step:hover { background: rgba(255,255,255,.04); }
.hxr-step.active { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.hxr-step.active::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #0072bc, #92278f, #ed1c24); }
.hxr-step .n { font-size: 1.2rem; font-weight: 800; color: #6e6084; flex: none; }
.hxr-step.active .n { color: #fff; }
.hxr-step .t { font-size: .86rem; font-weight: 600; color: #9b8fb0; line-height: 1.25; }
.hxr-step.active .t { color: #f0e9f7; }
.hxr-step .th { width: 62px; height: 42px; border-radius: 9px; margin-left: auto; flex: none; background-size: cover; background-position: center; opacity: .55; filter: grayscale(.3); }
.hxr-step.active .th { opacity: 1; filter: none; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
@media (max-width: 1000px) {
.hxr-photo-stage { width: 100%; }
.hxr-photo.active { opacity: .4; }
.hxr-grid { grid-template-columns: 1fr; gap: 30px; }
.hxr-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.hxr-steps { grid-template-columns: 1fr; }
.hxr-step .th { display: none; }
.hxr h1 { font-size: 2.1rem; }
.hxr-card { padding: 18px; }
}
/* small phones — tighten gutters & oversized paddings */
@media (max-width: 480px) {
.container { padding-inline: 16px; }
.page-hero { padding: 30px 0 34px; }
.cta-band { padding: 34px 18px; }
.btn-lg { padding: 12px 20px; }
.hero-actions { gap: 10px; }
}
/* =============================================================
PAINT HOMEPAGE — hero, why-us, products slider, colour combos
Prefix: .px* (self-contained; does not touch the base system)
============================================================= */
:root {
--px-teal: #6f9a99;
--px-teal-dark: #557c7b;
--px-mint: #dbeedd;
--px-mint-dark: #c3e2c8;
--px-ink: #1c2226;
--px-body: #5b666d;
--px-line: #e8ecef;
--px-maxw-wide: 1600px;
}
.container-wide {
width: 100%; max-width: var(--px-maxw-wide);
margin-inline: auto; padding-inline: 32px;
}
/* shared circular arrow button ------------------------------- */
.px-arrow {
width: 44px; height: 44px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; border: 1px solid var(--px-line);
background: #fff; color: var(--px-ink); cursor: pointer;
box-shadow: 0 4px 14px rgba(20,28,34, .10);
transition: background .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
}
.px-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-arrow:hover { background: var(--px-ink); color: #fff; transform: scale(1.06); }
.px-arrow[disabled] { opacity: .32; cursor: default; transform: none; background: #fff; color: var(--px-ink); }
/* shared horizontal track ------------------------------------ */
.px-track {
display: flex; gap: 22px;
overflow-x: auto; scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none; -ms-overflow-style: none;
padding-block: 4px;
}
.px-track::-webkit-scrollbar { display: none; }
.px-track > * { scroll-snap-align: start; flex: none; }
/* ---------- 1. HERO ----------------------------------------- */
.pxh {
position: relative; isolation: isolate;
min-height: clamp(105px, 14vh, 145px);
display: flex; align-items: center;
overflow: hidden;
}
.pxh-stage { position: absolute; inset: 0; z-index: -2; }
/* Painted behind the slides so the band is never blank white while a photo is
still downloading, and so a slide with no image falls back to something
deliberate rather than the page background. */
.pxh { background: #1b2126; }
.pxh-bg {
position: absolute; inset: 0;
opacity: 0; transform: scale(1.06);
transition: opacity 1s ease, transform 8s linear;
}
.pxh-bg.active { opacity: 1; transform: scale(1); }
/* The photo fills the band edge to edge. Because .pxh-fit below gives the band
the photo's own shape, "cover" here crops nothing — it is only insurance
against sub-pixel rounding leaving a hairline at an edge. */
.pxh-bg.has-photo {
background-image: var(--pxh-img);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Darkest behind the centred copy and fading outward, so white text holds up
over bright photography as well as the dark gradient slides. */
/* The heavy wash existed to keep white headline text readable over bright
photos. With the hero now photo-only there is no text to protect, so it is
reduced to a light bottom fade that just seats the slider dots. */
.pxh-scrim {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.34) 100%);
}
.pxh-inner { position: relative; display: grid; }
/* fixed hero height — this is what sets the size of the band, not the section's
min-height, because the inner box is the taller of the two */
/* Hero band height. 34.17vw is 656/1920, so the band keeps the same shape as
the recommended 1920 x 656 artwork at every width — the photo fills it with
no cropping from 768px up. Capped at 656px so it does not grow on very wide
monitors, floored at 190px so it stays a band and not a sliver on phones. */
.container.pxh-inner { height: clamp(190px, 34.17vw, 656px); }
/* Desktop gets a taller band (45.83vw is 880/1920, roughly 2.2:1). Kept in its own
min-width query so phones and tablets keep the ratio above — growing the band
on a narrow screen only crops more off the sides of the photo.
The 78vh term matters on short laptop screens: at this width factor a 1366
viewport wants 626px, which is taller than the visible area on a 768px-tall
laptop, so the hero would fill the whole screen and hide everything below it. */
@media (min-width: 1025px) {
.container.pxh-inner { height: clamp(427px, min(45.83vw, 78vh), 880px); }
}
/* When index.php could read the slide photo off disk it publishes the photo's
own width/height ratio as --pxh-ar, and the band adopts it. The photo then
fits exactly at every width: nothing is cropped and nothing is added at the
sides. Height therefore follows the artwork — a 1920 x 880 upload gives the
designed band, a 16:9 upload gives a taller one.
The ratio goes on the section rather than a calc() on the inner box because
100vw counts the scrollbar, which would have made the band a few pixels
taller than the photo and reintroduced a sliver of cropping. */
.pxh.pxh-fit { aspect-ratio: var(--pxh-ar); min-height: 0; }
.pxh.pxh-fit .container.pxh-inner { height: 100%; }
.pxh-slide {
grid-area: 1 / 1;
max-width: 660px; margin-inline: auto; text-align: center;
padding: 6px 0 44px;
opacity: 0; visibility: hidden; transform: translateY(14px);
transition: opacity .6s ease, transform .6s ease, visibility .6s;
pointer-events: none;
}
/* =============================================================
POSTER HERO (.pxh-poster)
Copy, badges and a colour rail laid over one composite photo, matching the
brand key visual. Only switches on when the CMS fields are filled in; an
empty site keeps the plain centred hero above.
============================================================= */
/* height is 75% of the original 560/54vw/780 — the composition still fits, it
just stops filling most of the screen before anything else is visible */
.pxh-poster { min-height: clamp(112px, 10.5vw, 156px); align-items: stretch; }
/* full-bleed: the rail must touch the right edge, so no container gutter */
.pxh-poster .pxh-inner {
width: 100%; grid-template-columns: minmax(0, 1fr) clamp(190px, 14vw, 208px);
align-items: stretch;
}
/* With no colour rail configured the second column would hold nothing but still
take up to 208px away from the headline, so it is dropped entirely. */
.pxh-poster.pxh-norail .pxh-inner { grid-template-columns: minmax(0, 1fr); }
/* the wash is already in the photo, so only a light lift on the left third */
.pxh-poster .pxh-scrim {
background: linear-gradient(95deg, rgba(6,32,38,.42) 0%, rgba(6,32,38,.16) 38%, rgba(6,32,38,0) 62%);
}
/* The badges are the last thing in this column, so the bottom padding is what
sets how high they sit off the foot of the band — and it has to clear the
slider dots, which sit about 20px up from the same edge. */
.pxh-poster .pxh-copy {
display: flex; flex-direction: column;
padding: clamp(10px, 1.2vw, 16px) clamp(20px, 3.6vw, 62px) clamp(76px, 8.4vw, 122px);
}
.pxh-logo { display: block; flex: none; margin-bottom: clamp(8px, 1.2vw, 16px); }
.pxh-logo img { max-height: clamp(44px, 4.6vw, 62px); max-width: 220px; width: auto; object-fit: contain; }
/* The copy is centred in whatever room is left between the top padding and the
badges. Lifting the badges took that room away from the bottom, which pulled
the headline up with it — this padding puts the balance back. */
.pxh-poster .pxh-slides { display: grid; flex: 1 1 auto; padding-top: clamp(26px, 3.4vw, 52px); }
.pxh-poster .pxh-slide {
grid-area: 1 / 1; max-width: 560px; margin-inline: 0;
text-align: left; padding: 0; align-self: center;
}
.pxh-poster .pxh-slide h1 {
font-size: clamp(1.9rem, 3.9vw, 3.3rem); font-weight: 800;
line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase;
}
.pxh-poster .pxh-slide p {
margin: clamp(14px, 1.6vw, 22px) 0 0; max-width: 26ch;
font-size: clamp(.95rem, 1.15vw, 1.16rem); line-height: 1.5;
}
.pxh-poster .pxh-btns { justify-content: flex-start; margin-top: clamp(20px, 2.4vw, 30px); }
/* ---- feature badges ---- */
.pxh-feats {
flex: none; display: flex; flex-wrap: wrap;
gap: clamp(6px, .8vw, 14px); margin-top: clamp(10px, 1.2vw, 16px);
transition: opacity .5s ease, visibility .5s;
}
/* Hidden on slides that switched the badges off. It keeps its space rather
than being display:none, so the headline above does not jump as the slides
change — the row simply fades out with the copy. */
.pxh-feats.is-off { opacity: 0; visibility: hidden; }
/* Kept close to the circle's own width. Wider columns let "SUPERIOR FINISH"
sit on one long line, which pushed the labels far past the rings they belong
to and made the row read as four loose columns instead of four badges. */
.pxh-feats li { width: clamp(68px, 5.6vw, 84px); text-align: center; }
.pxh-feat-ico {
width: clamp(56px, 4.7vw, 70px); height: clamp(56px, 4.7vw, 70px);
margin: 0 auto 9px; border-radius: 50%; display: grid; place-items: center;
border: 1.8px solid #fff; color: #fff;
}
/* stroke-width is in the 0-24 viewBox, so it scales with the icon: 1.9 draws
about the same weight as the 1.8px ring around it at every size */
.pxh-feat-ico svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* No text-transform: the artwork mixes capitals ("SUPERIOR FINISH") with
sentence case ("Durability"), so the label is printed exactly as typed in
the CMS and the casing stays an editorial choice. */
.pxh-feat-txt {
display: block; color: #fff;
font-size: clamp(.58rem, .66vw, .72rem); font-weight: 700; line-height: 1.3;
letter-spacing: .02em;
text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
/* ---- right colour rail ---- */
.pxh-rail { display: flex; flex-direction: column; background: #f6f1e7; }
.pxh-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; }
.pxh-swatches li { aspect-ratio: 1 / .84; padding: 7px 8px; display: flex; align-items: flex-end; }
.pxh-swatches span {
font-size: clamp(.5rem, .56vw, .6rem); font-weight: 600; line-height: 1.22;
color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.pxh-rail-foot {
margin-top: auto; padding: clamp(16px, 1.6vw, 24px) clamp(12px, 1.1vw, 18px) clamp(18px, 1.8vw, 26px);
}
.pxh-rail-foot h2 {
color: #1c2226; font-size: clamp(1.05rem, 1.5vw, 1.6rem); font-weight: 800;
line-height: 1.12; letter-spacing: -.01em; text-transform: uppercase;
}
.pxh-rail-btn {
display: flex; align-items: center; justify-content: center; gap: 7px;
margin-top: clamp(12px, 1.2vw, 18px); padding: clamp(11px, 1vw, 15px) 10px;
background: #14538c; color: #fff; text-align: center;
font-size: clamp(.66rem, .76vw, .84rem); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
transition: background .2s ease;
}
.pxh-rail-btn:hover { background: #0e3f6c; }
/* ---- slide dots sit low-left over the photo, not in a white pill ---- */
.pxh-poster .pxh-nav {
left: 50%; transform: translateX(-50%);
bottom: clamp(10px, 1.4vw, 20px);
background: none; box-shadow: none; padding: 0; gap: 10px;
}
/* the poster variant keeps the same coloured dots — only their position moves */
@media (max-width: 1100px) {
/* the rail is the first thing to go — the headline needs the width more */
.pxh-poster .pxh-inner { grid-template-columns: 1fr; }
.pxh-rail { display: none; }
}
@media (max-width: 700px) {
.pxh-poster { min-height: 105px; }
.pxh-poster .pxh-slide p { max-width: 34ch; }
.pxh-feats { gap: 12px; }
}
/* ---- phones and small tablets: same composition as the desktop hero -------
Copy and badges sit over the photo, exactly as they do above 768px. That
needs a band far taller than the artwork's own shape gives at this width —
a 2.2:1 photo is only about 180px tall on a 390px screen, and the headline,
sub-text and badges need well over 300px. So the band is sized to the copy
and the photo covers it, which means the wide artwork is cropped at the
sides on a narrow screen. .pxh-fit locks the section to the photo's ratio,
so that has to be released here first. */
@media (max-width: 768px) {
.pxh.pxh-fit { aspect-ratio: auto; }
/* Shorter than the copy strictly needs, because every pixel of height here is
paid for in width cropped off the artwork: at 108vw only about 41% of a
2.2:1 photo survived and the family was half out of frame. 92vw shows
roughly half of it. */
.pxh-poster { min-height: clamp(350px, 92vw, 480px); align-items: stretch; }
/* The subject of a wide brand banner sits right of centre — the family and
the tin here — while the left is wall the headline covers anyway. Holding
the crop right of centre keeps the subject in frame instead of trimming it. */
.pxh-bg.has-photo { background-position: 68% center; }
/* the wash the desktop hero uses is too light once the crop pulls the busy
middle of the photo under the headline — this one darkens the whole left
side and the foot of the band, where the copy and the dots sit */
.pxh-poster .pxh-scrim {
background:
linear-gradient(90deg, rgba(6,26,32,.72) 0%, rgba(6,26,32,.46) 52%, rgba(6,26,32,.16) 100%),
/* the badge row crosses the paint tin at these widths, so the foot of the
band needs a real base under it rather than a light fade */
linear-gradient(180deg, rgba(6,26,32,0) 38%, rgba(6,26,32,.5) 68%, rgba(6,26,32,.82) 100%);
}
.pxh-poster .pxh-copy { padding: 26px 22px 58px; }
.pxh-poster .pxh-slides { padding-top: 0; }
.pxh-poster .pxh-slide { max-width: none; }
.pxh-poster .pxh-slide h1 { font-size: clamp(1.5rem, 7.4vw, 2.1rem); letter-spacing: -.015em; }
.pxh-poster .pxh-slide p {
max-width: 30ch; margin-top: 12px;
font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.9);
}
/* Four across, but the columns are capped rather than 1fr: equal columns
split the whole copy width between them, so each 38px ring floated in an
86px cell and the badges read as far apart even with the gap at 6px.
Capping the column and starting the row from the left closes that space.
minmax's 0 lower bound lets the columns shrink on a 360px screen instead
of pushing the row past the edge. */
.pxh-feats {
display: grid; grid-template-columns: repeat(4, minmax(0, 70px));
justify-content: start; gap: 6px; margin-top: 18px;
}
.pxh-feats li { width: auto; text-align: center; }
.pxh-feat-ico { width: 38px; height: 38px; margin: 0 auto 5px; border-width: 1.5px; }
.pxh-feat-txt { font-size: .56rem; line-height: 1.22; letter-spacing: 0; }
/* back on the photo, centred at the foot of the band, as on desktop */
.pxh-poster .pxh-nav { left: 50%; transform: translateX(-50%); top: auto; bottom: 16px; }
}
.pxh-slide.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.pxh-slide h1 {
color: #fff; font-size: clamp(1.45rem, 2.9vw, 2.25rem);
line-height: 1.14; letter-spacing: -.02em;
text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.pxh-slide p {
color: rgba(255,255,255,.92); font-size: .95rem; line-height: 1.6;
margin: 12px auto 0; max-width: 560px;
text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.pxh-btns { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* Yellow by default, not white-turning-yellow on hover: this is the page's
primary call to action, and --btn is the same token every other solid
button on the site reads, so the shade stays in one place. */
.pxh-btn {
display: inline-block;
background: var(--btn); color: var(--btn-ink);
font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
padding: 12px 28px; border: 1.5px solid transparent; border-radius: 2px;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pxh-btn:hover {
background: var(--btn-dark); color: var(--btn-ink); border-color: var(--btn-dark);
transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
/* secondary CTA — outlined so it reads as the softer of the two */
.pxh-btn.ghost {
background: transparent; color: #fff; border-color: rgba(255,255,255,.75);
backdrop-filter: blur(2px);
}
.pxh-btn.ghost:hover { background: #fff; color: var(--px-ink); border-color: #fff; }
/* Slide navigation — bare coloured dots in the brand palette, matching the key
visual. The white pill and its arrows are gone; the dots stay clickable and
the carousel still advances on its own. */
.pxh-nav {
position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
z-index: 3;
display: flex; align-items: center; gap: 14px;
background: none; border-radius: 0; padding: 0; box-shadow: none;
}
/* the arrows are not part of this treatment — dots carry the navigation */
.pxh-arrow { display: none; }
.pxh-dots { display: flex; align-items: center; gap: 12px; }
.pxh-dot {
width: 13px; height: 13px; padding: 0; border: 0; cursor: pointer;
border-radius: 50%; opacity: .55;
transition: opacity .25s ease, transform .25s ease;
}
/* one brand colour per dot, repeating past the fifth slide */
.pxh-dot:nth-child(5n + 1) { background: #f08a3c; } /* orange */
.pxh-dot:nth-child(5n + 2) { background: #6f4fd8; } /* purple */
.pxh-dot:nth-child(5n + 3) { background: #e6b93f; } /* yellow */
.pxh-dot:nth-child(5n + 4) { background: #2f9e6b; } /* green */
.pxh-dot:nth-child(5n + 5) { background: #e2574c; } /* red */
.pxh-dot.active { opacity: 1; transform: scale(1.45); }
.pxh-dot:hover { opacity: 1; }
/* ---------- 2. WHY CHOOSE US -------------------------------- */
.pxw { padding: 70px 0; background: #fff; }
.pxw-grid {
display: grid; grid-template-columns: 1fr 1.06fr;
gap: 54px; align-items: center;
}
/* ---- photo collage ----
A tall shot on the left with up to two stacked beside it. The stack is its
own column only when there is something in it, so a site with one photo
still gets a full-width picture rather than a half-empty grid. */
/* Two columns of equal width, deliberately staggered: the stacked pair sits
lower than the tall shot, which is what gives the collage its offset look
rather than reading as a plain two-up grid. Ratios come from the reference —
0.59 portrait for the tall shot, 1.21 landscape for each of the stacked pair
— expressed as aspect-ratio so the shapes hold at any width. */
/* The top padding is the room the dot cluster lives in. Without it the dots
were positioned above the box with a negative offset, hanging outside their
container — which is why the top of the cluster was being cut off. */
.pxw-collage { position: relative; display: flex; gap: 20px; align-items: flex-start; }
.pxw-shot { background-size: cover; background-position: center; border-radius: 2px; }
.pxw-col { flex: 1 1 50%; min-width: 0; }
/* 40% shorter than the reference ratios (247/392 and 250/195). Both are cut by
the same amount so the two columns still finish level with each other. */
.pxw-shot-main { aspect-ratio: 247 / 242; }
.pxw-stack {
flex: 1 1 50%; display: grid; gap: 10px;
margin-top: 42px; /* the stagger */
}
.pxw-stack .pxw-shot { aspect-ratio: 250 / 117; }
/* decorative dots above the collage, echoing the brand mark */
/* caption pill hanging off the bottom of the main shot */
/* sits in the flow, directly under the tall shot in the same column */
/* Sits 12px below the photo — not overlapping it — with the pointer bridging
the gap, which is how the reference has it. */
/* max-width rather than a percentage: the pill then stays compact and wraps to
two or three lines like the reference, even if the column it sits in ends up
wider than expected. */
.pxw-caption {
/* negative margin lifts the pill up over the bottom of the photo */
position: relative; margin-top: -43px;
width: 100%; max-width: 300px;
display: flex; align-items: center; gap: 11px;
background: #eceff1; border-radius: 26px; padding: 12px 16px 12px 12px;
}
/* pointer aiming up at the photo the caption belongs to */
.pxw-caption::before {
content: ""; position: absolute; top: -18px; left: 32px;
border-left: 18px solid transparent; border-right: 18px solid transparent;
border-bottom: 18px solid #eceff1;
}
/* thin outlined tick, as in the reference, rather than a filled white disc */
.pxw-caption-ico {
flex: none; width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
/* color drives the tick — the svg strokes with currentColor */
background: transparent; border: 2px solid #fff; color: #fff;
}
.pxw-caption-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* A slow breath on the tick — just enough to catch the eye without pulling
attention off the copy. A second ring ripples out behind it and fades. */
@keyframes pxw-tick-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.07); }
}
@keyframes pxw-tick-ripple {
0% { transform: scale(1); opacity: .55; }
70% { transform: scale(1.45); opacity: 0; }
100% { transform: scale(1.45); opacity: 0; }
}
.pxw-caption-ico {
position: relative;
animation: pxw-tick-breathe 3.2s ease-in-out infinite;
}
.pxw-caption-ico::after {
content: ""; position: absolute; inset: -2px;
border-radius: 50%; border: 2px solid #fff;
animation: pxw-tick-ripple 3.2s ease-out infinite;
}
/* the pill itself lifts a touch when the visitor points at it */
.pxw-caption { transition: transform .25s ease; }
.pxw-caption:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
.pxw-caption-ico, .pxw-caption-ico::after { animation: none; }
.pxw-caption:hover { transform: none; }
}
.pxw-caption p { font-size: .74rem; line-height: 1.5; color: #5c666e; }
.pxw-eyebrow {
display: inline-block; font-size: .74rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--px-teal);
}
/* serif heading, as in the reference — Georgia is already used by the document
templates, so nothing extra is downloaded */
/* the copy column is centred against the taller collage; this lifts it a little
above that centre line — raise or lower this one value to move it */
.pxw-copy { margin-top: -151px; }
.pxw-copy h2 {
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(1.9rem, 3.2vw, 2.9rem); font-weight: 400; line-height: 1.1;
color: #14181b; letter-spacing: -.01em; margin-top: 12px;
}
.pxw-copy > p { color: #4b5560; font-size: .93rem; line-height: 1.65; margin-top: 18px; max-width: 52ch; }
.pxw-btn {
display: inline-block; margin-top: 28px;
background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 1rem;
padding: 15px 34px; border-radius: 6px;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pxw-btn:hover { background: var(--btn-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(217,168,0,.38); }
/* dashed rule between the intro copy and the feature list */
/* long-dash rule. A border-dash is short and tight, so the dashes are drawn as
a repeating gradient instead — 14px of line, 10px of gap. */
.pxw-rule {
display: block; height: 1.5px; margin: 26px 0 28px;
background: repeating-linear-gradient(to right, #b9c1c6 0 14px, transparent 14px 24px);
}
/* ---- feature list ----
Plain icon-and-text rows in two columns; the boxed cards are gone, so the
list reads as part of the copy rather than four separate panels. */
.pxw-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
.pxw-point { display: flex; align-items: flex-start; gap: 12px; }
/* muted heading with a lighter body under it, matching the reference weight */
.pxw-point h3 { font-size: .97rem; font-weight: 500; color: #5c666f; line-height: 1.3; }
.pxw-point p { margin-top: 6px; color: #98a1a8; font-size: .79rem; line-height: 1.55; }
.pxw-ico { flex: none; width: 44px; height: 44px; display: block; }
.pxw-ico svg { width: 44px; height: 44px; }
/* the list mark is smaller than the old card-header icon */
/* the box sizes the mark whether it is a bundled svg or an uploaded image —
the uploaded ![]()
is width/height 100% of this box */
.pxw-point .pxw-ico { width: 42px; height: 42px; }
.pxw-point .pxw-ico svg { width: 42px; height: 42px; }
.pxw-ico svg .b { fill: currentColor; opacity: .18; stroke: none; }
.pxw-ico svg .s2 { fill: currentColor; opacity: .32; stroke: none; }
.pxw-ico svg .s { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ico-quote { color: #4a9ad4; }
.ico-badge { color: #f08a3c; }
.ico-tools { color: #7d6ae0; }
.ico-cover { color: #34b6c4; }
/* ---------- 3. EXPLORE PRODUCTS ----------------------------- */
.pxp { padding: 70px 0; background: var(--canvas); overflow: hidden; }
.pxp-headwrap {
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: end; gap: 16px; margin-bottom: 34px;
}
.pxp-head { text-align: center; max-width: 660px; margin: 0 auto; grid-column: 2; }
.pxp-nav { grid-column: 3; display: flex; justify-content: flex-end; gap: 10px; }
.pxp-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; color: #3f4a52; }
.pxp-head p { margin-top: 14px; color: #7b8a80; font-size: 1.06rem; line-height: 1.6; }
.pxp-link {
display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
color: #6f4fd8; font-weight: 600; font-size: 1.04rem;
transition: gap .2s ease, color .2s ease;
}
.pxp-link:hover { gap: 15px; color: #5335c4; }
.pxp-slider {
position: relative;
width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 32px;
}
.px-arrow-l { left: -6px; }
.px-arrow-r { right: -6px; }
.pxp-card {
position: relative; /* the label pill is positioned inside */
width: calc((100% - 44px) / 3);
min-width: 240px;
border-radius: 18px; overflow: hidden; background: #fff;
transition: transform .22s ease, box-shadow .22s ease;
}
.pxp-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(20,28,34,.16); }
/* both card sets are links to the application form now */
.pxp-card, .pxc-card { cursor: pointer; }
.pxp-card:focus-visible, .pxc-card:focus-within {
outline: 3px solid var(--px-teal); outline-offset: 3px;
}
/* the photo now fills the whole card — the label sits over it, not under it */
.pxp-img { display: block; aspect-ratio: 4 / 3.4; }
.pxp-label {
position: absolute; left: 14px; right: 14px; bottom: 14px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 7px 7px 7px 18px;
background: #fff; border-radius: 999px;
box-shadow: 0 6px 18px rgba(20,28,34,.18);
transition: background .22s ease;
}
.pxp-label-txt {
min-width: 0; color: #1c2226;
font-size: 1rem; font-weight: 500; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pxp-label-ico {
flex: none; width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
background: var(--btn); color: var(--btn-ink);
transition: transform .22s ease;
}
.pxp-label-ico svg {
width: 16px; height: 16px; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* colour is unchanged on hover — only the nudge to the right reacts */
.pxp-card:hover .pxp-label-ico { transform: translateX(2px); }
/* ---------- 4. TRENDING COLOUR COMBINATIONS ----------------- */
.pxc { padding: 30px 0 78px; background: var(--canvas); }
.pxc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.pxc-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; color: var(--px-ink); }
.pxc-head p { margin-top: 10px; color: var(--px-body); font-size: .98rem; }
.pxc-nav { display: flex; gap: 10px; flex: none; }
.pxc-track { padding-bottom: 34px; }
.pxc-card {
position: relative;
width: calc((100% - 66px) / 4);
min-width: 220px;
}
.pxc-img {
/* 4:3 matches the source photos, so cover crops almost nothing.
A square box threw away the sides of every shot. */
display: block; aspect-ratio: 4 / 3;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(20,28,34, .12);
transition: transform .25s ease, box-shadow .25s ease;
}
.pxc-card:hover .pxc-img { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(20,28,34, .2); }
/* Stretched over the whole card, swatch strip included — the swatches hang
22px below the photo, so inset:0 would have covered only their top half
and left the card clickable in some places and not others. */
.pxc-hit { position: absolute; inset: 0 0 -22px; z-index: 2; }
.pxc-swatches {
position: absolute; left: 14px; bottom: -22px;
display: flex; align-items: center;
}
.pxc-swatch {
width: 46px; height: 46px; border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 4px 12px rgba(20,28,34, .18);
margin-right: -14px;
}
.pxc-swatch:last-of-type { margin-right: 0; }
/* combination name is decorative here (the swatches carry the meaning) —
kept in the DOM for screen readers only, matching the reference layout */
.pxc-name {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap;
}
/* ---------- responsive ------------------------------------- */
@media (max-width: 1100px) {
.pxw-grid { grid-template-columns: 1fr; gap: 40px; }
/* stacked under the copy the collage gets the full width, so the portrait
crop is eased off — a 0.59 ratio here would be absurdly tall */
/* stacked under the copy the photo gets the full width, so it flattens out */
/* stacked under the copy the collage gets the full width, so the portrait
crop is eased off — a 0.59 ratio here would be absurdly tall */
.pxw-shot-main { aspect-ratio: 4 / 3.6; }
.pxw-stack { margin-top: 0; }
.pxc-card { width: calc((100% - 44px) / 3); }
}
@media (max-width: 900px) {
.pxp-card { width: calc((100% - 22px) / 2); }
.pxc-card { width: calc((100% - 22px) / 2); }
.px-arrow-l { left: 4px; }
.px-arrow-r { right: 4px; }
}
@media (max-width: 768px) {
.pxw { padding: 50px 0; }
/* collage folds to one column; the stagger and the tall crop both go, since
a portrait photo at full phone width would run off the screen */
.pxw-collage { flex-direction: column; gap: 12px; }
.pxw-shot-main { aspect-ratio: 4 / 3; }
.pxw-stack { margin-top: 0; grid-template-columns: 1fr 1fr; }
.pxw-points { grid-template-columns: 1fr; gap: 22px; }
.pxh-slide { padding: 10px 0 54px; }
.pxc-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
.pxh { min-height: 96px; }
.pxh-nav { bottom: 12px; gap: 10px; }
.pxh-btn { padding: 15px 28px; }
.pxp, .pxc { padding-inline: 0; }
.pxp-card, .pxc-card { width: 82%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pxh-bg, .pxh-slide, .px-track { transition: none; scroll-behavior: auto; }
.pxh-bg.active { transform: none; }
}
/* =============================================================
PAINT SITE — inner pages & remaining homepage sections
Prefix: .px* (banner, stats, grid, testimonials, FAQ, lead form)
============================================================= */
/* ---------- reach numbers band ------------------------------ */
.pxn { padding: 54px 0; background: #eef8fc; }
.pxn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pxn-item b {
display: block; font-size: clamp(2.2rem, 4.4vw, 3.4rem);
font-weight: 800; letter-spacing: -.03em; color: #101820; line-height: 1.05;
}
.pxn-item p { margin-top: 12px; color: var(--px-body); font-size: .96rem; line-height: 1.65; max-width: 30ch; }
/* ---------- page banner ------------------------------------- */
.pxb { position: relative; overflow: hidden; }
/* Layer 1 — the shared banner photo. It sits above each page's inline
background, so if pb.png is ever missing the page's own gradient shows
through instead of a blank strip. */
.pxb::before {
content: ""; position: absolute; inset: 0;
background: url('../img/photos/pb.png') center center / cover no-repeat;
/* To show the photo in full with no cropping at all, swap `cover` for
`contain` — it will letterbox instead, leaving bands at the sides. */
}
/* Layer 2 — soft black wash. Heaviest on the left, where the breadcrumb,
title and copy sit, fading right so the tins in the photo stay visible. */
.pxb::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(100deg, rgba(10,14,18,.78) 0%, rgba(10,14,18,.62) 40%, rgba(10,14,18,.34) 100%),
linear-gradient(180deg, rgba(10,14,18,.28) 0%, rgba(10,14,18,0) 45%);
}
.pxb-inner {
position: relative; z-index: 1; /* above both layers above */
display: grid; grid-template-columns: 1fr 1fr; align-items: center;
gap: 30px; padding-block: 54px;
/* The banner photo is roughly 1.7:1. A short, very wide strip forces cover
to crop most of its height, so the height tracks the viewport width and
far more of the picture stays visible. Floor keeps it usable on tablets;
ceiling stops it eating the screen on very wide monitors. */
min-height: clamp(360px, 33vw, 560px);
}
/* the photo already shows real tins, so the CSS tin/blob artwork is dropped */
.pxb-art { display: none; }
.pxb-crumb { font-size: .84rem; color: rgba(255,255,255, .78); margin-bottom: 18px; }
.pxb-crumb a { color: rgba(255,255,255, .92); text-decoration: underline; text-underline-offset: 3px; }
.pxb-crumb a:hover { color: #fff; }
.pxb-copy h1 {
font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 400; line-height: 1.15;
color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.pxb-copy p { margin-top: 18px; max-width: 46ch; color: rgba(255,255,255,.94); font-size: 1rem; line-height: 1.7; }
/* Centred banner variant (franchise.php). The default wash is heaviest on the
left because the copy sits there; centred copy needs an even wash plus a
soft middle vignette so the text stays legible over the tins. */
.pxb-center::after {
background:
radial-gradient(72% 88% at 50% 50%, rgba(10,14,18,.72) 0%, rgba(10,14,18,.46) 55%, rgba(10,14,18,.30) 100%),
linear-gradient(180deg, rgba(10,14,18,.30) 0%, rgba(10,14,18,0) 42%);
}
.pxb-center .pxb-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.pxb-center .pxb-copy { max-width: 820px; }
.pxb-center .pxb-copy p { margin-inline: auto; max-width: 60ch; }
/* stacked "paint tin" art for product banners */
.pxb-art { position: relative; height: 260px; }
/* abstract paint-tin placeholders: lid on top, label band across the middle */
.pxb-tin {
position: absolute; bottom: 0; border-radius: 6px 6px 12px 12px;
box-shadow: 0 18px 40px rgba(20,28,34, .22);
}
.pxb-tin::before {
content: ""; position: absolute; left: -5%; right: -5%; top: -12px; height: 16px;
border-radius: 5px; background: linear-gradient(180deg, #fbfcfc, #c6cdd2);
box-shadow: 0 3px 8px rgba(20,28,34, .2);
}
.pxb-tin::after {
content: ""; position: absolute; left: 0; right: 0; top: 34%; height: 26%;
background: rgba(255,255,255, .82);
box-shadow: inset 0 1px 0 rgba(20,28,34,.08), inset 0 -1px 0 rgba(20,28,34,.08);
}
.pxb-tin-1 { width: 26%; height: 52%; left: 4%; }
.pxb-tin-2 { width: 28%; height: 68%; left: 27%; }
.pxb-tin-3 { width: 26%; height: 58%; left: 52%; }
.pxb-tin-4 { width: 28%; height: 76%; left: 72%; }
.pxb-art-svc { height: 220px; }
.pxb-blob {
position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
width: 220px; height: 220px; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
background: rgba(255,255,255,.34);
box-shadow: inset 0 0 60px rgba(255,255,255,.5), 0 20px 50px rgba(20,28,34,.12);
}
/* ---------- product range grid ------------------------------ */
.pxg { padding: 58px 0; background: #fff; }
.pxg-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 40px; }
.pxg-pill {
font: inherit; font-size: .94rem; font-weight: 500; cursor: pointer;
padding: 10px 24px; border-radius: 999px;
border: 1px solid #c9d0d4; background: #fff; color: var(--px-ink);
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pxg-pill:hover { border-color: var(--px-teal); color: var(--px-teal-dark); }
.pxg-pill.active { background: var(--px-teal); border-color: var(--px-teal); color: #fff; }
.pxg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }
.pxg-card {
position: relative; padding-top: 74px;
transition: transform .22s ease;
}
.pxg-card:hover { transform: translateY(-4px); }
.pxg-tin {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 118px; height: 148px; border-radius: 6px 6px 14px 14px;
box-shadow: 0 16px 32px rgba(20,28,34, .2); z-index: 1;
}
.pxg-tin::before {
content: ""; position: absolute; left: -6px; right: -6px; top: -11px; height: 15px;
border-radius: 5px; background: linear-gradient(180deg, #fbfcfc, #c6cdd2);
box-shadow: 0 3px 8px rgba(20,28,34, .18);
}
.pxg-tin::after {
content: ""; position: absolute; left: 0; right: 0; top: 36%; height: 27%;
background: rgba(255,255,255, .84);
box-shadow: inset 0 1px 0 rgba(20,28,34,.08), inset 0 -1px 0 rgba(20,28,34,.08);
}
/* Real uploaded product photo, in place of the CSS tin placeholder.
cover = the slot is always filled edge to edge; anything outside the
132x156 ratio is cropped, so upload roughly portrait shots. */
img.pxg-tin-photo {
width: 132px; height: 156px;
object-fit: cover; object-position: center bottom;
border-radius: 0; background: none;
box-shadow: none;
filter: drop-shadow(0 12px 20px rgba(20,28,34, .22));
}
img.pxg-tin-photo::before,
img.pxg-tin-photo::after { content: none; }
.pxg-body {
background: #e7f2fd; border-radius: 14px;
padding: 86px 22px 22px; text-align: center; height: 100%;
display: flex; flex-direction: column;
}
.pxg-series {
font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: #5f7a92;
}
.pxg-body h3 { margin-top: 8px; font-size: 1.06rem; font-weight: 700; color: var(--px-ink); }
.pxg-body p { margin-top: 12px; color: var(--px-body); font-size: .92rem; line-height: 1.65; }
.pxg-warranty { margin-top: 12px; font-size: .88rem; color: #46525a; }
.pxg-btn {
display: block; margin-top: 18px;
background: var(--btn); color: var(--btn-ink); font-weight: 700; font-size: .94rem;
padding: 12px 18px; border-radius: 9px;
transition: background .18s ease, transform .18s ease;
}
.pxg-btn:hover { background: var(--btn-dark); transform: translateY(-1px); }
.pxg-empty { text-align: center; color: var(--px-muted, #8a8291); padding: 30px 0; }
/* ---------- "other ranges / services" strip ----------------- */
.pxr { padding: 58px 0; background: var(--canvas); }
.pxr-tight { padding-bottom: 20px; }
.pxr h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 24px; }
.pxr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pxr-card {
border-radius: 14px; overflow: hidden; background: #fff;
box-shadow: 0 8px 24px rgba(20,28,34, .08);
transition: transform .22s ease, box-shadow .22s ease;
}
.pxr-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(20,28,34, .15); }
.pxr-img { display: block; aspect-ratio: 4 / 2.6; }
.pxr-label {
display: block; text-align: center; padding: 14px 12px;
background: var(--px-mint); color: #33403a; font-size: 1rem; font-weight: 500;
}
/* ---------- service content sections ------------------------ */
.pxs { padding: 62px 0; background: #fff; }
.pxs-intro { max-width: 760px; margin-bottom: 34px; }
.pxs-lead { margin-top: 14px; font-size: 1.12rem; line-height: 1.75; color: #4a555c; }
.pxs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pxs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pxs-card {
background: #fff; border: 1px solid var(--px-line); border-radius: 14px; padding: 26px 24px;
box-shadow: 0 8px 26px rgba(20,28,34, .06);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pxs-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,28,34, .12); border-color: #d8e2e2; }
.pxs-card h3 { margin-top: 14px; font-size: 1.06rem; font-weight: 700; color: var(--px-ink); }
.pxs-card p { margin-top: 10px; color: var(--px-body); font-size: .93rem; line-height: 1.7; }
/* image/colour band on the services overview cards */
.pxs-swatch { display: block; height: 150px; border-radius: 10px; background-size: cover; background-position: center; }
.pxs-more { display: inline-block; margin-top: 16px; color: var(--px-teal-dark); font-weight: 700; font-size: .92rem; }
.pxs-card-link:hover .pxs-more { text-decoration: underline; text-underline-offset: 3px; }
.ico-check { color: #2f9e6b; }
.ico-id { color: #4a9ad4; }
.ico-doc { color: #e0813a; }
.ico-bank { color: #34b6c4; }
/* ---------- about split ------------------------------------- */
.pxa { padding: 62px 0; background: #fff; }
.pxa-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 46px; align-items: center; }
.pxa-split h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-top: 12px; }
.pxa-split p { margin-top: 16px; color: var(--px-body); line-height: 1.8; }
.pxa-photo { min-height: 380px; border-radius: 18px; box-shadow: 0 20px 46px rgba(20,28,34, .14); }
/* ---------- testimonials ------------------------------------ */
.pxt { padding: 62px 0; background: #fff; }
.pxt-head { text-align: center; max-width: 620px; margin: 0 auto 34px; }
.pxt-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 400; color: #2b3237; }
.pxt-head p { margin-top: 10px; color: #8a8072; font-size: 1.02rem; }
.pxt-slider { position: relative; }
.pxt-slider > .px-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.pxt-slider > .px-arrow:hover { transform: translateY(-50%) scale(1.06); }
.pxt-slider > .px-arrow-l { left: -14px; }
.pxt-slider > .px-arrow-r { right: -14px; }
.pxt-track { padding: 10px 4px 14px; }
.pxt-card {
width: calc((100% - 44px) / 3); min-width: 250px;
background: #fff; border-radius: 16px; padding: 30px 26px 26px;
text-align: center; display: flex; flex-direction: column; align-items: center;
}
.pxt-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--px-ink); }
.pxt-role { margin-top: 4px; color: var(--px-body); font-size: .92rem; }
.pxt-quote { margin-top: 18px; color: #6b7379; font-size: .95rem; line-height: 1.75; }
.pxt-more {
margin-top: 14px; font: inherit; font-size: .92rem; font-weight: 500;
background: none; border: 0; cursor: pointer; color: var(--px-teal-dark);
}
.pxt-more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- FAQ --------------------------------------------- */
.pxf { padding: 62px 0 76px; background: var(--canvas); }
.pxf-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 46px; align-items: start; }
.pxf-intro h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-top: 12px; }
.pxf-intro p { margin-top: 16px; color: var(--px-body); line-height: 1.75; }
.pxf-list { display: grid; gap: 12px; }
.pxf-item {
background: #fff; border: 1px solid var(--px-line); border-radius: 12px;
padding: 0 20px; box-shadow: 0 4px 16px rgba(20,28,34, .05);
}
.pxf-item summary {
list-style: none; cursor: pointer; padding: 18px 0;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
font-weight: 700; color: var(--px-ink); font-size: 1rem;
}
.pxf-item summary::-webkit-details-marker { display: none; }
.pxf-sign { position: relative; width: 16px; height: 16px; flex: none; }
.pxf-sign::before, .pxf-sign::after {
content: ""; position: absolute; background: var(--px-teal-dark);
left: 50%; top: 50%; transform: translate(-50%, -50%);
transition: opacity .2s ease, transform .2s ease;
}
.pxf-sign::before { width: 14px; height: 2px; }
.pxf-sign::after { width: 2px; height: 14px; }
.pxf-item[open] .pxf-sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.pxf-item > p { padding: 0 0 20px; color: var(--px-body); font-size: .95rem; line-height: 1.8; max-width: 68ch; }
/* ---------- "Let's connect" lead form ----------------------- */
.pxl { position: relative; padding: 64px 0; isolation: isolate; overflow: hidden; }
/* url() is relative to this stylesheet, so ../img/... resolves to assets/img/...
The dark wash keeps the white form card separated from a bright photo. */
.pxl-bg {
position: absolute; inset: 0; z-index: -1;
background:
/* dark wash, so the white form card stays separated from a bright photo */
linear-gradient(120deg, rgba(18,26,32,.58), rgba(18,26,32,.30)),
/* the photo — url() is relative to this file, so ../img/ = assets/img/ */
url('../img/photos/bg.png') center/cover no-repeat,
/* fallback painted underneath if the photo is missing */
linear-gradient(135deg, #2f4f7a 0%, #4a6f96 40%, #8aa8c4 70%, #d7c9a8 100%);
}
/* centred CTA card (the lead form that used to sit here moved to contact.php) */
.pxl-card {
max-width: 820px; margin-inline: auto; text-align: center;
background: rgba(255,255,255,.96); border-radius: 10px;
padding: 52px 46px;
}
.pxl-dots {
display: grid; grid-template-columns: repeat(2, 14px); gap: 6px;
justify-content: center; margin: 0 auto 22px;
}
.pxl-dots i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.pxl-card h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 400; color: #3c4348; }
.pxl-card > p {
margin: 18px auto 0; max-width: 56ch;
color: #7d8a91; font-size: 1.08rem; line-height: 1.7;
}
.pxl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.pxl-cta {
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1rem; white-space: nowrap;
padding: 15px 32px; border-radius: 8px;
background: var(--btn); color: var(--btn-ink); border: 1.5px solid var(--btn);
transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pxl-cta:hover {
background: var(--btn-dark); border-color: var(--btn-dark);
transform: translateY(-2px); box-shadow: 0 12px 26px rgba(217,168,0,.38);
}
.pxl-cta.ghost { background: #fff; color: var(--px-teal-dark); }
.pxl-cta.ghost:hover { background: var(--px-mint); border-color: var(--px-teal); color: var(--px-teal-dark); }
/* ---------- responsive -------------------------------------- */
@media (max-width: 1100px) {
.pxb-inner { grid-template-columns: 1.1fr .9fr; }
.pxg-grid { grid-template-columns: repeat(2, 1fr); }
.pxr-grid { grid-template-columns: repeat(2, 1fr); }
.pxa-split { grid-template-columns: 1fr; }
.pxa-photo { min-height: 280px; }
.pxf-grid { grid-template-columns: 1fr; gap: 30px; }
.pxs-grid-3 { grid-template-columns: repeat(2, 1fr); }
.pxt-slider > .px-arrow-l { left: 2px; }
.pxt-slider > .px-arrow-r { right: 2px; }
}
@media (max-width: 900px) {
.pxn-grid { grid-template-columns: 1fr; gap: 26px; }
.pxn-item p { max-width: none; }
/* single column on tablets/phones; keep some height so the photo still
reads behind the title rather than collapsing to a thin band */
.pxb-inner { grid-template-columns: 1fr; min-height: 300px; }
.pxb-art { display: none; }
.pxl-card { padding: 38px 26px; }
.pxt-card { width: calc((100% - 22px) / 2); }
}
@media (max-width: 640px) {
.pxg-grid, .pxs-grid, .pxs-grid-3, .pxr-grid { grid-template-columns: 1fr; }
.pxg { padding: 40px 0; }
.pxt-card { width: 84%; min-width: 0; }
.pxb-copy h1 { font-size: 1.75rem; }
.pxl { padding: 40px 0; }
}
/* ---------- header CTA --------------------------------------
Matches .pxw-btn (teal, 6px radius) rather than the old pill .btn-primary.
Padding is a little tighter so the header keeps its height. */
.nav-quote {
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit; font-weight: 600; font-size: .96rem; white-space: nowrap;
background: var(--btn); color: var(--btn-ink);
padding: 13px 28px; border-radius: 6px; border: 0;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-quote:hover {
background: var(--btn-dark); transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(217,168,0,.38);
}
.nav-quote:active { transform: translateY(0); }
/* plain underlined text link beside the CTA (Partner Login / Dashboard) */
.nav-plain {
font-weight: 600; font-size: .94rem; color: var(--px-ink); white-space: nowrap;
text-decoration: underline; text-underline-offset: 4px;
text-decoration-thickness: 1px; text-decoration-color: #bcc5ca;
padding: 6px 2px; transition: color .18s ease, text-decoration-color .18s ease;
}
.nav-plain:hover { color: var(--px-teal-dark); text-decoration-color: currentColor; }
/* dropdown rows that carry a leading icon */
.drop-item { display: flex; align-items: center; gap: 11px; }
.drop-item svg {
width: 18px; height: 18px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
/* ---------- header fit on small screens ---------------------
The paint nav uses a longer brand tagline and a wider CTA than the layout
this header was built for, so both are trimmed down before they collide. */
.nav-only-mobile { display: none; }
@media (max-width: 768px) {
.site-header .brand { font-size: 1rem; gap: 9px; }
.site-header .brand small { display: none; }
.site-header .nav-quote { padding: 10px 15px; font-size: .82rem; }
/* the header is too tight for the text link here — it moves into the menu */
.site-header .nav-plain { display: none; }
.nav-only-mobile { display: block; }
}
@media (max-width: 460px) {
.site-header .nav-quote { display: none; }
}
/* =============================================================
HOMEPAGE CONTACT SECTION (.pxq)
Sits after the FAQ. Deliberately not the same layout as the
service-page lead form (.pxl): dark editorial panel + 2-col fields.
============================================================= */
.pxq { padding: 0 0 76px; background: var(--canvas); }
.pxq-card {
display: grid; grid-template-columns: .92fr 1.08fr;
border-radius: 20px; overflow: hidden;
box-shadow: 0 26px 60px rgba(20,28,34, .16);
background: #fff;
}
/* left panel ------------------------------------------------- */
.pxq-panel {
position: relative; isolation: isolate; overflow: hidden;
padding: 46px 42px;
background: linear-gradient(155deg, #24333a 0%, #1a262c 55%, #121b1f 100%);
color: #dbe4e6;
display: flex; flex-direction: column; justify-content: center;
}
.pxq-panel::after {
content: ""; position: absolute; z-index: -1; right: -70px; bottom: -70px;
width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(111,154,153,.5), rgba(111,154,153,0) 70%);
}
.pxq-swatches { display: flex; gap: 7px; margin-bottom: 24px; }
.pxq-swatches i { width: 26px; height: 26px; border-radius: 6px; display: block; }
.pxq-panel h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; color: #fff; line-height: 1.2; }
.pxq-panel > p { margin-top: 16px; font-size: .97rem; line-height: 1.75; color: #a9bcc0; }
.pxq-points { margin-top: 24px; display: grid; gap: 11px; }
.pxq-points li {
position: relative; padding-left: 26px;
font-size: .93rem; color: #c6d4d6;
}
.pxq-points li::before {
content: ""; position: absolute; left: 0; top: .45em;
width: 13px; height: 7px; border-left: 2px solid var(--px-teal);
border-bottom: 2px solid var(--px-teal); transform: rotate(-45deg);
}
/* right form ------------------------------------------------- */
.pxq-form { padding: 46px 42px; display: grid; gap: 18px; align-content: start; }
.pxq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pxq-field label {
display: block; margin-bottom: 7px;
font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: #46525a;
}
.pxq-opt { font-weight: 500; color: #93a0a7; letter-spacing: 0; }
.pxq-field input, .pxq-field select, .pxq-field textarea {
width: 100%; font: inherit; font-size: .95rem; color: var(--px-ink);
padding: 12px 14px; border: 1px solid #d5dcdf; border-radius: 8px;
background: #fbfcfc; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.pxq-field textarea { resize: vertical; min-height: 84px; }
.pxq-field select { appearance: none; color: #6d7981;
background-image: linear-gradient(45deg, transparent 50%, #6d7981 50%), linear-gradient(135deg, #6d7981 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.pxq-field input:focus, .pxq-field select:focus, .pxq-field textarea:focus {
outline: none; background: #fff;
border-color: var(--px-teal); box-shadow: 0 0 0 3px rgba(111,154,153,.18);
}
.pxq-check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: #5f6a71; line-height: 1.55; }
.pxq-check input { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--px-teal); }
.pxq-check a { text-decoration: underline; text-underline-offset: 2px; color: #46525a; }
.pxq-submit {
font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
padding: 15px 22px; border: 0; border-radius: 8px;
background: var(--btn); color: var(--btn-ink);
transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pxq-submit:hover {
background: var(--btn-dark); transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(217,168,0,.4);
}
.pxq-done {
background: #e6f6ec; border: 1px solid #bfe5cc; border-radius: 10px;
padding: 16px 18px; color: #1f5c39; font-size: .95rem; line-height: 1.6;
}
@media (max-width: 900px) {
.pxq-card { grid-template-columns: 1fr; }
.pxq-panel { padding: 34px 26px; }
.pxq-form { padding: 30px 26px; }
}
@media (max-width: 560px) {
.pxq { padding-bottom: 48px; }
.pxq-row { grid-template-columns: 1fr; }
}
/* =============================================================
DEALERSHIP MODELS (partnership.php)
============================================================= */
.pxm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.pxm-card {
position: relative; background: #fff; border: 1px solid var(--px-line);
border-radius: 16px; padding: 30px 28px 28px;
display: flex; flex-direction: column;
transition: transform .22s ease, border-color .22s ease;
scroll-margin-top: 110px; /* clears the sticky header on #mini / #standard */
}
.pxm-card:hover { transform: translateY(-4px); border-color: #d8e2e2; }
.pxm-card.featured { border-color: var(--px-teal); }
.pxm-flag {
position: absolute; top: -13px; right: 24px;
background: var(--px-teal); color: #fff;
font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
}
.pxm-swatch { display: block; height: 8px; border-radius: 999px; margin-bottom: 22px; }
.pxm-tag {
display: inline-block; font-size: .72rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--px-teal-dark);
}
.pxm-card h2 { margin-top: 8px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.pxm-overview { margin-top: 14px; color: var(--px-body); font-size: .96rem; line-height: 1.75; }
.pxm-meta {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-top: 22px; padding: 18px 0; border-block: 1px solid var(--px-line);
}
.pxm-meta span { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--px-muted, #8a8291); }
.pxm-meta b { display: block; margin-top: 5px; font-size: 1.2rem; color: var(--px-ink); }
.pxm-sub { margin-top: 22px; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #46525a; }
.pxm-list { margin-top: 14px; display: grid; gap: 10px; }
.pxm-list li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--px-body); line-height: 1.6; }
.pxm-list li::before {
content: ""; position: absolute; left: 2px; top: .42em;
width: 12px; height: 6px; border-left: 2px solid var(--px-teal);
border-bottom: 2px solid var(--px-teal); transform: rotate(-45deg);
}
.pxm-btn {
margin-top: auto; padding-top: 26px;
display: block;
}
.pxm-btn { margin-top: 26px; text-align: center; padding: 14px 22px; border-radius: 8px;
font-weight: 700; font-size: .96rem;
border: 1.5px solid var(--px-teal); color: var(--px-teal-dark); background: #fff;
transition: background .18s ease, color .18s ease, transform .18s ease; }
.pxm-btn:hover { background: var(--px-mint); transform: translateY(-2px); }
.pxm-btn.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.pxm-btn.primary:hover { background: var(--btn-dark); border-color: var(--btn-dark); }
/* indicative capital cards */
.pxi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pxi-card { background: #fff; border: 1px solid var(--px-line); border-radius: 14px; padding: 24px 22px; }
.pxi-card b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--px-teal-dark); letter-spacing: -.02em; }
.pxi-card h3 { margin-top: 8px; font-size: 1rem; font-weight: 700; color: var(--px-ink); }
.pxi-card p { margin-top: 8px; font-size: .9rem; line-height: 1.65; color: var(--px-body); }
@media (max-width: 1000px) {
.pxi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.pxm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.pxi-grid { grid-template-columns: 1fr; }
.pxm-meta { grid-template-columns: 1fr; }
}
/* =============================================================
FRANCHISE PAGE (franchise.php)
Tier cards, comparison table, process, documents, closing CTA.
============================================================= */
.pxk-intro { max-width: 820px; margin-inline: auto; margin-bottom: 44px; text-align: center; }
.pxk-intro h2 { margin-top: 12px; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.02em; }
.pxk-intro .pxs-lead { margin-inline: auto; max-width: 68ch; }
.pxk-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.pxk-badges li {
padding: 7px 15px; border-radius: 999px;
background: var(--px-mint); color: var(--px-teal-dark);
font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
/* ---- tier cards ----
flex rather than grid so the last row (2 of 5) centres under the first
three instead of hugging the left edge */
.pxk-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.pxk-card {
position: relative; display: flex; flex-direction: column;
flex: 0 1 calc((100% - 52px) / 3); min-width: 290px; max-width: 470px;
background: #fff; border: 1px solid var(--px-line); border-radius: 16px;
padding: 32px 26px 28px;
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
scroll-margin-top: 100px;
}
.pxk-card:hover { transform: translateY(-4px); border-color: #d8e2e2; box-shadow: 0 20px 44px rgba(20,28,34,.11); }
.pxk-card.featured { border-color: var(--px-teal); box-shadow: 0 18px 40px rgba(111,154,153,.20); }
/* arriving from a franchise.php#slug link (footer "Partnership Types"):
ring the card that was asked for, otherwise the page just looks like it
scrolled to a random spot */
.pxk-card:target {
border-color: var(--px-teal);
box-shadow: 0 0 0 3px rgba(111,154,153,.35), 0 22px 46px rgba(111,154,153,.26);
animation: pxk-flash 1.6s ease-out 1;
}
.pxk-card:target .pxk-tier { background: var(--px-teal); color: #fff; }
@keyframes pxk-flash {
0% { box-shadow: 0 0 0 0 rgba(111,154,153,.55), 0 22px 46px rgba(111,154,153,.26); }
55% { box-shadow: 0 0 0 12px rgba(111,154,153,0), 0 22px 46px rgba(111,154,153,.26); }
100% { box-shadow: 0 0 0 3px rgba(111,154,153,.35), 0 22px 46px rgba(111,154,153,.26); }
}
@media (prefers-reduced-motion: reduce) { .pxk-card:target { animation: none; } }
.pxk-flag {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
white-space: nowrap;
background: var(--px-teal); color: #fff;
font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
padding: 6px 16px; border-radius: 999px;
}
.pxk-swatch { display: block; height: 8px; border-radius: 999px; margin-bottom: 22px; }
/* head block is centred; everything below it stays left-aligned to stay readable */
.pxk-head { text-align: center; }
.pxk-tier {
display: inline-block; padding: 5px 13px; border-radius: 999px;
background: var(--canvas); font-size: .7rem; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase; color: var(--px-teal-dark);
}
.pxk-head h3 { margin-top: 12px; font-size: 1.5rem; font-weight: 800; color: var(--px-ink); letter-spacing: -.015em; }
.pxk-amount {
margin-top: 16px; padding: 15px 12px; border-radius: 12px;
background: var(--px-mint);
font-size: 1.4rem; font-weight: 800; color: var(--px-teal-dark); letter-spacing: -.01em;
}
.pxk-amount small {
display: block; margin-top: 4px;
font-size: .72rem; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: #6c8180;
}
.pxk-overview { margin-top: 18px; font-size: .94rem; line-height: 1.75; color: var(--px-body); }
.pxk-sub {
margin-top: 24px; font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: #46525a;
}
.pxk-list { margin-top: 12px; display: grid; gap: 9px; }
.pxk-list li { position: relative; padding-left: 25px; font-size: .91rem; line-height: 1.6; color: var(--px-body); }
.pxk-list li::before {
content: ""; position: absolute; left: 2px; top: .42em;
width: 11px; height: 6px; border-left: 2px solid var(--px-teal);
border-bottom: 2px solid var(--px-teal); transform: rotate(-45deg);
}
.pxk-rows { margin-top: 12px; display: grid; gap: 1px; background: var(--px-line); border: 1px solid var(--px-line); border-radius: 10px; overflow: hidden; }
.pxk-rows > div { display: flex; justify-content: space-between; gap: 14px; background: #fff; padding: 10px 13px; }
.pxk-rows dt { font-size: .87rem; color: var(--px-body); }
.pxk-rows dd { font-size: .87rem; font-weight: 700; color: var(--px-ink); white-space: nowrap; }
.pxk-profit { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pxk-profit > div { background: var(--canvas); border-radius: 10px; padding: 12px 10px; text-align: center; }
.pxk-profit span { display: block; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pxk-profit b { display: block; margin-top: 5px; font-size: .95rem; color: var(--px-teal-dark); }
.pxk-space {
margin-top: 18px; padding: 13px 15px; border-radius: 0 10px 10px 0;
background: var(--canvas); border-left: 3px solid var(--px-teal);
font-size: .87rem; line-height: 1.6; color: #4a555c;
}
.pxk-space b { display: block; margin-bottom: 3px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--px-teal-dark); }
.pxk-btn {
margin-top: 26px; text-align: center; padding: 14px 20px; border-radius: 8px;
font-weight: 700; font-size: .93rem;
border: 1.5px solid var(--px-teal); color: var(--px-teal-dark); background: #fff;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.pxk-card .pxk-btn { margin-top: auto; }
.pxk-card .pxk-sub + .pxk-list,
.pxk-card .pxk-space { margin-bottom: 0; }
.pxk-btn:hover { background: var(--px-mint); transform: translateY(-2px); }
.pxk-btn.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.pxk-btn.primary:hover { background: var(--btn-dark); border-color: var(--btn-dark); }
/* ---- comparison table ---- */
.pxk-tablewrap { overflow-x: auto; border: 1px solid var(--px-line); border-radius: 14px; background: #fff; }
.pxk-tablewrap:focus-visible { outline: 2px solid var(--px-teal); outline-offset: 2px; }
.pxk-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.pxk-table th, .pxk-table td {
padding: 15px 18px; text-align: left; font-size: .9rem;
border-bottom: 1px solid var(--px-line);
}
.pxk-table thead th {
background: var(--canvas); font-size: .82rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--px-ink);
white-space: nowrap;
}
.pxk-table tbody th {
font-weight: 700; color: var(--px-ink); background: #fcfdfd; white-space: nowrap;
}
.pxk-table td { color: var(--px-body); text-align: center; }
.pxk-table thead th + th { text-align: center; }
.pxk-table tbody tr:nth-child(even) td { background: #fbfcfc; }
.pxk-table tbody tr:last-child th, .pxk-table tbody tr:last-child td { border-bottom: 0; }
.pxk-table .hot { background: var(--px-mint); color: var(--px-teal-dark); font-weight: 700; }
.pxk-table thead .hot { background: var(--px-teal); color: #fff; }
/* ---- process ---- */
.pxk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pxk-steps li {
position: relative; padding: 30px 26px 28px; text-align: center;
background: #fff; border: 1px solid var(--px-line); border-radius: 14px;
transition: transform .2s ease, box-shadow .2s ease;
}
.pxk-steps li:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,28,34,.09); }
.pxk-num {
display: grid; place-items: center; margin: 0 auto;
width: 48px; height: 48px; border-radius: 50%;
background: var(--px-mint); border: 1.5px solid var(--px-teal);
color: var(--px-teal-dark); font-weight: 800; font-size: 1rem;
}
.pxk-steps h3 { margin-top: 16px; font-size: 1.05rem; font-weight: 700; color: var(--px-ink); }
.pxk-steps p { margin-top: 9px; font-size: .92rem; line-height: 1.7; color: var(--px-body); }
/* ---- documents ---- */
.pxk-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pxk-doc {
background: #fff; border: 1px solid var(--px-line); border-radius: 14px;
padding: 30px 26px; text-align: center;
}
.pxk-doc .pxw-ico { margin: 0 auto; }
.pxk-doc h3 { margin-top: 14px; font-size: 1.08rem; font-weight: 700; color: var(--px-ink); }
/* inline-grid keeps the ticks left-aligned while the list itself sits centred */
.pxk-doc .pxk-list { margin-top: 16px; display: inline-grid; text-align: left; }
.pxk-help {
margin-top: 28px; padding: 30px 32px; border-radius: 14px;
background: var(--px-mint);
display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
text-align: center;
}
.pxk-help h3 { font-size: 1.15rem; font-weight: 700; color: var(--px-ink); }
.pxk-help p { margin: 7px auto 0; font-size: .93rem; line-height: 1.7; color: #40514f; max-width: 62ch; }
.pxk-help .pxw-btn { flex: none; }
/* the closing CTA uses the shared "Let's connect" band (.pxl) */
@media (max-width: 1180px) {
.pxk-card { flex-basis: calc((100% - 26px) / 2); }
.pxk-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.pxk-docs { grid-template-columns: 1fr; }
.pxk-doc { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 680px) {
.pxk-card { flex-basis: 100%; max-width: 520px; }
.pxk-steps { grid-template-columns: 1fr; }
.pxk-steps li { max-width: 520px; margin-inline: auto; width: 100%; }
.pxk-profit { grid-template-columns: 1fr; }
.pxk-profit > div { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
.pxk-profit b { margin-top: 0; }
}
/* =============================================================
RESPONSIVE SWEEP
One ordered pass over the target widths, appended last so it settles any
disagreement with the per-section media queries above. Each block only
states what actually changes at that width.
1366 · 1024 · 768 · 430 · 390 · 360
============================================================= */
/* ---- 1366px : large laptop -------------------------------------------- */
@media (max-width: 1366px) {
.container, .container-wide { padding-inline: 28px; }
.pxw-grid { gap: 40px; }
.pxn-grid { gap: 28px; }
}
/* ---- 1024px : tablet landscape ---------------------------------------- */
@media (max-width: 1024px) {
.container, .container-wide { padding-inline: 24px; }
.section { padding: 22px 0; }
.pxw { padding: 54px 0; }
.pxp, .pxt, .pxa, .pxs { padding: 52px 0; }
.pxf { padding: 52px 0 60px; }
/* copy column no longer needs pulling up once it sits under the collage */
.pxw-copy { margin-top: 0; }
.pxw-points { gap: 22px 26px; }
/* three-up card rows become two-up */
.pxp-card, .pxt-card { width: calc((100% - 22px) / 2); }
.pxc-card { width: calc((100% - 44px) / 3); }
.pxr-grid, .pxs-grid-3 { grid-template-columns: repeat(2, 1fr); }
.pxi-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---- 768px : tablet portrait ------------------------------------------ */
@media (max-width: 768px) {
.container, .container-wide { padding-inline: 20px; }
/* every two-column band folds */
.pxw-grid, .pxa-split, .pxf-grid, .pxq-card, .footer-grid { grid-template-columns: 1fr; }
.pxw-grid { gap: 30px; }
/* ---- footer: centred, and short enough to scroll past -----------------
Stacked and left-aligned it ran past 1000px on a phone, with every link
on its own full-width row. Centring gives the column an axis to sit on,
the link lists go two-up, and a hairline between blocks keeps them from
running together now that nothing is separated by columns. */
.site-footer { padding: 44px 0 20px; text-align: center; }
.footer-grid { gap: 0; }
.footer-grid > * + * {
margin-top: 26px; padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.09);
}
.site-footer .brand { justify-content: center; }
.footer-about { margin-inline: auto; max-width: 44ch; }
.footer-social { justify-content: center; }
.footer-col h4 { margin-bottom: 12px; }
/* Two links per row. The links are bare children with no wrapper, so the
column itself becomes the grid and the heading spans it — that avoids
touching the markup. The last column is "Get in touch", whose rows carry
phone numbers and an icon, so it stays one per row. */
.footer-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; justify-items: center; }
.footer-col h4 { grid-column: 1 / -1; }
.footer-col a { padding: 7px 0; }
/* With an odd number of links the last one is stranded in the left column and
the block stops looking centred. The heading is child 1, so an odd link
count puts the final link on an even child index — that is the one to span.
Both lists have five links today; this keeps working if one is edited. */
.footer-col a:last-child:nth-child(even) { grid-column: 1 / -1; }
.footer-col:last-child { grid-template-columns: 1fr; }
/* contact rows keep the icon next to the text, but the pair is centred */
.footer-col .foot-ic { justify-content: center; }
.footer-col .foot-ic i { width: auto; }
.footer-bottom {
margin-top: 26px; padding-top: 18px;
flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
/* collage: side by side is too tight, so it stacks and the stagger goes */
.pxw-collage { flex-direction: column; gap: 12px; }
.pxw-col, .pxw-stack { flex: 1 1 auto; width: 100%; margin-top: 0; }
.pxw-shot-main { aspect-ratio: 16 / 10; }
.pxw-stack { grid-template-columns: 1fr 1fr; }
.pxw-stack .pxw-shot { aspect-ratio: 4 / 3; }
/* pill returns to the flow — overlapping a full-width photo looked wrong */
.pxw-caption { margin-top: 12px; max-width: none; }
.pxw-caption::before { top: -12px; border-width: 0 12px 12px; }
.pxw-points { grid-template-columns: 1fr 1fr; }
.pxc-card { width: calc((100% - 22px) / 2); }
.pxn-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pxk-steps, .pxk-docs { grid-template-columns: 1fr; }
.pxm-grid { grid-template-columns: 1fr; }
}
/* ---- 560px : small phone landscape -----------------------------------
Not one of the seven target widths, but the 768px block above is later in
the file than the original 560px rules, so without this the two-up card
layout would leak down to 431px and crush the cards. Must stay ABOVE the
430px block so the phone widths still win. */
@media (max-width: 560px) {
.pxp-card, .pxc-card, .pxt-card { width: 82%; min-width: 0; }
.pxw-points, .pxw-stack { grid-template-columns: 1fr; }
/* Reach numbers: three white cards with the figure beside its sentence
rather than three blocks of text floating on the pale band. Stacking the
figure above the copy left the section very tall and read as a plain list;
side by side it scans in one pass and the band gets a third shorter.
Each card sizes its own figure column, so a long value like "2 Lakh+"
cannot be clipped the way one shared fixed width would clip it. */
.pxn { padding: 40px 0; }
/* The figure column is sized on the parent so every card shares it — with
each card sizing its own, "2 Lakh+" pushed its sentence far right of the
other two and the left edge of the copy came out ragged. subgrid is what
lets the cards keep their own box while borrowing that column; browsers
without it fall back to the auto sizing declared just above, which is
merely uneven rather than broken. */
.pxn-grid { grid-template-columns: auto 1fr; gap: 12px; }
.pxn-item {
grid-column: 1 / -1;
display: grid; align-items: center;
grid-template-columns: auto 1fr;
grid-template-columns: subgrid;
gap: 16px; padding: 17px 18px;
background: #fff; border-radius: 14px;
box-shadow: 0 5px 16px rgba(20,28,34,.07);
}
.pxn-item b {
font-size: 1.85rem; line-height: 1;
color: var(--px-teal-dark); white-space: nowrap;
}
.pxn-item p { margin-top: 0; max-width: none; font-size: .87rem; line-height: 1.5; }
}
/* ---- 430px : large phone ---------------------------------------------- */
@media (max-width: 430px) {
.container, .container-wide { padding-inline: 16px; }
.section { padding: 18px 0; }
.pxw { padding: 40px 0; }
.pxp, .pxt, .pxa, .pxs, .pxf { padding: 40px 0; }
/* one card at a time, nearly full width so the next one peeks in */
.pxp-card, .pxc-card, .pxt-card { width: 86%; min-width: 0; }
/* .pxn-grid is deliberately absent: the 560px block gives it the two columns
the stat cards borrow through subgrid, and forcing 1fr here collapsed the
figure and its sentence back into a stack. */
.pxw-points, .pxs-grid, .pxg-grid, .pxr-grid, .pxs-grid-3, .pxi-grid { grid-template-columns: 1fr; }
.pxw-stack { grid-template-columns: 1fr; }
.pxw-shot-main { aspect-ratio: 4 / 3; }
.field-row, .field-row-3, .pxq-row { grid-template-columns: 1fr; }
.form-card, .auth-card { padding: 24px 18px; }
.side-card { padding: 22px 18px; }
.form-actions .btn { flex: 1 1 100%; }
/* long words and addresses must not push the page sideways */
.pxw-caption p, .footer-col a, .info-tile a, .auth-alt { overflow-wrap: anywhere; }
}
/* ---- 390px ------------------------------------------------------------- */
@media (max-width: 390px) {
.pxw-copy h2 { font-size: 1.6rem; }
.pxb-copy h1, .page-hero h1 { font-size: 1.55rem; }
.pxp-card, .pxc-card, .pxt-card { width: 90%; }
.pxw-point h3 { font-size: .93rem; }
.pxk-amount { font-size: 1.15rem; }
.btn, .pxw-btn, .pxl-cta, .nav-quote { font-size: .9rem; }
}
/* ---- 360px : smallest common phone ------------------------------------- */
@media (max-width: 360px) {
.container, .container-wide { padding-inline: 12px; }
.pxw-copy h2 { font-size: 1.45rem; }
.pxp-card, .pxc-card, .pxt-card { width: 94%; }
.pxw-caption { padding: 10px 12px 10px 10px; gap: 9px; }
.pxw-caption-ico { width: 38px; height: 38px; }
.pxw-caption-ico svg { width: 17px; height: 17px; }
.form-card, .auth-card { padding: 20px 14px; }
.btn-lg { padding: 12px 16px; font-size: .9rem; }
}
/* ===========================================================
Partner portal — module nav + Coming Soon screen
Additive only: new classes, nothing above is redefined.
=========================================================== */
/* Group headings in the sidebar. The nav is long now that the dealer modules
are on it, so the sections give the eye somewhere to land. */
.dash-nav .nav-head {
padding: 16px 14px 6px;
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--emerald-300);
opacity: .75;
}
/* "Soon" tag on a placeholder module, pushed to the far edge of the row. */
.dash-nav a .nav-soon {
margin-left: auto;
font-style: normal;
font-size: .62rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 999px;
background: rgba(255,255,255,.10);
color: var(--emerald-300);
}
.dash-nav a:hover .nav-soon,
.dash-nav a.active .nav-soon { background: var(--amber-100); color: var(--amber-600); }
/* --- the Coming Soon panel itself --- */
.soon-panel { overflow: hidden; }
.soon-hero {
padding: 40px 30px 34px;
text-align: center;
background: linear-gradient(165deg, var(--emerald-50) 0%, var(--canvas-2) 100%);
border-bottom: 1px solid var(--line);
}
/* flex, not inline-flex: the badge below has to start a new line rather than
sit alongside the tile */
.soon-ico {
display: flex; align-items: center; justify-content: center;
width: 68px; height: 68px; margin: 0 auto 14px;
font-size: 1.9rem; line-height: 1;
background: #fff; border-radius: 20px; box-shadow: var(--shadow-sm);
}
.soon-badge { display: inline-block; margin-bottom: 12px; }
.soon-hero h2 { font-size: 1.45rem; margin-bottom: 8px; }
.soon-hero p { max-width: 560px; margin: 0 auto; color: var(--body); line-height: 1.65; }
.soon-body { padding: 26px 30px 30px; }
.soon-body h3 { font-size: 1rem; margin-bottom: 6px; }
.soon-list { max-width: 620px; }
.soon-note {
margin-top: 20px; padding: 14px 16px;
background: var(--canvas); border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--body); font-size: .92rem; line-height: 1.6;
}
.soon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 900px) {
/* the sidebar collapses to a wrapped strip here, where headings would only
break the rows up — same treatment .sep already gets */
.dash-nav .nav-head { display: none; }
.dash-nav a .nav-soon { display: none; }
}
@media (max-width: 768px) {
.soon-hero { padding: 30px 18px 26px; }
.soon-body { padding: 22px 18px 26px; }
.soon-actions .btn { width: 100%; }
}