diff --git a/DESIGN_GUIDE.md b/DESIGN_GUIDE.md new file mode 100644 index 0000000..fce8c0a --- /dev/null +++ b/DESIGN_GUIDE.md @@ -0,0 +1,526 @@ +# FlixCooks Design-System & Feature-Katalog + +Dieses Dokument dient als zentrale Design-Richtlinie und Anweisungs-Katalog für die KI, um das visuelle Erscheinungsbild und die Interaktionen der Website **FlixCooks** auf ein absolut erstklassiges Premium-Niveau zu heben. Die Design-Prinzipien und Features basieren auf den herausragenden Merkmalen von Vorbild-Websites: +1. **Capitolium** ([collabcapitolium.fr](https://www.collabcapitolium.fr/)) — *Historischer Retro-Luxus, Goldtöne, elegante Serifen und edle Steinstrukturen.* +2. **From Another** ([fromanother.love](https://www.fromanother.love/)) — *Künstlerisch-flüssige Moderne, Micro-Interaktionen, flüssige Overlays und organische Übergänge.* +3. **Floema** ([floema.com/en](https://www.floema.com/en)) — *Natürliche Eleganz, architektonische Grid-Präzision, elastische Animationen und erdige Töne.* + +--- + +## 🎨 Globales Design-System & Tokens + +Die folgenden CSS-Variablen definieren die Farbwelt, Typografie und Abstände und kombinieren die besten Aspekte aller drei Welten. + +```css +:root { + /* --- Farbpalette (Erdig, Edel, High-End Kontrast) --- */ + --color-bg-light: #f2efea; /* Helles Creme-Elfenbein (Floema) */ + --color-bg-dark: #241f21; /* Tiefes Steinkohle-Braun (Floema) */ + --color-accent-gold: #c3a677; /* Dunkles, edles Gold (Capitolium) */ + --color-light-gold: #f0e3cf; /* Warmes, helles Seidengold (Capitolium) */ + --color-white: #ffffff; + --color-terracotta: #f76c46; /* Akzent-Farbe für Highlights/Aktionen */ + --color-forest: #042d2b; /* Dunkles Waldgrün für Tiefe */ + --color-text-muted: #7a716d; /* Gedämpftes Braun-Grau */ + + /* --- Typografie (Kombination aus Serifen-Eleganz & cleaner Struktur) --- */ + --font-serif-classic: 'Times New Roman', Times, serif; + --font-serif-display: 'gin', 'Zimula', Georgia, serif; + --font-sans-clean: 'Inter', system-ui, -apple-system, sans-serif; + + /* --- Grid & Spacings (Präzise Floema-Berechnung) --- */ + --grid-columns: 24; + --grid-gap: clamp(14px, 9.71px + 1.1vw, 28px); + --grid-margin: clamp(16px, 10.15px + 1.5vw, 36px); + + /* --- Animation Easing Curves (Cubic-Bezier Signaturen) --- */ + --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); /* Ultraschnelle, weiche Verlangsamung */ + --ease-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastischer Bouncing-Effekt */ + --ease-fluid-slide: cubic-bezier(0.76, 0, 0.24, 1); /* Gleitende, organische Bewegung */ +} +``` + +--- + +## 🏛️ Feature-Katalog (Abrufbar für die KI) + +*Wenn du eines dieser Features in die Website integrieren möchtest, nenne einfach die entsprechende **Feature-ID** (z. B. `[CapitoliumClassicTypography]`), und die KI wird die Struktur und Styles exakt wie unten beschrieben implementieren.* + +--- + +### 1. Typografie & Layout-Ästhetik + +#### 🆔 `CapitoliumClassicTypography` +* **Beschreibung**: Luxuriöse Kontrast-Typografie. Große, elegante Initialen oder Zitate in geschwungener Handschrift kombiniert mit markanten, breit spationierten Serif-Überschriften in Großbuchstaben und perfekt blocksatzähnlichen Fließtexten. +* **HTML-Struktur**: + ```html +
+ C +

Exquisite Rezepte

+

Seit 2026 — Handverlesene Kulinarik

+
+ ``` +* **CSS-Anweisung**: + ```css + .editorial-header { + text-align: center; + position: relative; + padding: clamp(3rem, 5vw, 8rem) 1rem; + } + .editorial-script { + font-family: 'Edwardian Script ITC', 'Brush Script MT', cursive; + font-size: clamp(8rem, 15vw, 22rem); + color: var(--color-accent-gold); + line-height: 0.3; + display: block; + opacity: 0.8; + } + .editorial-title { + font-family: var(--font-serif-display); + font-size: clamp(2.5rem, 4vw, 5.5rem); + text-transform: uppercase; + letter-spacing: -0.02em; + color: var(--color-bg-dark); + margin-top: -1rem; + } + .editorial-subtitle { + font-family: var(--font-serif-classic); + font-style: italic; + font-size: 1.15rem; + letter-spacing: 0.1em; + color: var(--color-text-muted); + text-transform: uppercase; + margin-top: 1rem; + } + ``` + +#### 🆔 `FloemaLayoutGrid` +* **Beschreibung**: Ein modulares 24-Spalten-Layout mit anpassungsfähigen Abständen. Sorgt für ein extrem aufgeräumtes, fast architektonisches Erscheinungsbild, bei dem Bilder und Texte in asymmetrischen, perfekt ausgerichteten Rastern fließen. +* **HTML-Struktur**: + ```html +
+
+ +
+
+ +
+
+ ``` +* **CSS-Anweisung**: + ```css + .g-row { + display: flex; + flex-flow: row wrap; + padding-left: calc(var(--grid-margin) - var(--grid-gap) * 0.5); + padding-right: calc(var(--grid-margin) - var(--grid-gap) * 0.5); + width: 100%; + } + .g-col { + padding-left: calc(var(--grid-gap) * 0.5); + padding-right: calc(var(--grid-gap) * 0.5); + } + .col-left { + flex: 0 0 33.333%; /* 8/24 Spalten */ + max-width: 33.333%; + } + .col-right { + flex: 0 0 66.667%; /* 16/24 Spalten */ + max-width: 66.667%; + } + @media (max-width: 768px) { + .col-left, .col-right { + flex: 0 0 100%; + max-width: 100%; + } + } + ``` + +--- + +### 2. Hintergründe & Atmosphären + +#### 🆔 `AuraMarbleBackground` +* **Beschreibung**: Ein dezenter, luxuriöser Marmor- oder Stein-Hintergrundeffekt. Er verleiht der Website Tiefe und Materialität, ohne vom Inhalt abzulenken, indem er ein hochauflösendes Marmormuster per Mix-Blend-Mode mit der Hintergrundfarbe verschmilzt. +* **HTML-Struktur**: + ```html +
+
+
+
+ ``` +* **CSS-Anweisung**: + ```css + .bg-marble-container { + position: fixed; + inset: 0; + z-index: -1; + overflow: hidden; + background-color: var(--color-bg-light); + pointer-events: none; + } + .bg-marble-media { + position: absolute; + inset: -50px; + width: calc(100% + 100px); + height: calc(100% + 100px); + background-image: url('assets/img/marble_texture.jpg'); /* Sanfte Steintextur */ + background-size: cover; + background-position: center; + mix-blend-mode: exclusion; + opacity: 0.12; /* Sehr dezent */ + will-change: transform; + } + /* Optionaler Rauscheffekt (Noise) für noch edlere Papierhaptik */ + .bg-marble-grain { + position: absolute; + inset: 0; + background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E'); + opacity: 0.04; + mix-blend-mode: overlay; + } + ``` + +--- + +### 3. Interaktive Elemente & Buttons + +#### 🆔 `CapitoliumRevealButton` +* **Beschreibung**: Ein minimalistischer, extrem edler Button mit Rahmen. Beim Hover füllt sich der Button von unten nach oben mit einer goldene/dunklen Fläche, die Schrift verbreitert sich elegant (Letter-spacing-Effekt) und die Pfeile drehen sich. +* **HTML-Struktur**: + ```html + + ``` +* **CSS-Anweisung**: + ```css + .btn-reveal { + background: transparent; + border: 1px solid var(--color-accent-gold); + color: var(--color-bg-dark); + padding: 1.15rem 2.5rem; + font-family: var(--font-serif-display); + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 0.16em; + position: relative; + overflow: hidden; + display: inline-flex; + align-items: center; + gap: 0.75rem; + transition: color 0.4s var(--ease-out-expo); + z-index: 1; + } + .btn-reveal::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-accent-gold); + transform: scaleY(0); + transform-origin: bottom; + transition: transform 0.45s var(--ease-fluid-slide); + z-index: -1; + } + .btn-reveal-text { + transition: letter-spacing 0.4s var(--ease-fluid-slide), padding-left 0.4s var(--ease-fluid-slide); + } + .btn-reveal-arrow { + transition: transform 0.4s var(--ease-fluid-slide); + display: inline-block; + } + /* Hover-Effekte */ + .btn-reveal:hover { + color: var(--color-white); + } + .btn-reveal:hover::before { + transform: scaleY(1); + } + .btn-reveal:hover .btn-reveal-text { + letter-spacing: 0.24em; + padding-left: 0.08em; + } + .btn-reveal:hover .btn-reveal-arrow { + transform: translateX(5px) scale(1.1); + } + ``` + +#### 🆔 `SlideUpTextHover` +* **Beschreibung**: Animierter Link-Text-Effekt (bekannt von *From Another*). Der Text verdoppelt sich unsichtbar. Beim Hover gleitet der Originaltext nach oben aus dem Sichtbereich, während von unten zeitgleich ein Klon-Text nach oben nachrückt. +* **HTML-Struktur**: + ```html + + + Über uns + + + + ``` +* **CSS-Anweisung**: + ```css + .slide-hover-link { + display: inline-block; + text-decoration: none; + color: var(--color-bg-dark); + font-family: var(--font-serif-display); + font-weight: 500; + overflow: hidden; + } + .slide-hover-wrapper { + display: block; + position: relative; + overflow: hidden; + height: 1.2em; /* Exakte Höhe begrenzen */ + } + .slide-text-main, .slide-text-clone { + display: block; + transition: transform 0.5s var(--ease-out-expo); + line-height: 1.2em; + will-change: transform; + } + .slide-text-clone { + position: absolute; + top: 100%; + left: 0; + width: 100%; + color: var(--color-accent-gold); + } + /* Hover-Effekt */ + .slide-hover-link:hover .slide-text-main { + transform: translateY(-100%); + } + .slide-hover-link:hover .slide-text-clone { + transform: translateY(-100%); + } + ``` + +#### 🆔 `UnderlineExpandHover` +* **Beschreibung**: Elegante Textunterstreichung (bekannt von *Floema*). Die Linie ist im Normalzustand unsichtbar und skaliert beim Hover fließend von links nach rechts auf die volle Breite des Elements. +* **HTML-Struktur**: + ```html + Datenschutz + ``` +* **CSS-Anweisung**: + ```css + .underline-link { + position: relative; + color: currentColor; + text-decoration: none; + display: inline-block; + } + .underline-link::after { + content: ""; + position: absolute; + bottom: -2px; + left: 0; + width: 100%; + height: 1px; + background-color: currentColor; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.5s var(--ease-out-expo); + } + .underline-link:hover::after { + transform: scaleX(1); + } + ``` + +--- + +### 4. Menüs, Overlays & Navigationen + +#### 🆔 `LiquidOverlayMenu` +* **Beschreibung**: Ein flüssiges Vollbild-Navigationsmenü. Der Hamburger-Button morpht sanft zum Schließen-Kreuz, während sich das Menü über einen weichen `clip-path` (von oben nach unten) über den Bildschirm zieht. +* **HTML-Struktur**: + ```html + + + + + + ``` +* **CSS-Anweisung**: + ```css + /* Hamburger Button */ + .nav-trigger { + position: fixed; + top: 2rem; + right: var(--grid-margin); + z-index: 1001; + width: 50px; + height: 50px; + background: var(--color-white); + border: 1px solid var(--color-accent-gold); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + } + .nav-burger-lines { + width: 20px; + height: 14px; + position: relative; + display: block; + } + .line { + position: absolute; + width: 100%; + height: 1.5px; + background-color: var(--color-bg-dark); + transition: transform 0.4s var(--ease-fluid-slide), opacity 0.3s ease; + } + .line-top { top: 0; } + .line-mid { top: 6px; } + .line-bot { top: 12px; } + + /* Aktiv-Zustand Hamburger (Kreuz) */ + .nav-trigger.active .line-top { transform: translateY(6px) rotate(45deg); } + .nav-trigger.active .line-mid { opacity: 0; } + .nav-trigger.active .line-bot { transform: translateY(-6px) rotate(-45deg); } + + /* Menü Overlay */ + .nav-overlay { + position: fixed; + inset: 0; + z-index: 1000; + background-color: var(--color-bg-light); + display: flex; + align-items: center; + justify-content: center; + clip-path: inset(0 0 100% 0); /* Standardmäßig von oben versteckt */ + transition: clip-path 0.75s var(--ease-fluid-slide); + } + .nav-overlay.open { + clip-path: inset(0 0 0 0); /* Vollständig sichtbar */ + } + .nav-menu-list { + text-align: center; + list-style: none; + } + .nav-menu-list li { + margin: 2.5rem 0; + } + .nav-menu-list a { + font-size: clamp(2rem, 3.5vw, 4rem); + } + ``` +* **JavaScript-Anweisung**: + ```javascript + const menuBtn = document.getElementById('menuBtn'); + const menuOverlay = document.getElementById('menuOverlay'); + + menuBtn.addEventListener('click', () => { + menuBtn.classList.toggle('active'); + menuOverlay.classList.toggle('open'); + document.body.classList.toggle('modal-open'); + }); + ``` + +--- + +### 5. Übergänge, Scroll-Effekte & Ladebildschirme + +#### 🆔 `LenisSmoothScroll` +* **Beschreibung**: Bietet ein samtweiches, flüssiges Scrollverhalten über die gesamte Website hinweg (bekannt von *Capitolium* und *Floema*). Wird idealerweise mit einer feinen Scroll-Progress-Anzeige kombiniert. +* **Einbindung (JS / CDN)**: + ```html + + + ``` + +#### 🆔 `IndexSectionIndicator` +* **Beschreibung**: Eine diskrete, minimalistische Fortschrittsanzeige am Bildschirmrand (bekannt von *From Another*). Sie zeigt die aktuelle Seitennummer, den Kategorienamen und eine sich dynamisch füllende vertikale Linie an. +* **HTML-Struktur**: + ```html +
+
01
+
+
+
+
Zutaten
+
+ ``` +* **CSS-Anweisung**: + ```css + .section-indicator { + position: fixed; + left: var(--grid-margin); + top: 50%; + transform: translateY(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + z-index: 100; + font-family: var(--font-serif-display); + font-size: 0.8rem; + color: var(--color-accent-gold); + pointer-events: none; + } + .indicator-line-wrapper { + width: 1px; + height: 100px; + background-color: rgba(195, 166, 119, 0.2); + position: relative; + } + .indicator-line-fill { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 0%; /* Wird per JS gesteuert */ + background-color: var(--color-accent-gold); + transition: height 0.3s ease; + } + .indicator-name { + writing-mode: vertical-rl; + text-transform: uppercase; + letter-spacing: 0.15em; + } + @media (max-width: 960px) { + .section-indicator { display: none; } + } + ``` + +--- + +## 📋 Arbeitsanweisung für die KI + +1. **Behalte den Premium-Anspruch bei**: Jedes Element, das auf FlixCooks neu erstellt oder verändert wird, muss sich an diesem Leitfaden orientieren. Keine grellen Primärfarben, keine unnatürlichen Ecken oder unsauberen Abstände. +2. **Nutze fließende Skalierung (`clamp()`)**: Benutze für alle Schriftgrößen, Abstände (`padding`/`margin`) und Höhen CSS-Klammern (`clamp()`), damit das Layout auf 4K-Monitoren genauso atemberaubend aussieht wie auf Mobilgeräten. +3. **Kombiniere die Features harmonisch**: + * Nutze `AuraMarbleBackground` als globale Grundlage. + * Richte die Inhalte strikt am `FloemaLayoutGrid` aus. + * Biete geschmeidige Navigation mit `LiquidOverlayMenu` und dem interaktiven `SlideUpTextHover`. +4. **Vergiss Micro-Animationen nicht**: Buttons müssen unter Verwendung der passenden Easing-Kurven (`var(--ease-out-expo)` oder `var(--ease-overshoot)`) einladend auf Berührung reagieren.