/* ============================================================================ Creativ Haarstudio — Design System (Tokens) München-Großhadern · Friseur · 20-Jahre-Jubiläum Marken-Gefühl: warm, feierlich, handwerklich, familiär, gepflegt ---------------------------------------------------------------------------- REGELN, die dieser Datei zugrunde liegen (Second-Brain): - Merksatz 17: Akzentfarbe = Token, Text-drauf = --on-accent (nie hart #fff). - Merksatz 18: In clamp()/calc()/min()/max() IMMER Leerzeichen um + und −. - Merksatz 20 / FONTS-DSGVO: Fonts self-hosten (WOFF2 + @font-face), NIE per @import/ von fonts.googleapis.com. - Keine hardcodierten Farben/Größen im späteren Code — nur diese Tokens. ========================================================================== */ /* --------------------------------------------------------------------------- 1) SELF-HOSTED FONTS (DSGVO-Pflicht — WOFF2 lokal, kein Google-CDN) Ablage erwartet unter: /fonts/ (web-root-absolut, robust für Subdomain) Headline: Bricolage Grotesque · Body: DM Sans (beide voller DE-Umlaut/ß) Nur die tatsächlich genutzten Schnitte werden self-hosted (Performance). --------------------------------------------------------------------------- */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/bricolage-grotesque-500.woff2") format("woff2"); } @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/bricolage-grotesque-700.woff2") format("woff2"); } @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/bricolage-grotesque-800.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-sans-400.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/dm-sans-500.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/dm-sans-700.woff2") format("woff2"); } /* --------------------------------------------------------------------------- 2) TOKENS --------------------------------------------------------------------------- */ :root { /* --- Farbwelt: Neutrals (Cream) --------------------------------------- */ --cream: #F4ECDE; /* Seiten-Hintergrund (warmes Cream) */ --cream-hi: #FBF6EC; /* erhabene Fläche / Karten */ --cream-2: #EBDECA; /* alternierendes Sektionsband (tieferes Cream)*/ --sand: #E3D4BC; /* warmer Inset / Tabellen-Zebrastreifen */ --hairline: #D8C6A8; /* Rahmen/Trennlinien auf Cream */ /* --- Farbwelt: Ink (Espresso) ---------------------------------------- */ --ink: #2A1E17; /* Fließtext / Headlines (13.8:1 auf Cream) */ --ink-soft: #5C4A3B; /* Sekundärtext (7.2:1 auf Cream) */ --ink-mute: #6E5C4C; /* Meta/Captions ≥16px (5.4:1 auf Cream, AA) */ /* --- Dunkle Sektionen (Jubiläum-Band / CTA-Closing) ------------------ */ --espresso-deep: #1C140F; /* dunkler Sektions-BG */ --espresso-deep-2: #251A13; /* erhabene Karte auf dunkel */ --on-dark: #F4ECDE; /* Cream-Text auf dunkel (>15:1) */ --on-dark-soft: #D8C6A8; /* gedämpfter Text auf dunkel (10.9:1) */ /* --- Primär-Akzent: Cognac / Caramel (bräunlich, KEIN Gelb-Gold) ----- */ --cognac: #B0713A; /* Akzent: große Headlines/Links, Deko-Linien (3.4:1 auf Cream → NUR große Schrift/Deko) */ --cognac-deep: #8A5528; /* PRIMÄR-CTA-Füllung (on-cognac passt 5.8:1) */ --cognac-dark: #6E421F; /* Hover/Aktiv der CTA-Füllung */ --cognac-tint: #E7CFB0; /* weiche Cognac-Wäsche als Flächen-Bg */ --accent-on-dark: #D19A5E; /* Cognac aufgehellt für Text/Icons auf dunkel (7.3:1 auf --espresso-deep) */ /* --- Sekundär-Akzent: Dusty-Rose (weiblich-warm, dekorativ) ---------- */ --rose: #C98A82; /* Wäsche/Highlights, Strähnen-Alternanz */ --rose-tint: #EBD3CE; /* weiche Rosé-Wäsche */ --rose-deep: #A65E56; /* Rosé als große Schrift (dekorativ) */ /* --- Messing-Folie (Metallic — sparsam, „20"/Trenner/Blade-Glint) ---- */ --brass: #A8894E; --brass-hi: #D8BE86; --brass-lo: #7A6234; --brass-foil: linear-gradient( 105deg, var(--brass-lo) 0%, var(--brass-hi) 44%, #F2E6C4 52%, var(--brass-hi) 60%, var(--brass-lo) 100%); /* --- on-accent (Merksatz 17: Text auf Akzent-Flächen, je Fläche) ----- */ --on-accent: #FBF6EC; /* auf --cognac-deep Füllung (5.8:1) */ --on-accent-rose: #2A1E17; /* falls Rosé je als Fläche dient → Ink */ --on-brass: #2A1E17; /* Ink auf Messing-Folie */ /* --- Funktionsfarben -------------------------------------------------- */ --danger: #A8412B; /* Ruhetag/geschlossen, Formfehler (warm-brick)*/ --danger-tint: #F0D9D1; --focus: #8A5528; /* Fokus-Ring auf Cream */ --focus-on-dark:#D8BE86; /* Fokus-Ring auf dunkel */ /* --- Typografie: Familien -------------------------------------------- */ --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* --- Typografie: Fluid-Scale (Leerzeichen um +/− PFLICHT) ------------ */ --fs-2xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem); --fs-xs: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem); --fs-sm: clamp(0.94rem, 0.9rem + 0.2vw, 1rem); --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.13rem); --fs-md: clamp(1.13rem, 1.05rem + 0.4vw, 1.35rem); --fs-lg: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); --fs-xl: clamp(1.65rem, 1.4rem + 1.2vw, 2.35rem); --fs-2xl: clamp(2rem, 1.6rem + 2vw, 3.15rem); --fs-3xl: clamp(2.4rem, 1.8rem + 3vw, 4.2rem); --fs-display: clamp(2.9rem, 1.9rem + 4.8vw, 5.6rem); --fs-hero: clamp(3.2rem, 1.6rem + 6vw, 6.6rem); /* Typo-Specimen H1 */ --fs-marquee: clamp(3.6rem, 2rem + 8vw, 9.5rem); /* Laufband */ /* --- Typografie: Line-Height / Tracking / Weights -------------------- */ --lh-tight: 1.02; --lh-snug: 1.12; --lh-base: 1.6; --lh-relaxed: 1.72; --ls-tighter: -0.035em; --ls-tight: -0.02em; --ls-normal: 0em; --ls-wide: 0.08em; --ls-wider: 0.18em; /* Eyebrow/Kicker in Small-Caps */ --fw-body: 400; --fw-medium: 500; --fw-display: 700; --fw-display-x:800; /* --- Spacing-Scale (4/8-Rhythmus, Sektionen fluid) ------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: clamp(3rem, 2rem + 4vw, 6rem); /* Sektions-Innenabstand */ --space-3xl: clamp(4rem, 2.5rem + 6vw, 9rem); /* große Sektionslücke */ /* --- Layout / Container ---------------------------------------------- */ --container: min(92vw, 1200px); --container-wide: min(94vw, 1440px); /* Wide-Stufe (Ultrawide-Guard) */ --container-narrow: min(92vw, 760px); /* Lese-Maß (65–75 Zeichen) */ --header-h: 76px; /* wird per JS real gemessen */ /* --- Radius ----------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; /* --- „Der Schnitt" (Signature): diagonale Schnitt-/Clip-Tokens ------- */ --cut-depth: clamp(28px, 4vw, 72px); /* Tiefe der diagonalen Trenner */ --cut-angle: -7deg; /* Neigung der Schnittkante */ /* Start-/End-Zustände für den clip-path-Scherenschnitt-Reveal: von einer diagonalen Linie aufgeschnitten → volle Fläche. */ --clip-cut-hidden: polygon(0 0, 0 0, 0 100%, 0 100%); --clip-cut-shown: polygon(0 0, 100% 0, 100% 100%, 0 100%); --clip-diag-hidden: polygon(0 0, 0 0, -20% 100%, -20% 100%); /* --- Schatten (warm getönt, espresso-basiert, nicht neutral-grau) ---- */ --shadow-xs: 0 1px 2px rgba(42, 30, 23, 0.08); --shadow-sm: 0 4px 12px -4px rgba(42, 30, 23, 0.14); --shadow-md: 0 12px 30px -10px rgba(42, 30, 23, 0.2); --shadow-lg: 0 30px 70px -24px rgba(42, 30, 23, 0.3); --shadow-brass: 0 0 0 1px rgba(168, 137, 78, 0.35), 0 8px 24px -10px rgba(122, 98, 52, 0.4); /* --- Easing-Kurven ---------------------------------------------------- */ --ease-cut: cubic-bezier(0.85, 0, 0.15, 1); /* Scheren-Snap */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* Reveals */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-strand: cubic-bezier(0.37, 0, 0.63, 1); /* Strähnen-Sway */ /* --- Dauer ------------------------------------------------------------ */ --dur-fast: 180ms; --dur-mid: 320ms; --dur-slow: 620ms; --dur-cut: 720ms; /* Scherenschnitt-Reveal */ /* --- z-index-Skala ---------------------------------------------------- */ --z-base: 0; --z-raise: 10; --z-sticky: 40; --z-header: 100; --z-overlay: 500; --z-modal: 1000; } /* --------------------------------------------------------------------------- 3) OPTIONALE PRIMITIVE HELPER (nur Tokens, keine Hardcodes) Der Builder darf diese nutzen oder eigene Utilities ableiten. --------------------------------------------------------------------------- */ /* Bildgröße an Anzeigegröße koppeln + aspect-ratio nicht aushebeln (Second-Brain: html-height-attr-overrides-css-aspect-ratio). */ img, svg, video { height: auto; max-width: 100%; } /* Kicker / Eyebrow — sparsam einsetzen */ .u-kicker { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--cognac); } /* „Der Schnitt" — diagonaler Sektions-Trenner (Bottom-Cut). Nächste Sektion füllt den Keil; Farbe je Kontext überschreiben. */ .u-cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-depth)), 0 100%); } .u-cut-top { clip-path: polygon(0 var(--cut-depth), 100% 0, 100% 100%, 0 100%); } /* Messing-Folie als Text-Fill (z. B. die „20" im Jubiläums-Hero) — sparsam */ .u-foil { background: var(--brass-foil); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Film-Grain-Overlay gegen den glatten CGI-Look der KI-Ambiente-Layer. Auf KI-Bild-Container als ::after mit data-URI-feTurbulence legen. */ .u-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Fokus-Sichtbarkeit erhalten (a11y, Priorität 1) */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); } /* Preis-/Zahlenspalten: Tabellenziffern gegen Kommastellen-Sprünge */ .u-tnum { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 4) REDUCED MOTION — Signature/Parallax respektieren --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* „Der Schnitt" ohne Bewegung → sofort voll sichtbar */ [data-cut] { clip-path: none !important; } }