Webdesigner aus Köln | Design | Webflow | Animationen | Barrierefreiheit

:root {
  --color-dominant: #ceb487;
  --color-surface: #fbdba3;
  --color-ink: #5e4926;
  --color-accent: #948162;
  --color-detail: #c8a4bf;
}

/* CSS variables exposed by source */
:root {
  --size-144: clamp(6rem, 3.6667rem + 5.3333vi, 9rem);
  --font-family-narrow: "font-narrow-semibold", arial narrow fallback, -apple-system, blinkmacsystemfont, avenir next, avenir, segoe ui, helvetica neue, helvetica, cantarell, ubuntu, roboto, noto, arial, sans-serif;
  --border-radius-3: .1875rem;
  --size-64: clamp(2.5rem, 1.3333rem + 2.6667vi, 4rem);
  --font-size-h2: clamp(2rem, 1.0278rem + 2.2222vi, 3.25rem);
  --font-size-h3: clamp(1.375rem, 1.0833rem + .6667vi, 1.75rem);
  --size-48: clamp(2rem, 1.2222rem + 1.7778vi, 3rem);
  --font-size-p1: clamp(1rem, .9028rem + .2222vi, 1.125rem);
  --color: black;
  --font-size-f2: .75rem;
  --font-family-normal: "font-normal-medium", -apple-system, blinkmacsystemfont, avenir next, avenir, segoe ui, helvetica neue, helvetica, cantarell, ubuntu, roboto, noto, arial, sans-serif;
  --font-size-h1: clamp(5rem, -.0556rem + 11.5556vi, 11.5rem);
  --font-weight-semibold: 600;
  --size-8: .5rem;
  --color-accent-peach: #fcdca6;
  --font-size-c1: .875rem;
  --color-accent-violet: #e5daf6;
  --size-96: clamp(4rem, 2.4444rem + 3.5556vi, 6rem);
  --color-accent: #ffe32e;
  --size-120: clamp(5rem, 3.0556rem + 4.4444vi, 7.5rem);
  --color-background: #f9f4eb;
  --color-background-beige: #f0ece5;
  --font-weight-medium: 500;
  --color-accent-lemon: #fef280;
  --size-24: 1.5rem;
  --size-2: .125rem;
  --size-16: 1rem;
  --font-size-f1: .5rem;
  --font-family-mono: "font-mono-medium", menlo, consolas, monaco, liberation mono, lucida console, monospace;
  --size-12: .75rem;
  --color-accent-pink: #ffd2f3;
  --font-size-p2: clamp(.75rem, .1667rem + 1.3333vi, 1.5rem);
  --size-80: clamp(3rem, 1.4444rem + 3.5556vi, 5rem);
  --size-4: .25rem;
  --size-32: 2rem;
  --letter-spacing-6: -.06em;
  --z-index-overlay: 700;
  --header-height: 3.875rem;
  --z-index-skip-link: 1000;
  --smooth-ease: cubic-bezier(.32, .72, 0, 1);
  --opacity-ease: cubic-bezier(.4, 0, .2, 1);
  --z-index-higher: 2;
  --elastic-ease-out-soft: linear( 0, .029 1.7%, .113 3.6%, .604 11.1%, .809 15%, .949 19.1%, .995 21.3%, 1.026 23.6%, 1.044 26.2%, 1.049 29.3%, 1.01 43.5%, 1 51.2%, 1 );
  --speed-faster: .15s;
  --line-height-135: 1.35em;
  --ci-yellow: #ffe32e;
  --z-index-above: 1;
  --ci-black-60: #0009;
  --grid-column-width: calc( ((14.4px * 100) - (2 * clamp(1.5rem, .3333rem + 2.6667vi, 3rem))) / 12 - (.5rem * (12 - 1) / 12) );
  --z-index-chat-modal: 950;
  --speed-fast: .3s;
  --z-index-default: 0;
  --z-index-preloader: 1100;
  --ci-violet: #e5daf6;
  --ci-peach: #fcdca6;
  --selection-foreground: #ffe32e;
  --ci-cream: #f9f4eb;
  --line-height-110: 1.1em;
  --selection-background: black;
  --speed: .45s;
}