/* ========================================================================== Merava Private — Design Tokens -------------------------------------------------------------------------- Single source of truth für Farben, Typo, Spacing, Radii, Shadows, Motion. Alle anderen CSS-Files nutzen ausschließlich diese Custom Properties. Niemals Hex-Werte oder rem-Zahlen außerhalb dieser Datei hardcoden. ========================================================================== */ :root { /* ------------------------------------------------------------------------- 1. Farben — 1:1 nach Relume-Webflow-Export ------------------------------------------------------------------------- Drei chromatische Skalen (Harvest-Gold, Dairy-Cream, Wine-Berry) + Neutrals. Color-Scheme-1 ist das einzig aktive Schema. ------------------------------------------------------------------------- */ /* Harvest Gold (Primary-Akzent) */ --color-gold-lightest: #FBF8F1; --color-gold-lighter: #F7F2E3; --color-gold-light: #E4D19F; --color-gold: #D9BE77; /* Main — Buttons, Akzente */ --color-gold-dark: #AD985F; /* Hover */ --color-gold-darker: #564C2F; --color-gold-darkest: #413923; /* Backward-Compat-Aliases */ --color-gold-soft: var(--color-gold-light); --color-gold-deep: var(--color-gold-dark); /* Dairy Cream (Body-/Card-Background-Skala) */ --color-cream-lightest: #FEFCF8; /* Body-BG */ --color-cream-lighter: #FDF9F1; /* Card-BG / Foreground */ --color-cream-light: #FAEAD0; --color-cream: #F9E1BC; --color-cream-dark: #C7B496; --color-cream-darker: #635A4B; --color-cream-darkest: #4A4338; /* Backward-Compat */ --color-cream-deep: var(--color-cream-light); /* Wine Berry (Brand-Akzent für seltene Elemente) */ --color-wine-lightest: #EFE8E8; --color-wine-lighter: #DFD2D2; --color-wine-light: #916262; --color-wine: #622020; --color-wine-dark: #4E1919; --color-wine-darker: #270C0C; --color-wine-darkest: #1D0909; /* Neutrals — Schwarz/Grau-Skala */ --color-black: #000000; /* Text-Primary */ --color-neutral-darker: #191919; /* Anthrazit-Variant — Alternate-Button-Hover */ --color-neutral-dark: #4C4C4C; --color-neutral: #7F7F7F; --color-neutral-light: #B2B2B2; --color-neutral-lighter: #D8D8D8; --color-neutral-lightest:#F2F2F2; --color-white: #FFFFFF; /* Backward-Compat */ --color-anthracite: var(--color-neutral-darker); --color-anthracite-soft: var(--color-neutral-dark); --color-anthracite-mute: var(--color-neutral); /* Dark-Surface */ --color-dark: #111318; --color-dark-soft: #1E2128; /* Opacity-Tokens (Borders, Subtle BGs, Overlays) */ --opacity-black-5: rgba(0, 0, 0, 0.05); /* Form-BG default */ --opacity-black-10: rgba(0, 0, 0, 0.10); --opacity-black-15: rgba(0, 0, 0, 0.15); /* Border default */ --opacity-black-20: rgba(0, 0, 0, 0.20); /* Button-Inset-Shadow */ --opacity-black-30: rgba(0, 0, 0, 0.30); --opacity-black-50: rgba(0, 0, 0, 0.50); /* Image-Overlays */ --opacity-black-60: rgba(0, 0, 0, 0.60); /* Placeholder-Text */ --opacity-white-5: rgba(255, 255, 255, 0.05); /* Button-Inset-Glow */ --opacity-white-10: rgba(255, 255, 255, 0.10); /* Alternate-BG */ --opacity-white-15: rgba(255, 255, 255, 0.15); --opacity-white-25: rgba(255, 255, 255, 0.25); /* Button-Inset-Sheen */ --opacity-white-60: rgba(255, 255, 255, 0.60); /* Placeholder Alt */ --color-line: var(--opacity-black-15); --color-line-dark: var(--opacity-white-15); /* ----------------------------------------------------------------------- Semantic Aliases — überall im UI nutzen ----------------------------------------------------------------------- */ --bg-primary: var(--color-cream-lightest); /* #FEFCF8 — Body */ --bg-elevated: var(--color-cream-lighter); /* #FDF9F1 — Cards */ --bg-dark: var(--color-dark); --bg-subtle: var(--opacity-black-5); /* Form-Inputs default */ --text-primary: var(--color-black); /* #000 */ --text-secondary: var(--color-neutral-dark); /* #4C4C4C */ --text-muted: var(--color-neutral); /* #7F7F7F */ --text-on-dark: var(--color-white); --accent: var(--color-gold); /* #D9BE77 */ --accent-hover: var(--color-gold-light); --accent-active: var(--color-gold-dark); /* #AD985F */ --border: var(--color-line); /* rgba(0,0,0,.15) */ --border-dark: var(--color-line-dark); --border-subtle: var(--opacity-black-5); /* Form-Default */ /* ------------------------------------------------------------------------- 2. Typografie ------------------------------------------------------------------------- Display = Righteous (Headlines) Body = Poppins (Fließtext, UI) Fallbacks systemnah, kein FOIT. ------------------------------------------------------------------------- */ --font-display: "Righteous", "Times New Roman", Georgia, serif; --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Font-Weights — semantisch Relume-aligned: Bold (700) für Card-Titles und kleine Headings, SemiBold (600) für Eyebrows/Tags, Medium (500) für Buttons, Regular (400) für Body. Righteous gibt es nur in Regular. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Modular Type-Scale (rem-basiert) — 1:1 nach Relume-Webflow */ --text-xs: 0.75rem; /* 12 px */ --text-sm: 0.875rem; /* 14 px */ --text-base: 1rem; /* 16 px — Body */ --text-md: 1.125rem; /* 18 px — Comfortable Body */ --text-lg: 1.25rem; /* 20 px — Lead-Para */ --text-xl: 1.625rem; /* 26 px — H6 Default */ --text-2xl: 2rem; /* 32 px — H5 Default */ --text-3xl: 2.5rem; /* 40 px — H4 Default */ --text-4xl: 3rem; /* 48 px — H3 Default */ --text-5xl: 3.75rem; /* 60 px — H2 Default */ --text-6xl: 5.25rem; /* 84 px — H1 Default */ /* Legacy-Aliases für ältere Klassen */ --text-7xl: 6rem; /* 96 px */ --text-8xl: 7rem; /* 112 px */ --text-9xl: 8rem; /* 128 px */ --text-10xl: 9rem; /* 144 px */ /* Line-Heights — Webflow-Spec */ --leading-tight: 1.1; /* H1 */ --leading-snug: 1.2; /* H2-H6 */ --leading-normal: 1.5; /* UI */ --leading-body: 1.6; /* Body — Webflow-Default */ --leading-relaxed: 1.7; /* Long-Form */ /* Letter-Spacing — Webflow-Spec (dezent positiv, ~1% der Font-Size) */ --tracking-h1: 0.0525rem; --tracking-h2: 0.0375rem; --tracking-h3: 0.03rem; --tracking-h4: 0.025rem; --tracking-h5: 0.02rem; --tracking-h6: 0.01625rem; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; /* ------------------------------------------------------------------------- 3. Spacing-Scale ------------------------------------------------------------------------- Lineare Skala in rem. Keine eigenen Pixel-Werte in Komponenten. ------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ /* Sektion-Padding-Vertical — Webflow-Spec Section-Padding (top + bottom je). Premium/Editorial-Niveau — spürbar mehr Luft als Standard-Websites (Aman/Bottega-Ästhetik). large: 9rem desktop / 7rem tablet / 5rem mobile (Standard) tight: 6rem / 5rem / 3.5rem */ --section-py-mobile: 5rem; /* 80 px */ --section-py-tablet: 7rem; /* 112 px */ --section-py-desktop: 9rem; /* 144 px */ --section-py-mobile-tight: 3.5rem; /* 56 px */ --section-py-tablet-tight: 5rem; /* 80 px */ --section-py-desktop-tight: 6rem; /* 96 px */ /* ------------------------------------------------------------------------- 4. Layout-Container — Webflow-Spec ------------------------------------------------------------------------- */ --container-small: 48rem; /* 768 px */ --container-medium: 64rem; /* 1024 px */ --container-large: 80rem; /* 1280 px */ /* Backward-Compat-Aliases */ --container-narrow: var(--container-small); --container-default: var(--container-large); --container-wide: var(--container-large); /* Horizontaler Gutter des .container (damit Inhalt auf schmalen Fenstern nicht am Rand klebt). Die .container-max-widths rechnen 2x diesen Wert drauf, sodass die Content-Breite auf breiten Screens gleich bleibt. Mobile-first + responsiv: auf Mobile ist der Gutter die EINZIGE horizontale Quelle (.section gibt da kein inline-padding mehr dazu -> kein Doppel- Padding). Werte je Breite siehe utilities.css. */ --container-gutter: 1rem; /* 16 px — Hochformat (Default) */ /* Section-Side-Padding (Webflow .padding-global) */ --section-inline-padding: 5%; /* ------------------------------------------------------------------------- 5. Radii — 1:1 nach Webflow ------------------------------------------------------------------------- - Buttons + Form-Inputs = 6 px (HARDCODED im Webflow-CSS) - Cards / Surfaces = 8 px - Tags / Checkbox = 2-4 px - Radio = 100% (rund) ------------------------------------------------------------------------- */ --radius-xs: 2px; /* Checkbox */ --radius-sm: 4px; /* Code-Inline, Tags */ --radius-button: 6px; /* Buttons + Form-Inputs (Webflow-Hardcoded) */ --radius-card: 8px; /* Cards, größere Surfaces */ --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* Radio-Buttons, Pills */ /* ------------------------------------------------------------------------- 6. Shadows — 1:1 nach Webflow-Utility-Klassen ------------------------------------------------------------------------- */ --shadow-xxs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-sm: 0 4px 8px -2px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03); --shadow-lg: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03); --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.18); --shadow-xxl: 0 32px 64px -12px rgba(0, 0, 0, 0.14); /* Button-Multi-Layer-Shadow (Webflow-Default-State, identisch im :hover bis auf letzte Layer) Layers: Bottom-Inset-Dark, Top-White-Glow, Top-Inset-Sheen, Inner-Border, Outer-Drop */ --shadow-button: inset 0 -2px 1px 0 rgba(0, 0, 0, 0.20), inset 0 32px 24px 0 rgba(255, 255, 255, 0.05), inset 0 1px 1px 1px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-button-hover: inset 0 -2px 1px 0 rgba(0, 0, 0, 0.20), inset 0 32px 24px 0 rgba(255, 255, 255, 0.05), inset 0 1px 1px 1px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.05); /* Subtle-Button (Secondary) Shadow — viel softer */ --shadow-button-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.05); /* ------------------------------------------------------------------------- 7. Motion — Webflow-Spec: alles browser-default `ease`, 200 ms ------------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-default: ease; /* Browser-Default für Buttons + Inputs */ --ease-linear: linear; --duration-fast: 150ms; --duration-base: 200ms; /* Buttons, Inputs, Hover-Color-Shifts */ --duration-card: 400ms; /* Cards (Image-Scale, Link-Arrow) */ --duration-slow: 500ms; --duration-slower: 700ms; /* ------------------------------------------------------------------------- 8. Z-Index — semantische Skala ------------------------------------------------------------------------- */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; /* ------------------------------------------------------------------------- 9. Breakpoints (nicht direkt nutzbar in :root, hier dokumentiert + via min-width verwendet) ------------------------------------------------------------------------- */ /* --bp-sm: 30em; 480px */ /* --bp-md: 48em; 768px */ /* --bp-lg: 64em; 1024px */ /* --bp-xl: 80em; 1280px */ /* --bp-xxl: 96em; 1536px */ } /* ========================================================================== Responsive Overrides -------------------------------------------------------------------------- Type-Scale skaliert nach unten auf Mobile (große Display-Sizes würden brechen). Wir verkleinern die obersten Grade. ========================================================================== */ /* Tablet (≤ 991 px) */ @media (max-width: 61.9375em) { :root { --text-6xl: 3.25rem; /* H1 84 → 52 px */ --text-5xl: 2.75rem; /* H2 60 → 44 px */ --text-4xl: 2.25rem; /* H3 48 → 36 px */ --text-3xl: 1.75rem; /* H4 40 → 28 px */ } } /* Mobile (≤ 767 px) */ @media (max-width: 47.9375em) { :root { --text-6xl: 2.5rem; /* H1 84 → 40 px */ --text-5xl: 2.25rem; /* H2 60 → 36 px */ --text-4xl: 2rem; /* H3 48 → 32 px */ --text-3xl: 1.5rem; /* H4 40 → 24 px */ --text-2xl: 1.25rem; /* H5 32 → 20 px */ --text-xl: 1.125rem; /* H6 26 → 18 px */ } } /* ========================================================================== Reduced Motion -------------------------------------------------------------------------- Respektiert Nutzer-Präferenz. Wirkt auf alle Tokens, die animieren. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }