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

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

@@ -12,7 +12,7 @@ import { siteContent } from "@/content/site-content"
<div class="services-v2__grid">
{
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>
<h3>{service.title}</h3>
<p>{service.text}</p>
@@ -30,34 +30,43 @@ import { siteContent } from "@/content/site-content"
.services-v2__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(2rem, 4vw, 4rem);
margin-top: clamp(3rem, 5vw, 5rem);
gap: clamp(2.5rem, 5vw, 5rem);
margin-top: clamp(3.5rem, 6vw, 6rem);
}
.services-v2__card {
display: grid;
gap: 0.75rem;
padding-bottom: clamp(2rem, 3vw, 3rem);
border-bottom: 1.5px solid var(--v2-hairline);
gap: 0.9rem;
padding: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
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) {
margin-top: 4rem;
margin-top: 5rem;
}
.service-index-v2 {
color: var(--v2-primary);
font-family: var(--font-heading);
font-size: clamp(3rem, 6vw, 6rem);
line-height: 0.85;
font-size: clamp(3.5rem, 7vw, 7rem);
line-height: 0.82;
display: block;
margin-bottom: 0.5rem;
margin-bottom: 0.75rem;
opacity: 0.85;
}
.services-v2__card h3 {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
line-height: 1.1;
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
line-height: 1.05;
margin: 0;
}