Files

T

smacks 58728e06e7 docs: finalize DESIGN_GUIDE.md with precise browser specifications and floating parallax components

2026-05-20 08:32:17 +02:00

26 KiB

Raw Blame History

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:

: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:

<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:

.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:

<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:

.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:

<div class="bg-marble-container">
  <div class="bg-marble-media"></div>
  <div class="bg-marble-grain"></div>
</div>

CSS-Anweisung:

.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:

<button class="btn-reveal">
  <span class="btn-reveal-text">Rezept ansehen</span>
  <span class="btn-reveal-arrow">→</span>
</button>

CSS-Anweisung:

.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:

<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:

.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:

<a href="#" class="underline-link">Datenschutz</a>

CSS-Anweisung:

.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:

<a href="#" class="nudge-link">Unsere Story</a>

CSS-Anweisung:

.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:

<!-- 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:

/* 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:

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:

<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:

.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:

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:

<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:

.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):

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):

<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:

<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:

.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)

26 KiB Raw Blame History Unescape Escape

FlixCooks – Premium Web Design Guide

1. Farbphilosophie & Paletten

Option A: Warm Premium (Empfohlen für Hauptmarke)

Option B: Atmospheric Dark (Für immersive Storytelling-Bereiche)

2. Typografie & Skalierung

3. Layout, Spacing & Responsive Grid

4. Motion & Interaktions-Design

A. Smooth Scrolling (Lenis)

B. GSAP ScrollTrigger & Pinned Storytelling

C. Hover-Zustände & Easings

🏛️ Feature-Katalog (Abrufbar für die KI)

1. Typografie & Layout-Ästhetik

🆔 CapitoliumClassicTypography

🆔 FloemaLayoutGrid

2. Hintergründe & Atmosphären

🆔 AuraMarbleBackground

3. Interaktive Elemente & Buttons

🆔 CapitoliumRevealButton

🆔 SlideUpTextHover

🆔 UnderlineExpandHover

🆔 FloemaNudgeHover

4. Menüs, Overlays & Navigationen

🆔 LiquidOverlayMenu

5. Ladebildschirme, Scroll-Effekte & Parallax

🆔 CapitoliumPreloader

🆔 FloemaScatterParallax

🆔 LenisSmoothScroll

🆔 IndexSectionIndicator

5. Referenz-Spezifikationen (Website Analysis Insights)

A. Capitolium (collabcapitolium.fr)

B. fromanother (fromanother.love)

C. Floema (floema.com/en)

26 KiB

Raw Blame History

🆔 `CapitoliumClassicTypography`

🆔 `FloemaLayoutGrid`

🆔 `AuraMarbleBackground`

🆔 `CapitoliumRevealButton`

🆔 `SlideUpTextHover`

🆔 `UnderlineExpandHover`

🆔 `FloemaNudgeHover`

🆔 `LiquidOverlayMenu`

🆔 `CapitoliumPreloader`

🆔 `FloemaScatterParallax`

🆔 `LenisSmoothScroll`

🆔 `IndexSectionIndicator`