Trust-Icons repariert, Gelb heller statt braun
- .trust span traf auch den Icon-Chip (selbst ein span): Icon rutschte aus dem Kreis und war dunkel. Selektor auf die Unterzeile eingegrenzt. - Gelbe Display-Schrift jetzt helles Markengelb mit dunkler Kontur wie im Logo statt sun-600/700 (las als Braun). Kleine gelbe Texte und Links auf Ink umgestellt, Icon-Chips im Verein hellgelb mit Ink-Icon. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5.5 committed
1 parent
2defdc9856
commit
6bd5c12d3e
7 files changed
+42
-12
No files matched your search
@@ -111,6 +111,16 @@ in der dunkleren Stufe derselben Familie: auf `--sun-200` `--sky-600` 4.43 · `-
|
||||
4.11 · `--coral-600` 3.93; auf `--sky-100` 4.35 · 4.04 · 3.87. Fließtext auf getöntem Grund
|
||||
ist `--ink-700` (≥ 11.0).
|
||||
|
||||
**Gelb als Schrift (2026-09-24, dritte Rückmeldung: „geht mehr auf Braun als Gelb").**
|
||||
Ein Gelb, das auf hellem Grund 3:1 erreicht, liegt bei Leuchtdichte ≤ 0.3 — und das ist
|
||||
bei diesem Farbton zwangsläufig Ocker/Braun (`--sun-600`, `--sun-700`). Heller geht nur,
|
||||
wenn nicht die Füllung den Kontrast trägt. Lösung aus dem Logo übernommen: helles
|
||||
Markengelb `--sun-400` mit dunkler Kontur (`-webkit-text-stroke` in `--ink-700`,
|
||||
`paint-order: stroke fill`), wie die umrandeten Buchstaben der Wortmarke. Gilt nur für
|
||||
Displaygrößen (H1-Zeile, Band-Überschrift Verein). Kleinere gelbe Texte gibt es nicht
|
||||
mehr: `Lied vom Hilfe Verein` steht in Ink, Links auf der Vereinsseite in Ink mit 3px
|
||||
gelber Unterstreichung. Icon-Chips auf der Vereinsseite: `--sun-400` mit Ink-Icon (8.67).
|
||||
|
||||
### 2. Kontrast
|
||||
|
||||
Guardrail: *„Graue Schrift auf farbigem Grund."* Gemessen statt geschätzt:
|
||||
|
||||
+27
-7
@@ -127,6 +127,9 @@
|
||||
--accent-text:var(--sun-700);
|
||||
--accent-soft:var(--sun-200);
|
||||
--accent-line:var(--sun-400);
|
||||
/* Icon-Chips im hellen Gelb statt sun-600 (las als Braun). Weißes Icon darauf
|
||||
wäre 1.6 — deshalb Ink-Icon: 8.67. */
|
||||
--chip-bg:var(--sun-400); --chip-fg:var(--ink-700);
|
||||
}
|
||||
|
||||
/* ============================================================ BASE */
|
||||
@@ -141,6 +144,8 @@ h1{font:var(--t-display)} h2{font:var(--t-h2)} h3{font:var(--t-h3)}
|
||||
p{margin:0}
|
||||
img{max-width:100%; display:block}
|
||||
a{color:var(--accent-text); text-underline-offset:3px}
|
||||
/* Verein: Links in Ink mit dicker gelber Unterstreichung statt braunem Text. */
|
||||
.page-verein main a:not(.btn){color:var(--ink-700); text-decoration-color:var(--sun-400); text-decoration-thickness:3px}
|
||||
a:hover{color:var(--sky-600)}
|
||||
|
||||
.wrap{max-width:var(--page-max); margin:0 auto; padding-inline:var(--page-pad-x)}
|
||||
@@ -291,9 +296,17 @@ a:hover{color:var(--sky-600)}
|
||||
fielen die Buntwerte auf ~3.0-3.1 — knapp an der Schwelle. Deshalb die dunklere
|
||||
Stufe derselben Familie: auf sky-100 4.35 / 4.04 / 3.87, auf sun-200 4.43 / 4.11 / 3.93. */
|
||||
.hero .hl .c-sky{color:var(--sky-600)}
|
||||
.hero .hl .c-sun{color:var(--sun-700)}
|
||||
/* Gelb: dunkles Gelb, das auf hellem Grund lesbar bleibt, ist zwangsläufig Braun
|
||||
(sun-600/700 wurden vom Kunden am 2026-09-24 als "braun statt gelb" zurückgewiesen).
|
||||
Deshalb helles Markengelb mit dunkler Kontur — wie die Buchstaben im Logo. Lesbar
|
||||
macht die Kontur: ink-700 gegen den Grund misst ≥11. paint-order legt sie unter die
|
||||
Füllung, damit die Buchstaben nicht dünner werden. */
|
||||
.hero .hl .c-sun, .yellow-type{
|
||||
color:var(--sun-400);
|
||||
-webkit-text-stroke:6px var(--ink-700); paint-order:stroke fill;
|
||||
}
|
||||
.hero .hl .c-coral{color:var(--coral-600)}
|
||||
.hero .trust span{color:var(--ink-700)}
|
||||
.hero .trust b + span{color:var(--ink-700)}
|
||||
|
||||
.hero__sub{font:var(--t-body); color:var(--ink-700); max-width:34ch}
|
||||
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-3)}
|
||||
@@ -308,11 +321,14 @@ a:hover{color:var(--sky-600)}
|
||||
.trust{display:flex; align-items:center; gap:10px}
|
||||
.trust__chip{
|
||||
width:30px; height:30px; flex:none; border-radius:var(--radius-circle,50%);
|
||||
display:grid; place-items:center; background:var(--accent); color:#fff; /* Icon 3.86 / 3.92 */
|
||||
display:grid; place-items:center; background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff); /* Icon 3.86 */
|
||||
}
|
||||
.trust svg{width:15px; height:15px; flex:none}
|
||||
.trust b{display:block; font:700 15px/1.3 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)}
|
||||
.trust span{display:block; font:var(--t-small); color:var(--ink-500)}
|
||||
/* Nur die Unterzeile treffen — .trust__chip ist selbst ein <span>, und ein blankes
|
||||
".trust span" setzte ihm display:block und die Textfarbe: Icon aus dem Kreis
|
||||
gerutscht und dunkel statt weiß. */
|
||||
.trust b + span{display:block; font:var(--t-small); color:var(--ink-500)}
|
||||
|
||||
/* Schwachstelle des Handoffs behoben: die fixen Stopps (430/560/820px) decken das Foto
|
||||
unter ~820px fast vollständig zu. Unter 820px stapelt der Hero jetzt — Foto oben,
|
||||
@@ -354,7 +370,7 @@ a:hover{color:var(--sky-600)}
|
||||
.sh{display:flex; align-items:center; gap:14px; margin-bottom:var(--space-6)}
|
||||
.sh__chip{
|
||||
width:44px; height:44px; flex:none; border-radius:var(--radius-m);
|
||||
display:grid; place-items:center; background:var(--accent); color:#fff; /* Icon: Grafik-Schwelle 3.0 */
|
||||
display:grid; place-items:center; background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff); /* Icon: Grafik-Schwelle 3.0 */
|
||||
transform:rotate(-3deg);
|
||||
}
|
||||
.sh svg{width:22px; height:22px; flex:none}
|
||||
@@ -418,7 +434,10 @@ a:hover{color:var(--sky-600)}
|
||||
box-shadow:var(--shadow-card); padding:var(--space-6); display:grid; gap:var(--space-4);
|
||||
}
|
||||
.song__top{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
|
||||
.song__top h3{color:var(--accent-text)} /* nicht --accent: 20px/600 zaehlt nicht als
|
||||
.song__top h3{color:var(--accent-text)}
|
||||
/* Auf der Vereinsseite wäre das Braun — 20px ist zu klein für die Kontur-Lösung.
|
||||
Ink trägt den Text, die gelbe Badge daneben trägt die Farbe. */
|
||||
.page-verein .song__top h3{color:var(--ink-700)} /* nicht --accent: 20px/600 zaehlt nicht als
|
||||
Large Text, sky-500 misst dort nur 3.86. accent-text = 5.60 bzw. 5.20. */
|
||||
.badge{
|
||||
font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
|
||||
@@ -447,7 +466,8 @@ a:hover{color:var(--sky-600)}
|
||||
.band__copy{display:grid; gap:var(--space-4); justify-items:start}
|
||||
/* Guardrail: kein Grau auf farbigem Grund. Ink-700 = 13.20 auf Creme. */
|
||||
.band__copy p{color:var(--ink-700); max-width:46ch}
|
||||
.band__copy h2{color:var(--accent-text)} /* 4.43 bzw. 4.04 auf den kräftigeren Bändern */
|
||||
.band__copy h2{color:var(--accent-text)} /* 4.43 auf sun-200 */
|
||||
.page-verein .band__copy h2{color:var(--sun-400); -webkit-text-stroke:5px var(--ink-700); paint-order:stroke fill}
|
||||
.band__copy .label{color:var(--ink-700)}
|
||||
.band img{width:100%; max-width:380px; justify-self:center}
|
||||
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b433e05d" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b433e05d" />
|
||||
</head>
|
||||
<body class="page-verein">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b433e05d" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b433e05d" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b433e05d" />
|
||||
</head>
|
||||
<body class="page-shop parked">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
Reference in new issue
Block a user