/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(../fonts/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_iiUXtXA-W2r.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(../fonts/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_iiUXt7A-W2r.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(../fonts/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_iiUXt_A-W2r.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(../fonts/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_iiUXtHA-Q.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(../fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfFunDTbtPY_Q.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(../fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfFunDYbtPY_Q.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(../fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfFunDZbtPY_Q.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(../fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfFunDXbtM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
A1 Lawn Care CT — Main Stylesheet
Style Guide v1.0
============================================================ */
/* ============================================================
1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
============================================================ */
:root {
/* Color Palette */
--color-primary: #1B5E20;
--color-primary-dark: #0D3B13;
--color-primary-light: #4CAF50;
--color-accent: #D4920B;
--color-accent-dark: #B57A00;
--color-accent-light: #FFE082;
--color-text: #1A1A1A;
--color-text-light: #4A5568;
--color-bg: #F8FAF5;
--color-bg-alt: #F8FAF5;
--color-bg-dark: #0F2B14;
--color-bg-dark-alt: #163616;
--color-border: #D1D5DB;
--color-border-light: #E8EDE5;
--color-white: #FFFFFF;
--color-error: #CC0000;
--color-hero-bg: #dbe5d8;
/* Typography
PERF (Task 6.3): Fonts are currently loaded from Google Fonts CDN via
tags in each HTML file. For production, self-host the font files
to eliminate the DNS lookup + connection to fonts.googleapis.com /
fonts.gstatic.com. Download woff2 files for:
- Inter: 400, 600, 700
- Playfair Display: 800
Then replace the Google Fonts tags with local @font-face rules
and update the font file paths below. */
--font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
--font-display: 'Playfair Display', Georgia, serif;
--font-size-base: 1rem;
--line-height-body: 1.6;
--font-weight-body: 400;
--font-weight-medium: 500;
--font-weight-sub: 600;
--font-weight-head: 800;
/* Font Sizes */
--fs-h1-mobile: 2.5rem;
--fs-h1-desktop: 3.5rem;
--fs-h2-mobile: 2rem;
--fs-h2-desktop: 2.75rem;
--fs-h3: 1.375rem;
--fs-h4: 1.125rem;
--fs-small: 0.875rem;
--fs-eyebrow: 0.8125rem;
--fs-display: 4rem;
--fs-lead: 1.125rem;
/* Spacing Scale */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
/* Layout */
--container-max: 1200px;
--container-px: 1.25rem;
--border-radius: 12px;
/* Slightly softer than before */
--border-radius-lg: 20px;
/* High-end SaaS feel */
--border-radius-pill: 999px;
/* Nav */
--nav-height: 4rem;
--nav-height-desk: 5rem;
/* Shadows (Multi-layered, dramatic, premium) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.08);
--shadow-glow: 0 0 20px rgba(27, 94, 32, 0.15);
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* ============================================================
2. CSS RESET
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
font-weight: var(--font-weight-body);
line-height: var(--line-height-body);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
ul,
ol {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
h1 {
font-family: var(--font-display);
font-size: var(--fs-h1-mobile);
font-weight: var(--font-weight-head);
line-height: 1.15;
letter-spacing: -0.02em;
}
h2 {
font-family: var(--font-display);
font-size: var(--fs-h2-mobile);
font-weight: var(--font-weight-head);
line-height: 1.2;
letter-spacing: -0.01em;
}
h3 {
font-size: var(--fs-h3);
font-weight: var(--font-weight-sub);
line-height: 1.3;
}
h4 {
font-size: var(--fs-h4);
font-weight: var(--font-weight-sub);
line-height: 1.4;
}
p {
margin-bottom: var(--space-md);
}
p:last-child {
margin-bottom: 0;
}
strong {
font-weight: var(--font-weight-sub);
}
small {
font-size: var(--fs-small);
}
/* Desktop Typography Scale */
@media (min-width: 1024px) {
h1 {
font-family: var(--font-display);
font-size: var(--fs-h1-desktop);
}
h2 {
font-family: var(--font-display);
font-size: var(--fs-h2-desktop);
}
}
/* ============================================================
4. FOCUS & ACCESSIBILITY
============================================================ */
:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
/* Skip to main content link */
.skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 9999;
padding: var(--space-sm) var(--space-md);
background: var(--color-primary);
color: var(--color-white);
font-weight: var(--font-weight-sub);
border-radius: 0 0 var(--border-radius) 0;
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 0;
}
/* Visually hidden (screen-reader only) */
.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;
}
/* ==========================================================================
BLOG ARTICLE IMAGE STYLING
========================================================================== */
.article-image {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin: 2rem 0;
object-fit: cover;
display: block;
}
.article-image-hero {
margin-top: 0;
margin-bottom: 3rem;
max-height: 400px;
}
@media (min-width: 768px) {
.article-image-float-right {
float: right;
width: 45%;
margin: 0.5rem 0 1.5rem 2rem;
}
.article-image-float-left {
float: left;
width: 45%;
margin: 0.5rem 2rem 1.5rem 0;
}
}
/* ==========================================================================
5.5 UTILITIES
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
@media (min-width: 768px) {
.container {
padding-inline: 2rem;
}
}
@media (min-width: 1024px) {
.container {
padding-inline: 2.5rem;
}
}
/* Section spacing */
.section {
padding-block: var(--space-3xl);
background-color: var(--color-bg-alt);
}
.section--alt {
background-color: var(--color-bg);
}
.section__header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.section__header h2 {
color: var(--color-primary-dark);
margin-bottom: var(--space-sm);
}
.section__header p {
color: var(--color-text-light);
max-width: 48ch;
margin-inline: auto;
margin-bottom: 0;
}
@media (min-width: 768px) {
.section {
padding-block: var(--space-4xl);
}
}
/* Decorative Section Divider */
.section-divider {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 600px;
margin: calc(var(--space-xl) * -1) auto;
/* Pull sections slightly closer */
opacity: 0.7;
padding: 0 var(--space-lg);
position: relative;
z-index: 2;
}
.section-divider::before,
.section-divider::after {
content: '';
flex: 1;
height: 2px;
border-radius: 2px;
}
.section-divider::before {
background: linear-gradient(to right, transparent, var(--color-primary-light));
margin-right: var(--space-md);
}
.section-divider::after {
background: linear-gradient(to left, transparent, var(--color-primary-light));
margin-left: var(--space-md);
}
.section-divider svg,
.section-divider .section-divider-icon {
color: var(--color-primary-dark);
width: 24px;
height: 24px;
flex-shrink: 0;
fill: currentColor;
object-fit: contain;
}
/* Flex utilities */
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-col {
flex-direction: column;
}
.gap-sm {
gap: var(--space-sm);
}
.gap-md {
gap: var(--space-md);
}
.gap-lg {
gap: var(--space-lg);
}
.gap-xl {
gap: var(--space-xl);
}
/* Text alignment */
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
/* Color utilities */
.text-primary {
color: var(--color-primary);
}
.text-accent {
color: var(--color-accent);
}
.text-light {
color: var(--color-text-light);
}
.text-white {
color: var(--color-white);
}
.bg-primary {
background-color: var(--color-primary);
}
.bg-accent {
background-color: var(--color-accent);
}
.bg-alt {
background-color: var(--color-bg-alt);
}
/* Spacing utilities */
.mt-sm {
margin-top: var(--space-sm);
}
.mt-md {
margin-top: var(--space-md);
}
.mt-lg {
margin-top: var(--space-lg);
}
.mt-xl {
margin-top: var(--space-xl);
}
.mb-sm {
margin-bottom: var(--space-sm);
}
.mb-md {
margin-bottom: var(--space-md);
}
.mb-lg {
margin-bottom: var(--space-lg);
}
.mb-xl {
margin-bottom: var(--space-xl);
}
/* ============================================================
6. RESPONSIVE GRID
============================================================ */
.grid {
display: grid;
gap: var(--space-lg);
}
.grid-2 {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
.grid-3 {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
.grid-4 {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* ============================================================
7. BUTTONS & CTAs
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 0.75rem 1.5rem;
min-height: 3rem;
/* 48px */
min-width: 2.75rem;
/* 44px */
font-size: var(--font-size-base);
font-weight: var(--font-weight-head);
line-height: 1;
border-radius: var(--border-radius);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition:
background var(--transition-normal),
color var(--transition-normal),
border-color var(--transition-normal),
box-shadow var(--transition-normal),
transform var(--transition-normal);
white-space: nowrap;
}
.btn:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
.btn:active {
transform: translateY(1px);
}
/* Primary CTA — Gold Gradient */
.btn-primary {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
color: var(--color-bg-dark);
border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
border-color: transparent;
color: var(--color-bg-dark);
box-shadow: 0 4px 20px rgba(212, 146, 11, 0.4);
}
/* Secondary — Green outline */
.btn-secondary {
background-color: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
box-shadow: var(--shadow-glow);
}
/* Ghost — white outline (for use on dark/green backgrounds) */
.btn-ghost {
background-color: transparent;
color: var(--color-white);
border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
background-color: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}
/* Size variants */
.btn-sm {
padding: 0.5rem 1rem;
min-height: 2.75rem;
/* 44px */
font-size: var(--fs-small);
}
.btn-lg {
padding: 1rem 2rem;
min-height: 3.5rem;
font-size: 1.125rem;
}
/* Full-width button */
.btn-full {
width: 100%;
}
/* ============================================================
8. NAVIGATION
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background-color: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-normal), border-color var(--transition-normal), background-color var(--transition-normal);
}
.site-header.scrolled {
box-shadow: var(--shadow-md);
border-bottom: 2px solid var(--color-primary);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-height);
gap: var(--space-md);
}
/* Logo */
.nav__logo {
flex-shrink: 0;
text-decoration: none;
}
.nav__logo-img {
height: 48px;
width: auto;
display: block;
}
/* Desktop nav links */
.nav__links {
display: none;
align-items: center;
gap: var(--space-xl);
list-style: none;
margin: 0;
padding: 0;
}
.nav__links a {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
text-decoration: none;
padding-block: var(--space-xs);
position: relative;
transition: color var(--transition-normal);
}
.nav__links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-accent);
transition: width var(--transition-slow);
}
.nav__links a:hover,
.nav__links a.active {
color: var(--color-primary);
}
.nav__links a:hover::after,
.nav__links a.active::after {
width: 100%;
}
.nav__links a:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Right side: CTA group */
.nav__cta-group {
display: none;
align-items: center;
gap: var(--space-lg);
flex-shrink: 0;
}
.nav__phone {
display: flex;
align-items: center;
gap: var(--space-xs);
font-weight: var(--font-weight-sub);
color: var(--color-text);
text-decoration: none;
font-size: var(--font-size-base);
white-space: nowrap;
min-height: 2.75rem;
padding-block: var(--space-xs);
}
.nav__phone:hover {
color: var(--color-primary);
}
.nav__phone:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
.nav__phone svg {
width: 1rem;
height: 1rem;
fill: currentColor;
flex-shrink: 0;
}
/* Hamburger button */
.nav__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 2.75rem;
/* 44px */
height: 2.75rem;
/* 44px */
background: none;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
cursor: pointer;
padding: 0.5rem;
flex-shrink: 0;
transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.nav__hamburger:hover {
background-color: var(--color-bg-alt);
border-color: var(--color-primary);
}
.nav__hamburger:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
.nav__hamburger-bar {
display: block;
width: 22px;
height: 2px;
background-color: var(--color-text);
border-radius: 2px;
transition: transform var(--transition-normal), opacity var(--transition-normal);
transform-origin: center;
}
/* Hamburger open state (X icon) */
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile menu overlay */
.nav__mobile-menu {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background-color: var(--color-bg);
overflow-y: auto;
padding: var(--space-xl) var(--space-lg);
border-top: 1px solid var(--color-border);
transform: translateX(100%);
visibility: hidden;
transition: transform var(--transition-slow), visibility 0s linear 500ms;
box-shadow: var(--shadow-lg);
}
.nav__mobile-menu.is-open {
transform: translateX(0);
visibility: visible;
transition: transform var(--transition-slow), visibility 0s linear 0s;
}
.nav__mobile-links {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: var(--space-xl);
}
.nav__mobile-links li {
border-bottom: 1px solid var(--color-border);
}
.nav__mobile-links a {
display: flex;
padding: var(--space-md) var(--space-md);
font-size: 1.125rem;
font-weight: var(--font-weight-sub);
color: var(--color-text);
text-decoration: none;
min-height: 2.75rem;
/* 44px touch target */
align-items: center;
border-left: 3px solid transparent;
transition: color var(--transition-normal), border-color var(--transition-normal), padding-left var(--transition-normal);
}
.nav__mobile-links a:hover,
.nav__mobile-links a.active {
color: var(--color-primary);
border-left-color: var(--color-accent);
padding-left: var(--space-lg);
}
.nav__mobile-links a:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: 2px;
}
.nav__mobile-cta {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.nav__mobile-phone {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-weight: var(--font-weight-sub);
font-size: 1.125rem;
color: var(--color-text);
text-decoration: none;
padding: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
min-height: 3rem;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.nav__mobile-phone:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
.nav__mobile-phone:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
.nav__mobile-phone svg {
width: 1.125rem;
height: 1.125rem;
fill: currentColor;
}
/* Desktop nav breakpoint */
@media (min-width: 768px) {
.nav {
height: var(--nav-height-desk);
}
.nav__mobile-menu {
top: var(--nav-height-desk);
}
.nav__links {
display: flex;
}
.nav__cta-group {
display: flex;
}
.nav__hamburger {
display: none;
}
.nav__mobile-menu {
display: none !important;
}
}
/* ============================================================
9. HERO SECTION
============================================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero {
position: relative;
background-color: var(--color-hero-bg);
color: var(--color-white);
overflow: hidden;
min-height: 32rem;
display: flex;
align-items: center;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%);
}
.hero__bg-anim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40%;
z-index: 0;
overflow: hidden;
/* Smoothly fade the left edge into the background */
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 100%);
mask-image: linear-gradient(to right, transparent 0%, black 15%, black 100%);
}
@media (max-width: 767px) {
.hero__bg-anim {
width: 100%;
/* On mobile, fade the top edge instead, as the layout stacks vertically */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
}
}
/* Seasonal particle canvas */
.hero__particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero__container {
position: relative;
z-index: 2;
}
.hero__content {
position: relative;
z-index: 2;
padding-top: var(--space-xl);
padding-bottom: var(--space-2xl);
max-width: 42rem;
}
@media (min-width: 768px) {
.hero__content {
padding-block: var(--space-4xl);
}
}
/* Task 6.9 — LCP optimization: hero children are visible by default so
Largest Contentful Paint is not blocked by opacity:0. JS adds
.hero--animated to trigger the entrance animation after first paint. */
.hero--animated .hero__content>* {
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
.hero--animated .hero__content h1 {
animation-delay: 0.1s;
}
.hero--animated .hero__content p {
animation-delay: 0.3s;
}
.hero--animated .hero__content .hero__actions {
animation-delay: 0.5s;
}
.hero--animated .hero__content .hero__proof {
animation-delay: 0.7s;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-eyebrow);
font-weight: var(--font-weight-sub);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-md);
}
.hero__eyebrow::before {
content: '';
display: inline-block;
width: 2rem;
height: 2px;
background-color: var(--color-accent);
flex-shrink: 0;
}
.hero h1 {
color: var(--color-white);
margin-bottom: var(--space-lg);
}
.hero__subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--space-lg);
max-width: 38ch;
line-height: 1.65;
}
@media (min-width: 768px) {
.hero__subtitle {
font-size: 1.125rem;
margin-bottom: var(--space-xl);
}
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
align-items: center;
}
.hero__trust {
margin-top: var(--space-xl);
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
align-items: center;
}
.hero__trust-item {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--fs-small);
font-weight: var(--font-weight-sub);
color: rgba(255, 255, 255, 0.85);
}
@media (min-width: 768px) {
.hero {
min-height: 40rem;
}
.hero__content {
padding-block: var(--space-4xl) calc(var(--space-4xl) + var(--space-xl));
}
}
@media (min-width: 1024px) {
.hero {
min-height: 48rem;
}
}
/* ============================================================
10. SERVICE CARDS
============================================================ */
.services {
background-color: var(--color-bg-alt);
padding-bottom: var(--space-4xl);
}
.services__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-top: var(--space-2xl);
}
@media (min-width: 768px) {
.services__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.services__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* [Original service-card block removed — superseded by section 9.2 redesign below] */
/* ============================================================
11. TESTIMONIAL SECTION
============================================================ */
.testimonials {
background-color: var(--color-bg-alt);
}
.testimonial-card {
background-color: var(--color-bg);
border: 1px solid rgba(0, 0, 0, 0.03);
border-left: 3px solid var(--color-accent);
border-radius: var(--border-radius-lg);
padding: var(--space-2xl) var(--space-xl) var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-md);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.testimonial-card::before {
content: '\201C';
position: absolute;
top: 10px;
left: 20px;
font-size: 6rem;
font-family: var(--font-display);
color: var(--color-bg-alt);
line-height: 1;
z-index: 0;
pointer-events: none;
}
.testimonial-card>* {
position: relative;
z-index: 1;
}
.testimonial-card__stars {
display: flex;
gap: 2px;
color: var(--color-accent);
}
.testimonial-card__stars svg {
width: 1.125rem;
height: 1.125rem;
fill: currentColor;
}
.testimonial-card__quote {
font-size: 1rem;
line-height: var(--line-height-body);
color: var(--color-text);
font-style: italic;
flex: 1;
margin: 0;
}
.testimonial-card__author {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-sm);
}
.testimonial-card__avatar {
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: var(--color-primary);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-family: var(--font-display);
font-weight: var(--font-weight-head);
font-size: 1.125rem;
}
.testimonial-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-card__name {
font-weight: var(--font-weight-sub);
color: var(--color-text);
font-size: var(--font-size-base);
line-height: 1.3;
}
.testimonial-card__location {
font-size: var(--fs-small);
color: var(--color-text-light);
line-height: 1.3;
}
/* ============================================================
12. SERVICE AREA SECTION
============================================================ */
.areas {
background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
position: relative;
}
.areas::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
z-index: 0;
}
.areas>.container {
position: relative;
z-index: 1;
}
.areas .section__header h2 {
color: var(--color-white);
}
.areas .section__header p {
color: rgba(255, 255, 255, 0.85);
}
.area-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
margin-top: var(--space-xl);
}
.area-tag {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background-color: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 2rem;
font-size: var(--font-size-base);
font-weight: var(--font-weight-sub);
color: var(--color-white);
min-height: 2.75rem;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.area-tag:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-bg-dark);
}
.area-tag:hover svg {
fill: var(--color-bg-dark);
}
.area-tag svg {
width: 1rem;
height: 1rem;
fill: var(--color-accent);
flex-shrink: 0;
}
/* ============================================================
13. ABOUT / TRUST SECTION
============================================================ */
.trust-badges {
padding-block: var(--space-3xl);
background-color: var(--color-bg-alt);
}
/* [Original trust-badge block removed — superseded by section 9.1 redesign below] */
/* ============================================================
14. CTA BANNER
============================================================ */
.cta-banner {
background: linear-gradient(135deg,
var(--color-bg-dark) 0%,
var(--color-primary-dark) 50%,
var(--color-primary) 100%);
color: var(--color-white);
text-align: center;
padding-block: calc(var(--space-4xl) + 4rem) var(--space-4xl);
position: relative;
clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0 100%);
}
.cta-banner::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
z-index: 0;
}
.cta-banner>* {
position: relative;
z-index: 1;
}
.cta-banner h2 {
color: var(--color-white);
margin-bottom: var(--space-md);
}
.cta-banner p {
color: rgba(255, 255, 255, 0.88);
max-width: 42ch;
margin-inline: auto;
margin-bottom: var(--space-xl);
}
.cta-banner__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
align-items: center;
}
/* ============================================================
15. FOOTER
============================================================ */
.site-footer {
background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-alt) 100%);
color: rgba(255, 255, 255, 0.85);
padding-top: var(--space-4xl);
padding-bottom: 0;
position: relative;
}
/* Subtle dot-pattern overlay */
.site-footer::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
z-index: 0;
}
/* Decorative gradient fade from page content into footer */
.site-footer::after {
content: '';
position: absolute;
top: -3rem;
left: 0;
right: 0;
height: 3rem;
background: linear-gradient(180deg, transparent 0%, var(--color-bg-dark) 100%);
pointer-events: none;
z-index: 0;
}
.footer__grid {
display: grid;
gap: var(--space-2xl);
grid-template-columns: 1fr;
padding-bottom: var(--space-3xl);
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: 1.5fr 1fr 1fr;
gap: var(--space-3xl);
}
}
@media (min-width: 1024px) {
.footer__grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
}
}
/* Footer brand column */
.footer__logo {
display: inline-block;
margin-bottom: var(--space-md);
text-decoration: none;
}
.footer__logo-img {
height: 60px;
width: auto;
display: block;
}
.footer__tagline {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.75);
margin-bottom: var(--space-lg);
line-height: var(--line-height-body);
}
.footer__contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer__contact-list li {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.80);
}
.footer__contact-list svg {
width: 1rem;
height: 1rem;
fill: var(--color-accent);
flex-shrink: 0;
margin-top: 0.2em;
}
.footer__contact-list a {
color: rgba(255, 255, 255, 0.80);
text-decoration: none;
transition: color var(--transition-fast);
min-height: 2.75rem;
display: inline-flex;
align-items: center;
}
.footer__contact-list a:hover {
color: var(--color-white);
}
.footer__contact-list a:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Footer column headings */
.footer__col-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-sub);
color: var(--color-white);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-lg);
}
.footer__col-title::after {
content: '';
display: block;
width: 2rem;
height: 2px;
background: var(--color-accent);
margin-top: var(--space-sm);
border-radius: var(--border-radius-pill);
}
/* Footer nav lists */
.footer__nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer__nav-list a {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
transition: color var(--transition-fast), padding-left var(--transition-fast);
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-height: 2.75rem;
padding-block: var(--space-xs);
padding-left: 0;
position: relative;
}
.footer__nav-list a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: var(--color-accent);
border-radius: var(--border-radius-pill);
transition: width var(--transition-fast);
}
.footer__nav-list a:hover {
color: var(--color-accent);
padding-left: 0.75rem;
}
.footer__nav-list a:hover::before {
width: 0.375rem;
}
.footer__nav-list a:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Service area tags in footer */
.footer__area-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer__area-list li {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.75);
min-height: 2.75rem;
padding-block: var(--space-xs);
}
.footer__area-list svg {
width: 1.25rem;
height: 1.25rem;
fill: var(--color-accent);
flex-shrink: 0;
background: rgba(212, 146, 11, 0.15);
border-radius: 50%;
padding: 3px;
}
/* Footer bottom bar */
.footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-block: var(--space-lg);
position: relative;
z-index: 1;
}
.footer__bottom-inner {
display: flex;
flex-direction: column;
gap: var(--space-sm);
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.footer__bottom-inner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.footer__copyright {
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.55);
}
.footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
font-size: var(--fs-small);
}
.footer__legal a {
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition: color var(--transition-fast);
min-height: 2.75rem;
display: inline-flex;
align-items: center;
}
.footer__legal a:hover {
color: var(--color-white);
}
.footer__legal a:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
.footer__badge-wrapper {
margin-top: 1.25rem;
}
.footer__badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--fs-small);
font-weight: var(--font-weight-sub);
color: var(--color-accent);
background-color: rgba(212, 146, 11, 0.12);
border: 1px solid rgba(212, 146, 11, 0.3);
border-radius: 2rem;
padding: 0.25rem 0.75rem;
}
.footer__badge svg {
width: 0.875rem;
height: 0.875rem;
fill: currentColor;
flex-shrink: 0;
}
/* ============================================================
16. CARDS (generic)
============================================================ */
.card {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-normal);
}
.card:hover {
box-shadow: var(--shadow-md);
}
/* ============================================================
17. FORM ELEMENTS (Quote form / Contact)
============================================================ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.form-group label {
font-size: var(--font-size-base);
font-weight: var(--font-weight-sub);
color: var(--color-text);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem 1rem;
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
line-height: var(--line-height-body);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 3rem;
/* 48px */
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: 3px solid var(--color-accent);
outline-offset: 0;
border-color: var(--color-primary);
}
.form-group textarea {
min-height: 8rem;
resize: vertical;
}
.form-group--error input,
.form-group--error select,
.form-group--error textarea {
border-color: var(--color-error);
}
.form-error {
font-size: var(--fs-small);
color: var(--color-error);
}
/* ============================================================
18. BREADCRUMB
============================================================ */
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
align-items: center;
font-size: var(--fs-small);
color: var(--color-text-light);
padding-block: var(--space-md);
}
.breadcrumb a {
color: var(--color-primary);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb__sep {
color: var(--color-border);
}
.breadcrumb__current {
color: var(--color-text-light);
}
/* Breadcrumb on dark backgrounds */
.breadcrumb--dark,
.breadcrumb--dark .breadcrumb__current {
color: rgba(255, 255, 255, 0.7);
}
.breadcrumb--dark a {
color: rgba(255, 255, 255, 0.85);
}
.breadcrumb--dark a:hover {
color: var(--color-white);
}
.breadcrumb--dark .breadcrumb__sep {
color: rgba(255, 255, 255, 0.4);
}
/* ============================================================
19. MISC COMPONENTS
============================================================ */
/* Divider */
.divider {
border: none;
border-top: 1px solid var(--color-border);
margin-block: var(--space-xl);
}
/* Badge / pill */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 0.2em 0.65em;
font-size: var(--fs-small);
font-weight: var(--font-weight-sub);
border-radius: 2rem;
background-color: rgba(27, 94, 32, 0.1);
color: var(--color-primary);
}
.badge--accent {
background-color: rgba(212, 146, 11, 0.12);
color: var(--color-accent-dark);
}
/* Alert / notice */
.notice {
padding: var(--space-md) var(--space-lg);
border-left: 4px solid var(--color-primary);
background-color: rgba(27, 94, 32, 0.06);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
font-size: var(--font-size-base);
color: var(--color-text);
}
.notice--accent {
border-left-color: var(--color-accent);
background-color: rgba(212, 146, 11, 0.08);
}
/* Loading state */
.btn.is-loading {
opacity: 0.7;
cursor: wait;
pointer-events: none;
}
/* ============================================================
MOBILE STICKY BOTTOM ACTION BAR
============================================================ */
.mobile-action-bar {
display: none;
}
@media (max-width: 767px) {
.mobile-action-bar {
display: flex;
flex-wrap: wrap;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 998;
background-color: var(--color-bg);
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
padding: 0.75rem 1rem;
gap: 0.75rem;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.mobile-action-bar__call {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
flex: 1;
min-height: 3rem;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-primary);
border: 2px solid var(--color-primary);
border-radius: 4px;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.mobile-action-bar__call:hover,
.mobile-action-bar__call:focus-visible {
background-color: var(--color-primary);
color: var(--color-white);
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
.mobile-action-bar__call svg {
fill: currentColor;
flex-shrink: 0;
}
.mobile-action-bar__quote {
flex: 1;
min-height: 3rem;
}
.site-footer {
padding-bottom: 5rem;
}
}
/* ============================================================
TRUST ANNOUNCEMENT BAR
============================================================ */
.trust-bar {
background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-primary-dark) 100%);
color: rgba(255, 255, 255, 0.90);
font-size: 0.8125rem;
font-weight: 600;
padding-block: 0.4rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: max-height 0.3s ease, opacity 0.3s ease;
overflow: hidden;
max-height: 3rem;
}
.trust-bar.is-hidden {
max-height: 0;
opacity: 0;
pointer-events: none;
}
.trust-bar__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.trust-bar__item {
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
position: relative;
}
.trust-bar__item:not(:last-child)::after {
content: '\00B7';
position: absolute;
right: -0.85rem;
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.4);
pointer-events: none;
}
.trust-bar__item svg {
fill: var(--color-accent);
flex-shrink: 0;
}
@media (max-width: 479px) {
.trust-bar__item--mid {
display: none;
}
}
.trust-bar__geo {
display: none;
}
.trust-bar__geo--short {
display: inline;
}
@media (min-width: 640px) {
.trust-bar__geo {
display: inline;
}
.trust-bar__geo--short {
display: none;
}
}
/* ============================================================
FOOTER CTA CONVERSION BLOCK
============================================================ */
.footer__cta-block {
background-color: rgba(255, 255, 255, 0.05);
border-top: 2px solid var(--color-accent);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-block: 2rem;
position: relative;
z-index: 1;
}
.footer__cta-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
}
@media (min-width: 768px) {
.footer__cta-inner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.footer__cta-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.footer__cta-actions {
justify-content: flex-start;
}
}
.footer__cta-phone {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1.375rem;
font-weight: var(--font-weight-head);
color: var(--color-white);
text-decoration: none;
min-height: 3rem;
padding: 0.625rem 1.25rem;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: var(--border-radius);
transition: border-color var(--transition-fast), background-color var(--transition-fast);
white-space: nowrap;
letter-spacing: 0.02em;
}
.footer__cta-phone svg {
fill: var(--color-accent);
flex-shrink: 0;
}
.footer__cta-phone:hover,
.footer__cta-phone:focus-visible {
border-color: var(--color-white);
background-color: rgba(255, 255, 255, 0.08);
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
.footer__trust-badges {
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.footer__trust-badges {
justify-content: flex-end;
}
}
.footer__trust-badges li {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.80);
white-space: nowrap;
}
.footer__trust-badges svg {
fill: var(--color-accent);
flex-shrink: 0;
}
/* ============================================================
SEASONAL URGENCY BANNER
============================================================ */
.urgency-bar {
background-color: var(--color-accent-light);
border-bottom: 2px solid var(--color-accent);
padding-block: 0.65rem;
}
.urgency-bar__inner {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.urgency-bar__icon {
fill: var(--color-accent-dark);
flex-shrink: 0;
}
.urgency-bar__text {
flex: 1;
font-size: 0.9rem;
color: var(--color-bg-dark);
margin: 0;
min-width: 12rem;
}
.urgency-bar__cta {
background-color: var(--color-primary);
color: var(--color-white);
font-size: 0.875rem;
font-weight: 700;
padding: 0.4rem 1rem;
min-height: 2.75rem;
border-radius: var(--border-radius);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--transition-fast);
display: inline-flex;
align-items: center;
}
.urgency-bar__cta:hover {
background-color: var(--color-primary-dark);
}
.urgency-bar__cta:focus-visible {
outline: 3px solid var(--color-primary-dark);
outline-offset: 2px;
}
.urgency-bar__close {
background: none;
border: 1px solid rgba(15, 43, 20, 0.2);
border-radius: var(--border-radius);
cursor: pointer;
font-size: 1rem;
color: var(--color-bg-dark);
padding: 0.25rem 0.5rem;
min-height: 2.75rem;
min-width: 2.75rem;
flex-shrink: 0;
transition: background-color var(--transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
}
.urgency-bar__close:hover {
background-color: rgba(15, 43, 20, 0.08);
}
.urgency-bar__close:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
/* [Duplicate service-card__price removed — superseded by section 9.2 redesign] */
/* ============================================================
HERO SOCIAL PROOF COUNT
============================================================ */
.hero__proof {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1.25rem;
}
.hero__proof-stars {
display: flex;
gap: 2px;
}
.hero__proof-score {
font-size: 1rem;
font-weight: 700;
color: var(--color-white);
}
.hero__proof-count {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.85);
}
.hero__proof-link {
font-size: 0.85rem;
color: var(--color-white);
text-decoration: underline;
text-underline-offset: 3px;
opacity: 0.9;
transition: opacity var(--transition-fast);
}
.hero__proof-link:hover {
opacity: 1;
}
.hero__proof-link:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================================
FAQ SECTION
============================================================ */
.faq-list {
list-style: none;
padding: 0;
margin: 0;
}
/* [Original FAQ block removed — superseded by T-014.6 redesign below] */
/* ============================================================
BEFORE/AFTER GALLERY
============================================================ */
/* [Original gallery block removed — superseded by T-014.4 redesign below] */
/* ============================================================
GEO CROSS-LINK CARDS (PREMIUM REDESIGN)
============================================================ */
.geo-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl) var(--space-md);
margin-top: var(--space-2xl);
}
@media (min-width: 640px) {
.geo-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.geo-card-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.area-card {
background-color: var(--color-white);
/* Elegant dot grid pattern for abstract texture */
background-image: radial-gradient(rgba(27, 94, 32, 0.08) 1.5px, transparent 1.5px);
background-position: 0 0;
background-size: 16px 16px;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--border-radius-2xl);
padding: var(--space-2xl) var(--space-xl);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md);
text-decoration: none;
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out, border-color 0.6s ease-in-out;
}
/* Beautiful expanding abstract ambient glow */
.area-card::before {
content: '';
position: absolute;
bottom: -20%;
right: -20%;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(212, 146, 11, 0.15) 0%, rgba(212, 146, 11, 0) 70%);
border-radius: 50%;
transition: transform var(--transition-slow);
pointer-events: none;
z-index: 1;
}
@keyframes shimmer-border {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
.area-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
/* Holographic multi-stop gradient */
background: linear-gradient(90deg,
var(--color-primary) 0%,
var(--color-accent) 25%,
rgba(255, 255, 255, 0.9) 50%,
var(--color-accent) 75%,
var(--color-primary) 100%);
background-size: 200% auto;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms ease-out;
z-index: 2;
}
.area-card:hover {
transform: translateY(-8px);
border-color: rgba(27, 94, 32, 0.15);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
/* Immediately respond to hover, overriding stagger delays */
transition-delay: 0s !important;
}
.area-card:hover::before {
transform: scale(1.8);
}
.area-card:hover::after {
transform: scaleX(1);
animation: shimmer-border 6s linear infinite;
}
.area-card__title {
font-family: var(--font-display);
font-size: 1.85rem;
font-weight: var(--font-weight-head);
color: var(--color-primary-dark);
margin: 0;
line-height: 1.1;
letter-spacing: -0.01em;
position: relative;
z-index: 2;
min-height: 2.2em;
/* Ensure all titles span ~2 lines to align the descriptions horizontally */
display: flex;
align-items: center;
justify-content: center;
}
.area-card__desc {
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.7;
margin: 0;
flex: 1;
font-weight: 400;
position: relative;
z-index: 2;
}
.area-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.95rem;
font-weight: 700;
font-family: var(--font-body);
color: var(--color-accent-dark);
text-decoration: none;
transition: gap var(--transition-normal);
margin-top: var(--space-md);
text-transform: uppercase;
letter-spacing: 0.05em;
position: relative;
z-index: 2;
}
.area-card:hover .area-card__link {
gap: var(--space-md);
}
.area-card__link:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* Area card location icon (area subpages) */
.area-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background-color: rgba(27, 94, 32, 0.08);
border-radius: 50%;
position: relative;
z-index: 2;
transition: transform var(--transition-normal);
}
.area-card__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.area-card:hover .area-card__icon {
transform: scale(1.1);
}
/* ============================================================
LEGAL PAGES (Privacy Policy, Terms)
============================================================ */
.legal-page {
padding-top: var(--space-3xl);
}
.legal-page .container {
max-width: 48rem;
}
.legal-page h1 {
font-family: var(--font-display);
font-size: 2rem;
color: var(--color-primary-dark);
margin-bottom: var(--space-sm);
}
.legal-page .legal-page__date {
color: var(--color-text-light);
margin-bottom: var(--space-2xl);
font-size: 0.9rem;
}
.legal-page__body {
line-height: 1.7;
color: var(--color-text);
}
.legal-page__body h2 {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--color-primary-dark);
margin-top: var(--space-2xl);
margin-bottom: var(--space-sm);
}
.legal-page__body ul {
padding-left: 1.5rem;
margin-top: var(--space-sm);
margin-bottom: var(--space-md);
}
.legal-page__body li {
margin-bottom: 0.5rem;
}
.legal-page__body a {
color: var(--color-primary);
}
/* ============================================================
20. PRINT STYLES
============================================================ */
@media print {
.site-header,
.nav__hamburger,
.nav__mobile-menu,
.cta-banner,
.btn {
display: none !important;
}
body {
font-size: 12pt;
color: #000;
}
a {
color: #000;
text-decoration: underline;
}
.container {
max-width: 100%;
padding: 0;
}
}
/* [Original testimonials__grid removed — superseded by T-004 redesign below] */
/* ============================================================
T-005: Owner Photo Layout
============================================================ */
.about-team__layout {
display: flex;
gap: var(--space-2xl);
align-items: flex-start;
}
.about-team__photo-col {
flex: 0 0 300px;
position: relative;
}
.about-team__photo-img {
width: 100%;
height: auto;
border-radius: var(--border-radius-lg);
display: block;
box-shadow: var(--shadow-md);
}
.about-team__photo-badge {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
text-align: center;
padding: var(--space-sm) var(--space-md);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
font-size: var(--fs-small);
font-weight: var(--font-weight-sub);
letter-spacing: 0.02em;
}
.about-team__photo-badge strong {
color: var(--color-accent-light);
}
.about-team__text-col {
flex: 1;
}
.about-team__name {
font-family: var(--font-display);
font-weight: var(--font-weight-head);
color: var(--color-primary-dark);
margin-bottom: var(--space-md);
}
@media (max-width: 767px) {
.about-team__layout {
flex-direction: column;
}
.about-team__photo-col {
flex: none;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
}
/* ============================================================
T-005: Stats Strip
============================================================ */
.stats-strip {
background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-primary-dark) 100%);
border-top: 3px solid var(--color-accent);
border-bottom: none;
position: relative;
}
.stats-strip::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
z-index: 0;
}
.stats-strip>.container {
position: relative;
z-index: 1;
}
.stats-strip__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: var(--space-xl);
text-align: center;
}
.stats-strip__item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
}
.stats-strip__number {
font-family: var(--font-display);
font-size: 2.25rem;
font-weight: var(--font-weight-head);
color: var(--color-accent);
line-height: 1;
letter-spacing: -0.01em;
}
.stats-strip__label {
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.8);
max-width: 180px;
text-align: center;
font-weight: var(--font-weight-medium);
}
/* ============================================================
T-006: Quote Page Micro-Testimonials
============================================================ */
.quote-proof {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
padding: var(--space-xl);
background-color: var(--color-bg-alt);
border-radius: var(--border-radius-lg);
border: 1px solid var(--color-border-light);
box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) {
.quote-proof {
grid-template-columns: 1fr;
}
}
.quote-proof__item {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
border-left: 3px solid var(--color-accent);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
background-color: var(--color-bg);
transition: box-shadow var(--transition-fast);
}
.quote-proof__item:hover {
box-shadow: var(--shadow-sm);
}
.quote-proof__stars {
display: flex;
gap: 2px;
color: var(--color-accent);
}
.quote-proof__text {
font-style: italic;
color: var(--color-text);
font-size: 0.95rem;
line-height: 1.6;
}
.quote-proof__byline {
font-size: var(--fs-small);
color: var(--color-text-light);
font-weight: var(--font-weight-sub);
}
/* ============================================================
T-006: Quote Steps
============================================================ */
.quote-steps {
list-style: none;
padding: 0;
margin: 0 0 var(--space-xl) 0;
display: flex;
gap: var(--space-lg);
flex-wrap: wrap;
}
@media (max-width: 767px) {
.quote-steps {
flex-direction: column;
}
}
.quote-step {
display: flex;
align-items: flex-start;
gap: var(--space-md);
flex: 1;
min-width: 180px;
padding: var(--space-lg);
background-color: var(--color-bg-alt);
border-radius: var(--border-radius);
border: 1px solid var(--color-border-light);
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.quote-step:hover {
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.quote-step__num {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
font-family: var(--font-display);
font-weight: var(--font-weight-head);
font-size: 1.2rem;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}
.quote-step__content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.quote-step__label {
font-size: 0.95rem;
font-weight: var(--font-weight-sub);
color: var(--color-text);
}
.quote-step__detail {
font-size: var(--fs-small);
color: var(--color-text-light);
line-height: 1.5;
}
/* ============================================================
T-006: FAQ CTA Nudge
============================================================ */
.faq-item__cta-nudge {
margin-top: var(--space-sm);
font-weight: 600;
}
.faq-cta-link {
color: var(--color-primary);
text-decoration: underline;
}
/* ============================================================
T-004: Testimonial Grid
============================================================ */
.testimonials__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
@media (max-width: 767px) {
.testimonials__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
T-011: Subpage Hero (.page-hero)
============================================================ */
.page-hero {
background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%);
color: var(--color-white);
text-align: center;
padding-block: var(--space-4xl) calc(var(--space-4xl) + 4rem);
position: relative;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%);
}
.page-hero h1 {
font-family: var(--font-display);
color: var(--color-white);
font-size: var(--fs-h1-mobile);
font-weight: var(--font-weight-head);
margin-bottom: var(--space-md);
}
@media (min-width: 768px) {
.page-hero h1 {
font-size: var(--fs-h1-desktop);
}
}
.page-hero__subtitle {
font-size: var(--fs-lead);
color: rgba(255, 255, 255, 0.8);
max-width: 42ch;
margin-inline: auto;
margin-bottom: var(--space-xl);
line-height: var(--line-height-body);
}
.page-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
align-items: center;
}
.page-hero__reassurance {
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.85);
text-align: center;
margin-top: var(--space-sm);
letter-spacing: 0.01em;
}
/* Breadcrumb on dark hero backgrounds */
.page-hero .breadcrumb {
justify-content: center;
color: rgba(255, 255, 255, 0.7);
padding-bottom: var(--space-lg);
}
.page-hero .breadcrumb a {
color: rgba(255, 255, 255, 0.85);
}
.page-hero .breadcrumb a:hover {
color: var(--color-white);
}
.page-hero .breadcrumb__sep {
color: rgba(255, 255, 255, 0.4);
}
.page-hero .breadcrumb__current {
color: rgba(255, 255, 255, 0.7);
}
/* ============================================================
8. SCROLL ANIMATIONS
Utility classes to be triggered by IntersectionObserver
============================================================ */
/* Base animation states */
.animate-up,
.animate-fade,
.animate-zoom {
opacity: 0;
transition: opacity 1.9s ease-out, transform 1.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Specific Transforms */
.animate-up {
transform: translateY(50px);
}
.animate-zoom {
transform: scale(0.95);
}
/* The 'is-visible' class is added by main.js intersection observer */
.animate-up.is-visible,
.animate-fade.is-visible,
.animate-zoom.is-visible {
opacity: 1;
transform: none;
}
/* Custom Keyframe animation for Area Cards to avoid transform transition conflicts with hover */
@keyframes area-card-entrance {
0% {
opacity: 0;
transform: translate(-30px, 60px) scale(0.95);
}
100% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
}
.animate-area-card {
opacity: 0;
}
.animate-area-card.is-visible {
animation: area-card-entrance 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
animation-delay: var(--enter-delay, 0s);
}
/* Delays for staggered children */
.delay-1 {
transition-delay: 150ms;
--enter-delay: 150ms;
}
.delay-2 {
transition-delay: 300ms;
--enter-delay: 300ms;
}
.delay-3 {
transition-delay: 450ms;
--enter-delay: 450ms;
}
.delay-4 {
transition-delay: 600ms;
--enter-delay: 600ms;
}
.delay-5 {
transition-delay: 750ms;
--enter-delay: 750ms;
}
/* Ensure animation classes override component-level transitions without zeroing out transition-delay */
.why-us__item.animate-up,
.testimonial-card.animate-up,
.trust-badge.animate-up {
transition: opacity 1.9s ease-out var(--enter-delay, 0s), transform 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--enter-delay, 0s);
}
.why-us__item.animate-up.is-visible,
.testimonial-card.animate-up.is-visible,
.trust-badge.animate-up.is-visible {
transition: opacity 1.9s ease-out var(--enter-delay, 0s), transform 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--enter-delay, 0s), box-shadow var(--transition-slow), border-color var(--transition-normal);
}
/* Service cards specifically requested to be slightly slower at 2.2s */
.service-card.animate-up {
transition: opacity 2.2s ease-out var(--enter-delay, 0s), transform 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) var(--enter-delay, 0s);
}
.service-card.animate-up.is-visible {
transition: opacity 2.2s ease-out var(--enter-delay, 0s), transform 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) var(--enter-delay, 0s), box-shadow var(--transition-slow), border-color var(--transition-normal);
}
/* ============================================================
9. COMPONENT REDESIGN
Specific overrides and enhancements for the redesign
============================================================ */
/* 9.1 Trust Badges Enhancements */
.trust-badges {
padding-block: var(--space-xl);
}
.trust-badges__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-lg) var(--space-2xl);
}
.trust-badge {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: var(--font-weight-sub);
color: var(--color-text);
background: var(--color-white);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.trust-badge:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* 9.2 Service Cards Redesign — enhanced with gold border + display font */
.service-card {
display: flex;
flex-direction: column;
background-color: var(--color-bg);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-normal);
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.03);
border-top: 3px solid transparent;
/* Animate all service cards together as a row instead of staggering */
--enter-delay: 0s !important;
transition-delay: 0s !important;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-top-color: var(--color-accent);
transition-duration: var(--transition-slow) !important;
transition-delay: 0s !important;
}
.service-card__image {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform var(--transition-slow);
}
/* Zoom image cleanly on parent hover */
.service-card:hover .service-card__image {
transform: scale(1.05);
}
.service-card__body {
padding: var(--space-xl);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.service-card__title {
margin-bottom: var(--space-sm);
color: var(--color-primary-dark);
font-family: var(--font-display);
font-weight: var(--font-weight-head);
}
.service-card__desc {
color: var(--color-text-light);
line-height: var(--line-height-body);
flex-grow: 1;
margin-bottom: var(--space-lg);
}
.service-card__image-wrap {
overflow: hidden;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.service-card__price {
display: inline-block;
background-color: var(--color-primary-light);
color: var(--color-white);
font-size: var(--fs-small);
font-weight: var(--font-weight-sub);
padding: var(--space-xs) var(--space-md);
border-radius: var(--border-radius-pill);
margin-bottom: var(--space-md);
}
/* Icon-based service cards (area pages) — no image, no body wrapper */
.service-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
background-color: var(--color-accent-light);
border-radius: 50%;
margin-bottom: var(--space-sm);
flex-shrink: 0;
transition: transform var(--transition-normal);
}
.service-card__icon svg {
width: 1.75rem;
height: 1.75rem;
}
.service-card:hover .service-card__icon {
transform: scale(1.08);
}
/* When service-card has no .service-card__body wrapper (area pages), add padding */
.service-card:not(:has(.service-card__body)) {
padding: var(--space-xl);
}
/* Service card link (area pages — standalone without btn-outline) */
.service-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--color-primary);
font-size: var(--fs-small);
font-weight: var(--font-weight-sub);
text-decoration: none;
margin-top: auto;
padding-top: var(--space-sm);
transition: gap var(--transition-normal), color var(--transition-normal);
}
.service-card__link:hover {
color: var(--color-accent-dark);
gap: var(--space-sm);
}
/* Update regular outline btn to look sharp in cards */
.btn-outline {
background-color: transparent;
color: var(--color-primary);
border: 1.5px solid var(--color-primary);
border-radius: var(--border-radius);
padding: 0.5rem 1.25rem;
font-weight: var(--font-weight-sub);
text-align: center;
transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}
.btn-outline:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
/* 9.3 Why Choose Us Enhancements */
.why-us__item {
background: var(--color-white);
padding: 1.5rem 1.75rem;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03), 0 8px 32px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.04);
transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.why-us__item:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.04);
transform: translateY(-2px);
}
.why-us__item-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.875rem;
}
.why-us__icon {
width: 3rem;
height: 3rem;
min-width: 3rem;
background-color: var(--color-accent-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition-normal), background-color var(--transition-normal);
}
.why-us__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.why-us__item:hover .why-us__icon {
transform: scale(1.08);
}
.why-us__title {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
color: var(--color-text);
margin: 0;
}
.why-us__desc {
font-size: 0.9rem;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-light);
margin: 0;
}
/* 9.4 Testimonial Enhancements — overridden by Section 11 above */
/* 9.5 Service Area Enhancements — superseded by T-015 below */
/* ============================================================
T-014: SERVICE PAGES LAYOUT OVERHAUL
Premium styling for all service page components
============================================================ */
/* --------------------------------------------------------------
T-014.1: Section Heading Accent Lines
Gold accent underline below all service-page section headings
-------------------------------------------------------------- */
.service-intro>.container>h2::after,
.gallery-section>.container>h2::after,
.faq-section>.container>h2::after,
.section>.container>.feature-list~h2::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background: linear-gradient(to right, var(--color-accent), var(--color-accent-dark));
margin-top: var(--space-sm);
border-radius: var(--border-radius-pill);
}
/* Generic heading accent for sections with h2 inside .container on service pages */
.section--alt>.container>h2::after,
.section:not(.page-hero):not(.cta-banner):not(.services):not(.testimonials):not(.areas):not(.trust-badges)>.container>h2::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background: linear-gradient(to right, var(--color-accent), var(--color-accent-dark));
margin-top: var(--space-sm);
border-radius: var(--border-radius-pill);
}
/* Centered variant for centered sections like gallery */
.gallery-section>.container>h2::after {
margin-inline: auto;
}
/* --------------------------------------------------------------
T-014.2: Service Intro — Lead Paragraph Styling
Decorative left border + enhanced typography
-------------------------------------------------------------- */
.service-intro .container {
border-left: 4px solid var(--color-accent);
padding-left: var(--space-xl);
}
.service-intro .container h2 {
margin-bottom: var(--space-lg);
}
.service-intro .container p {
font-size: var(--fs-lead);
color: var(--color-text-light);
line-height: 1.7;
max-width: 72ch;
}
@media (min-width: 768px) {
.service-intro .container {
padding-left: var(--space-2xl);
}
}
/* --------------------------------------------------------------
T-014.3: Feature List — Premium Grid Cards
Transforms plain UL into a 2-col card grid with hover effects
-------------------------------------------------------------- */
.feature-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
list-style: none;
padding: 0;
margin-top: var(--space-2xl);
}
@media (min-width: 768px) {
.feature-list {
grid-template-columns: repeat(2, 1fr);
}
}
.feature-list li {
padding: var(--space-xl);
background-color: var(--color-bg);
border-radius: var(--border-radius);
border-left: 4px solid var(--color-primary);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.feature-list li:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.feature-list li strong {
display: block;
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--font-weight-head);
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
/* --------------------------------------------------------------
T-014.4: Gallery — Premium Before/After Treatment
Enhanced gallery pairs with overlay badges and hover effects
-------------------------------------------------------------- */
.gallery-section>.container>h2 {
text-align: center;
margin-bottom: var(--space-sm);
}
.gallery-intro {
text-align: center;
max-width: 48ch;
margin-inline: auto;
margin-bottom: var(--space-2xl);
color: var(--color-text-light);
font-size: var(--fs-lead);
line-height: 1.6;
}
.gallery-pair {
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-md);
background-color: var(--color-bg);
}
.gallery-pair__images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: var(--border-radius) var(--border-radius) 0 0;
overflow: hidden;
}
.gallery-pair__slot {
position: relative;
overflow: hidden;
}
.gallery-pair__slot img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
transition: transform var(--transition-slow);
}
.gallery-pair__slot:hover img {
transform: scale(1.05);
}
/* Before/After label badges */
.gallery-pair__label {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
background: rgba(0, 0, 0, 0.7);
color: var(--color-white);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.25rem 0.625rem;
border-radius: var(--border-radius-pill);
z-index: 2;
backdrop-filter: blur(4px);
}
.gallery-pair__label--after {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
/* View larger overlay on hover */
.gallery-pair__slot::after {
content: 'View Larger';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 43, 20, 0.5);
color: var(--color-white);
font-size: var(--fs-small);
font-weight: var(--font-weight-sub);
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0;
transition: opacity var(--transition-normal);
z-index: 1;
}
.gallery-pair__slot:hover::after {
opacity: 1;
}
.gallery-pair__caption {
margin: 0;
padding: var(--space-md) var(--space-lg);
font-size: var(--fs-small);
color: var(--color-text-light);
text-align: center;
font-style: italic;
background-color: var(--color-bg);
border-top: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
.gallery-pair__slot img {
height: 280px;
}
}
/* --------------------------------------------------------------
T-014.5: Process Steps — Visual Timeline Component
Vertical timeline on mobile, horizontal on desktop
-------------------------------------------------------------- */
.process-steps {
list-style: none;
padding: 0;
margin-top: var(--space-2xl);
position: relative;
}
/* Vertical connecting line (mobile) */
.process-steps::before {
content: '';
position: absolute;
left: 1.5rem;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
z-index: 0;
}
.process-step {
display: flex;
gap: var(--space-xl);
padding-bottom: var(--space-2xl);
position: relative;
}
.process-step:last-child {
padding-bottom: 0;
}
.process-step__number {
flex-shrink: 0;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--font-weight-head);
border-radius: 50%;
position: relative;
z-index: 1;
box-shadow: 0 0 0 4px var(--color-bg), var(--shadow-sm);
}
.process-step__title {
font-family: var(--font-display);
color: var(--color-text);
margin-bottom: var(--space-sm);
font-weight: var(--font-weight-head);
}
.process-step>div p {
color: var(--color-text-light);
line-height: 1.7;
}
/* Desktop: horizontal timeline layout */
@media (min-width: 768px) {
.process-steps {
display: flex;
gap: var(--space-xl);
}
/* Horizontal connecting line */
.process-steps::before {
left: 0;
right: 0;
top: 1.5rem;
bottom: auto;
width: auto;
height: 2px;
}
.process-step {
flex: 1;
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 0;
}
.process-step__number {
box-shadow: 0 0 0 4px var(--color-bg), var(--shadow-sm);
margin-bottom: var(--space-md);
}
}
/* --------------------------------------------------------------
T-014.6: FAQ Section — Premium Accordion Enhancement
Enhanced borders, typography, chevron rotation, hover states
-------------------------------------------------------------- */
.faq-section>.container>h2 {
margin-bottom: var(--space-2xl);
}
.faq-list {
max-width: 48rem;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.faq-item {
background-color: var(--color-white);
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
margin-bottom: 0;
overflow: hidden;
}
.faq-item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--color-primary-light);
}
.faq-item details[open] {
border-left: 4px solid var(--color-primary);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) calc(var(--space-xl) + 2.5rem) var(--space-lg) var(--space-xl);
font-size: 1.125rem;
font-weight: var(--font-weight-sub);
font-family: var(--font-family);
cursor: pointer;
list-style: none;
position: relative;
color: var(--color-text);
transition: color var(--transition-normal), background-color var(--transition-normal);
min-height: 3rem;
background-color: var(--color-white);
}
.faq-question:hover {
color: var(--color-primary);
background-color: rgba(248, 250, 245, 0.5);
}
/* Remove browser default marker */
.faq-question::-webkit-details-marker {
display: none;
}
/* Custom circular chevron indicator */
.faq-question::before {
content: '';
position: absolute;
right: var(--space-xl);
top: 50%;
width: 2.25rem;
height: 2.25rem;
background-color: var(--color-bg-alt);
border-radius: 50%;
transform: translateY(-50%);
transition: background-color var(--transition-normal);
z-index: 1;
}
/* Chevron arrow */
.faq-question::after {
content: '';
position: absolute;
right: calc(var(--space-xl) + 0.85rem);
top: 50%;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid var(--color-primary);
border-bottom: 2px solid var(--color-primary);
transform: translateY(-65%) rotate(45deg);
transition: transform var(--transition-normal), border-color var(--transition-normal);
z-index: 2;
flex-shrink: 0;
}
details[open]>.faq-question::before {
background-color: var(--color-primary);
}
details[open]>.faq-question::after {
transform: translateY(-25%) rotate(-135deg);
border-color: var(--color-white);
}
.faq-answer {
padding: 0 var(--space-xl) var(--space-lg) var(--space-xl);
color: var(--color-text-light);
line-height: 1.7;
background-color: var(--color-white);
}
/* --------------------------------------------------------------
T-014.7: Section Dark Variant
Dark background utility for process steps or feature sections
-------------------------------------------------------------- */
.section--dark {
background-color: var(--color-bg-dark);
color: var(--color-white);
}
.section--dark h2 {
color: var(--color-white);
}
.section--dark h2::after {
background: linear-gradient(to right, var(--color-accent), var(--color-accent-light));
}
.section--dark p {
color: rgba(255, 255, 255, 0.85);
}
.section--dark h3 {
color: var(--color-white);
}
/* Process steps on dark bg need adjusted ring color */
.section--dark .process-step__number {
box-shadow: 0 0 0 4px var(--color-bg-dark), var(--shadow-sm);
}
.section--dark .process-step__title {
color: var(--color-white);
}
.section--dark .process-step>div p {
color: rgba(255, 255, 255, 0.85);
}
/* --------------------------------------------------------------
T-014.8: Section CTA Banner Inner Enhancement
Already styled in T-013, these are minor refinements
-------------------------------------------------------------- */
.cta-banner__inner {
max-width: 42rem;
margin-inline: auto;
}
.cta-banner__title {
font-family: var(--font-display);
font-weight: var(--font-weight-head);
margin-bottom: var(--space-md);
}
.cta-banner__subtitle {
color: rgba(255, 255, 255, 0.88);
max-width: 42ch;
margin-inline: auto;
margin-bottom: var(--space-xl);
line-height: 1.6;
}
.cta-banner__hours {
margin-top: var(--space-lg);
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0;
}
/* --------------------------------------------------------------
T-014.9: Gallery Grid Responsive Enhancement
-------------------------------------------------------------- */
@media (max-width: 639px) {
.gallery-pair__images {
grid-template-columns: 1fr;
}
.gallery-pair__slot img {
height: 200px;
}
}
/* ============================================================
T-015: AREA PAGES LAYOUT OVERHAUL
CSS for area-page-specific components
============================================================ */
/* --------------------------------------------------------------
T-015.1: City Intro — Lead Paragraph Styling
Enhanced typography for the multi-paragraph city intro section
-------------------------------------------------------------- */
.city-intro .container>p:first-of-type {
font-size: var(--fs-lead);
color: var(--color-text);
line-height: 1.8;
font-weight: var(--font-weight-normal);
max-width: 72ch;
}
.city-intro .container>p {
color: var(--color-text-light);
line-height: 1.7;
max-width: 72ch;
margin-bottom: var(--space-lg);
}
.city-intro .container>p:last-of-type {
margin-bottom: 0;
}
.city-intro .container>h2 {
margin-bottom: var(--space-xl);
}
/* --------------------------------------------------------------
T-015.2: Areas Grid — Cross-link Card Layout
Responsive grid for "Other Areas" section
-------------------------------------------------------------- */
.areas__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-top: var(--space-2xl);
}
@media (min-width: 640px) {
.areas__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.areas__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* [Removed: Old area card sub-components superseded by premium redesign at line 2231] */
/* ============================================================
T-017: INTERACTIVE POLISH
Animation classes, reduced motion, FAQ animation support
============================================================ */
/* ============================================================
T-018: HOMEPAGE LAYOUT POLISH
Section heading accent lines for homepage sections
============================================================ */
/* Add gold accent line under homepage section headings */
.services .section__header h2::after,
.testimonials .section__header h2::after,
.why-us .section__header h2::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background: linear-gradient(to right, var(--color-accent), var(--color-accent-dark));
margin: var(--space-sm) auto 0;
border-radius: var(--border-radius-pill);
}
/* Testimonial card text (blockquote) styling enhancement */
.testimonial-card__text {
font-style: italic;
color: var(--color-text);
line-height: 1.7;
flex: 1;
}
.testimonial-card__text p {
margin: 0;
}
/* Testimonial card city styling */
.testimonial-card__city {
font-size: var(--fs-small);
color: var(--color-text-light);
}
/* ============================================================
T-019: ABOUT & CONTACT PAGE POLISH
Premium styles for about-testimonials, contact-cards, prose,
and contact-quote-block components
============================================================ */
/* About testimonials section heading */
.about-testimonials h2 {
font-family: var(--font-display);
font-weight: var(--font-weight-head);
color: var(--color-primary-dark);
margin-bottom: var(--space-sm);
}
.about-testimonials h2::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background: linear-gradient(to right, var(--color-accent), var(--color-accent-dark));
margin-top: var(--space-sm);
border-radius: var(--border-radius-pill);
}
/* About testimonials grid — 3-column on desktop */
.about-testimonials .testimonials__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-top: var(--space-2xl);
}
@media (min-width: 768px) {
.about-testimonials .testimonials__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.about-testimonials .testimonials__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Prose content — about story section */
.prose {
max-width: 72ch;
}
.prose p {
color: var(--color-text-light);
line-height: 1.8;
margin-bottom: var(--space-lg);
font-size: var(--fs-lead);
}
.prose p:first-of-type {
font-size: 1.15rem;
color: var(--color-text);
font-weight: var(--font-weight-medium);
}
.prose p:last-child {
margin-bottom: 0;
}
/* Contact info cards grid */
.contact-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
@media (min-width: 640px) {
.contact-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.contact-cards {
grid-template-columns: repeat(4, 1fr);
}
}
/* Contact card premium styling */
.contact-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-sm);
padding: var(--space-xl);
background-color: var(--color-bg);
border-radius: var(--border-radius-lg);
border: 1px solid rgba(0, 0, 0, 0.03);
border-top: 3px solid var(--color-primary);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-top-color var(--transition-normal);
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-top-color: var(--color-accent);
}
.contact-card__icon {
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-accent-light);
border-radius: 50%;
margin-bottom: var(--space-sm);
transition: transform var(--transition-normal);
}
.contact-card:hover .contact-card__icon {
transform: scale(1.1);
}
.contact-card__icon svg {
width: 2rem;
height: 2rem;
fill: var(--color-primary);
}
.contact-card__label {
font-family: var(--font-display);
font-weight: var(--font-weight-head);
color: var(--color-primary-dark);
font-size: var(--fs-h4);
}
.contact-card__value {
font-weight: var(--font-weight-sub);
color: var(--color-text);
font-size: 1.05rem;
text-decoration: none;
}
a.contact-card__value {
color: var(--color-primary);
transition: color var(--transition-fast);
}
a.contact-card__value:hover {
color: var(--color-accent-dark);
text-decoration: underline;
}
a.contact-card__value:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: 2px;
}
.contact-card__note {
font-size: var(--fs-small);
color: var(--color-text-light);
margin: 0;
line-height: 1.5;
}
.contact-card__note a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-card__note a:hover {
color: var(--color-accent-dark);
}
/* Contact quote block container */
.contact-quote-block {
max-width: 42rem;
margin-inline: auto;
text-align: center;
}
.contact-quote-block__note {
font-size: var(--fs-small);
color: var(--color-text-light);
margin-top: var(--space-md);
}
/* Contact page FAQ — uses shared faq-list/faq-item styles from T-014 */
/* Contact page uses .faq-item__question / .faq-item__answer class names */
.faq-item__question {
font-size: 1.125rem;
font-weight: var(--font-weight-sub);
color: var(--color-text);
margin-bottom: var(--space-sm);
padding: var(--space-lg) var(--space-xl) 0;
}
.faq-item__answer {
color: var(--color-text-light);
line-height: 1.7;
padding: 0 var(--space-xl) var(--space-lg);
}
.faq-item__answer a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.faq-item__answer a:hover {
color: var(--color-accent-dark);
}
/* Trust badge card variant (about page "Why Choose Us") */
.trust-badge--card {
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: var(--space-xl);
background: var(--color-bg);
border-radius: var(--border-radius-lg);
border-left: 3px solid var(--color-primary);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.trust-badge--card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.trust-badge--card h3 {
font-family: var(--font-display);
font-weight: var(--font-weight-head);
color: var(--color-primary-dark);
font-size: var(--fs-h4);
margin-top: var(--space-sm);
}
.trust-badge--card p {
color: var(--color-text-light);
line-height: 1.6;
font-size: 0.95rem;
max-width: none;
}
.trust-badges__list--large {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
@media (min-width: 640px) {
.trust-badges__list--large {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.trust-badges__list--large {
grid-template-columns: repeat(4, 1fr);
}
}
/* About page service areas list — enhanced for standalone use */
.footer__area-list--large {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-md);
padding: 0;
list-style: none;
}
.footer__area-list--large li {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.footer__area-list--large li svg {
width: 1.125rem;
height: 1.125rem;
fill: var(--color-primary);
}
.footer__area-list--large li a {
color: var(--color-primary);
font-weight: var(--font-weight-sub);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--transition-fast);
}
.footer__area-list--large li a:hover {
color: var(--color-accent-dark);
}
.footer__area-list--large li a:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* Primary quote CTA button enhancement */
.btn-quote-primary {
display: block;
max-width: 20rem;
margin-inline: auto;
}
/* --------------------------------------------------------------
T-017.1: Additional Scroll Animation Classes
Slide-left, slide-right, and scale-up entry animations
-------------------------------------------------------------- */
.animate-left {
opacity: 0;
transform: translateX(-30px);
will-change: transform, opacity;
transition: opacity 1s ease-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate-right {
opacity: 0;
transform: translateX(30px);
will-change: transform, opacity;
transition: opacity 1s ease-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate-scale {
opacity: 0;
transform: scale(0.9);
will-change: transform, opacity;
transition: opacity 1s ease-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate-left.is-visible,
.animate-right.is-visible,
.animate-scale.is-visible {
opacity: 1;
transform: translateX(0) scale(1);
}
/* --------------------------------------------------------------
MOBILE LAYOUT IMPROVEMENTS
-------------------------------------------------------------- */
@media (max-width: 767px) {
/* Tighter section spacing */
.section {
padding-block: var(--space-2xl);
}
/* Trust badges: compact 2x2 grid */
.trust-badges {
padding-block: var(--space-lg);
}
.trust-badges__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.trust-badge {
padding: var(--space-sm) var(--space-xs);
}
.trust-badge__icon {
width: 3rem;
height: 3rem;
margin-bottom: 0;
}
.trust-badge__icon svg {
width: 1.25rem;
height: 1.25rem;
}
.trust-badge span {
font-size: 0.8rem;
max-width: none;
}
/* Service cards: compact horizontal rows (image-based, main page) */
.services__grid {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.services__grid .service-card:has(.service-card__image-wrap) {
flex-direction: row;
overflow: hidden;
}
/* Image wrapper takes ~35% width */
.services__grid .service-card__image-wrap {
flex: 0 0 35%;
aspect-ratio: 1 / 1.15;
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg) !important;
}
.services__grid .service-card__image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Tighter body text */
.services__grid .service-card__body {
padding: var(--space-sm) var(--space-md);
flex: 1;
justify-content: center;
}
.services__grid .service-card__title {
font-size: 0.95rem;
margin-bottom: 0.25rem;
}
.services__grid .service-card__desc {
display: none;
/* hide long description on mobile */
}
.services__grid .service-card__price {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
margin-bottom: 0.5rem;
margin-top: auto;
}
.services__grid .service-card__link {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
margin-top: 0;
}
/* Icon-based service cards (area pages): compact mobile layout */
.services__grid .service-card:has(.service-card__icon) {
flex-direction: row;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
}
.services__grid .service-card:has(.service-card__icon) .service-card__icon {
width: 2.75rem;
height: 2.75rem;
min-width: 2.75rem;
margin-bottom: 0;
}
.services__grid .service-card:has(.service-card__icon) .service-card__icon svg {
width: 1.375rem;
height: 1.375rem;
}
.services__grid .service-card:has(.service-card__icon) .service-card__title {
font-size: 0.95rem;
margin-bottom: 0.125rem;
}
.services__grid .service-card:has(.service-card__icon) .service-card__desc {
display: none;
}
.services__grid .service-card:has(.service-card__icon) .service-card__price {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
margin-bottom: 0.25rem;
}
.services__grid .service-card:has(.service-card__icon) .service-card__link {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
}
/* Why Us: left-accent rows */
.why-us__grid {
display: flex !important;
flex-direction: column;
gap: 0;
}
.why-us__item {
padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
border-left: 4px solid var(--color-primary);
border-radius: 0;
box-shadow: none;
text-align: left;
}
.why-us__item:hover {
transform: none;
}
.why-us__item:nth-child(2) {
border-left-color: var(--color-accent);
}
.why-us__item:nth-child(3) {
border-left-color: var(--color-primary-dark);
}
.why-us__item:nth-child(4) {
border-left-color: var(--color-accent);
}
/* Alternating backgrounds */
.why-us__item:nth-child(even) {
background: var(--color-bg-alt, #f5f8f2);
}
.why-us__item:nth-child(odd) {
background: var(--color-white);
}
.why-us__item-header {
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.why-us__icon {
width: 2.25rem;
height: 2.25rem;
min-width: 2.25rem;
}
.why-us__icon svg {
width: 1.125rem;
height: 1.125rem;
}
.why-us__title {
font-size: 1rem;
}
.why-us__desc {
font-size: 0.8rem;
line-height: 1.6;
}
/* FAQ: compact mobile layout */
.faq-question {
padding: var(--space-md) calc(var(--space-lg) + 2.5rem) var(--space-md) var(--space-md);
font-size: 0.9rem;
min-height: auto;
}
.faq-answer {
padding: 0 var(--space-lg) var(--space-md) var(--space-md);
font-size: 0.85rem;
}
.faq h2 {
font-size: 1.25rem;
}
/* City intro: tighter text on mobile */
.city-intro .container>p {
font-size: 0.9rem;
line-height: 1.65;
}
.city-intro .container>h2 {
font-size: 1.25rem;
}
/* Page hero: tighter on mobile */
.page-hero {
padding-block: var(--space-2xl) calc(var(--space-2xl) + 3rem);
}
/* Area cards on subpages: stack single column with less padding */
.areas__grid .area-card {
padding: var(--space-lg) var(--space-md);
}
.areas__grid .area-card__title {
font-size: 1.35rem;
min-height: auto;
}
.areas__grid .area-card__desc {
font-size: 0.875rem;
}
/* CTA banner: more breathing room on mobile */
.cta-banner {
padding-top: var(--space-3xl);
}
/* Footer: compact mobile layout */
.footer__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md) var(--space-xl);
}
.footer__brand {
grid-column: 1 / -1;
padding-bottom: var(--space-sm);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: var(--space-xs);
}
.footer__logo {
margin-bottom: var(--space-xs);
}
.footer__logo-img {
height: 48px;
}
.footer__tagline {
font-size: 0.75rem;
line-height: 1.4;
margin-bottom: var(--space-sm);
}
.footer__contact-list {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-lg);
}
.footer__contact-list li {
display: inline-flex;
align-items: center;
font-size: 0.8rem;
gap: 0.35rem;
}
.footer__contact-list svg {
margin-top: 0;
flex-shrink: 0;
}
.footer__badge-wrapper {
margin-top: var(--space-sm);
}
.footer__badge {
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
}
/* Services + Areas columns */
.footer__col:nth-child(2) {
grid-column: 1;
}
.footer__col:nth-child(3) {
grid-column: 2;
}
/* Hide Quick Links on mobile — already in nav + sticky bar */
.footer__col:nth-child(4) {
display: none;
}
.footer__col-title {
font-size: 0.8rem;
margin-bottom: var(--space-sm);
}
.footer__nav-list li,
.footer__area-list li {
padding-block: 0.2rem;
}
.footer__nav-list a,
.footer__area-list a {
font-size: 0.8rem;
}
/* Testimonials: Google badge + compact cards */
.google-badge {
display: flex;
align-items: center;
gap: var(--space-md);
background: var(--color-white);
border: 1px solid var(--color-border-light, #e0e0e0);
border-radius: var(--border-radius-lg);
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-lg);
box-shadow: var(--shadow-sm);
}
.google-badge__logo {
flex-shrink: 0;
width: 2rem;
height: 2rem;
}
.google-badge__rating {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.google-badge__score {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary-dark);
line-height: 1;
}
.google-badge__stars {
display: flex;
gap: 1px;
}
.google-badge__stars svg {
width: 14px;
height: 14px;
}
.google-badge__count {
font-size: 0.75rem;
color: var(--color-text-light);
}
/* Compact testimonial cards on mobile */
.testimonial-card {
padding: var(--space-md) var(--space-lg);
border-radius: 0;
border-bottom: 1px solid var(--color-border-light, #e0e0e0);
box-shadow: none;
background: transparent;
}
.testimonial-card:last-child {
border-bottom: none;
}
.testimonial-card::before {
display: none;
}
.testimonial-card:hover {
transform: none;
box-shadow: none;
}
.testimonial-card__stars svg {
width: 0.875rem;
height: 0.875rem;
}
.testimonial-card__text {
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: var(--space-xs);
}
.testimonial-card__text p {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.testimonial-card__author {
gap: var(--space-xs);
}
.testimonial-card__name {
font-size: 0.85rem;
}
.testimonial-card__city {
font-size: 0.7rem;
}
.testimonials__grid {
gap: 0;
}
}
/* Google badge: hidden on desktop */
.google-badge {
display: none;
}
/* --------------------------------------------------------------
PRICING TABLE
-------------------------------------------------------------- */
.pricing-table-wrap {
overflow-x: auto;
margin: var(--space-xl) 0;
border-radius: var(--border-radius-lg);
border: 1px solid var(--color-border);
}
.pricing-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-base);
}
.pricing-table thead {
background: var(--color-primary);
color: var(--color-white);
}
.pricing-table th,
.pricing-table td {
padding: var(--space-md) var(--space-lg);
text-align: left;
}
.pricing-table th {
font-weight: var(--font-weight-sub);
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pricing-table tbody tr:nth-child(even) {
background: var(--color-bg-alt);
}
.pricing-table tbody tr:hover {
background: rgba(27, 94, 32, 0.05);
}
.pricing-table td strong {
color: var(--color-primary);
font-weight: var(--font-weight-head);
}
.pricing-table__note {
font-size: var(--fs-small);
color: var(--color-text-light);
margin-top: var(--space-md);
text-align: center;
}
@media (max-width: 640px) {
.pricing-table th,
.pricing-table td {
padding: var(--space-sm) var(--space-md);
font-size: var(--fs-small);
}
}
/* --------------------------------------------------------------
BLOG POST CARDS
-------------------------------------------------------------- */
.blog-grid {
display: grid;
gap: var(--space-xl);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.blog-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.blog-card {
display: flex;
flex-direction: column;
background-color: var(--color-white);
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
overflow: hidden;
height: 100%;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary-light);
}
.blog-card__content {
padding: var(--space-lg) var(--space-xl) 0;
flex: 1;
}
.blog-card__title {
font-size: 1.25rem;
font-family: var(--font-display);
font-weight: var(--font-weight-head);
margin-bottom: var(--space-sm);
line-height: 1.3;
}
.blog-card__title a {
color: var(--color-text);
transition: color var(--transition-fast);
}
.blog-card__title a:hover {
color: var(--color-primary);
}
.blog-card__excerpt {
color: var(--color-text-light);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: var(--space-lg);
}
.blog-card__footer {
padding: 0 var(--space-xl) var(--space-lg);
margin-top: auto;
}
/* --------------------------------------------------------------
T-017.2: Prefers Reduced Motion
Disable all animations and transitions for users who prefer it
-------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.animate-up,
.animate-fade,
.animate-zoom,
.animate-left,
.animate-right,
.animate-scale {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================
NOSCRIPT FALLBACK
Ensures content is visible if JS fails to load.
Add class="no-js" to , removed by JS on load.
============================================================ */
.no-js .animate-up,
.no-js .animate-fade,
.no-js .animate-zoom,
.no-js .animate-area-card,
.no-js .animate-left,
.no-js .animate-right,
.no-js .animate-scale,
.no-js [class*="animate-"] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.no-js .hero__content>* {
opacity: 1 !important;
animation: none !important;
}