development 31-10-2025

This commit is contained in:
Kevin Adametz 2025-10-31 17:11:43 +01:00
parent 7cf3558ba7
commit fa2ebd457d
47 changed files with 2980 additions and 452 deletions

File diff suppressed because it is too large Load diff

View file

@ -23,9 +23,10 @@ h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary, 'Inter'), var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
}
/* Typography scales */
.text-hero {
font-size: clamp(3rem, 4vw, 6rem);
font-size: clamp(2.6rem, 3.5vw, 3.6rem);
line-height: 1.1;
font-weight: 300;
letter-spacing: -0.025em;
@ -33,6 +34,7 @@ h1, h2, h3, h4, h5, h6 {
.text-section-title {
font-size: clamp(1.6rem, 3vw, 3rem);
line-height: 1.3em;
font-weight: 300;
letter-spacing: -0.025em;
}
@ -62,6 +64,11 @@ h1, h2, h3, h4, h5, h6 {
/* Button styles */
.btn-primary {
background-color: hsl(var(--primary));
background: linear-gradient(
145deg,
hsl(var(--primary)) 0%,
hsl(var(--primary-light)) 100%
) !important;
color: hsl(var(--primary-foreground));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
@ -74,11 +81,22 @@ h1, h2, h3, h4, h5, h6 {
.btn-primary:hover {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
background: linear-gradient(
145deg,
hsl(var(--primary-light)) 0%,
hsl(var(--primary)) 100%
) !important;
color: hsl(var(--secondary-lighter));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.btn-primary-accent {
background-color: hsl(var(--primary));
background: linear-gradient(
145deg,
hsl(var(--primary)) 0%,
hsl(var(--primary-light)) 100%
) !important;
color: hsl(var(--primary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
@ -92,12 +110,22 @@ h1, h2, h3, h4, h5, h6 {
.btn-primary-accent:hover {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background: linear-gradient(
145deg,
hsl(var(--primary-light)) 0%,
hsl(var(--primary)) 100%
) !important;
color: hsl(var(--secondary-lighter));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.btn-secondary {
background-color: hsl(var(--secondary));
background: linear-gradient(
145deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary-dark)) 100%
) !important;
color: hsl(var(--secondary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
@ -111,11 +139,16 @@ h1, h2, h3, h4, h5, h6 {
.btn-secondary:hover {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
color: hsl(var(--primary-lighter));
}
.btn-secondary-accent {
background-color: hsl(var(--secondary));
background: linear-gradient(
145deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary-dark)) 100%
) !important;
color: hsl(var(--secondary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
@ -128,11 +161,21 @@ h1, h2, h3, h4, h5, h6 {
.btn-secondary-accent:hover {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
background: linear-gradient(
145deg,
hsl(var(--secondary-dark)) 0%,
hsl(var(--secondary)) 100%
) !important;
color: hsl(var(--primary-lighter));
}
.btn-accent {
background-color: hsl(var(--accent));
background: linear-gradient(
145deg,
hsl(var(--accent)) 0%,
hsl(var(--accent-dark)) 100%
) !important;
color: hsl(var(--accent-foreground));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
@ -144,8 +187,12 @@ h1, h2, h3, h4, h5, h6 {
}
.btn-accent:hover {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
background: linear-gradient(
145deg,
hsl(var(--accent-dark)) 0%,
hsl(var(--accent)) 100%
) !important;
color: hsl(var(--accent-foreground));
box-shadow: var(--shadow-accent-glow);
}
@ -267,7 +314,12 @@ h1, h2, h3, h4, h5, h6 {
}
.bg-secondary {
background-color: hsl(var(--secondary));
background: linear-gradient(
180deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary), 0.4) 100%
);
position: relative;
}
.text-secondary-foreground {
@ -302,10 +354,13 @@ h1, h2, h3, h4, h5, h6 {
background-color: hsl(var(--secondary) / 0.1);
}
.bg-secondary\/15 {
background-color: hsl(var(--secondary) / 0.15);
}
.bg-secondary\/20 {
background-color: hsl(var(--secondary) / 0.2);
}
.bg-card\/95 {
background-color: hsl(var(--card) / 0.95);
}
@ -406,8 +461,7 @@ h1, h2, h3, h4, h5, h6 {
/* TopBar specific styles */
.topbar-normal {
background-color: hsl(var(--muted) / 0.2);
border-bottom: 1px solid hsl(var(--border) / 0.3);
background-color: hsl(var(--muted));
}
/* Sticky Header Verhalten */
@ -426,6 +480,8 @@ h1, h2, h3, h4, h5, h6 {
.header-normal {
position: relative;
transition: all 0.3s ease-in-out;
border-bottom: 1px solid hsl(var(--border)/0.3);
}
.bg-muted\/20 {
@ -435,3 +491,154 @@ h1, h2, h3, h4, h5, h6 {
.border-border\/30 {
border-color: hsl(var(--border) / 0.3);
}
.font-secondary {
font-family: var(--font-secondary, 'Inter'), var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
}
/* Premium Scroll Animations - Optimiert und subtil */
.scroll-animate {
opacity: 0;
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animate.is-visible {
opacity: 1;
}
/* Fade In - Sanftes Einblenden */
.fade-in {
opacity: 0;
will-change: opacity;
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in.is-visible {
opacity: 1;
}
/* Slide from Bottom - Subtiler */
.slide-up {
opacity: 0;
transform: translateY(30px);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-up.is-visible {
opacity: 1;
transform: translateY(0);
}
.slide-down {
opacity: 0;
transform: translateY(-30px);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-down.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Slide from Left - Subtiler */
.slide-right {
opacity: 0;
transform: translateX(-30px);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-right.is-visible {
opacity: 1;
transform: translateX(0);
}
/* Slide from Right - Subtiler */
.slide-left {
opacity: 0;
transform: translateX(30px);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-left.is-visible {
opacity: 1;
transform: translateX(0);
}
/* Scale In - Sehr subtil */
.scale-in {
opacity: 0;
transform: scale(0.97);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scale-in.is-visible {
opacity: 1;
transform: scale(1);
}
/* Staggered delays - Für gestaffelte Animationen */
.delay-100 {
transition-delay: 0.1s;
}
.delay-200 {
transition-delay: 0.2s;
}
.delay-300 {
transition-delay: 0.3s;
}
.delay-400 {
transition-delay: 0.4s;
}
.delay-500 {
transition-delay: 0.5s;
}
.delay-600 {
transition-delay: 0.6s;
}
.delay-700 {
transition-delay: 0.7s;
}
.delay-800 {
transition-delay: 0.8s;
}
.delay-900 {
transition-delay: 0.9s;
}
.delay-1000 {
transition-delay: 1s;
}
/* Reduziere Motion für Nutzer mit Präferenz */
@media (prefers-reduced-motion: reduce) {
.scroll-animate,
.fade-in,
.slide-up,
.slide-right,
.slide-left,
.scale-in {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}

View file

@ -17,16 +17,23 @@
/* B2IN Theme Colors */
--primary: 209 32% 25%; /* #2b3f51 - Anthracite */
--primary-light: 209 32% 35%; /* #2b3f51 - Anthracite */
--primary-lighter: 209 32% 85%; /* #2b3f51 - Anthracite */
--primary-dark: 209 32% 20%; /* #2b3f51 - Anthracite */
--primary-foreground: 0 25% 96%; /* #hsl(0 25% 96%) - Off White */
--secondary: 199 74% 49%; /* #20a0da - Dynamic Blue */
--secondary-light: 199 74% 56%; /* #20a0da - Dynamic Blue */
--secondary-lighter: 199 74% 75%; /* #20a0da - Dynamic Blue */
--secondary-dark: 199 74% 42%; /* #20a0da - Dynamic Blue */
--secondary-foreground: 0 25% 96%; /* hsl(0 25% 96%) - Off White */
/* Neutral colors */
--muted: 0 0% 92%; /* hsl(0 0% 92%) - Light Muted */
--muted-foreground: 199 50% 45%; /* #4a8bb5 - Muted Blue */
--muted-foreground: 199 50% 35%; /* #4a8bb5 - Muted Blue */
--accent: 210 0% 94%; /* hsl(210 5.26% 92.55%) - Light Accent */
--accent: 210 0% 90%; /* hsl(210 5.26% 92.55%) - Light Accent */
--accent-dark: 210 0% 85%; /* hsl(210 5.26% 92.55%) - Light Accent */
--accent-foreground: 20 14% 16%; /* #2a2a2a - Dark Gray */
/* Dark section colors */
@ -45,7 +52,9 @@
--radius: 0.75rem;
/* Hero container background */
--hero-container: 0 0% 91%; /* #e8e8e8 - Light Gray */
--hero-container: 0 0% 93%; /* #e8e8e8 - Light Gray */
--hero-container-dark: 0 0% 85%; /* #e8e8e8 - Light Gray */
--hero-container-light: 0 0% 95%; /* #e8e8e8 - Light Gray */
/* Consistent shadows */
--shadow-warm: 0 10px 30px -15px hsl(var(--foreground) / 0.1);
@ -62,7 +71,195 @@
--font-secondary: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
}
}
/* Shadow Effects - Updated for new primary color */
.shadow-elegant {
box-shadow: 0 10px 30px -10px rgba(0, 136, 204, 0.2);
}
.shadow-elegant-white {
box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.2);
}
.shadow-white {
box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.4);
}
.elegant-shadow-card {
box-shadow:
0 2px 8px -2px rgba(0, 0, 0, 0.08),
0 4px 10px 0px rgba(0, 136, 204,1);
}
.shadow-premium {
box-shadow: 0 20px 60px -15px rgba(0, 136, 204, 0.3);
}
/* Glow Effects - Inspired by Möbius band's luminous edge */
.glow-soft {
box-shadow:
0 0 10px rgba(0, 155, 221, 0.15),
0 0 20px rgba(0, 155, 221, 0.1),
0 4px 10px -4px rgba(0, 136, 204, 0.2);
}
.glow-medium {
box-shadow:
0 0 15px rgba(0, 155, 221, 0.25),
0 0 30px rgba(0, 155, 221, 0.15),
0 5px 10px -5px rgba(0, 136, 204, 0.3);
}
.glow-strong {
box-shadow:
0 0 30px rgba(0, 155, 221, 0.35),
0 0 60px rgba(0, 155, 221, 0.2),
0 0 90px rgba(0, 113, 168, 0.1),
0 10px 10px -10px rgba(0, 136, 204, 0.4);
}
.icon-secondary-linear {
background-color: hsl(var(--secondary) / 0.1);
background: linear-gradient(
135deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary-dark)) 100%
);
color: hsl(var(--secondary-foreground)) !important;
position: relative;
}
.text-section-title {
line-height: 0.95em;
}
.variante-glass-flow {
& * {
will-change: auto;
} section,
& .section-container {
background: linear-gradient(
135deg,
hsl(var(--background)) 0%,
hsl(var(--background)/90%) 100%
);
position: relative;
}
& section.bg-accent {
background: linear-gradient(
135deg,
hsl(var(--accent) /0.5) 0%,
hsl(var(--accent-dark) / 0.5) 100%
);
position: relative;
}
& section.bg-secondary {
background: linear-gradient(
135deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary-dark)) 100%
);
position: relative;
}
& div.bg-hero-container {
border: 1px solid rgba(255, 255, 255, 0.9);
background: linear-gradient(
135deg,
hsl(var(--hero-container)) 0%,
hsl(var(--hero-container-dark)) 100%
);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Cards - Multi-Layer-Schatten für Tiefe (Optimiert) */
& .card,
& [class*="card"],
& .bg-card,
& article {
background:
linear-gradient(
145deg,
hsl(0 0% 100%) 0%,
hsl(0 0% 99.5%) 40%,
hsl(0 0% 99%) 100%
);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.03),
0 1px 1px rgba(0, 0, 0, 0.02),
0 2px 3px rgba(0, 0, 0, 0.025),
0 4px 6px rgba(0, 0, 0, 0.03),
0 8px 12px rgba(0, 0, 0, 0.04),
0 12px 20px rgba(0, 0, 0, 0.045),
inset 0 1px 2px rgba(255, 255, 255, 0.8),
inset 0 -1px 1px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(255, 255, 255, 0.9);
transition:
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.3s ease;
position: relative;
}
& .card:hover,
& [class*="card"]:hover,
& article:hover {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.04),
0 2px 4px rgba(0, 0, 0, 0.03),
0 4px 8px rgba(0, 0, 0, 0.04),
0 8px 16px rgba(0, 0, 0, 0.05),
0 16px 24px rgba(0, 0, 0, 0.07),
0 24px 40px rgba(0, 0, 0, 0.08),
0 32px 64px rgba(0, 0, 0, 0.06),
inset 0 1px 3px rgba(255, 255, 255, 0.9),
inset 0 -1px 2px rgba(0, 0, 0, 0.03);
transform: translateY(-2px) scale(1.005);
filter: brightness(1.01);
}
& button,
& .btn,
& .btn-secondary,
& a[class*="btn"],
& [role="button"] {
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.05),
0 2px 4px rgba(0, 0, 0, 0.06),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.05);
transition:
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
filter 0.2s ease;
}
& button:hover,
& .btn:hover,
& .btn-secondary:hover,
& a[class*="btn"]:hover,
& [role="button"]:hover {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06),
0 4px 8px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.1),
0 16px 32px rgba(0, 0, 0, 0.08),
0 0 40px hsla(199, 74%, 49%, 0.3);
transform: translateY(-2px);
filter: brightness(1.08);
}
/* Scroll-Optimierung für sanftere Animationen */
& {
scroll-behavior: smooth;
}
}
@import "./shared-styles.css";