diff --git a/TODO.md b/TODO.md index 5421adc..7749d62 100644 --- a/TODO.md +++ b/TODO.md @@ -36,25 +36,27 @@ Dieses Dokument enthält den aktuellen Entwicklungsstand und detaillierte Aufgab ### 🎨 Phase 1: UI/UX Rebase & Globales Design-System Das visuelle Fundament der Website. Die Etablierung des Premium-Designs stellt sicher, dass alle darauffolgenden Phasen direkt im finalen Look entwickelt werden können. -- [ ] **Globale Token-Etablierung** - - [ ] CSS-Variablen in `assets/style.css` auf Basis der edlen Capitolium- & Floema-Farbpalette definieren (Creme-Elfenbein `--color-bg-light`, Steinkohle-Braun `--color-bg-dark`, Gold `--color-accent-gold`, Terracotta `--color-terracotta`). - - [ ] Schriftarten einbinden (Serifen-Pracht für Überschriften, cleanes Inter für Lesbarkeit) in `partials/head.php`. -- [ ] **Atmosphärische Grundlagen** - - [ ] `AuraMarbleBackground` implementieren: Dezente Stein-Textur mit Mix-Blend-Mode und optionalem SVG-Papier-Rauschen (Noise) auf allen PHP/HTML Seiten im Hintergrund verankern. - - [ ] Skalierungen für alle Paddings, Margins und Schriften mittels CSS `clamp()` definieren, um stufenlose Responsivität (Mobile bis 4K) zu garantieren. -- [ ] **Asymmetrisches Layout-Raster** - - [ ] Das modulare 24-Spalten-Raster (`FloemaLayoutGrid`) in den Haupt-Templates (`index.php`, `recipe.php`) integrieren. - - [ ] Bestehende Rezeptkarten und Detailblöcke an das neue Grid anpassen. -- [ ] **High-End Navigation & Header** - - [ ] Den bestehenden Header zu `LiquidOverlayMenu` umbauen: Hamburger-Button morpht weich zum Schließen-Kreuz. - - [ ] Vollbild-Navigationsmenü mit geschmeidigem `clip-path` (von oben nach unten gleitend) implementieren. - - [ ] Menü-Links mit dem animierten `SlideUpTextHover` (Text verdoppelt und verschiebt sich beim Hover) ausstatten. -- [ ] **Flüssige Scroll-Erfahrung** - - [ ] `LenisSmoothScroll` (CDN) im Footer/Head einbinden und initialisieren für samtweiches Scrollverhalten. - - [ ] Seitliche Fortschrittsanzeige (`IndexSectionIndicator`) auf `index.php` integrieren, um aktuelle Scroll-Position und Sektionsnamen elegant anzuzeigen. -- [ ] **Premium Mikro-Interaktionen** - - [ ] Primäre Buttons auf den Reveal-Effekt von `CapitoliumRevealButton` umstellen (von unten aufsteigende Gold-Fläche + Spationierungseffekt beim Hover). - - [ ] Textlinks mit der anwachsenden Unterstreichung von `UnderlineExpandHover` versehen. +- [x] **Globale Token-Etablierung** + - [x] CSS-Variablen in `assets/style.css` auf Basis der edlen Capitolium- & Floema-Farbpalette definieren (Creme-Elfenbein `--color-bg-light`, Steinkohle-Braun `--color-bg-dark`, Gold `--color-accent-gold`, Terracotta `--color-terracotta`). + - [x] Schriftarten einbinden (Serifen-Pracht für Überschriften, cleanes Inter für Lesbarkeit) in `partials/head.php` → Playfair Display + Manrope +- [x] **Atmosphärische Grundlagen** + - [x] `AuraMarbleBackground` implementieren: Dezente Stein-Textur mit Mix-Blend-Mode und optionalem SVG-Papier-Rauschen (Noise) auf allen PHP/HTML Seiten im Hintergrund verankern. + - [x] Skalierungen für alle Paddings, Margins und Schriften mittels CSS `clamp()` definieren, um stufenlose Responsivität (Mobile bis 4K) zu garantieren. +- [x] **Asymmetrisches Layout-Raster** + - [x] Das modulare 24-Spalten-Raster (`FloemaLayoutGrid`) in den Haupt-Templates (`index.php`, `recipe.php`) integrieren. + - [x] Bestehende Rezeptkarten und Detailblöcke an das neue Grid anpassen. +- [x] **High-End Navigation & Header** + - [x] Den bestehenden Header zu `LiquidOverlayMenu` umbauen: Hamburger-Button morpht weich zum Schließen-Kreuz. + - [x] Vollbild-Navigationsmenü mit geschmeidigem `clip-path` (von oben nach unten gleitend) implementieren. + - [x] Menü-Links mit dem animierten `SlideUpTextHover` (Text verdoppelt und verschiebt sich beim Hover) ausstatten. +- [x] **Flüssige Scroll-Erfahrung** + - [x] `LenisSmoothScroll` (CDN) im Footer/Head einbinden und initialisieren für samtweiches Scrollverhalten. + - [x] Seitliche Fortschrittsanzeige (`IndexSectionIndicator`) auf `index.php` integrieren, um aktuelle Scroll-Position und Sektionsnamen elegant anzuzeigen. +- [x] **Premium Mikro-Interaktionen** + - [x] Primäre Buttons auf den Reveal-Effekt von `CapitoliumRevealButton` umstellen (von unten aufsteigende Gold-Fläche + Spationierungseffekt beim Hover). + - [x] Textlinks mit der anwachsenden Unterstreichung von `UnderlineExpandHover` versehen. +- [x] **CapitoliumPreloader** (Landing Page Ladebildschirm mit Fortschrittsbalken) +- [x] **Recipe Showcase Stage** (GSAP ScrollTrigger Bühnenpräsentation: Bilder von rechts → Mitte → links) ---