matthias/Haarscharf-Crimmitschau
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bolder: Increase visual impact across all sections

Browse Source 
- Richer color palette with more chroma and warmer tones
- Subtle paper texture background
- Stronger shadow scale (sm/md/lg/xl)
- Hero: larger typography, decorative ring, enhanced choreography
- Trust: star rating row, decorative background rings, bigger scale
- Services: card backgrounds with lift-on-hover shadows
- Reviews: stronger hover lift, thicker borders
- Team: image border, stronger avatar hover effects
- SalonPromise: decorative ring, hover states, fixed grid alignment
- SiteHeader: frosted glass backdrop-filter, stronger brand mark
- FinalCta: decorative ring, stronger radial gradients
This commit is contained in:
Matthias
2026-05-25 16:05:57 +02:00
parent 5cfcea9caf
commit 143820f859
9 changed files with 384 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/sections/FinalCta.astro
View File

@@ -3,6 +3,7 @@ import { siteContent } from "@/content/site-content"
--- ---
<section class="final-cta-v2" aria-labelledby="final-cta-title"> <section class="final-cta-v2" aria-labelledby="final-cta-title">
<div class="final-cta-v2__deco" aria-hidden="true"></div>
<p class="eyebrow-v2">Bereit für den nächsten Schnitt?</p> <p class="eyebrow-v2">Bereit für den nächsten Schnitt?</p>
<h2 id="final-cta-title">Kurz anrufen, Termin abstimmen, vorbeikommen.</h2> <h2 id="final-cta-title">Kurz anrufen, Termin abstimmen, vorbeikommen.</h2>
<div class="final-cta-v2__actions"> <div class="final-cta-v2__actions">
@@ -15,21 +16,33 @@ import { siteContent } from "@/content/site-content"
<style> <style>
.final-cta-v2 { .final-cta-v2 {
display: grid; display: grid;
gap: 1.75rem; gap: 2rem;
justify-items: start; justify-items: start;
background: var(--v2-surface-dark); background: var(--v2-surface-dark);
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 5vw, 5rem); padding: clamp(6rem, 12vw, 11rem) clamp(1rem, 5vw, 5rem);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.final-cta-v2__deco {
position: absolute;
top: -40%;
right: -20%;
width: 60vw;
height: 60vw;
border: 2px solid color-mix(in oklch, var(--v2-accent) 15%, transparent);
border-radius: 50%;
pointer-events: none;
}
.final-cta-v2::before { .final-cta-v2::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: background:
radial-gradient(ellipse 60% 40% at 80% 120%, color-mix(in oklch, var(--v2-primary) 35%, transparent) 0%, transparent 70%); radial-gradient(ellipse 60% 50% at 80% 120%, color-mix(in oklch, var(--v2-primary) 40%, transparent) 0%, transparent 70%),
radial-gradient(ellipse 40% 30% at 20% -10%, color-mix(in oklch, var(--v2-accent) 12%, transparent) 0%, transparent 60%);
pointer-events: none; pointer-events: none;
} }
@@ -44,11 +57,13 @@ import { siteContent } from "@/content/site-content"
position: relative; position: relative;
z-index: 2; z-index: 2;
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
font-size: clamp(3rem, 7vw, 7rem);
line-height: 0.92;
} }
.final-cta-v2__actions { .final-cta-v2__actions {
border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 28%, transparent); border-top: 2px solid color-mix(in oklch, var(--v2-hero-ink) 22%, transparent);
padding-top: 1.5rem; padding-top: 2rem;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }

84
src/components/sections/Hero.astro
View File

@@ -4,6 +4,7 @@ import { siteContent } from "@/content/site-content"
<section id="top" class="hero-v2" aria-labelledby="hero-title"> <section id="top" class="hero-v2" aria-labelledby="hero-title">
<div class="hero-deco" aria-hidden="true">H</div> <div class="hero-deco" aria-hidden="true">H</div>
<div class="hero-deco-ring" aria-hidden="true"></div>
<div class="hero-v2__copy"> <div class="hero-v2__copy">
<p class="eyebrow-v2">{siteContent.hero.eyebrow}</p> <p class="eyebrow-v2">{siteContent.hero.eyebrow}</p>
<h1 id="hero-title">{siteContent.hero.title}</h1> <h1 id="hero-title">{siteContent.hero.title}</h1>
@@ -36,7 +37,7 @@ import { siteContent } from "@/content/site-content"
</section> </section>
<style> <style>
/* ─── Hero: asymmetric, oversized ─── */ /* ─── Hero: asymmetric, oversized, dramatic ─── */
.hero-v2 { .hero-v2 {
position: relative; position: relative;
display: grid; display: grid;
@@ -47,47 +48,62 @@ import { siteContent } from "@/content/site-content"
overflow: hidden; overflow: hidden;
padding: clamp(8rem, 16vw, 12rem) clamp(1rem, 5vw, 5rem) clamp(4rem, 8vw, 7rem); padding: clamp(8rem, 16vw, 12rem) clamp(1rem, 5vw, 5rem) clamp(4rem, 8vw, 7rem);
background: background:
linear-gradient(170deg, color-mix(in oklch, var(--v2-surface-warm) 60%, transparent) 0%, transparent 55%); linear-gradient(170deg, color-mix(in oklch, var(--v2-surface-warm) 65%, transparent) 0%, transparent 55%),
linear-gradient(220deg, color-mix(in oklch, var(--v2-accent) 8%, transparent) 0%, transparent 50%);
} }
.hero-deco { .hero-deco {
position: absolute; position: absolute;
top: 50%; top: 52%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 55vw; font-size: 58vw;
font-weight: 600; font-weight: 600;
line-height: 0.8; line-height: 0.78;
color: color-mix(in oklch, var(--v2-primary) 4%, transparent); color: color-mix(in oklch, var(--v2-primary) 7%, transparent);
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
z-index: 0; z-index: 0;
} }
.hero-deco-ring {
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
width: 48vw;
height: 48vw;
border: 1.5px solid color-mix(in oklch, var(--v2-primary) 10%, transparent);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.hero-v2__copy { .hero-v2__copy {
position: relative; position: relative;
z-index: 2; z-index: 2;
max-width: 52rem; max-width: 54rem;
} }
.hero-v2__copy .eyebrow-v2 { .hero-v2__copy .eyebrow-v2 {
margin-bottom: 1.25rem; margin-bottom: 1.4rem;
} }
.hero-v2__copy h1 { .hero-v2__copy h1 {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(3.8rem, 11vw, 10rem); font-size: clamp(4rem, 12vw, 11rem);
font-weight: 600; font-weight: 600;
line-height: 0.88; line-height: 0.86;
margin: 0 0 1.6rem; margin: 0 0 1.8rem;
max-width: 14ch; max-width: 14ch;
letter-spacing: -0.02em;
} }
.hero-v2__intro { .hero-v2__intro {
max-width: 38ch; max-width: 38ch;
color: var(--v2-muted); color: var(--v2-muted);
font-size: clamp(1.15rem, 2vw, 1.5rem); font-size: clamp(1.15rem, 2.1vw, 1.55rem);
line-height: 1.55; line-height: 1.55;
margin: 0; margin: 0;
} }
@@ -95,8 +111,8 @@ import { siteContent } from "@/content/site-content"
.hero-v2__actions { .hero-v2__actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.85rem;
padding-top: 2rem; padding-top: 2.2rem;
} }
.hero-v2__meta { .hero-v2__meta {
@@ -106,63 +122,70 @@ import { siteContent } from "@/content/site-content"
gap: 0; gap: 0;
align-self: end; align-self: end;
margin: 0; margin: 0;
border-top: 1.5px solid var(--v2-hairline); border-top: 2px solid var(--v2-hairline);
} }
.hero-v2__meta div { .hero-v2__meta div {
display: grid; display: grid;
gap: 0.35rem; gap: 0.4rem;
padding: 1.1rem 0; padding: 1.2rem 0;
border-bottom: 1.5px solid var(--v2-hairline); border-bottom: 2px solid var(--v2-hairline);
} }
.hero-v2__meta dt { .hero-v2__meta dt {
color: var(--v2-muted); color: var(--v2-muted);
font-size: 0.72rem; font-size: 0.7rem;
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em;
} }
.hero-v2__meta dd { .hero-v2__meta dd {
margin: 0; margin: 0;
font-weight: 700; font-weight: 700;
font-size: 1.1rem; font-size: 1.15rem;
line-height: 1.2; line-height: 1.2;
} }
/* ─── Hero Load Choreography ─── */ /* ─── Hero Load Choreography ─── */
.hero-deco { .hero-deco {
opacity: 0; opacity: 0;
animation: scale-in 1.2s var(--ease-out-expo) 0.15s forwards; animation: scale-in 1.4s var(--ease-out-expo) 0.1s forwards;
}
.hero-deco-ring {
opacity: 0;
animation: scale-in 1.6s var(--ease-out-expo) 0.25s forwards;
} }
.hero-v2__copy .eyebrow-v2 { .hero-v2__copy .eyebrow-v2 {
opacity: 0; opacity: 0;
animation: fade-up 0.7s var(--ease-out-expo) 0.3s forwards; animation: fade-up 0.75s var(--ease-out-expo) 0.35s forwards;
} }
.hero-v2__copy h1 { .hero-v2__copy h1 {
opacity: 0; opacity: 0;
animation: fade-up 0.75s var(--ease-out-expo) 0.42s forwards; animation: fade-up 0.85s var(--ease-out-expo) 0.48s forwards;
} }
.hero-v2__intro { .hero-v2__intro {
opacity: 0; opacity: 0;
animation: fade-up 0.7s var(--ease-out-expo) 0.54s forwards; animation: fade-up 0.75s var(--ease-out-expo) 0.6s forwards;
} }
.hero-v2__actions { .hero-v2__actions {
opacity: 0; opacity: 0;
animation: fade-up 0.6s var(--ease-out-expo) 0.64s forwards; animation: fade-up 0.65s var(--ease-out-expo) 0.72s forwards;
} }
.hero-v2__meta { .hero-v2__meta {
opacity: 0; opacity: 0;
animation: fade-up 0.7s var(--ease-out-expo) 0.8s forwards; animation: fade-up 0.75s var(--ease-out-expo) 0.9s forwards;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.hero-deco, .hero-deco,
.hero-deco-ring,
.hero-v2__copy .eyebrow-v2, .hero-v2__copy .eyebrow-v2,
.hero-v2__copy h1, .hero-v2__copy h1,
.hero-v2__intro, .hero-v2__intro,
@@ -181,11 +204,16 @@ import { siteContent } from "@/content/site-content"
} }
.hero-v2__copy h1 { .hero-v2__copy h1 {
font-size: clamp(2.8rem, 12vw, 5rem); font-size: clamp(3.2rem, 14vw, 5.5rem);
} }
.hero-v2__meta { .hero-v2__meta {
margin-top: 2rem; margin-top: 2.5rem;
}
.hero-deco-ring {
width: 80vw;
height: 80vw;
} }
} }
</style> </style>

51
src/components/sections/Reviews.astro
View File

@@ -4,8 +4,8 @@ import { siteContent } from "@/content/site-content"
function renderStars(rating: number) { function renderStars(rating: number) {
return Array.from({ length: 5 }, (_, i) => return Array.from({ length: 5 }, (_, i) =>
i < rating i < rating
? '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>' ? '<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>'
: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>' : '<svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>'
).join("") ).join("")
} }
--- ---
@@ -63,36 +63,36 @@ function renderStars(rating: number) {
.reviews-v2__grid { .reviews-v2__grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(1.2rem, 2.5vw, 2rem); gap: clamp(1.5rem, 2.8vw, 2.2rem);
margin-top: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(3rem, 6vw, 5rem);
} }
.reviews-v2__card { .reviews-v2__card {
display: grid; display: grid;
gap: 1.25rem; gap: 1.4rem;
padding: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.8rem, 3.5vw, 2.6rem);
background: var(--v2-bg); background: var(--v2-bg);
border: 1.5px solid var(--v2-hairline); border: 2px solid var(--v2-hairline);
border-radius: var(--v2-radius); border-radius: var(--v2-radius);
transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart); transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
} }
.reviews-v2__card:hover { .reviews-v2__card:hover {
transform: translateY(-4px); transform: translateY(-6px);
box-shadow: 0 12px 40px oklch(0.13 0.035 35 / 8%); box-shadow: var(--shadow-lg);
} }
.reviews-v2__header { .reviews-v2__header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.85rem; gap: 0.9rem;
} }
.reviews-v2__avatar { .reviews-v2__avatar {
display: grid; display: grid;
place-items: center; place-items: center;
width: 2.5rem; width: 2.75rem;
height: 2.5rem; height: 2.75rem;
border-radius: 999px; border-radius: 999px;
background: var(--v2-primary); background: var(--v2-primary);
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
@@ -104,7 +104,7 @@ function renderStars(rating: number) {
.reviews-v2__meta { .reviews-v2__meta {
display: grid; display: grid;
gap: 0.1rem; gap: 0.15rem;
flex: 1; flex: 1;
} }
@@ -116,14 +116,14 @@ function renderStars(rating: number) {
} }
.reviews-v2__date { .reviews-v2__date {
font-size: 0.78rem; font-size: 0.76rem;
color: var(--v2-muted); color: var(--v2-muted);
margin: 0; margin: 0;
} }
.reviews-v2__stars { .reviews-v2__stars {
display: flex; display: flex;
gap: 0.15rem; gap: 0.2rem;
color: var(--v2-accent); color: var(--v2-accent);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -131,7 +131,7 @@ function renderStars(rating: number) {
.reviews-v2__text { .reviews-v2__text {
position: relative; position: relative;
margin: 0; margin: 0;
padding-left: 1rem; padding-left: 1.2rem;
color: var(--v2-muted); color: var(--v2-muted);
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.65; line-height: 1.65;
@@ -139,33 +139,33 @@ function renderStars(rating: number) {
.reviews-v2__quote { .reviews-v2__quote {
position: absolute; position: absolute;
left: -0.25rem; left: -0.2rem;
top: -0.35rem; top: -0.5rem;
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 2.5rem; font-size: 3rem;
line-height: 1; line-height: 1;
color: var(--v2-primary); color: var(--v2-primary);
opacity: 0.25; opacity: 0.3;
} }
.reviews-v2__footer { .reviews-v2__footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 3.5rem);
} }
.reviews-v2__link { .reviews-v2__link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.75rem 1.5rem; padding: 0.85rem 1.8rem;
border: 1.5px solid var(--v2-hairline); border: 2px solid var(--v2-hairline);
border-radius: var(--v2-radius); border-radius: var(--v2-radius);
color: var(--v2-fg); color: var(--v2-fg);
font-weight: 700; font-weight: 700;
font-size: 0.95rem; font-size: 0.95rem;
text-decoration: none; text-decoration: none;
transition: background-color 180ms ease, border-color 180ms ease; transition: background-color 180ms ease, border-color 180ms ease, transform 220ms var(--ease-out-quart);
} }
.reviews-v2__link:hover, .reviews-v2__link:hover,
@@ -173,5 +173,6 @@ function renderStars(rating: number) {
background: var(--v2-fg); background: var(--v2-fg);
border-color: var(--v2-fg); border-color: var(--v2-fg);
color: var(--v2-bg); color: var(--v2-bg);
transform: translateY(-2px);
} }
</style> </style>

50
src/components/sections/SalonPromise.astro
View File

@@ -25,16 +25,31 @@ import { siteContent } from "@/content/site-content"
.promise-v2 { .promise-v2 {
display: grid; display: grid;
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
gap: clamp(3rem, 6vw, 6rem); gap: clamp(3.5rem, 7vw, 7rem);
background: var(--v2-surface-dark); background: var(--v2-surface-dark);
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
position: relative; position: relative;
overflow: hidden;
}
.promise-v2::before {
content: "";
position: absolute;
top: -20%;
right: -10%;
width: 50vw;
height: 50vw;
border: 2px solid color-mix(in oklch, var(--v2-accent) 12%, transparent);
border-radius: 50%;
pointer-events: none;
} }
.promise-v2__intro { .promise-v2__intro {
position: sticky; position: sticky;
top: 6rem; top: 6rem;
align-self: start; align-self: start;
position: relative;
z-index: 2;
} }
.promise-v2__intro .eyebrow-v2 { .promise-v2__intro .eyebrow-v2 {
@@ -43,42 +58,53 @@ import { siteContent } from "@/content/site-content"
.promise-v2__intro h2 { .promise-v2__intro h2 {
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
margin-top: 1rem; margin-top: 1.1rem;
font-size: clamp(2.8rem, 6.5vw, 6.5rem);
line-height: 0.95;
} }
.promise-v2__grid { .promise-v2__grid {
display: grid; display: grid;
gap: 0; gap: 0;
border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent); border-top: 2px solid color-mix(in oklch, var(--v2-hero-ink) 16%, transparent);
position: relative;
z-index: 2;
} }
.promise-v2__card { .promise-v2__card {
display: grid; display: grid;
grid-template-columns: minmax(4rem, 0.2fr) minmax(0, 0.8fr); grid-template-columns: minmax(4rem, 0.2fr) minmax(0, 0.8fr);
column-gap: clamp(1.2rem, 3vw, 2.5rem); column-gap: clamp(1.4rem, 3.5vw, 2.8rem);
border-bottom: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent); border-bottom: 2px solid color-mix(in oklch, var(--v2-hero-ink) 16%, transparent);
padding: clamp(1.5rem, 2.5vw, 2.5rem) 0; padding: clamp(1.8rem, 3vw, 2.8rem) 0;
transition: background-color 250ms ease;
}
.promise-v2__card:hover {
background: color-mix(in oklch, var(--v2-hero-ink) 3%, transparent);
} }
.index-label-v2 { .index-label-v2 {
color: var(--v2-accent); color: var(--v2-accent);
display: block; display: block;
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(2.5rem, 5vw, 5rem); font-size: clamp(2.8rem, 5.5vw, 5.5rem);
line-height: 0.85; line-height: 0.82;
opacity: 0.95; opacity: 0.9;
} }
.promise-v2__card h3 { .promise-v2__card h3 {
grid-column: 2;
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-size: clamp(1.5rem, 2.4vw, 2.4rem);
line-height: 1.05; line-height: 1.05;
margin: 0 0 0.75rem; margin: 0 0 0.85rem;
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
} }
.promise-v2__card p { .promise-v2__card p {
color: color-mix(in oklch, var(--v2-hero-ink) 72%, transparent); grid-column: 2;
color: color-mix(in oklch, var(--v2-hero-ink) 70%, transparent);
line-height: 1.65; line-height: 1.65;
margin: 0; margin: 0;
} }

33
src/components/sections/Services.astro
View File

@@ -12,7 +12,7 @@ import { siteContent } from "@/content/site-content"
<div class="services-v2__grid"> <div class="services-v2__grid">
{ {
siteContent.services.map((service, index) => ( siteContent.services.map((service, index) => (
<article class="services-v2__card" style={index % 2 === 1 ? "margin-top: 3rem;" : undefined}> <article class="services-v2__card" style={index % 2 === 1 ? "margin-top: 3.5rem;" : undefined}>
<span class="service-index-v2">{String(index + 1).padStart(2, "0")}</span> <span class="service-index-v2">{String(index + 1).padStart(2, "0")}</span>
<h3>{service.title}</h3> <h3>{service.title}</h3>
<p>{service.text}</p> <p>{service.text}</p>
@@ -30,34 +30,43 @@ import { siteContent } from "@/content/site-content"
.services-v2__grid { .services-v2__grid {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(2rem, 4vw, 4rem); gap: clamp(2.5rem, 5vw, 5rem);
margin-top: clamp(3rem, 5vw, 5rem); margin-top: clamp(3.5rem, 6vw, 6rem);
} }
.services-v2__card { .services-v2__card {
display: grid; display: grid;
gap: 0.75rem; gap: 0.9rem;
padding-bottom: clamp(2rem, 3vw, 3rem); padding: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
border-bottom: 1.5px solid var(--v2-hairline); background: var(--v2-surface);
border: 1.5px solid var(--v2-hairline);
border-radius: var(--v2-radius);
transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
}
.services-v2__card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
} }
.services-v2__card:nth-child(even) { .services-v2__card:nth-child(even) {
margin-top: 4rem; margin-top: 5rem;
} }
.service-index-v2 { .service-index-v2 {
color: var(--v2-primary); color: var(--v2-primary);
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(3rem, 6vw, 6rem); font-size: clamp(3.5rem, 7vw, 7rem);
line-height: 0.85; line-height: 0.82;
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.75rem;
opacity: 0.85;
} }
.services-v2__card h3 { .services-v2__card h3 {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-size: clamp(1.6rem, 2.8vw, 2.4rem);
line-height: 1.1; line-height: 1.05;
margin: 0; margin: 0;
} }

70
src/components/sections/SiteHeader.astro
View File

@@ -19,13 +19,13 @@ const navItems = [
</span> </span>
</a> </a>
<nav aria-label="Hauptnavigation" class="hidden items-center gap-1 md:flex"> <nav aria-label="Hauptnavigation" class="desktop-nav">
{navItems.map((item) => <a class="nav-link-v2" href={item.href}>{item.label}</a>)} {navItems.map((item) => <a class="nav-link-v2" href={item.href}>{item.label}</a>)}
</nav> </nav>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
class="mobile-nav-toggle md:hidden" class="mobile-nav-toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="mobile-nav" aria-controls="mobile-nav"
aria-label="Menü öffnen" aria-label="Menü öffnen"
@@ -80,9 +80,12 @@ const navItems = [
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: clamp(0.8rem, 2vw, 1.25rem) clamp(1rem, 4vw, 3rem); padding: clamp(0.85rem, 2.2vw, 1.35rem) clamp(1rem, 4vw, 3rem);
color: var(--v2-fg); color: var(--v2-fg);
background: var(--v2-bg); background: color-mix(in oklch, var(--v2-bg) 92%, transparent);
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
border-bottom: 1.5px solid color-mix(in oklch, var(--v2-fg) 6%, transparent);
} }
.site-header-v2 .brand-lockup { .site-header-v2 .brand-lockup {
@@ -97,36 +100,43 @@ const navItems = [
.site-header-v2 .brand-mark { .site-header-v2 .brand-mark {
display: grid; display: grid;
place-items: center; place-items: center;
width: 2.25rem; width: 2.5rem;
height: 2.25rem; height: 2.5rem;
border: 1.5px solid currentColor; border: 2px solid currentColor;
border-radius: 999px; border-radius: 999px;
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 1.05rem; font-size: 1.1rem;
line-height: 1; line-height: 1;
font-weight: 600; font-weight: 600;
} }
.site-header-v2 .brand-descriptor { .site-header-v2 .brand-descriptor {
display: block; display: block;
color: color-mix(in oklch, currentColor 65%, transparent); color: color-mix(in oklch, currentColor 60%, transparent);
font-size: 0.78rem; font-size: 0.76rem;
line-height: 1.1; line-height: 1.1;
font-weight: 500;
} }
.nav-link-v2 { .nav-link-v2 {
border-radius: 999px; border-radius: 999px;
color: inherit; color: inherit;
font-size: 0.95rem; font-size: 0.92rem;
font-weight: 600; font-weight: 600;
padding: 0.55rem 0.9rem; padding: 0.55rem 0.95rem;
text-decoration: none; text-decoration: none;
transition: background-color 180ms ease, color 180ms ease; transition: background-color 180ms ease, color 180ms ease;
} }
.nav-link-v2:hover, .nav-link-v2:hover,
.nav-link-v2:focus-visible { .nav-link-v2:focus-visible {
background: color-mix(in oklch, currentColor 14%, transparent); background: color-mix(in oklch, currentColor 12%, transparent);
}
.desktop-nav {
display: none;
align-items: center;
gap: 0.25rem;
} }
/* ─── Mobile Navigation ─── */ /* ─── Mobile Navigation ─── */
@@ -136,9 +146,9 @@ const navItems = [
justify-content: center; justify-content: center;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border: 1.5px solid color-mix(in oklch, currentColor 30%, transparent); border: 2px solid color-mix(in oklch, currentColor 28%, transparent);
border-radius: var(--v2-radius); border-radius: var(--v2-radius);
background: color-mix(in oklch, currentColor 10%, transparent); background: color-mix(in oklch, currentColor 8%, transparent);
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
transition: background-color 180ms ease, border-color 180ms ease; transition: background-color 180ms ease, border-color 180ms ease;
@@ -146,8 +156,8 @@ const navItems = [
.mobile-nav-toggle:hover, .mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible { .mobile-nav-toggle:focus-visible {
background: color-mix(in oklch, currentColor 18%, transparent); background: color-mix(in oklch, currentColor 16%, transparent);
border-color: color-mix(in oklch, currentColor 50%, transparent); border-color: color-mix(in oklch, currentColor 45%, transparent);
} }
.mobile-nav { .mobile-nav {
@@ -166,7 +176,7 @@ const navItems = [
.mobile-nav-backdrop { .mobile-nav-backdrop {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: oklch(0.1 0.02 28 / 60%); background: oklch(0.1 0.02 28 / 55%);
opacity: 0; opacity: 0;
transition: opacity 200ms ease; transition: opacity 200ms ease;
} }
@@ -188,8 +198,8 @@ const navItems = [
gap: 1.5rem; gap: 1.5rem;
padding: 1.5rem; padding: 1.5rem;
transform: translateX(100%); transform: translateX(100%);
transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: -8px 0 32px oklch(0.1 0.02 28 / 15%); box-shadow: -12px 0 40px oklch(0.1 0.02 28 / 18%);
} }
.mobile-nav.is-open .mobile-nav-panel { .mobile-nav.is-open .mobile-nav-panel {
@@ -203,7 +213,7 @@ const navItems = [
justify-content: center; justify-content: center;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border: 1.5px solid var(--v2-hairline); border: 2px solid var(--v2-hairline);
border-radius: var(--v2-radius); border-radius: var(--v2-radius);
background: transparent; background: transparent;
color: var(--v2-fg); color: var(--v2-fg);
@@ -249,7 +259,7 @@ const navItems = [
gap: 0.3rem; gap: 0.3rem;
padding: 1rem; padding: 1rem;
border-radius: var(--v2-radius); border-radius: var(--v2-radius);
border: 1.5px solid var(--v2-hairline); border: 2px solid var(--v2-hairline);
background: color-mix(in oklch, var(--v2-surface) 50%, transparent); background: color-mix(in oklch, var(--v2-surface) 50%, transparent);
color: var(--v2-fg); color: var(--v2-fg);
text-decoration: none; text-decoration: none;
@@ -270,7 +280,7 @@ const navItems = [
/* Mobile nav link stagger */ /* Mobile nav link stagger */
.mobile-nav.is-open .mobile-nav-list li { .mobile-nav.is-open .mobile-nav-list li {
opacity: 0; opacity: 0;
animation: fade-up 0.45s var(--ease-out-expo) forwards; animation: fade-up 0.5s var(--ease-out-expo) forwards;
} }
.mobile-nav.is-open .mobile-nav-list li:nth-child(1) { animation-delay: 0.08s; } .mobile-nav.is-open .mobile-nav-list li:nth-child(1) { animation-delay: 0.08s; }
.mobile-nav.is-open .mobile-nav-list li:nth-child(2) { animation-delay: 0.14s; } .mobile-nav.is-open .mobile-nav-list li:nth-child(2) { animation-delay: 0.14s; }
@@ -279,10 +289,20 @@ const navItems = [
.mobile-nav.is-open .mobile-nav-phone { .mobile-nav.is-open .mobile-nav-phone {
opacity: 0; opacity: 0;
animation: fade-up 0.45s var(--ease-out-expo) 0.32s forwards; animation: fade-up 0.5s var(--ease-out-expo) 0.32s forwards;
} }
@media (max-width: 820px) { @media (min-width: 769px) {
.desktop-nav {
display: flex;
}
.mobile-nav-toggle {
display: none;
}
}
@media (max-width: 768px) {
.site-header-v2 { .site-header-v2 {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }

57
src/components/sections/Team.astro
View File

@@ -42,10 +42,12 @@ import { siteContent } from "@/content/site-content"
} }
.team-image-v2 { .team-image-v2 {
margin: clamp(2rem, 4vw, 3.5rem) auto 0; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
max-width: 72rem; max-width: 72rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 2px solid var(--v2-hairline);
border-radius: var(--v2-radius);
} }
.team-image-v2 img { .team-image-v2 img {
@@ -54,76 +56,81 @@ import { siteContent } from "@/content/site-content"
aspect-ratio: 21 / 9; aspect-ratio: 21 / 9;
object-fit: cover; object-fit: cover;
display: block; display: block;
filter: saturate(0.85) contrast(1.05); filter: saturate(0.82) contrast(1.08);
transition: transform 0.9s var(--ease-out-quart); transition: transform 1s var(--ease-out-quart);
} }
.team-image-v2:hover img { .team-image-v2:hover img {
transform: scale(1.03); transform: scale(1.04);
} }
.team-image-v2 figcaption { .team-image-v2 figcaption {
position: absolute; position: absolute;
right: 1.25rem; right: 1.25rem;
bottom: 1rem; bottom: 1rem;
z-index: 2;
padding: 0.4rem 0.85rem;
background: oklch(0.1 0.02 28 / 60%);
color: oklch(0.95 0.01 84); color: oklch(0.95 0.01 84);
font-size: 0.78rem; font-size: 0.76rem;
text-shadow: 0 1px 4px oklch(0.1 0.02 28 / 50%); font-weight: 500;
} }
.team-v2__grid { .team-v2__grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0; gap: 0;
margin-top: clamp(2rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4.5rem);
border-top: 1.5px solid var(--v2-hairline); border-top: 2px solid var(--v2-hairline);
border-left: 1.5px solid var(--v2-hairline); border-left: 2px solid var(--v2-hairline);
} }
.team-v2__card { .team-v2__card {
display: grid; display: grid;
justify-items: start; justify-items: start;
gap: 0.625rem; gap: 0.7rem;
border-bottom: 1.5px solid var(--v2-hairline); border-bottom: 2px solid var(--v2-hairline);
border-right: 1.5px solid var(--v2-hairline); border-right: 2px solid var(--v2-hairline);
padding: clamp(2.2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
transition: background-color 200ms ease; transition: background-color 250ms ease, transform 0.4s var(--ease-out-quart);
} }
.team-v2__card:hover { .team-v2__card:hover {
background: color-mix(in oklch, var(--v2-bg) 55%, transparent); background: color-mix(in oklch, var(--v2-bg) 50%, transparent);
transform: translateY(-4px);
} }
.team-v2__avatar { .team-v2__avatar {
display: grid; display: grid;
place-items: center; place-items: center;
width: 5.5rem; width: 6rem;
height: 5.5rem; height: 6rem;
margin-bottom: 0.75rem; margin-bottom: 0.9rem;
border-radius: 999px; border-radius: 999px;
background: var(--v2-surface-dark); background: var(--v2-surface-dark);
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 1.35rem; font-size: 1.4rem;
font-weight: 600; font-weight: 600;
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart); transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
} }
.team-v2__card:hover .team-v2__avatar { .team-v2__card:hover .team-v2__avatar {
transform: scale(1.06); transform: scale(1.08);
box-shadow: var(--shadow-md);
} }
.team-v2__card h3 { .team-v2__card h3 {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(1.25rem, 2vw, 1.6rem); font-size: clamp(1.3rem, 2.2vw, 1.7rem);
line-height: 1.2; line-height: 1.15;
margin: 0; margin: 0;
} }
.team-v2__role { .team-v2__role {
font-size: 0.78rem; font-size: 0.76rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.03em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: var(--v2-primary); color: var(--v2-primary);
margin: 0; margin: 0;

78
src/components/sections/Trust.astro
View File

@@ -6,6 +6,13 @@ import { siteContent } from "@/content/site-content"
<div class="trust-v2__rating"> <div class="trust-v2__rating">
<p class="eyebrow-v2">Lokales Vertrauen</p> <p class="eyebrow-v2">Lokales Vertrauen</p>
<h2 id="trust-title">{siteContent.reviewSummary.rating}</h2> <h2 id="trust-title">{siteContent.reviewSummary.rating}</h2>
<div class="trust-v2__stars" aria-hidden="true">
<svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
<svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
<svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
<svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
<svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
</div>
</div> </div>
<p class="trust-v2__copy"> <p class="trust-v2__copy">
<strong>{siteContent.reviewSummary.count}</strong> <strong>{siteContent.reviewSummary.count}</strong>
@@ -17,46 +24,95 @@ import { siteContent } from "@/content/site-content"
.trust-v2 { .trust-v2 {
display: grid; display: grid;
align-items: center; align-items: center;
gap: 2rem; gap: 3rem;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
background: var(--v2-primary); background: var(--v2-primary);
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem); padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 5vw, 5rem);
position: relative;
overflow: hidden;
}
.trust-v2::before {
content: "";
position: absolute;
top: -20%;
right: -10%;
width: 50vw;
height: 50vw;
border: 2px solid color-mix(in oklch, var(--v2-accent) 25%, transparent);
border-radius: 50%;
pointer-events: none;
}
.trust-v2::after {
content: "";
position: absolute;
bottom: -30%;
left: -15%;
width: 40vw;
height: 40vw;
border: 2px solid color-mix(in oklch, var(--v2-accent) 18%, transparent);
border-radius: 50%;
pointer-events: none;
} }
.trust-v2 .eyebrow-v2 { .trust-v2 .eyebrow-v2 {
color: var(--v2-accent); color: var(--v2-accent);
position: relative;
z-index: 2;
} }
.trust-v2 h2 { .trust-v2 h2 {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(6rem, 14vw, 13rem); font-size: clamp(7rem, 16vw, 15rem);
line-height: 0.85; line-height: 0.82;
margin: 0.6rem 0 0; margin: 0.8rem 0 0;
position: relative;
z-index: 2;
letter-spacing: -0.02em;
}
.trust-v2__stars {
display: flex;
gap: 0.4rem;
margin-top: 1.2rem;
color: var(--v2-accent);
position: relative;
z-index: 2;
} }
.trust-v2__copy { .trust-v2__copy {
display: grid; display: grid;
gap: 0.75rem; gap: 0.9rem;
font-size: clamp(1.15rem, 2vw, 1.5rem); font-size: clamp(1.15rem, 2.1vw, 1.6rem);
line-height: 1.55; line-height: 1.55;
max-width: 38ch; max-width: 36ch;
margin: 0; margin: 0;
color: color-mix(in oklch, var(--v2-hero-ink) 82%, transparent); color: color-mix(in oklch, var(--v2-hero-ink) 78%, transparent);
position: relative;
z-index: 2;
} }
.trust-v2__copy strong { .trust-v2__copy strong {
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
font-size: 1.3em; font-size: 1.35em;
font-weight: 700;
} }
@media (max-width: 820px) { @media (max-width: 820px) {
.trust-v2 { .trust-v2 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 2rem;
} }
.trust-v2 h2 { .trust-v2 h2 {
font-size: clamp(4.5rem, 18vw, 8rem); font-size: clamp(5.5rem, 20vw, 9rem);
}
.trust-v2__stars svg {
width: 22px;
height: 22px;
} }
} }
</style> </style>

137
src/styles/home.css
View File

@@ -1,29 +1,45 @@
/* ─── V2 Design Tokens ─── */ /* ─── V2 Design Tokens — BOLDER ─── */
:root { :root {
--v2-bg: oklch(0.965 0.016 78); /* Richer, warmer palette with more chroma */
--v2-fg: oklch(0.13 0.035 35); --v2-bg: oklch(0.96 0.018 78);
--v2-primary: oklch(0.36 0.145 42); --v2-fg: oklch(0.11 0.04 38);
--v2-primary-dim: oklch(0.3 0.12 42); --v2-primary: oklch(0.33 0.16 42);
--v2-accent: oklch(0.78 0.14 62); --v2-primary-dim: oklch(0.26 0.13 42);
--v2-muted: oklch(0.52 0.03 42); --v2-accent: oklch(0.72 0.18 58);
--v2-surface: oklch(0.94 0.022 75); --v2-muted: oklch(0.48 0.04 42);
--v2-surface-dark: oklch(0.2 0.04 45); --v2-surface: oklch(0.93 0.025 75);
--v2-surface-warm: oklch(0.93 0.028 72); --v2-surface-dark: oklch(0.16 0.05 45);
--v2-surface-warm: oklch(0.92 0.03 72);
--v2-hairline: color-mix(in oklch, var(--v2-fg) 14%, transparent); --v2-hairline: color-mix(in oklch, var(--v2-fg) 14%, transparent);
--v2-hero-ink: oklch(0.98 0.012 82); --v2-hero-ink: oklch(0.98 0.012 82);
--v2-radius: 0.25rem; --v2-radius: 0.25rem;
/* Stronger shadow scale */
--shadow-sm: 0 1px 2px oklch(0.2 0.04 45 / 8%);
--shadow-md: 0 4px 12px oklch(0.2 0.04 45 / 10%);
--shadow-lg: 0 12px 40px oklch(0.2 0.04 45 / 14%);
--shadow-xl: 0 24px 80px oklch(0.2 0.04 45 / 18%);
/* Animation */ /* Animation */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
} }
/* ─── Subtle paper texture on body ─── */
body {
background:
var(--v2-bg)
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
background-size: 200px 200px;
color: var(--v2-fg);
}
/* ─── Animation Keyframes ─── */ /* ─── Animation Keyframes ─── */
@keyframes fade-up { @keyframes fade-up {
from { from {
opacity: 0; opacity: 0;
transform: translateY(28px); transform: translateY(32px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -34,7 +50,7 @@
@keyframes scale-in { @keyframes scale-in {
from { from {
opacity: 0; opacity: 0;
transform: scale(0.94); transform: scale(0.92);
} }
to { to {
opacity: 1; opacity: 1;
@@ -42,54 +58,52 @@
} }
} }
/* ─── Base overrides for v2 ─── */ /* ─── Shared heading scale — amplified ─── */
body {
background: var(--v2-bg);
color: var(--v2-fg);
}
/* ─── Shared heading scale ─── */
.section-heading-v2 h2, .section-heading-v2 h2,
.promise-v2__intro h2, .promise-v2__intro h2,
.final-cta-v2 h2 { .final-cta-v2 h2 {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(2.8rem, 6.5vw, 6.5rem); font-size: clamp(3rem, 7vw, 7rem);
font-weight: 600; font-weight: 600;
line-height: 0.95; line-height: 0.92;
margin: 0; margin: 0;
letter-spacing: -0.01em;
} }
/* ─── Buttons ─── */ /* ─── Buttons — bolder presence ─── */
.button-link-v2 { .button-link-v2 {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 2.8rem; min-height: 3rem;
width: fit-content; width: fit-content;
border: 1.5px solid var(--v2-primary); border: 2px solid var(--v2-primary);
border-radius: var(--v2-radius); border-radius: var(--v2-radius);
background: var(--v2-primary); background: var(--v2-primary);
color: var(--v2-hero-ink); color: var(--v2-hero-ink);
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
padding: 0.85rem 1.35rem; padding: 0.9rem 1.6rem;
text-decoration: none; text-decoration: none;
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms ease, border-color 180ms ease; transition: transform 220ms var(--ease-out-expo), background-color 180ms ease, border-color 180ms ease, box-shadow 220ms var(--ease-out-expo);
box-shadow: var(--shadow-sm);
} }
.button-link-v2:hover, .button-link-v2:hover,
.button-link-v2:focus-visible { .button-link-v2:focus-visible {
background: var(--v2-primary-dim); background: var(--v2-primary-dim);
border-color: var(--v2-primary-dim); border-color: var(--v2-primary-dim);
transform: translateY(-2px); transform: translateY(-3px);
box-shadow: var(--shadow-lg);
} }
.button-link-v2--compact { .button-link-v2--compact {
min-height: 2.45rem; min-height: 2.6rem;
padding: 0.55rem 0.95rem; padding: 0.6rem 1.1rem;
background: transparent; background: transparent;
border-color: color-mix(in oklch, currentColor 45%, transparent); border-color: color-mix(in oklch, currentColor 45%, transparent);
color: inherit; color: inherit;
box-shadow: none;
} }
.button-link-v2--compact:hover, .button-link-v2--compact:hover,
@@ -97,18 +111,21 @@ body {
background: var(--v2-fg); background: var(--v2-fg);
border-color: var(--v2-fg); border-color: var(--v2-fg);
color: var(--v2-bg); color: var(--v2-bg);
box-shadow: var(--shadow-md);
} }
.button-link-v2--ghost { .button-link-v2--ghost {
background: transparent; background: transparent;
color: var(--v2-fg); color: var(--v2-fg);
border-color: var(--v2-fg); border-color: var(--v2-fg);
box-shadow: none;
} }
.button-link-v2--ghost:hover, .button-link-v2--ghost:hover,
.button-link-v2--ghost:focus-visible { .button-link-v2--ghost:focus-visible {
background: var(--v2-fg); background: var(--v2-fg);
color: var(--v2-bg); color: var(--v2-bg);
box-shadow: var(--shadow-md);
} }
.button-link-v2--light { .button-link-v2--light {
@@ -128,6 +145,7 @@ body {
.button-link-v2:active { .button-link-v2:active {
transform: scale(0.97) translateY(-1px); transform: scale(0.97) translateY(-1px);
transition-duration: 100ms; transition-duration: 100ms;
box-shadow: var(--shadow-sm);
} }
.button-link-v2--compact:active, .button-link-v2--compact:active,
@@ -137,25 +155,25 @@ body {
transition-duration: 100ms; transition-duration: 100ms;
} }
/* ─── Eyebrow ─── */ /* ─── Eyebrow — more presence ─── */
.eyebrow-v2 { .eyebrow-v2 {
color: var(--v2-primary); color: var(--v2-primary);
font-size: 0.8rem; font-size: 0.78rem;
font-weight: 800; font-weight: 800;
letter-spacing: 0.02em; letter-spacing: 0.08em;
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
} }
/* ─── Sections ─── */ /* ─── Sections ─── */
.section-v2 { .section-v2 {
padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 5vw, 5rem); padding: clamp(5rem, 11vw, 11rem) clamp(1rem, 5vw, 5rem);
} }
.section-heading-v2 { .section-heading-v2 {
display: grid; display: grid;
gap: 1rem; gap: 1.1rem;
max-width: 44rem; max-width: 46rem;
} }
.section-heading-v2--centered { .section-heading-v2--centered {
@@ -165,7 +183,7 @@ body {
.section-heading-v2 p:not(.eyebrow-v2) { .section-heading-v2 p:not(.eyebrow-v2) {
color: var(--v2-muted); color: var(--v2-muted);
font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.65; line-height: 1.65;
margin: 0; margin: 0;
} }
@@ -187,8 +205,8 @@ body {
.contact-v2__actions, .contact-v2__actions,
.final-cta-v2 { .final-cta-v2 {
opacity: 0; opacity: 0;
transform: translateY(28px); transform: translateY(32px);
transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart); transition: opacity 0.8s var(--ease-out-quart), transform 0.8s var(--ease-out-quart);
} }
.promise-v2__intro.is-visible, .promise-v2__intro.is-visible,
@@ -212,39 +230,41 @@ body {
/* Stagger delays */ /* Stagger delays */
.promise-v2__card:nth-child(1) { transition-delay: 0ms; } .promise-v2__card:nth-child(1) { transition-delay: 0ms; }
.promise-v2__card:nth-child(2) { transition-delay: 100ms; } .promise-v2__card:nth-child(2) { transition-delay: 120ms; }
.promise-v2__card:nth-child(3) { transition-delay: 200ms; } .promise-v2__card:nth-child(3) { transition-delay: 240ms; }
.services-v2__card:nth-child(1) { transition-delay: 0ms; } .services-v2__card:nth-child(1) { transition-delay: 0ms; }
.services-v2__card:nth-child(2) { transition-delay: 120ms; } .services-v2__card:nth-child(2) { transition-delay: 140ms; }
.services-v2__card:nth-child(3) { transition-delay: 240ms; } .services-v2__card:nth-child(3) { transition-delay: 280ms; }
.services-v2__card:nth-child(4) { transition-delay: 360ms; } .services-v2__card:nth-child(4) { transition-delay: 420ms; }
.team-v2__card:nth-child(1) { transition-delay: 0ms; } .team-v2__card:nth-child(1) { transition-delay: 0ms; }
.team-v2__card:nth-child(2) { transition-delay: 100ms; } .team-v2__card:nth-child(2) { transition-delay: 120ms; }
.team-v2__card:nth-child(3) { transition-delay: 200ms; } .team-v2__card:nth-child(3) { transition-delay: 240ms; }
.hours-v2__row:nth-child(1) { transition-delay: 0ms; } .hours-v2__row:nth-child(1) { transition-delay: 0ms; }
.hours-v2__row:nth-child(2) { transition-delay: 60ms; } .hours-v2__row:nth-child(2) { transition-delay: 70ms; }
.hours-v2__row:nth-child(3) { transition-delay: 120ms; } .hours-v2__row:nth-child(3) { transition-delay: 140ms; }
.hours-v2__row:nth-child(4) { transition-delay: 180ms; } .hours-v2__row:nth-child(4) { transition-delay: 210ms; }
.hours-v2__row:nth-child(5) { transition-delay: 240ms; } .hours-v2__row:nth-child(5) { transition-delay: 280ms; }
.hours-v2__row:nth-child(6) { transition-delay: 300ms; } .hours-v2__row:nth-child(6) { transition-delay: 350ms; }
/* Trust number dramatic entrance */ /* Trust number dramatic entrance — amplified */
.trust-v2__rating h2 { .trust-v2__rating h2 {
transition: transform 0.9s var(--ease-out-expo); transition: transform 1s var(--ease-out-expo), opacity 0.8s var(--ease-out-quart);
transform: scale(0.9); transform: scale(0.85);
opacity: 0;
} }
.trust-v2__rating.is-visible h2 { .trust-v2__rating.is-visible h2 {
transform: scale(1); transform: scale(1);
opacity: 1;
} }
/* Reviews stagger */ /* Reviews stagger */
.reviews-v2__card:nth-child(1) { transition-delay: 0ms; } .reviews-v2__card:nth-child(1) { transition-delay: 0ms; }
.reviews-v2__card:nth-child(2) { transition-delay: 100ms; } .reviews-v2__card:nth-child(2) { transition-delay: 120ms; }
.reviews-v2__card:nth-child(3) { transition-delay: 200ms; } .reviews-v2__card:nth-child(3) { transition-delay: 240ms; }
.reviews-v2__card:nth-child(4) { transition-delay: 300ms; } .reviews-v2__card:nth-child(4) { transition-delay: 360ms; }
/* Reduced motion: ensure visibility */ /* Reduced motion: ensure visibility */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@@ -276,6 +296,7 @@ body {
} }
.trust-v2__rating h2 { .trust-v2__rating h2 {
transform: none; transform: none;
opacity: 1;
} }
} }
@@ -284,7 +305,7 @@ body {
.section-heading-v2 h2, .section-heading-v2 h2,
.promise-v2__intro h2, .promise-v2__intro h2,
.final-cta-v2 h2 { .final-cta-v2 h2 {
font-size: clamp(2.2rem, 8vw, 4rem); font-size: clamp(2.4rem, 9vw, 4.5rem);
} }
.promise-v2, .promise-v2,
@@ -307,7 +328,7 @@ body {
} }
.trust-v2 h2 { .trust-v2 h2 {
font-size: clamp(4.5rem, 18vw, 8rem); font-size: clamp(5rem, 20vw, 9rem);
} }
} }