development 31-10-2025
This commit is contained in:
parent
7cf3558ba7
commit
fa2ebd457d
47 changed files with 2980 additions and 452 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue