Light Mode: Kontrast-Fixes für Hero + Locations
User meldete schlechte Lesbarkeit im Light Mode. Probleme: 1. Hero-H1 Gradient (Gold→Weiß→Bordeaux) verschwand auf cremefarbenem Light-Background. Fix: Light-Mode-Override mit kräftigem Bordeaux→Dunkelrot Gradient (#8b1538 → #4a0e1a), ohne Text-Shadow. 2. Hero-Untertitel '.where' (Gold-Akzent) auf hellem BG zu blass. Fix: Light-Mode-Override mit Bordeaux. 3. Section-Titel-Akzentbalken (Gold→transparent) unsichtbar auf hellem BG. Fix: Light-Mode-Override mit Akzent→bg-3 Gradient + Opacity 0.7. 4. Location-Card Kategorie-Tags (Akzentfarbe auf hellem BG) teils grenzwertig. Fix: font-weight 700→800 + Light-Mode-Override mit color-mix 80% cat-color + 20% dunkelbraun für mehr Tiefe. Visuell verifiziert per Browser-Snapshot im Light Mode.
This commit is contained in:
+19
-1
@@ -196,6 +196,13 @@
|
|||||||
text-shadow: 0 0 40px rgba(212,160,23,0.3);
|
text-shadow: 0 0 40px rgba(212,160,23,0.3);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
[data-theme="light"] .hero h1 {
|
||||||
|
background: linear-gradient(135deg, var(--bordeaux) 0%, #4a0e1a 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
.hero .sub {
|
.hero .sub {
|
||||||
font-size: clamp(16px, 2.2vw, 22px);
|
font-size: clamp(16px, 2.2vw, 22px);
|
||||||
color: var(--text-strong);
|
color: var(--text-strong);
|
||||||
@@ -209,6 +216,9 @@
|
|||||||
margin: 8px 0 16px;
|
margin: 8px 0 16px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
[data-theme="light"] .hero .where {
|
||||||
|
color: var(--bordeaux);
|
||||||
|
}
|
||||||
.hero-meta {
|
.hero-meta {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -249,6 +259,10 @@
|
|||||||
background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
|
background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
}
|
}
|
||||||
|
[data-theme="light"] .section-title .bar {
|
||||||
|
background: linear-gradient(90deg, var(--accent) 0%, var(--bg-3) 80%);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
.section-subtitle {
|
.section-subtitle {
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -435,9 +449,13 @@
|
|||||||
color: var(--cat-color);
|
color: var(--cat-color);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
|
[data-theme="light"] .loc-card .meta {
|
||||||
|
/* Dunklere Variante der Akzentfarbe für besseren Kontrast auf hellem Card-Hintergrund */
|
||||||
|
color: color-mix(in srgb, var(--cat-color) 80%, #1a0e0a);
|
||||||
|
}
|
||||||
.loc-card .addr {
|
.loc-card .addr {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
|
|||||||
Reference in New Issue
Block a user