diff --git a/DESIGN_GUIDE.md b/DESIGN_GUIDE.md index d5f1c0b..0884ac9 100644 --- a/DESIGN_GUIDE.md +++ b/DESIGN_GUIDE.md @@ -47,8 +47,8 @@ Statt starrer Spacing-Klassen setzen wir auf vollkommen fluide Abstände und int * **Fluide Variablen auf `:root`:** ```css :root { - --grid-gap: clamp(14px, 1vw + 4px, 28px); - --grid-margin: clamp(16px, 1.5vw + 10px, 36px); + --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); } ``` @@ -87,7 +87,7 @@ Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis ### 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. +* **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
@@ -362,6 +362,26 @@ Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis } ``` +#### 🆔 `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 + Unsere Story + ``` +* **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 @@ -469,7 +489,162 @@ Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis --- -### 5. Übergänge, Scroll-Effekte & Ladebildschirme +### 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 +
+
+

FlixCooks

+
+

Wird zubereitet... 0%

+
+
+ ``` +* **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 +
+
+ Tomaten +
+
+ Basilikum +
+
+ Olivenöl +
+
+ ``` +* **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. @@ -548,3 +723,26 @@ Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis .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)`