/* =====================================================================
DEEP CLEANING EXPERTS — MAIN STYLESHEET
File: css/style.css
Author: Built for deepcleaningexperts.pk
Notes for editing in VS Code:
- All brand colors, fonts, spacing, and radii are defined once as
CSS variables in :root below. Change a value there and it
updates the entire site.
- The file is organized into clearly labeled sections. Use your
editor's "Go to Symbol"/search (Ctrl+F) with the SECTION titles
(e.g. "SECTION: HEADER") to jump around quickly.
- Mobile styles are the DEFAULT. Tablet/desktop overrides live in
the @media queries near the bottom of the file.
===================================================================== */
/* ---------------------------------------------------------------------
SECTION: FONTS
Display face: Poppins (headings, buttons, CTAs) — bold, geometric,
confident. Body face: Inter (paragraphs, labels) — highly readable
at small mobile sizes.
--------------------------------------------------------------------- */
/* Fonts are now loaded via +
in the of every HTML page (faster than @import, which forced an
extra blocking round-trip before the browser even discovered the fonts). */
/* ---------------------------------------------------------------------
SECTION: ROOT VARIABLES (EDIT BRAND SETTINGS HERE)
--------------------------------------------------------------------- */
:root {
/* Brand colors — updated to Royal Blue / Dark Navy / Green palette */
--primary-blue: #0F5BD3;
--primary-blue-dark: #0C48A8;
--dark-blue: #062A6D;
--accent-green: #16A34A;
--accent-green-dark: #12833B;
--bg-light: #F8FAFC;
--text-dark: #1F2937;
/* Derived / supporting tones */
--white: #FFFFFF;
--text-muted: #5B6675;
--border-light: #E3E9F0;
--blue-tint: #EAF2FC;
--green-tint: #E9F8EF;
--overlay-dark: rgba(6, 42, 109, 0.72);
/* Typography */
--font-display: 'Poppins', 'Segoe UI', sans-serif;
--font-body: 'Inter', 'Segoe UI', sans-serif;
/* Spacing scale */
--space-xs: 8px;
--space-sm: 12px;
--space-md: 20px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 72px;
/* Radii — signature "droplet" corner uses an asymmetric radius
(echoes the water-droplet mark in the logo) alongside a standard
soft radius for general cards */
--radius-standard: 16px;
--radius-pill: 999px;
--radius-droplet: 28px 28px 28px 4px;
/* Shadows */
--shadow-soft: 0 8px 24px rgba(20, 33, 61, 0.08);
--shadow-card: 0 4px 16px rgba(20, 33, 61, 0.06);
--shadow-lift: 0 16px 40px rgba(10, 102, 194, 0.18);
/* Layout */
--container-width: 1200px;
--header-height: 68px;
--bottom-bar-height: 64px;
/* Motion */
--transition-fast: 0.18s ease;
--transition-medium: 0.3s ease;
}
/* ---------------------------------------------------------------------
SECTION: RESET & BASE
--------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
color: var(--text-dark);
background-color: var(--white);
line-height: 1.6;
overflow-x: hidden; /* guards against accidental horizontal scroll */
/* Space for the fixed header and the mobile bottom action bar */
padding-top: var(--header-height);
padding-bottom: var(--bottom-bar-height);
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
input,
textarea,
select {
font-family: inherit;
font-size: 16px; /* prevents iOS auto-zoom on focus */
}
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--dark-blue);
line-height: 1.2;
font-weight: 700;
}
/* Visible keyboard focus for accessibility on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--primary-blue);
outline-offset: 2px;
}
/* Respect users who prefer reduced motion */
@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;
}
}
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--space-md);
}
/* Utility: visually hides an element but keeps it for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------
SECTION: SECTION HEADINGS (shared "eyebrow + title" pattern)
--------------------------------------------------------------------- */
.section {
padding: var(--space-2xl) 0;
}
.section-light {
background-color: var(--bg-light);
}
.section-header {
text-align: center;
max-width: 620px;
margin: 0 auto var(--space-xl);
}
.eyebrow {
display: inline-block;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-green-dark);
background: var(--green-tint);
padding: 6px 16px;
border-radius: var(--radius-pill);
margin-bottom: var(--space-sm);
}
.section-header h2 {
font-size: 28px;
margin-bottom: var(--space-sm);
}
.section-header p {
color: var(--text-muted);
font-size: 16px;
}
/* ---------------------------------------------------------------------
SECTION: BUTTONS
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
padding: 14px 26px;
border-radius: var(--radius-pill);
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
white-space: nowrap;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
background-color: var(--primary-blue);
color: var(--white);
box-shadow: var(--shadow-lift);
}
.btn-primary:hover {
background-color: var(--primary-blue-dark);
transform: translateY(-2px);
}
.btn-whatsapp {
background-color: var(--accent-green);
color: var(--white);
box-shadow: 0 12px 28px rgba(24, 165, 88, 0.25);
}
.btn-whatsapp:hover {
background-color: var(--accent-green-dark);
transform: translateY(-2px);
}
.btn-outline {
background-color: transparent;
color: var(--dark-blue);
border: 2px solid var(--border-light);
}
.btn-outline:hover {
border-color: var(--primary-blue);
color: var(--primary-blue);
}
.btn-block {
width: 100%;
}
.btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ---------------------------------------------------------------------
SECTION: HEADER / MOBILE STICKY NAV
--------------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
background-color: var(--white);
border-bottom: 1px solid var(--border-light);
z-index: 1000;
transition: box-shadow var(--transition-medium);
}
.site-header.is-scrolled {
box-shadow: var(--shadow-soft);
}
.site-header .container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
}
.brand img {
height: 40px;
width: auto;
}
.brand-name {
font-size: 16px;
font-weight: 700;
color: var(--dark-blue);
line-height: 1.15;
}
.brand-name span {
display: block;
font-family: var(--font-body);
font-weight: 500;
font-size: 10px;
color: var(--accent-green-dark);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Desktop nav links — hidden on mobile, shown at tablet breakpoint */
.main-nav {
display: none;
}
.main-nav ul {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.main-nav a {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
color: var(--text-dark);
transition: color var(--transition-fast);
position: relative;
}
.main-nav a:hover,
.main-nav a.active {
color: var(--primary-blue);
}
.main-nav a.active::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent-green);
border-radius: var(--radius-pill);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.header-cta {
display: none; /* revealed at desktop breakpoint; mobile relies on bottom bar */
}
/* Hamburger button (mobile only) */
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
background-color: var(--dark-blue);
border-radius: var(--radius-pill);
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.hamburger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile slide-down nav panel */
.mobile-nav {
position: fixed;
top: var(--header-height);
left: 0;
width: 100%;
background-color: var(--white);
border-bottom: 1px solid var(--border-light);
box-shadow: var(--shadow-soft);
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: transform var(--transition-medium), opacity var(--transition-medium);
z-index: 999;
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
}
.mobile-nav.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.mobile-nav ul {
padding: var(--space-sm) var(--space-md) var(--space-lg);
}
.mobile-nav li + li {
border-top: 1px solid var(--border-light);
}
.mobile-nav a {
display: block;
padding: 16px 4px;
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
color: var(--text-dark);
}
.mobile-nav a.active {
color: var(--primary-blue);
}
.mobile-nav-cta {
padding: var(--space-sm) var(--space-md) var(--space-md);
display: flex;
flex-direction: column;
gap: 10px;
}
/* ---------------------------------------------------------------------
SECTION: MOBILE BOTTOM ACTION BAR (Call left / WhatsApp right)
--------------------------------------------------------------------- */
.bottom-action-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: var(--bottom-bar-height);
display: flex;
z-index: 1000;
box-shadow: 0 -6px 20px rgba(20, 33, 61, 0.12);
}
.bottom-action-bar a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
color: var(--white);
}
.bottom-action-bar .call-action {
background-color: var(--dark-blue);
}
.bottom-action-bar .whatsapp-action {
background-color: var(--accent-green);
}
.bottom-action-bar svg {
width: 20px;
height: 20px;
}
/* Hidden on desktop — header CTA takes over */
@media (min-width: 900px) {
.bottom-action-bar {
display: none;
}
body {
padding-bottom: 0;
}
}
/* ---------------------------------------------------------------------
SECTION: FLOATING WHATSAPP BUBBLE
--------------------------------------------------------------------- */
.whatsapp-float {
position: fixed;
right: var(--space-md);
bottom: calc(var(--bottom-bar-height) + var(--space-md));
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--accent-green);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(24, 165, 88, 0.35);
z-index: 998;
animation: float-pulse 2.8s ease-in-out infinite;
}
.whatsapp-float svg {
width: 28px;
height: 28px;
fill: var(--white);
}
@keyframes float-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@media (min-width: 900px) {
.whatsapp-float {
bottom: var(--space-lg);
}
}
/* ---------------------------------------------------------------------
SECTION: HERO
--------------------------------------------------------------------- */
.hero {
position: relative;
background: linear-gradient(180deg, var(--blue-tint) 0%, var(--white) 100%);
padding: var(--space-xl) 0 var(--space-2xl);
overflow: hidden;
}
/* Signature droplet-blob backdrop shape, echoing the logo's water drop */
.hero::before {
content: '';
position: absolute;
top: -60px;
right: -80px;
width: 320px;
height: 320px;
background: radial-gradient(circle at 30% 30%, rgba(10, 102, 194, 0.14), transparent 70%);
border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
z-index: 0;
}
.hero .container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
background: var(--white);
border: 1px solid var(--border-light);
padding: 8px 14px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 600;
color: var(--accent-green-dark);
box-shadow: var(--shadow-card);
}
.hero h1 {
font-size: 34px;
letter-spacing: -0.01em;
}
.hero h1 .highlight {
color: var(--primary-blue);
}
.hero p.hero-subtext {
font-size: 16px;
color: var(--text-muted);
max-width: 480px;
}
.hero-cta-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-trust-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
padding-top: var(--space-sm);
}
.hero-trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--dark-blue);
}
.hero-trust-item svg {
width: 20px;
height: 20px;
color: var(--accent-green);
flex-shrink: 0;
}
.hero-media {
position: relative;
border-radius: var(--radius-droplet);
overflow: hidden;
box-shadow: var(--shadow-soft);
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.hero-media img,
.hero-media video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-media-placeholder {
color: var(--white);
text-align: center;
padding: var(--space-lg);
font-family: var(--font-display);
font-size: 14px;
opacity: 0.85;
}
/* ---------------------------------------------------------------------
SECTION: TRUST STRIP (logos / stats bar under hero)
--------------------------------------------------------------------- */
.trust-strip {
background-color: var(--dark-blue);
padding: var(--space-lg) 0;
}
.trust-strip .container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
text-align: center;
}
.trust-stat {
color: var(--white);
}
.trust-stat strong {
display: block;
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: var(--white);
}
.trust-stat span {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ---------------------------------------------------------------------
SECTION: SERVICES GRID
--------------------------------------------------------------------- */
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
.service-card {
background-color: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-droplet);
padding: var(--space-lg);
transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
border-color: transparent;
}
.service-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-droplet);
background: var(--blue-tint);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
}
.service-icon svg {
width: 26px;
height: 26px;
color: var(--primary-blue);
}
.service-card h3 {
font-size: 18px;
margin-bottom: 8px;
}
.service-card p {
color: var(--text-muted);
font-size: 14px;
margin-bottom: var(--space-md);
}
.service-card .service-link {
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--primary-blue);
display: inline-flex;
align-items: center;
gap: 6px;
}
.service-card .service-link svg {
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
.service-card .service-link:hover svg {
transform: translateX(4px);
}
/* ---------------------------------------------------------------------
SECTION: WHY CHOOSE US
--------------------------------------------------------------------- */
.why-us-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.why-us-item {
text-align: center;
padding: var(--space-md);
}
.why-us-item .icon-wrap {
width: 60px;
height: 60px;
margin: 0 auto var(--space-sm);
border-radius: 50%;
background: var(--green-tint);
display: flex;
align-items: center;
justify-content: center;
}
.why-us-item .icon-wrap svg {
width: 28px;
height: 28px;
color: var(--accent-green-dark);
}
.why-us-item h3 {
font-size: 15px;
margin-bottom: 4px;
}
.why-us-item p {
font-size: 13px;
color: var(--text-muted);
}
/* ---------------------------------------------------------------------
SECTION: HOW IT WORKS (process steps)
--------------------------------------------------------------------- */
.steps-list {
display: flex;
flex-direction: column;
gap: var(--space-lg);
position: relative;
}
.step-item {
display: flex;
gap: var(--space-md);
align-items: flex-start;
}
.step-number {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--radius-droplet);
background: var(--primary-blue);
color: var(--white);
font-family: var(--font-display);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.step-content h3 {
font-size: 16px;
margin-bottom: 4px;
}
.step-content p {
font-size: 14px;
color: var(--text-muted);
}
/* ---------------------------------------------------------------------
SECTION: PRICING TEASER
--------------------------------------------------------------------- */
.pricing-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-md);
}
.pricing-card {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-standard);
padding: var(--space-lg);
text-align: center;
position: relative;
}
.pricing-card.featured {
border: 2px solid var(--primary-blue);
box-shadow: var(--shadow-lift);
}
.pricing-card .badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-green);
color: var(--white);
font-size: 11px;
font-weight: 700;
padding: 5px 14px;
border-radius: var(--radius-pill);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.pricing-card h3 {
font-size: 18px;
margin-bottom: 8px;
}
.pricing-card .price {
font-family: var(--font-display);
font-size: 30px;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 4px;
}
.pricing-card .price span {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
}
.pricing-card ul {
text-align: left;
margin: var(--space-md) 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pricing-card li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
color: var(--text-dark);
}
.pricing-card li svg {
width: 18px;
height: 18px;
color: var(--accent-green);
flex-shrink: 0;
margin-top: 2px;
}
/* ---------------------------------------------------------------------
SECTION: GALLERY PREVIEW
--------------------------------------------------------------------- */
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.gallery-item {
border-radius: var(--radius-standard);
overflow: hidden;
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, var(--blue-tint), var(--green-tint));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 12px;
text-align: center;
padding: var(--space-sm);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------------------------------------------------------------------
SECTION: TESTIMONIALS
--------------------------------------------------------------------- */
.testimonial-track {
display: flex;
gap: var(--space-md);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--space-sm);
-webkit-overflow-scrolling: touch;
}
.testimonial-track::-webkit-scrollbar {
height: 6px;
}
.testimonial-track::-webkit-scrollbar-thumb {
background: var(--border-light);
border-radius: var(--radius-pill);
}
.testimonial-card {
scroll-snap-align: start;
flex: 0 0 85%;
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-standard);
padding: var(--space-lg);
}
.testimonial-stars {
color: #F5A623;
font-size: 15px;
margin-bottom: var(--space-sm);
letter-spacing: 2px;
}
.testimonial-card p {
font-size: 14px;
color: var(--text-dark);
margin-bottom: var(--space-md);
}
.testimonial-author {
display: flex;
align-items: center;
gap: 10px;
}
.testimonial-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--blue-tint);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
color: var(--primary-blue);
font-size: 14px;
flex-shrink: 0;
overflow: hidden;
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--dark-blue);
}
.testimonial-location {
font-size: 12px;
color: var(--text-muted);
}
/* ---------------------------------------------------------------------
SECTION: FAQ ACCORDION
--------------------------------------------------------------------- */
.faq-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-width: 760px;
margin: 0 auto;
}
.faq-item {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-standard);
overflow: hidden;
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-md);
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
text-align: left;
color: var(--dark-blue);
}
.faq-question .icon-plus {
flex-shrink: 0;
width: 22px;
height: 22px;
position: relative;
}
.faq-question .icon-plus::before,
.faq-question .icon-plus::after {
content: '';
position: absolute;
background: var(--primary-blue);
border-radius: var(--radius-pill);
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.faq-question .icon-plus::before {
top: 50%;
left: 0;
width: 100%;
height: 2px;
transform: translateY(-50%);
}
.faq-question .icon-plus::after {
left: 50%;
top: 0;
width: 2px;
height: 100%;
transform: translateX(-50%);
}
.faq-item.is-open .icon-plus::after {
opacity: 0;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-medium);
}
.faq-answer p {
padding: 0 var(--space-md) var(--space-md);
font-size: 14px;
color: var(--text-muted);
}
/* ---------------------------------------------------------------------
SECTION: FINAL CTA BAND
--------------------------------------------------------------------- */
.cta-band {
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
border-radius: var(--radius-droplet);
padding: var(--space-xl) var(--space-lg);
text-align: center;
color: var(--white);
margin: 0 var(--space-md);
}
.cta-band h2 {
color: var(--white);
font-size: 24px;
margin-bottom: var(--space-sm);
}
.cta-band p {
color: rgba(255, 255, 255, 0.85);
margin-bottom: var(--space-lg);
font-size: 15px;
}
.cta-band-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---------------------------------------------------------------------
SECTION: FOOTER
--------------------------------------------------------------------- */
.site-footer {
background-color: var(--dark-blue);
color: rgba(255, 255, 255, 0.75);
padding: var(--space-2xl) 0 var(--space-lg);
margin-top: var(--space-2xl);
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.footer-brand .brand-name {
color: var(--white);
}
.footer-brand p {
font-size: 14px;
margin-top: var(--space-sm);
color: rgba(255, 255, 255, 0.65);
}
.footer-social {
display: flex;
gap: 10px;
margin-top: var(--space-md);
}
.footer-social a {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-fast);
}
.footer-social a:hover {
background: var(--accent-green);
}
.footer-social svg {
width: 18px;
height: 18px;
color: var(--white);
}
.footer-col h4 {
color: var(--white);
font-size: 15px;
margin-bottom: var(--space-sm);
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-col a {
font-size: 14px;
transition: color var(--transition-fast);
}
.footer-col a:hover {
color: var(--white);
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
}
.footer-contact svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
color: var(--accent-green);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: var(--space-md);
display: flex;
flex-direction: column;
gap: 10px;
font-size: 13px;
text-align: center;
color: rgba(255, 255, 255, 0.55);
}
.footer-bottom .legal-links {
display: flex;
justify-content: center;
gap: var(--space-md);
}
/* =====================================================================
RESPONSIVE BREAKPOINTS
Mobile-first: base styles above target 320px–480px.
Below we scale UP for tablets and desktops.
===================================================================== */
/* ---------------------------------------------------------------------
TABLET: 768px and up
--------------------------------------------------------------------- */
@media (min-width: 768px) {
.hero h1 {
font-size: 42px;
}
.why-us-grid {
grid-template-columns: repeat(4, 1fr);
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.pricing-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
.trust-strip .container {
grid-template-columns: repeat(4, 1fr);
}
.footer-grid {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.footer-bottom {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
.cta-band-buttons {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.testimonial-card {
flex: 0 0 45%;
}
}
/* ---------------------------------------------------------------------
DESKTOP: 900px and up (nav + header CTA switch on here)
--------------------------------------------------------------------- */
@media (min-width: 900px) {
.main-nav {
display: block;
}
.header-cta {
display: flex;
align-items: center;
gap: 10px;
}
.hamburger,
.mobile-nav {
display: none;
}
.hero .container {
flex-direction: row;
align-items: center;
}
.hero-copy {
flex: 1;
}
.hero-media {
flex: 1;
}
.hero h1 {
font-size: 48px;
}
.hero-cta-group {
flex-direction: row;
}
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
.steps-list {
flex-direction: row;
}
.step-item {
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
}
.testimonial-card {
flex: 0 0 32%;
}
}
/* ---------------------------------------------------------------------
LARGE DESKTOP: 1200px and up
--------------------------------------------------------------------- */
@media (min-width: 1200px) {
.section-header h2 {
font-size: 34px;
}
.hero h1 {
font-size: 54px;
}
}
/* =====================================================================
PART 2 ADDITIONS — shared styles for inner pages
(about.html, services.html, gallery.html, pricing.html)
===================================================================== */
/* ---------------------------------------------------------------------
SECTION: PAGE HERO (compact banner for every inner page)
--------------------------------------------------------------------- */
.page-hero {
position: relative;
background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 100%);
padding: var(--space-xl) 0;
text-align: center;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: -60px;
left: -60px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(24, 165, 88, 0.22), transparent 70%);
border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
}
.page-hero .container {
position: relative;
z-index: 1;
}
.page-hero .eyebrow {
background: rgba(255, 255, 255, 0.12);
color: var(--white);
}
.page-hero h1 {
color: var(--white);
font-size: 30px;
margin-bottom: var(--space-sm);
}
.page-hero p {
color: rgba(255, 255, 255, 0.85);
max-width: 560px;
margin: 0 auto;
font-size: 15px;
}
.breadcrumb {
display: flex;
justify-content: center;
gap: 6px;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-sm);
}
.breadcrumb a {
color: rgba(255, 255, 255, 0.9);
}
.breadcrumb a:hover {
color: var(--white);
}
/* ---------------------------------------------------------------------
SECTION: ABOUT PAGE — story, values, timeline
--------------------------------------------------------------------- */
.story-block {
display: flex;
flex-direction: column;
gap: var(--space-lg);
align-items: center;
}
.story-media {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-droplet);
background: linear-gradient(135deg, var(--blue-tint), var(--green-tint));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 13px;
text-align: center;
padding: var(--space-lg);
}
.story-copy h2 {
font-size: 26px;
margin-bottom: var(--space-sm);
}
.story-copy p {
color: var(--text-muted);
font-size: 15px;
margin-bottom: var(--space-sm);
}
.values-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
.value-card {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-standard);
padding: var(--space-lg);
text-align: center;
}
.value-card .icon-wrap {
width: 56px;
height: 56px;
margin: 0 auto var(--space-sm);
border-radius: var(--radius-droplet);
background: var(--blue-tint);
display: flex;
align-items: center;
justify-content: center;
}
.value-card .icon-wrap svg {
width: 26px;
height: 26px;
color: var(--primary-blue);
}
.value-card h3 {
font-size: 16px;
margin-bottom: 6px;
}
.value-card p {
font-size: 14px;
color: var(--text-muted);
}
/* Timeline (company milestones) */
.timeline {
display: flex;
flex-direction: column;
gap: var(--space-lg);
max-width: 640px;
margin: 0 auto;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 21px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--border-light);
}
.timeline-item {
display: flex;
gap: var(--space-md);
position: relative;
}
.timeline-dot {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent-green);
color: var(--white);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.timeline-content h3 {
font-size: 15px;
margin-bottom: 4px;
}
.timeline-content p {
font-size: 14px;
color: var(--text-muted);
}
/* Team grid */
.team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.team-card {
text-align: center;
}
.team-photo {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius-droplet);
background: linear-gradient(135deg, var(--blue-tint), var(--green-tint));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 12px;
margin-bottom: var(--space-sm);
}
.team-card h3 {
font-size: 15px;
margin-bottom: 2px;
}
.team-card span {
font-size: 13px;
color: var(--accent-green-dark);
}
/* ---------------------------------------------------------------------
SECTION: SERVICES PAGE — detailed alternating rows
--------------------------------------------------------------------- */
.service-detail {
display: flex;
flex-direction: column;
gap: var(--space-lg);
align-items: center;
padding: var(--space-xl) 0;
border-bottom: 1px solid var(--border-light);
}
.service-detail:last-child {
border-bottom: none;
}
.service-detail-media {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-droplet);
background: linear-gradient(135deg, var(--blue-tint), var(--green-tint));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 13px;
text-align: center;
padding: var(--space-lg);
}
.service-detail-copy .eyebrow {
margin-bottom: var(--space-sm);
}
.service-detail-copy h2 {
font-size: 24px;
margin-bottom: var(--space-sm);
}
.service-detail-copy > p {
color: var(--text-muted);
font-size: 15px;
margin-bottom: var(--space-md);
}
.checklist {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: var(--space-lg);
}
.checklist li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
color: var(--text-dark);
}
.checklist li svg {
width: 18px;
height: 18px;
color: var(--accent-green);
flex-shrink: 0;
margin-top: 2px;
}
.service-detail-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Reversed row order on desktop for visual rhythm (handled in media query) */
/* ---------------------------------------------------------------------
SECTION: GALLERY PAGE — filters & lightbox
--------------------------------------------------------------------- */
.gallery-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: var(--space-xl);
}
.filter-btn {
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
padding: 10px 20px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-light);
background: var(--white);
color: var(--text-dark);
transition: all var(--transition-fast);
}
.filter-btn.is-active,
.filter-btn:hover {
background: var(--primary-blue);
border-color: var(--primary-blue);
color: var(--white);
}
.gallery-grid-full {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.gallery-grid-full .gallery-item {
cursor: pointer;
transition: transform var(--transition-fast);
}
.gallery-grid-full .gallery-item:hover {
transform: scale(1.03);
}
.gallery-grid-full .gallery-item.is-hidden {
display: none;
}
/* Lightbox modal */
.lightbox {
position: fixed;
inset: 0;
background: var(--overlay-dark);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
z-index: 2000;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-medium);
}
.lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.lightbox-inner {
background: var(--white);
border-radius: var(--radius-standard);
max-width: 480px;
width: 100%;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 14px;
text-align: center;
padding: var(--space-lg);
position: relative;
}
.lightbox-close {
position: absolute;
top: -44px;
right: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-close svg {
width: 18px;
height: 18px;
color: var(--white);
}
/* ---------------------------------------------------------------------
SECTION: PRICING PAGE — comparison table & add-ons
--------------------------------------------------------------------- */
.addons-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.addon-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-standard);
padding: var(--space-md);
}
.addon-card h3 {
font-size: 15px;
margin-bottom: 2px;
}
.addon-card p {
font-size: 13px;
color: var(--text-muted);
}
.addon-price {
font-family: var(--font-display);
font-weight: 700;
color: var(--primary-blue);
font-size: 15px;
white-space: nowrap;
}
.pricing-note {
text-align: center;
font-size: 13px;
color: var(--text-muted);
margin-top: var(--space-md);
}
/* ---------------------------------------------------------------------
RESPONSIVE — Part 2 pages
--------------------------------------------------------------------- */
@media (min-width: 768px) {
.values-grid {
grid-template-columns: repeat(3, 1fr);
}
.team-grid {
grid-template-columns: repeat(4, 1fr);
}
.gallery-grid-full {
grid-template-columns: repeat(3, 1fr);
}
.addons-grid {
grid-template-columns: repeat(2, 1fr);
}
.page-hero h1 {
font-size: 38px;
}
}
@media (min-width: 900px) {
.story-block {
flex-direction: row;
align-items: center;
}
.story-media,
.story-copy {
flex: 1;
}
.service-detail {
flex-direction: row;
align-items: center;
}
.service-detail-media,
.service-detail-copy {
flex: 1;
}
.service-detail.reverse {
flex-direction: row-reverse;
}
.page-hero h1 {
font-size: 42px;
}
}
/* =====================================================================
PART 3 ADDITIONS — booking/contact forms, blog, legal pages, 404
===================================================================== */
/* ---------------------------------------------------------------------
SECTION: FORMS (booking.html, contact.html)
--------------------------------------------------------------------- */
.form-card {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-standard);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
max-width: 640px;
margin: 0 auto;
}
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
color: var(--dark-blue);
}
.form-group label .required {
color: var(--primary-blue);
}
.form-group input,
.form-group select,
.form-group textarea {
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 12px 14px;
color: var(--text-dark);
background: var(--bg-light);
transition: border-color var(--transition-fast);
width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--primary-blue);
outline: none;
background: var(--white);
}
.form-group textarea {
resize: vertical;
min-height: 90px;
}
/* Honeypot field — invisible to real users, catches simple bots */
.form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-footnote {
font-size: 13px;
color: var(--text-muted);
text-align: center;
margin-top: var(--space-sm);
}
.form-status {
display: none;
margin-top: var(--space-sm);
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-align: center;
}
.form-status.is-visible {
display: block;
}
.form-status.is-error {
background: #FDEDEC;
color: #C0392B;
}
.form-status.is-success {
background: var(--green-tint);
color: var(--accent-green-dark);
}
.form-divider {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-lg) 0;
color: var(--text-muted);
font-size: 13px;
}
.form-divider::before,
.form-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-light);
}
.direct-contact-row {
display: flex;
flex-direction: column;
gap: 10px;
}
/* ---------------------------------------------------------------------
SECTION: CONTACT INFO CARDS (contact.html)
--------------------------------------------------------------------- */
.contact-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.contact-info-card {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-standard);
padding: var(--space-lg);
text-align: center;
}
.contact-info-card .icon-wrap {
width: 56px;
height: 56px;
margin: 0 auto var(--space-sm);
border-radius: var(--radius-droplet);
background: var(--blue-tint);
display: flex;
align-items: center;
justify-content: center;
}
.contact-info-card .icon-wrap svg {
width: 26px;
height: 26px;
color: var(--primary-blue);
}
.contact-info-card h3 {
font-size: 15px;
margin-bottom: 4px;
}
.contact-info-card p,
.contact-info-card a {
font-size: 14px;
color: var(--text-muted);
}
.contact-info-card a:hover {
color: var(--primary-blue);
}
/* ---------------------------------------------------------------------
SECTION: BLOG (blog.html)
--------------------------------------------------------------------- */
.blog-grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
max-width: 760px;
margin: 0 auto;
}
.blog-card {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-standard);
overflow: hidden;
}
.blog-card-media {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--blue-tint), var(--green-tint));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 13px;
text-align: center;
padding: var(--space-md);
}
.blog-card-body {
padding: var(--space-lg);
}
.blog-meta {
display: flex;
gap: var(--space-sm);
font-size: 12px;
color: var(--accent-green-dark);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-sm);
}
.blog-card h2 {
font-size: 19px;
margin-bottom: 8px;
}
.blog-card p.blog-excerpt {
font-size: 14px;
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.blog-card details summary {
cursor: pointer;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--primary-blue);
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.blog-card details summary::-webkit-details-marker {
display: none;
}
.blog-card details summary svg {
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
.blog-card details[open] summary svg {
transform: rotate(90deg);
}
.blog-full-content {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--border-light);
font-size: 14px;
color: var(--text-dark);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.blog-full-content h3 {
font-size: 15px;
margin-top: var(--space-sm);
}
/* ---------------------------------------------------------------------
SECTION: LEGAL PAGES (privacy.html, terms.html)
--------------------------------------------------------------------- */
.legal-content {
max-width: 760px;
margin: 0 auto;
}
.legal-content .updated-date {
font-size: 13px;
color: var(--text-muted);
margin-bottom: var(--space-lg);
}
.legal-content h2 {
font-size: 20px;
margin-top: var(--space-xl);
margin-bottom: var(--space-sm);
}
.legal-content h2:first-of-type {
margin-top: 0;
}
.legal-content p,
.legal-content li {
font-size: 15px;
color: var(--text-muted);
margin-bottom: var(--space-sm);
}
.legal-content ul {
padding-left: var(--space-md);
list-style: disc;
margin-bottom: var(--space-sm);
}
.legal-disclaimer {
background: var(--blue-tint);
border-left: 4px solid var(--primary-blue);
border-radius: 10px;
padding: var(--space-md);
font-size: 14px;
color: var(--dark-blue);
margin-bottom: var(--space-xl);
}
/* ---------------------------------------------------------------------
SECTION: 404 PAGE
--------------------------------------------------------------------- */
.error-page {
padding: var(--space-2xl) 0;
text-align: center;
}
.error-code {
font-family: var(--font-display);
font-size: 90px;
font-weight: 800;
color: var(--primary-blue);
line-height: 1;
margin-bottom: var(--space-sm);
}
.error-page h1 {
font-size: 24px;
margin-bottom: var(--space-sm);
}
.error-page p {
color: var(--text-muted);
max-width: 420px;
margin: 0 auto var(--space-lg);
}
.error-actions {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.error-droplet {
width: 100px;
height: 100px;
margin: 0 auto var(--space-md);
border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
background: var(--blue-tint);
display: flex;
align-items: center;
justify-content: center;
}
.error-droplet svg {
width: 44px;
height: 44px;
color: var(--primary-blue);
}
/* ---------------------------------------------------------------------
RESPONSIVE — Part 3 pages
--------------------------------------------------------------------- */
@media (min-width: 768px) {
.form-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-cards-grid {
grid-template-columns: repeat(3, 1fr);
}
.error-actions {
flex-direction: row;
justify-content: center;
}
}
/* ---------------------------------------------------------------------
SECTION: ILLUSTRATION IMAGES
Fills the placeholder containers (story, service detail, team, blog)
with the generated SVG illustrations, matching the same object-fit
treatment already used for .hero-media img and .gallery-item img.
--------------------------------------------------------------------- */
.story-media img,
.service-detail-media img,
.blog-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =====================================================================
UI/UX UPGRADE PASS — 2026 premium polish
All additions below are purely additive: new classes and states
layered on top of the existing design system. Nothing above this
line was restructured, so every existing selector still works.
===================================================================== */
/* ---------------------------------------------------------------------
SECTION: ACCESSIBILITY — skip link
--------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: -50px;
left: 12px;
z-index: 2000;
background: var(--primary-blue);
color: var(--white);
padding: 10px 18px;
border-radius: 8px;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 12px;
}
/* ---------------------------------------------------------------------
SECTION: HEADER — transparent-over-hero, premium hover, mobile stagger
--------------------------------------------------------------------- */
/* On the homepage only, the header starts transparent over the light
hero gradient, then becomes solid + shadowed once scrolled — smooth
crossfade instead of an abrupt cut. */
body.page-home .site-header {
transition: background-color var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}
body.page-home .site-header:not(.is-scrolled) {
background-color: transparent;
border-bottom-color: transparent;
}
/* Modern animated-underline hover for every nav link, not just the active one */
.main-nav a {
padding-bottom: 4px;
}
.main-nav a::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 0%;
height: 2px;
background: var(--accent-green);
border-radius: var(--radius-pill);
transition: width var(--transition-fast);
}
.main-nav a:hover::after {
width: 100%;
}
.main-nav a.active::after {
width: 100%;
}
/* Mobile menu: staggered fade-in for each link as the panel opens */
.mobile-nav li {
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-nav.is-open li {
opacity: 1;
transform: translateY(0);
}
.mobile-nav.is-open li:nth-child(1) { transition-delay: 0.03s; }
.mobile-nav.is-open li:nth-child(2) { transition-delay: 0.06s; }
.mobile-nav.is-open li:nth-child(3) { transition-delay: 0.09s; }
.mobile-nav.is-open li:nth-child(4) { transition-delay: 0.12s; }
.mobile-nav.is-open li:nth-child(5) { transition-delay: 0.15s; }
.mobile-nav.is-open li:nth-child(6) { transition-delay: 0.18s; }
.mobile-nav.is-open li:nth-child(7) { transition-delay: 0.21s; }
.mobile-nav.is-open li:nth-child(8) { transition-delay: 0.24s; }
.mobile-nav.is-open li:nth-child(9) { transition-delay: 0.27s; }
/* Icon hover: subtle rotate, matches the brief's "icons rotate slightly" */
.service-icon svg,
.why-us-item .icon-wrap svg,
.value-card .icon-wrap svg,
.contact-info-card .icon-wrap svg {
transition: transform var(--transition-fast);
}
.service-card:hover .service-icon svg,
.why-us-item:hover .icon-wrap svg,
.value-card:hover .icon-wrap svg,
.contact-info-card:hover .icon-wrap svg {
transform: rotate(-8deg) scale(1.08);
}
/* Card hover: scale to 1.03 as specified, layered on top of existing lift */
.service-card,
.pricing-card,
.value-card,
.blog-card,
.contact-info-card {
transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
}
.service-card:hover,
.blog-card:hover,
.contact-info-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: var(--shadow-lift);
}
/* Gallery/team image zoom-on-hover */
.gallery-item,
.team-photo,
.blog-card-media {
overflow: hidden;
}
.gallery-item img,
.team-photo img,
.blog-card-media img {
transition: transform 0.4s ease;
}
.gallery-item:hover img,
.team-card:hover .team-photo img,
.blog-card:hover .blog-card-media img {
transform: scale(1.08);
}
/* ---------------------------------------------------------------------
SECTION: SCROLL-REVEAL ANIMATIONS
Elements start slightly offset + transparent, then animate to their
natural position once they enter the viewport (see initScrollReveal
in js/script.js). Respects prefers-reduced-motion automatically via
the existing global media query at the top of this file.
--------------------------------------------------------------------- */
.reveal-up {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left {
opacity: 0;
transform: translateX(-24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-zoom {
opacity: 0;
transform: scale(0.92);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-up.is-revealed,
.reveal-left.is-revealed,
.reveal-zoom.is-revealed {
opacity: 1;
transform: none;
}
/* ---------------------------------------------------------------------
SECTION: FOOTER — gradient top border, icon hover polish
--------------------------------------------------------------------- */
.site-footer {
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--primary-blue), var(--accent-green), var(--primary-blue));
background-size: 200% 100%;
animation: footer-gradient-shift 6s linear infinite;
}
@keyframes footer-gradient-shift {
0% { background-position: 0% 0; }
100% { background-position: 200% 0; }
}
.footer-social a {
transition: background var(--transition-fast), transform var(--transition-fast);
}
.footer-social a:hover {
transform: translateY(-3px) scale(1.08);
}
/* ---------------------------------------------------------------------
SECTION: BUTTON HOVER — gradient sweep + lift (premium feel)
--------------------------------------------------------------------- */
.btn-primary {
background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
background-size: 160% 160%;
background-position: 0% 0%;
transition: background-position var(--transition-medium), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary:hover {
background-position: 100% 100%;
transform: translateY(-2px);
}
/* ---------------------------------------------------------------------
SECTION: ANIMATED COUNTERS (trust-strip stats)
The number itself is unchanged in the HTML — JS reads it once, then
animates from 0 up to it when the stat scrolls into view.
--------------------------------------------------------------------- */
.trust-stat strong {
display: inline-block;
font-variant-numeric: tabular-nums;
}
/* Respect reduced-motion users: skip reveal/zoom animation states entirely */
@media (prefers-reduced-motion: reduce) {
.reveal-up,
.reveal-left,
.reveal-zoom {
opacity: 1;
transform: none;
}
}
/* ---------------------------------------------------------------------
SECTION: BEFORE/AFTER COMPARISON SLIDER (gallery.html)
Two images stacked exactly on top of each other; the "after" image is
clipped via a CSS custom property driven by a range input, so
dragging reveals more/less of it. Falls back gracefully to two plain
stacked images with no JS.
--------------------------------------------------------------------- */
.ba-slider {
--ba-position: 50%;
position: relative;
width: 100%;
aspect-ratio: 5 / 4;
border-radius: var(--radius-droplet);
overflow: hidden;
box-shadow: var(--shadow-soft);
touch-action: pan-y;
max-width: 560px;
margin: 0 auto;
}
.ba-slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
pointer-events: none;
}
.ba-slider .ba-after {
clip-path: inset(0 calc(100% - var(--ba-position)) 0 0);
}
.ba-slider .ba-label {
position: absolute;
top: 14px;
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--radius-pill);
color: var(--white);
z-index: 2;
pointer-events: none;
}
.ba-slider .ba-label-before {
right: 14px;
background: var(--dark-blue);
}
.ba-slider .ba-label-after {
left: 14px;
background: var(--accent-green);
}
.ba-handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--ba-position);
width: 0;
z-index: 3;
transform: translateX(-50%);
}
.ba-handle::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
background: var(--white);
transform: translateX(-50%);
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.ba-handle-grip {
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--white);
box-shadow: var(--shadow-lift);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-blue);
pointer-events: none;
}
.ba-handle-grip svg {
width: 20px;
height: 20px;
}
.ba-range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
z-index: 4;
-webkit-appearance: none;
appearance: none;
}
.ba-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 100%;
height: 100%;
}
.ba-caption {
text-align: center;
font-size: 13px;
color: var(--text-muted);
margin-top: var(--space-sm);
}
/* =====================================================================
HOMEPAGE PREMIUM REDESIGN — ADDITIONS
Everything below is scoped to homepage-only classes (hero-home,
about-preview, services-grid-img, why-us-section-bg, process-section-bg,
gallery-masonry, stats-section, contact-preview, cta-band-image, etc.)
so nothing here changes the look of about.html, services.html, gallery.html,
pricing.html, faq.html, blog.html, booking.html, or contact.html.
Search "HOMEPAGE PREMIUM REDESIGN" sub-headers below to jump around.
===================================================================== */
/* ---------------------------------------------------------------------
HOMEPAGE HERO — full-width background image/video + dark overlay
--------------------------------------------------------------------- */
.hero-home {
background: var(--dark-blue);
padding: 0;
min-height: 92vh;
display: flex;
align-items: center;
}
@media (max-width: 899px) {
.hero-home {
/* Reserve space for the fixed bottom action bar so the hero's own
content (including the rating card) never renders underneath it. */
min-height: calc(100vh - var(--bottom-bar-height));
}
}
.hero-home::before {
display: none; /* remove the light droplet blob — replaced by the photo */
}
.hero-bg-video,
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-bg-video {
display: none; /* shown only once a real video source loads successfully */
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(6, 42, 109, 0.78) 0%, rgba(6, 42, 109, 0.62) 45%, rgba(6, 42, 109, 0.88) 100%);
}
.hero-home .hero-home-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--space-xl);
padding: calc(var(--space-2xl) + 20px) 0 var(--space-2xl);
width: 100%;
}
.hero-home .hero-copy {
max-width: 620px;
}
.hero-badge-glass {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--white);
animation: fade-up-in 0.8s ease both;
}
.hero-home h1 {
color: var(--white);
font-size: 38px;
animation: fade-up-in 0.8s ease 0.1s both;
}
.hero-home h1 .highlight {
background: linear-gradient(135deg, #6FB6FF, #9CE6B6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-home p.hero-subtext {
color: rgba(255, 255, 255, 0.88);
max-width: 520px;
font-size: 17px;
animation: fade-up-in 0.8s ease 0.18s both;
}
.hero-cta-row {
flex-direction: row;
flex-wrap: wrap;
animation: fade-up-in 0.8s ease 0.26s both;
}
.btn-outline-glass {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-color: rgba(255, 255, 255, 0.4);
color: var(--white);
}
.btn-outline-glass:hover {
background: rgba(255, 255, 255, 0.18);
border-color: var(--white);
color: var(--white);
}
.btn-glow {
position: relative;
box-shadow: 0 0 0 rgba(15, 91, 211, 0.5);
animation: btn-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes btn-glow-pulse {
0%, 100% { box-shadow: 0 12px 28px rgba(15, 91, 211, 0.35); }
50% { box-shadow: 0 12px 40px rgba(15, 91, 211, 0.65); }
}
.hero-home .hero-trust-row {
animation: fade-up-in 0.8s ease 0.34s both;
}
.hero-home .hero-trust-item {
color: var(--white);
background: rgba(255, 255, 255, 0.08);
padding: 6px 12px;
border-radius: var(--radius-pill);
}
.hero-rating-card {
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 2px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius-droplet);
padding: var(--space-md) var(--space-lg);
color: var(--white);
animation: fade-up-in 0.9s ease 0.4s both;
box-shadow: var(--shadow-soft);
}
.hero-rating-stars {
color: #FFC94A;
letter-spacing: 2px;
font-size: 15px;
}
.hero-rating-score {
font-family: var(--font-display);
font-size: 30px;
font-weight: 800;
}
.hero-rating-score span {
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
}
.hero-rating-card p {
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
}
.hero-scroll-cue {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 26px;
height: 42px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius-pill);
display: none;
}
.hero-scroll-cue span {
display: block;
width: 4px;
height: 8px;
background: var(--white);
border-radius: var(--radius-pill);
margin: 6px auto 0;
animation: scroll-cue-move 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-move {
0% { transform: translateY(0); opacity: 1; }
70% { transform: translateY(14px); opacity: 0; }
100% { transform: translateY(0); opacity: 0; }
}
@keyframes fade-up-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 900px) {
.hero-home .hero-home-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-2xl);
}
.hero-home h1 { font-size: 48px; }
.hero-scroll-cue { display: block; }
}
/* ---------------------------------------------------------------------
ABOUT PREVIEW
--------------------------------------------------------------------- */
.about-preview-grid {
display: flex;
flex-direction: column;
gap: var(--space-xl);
align-items: center;
}
.about-preview-media {
position: relative;
width: 100%;
min-width: 0;
display: flex;
gap: 10px;
}
.about-preview-media-main {
flex: 1.4;
min-width: 0;
border-radius: var(--radius-droplet);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.about-preview-media-main img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.6s ease;
}
.about-preview-media-main:hover img {
transform: scale(1.06);
}
.about-preview-media-stack {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.about-preview-media-stack img {
width: 100%;
height: 100%;
min-width: 0;
flex: 1;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-standard);
box-shadow: var(--shadow-soft);
transition: transform 0.5s ease, filter 0.5s ease;
}
.about-preview-media-stack img:hover {
transform: scale(1.06);
filter: brightness(1.05);
}
.about-preview-badge {
position: absolute;
bottom: var(--space-md);
left: var(--space-md);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--radius-standard);
padding: 10px 18px;
box-shadow: var(--shadow-soft);
}
.about-preview-badge strong {
display: block;
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
color: var(--primary-blue);
line-height: 1.1;
}
.about-preview-badge span {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
}
.about-preview-points {
display: flex;
flex-direction: column;
gap: 10px;
margin: var(--space-md) 0 var(--space-lg);
}
.about-preview-points li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: var(--text-dark);
}
.about-preview-points svg {
width: 20px;
height: 20px;
color: var(--accent-green);
flex-shrink: 0;
}
@media (max-width: 480px) {
.about-preview-media {
flex-direction: column;
}
.about-preview-media-stack {
flex-direction: row;
}
}
@media (min-width: 900px) {
.about-preview-grid {
flex-direction: row;
align-items: center;
}
.about-preview-media,
.about-preview-copy {
flex: 1;
}
}
/* ---------------------------------------------------------------------
SERVICES — image cards with dual CTAs
--------------------------------------------------------------------- */
.services-grid-img {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.services-grid-img .service-card {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease, filter 0.5s ease;
}
.services-grid-img .service-card:hover .card-image img {
transform: scale(1.1);
filter: brightness(0.92);
}
.card-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,42,109,0) 50%, rgba(6,42,109,0.55) 100%);
}
.card-image-icon {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-card);
transition: transform var(--transition-fast);
}
.services-grid-img .service-card:hover .card-image-icon {
transform: rotate(-8deg) scale(1.1);
}
.card-image-icon svg {
width: 20px;
height: 20px;
color: var(--primary-blue);
}
/* Reused photos get different focal points/crops so they don't look identical */
.card-image-crop-a img { object-position: 75% 35%; }
.card-image-crop-b img { object-position: 20% 60%; }
.card-image-crop-c img { object-position: 60% 80%; }
.service-card-body {
padding: var(--space-lg);
display: flex;
flex-direction: column;
flex: 1;
}
.service-card-body p {
flex: 1;
}
.service-card-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
.btn-sm {
padding: 9px 18px;
font-size: 13px;
}
/* ---------------------------------------------------------------------
WHY CHOOSE US — background image + glassmorphism cards
--------------------------------------------------------------------- */
.why-us-section-bg {
position: relative;
overflow: hidden;
}
.why-us-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.why-us-bg-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(135deg, rgba(6,42,109,0.94) 0%, rgba(15,91,211,0.88) 100%);
}
.why-us-section-bg .container {
position: relative;
z-index: 2;
}
.section-header-light h2,
.section-header-light p {
color: var(--white);
}
.section-header-light p {
color: rgba(255, 255, 255, 0.8);
}
.eyebrow-glass {
background: rgba(255, 255, 255, 0.15);
color: var(--white);
}
.why-us-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-standard);
transition: transform var(--transition-medium), background var(--transition-medium), border-color var(--transition-medium);
}
.why-us-glass:hover {
transform: translateY(-6px) scale(1.02);
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.35);
}
.why-us-glass .icon-wrap {
background: rgba(255, 255, 255, 0.18);
}
.why-us-glass .icon-wrap svg {
color: var(--white);
}
.why-us-glass h3,
.why-us-glass p {
color: var(--white);
}
.why-us-glass p {
color: rgba(255, 255, 255, 0.78);
}
/* ---------------------------------------------------------------------
PROCESS — connecting timeline line + subtle background tint
--------------------------------------------------------------------- */
.process-section-bg {
position: relative;
background: linear-gradient(180deg, var(--bg-light) 0%, var(--white) 100%);
}
.steps-list-timeline {
position: relative;
max-width: 640px;
margin: 0 auto;
}
.steps-list-timeline::before {
content: '';
position: absolute;
left: 21px;
top: 12px;
bottom: 12px;
width: 2px;
background: repeating-linear-gradient(180deg, var(--border-light) 0, var(--border-light) 6px, transparent 6px, transparent 12px);
z-index: 0;
}
.steps-list-timeline .step-item {
position: relative;
z-index: 1;
}
.steps-list-timeline .step-number {
box-shadow: 0 0 0 6px var(--white);
transition: transform var(--transition-medium);
}
.steps-list-timeline .step-item:hover .step-number {
transform: scale(1.1);
background: var(--accent-green);
}
/* ---------------------------------------------------------------------
GALLERY MASONRY (homepage preview)
--------------------------------------------------------------------- */
.gallery-masonry {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px;
grid-auto-flow: dense;
}
.gallery-masonry .gallery-item {
position: relative;
aspect-ratio: auto;
cursor: pointer;
background: var(--bg-light);
}
.gallery-masonry .gallery-item:nth-child(6n+1) { grid-row: span 2; }
.gallery-masonry .gallery-item:nth-child(6n+4) { grid-row: span 2; }
.gallery-item-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: var(--space-sm);
background: linear-gradient(180deg, rgba(6,42,109,0) 55%, rgba(6,42,109,0.75) 100%);
opacity: 0;
transition: opacity var(--transition-medium);
}
.gallery-masonry .gallery-item:hover .gallery-item-overlay {
opacity: 1;
}
.gallery-item-overlay span {
color: var(--white);
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
transform: translateY(6px);
transition: transform var(--transition-medium);
}
.gallery-masonry .gallery-item:hover .gallery-item-overlay span {
transform: translateY(0);
}
.lightbox-inner-content img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: var(--radius-standard);
}
/* ---------------------------------------------------------------------
STATISTICS — animated counters band
--------------------------------------------------------------------- */
.stats-section {
background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue-dark) 100%);
position: relative;
overflow: hidden;
}
.stats-section::before {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
border-radius: 50%;
}
.stats-grid {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
text-align: center;
}
.stat-counter strong {
display: block;
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
color: var(--white);
font-variant-numeric: tabular-nums;
}
.stat-counter span {
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ---------------------------------------------------------------------
TESTIMONIAL NAV ARROWS
--------------------------------------------------------------------- */
.testimonial-nav {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: var(--space-md);
}
.testimonial-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-blue);
transition: all var(--transition-fast);
}
.testimonial-arrow:hover {
background: var(--primary-blue);
color: var(--white);
transform: scale(1.08);
}
.testimonial-arrow svg {
width: 18px;
height: 18px;
}
/* ---------------------------------------------------------------------
CONTACT PREVIEW
--------------------------------------------------------------------- */
.contact-preview-grid {
display: flex;
flex-direction: column;
gap: var(--space-xl);
align-items: center;
margin-bottom: var(--space-lg);
}
.contact-preview-media {
width: 100%;
border-radius: var(--radius-droplet);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.contact-preview-media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.6s ease;
}
.contact-preview-media:hover img {
transform: scale(1.05);
}
.contact-preview-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: var(--space-md) 0 var(--space-lg);
}
.contact-preview-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
}
.contact-preview-list svg {
width: 20px;
height: 20px;
color: var(--primary-blue);
flex-shrink: 0;
}
.contact-preview-map {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
background: var(--blue-tint);
border: 1px dashed var(--primary-blue);
border-radius: var(--radius-standard);
padding: var(--space-lg);
color: var(--text-muted);
font-size: 14px;
}
.contact-preview-map svg {
width: 22px;
height: 22px;
color: var(--primary-blue);
flex-shrink: 0;
}
.contact-preview-map a {
color: var(--primary-blue);
font-weight: 600;
text-decoration: underline;
}
@media (min-width: 900px) {
.contact-preview-grid {
flex-direction: row;
align-items: center;
}
.contact-preview-media,
.contact-preview-copy {
flex: 1;
}
}
/* ---------------------------------------------------------------------
FINAL CTA — full-width background image variant
--------------------------------------------------------------------- */
.cta-band-image {
position: relative;
overflow: hidden;
padding: 0;
}
.cta-band-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.cta-band-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(135deg, rgba(6,42,109,0.92) 0%, rgba(15,91,211,0.82) 100%);
}
.cta-band-content {
position: relative;
z-index: 2;
padding: var(--space-2xl) var(--space-lg);
}
.cta-band-image .cta-band-buttons {
flex-direction: column;
}
@media (min-width: 640px) {
.cta-band-image .cta-band-buttons {
flex-direction: row;
justify-content: center;
}
}
/* ---------------------------------------------------------------------
HOMEPAGE RESPONSIVE — tablet/desktop refinements
--------------------------------------------------------------------- */
@media (min-width: 768px) {
.services-grid-img {
grid-template-columns: repeat(2, 1fr);
}
.why-us-glass:nth-child(1) { transition-delay: 0s; }
}
@media (min-width: 1024px) {
.services-grid-img {
grid-template-columns: repeat(3, 1fr);
}
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
.gallery-masonry {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 640px) {
.hero-cta-row {
flex-wrap: nowrap;
}
}
/* =====================================================================
HOMEPAGE FINAL POLISH PASS — header fix, button system, floating
actions, hero text stagger, social hover states, card glow.
===================================================================== */
/* ---------------------------------------------------------------------
FIX: header no longer goes fully transparent pre-scroll — dark logo/nav
text was unreadable over the new photo hero. Always-on frosted glass
keeps it premium and legible at any scroll position.
--------------------------------------------------------------------- */
body.page-home .site-header:not(.is-scrolled) {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: rgba(255, 255, 255, 0.35);
}
.site-header.is-scrolled {
background-color: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 8px 30px rgba(6, 42, 109, 0.1);
}
/* ---------------------------------------------------------------------
FIX: header CTA button vertical-alignment mismatch — the outline
button's 2px border was adding extra rendered height vs. the solid
buttons, throwing off the centered row. Padding is trimmed to match.
--------------------------------------------------------------------- */
.btn-outline {
padding: 12px 24px;
}
/* ---------------------------------------------------------------------
HEADER CTA — premium spacing + consistent button sizing
--------------------------------------------------------------------- */
.header-cta {
align-items: center;
gap: 10px;
}
.header-cta .btn {
padding: 11px 20px;
font-size: 14px;
}
.header-cta .btn-outline {
padding: 9px 18px; /* 2px less each side to offset the 2px border, matching the solid buttons' rendered height */
}
/* ---------------------------------------------------------------------
BUTTON SYSTEM — gradients, shine-sweep hover, ripple support
--------------------------------------------------------------------- */
.btn {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
background-size: 160% 160%;
background-position: 0% 0%;
transition: background-position 0.5s ease, transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary:hover {
background-color: transparent;
background-position: 100% 100%;
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(15, 91, 211, 0.4);
}
.btn-whatsapp {
background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dark) 100%);
background-size: 160% 160%;
background-position: 0% 0%;
transition: background-position 0.5s ease, transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-whatsapp:hover {
background-color: transparent;
background-position: 100% 100%;
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(24, 165, 88, 0.4);
}
.btn-outline:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-soft);
}
/* Diagonal shine sweep on hover, layered above the ripple */
.btn::before {
content: '';
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
z-index: 1;
pointer-events: none;
}
.btn:hover::before {
left: 130%;
}
.btn > * {
position: relative;
z-index: 2;
}
/* Ripple span injected by JS on click — expands and fades */
.btn-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
transform: scale(0);
animation: btn-ripple-anim 0.6s ease-out;
pointer-events: none;
z-index: 1;
}
@keyframes btn-ripple-anim {
to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn::before { display: none; }
.btn-ripple { display: none; }
}
/* ---------------------------------------------------------------------
FLOATING ACTIONS — desktop vertical stack (Call / WhatsApp / Back to Top)
--------------------------------------------------------------------- */
.floating-actions {
position: fixed;
right: var(--space-md);
bottom: var(--space-lg);
z-index: 998;
display: none;
flex-direction: column;
gap: 12px;
}
.float-btn {
position: relative;
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
color: var(--primary-blue);
box-shadow: var(--shadow-card);
border: 1px solid var(--border-light);
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.float-btn svg {
width: 22px;
height: 22px;
}
.float-btn:hover {
transform: translateY(-4px) scale(1.06);
box-shadow: var(--shadow-lift);
}
.float-btn-call:hover {
background: var(--primary-blue);
color: var(--white);
}
.float-btn-tooltip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(6px);
background: var(--dark-blue);
color: var(--white);
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: var(--radius-standard);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.float-btn:hover .float-btn-tooltip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* The WhatsApp bubble keeps its own green styling + pulse when nested here */
.floating-actions .whatsapp-float {
position: static;
width: 52px;
height: 52px;
box-shadow: var(--shadow-card);
}
.back-to-top {
opacity: 0;
transform: translateY(12px) scale(0.9);
pointer-events: none;
transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.back-to-top.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.back-to-top:hover {
background: var(--dark-blue);
color: var(--white);
}
@media (min-width: 900px) {
.floating-actions {
display: flex;
}
/* Standalone bubble is replaced by the stacked group above */
body > .whatsapp-float.float-btn-whatsapp {
display: none;
}
}
/* ---------------------------------------------------------------------
MOBILE BOTTOM BAR — now 3 actions (Call / WhatsApp / Book Now)
--------------------------------------------------------------------- */
.bottom-action-bar .book-action {
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
}
.bottom-action-bar a:active {
filter: brightness(0.92);
}
/* ---------------------------------------------------------------------
SOCIAL ICONS — brand-color hover states (footer)
--------------------------------------------------------------------- */
.footer-social a {
transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.footer-social a:hover {
transform: translateY(-4px) scale(1.08);
}
.footer-social .social-facebook:hover {
background: #1877f2;
box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4);
}
.footer-social .social-instagram:hover {
background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
box-shadow: 0 8px 20px rgba(221, 42, 123, 0.4);
}
.footer-social .social-whatsapp:hover {
background: var(--accent-green);
box-shadow: 0 8px 20px rgba(24, 165, 88, 0.4);
}
/* ---------------------------------------------------------------------
HERO HEADING — word-by-word stagger (spans injected by JS)
--------------------------------------------------------------------- */
.hero-home h1 .word {
display: inline-block;
opacity: 0;
transform: translateY(24px);
animation: word-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* The gradient "highlight" phrase clips its background through its own
text glyphs — once word-wrapped, that background has to be re-applied
on each child word span so the gradient still shows through. */
.hero-home h1 .highlight .word {
background: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes word-rise {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-home h1 .word {
opacity: 1;
transform: none;
animation: none;
}
}
/* ---------------------------------------------------------------------
CARDS — border-glow hover accent (adds to existing scale/shadow polish)
--------------------------------------------------------------------- */
.service-card,
.pricing-card,
.why-us-item {
border: 1px solid transparent;
transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
}
.service-card:hover,
.pricing-card:hover {
border-color: rgba(15, 91, 211, 0.25);
}
.why-us-glass:hover {
border-color: rgba(255, 255, 255, 0.45);
}
/* ---------------------------------------------------------------------
HERO — richer overlay for stronger left-side text contrast
--------------------------------------------------------------------- */
.hero-overlay {
background:
linear-gradient(100deg, rgba(6, 42, 109, 0.92) 0%, rgba(6, 42, 109, 0.72) 42%, rgba(6, 42, 109, 0.5) 68%, rgba(6, 42, 109, 0.75) 100%),
linear-gradient(180deg, rgba(6, 42, 109, 0.3) 0%, rgba(6, 42, 109, 0.1) 40%, rgba(6, 42, 109, 0.55) 100%);
}
/* ---------------------------------------------------------------------
HERO — mobile spacing refinement
--------------------------------------------------------------------- */
@media (max-width: 480px) {
.hero-home h1 {
font-size: 30px;
}
.hero-cta-row .btn {
width: 100%;
}
.hero-cta-row {
width: 100%;
}
.hero-rating-card {
align-self: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 10px;
padding: 12px 20px;
margin-top: 8px;
margin-bottom: 4px;
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3);
}
.hero-rating-stars {
font-size: 14px;
}
.hero-rating-score {
font-size: 19px;
white-space: nowrap;
}
.hero-rating-card p {
font-size: 12px;
line-height: 1.2;
padding-left: 10px;
margin: 0;
border-left: 1px solid rgba(255, 255, 255, 0.3);
max-width: 90px;
}
}
/* =====================================================================
TRUST & CERTIFICATION SECTION (homepage, directly below hero)
===================================================================== */
.trust-cert-section {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--blue-tint) 0%, var(--bg-light) 100%);
}
.trust-cert-pattern {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.5;
background-image: radial-gradient(circle, rgba(15, 91, 211, 0.14) 1.5px, transparent 1.5px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
}
.trust-cert-section .container {
position: relative;
z-index: 1;
}
/* --- Main FBR certification card --- */
.trust-cert-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md);
max-width: 760px;
margin: 0 auto var(--space-xl);
padding: var(--space-xl) var(--space-lg);
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: var(--radius-droplet);
box-shadow: var(--shadow-soft);
transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
}
.trust-cert-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
border-color: rgba(15, 91, 211, 0.35);
}
.trust-cert-icon {
flex-shrink: 0;
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
box-shadow: 0 10px 26px rgba(15, 91, 211, 0.35);
transition: transform var(--transition-medium);
}
.trust-cert-card:hover .trust-cert-icon {
transform: scale(1.08) rotate(-6deg);
}
.trust-cert-icon svg {
width: 34px;
height: 34px;
color: var(--white);
}
.trust-cert-copy h3 {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--dark-blue);
margin-bottom: 10px;
}
.trust-cert-flag {
font-size: 24px;
line-height: 1;
}
.trust-cert-copy p {
color: var(--text-muted);
font-size: 15px;
line-height: 1.7;
max-width: 60ch;
margin: 0 auto;
}
/* --- Trust badge pill row --- */
.trust-badge-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 980px;
margin: 0 auto;
}
.trust-badge-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-pill);
font-size: 13.5px;
font-weight: 600;
color: var(--text-dark);
box-shadow: var(--shadow-card);
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.trust-badge-pill svg {
width: 17px;
height: 17px;
color: var(--accent-green);
flex-shrink: 0;
}
.trust-badge-pill:hover {
transform: translateY(-4px) scale(1.03);
border-color: var(--primary-blue);
background: var(--blue-tint);
box-shadow: var(--shadow-lift);
}
.trust-badge-pill:hover svg {
color: var(--primary-blue);
}
@media (min-width: 640px) {
.trust-cert-card {
flex-direction: row;
text-align: left;
padding: var(--space-xl) var(--space-2xl);
}
.trust-cert-copy h3 {
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.trust-cert-card {
padding: var(--space-lg) var(--space-md);
}
.trust-cert-copy h3 {
font-size: 19px;
}
.trust-badge-pill {
font-size: 12.5px;
padding: 10px 16px;
}
}
/* --- Hero FBR badge (highlighted variant among hero-trust-item chips) --- */
.hero-home .hero-trust-item-fbr {
background: linear-gradient(135deg, rgba(22, 163, 74, 0.32), rgba(22, 163, 74, 0.16));
border: 1px solid rgba(90, 219, 149, 0.55);
font-weight: 700;
}
.hero-trust-item-fbr svg {
color: #5EE29B;
}