Feinschliff: Formulare neu, Glas global dunkler, Hero-Fade sauber
Formulare (form-field.php, 3 Form-Wrapper, components.css, form.js): - Floating Labels (Label im Feld, wandert bei Fokus/Inhalt hoch; select/date dauerhaft oben) via :has() + placeholder=" "-Trick. Echtes <label> bleibt im DOM (kein Placeholder-als-Label). - Globale "Pflichtfelder mit *"-Hinweiszeile entfernt; Stern bleibt am Feld, pro Feld als visually-hidden "(Pflichtfeld)" für Screenreader erklärt. - Markenroter Fokus-Ring statt Weiß. - Felder als sanfter Füll-Look: weichere Ränder (eigene --clr-field-*-Tokens), Erkennbarkeit über Fläche + Rand (WCAG 1.4.11 erfüllt). - form.js: Submit-Button-Text wird je Formular korrekt wiederhergestellt. Glas-Look global (tokens.css, components.css): - Frosted Glass zentral: --glass-blur + --glass-shadow (Glow + Top-Sheen), eine Regel statt 28× wiederholt; Leaf-Karten mit Blur, Container nur Glow (kein Doppel-Frost). @supports-Fallback. - Dunkleres Glas (--clr-glass-bg auf Schwarz-Tint), dezenter Card-Rand. Hero-Fade (components.css): - Unterer Auslauf nicht mehr mit grauem --clr-bg zugedeckt, sondern .hero__media per mask-image ausgeblendet → echter dunkler, texturierter Hintergrund scheint durch (schwärzer, durchsichtig, kein graues Band). Abdunklung auf reines Schwarz. Gilt für alle drei Hero-Varianten. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
This commit is contained in:
@@ -22,6 +22,11 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
/* Unten ausblenden statt mit grauem BG zudecken: der echte, dunkle
|
||||
texturierte Seiten-Hintergrund scheint durch → transparent & matcht
|
||||
den Grund exakt (kein graues, opakes Band mehr). */
|
||||
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 92%);
|
||||
mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 92%);
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
@@ -44,12 +49,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Dunkler Verlauf wie auf der alten Seite: oben transparent → unten Seitenhintergrund */
|
||||
/* Reine Schwarz-Abdunklung (kein grauer Fill) — der Auslauf zum Grund kommt
|
||||
aus der Mask auf .hero__media, hier wird nur schwärzer getönt. */
|
||||
.hero__media::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgb(20 20 20 / 0.25) 0%, rgb(20 20 20 / 0.55) 55%, var(--clr-bg) 100%);
|
||||
background: linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.15) 45%, rgb(0 0 0 / 0.5) 100%);
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
@@ -110,14 +116,14 @@
|
||||
/* zusätzlicher Verlauf von links für Textlesbarkeit über dem Video */
|
||||
background:
|
||||
linear-gradient(90deg, rgb(10 10 10 / 0.62) 0%, rgb(10 10 10 / 0.25) 45%, transparent 70%),
|
||||
linear-gradient(180deg, rgb(20 20 20 / 0.2) 0%, rgb(20 20 20 / 0.45) 55%, var(--clr-bg) 100%);
|
||||
linear-gradient(180deg, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0.15) 45%, rgb(0 0 0 / 0.5) 100%);
|
||||
}
|
||||
|
||||
/* Center+Display: kein Seitenverlauf, nur zentrales Abdunkeln für Lesbarkeit */
|
||||
.hero--center.hero--display .hero__media::after {
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% 40%, rgb(10 10 10 / 0.5) 0%, transparent 100%),
|
||||
linear-gradient(180deg, rgb(20 20 20 / 0.2) 0%, rgb(20 20 20 / 0.5) 55%, var(--clr-bg) 100%);
|
||||
linear-gradient(180deg, rgb(0 0 0 / 0.4) 0%, rgb(0 0 0 / 0.14) 45%, rgb(0 0 0 / 0.5) 100%);
|
||||
}
|
||||
|
||||
.hero__kicker {
|
||||
@@ -1243,44 +1249,69 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating Label: Label liegt im leeren Feld wie ein Platzhalter und wandert bei
|
||||
Fokus oder Inhalt nach oben. Rein visuell — das echte <label for> bleibt im DOM
|
||||
(kein Placeholder-als-Label), darum auch für Screenreader voll nutzbar. */
|
||||
.form__field {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.form__field label {
|
||||
font-size: var(--fs-500);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form__field input,
|
||||
.form__field select,
|
||||
.form__field textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border-strong);
|
||||
padding: 1.45rem 0.85rem 0.5rem;
|
||||
background: var(--clr-field-bg);
|
||||
border: 1px solid var(--clr-field-border);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--clr-text);
|
||||
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
/* Label im Ruhezustand — sitzt auf der Eingabezeile (deckt das " "-Placeholder) */
|
||||
.form__field:not(.form__field--checkbox) > label {
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
top: 1.4rem;
|
||||
font-size: var(--fs-500);
|
||||
line-height: 1;
|
||||
color: var(--clr-text-muted);
|
||||
pointer-events: none;
|
||||
transform-origin: left top;
|
||||
transition: transform var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
/* Geschwebt: bei Fokus, bei vorhandenem Inhalt (placeholder=" "-Trick) sowie
|
||||
dauerhaft für Select und Datumsfelder (haben keinen :placeholder-shown-Zustand). */
|
||||
.form__field:not(.form__field--checkbox):has(input:focus) > label,
|
||||
.form__field:not(.form__field--checkbox):has(textarea:focus) > label,
|
||||
.form__field:not(.form__field--checkbox):has(select:focus) > label,
|
||||
.form__field:not(.form__field--checkbox):has(input:not(:placeholder-shown)) > label,
|
||||
.form__field:not(.form__field--checkbox):has(textarea:not(:placeholder-shown)) > label,
|
||||
.form__field:not(.form__field--checkbox):has(select) > label,
|
||||
.form__field:not(.form__field--checkbox):has(input[type="date"]) > label {
|
||||
transform: translateY(-0.95rem) scale(0.78);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.form__field input:hover,
|
||||
.form__field select:hover,
|
||||
.form__field textarea:hover {
|
||||
border-color: rgb(255 255 255 / 0.55);
|
||||
border-color: var(--clr-field-border-hover);
|
||||
}
|
||||
|
||||
/* Eigener, deutlich sichtbarer Fokus-Ring statt des globalen Outlines */
|
||||
/* Markenroter Fokus-Ring (Akzent nur als Rahmen/Glow, nie als Text). */
|
||||
.form__field input:focus-visible,
|
||||
.form__field select:focus-visible,
|
||||
.form__field textarea:focus-visible {
|
||||
outline: none;
|
||||
border-color: rgb(255 255 255 / 0.75);
|
||||
box-shadow: 0 0 0 3px rgb(255 255 255 / 0.18);
|
||||
border-color: var(--clr-accent);
|
||||
box-shadow: 0 0 0 3px rgb(var(--clr-accent-rgb) / 0.3);
|
||||
}
|
||||
|
||||
/* Der " "-Platzhalter aus dem Floating-Trick bleibt unsichtbar */
|
||||
.form__field ::placeholder {
|
||||
color: rgb(255 255 255 / 0.45);
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Fehlerzustand: per JS (aria-invalid) und nativ nach Nutzereingabe (:user-invalid) */
|
||||
@@ -1306,22 +1337,18 @@
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.form__note {
|
||||
margin: 0;
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.form__required {
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.form__hint {
|
||||
margin-top: 0.4rem;
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.form__error-msg {
|
||||
margin-top: 0.4rem;
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-error);
|
||||
}
|
||||
@@ -1337,6 +1364,7 @@
|
||||
}
|
||||
|
||||
.form__field--checkbox {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: start;
|
||||
gap: 0.6rem;
|
||||
@@ -4315,3 +4343,67 @@
|
||||
min-height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
FROSTED GLASS — globaler Look für alle Glas-Oberflächen.
|
||||
EINZIGE Stelle für Blur + Ruhe-Glow (DRY statt 28× wiederholt).
|
||||
Neue Glas-Karte? Hier zur passenden Liste ergänzen:
|
||||
• Leaf = eigenständige Karte → bekommt Blur + Glow
|
||||
• Container = umschließt selbst Glas-Karten → nur Glow
|
||||
(kein Blur, sonst Doppel-Frost bei verschachtelten Karten)
|
||||
Bewusst ausgenommen: Form-Inputs, Wappen-Initialen, Banner-/Slider-Controls.
|
||||
Glas-Bg/-Border kommen weiterhin aus den Komponenten (var(--clr-glass-*)).
|
||||
============================================================ */
|
||||
|
||||
/* Ruhe-Glow + Top-Sheen für ALLE Glas-Flächen (Leaf + Container).
|
||||
Hover-Lift bleibt pro Komponente erhalten (:hover hat höhere Spezifität). */
|
||||
.instagram__fallback,
|
||||
.sponsor-channels__card,
|
||||
.person-card,
|
||||
.position-card,
|
||||
.partners__item,
|
||||
.key-facts__item,
|
||||
.bento__tile,
|
||||
.group-card,
|
||||
.group-tabs__panel,
|
||||
.age-group,
|
||||
.match-card,
|
||||
.match-list,
|
||||
.matchcenter-empty,
|
||||
.roster-card,
|
||||
.team-card,
|
||||
.department-choice__card,
|
||||
.legal__card,
|
||||
.fee-table,
|
||||
.league-table,
|
||||
.membership-card,
|
||||
.sportheim-bento__addr,
|
||||
.form {
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
/* Echtes Frosted-Glass-Blur nur auf Leaf-Karten — Container (.match-list,
|
||||
.group-tabs__panel, .age-group, Tabellen) bleiben blur-frei, damit darin
|
||||
liegende Glas-Karten nicht doppelt verschwimmen. */
|
||||
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||
.instagram__fallback,
|
||||
.sponsor-channels__card,
|
||||
.person-card,
|
||||
.position-card,
|
||||
.partners__item,
|
||||
.key-facts__item,
|
||||
.bento__tile,
|
||||
.group-card,
|
||||
.match-card,
|
||||
.matchcenter-empty,
|
||||
.roster-card,
|
||||
.team-card,
|
||||
.department-choice__card,
|
||||
.legal__card,
|
||||
.membership-card,
|
||||
.sportheim-bento__addr,
|
||||
.form {
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user