749 lines
26 KiB
Markdown
749 lines
26 KiB
Markdown
# FlixCooks – Premium Web Design Guide
|
||
|
||
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.
|
||
|
||
---
|
||
|
||
## 1. Farbphilosophie & Paletten
|
||
|
||
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.
|
||
|
||
### 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, 9.71px + 1.1vw, 28px); /* Exakt vermessene Floema-Formel */
|
||
--grid-margin: clamp(16px, 10.15px + 1.5vw, 36px); /* Exakt vermessene Floema-Formel */
|
||
--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)`
|
||
|
||
---
|
||
|
||
## 🏛️ 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 (`gin, serif` Stil) und perfekt blocksatzähnlichen Fließtexten.
|
||
* **HTML-Struktur**:
|
||
```html
|
||
<div class="editorial-header">
|
||
<span class="editorial-script">C</span>
|
||
<h2 class="editorial-title">Exquisite Rezepte</h2>
|
||
<p class="editorial-subtitle">Seit 2026 — Handverlesene Kulinarik</p>
|
||
</div>
|
||
```
|
||
* **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
|
||
<div class="g-row">
|
||
<div class="g-col col-left">
|
||
<!-- 8 Spalten breit (z.B. Zutatentabelle) -->
|
||
</div>
|
||
<div class="g-col col-right">
|
||
<!-- 16 Spalten breit (z.B. Zubereitungsschritte) -->
|
||
</div>
|
||
</div>
|
||
```
|
||
* **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
|
||
<div class="bg-marble-container">
|
||
<div class="bg-marble-media"></div>
|
||
<div class="bg-marble-grain"></div>
|
||
</div>
|
||
```
|
||
* **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
|
||
<button class="btn-reveal">
|
||
<span class="btn-reveal-text">Rezept ansehen</span>
|
||
<span class="btn-reveal-arrow">→</span>
|
||
</button>
|
||
```
|
||
* **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 *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
|
||
<a href="#" class="slide-hover-link">
|
||
<span class="slide-hover-wrapper">
|
||
<span class="slide-text-main">Über uns</span>
|
||
<span class="slide-text-clone" aria-hidden="true">Über uns</span>
|
||
</span>
|
||
</a>
|
||
```
|
||
* **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
|
||
<a href="#" class="underline-link">Datenschutz</a>
|
||
```
|
||
* **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);
|
||
}
|
||
```
|
||
|
||
#### 🆔 `FloemaNudgeHover`
|
||
* **Beschreibung**: Hochsensibler, spielerischer Navigationseffekt. Statt Farbwechsel schiebt sich das Element minimal zur Seite (oder nach oben), was eine physische Leichtigkeit erzeugt.
|
||
* **HTML-Struktur**:
|
||
```html
|
||
<a href="#" class="nudge-link">Unsere Story</a>
|
||
```
|
||
* **CSS-Anweisung**:
|
||
```css
|
||
.nudge-link {
|
||
display: inline-block;
|
||
transition: margin 0.3s cubic-bezier(0.19, 1, 0.22, 1);
|
||
color: var(--color-bg-dark);
|
||
text-decoration: none;
|
||
}
|
||
.nudge-link:hover {
|
||
margin-left: 6px;
|
||
color: var(--color-accent-gold);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 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
|
||
<!-- Hamburger Button -->
|
||
<button class="nav-trigger" aria-label="Menü öffnen" id="menuBtn">
|
||
<span class="nav-burger-lines">
|
||
<span class="line line-top"></span>
|
||
<span class="line line-mid"></span>
|
||
<span class="line line-bot"></span>
|
||
</span>
|
||
</button>
|
||
|
||
<!-- Vollbild Overlay -->
|
||
<div class="nav-overlay" id="menuOverlay">
|
||
<div class="nav-overlay-inner">
|
||
<ul class="nav-menu-list">
|
||
<li><a href="index.php" class="slide-hover-link"><span class="slide-hover-wrapper"><span class="slide-text-main">Startseite</span><span class="slide-text-clone">Startseite</span></span></a></li>
|
||
<li><a href="recipe.php" class="slide-hover-link"><span class="slide-hover-wrapper"><span class="slide-text-main">Rezepte</span><span class="slide-text-clone">Rezepte</span></span></a></li>
|
||
<li><a href="impressum.php" class="slide-hover-link"><span class="slide-hover-wrapper"><span class="slide-text-main">Impressum</span><span class="slide-text-clone">Impressum</span></span></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
```
|
||
* **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. Ladebildschirme, Scroll-Effekte & Parallax
|
||
|
||
#### 🆔 `CapitoliumPreloader`
|
||
* **Beschreibung**: Immersiver, ganzflächiger Ladebildschirm mit anwachsenden Zahlen oder einer edlen Botschaft, der sich beim Laden nach oben wegschiebt und die Website enthüllt.
|
||
* **HTML-Struktur**:
|
||
```html
|
||
<div class="preloader" id="preloader">
|
||
<div class="preloader-content">
|
||
<h1 class="preloader-logo">FlixCooks</h1>
|
||
<div class="preloader-bar"><div class="preloader-fill" id="preloaderFill"></div></div>
|
||
<p class="preloader-text">Wird zubereitet... <span id="preloaderPerc">0</span>%</p>
|
||
</div>
|
||
</div>
|
||
```
|
||
* **CSS-Anweisung**:
|
||
```css
|
||
.preloader {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 10000;
|
||
background-color: var(--color-bg-dark);
|
||
color: var(--color-light-gold);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
|
||
}
|
||
.preloader.loaded {
|
||
transform: translateY(-100vh);
|
||
}
|
||
.preloader-content {
|
||
text-align: center;
|
||
width: clamp(200px, 50vw, 400px);
|
||
}
|
||
.preloader-logo {
|
||
font-family: var(--font-serif-display);
|
||
font-size: 2.5rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2em;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.preloader-bar {
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: rgba(240, 227, 207, 0.2);
|
||
border-radius: 1px;
|
||
overflow: hidden;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.preloader-fill {
|
||
width: 0%;
|
||
height: 100%;
|
||
background-color: var(--color-accent-gold);
|
||
transition: width 0.1s ease;
|
||
}
|
||
.preloader-text {
|
||
font-family: var(--font-sans-clean);
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.1em;
|
||
opacity: 0.7;
|
||
}
|
||
```
|
||
* **JavaScript-Anweisung**:
|
||
```javascript
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const fill = document.getElementById("preloaderFill");
|
||
const perc = document.getElementById("preloaderPerc");
|
||
const preloader = document.getElementById("preloader");
|
||
let progress = 0;
|
||
|
||
const interval = setInterval(() => {
|
||
progress += Math.floor(Math.random() * 15) + 5;
|
||
if (progress >= 100) {
|
||
progress = 100;
|
||
clearInterval(interval);
|
||
setTimeout(() => {
|
||
preloader.classList.add("loaded");
|
||
}, 300);
|
||
}
|
||
fill.style.width = progress + "%";
|
||
perc.innerText = progress;
|
||
}, 100);
|
||
});
|
||
```
|
||
|
||
#### 🆔 `FloemaScatterParallax`
|
||
* **Beschreibung**: Spielerische, unregelmäßige Bildanordnungen, die beim Scrollen oder bei Mausbewegung in asynchronen Geschwindigkeiten gleiten (Parallax-Effekt). Perfekt für die Präsentation von Zutaten oder Detailaufnahmen auf der Startseite.
|
||
* **HTML-Struktur**:
|
||
```html
|
||
<div class="scatter-container">
|
||
<div class="scatter-item item-fast" data-speed="0.15">
|
||
<img src="assets/img/zutat_1.jpg" alt="Tomaten">
|
||
</div>
|
||
<div class="scatter-item item-slow" data-speed="0.05">
|
||
<img src="assets/img/zutat_2.jpg" alt="Basilikum">
|
||
</div>
|
||
<div class="scatter-item item-medium" data-speed="0.1">
|
||
<img src="assets/img/zutat_3.jpg" alt="Olivenöl">
|
||
</div>
|
||
</div>
|
||
```
|
||
* **CSS-Anweisung**:
|
||
```css
|
||
.scatter-container {
|
||
position: relative;
|
||
height: 60vh;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.scatter-item {
|
||
position: absolute;
|
||
will-change: transform;
|
||
box-shadow: 0 15px 35px rgba(0,0,0,0.08);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.item-fast {
|
||
top: 10%;
|
||
left: 15%;
|
||
width: 180px;
|
||
z-index: 3;
|
||
}
|
||
.item-slow {
|
||
top: 40%;
|
||
right: 10%;
|
||
width: 250px;
|
||
z-index: 1;
|
||
}
|
||
.item-medium {
|
||
top: 25%;
|
||
left: 55%;
|
||
width: 220px;
|
||
z-index: 2;
|
||
}
|
||
.scatter-item img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
```
|
||
* **JavaScript-Anweisung (GSAP ScrollTrigger)**:
|
||
```javascript
|
||
gsap.utils.toArray(".scatter-item").forEach(item => {
|
||
const speed = item.getAttribute("data-speed");
|
||
gsap.to(item, {
|
||
yPercent: -100 * speed,
|
||
ease: "none",
|
||
scrollTrigger: {
|
||
trigger: item,
|
||
start: "top bottom",
|
||
end: "bottom top",
|
||
scrub: true
|
||
}
|
||
});
|
||
});
|
||
```
|
||
|
||
#### 🆔 `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
|
||
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js"></script>
|
||
<script>
|
||
const lenis = new Lenis({
|
||
duration: 1.2,
|
||
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Weiche Bremskurve
|
||
direction: 'vertical',
|
||
gestureDirection: 'vertical',
|
||
smooth: true,
|
||
mouseMultiplier: 1,
|
||
smoothTouch: false
|
||
});
|
||
|
||
function raf(time) {
|
||
lenis.raf(time);
|
||
requestAnimationFrame(raf);
|
||
}
|
||
requestAnimationFrame(raf);
|
||
</script>
|
||
```
|
||
|
||
#### 🆔 `IndexSectionIndicator`
|
||
* **Beschreibung**: Eine diskrete, minimalistische Fortschrittsanzeige am Bildschirmrand (bekannt von *fromanother*). Sie zeigt die aktuelle Seitennummer, den Kategorienamen und eine sich dynamisch füllende vertikale Linie an.
|
||
* **HTML-Struktur**:
|
||
```html
|
||
<div class="section-indicator">
|
||
<div class="indicator-index">01</div>
|
||
<div class="indicator-line-wrapper">
|
||
<div class="indicator-line-fill" id="indicatorLine"></div>
|
||
</div>
|
||
<div class="indicator-name">Zutaten</div>
|
||
</div>
|
||
```
|
||
* **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; }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Referenz-Spezifikationen (Website Analysis Insights)
|
||
|
||
Diese Spezifikationen dienen als exakte technische Grundlage und belegen das reale Verhalten der Vorbilder, die wir als Benchmark nutzen:
|
||
|
||
### A. Capitolium (collabcapitolium.fr)
|
||
* **Pinning & Scroll-Tiefe**: Nutzt massive GSAP ScrollTrigger-Bereiche. Der Bereich `block-shirts` besitzt eine Höhe von `1816px` und `block-collection` sogar `6744px` für atemberaubende horizontale Karusselle.
|
||
* **Raster-Konfiguration**: Sehr enges Raster mit einem Spaltenabstand (`--gutter`) von exakt `10px` und einer Begrenzung auf `--max-width: 2560px`.
|
||
* **Schrifthierarchie**: Markante, massive Serifenschrift `gin, serif` (Headline-Größe: `131px`) im perfekten Kontrast zu `Times, serif` für Fließtext und geometrischem `Rubik, sans-serif` (`14px`, fett) für Buttons.
|
||
|
||
### B. fromanother (fromanother.love)
|
||
* **Echtes Farb-Setup**: Düsteres, hochmütiges Farbverhältnis. Hintergrund ist Mitternachtsblau (`#051236`) mit cremefarbenen Texten (`#fffde2`) und einem leuchtenden Kobaltblau (`#1740a9`) für interaktive Akzente.
|
||
* **Asymmetrische Abstände**: Festes 6-Spalten-Raster (`--columns: 6`) mit standardisierten, progressiven Seitenabständen (`--padding-x: 1.6rem`, `--gap-x: 1.6rem`).
|
||
* **Monolithische Hero-Area**: Die Showcase-Projekte werden über eine GSAP-Scrollhöhe von `7518px` (exakt 6x Viewport-Höhe) gepinnt, um dreidimensionale Drehungen zu inszenieren.
|
||
|
||
### C. Floema (floema.com/en)
|
||
* **Grounded Palette**: Warmes Elfenbein-Creme (`#f2efea`) kombiniert mit tiefem Kohlebraun (`#241f21`) und organischen Erdtönen wie Waldgrün (`#042d2b`), Kraftkarton-Beige (`#c6af88`) und Terracotta (`#f76c46`).
|
||
* **Scrolltrigger-Tiefe**: Extrem langes Scroll-Pinning von exakt `11.277px` für die interaktive Vorstellung der Kollektionen.
|
||
* **Responsive Perfektion**: Keine harten Mediaqueries, sondern vollkommen fließende Größenberechnungen:
|
||
* *Grid Gap*: `clamp(14px, 9.71px + 1vw, 28px)`
|
||
* *Grid Margin*: `clamp(16px, 10.15px + 1.5vw, 36px)`
|