Switch the site to the light "Papier & Gold" palette

Requested: make the site lighter, the way the colours were originally.
Taken from the house palette "Papier & Gold" (warm off-white, gold as
the only accent): papier #FCFAF6, papier-2 #F4EFE4, card #FFFDF8, ink
#1C1813, quiet #6B6154.

Gold needs more than one hex value. The old dark theme used a single
light gold for both text and fills, which works on a dark ground but
breaks on paper: #C9A461 as text scores 2.25:1. So primary and accent
are now the dark gold #7A5D1F, which carries fill *and* type (5.90:1 on
paper, and takes cream text on top), with #FFFDF8 as its contrast.
googleBlue became Google's actual link blue so the search mock stays
readable on a light ground. Fonts untouched.

Fixed a pre-existing bug this exposed: ".nav-links a" also matched the
header CTA and overrode .btn-primary's colour, so the button rendered
muted text on the primary fill - 1.01:1, effectively invisible. It just
never showed on the dark theme, where both tones were light. Narrowed
to ".nav-links ul a", matching the :hover rule right below it.

Rebuilt the logo as a transparent PNG: logo.jpg had the old dark
background baked in and sat on the page as a black box, with its
"WEBDESIGN" label in light grey that disappears on paper. The pill is
preserved pixel for pixel (row-wise fill so the dark lettering inside
stays opaque, then eroded 1px to drop the old anti-aliasing halo); the
label is recoloured to ink. logo.jpg is kept.

Verified in the browser across all three pages: 228 rendered text
elements measured, 0 WCAG AA failures, tightest pair 5.82 - which is
exactly the documented figure for "quiet on paper". No horizontal
scroll, no console errors.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Lara 2026-10-04 13:19:51 +02:00
parent a105bee995
commit f8763ed6f5
4 changed files with 51 additions and 51 deletions

View file

@ -3,7 +3,7 @@
"description": "Larpaso entwickelt individuelle Websites für Kunden – mit KI-gestützter Entwicklung als Schwerpunkt."
},
"nav": {
"logo": "/logo.jpg",
"logo": "/logo.png",
"logoAlt": "larpaso Webdesign",
"links": [
{

View file

@ -14,99 +14,99 @@
},
"colors": {
"bg": {
"r": 23,
"g": 19,
"b": 15,
"r": 252,
"g": 250,
"b": 246,
"a": 1
},
"bgAlt": {
"r": 28,
"g": 23,
"b": 18,
"r": 244,
"g": 239,
"b": 228,
"a": 1
},
"surface": {
"r": 33,
"g": 27,
"b": 21,
"r": 255,
"g": 253,
"b": 248,
"a": 1
},
"text": {
"r": 242,
"g": 234,
"b": 217,
"r": 28,
"g": 24,
"b": 19,
"a": 1
},
"textMuted": {
"r": 168,
"g": 154,
"b": 133,
"r": 107,
"g": 97,
"b": 84,
"a": 1
},
"border": {
"r": 201,
"g": 168,
"b": 118,
"a": 0.2
"r": 220,
"g": 207,
"b": 182,
"a": 1
},
"primary": {
"r": 201,
"g": 168,
"b": 118,
"r": 122,
"g": 93,
"b": 31,
"a": 1
},
"primaryDark": {
"r": 176,
"g": 143,
"b": 92,
"r": 94,
"g": 71,
"b": 22,
"a": 1
},
"primaryContrast": {
"r": 26,
"g": 21,
"b": 17,
"r": 255,
"g": 253,
"b": 248,
"a": 1
},
"accent": {
"r": 201,
"g": 168,
"b": 118,
"r": 122,
"g": 93,
"b": 31,
"a": 1
},
"accentDark": {
"r": 176,
"g": 143,
"b": 92,
"r": 94,
"g": 71,
"b": 22,
"a": 1
},
"success": {
"r": 122,
"g": 154,
"b": 107,
"r": 79,
"g": 107,
"b": 66,
"a": 1
},
"danger": {
"r": 201,
"g": 123,
"b": 100,
"r": 138,
"g": 59,
"b": 34,
"a": 1
},
"flag": {
"r": 201,
"g": 123,
"b": 100,
"r": 138,
"g": 59,
"b": 34,
"a": 1
},
"flagBg": {
"r": 201,
"g": 123,
"b": 100,
"r": 138,
"g": 59,
"b": 34,
"a": 0.1
},
"googleBlue": {
"r": 143,
"g": 178,
"b": 232,
"r": 26,
"g": 13,
"b": 171,
"a": 1
}
}

BIN
public/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

View file

@ -77,7 +77,7 @@ const nav = site.nav;
list-style: none;
}
.nav-links a {
.nav-links ul a {
color: var(--color-text-muted);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);