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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user