From 5cfcea9cafa0d770a2114739f19446932cf6360b Mon Sep 17 00:00:00 2001 From: Matthias Date: Mon, 25 May 2026 11:59:10 +0200 Subject: [PATCH] refactor: update sections for improved layout and styling - Revamp Contact, FinalCta, Hero, Hours, SalonPromise, Services, SiteHeader, Trust components to use a new v2 design system. - Enhance responsiveness and accessibility across sections. - Introduce new styles for better visual hierarchy and user experience. - Integrate review data into Trust section and update site content structure. --- src/components/sections/Contact.astro | 147 +- src/components/sections/EditorialImage.astro | 50 + src/components/sections/FinalCta.astro | 50 +- src/components/sections/Hero.astro | 205 ++- src/components/sections/Hours.astro | 48 +- src/components/sections/Reviews.astro | 177 +++ src/components/sections/SalonPromise.astro | 85 +- src/components/sections/Services.astro | 71 +- src/components/sections/SiteHeader.astro | 279 +++- src/components/sections/Team.astro | 138 ++ src/components/sections/Trust.astro | 56 +- src/content/site-content.ts | 34 + src/pages/index.astro | 1479 +----------------- src/scripts/mobile-nav.ts | 36 + src/scripts/scroll-reveal.ts | 41 + src/styles/global.css | 32 + src/styles/home.css | 323 ++++ 17 files changed, 1716 insertions(+), 1535 deletions(-) create mode 100644 src/components/sections/EditorialImage.astro create mode 100644 src/components/sections/Reviews.astro create mode 100644 src/components/sections/Team.astro create mode 100644 src/scripts/mobile-nav.ts create mode 100644 src/scripts/scroll-reveal.ts create mode 100644 src/styles/home.css diff --git a/src/components/sections/Contact.astro b/src/components/sections/Contact.astro index c62b390..55a6dc3 100644 --- a/src/components/sections/Contact.astro +++ b/src/components/sections/Contact.astro @@ -2,32 +2,147 @@ import { siteContent } from "@/content/site-content" --- -
-
-

Kontakt & Anfahrt

+
+
+

Kontakt & Anfahrt

Mitten in Crimmitschau.

-

Der schnellste Weg zum Termin bleibt ein kurzer Anruf im Salon.

+

Der schnellste Weg zum Termin: ein kurzer Anruf.

-
-
- {siteContent.business.name} - {siteContent.business.address.street} - {siteContent.business.address.postalCode} {siteContent.business.address.city} -
+
+
+
+ {siteContent.business.name} + {siteContent.business.address.street} + {siteContent.business.address.postalCode} {siteContent.business.address.city} +
-
- - Telefon +
+ Friseur-Werkzeuge: Schere und Kamm auf einer Marmor-Arbeitsfläche +
Detail & Sorgfalt
+
+
+ +
+ + Telefon {siteContent.business.phone.display} - - E-Mail + + E-Mail {siteContent.business.email} - + Route über Google Maps
+ + diff --git a/src/components/sections/EditorialImage.astro b/src/components/sections/EditorialImage.astro new file mode 100644 index 0000000..027b820 --- /dev/null +++ b/src/components/sections/EditorialImage.astro @@ -0,0 +1,50 @@ +--- +--- + +
+ Warm beleuchteter Salon-Innenraum mit Friseurstühlen und Spiegeln +
Atmosphäre im Salon
+
+ + diff --git a/src/components/sections/FinalCta.astro b/src/components/sections/FinalCta.astro index 0ae5f4f..db9afc2 100644 --- a/src/components/sections/FinalCta.astro +++ b/src/components/sections/FinalCta.astro @@ -2,12 +2,54 @@ import { siteContent } from "@/content/site-content" --- -
-

Bereit für den nächsten Schnitt?

+
+

Bereit für den nächsten Schnitt?

Kurz anrufen, Termin abstimmen, vorbeikommen.

-
- +
+ {siteContent.business.phone.display}
+ + diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro index 4ad2541..223eda5 100644 --- a/src/components/sections/Hero.astro +++ b/src/components/sections/Hero.astro @@ -2,41 +2,190 @@ import { siteContent } from "@/content/site-content" --- -
-
-

{siteContent.hero.eyebrow}

+
+ +
+

{siteContent.hero.eyebrow}

{siteContent.hero.title}

-

{siteContent.hero.intro}

+

{siteContent.hero.intro}

-
- +
+ {siteContent.cta.primary.label} - + {siteContent.cta.secondary.label}
- -
-
-
Adresse
-
{siteContent.business.address.display}
-
-
-
Telefon
-
{siteContent.business.phone.display}
-
-
-
{siteContent.hours[0].day}
-
{siteContent.hours[0].time}
-
-
-
- {siteContent.hero.image.alt} -
- {siteContent.hero.image.credit} -
-
+
+
+
Adresse
+
{siteContent.business.address.display}
+
+
+
Telefon
+
{siteContent.business.phone.display}
+
+
+
{siteContent.hours[0].day}
+
{siteContent.hours[0].time}
+
+
+ + diff --git a/src/components/sections/Hours.astro b/src/components/sections/Hours.astro index ecf290c..c27a6da 100644 --- a/src/components/sections/Hours.astro +++ b/src/components/sections/Hours.astro @@ -2,17 +2,17 @@ import { siteContent } from "@/content/site-content" --- -
-
-

Öffnungszeiten

+
+
+

Öffnungszeiten

Planbar von Montag bis Samstag.

Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.

-
+
{ siteContent.hours.map((entry) => ( -
+
{entry.day}
@@ -20,3 +20,41 @@ import { siteContent } from "@/content/site-content" }
+ + diff --git a/src/components/sections/Reviews.astro b/src/components/sections/Reviews.astro new file mode 100644 index 0000000..9172b88 --- /dev/null +++ b/src/components/sections/Reviews.astro @@ -0,0 +1,177 @@ +--- +import { siteContent } from "@/content/site-content" + +function renderStars(rating: number) { + return Array.from({ length: 5 }, (_, i) => + i < rating + ? '' + : '' + ).join("") +} +--- + +
+
+

Kundenstimmen

+

Das sagen unsere Gäste.

+

Echte Bewertungen von Google – ungefiltert und ehrlich.

+
+ +
+ { + siteContent.reviews.map((review) => ( +
+
+
+ {review.author.split(" ").map(n => n[0]).join("").substring(0, 2)} +
+
+

{review.author}

+

{review.date}

+
+
+
+
+ + {review.text} +
+
+ )) + } +
+ +
+ + Alle {siteContent.reviewSummary.count} auf Google ansehen + + +
+
+ + diff --git a/src/components/sections/SalonPromise.astro b/src/components/sections/SalonPromise.astro index 3d818bb..de0ead5 100644 --- a/src/components/sections/SalonPromise.astro +++ b/src/components/sections/SalonPromise.astro @@ -2,17 +2,17 @@ import { siteContent } from "@/content/site-content" --- -
-
-

Salonversprechen

+
+
+

Salonversprechen

Haare dürfen leicht aussehen, auch wenn dahinter Präzision steckt.

-
+
{ siteContent.promise.map((item, index) => ( -
- {String(index + 1).padStart(2, "0")} +
+ {String(index + 1).padStart(2, "0")}

{item.title}

{item.text}

@@ -20,3 +20,76 @@ import { siteContent } from "@/content/site-content" }
+ + diff --git a/src/components/sections/Services.astro b/src/components/sections/Services.astro index 7daf7d2..9d8a5e6 100644 --- a/src/components/sections/Services.astro +++ b/src/components/sections/Services.astro @@ -2,18 +2,18 @@ import { siteContent } from "@/content/site-content" --- -
-
-

Leistungen

+
+
+

Leistungen

Alles, was ein guter Salonbesuch braucht.

-

Die Auswahl bleibt bewusst klar. Details, Wünsche und Termine werden am besten direkt telefonisch besprochen.

+

Fokus auf das Wesentliche: Ihr Look, Ihr Typ, Ihr Termin. Details und Wünsche besprechen wir am besten kurz am Telefon.

-
+
{ siteContent.services.map((service, index) => ( -
- {String(index + 1).padStart(2, "0")} +
+ {String(index + 1).padStart(2, "0")}

{service.title}

{service.text}

@@ -21,3 +21,60 @@ import { siteContent } from "@/content/site-content" }
+ + diff --git a/src/components/sections/SiteHeader.astro b/src/components/sections/SiteHeader.astro index 6a367a4..d431329 100644 --- a/src/components/sections/SiteHeader.astro +++ b/src/components/sections/SiteHeader.astro @@ -3,12 +3,14 @@ import { siteContent } from "@/content/site-content" const navItems = [ { label: "Leistungen", href: "#leistungen" }, + { label: "Team", href: "#team" }, + { label: "Bewertungen", href: "#bewertungen" }, { label: "Zeiten", href: "#zeiten" }, { label: "Kontakt", href: "#kontakt" }, ] --- -
+
H @@ -18,16 +20,271 @@ const navItems = [ - - Anrufen - +
+ + + Anrufen + +
+ + + + + + diff --git a/src/components/sections/Team.astro b/src/components/sections/Team.astro new file mode 100644 index 0000000..969a08a --- /dev/null +++ b/src/components/sections/Team.astro @@ -0,0 +1,138 @@ +--- +import { siteContent } from "@/content/site-content" +--- + +
+
+

Unser Team

+

Die Menschen hinter den Scheren.

+
+ +
+ Eine Friseurin bei der Arbeit mit Schere +
Handwerk mit Präzision
+
+ +
+ { + siteContent.team.map((member) => ( +
+
+ {member.initials} +
+

{member.name}

+

{member.role}

+

{member.bio}

+
+ )) + } +
+
+ + diff --git a/src/components/sections/Trust.astro b/src/components/sections/Trust.astro index 4e4da7b..c6d46f4 100644 --- a/src/components/sections/Trust.astro +++ b/src/components/sections/Trust.astro @@ -2,13 +2,61 @@ import { siteContent } from "@/content/site-content" --- -
-
-

Lokales Vertrauen

+
+
+

Lokales Vertrauen

{siteContent.reviewSummary.rating}

-

+

{siteContent.reviewSummary.count} {siteContent.reviewSummary.text}

+ + diff --git a/src/content/site-content.ts b/src/content/site-content.ts index 6fbcf3c..08c0f8a 100644 --- a/src/content/site-content.ts +++ b/src/content/site-content.ts @@ -52,7 +52,14 @@ export type SiteContent = { rating: string count: string text: string + url: string } + reviews: Array<{ + author: string + rating: number + text: string + date: string + }> team: Array<{ name: string role: string @@ -147,7 +154,34 @@ export const siteContent = { rating: "4,8 / 5", count: "89 Google-Bewertungen", text: "Kunden bewerten uns bei Google mit 4,8 von 5 Sternen – und regelmäßig in lokalen Branchenportalen.", + url: "https://www.google.com/search?q=haarscharf+crimmitschau#reviews", }, + reviews: [ + { + author: "Alexander Nönnig", + rating: 5, + text: "Ohne Termin trotzdem innerhalb von 5 Minuten dran gekommen. Es geht viel, wenn man nur will. Mit dem Ergebnis auch sehr zufrieden gewesen. Super, weiter so!", + date: "vor 3 Jahren", + }, + { + author: "Sven Müller", + rating: 5, + text: "Kam auch sofort ohne Termin dran und hat alles gepasst.", + date: "vor einem Jahr", + }, + { + author: "Steffen K.", + rating: 5, + text: "Die Besuche bei Haarscharf sind stets fantastisch! Das Team zeigte nicht nur ein herausragendes handwerkliches Können, sondern schafft auch immer eine warme und angenehme Atmosphäre.", + date: "vor 2 Jahren", + }, + { + author: "Leoni Preuss", + rating: 5, + text: "Ich habe für meinen Abiball eine wunderschöne, einzigartige, schnelle und preisgünstige Hochsteckfrisur bekommen und bin super zufrieden. Neben guter Laune sind auch die Ergebnisse top!", + date: "vor 3 Jahren", + }, + ], team: [ { name: "Claudia Schäfer", diff --git a/src/pages/index.astro b/src/pages/index.astro index b6b660b..0b61ae6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,1467 +1,38 @@ --- import Layout from "@/layouts/main.astro" -import { siteContent } from "@/content/site-content" - -const navItems = [ - { label: "Leistungen", href: "#leistungen" }, - { label: "Team", href: "#team" }, - { label: "Zeiten", href: "#zeiten" }, - { label: "Kontakt", href: "#kontakt" }, -] +import SiteHeader from "@/components/sections/SiteHeader.astro" +import Hero from "@/components/sections/Hero.astro" +import SalonPromise from "@/components/sections/SalonPromise.astro" +import EditorialImage from "@/components/sections/EditorialImage.astro" +import Services from "@/components/sections/Services.astro" +import Team from "@/components/sections/Team.astro" +import Reviews from "@/components/sections/Reviews.astro" +import Hours from "@/components/sections/Hours.astro" +import Trust from "@/components/sections/Trust.astro" +import Contact from "@/components/sections/Contact.astro" +import FinalCta from "@/components/sections/FinalCta.astro" +import "@/styles/home.css" --- -
- - H - - {siteContent.business.name} - {siteContent.business.descriptor} - - - - - -
- - - Anrufen - -
-
- - +
- -
- -
-

{siteContent.hero.eyebrow}

-

{siteContent.hero.title}

-

{siteContent.hero.intro}

- -
- - {siteContent.cta.primary.label} - - - {siteContent.cta.secondary.label} - -
-
- -
-
-
Adresse
-
{siteContent.business.address.display}
-
-
-
Telefon
-
{siteContent.business.phone.display}
-
-
-
{siteContent.hours[0].day}
-
{siteContent.hours[0].time}
-
-
-
- - -
-
-

Salonversprechen

-

Haare dürfen leicht aussehen, auch wenn dahinter Präzision steckt.

-
- -
- { - siteContent.promise.map((item, index) => ( -
- {String(index + 1).padStart(2, "0")} -

{item.title}

-

{item.text}

-
- )) - } -
-
- - -
- Warm beleuchteter Salon-Innenraum mit Friseurstühlen und Spiegeln -
Atmosphäre im Salon
-
- - -
-
-

Leistungen

-

Alles, was ein guter Salonbesuch braucht.

-

Fokus auf das Wesentliche: Ihr Look, Ihr Typ, Ihr Termin. Details und Wünsche besprechen wir am besten kurz am Telefon.

-
- -
- { - siteContent.services.map((service, index) => ( -
- {String(index + 1).padStart(2, "0")} -

{service.title}

-

{service.text}

-
- )) - } -
-
- - -
-
-

Unser Team

-

Die Menschen hinter den Scheren.

-
- -
- Eine Friseurin bei der Arbeit mit Schere -
Handwerk mit Präzision
-
- -
- { - siteContent.team.map((member) => ( -
-
- {member.initials} -
-

{member.name}

-

{member.role}

-

{member.bio}

-
- )) - } -
-
- - -
-
-

Öffnungszeiten

-

Planbar von Montag bis Samstag.

-

Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.

-
- -
- { - siteContent.hours.map((entry) => ( -
- {entry.day} - -
- )) - } -
-
- - -
-
-

Lokales Vertrauen

-

{siteContent.reviewSummary.rating}

-
-

- {siteContent.reviewSummary.count} - {siteContent.reviewSummary.text} -

-
- - -
-
-

Kontakt & Anfahrt

-

Mitten in Crimmitschau.

-

Der schnellste Weg zum Termin: ein kurzer Anruf.

-
- -
-
-
- {siteContent.business.name} - {siteContent.business.address.street} - {siteContent.business.address.postalCode} {siteContent.business.address.city} -
- -
- Friseur-Werkzeuge: Schere und Kamm auf einer Marmor-Arbeitsfläche -
Detail & Sorgfalt
-
-
- -
- - Telefon - {siteContent.business.phone.display} - - - E-Mail - {siteContent.business.email} - - - Route über Google Maps - -
-
-
- - -
-

Bereit für den nächsten Schnitt?

-

Kurz anrufen, Termin abstimmen, vorbeikommen.

-
- - {siteContent.business.phone.display} - -
-
+ + + + + + + + + +
- - - diff --git a/src/scripts/mobile-nav.ts b/src/scripts/mobile-nav.ts new file mode 100644 index 0000000..8aef2a4 --- /dev/null +++ b/src/scripts/mobile-nav.ts @@ -0,0 +1,36 @@ +(function () { + const toggle = document.querySelector(".mobile-nav-toggle") as HTMLElement | null; + const nav = document.querySelector("#mobile-nav") as HTMLElement | null; + if (!toggle || !nav) return; + + const closeBtn = nav.querySelector(".mobile-nav-close"); + const backdrop = nav.querySelector(".mobile-nav-backdrop"); + const links = nav.querySelectorAll("a"); + + function open() { + nav!.classList.add("is-open"); + toggle!.setAttribute("aria-expanded", "true"); + document.body.style.overflow = "hidden"; + if (links.length) { + setTimeout(() => (links[0] as HTMLElement).focus(), 0); + } + document.addEventListener("keydown", onKeyDown); + } + + function close() { + nav!.classList.remove("is-open"); + toggle!.setAttribute("aria-expanded", "false"); + document.body.style.overflow = ""; + document.removeEventListener("keydown", onKeyDown); + toggle!.focus(); + } + + function onKeyDown(e: KeyboardEvent) { + if (e.key === "Escape") close(); + } + + toggle.addEventListener("click", open); + if (closeBtn) closeBtn.addEventListener("click", close); + if (backdrop) backdrop.addEventListener("click", close); + links.forEach((link) => link.addEventListener("click", close)); +})(); diff --git a/src/scripts/scroll-reveal.ts b/src/scripts/scroll-reveal.ts new file mode 100644 index 0000000..f956aaf --- /dev/null +++ b/src/scripts/scroll-reveal.ts @@ -0,0 +1,41 @@ +(function () { + var revealSelectors = [ + ".promise-v2__intro", + ".promise-v2__card", + ".editorial-v2", + ".section-heading-v2", + ".services-v2__card", + ".team-image-v2", + ".team-v2__card", + ".reviews-v2__card", + ".reviews-v2__footer", + ".hours-v2__row", + ".trust-v2__rating", + ".trust-v2__copy", + ".contact-v2__left", + ".contact-v2__actions", + ".final-cta-v2", + ]; + + var revealElements = document.querySelectorAll(revealSelectors.join(",")); + if (!revealElements.length) return; + + var observer = new IntersectionObserver( + function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + entry.target.classList.add("is-visible"); + observer.unobserve(entry.target); + } + }); + }, + { + threshold: 0.12, + rootMargin: "0px 0px -40px 0px", + } + ); + + revealElements.forEach(function (el) { + observer.observe(el); + }); +})(); diff --git a/src/styles/global.css b/src/styles/global.css index fd5dbb4..4a06118 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -179,6 +179,38 @@ gap: 1rem; padding: clamp(0.8rem, 2vw, 1.25rem) clamp(1rem, 4vw, 3rem); color: var(--hero-ink); + transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease; + } + + .site-header.is-scrolled { + background: color-mix(in oklch, var(--background) 92%, transparent); + backdrop-filter: blur(12px) saturate(140%); + -webkit-backdrop-filter: blur(12px) saturate(140%); + box-shadow: 0 1px 0 var(--hairline); + color: var(--foreground); + } + + .site-header.is-scrolled .brand-descriptor { + color: var(--muted-foreground); + } + + .site-header.is-scrolled .nav-link:hover, + .site-header.is-scrolled .nav-link:focus-visible { + background: var(--muted); + color: var(--foreground); + } + + .site-header.is-scrolled .button-link--compact { + background: var(--primary); + border-color: var(--primary); + color: var(--primary-foreground); + } + + .site-header.is-scrolled .button-link--compact:hover, + .site-header.is-scrolled .button-link--compact:focus-visible { + background: oklch(0.28 0.094 18); + border-color: oklch(0.28 0.094 18); + color: oklch(0.98 0.012 84); } .brand-lockup { diff --git a/src/styles/home.css b/src/styles/home.css new file mode 100644 index 0000000..4967c91 --- /dev/null +++ b/src/styles/home.css @@ -0,0 +1,323 @@ +/* ─── V2 Design Tokens ─── */ +:root { + --v2-bg: oklch(0.965 0.016 78); + --v2-fg: oklch(0.13 0.035 35); + --v2-primary: oklch(0.36 0.145 42); + --v2-primary-dim: oklch(0.3 0.12 42); + --v2-accent: oklch(0.78 0.14 62); + --v2-muted: oklch(0.52 0.03 42); + --v2-surface: oklch(0.94 0.022 75); + --v2-surface-dark: oklch(0.2 0.04 45); + --v2-surface-warm: oklch(0.93 0.028 72); + --v2-hairline: color-mix(in oklch, var(--v2-fg) 14%, transparent); + --v2-hero-ink: oklch(0.98 0.012 82); + --v2-radius: 0.25rem; + + /* Animation */ + --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); + --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); + --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); +} + +/* ─── Animation Keyframes ─── */ +@keyframes fade-up { + from { + opacity: 0; + transform: translateY(28px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes scale-in { + from { + opacity: 0; + transform: scale(0.94); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ─── Base overrides for v2 ─── */ +body { + background: var(--v2-bg); + color: var(--v2-fg); +} + +/* ─── Shared heading scale ─── */ +.section-heading-v2 h2, +.promise-v2__intro h2, +.final-cta-v2 h2 { + font-family: var(--font-heading); + font-size: clamp(2.8rem, 6.5vw, 6.5rem); + font-weight: 600; + line-height: 0.95; + margin: 0; +} + +/* ─── Buttons ─── */ +.button-link-v2 { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.8rem; + width: fit-content; + border: 1.5px solid var(--v2-primary); + border-radius: var(--v2-radius); + background: var(--v2-primary); + color: var(--v2-hero-ink); + font-weight: 700; + line-height: 1; + padding: 0.85rem 1.35rem; + text-decoration: none; + transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms ease, border-color 180ms ease; +} + +.button-link-v2:hover, +.button-link-v2:focus-visible { + background: var(--v2-primary-dim); + border-color: var(--v2-primary-dim); + transform: translateY(-2px); +} + +.button-link-v2--compact { + min-height: 2.45rem; + padding: 0.55rem 0.95rem; + background: transparent; + border-color: color-mix(in oklch, currentColor 45%, transparent); + color: inherit; +} + +.button-link-v2--compact:hover, +.button-link-v2--compact:focus-visible { + background: var(--v2-fg); + border-color: var(--v2-fg); + color: var(--v2-bg); +} + +.button-link-v2--ghost { + background: transparent; + color: var(--v2-fg); + border-color: var(--v2-fg); +} + +.button-link-v2--ghost:hover, +.button-link-v2--ghost:focus-visible { + background: var(--v2-fg); + color: var(--v2-bg); +} + +.button-link-v2--light { + background: var(--v2-hero-ink); + border-color: var(--v2-hero-ink); + color: var(--v2-primary); +} + +.button-link-v2--light:hover, +.button-link-v2--light:focus-visible { + background: var(--v2-accent); + border-color: var(--v2-accent); + color: var(--v2-fg); +} + +/* Micro-interactions */ +.button-link-v2:active { + transform: scale(0.97) translateY(-1px); + transition-duration: 100ms; +} + +.button-link-v2--compact:active, +.button-link-v2--ghost:active, +.button-link-v2--light:active { + transform: scale(0.97); + transition-duration: 100ms; +} + +/* ─── Eyebrow ─── */ +.eyebrow-v2 { + color: var(--v2-primary); + font-size: 0.8rem; + font-weight: 800; + letter-spacing: 0.02em; + margin: 0; + text-transform: uppercase; +} + +/* ─── Sections ─── */ +.section-v2 { + padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 5vw, 5rem); +} + +.section-heading-v2 { + display: grid; + gap: 1rem; + max-width: 44rem; +} + +.section-heading-v2--centered { + text-align: center; + margin: 0 auto; +} + +.section-heading-v2 p:not(.eyebrow-v2) { + color: var(--v2-muted); + font-size: clamp(1.05rem, 1.5vw, 1.25rem); + line-height: 1.65; + margin: 0; +} + +/* ─── Scroll-Triggered Reveals ─── */ +.promise-v2__intro, +.promise-v2__card, +.editorial-v2, +.section-heading-v2, +.services-v2__card, +.team-image-v2, +.team-v2__card, +.hours-v2__row, +.trust-v2__rating, +.trust-v2__copy, +.reviews-v2__card, +.reviews-v2__footer, +.contact-v2__left, +.contact-v2__actions, +.final-cta-v2 { + opacity: 0; + transform: translateY(28px); + transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart); +} + +.promise-v2__intro.is-visible, +.promise-v2__card.is-visible, +.editorial-v2.is-visible, +.section-heading-v2.is-visible, +.services-v2__card.is-visible, +.team-image-v2.is-visible, +.team-v2__card.is-visible, +.reviews-v2__card.is-visible, +.reviews-v2__footer.is-visible, +.hours-v2__row.is-visible, +.trust-v2__rating.is-visible, +.trust-v2__copy.is-visible, +.contact-v2__left.is-visible, +.contact-v2__actions.is-visible, +.final-cta-v2.is-visible { + opacity: 1; + transform: translateY(0); +} + +/* Stagger delays */ +.promise-v2__card:nth-child(1) { transition-delay: 0ms; } +.promise-v2__card:nth-child(2) { transition-delay: 100ms; } +.promise-v2__card:nth-child(3) { transition-delay: 200ms; } + +.services-v2__card:nth-child(1) { transition-delay: 0ms; } +.services-v2__card:nth-child(2) { transition-delay: 120ms; } +.services-v2__card:nth-child(3) { transition-delay: 240ms; } +.services-v2__card:nth-child(4) { transition-delay: 360ms; } + +.team-v2__card:nth-child(1) { transition-delay: 0ms; } +.team-v2__card:nth-child(2) { transition-delay: 100ms; } +.team-v2__card:nth-child(3) { transition-delay: 200ms; } + +.hours-v2__row:nth-child(1) { transition-delay: 0ms; } +.hours-v2__row:nth-child(2) { transition-delay: 60ms; } +.hours-v2__row:nth-child(3) { transition-delay: 120ms; } +.hours-v2__row:nth-child(4) { transition-delay: 180ms; } +.hours-v2__row:nth-child(5) { transition-delay: 240ms; } +.hours-v2__row:nth-child(6) { transition-delay: 300ms; } + +/* Trust number dramatic entrance */ +.trust-v2__rating h2 { + transition: transform 0.9s var(--ease-out-expo); + transform: scale(0.9); +} +.trust-v2__rating.is-visible h2 { + transform: scale(1); +} + +/* Reviews stagger */ +.reviews-v2__card:nth-child(1) { transition-delay: 0ms; } +.reviews-v2__card:nth-child(2) { transition-delay: 100ms; } +.reviews-v2__card:nth-child(3) { transition-delay: 200ms; } +.reviews-v2__card:nth-child(4) { transition-delay: 300ms; } + +/* Reduced motion: ensure visibility */ +@media (prefers-reduced-motion: reduce) { + .hero-deco, + .hero-v2__copy .eyebrow-v2, + .hero-v2__copy h1, + .hero-v2__intro, + .hero-v2__actions, + .hero-v2__meta, + .promise-v2__intro, + .promise-v2__card, + .editorial-v2, + .section-heading-v2, + .services-v2__card, + .team-image-v2, + .team-v2__card, + .hours-v2__row, + .trust-v2__rating, + .trust-v2__copy, + .reviews-v2__card, + .reviews-v2__footer, + .contact-v2__left, + .contact-v2__actions, + .final-cta-v2 { + opacity: 1; + transform: none; + animation: none; + transition: none; + } + .trust-v2__rating h2 { + transform: none; + } +} + +/* ─── Mobile overrides ─── */ +@media (max-width: 820px) { + .section-heading-v2 h2, + .promise-v2__intro h2, + .final-cta-v2 h2 { + font-size: clamp(2.2rem, 8vw, 4rem); + } + + .promise-v2, + .hours-v2, + .trust-v2, + .contact-v2__layout { + grid-template-columns: 1fr; + } + + .promise-v2__intro { + position: static; + } + + .services-v2__grid { + grid-template-columns: 1fr; + } + + .services-v2__card:nth-child(even) { + margin-top: 0; + } + + .trust-v2 h2 { + font-size: clamp(4.5rem, 18vw, 8rem); + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + } +}