23-01-2026
This commit is contained in:
parent
07959c0ba2
commit
854ce02bf6
166 changed files with 32909 additions and 1262 deletions
|
|
@ -63,13 +63,53 @@ select:focus[data-flux-control] {
|
|||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* Verbesserte Kontraste für Input-Werte */
|
||||
input[data-flux-control],
|
||||
textarea[data-flux-control],
|
||||
select[data-flux-control] {
|
||||
@apply text-zinc-900 dark:text-zinc-50;
|
||||
}
|
||||
|
||||
/* Placeholder sollte deutlich heller sein */
|
||||
input[data-flux-control]::placeholder,
|
||||
textarea[data-flux-control]::placeholder {
|
||||
@apply text-zinc-400 dark:text-zinc-700;
|
||||
}
|
||||
|
||||
.shadow-elegant {
|
||||
box-shadow: 0 4px 12px -8px rgba(0, 136, 204, 0.4);
|
||||
}
|
||||
.bg-background {
|
||||
background-color: hsl(var(--background));
|
||||
|
||||
& button,
|
||||
& .btn,
|
||||
& .btn-secondary,
|
||||
& a[class*="btn"],
|
||||
& [role="button"] {
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
& button:hover,
|
||||
& .btn:hover,
|
||||
& .btn-secondary:hover,
|
||||
& a[class*="btn"]:hover,
|
||||
& [role="button"]:hover {
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.06),
|
||||
0 2px 4px rgba(0, 0, 0, 0.08),
|
||||
0 4px 8px rgba(0, 0, 0, 0.1),
|
||||
0 8px 16px rgba(0, 0, 0, 0.08),
|
||||
0 0 10px hsla(199, 74%, 49%, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Scroll-Optimierung für sanftere Animationen */
|
||||
& {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Theme-specific button styles for Backend Portal */
|
||||
|
||||
|
|
|
|||
|
|
@ -83,16 +83,16 @@ h1, h2, h3, h4, h5, h6 {
|
|||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: hsl(var(--secondary));
|
||||
background-color: hsl(var(--primary-dark));
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -112,6 +112,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary-accent:hover {
|
||||
|
|
@ -121,7 +122,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||
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);
|
||||
}
|
||||
|
||||
|
|
@ -141,12 +141,18 @@ h1, h2, h3, h4, h5, h6 {
|
|||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: hsl(var(--primary));
|
||||
color: hsl(var(--primary-lighter));
|
||||
}
|
||||
background-color: hsl(var(--secondary-dark));
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
hsl(var(--secondary-dark)) 0%,
|
||||
hsl(var(--secondary)) 100%
|
||||
) !important;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.btn-secondary-accent {
|
||||
background-color: hsl(var(--secondary));
|
||||
|
|
@ -163,6 +169,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary-accent:hover {
|
||||
|
|
@ -172,9 +179,14 @@ h1, h2, h3, h4, h5, h6 {
|
|||
hsl(var(--secondary-dark)) 0%,
|
||||
hsl(var(--secondary)) 100%
|
||||
) !important;
|
||||
color: hsl(var(--primary-lighter));
|
||||
}
|
||||
|
||||
.btn-secondary-accent.small {
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
|
||||
.btn-accent {
|
||||
background-color: hsl(var(--accent));
|
||||
background: linear-gradient(
|
||||
|
|
@ -190,6 +202,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-accent:hover {
|
||||
|
|
@ -648,3 +661,191 @@ h1, h2, h3, h4, h5, h6 {
|
|||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,8 +14,14 @@
|
|||
|
||||
/* B2A Theme Colors */
|
||||
--primary: 207 70% 26%; /* #123f6d - Azur Blue */
|
||||
--primary-light: 207 70% 36%; /* #123f6d - Azur Blue */
|
||||
--primary-lighter: 207 70% 86%; /* #123f6d - Azur Blue */
|
||||
--primary-dark: 207 70% 20%; /* #123f6d - Azur Blue */
|
||||
--primary-foreground: 30 25% 98%; /* #faf9f7 - Off White */
|
||||
--secondary: 352 76% 48%; /* #ce1d2e - Liberty Red */
|
||||
--secondary-light: 352 76% 56%; /* #ce1d2e - Liberty Red */
|
||||
--secondary-lighter: 352 76% 75%; /* #ce1d2e - Liberty Red */
|
||||
--secondary-dark: 352 76% 42%; /* #ce1d2e - Liberty Red */
|
||||
--secondary-foreground: 0 25% 96%; /* #hsl(0 25% 96%) - Off White */
|
||||
|
||||
/* Neutral colors */
|
||||
|
|
@ -39,13 +45,18 @@
|
|||
|
||||
/* Hero container background */
|
||||
--hero-container: 0 0% 91%; /* #e8e8e8 - Light Gray */
|
||||
|
||||
--hero-container-dark: 0 0% 83%; /* #e8e8e8 - Light Gray */
|
||||
--hero-container-light: 0 0% 93%; /* #e8e8e8 - Light Gray */
|
||||
/* Shadows */
|
||||
--shadow-warm: 0 10px 30px -15px hsl(var(--foreground) / 0.1);
|
||||
--shadow-card: 0 4px 20px -8px hsl(var(--foreground) / 0.08);
|
||||
--shadow-elevated: 0 20px 40px -20px hsl(var(--foreground) / 0.15);
|
||||
--shadow-accent-glow: 0 0 30px hsl(var(--secondary) / 0.3);
|
||||
|
||||
/* Transitions */
|
||||
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Font families */
|
||||
--font-primary: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-secondary: 'Merriweather', Georgia, serif;
|
||||
|
|
|
|||
|
|
@ -72,192 +72,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
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 {
|
||||
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";
|
||||
|
|
|
|||
|
|
@ -14,8 +14,14 @@
|
|||
|
||||
/* Stileigentum Theme Colors */
|
||||
--primary: 209 65% 20%; /* #123453 - Imperial Blue */
|
||||
--primary-light: 209 65% 30%; /* #123453 - Imperial Blue */
|
||||
--primary-lighter: 209 65% 80%; /* #123453 - Imperial Blue */
|
||||
--primary-dark: 209 65% 15%; /* #123453 - Imperial Blue */
|
||||
--primary-foreground: 0 25% 96%; /* #hsl(0 25% 96%) - Off White */
|
||||
--secondary: 38 40% 66%; /* #c9ac84 - Sand Gold */
|
||||
--secondary-light: 38 40% 76%; /* #c9ac84 - Sand Gold */
|
||||
--secondary-lighter: 38 40% 85%; /* #c9ac84 - Sand Gold */
|
||||
--secondary-dark: 38 40% 55%; /* #c9ac84 - Sand Gold */
|
||||
--secondary-foreground: 20 14% 16%; /* #2a2a2a - Dark Gray */
|
||||
|
||||
/* Neutral colors */
|
||||
|
|
@ -38,13 +44,18 @@
|
|||
|
||||
/* Hero container background */
|
||||
--hero-container: 0 0% 91%; /* #e8e8e8 - Light Gray */
|
||||
|
||||
--hero-container-dark: 0 0% 83%; /* #e8e8e8 - Light Gray */
|
||||
--hero-container-light: 0 0% 93%; /* #e8e8e8 - Light Gray */
|
||||
/* Shadows */
|
||||
--shadow-warm: 0 10px 30px -15px hsl(var(--foreground) / 0.1);
|
||||
--shadow-card: 0 4px 20px -8px hsl(var(--foreground) / 0.08);
|
||||
--shadow-elevated: 0 20px 40px -20px hsl(var(--foreground) / 0.15);
|
||||
--shadow-accent-glow: 0 0 30px hsl(var(--secondary) / 0.3);
|
||||
|
||||
/* Transitions */
|
||||
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Font families */
|
||||
--font-primary: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-secondary: 'EB Garamond', Georgia, serif;
|
||||
|
|
|
|||
|
|
@ -14,8 +14,14 @@
|
|||
|
||||
/* Style2own Theme Colors */
|
||||
--primary: 195 100% 34%; /* #007aab - Style Blue */
|
||||
--primary-light: 195 100% 44%; /* #007aab - Style Blue */
|
||||
--primary-lighter: 195 100% 84%; /* #007aab - Style Blue */
|
||||
--primary-dark: 195 100% 24%; /* #007aab - Style Blue */
|
||||
--primary-foreground: 30 25% 98%; /* #faf9f7 - Off White */
|
||||
--secondary: 46 95% 56%; /* #fbaf22 - Style Sun */
|
||||
--secondary-light: 46 95% 66%; /* #fbaf22 - Style Sun */
|
||||
--secondary-lighter: 46 95% 86%; /* #fbaf22 - Style Sun */
|
||||
--secondary-dark: 46 95% 46%; /* #fbaf22 - Style Sun */
|
||||
--secondary-foreground: 20 14% 16%; /* #2a2a2a - Dark Gray */
|
||||
|
||||
/* Neutral colors */
|
||||
|
|
@ -39,6 +45,12 @@
|
|||
|
||||
/* Hero container background */
|
||||
--hero-container: 0 0% 91%; /* #e8e8e8 - Light Gray */
|
||||
--hero-container-dark: 0 0% 83%; /* #e8e8e8 - Light Gray */
|
||||
--hero-container-light: 0 0% 93%; /* #e8e8e8 - Light Gray */
|
||||
|
||||
/* Transitions */
|
||||
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-warm: 0 10px 30px -15px hsl(var(--foreground) / 0.1);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue