feat: plakat redesign phase 1 (tokens, fonts, poster hero, header) (#74)

- New design tokens: signal red, ink and paper as RGB channels; ink and paper
  swap roles in dark mode so every component inverts cleanly
- Fonts via next/font: Bricolage Grotesque (with wdth/opsz axes), Geist,
  Geist Mono; drop Inter and Playfair
- Poster hero: kicker, giant DK0 wordmark that reacts to pointer distance
  (weight and width through a damped spring, desktop only, off for reduced
  motion), claim as h1, intro with thesis countdown, marquee strip
- Header in poster style: transparent over the red hero, paper strip with
  ink rule when scrolled or on subpages; drawer menu restyled
- Remove wavy SVG separators, CSS shader gradient, background blobs and
  unused providers that caused the pink/purple bands between sections
- Drop the global p/span/div color override so colors inherit properly
- New hero texts in de/en, tests and i18n key check updated

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
denshooter
2026-10-15 23:48:39 +02:00
committed by GitHub
parent 02914d6145
commit 96ec2d867f
19 changed files with 355 additions and 584 deletions
+19 -13
View File
@@ -30,6 +30,13 @@
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
/* Plakat-Design (RGB-Kanäle, damit Tailwind-Deckkraft funktioniert) */
--plakat-red: 232 64 47;
--plakat-ink: 20 12 11;
--plakat-paper: 246 243 241;
--plakat-paper-2: 235 230 226;
--plakat-ok: 31 157 99;
}
.dark {
@@ -52,12 +59,18 @@
--border: #44403c;
--input: #292524;
--ring: #d6d3d1;
/* Tinte und Papier tauschen die Rollen, das Rot bleibt */
--plakat-ink: 243 238 233;
--plakat-paper: 21 16 15;
--plakat-paper-2: 36 30 28;
--plakat-ok: 60 199 138;
}
body {
background: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
background: rgb(var(--plakat-paper));
color: rgb(var(--plakat-ink));
font-family: var(--font-geist), "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
@@ -70,8 +83,8 @@ body {
/* Custom Selection */
::selection {
background: var(--primary); /* Rich brown for better contrast */
color: var(--primary-foreground); /* Off-white */
background: rgb(var(--plakat-ink));
color: rgb(var(--plakat-paper));
}
/* Smooth Scrolling */
@@ -135,18 +148,11 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-playfair), Georgia, serif;
font-family: var(--font-bricolage), "Avenir Next", "Segoe UI", sans-serif;
letter-spacing: -0.02em;
font-weight: 700;
color: var(--foreground);
}
/* Improve text contrast - using foreground variable for WCAG AA compliance */
p,
span,
div {
color: var(--foreground); /* #3e2723 - meets WCAG AA standards */
}
/* Hide scrollbar but keep functionality */
::-webkit-scrollbar {