/* ============================================================================ FASHIONEMOTIONS — DESIGN SYSTEM · "EMOTION / STRUCTURE" ---------------------------------------------------------------------------- tokens.css — DIE EINZIGE DATEI, DIE DU ZUM UMDESIGNEN ANFASSEN MUSST. Alles andere (base / components / sections) liest ausschliesslich von hier. Reihenfolge: 01 Farbe 06 Raster & Container 02 Marken-Themes 07 Linien, Radien, Schatten 03 Typografie 08 Motion 04 Type-Skala 09 Z-Index 05 Abstand 10 Bildwelt / Platzhalter ========================================================================== */ :root{ /* == 01 · FARBE ========================================================== */ /* Basis: Tinte auf Papier. Farbe kommt aus der Fotografie, nicht aus dem UI. */ --c-paper: #F7F5F0; /* warmes Papier — Standard-Hintergrund */ --c-paper-2: #EFEBE3; /* abgesetzte Fläche, Karten */ --c-paper-3: #E4DFD5; /* tiefste helle Fläche */ --c-ink: #0C0C0C; /* Text & Schwarzflächen */ --c-ink-2: #3A3A38; /* Fliesstext auf hell */ --c-ink-3: #6B6B63; /* Sekundärtext, Labels */ --c-ink-4: #9A9A92; /* Deaktiviert, Meta */ --c-noir: #08080A; /* dunkle Kapitel */ --c-noir-2: #131316; /* Karten im dunklen Kapitel */ --c-chalk: #F2F0EB; /* Text auf noir */ --c-chalk-2: #A8A8A2; /* Sekundärtext auf noir */ /* Signaturakzent — „Emotion Red". Einmal hier ändern = ganze Seite ändert sich. */ --c-accent: #C0122B; --c-accent-deep: #8E0C20; --c-accent-soft: #F2D3D8; /* Kleiner Text in Akzentfarbe braucht auf dunklem Grund mehr Helligkeit: #C0122B auf --c-noir ergibt nur 3.20:1, WCAG AA verlangt 4.5:1. Die Markenfarbe bleibt unangetastet — nur Textnutzungen greifen hierauf zu. */ --c-accent-text: #E0546A; /* Semantische Rollen (werden von Sektionen umgeschaltet, nicht direkt setzen) */ --bg: var(--c-paper); --bg-alt: var(--c-paper-2); --fg: var(--c-ink); --fg-muted: var(--c-ink-3); --fg-body: var(--c-ink-2); --line: color-mix(in srgb, var(--c-ink) 12%, transparent); --line-strong: color-mix(in srgb, var(--c-ink) 26%, transparent); --accent: var(--c-accent); --accent-text: var(--c-accent); /* == 02 · MARKEN-THEMES ================================================== */ /* Jedes Markenkapitel bringt seine eigene Welt mit. */ --brand-kl: #0C0C0C; /* Karl Lagerfeld Men — kompromissloses Schwarz */ --brand-kl-2: #C8C3B8; --brand-hp-blue: #1B2A63; /* Hechter Paris — Trikolore */ --brand-hp-red: #C8102E; --brand-hp-white: #FFFFFF; --brand-vl: #17253C; /* Van Laack — Navy, Handwerk */ --brand-vl-2: #B9A88A; /* == 03 · TYPOGRAFIE ===================================================== */ --ff-display: 'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', sans-serif; --ff-caps: 'Big Shoulders Text', 'Arial Narrow', sans-serif; --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ff-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; --fw-display: 900; --fw-caps: 600; --fw-body: 400; --fw-body-md: 500; --tracking-display: -0.015em; --tracking-caps: 0.16em; --tracking-body: 0em; --leading-display: 0.90; /* Platz fuer Ä Ö Ü Ł Ą Ś Ż Ș Ț */ --leading-caps: 1.1; --leading-body: 1.65; /* == 04 · TYPE-SKALA (fluid, 360px → 1920px) ============================= */ --fs-d0: clamp(3rem, 11vw, 12rem); /* Hero-Monument */ --fs-d1: clamp(3.2rem, 9.5vw, 9.5rem); /* Sektionsüberschrift */ --fs-d2: clamp(2.4rem, 6.2vw, 6rem); /* Kapitelüberschrift */ --fs-d3: clamp(1.9rem, 4.0vw, 3.6rem); /* Blocküberschrift */ --fs-d4: clamp(1.5rem, 2.6vw, 2.3rem); /* Kartenüberschrift */ --fs-lead: clamp(1.125rem, 1.7vw, 1.6rem);/* Vorspann / Manifest */ --fs-b1: clamp(1rem, 1.05vw, 1.125rem); /* Fliesstext */ --fs-b2: 0.9375rem; /* kleiner Fliesstext */ --fs-cap: 0.75rem; /* Eyebrow / Label */ --fs-cap-s:0.6875rem; /* Meta, Bildunterschrift */ /* == 05 · ABSTAND ======================================================== */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --pad-x: clamp(1.25rem, 5vw, 6.5rem); /* horizontales Seitenpolster */ --section-y: clamp(5rem, 12vh, 11rem); /* vertikaler Sektionsabstand */ --section-y-l:clamp(7rem, 18vh, 16rem); /* für Monument-Sektionen */ /* == 06 · RASTER & CONTAINER ============================================= */ --grid-cols: 12; --gutter: clamp(1rem, 1.6vw, 1.75rem); --maxw: 1680px; /* äusserer Container */ --maxw-text: 62ch; /* optimale Lesebreite */ --maxw-lead: 46ch; /* Vorspann bleibt schmaler */ /* == 07 · LINIEN, RADIEN, SCHATTEN ====================================== */ --hair: 1px; /* Haarlinie — das Grundelement */ --rule: 2px; /* Betonungslinie */ --r-0: 0; /* Editorial = scharfe Kanten */ --r-pill: 999px; --r-media: 0; /* Kein Schatten im System. Tiefe entsteht durch Linien und Flächen. */ --shadow-lift: 0 24px 60px -28px rgb(0 0 0 / .45); /* == 08 · MOTION ======================================================== */ --e-out: cubic-bezier(.16, 1, .3, 1); /* Standard-Ausgang */ --e-in-out: cubic-bezier(.76, 0, .24, 1); /* Übergänge */ --e-soft: cubic-bezier(.33, 1, .68, 1); /* Mikro-Interaktion */ --e-back: cubic-bezier(.34, 1.56, .64, 1); /* sparsam einsetzen */ --t-xs: .18s; --t-s: .32s; --t-m: .6s; --t-l: .9s; --t-xl: 1.25s; --reveal-dist: 3.2rem; /* Weg, den ein Reveal zurücklegt */ --reveal-blur: 0px; /* auf 6px setzen für weichere Reveals */ --stagger: 70ms; /* Versatz zwischen Geschwistern */ --parallax: 1; /* globaler Parallax-Multiplikator (0 = aus) */ --scroll-lerp: .085; /* Trägheit des Smooth-Scroll (0.05 – 0.2) */ /* == 09 · Z-INDEX ======================================================= */ --z-base: 0; --z-media: 1; --z-content: 2; --z-sticky: 20; --z-nav: 60; --z-overlay: 80; --z-cursor: 95; --z-loader: 100; /* == 10 · BILDWELT / PLATZHALTER ======================================== */ --ratio-portrait: 3 / 4; --ratio-editorial: 4 / 5; --ratio-landscape: 16 / 10; --ratio-cinema: 21 / 9; --media-scale: 1.12; /* Überzoom für Parallax innerhalb der Maske */ --grain-opacity: .055; /* Filmkorn über der ganzen Seite */ } /* ---- Dunkles Kapitel: Rollen umschalten, nie Farben hart setzen ---------- */ [data-theme="noir"]{ --accent-text: var(--c-accent-text); --bg: var(--c-noir); --bg-alt: var(--c-noir-2); --fg: var(--c-chalk); --fg-body: color-mix(in srgb, var(--c-chalk) 78%, transparent); --fg-muted: var(--c-chalk-2); --line: color-mix(in srgb, var(--c-chalk) 14%, transparent); --line-strong: color-mix(in srgb, var(--c-chalk) 30%, transparent); } [data-theme="paper-alt"]{ --bg: var(--c-paper-2); --bg-alt: var(--c-paper-3); } /* ---- Markenkapitel ------------------------------------------------------ */ [data-brand="karl-lagerfeld"]{ --accent: var(--brand-kl-2); } [data-brand="hechter-paris"] { --accent: var(--brand-hp-red); } [data-brand="van-laack"] { --accent: var(--brand-vl-2); } /* ---- Reduzierte Bewegung: System global entschärfen --------------------- */ @media (prefers-reduced-motion: reduce){ :root{ --reveal-dist: 0rem; --reveal-blur: 0px; --parallax: 0; --stagger: 0ms; --t-xs: .01ms; --t-s: .01ms; --t-m: .01ms; --t-l: .01ms; --t-xl: .01ms; } }