bolder: Increase visual impact across all sections

- 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

View File

@@ -3,6 +3,7 @@ import { siteContent } from "@/content/site-content"
---
<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>
<h2 id="final-cta-title">Kurz anrufen, Termin abstimmen, vorbeikommen.</h2>
<div class="final-cta-v2__actions">
@@ -15,21 +16,33 @@ import { siteContent } from "@/content/site-content"
<style>
.final-cta-v2 {
display: grid;
gap: 1.75rem;
gap: 2rem;
justify-items: start;
background: var(--v2-surface-dark);
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;
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 {
content: "";
position: absolute;
inset: 0;
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;
}
@@ -44,11 +57,13 @@ import { siteContent } from "@/content/site-content"
position: relative;
z-index: 2;
color: var(--v2-hero-ink);
font-size: clamp(3rem, 7vw, 7rem);
line-height: 0.92;
}
.final-cta-v2__actions {
border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 28%, transparent);
padding-top: 1.5rem;
border-top: 2px solid color-mix(in oklch, var(--v2-hero-ink) 22%, transparent);
padding-top: 2rem;
position: relative;
z-index: 2;
}