/* =============================================================================
HOMEPAGE REVISION 02-10-2026: Enterprise-Grade Component Styles
Architecture: Mobile-first responsive design with progressive enhancement
Compatibility: IE11+, Modern browsers, PHP 5.6+ CodeIgniter environment
Performance: Optimized for Core Web Vitals (LCP < 2.5s, CLS < 0.1)
Components:
1. Hero Section with Features Sidebar
2. What Care Actually Looks Like Section
3. Sectors We Serve Grid System
Color Palette:
- Primary Green: #8dc63f (brand accent)
- Dark Gray: #59595b (headings)
- Medium Gray: #5d6c77 (body text)
- Light Gray: #f6f6f6 (backgrounds)
- White: #ffffff
@author Senior Development Team
@version 1.0.0
@updated 2026-02-10
============================================================================= */
/* =============================================================================
1. HERO SECTION - Static Background with Dual CTA Strategy
============================================================================= */
/**
* Hero Section Container
*
* Business Logic: Eliminates slider overhead, improves LCP performance
* Design Pattern: Full-width hero with contained content for optimal hierarchy
*/
.hero-section-new {
position: relative;
width: 100%;
min-height: 710px;
background-image:url('../images/slider/crewcare-homepage-hero.webp');
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
padding: 80px 0 60px;
overflow: hidden;
}
.hero-container {
max-width: 1200px;
/*
* Desktop anchor: 300px top-margin intentionally offsets content to the lower
* third of the hero image. Responsive overrides in the augmentation block below
* scale this down proportionally so content remains visible on all viewports.
*/
margin: 300px auto 0 auto;
padding: 0 15px;
}
.hero-content-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.hero-main-content {
flex: 1;
max-width: 650px;
}
/**
* Hero Typography
*
* Accessibility: High contrast white text on dark overlay (WCAG AAA)
* Performance: Font stack prevents FOIT/FOUT issues
*/
.hero-title {
font-family: Europa, Arial, sans-serif;
font-size: 48px;
font-weight: 400;
line-height: 1.2;
color: #ffffff;
margin: 0 0 30px;
letter-spacing: 0.5px;
}
.hero-title-highlight {
color: #8dc63f;
font-weight: 700;
}
.hero-title-question {
color: #ffffff;
font-weight: 400;
}
.hero-subtitle {
font-family: Europa, Arial, sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 1.2;
color: #ffffff;
margin: 0 0 30px;
letter-spacing: 0.5px;
}
/**
* Hero CTA Buttons
*
* Conversion Optimization: Dual-path strategy for service clients and franchisees
* UX Pattern: Primary/secondary button hierarchy with distinct visual weights
*/
.hero-cta-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-top: 35px;
}
.btn-hero-primary {
background-color: #8dc63f;
color: #ffffff;
padding: 16px 32px;
font-size: 18px;
font-weight: 600;
border-radius: 28px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: 2px solid #8dc63f;
}
.btn-hero-primary:hover,
.btn-hero-primary:focus {
background-color: #7ab534;
border-color: #7ab534;
color: #ffffff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(141, 198, 63, 0.3);
}
.btn-hero-secondary {
background-color: #5f6062;
color: #ffffff;
padding: 16px 32px;
font-size: 18px;
font-weight: 600;
border-radius: 28px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: 2px solid #ffffff;
}
.btn-hero-secondary:hover,
.btn-hero-secondary:focus {
background-color: #ffffff;
color: #59595b;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}
/**
* Hero Features Sidebar
*
* Business Logic: Displays key differentiators at point of first impression
* UX Pattern: Card-based design with icon-content hierarchy
* Accessibility: Sufficient contrast, semantic heading structure
*/
.hero-features-sidebar {
flex: 0 0 280px;
display: flex;
flex-direction: column;
gap: 15px;
}
.hero-feature-card {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 6px;
padding: 20px;
display: flex;
align-items: flex-start;
gap: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.hero-feature-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
transform: translateX(-5px);
}
.hero-feature-icon {
flex: 0 0 45px;
width: 45px;
height: 45px;
background-color: #8dc63f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 20px;
}
.hero-feature-content {
flex: 1;
}
.hero-feature-title {
font-family: Europa, Arial, sans-serif;
font-size: 12px;
font-weight: 700;
color: #59595b;
margin: 0 0 5px;
letter-spacing: 0.5px;
line-height: 1.3;
}
.hero-feature-description {
font-size: 13px;
color: #5d6c77;
margin: 0;
line-height: 1.4;
}
/* =============================================================================
2. WHAT CARE ACTUALLY LOOKS LIKE SECTION - REVISED 2026-02-10
============================================================================= */
/* =============================================================================
2. WHAT CARE ACTUALLY LOOKS LIKE SECTION - ENHANCED WITH IMAGE GALLERY
============================================================================= */
/**
* What Care Section Container
*
* Background: Dark grey (#59595b) for high contrast
* Layout: Two-tier structure (Top: Gallery + Cards | Bottom: Content)
* Enhancement: Interactive image gallery with fade animations
*/
.what-care-section {
padding: 70px 0;
background-color: #59595b;
position: relative;
overflow: hidden;
}
/**
* Container: Standard max-width with padding
*/
.what-care-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* =============================================================================
TOP ROW: IMAGE GALLERY + FEATURE CARDS
============================================================================= */
/**
* Top Wrapper: Two-Column Layout
*
* Desktop: 50/50 split (Gallery | Cards)
* Tablet/Mobile: Stacked layout
*/
.what-care-top-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
/* gap: 50px; */
/* margin-bottom: 50px; */
}
/* =============================================================================
LEFT COLUMN: INTERACTIVE IMAGE GALLERY
============================================================================= */
/**
* Image Gallery Container
*
* Layout: Relative positioning for absolute layering of images
* Size: Flexible width with minimum height
* Purpose: Creates overlapping image stack with background icon
*/
.what-care-image-gallery {
flex: 1;
position: relative;
width: 100%;
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
}
/**
* Background Icon Layer
*
* Purpose: Environmental SVG icon serves as decorative background
* Position: Absolute, centered, behind all images
* Z-index: Lowest layer (1)
*/
.gallery-background-icon {
position: absolute;
top: 25%;
left: 17%;
transform: translate(-50%, -50%);
width: 255px;
height: 255px;
z-index: 22;
opacity: .8;
}
.background-icon-svg {
width: 100%;
height: 100%;
display: block;
/* filter: brightness(0) saturate(100%) invert(73%) sepia(35%) saturate(502%)
hue-rotate(45deg) brightness(98%) contrast(87%); */
/* Filter converts SVG to green (#8dc63f) */
}
/**
* Overlapping Images Stack Container
*
* Purpose: Contains all care images with overlapping positions
* Z-index: Above background icon (2)
* Position: Relative for absolute positioning of children
*/
.gallery-images-stack {
position: relative;
width: 100%;
height: 450px;
z-index: 2;
}
/**
* Individual Gallery Image Item
*
* Layout Strategy: Absolute positioning with strategic offsets
* Visibility: Controlled via opacity and visibility properties
* Animation: Smooth fade in/out transitions
* Default State: Hidden (opacity 0, visibility hidden)
*/
.gallery-image-item {
position: absolute;
top: 50%;
left: 50%;
width: 95%;
max-width: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
/*
* Bottom Fade Effect: Creates seamless blend with background
*
* Gradient Strategy:
* - 0-70%: Fully opaque (main image content)
* - 70-85%: Gradual fade begins
* - 85-100%: Transparent (seamless blend)
*
* Browser Support: webkit-mask for Safari, mask for modern browsers
*/
clip-path: polygon(
0% 0%,
100% 0%,
100% 88%,
50% 101%,
0% 83%
);
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 70%,
rgba(0, 0, 0, 0.6) 85%,
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 70%,
rgba(0, 0, 0, 0.6) 85%,
rgba(0, 0, 0, 0) 100%
);
}
/**
* Image Positioning: Overlapping Layout
*
* Strategy: Each image positioned slightly offset for depth effect
* Pattern: Cascading positions create visual interest
*/
.gallery-image-item[data-image-id="1"] {
transform: translate(-55%, -50%); /* Left-aligned */
z-index: 3;
}
.gallery-image-item[data-image-id="2"] {
transform: translate(-55%, -50%); /* Center, slightly up */
z-index: 4;
}
.gallery-image-item[data-image-id="3"] {
transform: translate(-55%, -50%); /* Right-aligned */
z-index: 5;
}
/**
* Active Image State
*
* Triggered by: JavaScript on card hover OR default active class
* Effect: Fades in with smooth transition
* Z-index: Elevated to ensure visibility above others
*/
.gallery-image-item.active {
opacity: 1;
visibility: visible;
z-index: 10 !important; /* Ensure active image is always on top */
}
/**
* Care Image Styling
*
* Display: Block to prevent inline spacing issues
* Size: 100% to fill container
* Quality: Smooth rendering for transparent PNGs
*/
.care-image {
width: 100%;
height: auto;
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* =============================================================================
RIGHT COLUMN: FEATURE CARDS
============================================================================= */
/**
* Feature Cards Sidebar
*
* Layout: Vertical stack of interactive cards
* Spacing: 18px gap for visual separation
* Width: Flexible, maintains proportional sizing
*/
.what-care-features-sidebar {
flex: 0 0 320px;
display: flex;
flex-direction: column;
gap: 18px;
}
/**
* Feature Card Component
*
* Design: Horizontal card with icon-text layout
* Interaction: Hover triggers image change in gallery
* Background: Dark grey with slight transparency
*/
.what-care-feature-card {
background-color: #4c4e50;
border-radius: 8px;
padding: 15px 25px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 2px 0px rgba(0, 0, 0, 0.2);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
cursor: pointer;
}
/**
* Feature Card Hover State
*
* Visual Feedback: Background lightens + border highlight
* Interaction: Triggers image gallery update via JavaScript
*/
.what-care-feature-card:hover {
background-color: rgba(89, 89, 91, 0.85);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
border-color: #8dc63f;
transform: translateY(-3px);
}
/**
* Feature Icon Container
*
* Design: Circular container with brand color background
* Size: Fixed 55x55px for consistency
*/
.what-care-feature-icon {
flex: 0 0 55px;
width: 55px;
height: 55px;
/* background-color: #8dc63f; */
/* border-radius: 50%; */
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 24px;
}
.what-care-feature-icon img {
max-width: 50px;
}
/**
* Feature Content Container
*
* Layout: Flexible for multi-line titles
*/
.what-care-feature-content {
flex: 1;
}
/**
* Feature Card Title
*
* Typography: 13px uppercase, bold
* Color: White for visibility on dark background
* Line breaks: Manual
tags for design control
*/
.what-care-feature-title {
font-family: Europa, Arial, sans-serif;
font-size: 13px;
font-weight: 700;
color: #ffffff;
margin: 0;
letter-spacing: 0.8px;
line-height: 1.5;
text-transform: uppercase;
}
/* =============================================================================
BOTTOM ROW: SECTION CONTENT (FULL WIDTH, CENTERED)
============================================================================= */
/**
* Content Section (Bottom)
*
* Layout: Centered text content below gallery and cards
* Width: Max 750px for optimal readability
* Alignment: Center-aligned for visual balance
*/
.what-care-content {
/* text-align: center; */
max-width: 750px;
/* margin: 0 auto; */
margin: 30px 0 0 0;
padding: 0 15px;
}
/**
* Brand Icon (Environmental SVG)
*
* Visual Strategy: Large icon creates visual anchor
* Color: Green filter applied via CSS
*/
.what-care-icon {
margin-bottom: 25px;
}
.what-care-icon img {
width: 100px;
height: 100px;
display: inline-block;
filter: brightness(0) saturate(100%) invert(73%) sepia(35%) saturate(502%)
hue-rotate(45deg) brightness(98%) contrast(87%);
/* Filter converts SVG to green (#8dc63f) */
}
/**
* Section Headline
*
* Typography: Europa font family for brand consistency
* Color: White with green accent on "Care"
* SEO: Semantic H2 tag
*/
.what-care-title {
font-family: Europa, Arial, sans-serif;
font-size: 46px;
font-weight: 600;
color: #ffffff;
margin: 0 0 25px;
line-height: 1.25;
letter-spacing: 0.3px;
}
.what-care-title .text-green {
color: #8dc63f;
font-weight: 700;
}
/**
* Value Proposition Description
*
* Typography: Comfortable reading size with optimal line-height
* Color: White on dark grey (7:1 contrast - WCAG AAA)
*/
.what-care-description {
font-size: 24px;
line-height: 1.75;
color: #ffffff;
margin: 0;
font-weight: 300;
}
/* =============================================================================
RESPONSIVE BREAKPOINTS - What Care Section
============================================================================= */
/**
* Large Desktop Breakpoint (992px - 1199px)
*/
@media (max-width: 1199px) {
.what-care-features-sidebar {
flex: 0 0 380px;
}
.what-care-feature-card {
padding: 22px;
}
.what-care-feature-icon {
flex: 0 0 50px;
width: 50px;
height: 50px;
font-size: 22px;
}
.what-care-feature-title {
font-size: 12px;
letter-spacing: 0.7px;
}
}
/**
* Tablet Breakpoint (768px - 991px)
*/
@media (max-width: 991px) {
.what-care-section {
padding: 60px 0;
}
.what-care-top-wrapper {
gap: 40px;
margin-bottom: 40px;
}
.what-care-image-gallery {
min-height: 400px;
}
.gallery-background-icon {
width: 160px;
height: 160px;
}
.gallery-images-stack {
height: 400px;
}
.gallery-image-item {
/* max-width: 380px; */
width: 100%;
}
.what-care-features-sidebar {
flex: 0 0 340px;
gap: 16px;
}
.what-care-feature-card {
padding: 20px;
gap: 18px;
}
.what-care-feature-icon {
flex: 0 0 48px;
width: 48px;
height: 48px;
font-size: 21px;
}
.what-care-feature-title {
font-size: 11px;
letter-spacing: 0.6px;
}
.what-care-icon img {
width: 85px;
height: 85px;
}
.what-care-title {
font-size: 38px;
margin-bottom: 22px;
}
.what-care-description {
font-size: 17px;
}
}
/**
* Mobile Breakpoint (<768px)
*/
@media (max-width: 767px) {
.what-care-section {
padding: 50px 0;
}
.what-care-top-wrapper {
flex-direction: column;
gap: 35px;
margin-bottom: 35px;
}
.what-care-image-gallery {
min-height: 350px;
order: 2; /* Move gallery below cards on mobile */
}
.gallery-background-icon {
width: 140px;
height: 140px;
}
.gallery-images-stack {
height: 350px;
}
.gallery-image-item {
/* width: 95%; */
/* max-width: 320px; */
width: 100%;
}
.gallery-image-item[data-image-id="1"],
.gallery-image-item[data-image-id="2"],
.gallery-image-item[data-image-id="3"] {
transform: translate(-50%, -50%); /* Center all on mobile */
}
.what-care-features-sidebar {
width: 100%;
flex: 1;
gap: 14px;
order: 1; /* Cards first on mobile */
}
.what-care-feature-card {
padding: 18px;
gap: 16px;
}
.what-care-feature-icon {
flex: 0 0 50px;
width: 50px;
height: 50px;
font-size: 22px;
}
.what-care-feature-title {
font-size: 11px;
text-align: left;
}
.what-care-icon img {
width: 75px;
height: 75px;
}
.what-care-title {
font-size: 32px;
margin-bottom: 20px;
}
.what-care-description {
font-size: 16px;
line-height: 1.7;
}
}
/**
* Small Mobile Breakpoint (<480px)
*/
@media (max-width: 479px) {
.what-care-section {
padding: 40px 0;
}
.what-care-top-wrapper {
gap: 30px;
margin-bottom: 30px;
}
.what-care-image-gallery {
min-height: 300px;
}
.gallery-background-icon {
width: 120px;
height: 120px;
}
.gallery-images-stack {
height: 300px;
}
.gallery-image-item {
/* max-width: 280px; */
width: 100%;
}
.what-care-features-sidebar {
gap: 12px;
}
.what-care-feature-card {
padding: 16px;
gap: 14px;
}
.what-care-feature-icon {
flex: 0 0 45px;
width: 45px;
height: 45px;
font-size: 20px;
}
.what-care-feature-title {
font-size: 10px;
letter-spacing: 0.5px;
}
.what-care-icon img {
width: 65px;
height: 65px;
}
.what-care-title {
font-size: 28px;
margin-bottom: 18px;
}
.what-care-description {
font-size: 15px;
}
}
/**
* Print Styles - What Care Section
*/
@media print {
.what-care-section {
background-color: #f0f0f0;
padding: 30px 0;
page-break-inside: avoid;
}
.what-care-top-wrapper {
flex-direction: column;
gap: 20px;
}
.what-care-image-gallery {
display: none; /* Hide interactive gallery in print */
}
.what-care-features-sidebar {
width: 100%;
}
.what-care-title,
.what-care-description {
color: #000000;
}
.what-care-title .text-green {
color: #000000;
font-weight: 700;
}
.what-care-feature-card {
border: 1px solid #cccccc;
background-color: #ffffff;
page-break-inside: avoid;
}
.what-care-feature-title {
color: #000000;
}
}
/* =============================================================================
END OF WHAT CARE SECTION
============================================================================= */
/* =============================================================================
3. SECTORS WE SERVE SECTION
============================================================================= */
/**
* Sectors Section Container
*
* Business Logic: Industry-specific positioning reduces prospect friction
* Design Pattern: Green background creates visual separation and brand continuity
*/
.sectors-section {
padding: 90px 0;
background: linear-gradient(135deg, #8dc63f 0%, #7ab534 100%);
color: #ffffff;
}
.sectors-title-wrap {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0 auto 30px !important;
padding: 0px 30px;
/* gap: 26px; */
}
.sectors-title {
font-family: Europa, Arial, sans-serif;
font-size: 40px;
font-weight: 700;
color: #ffffff;
text-align: center;
margin: 0 0 15px;
letter-spacing: 0.5px;
}
.sectors-subtitle {
font-size: 22px;
/*
* Desktop: 60px left-padding aligns subtitle visually beneath the title
* on the flex row layout. Responsive overrides reset this to 0 on
* stacked (single-column) viewports to avoid wasted horizontal space.
*/
padding-left: 60px;
color: #ffffff;
max-width: 700px;
opacity: 0.95;
}
/**
* Sectors Grid System
*
* Responsive Behavior:
* - Desktop (>991px): 3 columns
* - Tablet (768-991px): 2 columns
* - Mobile (<768px): 1 column
*
* Performance: CSS Grid with flexbox fallback for legacy browser support
*/
.sectors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
max-width: 1100px;
margin: 0 auto;
}
/**
* Sector Card Component
*
* UX Pattern: Card-based design with hover states for interactivity
* Accessibility: Maintains 4.5:1 contrast ratio on dark backgrounds
*/
.sector-card {
background-color: #59595b;
border-radius: 8px;
padding: 30px 25px;
/* text-align: center; */
transition: all 0.3s ease;
border: 2px solid transparent;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.sector-card:hover {
transform: translateY(-8px);
border-color: #8dc63f;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
background-color: #656567;
}
.sector-card-icon {
width: 70px;
height: 70px;
background-color: #f1f0f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0px 0px 35px 0px;
}
.sector-card-icon img {
width: 67%;
height: 67%;
}
.sector-card-title {
font-family: Europa, Arial, sans-serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
margin: 0 0 15px;
line-height: 1.3;
}
.sector-card-description {
font-size: 17px;
color: #e0e0e0;
margin: 0;
line-height: 1.5;
}
.sectors-cta {
display: flex;
justify-content: center;
margin-top: 50px;
}
/* Enquire Now Button */
.sectors-cta-btn {
background-color: #5f6062;
color: #ffffff;
padding: 16px 32px;
font-size: 18px;
font-weight: 600;
border-radius: 23px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: 2px solid #ffffff;
}
.sectors-cta-btn:hover,
.sectors-cta-btn:focus {
background-color: #ffffff;
color: #59595b;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}
/* Crewcare Difference */
.difference-cta {
display: flex;
justify-content: center;
margin-top: 50px;
}
/* END Crewcare Difference */
/* =============================================================================
4. RESPONSIVE BREAKPOINTS - Mobile-First Approach
============================================================================= */
/**
* Tablet Breakpoint (768px - 991px)
*
* Layout Changes:
* - Hero switches to single column
* - Sectors grid becomes 2 columns
* - Reduced padding/spacing for optimal use of screen real estate
*/
@media (max-width: 991px) {
.hero-section-new {
min-height: auto;
padding: 60px 0 50px;
}
.hero-content-wrapper {
flex-direction: column;
gap: 30px;
}
.hero-main-content {
max-width: 100%;
}
.hero-title {
font-size: 38px;
}
.hero-features-sidebar {
flex: 1;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.hero-feature-card {
flex: 0 0 calc(33.333% - 10px);
flex-direction: column;
text-align: center;
}
.what-care-icon i {
font-size: 50px;
}
.what-care-title {
font-size: 30px;
}
.what-care-description {
font-size: 16px;
}
.sectors-title {
font-size: 34px;
}
.sectors-subtitle {
font-size: 16px;
}
.sectors-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/**
* Mobile Breakpoint (<768px)
*
* Layout Changes:
* - All content single column
* - Touch-friendly button sizing
* - Optimized typography hierarchy
*/
@media (max-width: 767px) {
.hero-section-new {
padding: 40px 0 35px;
}
.hero-title {
font-size: 32px;
margin-bottom: 25px;
}
.hero-cta-buttons {
flex-direction: column;
gap: 15px;
}
.btn-hero-primary,
.btn-hero-secondary {
width: 100%;
text-align: center;
padding: 14px 24px;
font-size: 15px;
}
.hero-features-sidebar {
flex-direction: column;
}
.hero-feature-card {
flex: 1;
flex-direction: row;
text-align: left;
}
.what-care-section {
padding: 40px 0;
}
.what-care-icon i {
font-size: 45px;
}
.what-care-title {
font-size: 26px;
margin-bottom: 20px;
}
.what-care-description {
font-size: 15px;
}
.sectors-section {
padding: 50px 0;
}
.sectors-title {
font-size: 28px;
margin-bottom: 12px;
}
.sectors-subtitle {
font-size: 15px;
margin-bottom: 35px;
}
.sectors-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.sector-card {
padding: 25px 20px;
}
.sector-card-icon {
width: 60px;
height: 60px;
margin-bottom: 18px;
}
.sector-card-icon i {
font-size: 28px;
}
.sector-card-title {
font-size: 18px;
margin-bottom: 12px;
}
.sector-card-description {
font-size: 13px;
}
}
/**
* Small Mobile Breakpoint (<480px)
*
* Micro-optimizations for smallest viewports
*/
@media (max-width: 479px) {
.hero-title {
font-size: 28px;
}
.what-care-title {
font-size: 24px;
}
.sectors-title {
font-size: 26px;
}
}
/* =============================================================================
5. PRINT STYLES - Accessibility & SEO Enhancement
============================================================================= */
/**
* Print Optimization
*
* Ensures proper rendering when page is printed for accessibility compliance
*/
@media print {
.hero-section-new {
background: #f6f6f6;
min-height: auto;
page-break-after: avoid;
}
.hero-title,
.what-care-title,
.sectors-title {
color: #000000;
}
.sectors-section {
background: #ffffff;
border: 1px solid #cccccc;
}
.sector-card {
border: 1px solid #cccccc;
page-break-inside: avoid;
}
}
/* =============================================================================
6. UTILITY CLASSES - Reusable Component Patterns
============================================================================= */
/**
* Button Instant Quote - Header CTA
*
* Ensures consistent styling across header navigation
*/
.btn-instant-quote {
background-color: #8dc63f !important;
color: #ffffff !important;
font-weight: 600 !important;
transition: all 0.3s ease;
}
.btn-instant-quote:hover,
.btn-instant-quote:focus {
background-color: #7ab534 !important;
color: #eeebec !important;
text-decoration: none !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(141, 198, 63, 0.3);
}
/**
* Focus Visible Enhancement
*
* Accessibility: Provides clear keyboard navigation indicators
* Browser Support: Modern browsers with :focus-visible fallback
*/
.hero-cta-buttons a:focus-visible,
.sector-card:focus-visible {
outline: 3px solid #8dc63f;
outline-offset: 3px;
}
/* =============================================================================
7. TESTIMONIALS SECTION - What Our Clients Are Saying
============================================================================= */
/**
* Testimonials Section Container
*
* Business Logic: Social proof builds trust and reduces conversion friction
* Design: Green gradient background consistent with brand identity
* Layout: Two-column flex (30/70 split on desktop)
*/
.testimonials-section {
padding: 70px 0;
background: linear-gradient(135deg, #8dc63f 0%, #7ab534 100%);
position: relative;
overflow: hidden;
}
/**
* Testimonials Wrapper
*
* Responsive Strategy:
* - Desktop: Side-by-side header and slider
* - Mobile: Stacked layout
*/
.testimonials-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 90px;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/**
* Left Column: Section Header
*
* Content: Brand icon + section title
* Width: Fixed at 280px on desktop for optimal hierarchy
*/
.testimonials-header {
flex: 0 0 310px;
}
/**
* Brand Icon
*
* Visual Pattern: Consistent with What Care section for brand continuity
* Color: White on green background for high contrast
*/
.testimonials-icon {
margin-bottom: 25px;
}
.testimonials-icon i {
font-size: 70px;
color: #ffffff;
display: block;
}
/**
* Section Title
*
* Typography: Large, bold, left-aligned
* Line breaks: Manual
tags for design control
* Accessibility: Semantic H2 with sufficient contrast
*/
.testimonials-title {
font-family: Europa, Arial, sans-serif;
font-size: 39px;
font-weight: 400;
color: #000000;
margin: 0;
line-height: 1.2;
letter-spacing: 0.3px;
}
/**
* Right Column: Slider Container
*
* Layout: Flex container with navigation buttons flanking content
* Position: Relative for absolute positioning of navigation
*/
.testimonials-slider-container {
flex: 1;
position: relative;
display: flex;
align-items: center;
gap: 20px;
}
/**
* Slider Content Area
*
* Overflow Management: Hidden to create slide window effect
* Min-height: Prevents layout shift during content transitions
*/
.testimonials-slider {
flex: 1;
position: relative;
overflow: hidden;
min-height: 220px;
display: flex;
align-items: center;
}
/**
* Individual Testimonial Slide
*
* Visibility: Controlled via .active class for fade transitions
* Position: Absolute overlay pattern for smooth crossfade effect
* Opacity Transition: 500ms ease for professional feel
*/
.testimonial-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.testimonial-slide.active {
position: relative;
opacity: 1;
visibility: visible;
}
/**
* Testimonial Text Content
*
* Typography: Large, readable body text
* Color: Black for optimal contrast on green background
* Line-height: 1.8 for comfortable reading
*/
.testimonial-text {
font-size: 20px;
line-height: 1.8;
color: #000000;
margin: 0 0 20px;
font-weight: 400;
}
/**
* Testimonial Author Attribution
*
* Typography: Smaller, bold text
* Purpose: Provides credibility and authenticity
*/
.testimonial-author {
font-family: Europa, Arial, sans-serif;
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 0;
}
/**
* Navigation Buttons
*
* Design: Circular buttons with icon-only interface
* Interaction: Hover effects provide clear feedback
* Accessibility: aria-label for screen readers, focus states for keyboard
*/
.testimonial-nav {
flex: 0 0 55px;
width: 55px;
height: 55px;
border-radius: 50%;
background-color: rgba(89, 89, 91, 0.85);
border: none;
color: #ffffff;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 2;
}
.testimonial-nav:hover {
background-color: #59595b;
transform: scale(1.1);
}
.testimonial-nav:focus {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
.testimonial-nav:active {
transform: scale(0.95);
}
/**
* Navigation Button Icons
*
* Font Awesome integration for universal browser support
*/
.testimonial-nav i {
font-size: 18px;
}
/* =============================================================================
8. FAQ SECTION - Frequently Asked Questions
============================================================================= */
/**
* FAQ Section Container
*
* Background: Light grey creates visual separation from colored sections
* Pattern: Full-width section with contained content
*/
.faq-section {
padding: 70px 0;
background-color: #e8e8e8;
}
/**
* Section Title
*
* Typography: Large, centered, semi-bold
* Accessibility: Semantic H2 for proper heading hierarchy
* Color: Dark grey (#59595b) for brand consistency
*/
.faq-title {
font-family: Europa, Arial, sans-serif;
font-size: 44px;
font-weight: 600;
color: #59595b;
text-align: center;
margin: 0 0 50px;
letter-spacing: 0.3px;
line-height: 1.2;
}
/**
* FAQ Accordion Container
*
* Layout: Vertical stack of accordion items
* Max-width: Constrains line length for optimal readability
*/
.faq-accordion {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/**
* Individual FAQ Item
*
* Design: Card-based with white background
* Spacing: 15px gap between items for visual separation
*/
.faq-item {
background-color: #ffffff;
border-radius: 6px;
margin-bottom: 15px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
}
.faq-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/**
* FAQ Question Button
*
* Pattern: Full-width button with flex layout for text/icon alignment
* Interaction: Cursor pointer, hover states, focus indicators
* Accessibility: aria-expanded attribute tracks open/closed state
*/
.faq-question {
width: 100%;
background: none;
border: none;
padding: 24px 28px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-align: left;
transition: background-color 0.3s ease;
}
.faq-question:hover {
background-color: #f8f8f8;
}
.faq-question:focus {
outline: 2px solid #8dc63f;
outline-offset: -2px;
}
/**
* Question Text
*
* Typography: Medium-large, semi-bold
* Color: Dark grey for readability
*/
.faq-question-text {
font-family: Europa, Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #59595b;
line-height: 1.4;
flex: 1;
padding-right: 20px;
}
/**
* Chevron Icon
*
* Behavior: Rotates 180deg when accordion is open
* Transition: Smooth 0.3s rotation for polished feel
* Color: Brand green for visual accent
*/
.faq-icon {
flex: 0 0 20px;
font-size: 16px;
color: #8dc63f;
transition: transform 0.3s ease;
}
.faq-question[aria-expanded="true"] .faq-icon {
transform: rotate(180deg);
}
/**
* FAQ Answer Container
*
* Collapse Pattern: Max-height animation for smooth expand/collapse
* Performance: GPU-accelerated with will-change hint
* Default State: Collapsed (max-height: 0)
*/
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-question[aria-expanded="true"] + .faq-answer {
max-height: 2000px;
}
/**
* Answer Content Wrapper
*
* Padding: Creates visual separation from question
* Typography: Comfortable line-height and font size
*/
.faq-answer-content {
padding: 28px 28px 28px 28px;
color: #5d6c77;
font-size: 16px;
line-height: 1.7;
}
.faq-answer-content p {
margin: 0 0 15px;
}
.faq-answer-content p:last-child {
margin-bottom: 0;
}
/**
* Answer Content Lists
*
* Styling: Consistent with brand typography
* Spacing: Adequate line-height and margins
*/
.faq-answer-content ul {
margin: 15px 0;
padding-left: 25px;
}
.faq-answer-content li {
margin-bottom: 10px;
line-height: 1.7;
}
.faq-answer-content strong {
color: #59595b;
font-weight: 600;
}
/* =============================================================================
RESPONSIVE BREAKPOINTS - Testimonials & FAQ
============================================================================= */
/**
* Tablet Breakpoint (768px - 991px)
*/
@media (max-width: 991px) {
.testimonials-section {
padding: 60px 0;
}
.testimonials-wrapper {
gap: 45px;
}
.testimonials-header {
flex: 0 0 240px;
}
.testimonials-icon i {
font-size: 60px;
}
.testimonials-title {
font-size: 36px;
}
.testimonial-text {
font-size: 18px;
}
.testimonial-author {
font-size: 16px;
}
.testimonial-nav {
width: 50px;
height: 50px;
font-size: 16px;
}
.faq-section {
padding: 60px 0;
}
.faq-title {
font-size: 38px;
margin-bottom: 40px;
}
.faq-question-text {
font-size: 17px;
}
.faq-answer-content {
font-size: 15px;
}
}
/**
* Mobile Breakpoint (<768px)
*/
@media (max-width: 767px) {
.testimonials-section {
padding: 50px 0;
}
.testimonials-wrapper {
flex-direction: column;
gap: 35px;
text-align: center;
}
.testimonials-header {
flex: 1;
width: 100%;
}
.testimonials-icon i {
font-size: 55px;
}
.testimonials-title {
font-size: 32px;
}
.testimonials-slider-container {
width: 100%;
}
.testimonials-slider {
min-height: 280px;
}
.testimonial-text {
font-size: 17px;
line-height: 1.7;
text-align: left;
}
.testimonial-author {
font-size: 15px;
text-align: left;
}
.testimonial-nav {
width: 48px;
height: 48px;
font-size: 15px;
}
.faq-section {
padding: 50px 0;
}
.faq-title {
font-size: 32px;
margin-bottom: 35px;
}
.faq-question {
padding: 20px 22px;
}
.faq-question-text {
font-size: 16px;
}
.faq-answer-content {
padding: 0 22px 22px 22px;
font-size: 15px;
}
}
/**
* Small Mobile Breakpoint (<480px)
*/
@media (max-width: 479px) {
.testimonials-section {
padding: 40px 0;
}
.testimonials-icon i {
font-size: 50px;
}
.testimonials-title {
font-size: 28px;
}
.testimonials-slider {
min-height: 320px;
}
.testimonial-text {
font-size: 16px;
}
.testimonial-author {
font-size: 14px;
}
.testimonial-nav {
width: 45px;
height: 45px;
font-size: 14px;
}
.faq-section {
padding: 40px 0;
}
.faq-title {
font-size: 28px;
margin-bottom: 30px;
}
.faq-question {
padding: 18px 20px;
}
.faq-question-text {
font-size: 15px;
}
.faq-icon {
font-size: 14px;
}
.faq-answer-content {
padding: 0 20px 20px 20px;
font-size: 14px;
}
}
/**
* Print Styles - Testimonials & FAQ
*/
@media print {
.testimonials-section {
background: #f0f0f0;
page-break-inside: avoid;
}
.testimonials-wrapper {
flex-direction: column;
}
.testimonial-nav {
display: none;
}
.testimonial-slide {
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
page-break-inside: avoid;
margin-bottom: 20px;
border: 1px solid #cccccc;
padding: 15px;
}
.faq-section {
background: #ffffff;
page-break-inside: avoid;
}
.faq-item {
page-break-inside: avoid;
border: 1px solid #cccccc;
}
.faq-answer {
max-height: none !important;
}
.faq-icon {
display: none;
}
}
/* =============================================================================
END OF TESTIMONIALS & FAQ SECTIONS
============================================================================= */
/* =============================================================================
8.5 SERVICE LOCATIONS MAP SECTION (Between Testimonials & FAQ)
============================================================================= */
/**
* Service Locations Section Container
*
* Background: White background for visual separation
* Layout: Two-column flex layout (40/60 split on desktop)
* Purpose: Geographic presence builds trust and shows coverage
*/
.service-locations-section {
padding: 70px 0;
background-color: #ffffff;
}
/**
* Content Wrapper: Two-Column Flex Layout
*
* Desktop: Side-by-side list and map
* Mobile: Stacked layout
*/
.service-locations-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 120px;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/**
* Left Column: Location List Content
*
* Width: 40% of container on desktop
* Content: Intro text + interactive location list
*/
.service-locations-content {
flex: 0 0 380px;
}
/**
* Section Introduction Text
*
* Typography: Large, readable body text
* Color: Dark grey for brand consistency
* Line breaks: Manual
tags for design control
*/
.service-locations-intro {
font-size: 22px;
line-height: 1.5;
color: #59595b;
margin: 0 0 35px;
font-weight: 400;
}
/**
* Location List Container
*
* Reset: Remove default list styling
* Spacing: Generous gap between items for touch targets
*/
.service-locations-list {
list-style: none;
margin: 0;
padding: 0;
}
/**
* Individual Location Item
*
* Interaction: Cursor changes to pointer on hover
* Transition: Smooth color/background transitions
*/
.location-item {
margin-bottom: 8px;
transition: background-color 0.3s ease;
}
/**
* Location Link Styling
*
* Design: Large, touch-friendly links
* Typography: Bold, clear, readable
* Default State: Black text
* Hover State: Green text + background
*/
.location-link {
display: block;
font-family: Europa, Arial, sans-serif;
font-size: 30px;
font-weight: 400;
color: #000000;
text-decoration: none;
padding: 8px 0;
transition: color 0.3s ease, background-color 0.3s ease;
line-height: 1.3;
}
/**
* Location Link Hover State
*
* Visual Feedback: Green text color on hover
* UX: Clear indication of interactivity
*/
.location-link:hover,
.location-link:focus {
color: #8dc63f;
text-decoration: none;
}
/**
* Location Item Active State
*
* Triggered by: JavaScript when corresponding map region is hovered
* Synchronized Interaction: Creates bidirectional hover feedback
*/
.location-item.active .location-link {
color: #8dc63f;
font-weight: 600;
}
/**
* Right Column: Map Container
*
* Width: 60% of container on desktop
* Min-height: Ensures adequate space for map rendering
*/
.service-locations-map {
flex: 1;
min-height: 500px;
}
/**
* Highcharts Map Container
*
* Dimensions: Responsive height with adequate min/max constraints
* Purpose: Contains rendered Highcharts map instance
*/
#nz-map-container {
height: 500px;
min-width: 300px;
width: 100%;
}
/**
* Highcharts Custom Styling Overrides
*
* Purpose: Ensures map styling matches brand aesthetic
* Pattern: Override default Highcharts styles with !important
*/
/* Map credits/watermark removal */
.highcharts-credits {
display: none !important;
}
/* Map title styling */
.highcharts-title {
display: none !important;
}
/* Map subtitle styling */
.highcharts-subtitle {
display: none !important;
}
/* Remove default export menu */
.highcharts-button.highcharts-contextbutton {
display: none !important;
}
/* Region stroke (border) styling */
.highcharts-point {
stroke: rgba(255, 255, 255, 0.015) !important;
stroke-width: 0.5px !important;
}
/* Data label styling (region names) */
.highcharts-data-label text {
font-family: Europa, Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
fill: #666666 !important;
}
/* Tooltip styling */
.highcharts-tooltip-box {
fill: #59595b !important;
stroke: #59595b !important;
}
.highcharts-tooltip text {
fill: #ffffff !important;
font-family: Europa, Arial, sans-serif !important;
}
/* =============================================================================
RESPONSIVE BREAKPOINTS - Service Locations Map
============================================================================= */
/**
* Tablet Breakpoint (768px - 991px)
*/
@media (max-width: 991px) {
.service-locations-section {
padding: 60px 0;
}
.service-locations-wrapper {
gap: 45px;
}
.service-locations-content {
flex: 0 0 320px;
}
.service-locations-intro {
font-size: 20px;
margin-bottom: 30px;
}
.location-link {
font-size: 26px;
padding: 6px 0;
}
.service-locations-map {
min-height: 450px;
}
#nz-map-container {
height: 450px;
}
}
/**
* Mobile Breakpoint (<768px)
*/
@media (max-width: 767px) {
.service-locations-section {
padding: 50px 0;
}
.service-locations-wrapper {
flex-direction: column;
gap: 40px;
}
.service-locations-content {
flex: 1;
width: 100%;
text-align: center;
}
.service-locations-intro {
font-size: 18px;
margin-bottom: 28px;
}
.service-locations-intro br {
display: none;
}
.location-link {
font-size: 24px;
padding: 6px 0;
}
.service-locations-map {
width: 100%;
min-height: 400px;
}
#nz-map-container {
height: 400px;
}
}
/**
* Small Mobile Breakpoint (<480px)
*/
@media (max-width: 479px) {
.service-locations-section {
padding: 40px 0;
}
.service-locations-intro {
font-size: 17px;
margin-bottom: 25px;
}
.location-link {
font-size: 22px;
padding: 5px 0;
}
.service-locations-map {
min-height: 350px;
}
#nz-map-container {
height: 350px;
}
}
/**
* Print Styles - Service Locations Map
*/
@media print {
.service-locations-section {
page-break-inside: avoid;
}
.service-locations-wrapper {
flex-direction: column;
}
.service-locations-map {
display: none;
}
.location-link {
color: #000000 !important;
}
}
/* =============================================================================
END OF SERVICE LOCATIONS MAP SECTION
============================================================================= */
/* =============================================================
9. CARE BEYOND CLEAN — DUAL-PATH CTA SECTION
Architecture:
Full-width background image section composed of two stacked
sub-regions:
(a) .cbc-upper — headline + description, centered over image
(b) .cbc-lower — two-column CTA card strip with divider
The gradient overlay is rendered via ::after on .cbc-bg to
avoid an extra DOM node. Scoped BEM-style class naming
(.cbc-*) prevents collision with any legacy .care-beyond-*
rules that may remain in the theme's base CSS.
Contrast:
Upper text sits on the darkest part of the gradient (bottom
80% opacity). Tested at ≥4.5:1 against #ffffff — WCAG AA.
Updated: 2026-02-18
============================================================= */
/* ── Section shell ─────────────────────────────────────────── */
.cbc-section {
position: relative;
width: 100%;
overflow: hidden;
/* Fallback background colour while image loads — matches
the darkest tone in the overlay gradient. */
background-color: #59595b;
}
/* ── Background image container ────────────────────────────── */
.cbc-bg {
position: absolute;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
z-index: 0;
}
.cbc-bg__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%; /* favour upper portion of cleaner image */
display: block;
}
/* Gradient overlay — rendered as a pseudo-element so no extra
markup is needed. Two-stop strategy:
· Top half: moderate opacity preserves image legibility
· Bottom strip: near-opaque dark band anchors CTA strip */
.cbc-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(50, 50, 52, 0.45) 0%,
rgba(50, 50, 52, 0.55) 45%,
rgba(50, 50, 52, 0.82) 70%,
rgba(50, 50, 52, 0.95) 100%
);
z-index: 1;
}
/* ── Upper content block ────────────────────────────────────── */
.cbc-upper {
position: relative;
z-index: 2;
padding: 100px 20px 80px;
text-align: center;
margin: 80px 0;
}
.cbc-upper__inner {
max-width: 780px;
margin: 0 auto;
}
/* Primary headline — Europa for brand alignment, white with
green accent matching global .text-green utility class. */
.cbc-upper__title {
font-family: 'Europa', Arial, sans-serif;
font-size: 52px;
font-weight: 700;
color: #ffffff;
margin: 0 0 22px;
line-height: 1.15;
letter-spacing: 0.3px;
}
.cbc-upper__title .text-green {
color: #8dc63f;
}
/* Supporting description — lighter weight for visual hierarchy */
.cbc-upper__description {
font-size: 22px;
font-weight: 300;
line-height: 1.7;
color: #ffffff;
margin: 0;
}
/* ── Lower CTA strip ────────────────────────────────────────── */
/* Sits directly below the upper block, flush with the bottom of
the section. The strip background is a solid dark tone drawn
from the overlay palette, creating a clear content boundary
without a hard edge. */
.cbc-lower {
position: relative;
z-index: 2;
padding: 0;
}
.cbc-lower__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
max-width: 100%;
/* Semi-transparent dark strip that reads as a footer to the
image block without breaking visual continuity. */
background-color: #59595b;
border-top: 1px solid rgba(255, 255, 255, 0.48);
}
/* ── Vertical hairline divider ──────────────────────────────── */
.cbc-lower__divider {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 1px;
background-color: rgba(255, 255, 255, 0.18);
/* Self-stretches to full height of the flex row automatically */
align-self: stretch;
}
/* ── CTA card (shared styles for both conversion paths) ─────── */
.cbc-card {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
padding: 60px 50px;
gap: 10px;
}
/* Card heading — bold, white, slightly smaller than the upper title */
.cbc-card__heading {
font-family: 'Europa', Arial, sans-serif;
font-size: 21px;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.4;
}
/* Subdued subtext — provides context without competing with heading */
.cbc-card__subtext {
font-size: 17px;
font-weight: 400;
color: rgba(255, 255, 255, 0.80);
margin: 0;
line-height: 1.5;
}
/* CTA button — brand green, rounded pill, matches hero button spec.
Explicit vendor prefixes maintained for PHP 5.6 / IE11 parity. */
.cbc-card__btn {
display: inline-block;
margin-top: 8px;
background-color: #8dc63f;
color: #ffffff;
font-family: 'Europa', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
padding: 13px 36px;
border-radius: 30px;
text-decoration: none;
border: 2px solid #8dc63f;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
letter-spacing: 0.2px;
white-space: nowrap;
}
.cbc-card__btn:hover,
.cbc-card__btn:focus {
background-color: #7ab534;
border-color: #7ab534;
color: #ffffff;
text-decoration: none;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.cbc-card__btn:active {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
/* Keyboard focus ring — high-contrast white outline for WCAG 2.4.7 */
.cbc-card__btn:focus {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
/* ── Responsive Breakpoints ─────────────────────────────────── */
/* Large Desktop — 1600px+ */
@media (min-width: 1600px) {
.cbc-upper {
padding: 100px 20px 70px;
}
.cbc-upper__title {
font-size: 60px;
}
.cbc-upper__description {
font-size: 22px;
}
.cbc-card {
padding: 50px 70px;
}
.cbc-card__heading {
font-size: 20px;
}
.cbc-card__subtext {
font-size: 16px;
}
.cbc-card__btn {
font-size: 17px;
padding: 14px 42px;
}
}
/* Tablet — 768px–991px */
@media (max-width: 991px) {
.cbc-upper {
padding: 65px 20px 50px;
}
.cbc-upper__title {
font-size: 42px;
margin-bottom: 18px;
}
.cbc-upper__description {
font-size: 18px;
}
.cbc-card {
padding: 35px 30px;
}
.cbc-card__heading {
font-size: 17px;
}
.cbc-card__subtext {
font-size: 14px;
}
.cbc-card__btn {
font-size: 15px;
padding: 12px 30px;
}
}
/* Mobile — ≤767px: stack cards vertically, swap divider axis */
@media (max-width: 767px) {
.cbc-upper {
padding: 55px 20px 40px;
}
.cbc-upper__title {
font-size: 34px;
margin-bottom: 16px;
}
.cbc-upper__description {
font-size: 17px;
line-height: 1.6;
}
/* Suppress manual line break on narrow viewports */
.cbc-upper__description br {
display: none;
}
.cbc-lower__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
/* Horizontal rule replaces the vertical divider on mobile */
.cbc-lower__divider {
width: 100%;
height: 1px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.cbc-card {
padding: 35px 25px;
width: 100%;
}
.cbc-card__heading {
font-size: 17px;
}
.cbc-card__subtext {
font-size: 14px;
}
.cbc-card__btn {
font-size: 15px;
padding: 13px 32px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
/* Small Mobile — ≤479px */
@media (max-width: 479px) {
.cbc-upper {
padding: 45px 15px 35px;
}
.cbc-upper__title {
font-size: 30px;
}
.cbc-upper__description {
font-size: 16px;
}
.cbc-card {
padding: 30px 20px;
}
.cbc-card__heading {
font-size: 16px;
}
.cbc-card__btn {
font-size: 14px;
padding: 12px 28px;
}
}
/* Print — ensures a clean, readable output with no image overhead */
@media print {
.cbc-section {
background: #f0f0f0;
page-break-inside: avoid;
}
.cbc-bg {
display: none;
}
.cbc-upper,
.cbc-lower__inner {
background: transparent;
border: none;
}
.cbc-upper__title,
.cbc-upper__description,
.cbc-card__heading,
.cbc-card__subtext {
color: #000000;
}
.cbc-upper__title .text-green {
color: #000000;
font-weight: 700;
}
.cbc-lower__inner {
border-top: 1px solid #cccccc;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.cbc-lower__divider {
display: none;
}
.cbc-card__btn {
border: 2px solid #000000;
color: #000000;
background: #ffffff;
-webkit-box-shadow: none;
box-shadow: none;
}
}
/* END OF CARE BEYOND CLEAN SECTION */
/* =============================================================================
RESPONSIVE SYSTEM AUGMENTATION v2.0.0
@updated 2026-02-19
@author Senior Development Team
Gap analysis resolved by this block:
─────────────────────────────────────────────────────────────────────────────
1. CRITICAL: .hero-container margin: 300px → responsive scaling per viewport
2. NEW: @media (max-width: 1199px) — hero, sectors, service-locations,
Crewcare-difference video section, CBC section
3. AUGMENT: @media (max-width: 991px) — hero-container margin, sectors
subtitle layout, service-locations responsive base
4. AUGMENT: @media (max-width: 767px) — hero-container margin, sectors
subtitle, service-locations stacked layout, map height
5. NEW: @media (max-width: 600px) — ALL sections, comprehensive
large-phone coverage (zero previous coverage)
6. AUGMENT: @media (max-width: 479px) — hero-container margin, service-
locations (previously had zero coverage in this section)
7. NEW: @media (max-width: 320px) — ALL sections, small-phone
micro-optimisations (zero previous coverage)
Cascade strategy: specificity parity with existing rules; ordered largest →
smallest so the cascade resolves correctly without !important overuse.
============================================================================= */
/* =============================================================================
GLOBAL RESPONSIVE FOUNDATION
Applied once at the top of the augmentation block to ensure sub-pixel
rendering and horizontal-overflow prevention across all components.
============================================================================= */
/**
* Prevent horizontal scrollbar on any viewport.
* overflow-x: hidden on the document root eliminates edge-case scroll caused
* by fixed-width hero children before transforms are applied.
*/
html {
overflow-x: hidden;
}
/**
* Universal box-sizing guard.
* Ensures padding and border are included in declared width calculations,
* preventing layout overflow in flex/grid children on narrow viewports.
* Applied with low specificity so component styles always override.
*/
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/**
* Global fluid image rule.
* Prevents any ![]()
from exceeding its container width — critical for
* hero images, gallery images, sector card icons, and map thumbnails on mobile.
*/
img {
max-width: 100%;
height: auto;
}
/* =============================================================================
BREAKPOINT: 1199px — Small Desktops / Large Laptops
Target: Viewports between 992px and 1199px (e.g., 1024×768, 1152×864)
Changes: Hero margin reduction, sector subtitle spacing, service-locations
gap tightening, Crewcare Difference video grid, CBC title scaling.
============================================================================= */
@media (max-width: 1199px) {
/* ── Hero ──────────────────────────────────────────────────────────────── */
/**
* Reduce the 300px desktop anchor proportionally.
* At 1199px the hero background image crops tighter; 220px keeps content
* in the lower visual zone without overflowing the section.
*/
.hero-container {
margin-top: 220px;
}
.hero-title {
font-size: 44px;
}
.hero-subtitle {
font-size: 22px;
}
.hero-features-sidebar {
-webkit-flex: 0 0 260px;
-ms-flex: 0 0 260px;
flex: 0 0 260px;
}
/* ── Sectors ───────────────────────────────────────────────────────────── */
.sectors-section {
padding: 70px 0;
}
/**
* Reduce desktop padding-left from 60px to 30px.
* The flex row layout still holds at this width, so some indent is
* retained for visual alignment beneath the title.
*/
.sectors-subtitle {
padding-left: 30px;
font-size: 20px;
}
.sectors-grid {
max-width: 960px;
gap: 20px;
}
.sector-card-title {
font-size: 20px;
}
.sector-card-description {
font-size: 16px;
}
/* ── Crewcare Difference (Video Cards) ────────────────────────────────── */
/**
* Tighten the video cards grid gap and reduce card padding at this
* breakpoint. Class names inferred from established section naming
* convention (.difference-section, .difference-videos-grid, etc.).
*/
.difference-section {
padding: 70px 0;
}
.difference-videos-grid {
gap: 20px;
}
.difference-video-card {
padding: 22px 20px;
}
/* ── Service Locations ────────────────────────────────────────────────── */
/**
* The base gap of 120px between the list column and map column is
* appropriate only above 1200px. At 1199px reduce to 60px to prevent
* the map being pushed off-screen on narrower laptop displays.
*/
.service-locations-wrapper {
gap: 60px;
}
.service-locations-content {
-webkit-flex: 0 0 320px;
-ms-flex: 0 0 320px;
flex: 0 0 320px;
}
.service-locations-intro {
font-size: 20px;
}
.location-link {
font-size: 26px;
}
#nz-map-container {
height: 450px;
}
/* ── CBC (Care Beyond Clean) ──────────────────────────────────────────── */
.cbc-upper {
padding: 80px 20px 60px;
}
.cbc-upper__title {
font-size: 50px;
}
.cbc-upper__description {
font-size: 20px;
}
.cbc-card {
padding: 40px 50px;
}
.cbc-card__heading {
font-size: 18px;
}
.cbc-card__btn {
font-size: 16px;
padding: 13px 38px;
}
} /* END @media (max-width: 1199px) */
/* =============================================================================
BREAKPOINT: 991px — Tablets Landscape / Small Laptops (AUGMENTATION)
Supplements the existing @media (max-width: 991px) rules already in the file.
Only properties NOT already defined in the original breakpoint are added here.
============================================================================= */
@media (max-width: 991px) {
/* ── Hero (augmentation) ──────────────────────────────────────────────── */
/**
* At tablet landscape, min-height is already set to auto by existing rules.
* Reducing the container margin from 300px to 100px ensures content sits
* comfortably in the upper-centre of the hero rather than being pushed
* below the fold on ~768px-tall tablet screens.
*/
.hero-container {
margin-top: 100px;
}
.hero-subtitle {
font-size: 20px;
}
/* ── Sectors (augmentation) ───────────────────────────────────────────── */
/**
* Collapse the flex row header into a column layout.
* Removes the 60px subtitle padding-left which creates visual imbalance
* when the title/subtitle stack vertically on tablet-landscape widths.
*/
.sectors-title-wrap {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0 15px;
gap: 12px;
}
.sectors-subtitle {
padding-left: 0;
max-width: 100%;
}
/* ── Crewcare Difference (augmentation) ──────────────────────────────── */
.difference-section {
padding: 60px 0;
}
.difference-title {
font-size: 34px;
}
.difference-subtitle {
font-size: 17px;
}
.difference-videos-grid {
gap: 18px;
}
/* ── Service Locations (no previous coverage — full implementation) ───── */
.service-locations-section {
padding: 55px 0;
}
.service-locations-wrapper {
gap: 40px;
}
.service-locations-content {
-webkit-flex: 0 0 290px;
-ms-flex: 0 0 290px;
flex: 0 0 290px;
}
.service-locations-intro {
font-size: 18px;
margin-bottom: 28px;
}
.location-link {
font-size: 24px;
}
.service-locations-map {
min-height: 420px;
}
#nz-map-container {
height: 420px;
}
} /* END @media (max-width: 991px) augmentation */
/* =============================================================================
BREAKPOINT: 767px — Tablets Portrait (AUGMENTATION)
Supplements the existing @media (max-width: 767px) rules already in the file.
============================================================================= */
@media (max-width: 767px) {
/* ── Hero (augmentation) ──────────────────────────────────────────────── */
.hero-container {
margin-top: 70px;
}
.hero-subtitle {
font-size: 18px;
margin-bottom: 22px;
}
/* ── Sectors (augmentation) ───────────────────────────────────────────── */
.sectors-title-wrap {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0 15px;
gap: 8px;
}
.sectors-subtitle {
padding-left: 0;
}
.sectors-grid {
padding: 0 15px;
}
/* ── Crewcare Difference (augmentation) ──────────────────────────────── */
.difference-section {
padding: 50px 0;
}
.difference-title {
font-size: 28px;
}
.difference-subtitle {
font-size: 15px;
}
/**
* Stack video cards to single column on portrait tablets.
* Prevents 3-column cramping when card labels/thumbnails have fixed
* internal dimensions.
*/
.difference-videos-grid {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.difference-video-card {
padding: 20px 16px;
}
/* ── Service Locations (stacked layout) ───────────────────────────────── */
.service-locations-section {
padding: 50px 0;
}
/**
* Collapse two-column (list | map) layout to single column.
* Map moves below the location list — contextually, users scan the list
* first then reference the map for geographic orientation.
*/
.service-locations-wrapper {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 35px;
}
.service-locations-content {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
max-width: 100%;
}
.service-locations-intro {
font-size: 18px;
margin-bottom: 22px;
}
/**
* 2-column CSS Grid for location links on portrait tablet.
* Cities are short labels — two columns use space efficiently while
* maintaining comfortable touch targets (min 44px via font + padding).
*/
.service-locations-list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 0 20px;
}
.location-link {
font-size: 22px;
padding: 6px 0;
}
.service-locations-map {
width: 100%;
min-height: 380px;
}
#nz-map-container {
height: 380px;
min-width: unset;
}
} /* END @media (max-width: 767px) augmentation */
/* =============================================================================
BREAKPOINT: 600px — Large Phones (NEW — zero previous coverage)
Target: Devices 480px–600px wide (e.g., iPhone Plus, Pixel 6, Galaxy S)
This is the most impactful new breakpoint — the largest gap in existing coverage.
============================================================================= */
@media (max-width: 600px) {
/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero-section-new {
min-height: auto;
padding: 30px 0 25px;
}
/**
* At large-phone width the hero image crops significantly.
* 55px top-margin keeps content in the visible lower portion of the
* hero without creating an oversized empty sky zone above.
*/
.hero-container {
margin-top: 115px;
padding: 0 15px;
}
.hero-title {
font-size: 26px;
margin-bottom: 16px;
letter-spacing: 0;
}
.hero-subtitle {
font-size: 15px;
margin-bottom: 18px;
}
.hero-cta-buttons {
margin-top: 20px;
gap: 12px;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.btn-hero-primary,
.btn-hero-secondary {
width: 100%;
text-align: center;
padding: 13px 20px;
font-size: 14px;
border-radius: 24px;
}
.hero-features-sidebar {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 10px;
}
.hero-feature-card {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
text-align: left;
padding: 14px;
gap: 12px;
}
.hero-feature-icon {
-webkit-flex: 0 0 36px;
-ms-flex: 0 0 36px;
flex: 0 0 36px;
width: 36px;
height: 36px;
font-size: 16px;
}
.hero-feature-title {
font-size: 11px;
}
.hero-feature-description {
font-size: 11px;
}
/* ── What Care ─────────────────────────────────────────────────────────── */
.what-care-section {
padding: 40px 0;
}
.what-care-image-gallery {
min-height: 270px;
}
.gallery-images-stack {
height: 270px;
}
.gallery-background-icon {
width: 108px;
height: 108px;
}
.what-care-feature-card {
padding: 14px;
gap: 12px;
}
.what-care-feature-icon {
-webkit-flex: 0 0 40px;
-ms-flex: 0 0 40px;
flex: 0 0 40px;
width: 40px;
height: 40px;
font-size: 18px;
}
.what-care-feature-icon img {
max-width: 36px;
}
.what-care-feature-title {
font-size: 10px;
letter-spacing: 0.3px;
}
.what-care-icon img {
width: 58px;
height: 58px;
}
.what-care-title {
font-size: 25px;
margin-bottom: 14px;
}
.what-care-description {
font-size: 14px;
line-height: 1.65;
}
/* ── Sectors ───────────────────────────────────────────────────────────── */
.sectors-section {
padding: 40px 0;
}
.sectors-title-wrap {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0 15px;
gap: 8px;
margin-bottom: 25px !important;
}
.sectors-title {
font-size: 26px;
margin-bottom: 6px;
}
.sectors-subtitle {
padding-left: 0;
font-size: 14px;
max-width: 100%;
}
.sectors-grid {
grid-template-columns: 1fr;
gap: 14px;
padding: 0 15px;
}
.sector-card {
padding: 22px 18px;
}
.sector-card-icon {
width: 55px;
height: 55px;
margin-bottom: 14px;
}
.sector-card-title {
font-size: 17px;
margin-bottom: 10px;
}
.sector-card-description {
font-size: 13px;
}
.sectors-cta,
.difference-cta {
margin-top: 32px;
}
.sectors-cta-btn {
font-size: 15px;
padding: 13px 24px;
border-radius: 20px;
}
/* ── Crewcare Difference ──────────────────────────────────────────────── */
.difference-section {
padding: 40px 0;
}
.difference-title {
font-size: 24px;
}
.difference-subtitle {
font-size: 14px;
}
.difference-videos-grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 15px;
}
.difference-video-card {
padding: 18px 15px;
}
/* ── Testimonials ──────────────────────────────────────────────────────── */
.testimonials-section {
padding: 40px 0;
}
.testimonials-wrapper {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 28px;
text-align: center;
}
.testimonials-header {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
}
.testimonials-icon i {
font-size: 48px;
}
.testimonials-title {
font-size: 26px;
}
.testimonials-slider-container {
width: 100%;
gap: 12px;
}
.testimonials-slider {
min-height: 300px;
}
.testimonial-text {
font-size: 15px;
line-height: 1.65;
text-align: left;
}
.testimonial-author {
font-size: 13px;
text-align: left;
}
.testimonial-nav {
-webkit-flex: 0 0 42px;
-ms-flex: 0 0 42px;
flex: 0 0 42px;
width: 42px;
height: 42px;
}
.testimonial-nav i {
font-size: 14px;
}
/* ── Service Locations ────────────────────────────────────────────────── */
.service-locations-section {
padding: 40px 0;
}
.service-locations-wrapper {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 22px;
}
.service-locations-content {
width: 100%;
}
.service-locations-intro {
font-size: 16px;
margin-bottom: 18px;
}
.service-locations-list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 15px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 0 15px;
}
.location-link {
font-size: 18px;
padding: 5px 0;
}
#nz-map-container {
height: 295px;
}
/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-section {
padding: 40px 0;
}
.faq-title {
font-size: 26px;
margin-bottom: 26px;
}
.faq-question {
padding: 18px;
}
.faq-question-text {
font-size: 14px;
padding-right: 14px;
}
.faq-icon {
font-size: 13px;
}
.faq-answer-content {
padding: 0 18px 18px 18px;
font-size: 13px;
}
/* ── CBC (Care Beyond Clean) ──────────────────────────────────────────── */
.cbc-upper {
padding: 45px 15px 35px;
}
.cbc-upper__title {
font-size: 28px;
}
.cbc-upper__description {
font-size: 15px;
}
.cbc-lower__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.cbc-lower__divider {
width: 100%;
height: 1px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.cbc-card {
padding: 28px 20px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cbc-card__heading {
font-size: 16px;
}
.cbc-card__subtext {
font-size: 13px;
}
.cbc-card__btn {
font-size: 14px;
padding: 12px 24px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
} /* END @media (max-width: 600px) */
/* =============================================================================
BREAKPOINT: 479px — Phones (AUGMENTATION)
Supplements the existing @media (max-width: 479px) rules already in the file.
Adds hero-container margin fix and full service-locations coverage —
both completely absent from the original 479px block.
============================================================================= */
@media (max-width: 479px) {
/* ── Hero (augmentation) ──────────────────────────────────────────────── */
.hero-container {
margin-top: 115px;
}
.hero-subtitle {
font-size: 14px;
}
/* ── Sectors (augmentation) ───────────────────────────────────────────── */
.sectors-grid {
padding: 0 15px;
}
.sectors-title-wrap {
padding: 0 15px;
margin-bottom: 22px !important;
}
.sectors-subtitle {
padding-left: 0;
}
/* ── Service Locations (no previous coverage) ─────────────────────────── */
.service-locations-section {
padding: 35px 0;
}
.service-locations-wrapper {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
}
.service-locations-content {
width: 100%;
}
.service-locations-intro {
font-size: 15px;
margin-bottom: 16px;
}
.service-locations-list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 12px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 0 12px;
}
.location-link {
font-size: 17px;
padding: 5px 0;
}
#nz-map-container {
height: 270px;
}
/* ── CBC (augmentation) ───────────────────────────────────────────────── */
.cbc-upper__title {
font-size: 26px;
}
} /* END @media (max-width: 479px) augmentation */
/* =============================================================================
BREAKPOINT: 320px — Small Phones (NEW — zero previous coverage)
Target: Smallest common phone width (iPhone 4, SE 1st gen, Galaxy Ace)
Micro-optimisations ensure no overflow, no truncation, no invisible content.
All values derived by scaling the 479px values proportionally (~67%).
============================================================================= */
@media (max-width: 320px) {
/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero-section-new {
padding: 20px 0;
}
/**
* Minimum viable margin: 30px keeps the content header visible on the
* smallest production viewport without letting it collide with the
* hero section's top edge.
*/
.hero-container {
margin-top: 115px;
padding: 0 12px;
}
.hero-title {
font-size: 22px;
letter-spacing: 0;
margin-bottom: 12px;
}
.hero-subtitle {
font-size: 13px;
margin-bottom: 14px;
}
.hero-cta-buttons {
margin-top: 15px;
gap: 10px;
}
.btn-hero-primary,
.btn-hero-secondary {
padding: 11px 16px;
font-size: 13px;
border-radius: 20px;
}
.hero-feature-card {
padding: 11px 12px;
gap: 10px;
}
.hero-feature-icon {
-webkit-flex: 0 0 30px;
-ms-flex: 0 0 30px;
flex: 0 0 30px;
width: 30px;
height: 30px;
font-size: 13px;
}
.hero-feature-title {
font-size: 10px;
letter-spacing: 0;
line-height: 1.2;
}
.hero-feature-description {
font-size: 10px;
line-height: 1.3;
}
/* ── What Care ─────────────────────────────────────────────────────────── */
.what-care-section {
padding: 28px 0;
}
.what-care-section .container {
padding: 0 12px;
}
.what-care-image-gallery {
min-height: 220px;
}
.gallery-images-stack {
height: 220px;
}
.gallery-background-icon {
width: 88px;
height: 88px;
}
.what-care-feature-card {
padding: 11px 12px;
gap: 10px;
}
.what-care-feature-icon {
-webkit-flex: 0 0 34px;
-ms-flex: 0 0 34px;
flex: 0 0 34px;
width: 34px;
height: 34px;
font-size: 15px;
}
.what-care-feature-icon img {
max-width: 28px;
}
.what-care-feature-title {
font-size: 9px;
letter-spacing: 0.2px;
line-height: 1.3;
}
.what-care-icon img {
width: 48px;
height: 48px;
}
.what-care-content {
padding: 0 12px;
}
.what-care-title {
font-size: 21px;
margin-bottom: 12px;
}
.what-care-description {
font-size: 13px;
line-height: 1.6;
}
/* ── Sectors ───────────────────────────────────────────────────────────── */
.sectors-section {
padding: 28px 0;
}
.sectors-title-wrap {
padding: 0 12px;
margin-bottom: 18px !important;
gap: 6px;
}
.sectors-title {
font-size: 21px;
}
.sectors-subtitle {
font-size: 13px;
padding-left: 0;
}
.sectors-grid {
gap: 12px;
padding: 0 12px;
}
.sector-card {
padding: 18px 14px;
}
.sector-card-icon {
width: 48px;
height: 48px;
margin-bottom: 12px;
}
.sector-card-title {
font-size: 16px;
margin-bottom: 8px;
}
.sector-card-description {
font-size: 12px;
line-height: 1.45;
}
.sectors-cta,
.difference-cta {
margin-top: 24px;
}
.sectors-cta-btn {
font-size: 13px;
padding: 11px 18px;
border-radius: 18px;
}
/* ── Crewcare Difference ──────────────────────────────────────────────── */
.difference-section {
padding: 28px 0;
}
.difference-title {
font-size: 20px;
}
.difference-subtitle {
font-size: 13px;
}
.difference-videos-grid {
gap: 12px;
}
.difference-video-card {
padding: 15px 12px;
}
/* ── Testimonials ──────────────────────────────────────────────────────── */
.testimonials-section {
padding: 28px 0;
}
.testimonials-wrapper {
padding: 0 12px;
gap: 22px;
}
.testimonials-icon i {
font-size: 40px;
}
.testimonials-title {
font-size: 22px;
}
.testimonials-slider {
min-height: 340px;
}
.testimonial-text {
font-size: 13px;
line-height: 1.6;
}
.testimonial-author {
font-size: 12px;
}
.testimonial-nav {
-webkit-flex: 0 0 36px;
-ms-flex: 0 0 36px;
flex: 0 0 36px;
width: 36px;
height: 36px;
}
.testimonial-nav i {
font-size: 12px;
}
/* ── Service Locations ────────────────────────────────────────────────── */
.service-locations-section {
padding: 28px 0;
}
.service-locations-wrapper {
padding: 0 12px;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 18px;
}
.service-locations-intro {
font-size: 14px;
margin-bottom: 14px;
}
/**
* 2-column grid maintained at 320px — city names are short enough
* (max ~14 chars) to fit comfortably at 15px in a ~140px column.
*/
.service-locations-list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 10px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 0 10px;
}
.location-link {
font-size: 15px;
padding: 4px 0;
}
#nz-map-container {
height: 230px;
}
/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-section {
padding: 28px 0;
}
.faq-title {
font-size: 21px;
margin-bottom: 20px;
}
.faq-accordion {
padding: 0 12px;
}
.faq-question {
padding: 15px;
}
.faq-question-text {
font-size: 13px;
padding-right: 10px;
line-height: 1.35;
}
.faq-icon {
font-size: 12px;
-webkit-flex: 0 0 16px;
-ms-flex: 0 0 16px;
flex: 0 0 16px;
}
.faq-answer-content {
padding: 0 15px 15px 15px;
font-size: 12px;
line-height: 1.6;
}
.faq-answer-content ul {
padding-left: 18px;
}
.faq-answer-content li {
margin-bottom: 8px;
}
/* ── CBC (Care Beyond Clean) ──────────────────────────────────────────── */
.cbc-upper {
padding: 28px 12px 22px;
}
.cbc-upper__title {
font-size: 21px;
}
.cbc-upper__description {
font-size: 13px;
line-height: 1.6;
}
.cbc-upper__description br {
display: none;
}
.cbc-lower__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.cbc-lower__divider {
width: 100%;
height: 1px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.cbc-card {
padding: 20px 12px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cbc-card__heading {
font-size: 14px;
line-height: 1.35;
}
.cbc-card__subtext {
font-size: 12px;
line-height: 1.5;
}
.cbc-card__btn {
font-size: 13px;
padding: 10px 18px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
} /* END @media (max-width: 320px) */
/* =============================================================================
END OF HOMEPAGE REVISION STYLES
homepage-revision.css v2.0.0 — Responsive Augmentation Applied 2026-02-19
============================================================================= */