diff --git a/DESIGN_GUIDE.md b/DESIGN_GUIDE.md index fce8c0a..d5f1c0b 100644 --- a/DESIGN_GUIDE.md +++ b/DESIGN_GUIDE.md @@ -1,44 +1,80 @@ -# FlixCooks Design-System & Feature-Katalog +# FlixCooks – Premium Web Design Guide -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.* +Dieser Design Guide definiert die visuellen Prinzipien, Typografie, Farbpaletten und Interaktionsmuster für die **FlixCooks-Website**. Inspiriert von den modernen, immersiven Web-Standards führender Kreativ- und Lifestyle-Marken (wie *Capitolium*, *fromanother* und *Floema*) setzen wir auf **flüssige Bewegung, charakterstarke Kontraste und ein harmonisches, erdiges Farbklima**. + +Dieses Dokument dient als zentrale Design-Richtlinie und Anweisungs-Katalog für die KI, um das visuelle Erscheinungsbild und die Interaktionen auf ein absolut erstklassiges Premium-Niveau zu heben. --- -## 🎨 Globales Design-System & Tokens +## 1. Farbphilosophie & Paletten -Die folgenden CSS-Variablen definieren die Farbwelt, Typografie und Abstände und kombinieren die besten Aspekte aller drei Welten. +Wir distanzieren uns von sterilen, reinweißen Hintergründen und hartem, reinem Schwarz. Stattdessen nutzen wir warme, organische Töne für maximalen Sehkomfort und Premium-Charakter. -```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 */ -} -``` +### Option A: Warm Premium (Empfohlen für Hauptmarke) +* **Hintergrund:** Warm Ivory / Creme (`#f2efea` oder `#f0e3cf`) +* **Text & Konturen:** Dunkles Anthrazit / Steinkohle (`#241f21` oder `#0b090a`) +* **Akzente & Primärfarbe:** Edles Mattgold / Bronze (`#c3a677`) +* **Sekundäre Grautöne:** `#58595b` (Dunkelgrau), `#a7a0a1` (Hellgrau) + +### Option B: Atmospheric Dark (Für immersive Storytelling-Bereiche) +* **Hintergrund:** Tiefes Mitternachtsblau (`#051236`) +* **Text & Konturen:** Pastell-Creme-Gelb (`#fffde2`) +* **Akzente:** Elektrisierendes Kobaltblau (`#1740a9`) +* **Opacity-Abstufungen:** + * Sekundärtexte: `rgba(255, 253, 226, 0.6)` + * Deaktiviert/Untergeordnet: `rgba(255, 253, 226, 0.3)` + +--- + +## 2. Typografie & Skalierung + +Die Typografie lebt von einem **starken Kontrast** zwischen organisch-charismatischen Display-Schriften für Headlines und hochlesbaren, geometrischen serifenlosen Schriften für Fließtext. + +* **Überschriften (Headlines - h1, h2, h3):** + * **Schriftart:** Eine ausdrucksstarke, historische oder organische Serif-Schrift (z. B. *Zimula* oder *gin* Stil). + * **Verhalten:** Viewport-relative Skalierung (z. B. `font-size: clamp(3rem, 8vw, 8.5rem)`), um auf Desktop-Screens eine massive, monolithische Präsenz zu erzielen. +* **Fließtext & Buttons:** + * **Schriftart:** Eine geometrische, schnörkellose Sans-Serif (z. B. *Rubik* oder ein hochwertiger Neo-Grotesque-Schnitt). + * **Größe:** `14px` bis `16px` für optimales, luftiges Satzbild. + +--- + +## 3. Layout, Spacing & Responsive Grid + +Statt starrer Spacing-Klassen setzen wir auf vollkommen fluide Abstände und intelligente Grids auf Root-Ebene. + +* **24-Spalten-Grid:** Für asymmetrische, redaktionelle Layouts wird ein 24-spaltiges CSS-Grid etabliert. +* **Fluide Variablen auf `:root`:** + ```css + :root { + --grid-gap: clamp(14px, 1vw + 4px, 28px); + --grid-margin: clamp(16px, 1.5vw + 10px, 36px); + --grid-width: calc(100vw - var(--grid-margin) * 2); + } + ``` +* **Responsive Anpassung:** Die Abstände atmen stufenlos mit der Viewportbreite (`100vw` / `dvh`). Dadurch entfallen sprunghafte Media-Query-Knicke fast vollständig. + +--- + +## 4. Motion & Interaktions-Design + +Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis basiert auf weicher Entschleunigung und präzisen Interaktionen. + +### A. Smooth Scrolling (Lenis) +* **Standard:** Die gesamte Seite nutzt **Lenis smooth scroll**, um ein trägheitsbasiertes, sanftes Abbremsen beim Scrollen zu gewährleisten. + +### B. GSAP ScrollTrigger & Pinned Storytelling +* Anstelle von standardmäßig herunterscrollbaren Textblöcken werden emotionale Schlüsselbereiche (z. B. Rezepte-Showcase, Teig-Prozess) **gepinnt** (z. B. eine Sektionshöhe von `300vh` bis `600vh`). +* Während des Pinnens animieren sich Elemente (Zutaten, Textpassagen, Kochschritte) horizontal, blenden sich butterweich über- und untereinander oder enthüllen sich durch geometrische Masken. + +### C. Hover-Zustände & Easings +* **Navigationslinks:** Minimale, hochpräzise Bewegungen statt simpler Farbwechsel. Ein sanfter Nudge/Slide nach rechts oder oben: + `transition: margin 0.3s cubic-bezier(0.19, 1, 0.22, 1);` +* **Bild-Hover:** Zoom- und Parallax-Effekte bei Interaktion. +* **Cubic-Bezier Easing-Bibliothek:** + * `--easeOutQuart`: `cubic-bezier(0.165, 0.84, 0.44, 1)` + * `--easeInOutQuart`: `cubic-bezier(0.76, 0, 0.24, 1)` + * `--easeInOutCubic`: `cubic-bezier(0.65, 0, 0.35, 1)` --- @@ -51,476 +87,464 @@ Die folgenden CSS-Variablen definieren die Farbwelt, Typografie und Abstände un ### 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; - } - ``` +* **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 -
-
- +* **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%; + ``` +* **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; - } - ``` +* **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); - } - ``` +* **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%); - } - ``` +* **Beschreibung**: Animierter Link-Text-Effekt (bekannt von *fromanother*). 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); - } - ``` +* **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 - - +* **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 + + - -