Bring back the dark bands for offer and contact
The original prototype broke up the light page with two dark "Nacht" bands (#1E1A14): the offer right after the hero, and the contact at the end. Restored as .section-dark, which redefines the color variables instead of overriding single rules, so cards, buttons, form fields and placeholders all turn with it. Measured in the rendered DOM: 42 text elements, 0 WCAG AA failures; form field borders 3.41:1. Also fixes the missing space in "der Datenschutzerklärung" below the contact form (Astro dropped the line break before the link). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
85c63cd714
commit
c2e0b22977
2 changed files with 38 additions and 3 deletions
|
|
@ -30,7 +30,7 @@ const { hero, warum, preis, highlights, leistungen, mappe, ablauf, about, faq, k
|
|||
</section>
|
||||
|
||||
<!-- Preis / Startangebot -->
|
||||
<section id="preis" class="section-tight">
|
||||
<section id="preis" class="section-tight section-dark">
|
||||
<div class="container price-grid">
|
||||
<div class="price-main">
|
||||
<p class="eyebrow">{preis.eyebrow}</p>
|
||||
|
|
@ -231,7 +231,7 @@ const { hero, warum, preis, highlights, leistungen, mappe, ablauf, about, faq, k
|
|||
</section>
|
||||
|
||||
<!-- Kontakt -->
|
||||
<section id="kontakt" class="section-tight contact">
|
||||
<section id="kontakt" class="section-tight section-dark contact">
|
||||
<div class="container contact-grid">
|
||||
<div class="contact-intro">
|
||||
<p class="eyebrow">{kontakt.eyebrow}</p>
|
||||
|
|
@ -296,7 +296,7 @@ const { hero, warum, preis, highlights, leistungen, mappe, ablauf, about, faq, k
|
|||
<button type="submit" class="btn btn-primary form-submit">Anfrage abschicken</button>
|
||||
<p class="form-note">
|
||||
Das Formular öffnet Ihr E-Mail-Programm mit fertig ausgefülltem Text. Es geht nichts an
|
||||
Dritte. Wie wir mit Ihren Angaben umgehen, steht in der
|
||||
Dritte. Wie wir mit Ihren Angaben umgehen, steht in der{' '}
|
||||
<a href="/datenschutz">Datenschutzerklärung</a>.
|
||||
</p>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -196,6 +196,41 @@ textarea {
|
|||
padding-block: var(--space-7);
|
||||
}
|
||||
|
||||
/* Dunkles Band (aus dem Prototyp "Nacht"): Angebot und Kontakt.
|
||||
Die Farben werden hier als Variablen neu gesetzt, damit Text, Karten,
|
||||
Buttons und Formularfelder darin automatisch mitdrehen - keine
|
||||
Einzelregeln, die gegen Bauteilklassen verlieren koennten.
|
||||
Kontraste auf #1E1A14: Text 15,0 · leise 9,9 · Gold 9,1 · Rand 3,8. */
|
||||
.section-dark {
|
||||
--color-bg: #1e1a14;
|
||||
--color-bg-alt: #2a241b;
|
||||
--color-surface: #2a241b;
|
||||
--color-text: #f5eee2;
|
||||
--color-text-muted: #cfc2ac;
|
||||
--color-border: #82755f;
|
||||
--color-primary: #d8b87e;
|
||||
--color-primary-dark: #e8d2a6;
|
||||
--color-primary-contrast: #241c0b;
|
||||
--color-accent: #d8b87e;
|
||||
--color-accent-dark: #e8d2a6;
|
||||
--color-flag: #e0836a;
|
||||
--color-flag-bg: rgba(224, 131, 106, 0.14);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
padding-block: var(--space-9);
|
||||
}
|
||||
|
||||
.section-dark h1,
|
||||
.section-dark h2,
|
||||
.section-dark h3 {
|
||||
color: #fffaf2;
|
||||
}
|
||||
|
||||
.section-dark ::placeholder {
|
||||
color: #9a8f7b;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
color: var(--color-primary);
|
||||
|
|
|
|||
Loading…
Reference in a new issue