:root {
--navy: #05070c;
--navy-light: #071f4a;
--blue: #245a9b;
--blue-light: #008cff;
--blue-pale: #dff6ff;
--cyan: #12d8ff;
--white: #ffffff;
--gray50: #f6fbff;
--gray100: #eaf4ff;
--gray200: #cfe0f1;
--gray400: #7b8fa7;
--gray500: #4f6075;
--gray700: #1f2d3d;
--gray900: #0b111a;
--gold: #e10600;
--red: #DC143C;
/* Booking Form Input Colors */
--color-yesno: #FFC107;
--color-text: #00BCD4;
--color-dropdown: #FF6F00;
--color-file: #E91E63;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--white);
color: var(--gray900);
overflow-x: hidden;
}
.hidden { display: none !important; }
/* NAV */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(5,7,12,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 0 2rem;
display: flex; align-items: center; justify-content: space-between;
height: 68px;
transition: all 0.3s;
}
.nav-phone {
display: flex; align-items: center; gap: 0.5rem;
color: var(--cyan);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
transition: color 0.2s;
}
.nav-phone:hover { color: var(--blue-light); }
.nav-phone-icon { font-size: 1.1rem; }
.nav-email {
display: flex; align-items: center; gap: 0.5rem;
color: var(--cyan);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
transition: color 0.2s;
}
.nav-email:hover { color: var(--blue-light); }
.nav-email-icon { font-size: 1.1rem; }
.nav-logo {
display: flex; align-items: center; gap: 0.75rem;
cursor: pointer;
}
.nav-logo-img {
width: 44px; height: 44px; border-radius: 50%;
object-fit: cover;
}
.nav-logo-text {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.45rem;
color: var(--white);
letter-spacing: 0.05em;
line-height: 1;
}
.nav-logo-text span { color: var(--cyan); }
.nav-left { display: flex; align-items: center; gap: 2rem; }
.nav-actions { display: flex; gap: 0.75rem; align-items: center; }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-link {
color: rgba(255,255,255,0.95);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: color 0.2s;
letter-spacing: 0.03em;
text-transform: uppercase;
border: none; background: none;
}
.nav-link:hover, .nav-link.active { color: var(--white); text-shadow: 0 0 8px rgba(255,255,255,0.3); }
.nav-cta {
background: #DC143C;
color: var(--white);
border: none;
padding: 0.55rem 1.25rem;
border-radius: 6px;
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background 0.2s, transform 0.15s;
}
.nav-cta:hover { background: #FF1744; transform: translateY(-1px); }
.nav-cta-call {
background: transparent;
color: var(--white);
border: 2px solid rgba(255,255,255,0.6);
padding: 0.55rem 1.25rem;
border-radius: 6px;
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.nav-cta-call:hover { background: rgba(255,255,255,0.12); border-color: var(--white); transform: translateY(-1px); }
/* HERO */
.hero {
min-height: 100vh;
background:
radial-gradient(circle at 84% 16%, rgba(225,6,0,0.22) 0%, transparent 26%),
radial-gradient(ellipse at 70% 55%, rgba(18,216,255,0.2) 0%, transparent 68%),
linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 48%, #003d8f 100%);
display: flex; align-items: center;
padding: 7rem 2rem 4rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 70% 50%, rgba(0,140,255,0.18) 0%, transparent 70%);
}
.hero-grid {
position: absolute; inset: 0; opacity: 0.04;
background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
background-size: 60px 60px;
}
.hero-content { max-width: 1200px; margin: 0 auto; width: 100%; position: relative; z-index: 1; }
.hero-brand {
display: flex; align-items: center; gap: 1.25rem;
margin-bottom: 1.5rem;
}
.hero-logo {
width: clamp(180px, 20vw, 280px);
height: clamp(180px, 20vw, 280px);
border-radius: 50%;
object-fit: cover;
}
.hero-brand-copy {
color: rgba(255,255,255,0.72);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
max-width: 240px;
line-height: 1.5;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 0.5rem;
background: rgba(225,6,0,0.16);
border: 1px solid rgba(225,6,0,0.48);
color: var(--white);
padding: 0.4rem 1rem;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 1.5rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hero-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.5rem, 8vw, 7rem);
color: var(--white);
line-height: 0.95;
margin-bottom: 1.5rem;
letter-spacing: 0.02em;
text-align: left;
}
.hero-title .accent { color: var(--cyan); }
.hero-sub {
color: rgba(255,255,255,0.65);
font-size: 1.1rem;
max-width: 520px;
line-height: 1.7;
margin-bottom: 2.5rem;
font-weight: 300;
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary {
background: #DC143C;
color: var(--white);
border: none;
padding: 1.5rem 3rem;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.02em;
transition: all 0.2s;
}
.btn-primary:hover { background: #FF1744; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(220,20,60,0.35); }
.btn-secondary {
background: transparent;
color: var(--white);
border: 1.5px solid rgba(255,255,255,0.3);
padding: 0.875rem 2rem;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.hero-stats {
display: flex; gap: 3rem; margin-top: 4rem;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 2rem;
}
.hero-stat-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.5rem;
color: var(--white);
line-height: 1;
}
.hero-stat-num .accent { color: var(--cyan); }
.hero-stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }
.hero-social-icons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-top: -0.5rem;
}
.hero-social-title {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--cyan);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.hero-social-icons-row {
display: flex;
gap: 1rem;
align-items: center;
}
.hero-quote {
margin-left: 2rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
border-left: 3px solid var(--cyan);
padding-left: 1.25rem;
}
.hero-quote-headline {
font-size: 2.1rem;
font-weight: 900;
font-style: normal;
color: var(--white);
line-height: 1.3;
letter-spacing: -0.01em;
-webkit-text-stroke: 0.75px currentColor;
}
.hero-quote-headline .accent { color: var(--cyan); }
.hero-quote-sub {
font-size: 1rem;
font-weight: 400;
font-style: italic;
color: rgba(255,255,255,0.7);
line-height: 1.4;
}
.hero-social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
color: var(--white);
text-decoration: none;
font-size: 1.5rem;
transition: all 0.3s;
}
.hero-social-icons a svg {
width: 30px;
height: 30px;
}
.hero-social-icons a:hover {
background: var(--cyan);
transform: translateY(-3px);
}
/* SECTIONS */
.section { padding: 6rem 2rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-label {
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--blue);
margin-bottom: 0.75rem;
}
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.2rem, 4vw, 3.5rem);
color: var(--navy);
line-height: 1;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}
.section-sub {
color: var(--gray500);
font-size: 1rem;
max-width: 560px;
line-height: 1.7;
font-weight: 300;
}
.section-header { margin-bottom: 3.5rem; }
/* SERVICES */
/* Services — premium 2x2 immersive image grid */
.services-section {
background:
radial-gradient(circle at 84% 16%, rgba(225,6,0,0.22) 0%, transparent 26%),
radial-gradient(ellipse at 70% 55%, rgba(18,216,255,0.2) 0%, transparent 68%),
linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 48%, #003d8f 100%);
}
.services-section .section-label { color: var(--cyan); }
.services-section .section-title {
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.services-section .section-sub { color: rgba(255,255,255,0.72); }
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 1400px;
margin: 3rem auto 0;
}
.service-card {
position: relative;
display: block;
width: 100%;
padding: 0;
border: none;
background: #0d1623;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
aspect-ratio: 3 / 2;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
transition: transform 0.35s ease, box-shadow 0.35s ease;
text-align: left;
}
.service-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.6s ease;
}
.service-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(5,7,12,0.92) 0%, rgba(5,7,12,0.45) 38%, rgba(5,7,12,0.04) 70%);
}
.service-card-body {
position: absolute;
left: 0; right: 0; bottom: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem 1.5rem 1.4rem;
}
.service-card-text { display: flex; flex-direction: column; gap: 0.35rem; }
.service-card-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.9rem;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--white);
}
.service-card-sub {
font-size: 0.82rem;
color: rgba(255,255,255,0.78);
letter-spacing: 0.02em;
}
.service-card-arrow {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.28);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(18,216,255,0.18); }
.service-card:hover .service-card-img { transform: scale(1.08); }
.service-card:hover .service-card-arrow { background: var(--red); border-color: var(--red); transform: translateX(3px); }
.service-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 768px) {
.services-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.service-card { aspect-ratio: 16 / 10; }
}
/* BOOKING FUNNEL — "Book in Minutes" */
.booking-steps-section {
padding: 10rem 2rem;
background:
radial-gradient(circle at 84% 16%, rgba(225,6,0,0.22) 0%, transparent 26%),
radial-gradient(ellipse at 70% 55%, rgba(18,216,255,0.15) 0%, transparent 68%),
linear-gradient(rgba(5,7,12,0.80), rgba(7,31,74,0.80)),
url('gallery/washing-house-hero.jpg') center / cover no-repeat;
}
.booking-steps-section .section-label { color: var(--cyan); }
.booking-steps-section .section-title {
color: var(--red);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.booking-steps-section .section-sub { color: rgba(255,255,255,0.72); }
.bsteps-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1080px;
margin: 3rem auto 0;
padding: 0;
counter-reset: bstep;
}
.bstep-wrap {
position: relative;
display: flex;
}
/* layered outlined shape behind each card — adds depth */
.bstep-wrap::before {
content: "";
position: absolute;
top: 16px; left: 16px; right: -16px; bottom: -16px;
border: 1px solid rgba(18,216,255,0.22);
clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
pointer-events: none;
transition: border-color 0.35s ease, transform 0.35s ease;
}
.bstep-wrap--primary::before { border-color: rgba(18,216,255,0.45); }
.bstep {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
width: 100%;
padding: 2.25rem 1.75rem 2rem;
background: linear-gradient(160deg, #101c2e 0%, #0b1320 100%);
border: 1px solid rgba(255,255,255,0.08);
clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
box-shadow: 0 16px 40px rgba(0,0,0,0.4);
text-align: left;
font-family: 'DM Sans', sans-serif;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.bstep-num {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.15rem;
letter-spacing: 0.04em;
color: var(--cyan);
background: rgba(18,216,255,0.08);
border: 1px solid rgba(18,216,255,0.4);
}
.bstep-icon { color: var(--cyan); margin-top: 0.25rem; }
.bstep-icon svg { display: block; width: 34px; height: 34px; }
.bstep-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.75rem;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--white);
}
.bstep-desc {
font-size: 0.92rem;
line-height: 1.6;
color: rgba(255,255,255,0.74);
}
/* hover lift for the informational cards */
.bstep-wrap:hover .bstep {
transform: translateY(-6px);
box-shadow: 0 26px 55px rgba(0,0,0,0.5);
border-color: rgba(18,216,255,0.3);
}
.bstep-wrap:hover::before {
border-color: rgba(18,216,255,0.5);
transform: translate(-4px, -4px);
}
/* PRIMARY card — Book Online (darker, highlighted, clickable) */
.bstep--primary {
cursor: pointer;
background: linear-gradient(160deg, #06223f 0%, #03101f 100%);
border-color: rgba(18,216,255,0.4);
box-shadow: 0 18px 48px rgba(18,216,255,0.16), 0 16px 40px rgba(0,0,0,0.45);
}
.bstep--primary .bstep-num {
color: var(--navy);
background: var(--cyan);
border-color: var(--cyan);
}
.bstep-cta {
margin-top: 0.6rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: var(--red);
color: var(--white);
font-family: 'Bebas Neue', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 6px;
box-shadow: 0 8px 22px rgba(220,20,60,0.35);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.bstep-cta svg { width: 18px; height: 18px; }
.bstep--primary:hover {
transform: translateY(-8px);
border-color: var(--cyan);
box-shadow: 0 30px 60px rgba(18,216,255,0.28), 0 18px 44px rgba(0,0,0,0.5);
}
.bstep--primary:hover .bstep-cta {
transform: translateX(3px);
box-shadow: 0 0 26px rgba(220,20,60,0.6);
}
.bstep--primary:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 4px;
}
@media (max-width: 860px) {
.bsteps-grid { grid-template-columns: 1fr; gap: 2.25rem; max-width: 460px; }
.bstep-wrap::before { top: 12px; left: 12px; right: -12px; bottom: -12px; }
}
@media (prefers-reduced-motion: reduce) {
.bstep, .bstep-wrap::before, .bstep-cta { transition: none; }
.bstep-wrap:hover .bstep,
.bstep--primary:hover,
.bstep-wrap:hover::before,
.bstep--primary:hover .bstep-cta { transform: none; }
}
/* ===== Services dropdown (desktop) ===== */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.nav-dropdown-caret { transition: transform 0.25s ease; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 0.75rem);
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 250px;
background: rgba(7, 18, 38, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
padding: 0.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
z-index: 1200;
}
/* Invisible bridge so the cursor can cross the gap without closing */
.nav-dropdown-menu::before {
content: '';
position: absolute;
top: -0.85rem; left: 0; right: 0;
height: 0.85rem;
}
.nav-dropdown.open .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1rem;
background: transparent;
border: none;
cursor: pointer;
color: rgba(255,255,255,0.82);
font-family: 'DM Sans', sans-serif;
font-size: 0.92rem;
font-weight: 500;
text-align: left;
padding: 0.7rem 0.85rem;
border-radius: 8px;
transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.nav-dropdown-item svg {
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
color: var(--cyan);
flex-shrink: 0;
}
.nav-dropdown-item:hover {
background: rgba(255,255,255,0.08);
color: var(--white);
padding-left: 1.15rem;
}
.nav-dropdown-item:focus-visible {
background: rgba(255,255,255,0.08);
color: var(--white);
padding-left: 1.15rem;
outline: 2px solid var(--cyan);
outline-offset: -2px;
}
.nav-dropdown-item:hover svg,
.nav-dropdown-item:focus-visible svg { opacity: 1; transform: translateX(0); }
/* ===== Dedicated service pages ===== */
.svc-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
overflow: hidden;
padding: 10rem 2rem 16rem;
}
.svc-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.svc-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(5,7,12,0.95) 0%, rgba(5,7,12,0.55) 45%, rgba(5,7,12,0.35) 100%);
z-index: 1;
}
.svc-hero-content {
position: relative;
z-index: 2;
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.svc-back {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: 6px;
font-family: 'DM Sans', sans-serif;
font-size: 0.85rem;
cursor: pointer;
margin-bottom: 1.5rem;
transition: background 0.2s ease;
}
.svc-back:hover,
.svc-back:focus-visible { background: rgba(255,255,255,0.22); outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.svc-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3rem, 6vw, 5.5rem);
color: var(--white);
line-height: 1;
text-transform: uppercase;
margin: 0.5rem 0 0.75rem;
}
.svc-tagline {
color: rgba(255,255,255,0.85);
font-size: 1.1rem;
line-height: 1.6;
max-width: 560px;
}
.svc-body { background: var(--white); padding: 4rem 2rem; }
.svc-body-inner { max-width: 760px; margin: 0 auto; }
.svc-desc {
color: var(--gray700);
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 2rem;
}
.svc-points {
list-style: none;
padding: 0;
margin: 0 0 2.5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem 2rem;
}
.svc-points li {
position: relative;
padding-left: 1.85rem;
color: var(--gray700);
font-size: 1rem;
line-height: 1.5;
}
.svc-points li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: var(--blue);
font-weight: 700;
}
@media (max-width: 768px) {
.svc-hero { min-height: 100vh; padding: 8rem 1.5rem 14rem; }
.svc-photos { margin-top: -10rem; padding: 1rem 1.5rem 3rem; }
.svc-body { padding: 3rem 1.5rem; }
.svc-points { grid-template-columns: 1fr; }
}
/* ===== Service page: How It Works ===== */
.svc-how {
background: var(--gray50);
padding: 4rem 2rem;
}
.svc-how-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.svc-how-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.4rem);
color: var(--navy);
margin-bottom: 0.4rem;
letter-spacing: 1px;
}
.svc-how-sub {
color: var(--gray500);
font-size: 0.95rem;
margin-bottom: 2.5rem;
}
.svc-how-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.svc-how-step {
background: var(--white);
border: 1px solid var(--gray200);
border-radius: 16px;
padding: 2rem 1.5rem;
}
.svc-how-icon {
font-size: 2rem;
display: block;
margin-bottom: 0.6rem;
}
.svc-how-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--navy);
color: var(--white);
border-radius: 50%;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.svc-how-step h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.25rem;
color: var(--navy);
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
}
.svc-how-step p {
font-size: 0.9rem;
color: var(--gray500);
line-height: 1.6;
margin: 0;
}
@media (max-width: 600px) {
.svc-how-steps { grid-template-columns: 1fr; }
.svc-how { padding: 3rem 1.5rem; }
}
/* ===== Service page: Reviews ===== */
.svc-reviews-section {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
padding: 4rem 2rem;
}
.svc-reviews-inner {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.svc-reviews-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.4rem);
color: var(--white);
margin-bottom: 0.4rem;
letter-spacing: 1px;
}
.svc-reviews-sub {
color: rgba(255,255,255,0.65);
font-size: 0.95rem;
margin-bottom: 2.5rem;
}
.svc-reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
text-align: left;
}
@media (max-width: 600px) {
.svc-reviews-section { padding: 3rem 1.5rem; }
}
/* ===== Service page: See Our Work teaser ===== */
.svc-see-work {
background: var(--white);
padding: 3.5rem 2rem;
text-align: center;
border-top: 1px solid var(--gray100);
}
.svc-see-work h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.4rem);
color: var(--navy);
margin-bottom: 0.5rem;
letter-spacing: 1px;
}
.svc-see-work p {
color: var(--gray500);
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
/* ===== Service page scroll-triggered photo section ===== */
.svc-photos {
margin-top: -12rem;
padding: 1.5rem 2rem 4rem;
background: transparent;
text-align: center;
position: relative;
z-index: 10;
}
.svc-photos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1100px;
margin: 1.5rem auto 0;
}
.svc-photo-wrap {
aspect-ratio: 4/3;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
will-change: opacity, transform;
}
/* After gallery-images.js hydration, ![]()
gets wrapped in .
Both need to fill the wrap so the aspect-ratio + overflow:hidden work. */
.svc-photo-wrap picture {
width: 100%;
height: 100%;
display: block;
}
.svc-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.svc-photos--visible .svc-photo-wrap {
opacity: 1;
transform: none;
}
.svc-photos--exit .svc-photo-wrap {
opacity: 0;
transform: translateY(60px);
}
@media (max-width: 768px) {
.svc-photos-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.svc-photo-wrap {
transition: none;
transition-delay: 0s;
opacity: 1;
transform: none;
}
}
/* WHY SECTION */
.why-section { background: linear-gradient(135deg, var(--blue) 0%, #1e5a9e 100%); }
.why-section .section-title { color: var(--white); }
.why-section .section-label { color: var(--cyan); }
.why-section .section-sub { color: rgba(255,255,255,0.7); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.why-card {
background: var(--white);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px;
padding: 1.75rem;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.why-card:hover { background: var(--white); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.why-icon { font-size: 2rem; margin-bottom: 1rem; }
.why-title { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.why-desc { font-size: 0.875rem; color: var(--gray700); line-height: 1.6; }
/* TESTIMONIALS */
.testimonials-section {
background:
radial-gradient(circle at 84% 16%, rgba(225,6,0,0.22) 0%, transparent 26%),
radial-gradient(ellipse at 70% 55%, rgba(18,216,255,0.2) 0%, transparent 68%),
linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 48%, #003d8f 100%);
}
.testimonials-section .section-label { color: var(--cyan); }
.testimonials-section .section-title { color: var(--red); }
.testimonials-section .section-sub { color: rgba(255,255,255,0.7); }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.testi-card {
background: var(--white);
border: 1px solid var(--gray200);
border-radius: 16px;
padding: 2rem;
transition: all 0.25s;
display: flex;
flex-direction: column;
}
.testi-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.testi-stars { color: var(--gold); font-size: 1rem; margin-bottom: 1rem; letter-spacing: 2px; }
.testi-text { font-size: 0.95rem; color: var(--gray700); line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; flex-grow: 1; }
.testi-author { display: flex; align-items: center; gap: 0.75rem; }
.testi-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--blue), var(--cyan));
display: flex; align-items: center; justify-content: center;
color: var(--white); font-weight: 700; font-size: 0.9rem;
}
.testi-name { font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.testi-loc { font-size: 0.8rem; color: var(--gray400); }
/* GOOGLE REVIEWS CAROUSEL */
.testi-carousel { position: relative; }
.testi-track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-track .testi-card {
flex: 0 0 calc(33.333% - 1rem);
scroll-snap-align: start;
}
@media (max-width: 767px) {
.testi-track .testi-card { flex: 0 0 100%; }
}
.testi-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: 50%;
width: 40px; height: 40px;
font-size: 1.4rem;
cursor: pointer;
z-index: 2;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: background 0.15s;
color: var(--navy);
}
.testi-nav:hover { background: var(--gray50); }
.testi-nav:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.testi-dot:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.testi-nav--prev { left: -20px; }
.testi-nav--next { right: -20px; }
@media (max-width: 767px) {
.testi-nav--prev { left: 4px; }
.testi-nav--next { right: 4px; }
}
.testi-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.25rem;
}
.testi-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #e5e7eb;
border: none;
cursor: pointer;
padding: 0;
transition: background 0.2s;
}
.testi-dot--active { background: var(--navy); }
.testi-avatar-img {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.testi-attribution {
display: flex;
align-items: center;
gap: 4px;
margin-top: 0.75rem;
font-size: 0.75rem;
color: var(--gray400);
}
.testi-read-more {
font-style: normal;
font-size: 0.85rem;
color: var(--navy);
margin-left: 2px;
}
/* CTA BANNER */
.cta-banner {
background:
radial-gradient(circle at 18% 14%, rgba(225,6,0,0.28) 0%, transparent 30%),
radial-gradient(ellipse at 80% 80%, rgba(18,216,255,0.24) 0%, transparent 58%),
linear-gradient(135deg, var(--blue) 0%, #003d8f 100%);
padding: 5rem 2rem;
text-align: center;
position: relative; overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 100%, rgba(18,216,255,0.26) 0%, transparent 70%);
}
.cta-banner-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--white);
margin-bottom: 1rem;
position: relative; z-index: 1;
}
.cta-banner-sub {
color: rgba(255,255,255,0.75);
font-size: 1.05rem;
max-width: 500px;
margin: 0 auto 2rem;
line-height: 1.7;
font-weight: 300;
position: relative; z-index: 1;
}
.btn-white {
background: #DC143C;
color: var(--white);
border: none;
padding: 0.9rem 2.25rem;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
position: relative; z-index: 1;
}
.btn-white:hover { background: #FF1744; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(220,20,60,0.4); }
/* FLOAT BTN */
.float-btn {
position: fixed; bottom: 2rem; right: 2rem; z-index: 90;
background: #DC143C;
color: var(--white);
border: none;
padding: 1.5rem 2.75rem;
border-radius: 100px;
font-family: 'DM Sans', sans-serif;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 32px rgba(220,20,60,0.42);
transition: all 0.2s;
letter-spacing: 0.02em;
}
.float-btn:hover { background: #FF1744; transform: translateY(-3px); box-shadow: 0 12px 40px rgba(220,20,60,0.52); }
@media (max-width: 768px) { .float-btn { display: none !important; } }
/* FOOTER */
.footer { background: var(--navy); padding: 3rem 2rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-logo { display: flex; align-items: center; gap: 0.75rem; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--white); letter-spacing: 0.05em; }
.footer-logo-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.footer-logo span { color: var(--cyan); }
.footer-info { color: rgba(255,255,255,0.45); font-size: 0.85rem; text-align: center; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-link { color: rgba(255,255,255,0.55); font-size: 0.85rem; cursor: pointer; transition: color 0.2s; border: none; background: none; font-family: 'DM Sans', sans-serif; }
.footer-link:hover,
.footer-link:focus-visible { color: var(--white); outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }
/* HAMBURGER BUTTON */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
cursor: pointer;
padding: 4px;
border-radius: 6px;
transition: background 0.2s;
border: none;
background: transparent;
appearance: none;
-webkit-appearance: none;
}
.hamburger:hover,
.hamburger:focus-visible { background: rgba(255,255,255,0.08); outline: 2px solid var(--cyan); outline-offset: 2px; }
.hamburger span {
display: block;
width: 100%;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: all 0.3s;
transform-origin: center;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* MOBILE SLIDE-DOWN MENU */
.mobile-menu {
display: none;
position: fixed;
top: 68px;
left: 0; right: 0;
background: rgba(5,7,12,0.98);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 1rem 1.5rem 1.5rem;
z-index: 99;
flex-direction: column;
gap: 0.25rem;
transform: translateY(-8px);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.mobile-menu.active {
display: flex;
transform: translateY(0);
opacity: 1;
}
.mobile-menu .nav-link {
font-size: 1rem;
padding: 0.85rem 1rem;
border-radius: 8px;
text-align: left;
width: 100%;
color: rgba(255,255,255,0.85);
transition: background 0.2s, color 0.2s;
}
.mobile-menu .nav-link:hover,
.mobile-menu .nav-link.active {
background: rgba(255,255,255,0.06);
color: var(--white);
text-shadow: none;
}
.mobile-menu .nav-cta {
margin-top: 0.5rem;
padding: 0.9rem 1rem;
font-size: 0.95rem;
border-radius: 8px;
width: 100%;
text-align: center;
}
/* Mobile "Services" accordion */
.mobile-services { display: flex; flex-direction: column; }
.mobile-services-toggle {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.mobile-services-caret { transition: transform 0.25s ease; flex-shrink: 0; }
.mobile-services.open .mobile-services-caret { transform: rotate(180deg); }
.mobile-submenu {
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: max-height 0.3s ease, visibility 0.3s ease;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.mobile-services.open .mobile-submenu { max-height: 340px; visibility: visible; }
.mobile-submenu .nav-link {
font-size: 0.92rem !important;
padding-left: 2rem !important;
color: rgba(255,255,255,0.7);
}
/* Contact row in mobile menu */
.mobile-menu-contact {
display: flex;
gap: 0.75rem;
padding: 0.85rem 1rem;
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 0.5rem;
}
.mobile-menu-contact a {
display: flex;
align-items: center;
gap: 0.45rem;
color: var(--cyan);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
flex: 1;
justify-content: center;
padding: 0.5rem;
border-radius: 6px;
background: rgba(18,216,255,0.06);
border: 1px solid rgba(18,216,255,0.18);
transition: background 0.2s;
}
.mobile-menu-contact a:hover { background: rgba(18,216,255,0.14); }
/* MOBILE */
@media (max-width: 768px) {
/* Nav: hide desktop links, show hamburger; hide cluttered contact */
.nav-links { display: none; }
.nav-left .nav-link { display: none; }
.nav-left .nav-dropdown { display: none; }
.nav-actions { display: none; }
.nav-phone { display: none; }
.nav-email { display: none; }
.hamburger { display: flex; }
.nav-logo-text { font-size: 1.2rem; }
.hero-brand { align-items: flex-start; flex-direction: column; }
.hero-stats { flex-wrap: wrap; gap: 1.5rem; }
.footer-inner { flex-direction: column; text-align: center; }
#gallery-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}
/* GALLERY TABS */
.gallery-tab {
padding: 0.55rem 1.25rem;
border: 1.5px solid var(--gray200);
border-radius: 100px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
font-family: 'DM Sans', sans-serif;
background: var(--white);
color: var(--gray700);
}
.gallery-tab:hover { border-color: var(--blue); color: var(--blue); }
.gallery-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gallery-tab.active { background: var(--blue); color: var(--white); border-color: var(--blue); }
.gallery-item { transition: all 0.3s; }
.gallery-item.hidden { display: none; }
/* ==========================================
BOOKING FORM STYLES
========================================== */
#page-book .booking-container {
max-width: 900px;
margin: 0 auto;
padding: 0 1rem 3rem;
}
.bf-progress-bar {
background: rgba(255,255,255,0.2);
border-radius: 100px;
height: 8px;
margin-bottom: 2rem;
overflow: hidden;
}
.bf-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--cyan), var(--blue-light));
width: 0%;
transition: width 0.5s ease;
box-shadow: 0 0 20px var(--cyan);
}
.bf-step-indicator {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.bf-step {
color: rgba(255,255,255,0.4);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s;
}
.bf-step.active {
color: var(--cyan);
text-shadow: 0 0 10px var(--cyan);
}
.bf-step.completed {
color: var(--white);
}
.bf-form-card {
background: var(--white);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
.bf-form-card { padding: 1.5rem; }
.bf-api-error-banner {
padding: 0.75rem 1rem;
}
.bf-api-error-banner p {
font-size: 0.85rem;
}
}
/* Meet the Owner — premium navy section */
.owner-section {
background:
radial-gradient(circle at 84% 16%, rgba(225,6,0,0.22) 0%, transparent 26%),
radial-gradient(ellipse at 70% 55%, rgba(18,216,255,0.2) 0%, transparent 68%),
linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 48%, #003d8f 100%);
padding: 6rem 2rem;
position: relative;
}
.owner-section::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 120px;
background: linear-gradient(to bottom, transparent, var(--navy));
pointer-events: none;
}
.owner-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 4rem;
align-items: center;
}
.owner-content { display: flex; flex-direction: column; }
.owner-eyebrow {
display: block;
font-family: 'DM Sans', sans-serif;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.8rem;
font-weight: 600;
color: var(--cyan);
margin-bottom: 0.75rem;
}
.owner-heading {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.25rem, 5vw, 5rem);
line-height: 0.95;
color: var(--white);
letter-spacing: 0.01em;
}
.owner-heading-accent { color: var(--red); }
.owner-divider {
width: 140px;
height: 4px;
background: var(--red);
border-radius: 2px;
margin: 1.5rem 0 2rem;
}
.owner-services-desc {
font-size: 1.05rem;
color: rgba(255,255,255,0.75);
line-height: 1.6;
max-width: 520px;
margin: 0 0 1rem;
}
.owner-intro-row {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.75rem;
}
.owner-headshot {
width: 120px;
height: 158px;
min-width: 120px;
border-radius: 12px;
overflow: hidden;
position: relative;
border: 2px solid rgba(255,255,255,0.18);
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.owner-headshot img {
position: absolute;
top: 50%; left: 50%;
height: 150px; width: auto;
transform: translate(-50%, -50%) rotate(-90deg);
}
.owner-intro-name { display: flex; flex-direction: column; gap: 0.25rem; }
.owner-name { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--white); }
.owner-role { font-size: 0.9rem; color: var(--cyan); letter-spacing: 0.03em; }
.owner-desc {
color: rgba(255,255,255,0.82);
line-height: 1.8;
font-size: 1rem;
max-width: 540px;
margin-bottom: 2.25rem;
}
.owner-social {
display: flex;
flex-direction: column;
gap: 0.9rem;
border-top: 1px solid rgba(255,255,255,0.12);
border-bottom: 1px solid rgba(255,255,255,0.12);
padding: 1.5rem 0;
}
.owner-social-title {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cyan);
}
.owner-social-row { display: flex; gap: 1rem; align-items: center; }
.owner-social-row a {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
color: var(--white);
text-decoration: none;
transition: all 0.3s;
}
.owner-social-row a svg { width: 26px; height: 26px; }
.owner-social-row a:hover {
background: var(--cyan);
color: var(--navy);
transform: translateY(-3px);
}
.owner-cta {
align-self: flex-start;
background: var(--red);
color: var(--white);
border: none;
padding: 1rem 2.25rem;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.owner-cta:hover {
background: #FF1744;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(220,20,60,0.4);
}
.owner-image {
position: relative;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0,0,0,0.45);
aspect-ratio: 4 / 5;
}
.owner-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.6s ease;
}
.owner-image:hover img { transform: scale(1.05); }
/* Dark section variant */
.section--dark { background: var(--navy-light); }
.section--dark .section-label { color: var(--cyan); }
.section--dark .section-title { color: var(--white); }
.section--dark .section-sub { color: rgba(255,255,255,0.75); }
@media (max-width: 768px) {
.owner-section { padding: 4rem 1.25rem; }
.owner-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.owner-content { order: 1; }
.owner-image { order: 2; aspect-ratio: 3 / 4; max-height: 460px; }
.owner-badges { gap: 1.5rem; flex-wrap: wrap; }
.owner-desc { margin-bottom: 1.75rem; }
}
/* About page responsive grids */
.about-owner-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
.about-mission-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 3rem;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 768px) {
.about-owner-grid,
.about-mission-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-owner-photo-placeholder {
height: 260px !important;
}
.about-mission-grid > div:last-child { order: 2; }
.about-mission-grid > div:first-child { order: 1; }
}
/* Our Process page — alternating photo/text rows */
.process-row {
display: grid;
grid-template-columns: 460px 1fr; /* photo left, text right */
gap: 3rem;
align-items: center;
max-width: 1000px;
margin: 0 auto 3rem;
}
.process-row.process-row-rev {
grid-template-columns: 1fr 460px; /* text left, photo right */
}
.process-photo {
background: var(--gray100);
border: 2px dashed var(--gray200);
border-radius: 12px;
height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: var(--gray400);
font-size: 0.85rem;
text-align: center;
padding: 1rem;
overflow: hidden;
}
@media (max-width: 768px) {
.process-row,
.process-row.process-row-rev { grid-template-columns: 1fr; gap: 2rem; }
.process-row.process-row-rev .process-photo { order: -1; } /* photo on top */
.process-photo { height: 240px; }
}
.bf-section {
margin-bottom: 2.5rem;
opacity: 0;
animation: bfFadeIn 0.5s forwards;
}
@keyframes bfFadeIn {
to { opacity: 1; }
}
.bf-section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.8rem;
color: var(--navy);
margin-bottom: 0.5rem;
letter-spacing: 0.02em;
}
.bf-section-subtitle {
color: var(--gray500);
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.bf-input-group {
margin-bottom: 1.25rem;
}
.bf-input-label {
display: block;
font-weight: 600;
color: var(--gray700);
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.bf-required {
color: var(--red);
margin-left: 0.25rem;
}
.bf-form-card input[type="text"],
.bf-form-card input[type="email"],
.bf-form-card input[type="tel"],
.bf-form-card input[type="number"],
.bf-form-card input[type="date"],
.bf-form-card input[type="time"],
.bf-form-card textarea {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid var(--color-text);
border-radius: 10px;
font-size: 1rem;
font-family: 'DM Sans', sans-serif;
transition: all 0.3s;
background: var(--white);
}
/* Hide native increment/decrement spinners on number inputs so users
can't accidentally click them and silently change the value. The
wheel/arrow-key handlers in JS handle the input-mutation case;
this just removes the visual spinner UI. */
.bf-form-card input[type="number"]::-webkit-outer-spin-button,
.bf-form-card input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.bf-form-card input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.bf-form-card input:focus,
.bf-form-card textarea:focus,
.bf-form-card select:focus {
outline: 2px solid var(--blue);
outline-offset: 1px;
transform: translateY(-2px);
}
.bf-form-card select {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid var(--color-dropdown);
border-radius: 10px;
font-size: 1rem;
font-family: 'DM Sans', sans-serif;
background: var(--white);
cursor: pointer;
transition: all 0.3s;
}
.bf-yesno-group {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.bf-yesno-btn {
flex: 1;
padding: 0.875rem;
border: 2px solid var(--color-yesno);
background: var(--white);
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
color: var(--gray700);
}
.bf-yesno-btn:hover {
background: rgba(255,193,7,0.1);
transform: translateY(-2px);
}
.bf-yesno-btn.active {
background: var(--color-yesno);
color: var(--white);
box-shadow: 0 4px 12px rgba(255,193,7,0.3);
}
/* ========== INTERACTIVE CALENDAR ========== */
.bf-cal-wrapper {
background: var(--white);
border: 2px solid var(--gray200);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 16px rgba(36, 90, 155, 0.06);
}
.bf-cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
gap: 0.75rem;
}
.bf-cal-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--gray900);
flex: 1;
text-align: center;
letter-spacing: -0.01em;
}
.bf-cal-nav-btn {
width: 40px;
height: 40px;
border-radius: 10px;
border: 2px solid var(--gray200);
background: var(--white);
color: var(--blue);
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bf-cal-nav-btn:hover:not(:disabled) {
background: var(--blue-pale);
border-color: var(--blue);
transform: translateY(-1px);
}
.bf-cal-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.bf-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-bottom: 8px;
}
.bf-cal-weekday {
text-align: center;
font-size: 0.75rem;
font-weight: 700;
color: var(--gray400);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.5rem 0;
}
.bf-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.bf-cal-day {
aspect-ratio: 1;
/* WCAG 2.5.5 / iOS HIG minimum tap target. On ~360px-wide phones
the 1fr grid track resolves to ~43px, just under the threshold;
min-height forces the cell to grow vertically (cells become
slightly non-square only on the narrowest viewports). */
min-height: 44px;
border: 2px solid var(--gray200);
background: var(--white);
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
color: var(--gray700);
cursor: pointer;
transition: all 0.18s;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
padding: 0;
}
.bf-cal-day:hover:not(:disabled) {
background: var(--blue-pale);
border-color: var(--blue-light);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 140, 255, 0.18);
}
.bf-cal-day:disabled {
background: var(--gray50);
color: var(--gray400);
cursor: not-allowed;
opacity: 0.55;
border-color: transparent;
}
.bf-cal-day.bf-cal-blank {
visibility: hidden;
pointer-events: none;
}
.bf-cal-day.bf-cal-today:not(.bf-cal-selected):not(:disabled) {
border-color: var(--blue-light);
color: var(--blue);
}
.bf-cal-day.bf-cal-selected {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
border-color: var(--blue);
color: var(--white);
box-shadow: 0 4px 14px rgba(0, 140, 255, 0.4);
transform: translateY(-2px);
}
/* ── Weather watch badge on date cells ──────────────────────────
Soft cells stay clickable and book normally; the ⛅ badge in the
top-right corner signals "weather watch — we monitor and may
contact you." Hard cells render the same badge with a stronger
red tint and stay disabled (slot generator already filtered them).
*/
.bf-cal-day.bf-cal-weather-soft,
.bf-cal-day.bf-cal-weather-hard {
position: relative;
}
.bf-cal-day.bf-cal-weather-soft::after,
.bf-cal-day.bf-cal-weather-hard::after {
content: '⛅';
position: absolute;
top: 2px;
right: 4px;
font-size: 10px;
line-height: 1;
opacity: 0.9;
pointer-events: none;
}
.bf-cal-day.bf-cal-weather-hard:not(.bf-cal-selected) {
/* Red tint — deliberately distinct from the amber "weather watch"
so a customer can tell a safety block apart from a bookable
watch day at a glance. Disabled by the slot generator; the
border + colour keep it distinguishable from a plain weekend /
past date. */
background: #fcebe9;
border-color: #e3a99f;
color: #a23a2a;
opacity: 0.85;
}
.bf-cal-day.bf-cal-weather-hard::after {
filter: saturate(1.3);
}
.bf-cal-day.bf-cal-weather-soft:not(.bf-cal-selected):not(:hover) {
/* Bookable, but visually flagged. Subtler than hard. */
border-color: #f3c98a;
background: #fffdf6;
}
.bf-cal-day.bf-cal-weather-soft.bf-cal-selected::after,
.bf-cal-day.bf-cal-weather-hard.bf-cal-selected::after {
/* Higher contrast on the selected blue gradient. */
opacity: 1;
}
/* .bf-cal-admin-block — kept as a metadata tag on the cell but no
distinctive styling. Admin-blocked dates fall through to the
default `.bf-cal-day:disabled` grey ("Unavailable" in the legend)
so customers see no difference between admin holds and any other
reason a date is unavailable. */
.bf-cal-legend-swatch.bf-cal-legend-weather {
background: #fffdf6;
border-color: #f3c98a;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
line-height: 1;
}
.bf-cal-legend-swatch.bf-cal-legend-weather-block {
background: #fcebe9;
border-color: #e3a99f;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
line-height: 1;
}
.bf-cal-weather-note {
margin: 8px 2px 0;
font-size: 0.78rem;
color: var(--gray500);
line-height: 1.4;
}
/* ── Checkout-step weather watch notice ──────────────────────── */
.bf-weather-watch-notice {
display: flex;
gap: 12px;
align-items: flex-start;
background: #fff8e1;
border: 1px solid #f3c98a;
border-left: 4px solid #d97706;
border-radius: 12px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.bf-weather-watch-icon {
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;
padding-top: 2px;
}
.bf-weather-watch-body {
flex: 1;
min-width: 0;
}
.bf-weather-watch-title {
margin: 0 0 4px 0;
font-weight: 700;
color: #92400e;
}
.bf-weather-watch-message {
margin: 0 0 8px 0;
font-size: 0.92rem;
color: var(--gray700);
}
.bf-weather-watch-detail {
margin: 0 0 12px 0;
font-size: 0.85rem;
line-height: 1.5;
color: var(--gray700);
}
.bf-weather-watch-ack {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--gray700);
cursor: pointer;
}
.bf-weather-watch-ack input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
cursor: pointer;
}
.bf-weather-watch-notice .bf-error-message {
display: none;
margin-top: 6px;
}
.bf-weather-watch-notice.bf-error .bf-error-message {
display: block;
}
.bf-cal-legend {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--gray100);
font-size: 0.8rem;
color: var(--gray500);
}
.bf-cal-legend-item {
display: flex;
align-items: center;
gap: 0.4rem;
}
.bf-cal-legend-swatch {
width: 14px;
height: 14px;
border-radius: 4px;
border: 2px solid var(--gray200);
background: var(--white);
}
.bf-cal-legend-swatch.bf-cal-legend-available {
border-color: var(--blue-light);
}
.bf-cal-legend-swatch.bf-cal-legend-unavailable {
background: var(--gray50);
border-color: transparent;
}
.bf-cal-legend-swatch.bf-cal-legend-selected {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
border-color: var(--blue);
}
/* Time slot panel */
.bf-time-panel {
margin-top: 1.5rem;
padding: 1.5rem;
background: var(--gray50);
border: 2px solid var(--blue-pale);
border-radius: 16px;
opacity: 0;
max-height: 0;
overflow: hidden;
transform: translateY(-8px);
transition: opacity 0.3s ease, max-height 0.4s ease, transform 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}
.bf-time-panel.bf-time-panel-visible {
opacity: 1;
max-height: 600px;
transform: translateY(0);
}
.bf-time-panel-header {
font-size: 0.95rem;
font-weight: 700;
color: var(--gray700);
margin-bottom: 0.25rem;
}
.bf-time-panel-date {
font-size: 1.15rem;
font-weight: 700;
color: var(--blue);
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
.bf-time-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
}
.bf-time-slot {
padding: 0.875rem 1rem;
background: var(--white);
border: 2px solid var(--gray200);
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
color: var(--gray700);
cursor: pointer;
transition: all 0.18s;
text-align: center;
font-family: inherit;
}
.bf-time-slot:hover {
border-color: var(--blue-light);
background: var(--blue-pale);
transform: translateY(-1px);
}
.bf-time-slot.bf-time-slot-unavailable {
opacity: 0.4;
cursor: not-allowed;
background: var(--gray100);
border-color: var(--gray200);
color: var(--gray400);
}
.bf-time-slot.bf-time-slot-selected {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
border-color: var(--blue);
color: var(--white);
box-shadow: 0 4px 12px rgba(0, 140, 255, 0.35);
}
@media (max-width: 600px) {
.bf-cal-wrapper {
padding: 1rem;
}
.bf-cal-day {
font-size: 0.85rem;
border-radius: 8px;
}
.bf-cal-grid,
.bf-cal-weekdays {
gap: 4px;
}
.bf-cal-title {
font-size: 1.05rem;
}
.bf-time-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.bf-time-slot {
padding: 0.75rem 0.5rem;
font-size: 0.85rem;
}
}
/* ========== END CALENDAR ========== */
.bf-file-upload-wrapper {
border: 2px dashed #2196f3;
border-radius: 12px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background: rgba(33,150,243,0.05);
}
.bf-file-upload-wrapper:hover {
background: rgba(33,150,243,0.12);
}
.bf-file-upload-wrapper input[type="file"] {
display: none;
}
.bf-file-upload-icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: #2196f3;
}
.bf-file-preview {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bf-file-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--gray100);
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.9rem;
}
.bf-file-remove {
cursor: pointer;
color: var(--red);
font-weight: bold;
}
.bf-checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-top: 0.5rem;
}
.bf-checkbox-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border: 2px solid var(--gray200);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
background: var(--white);
}
.bf-checkbox-item:hover {
border-color: var(--blue);
background: var(--gray50);
}
.bf-checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--blue);
}
.bf-checkbox-item.checked {
border-color: var(--blue);
background: rgba(36,90,155,0.05);
}
.bf-dynamic-fields {
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid var(--gray200);
}
.bf-dynamic-section {
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--gray50);
border-radius: 12px;
border-left: 4px solid var(--blue);
}
.bf-dynamic-section-title {
font-weight: 700;
color: var(--navy);
margin-bottom: 1rem;
font-size: 1.05rem;
}
.bf-booking-summary {
border: 1px solid var(--gray200);
border-radius: 12px;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
background: var(--gray50);
}
.bf-summary-heading {
font-weight: 700;
color: var(--navy);
font-size: 0.95rem;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bf-summary-dl { margin: 0; }
.bf-summary-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.4rem 0;
border-bottom: 1px solid var(--gray200);
}
.bf-summary-row:last-child { border-bottom: none; }
.bf-summary-label {
font-weight: 600;
color: var(--gray500);
font-size: 0.8rem;
min-width: 110px;
flex-shrink: 0;
}
.bf-summary-value {
color: var(--gray700);
font-size: 0.9rem;
flex: 1;
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.bf-summary-empty { color: var(--gray400); font-style: italic; }
.bf-summary-edit {
margin-left: auto;
background: none;
border: none;
color: var(--blue);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
padding: 0;
text-decoration: underline;
flex-shrink: 0;
}
.bf-summary-edit:hover { color: var(--blue-light); }
.bf-quote-display {
background: linear-gradient(135deg, var(--navy), var(--blue));
color: var(--white);
padding: 2rem;
border-radius: 16px;
text-align: center;
margin: 2rem 0;
box-shadow: 0 12px 32px rgba(5,7,12,0.2);
}
.bf-quote-label {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.bf-quote-amount {
font-family: 'Bebas Neue', sans-serif;
font-size: 3rem;
letter-spacing: 0.02em;
margin-bottom: 0.5rem;
font-weight: 700;
}
.bf-quote-note {
font-size: 0.85rem;
opacity: 0.8;
font-style: italic;
}
/* ===== Pricing Engine UI ===== */
.bf-quote-addendum {
background: rgba(255,193,7,0.12);
border: 1px solid rgba(255,193,7,0.35);
color: var(--white);
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 0.9rem;
line-height: 1.5;
margin-top: 1rem;
text-align: left;
font-weight: 500;
}
.bf-quote-disclaimer {
font-size: 0.8rem;
opacity: 0.75;
font-style: italic;
margin-top: 0.75rem;
line-height: 1.5;
}
.bf-quote-pending-msg {
font-family: 'DM Sans', sans-serif;
font-size: 1.15rem;
font-weight: 500;
line-height: 1.5;
padding: 0.5rem 0;
}
/* Info note (rust/oil disclaimer for flatwork) */
.bf-info-note {
background: rgba(255,193,7,0.08);
border-left: 3px solid var(--color-yesno);
color: var(--gray700);
padding: 0.75rem 1rem;
border-radius: 6px;
font-size: 0.88rem;
line-height: 1.5;
margin-top: 0.5rem;
}
/* Image-required notice for brick/other */
.bf-image-notice {
background: rgba(0,140,255,0.06);
border-left: 3px solid var(--blue-light);
color: var(--gray700);
padding: 0.75rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
font-weight: 500;
}
/* Per-service file upload */
.bf-service-files {
margin-top: 0.5rem;
}
.bf-service-files .bf-file-upload-wrapper {
border: 2px dashed var(--color-file);
background: rgba(233,30,99,0.04);
}
.bf-service-files .bf-file-upload-wrapper:hover {
background: rgba(233,30,99,0.08);
}
.bf-service-files-error {
display: none;
color: var(--red);
font-size: 0.85rem;
margin-top: 0.5rem;
font-weight: 500;
}
.bf-service-files-error.show { display: block; }
.bf-terms-checkbox {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.25rem;
border: 2px solid var(--gray200);
border-radius: 12px;
background: var(--white);
cursor: pointer;
transition: all 0.3s;
line-height: 1.5;
color: var(--gray700);
font-weight: 500;
}
.bf-terms-checkbox:hover {
border-color: var(--blue);
background: var(--gray50);
}
.bf-terms-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
margin-top: 2px;
flex-shrink: 0;
cursor: pointer;
accent-color: var(--blue);
}
.bf-terms-checkbox input[type="checkbox"]:checked ~ span {
color: var(--navy);
}
.bf-submit-btn {
width: 100%;
padding: 1.25rem;
background: var(--red);
color: var(--white);
border: none;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 700;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
transition: all 0.3s;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 8px 24px rgba(220,20,60,0.3);
}
.bf-submit-btn:hover {
background: #FF1744;
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(220,20,60,0.4);
}
.bf-submit-btn:disabled {
background: var(--gray400);
cursor: not-allowed;
opacity: 0.6;
transform: none;
box-shadow: none;
}
.bf-error-message {
color: var(--red);
font-size: 0.85rem;
margin-top: 0.5rem;
display: none;
}
.bf-error-message.show {
display: block;
}
.bf-api-error-banner {
display: none;
background: #fff5f5;
border: 1px solid var(--red);
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
color: #333;
position: relative;
}
.bf-api-error-banner.show {
display: block;
}
.bf-api-error-banner p {
margin: 0 0 0.5rem;
font-size: 0.95rem;
}
.bf-api-error-banner .bf-contact-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.bf-api-error-banner .bf-contact-links a {
color: var(--red);
font-weight: 600;
text-decoration: none;
}
.bf-api-error-banner .bf-contact-links a:hover {
text-decoration: underline;
}
.bf-api-error-banner .bf-dismiss {
position: absolute;
top: 0.5rem;
right: 0.75rem;
background: none;
border: none;
cursor: pointer;
color: #666;
font-size: 1.1rem;
line-height: 1;
padding: 0;
}
.bf-api-error-banner .bf-dismiss:hover,
.bf-api-error-banner .bf-dismiss:focus-visible {
color: var(--red);
}
.bf-input-error {
border-color: var(--red) !important;
}
.bf-helper-text {
font-size: 0.85rem;
color: var(--gray500);
margin-top: 0.5rem;
font-style: italic;
}
.bf-grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.bf-grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.bf-nav-buttons {
display: flex;
gap: 1rem;
justify-content: space-between;
margin-top: 2rem;
}
.bf-nav-btn {
padding: 0.875rem 2rem;
border: 2px solid var(--blue);
background: var(--white);
color: var(--blue);
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
font-size: 1rem;
}
.bf-nav-btn:hover {
background: var(--blue);
color: var(--white);
}
.bf-nav-btn.primary {
background: var(--blue);
color: var(--white);
}
.bf-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 1rem;
}
.bf-modal.show {
display: flex;
}
.bf-modal-content {
background: var(--white);
padding: 3rem;
border-radius: 24px;
text-align: center;
max-width: 500px;
animation: bfSlideUp 0.5s;
}
@keyframes bfSlideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bf-modal-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.bf-modal-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
color: var(--navy);
margin-bottom: 1rem;
}
.bf-modal-text {
color: var(--gray700);
line-height: 1.7;
margin-bottom: 2rem;
}
.bf-loading {
display: none;
text-align: center;
padding: 2rem;
}
.bf-loading.show {
display: block;
}
.bf-spinner {
border: 4px solid var(--gray200);
border-top: 4px solid var(--blue);
border-radius: 50%;
width: 50px;
height: 50px;
animation: bfSpin 1s linear infinite;
margin: 0 auto 1rem;
}
@keyframes bfSpin {
to { transform: rotate(360deg); }
}
.bf-distance-warning {
background: rgba(22,163,74,0.08);
border: 2px solid #16a34a;
border-radius: 12px;
padding: 1rem;
margin-top: 1rem;
color: #15803d;
font-weight: 500;
display: none;
}
.bf-distance-warning.show {
display: block;
}
.bf-distance-error {
background: rgba(220,20,60,0.1);
border: 2px solid #DC143C;
border-radius: 12px;
padding: 1rem;
margin-top: 1rem;
color: #DC143C;
font-weight: 600;
display: none;
}
.bf-distance-error.show {
display: block;
color: #DC143C;
}
/* Google Places Autocomplete dropdown - must layer above booking form */
.pac-container {
z-index: 99999 !important;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
border: 1px solid var(--gray200);
font-family: 'DM Sans', sans-serif;
margin-top: 4px;
}
.pac-item {
padding: 0.5rem 0.75rem;
cursor: pointer;
font-size: 0.95rem;
}
.pac-item:hover,
.pac-item-selected {
background: var(--blue-pale);
}
.pac-item-query {
font-weight: 600;
color: var(--gray900);
}
.pac-icon {
margin-right: 0.5rem;
}
/* Detect browser autofill: the animation itself is invisible — it
exists only so JS can catch animationstart and clear the field
before the unvalidated value reaches the form. */
@keyframes onAutofill { from {} to {} }
#service-address:-webkit-autofill {
animation-name: onAutofill;
animation-duration: 1ms;
}
/* Valid address visual feedback */
#service-address.bf-address-valid {
border-color: #16a34a;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2.5rem;
}
/* TRUST POINTS — under hero quote */
.hero-trust-points {
list-style: none;
margin: 1rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid rgba(255,255,255,0.12);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.trust-ribbon-item {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--white);
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.trust-ribbon-icon { font-size: 1.15rem; line-height: 1; }
.hero-trust-points .trust-ribbon-item {
font-size: 1.25rem;
font-weight: 900;
-webkit-text-stroke: 0.5px currentColor;
}
.hero-trust-points .trust-ribbon-icon { font-size: 1.3rem; }
@media (max-width: 700px) {
.trust-ribbon-item { font-size: 0.9rem; }
}
/* BOOKING — final-quote-confirmed callout */
.bf-quote-finalize-note {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin: 1rem 0 0.75rem;
padding: 0.9rem 1rem;
background: rgba(18,216,255,0.08);
border: 1px solid rgba(18,216,255,0.35);
border-radius: 8px;
text-align: left;
}
.bf-quote-finalize-icon { font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; }
.bf-quote-finalize-note p {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: rgba(255,255,255,0.9);
}
/* ── Service address UX ──────────────────────────────────────────── */
.bf-addr-step-card {
display: flex;
align-items: center;
gap: 12px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 8px;
padding: 8px 14px;
margin-bottom: 8px;
font-size: 12px;
}
.bf-addr-step {
display: flex;
align-items: center;
gap: 6px;
color: #1e40af;
font-weight: 500;
}
.bf-addr-step-num {
width: 18px;
height: 18px;
border-radius: 50%;
background: #1d4ed8;
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s;
}
.bf-addr-step-num.done { background: #16a34a; }
.bf-addr-step-arrow { color: #93c5fd; font-size: 13px; }
/* Amber border while dropdown is open awaiting selection */
#service-address.bf-addr-typing { border-color: #f59e0b !important; }
/* Unified helper text line — driven by setAddressHelper() in maps.js */
#bfAddressHelper.bf-addr-amber { color: #b45309; font-weight: 500; }
#bfAddressHelper.bf-addr-green { color: #15803d; font-weight: 500; }
#bfAddressHelper.bf-addr-red { color: #dc2626; font-weight: 500; }
/* Nudge prompt — body-appended absolute div below the suggestions dropdown */
.bf-addr-nudge {
position: absolute;
z-index: 99999;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 6px;
padding: 7px 12px;
font-size: 12px;
font-weight: 500;
color: #92400e;
pointer-events: none;
font-family: 'DM Sans', sans-serif;
}
/* ── Booking-action result overlay ────────────────────────────────
Shown when a customer clicks the Reschedule or Cancel button in
a confirmation email. The overlay covers whatever page is showing
(home, or the booking page if a reschedule succeeded) and presents
the success/error state with clear next-step buttons. */
.bf-action-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
animation: bf-action-fade-in 0.2s ease-out;
}
.bf-action-overlay.hidden { display: none; }
@keyframes bf-action-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.bf-action-card {
background: #ffffff;
border-radius: 16px;
padding: 36px 28px 28px;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
animation: bf-action-slide-in 0.25s ease-out;
}
@keyframes bf-action-slide-in {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bf-section { animation: none; opacity: 1; }
.bf-modal-content { animation: none; }
.bf-action-overlay { animation: none; }
.bf-action-card { animation: none; }
}
.bf-action-icon {
display: flex;
justify-content: center;
align-items: center;
height: 56px;
margin-bottom: 18px;
}
.bf-action-icon svg { display: block; }
.bf-action-title {
margin: 0 0 12px;
font-size: 22px;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
}
.bf-action-message {
margin: 0 0 24px;
font-size: 15px;
line-height: 1.6;
color: #475569;
}
.bf-action-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.bf-action-btn {
padding: 12px 22px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
font-family: inherit;
}
.bf-action-btn.primary {
background: #DC143C;
color: #ffffff;
}
.bf-action-btn.primary:hover { background: #FF1744; transform: translateY(-1px); }
.bf-action-btn.secondary {
background: #f1f5f9;
color: #475569;
}
.bf-action-btn.secondary:hover { background: #e2e8f0; }
.bf-action-spinner {
display: inline-block;
width: 36px;
height: 36px;
border: 3px solid #e5e7eb;
border-top-color: #DC143C;
border-radius: 50%;
animation: bf-action-spin 0.9s linear infinite;
}
@keyframes bf-action-spin {
to { transform: rotate(360deg); }
}