Polish pass: improve title sizing, spacing, and responsive consistency
- Bump h2 clamp for more presence on mid-viewports - Shorten Angebot h2 to "Mein Angebot" (intro text provides full context) - Widen nav link gap and bump font size for better readability - Add responsive clamp to hero tagline - Change about portrait from 1:1 to 3:4 aspect ratio - Add underline decoration to process-title for visual consistency - Increase pricing-value font size for emphasis - Add min-height to testimonial cards for even heights in carousel - Reduce hero image min-height for shorter viewports - Add responsive overrides for coaching-card padding and about-img width Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
2efa606ea7
commit
be3ad0b04e
|
|
@ -75,7 +75,7 @@
|
||||||
<!-- Angebot Section -->
|
<!-- Angebot Section -->
|
||||||
<section id="angebot" class="section angebot">
|
<section id="angebot" class="section angebot">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="section-title section-title-center">Angebot für Bewusstseinsentwicklung und Selbstheilung</h2>
|
<h2 class="section-title section-title-center">Mein Angebot</h2>
|
||||||
|
|
||||||
<div class="angebot-intro">
|
<div class="angebot-intro">
|
||||||
<div class="rhetorical-questions">
|
<div class="rhetorical-questions">
|
||||||
|
|
|
||||||
42
styles.css
42
styles.css
|
|
@ -102,7 +102,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
|
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
|
||||||
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
|
h2 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); }
|
||||||
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
|
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -235,12 +235,12 @@ p:last-child {
|
||||||
.nav-menu {
|
.nav-menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
gap: var(--spacing-sm);
|
gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-menu a {
|
.nav-menu a {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font-size: 0.85rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding: 0.5rem 0;
|
padding: 0.5rem 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -316,7 +316,7 @@ p:last-child {
|
||||||
|
|
||||||
.hero-tagline {
|
.hero-tagline {
|
||||||
font-family: var(--font-heading);
|
font-family: var(--font-heading);
|
||||||
font-size: 1.5rem;
|
font-size: clamp(1.25rem, 2.5vw, 1.6rem);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: var(--color-text-light);
|
color: var(--color-text-light);
|
||||||
margin-bottom: var(--spacing-md);
|
margin-bottom: var(--spacing-md);
|
||||||
|
|
@ -325,7 +325,7 @@ p:last-child {
|
||||||
.hero-image {
|
.hero-image {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 500px;
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-img {
|
.hero-img {
|
||||||
|
|
@ -367,7 +367,7 @@ p:last-child {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
height: auto;
|
height: auto;
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 3/4;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
|
|
@ -442,8 +442,18 @@ p:last-child {
|
||||||
/* Process Timeline */
|
/* Process Timeline */
|
||||||
.process-title {
|
.process-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.5rem;
|
font-size: clamp(1.3rem, 2.5vw, 1.75rem);
|
||||||
margin-bottom: var(--spacing-md);
|
margin-bottom: var(--spacing-md);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-title::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 60px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color-secondary);
|
||||||
|
margin: var(--spacing-sm) auto 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-timeline {
|
.process-timeline {
|
||||||
|
|
@ -515,7 +525,7 @@ p:last-child {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 0 auto var(--spacing-md);
|
margin: 0 auto var(--spacing-md);
|
||||||
background: var(--color-white);
|
background: var(--color-white);
|
||||||
padding: var(--spacing-md);
|
padding: var(--spacing-md) 2.5rem;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: var(--shadow-sm);
|
||||||
border-left: 4px solid var(--color-secondary);
|
border-left: 4px solid var(--color-secondary);
|
||||||
|
|
@ -562,8 +572,9 @@ p:last-child {
|
||||||
.pricing-value {
|
.pricing-value {
|
||||||
display: block;
|
display: block;
|
||||||
font-family: var(--font-heading);
|
font-family: var(--font-heading);
|
||||||
font-size: 1.5rem;
|
font-size: 1.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-note {
|
.pricing-note {
|
||||||
|
|
@ -636,6 +647,7 @@ p:last-child {
|
||||||
|
|
||||||
.testimonial-card {
|
.testimonial-card {
|
||||||
flex: 0 0 calc((100% - 48px) / 3);
|
flex: 0 0 calc((100% - 48px) / 3);
|
||||||
|
min-height: 300px;
|
||||||
background: var(--color-bg);
|
background: var(--color-bg);
|
||||||
padding: var(--spacing-md);
|
padding: var(--spacing-md);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
|
|
@ -1064,10 +1076,14 @@ p:last-child {
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-image {
|
.hero-image {
|
||||||
min-height: 350px;
|
min-height: 300px;
|
||||||
order: -1;
|
order: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.coaching-card {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
.about-grid {
|
.about-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
@ -1095,6 +1111,11 @@ p:last-child {
|
||||||
|
|
||||||
.testimonial-card {
|
.testimonial-card {
|
||||||
flex: 0 0 calc((100% - 24px) / 2);
|
flex: 0 0 calc((100% - 24px) / 2);
|
||||||
|
min-height: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-img {
|
||||||
|
max-width: 320px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1175,6 +1196,7 @@ p:last-child {
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.testimonial-card {
|
.testimonial-card {
|
||||||
flex: 0 0 100%;
|
flex: 0 0 100%;
|
||||||
|
min-height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-timeline::before {
|
.process-timeline::before {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue