perf: 100% Lighthouse score — contrast, CLS, caching fixes

- Font preload eliminates layout shift (CLS 0)
- Dual accent colors: --accent for filled buttons, --accent-text for text on dark bg
- All WCAG AA contrast ratios met (buttons, links, badges, countdown)
- Language picker: position absolute instead of fixed
- CoinGecko rates proxied with 2min server-side cache (no CORS, no rate limit)
- English as default inline text (no empty→text shift)
This commit is contained in:
Alexander Schmidt
2026-03-25 17:18:41 +01:00
parent cf3c43ff67
commit 787168b248
3 changed files with 48 additions and 15 deletions

View File

@@ -23,8 +23,9 @@
--border: #333;
--text: #e0e0e0;
--text-muted: #888;
--accent: #ff6600;
--accent-hover: #ff8533;
--accent: #c74a00;
--accent-hover: #a83f00;
--accent-text: #e87830;
--success: #4caf50;
--error: #f44336;
--radius: 8px;
@@ -54,7 +55,7 @@ header {
}
.lang-picker {
position: fixed;
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 50;
@@ -119,7 +120,7 @@ header {
}
.lang-option.active {
color: var(--accent);
color: var(--accent-text);
}
header h1 {
@@ -138,7 +139,7 @@ header h1 a:hover {
}
header h1 span {
color: var(--accent);
color: var(--accent-text);
}
header p {
@@ -590,8 +591,8 @@ textarea {
.btn-new {
margin-top: 0.8rem;
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
border: 1px solid var(--accent-text);
color: var(--accent-text);
}
.btn-new:hover {
@@ -628,7 +629,7 @@ footer {
}
footer a {
color: var(--accent);
color: var(--accent-text);
text-decoration: underline;
}
@@ -644,7 +645,7 @@ footer a {
}
.countdown.active {
color: var(--accent);
color: var(--accent-text);
}
@media (max-width: 500px) {