/* =============================================================
Verified Cleaners — Design System
Shared by every page (index, thank-you, 404).
Contents
1. Fonts (self-hosted)
2. Tokens — light
3. Tokens — dark
4. Reset & base
5. Typography
6. Layout
7. Components
8. Accessibility
9. Utilities
10. Site header & navigation
11. Simple pages (thank-you, 404)
12. Hero
13. Trust bar
14. Services
15. Booking: calculator, price summary, form
============================================================= */
/* =============================================================
1. FONTS — self-hosted variable fonts (SIL Open Font License)
One file per family covers every weight we use.
============================================================= */
@font-face {
font-family: "DM Sans";
src: url("../fonts/dm-sans-latin-var.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-latin-var.woff2") format("woff2");
font-weight: 400 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =============================================================
2. TOKENS — LIGHT (default)
All text colours meet WCAG 2.2 AA (4.5:1) on bg, surface and
surface2. "-text" variants exist where the brand colour is too
light for small text; use the brand colour for fills and icons.
============================================================= */
:root {
color-scheme: light;
/* Brand */
--accent: #0A6EAE; /* navy blue — CTAs, links, trust marks */
--accent-hover: #085A8F;
--on-accent: #FFFFFF; /* text on accent fills */
--accent2: #0A9B7A; /* teal green — fills/icons: confirmation, guarantee */
--accent2-text: #08785F; /* teal for small text */
--warning: #D97706; /* amber — fills/icons */
--warning-text: #A84E08; /* amber for small text (e.g. HST notes) */
/* Neutrals */
--bg: #FFFFFF; /* page background: pure white (bright & sharp) */
--surface: #FFFFFF; /* cards and sections */
--surface2: #F2F6FB; /* subtle alternate sections */
--fg1: #0F172A; /* headings: crisp ink */
--fg2: #334155; /* body text */
--fg3: #5B6779; /* captions, metadata (was #9CA3AF: failed AA) */
--border: #E2E8F0;
--header-bg: rgba(255, 255, 255, 0.82); /* translucent sticky header */
/* Typography */
--font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
/* Fluid type scale (rem, so it respects the visitor's browser font size).
Values grow smoothly from ~360px phones to ~1280px desktops. */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); /* 16 → 17px */
--text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 → 19px */
--text-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.375rem); /* 20 → 22px */
--text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); /* 24 → 32px */
--text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); /* 30 → 40px */
--text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* 36 → 56px (hero) */
/* Spacing scale (4px base) */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
/* Layout */
--max-width: 1100px;
--section-py: clamp(3.5rem, 2rem + 6vw, 5rem); /* 56px phones → 80px desktop */
--header-h: 76px; /* 10px top + 60px glass bar + 6px */
--gutter-l: max(16px, env(safe-area-inset-left, 0px));
--gutter-r: max(16px, env(safe-area-inset-right, 0px));
/* Shape & depth */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 22px; /* cards & bento tiles (2026: softer, rounder) */
--radius-full: 999px; /* pill buttons and badges */
/* Soft background glows for hero / feature bands */
--glow-1: rgba(10, 110, 174, 0.12);
--glow-2: rgba(10, 155, 122, 0.10);
/* Hero image placeholder (until a real photo is added) */
--hero-media-bg: #E8F2FB;
/* Solid primary buttons (white text ≥ 4.75:1 on every stop) */
--btn-a: #1278BA;
--btn-b: #0A62A0;
--btn-a-hover: #0A6EAE;
--btn-b-hover: #085A8F;
--btn-edge: rgba(5, 60, 100, 0.55);
--btn-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
/* Glass panels (booking) */
--glass-card: rgba(255, 255, 255, 0.90);
--glass-card-solid: rgba(255, 255, 255, 0.97);
--glass-card-border: rgba(16, 24, 40, 0.07);
--glass-card-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px -14px rgba(15, 23, 42, 0.20);
--option-bg: rgba(255, 255, 255, 0.96);
--dot: rgba(10, 110, 174, 0.10);
/* Glass header */
--glass-bg: rgba(255, 255, 255, 0.80);
--glass-bg-strong: rgba(255, 255, 255, 0.94);
--glass-border: rgba(16, 24, 40, 0.08);
--glass-hi: rgba(255, 255, 255, 0.6);
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px -10px rgba(16, 24, 40, 0.18), 0 1px 3px rgba(16, 24, 40, 0.06);
--glass-shadow-strong: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 36px -14px rgba(16, 24, 40, 0.30), 0 2px 6px rgba(16, 24, 40, 0.08);
--nav-track: rgba(16, 24, 40, 0.045);
--nav-pill: #FFFFFF;
--nav-pill-shadow: 0 1px 2px rgba(16, 24, 40, 0.10), 0 6px 14px -6px rgba(10, 110, 174, 0.35);
/* "Life" effects: ambient light, glows, shimmer */
--aurora-1: rgba(10, 110, 174, 0.09);
--aurora-2: rgba(10, 155, 122, 0.08);
--aurora-3: rgba(61, 158, 222, 0.07);
--shine-hi: #3D9EDE;
--media-glow: rgba(10, 110, 174, 0.38);
--trust-edge-1: rgba(10, 110, 174, 0.40);
--trust-edge-2: rgba(10, 155, 122, 0.40);
--trust-glow: 0 18px 40px -16px rgba(10, 110, 174, 0.45);
--shimmer: rgba(61, 158, 222, 0.20);
--emblem-hi: #4FA8E6;
--emblem-glow: rgba(10, 110, 174, 0.55);
--emblem2-hi: #2EC29C;
--emblem2-glow: rgba(10, 155, 122, 0.55);
/* Selection, forms, errors */
--accent-soft: #EAF3FA; /* selected option background */
--input-border: #7D8899; /* 3.4:1 on white (WCAG 1.4.11) */
--danger: #B42318;
--danger-soft: #FEF3F2;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
--shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.05);
--shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.05);
/* Motion */
--ease: cubic-bezier(0.2, 0, 0, 1);
--duration: 160ms;
}
/* =============================================================
3. TOKENS — DARK
Follows the OS setting unless forced light (data-theme="light"),
and can be forced dark with data-theme="dark" on .
Kept as two blocks (rather than light-dark()) so colours still
work on older iPhones/iPads that predate that function.
============================================================= */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--accent: #3D9EDE;
--accent-hover: #66B4E8;
--on-accent: #0B1220;
--accent2: #12C49A;
--accent2-text: #12C49A;
--warning: #F59E0B;
--warning-text: #F59E0B;
--bg: #0B1220;
--surface: #182338; /* raised cards: lighter than the bands (dark elevation) */
--surface2: #111A2A;
--fg1: #F1F5F9;
--fg2: #AAB5C5;
--fg3: #8E9AAE; /* was #5C6370: failed AA */
--border: #2A3A53;
--header-bg: rgba(24, 35, 56, 0.82);
--glow-1: rgba(61, 158, 222, 0.16);
--glow-2: rgba(18, 196, 154, 0.10);
--hero-media-bg: #16263A;
--btn-a: #66B4E8;
--btn-b: #3D9EDE;
--btn-a-hover: #8CC8F0;
--btn-b-hover: #5AAEE6;
--btn-edge: rgba(255, 255, 255, 0.22);
--btn-text-shadow: none;
--glass-card: rgba(24, 35, 56, 0.62);
--glass-card-solid: rgba(24, 35, 56, 0.9);
--glass-card-border: rgba(255, 255, 255, 0.08);
--glass-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px -18px rgba(0, 0, 0, 0.65);
--option-bg: rgba(23, 34, 52, 0.72);
--dot: rgba(255, 255, 255, 0.05);
--glass-bg: rgba(24, 35, 56, 0.55);
--glass-bg-strong: rgba(24, 35, 56, 0.86);
--glass-border: rgba(255, 255, 255, 0.09);
--glass-hi: rgba(255, 255, 255, 0.06);
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
--glass-shadow-strong: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 36px -14px rgba(0, 0, 0, 0.75);
--nav-track: rgba(255, 255, 255, 0.05);
--nav-pill: #1E2B41;
--nav-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 14px -6px rgba(61, 158, 222, 0.40);
--aurora-1: rgba(61, 158, 222, 0.20);
--aurora-2: rgba(18, 196, 154, 0.14);
--aurora-3: rgba(61, 158, 222, 0.12);
--shine-hi: #A5D8FF;
--media-glow: rgba(0, 0, 0, 0.65);
--trust-edge-1: rgba(61, 158, 222, 0.55);
--trust-edge-2: rgba(18, 196, 154, 0.50);
--trust-glow: 0 18px 40px -16px rgba(61, 158, 222, 0.45);
--shimmer: rgba(255, 255, 255, 0.10);
--emblem-hi: #8CC8F0;
--emblem-glow: rgba(61, 158, 222, 0.50);
--emblem2-hi: #7FE3C8;
--emblem2-glow: rgba(18, 196, 154, 0.45);
--accent-soft: #15304A;
--input-border: #6E7C91;
--danger: #F97066;
--danger-soft: rgba(249, 112, 102, 0.10);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--accent: #3D9EDE;
--accent-hover: #66B4E8;
--on-accent: #0B1220;
--accent2: #12C49A;
--accent2-text: #12C49A;
--warning: #F59E0B;
--warning-text: #F59E0B;
--bg: #0B1220;
--surface: #182338; /* raised cards: lighter than the bands (dark elevation) */
--surface2: #111A2A;
--fg1: #F1F5F9;
--fg2: #AAB5C5;
--fg3: #8E9AAE;
--border: #2A3A53;
--header-bg: rgba(24, 35, 56, 0.82);
--glow-1: rgba(61, 158, 222, 0.16);
--glow-2: rgba(18, 196, 154, 0.10);
--hero-media-bg: #16263A;
--btn-a: #66B4E8;
--btn-b: #3D9EDE;
--btn-a-hover: #8CC8F0;
--btn-b-hover: #5AAEE6;
--btn-edge: rgba(255, 255, 255, 0.22);
--btn-text-shadow: none;
--glass-card: rgba(24, 35, 56, 0.62);
--glass-card-solid: rgba(24, 35, 56, 0.9);
--glass-card-border: rgba(255, 255, 255, 0.08);
--glass-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px -18px rgba(0, 0, 0, 0.65);
--option-bg: rgba(23, 34, 52, 0.72);
--dot: rgba(255, 255, 255, 0.05);
--glass-bg: rgba(24, 35, 56, 0.55);
--glass-bg-strong: rgba(24, 35, 56, 0.86);
--glass-border: rgba(255, 255, 255, 0.09);
--glass-hi: rgba(255, 255, 255, 0.06);
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
--glass-shadow-strong: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 36px -14px rgba(0, 0, 0, 0.75);
--nav-track: rgba(255, 255, 255, 0.05);
--nav-pill: #1E2B41;
--nav-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 14px -6px rgba(61, 158, 222, 0.40);
--aurora-1: rgba(61, 158, 222, 0.20);
--aurora-2: rgba(18, 196, 154, 0.14);
--aurora-3: rgba(61, 158, 222, 0.07);
--shine-hi: #A5D8FF;
--media-glow: rgba(0, 0, 0, 0.65);
--trust-edge-1: rgba(61, 158, 222, 0.55);
--trust-edge-2: rgba(18, 196, 154, 0.50);
--trust-glow: 0 18px 40px -16px rgba(61, 158, 222, 0.45);
--shimmer: rgba(255, 255, 255, 0.10);
--emblem-hi: #8CC8F0;
--emblem-glow: rgba(61, 158, 222, 0.50);
--emblem2-hi: #7FE3C8;
--emblem2-glow: rgba(18, 196, 154, 0.45);
--accent-soft: #15304A;
--input-border: #6E7C91;
--danger: #F97066;
--danger-soft: rgba(249, 112, 102, 0.10);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
}
/* =============================================================
4. RESET & BASE
============================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + var(--space-2)); /* anchors land below the sticky header */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
accent-color: var(--accent); /* native checkboxes, radios, range inputs */
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-left: var(--gutter-l);
padding-right: var(--gutter-r);
background: var(--bg);
color: var(--fg2);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
main {
flex: 1; /* pushes a future footer to the bottom on short pages */
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
/* Form controls inherit the page font. Keeps inputs at 16px+ so iOS
Safari doesn't zoom the page when a field is tapped. */
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
/* The hidden attribute always wins over display rules below */
[hidden] {
display: none !important;
}
/* Aligned digits for prices and totals */
.num {
font-variant-numeric: tabular-nums;
}
button {
cursor: pointer;
}
::selection {
background: var(--accent);
color: var(--on-accent);
}
/* =============================================================
5. TYPOGRAPHY
============================================================= */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em;
font-family: var(--font-display);
color: var(--fg1);
line-height: 1.15;
text-wrap: balance; /* even line lengths in headings */
}
h1 { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
h2 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); font-weight: 600; }
h5 { font-size: var(--text-base); font-weight: 600; }
h6 { font-size: var(--text-sm); font-weight: 600; }
p,
li {
color: var(--fg2);
line-height: 1.65;
text-wrap: pretty; /* avoids single-word last lines */
}
p {
margin: 0 0 1em;
}
a {
color: var(--accent);
text-decoration: none;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
strong {
color: var(--fg1);
font-weight: 600;
}
small,
.text-muted {
color: var(--fg3);
font-size: var(--text-sm);
}
.lead {
font-size: var(--text-lg);
max-width: 60ch;
}
/* Small uppercase label above section headings */
.eyebrow {
display: inline-block;
margin-bottom: var(--space-3);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
/* =============================================================
6. LAYOUT
============================================================= */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
}
section {
padding-top: var(--section-py);
padding-bottom: var(--section-py);
}
/* Full-width tinted band; pair with .bleed */
.section-alt {
background: var(--surface2);
}
.section-head {
max-width: 680px;
margin-bottom: var(--space-7);
}
.section-head.is-centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* =============================================================
7. COMPONENTS
============================================================= */
/* ---------- Card ---------- */
.card {
padding: var(--space-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
/* Cards that are links or contain a primary action: gentle lift on hover */
.card-interactive {
transition:
transform 200ms var(--ease),
box-shadow 200ms var(--ease),
border-color 200ms var(--ease);
}
.card-interactive:hover {
transform: translateY(-3px);
border-color: var(--border); /* fallback: Safari < 16.2 has no color-mix() */
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
box-shadow: var(--shadow-lg);
}
/* Small rounded icon tile used at the top of cards */
.icon-tile {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: var(--space-4);
border-radius: var(--radius);
background: var(--surface2);
color: var(--accent);
}
.icon-tile svg {
width: 22px;
height: 22px;
}
/* ---------- Bento grid ----------
Modular tiles of different sizes. Every tile should carry one clear
message (a service, a guarantee, a stat). Collapses to one column
on phones, two on tablets, four on desktop. */
.bento {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
.bento > * {
margin: 0;
}
@media (min-width: 640px) {
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bento-wide {
grid-column: span 2;
}
}
@media (min-width: 960px) {
.bento {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(190px, auto);
}
.bento-tall {
grid-row: span 2;
}
.bento-feature {
grid-column: span 2;
grid-row: span 2;
}
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 var(--space-5);
border: 1px solid transparent;
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--duration) var(--ease),
border-color var(--duration) var(--ease),
color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease),
transform var(--duration) var(--ease);
}
.btn:hover {
text-decoration: none;
}
.btn:active {
transform: translateY(1px);
}
.btn-primary {
background: var(--accent);
color: var(--on-accent);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background: var(--accent-hover);
color: var(--on-accent);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: var(--surface);
color: var(--fg1);
border-color: var(--border);
}
.btn-secondary:hover {
border-color: var(--accent);
color: var(--accent);
}
/* Outlined: transparent with an accent border; fills on hover */
.btn-outline {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
.btn-outline:hover {
background: var(--accent);
color: var(--on-accent);
}
.btn-lg {
min-height: 52px;
padding: 0 var(--space-6);
font-size: var(--text-lg);
}
/* Square icon-only button (needs an aria-label) */
.btn-icon {
width: 44px;
padding: 0;
}
.btn-icon svg {
width: 20px;
height: 20px;
}
/* Arrow that nudges forward on hover: Text */
.btn-arrow svg {
width: 18px;
height: 18px;
transition: transform var(--duration) var(--ease);
}
.btn-arrow:hover svg {
transform: translateX(3px);
}
/* Row of buttons that wraps cleanly on small screens */
.btn-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
/* ---------- Badge (e.g. "Satisfaction guaranteed") ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
background: var(--surface2);
color: var(--fg1);
font-size: var(--text-sm);
font-weight: 500;
}
.badge-success {
color: var(--accent2-text);
}
/* =============================================================
8. ACCESSIBILITY
============================================================= */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.skip-link {
position: absolute;
left: 16px;
top: -100px;
z-index: 200;
padding: 10px 16px;
background: var(--accent);
color: var(--on-accent);
border-radius: var(--radius-sm);
font-weight: 600;
}
.skip-link:focus {
top: 8px;
color: var(--on-accent);
}
/* Visually hidden but read by screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Respect the OS "reduce motion" setting everywhere */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =============================================================
9. UTILITIES
============================================================= */
/* Break out of the body gutters to span the full viewport width,
while keeping inner content aligned with the gutters. */
.bleed {
margin-left: calc(-1 * var(--gutter-l));
margin-right: calc(-1 * var(--gutter-r));
padding-left: var(--gutter-l);
padding-right: var(--gutter-r);
}
/* Soft brand-tinted glow behind a hero or feature band (pair with .bleed) */
.glow {
background:
radial-gradient(60% 55% at 88% 0%, var(--glow-1), transparent 70%),
radial-gradient(50% 50% at 0% 35%, var(--glow-2), transparent 70%),
var(--bg);
}
/* =============================================================
9b. MOTION — progressive enhancement
Only runs when the visitor hasn't asked for reduced motion, and only
in browsers that support it. Everyone else sees the content
immediately, fully visible: nothing depends on the animation.
============================================================= */
@keyframes reveal-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
/* Fade/slide elements in as they scroll into view (CSS only, no JS) */
@supports (animation-timeline: view()) {
.reveal {
animation: reveal-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
}
/* Smooth cross-fade between pages (e.g. booking → thank-you) */
@view-transition {
navigation: auto;
}
}
/* =============================================================
10. SITE HEADER & NAVIGATION — floating glass "island"
The sticky wrapper is transparent; the bar inside is frosted
glass that lets the page colour show through. Under 1024px the
links fold into a menu (tablets keep a visible quote button).
============================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 100;
padding-top: 10px;
padding-bottom: 6px;
view-transition-name: site-header;
pointer-events: none; /* clicks pass through the transparent margins… */
}
.site-header > * {
pointer-events: auto; /* …but not the bar itself */
}
.header-inner {
position: relative;
max-width: calc(var(--max-width) + 28px);
height: 60px;
margin: 0 auto;
padding: 0 8px 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
border: 1px solid var(--glass-border);
border-radius: 20px;
background: var(--surface);
box-shadow: var(--glass-shadow);
transition: background-color 250ms var(--ease), box-shadow 250ms var(--ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.header-inner {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
}
.site-header.is-scrolled .header-inner {
background: var(--glass-bg-strong);
}
}
/* Glass reflection along the top edge */
.header-inner::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, var(--glass-hi) 0%, transparent 55%);
pointer-events: none;
}
.site-header.is-scrolled .header-inner {
box-shadow: var(--glass-shadow-strong);
}
/* ---------- Logo lockup ---------- */
.logo {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
color: var(--fg1);
}
.logo:hover {
color: var(--fg1);
text-decoration: none;
}
.logo-mark {
width: 36px;
height: 36px;
flex: none;
filter: drop-shadow(0 4px 10px var(--emblem-glow));
transition: transform 320ms var(--ease);
}
.logo:hover .logo-mark {
transform: rotate(-6deg) scale(1.06);
}
.lg-a { stop-color: var(--accent); }
.lg-b { stop-color: var(--accent2); }
.logo-shine {
fill: rgba(255, 255, 255, 0.2);
}
.logo-check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.logo-spark {
fill: #FFFFFF;
transform-box: fill-box;
transform-origin: center;
}
.logo-word {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo-name {
font-family: var(--font-display);
font-size: 1.1875rem;
font-weight: 700;
letter-spacing: -0.02em;
white-space: nowrap;
}
.logo-name-accent {
color: var(--accent);
}
.logo-tag {
margin-top: 3px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg3);
white-space: nowrap;
}
/* ---------- Desktop navigation ---------- */
.nav-menu {
display: flex;
align-items: center;
gap: var(--space-3);
}
.nav-track {
position: relative;
display: flex;
align-items: center;
padding: 4px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
background: var(--nav-track);
}
/* Sliding pill: follows the hovered link, else the section in view */
.nav-indicator {
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 0;
border-radius: var(--radius-full);
background: var(--nav-pill);
box-shadow: var(--nav-pill-shadow);
opacity: 0;
transition:
transform 380ms cubic-bezier(0.3, 1.25, 0.5, 1),
width 380ms cubic-bezier(0.3, 1.25, 0.5, 1),
opacity 200ms var(--ease);
}
.nav-indicator.is-visible {
opacity: 1;
}
.nav-list {
position: relative;
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.nav-link {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 15px;
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 500;
color: var(--fg2);
white-space: nowrap;
transition: color 200ms var(--ease);
}
.nav-link:hover {
color: var(--fg1);
text-decoration: none;
}
.nav-link.is-active {
color: var(--accent);
font-weight: 600;
}
.nav-cta {
font-size: var(--text-sm);
}
.header-actions {
display: none;
}
/* Tablet-only visible quote button (beside the menu button) */
.header-cta {
display: none;
min-height: 42px;
padding: 0 18px;
font-size: var(--text-sm);
}
/* Hamburger (glass button) */
.nav-toggle {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--glass-border);
border-radius: 14px;
background: var(--nav-track);
color: var(--fg1);
}
.nav-toggle-bar {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.site-header.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Under 768px: folded menu (phones use the tab bar) ---------- */
@media (max-width: 767.98px) {
.nav-toggle {
display: inline-flex;
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.nav-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px 10px 14px;
border: 1px solid var(--glass-border);
border-radius: 20px;
background: var(--surface);
box-shadow: var(--shadow-lg);
max-height: calc(100vh - var(--header-h) - 16px);
max-height: calc(100dvh - var(--header-h) - 16px);
overflow-y: auto;
overscroll-behavior: contain;
}
.site-header.is-open .nav-menu {
display: flex;
}
.nav-track {
display: block;
padding: 0;
border: 0;
background: none;
}
.nav-indicator {
display: none;
}
.nav-list {
flex-direction: column;
align-items: stretch;
gap: 2px;
}
.nav-link {
display: flex;
min-height: 52px;
padding: 0 14px;
border-radius: 12px;
font-size: var(--text-lg);
}
.nav-link.is-active {
background: var(--accent-soft);
}
.nav-cta {
width: 100%;
min-height: 52px;
margin-top: var(--space-3);
font-size: var(--text-base);
}
}
@media (min-width: 640px) and (max-width: 1023.98px) {
.header-cta {
display: inline-flex;
}
}
/* Very small phones: drop the tagline to keep the bar tidy */
@media (max-width: 359.98px) {
.logo-tag {
display: none;
}
}
/* Header comes alive on load: bar settles in, logo sparkle twinkles */
@media (prefers-reduced-motion: no-preference) {
.header-inner { animation: bar-in 0.7s var(--ease) both; }
.logo-spark { animation: twinkle 1.1s 0.6s var(--ease) 2 both; }
.site-header.is-open .nav-menu { animation: menu-in 0.22s var(--ease) both; }
}
@keyframes bar-in { from { opacity: 0; transform: translateY(-14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
/* ---------- Sticky bottom call-to-action (phones only) ----------
Sits in the thumb zone. Slides in after the hero, hides while the
booking section is on screen or the menu is open (see main.js). */
.mobile-cta {
display: none;
}
@media (max-width: 767.98px) {
.has-mobile-cta {
padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); /* keep page end clear of the bar */
}
.mobile-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--gutter-r) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
transform: translateY(110%);
visibility: hidden; /* also removes it from keyboard focus while hidden */
transition: transform 250ms var(--ease), visibility 0s linear 250ms;
}
.mobile-cta.is-visible {
transform: none;
visibility: visible;
transition: transform 250ms var(--ease), visibility 0s;
}
.mobile-cta .btn-primary {
flex: 1;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.mobile-cta {
background: var(--header-bg);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
}
}
}
/* =============================================================
11. SIMPLE PAGES (thank-you, 404)
============================================================= */
.page-message {
display: grid;
place-items: center;
padding-top: var(--section-py);
padding-bottom: var(--section-py);
}
.page-message .card {
width: 100%;
max-width: 520px;
text-align: center;
padding: clamp(var(--space-6), 5vw, var(--space-7));
}
.page-message h1 {
font-size: var(--text-3xl);
}
.page-message p {
margin-left: auto;
margin-right: auto;
}
.page-icon {
width: 56px;
height: 56px;
margin: 0 auto var(--space-5);
color: var(--accent2);
}
.page-icon.is-neutral {
color: var(--accent);
}
.page-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-6);
}
/* =============================================================
12. HERO
Phones/tablets: single column, text only (image area hidden).
Desktop (900px+): text left, image right, min-height 520px.
============================================================= */
.hero {
display: flex;
align-items: center; /* vertically centre the content */
padding-top: clamp(2.5rem, 1rem + 6vw, 5rem);
padding-bottom: clamp(2.5rem, 1rem + 6vw, 5rem);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: var(--space-8);
}
.hero-content {
max-width: 600px;
}
.hero h1 {
margin-bottom: var(--space-4);
}
.hero-lead {
margin-bottom: var(--space-6);
}
.hero-actions {
margin-bottom: var(--space-5);
}
/* Phones: buttons grow to full width when they wrap (easy thumb targets) */
.hero-actions .btn {
flex: 1 1 auto;
}
.hero-actions svg {
width: 20px;
height: 20px;
flex: none;
}
.hero-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--text-sm);
font-weight: 500;
color: var(--fg2);
}
.stars {
width: 84px;
height: 16px;
flex: none;
fill: var(--warning);
}
/* ---------- Hero: ambient light ---------- */
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--bg);
}
.hero-ambient {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.aurora {
position: absolute;
width: 680px;
height: 680px;
border-radius: 50%;
}
.aurora-1 { top: -340px; right: -160px; background: radial-gradient(closest-side, var(--aurora-1), transparent); }
.aurora-2 { top: 18%; left: -320px; background: radial-gradient(closest-side, var(--aurora-2), transparent); }
.aurora-3 { bottom: -400px; right: 28%; background: radial-gradient(closest-side, var(--aurora-3), transparent); }
/* ---------- Hero: live eyebrow dot ---------- */
.eyebrow-live {
display: inline-flex;
align-items: center;
gap: 10px;
}
.live-dot {
position: relative;
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent2);
}
.live-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--accent2);
opacity: 0;
}
/* ---------- Hero: shimmering "Guaranteed." + sparkles ---------- */
.shine-wrap {
position: relative;
display: inline-block;
}
.shine-text {
color: var(--accent);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.shine-text {
/* left half and right half are identical, with a bright band between,
so the sweep starts and ends on the same brand gradient */
background: linear-gradient(100deg,
var(--accent) 0%, var(--accent2-text) 44%,
var(--shine-hi) 50%,
var(--accent) 56%, var(--accent2-text) 100%);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
.sparkle {
position: absolute;
width: 18px;
height: 18px;
fill: var(--accent);
pointer-events: none;
}
.sp-1 { top: -14px; right: -22px; width: 24px; height: 24px; }
.sp-2 { top: 2px; left: -16px; width: 12px; height: 12px; fill: var(--accent2); }
.sp-3 { bottom: 0; right: 30%; width: 10px; height: 10px; }
/* ---------- Hero: CTA glow + shine ---------- */
.btn-shine {
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow: 0 12px 28px -10px var(--emblem-glow);
}
.btn-shine::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 45%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: translateX(-160%) skewX(-20deg);
pointer-events: none;
}
/* ---------- Hero: photo + floating chips (desktop) ---------- */
.hero-visual {
display: none;
}
@media (min-width: 900px) {
.hero {
min-height: 560px;
}
.hero-grid {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-7);
}
.hero-actions .btn {
flex: 0 0 auto;
}
.hero-visual {
position: relative;
display: block;
align-self: stretch;
}
.hero-media {
position: relative;
height: 100%;
min-height: 440px;
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--hero-media-bg);
box-shadow: 0 32px 64px -28px var(--media-glow), var(--shadow-md);
}
.hero-media::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
pointer-events: none;
}
.hero-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-4 { top: -16px; right: 20%; width: 28px; height: 28px; }
.sp-5 { bottom: 24%; left: -22px; width: 16px; height: 16px; fill: var(--accent2); }
.sp-6 { top: 44%; right: -14px; width: 14px; height: 14px; }
}
/* Narrower desktops: keep sparkles inside the frame */
@media (min-width: 900px) and (max-width: 1159.98px) {
.sp-6 { right: 6px; }
}
/* =============================================================
13. TRUST EMBLEMS (animated icons used by the trust points)
2 columns on phones, 4 in a row from 900px. Each badge "lights
up" as it scrolls into view (main.js adds .is-in): the icon
draws itself, the emblem pops and rings, a shimmer sweeps across.
============================================================= */
.trust-emblem {
position: relative;
display: grid;
place-items: center;
flex: none;
width: 56px;
height: 56px;
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, var(--emblem-hi), var(--accent) 72%);
color: var(--on-accent);
box-shadow: 0 10px 22px -8px var(--emblem-glow);
}
/* Expanding ring */
.trust-emblem::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--accent);
opacity: 0;
}
.trust-glyph {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.trust-glyph > * {
stroke-dasharray: 1; /* pathLength="1" on every shape */
}
.trust-glyph .glyph-check {
stroke-width: 2.4;
}
.trust-text strong {
display: block;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.3;
color: var(--fg1);
text-wrap: balance;
}
.trust-text > span {
display: block;
margin-top: 4px;
font-size: var(--text-xs);
line-height: 1.45;
color: var(--fg2);
}
@media (min-width: 640px) {
.trust-text > span {
font-size: var(--text-sm);
}
}
/* ---------- Services: icon tiles glow on hover ---------- */
.service-card {
transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.service-card:hover {
transform: translateY(-3px);
border-color: var(--trust-edge-1);
box-shadow: var(--trust-glow);
}
.service-card .icon-tile {
transition: background-color 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.service-card:hover .icon-tile {
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 8px 18px -6px var(--emblem-glow);
}
/* =============================================================
MOTION — "life" effects. Everything plays a set number of times
(all under 5 seconds) and then rests, so nothing moves forever
(WCAG 2.2.2). Skipped entirely for reduced-motion users, who see
the finished, static design.
============================================================= */
@media (prefers-reduced-motion: no-preference) {
/* Hero: on page load */
.aurora-1 { animation: drift-1 4.5s var(--ease) both; }
.aurora-2 { animation: drift-2 4.5s 0.2s var(--ease) both; }
.aurora-3 { animation: drift-3 4.5s 0.4s var(--ease) both; }
.live-dot::after { animation: ping 1.5s 0.6s ease-out 3; }
.shine-text { animation: shine 1.8s 0.7s var(--ease) both; }
.sparkle { animation: twinkle 1.2s var(--ease) 2 both; }
.sp-1 { animation-delay: 1.1s; }
.sp-2 { animation-delay: 1.4s; }
.sp-3 { animation-delay: 1.7s; }
.sp-4 { animation-delay: 0.9s; }
.sp-5 { animation-delay: 1.3s; }
.sp-6 { animation-delay: 1.6s; }
.hero-media { animation: rise 0.9s var(--ease) both; }
.btn-shine::after { animation: sweep 1s 1.6s var(--ease) both; }
.btn-shine:hover::after { animation: sweep-again 0.8s var(--ease) both; }
/* Hovering the photo re-sparkles it */
.hero-visual:hover .sparkle { animation: twinkle-again 1s var(--ease) both; }
}
@keyframes drift-1 { from { transform: translate(80px, -60px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drift-2 { from { transform: translate(-90px, 40px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drift-3 { from { transform: translate(40px, 80px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ping { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.2); opacity: 0; } }
@keyframes shine { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes twinkle {
0% { transform: scale(0) rotate(-60deg); opacity: 0; }
55% { transform: scale(1.2) rotate(12deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 0.95; }
}
@keyframes twinkle-again {
0% { transform: scale(0.4) rotate(-60deg); opacity: 0.3; }
55% { transform: scale(1.25) rotate(12deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 0.95; }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sweep { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes sweep-again { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes sheen-again { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes emblem-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes ring { 0% { opacity: 0.75; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes ring-again { 0% { opacity: 0.75; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes draw-again { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* =============================================================
14. SERVICES
Cards share the trust-badge look (surface, 1px border, rounded),
scaled up. 1 column on phones, 2 on tablets, 3 on desktop.
============================================================= */
.services-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 640px) {
.services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 960px) {
.services-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
}
}
.service-card {
display: flex;
flex-direction: column;
height: 100%;
}
.service-card h3 {
margin-bottom: var(--space-2);
}
.service-desc {
margin-bottom: var(--space-5);
}
/* Price sits above the button; margin-top:auto pins both to the
card bottom so buttons line up across a row. */
.service-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 6px;
margin-top: auto;
margin-bottom: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--border);
font-size: var(--text-sm);
color: var(--fg2);
}
.service-price strong {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--fg1);
}
.service-card .btn {
width: 100%;
}
.services-note {
margin: var(--space-4) 0 0;
font-size: var(--text-sm);
color: var(--fg3);
text-align: center;
}
/* Teal check icon (checklists) */
.trust-icon {
width: 22px;
height: 22px;
flex: none;
}
.trust-icon circle {
fill: var(--accent2);
}
.trust-icon path {
fill: none;
stroke: var(--on-accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =============================================================
15. BOOKING — calculator, price summary, form
Desktop (960px+): steps left, sticky summary right.
Mobile: summary first, steps below, slim sticky total bar.
============================================================= */
.booking-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 960px) {
.booking-layout {
grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
gap: var(--space-7);
align-items: start;
}
.booking-main {
grid-column: 1;
grid-row: 1;
}
.booking-summary {
grid-column: 2;
grid-row: 1;
position: sticky;
top: calc(var(--header-h) + var(--space-4));
}
}
/* ---------- Steps ---------- */
.calc-step {
min-width: 0;
margin: 0 0 var(--space-7);
padding: 0;
border: 0;
transition: opacity var(--duration) var(--ease);
}
.calc-step:disabled {
opacity: 0.45;
}
/* Legend laid out like a normal heading (float trick for fieldsets) */
.step-title {
float: left;
width: 100%;
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-4);
padding: 0;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
line-height: 1.3;
color: var(--fg1);
}
/* Everything after the floated legend clears it. (Not just the next
sibling: that may be a hidden note, which would leave the option
grid squeezed beside the float and overflowing on phones.) */
.calc-step > :not(legend) {
clear: both;
}
.step-num {
display: inline-grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--on-accent);
font-size: var(--text-sm);
font-weight: 700;
}
.step-note {
margin: calc(-1 * var(--space-2)) 0 var(--space-4);
font-size: var(--text-sm);
color: var(--fg3);
}
.step-error {
margin: var(--space-3) 0 0;
}
/* ---------- Selectable option cards ---------- */
.option-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
gap: var(--space-3);
}
.option-grid-3 {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
/* Extras: 2 columns on phones (halves the scroll), wider cards above */
.option-grid-extras {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
@media (min-width: 640px) {
.option-grid-extras {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
}
.option {
position: relative;
display: block;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
/* The real radio/checkbox stays in the page for keyboard and screen
readers; the card is its visual stand-in. */
.option input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: inherit;
}
.option-body {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
height: 100%;
min-height: 64px;
padding: 14px 44px 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
transition:
border-color 120ms var(--ease),
background-color 120ms var(--ease),
box-shadow 120ms var(--ease);
}
.option:hover .option-body {
border-color: var(--input-border);
}
.option input:checked + .option-body {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent);
}
.option input:focus-visible + .option-body {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.option input:disabled {
cursor: not-allowed;
}
.option input:disabled + .option-body {
opacity: 0.5;
}
/* Check indicator, top-right of each card */
.option-check {
position: absolute;
top: 14px;
right: 14px;
display: grid;
place-items: center;
width: 20px;
height: 20px;
border: 1.5px solid var(--input-border);
border-radius: var(--radius-full);
background: var(--surface);
transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.option-check-box {
border-radius: 6px;
}
.option-check svg {
width: 12px;
height: 12px;
fill: none;
stroke: var(--on-accent);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
}
.option input:checked + .option-body .option-check {
border-color: var(--accent);
background: var(--accent);
}
.option input:checked + .option-body .option-check svg {
opacity: 1;
}
.option-title {
font-weight: 600;
line-height: 1.35;
color: var(--fg1);
}
.option-meta {
font-size: var(--text-sm);
color: var(--fg2);
}
.option-price {
font-weight: 600;
color: var(--fg1);
font-variant-numeric: tabular-nums;
}
.option-tag {
align-self: flex-start;
margin-top: var(--space-2);
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--surface2);
color: var(--accent2-text);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.01em;
}
.option input:checked + .option-body .option-tag {
background: var(--surface);
}
.extras-hint {
margin: var(--space-3) 0 0;
min-height: 1.5em;
font-size: var(--text-sm);
font-weight: 500;
color: var(--accent2-text);
}
/* ---------- Price summary ---------- */
.summary-card {
padding: var(--space-5);
}
@media (min-width: 640px) {
.summary-card {
padding: var(--space-6);
}
}
.summary-card h3 {
margin-bottom: var(--space-1);
font-size: var(--text-lg);
}
.summary-meta {
margin: 0 0 var(--space-4);
font-size: var(--text-sm);
color: var(--fg3);
}
.summary-rows {
margin: 0;
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.summary-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-4);
padding: 6px 0;
}
.summary-row dt {
color: var(--fg2);
}
.summary-row dd {
margin: 0;
font-weight: 600;
color: var(--fg1);
white-space: nowrap;
}
.summary-row.is-discount dd {
color: var(--accent2-text);
}
.summary-row.is-subtotal {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
}
.summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-4);
margin-top: var(--space-3);
padding-top: var(--space-4);
border-top: 3px double var(--border);
}
.summary-total-label {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: var(--text-sm);
color: var(--fg1);
}
.summary-total-value {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.summary-total-value.is-text {
font-size: var(--text-xl);
}
.summary-note {
margin: var(--space-4) 0 0;
font-size: var(--text-xs);
color: var(--fg3);
}
.summary-cta {
width: 100%;
margin-top: var(--space-5);
}
/* ---------- Booking form ---------- */
.booking-form {
margin: 0;
}
.booking-form .step-title {
float: none;
}
.form-intro {
margin: calc(-1 * var(--space-2)) 0 var(--space-5);
font-size: var(--text-sm);
color: var(--fg3);
}
.field-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5) var(--space-4);
}
@media (min-width: 640px) {
.field-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-full {
grid-column: 1 / -1;
}
}
.field label {
display: block;
margin-bottom: 6px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg1);
}
.optional {
font-weight: 400;
color: var(--fg3);
}
.input {
display: block;
width: 100%;
min-height: 48px;
padding: 10px 14px;
border: 1px solid var(--input-border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--fg1);
font-size: max(16px, var(--text-base)); /* 16px+ prevents iOS zoom on focus */
line-height: 1.4;
transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.input::placeholder {
color: var(--fg3);
opacity: 1;
}
.input:hover {
border-color: var(--fg3);
}
.input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:focus-visible {
outline: none; /* replaced by the border + ring above */
}
.input[aria-invalid="true"] {
border-color: var(--danger);
}
.input[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px var(--danger-soft);
}
textarea.input {
min-height: 112px;
resize: vertical;
}
select.input {
appearance: none;
-webkit-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858C98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
}
.field-hint {
display: flex;
justify-content: space-between;
gap: var(--space-3);
margin: 6px 0 0;
font-size: var(--text-xs);
color: var(--fg3);
}
.field-error {
display: flex;
align-items: flex-start;
gap: 6px;
margin: 6px 0 0;
font-size: var(--text-sm);
font-weight: 500;
color: var(--danger);
}
.field-error::before {
content: "!";
display: inline-grid;
place-items: center;
flex: none;
width: 16px;
height: 16px;
margin-top: 0.15em;
border-radius: var(--radius-full);
background: var(--danger);
color: var(--surface);
font-size: 11px;
font-weight: 700;
line-height: 1;
}
/* Error summary + submit failure message */
.form-alert {
margin: 0 0 var(--space-5);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--danger);
border-left-width: 4px;
border-radius: var(--radius-sm);
background: var(--danger-soft);
color: var(--fg1);
}
.form-alert:focus {
outline: 2px solid var(--danger);
outline-offset: 2px;
}
.form-alert h4 {
margin: 0 0 var(--space-2);
font-size: var(--text-base);
}
.form-alert p {
margin: 0;
color: var(--fg1);
}
.form-alert ul {
margin: 0;
padding-left: 1.2em;
}
.form-alert li {
color: var(--fg1);
line-height: 1.5;
}
.form-alert a {
color: var(--danger);
font-weight: 600;
text-decoration: underline;
}
/* Honeypot: off-screen for people, still present for bots */
.hp {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-actions {
margin-top: var(--space-6);
}
.booking-submit {
width: 100%;
}
@media (min-width: 640px) {
.booking-submit {
width: auto;
min-width: 260px;
}
}
.booking-submit[aria-busy="true"] {
cursor: progress;
opacity: 0.85;
}
.booking-submit[aria-busy="true"]::before {
content: "";
width: 18px;
height: 18px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: var(--radius-full);
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.form-fine {
margin: var(--space-3) 0 0;
font-size: var(--text-sm);
color: var(--fg3);
}
/* ---------- Mobile sticky total bar (booking section only) ---------- */
.booking-bar {
display: none;
}
@media (max-width: 767.98px) {
.booking-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 91;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--gutter-r) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
transform: translateY(110%);
visibility: hidden;
transition: transform 200ms var(--ease), visibility 0s linear 200ms;
}
.booking-bar.is-visible {
transform: none;
visibility: visible;
transition: transform 200ms var(--ease), visibility 0s;
}
.booking-bar-label {
display: block;
font-size: var(--text-xs);
color: var(--fg3);
}
.booking-bar-total {
display: block;
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
line-height: 1.2;
color: var(--accent);
}
}
/* ---------- Extras cards with photos ---------- */
.option-body.has-media {
padding: 0;
overflow: hidden;
gap: 0;
}
.option-media {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 1;
object-fit: cover;
background: var(--surface2); /* placeholder tint while loading */
border-bottom: 1px solid var(--border);
transition: filter 120ms var(--ease);
}
.option-content {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px 14px;
}
/* Check sits on the photo: give it a solid backing + soft shadow */
.option-body.has-media .option-check {
top: 10px;
right: 10px;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
}
/* "Included" (disabled) cards: mute the photo too */
.option input:disabled + .option-body .option-media {
filter: grayscale(1);
}
/* ---------- Recurring price line in the summary ---------- */
.summary-recurring {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius);
background: var(--accent-soft);
}
.summary-recurring-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg1);
}
.summary-recurring-row strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--accent);
white-space: nowrap;
}
.summary-recurring-note {
margin: 4px 0 0;
font-size: var(--text-xs);
line-height: 1.5;
color: var(--fg2);
}
/* =============================================================
16. GLASS HEADER — page integration
============================================================= */
/* Hero slides up under the floating glass bar so its colours show
through the frosted glass. */
.hero {
margin-top: calc(-1 * var(--header-h));
padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 5rem));
}
@media (min-width: 900px) {
.hero {
min-height: calc(560px + var(--header-h));
}
}
/* "Back to home" in the bar on thank-you / 404 */
.header-home {
min-height: 42px;
padding: 0 18px;
font-size: var(--text-sm);
}
@media (max-width: 479.98px) {
.header-home {
display: none; /* the page card has its own button */
}
}
/* =============================================================
17. TRUST POINTS WITH REAL PHOTOS
Placed where each one matters: Insured (Services), Guarantee
(banner before pricing), Police check + ID (before the form).
Each lights up once when scrolled into view (.is-in).
============================================================= */
/* Shared: shimmer band that sweeps across once */
.has-sheen {
position: relative;
overflow: hidden;
}
.has-sheen::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(105deg, transparent 35%, var(--shimmer) 50%, transparent 65%);
transform: translateX(-120%);
pointer-events: none;
}
.trust-emblem.d2 { --d: 200ms; }
/* Visit card ("Who's coming to your home") icon size */
.visit-item .trust-emblem {
width: 42px;
height: 42px;
}
.visit-item .trust-glyph {
width: 22px;
height: 22px;
}
/* ---------- Guarantee banner ---------- */
.guarantee {
padding-top: 0;
}
.guarantee-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
border-radius: var(--radius-xl);
background:
radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
linear-gradient(135deg, #0A5F99 0%, #08705A 100%);
box-shadow: 0 30px 60px -28px rgba(10, 95, 153, 0.55), var(--shadow-md);
color: #FFFFFF;
--shimmer: rgba(255, 255, 255, 0.18);
}
@media (min-width: 860px) {
.guarantee-card {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
min-height: 380px;
}
}
.guarantee-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: var(--space-7) var(--space-6);
}
@media (min-width: 860px) {
.guarantee-body {
padding: var(--space-7) var(--space-8);
}
}
.guarantee .eyebrow {
color: #D3ECFF;
}
.guarantee h2 {
color: #FFFFFF;
margin-bottom: var(--space-3);
}
.guarantee-lead {
margin: 0 0 var(--space-6);
font-size: var(--text-lg);
color: #E3F1FB;
max-width: 34ch;
}
.trust-emblem.seal {
width: 64px;
height: 64px;
margin-bottom: var(--space-5);
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #FFFFFF;
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.4);
}
.trust-emblem.seal::after {
border-color: rgba(255, 255, 255, 0.8);
}
.trust-emblem.seal .trust-glyph {
width: 32px;
height: 32px;
}
.guarantee-media {
position: relative;
min-height: 220px;
}
.guarantee-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Photo fades softly into the colour panel (no hard seam) */
.guarantee-media img {
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
}
@media (min-width: 860px) {
.guarantee-media img {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
}
.btn-light {
background: #FFFFFF;
color: #0A6EAE;
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}
.btn-light:hover {
background: #F1F7FC;
color: #085A8F;
}
.gs-1 { top: 22px; right: 46%; width: 18px; height: 18px; fill: #FFFFFF; z-index: 2; }
.gs-2 { bottom: 26px; left: 38%; width: 12px; height: 12px; fill: #BDF5E4; z-index: 2; }
/* ---------- Police check + ID: "Who's coming to your home" ---------- */
.visit-card {
margin-bottom: var(--space-6);
padding: var(--space-5);
}
.visit-title {
margin-bottom: var(--space-4);
font-size: var(--text-lg);
}
.visit-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
@media (min-width: 640px) {
.visit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.visit-item {
margin: 0;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.visit-item > img {
display: block;
width: 100%;
aspect-ratio: 14 / 9;
object-fit: cover;
}
.visit-item figcaption {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
}
.visit-item figcaption strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-base);
line-height: 1.3;
color: var(--fg1);
}
.visit-item figcaption > span > span {
display: block;
margin-top: 2px;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--fg2);
}
/* ---------- Motion: once, when scrolled into view ---------- */
@media (prefers-reduced-motion: no-preference) {
[data-animate].is-in.has-sheen::before { animation: sheen 1.3s 0.45s var(--ease) both; }
[data-animate].is-in .reveal-img { animation: img-in 1s var(--ease) both; }
[data-animate].is-in .trust-emblem { animation: emblem-pop 0.6s var(--d, 0ms) var(--ease) both; }
[data-animate].is-in .trust-emblem::after { animation: ring 1.2s calc(var(--d, 0ms) + 0.35s) ease-out both; }
[data-animate].is-in .trust-glyph > * { animation: draw 0.9s calc(var(--d, 0ms) + 0.15s) var(--ease) both; }
[data-animate].is-in .trust-glyph .glyph-check { animation: draw 0.45s calc(var(--d, 0ms) + 0.75s) var(--ease) both; }
.guarantee-card.is-in .sparkle { animation: twinkle 1.2s 0.9s var(--ease) 2 both; }
.guarantee-card.is-in .gs-2 { animation-delay: 1.2s; }
/* hover replays the glint */
.guarantee-card:hover::before,
.visit-card:hover::before { animation: sheen-again 1s var(--ease) both; }
}
@keyframes img-in { from { transform: scale(1.08); opacity: 0.4; } to { transform: none; opacity: 1; } }
/* =============================================================
18. BOOKING — glass & life
Section gets soft brand light + a faint dot grid so the glass
panels have depth. Selections spring, glint and glow; the total
pulses when it changes (the number itself updates instantly).
============================================================= */
.booking {
position: relative;
isolation: isolate;
background:
radial-gradient(46% 34% at 6% 10%, var(--aurora-2), transparent 70%),
radial-gradient(42% 32% at 96% 26%, var(--aurora-1), transparent 70%),
radial-gradient(54% 36% at 40% 100%, var(--aurora-3), transparent 70%),
var(--surface2);
}
.booking::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
background-size: 22px 22px;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
pointer-events: none;
}
.booking .shine-wrap .sparkle.bk-1 { top: -12px; right: -18px; width: 20px; height: 20px; }
/* ---------- Glass panels ---------- */
.calc-step,
.booking .booking-form,
.booking .visit-card,
.summary-card {
border: 1px solid var(--glass-card-border);
border-radius: var(--radius-xl);
background: var(--glass-card-solid);
box-shadow: var(--glass-card-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.calc-step,
.booking .booking-form,
.booking .visit-card,
.summary-card {
background: var(--glass-card);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
}
}
.calc-step {
margin-bottom: var(--space-5);
padding: var(--space-5) var(--space-4);
}
@media (min-width: 640px) {
.calc-step {
padding: var(--space-6);
}
}
/* Price summary: glowing gradient edge */
.summary-card {
border: 1.5px solid transparent;
background:
linear-gradient(var(--glass-card-solid), var(--glass-card-solid)) padding-box,
linear-gradient(135deg, var(--trust-edge-1), var(--trust-edge-2)) border-box;
box-shadow: 0 28px 56px -30px var(--media-glow), var(--glass-card-shadow);
}
.sum-spark { width: 16px; height: 16px; z-index: 3; }
.ss-1 { top: 16px; right: 18px; }
.ss-2 { top: 40px; right: 44px; width: 10px; height: 10px; fill: var(--accent2); }
/* ---------- Step numbers: gradient, turn into ✓ when done ---------- */
.step-num {
position: relative;
background: linear-gradient(135deg, var(--accent), var(--accent2));
box-shadow: 0 6px 14px -6px var(--emblem-glow);
transition: background 250ms var(--ease);
}
.is-done .step-num {
font-size: 0; /* hide the number, show the tick */
background: linear-gradient(135deg, var(--accent2), var(--accent2));
box-shadow: 0 6px 14px -6px var(--emblem2-glow);
}
.is-done .step-num::after {
content: "";
width: 6px;
height: 11px;
border: solid var(--on-accent);
border-width: 0 2.5px 2.5px 0;
transform: translateY(-1px) rotate(45deg);
}
/* ---------- Option cards: glassy, lift, spring + glint on pick ---------- */
.option-body {
overflow: hidden;
background: var(--option-bg);
transition:
border-color 160ms var(--ease),
background-color 160ms var(--ease),
box-shadow 200ms var(--ease),
transform 200ms var(--ease);
}
.option:hover .option-body {
transform: translateY(-2px);
box-shadow: 0 10px 22px -14px var(--emblem-glow);
}
.option input:checked + .option-body {
background: linear-gradient(135deg, var(--accent-soft), var(--option-bg) 75%);
box-shadow: inset 0 0 0 1px var(--accent), 0 12px 26px -14px var(--emblem-glow);
}
.option input:checked + .option-body .option-check {
border-color: transparent;
background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.option input:disabled + .option-body {
transform: none;
box-shadow: none;
}
/* glint band, parked off-card until a pick */
.option-body::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, var(--shimmer) 50%, transparent 65%);
transform: translateX(-120%);
pointer-events: none;
}
/* extras photos zoom gently */
.option-media {
transition: transform 450ms var(--ease), filter 120ms var(--ease);
}
.option:hover .option-media {
transform: scale(1.06);
}
/* ---------- Total: pulse on change ---------- */
.summary-total-value {
display: inline-block;
}
/* ---------- Form fields: soft glass ---------- */
.booking .input {
background-color: var(--option-bg); /* colour only: keeps the select arrow image */
}
.booking .input:focus {
background-color: var(--surface);
}
/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
/* "Instant" shimmers + sparkles when the heading scrolls into view
(overrides the hero's on-load timing) */
.booking .shine-text { animation: none; }
.booking .sparkle.bk-1 { animation: none; opacity: 0; }
.booking .section-head.is-in .shine-text { animation: shine 1.8s 0.3s var(--ease) both; }
.booking .section-head.is-in .sparkle.bk-1 { animation: twinkle 1.2s 0.9s var(--ease) 2 both; }
.booking .live-dot::after { animation: none; }
.booking .section-head.is-in .live-dot::after { animation: ping 1.5s 0.4s ease-out 3; }
/* picking an option: spring, glint, check pop (no fill-mode, so
hover styles take over again afterwards) */
.option input:checked + .option-body { animation: pick 380ms var(--ease); }
.option input:checked + .option-body::after { animation: glint 800ms var(--ease); }
.option input:checked + .option-body .option-check { animation: check-pop 420ms cubic-bezier(0.3, 1.5, 0.5, 1); }
/* a step completing: tick pops */
.is-done .step-num { animation: check-pop 420ms cubic-bezier(0.3, 1.5, 0.5, 1); }
/* summary: sparkles + sheen when the first price appears */
.sum-spark { animation: none; opacity: 0; }
.summary-card.has-price .sum-spark { animation: twinkle 1.2s var(--ease) 2 both; }
.summary-card.has-price .ss-2 { animation-delay: 0.3s; }
.summary-card.has-price::before { animation: sheen 1.2s var(--ease) both; }
.summary-card:hover::before { animation: sheen-again 1s var(--ease) both; }
/* total pulses each time it changes */
.summary-total-value.is-bump,
.booking-bar-total.is-bump { animation: bump 450ms var(--ease); }
}
@keyframes pick { 0% { transform: scale(0.97); } 55% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes glint { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes check-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes bump {
0% { transform: scale(0.96); text-shadow: none; }
40% { transform: scale(1.05); text-shadow: 0 0 24px var(--emblem-glow); }
100% { transform: none; text-shadow: none; }
}
/* =============================================================
19. SOLID BUTTONS + SITE-WIDE GLASS & LIFE
============================================================= */
/* ---------- Primary button: real, tactile ----------
Subtle top-to-bottom gradient, glossy top edge, defined rim,
coloured lift shadow, pressed state. Text contrast ≥ 4.75:1. */
.btn-primary {
background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
border: 1px solid var(--btn-edge);
color: var(--on-accent);
text-shadow: var(--btn-text-shadow);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
0 1px 2px rgba(16, 24, 40, 0.14),
0 10px 22px -10px var(--emblem-glow);
}
.btn-primary:hover {
background: linear-gradient(180deg, var(--btn-a-hover), var(--btn-b-hover));
color: var(--on-accent);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
0 2px 4px rgba(16, 24, 40, 0.14),
0 16px 30px -12px var(--emblem-glow);
}
.btn-primary:active {
transform: translateY(1px);
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, 0.22),
0 1px 2px rgba(16, 24, 40, 0.12);
}
/* Secondary: frosted glass */
.btn-secondary {
background: var(--glass-card-solid);
border-color: var(--glass-card-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(16, 24, 40, 0.08);
}
.btn-secondary:hover {
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 20px -12px var(--emblem-glow);
}
/* Outline: fills with the solid gradient on hover */
.btn-outline:hover {
background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
border-color: var(--btn-edge);
color: var(--on-accent);
box-shadow: 0 10px 22px -10px var(--emblem-glow);
}
/* ---------- Header CTA: same height as the nav track, with arrow ---------- */
.nav-track {
padding: 3px; /* 40px links + 3+3 + 2px border = 48px, matches CTA */
}
.nav-indicator {
top: 3px;
bottom: 3px;
}
.nav-cta {
min-height: 48px;
padding: 0 18px 0 20px;
font-size: var(--text-sm);
}
.nav-cta svg,
.header-cta svg {
width: 16px;
height: 16px;
}
@media (max-width: 767.98px) {
.nav-cta {
min-height: 52px;
font-size: var(--text-base);
}
}
/* ---------- Services: glass cards on soft brand light ---------- */
.services {
position: relative;
isolation: isolate;
background:
radial-gradient(38% 26% at 100% 4%, var(--aurora-1), transparent 70%),
radial-gradient(36% 24% at 0% 52%, var(--aurora-2), transparent 70%),
var(--bg);
}
.service-card {
background: var(--glass-card-solid);
border-color: var(--glass-card-border);
box-shadow: var(--glass-card-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.service-card {
background: var(--glass-card);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
}
}
/* Gradient icon tiles (always lit, brighter on hover) */
.service-card .icon-tile {
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px -8px var(--emblem-glow);
}
.service-card:hover .icon-tile {
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #FFFFFF;
transform: rotate(-6deg) scale(1.06);
}
.service-card .icon-tile {
transition: transform 300ms var(--ease), box-shadow 220ms var(--ease);
}
/* Glint across a service card on hover */
.service-card {
position: relative;
overflow: hidden;
}
.service-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 38%, var(--shimmer) 50%, transparent 62%);
transform: translateX(-120%);
pointer-events: none;
}
.sparkle.hd-1 { top: -12px; right: -18px; width: 20px; height: 20px; }
/* ---------- Thank-you / 404: glass card on brand light ---------- */
.page-message {
position: relative;
isolation: isolate;
background:
radial-gradient(40% 40% at 15% 20%, var(--aurora-2), transparent 70%),
radial-gradient(45% 40% at 85% 75%, var(--aurora-1), transparent 70%),
var(--bg);
}
.page-card {
position: relative;
border: 1.5px solid transparent;
background:
linear-gradient(var(--glass-card-solid), var(--glass-card-solid)) padding-box,
linear-gradient(135deg, var(--trust-edge-1), var(--trust-edge-2)) border-box;
box-shadow: 0 30px 60px -30px var(--media-glow), var(--glass-card-shadow);
}
.page-icon {
stroke-dasharray: 1;
}
.page-icon > * {
stroke-dasharray: 1;
}
.pc-1 { top: 22px; right: 26px; width: 20px; height: 20px; }
.pc-2 { top: 64px; left: 30px; width: 12px; height: 12px; fill: var(--accent2); }
.pc-3 { bottom: 28px; right: 40px; width: 14px; height: 14px; }
/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
/* Section headings shimmer when scrolled into view (not on page load) */
.section-head .shine-text { animation: none; }
.section-head .sparkle { animation: none; opacity: 0; }
.section-head.is-in .shine-text { animation: shine 1.8s 0.3s var(--ease) both; }
.section-head.is-in .sparkle { animation: twinkle 1.2s 0.9s var(--ease) 2 both; }
.section-head .live-dot::after { animation: none; }
.section-head.is-in .live-dot::after { animation: ping 1.5s 0.4s ease-out 3; }
/* Service cards: glint on hover */
.service-card:hover::after { animation: glint 900ms var(--ease); }
/* Thank-you / 404: icon draws itself, card glints, sparkles twinkle (on load) */
.page-icon > * { animation: draw 0.9s 0.2s var(--ease) both; }
.page-icon > :nth-child(2) { animation-duration: 0.5s; animation-delay: 0.9s; }
.page-card::before { animation: sheen 1.3s 0.6s var(--ease) both; }
.page-card .sparkle { animation: twinkle 1.2s var(--ease) 2 both; }
.pc-1 { animation-delay: 1.0s !important; }
.pc-2 { animation-delay: 1.3s !important; }
.pc-3 { animation-delay: 1.6s !important; }
}
/* =============================================================
20. LOGO — "the verified home"
Squircle tile (blue → teal, glossy top) with a roofline and a
bold check beneath it (= a verified home), plus a sparkle.
Wordmark: gradient "Verified", verified seal after "Cleaners".
On load: roof draws, check draws, sparkle twinkles, seal pops,
a light sweeps the tile. Hover replays the check + glint.
============================================================= */
.logo {
gap: 11px;
}
.logo-badge {
position: relative;
display: block;
flex: none;
width: 40px;
height: 40px;
border-radius: 13px;
overflow: hidden;
filter: drop-shadow(0 6px 12px var(--emblem-glow));
transition: transform 320ms var(--ease);
}
.logo:hover .logo-badge {
transform: rotate(-6deg) scale(1.06);
}
.logo-badge::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
transform: translateX(-130%);
pointer-events: none;
}
.logo .logo-mark {
display: block;
width: 40px;
height: 40px;
filter: none;
transform: none;
}
.lm-roof,
.lm-check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
}
.lm-check {
stroke-width: 3.6;
}
.lm-spark {
fill: #C9FBEA;
transform-box: fill-box;
transform-origin: center;
}
/* Wordmark */
.logo-name {
display: inline-flex;
align-items: center;
gap: 0.28em;
font-size: 1.1875rem;
letter-spacing: -0.022em;
}
.logo-name-accent {
color: var(--accent);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.logo-name-accent {
background: linear-gradient(100deg,
var(--accent) 0%, var(--accent2-text) 44%,
var(--shine-hi) 50%,
var(--accent) 56%, var(--accent2-text) 100%);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
.logo-seal {
flex: none;
width: 17px;
height: 17px;
margin-left: 1px;
}
.seal-shape {
fill: var(--accent2);
}
.seal-check {
fill: none;
stroke: #FFFFFF;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
}
/* ---------- Services: photo strip at the top of each card ---------- */
.service-media {
margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
overflow: hidden;
border-bottom: 1px solid var(--glass-card-border);
}
.service-media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 9 / 4;
object-fit: cover;
transition: transform 500ms var(--ease);
}
.service-card:hover .service-media img {
transform: scale(1.06);
}
@media (prefers-reduced-motion: no-preference) {
.lm-roof { animation: draw 0.7s 0.25s var(--ease) both; }
.lm-check { animation: draw 0.5s 0.8s var(--ease) both; }
.lm-spark { animation: twinkle 1.1s 1.2s var(--ease) 2 both; }
.logo-badge::after { animation: sheen 1.1s 1.5s var(--ease) both; }
.logo-name-accent { animation: shine 1.6s 0.9s var(--ease) both; }
.logo-seal { animation: seal-pop 0.5s 1.3s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.seal-check { animation: draw 0.4s 1.65s var(--ease) both; }
.logo:hover .lm-check { animation: draw-again 0.5s var(--ease) both; }
.logo:hover .lm-spark { animation: twinkle-again 1s var(--ease) both; }
.logo:hover .logo-badge::after { animation: sheen-again 0.9s var(--ease) both; }
}
@keyframes seal-pop { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.18) rotate(8deg); } 100% { transform: none; } }
/* Logo mark: house walls (added to the roof + check) */
.lm-walls {
fill: none;
stroke: #FFFFFF;
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
}
.lm-roof { stroke-width: 3; }
.lm-check { stroke-width: 3.2; }
@media (prefers-reduced-motion: no-preference) {
.lm-walls { animation: draw 0.6s 0.55s var(--ease) both; }
.lm-check { animation: draw 0.45s 1.05s var(--ease) both; }
}
/* =============================================================
21. REVIEWS + CTA BAND
Real Google reviews on glass cards; amber SVG stars pop in one
by one when each card scrolls into view. Dark navy CTA band
(distinct from the blue-teal Guarantee banner) with sparkles.
============================================================= */
.reviews {
padding-top: calc(var(--section-py) * 0.5);
background:
radial-gradient(40% 30% at 86% 38%, var(--aurora-1), transparent 70%),
radial-gradient(36% 28% at 10% 72%, var(--aurora-2), transparent 70%),
var(--bg);
}
/* ---------- Google rating badge ---------- */
.rating-badge {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0 0 var(--space-4);
padding: 10px 18px 10px 14px;
border: 1px solid var(--glass-card-border);
border-radius: var(--radius-full);
background: var(--glass-card-solid);
box-shadow: var(--glass-card-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.rating-badge {
background: var(--glass-card);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
}
.stars-row {
display: block;
width: 97px;
height: 18px;
}
.st {
fill: var(--warning);
transform-box: fill-box;
transform-origin: center;
}
.rating-stars .stars-row {
filter: drop-shadow(0 2px 6px rgba(217, 119, 6, 0.35));
}
.rating-text {
font-size: var(--text-sm);
color: var(--fg2);
}
.rating-text strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--fg1);
}
.rating-google {
font-weight: 600;
color: var(--fg1);
}
/* ---------- Review cards ---------- */
.reviews-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 760px) {
.reviews-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
}
}
.review-card {
--d: 0ms;
display: flex;
flex-direction: column;
gap: var(--space-4);
height: 100%;
margin: 0;
padding: var(--space-6);
border: 1px solid var(--glass-card-border);
border-radius: var(--radius-xl);
background: var(--glass-card-solid);
box-shadow: var(--glass-card-shadow);
transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.review-card {
background: var(--glass-card);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
}
}
.review-card.d2 { --d: 140ms; }
.review-card.d3 { --d: 280ms; }
.review-card:hover {
transform: translateY(-4px);
box-shadow: var(--trust-glow);
}
.review-quote {
position: absolute;
top: 22px;
right: 24px;
width: 44px;
height: 33px;
fill: var(--accent);
opacity: 0.12;
}
.review-stars .stars-row {
width: 86px;
height: 16px;
}
.review-text {
flex: 1;
margin: 0;
}
.review-text p {
margin: 0;
color: var(--fg2);
line-height: 1.7;
}
.review-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
.review-avatar {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #0E6FB5, #0A7F65); /* white text ≥ 5:1 */
color: #FFFFFF;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px -6px var(--emblem-glow);
}
.review-meta strong {
display: block;
font-size: var(--text-sm);
color: var(--fg1);
}
.review-meta > span {
display: block;
font-size: var(--text-xs);
color: var(--fg3);
}
/* ---------- CTA band ---------- */
.cta-band {
padding-top: 0;
background: var(--bg);
}
.cta-band-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
padding: var(--space-7) var(--space-6);
border-radius: var(--radius-xl);
background:
radial-gradient(60% 130% at 100% 0%, rgba(18, 196, 154, 0.35), transparent 60%),
radial-gradient(55% 120% at 0% 100%, rgba(61, 158, 222, 0.38), transparent 60%),
linear-gradient(135deg, #0B2A44 0%, #0A3F5E 100%);
box-shadow: 0 30px 60px -30px rgba(11, 42, 68, 0.6), var(--shadow-md);
color: #FFFFFF;
--shimmer: rgba(255, 255, 255, 0.14);
}
@media (min-width: 760px) {
.cta-band-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: var(--space-7) var(--space-8);
}
}
.cta-band-text {
position: relative;
z-index: 1;
}
.cta-band h2 {
margin: 0 0 6px;
font-size: var(--text-2xl);
color: #FFFFFF;
}
.cta-band p {
margin: 0;
font-size: var(--text-lg);
color: #D3ECFF;
}
.cta-band .btn {
position: relative;
z-index: 1;
flex: none;
}
.cb-1 { top: 22px; right: 32%; width: 18px; height: 18px; fill: #FFFFFF; z-index: 1; }
.cb-2 { bottom: 24px; left: 46%; width: 12px; height: 12px; fill: #BDF5E4; z-index: 1; }
.cb-3 { top: 34px; left: 22px; width: 10px; height: 10px; fill: #A5D8FF; z-index: 1; }
/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
/* stars pop in one by one */
.review-card.is-in .st,
.section-head.is-in .rating-stars .st { animation: star-pop 0.42s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.review-card.is-in .st-1 { animation-delay: calc(var(--d) + 0.15s); }
.review-card.is-in .st-2 { animation-delay: calc(var(--d) + 0.24s); }
.review-card.is-in .st-3 { animation-delay: calc(var(--d) + 0.33s); }
.review-card.is-in .st-4 { animation-delay: calc(var(--d) + 0.42s); }
.review-card.is-in .st-5 { animation-delay: calc(var(--d) + 0.51s); }
.section-head.is-in .rating-stars .st-1 { animation-delay: 0.10s; }
.section-head.is-in .rating-stars .st-2 { animation-delay: 0.19s; }
.section-head.is-in .rating-stars .st-3 { animation-delay: 0.28s; }
.section-head.is-in .rating-stars .st-4 { animation-delay: 0.37s; }
.section-head.is-in .rating-stars .st-5 { animation-delay: 0.46s; }
.review-card.is-in::before { animation: sheen 1.2s calc(var(--d) + 0.6s) var(--ease) both; }
.review-card:hover::before { animation: sheen-again 0.9s var(--ease) both; }
/* CTA band sparkles: only when it scrolls into view */
.cta-band .sparkle { animation: none; opacity: 0; }
.cta-band-inner.is-in .sparkle { animation: twinkle-again 1.2s 0.5s var(--ease) 2 both; }
.cta-band-inner.is-in .cb-2 { animation-delay: 0.8s; }
.cta-band-inner.is-in .cb-3 { animation-delay: 1.1s; }
.cta-band-inner:hover::before { animation: sheen-again 1s var(--ease) both; }
}
@keyframes star-pop {
0% { transform: scale(0) rotate(-40deg); opacity: 0; }
70% { transform: scale(1.25) rotate(8deg); opacity: 1; }
100% { transform: none; opacity: 1; }
}
/* =============================================================
22. WORDMARK LOGO (brand-kit master, inline vector)
✓-shaped "V", sparkle dot on the "i", tracked CLEANERS.
Colours switch for dark mode; check draws + sparkle twinkles.
============================================================= */
:root {
--logo-word: #0A6EAE;
--logo-check: #0A9B7A;
--logo-sub: #0F172A;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--logo-word: #FFFFFF;
--logo-check: #3DDCB0;
--logo-sub: #D6E4F0;
}
}
:root[data-theme="dark"] {
--logo-word: #FFFFFF;
--logo-check: #3DDCB0;
--logo-sub: #D6E4F0;
}
.logo {
gap: 0;
}
.logo-wordmark {
display: block;
width: auto;
height: 40px;
overflow: visible;
}
.wm-check {
fill: none;
stroke: var(--logo-check);
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
}
.wm-word { fill: var(--logo-word); }
.wm-sub { fill: var(--logo-sub); }
.wm-spark {
fill: var(--logo-check);
transform-box: fill-box;
transform-origin: center;
}
@media (max-width: 359.98px) {
.logo-wordmark { height: 36px; }
}
@media (prefers-reduced-motion: no-preference) {
.wm-check { animation: draw 0.7s 0.3s var(--ease) both; }
.wm-spark { animation: twinkle 1.1s 0.9s var(--ease) 2 both; }
.logo:hover .wm-check { animation: draw-again 0.55s var(--ease) both; }
.logo:hover .wm-spark { animation: twinkle-again 1s var(--ease) both; }
}
/* =============================================================
23. MOBILE / TABLET MENU — alive
Page dims + blurs behind; links slide in one by one with icon
tiles and chevrons; the current section is highlighted; rows
press on tap; solid CTA + trust line at the bottom.
============================================================= */
.nav-ico,
.nav-chev {
display: none;
}
.menu-scrim {
position: fixed;
inset: 0;
z-index: 99; /* just under the header */
background: rgba(15, 23, 42, 0.32);
opacity: 0;
visibility: hidden;
transition: opacity 250ms var(--ease), visibility 0s linear 250ms;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.menu-scrim {
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
}
.menu-scrim.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 250ms var(--ease), visibility 0s;
}
html.menu-open {
overflow: hidden;
}
@media (max-width: 767.98px) {
.nav-menu {
padding: 10px 10px 14px;
border-radius: 22px;
background: var(--surface);
box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.nav-list {
gap: 4px;
}
.nav-link {
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 0 12px 0 8px;
border-radius: 14px;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--fg1);
transition: background-color 160ms var(--ease), transform 120ms var(--ease);
}
.nav-link:active {
transform: scale(0.98);
}
.nav-link:hover {
background: var(--surface2);
}
.nav-ico {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent);
transition: background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.nav-ico svg {
width: 20px;
height: 20px;
}
.nav-label {
flex: 1;
}
.nav-chev {
display: block;
width: 18px;
height: 18px;
color: var(--fg3);
transition: transform 200ms var(--ease);
}
.nav-link:hover .nav-chev {
transform: translateX(3px);
}
/* current section */
.nav-link.is-active {
background: var(--accent-soft);
color: var(--accent);
}
.nav-link.is-active .nav-ico {
background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px -6px var(--emblem-glow);
}
.nav-link.is-active .nav-chev {
color: var(--accent);
}
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
.site-header.is-open .nav-list li,
.site-header.is-open .nav-cta {
animation: item-in 380ms var(--ease) both;
}
.site-header.is-open .nav-list li:nth-child(1) { animation-delay: 40ms; }
.site-header.is-open .nav-list li:nth-child(2) { animation-delay: 80ms; }
.site-header.is-open .nav-list li:nth-child(3) { animation-delay: 120ms; }
.site-header.is-open .nav-list li:nth-child(4) { animation-delay: 160ms; }
.site-header.is-open .nav-list li:nth-child(5) { animation-delay: 200ms; }
.site-header.is-open .nav-cta { animation-delay: 250ms; }
.site-header.is-open .nav-cta::after { animation: sweep-again 0.9s 0.55s var(--ease) both; }
.site-header.is-open .nav-link.is-active .nav-ico { animation: check-pop 420ms 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
}
@keyframes item-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
.logo-wordmark { height: 44px; }
}
/* =============================================================
24. CRISP — solid surfaces, defined edges, no haze
Modelled on the Guarantee banner: solid colours, sharp borders,
high contrast, tight shadows, no blur or colour washes.
(Light theme only; dark theme keeps its own tokens.)
============================================================= */
:root {
--aurora-1: transparent;
--aurora-2: transparent;
--aurora-3: transparent;
--glow-1: transparent;
--glow-2: transparent;
--glass-bg: #FFFFFF;
--glass-bg-strong: #FFFFFF;
--glass-card: #FFFFFF;
--glass-card-solid: #FFFFFF;
--option-bg: #FFFFFF;
--glass-hi: transparent;
--glass-border: #E2E8F0;
--glass-card-border: #E2E8F0;
--glass-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
--glass-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px -6px rgba(15, 23, 42, 0.12);
--glass-shadow-strong: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 20px -8px rgba(15, 23, 42, 0.18);
--media-glow: rgba(15, 23, 42, 0.22);
--trust-glow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 24px -10px rgba(15, 23, 42, 0.18);
}
/* No frosted blur anywhere (only the menu scrim keeps it) */
.header-inner,
.calc-step,
.booking .booking-form,
.booking .visit-card,
.summary-card,
.service-card,
.review-card,
.rating-badge,
.booking-bar {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* No dot-grid haze behind the calculator */
.booking::before {
display: none;
}
/* Solid section rhythm: white / light blue blocks */
.services {
background: var(--surface2);
}
/* Tight, defined shadows on the big visual blocks */
.hero-media {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 14px 30px -14px rgba(15, 23, 42, 0.30);
}
.summary-card {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px -14px rgba(15, 23, 42, 0.22);
}
/* Header: solid white bar, crisp hairline */
.header-inner {
background: var(--surface);
}
.header-inner::before {
display: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .header-inner { background: var(--surface); }
}
/* =============================================================
25. NAVIGATION — always visible (no hidden menu)
≥768px: full menu in the header bar (compact on tablets).
<768px: bottom tab bar (Home · Services · Pricing · About ·
Contact) in the thumb zone + a visible "Get a Quote" in the header.
============================================================= */
/* Tablets / small laptops: compact header menu */
@media (min-width: 768px) and (max-width: 1099.98px) {
.header-inner { gap: 10px; }
.nav-menu { gap: 8px; }
.nav-link { padding: 0 11px; font-size: 0.8125rem; }
.nav-cta { padding: 0 14px 0 16px; }
.logo-wordmark { height: 38px; }
}
@media (min-width: 768px) {
.header-actions { display: none; }
}
/* Phones: header shows logo + quote button; menu button retired */
@media (max-width: 767.98px) {
.nav-toggle { display: none !important; }
.header-actions { display: flex; }
.header-cta {
display: inline-flex;
min-height: 42px;
padding: 0 14px 0 16px;
font-size: var(--text-sm);
}
}
/* ---------- Bottom tab bar ---------- */
.tabbar {
display: none;
}
@media (max-width: 767.98px) {
.has-tabbar {
padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}
.tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 95;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 2px;
padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 14px -6px rgba(15, 23, 42, 0.14);
transition: transform 220ms var(--ease);
}
html.is-typing .tabbar {
transform: translateY(115%); /* out of the keyboard's way */
}
.tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 54px;
border-radius: 12px;
color: var(--fg2);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.1;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.tab:hover {
color: var(--fg1);
text-decoration: none;
}
.tab-ico {
display: grid;
place-items: center;
width: 52px;
height: 30px;
border-radius: 15px;
transition: background-color 200ms var(--ease), transform 120ms var(--ease);
}
.tab svg {
width: 22px;
height: 22px;
}
.tab:active .tab-ico {
transform: scale(0.9);
}
/* you are here */
.tab.is-active {
color: var(--accent);
}
.tab.is-active .tab-ico {
background: var(--accent-soft);
}
.tab:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* booking total bar sits just above the tab bar */
.booking-bar {
bottom: calc(66px + env(safe-area-inset-bottom, 0px));
border-bottom: 1px solid var(--border);
}
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
.tab.is-active .tab-ico { animation: tab-pop 320ms cubic-bezier(0.3, 1.5, 0.5, 1); }
.tabbar { animation: tabbar-in 500ms 0.3s var(--ease) backwards; } /* backwards: releases transform after playing, so .is-typing can slide it away */
}
@keyframes tab-pop { 0% { transform: scale(0.8); } 100% { transform: none; } }
@keyframes tabbar-in { from { transform: translateY(100%); } to { transform: none; } }
/* Scrolled: the header becomes one solid white band with a hairline,
so page content never peeks around the bar (crisp, not floating). */
.site-header {
transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.site-header.is-scrolled {
background: var(--surface);
box-shadow: 0 1px 0 var(--border), 0 6px 14px -10px rgba(15, 23, 42, 0.18);
pointer-events: auto;
}
.site-header.is-scrolled .header-inner {
border-color: transparent;
box-shadow: none;
}
/* =============================================================
26. ABOUT
Crisp credential cards (animated emblems), a solid blue-teal
promise card like the Guarantee banner, neighbourhood chips,
payment chips. No photos of people.
============================================================= */
.about {
background: var(--bg);
}
.about-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7);
}
@media (min-width: 900px) {
.about-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8);
align-items: start;
}
}
.about-h3 {
margin: 0 0 var(--space-4);
font-size: var(--text-xl);
}
/* ---------- Credentials ---------- */
.cred-list {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.cred-card {
--d: 0ms;
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--glass-card-shadow);
transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.cred-card.d2 { --d: 120ms; }
.cred-card.d3 { --d: 240ms; }
.cred-card.d4 { --d: 360ms; }
.cred-card:hover {
transform: translateY(-2px);
border-color: var(--trust-edge-1);
box-shadow: var(--trust-glow);
}
.cred-card .trust-emblem {
width: 48px;
height: 48px;
}
.cred-card .trust-glyph {
width: 24px;
height: 24px;
}
.cred-text strong {
display: block;
margin-bottom: 4px;
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: 1.3;
color: var(--fg1);
}
.cred-text > span {
display: block;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--fg2);
}
/* ---------- Promise (solid, like the Guarantee banner) ---------- */
.promise-card {
padding: var(--space-6);
border-radius: var(--radius-xl);
background:
radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
linear-gradient(135deg, #0A5F99 0%, #08705A 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 14px 30px -14px rgba(10, 95, 153, 0.45);
color: #FFFFFF;
--shimmer: rgba(255, 255, 255, 0.18);
}
.promise-card .about-h3 {
color: #FFFFFF;
}
.promise-card p {
position: relative;
z-index: 1;
margin: 0;
font-size: var(--text-lg);
line-height: 1.6;
color: #E3F1FB;
}
/* ---------- Service area + payment ---------- */
.about-block {
margin-top: var(--space-6);
}
.about-block > p {
margin: 0 0 var(--space-3);
}
.area-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 560px) and (max-width: 899.98px) {
.area-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.area-list li {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.25;
color: var(--fg1);
}
.area-list svg {
flex: none;
width: 16px;
height: 16px;
color: var(--accent2);
}
.pay-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.pay-list li {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--surface2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg1);
}
.pay-list svg {
width: 18px;
height: 18px;
color: var(--accent);
}
/* neighbourhood chips pop in one after another */
@media (prefers-reduced-motion: no-preference) {
.about-block.is-in .area-list li { animation: item-in 360ms var(--ease) both; }
.about-block.is-in .area-list li:nth-child(1) { animation-delay: 0.04s; }
.about-block.is-in .area-list li:nth-child(2) { animation-delay: 0.08s; }
.about-block.is-in .area-list li:nth-child(3) { animation-delay: 0.12s; }
.about-block.is-in .area-list li:nth-child(4) { animation-delay: 0.16s; }
.about-block.is-in .area-list li:nth-child(5) { animation-delay: 0.20s; }
.about-block.is-in .area-list li:nth-child(6) { animation-delay: 0.24s; }
.about-block.is-in .area-list li:nth-child(7) { animation-delay: 0.28s; }
.about-block.is-in .area-list li:nth-child(8) { animation-delay: 0.32s; }
.about-block.is-in .area-list li:nth-child(9) { animation-delay: 0.36s; }
.about-block.is-in .area-list li:nth-child(10) { animation-delay: 0.40s; }
.about-block.is-in .area-list li:nth-child(11) { animation-delay: 0.44s; }
.about-block.is-in .area-list li:nth-child(12) { animation-delay: 0.48s; }
.promise-card:hover::before { animation: sheen-again 1s var(--ease) both; }
}
/* =============================================================
27. HEADER — more life, still crisp
Brand hairline with a travelling spark, links slide in, icons
beside labels on wide screens, the sliding pill glints when it
lands, the quote button glows twice after load.
============================================================= */
.header-inner::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: -1px;
height: 2px;
border-radius: 2px;
background:
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) no-repeat,
linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent2) 82%, transparent);
background-size: 22% 100%, 100% 100%;
background-position: -30% 0, 0 0;
opacity: 0.85;
pointer-events: none;
}
.site-header.is-scrolled .header-inner::after {
left: 0;
right: 0;
opacity: 0.6;
}
/* Sliding pill: soft brand ring + glint band */
.nav-indicator {
overflow: hidden;
box-shadow: var(--nav-pill-shadow), inset 0 0 0 1px rgba(10, 110, 174, 0.14);
}
.nav-indicator::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(61, 158, 222, 0.28) 50%, transparent 70%);
transform: translateX(-120%);
}
.nav-link:hover {
color: var(--accent);
}
/* Icons beside the labels on wide screens (tablet stays compact) */
@media (min-width: 1100px) {
.nav-link {
gap: 7px;
padding: 0 15px 0 13px;
}
.nav-link .nav-ico {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
color: var(--fg3);
transition: color 200ms var(--ease), transform 250ms var(--ease);
}
.nav-link .nav-ico svg {
width: 16px;
height: 16px;
}
.nav-link:hover .nav-ico,
.nav-link.is-active .nav-ico {
color: var(--accent);
}
.nav-link:hover .nav-ico {
transform: translateY(-1px) scale(1.12);
}
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
.header-inner::after { animation: hairline-spark 1.6s 0.9s var(--ease) both; }
.nav-list li { animation: item-in 420ms var(--ease) backwards; }
.nav-list li:nth-child(1) { animation-delay: 0.20s; }
.nav-list li:nth-child(2) { animation-delay: 0.26s; }
.nav-list li:nth-child(3) { animation-delay: 0.32s; }
.nav-list li:nth-child(4) { animation-delay: 0.38s; }
.nav-list li:nth-child(5) { animation-delay: 0.44s; }
.nav-cta { animation: item-in 420ms 0.52s var(--ease) backwards, cta-glow 1.4s 1.4s ease-in-out 2; } /* backwards: hover lift still works afterwards */
.nav-indicator.is-glint::after { animation: glint 700ms var(--ease); }
}
@keyframes hairline-spark {
from { background-position: -30% 0, 0 0; }
to { background-position: 130% 0, 0 0; }
}
@keyframes cta-glow {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -10px var(--emblem-glow); }
50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 6px rgba(10, 110, 174, 0.14), 0 14px 30px -10px var(--emblem-glow); }
}
/* =============================================================
28. FAQ — native accordion (works without JS)
============================================================= */
.faq {
background: var(--surface2);
}
.faq-wrap {
max-width: 820px;
}
.faq-list {
display: grid;
gap: var(--space-3);
}
.faq-item {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--glass-card-shadow);
transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.faq-item[open] {
border-color: var(--trust-edge-1);
box-shadow: var(--trust-glow);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 60px;
padding: var(--space-4) var(--space-5);
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
line-height: 1.35;
color: var(--fg1);
cursor: pointer;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
color: var(--accent);
}
.faq-chev {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
transition: transform 250ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.faq-chev svg {
width: 18px;
height: 18px;
}
.faq-item[open] .faq-chev {
transform: rotate(180deg);
background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
color: #FFFFFF;
}
.faq-answer {
padding: 0 var(--space-5) var(--space-5);
}
.faq-answer p {
margin: 0;
max-width: 68ch;
}
@media (prefers-reduced-motion: no-preference) {
.faq-item[open] .faq-answer { animation: item-in 280ms var(--ease); }
}
/* =============================================================
29. CONTACT
============================================================= */
.contact {
background: var(--bg);
}
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 900px) {
.contact-grid {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--space-7);
align-items: start;
}
}
.contact-cards {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.contact-card {
display: flex;
align-items: center;
gap: var(--space-4);
min-height: 76px;
padding: var(--space-4) var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--glass-card-shadow);
color: var(--fg1);
transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
a.contact-card:hover {
transform: translateY(-2px);
border-color: var(--trust-edge-1);
box-shadow: var(--trust-glow);
text-decoration: none;
color: var(--fg1);
}
.contact-ico {
display: grid;
place-items: center;
flex: none;
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px -6px var(--emblem-glow);
}
.contact-ico svg {
width: 22px;
height: 22px;
}
.contact-card strong {
display: block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg3);
}
.contact-card strong + span {
display: block;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--fg1);
word-break: break-word;
}
.contact-form-card {
padding: var(--space-6);
}
.contact-form-title {
margin: 0 0 var(--space-5);
font-size: var(--text-xl);
}
.contact-submit {
width: 100%;
}
@media (min-width: 640px) {
.contact-submit {
width: auto;
min-width: 220px;
}
}
/* success variant of the shared alert */
.form-alert.is-success {
border-color: var(--accent2);
background: var(--accent-soft);
}
/* =============================================================
30. FOOTER — dark navy, reverse logo (like the CTA band)
============================================================= */
.site-footer {
--logo-word: #FFFFFF;
--logo-check: #3DDCB0;
--logo-sub: #D6E4F0;
margin-top: 0;
padding-top: var(--space-8);
padding-bottom: var(--space-6);
background:
radial-gradient(50% 80% at 100% 0%, rgba(18, 196, 154, 0.16), transparent 60%),
linear-gradient(160deg, #0B2A44 0%, #0A3550 100%);
color: #C9D8E6;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 640px) {
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.footer-grid {
grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
}
.footer-logo {
display: inline-block;
margin-bottom: var(--space-4);
}
.footer-wordmark {
height: 48px;
}
.footer-brand p {
max-width: 36ch;
margin: 0;
color: #C9D8E6;
}
.footer-h {
margin: 0 0 var(--space-3);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #FFFFFF;
}
.footer-col ul {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-col li {
color: #C9D8E6;
line-height: 1.5;
}
.footer-col a {
display: inline-flex;
align-items: center;
min-height: 32px;
color: #E3F1FB;
}
.footer-col a:hover {
color: #FFFFFF;
}
.site-footer a:focus-visible {
outline-color: #3DDCB0;
}
/* =============================================================
31. SECTION TRANSITIONS (View Transitions API)
The page root cross-moves; header and tab bar are named, so they
are captured separately and stay perfectly still.
============================================================= */
.tabbar { view-transition-name: tabbar; }
.booking-bar { view-transition-name: booking-bar; }
@media (prefers-reduced-motion: no-preference) {
html[data-nav-dir="down"]::view-transition-old(root) { animation: vt-out-up 360ms cubic-bezier(0.4, 0, 1, 1) both; }
html[data-nav-dir="down"]::view-transition-new(root) { animation: vt-in-up 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
html[data-nav-dir="up"]::view-transition-old(root) { animation: vt-out-down 360ms cubic-bezier(0.4, 0, 1, 1) both; }
html[data-nav-dir="up"]::view-transition-new(root) { animation: vt-in-down 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
/* arrival cues */
.site-header.is-navigating .header-inner::after { animation: hairline-spark-again 0.9s var(--ease) both; }
.section-head.is-arriving .shine-text { animation: shine-again 1.2s var(--ease) both; }
.section-head.is-arriving .live-dot::after { animation: ping-again 1.2s ease-out 1; }
}
@keyframes vt-out-up { to { opacity: 0; transform: translateY(-48px) scale(0.985); } }
@keyframes vt-in-up { from { opacity: 0; transform: translateY(72px); } }
@keyframes vt-out-down { to { opacity: 0; transform: translateY(48px) scale(0.985); } }
@keyframes vt-in-down { from { opacity: 0; transform: translateY(-72px); } }
@keyframes hairline-spark-again { from { background-position: -30% 0, 0 0; } to { background-position: 130% 0, 0 0; } }
@keyframes shine-again { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes ping-again { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.2); opacity: 0; } }
/* sections receive focus on arrival: no visible box for mouse users */
section[tabindex="-1"]:focus {
outline: none;
}
/* =============================================================
32. HERO SLIDESHOW
Diagonal wipe reveal + slow cinematic zoom; story-style bars.
============================================================= */
.hero-slides .slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
}
.hero-slides .slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-slides .slide.is-active {
z-index: 2;
opacity: 1;
visibility: visible;
}
.hero-slides .slide.is-leaving {
z-index: 1;
opacity: 1;
visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
.hero-slides .slide.is-active { animation: slide-wipe 1s cubic-bezier(0.65, 0, 0.35, 1) both; }
.hero-slides .slide.is-active.is-first { animation: none; }
.hero-slides .slide.is-active img { animation: ken-burns 6.5s linear both; }
.hero-slides.is-paused .slide.is-active img { animation-play-state: paused; }
}
@keyframes slide-wipe {
from { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
to { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); }
}
@keyframes ken-burns {
from { transform: scale(1.09); }
to { transform: scale(1); }
}
/* Controls: glass pill on the photo (top-right) */
.slide-controls {
position: absolute;
top: 16px;
right: 16px;
z-index: 4;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 4px 4px 10px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--radius-full);
background: rgba(15, 23, 42, 0.42);
-webkit-backdrop-filter: blur(10px) saturate(160%);
backdrop-filter: blur(10px) saturate(160%);
}
.slide-dots {
display: flex;
align-items: center;
gap: 2px;
}
.slide-dot {
display: grid;
place-items: center;
width: 30px;
height: 28px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.slide-track {
display: block;
position: relative;
width: 24px;
height: 4px;
overflow: hidden;
border-radius: 4px;
background: rgba(255, 255, 255, 0.38);
}
.slide-bar {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: inherit;
background: #FFFFFF;
}
.slide-dot.is-active .slide-bar { width: 100%; }
/* the clock: 4.5 s per slide (JS advances on animationend) */
@media (prefers-reduced-motion: no-preference) {
.slide-dot.is-active .slide-bar { width: 0; animation: bar-fill 4.5s linear forwards; }
.hero-slides.is-paused .slide-dot.is-active .slide-bar { animation-play-state: paused; }
}
@keyframes bar-fill { from { width: 0; } to { width: 100%; } }
.slide-dot:focus-visible,
.slide-pause:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 1px;
border-radius: 8px;
}
.slide-pause {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
color: #FFFFFF;
cursor: pointer;
transition: background-color 160ms var(--ease);
}
.slide-pause:hover {
background: rgba(255, 255, 255, 0.3);
}
.slide-pause svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.slide-pause .ico-play,
.slide-pause.is-play .ico-pause {
display: none;
}
.slide-pause.is-play .ico-play {
display: block;
}
/* =============================================================
33. FOOTER — dark glass that glitters
============================================================= */
.site-footer {
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(40% 60% at 8% 0%, rgba(61, 158, 222, 0.30), transparent 70%),
radial-gradient(38% 70% at 100% 30%, rgba(18, 196, 154, 0.24), transparent 70%),
radial-gradient(50% 60% at 50% 120%, rgba(61, 158, 222, 0.22), transparent 70%),
linear-gradient(160deg, #0A2238 0%, #0B2F4A 100%);
}
/* glowing brand line along the top, with a travelling spark */
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background:
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) no-repeat,
linear-gradient(90deg, transparent, #3D9EDE 20%, #3DDCB0 80%, transparent);
background-size: 18% 100%, 100% 100%;
background-position: -30% 0, 0 0;
box-shadow: 0 0 18px rgba(61, 220, 176, 0.45);
}
.glass-dark {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-xl);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px -18px rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
}
.footer-grid {
gap: var(--space-4);
}
.footer-brand,
.footer-col {
padding: var(--space-5);
transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.footer-brand:hover,
.footer-col:hover {
border-color: rgba(61, 220, 176, 0.35);
}
/* links: an arrow slides in on hover */
.footer-col a {
position: relative;
transition: color 160ms var(--ease), transform 200ms var(--ease);
}
.footer-col a::before {
content: "\2192";
position: absolute;
left: -16px;
opacity: 0;
color: #3DDCB0;
transition: opacity 160ms var(--ease), transform 200ms var(--ease);
transform: translateX(-4px);
}
.footer-col a:hover {
transform: translateX(14px);
text-decoration: none;
}
.footer-col a:hover::before {
opacity: 1;
transform: none;
}
.site-footer .sparkle { z-index: 1; fill: #FFFFFF; }
.fs-1 { top: 36px; right: 12%; width: 18px; height: 18px; }
.fs-2 { top: 48%; left: 4%; width: 12px; height: 12px; fill: #3DDCB0 !important; }
.fs-3 { bottom: 64px; right: 32%; width: 10px; height: 10px; fill: #A5D8FF !important; }
@media (prefers-reduced-motion: no-preference) {
.site-footer .sparkle { animation: none; opacity: 0; }
.site-footer:has(.footer-inner.is-in) .sparkle { animation: twinkle-again 1.3s 0.4s var(--ease) 2 both; }
.site-footer:has(.footer-inner.is-in) .fs-2 { animation-delay: 0.8s; }
.site-footer:has(.footer-inner.is-in) .fs-3 { animation-delay: 1.2s; }
.site-footer:has(.footer-inner.is-in)::before { animation: hairline-spark-again 1.6s 0.2s var(--ease) both; }
.footer-inner.is-in .glass-dark { animation: item-in 500ms var(--ease) backwards; }
.footer-inner.is-in .footer-grid > :nth-child(1) { animation-delay: 0.10s; }
.footer-inner.is-in .footer-grid > :nth-child(2) { animation-delay: 0.18s; }
.footer-inner.is-in .footer-grid > :nth-child(3) { animation-delay: 0.26s; }
}
/* =============================================================
34. HERO SLIDESHOW — five transitions, no visible controls
============================================================= */
.hero-slides:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 4px;
}
.hero-slides .slide.is-leaving img {
transition: filter 900ms var(--ease);
filter: brightness(0.85);
}
@media (prefers-reduced-motion: no-preference) {
.hero-slides .slide.is-active.fx-wipe { animation: fx-wipe 1.05s cubic-bezier(0.65, 0, 0.35, 1) both; }
.hero-slides .slide.is-active.fx-aperture { animation: fx-aperture 1.1s cubic-bezier(0.65, 0, 0.35, 1) both; }
.hero-slides .slide.is-active.fx-curtain { animation: fx-curtain 1s cubic-bezier(0.76, 0, 0.24, 1) both; }
.hero-slides .slide.is-active.fx-dissolve { animation: fx-dissolve 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-slides .slide.is-active.fx-glide { animation: fx-glide 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* glide: the outgoing photo drifts the other way (parallax) */
.hero-slides[data-fx="fx-glide"] .slide.is-leaving { animation: fx-glide-out 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes fx-wipe {
from { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
to { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); }
}
@keyframes fx-aperture {
from { clip-path: circle(0% at 62% 42%); }
to { clip-path: circle(140% at 62% 42%); }
}
@keyframes fx-curtain {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes fx-dissolve {
from { opacity: 0; transform: scale(1.12); filter: blur(8px); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes fx-glide {
from { transform: translateX(100%); }
to { transform: none; }
}
@keyframes fx-glide-out {
from { transform: none; }
to { transform: translateX(-28%); }
}
/* Visually hidden until focused (keyboard / screen-reader pause control) */
.sr-only-focusable:not(:focus) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hero-slides .slide-pause:focus {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
width: 40px;
height: 40px;
background: rgba(15, 23, 42, 0.55);
}
/* =============================================================
35. FOOTER — spotlight glass (pro-grade interactions)
A mint glow follows the pointer across each panel and its edge
lights up where the pointer is; links glow into lit pills;
icon tiles; glass back-to-top; giant faint wordmark.
============================================================= */
.glass-dark {
position: relative;
isolation: isolate;
--mx: 50%;
--my: 50%;
transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
/* inner spotlight */
.glass-dark::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: radial-gradient(280px circle at var(--mx) var(--my), rgba(61, 220, 176, 0.16), rgba(61, 158, 222, 0.06) 40%, transparent 65%);
opacity: 0;
transition: opacity 300ms var(--ease);
pointer-events: none;
}
/* edge glow that follows the pointer (column panels) */
.footer-grid > .glass-dark::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: radial-gradient(220px circle at var(--mx) var(--my), rgba(61, 220, 176, 0.95), rgba(61, 158, 222, 0.5) 35%, transparent 65%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0;
transition: opacity 300ms var(--ease);
pointer-events: none;
}
.glass-dark:hover::before,
.footer-grid > .glass-dark:hover::after {
opacity: 1;
}
.footer-brand:hover,
.footer-col:hover,
/* headings: small caps with a short brand bar */
.footer-h {
position: relative;
padding-bottom: 10px;
}
.footer-h::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 28px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #3D9EDE, #3DDCB0);
transition: width 300ms var(--ease);
}
.footer-col:hover .footer-h::after {
width: 48px;
}
/* links + items: glowing lit pills on hover */
.footer-col a::before {
content: none;
}
.footer-col a,
.f-item {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 38px;
margin-left: -10px;
padding: 4px 12px 4px 10px;
border-radius: 12px;
color: #E3F1FB;
transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.footer-col a:hover {
transform: translateX(4px);
background: rgba(61, 220, 176, 0.10);
color: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(61, 220, 176, 0.28), 0 0 20px -4px rgba(61, 220, 176, 0.45);
text-decoration: none;
}
span.f-item {
color: #C9D8E6;
}
/* icon tiles */
.f-ico {
display: grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 9px;
background: rgba(255, 255, 255, 0.06);
color: #3DDCB0;
transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 250ms var(--ease);
}
.f-ico svg {
width: 16px;
height: 16px;
}
.f-item:hover .f-ico {
background: rgba(61, 220, 176, 0.18);
box-shadow: 0 0 16px -2px rgba(61, 220, 176, 0.6);
transform: rotate(-6deg) scale(1.08);
}
/* back to top */
.to-top {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 4px 6px 4px 16px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.06);
color: #E3F1FB;
font-size: var(--text-sm);
font-weight: 600;
transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease);
}
.to-top:hover {
background: rgba(61, 220, 176, 0.12);
color: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(61, 220, 176, 0.35), 0 0 24px -4px rgba(61, 220, 176, 0.5);
text-decoration: none;
}
.to-top-ico {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(180deg, #3D9EDE, #0A6EAE);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.to-top-ico svg {
width: 16px;
height: 16px;
}
@media (max-width: 639.98px) {
.to-top { margin-top: var(--space-2); }
}
/* giant faint wordmark: background image, see section 36 */
@media (prefers-reduced-motion: no-preference) {
.to-top:hover .to-top-ico svg { animation: nudge-up 700ms var(--ease) 2; }
}
@keyframes nudge-up {
0%, 100% { transform: none; }
50% { transform: translateY(-3px); }
}
.footer-watermark .wm-check {
fill: none !important; /* the check is an open stroke, never filled */
}
.footer-col .f-item {
max-width: 100%;
}
.footer-col .f-item > span:last-child {
min-width: 0;
overflow-wrap: anywhere;
}
/* =============================================================
36. SITE-WIDE GLOW SYSTEM (footer features, applied with care)
- Spotlight: only on clickable elements (no false affordances).
- Glow line + travelling spark: dark call-to-action panels.
- Faint wordmark: large empty backgrounds only (never behind the
calculator, forms or prices). All text stays ≥ 4.5:1 over it.
============================================================= */
/* Smoothly animatable spotlight strength */
@property --spot-a {
syntax: "";
inherits: false;
initial-value: 0;
}
.spot[data-spotlight] {
--mx: 50%;
--my: 50%;
--spot-a: 0;
background-image: radial-gradient(300px circle at var(--mx) var(--my),
rgb(10 110 174 / calc(var(--spot-a) * 0.09)),
rgb(10 155 122 / calc(var(--spot-a) * 0.05)) 45%,
transparent 70%);
transition: --spot-a 300ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.spot[data-spotlight]:hover,
.spot[data-spotlight]:focus-within {
--spot-a: 1;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .spot[data-spotlight] {
background-image: radial-gradient(300px circle at var(--mx) var(--my),
rgb(61 158 222 / calc(var(--spot-a) * 0.14)),
rgb(18 196 154 / calc(var(--spot-a) * 0.07)) 45%,
transparent 70%);
}
}
/* touch screens: no cursor to follow */
@media (hover: none) {
.spot[data-spotlight] { background-image: none; }
}
/* ---------- Glowing top line with a travelling spark ---------- */
.glow-line {
position: relative;
}
.glow-line::after {
content: "";
position: absolute;
top: 0;
left: 6%;
right: 6%;
z-index: 3;
height: 2px;
border-radius: 2px;
background:
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) no-repeat,
linear-gradient(90deg, transparent, #3D9EDE 20%, #3DDCB0 80%, transparent);
background-size: 20% 100%, 100% 100%;
background-position: -30% 0, 0 0;
box-shadow: 0 0 16px rgba(61, 220, 176, 0.5);
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.glow-line.is-in::after { animation: hairline-spark-again 1.6s 0.3s var(--ease) both; }
.glow-line:hover::after { animation: line-spark-hover 1.2s var(--ease) both; }
}
@keyframes line-spark-hover {
from { background-position: -30% 0, 0 0; }
to { background-position: 130% 0, 0 0; }
}
/* ---------- Faint wordmark: shared image, opacity baked in ---------- */
/* Light sections: About (top-right, beside the heading), FAQ (behind
the heading). Positioned in empty space, behind all content. */
.about,
.faq {
position: relative;
isolation: isolate;
overflow-x: clip; /* watermark may bleed past the edge */
}
.about::before,
.faq::before {
content: "";
position: absolute;
z-index: -1;
background: url("../images/brand/watermark-ink.svg") no-repeat center / contain;
pointer-events: none;
}
.about::before {
top: 40px;
right: -4vw;
width: min(760px, 58vw);
aspect-ratio: 2.79;
}
.faq::before {
top: 28px;
left: 50%;
width: min(920px, 92vw);
aspect-ratio: 2.79;
transform: translateX(-50%);
opacity: 0.7; /* sits on the grey band: lighter than About */
}
/* Dark panels: white wordmark, placed away from body text */
.cta-band-inner {
background:
url("../images/brand/watermark-white.svg") no-repeat right -40px center / auto 150%,
radial-gradient(60% 130% at 100% 0%, rgba(18, 196, 154, 0.35), transparent 60%),
radial-gradient(55% 120% at 0% 100%, rgba(61, 158, 222, 0.38), transparent 60%),
linear-gradient(135deg, #0B2A44 0%, #0A3F5E 100%);
}
/* Footer: same shared image instead of an inline copy */
.site-footer {
background:
url("../images/brand/watermark-white.svg") no-repeat center bottom -2.2vw / min(1180px, 96vw) auto,
radial-gradient(40% 60% at 8% 0%, rgba(61, 158, 222, 0.30), transparent 70%),
radial-gradient(38% 70% at 100% 30%, rgba(18, 196, 154, 0.24), transparent 70%),
radial-gradient(50% 60% at 50% 120%, rgba(61, 158, 222, 0.22), transparent 70%),
linear-gradient(160deg, #0A2238 0%, #0B2F4A 100%);
}
/* Thank-you / 404: brand mark behind the message card */
.page-message {
background:
url("../images/brand/watermark-ink.svg") no-repeat center 78% / min(1000px, 96vw) auto,
radial-gradient(40% 40% at 15% 20%, var(--aurora-2), transparent 70%),
radial-gradient(45% 40% at 85% 75%, var(--aurora-1), transparent 70%),
var(--bg);
}
/* Dark theme: the ink mark would vanish on dark backgrounds */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .about::before,
:root:not([data-theme="light"]) .faq::before {
background-image: url("../images/brand/watermark-white.svg");
opacity: 0.6;
}
}
/* Phones: keep backgrounds calm and text-first */
@media (max-width: 639.98px) {
.about::before,
.faq::before {
display: none;
}
}
/* =============================================================
37. CONTACT v2: "Get in Touch" column, copy email, counter;
FAQ now follows Contact, so the two swap section colours to
keep the white / grey rhythm (About white > Contact grey > FAQ white).
============================================================= */
.contact { background: var(--surface2); }
.faq { background: var(--bg); }
.contact-info-title {
margin: 0 0 var(--space-4);
font-size: var(--text-xl);
}
.contact-text {
flex: 1;
min-width: 0;
}
/* plain text, easy to select and copy */
.contact-card strong + span {
-webkit-user-select: text;
user-select: text;
}
.copy-btn {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--surface);
color: var(--accent);
font: 600 var(--text-sm) / 1 var(--font-body);
cursor: pointer;
transition: background-color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease);
}
.copy-btn svg {
width: 16px;
height: 16px;
}
.copy-btn:hover {
border-color: var(--trust-edge-1);
background: var(--accent-soft);
box-shadow: var(--trust-glow);
}
.copy-btn:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.copy-btn.is-copied {
border-color: var(--accent2);
color: var(--accent2);
}
/* message counter */
.char-count {
justify-content: flex-end;
font-variant-numeric: tabular-nums;
}
.char-count.is-near {
color: var(--fg1);
font-weight: 600;
}
/* FAQ accordion: JS animates the height; keep content clipped meanwhile */
.faq-item.is-animating {
overflow: hidden;
}
/* chevron returns as soon as a close starts, not when it ends */
.faq-item[open].is-closing .faq-chev {
transform: none;
background: var(--accent-soft);
color: var(--accent);
}
/* phones: address on its own line, Copy button underneath it */
@media (max-width: 519.98px) {
.contact-card:has(.copy-btn) {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
column-gap: var(--space-4);
row-gap: var(--space-3);
}
.contact-card:has(.copy-btn) .copy-btn {
grid-column: 2;
justify-self: start;
margin-left: 0;
}
.contact-card strong + span { word-break: normal; overflow-wrap: anywhere; }
}
/* =============================================================
38. PHONE: 613-854-5560 (call or text), always one tap away
Desktop ≥1240: icon + "Call or text / number" beside Get a Quote.
768–1239: round icon button (number in its accessible name).
Phones: round icon button beside the header quote button.
============================================================= */
.header-phone {
display: inline-flex;
align-items: center;
gap: 10px;
flex: none;
min-height: 44px;
padding: 3px 14px 3px 3px;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--surface);
color: var(--fg1);
text-decoration: none;
transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}
.header-phone:hover {
border-color: var(--trust-edge-1);
background: var(--accent-soft);
box-shadow: var(--trust-glow);
text-decoration: none;
color: var(--fg1);
}
.header-phone:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.header-phone-ico {
display: grid;
place-items: center;
flex: none;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(180deg, var(--accent2), #087A60);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.header-phone-ico svg {
width: 18px;
height: 18px;
}
.header-phone-text {
display: grid;
line-height: 1.15;
}
.header-phone-kicker {
font-size: var(--text-xs);
font-weight: 600;
color: var(--fg3);
}
.header-phone-num {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* icon-only sizes */
.header-phone.is-compact { display: none; }
@media (max-width: 1239.98px) {
.header-phone { padding: 2px; }
.header-phone-text { display: none; }
.header-phone-ico { width: 40px; height: 40px; }
}
@media (max-width: 767.98px) {
.nav-menu .header-phone { display: none; }
.header-phone.is-compact { display: inline-flex; }
.header-actions { gap: 8px; align-items: center; }
}
/* hero call button */
.hero-call-kicker {
font-weight: 500;
opacity: 0.85;
}
.hero-call-text {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* contact: Call / Text actions */
.contact-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: none;
}
a.copy-btn {
text-decoration: none;
}
a.copy-btn:hover {
text-decoration: none;
color: var(--accent);
}
@media (max-width: 519.98px) {
.contact-card:has(.contact-actions) {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
column-gap: var(--space-4);
row-gap: var(--space-3);
}
.contact-card .contact-actions { grid-column: 2; }
}
/* contact column is narrow 900–1099: actions drop under the number */
@media (min-width: 900px) and (max-width: 1099.98px) {
.contact-card:has(.contact-actions) { flex-wrap: wrap; }
.contact-card .contact-actions { margin-left: calc(46px + var(--space-4)); }
}
.page-help {
margin-top: var(--space-2);
color: var(--fg2);
}
/* =============================================================
CTA band wordmark: whole mark fits inside the band, never cropped
============================================================= */
/* centred in the gap between the heading (ends ~48%) and the button (starts ~76%) */
.cta-band-inner {
background-position: 66% center, 0 0, 0 0, 0 0;
background-size: min(27%, 320px) auto, auto, auto, auto;
}
/* phones: stacked layout has no empty area, so no wordmark (text first) */
@media (max-width: 759.98px) {
.cta-band-inner {
background-size: 0 0, auto, auto, auto;
}
}
/* =============================================================
39. FOOTER v3: Brand · Quick Links · Why Choose Us, + bottom bar
Near-black navy (same family as the dark theme), glass panels
with the pointer glow, faint wordmark, darker full-width bar.
============================================================= */
.site-footer {
padding-bottom: 0;
background:
url("../images/brand/watermark-white.svg") no-repeat center bottom 72px / min(1180px, 96vw) auto,
radial-gradient(40% 60% at 8% 0%, rgba(61, 158, 222, 0.20), transparent 70%),
radial-gradient(38% 70% at 100% 30%, rgba(18, 196, 154, 0.14), transparent 70%),
linear-gradient(160deg, #070D18 0%, #0A1322 100%);
}
.footer-inner {
padding-bottom: calc(var(--space-7) + 3vw);
}
.footer-grid {
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
.footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.2fr); }
.footer-brand { grid-column: auto; }
}
.footer-tagline {
margin: 0 0 var(--space-4);
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: #FFFFFF !important;
}
.footer-contact,
.footer-trust {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-brand .f-item {
max-width: 100%;
}
.footer-brand .f-item > span:last-child {
min-width: 0;
overflow-wrap: anywhere;
}
.footer-brand a.f-item:hover {
transform: translateX(4px);
background: rgba(61, 220, 176, 0.10);
color: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(61, 220, 176, 0.28), 0 0 20px -4px rgba(61, 220, 176, 0.45);
text-decoration: none;
}
.f-select {
-webkit-user-select: text;
user-select: text;
}
.f-note {
color: #A9BDD0;
font-size: var(--text-sm);
}
.footer-trust .f-item {
color: #D6E4F0;
}
.footer-trust .f-ico svg {
stroke-width: 2.6;
}
/* bottom bar: full width, a step darker */
.footer-bar {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(2, 6, 14, 0.55);
}
.footer-bar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-5);
padding-top: var(--space-4);
padding-bottom: var(--space-4);
font-size: var(--text-sm);
}
.footer-bar p {
margin: 0;
color: #A9BDD0;
}
.footer-bar-end {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-5);
}
@media (max-width: 639.98px) {
.footer-bar-inner,
.footer-bar-end {
flex-direction: column;
justify-content: center;
text-align: center;
}
.to-top { margin-top: 0; }
}
/* =============================================================
40. LEGAL PAGES (privacy.html): readable long-form text
============================================================= */
.legal {
padding-top: calc(var(--header-h) + var(--space-7));
padding-bottom: var(--section-py);
background: var(--surface2);
}
.legal-wrap {
max-width: 820px;
}
.legal-card {
padding: clamp(var(--space-5), 4vw, var(--space-8));
}
.legal-card h1 {
margin: var(--space-2) 0 var(--space-1);
font-size: var(--text-3xl);
}
.legal-updated {
margin: 0 0 var(--space-5);
font-size: var(--text-sm);
color: var(--fg3);
}
.legal-card h2 {
margin: var(--space-7) 0 var(--space-3);
font-size: var(--text-xl);
}
.legal-card h3 {
margin: var(--space-5) 0 var(--space-2);
font-size: var(--text-lg);
}
.legal-card p,
.legal-card li {
max-width: 68ch;
color: var(--fg2);
}
.legal-card ul {
padding-left: 1.25em;
}
.legal-card li + li {
margin-top: var(--space-2);
}
.legal-card abbr {
text-decoration: underline dotted;
cursor: help;
}
.legal-card .page-actions {
margin-top: var(--space-7);
}
/* footer polish: solid bar (wordmark never behind small text),
hover motion only on real links, no stray sparkle beside links */
.footer-bar {
background: #04080F;
}
span.f-item:hover .f-ico {
transform: none;
background: rgba(255, 255, 255, 0.06);
box-shadow: none;
}
@media (max-width: 999.98px) {
.site-footer .fs-2 { display: none; }
}
@media (max-width: 639.98px) {
.site-footer {
background-position: center bottom 190px, 0 0, 0 0, 0 0, 0 0;
}
}
/* bar spans the full footer width (undo the footer's .bleed padding) */
.footer-bar {
margin-left: calc(-1 * var(--gutter-l));
margin-right: calc(-1 * var(--gutter-r));
padding-left: var(--gutter-l);
padding-right: var(--gutter-r);
}
/* =============================================================
41. FORM SUCCESS PANELS (replace the form after sending)
============================================================= */
.form-success {
display: grid;
justify-items: center;
gap: var(--space-3);
padding: var(--space-7) var(--space-6);
text-align: center;
border-color: var(--accent2);
}
.form-success[hidden] {
display: none;
}
.form-success:focus {
outline: none;
}
.form-success:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 4px;
}
.form-success-ico {
width: 56px;
height: 56px;
color: var(--accent2);
}
.form-success h3 {
margin: 0;
font-size: var(--text-2xl);
}
.form-success p {
margin: 0;
max-width: 44ch;
color: var(--fg2);
}
.form-success-next {
font-size: var(--text-sm);
}
@media (prefers-reduced-motion: no-preference) {
.form-success:not([hidden]) { animation: item-in 420ms var(--ease) both; }
.form-success:not([hidden]) .form-success-ico { animation: check-pop 600ms 120ms var(--ease) both; }
}
/* booking notes counter turns bold near the limit */
.char-count.is-near .num {
color: var(--fg1);
font-weight: 600;
}
.legal-nav {
margin-bottom: var(--space-2);
font-size: var(--text-sm);
color: var(--fg3);
}
.legal-nav a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
/* =============================================================
42. CONSENT CHECKBOX (booking form, required)
============================================================= */
.consent-field {
margin-top: var(--space-5);
}
.field .consent { /* beats the generic .field label rule */
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-height: 44px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface2);
color: var(--fg1);
font-weight: 500;
line-height: 1.5;
cursor: pointer;
transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.field .consent:hover {
border-color: var(--trust-edge-1);
}
.consent input {
flex: none;
width: 22px;
height: 22px;
margin: 1px 0 0;
accent-color: var(--accent);
cursor: pointer;
}
.consent:has(input:checked) {
border-color: var(--accent2);
background: var(--accent-soft);
}
.consent:has(input:focus-visible) {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.consent:has(input[aria-invalid="true"]) {
border-color: var(--danger);
background: var(--danger-soft);
}
/* =============================================================
43. SERVICES v2: rich cards with an expandable "What's included"
Cards align to the top so opening one never stretches its
neighbours; the details use native (keyboard, screen
readers, find-in-page all work without JS).
============================================================= */
.services-grid {
align-items: start;
}
.service-card {
height: auto;
container-type: inline-size;
}
.service-tagline {
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
color: var(--accent2-text);
}
.service-card .service-desc {
margin-bottom: var(--space-4);
}
/* price + button sit right under the toggle */
.service-card .service-price {
margin-top: 0;
}
/* ---------- expandable details ---------- */
.svc-more {
margin: 0 0 var(--space-2);
border-top: 1px solid var(--border);
}
.svc-more summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 48px;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
color: var(--accent);
cursor: pointer;
list-style: none;
}
.svc-more summary::-webkit-details-marker {
display: none;
}
.svc-more summary:hover {
color: var(--accent-hover);
}
.svc-more summary:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.svc-more-chev {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent-soft);
transition: transform 250ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.svc-more-chev svg {
width: 16px;
height: 16px;
}
.svc-more[open] .svc-more-chev {
transform: rotate(180deg);
background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
color: #FFFFFF;
}
.svc-more[open].is-closing .svc-more-chev {
transform: none;
background: var(--accent-soft);
color: var(--accent);
}
.svc-more.is-animating {
overflow: hidden;
}
.svc-more-body {
display: grid;
gap: var(--space-4);
padding: var(--space-2) 0 var(--space-4);
font-size: var(--text-sm);
color: var(--fg2);
}
.svc-more-body p {
margin: 0;
}
.svc-h {
margin: var(--space-2) 0 calc(-1 * var(--space-2));
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg1);
}
/* checklist */
.svc-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.svc-list li {
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.svc-check {
flex: none;
width: 18px;
height: 18px;
margin-top: 0.15em;
padding: 2px;
border-radius: 50%;
background: var(--accent2);
color: #FFFFFF;
stroke-width: 3;
}
.svc-list strong {
color: var(--fg1);
}
/* recurring discount chips */
.svc-discounts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.svc-discounts span {
padding: 6px 12px;
border: 1px solid var(--trust-edge-2);
border-radius: var(--radius-full);
background: var(--surface);
font-size: var(--text-xs);
font-weight: 600;
color: var(--accent2-text);
}
.svc-discounts strong {
color: var(--fg1);
}
.svc-fine {
font-size: var(--text-xs);
color: var(--fg3);
}
/* add-on price rows */
.svc-addons {
display: grid;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.svc-addons li {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding: 8px 12px;
}
.svc-addons li + li {
border-top: 1px solid var(--border);
}
.svc-addons strong {
font-variant-numeric: tabular-nums;
color: var(--fg1);
}
/* notes / tip / callout */
.svc-note {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius);
background: var(--surface2);
color: var(--fg2);
}
.svc-note-ico {
flex: none;
width: 18px;
height: 18px;
margin-top: 0.1em;
color: var(--accent);
}
.svc-note.is-tip {
background: var(--accent-soft);
}
.svc-note.is-callout {
border: 1px solid var(--warning); /* fallbacks: Safari < 16.2 */
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
background: color-mix(in srgb, var(--warning) 9%, var(--surface));
}
.svc-note.is-callout .svc-note-ico {
color: var(--warning-text);
}
/* move-in / move-out sub-cards: side by side when the card is wide */
.svc-split {
display: grid;
gap: var(--space-3);
}
@container (min-width: 440px) {
.svc-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.svc-sub {
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface2);
}
.svc-sub .svc-h {
margin: 0 0 6px;
}
/* host benefits */
.svc-stats {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.svc-stats li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius);
background: var(--accent-soft);
font-weight: 600;
color: var(--fg1);
}
.svc-stat-ico {
flex: none;
width: 30px;
height: 30px;
padding: 6px;
border-radius: 9px;
background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
color: #FFFFFF;
}
/* tag pills */
.svc-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.svc-pills li {
padding: 5px 11px;
border: 1px solid var(--trust-edge-1);
border-radius: var(--radius-full);
background: var(--accent-soft);
font-size: var(--text-xs);
font-weight: 600;
color: var(--accent);
}
.svc-pills.is-quiet li {
border-color: var(--border);
background: var(--surface);
color: var(--fg2);
}
/* numbered steps */
.svc-steps {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: step;
}
.svc-steps li {
display: flex;
gap: 10px;
counter-increment: step;
}
.svc-steps li::before {
content: counter(step);
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font-size: var(--text-xs);
font-weight: 700;
}
.svc-ideal {
padding-top: var(--space-3);
border-top: 1px dashed var(--border);
}
.svc-ideal strong {
color: var(--fg1);
}
/* ---------- "No Matter Which Service You Choose" ---------- */
.always {
margin-top: var(--space-7);
padding: clamp(var(--space-5), 3vw, var(--space-7));
border: 1px solid var(--glass-card-border);
border-radius: var(--radius-xl);
background: var(--glass-card-solid);
box-shadow: var(--glass-card-shadow);
}
.always-head {
margin-bottom: var(--space-5);
text-align: center;
}
.always-head h3 {
margin: 0;
font-size: var(--text-2xl);
}
.always-head p {
margin: 4px 0 0;
color: var(--fg3);
}
.always-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4) var(--space-5);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 640px) {
.always-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
.always-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.always-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.always-ico {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 13px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -8px var(--emblem-glow);
}
.always-ico svg {
width: 22px;
height: 22px;
}
.always-item strong {
display: block;
margin-bottom: 2px;
font-family: var(--font-display);
color: var(--fg1);
}
.always-item strong + span {
display: block;
font-size: var(--text-sm);
color: var(--fg2);
}
@media (prefers-reduced-motion: no-preference) {
.always.is-in .always-ico { animation: check-pop 480ms cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.always.is-in .always-item:nth-child(2) .always-ico { animation-delay: 0.08s; }
.always.is-in .always-item:nth-child(3) .always-ico { animation-delay: 0.16s; }
.always.is-in .always-item:nth-child(4) .always-ico { animation-delay: 0.24s; }
.always.is-in .always-item:nth-child(5) .always-ico { animation-delay: 0.32s; }
.always.is-in .always-item:nth-child(6) .always-ico { animation-delay: 0.40s; }
}
/* closed cards line up: descriptions share a minimum height in multi-column layouts */
@media (min-width: 640px) {
.service-card .service-desc { min-height: 5lh; }
}
@media (min-width: 960px) and (max-width: 1099.98px) {
.service-card .service-desc { min-height: 6lh; }
}
/* titles wrap to two lines in the narrower column widths; reserve both lines there */
@media (min-width: 640px) and (max-width: 767.98px), (min-width: 960px) and (max-width: 1199.98px) {
.service-card h3 { min-height: 2lh; }
}
/* =============================================================
44. HERO TRUST LINE: insured + police-checked, next to the
Google rating (moved off the photo, where it blended in)
============================================================= */
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.hero-trust li {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 4px 14px 4px 5px;
border: 1px solid var(--trust-edge-1);
border-radius: var(--radius-full);
background: var(--accent-soft);
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg1);
}
.hero-trust-ico {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, var(--emblem-hi), var(--accent) 72%);
color: #FFFFFF;
box-shadow: 0 4px 10px -4px var(--emblem-glow);
}
.hero-trust-ico svg {
width: 16px;
height: 16px;
}
@media (prefers-reduced-motion: no-preference) {
.hero-trust li { animation: item-in 480ms 0.5s var(--ease) backwards; }
.hero-trust li + li { animation-delay: 0.62s; }
}
/* =============================================================
45. CONTACT — footer-style glass
Deep navy band (same family as the footer), a dark glass "Get in
Touch" panel with the pointer spotlight + edge glow, glass lit-pill
rows and buttons, and a frosted white form card (typing stays
crisp and high-contrast). All text ≥ 4.5:1 on its background.
============================================================= */
.contact.contact-glass {
position: relative;
isolation: isolate;
overflow: hidden;
color: #C9D8E6;
background:
radial-gradient(40% 50% at 5% 0%, rgba(61, 158, 222, 0.28), transparent 70%),
radial-gradient(38% 60% at 100% 40%, rgba(18, 196, 154, 0.20), transparent 70%),
linear-gradient(160deg, #070D18 0%, #0B1A2E 100%);
}
/* glowing brand line along the top, like the footer */
.contact.contact-glass::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #3D9EDE 25%, #3DDCB0 75%, transparent);
opacity: 0.85;
}
/* heading on navy: light text, gradient re-tuned for the dark band */
.contact-glass .section-head {
--accent: #66B4E8;
--accent2-text: #3DDCB0;
--shine-hi: #E6F6FF;
}
.contact-glass .section-head h2 { color: #FFFFFF; }
.contact-glass .section-head .lead { color: #C9D8E6; }
.contact-glass .section-head .eyebrow { color: #8CC8F0; }
.contact-glass .section-head a { color: #8CC8F0; }
.contact-glass .section-head a:hover { color: #FFFFFF; }
/* ---------- Get in Touch: dark glass panel ---------- */
.contact-glass .contact-info {
padding: var(--space-5);
}
.contact-glass .contact-info:hover {
border-color: rgba(61, 220, 176, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 44px -22px rgba(0, 0, 0, 0.75), 0 0 36px -12px rgba(61, 220, 176, 0.35);
}
/* edge glow that follows the pointer (same as the footer panels) */
.contact-glass .contact-info::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: radial-gradient(220px circle at var(--mx) var(--my), rgba(61, 220, 176, 0.95), rgba(61, 158, 222, 0.5) 35%, transparent 65%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0;
transition: opacity 300ms var(--ease);
pointer-events: none;
}
.contact-glass .contact-info:hover::after { opacity: 1; }
.contact-glass .contact-info-title {
position: relative;
padding-bottom: 10px;
color: #FFFFFF;
}
.contact-glass .contact-info-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #3D9EDE, #3DDCB0);
transition: width 300ms var(--ease);
}
.contact-glass .contact-info:hover .contact-info-title::after { width: 56px; }
/* rows: glass lit pills */
.contact-glass .contact-card {
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.04);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
color: #E3F1FB;
transition: background-color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.contact-glass .contact-card:hover {
border-color: rgba(61, 220, 176, 0.32);
background: rgba(61, 220, 176, 0.08);
box-shadow: inset 0 0 0 1px rgba(61, 220, 176, 0.12), 0 0 22px -6px rgba(61, 220, 176, 0.45);
}
.contact-glass .contact-card strong { color: #A9BDD0; }
.contact-glass .contact-card strong + span { color: #FFFFFF; }
.contact-glass .contact-ico {
background: linear-gradient(180deg, #3D9EDE, #0A6EAE);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 18px -4px rgba(61, 158, 222, 0.6);
}
/* Copy / Call / Text: glass buttons that glow */
.contact-glass .copy-btn,
.contact-glass a.copy-btn {
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.07);
color: #E3F1FB;
}
.contact-glass .copy-btn:hover,
.contact-glass a.copy-btn:hover {
border-color: rgba(61, 220, 176, 0.55);
background: rgba(61, 220, 176, 0.14);
color: #FFFFFF;
box-shadow: 0 0 20px -4px rgba(61, 220, 176, 0.6);
}
.contact-glass .copy-btn:focus-visible { outline-color: #3DDCB0; }
.contact-glass .copy-btn.is-copied { border-color: #3DDCB0; color: #3DDCB0; }
.contact-glass a:focus-visible { outline-color: #3DDCB0; }
/* ---------- Form: frosted white glass with a glowing top line ---------- */
.contact-glass .contact-form-card {
--mx: 50%;
--my: 0%;
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
box-shadow: inset 0 1px 0 #FFFFFF, 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 0 50px -20px rgba(61, 220, 176, 0.35);
}
.contact-glass .contact-form-card::before {
content: "";
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, #3D9EDE 20%, #3DDCB0 80%, transparent);
box-shadow: 0 0 14px rgba(61, 220, 176, 0.55);
}
/* soft light that follows the pointer inside the form */
.contact-glass .contact-form-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(360px circle at var(--mx) var(--my), rgba(61, 158, 222, 0.08), transparent 70%);
pointer-events: none;
}
/* success panel sits on the navy band too */
.contact-glass .form-success {
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.96);
}
/* dark theme: the form card follows the dark surface, still glassy */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .contact-glass .contact-form-card,
:root:not([data-theme="light"]) .contact-glass .form-success {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(24, 35, 56, 0.86);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -28px rgba(0, 0, 0, 0.8), 0 0 50px -20px rgba(61, 220, 176, 0.3);
}
}
:root[data-theme="dark"] .contact-glass .contact-form-card,
:root[data-theme="dark"] .contact-glass .form-success {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(24, 35, 56, 0.86);
}
@media (max-width: 639.98px) {
.contact-glass .contact-info { padding: var(--space-4); }
}
/* =============================================================
46. CONTACT — compact glass panel
Smaller rows, Copy / Call / Text beside the value, and the panel
stretches to the form's height on desktop (both end on one line).
============================================================= */
.contact-glass .contact-info {
display: flex;
flex-direction: column;
padding: 20px;
}
.contact-glass .contact-info-title {
margin-bottom: 14px;
font-size: var(--text-lg);
}
.contact-glass .contact-cards {
gap: 10px;
}
/* one compact row: icon · label + value · actions (overrides the stacked layouts) */
.contact-glass .contact-card,
.contact-glass .contact-card:has(.copy-btn),
.contact-glass .contact-card:has(.contact-actions) {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
min-height: 0;
padding: 10px 12px;
border-radius: 12px;
}
.contact-glass .contact-ico {
flex: none;
width: 36px;
height: 36px;
border-radius: 10px;
}
.contact-glass .contact-ico svg {
width: 18px;
height: 18px;
}
.contact-glass .contact-text {
flex: 1;
min-width: 0;
}
.contact-glass .contact-card strong {
font-size: var(--text-xs);
line-height: 1.3;
}
.contact-glass .contact-card strong + span {
font-size: 0.9375rem;
line-height: 1.35;
overflow-wrap: normal;
word-break: normal;
}
/* email + phone stay on one line */
.contact-glass .contact-card:has(.copy-btn) strong + span {
white-space: nowrap;
}
.contact-glass .contact-card .copy-btn,
.contact-glass .contact-card .contact-actions {
flex: none;
margin-left: auto;
grid-column: auto;
}
.contact-glass .contact-actions {
display: flex;
gap: 6px;
}
.contact-glass .copy-btn {
min-height: 36px;
padding: 0 12px;
gap: 5px;
font-size: var(--text-xs);
}
.contact-glass .copy-btn svg {
width: 14px;
height: 14px;
}
/* quick-price strip pinned to the bottom of the panel */
.contact-quick {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.contact-glass .contact-cards + .sr-only + .contact-quick,
.contact-glass .contact-cards ~ .contact-quick {
margin-top: auto;
}
.contact-quick p {
margin: 0;
font-size: var(--text-sm);
color: #C9D8E6;
}
.contact-quick strong {
display: block;
font-family: var(--font-display);
color: #FFFFFF;
}
.contact-quick .btn {
min-height: 42px;
padding: 0 16px;
font-size: var(--text-sm);
}
/* desktop: both panels share one height */
@media (min-width: 900px) {
.contact-glass .contact-grid {
align-items: stretch;
}
.contact-glass .contact-cards {
margin-bottom: 18px;
}
}
/* small phones: Copy / Call / Text become 44px icon buttons (touch target) beside the value;
their words stay available to screen readers */
@media (max-width: 519.98px) {
.contact-glass .copy-btn {
width: 44px;
min-height: 44px;
padding: 0;
justify-content: center;
}
.contact-glass .copy-btn svg {
width: 17px;
height: 17px;
}
.contact-glass .copy-btn .copy-label,
.contact-glass a.copy-btn > span:not(.sr-only) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.contact-glass .contact-info { padding: 16px; }
}
.contact-glass .contact-actions {
flex-wrap: nowrap;
}
/* narrow two-column range: slightly tighter buttons so Call + Text fit beside the number */
@media (min-width: 900px) and (max-width: 1023.98px) {
.contact-glass .copy-btn { padding: 0 9px; }
.contact-glass .contact-card { gap: 10px; }
}
/* quick-price strip as a small mint glass card */
.contact-quick {
padding: 14px 16px;
border: 1px solid rgba(61, 220, 176, 0.28);
border-radius: 14px;
background: linear-gradient(135deg, rgba(61, 220, 176, 0.10), rgba(61, 158, 222, 0.08));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.contact-quick-ico {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #3DDCB0, #3D9EDE);
color: #0B1220;
box-shadow: 0 0 22px -6px rgba(61, 220, 176, 0.7);
}
.contact-quick-ico svg { width: 20px; height: 20px; }
/* phones/tablets: compact strip, icon hidden to save space */
@media (max-width: 899.98px) {
.contact-quick-ico { display: none; }
.contact-glass .contact-cards ~ .contact-quick { margin-top: 12px; }
}
/* desktop: rows stay grouped at the top; the price card fills the rest,
so both panels end level without empty gaps */
@media (min-width: 900px) {
.contact-quick {
flex: 1;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 14px;
margin-top: 0;
padding: 20px;
}
.contact-quick strong {
margin-bottom: 4px;
font-size: var(--text-lg);
}
.contact-quick p {
max-width: 36ch;
}
}
/* =============================================================
47. HOW IT WORKS (3 steps) + small additions from the site audit
============================================================= */
.how {
background: var(--bg);
}
.how-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
counter-reset: how;
}
@media (min-width: 760px) {
.how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.how-step {
position: relative;
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--glass-card-shadow);
counter-increment: how;
}
.how-step::before {
content: counter(how);
position: absolute;
top: var(--space-5);
right: var(--space-5);
font-family: var(--font-display);
font-size: 2.25rem;
font-weight: 800;
line-height: 1;
color: var(--accent-soft);
-webkit-text-stroke: 1px var(--trust-edge-1);
}
.how-ico {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: var(--space-4);
border-radius: 14px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -8px var(--emblem-glow);
}
.how-ico svg { width: 24px; height: 24px; }
.how-step h3 {
margin: 0 0 var(--space-2);
font-size: var(--text-lg);
}
.how-step p {
margin: 0;
color: var(--fg2);
}
@media (prefers-reduced-motion: no-preference) {
.how-steps.is-in .how-step { animation: item-in 450ms var(--ease) backwards; }
.how-steps.is-in .how-step:nth-child(2) { animation-delay: 0.1s; }
.how-steps.is-in .how-step:nth-child(3) { animation-delay: 0.2s; }
}
/* booking: postal code outside Ottawa (informational, not an error) */
.area-hint {
color: var(--warning-text);
}
/* thank-you: what happens next */
.next-steps {
max-width: 40ch;
margin: var(--space-4) auto;
padding-left: 1.3em;
text-align: left;
color: var(--fg2);
}
.next-steps li + li { margin-top: var(--space-2); }
.next-steps strong { color: var(--fg1); }
.page-small {
font-size: var(--text-sm);
color: var(--fg3);
}
/* step cards are list items: normal wrapping reads evenly in narrow columns */
.how-step,
.how-step p {
text-wrap: wrap;
}
/* =============================================================
48. BATHROOMS (calculator step 1)
============================================================= */
.baths-field {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px dashed var(--border);
}
.baths-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
}
.baths-select {
width: auto;
min-width: 190px;
}
.baths-hint {
flex: 1 1 220px;
margin: 0;
}
/* =============================================================
49. BOOKING: custom-quote details + terms note
============================================================= */
.custom-details {
margin: 0;
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface2);
}
.custom-details[hidden] { display: none; }
.custom-details legend {
padding: 0 6px;
font-weight: 700;
color: var(--fg1);
}
.consent-terms {
display: block; /* a sentence with a link: let it flow (field-hint is a flex row) */
margin-top: var(--space-2);
}
/* =============================================================
50. REFERRAL, TEXT BUTTON, AREA PAGES
============================================================= */
.refer { background: var(--bg); }
.refer-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-items: center;
padding: clamp(var(--space-5), 4vw, var(--space-7));
border: 1.5px solid transparent;
border-radius: var(--radius-xl);
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
linear-gradient(135deg, var(--trust-edge-1), var(--trust-edge-2)) border-box;
box-shadow: var(--glass-card-shadow);
}
@media (min-width: 860px) {
.refer-card { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); }
}
.refer-copy h2 { margin: 4px 0 var(--space-3); }
.refer-steps {
display: grid;
gap: 8px;
margin: var(--space-4) 0;
padding-left: 1.3em;
color: var(--fg2);
}
.refer-steps strong { color: var(--fg1); }
.refer-fine {
margin: 0;
font-size: var(--text-sm);
color: var(--fg3);
}
.refer-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: var(--space-6) var(--space-4);
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #FFFFFF;
box-shadow: 0 18px 40px -18px var(--emblem-glow);
}
.refer-amount { font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.25rem); font-weight: 800; line-height: 1; }
.refer-plus { font-size: 1.75rem; font-weight: 700; opacity: 0.8; }
.summary-referral { color: var(--accent2-text); font-weight: 600; }
/* floating Text us button */
.text-fab {
position: fixed;
right: max(16px, env(safe-area-inset-right, 0px));
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
z-index: 60;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 52px;
padding: 0 18px 0 14px;
border-radius: var(--radius-full);
background: linear-gradient(180deg, var(--accent2), #087A60);
color: #FFFFFF;
font-weight: 700;
box-shadow: 0 12px 28px -10px rgba(8, 122, 96, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: transform 200ms var(--ease), opacity 200ms var(--ease), visibility 0s;
}
.text-fab:hover { color: #FFFFFF; text-decoration: none; transform: translateY(-2px); }
.text-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.text-fab svg { width: 22px; height: 22px; }
/* phones: sit above the bottom tab bar, icon-only to save space */
@media (max-width: 767.98px) {
.has-tabbar .text-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.text-fab { width: 52px; padding: 0; justify-content: center; }
.text-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
.text-fab.is-hidden,
.is-typing .text-fab {
opacity: 0;
visibility: hidden;
transition: opacity 200ms var(--ease), visibility 0s linear 200ms;
}
@media print { .text-fab { display: none; } }
/* area chips are links */
.area-list a { display: contents; color: inherit; }
.area-list li:has(a):hover { border-color: var(--trust-edge-1); }
.area-list a span { text-decoration: underline; text-decoration-color: var(--trust-edge-1); text-underline-offset: 3px; }
/* neighbourhood pages */
.area-cta { margin: var(--space-4) 0 var(--space-2); }
.area-services { display: grid; gap: 10px; padding: 0; list-style: none; }
.area-services li { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); }
.area-services strong { color: var(--fg1); }
.area-services span { display: block; font-size: var(--text-sm); color: var(--fg3); }
.area-near a { font-weight: 600; }
.header-tel { display: none; }
@media (min-width: 640px) { .header-tel { display: inline-flex; } }
/* Keyboard focus (WCAG 2.4.11): on phones the fixed tab bar covers the
bottom of the screen, so focused fields scroll in above it. */
@media (max-width: 767.98px) {
html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* =============================================================
52. BRIGHT THEME (Nov 2026)
The site is light for every visitor (data-theme="light" on ;
a clean, airy look is the norm for home-service brands). Former
deep-navy bands become bright, tinted glass; the footer stays the
one dark anchor at the end of the page. All text ≥ 4.5:1.
============================================================= */
/* ---------- Call-to-action band: airy sky-to-mint panel ---------- */
.cta-band-inner {
border: 1px solid #D5E5F2;
background-image:
url("../images/brand/watermark-ink.svg"),
radial-gradient(60% 130% at 100% 0%, rgba(18, 196, 154, 0.20), transparent 60%),
radial-gradient(55% 120% at 0% 100%, rgba(61, 158, 222, 0.22), transparent 60%),
linear-gradient(135deg, #EEF6FD 0%, #EAF8F3 100%);
box-shadow: 0 24px 48px -30px rgba(10, 110, 174, 0.45), inset 0 1px 0 #FFFFFF;
--shimmer: rgba(255, 255, 255, 0.7);
}
.cta-band h2 { color: var(--fg1); }
.cta-band p { color: var(--fg2); }
.cta-band .cb-1 { fill: var(--accent); }
.cta-band .cb-2 { fill: #12C49A; }
.cta-band .cb-3 { fill: #3D9EDE; }
.cta-band .glow-line::after,
.cta-band-inner.glow-line::after { opacity: 0.9; filter: hue-rotate(0deg) saturate(1.4); background: linear-gradient(90deg, transparent, #3D9EDE 30%, #12C49A 70%, transparent) no-repeat; }
/* ---------- Contact: bright tinted band + light glass ---------- */
.contact.contact-glass {
color: var(--fg2);
background:
radial-gradient(42% 55% at 0% 0%, rgba(61, 158, 222, 0.16), transparent 70%),
radial-gradient(40% 60% at 100% 35%, rgba(18, 196, 154, 0.14), transparent 70%),
linear-gradient(180deg, #F3F8FD 0%, #EEF7F4 100%);
}
.contact.contact-glass::before { opacity: 0.6; }
.contact-glass .section-head {
--accent: #0A6EAE;
--accent2-text: #08785F;
--shine-hi: #3D9EDE;
}
.contact-glass .section-head h2 { color: var(--fg1); }
.contact-glass .section-head .lead { color: var(--fg2); }
.contact-glass .section-head .eyebrow { color: var(--accent); }
.contact-glass .section-head a { color: var(--accent); }
.contact-glass .section-head a:hover { color: var(--accent-hover, #085A8F); }
/* Get in Touch: frosted white glass instead of dark glass */
.contact-glass .contact-info.glass-dark {
border: 1px solid #DCE8F3;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
box-shadow: inset 0 1px 0 #FFFFFF, 0 22px 46px -30px rgba(15, 23, 42, 0.30);
}
.contact-glass .contact-info.glass-dark:hover {
border-color: rgba(18, 196, 154, 0.45);
box-shadow: inset 0 1px 0 #FFFFFF, 0 24px 48px -28px rgba(15, 23, 42, 0.32), 0 0 36px -14px rgba(18, 196, 154, 0.45);
}
.contact-glass .contact-info.glass-dark::before {
background: radial-gradient(280px circle at var(--mx) var(--my), rgba(18, 196, 154, 0.10), rgba(61, 158, 222, 0.05) 40%, transparent 65%);
}
.contact-glass .contact-info-title { color: var(--fg1); }
.contact-glass .contact-card {
border-color: #E2EBF4;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
color: var(--fg2);
}
.contact-glass .contact-card:hover {
border-color: rgba(18, 196, 154, 0.45);
background: #F4FBF8;
box-shadow: 0 0 0 3px rgba(18, 196, 154, 0.10);
}
.contact-glass .contact-card strong { color: var(--fg3); }
.contact-glass .contact-card strong + span { color: var(--fg1); }
.contact-glass .contact-card a { color: var(--accent); }
.contact-glass .contact-ico { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px -6px rgba(10, 110, 174, 0.5); }
.contact-glass .copy-btn,
.contact-glass a.copy-btn {
border-color: #CFE0EE;
background: #FFFFFF;
color: var(--accent);
}
.contact-glass .copy-btn:hover,
.contact-glass a.copy-btn:hover {
border-color: #12C49A;
background: #EAF8F3;
color: #087A60;
box-shadow: 0 0 16px -6px rgba(18, 196, 154, 0.6);
}
.contact-glass .copy-btn:focus-visible,
.contact-glass a:focus-visible { outline-color: var(--accent); }
.contact-glass .copy-btn.is-copied { border-color: #12C49A; color: #087A60; }
.contact-quick { border-top-color: #E2EBF4; }
.contact-quick p { color: var(--fg2); }
.contact-quick strong { color: var(--fg1); }
.contact-glass .contact-form-card,
.contact-glass .form-success {
border-color: #DCE8F3;
background: rgba(255, 255, 255, 0.97);
box-shadow: inset 0 1px 0 #FFFFFF, 0 24px 50px -30px rgba(15, 23, 42, 0.32), 0 0 44px -22px rgba(18, 196, 154, 0.35);
}
/* ---------- Footer: still the dark anchor, but brand navy (not near-black) ---------- */
.site-footer {
background-image:
url("../images/brand/watermark-white.svg"),
radial-gradient(40% 60% at 8% 0%, rgba(61, 158, 222, 0.30), transparent 70%),
radial-gradient(38% 70% at 100% 30%, rgba(18, 196, 154, 0.22), transparent 70%),
linear-gradient(160deg, #0C2A45 0%, #0E3555 100%);
}
.footer-bar { background: rgba(6, 22, 40, 0.55); }
/* ---------- Ottawa photography: About banner + neighbourhood page headers ---------- */
.city-banner {
position: relative;
margin: 0 0 var(--space-7);
border: 1px solid #DCE8F3;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 26px 50px -32px rgba(10, 110, 174, 0.5), var(--shadow-md);
background: #EAF3FA;
}
.city-banner img {
display: block;
width: 100%;
height: clamp(190px, 28vw, 340px);
object-fit: cover;
object-position: 50% 30%;
}
.city-caption {
position: absolute;
left: 18px;
bottom: 18px;
max-width: min(440px, calc(100% - 36px));
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 16px;
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.45);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--fg2);
}
.city-caption strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-base);
color: var(--fg1);
}
.city-pin {
display: grid;
place-items: center;
flex: none;
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(180deg, #3D9EDE, #0A6EAE);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.city-pin svg { width: 19px; height: 19px; }
/* phones: caption sits under the photo so the landmark stays visible */
@media (max-width: 519.98px) {
.city-banner img { height: 210px; }
.city-caption { position: static; max-width: none; border: 0; border-top: 1px solid #E2EBF4; border-radius: 0; box-shadow: none; background: #FFFFFF; padding: 12px 14px; }
}
.area-page .legal-card { overflow: hidden; }
.area-banner {
margin: calc(-1 * clamp(var(--space-5), 4vw, var(--space-8))) calc(-1 * clamp(var(--space-5), 4vw, var(--space-8))) var(--space-5);
background: #EAF3FA;
}
.area-banner img {
display: block;
width: 100%;
height: clamp(140px, 22vw, 220px);
object-fit: cover;
object-position: 50% 40%;
}