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." "description": "Larpaso entwickelt individuelle Websites für Kunden – mit KI-gestützter Entwicklung als Schwerpunkt."
}, },
"nav": { "nav": {
"logo": "/logo.jpg", "logo": "/logo.png",
"logoAlt": "larpaso Webdesign", "logoAlt": "larpaso Webdesign",
"links": [ "links": [
{ {

View file

@ -14,99 +14,99 @@
}, },
"colors": { "colors": {
"bg": { "bg": {
"r": 23, "r": 252,
"g": 19, "g": 250,
"b": 15, "b": 246,
"a": 1 "a": 1
}, },
"bgAlt": { "bgAlt": {
"r": 28, "r": 244,
"g": 23, "g": 239,
"b": 18, "b": 228,
"a": 1 "a": 1
}, },
"surface": { "surface": {
"r": 33, "r": 255,
"g": 27, "g": 253,
"b": 21, "b": 248,
"a": 1 "a": 1
}, },
"text": { "text": {
"r": 242, "r": 28,
"g": 234, "g": 24,
"b": 217, "b": 19,
"a": 1 "a": 1
}, },
"textMuted": { "textMuted": {
"r": 168, "r": 107,
"g": 154, "g": 97,
"b": 133, "b": 84,
"a": 1 "a": 1
}, },
"border": { "border": {
"r": 201, "r": 220,
"g": 168, "g": 207,
"b": 118, "b": 182,
"a": 0.2 "a": 1
}, },
"primary": { "primary": {
"r": 201, "r": 122,
"g": 168, "g": 93,
"b": 118, "b": 31,
"a": 1 "a": 1
}, },
"primaryDark": { "primaryDark": {
"r": 176, "r": 94,
"g": 143, "g": 71,
"b": 92, "b": 22,
"a": 1 "a": 1
}, },
"primaryContrast": { "primaryContrast": {
"r": 26, "r": 255,
"g": 21, "g": 253,
"b": 17, "b": 248,
"a": 1 "a": 1
}, },
"accent": { "accent": {
"r": 201, "r": 122,
"g": 168, "g": 93,
"b": 118, "b": 31,
"a": 1 "a": 1
}, },
"accentDark": { "accentDark": {
"r": 176, "r": 94,
"g": 143, "g": 71,
"b": 92, "b": 22,
"a": 1 "a": 1
}, },
"success": { "success": {
"r": 122, "r": 79,
"g": 154, "g": 107,
"b": 107, "b": 66,
"a": 1 "a": 1
}, },
"danger": { "danger": {
"r": 201, "r": 138,
"g": 123, "g": 59,
"b": 100, "b": 34,
"a": 1 "a": 1
}, },
"flag": { "flag": {
"r": 201, "r": 138,
"g": 123, "g": 59,
"b": 100, "b": 34,
"a": 1 "a": 1
}, },
"flagBg": { "flagBg": {
"r": 201, "r": 138,
"g": 123, "g": 59,
"b": 100, "b": 34,
"a": 0.1 "a": 0.1
}, },
"googleBlue": { "googleBlue": {
"r": 143, "r": 26,
"g": 178, "g": 13,
"b": 232, "b": 171,
"a": 1 "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; list-style: none;
} }
.nav-links a { .nav-links ul a {
color: var(--color-text-muted); color: var(--color-text-muted);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);